From 018ac11ffce99df1efe62edcc726268b012c766c Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 29 九月 2026 14:30:12 +0800
Subject: [PATCH] 新疆-融邦 1.协同办公-协同审批：采购及销售审批进入销售流程后也可预览在台账上传的附件 2.销售合同号只有直销时显示，别的时候隐藏 3.付款方式设置选项-网银-现金-微信-支票-承兑汇票

---
 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue |   54 ++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
index 581020d..ca95e82 100644
--- a/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
@@ -3,8 +3,8 @@
     <PanelHeader title="閿�鍞搧鍒嗗竷" />
     <div class="main-panel panel-item-customers">
       <CarouselCards :items="cardItems" :visible-count="3" />
-      <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"
@@ -13,7 +13,7 @@
           :tooltip="pieTooltip"
           :color="pieColors"
           :options="pieOptions"
-          style="height: 320px"
+          style="height: 100%"
         />
       </div>
     </div>
@@ -21,11 +21,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from 'vue'
 import { productSalesAnalysis } from '@/api/viewIndex.js'
 import PanelHeader from './PanelHeader.vue'
 import CarouselCards from './CarouselCards.vue'
 import Echarts from '@/components/Echarts/echarts.vue'
+import { useChartBackground } from '@/hooks/useChartBackground.js'
+
+const pieWrapperRef = ref(null)
+const pieBackgroundRef = ref(null)
 
 /**
  * @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
@@ -63,9 +67,9 @@
   }))
 
   return {
-    orient: 'vertical',
-    top: 'center',
-    left: '52%',
+    orient: 'horizontal',
+    bottom: 0,
+    left: 'center',
     itemGap: 30,
     data: data,
     formatter: function (name) {
@@ -112,7 +116,7 @@
     name: '浜у搧閿�鍞噾棰濆垎鏋�',
     type: 'pie',
     radius: '60%',
-    center: ['25%', '50%'],
+    center: ['50%', '45%'],
     itemStyle: {
       borderColor: '#0a1c3a',
       borderWidth: 2,
@@ -137,6 +141,17 @@
 
 const cardItems = ref([])
 
+// 浣跨敤灏佽鐨勮儗鏅綅缃皟鏁存柟娉曪紙涓庡叾浠栨枃浠朵繚鎸佷竴鑷达級
+const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
+  wrapperRef: pieWrapperRef,
+  backgroundRef: pieBackgroundRef,
+  left: '50%',       // 鍥捐〃涓績 X 鏄� 50%
+  top: '45%',        // 鍥捐〃涓績 Y 鏄� 45%锛堜笅闈㈢暀鍑哄浘渚嬬殑浣嶇疆锛�
+  offsetX: '-51.5%', // X 杞村亸绉�
+  offsetY: '-50%',   // Y 杞村亸绉�
+  watchData: pieDatas // 鐩戝惉鏁版嵁鍙樺寲锛岃嚜鍔ㄨ皟鏁翠綅缃�
+})
+
 const fetchData = () => {
   productSalesAnalysis()
     .then((res) => {
@@ -160,8 +175,20 @@
     })
 }
 
+const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
+if (dataDashboardRefreshTick) {
+  watch(dataDashboardRefreshTick, () => {
+    fetchData()
+  })
+}
+
 onMounted(() => {
   fetchData()
+  initBackground()
+})
+
+onBeforeUnmount(() => {
+  cleanupBackground()
 })
 </script>
 
@@ -172,21 +199,24 @@
   gap: 20px;
 }
 
+/* 宸︽爮鍙墿杩欎竴鍧楅潰鏉匡紝楂樺害鎾戞弧鏁存爮锛屽浘琛ㄨ窡鐫�鎶婂墿浣欑┖闂村崰鎺� */
 .panel-item-customers {
   border: 1px solid #1a58b0;
   padding: 18px;
   width: 100%;
-  height: 449px;
+  flex: 1;
+  min-height: 0;
 }
 .pie-chart-wrapper {
   position: relative;
   width: 100%;
-  height: 320px;
+  flex: 1;
+  min-height: 0;
 }
 .pie-background {
   position: absolute;
-  left: 25%;
-  top: 50%;
+  left: 50%;
+  top: 45%;
   transform: translate(-51.5%, -50%);
   width: 310px;
   height: 310px;

--
Gitblit v1.9.3