refactor(layout): 调整布局样式并优化轮播卡片组件

云

2026-09-15 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue

@@ -2,88 +2,156 @@
  <div>
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 100%"> 
      <div class="pie-chart-wrapper">
        <div class="pie-center">
          <span class="pie-center-value">{{ totalCategories }}</span>
          <span class="pie-center-label">合计(类)</span>
        </div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
          :grid="grid"
          :legend="workInProcessBarLegend"
          :series="workInProcessBarSeries"
          :tooltip="tooltip"
          :xAxis="workInProcessXAxis"
          :yAxis="workInProcessYAxis"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          :legend="landLegend"
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="pieOptions"
          style="height: 100%"
          class="work-in-process-chart"
        />
          class="land-chart"
        >
          <div v-if="loaded && !dataList.length" class="chart-empty">暂无数据</div>
        </Echarts>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
import { BI, baseChartOptions, withTooltip } from '../../theme.js'

// 在制品工序柱状图配置
const workInProcessXAxis = ref([
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { 
      color: '#B8C8E0',
      interval: 0,
      rotate: 25
const dataList = ref([])
const loaded = ref(false)

const landColors = BI.series

// 大类总数（各分类下的类目数之和）
const totalCategories = computed(() =>
  dataList.value.reduce((sum, d) => sum + (Number(d.value) || 0), 0)
)

const landObjData = computed(() => {
  const obj = {}
  dataList.value.forEach((d) => {
    obj[d.name] = d
  })
  return obj
})

// 图例配置（右侧竖排）
const landLegend = computed(() => {
  const data = dataList.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 14,
      color: landColors[idx % landColors.length],
    },
    data: [],
  },
])
  }))

const workInProcessYAxis = [
  {
    type: 'value',
    axisLabel: { color: '#B8C8E0' },
    name: '',
  },
]

const workInProcessBarLegend = {
  show: false,
  textStyle: { color: '#B8C8E0' },
  data: [],
}

const workInProcessBarSeries = ref([
  {
    name: '产品数量',
    type: 'bar',
    barWidth: 25,
    barGap: 0,
    emphasis: {
      focus: 'series',
  return {
    show: data.length > 0,
    orient: 'vertical',
    top: 'center',
    left: '50%',
    itemGap: 20,
    itemWidth: 8,
    itemHeight: 8,
    data,
    formatter(name) {
      const item = landObjData.value[name]
      if (!item) return name
      const short = name.length > 8 ? `${name.slice(0, 8)}…` : name
      return `{title|${short}}{value|${item.value}}{unit|类}`
    },
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#4EE4FF' },
          { offset: 1, color: '#00A4ED' },
        ],
    textStyle: {
      rich: {
        title: {
          fontSize: 13,
          color: BI.text,
          width: 108,
          overflow: 'truncate',
        },
        value: {
          color: BI.textStrong,
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 10],
        },
        unit: {
          color: BI.text,
          fontSize: 12,
        },
      },
      borderRadius: [4, 4, 0, 0]
    },
  }
})

// 提示框：占比 + 子分类明细
const landTooltip = withTooltip({
  trigger: 'item',
  confine: true,
  formatter(params) {
    const d = params.data || {}
    const val = Number(d.value || 0)
    let html = `${params.marker}<b>${d.name || ''}</b>&nbsp;&nbsp;${val} 类 · ${params.percent}%`
    const children = Array.isArray(d.children) ? d.children : []
    if (children.length) {
      const shown = children.slice(0, 8).map((c) => c.name).join('、')
      html += `<br/><span style="color:${BI.text}">子类：</span>${shown}${children.length > 8 ? '…' : ''}`
    }
    return html
  },
})

// 双层环形饼图
const landSeries = computed(() => [
  {
    name: '产品大类',
    type: 'pie',
    radius: ['42%', '58%'],
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: BI.sliceBorder,
      borderWidth: 2,
      borderRadius: 4,
    },
    label: {
      show: true,
      position: 'top',
      color: '#B8C8E0',
      show: false,
    },
    data: [],
    minAngle: 8,
    data: dataList.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
  },
  {
    // 内圈轨道环
    type: 'pie',
    radius: ['33%', '36%'],
    center: ['25%', '50%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(74, 108, 240, 0.22)',
    },
    data: [1],
  },
])

@@ -92,51 +160,85 @@
  height: '100%',
}

const grid = {
  left: '3%',
  right: '4%',
  bottom: '15%',
  containLabel: true,
}
const pieOptions = baseChartOptions

const tooltip = {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow',
  },
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },
}

// 获取各产品大类分布
const getProductCategoryDistribution = () => {
  productCategoryDistribution()
    .then((res) => {
      if (res.code === 200 && res.data && res.data.items) {
        workInProcessXAxis.value[0].data = res.data.items.map(item => item.name)
        workInProcessBarSeries.value[0].data = res.data.items.map(item => parseInt(item.value))
      }
    })
    .catch((error) => {
      console.error('获取各产品大类分布失败:', error)
    })
const loadData = async () => {
  try {
    const res = await productCategoryDistribution()
    const items = res?.data?.items || []
    dataList.value = items.map((it) => ({
      name: it.name,
      value: Number(it.value || 0),
      rate: it.rate,
      children: Array.isArray(it.children) ? it.children : [],
    }))
  } catch (e) {
    console.error('获取产品大类分布失败:', e)
    dataList.value = []
  } finally {
    loaded.value = true
  }
}

onMounted(() => {
  getProductCategoryDistribution()
  loadData()
})
</script>

<style scoped>
.panel-item-customers {
  border: 1px solid #1a58b0;
  border: 1px solid var(--bi-panel-border);
  background: var(--bi-panel-bg);
  border-radius: 8px;
  padding: 18px;
  width: 100%;
  height: 420px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 384px;
  background: transparent;
}

.pie-center {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 2;
}

.pie-center-value {
  font-weight: 600;
  font-size: 22px;
  color: var(--bi-text-strong);
  font-variant-numeric: tabular-nums;
}

.pie-center-label {
  font-size: 12px;
  color: var(--bi-text);
}

.chart-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-text);
  font-size: 14px;
  letter-spacing: 1px;
  pointer-events: none;
}
</style>