From 8a3bfdab689684fe5ee19b2f69842e450fc7c60a Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期五, 30 一月 2026 14:02:39 +0800
Subject: [PATCH] fix: 完成生产数据分析页面

---
 src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue |   75 ++++++++++++++++++++++++-------------
 1 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
index 076dcbe..4a20578 100644
--- a/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
+++ b/src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
-    <PanelHeader title="鏀嚭鏋勬垚鍒嗘瀽" />
+    <PanelHeader title="鏋勬垚鍒嗘瀽" />
     <div class="main-panel panel-item-customers">
+      <div class="filters-row">
+        <ProductTypeSwitch
+          v-model="amountType"
+          :options="amountTypeOptions"
+          @change="handleTypeChange"
+        />
+      </div>
       <!-- <CarouselCards :items="cardItems" :visible-count="3" /> -->
       <div class="pie-chart-wrapper">
         <div class="pie-background"></div>
@@ -25,8 +32,8 @@
 import { ref, onMounted, computed } from 'vue'
 import Echarts from '@/components/Echarts/echarts.vue'
 import PanelHeader from './PanelHeader.vue'
-import CarouselCards from './CarouselCards.vue'
-import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'
+import ProductTypeSwitch from './ProductTypeSwitch.vue'
+import { expenseCompositionAnalysis } from '@/api/viewIndex.js'
 
 /**
  * @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
@@ -41,6 +48,14 @@
   }
   return resObj
 }
+
+// 褰撳墠绫诲瀷锛�1=鏀嚭 2=鏀跺叆
+const amountType = ref(1)
+
+const amountTypeOptions = [
+  { label: 1, text: '浜у搧' },
+  { label: 2, text: '瀹㈡埛' },
+]
 
 // 鏁版嵁鍒楄〃锛堟潵鑷帴鍙ｏ級
 const dataList = ref([])
@@ -69,12 +84,16 @@
     top: 'center',
     left: '52%',
     itemGap: 30,
-    show: false,
+    show: true,
     data: data,
     formatter: function (name) {
       const item = landObjData.value[name]
       if (!item) return name
-      return `{title|${name}}{value|${item.value}}{unit|鍏儅{percent|${item.rate}}{unit|%}`
+      const num = Number(item.value)
+      const isWan = num > 10000
+      const displayValue = isWan ? (num / 10000).toFixed(2) : num
+      const displayUnit = isWan ? '涓囧厓' : '鍏�'
+      return `{title|${name}}{value|${displayValue}}{unit|${displayUnit}}{percent|${item.rate}}{unit|%}`
     },
     textStyle: {
       rich: {
@@ -112,12 +131,13 @@
 }
 
 // 鍙屽眰鐜舰楗煎浘
+// 鍙屽眰鐜舰楗煎浘
 const landSeries = ref([
   {
-    name: '浜у搧閲囪喘閲戦鍒嗘瀽',
+    name: '鏋勬垚鍒嗘瀽',
     type: 'pie',
-    radius: ['50%', '75%'],
-    center: ['50%', '60%'],
+    radius: ['40%', '60%'],
+    center: ['25%', '50%'],
     itemStyle: {
       borderColor: '#0a1c3a',
       borderWidth: 2,
@@ -126,16 +146,7 @@
       },
     },
     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 },
-      // },
+      show: false
     },
     minAngle: 15,
     data: dataList.value,
@@ -148,8 +159,8 @@
   {
     // 鍐呭湀
     type: 'pie',
-    radius: ['50%', '60%'],
-    center: ['50%', '60%'],
+    radius: ['40%', '45%'],
+    center: ['25%', '50%'],
     silent: true,
     label: {
       show: false,
@@ -175,7 +186,7 @@
 }
 
 const fetchData = () => {
-  rawMaterialPurchaseAmountRatio()
+  expenseCompositionAnalysis({ type: amountType.value })
     .then((res) => {
       if (res.code === 200 && Array.isArray(res.data)) {
         const items = res.data
@@ -195,8 +206,12 @@
       }
     })
     .catch((err) => {
-      console.error('鑾峰彇鍘熸潗鏂欓噰璐噾棰濆崰姣斿け璐�:', err)
+      console.error('鑾峰彇璐圭敤鏋勬垚鍒嗘瀽澶辫触:', err)
     })
+}
+
+const handleTypeChange = () => {
+  fetchData()
 }
 
 onMounted(() => {
@@ -209,6 +224,14 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
+}
+
+.filters-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
 }
 
 .panel-item-customers {
@@ -228,11 +251,11 @@
 
 .pie-background {
   position: absolute;
-  left: 50%;
-  top: 60%;
+  left: 25%;
+  top: 50%;
   transform: translate(-51.5%, -50%);
-  width: 380px;
-  height: 380px;
+  width: 310px;
+  height: 310px;
   background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
   background-size: contain;
   background-position: center;

--
Gitblit v1.9.3