Przeglądaj źródła

feat(User/introduction): add area statistics and percentage display

新增了Cd含量统计的面积统计和占比展示功能,补充了安全区、预警区、超标区的面积及对应占比数据,并在页面中展示总面积和各区间面积占比
yes-yes-yes-k 1 tydzień temu
rodzic
commit
e1c5f81048
1 zmienionych plików z 59 dodań i 4 usunięć
  1. 59 4
      src/views/User/introduction/TotalIntroduction.vue

+ 59 - 4
src/views/User/introduction/TotalIntroduction.vue

@@ -51,7 +51,14 @@
      warningCount: 0,   // 预警区间 (0.2-0.3 mg/kg)
      warningCount: 0,   // 预警区间 (0.2-0.3 mg/kg)
      exceedCount: 0,    // 超标区间 (≥0.3 mg/kg)
      exceedCount: 0,    // 超标区间 (≥0.3 mg/kg)
      maxCD: 0,
      maxCD: 0,
-     minCD: 0
+     minCD: 0,
+     safeArea: 0,
+     warningArea: 0,
+     exceedArea: 0,
+     totalArea: 0,
+     safePercent: 0,
+     warningPercent: 0,
+     exceedPercent: 0
    })
    })
 
 
    //  CD 含量分布个数计算
    //  CD 含量分布个数计算
