feat: 进销质量类分析接口对接

gongchunyi

12 小时以前 e1535c267711c7c8d560e8916437167bbcd3156b

 src/views/reportAnalysis/qualityAnalysis/components/right-bottom.vue

@@ -1,43 +1,34 @@
<template>
  <div>
    <PanelHeader title="产品大类" />
    <PanelHeader title="不合格检品处理分析" />
    <div class="panel-item-customers">
      <div class="pie-chart-wrapper" ref="pieWrapperRef">
        <div class="pie-background" ref="pieBackgroundRef"></div>
        <Echarts
            ref="chart"
            :chartStyle="chartStyle"
            :legend="landLegend"
            :series="landSeries"
            :tooltip="landTooltip"
            :color="landColors"
            :options="pieOptions"
            style="height: 100%"
            class="land-chart"
        />
        <Echarts ref="chart" :chartStyle="chartStyle" :legend="landLegend" :series="computedSeries"
          :tooltip="landTooltip" :color="landColors" :options="pieOptions" style="height: 100%" class="land-chart" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
import { unqualifiedProductProcessingAnalysis } from '@/api/viewIndex.js'
import { useChartBackground } from '@/hooks/useChartBackground.js'

const pieWrapperRef = ref(null)
const pieBackgroundRef = ref(null)
const chart = ref(null)

// 数据列表（来自接口）
//  数据列表
const dataList = ref([])

// 颜色列表
//  颜色列表
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']

// label 富文本：为每个颜色生成一个小圆点样式（确保在 label 中可见）
//  label 富文本样式
const dotRich = landColors.reduce((acc, color, idx) => {
  acc[`dot${idx}`] = {
    width: 8,
@@ -49,163 +40,113 @@
  return acc
}, {})

// 图例配置（右侧竖排）
const landLegend = {
//  图例配置
const landLegend = ref({
  show: false,
  icon: 'circle',
  data: [],
  right: '8%',
  top: '40%',
  orient: 'vertical',
  itemGap: 14,
  itemWidth: 6,
  itemHeight: 6,
  textStyle: {
    fontSize: 12,
    color: '#fff',
    rich: {
      unit: {
        color: '#fff',
        fontSize: 12,
        padding: [0, 10, 0, 0],
      },
      text: {
        width: 60,
        color: '#fff',
        fontSize: 12,
      },
    },
  },
  formatter: function (name) {
    const list = dataList.value || []
    const item = list.find((d) => d.name === name)
    if (!item) return name
    const val = Number(item.value || 0)
    const totalValue = list.reduce((sum, it) => sum + Number(it.value || 0), 0)
    const percent = totalValue ? ((val / totalValue) * 100).toFixed(2) : '0.00'
    return `{text|${name}}${val}{unit| 公顷}${percent}{unit|%}`
  },
}
      unit: { color: '#fff', fontSize: 12, padding: [0, 10, 0, 0] },
      text: { width: 60, color: '#fff', fontSize: 12 },
    }
  }
})

// 提示框
//  提示框配置
const landTooltip = {
  // triggerOn: 'hover',
  alwaysShowContent: true,
  trigger: 'item',
  alwaysShowContent: false,
  position: function (pt) {
    return [pt[0], 130]
  },
  formatter: function (params) {
    return `${params.name} (${params.value}类)`
    // 确保 params.data 存在
    if (!params.data) return ''
    const { name, value, rate } = params.data
    return `${name}<br/>数量：${value}个<br/>占比：${rate}%`
  },
}

