地图展示四种通量均值，修改颜色

components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -226,6 +226,8 @@ export default {
       currentTooltipData: null, // 当前乡镇的详情数据
       isTooltipLoading: false, // tooltip 是否在加载中
       dataMap:{},
+      fluxDataMap: {}, // 存储通量Cd数据
+      fluxDataLoaded: false, // 通量Cd数据是否已加载
     };
   },
 
@@ -233,6 +235,7 @@ export default {
     // 组件挂载时获取最新数据
     this.fetchLatestResults();
     this.fetchStatistics();
+    this.fetchFluxData();
 
     // 使用更智能的初始化时机
     this.$nextTick(() => {
@@ -263,6 +266,24 @@ export default {
 
 
   methods: {
+    async fetchFluxData() {
+      try {
+        this.loadingTownshipMap = true;
+        const response = await api8000.get('/api/cd-flux/statistics/town/all');
+        
+        if (response.data && response.data.success) {
+          this.fluxDataMap = response.data.data.statistics || {};
+          this.fluxDataLoaded = true;
+          console.log('通量Cd数据加载成功', this.fluxDataMap);
+        }
+      } catch (error) {
+        console.error('获取通量Cd数据失败:', error);
+        this.fluxDataMap = {};
+      } finally {
+        this.loadingTownshipMap = false;
+      }
+    },
+
     handleResize() {
       if (this.townshipMapInstance) {
         this.townshipMapInstance.invalidateSize();
@@ -453,6 +474,9 @@ export default {
 async initTownshipMap() {
     try {
       this.loadingTownshipMap = true;
+      if (!this.fluxDataLoaded) {
+        await this.fetchFluxData();
+      }
       
       // 先强制设置容器尺寸
       this.forceMapContainerSize();
@@ -738,47 +762,61 @@ renderTownshipMap() {
 
 
   // 新增：显示tooltip的方法
-// 修复显示tooltip的方法
-showTooltip(layer, townName, latlng) {
-  const townData = this.dataMap[townName];
-  let tooltipContent = `<div class="town-tooltip"><h3>${townName}</h3>`;
-  
-  if (!townData?.data?.基础统计) {
-    tooltipContent += '<p>数据加载中...</p></div>';
-  } else {
-    const stats = townData.data.基础统计;
-    const dist = townData.data.分布统计表格;
-    tooltipContent += `
-      <div style="height:1px;background:#0066CC;margin:5px 0;"></div>
-      <p><strong>样本数量:</strong> ${stats.采样点数量 ?? '无数据'}</p>
-      <p><strong>平均值:</strong> ${stats.平均值?.toFixed(4) ?? '无数据'} mg/kg</p>
-      <p><strong>最小值:</strong> ${stats.最小值?.toFixed(4) ?? '无数据'} mg/kg</p>
-      <p><strong>最大值:</strong> ${stats.最大值?.toFixed(4) ?? '无数据'} mg/kg</p>
-      <div style="height:1px;background:#0066CC;margin:5px 0;"></div>
-      <p><strong>安全区间占比:</strong> ${dist?.汇总?.安全区间占比 ?? '无'}%</p>
-      <p><strong>预警区间占比:</strong> ${dist?.汇总?.预警区间占比 ?? '无'}%</p>
-      <p><strong>超标区间占比:</strong> ${dist?.汇总?.超标区间占比 ?? '无'}%</p>
-    </div>`;
-  }
-  
-  // 先解除之前的tooltip绑定
-  if (layer._tooltip) {
-    layer.unbindTooltip();
-  }
-  
-  // 使用Leaflet的tooltip
-  layer.bindTooltip(tooltipContent, {
-    className: 'custom-town-tooltip',
-    direction: 'top',
-    permanent: false,
-    sticky: true,
-    offset: [0, -10],
-    interactive: false // 确保tooltip不会拦截鼠标事件
-  });
-  
-  // 打开tooltip
-  layer.openTooltip(latlng);
-},
+    showTooltip(layer, townName, latlng) {
+      const riceData = this.dataMap[townName]; // 水稻Cd数据
+      const fluxData = this.fluxDataMap[townName]; // 通量Cd数据
+      
+      let tooltipContent = `<div class="town-tooltip"><h3>${townName}</h3>`;
+      
+      // 水稻Cd数据部分
+      tooltipContent += `<div style="margin-bottom: 10px;"><strong>水稻Cd</strong></div>`;
+      if (!riceData?.data?.基础统计) {
+        tooltipContent += '<p>水稻Cd数据加载中...</p>';
+      } else {
+        const stats = riceData.data.基础统计;
+        const dist = riceData.data.分布统计表格;
+        tooltipContent += `
+          <p><strong>样本数量:</strong> ${stats.采样点数量 ?? '无数据'}</p>
+          <p><strong>平均值:</strong> ${stats.平均值?.toFixed(4) ?? '无数据'} mg/kg</p>
+          <p><strong>安全区间占比:</strong> ${dist?.汇总?.安全区间占比 ?? '无'}</p>
+          <p><strong>预警区间占比:</strong> ${dist?.汇总?.预警区间占比 ?? '无'}</p>
+          <p><strong>超标区间占比:</strong> ${dist?.汇总?.超标区间占比 ?? '无'}</p>
+        `;
+      }
+      
+      // 通量Cd数据部分
+      tooltipContent += `<div style="margin-top: 10px; margin-bottom: 10px;"><strong>通量Cd</strong></div>`;
+      if (!fluxData) {
+        tooltipContent += '<p>通量Cd数据加载中...</p>';
+      } else {
+        tooltipContent += `
+          <p><strong>输入通量:</strong> ${fluxData.in_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.in_cd?.unit ?? ''}</p>
+          <p><strong>输出通量:</strong> ${fluxData.out_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.out_cd?.unit ?? ''}</p>
+          <p><strong>净通量:</strong> ${fluxData.net_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.net_cd?.unit ?? ''}</p>
+          <p><strong>土壤Cd浓度:</strong> ${fluxData.end_cd?.mean?.toFixed(4) ?? '无数据'} ${fluxData.end_cd?.unit ?? ''}</p>
+        `;
+      }
+      
+      tooltipContent += `</div>`;
+      
+      // 先解除之前的tooltip绑定
+      if (layer._tooltip) {
+        layer.unbindTooltip();
+      }
+      
+      // 使用Leaflet的tooltip
+      layer.bindTooltip(tooltipContent, {
+        className: 'custom-town-tooltip',
+        direction: 'top',
+        permanent: false,
+        sticky: true,
+        offset: [0, -10],
+        interactive: false
+      });
+      
+      // 打开tooltip
+      layer.openTooltip(latlng);
+    },
     
     // 上传并计算
     async calculate() {
@@ -1014,23 +1052,39 @@ showTooltip(layer, townName, latlng) {
 }
 
 .town-tooltip {
-  min-width: 200px;
-  max-width: 300px;
+  min-width: 280px;
+  max-width: 350px;
 }
 
 .town-tooltip h3 {
-  margin: 0 0 5px;
+  margin: 0 0 10px;
   color: #0066CC;
   text-align: center;
   font-size: 16px;
+  border-bottom: 2px solid #0066CC;
+  padding-bottom: 5px;
+}
+
+.town-tooltip strong {
+  color: #333;
+  font-weight: 600;
 }
 
 .town-tooltip p {
-  margin: 2px 0;
+  margin: 3px 0;
   font-size: 12px;
   line-height: 1.4;
 }
 
+/* 区分不同数据部分的样式 */
+.town-tooltip div strong {
+  color: #47C3B9;
+  display: block;
+  margin: 8px 0 5px;
+  padding-left: 5px;
+  border-left: 3px solid #47C3B9;
+}
+
 /* Leaflet地图容器样式 */
 .township-map-container {
   width: 100% !important;