From 11d7990309ddace2fa600cbeae58e3ab5ac368f9 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期日, 20 九月 2026 19:25:45 +0800
Subject: [PATCH] 新疆-融邦 1. 委外管理:新增合作商档案、委外订单、往来台账三个页面及接口;合作商附件弹框支持直接上传/删除并即时保存。   2. 信托基金与代储台账:客户档案加「信托基金 / 代储金额」并对超限标红提示;销售台账拆「卖油 / 代储」页签,代储走油库+储罐+合同金额,卖油保留产品明细;台账列表加审批状态与超限红字;审批中心显示销售合同号并能下钻台账明细。   3. 储罐号带入库存:储罐信息表单加「是否启用 / 用途 / 租客信息」联动与校验;库存管理、批号明细、入库/出库表单与列表补齐储罐号、油品、物流、过磅等字段展示。   4. 出库即发货与往来备件:出库台账区分「发货单 / 油品出库」两类来源并分别处理详情;新增备件出入库流水页面。   5. 车辆管理与残油联动:新增车辆管理页面;油品出入库表单物流信息顺序调整,车牌/车挂牌号联动只读。   6. 油品出库联动发货台账:发货台账加「发货单号 / 销售合同号」筛选,修复油品出库行批号列取错字段。   7. 采购申请模块:新增采购申请页面及接口。   8. 付款流水组件:抽出公共「付款流水」弹框组件,采购付款分栏、收付款台账与委外往来台账复用。   9. 列调整:收付款台账删除「付款金额 / 退货金额」;委外往来台账删除「回款金额」,并去掉金额列右对齐。

---
 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue |   42 ++++++++++++++++++++++++++++++++++++------
 1 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index c787fce..16791de 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,8 +2,8 @@
   <div>
     <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)
 
 // 鏁版嵁鍒楄〃锛堟潵鑷帴鍙o級
 const dataList = ref([])
@@ -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,6 +196,8 @@
     }))
     landLegend.data = dataList.value.map((d) => d.name)
     landSeries.value[0].data = dataList.value
+    // 鏁版嵁鍔犺浇瀹屾垚鍚庤皟鏁磋儗鏅綅缃�
+    adjustBackgroundPosition()
   } catch (e) {
     console.error('鑾峰彇浜у搧澶х被鍒嗗竷澶辫触:', e)
     dataList.value = []
@@ -190,8 +206,21 @@
   }
 }
 
+
+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>

--
Gitblit v1.9.3