// 双层环形饼图
const landSeries = ref([
  {
    name: '产品大类',
    type: 'pie',
    radius: ['35%', '55%'],
    center: ['50%', '50%'],
    label: {
      show: true,
      position: 'outside',
      color: '#fff',
      fontSize: 12,
      lineHeight: 18,
      rich: {
        ...dotRich,
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
        child: { fontSize: 12, color: '#fff', lineHeight: 18 },
//  使用计算属性处理 Series
const computedSeries = computed(() => {
  return [
    {
      name: '不合格检品处理分析',
      type: 'pie',
      radius: ['35%', '55%'],
      center: ['50%', '50%'],
      label: {
        show: true,
        position: 'outside',
        color: '#fff',
        rich: {
          ...dotRich,
          parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
          child: { fontSize: 12, color: '#fff', lineHeight: 18 },
        },
        formatter: function (params) {
          if (!params.data) return ''
          const dotKey = `dot${params.dataIndex % landColors.length}`
          return `{${dotKey}|} {parent|${params.data.name} (${params.data.value}个)}`
        },
      },
      formatter: function (params) {
        const children = params?.data?.children || []
        const parentName = params?.data?.name || ''
        const rawVal = params?.data?.value
        const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
        const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
        const dot = `{${dotKey}|} `
        const parentLine = `${dot}{parent|${parentName} (${parentValue}类)}`
        if (!children.length) return parentLine
        // 父级全部显示；子级最多 5 个，超出显示省略号
        const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
        if (children.length > 5) displayed.push('{child|…}')
        return [parentLine, ...displayed].join('\n')
      labelLine: {
        show: true,
        length: 20,
        lineStyle: { color: '#B8C8E0' },
      },
      data: dataList.value,
    },
    labelLine: {
      show: true,
      length: 20,
      length2: 20,
      lineStyle: {
        color: '#B8C8E0',
      },
    {
      // 内圈装饰
      type: 'pie',
      radius: ['35%', '40%'],
      center: ['50%', '50%'],
      silent: true,
      label: { show: false },
      itemStyle: { color: 'rgba(0, 127, 255, 0.25)' },
      data: [1],
    },
    itemStyle: {
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
    },
    data: dataList.value,
  },
  {
    // 内圈
    type: 'pie',
    radius: ['35%', '40%'],
    center: ['50%', '50%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(0, 127, 255, 0.25)',
    },
    data: [1],
  },
])
  ]
})

const chartStyle = {
  width: '100%',
  height: '126%',
}
const chartStyle = { width: '100%', height: '126%' }
const pieOptions = { backgroundColor: 'transparent' }

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

// 使用封装的背景位置调整方法，可自定义偏移值
//  背景处理钩子
const { adjustBackgroundPosition, init: initBackground, cleanup: cleanupBackground } = useChartBackground({
  wrapperRef: pieWrapperRef,
  backgroundRef: pieBackgroundRef,
  offsetX: '-51.5%', // X 轴偏移，可动态调整
  offsetY: '-39%',   // Y 轴偏移，可动态调整
  watchData: dataList // 监听数据变化，自动调整位置
  offsetX: '-51.5%',
  offsetY: '-39%',
  watchData: dataList
})

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 : [],
    }))
    landLegend.data = dataList.value.map((d) => d.name)
    landSeries.value[0].data = dataList.value
    // 数据加载完成后调整背景位置
    adjustBackgroundPosition()
    const res = await unqualifiedProductProcessingAnalysis()
    if (res && res.code === 200) {
      dataList.value = (res.data || []).map((it) => ({
        name: it.name,
        value: Number(it.value || 0),
        rate: it.rate, 
      }))
      landLegend.value.data = dataList.value.map((d) => d.name)

      // 数据更新后微调背景
      setTimeout(() => {
        adjustBackgroundPosition()
      }, 100)
    }
  } catch (e) {
    console.error('获取产品大类分布失败:', e)
    dataList.value = []
    landLegend.data = []
    landSeries.value[0].data = []
    console.error('获取数据失败:', e)
  }
}


onMounted(() => {
  loadData()
@@ -229,7 +170,6 @@
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}

.pie-background {
@@ -242,9 +182,8 @@
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  /* 默认居中，会在 JS 中动态调整 */
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
}
</style>
</style>