@@ -354,11 +361,21 @@ async function loadCDStatistics() {
     let exceedCount = 0    // ≥0.3 mg/kg
     let exceedCount = 0    // ≥0.3 mg/kg
     let maxCD = -Infinity
     let maxCD = -Infinity
     let minCD = Infinity
     let minCD = Infinity
+    let safeArea = 0
+    let warningArea = 0
+    let exceedArea = 0
+    let totalArea = 0
 
 
     cdSampleData.value.forEach(feature => {
     cdSampleData.value.forEach(feature => {
-      // 假设 CD 含量字段为 CropCd_mea
+      // 获取 CD 含量和面积
       const cdValue = feature.properties.CropCd_mea
       const cdValue = feature.properties.CropCd_mea
       const numericCd = typeof cdValue === 'string' ? parseFloat(cdValue) : cdValue
       const numericCd = typeof cdValue === 'string' ? parseFloat(cdValue) : cdValue
+      const area = parseFloat(feature.properties.area) || 0
+      
+      // 累加总面积
+      if (area > 0) {
+        totalArea += area
+      }
       
       
       if (numericCd !== null && numericCd !== undefined && !isNaN(numericCd) && numericCd >= 0) {
       if (numericCd !== null && numericCd !== undefined && !isNaN(numericCd) && numericCd >= 0) {
         cdCount++
         cdCount++
@@ -367,19 +384,30 @@ async function loadCDStatistics() {
         maxCD = Math.max(maxCD, numericCd)
         maxCD = Math.max(maxCD, numericCd)
         minCD = Math.min(minCD, numericCd)
         minCD = Math.min(minCD, numericCd)
         
         
-        // 根据规则分类
+        // 根据规则分类并累加面积
         if (numericCd < 0.2) {
         if (numericCd < 0.2) {
           safeCount++
           safeCount++
+          safeArea += area
         }
         }
         else if (numericCd < 0.3) {
         else if (numericCd < 0.3) {
           warningCount++
           warningCount++
+          warningArea += area
         }
         }
         else {
         else {
           exceedCount++
           exceedCount++
+          exceedArea += area
         }
         }
       }
       }
     });
     });
 
 
+    // 计算有 CD 数据的地块总面积(用于占比计算)
+    const totalCDArea = safeArea + warningArea + exceedArea;
+    
+    // 计算面积占比(基于有 CD 数据的地块)
+    const safePercent = totalCDArea > 0 ? parseFloat(((safeArea / totalCDArea) * 100).toFixed(2)) : 0
+    const warningPercent = totalCDArea > 0 ? parseFloat(((warningArea / totalCDArea) * 100).toFixed(2)) : 0
+    const exceedPercent = totalCDArea > 0 ? parseFloat(((exceedArea / totalCDArea) * 100).toFixed(2)) : 0
+
     cdStatistics.value = {
     cdStatistics.value = {
       totalBlocks: cdSampleData.value.length,
       totalBlocks: cdSampleData.value.length,
       avgCD: cdCount > 0 ? parseFloat(avgCD.toFixed(3)) : 0,
       avgCD: cdCount > 0 ? parseFloat(avgCD.toFixed(3)) : 0,
@@ -387,7 +415,14 @@ async function loadCDStatistics() {
       warningCount,
       warningCount,
       exceedCount,
       exceedCount,
       maxCD: maxCD === -Infinity ? 0 : parseFloat(maxCD.toFixed(3)),
       maxCD: maxCD === -Infinity ? 0 : parseFloat(maxCD.toFixed(3)),
-      minCD: minCD === Infinity ? 0 : parseFloat(minCD.toFixed(3))
+      minCD: minCD === Infinity ? 0 : parseFloat(minCD.toFixed(3)),
+      safeArea: parseFloat(safeArea.toFixed(2)),
+      warningArea: parseFloat(warningArea.toFixed(2)),
+      exceedArea: parseFloat(exceedArea.toFixed(2)),
+      totalArea: parseFloat(totalArea.toFixed(2)),
+      safePercent,
+      warningPercent,
+      exceedPercent
     };
     };
     
     
     // 计算 CD 含量分布
     // 计算 CD 含量分布
@@ -723,18 +758,38 @@ onUnmounted(()=>{
         <span class="stat-value success">{{ cdStatistics.safeCount }} 个</span>
         <span class="stat-value success">{{ cdStatistics.safeCount }} 个</span>
       </div>
       </div>
       
       
+      <div class="stat-row">
+        <span class="stat-label">安全面积占比:</span>
+        <span class="stat-value success">{{ cdStatistics.safePercent }}%</span>
+      </div>
+      
       <div class="stat-row">
       <div class="stat-row">
         <span class="stat-label">预警 (0.2-0.3 mg/kg):</span>
         <span class="stat-label">预警 (0.2-0.3 mg/kg):</span>
         <span class="stat-value warning">{{ cdStatistics.warningCount }} 个</span>
         <span class="stat-value warning">{{ cdStatistics.warningCount }} 个</span>
       </div>
       </div>
       
       
+      <div class="stat-row">
+        <span class="stat-label">预警面积占比:</span>
+        <span class="stat-value warning">{{ cdStatistics.warningPercent }}%</span>
+      </div>
+      
       <div class="stat-row">
       <div class="stat-row">
         <span class="stat-label">超标 (≥0.3 mg/kg):</span>
         <span class="stat-label">超标 (≥0.3 mg/kg):</span>
         <span class="stat-value danger">{{ cdStatistics.exceedCount }} 个</span>
         <span class="stat-value danger">{{ cdStatistics.exceedCount }} 个</span>
       </div>
       </div>
       
       
+      <div class="stat-row">
+        <span class="stat-label">超标面积占比:</span>
+        <span class="stat-value danger">{{ cdStatistics.exceedPercent }}%</span>
+      </div>
+      
       <div class="stat-divider"></div>
       <div class="stat-divider"></div>
       
       
+      <div class="stat-row small">
+        <span class="stat-label">总面积:</span>
+        <span class="stat-value">{{ cdStatistics.totalArea }} 亩</span>
+      </div>
+      
       <div class="stat-row small">
       <div class="stat-row small">
         <span class="stat-label">最高 Cd:</span>
         <span class="stat-label">最高 Cd:</span>
         <span class="stat-value danger">{{ cdStatistics.maxCD > 0 ? cdStatistics.maxCD + ' mg/kg' : '-' }}</span>
         <span class="stat-value danger">{{ cdStatistics.maxCD > 0 ? cdStatistics.maxCD + ' mg/kg' : '-' }}</span>