From 2661e2fed477e94f5f048ef3fc8aec40acef01d0 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期四, 05 二月 2026 11:37:34 +0800
Subject: [PATCH] feat: 首页工序数据生产统计明细、质量统计接口对接

---
 src/views/reportAnalysis/productionAnalysis/components/left-top.vue |   46 ++++++++++++++++++++++++++++++++++------------
 1 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
index 07dfb54..932def8 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/left-top.vue
@@ -5,8 +5,8 @@
       <div class="filters-row">
         <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />
       </div>
-      <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="echartsRef"
           :chartStyle="chartStyle"
@@ -23,11 +23,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import { productSalesAnalysis } from '@/api/viewIndex.js'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { processOutputAnalysis } from '@/api/viewIndex.js'
 import PanelHeader from './PanelHeader.vue'
 import Echarts from '@/components/Echarts/echarts.vue'
 import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue'
+import { useChartBackground } from '@/hooks/useChartBackground.js'
+
+const pieWrapperRef = ref(null)
+const pieBackgroundRef = ref(null)
 
 const dateType = ref(1) // 1=鍛� 2=鏈� 3=瀛ｅ害
 
@@ -69,7 +73,7 @@
     formatter: function (name) {
       const item = pieObjData.value[name]
       if (!item) return name
-      return `{title|${name}}{value|${item.value}}{unit|鍏儅{percent|${item.rate}}{unit|%}`
+      return `{title|${name}}{value|${item.value}}{unit|浠秨{percent|${item.rate}}{unit|%}`
     },
     textStyle: {
       rich: {
@@ -102,12 +106,12 @@
 
 const pieTooltip = {
   trigger: 'item',
-  formatter: '{a} <br/>{b} : {c}鍏� ({d}%)',
+  formatter: '{a} <br/>{b} : {c}浠� ({d}%)',
 }
 
 const pieSeries = computed(() => [
   {
-    name: '浜у搧閿�鍞噾棰濆垎鏋�',
+    name: '宸ュ簭浜у嚭鍒嗘瀽',
     type: 'pie',
     radius: '60%',
     center: ['25%', '50%'],
@@ -133,8 +137,20 @@
   textStyle: { color: '#B8C8E0' },
 }
 
+// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉�
+// 鍥捐〃涓績鏄� ['25%', '50%']锛岃儗鏅渶瑕佸榻愬埌杩欎釜浣嶇疆
+const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
+  wrapperRef: pieWrapperRef,
+  backgroundRef: pieBackgroundRef,
+  left: '25%',       // 鍥捐〃涓績 X 鏄� 25%
+  top: '50%',        // 鍥捐〃涓績 Y 鏄� 50%
+  offsetX: '-51.5%', // X 杞村亸绉�
+  offsetY: '-50%',   // Y 杞村亸绉�
+  watchData: pieDatas // 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ皟鏁翠綅缃�
+})
+
 const fetchData = () => {
-  productSalesAnalysis()
+  processOutputAnalysis({ dateType: dateType.value })
     .then((res) => {
       if (res.code === 200 && Array.isArray(res.data)) {
         const items = res.data
@@ -146,7 +162,7 @@
       }
     })
     .catch((err) => {
-      console.error('鑾峰彇浜у搧閿�鍞噾棰濆垎鏋愬け璐�:', err)
+      console.error('鑾峰彇宸ュ簭浜у嚭鍒嗘瀽澶辫触:', err)
     })
 }
 
@@ -156,6 +172,11 @@
 
 onMounted(() => {
   fetchData()
+  initBackground()
+})
+
+onBeforeUnmount(() => {
+  cleanupBackground()
 })
 </script>
 
@@ -190,9 +211,6 @@
 
 .pie-background {
   position: absolute;
-  left: 25%;
-  top: 50%;
-  transform: translate(-51.5%, -50%);
   width: 310px;
   height: 310px;
   background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
@@ -201,5 +219,9 @@
   background-repeat: no-repeat;
   z-index: 1;
   pointer-events: none;
+  /* 浣嶇疆鐢� JS 鍔ㄦ�佽缃紝榛樿灞呬腑 */
+  left: 25%;
+  top: 50%;
+  transform: translate(-51.5%, -50%);
 }
 </style>

--
Gitblit v1.9.3