From e1535c267711c7c8d560e8916437167bbcd3156b Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期一, 02 二月 2026 17:54:31 +0800
Subject: [PATCH] feat: 进销质量类分析接口对接

---
 src/views/reportAnalysis/qualityAnalysis/components/left-top.vue |   91 ++++++++++++++++++++++++++++-----------------
 1 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
index 7debef5..8237a3f 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/left-top.vue
@@ -13,13 +13,8 @@
 
         <div class="inspect-body">
           <div class="ring">
-            <Echarts
-              :chartStyle="ringChartStyle"
-              :series="buildRingSeries(section)"
-              :tooltip="ringTooltip"
-              :legend="{ show: false }"
-              :options="ringOptions"
-            />
+            <Echarts :chartStyle="ringChartStyle" :series="buildRingSeries(section)" :tooltip="ringTooltip"
+              :legend="{ show: false }" :options="ringOptions" />
           </div>
 
           <div class="stats">
@@ -51,42 +46,72 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { reactive, onMounted } from 'vue'
 import Echarts from '@/components/Echarts/echarts.vue'
 import PanelHeader from './PanelHeader.vue'
 import DateTypeSwitch from './DateTypeSwitch.vue'
+import { rawMaterialDetection, processDetection, factoryDetection } from '@/api/viewIndex.js'
 
 const QUALIFIED_COLOR = '#4EE4FF'
 const UNQUALIFIED_COLOR = '#3378FF'
 const TRACK_COLOR = 'rgba(78, 228, 255, 0.12)'
+
+const apiMap = {
+  raw: rawMaterialDetection,
+  process: processDetection,
+  final: factoryDetection,
+}
+
+
+const fetchSectionData = async (section) => {
+  const api = apiMap[section.key]
+  if (!api) return
+
+  try {
+    const res = await api({
+      type: section.dateType,
+    })
+
+    if (res?.code === 200 && res?.data) {
+      const data = res.data
+      section.qualifiedCount = Number(data.qualifiedCount || 0)
+      section.unqualifiedCount = Number(data.unqualifiedCount || 0)
+      section.qualifiedRate = Number(data.qualifiedRate || 0)
+      section.unqualifiedRate = Number(data.unqualifiedRate || 0)
+    }
+  } catch (err) {
+    console.error(`${section.key} 鎺ュ彛璇锋眰澶辫触`, err)
+  }
+}
+
 
 const sections = reactive([
   {
     key: 'raw',
     title: '鍘熸潗鏂欐娴�',
     dateType: 1,
-    qualifiedCount: 199,
-    unqualifiedCount: 99,
-    qualifiedRate: 90,
-    unqualifiedRate: 10,
+    qualifiedCount: 0,
+    unqualifiedCount: 0,
+    qualifiedRate: 0,
+    unqualifiedRate: 0,
   },
   {
     key: 'process',
     title: '杩囩▼妫�娴�',
     dateType: 1,
-    qualifiedCount: 199,
-    unqualifiedCount: 99,
-    qualifiedRate: 90,
-    unqualifiedRate: 10,
+    qualifiedCount: 0,
+    unqualifiedCount: 0,
+    qualifiedRate: 0,
+    unqualifiedRate: 0,
   },
   {
     key: 'final',
     title: '鎴愬搧鍑哄巶妫�娴�',
     dateType: 1,
-    qualifiedCount: 199,
-    unqualifiedCount: 99,
-    qualifiedRate: 90,
-    unqualifiedRate: 10,
+    qualifiedCount: 0,
+    unqualifiedCount: 0,
+    qualifiedRate: 0,
+    unqualifiedRate: 0,
   },
 ])
 
@@ -183,15 +208,15 @@
   const section = sections.find((s) => s.key === key)
   if (!section) return
   section.dateType = dateType
-  const rates = calcRates(section.qualifiedCount, section.unqualifiedCount)
-  section.qualifiedRate = rates.qualifiedRate
-  section.unqualifiedRate = rates.unqualifiedRate
+  // 鍒囨崲鏃ユ湡绫诲瀷鏃堕噸鏂拌幏鍙栨暟鎹�
+  fetchSectionData(section)
 }
 
-sections.forEach((s) => {
-  const rates = calcRates(s.qualifiedCount, s.unqualifiedCount)
-  s.qualifiedRate = rates.qualifiedRate
-  s.unqualifiedRate = rates.unqualifiedRate
+// 缁勪欢鎸傝浇鏃惰幏鍙栨墍鏈塻ection鐨勬暟鎹�
+onMounted(() => {
+  sections.forEach((section) => {
+    fetchSectionData(section)
+  })
 })
 </script>
 
@@ -248,7 +273,7 @@
         width: 18px;
         height: 7px;
         border-radius: 8px;
-        background: linear-gradient(360deg, rgba(33,133,255,0.4) 0%, rgba(33,221,255,0) 100%);
+        background: linear-gradient(360deg, rgba(33, 133, 255, 0.4) 0%, rgba(33, 221, 255, 0) 100%);
         position: absolute;
         top: 50%;
         left: -1px;
@@ -308,7 +333,7 @@
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
-  justify-content:space-around;
+  justify-content: space-around;
   align-items: center;
   gap: 18px;
 }
@@ -329,11 +354,9 @@
   position: absolute;
   inset: -8px;
   border-radius: 50%;
-  background: repeating-conic-gradient(
-    from 0deg,
-    rgba(78, 228, 255, 0.75) 0 1deg,
-    rgba(78, 228, 255, 0) 1deg 9deg
-  );
+  background: repeating-conic-gradient(from 0deg,
+      rgba(78, 228, 255, 0.75) 0 1deg,
+      rgba(78, 228, 255, 0) 1deg 9deg);
   -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
   mask: radial-gradient(circle, transparent 62%, #000 63%);
   opacity: 0.35;

--
Gitblit v1.9.3