徐州-什克金属 1.产品名称和规格型号改成物料编码和物料描述

gaoluyang

2026-09-21 e5b17e96f050cc12c7ba890d196dd5f7f54926d7

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

@@ -1,9 +1,9 @@
<template>
  <div>
    <PanelHeader title="产品大类" />
    <PanelHeader title="物料编码" />
    <div class="panel-item-customers">
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
      <div class="pie-chart-wrapper" ref="pieWrapperRef">
        <div class="pie-background" ref="pieBackgroundRef"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -21,10 +21,15 @@
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, onBeforeUnmount, inject, watch } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import { productCategoryDistribution } 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([])
@@ -96,7 +101,7 @@
// 双层环形饼图
const landSeries = ref([
  {
    name: '产品大类',
    name: '物料编码',
    type: 'pie',
    radius: ['35%', '55%'],
    center: ['50%', '50%'],
@@ -170,6 +175,15 @@
  textStyle: { color: '#B8C8E0' },
}

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

const loadData = async () => {
  try {
    const res = await productCategoryDistribution()
@@ -182,16 +196,31 @@
    }))
    landLegend.data = dataList.value.map((d) => d.name)
    landSeries.value[0].data = dataList.value
    // 数据加载完成后调整背景位置
    adjustBackgroundPosition()
  } catch (e) {
    console.error('获取产品大类分布失败:', e)
    console.error('获取物料编码分布失败:', e)
    dataList.value = []
    landLegend.data = []
    landSeries.value[0].data = []
  }
}


const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
if (dataDashboardRefreshTick) {
  watch(dataDashboardRefreshTick, () => {
    loadData()
  })
}

onMounted(() => {
  loadData()
  initBackground()
})

onBeforeUnmount(() => {
  cleanupBackground()
})
</script>

@@ -212,9 +241,6 @@

.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
  width: 360px;
  height: 360px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
@@ -223,5 +249,9 @@
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  /* 默认居中，会在 JS 中动态调整 */
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
}
</style>