PSI数据分析:移除”中心顶部"功能，更新"中心中心“布局以及数据获取逻辑

yyb

2 天以前 bb4e98349106bb1d8f9ee093001bff1428fd0ebc

 src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue

@@ -1,84 +1,52 @@
<template>
  <div>
    <!-- 设备统计 -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">产品周转天数</span>
  <div class="kpi-stack">
    <div class="stats-cards">
      <div
        v-for="item in statItems"
        :key="item.name"
        class="stat-card"
      >
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">{{ item.name }}</span>
          <span class="card-value">{{ item.value }}</span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(item.rate) }}</span>
            <span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
        :grid="grid"
        :legend="barLegend"
        :series="barSeries1"
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import { productTurnoverDays } from '@/api/viewIndex.js'
import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js'

const chartStyle = { width: '100%', height: '100%' }
const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['周转天数'] }
const barSeries1 = ref([
  {
    name: '周转天数',
    type: 'bar',
    barGap: 0,
    barWidth: 30,
    emphasis: { focus: 'series' },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0, y: 1, x2: 0, y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(0,164,237,0)' },
          { offset: 1, color: '#4EE4FF' },
        ],
      },
    },
    data: [],
  },
])
const tooltip = {
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  formatter(params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div>${item.marker} ${item.seriesName}: ${item.value} 天</div>`
    })
    return result
  },
const statItems = ref([])

const formatPercent = (val) => {
  const num = Number(val) || 0
  return `${num.toFixed(2)}%`
}
const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]

const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')

const fetchData = () => {
  productTurnoverDays()
  salesPurchaseStorageProductCount()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const list = res.data
        xAxis1.value[0].data = list.map((d) => d.name)
        barSeries1.value[0].data = list.map((d) => Number(d.value) || 0)
        statItems.value = res.data.map((item) => ({
          name: item.name,
          value: item.value,
          rate: item.rate,
        }))
      }
    })
    .catch((err) => {
      console.error('获取产品周转天数失败:', err)
      console.error('获取销售/采购/储存产品数失败:', err)
    })
}

@@ -88,42 +56,87 @@
</script>

<style scoped>
.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 0 18px 18px;
.kpi-stack {
  flex-shrink: 0;
}

.stats-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  gap: 30px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
.stat-card {
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
  align-items: center;
  background-image: url('@/assets/BI/border@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 142px;
  width: 100%;
  box-sizing: border-box;
}

.equipment-title {
.card-icon {
  width: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
  flex-shrink: 0;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.card-value {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  font-size: 40px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
.card-label {
  font-weight: 400;
  font-size: 19px;
  color: rgba(208, 231, 255, 0.7);
}

.card-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #d0e7ff;
}

.card-compare > span:first-child {
  font-size: 13px;
  opacity: 0.8;
}

.compare-value {
  font-weight: 600;
}

.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px;
}

.compare-up .compare-value,
.compare-up .compare-icon {
  color: #00c853;
}

.compare-down .compare-value,
.compare-down .compare-icon {
  color: #ff5252;
}
</style>