样式调整

src/components/cdStatictics/reducedataStatistics.vue

@@ -73,9 +73,12 @@ export default {
           // 处理数据 - 直接使用原始时间字符串
           chartData.value.timestamps = responses.map(item => item.time);
           
-          // 初始化所有数据系列
+          // 初始化所有数据系列，并将数值固定为小数点后五位
           Object.keys(chartData.value.series).forEach(key => {
-            chartData.value.series[key] = responses.map(item => parseFloat(item.data[key]));
+            chartData.value.series[key] = responses.map(item => {
+              const value = parseFloat(item.data[key]);
+              return isNaN(value) ? null : parseFloat(value.toFixed(5));
+            });
           });
         } catch (err) {
           error.value = '获取真实数据失败: ' + err.message;
@@ -120,7 +123,18 @@ export default {
           });
         });
       } else {
-   
+        // 显示选定的单个数据
+        series.push({
+          name: selectedData.value,
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          data: chartData.value.series[selectedData.value],
+          lineStyle: { width: 2 },
+          emphasis: {
+            focus: 'series'
+          }
+        });
       }
       
       const option = {
@@ -136,6 +150,15 @@ export default {
             label: {
               backgroundColor: '#6a7985'
             }
+          },
+          // 格式化tooltip中的数值为小数点后五位
+          formatter: function(params) {
+            let result = params[0].name + '<br/>';
+            params.forEach(param => {
+              const value = param.value === null ? '无数据' : parseFloat(param.value).toFixed(5);
+              result += `${param.seriesName}: ${value}<br/>`;
+            });
+            return result;
           }
         },
         legend: {
@@ -159,7 +182,12 @@ export default {
         yAxis: {
           type: 'value',
           scale: true,
-          
+          // 格式化y轴标签为小数点后五位
+          axisLabel: {
+            formatter: function(value) {
+              return parseFloat(value).toFixed(5);
+            }
+          }
         },
         series: series
       };
@@ -173,23 +201,23 @@ export default {
       fetchData();
     }
     
-onMounted(() => {
-  fetchData().then(() => {
-    // 等待 Vue 完成 DOM 更新（如父元素布局、样式生效）
-    nextTick(() => {
-      if (chartInstance) {
-        chartInstance.resize(); // 确保图表适配最终尺寸
-      }
-    });
-  });
+    onMounted(() => {
+      fetchData().then(() => {
+        // 等待 Vue 完成 DOM 更新（如父元素布局、样式生效）
+        nextTick(() => {
+          if (chartInstance) {
+            chartInstance.resize(); // 确保图表适配最终尺寸
+          }
+        });
+      });
 
-  // 保留原有窗口 resize 监听
-  window.addEventListener('resize', () => {
-    if (chartInstance) {
-      chartInstance.resize();
-    }
-  });
-});
+      // 保留原有窗口 resize 监听
+      window.addEventListener('resize', () => {
+        if (chartInstance) {
+          chartInstance.resize();
+        }
+      });
+    });
     
     onUnmounted(() => {
       if (chartInstance) {

src/components/layout/AppLayout.vue

@@ -316,9 +316,6 @@ const tabs = computed(() => {
         label: "土壤污染物含量预测",
         icon: "el-icon-c-scale-to-original",
         routes: [
-          "/totalInputFlux",
-          "/TotalCadmiumPrediction",
-          "/totalOutputFlux",
           "/netFlux",
           "/currentYearConcentration",
           "/EffectiveCadmiumPrediction",

src/components/soilcdStatistics/fluxcdStatictics.vue

@@ -14,21 +14,20 @@
       <button class="mt-2 px-3 py-1 bg-red-500 text-white rounded" @click="initCharts">重试</button>
     </div>
     
-    <!-- 1. 初始Cd 单独箱线图
-<section class="mb-6 chart-container">
-  <h3 class="section-title text-base font-semibold">初始Cd（Initial_Cd）分布箱线图</h3>
-  <div ref="initialCdChart" style="width: 100%; height: 400px;"></div>
-  容器内的加载遮罩 
-  <div v-if="isLoading" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center">
-    <div class="spinner"></div>
-  </div>
-  <div v-if="error && !chartInstanceInitial" class="bg-yellow-50 border border-yellow-200 p-4 rounded mt-4">
-    <p class="text-yellow-700">图表初始化失败: {{ error.message }}</p>
-    <button class="mt-2 px-3 py-1 bg-yellow-500 text-white rounded" @click="initInitialCdChart">
-      重新尝试初始化
-    </button>
-  </div>
-</section> -->
+    <!-- 1. 初始Cd 单独箱线图 -->
+    <section class="mb-6 chart-container">
+      <h3 class="section-title text-base font-semibold">初始Cd（Initial_Cd）分布箱线图</h3>
+      <div ref="initialCdChart" style="width: 100%; height: 400px;"></div>
+      <div v-if="isLoading" class="absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center">
+        <div class="spinner"></div>
+      </div>
+      <div v-if="error && !chartInstanceInitial" class="bg-yellow-50 border border-yellow-200 p-4 rounded mt-4">
+        <p class="text-yellow-700">图表初始化失败: {{ error.message }}</p>
+        <button class="mt-2 px-3 py-1 bg-yellow-500 text-white rounded" @click="initInitialCdChart">
+          重新尝试初始化
+        </button>
+      </div>
+    </section>
 
 <!-- 2. 其他指标 合并箱线图 -->
 <section class="mb-6 chart-container">

src/views/User/HmOutFlux/agriInput/prodInputFlux.vue

@@ -138,7 +138,6 @@
       <el-card class="result-card" v-if="customResult.success">
          <!-- 添加地图展示区域 -->
         <div class="map-container">
-          <h3>空间分布图</h3>
           <div class="map-wrapper">
             <div v-if="mapImageUrl" class="map-image-container">
               <img :src=mapImageUrl alt="农业投入品输入通量分布图" class="map-image">

src/views/User/HmOutFlux/irrigationWater/irriWaterInputFlux.vue

@@ -618,7 +618,7 @@ export default {
 }
 
 .image-wrapper {
-  height: 300px; /* 固定高度 */
+  height: 500px; /* 固定高度 */
   display: flex;
   justify-content: center;
   align-items: center;

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -25,7 +25,7 @@
         <el-button class="custom-button" :disabled="!mapBlob" @click="exportMap">
           <el-icon class="upload-icon"><Download /></el-icon>
           导出地图</el-button>
-        <el-button class="custom-button" :disabled="!histogramBlob" @click="exportHistogram">
+        <el-button class="custom-button" :disabled="!histogramBlob" @极简版click="exportHistogram">
           <el-icon class="upload-icon"><Download /></el-icon>
           导出直方图</el-button>
         <el-button class="custom-button" :disabled="!statisticsData.length" @click="exportData">
@@ -36,37 +36,20 @@
 
     <!-- 主体内容区 -->
     <div class="content-area">
-      <!-- 地图区域 - 修改为横向布局 -->
-      <div class="horizontal-container">
-        <!-- 地图展示 -->
-        <div class="map-section">
-          <h3>作物态Cd预测地图</h3>
-          <div v-if="loadingMap" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>地图加载中...</span>
-          </div>
-          <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="作物态Cd预测地图" class="map-image">
-          <div v-if="!mapImageUrl && !loadingMap" class="no-data">
-            <el-icon><Picture /></el-icon>
-            <p>暂无地图数据</p>
-          </div>
+      <!-- 地图区域 - 单独一行 -->
+      <div class="map-section">
+        <h3>作物态Cd预测地图</h3>
+        <div v-if="loadingMap" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>地图加载中...</span>
         </div>
-        
-        <!-- 直方图展示 -->
-        <div class="histogram-section">
-          <h3>作物态Cd预测直方图</h3>
-          <div v-if="loadingHistogram" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>直方图加载中...</span>
-          </div>
-          <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="作物态Cd预测直方图" class="histogram-image">
-          <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
-            <el-icon><Histogram /></el-icon>
-            <p>暂无直方图数据</p>
-          </div>
+        <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="作物态Cd预测地图" class="map-image">
+        <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+          <el-icon><Picture /></el-icon>
+          <p>暂无地图数据</p>
         </div>
       </div>
-
+      
       <!-- 统计图表区域 -->
       <div class="stats-area">
         <h3>{{countyName}} - 作物Cd预测统计信息</h3>
@@ -112,6 +95,20 @@
           <p>暂无统计数据</p>
         </div>
       </div>
+      
+      <!-- 直方图区域 - 单独一行，放在统计信息下面 -->
+      <div class="histogram-section">
+        <h3>作物态Cd预测直方图</h3>
+        <div v-if="loadingHistogram" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>直方图加载中...</span>
+        </div>
+        <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="作物态Cd预测直方图" class="histogram-image">
+        <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+          <el-icon><Histogram /></el-icon>
+          <p>暂无直方图数据</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -144,7 +141,8 @@ export default {
       selectedFile: null,
       countyName: '乐昌市', // 默认县市名称
       distributionChart: null,
-      exceedanceChart: null
+      exceedanceChart: null,
+      currentStats: null
     };
   },
 
@@ -377,7 +375,7 @@ export default {
                 '中位数: ' + data[2].toFixed(4),
                 '25%分位数: ' + data[1].toFixed(4),
                 '最小值: ' + data[0].toFixed(4)
-              ].join('<br/>');
+            ].join('<br/>');
             }
           }
         }],
@@ -607,27 +605,18 @@ export default {
   gap: 20px;
 }
 
-/* 横向布局容器 */
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  width: 100%;
-}
-
-.map-section, .histogram-section {
-  flex: 1;
-  min-width: 300px;
+/* 地图区域 */
+.map-section {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
-  min-height: 400px;
+  min-height: 500px;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
-.map-image, .histogram-image {
+.map-image {
   width: 100%;
   height: 100%;
   max-height: 600px;
@@ -635,16 +624,35 @@ export default {
   border-radius: 4px;
 }
 
-.table-area {
-  width: 100%;
+/* 统计图表区域 */
+.stats-area {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
+  position: relative;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
+/* 直方图区域 */
+.histogram-section {
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  min-height: 500px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
+}
+
+.histogram-image {
+  width: 100%;
+  height: 100%;
+  max-height: 600px;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
 .loading-container {
   display: flex;
   flex-direction: column;
@@ -686,13 +694,8 @@ export default {
 
 /* 响应式布局调整 */
 @media (max-width: 992px) {
-  .horizontal-container {
+  .content-area {
     flex-direction: column;
   }
-  
-  .map-section, .histogram-section {
-    width: 100%;
-    flex: none;
-  }
 }
 </style>

src/views/User/cadmiumPrediction/EffectiveCadmiumPrediction.vue

@@ -25,7 +25,7 @@
         <el-button class="custom-button" :disabled="!mapBlob" @click="exportMap">
           <el-icon class="upload-icon"><Download /></el-icon>
           导出地图</el-button>
-        <el-button class="custom-button" :disabled="!histogramBlob" @click="exportHistogram">
+        <el-button class="custom-button" :disabled="!histogramBlob" @极简版click="exportHistogram">
           <el-icon class="upload-icon"><Download /></el-icon>
           导出直方图</el-button>
         <el-button class="custom-button" :disabled="!statisticsData.length" @click="exportData">
@@ -36,37 +36,20 @@
 
     <!-- 主体内容区 -->
     <div class="content-area">
-      <!-- 地图区域 - 修改为横向布局 -->
-      <div class="horizontal-container">
-        <!-- 地图展示 -->
-        <div class="map-section">
-          <h3>有效态Cd预测地图</h3>
-          <div v-if="loadingMap" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>地图加载中...</span>
-          </div>
-          <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="有效态Cd预测地图" class="map-image">
-          <div v-if="!mapImageUrl && !loadingMap" class="no-data">
-            <el-icon><Picture /></el-icon>
-            <p>暂无地图数据</p>
-          </div>
+      <!-- 地图区域 - 单独一行 -->
+      <div class="map-section">
+        <h3>有效态Cd预测地图</h3>
+        <div v-if="loadingMap" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>地图加载中...</span>
         </div>
-        
-        <!-- 直方图展示 -->
-        <div class="histogram-section">
-          <h3>有效态Cd预测直方图</h3>
-          <div v-if="loadingHistogram" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>直方图加载中...</span>
-          </div>
-          <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="有效态Cd预测直方图" class="histogram-image">
-          <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
-            <el-icon><Histogram /></el-icon>
-            <p>暂无直方图数据</p>
-          </div>
+        <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="有效态Cd预测地图" class="map-image">
+        <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+          <el-icon><Picture /></el-icon>
+          <p>暂无地图数据</p>
         </div>
       </div>
-
+      
       <!-- 统计图表区域 -->
       <div class="stats-area">
         <h3>{{countyName}} - 有效Cd预测统计信息</h3>
@@ -112,6 +95,20 @@
           <p>暂无统计数据</p>
         </div>
       </div>
+      
+      <!-- 直方图区域 - 单独一行，放在统计信息下面 -->
+      <div class="histogram-section">
+        <h3>有效态Cd预测直方图</h3>
+        <div v-if="loadingHistogram" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>直方图加载中...</span>
+        </div>
+        <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="有效态Cd预测直方图" class="histogram-image">
+        <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+          <el-icon><Histogram /></el-icon>
+          <p>暂无直方图数据</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -144,7 +141,8 @@ export default {
       selectedFile: null,
       countyName: '乐昌市', // 默认县市名称
       distributionChart: null,
-      exceedanceChart: null
+      exceedanceChart: null,
+      currentStats: null
     };
   },
 
@@ -377,7 +375,7 @@ export default {
                 '中位数: ' + data[2].toFixed(4),
                 '25%分位数: ' + data[1].toFixed(4),
                 '最小值: ' + data[0].toFixed(4)
-              ].join('<br/>');
+            ].join('<br/>');
             }
           }
         }],
@@ -607,27 +605,18 @@ export default {
   gap: 20px;
 }
 
-/* 横向布局容器 */
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  width: 100%;
-}
-
-.map-section, .histogram-section {
-  flex: 1;
-  min-width: 300px;
+/* 地图区域 */
+.map-section {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
-  min-height: 400px;
+  min-height: 500px;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
-.map-image, .histogram-image {
+.map-image {
   width: 100%;
   height: 100%;
   max-height: 600px;
@@ -635,16 +624,35 @@ export default {
   border-radius: 4px;
 }
 
-.table-area {
-  width: 100%;
+/* 统计图表区域 */
+.stats-area {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
+  position: relative;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
+/* 直方图区域 */
+.histogram-section {
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
+  border-radius: 8px;
+  padding: 15px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  min-height: 500px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
+}
+
+.histogram-image {
+  width: 100%;
+  height: 100%;
+  max-height: 600px;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
 .loading-container {
   display: flex;
   flex-direction: column;
@@ -686,13 +694,8 @@ export default {
 
 /* 响应式布局调整 */
 @media (max-width: 992px) {
-  .horizontal-container {
+  .content-area {
     flex-direction: column;
   }
-  
-  .map-section, .histogram-section {
-    width: 100%;
-    flex: none;
-  }
 }
 </style>

src/views/User/cadmiumPrediction/currentYearConcentration.vue

@@ -2,7 +2,6 @@
   <div class="container">
     <!-- 顶部操作栏 -->
     <div class="toolbar">
-      
       <!-- 操作按钮 -->
       <div class="action-buttons">
         <el-button class="custom-button" :disabled="!mapBlob" @click="exportMap">
@@ -19,37 +18,20 @@
 
     <!-- 主体内容区 -->
     <div class="content-area">
-      <!-- 地图区域 - 修改为横向布局 -->
-      <div class="horizontal-container">
-        <!-- 地图展示 -->
-        <div class="map-section">
-          <h3>Cd当年浓度空间分布图</h3>
-          <div v-if="loadingMap" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>地图加载中...</span>
-          </div>
-          <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd当年浓度空间分布图" class="map-image">
-          <div v-if="!mapImageUrl && !loadingMap" class="no-data">
-            <el-icon><Picture /></el-icon>
-            <p>暂无地图数据</p>
-          </div>
+      <!-- 地图区域 - 单独一行 -->
+      <div class="map-section">
+        <h3>Cd当年浓度空间分布图</h3>
+        <div v-if="loadingMap" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>地图加载中...</span>
         </div>
-        
-        <!-- 直方图展示 -->
-        <div class="histogram-section">
-          <h3>Cd当年浓度直方图</h3>
-          <div v-if="loadingHistogram" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>直方图加载中...</span>
-          </div>
-          <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd当年浓度直方图" class="histogram-image">
-          <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
-            <el-icon><Histogram /></el-icon>
-            <p>暂无直方图数据</p>
-          </div>
+        <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd当年浓度空间分布图" class="map-image">
+        <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+          <el-icon><Picture /></el-icon>
+          <p>暂无地图数据</p>
         </div>
       </div>
-
+      
       <!-- 统计图表区域 -->
       <div class="stats-area">
         <h3>Cd当年浓度统计信息</h3>
@@ -78,12 +60,25 @@
             <el-table-column prop="unit" label="单位" min-width="100" />
             <el-table-column prop="description" label="描述" min-width="200" />
           </el-table>
-          
+        </div>
         
         <div v-if="!loadingStats && !statisticsData.length" class="no-data">
           <el-icon><DataAnalysis /></el-icon>
           <p>暂无统计数据</p>
         </div>
+      </div>
+      
+      <!-- 直方图区域 - 单独一行，放在统计结果下面 -->
+      <div class="histogram-section">
+        <h3>Cd当年浓度直方图</h3>
+        <div v-if="loadingHistogram" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>直方图加载中...</span>
+        </div>
+        <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd当年浓度直方图" class="histogram-image">
+        <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+          <el-icon><Histogram /></el-icon>
+          <p>暂无直方图数据</p>
         </div>
       </div>
     </div>
@@ -206,10 +201,10 @@ export default {
       if (!stats) return [];
       
       return [
-        { name: '最小值', value: stats.min.toFixed(4), unit: 'mg/kg', description: '样本中的最小Cd当年浓度' },
-        { name: '最大值', value: stats.max.toFixed(4), unit: 'mg/kg', description: '样本中的最大Cd当年浓度' },
-        { name: '平均值', value: stats.mean.toFixed(4), unit: 'mg/kg', description: '所有样本的平均Cd当年浓度' },
-        { name: '标准差', value: stats.std.toFixed(4), unit: 'mg/kg', description: 'Cd当年浓度的标准差' },
+        { name: '最小值', value: stats.min.toFixed(4), unit: 'g/ha/year', description: '样本中的最小Cd通量' },
+        { name: '最大值', value: stats.max.toFixed(4), unit: 'g/ha/year', description: '样本中的最大Cd通量' },
+        { name: '平均值', value: stats.mean.toFixed(4), unit: 'g/ha/year', description: '所有样本的平均Cd通量' },
+        { name: '标准差', value: stats.std.toFixed(4), unit: 'g/ha/year', description: 'Cd通量的标准差' },
       ];
     },
 
@@ -424,26 +419,27 @@ export default {
   gap: 20px;
 }
 
-/* 横向布局容器 */
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  width: 100%;
-}
-
-.map-section, .histogram-section {
-  flex: 1;
-  min-width: 300px;
+.map-section, .histogram-section, .stats-area {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
-  min-height: 400px;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
+.map-section {
+  min-height: 500px;
+}
+
+.histogram-section {
+  min-height: 500px;
+}
+
+.stats-area {
+  min-height: 300px;
+}
+
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
@@ -452,16 +448,6 @@ export default {
   border-radius: 4px;
 }
 
-.table-area {
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
-}
-
 .loading-container {
   display: flex;
   flex-direction: column;
@@ -503,13 +489,8 @@ export default {
 
 /* 响应式布局调整 */
 @media (max-width: 992px) {
-  .horizontal-container {
+  .content-area {
     flex-direction: column;
   }
-  
-  .map-section, .histogram-section {
-    width: 100%;
-    flex: none;
-  }
 }
 </style>

src/views/User/cadmiumPrediction/netFlux.vue

@@ -18,37 +18,20 @@
 
     <!-- 主体内容区 -->
     <div class="content-area">
-      <!-- 地图区域 - 修改为横向布局 -->
-      <div class="horizontal-container">
-        <!-- 地图展示 -->
-        <div class="map-section">
-          <h3>Cd净通量空间分布图</h3>
-          <div v-if="loadingMap" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>地图加载中...</span>
-          </div>
-          <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd净通量空间分布图" class="map-image">
-          <div v-if="!mapImageUrl && !loadingMap" class="no-data">
-            <el-icon><Picture /></el-icon>
-            <p>暂无地图数据</p>
-          </div>
+      <!-- 地图区域 - 单独一行 -->
+      <div class="map-section">
+        <h3>Cd净通量空间分布图</h3>
+        <div v-if="loadingMap" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>地图加载中...</span>
         </div>
-        
-        <!-- 直方图展示 -->
-        <div class="histogram-section">
-          <h3>Cd净通量直方图</h3>
-          <div v-if="loadingHistogram" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>直方图加载中...</span>
-          </div>
-          <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd净通量直方图" class="histogram-image">
-          <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
-            <el-icon><Histogram /></el-icon>
-            <p>暂无直方图数据</p>
-          </div>
+        <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd净通量空间分布图" class="map-image">
+        <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+          <el-icon><Picture /></el-icon>
+          <p>暂无地图数据</p>
         </div>
       </div>
-
+      
       <!-- 统计图表区域 -->
       <div class="stats-area">
         <h3>Cd净通量统计信息</h3>
@@ -77,12 +60,25 @@
             <el-table-column prop="unit" label="单位" min-width="100" />
             <el-table-column prop="description" label="描述" min-width="200" />
           </el-table>
-          
+        </div>
         
         <div v-if="!loadingStats && !statisticsData.length" class="no-data">
           <el-icon><DataAnalysis /></el-icon>
           <p>暂无统计数据</p>
         </div>
+      </div>
+      
+      <!-- 直方图区域 - 单独一行，放在统计结果下面 -->
+      <div class="histogram-section">
+        <h3>Cd净通量直方图</h3>
+        <div v-if="loadingHistogram" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>直方图加载中...</span>
+        </div>
+        <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd净通量直方图" class="histogram-image">
+        <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+          <el-icon><Histogram /></el-icon>
+          <p>暂无直方图数据</p>
         </div>
       </div>
     </div>
@@ -339,7 +335,7 @@ export default {
         const blob = new Blob([response.data], { type: 'text/csv' });
         const link = document.createElement('a');
         link.href = URL.createObjectURL(blob);
-        link.download = `Cd净通量数据.csv`;
+        link.download = `Cd通净量数据.csv`;
         link.click();
         URL.revokeObjectURL(link.href);
         
@@ -423,26 +419,27 @@ export default {
   gap: 20px;
 }
 
-/* 横向布局容器 */
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  width: 100%;
-}
-
-.map-section, .histogram-section {
-  flex: 1;
-  min-width: 300px;
+.map-section, .histogram-section, .stats-area {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
-  min-height: 400px;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
+.map-section {
+  min-height: 500px;
+}
+
+.histogram-section {
+  min-height: 500px;
+}
+
+.stats-area {
+  min-height: 300px;
+}
+
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
@@ -451,16 +448,6 @@ export default {
   border-radius: 4px;
 }
 
-.table-area {
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
-}
-
 .loading-container {
   display: flex;
   flex-direction: column;
@@ -502,13 +489,8 @@ export default {
 
 /* 响应式布局调整 */
 @media (max-width: 992px) {
-  .horizontal-container {
+  .content-area {
     flex-direction: column;
   }
-  
-  .map-section, .histogram-section {
-    width: 100%;
-    flex: none;
-  }
 }
 </style>

src/views/User/cadmiumPrediction/totalInputFlux.vue

@@ -2,7 +2,6 @@
   <div class="container">
     <!-- 顶部操作栏 -->
     <div class="toolbar">
-     
       <!-- 操作按钮 -->
       <div class="action-buttons">
         <el-button class="custom-button" :disabled="!mapBlob" @click="exportMap">
@@ -19,37 +18,20 @@
 
     <!-- 主体内容区 -->
     <div class="content-area">
-      <!-- 地图区域 - 修改为横向布局 -->
-      <div class="horizontal-container">
-        <!-- 地图展示 -->
-        <div class="map-section">
-          <h3>Cd输入通量空间分布图</h3>
-          <div v-if="loadingMap" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>地图加载中...</span>
-          </div>
-          <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd输入通量空间分布图" class="map-image">
-          <div v-if="!mapImageUrl && !loadingMap" class="no-data">
-            <el-icon><Picture /></el-icon>
-            <p>暂无地图数据</p>
-          </div>
+      <!-- 地图区域 - 单独一行 -->
+      <div class="map-section">
+        <h3>Cd输入通量空间分布图</h3>
+        <div v-if="loadingMap" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>地图加载中...</span>
         </div>
-        
-        <!-- 直方图展示 -->
-        <div class="histogram-section">
-          <h3>Cd输入通量直方图</h3>
-          <div v-if="loadingHistogram" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>直方图加载中...</span>
-          </div>
-          <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd输入通量直方图" class="histogram-image">
-          <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
-            <el-icon><Histogram /></el-icon>
-            <p>暂无直方图数据</p>
-          </div>
+        <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd输入通量空间分布图" class="map-image">
+        <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+          <el-icon><Picture /></el-icon>
+          <p>暂无地图数据</p>
         </div>
       </div>
-
+      
       <!-- 统计图表区域 -->
       <div class="stats-area">
         <h3>Cd输入通量统计信息</h3>
@@ -78,12 +60,25 @@
             <el-table-column prop="unit" label="单位" min-width="100" />
             <el-table-column prop="description" label="描述" min-width="200" />
           </el-table>
-          
+        </div>
         
         <div v-if="!loadingStats && !statisticsData.length" class="no-data">
           <el-icon><DataAnalysis /></el-icon>
           <p>暂无统计数据</p>
         </div>
+      </div>
+      
+      <!-- 直方图区域 - 单独一行，放在统计结果下面 -->
+      <div class="histogram-section">
+        <h3>Cd输入通量直方图</h3>
+        <div v-if="loadingHistogram" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>直方图加载中...</span>
+        </div>
+        <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd输入通量直方图" class="histogram-image">
+        <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+          <el-icon><Histogram /></el-icon>
+          <p>暂无直方图数据</p>
         </div>
       </div>
     </div>
@@ -424,26 +419,27 @@ export default {
   gap: 20px;
 }
 
-/* 横向布局容器 */
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  width: 100%;
-}
-
-.map-section, .histogram-section {
-  flex: 1;
-  min-width: 300px;
+.map-section, .histogram-section, .stats-area {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
-  min-height: 400px;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
+.map-section {
+  min-height: 500px;
+}
+
+.histogram-section {
+  min-height: 500px;
+}
+
+.stats-area {
+  min-height: 300px;
+}
+
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
@@ -452,16 +448,6 @@ export default {
   border-radius: 4px;
 }
 
-.table-area {
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
-}
-
 .loading-container {
   display: flex;
   flex-direction: column;
@@ -503,13 +489,8 @@ export default {
 
 /* 响应式布局调整 */
 @media (max-width: 992px) {
-  .horizontal-container {
+  .content-area {
     flex-direction: column;
   }
-  
-  .map-section, .histogram-section {
-    width: 100%;
-    flex: none;
-  }
 }
 </style>

src/views/User/cadmiumPrediction/totalOutputFlux.vue

@@ -18,37 +18,20 @@
 
     <!-- 主体内容区 -->
     <div class="content-area">
-      <!-- 地图区域 - 修改为横向布局 -->
-      <div class="horizontal-container">
-        <!-- 地图展示 -->
-        <div class="map-section">
-          <h3>Cd输出通量空间分布图</h3>
-          <div v-if="loadingMap" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>地图加载中...</span>
-          </div>
-          <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd输出通量空间分布图" class="map-image">
-          <div v-if="!mapImageUrl && !loadingMap" class="no-data">
-            <el-icon><Picture /></el-icon>
-            <p>暂无地图数据</p>
-          </div>
+      <!-- 地图区域 - 单独一行 -->
+      <div class="map-section">
+        <h3>Cd输通量空间分布图</h3>
+        <div v-if="loadingMap" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>地图加载中...</span>
         </div>
-        
-        <!-- 直方图展示 -->
-        <div class="histogram-section">
-          <h3>Cd输出通量直方图</h3>
-          <div v-if="loadingHistogram" class="loading-container">
-            <el-icon class="loading-icon"><Loading /></el-icon>
-            <span>直方图加载中...</span>
-          </div>
-          <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd输出通量直方图" class="histogram-image">
-          <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
-            <el-icon><Histogram /></el-icon>
-            <p>暂无直方图数据</p>
-          </div>
+        <img v-if="mapImageUrl && !loadingMap" :src="mapImageUrl" alt="Cd输出通量空间分布图" class="map-image">
+        <div v-if="!mapImageUrl && !loadingMap" class="no-data">
+          <el-icon><Picture /></el-icon>
+          <p>暂无地图数据</p>
         </div>
       </div>
-
+      
       <!-- 统计图表区域 -->
       <div class="stats-area">
         <h3>Cd输出通量统计信息</h3>
@@ -77,12 +60,25 @@
             <el-table-column prop="unit" label="单位" min-width="100" />
             <el-table-column prop="description" label="描述" min-width="200" />
           </el-table>
-          
+        </div>
         
         <div v-if="!loadingStats && !statisticsData.length" class="no-data">
           <el-icon><DataAnalysis /></el-icon>
           <p>暂无统计数据</p>
         </div>
+      </div>
+      
+      <!-- 直方图区域 - 单独一行，放在统计结果下面 -->
+      <div class="histogram-section">
+        <h3>Cd输出通量直方图</h3>
+        <div v-if="loadingHistogram" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>直方图加载中...</span>
+        </div>
+        <img v-if="histogramImageUrl && !loadingHistogram" :src="histogramImageUrl" alt="Cd输出通量直方图" class="histogram-image">
+        <div v-if="!histogramImageUrl && !loadingHistogram" class="no-data">
+          <el-icon><Histogram /></el-icon>
+          <p>暂无直方图数据</p>
         </div>
       </div>
     </div>
@@ -225,10 +221,6 @@ export default {
           const stats = response.data;
           this.statisticsData = this.formatStatisticsData(stats);
           this.updateTime = new Date().toISOString();
-          
-          this.$nextTick(() => {
-            this.initCharts(stats);
-          });
         }
       } catch (error) {
         console.error('获取统计信息失败:', error);
@@ -423,26 +415,27 @@ export default {
   gap: 20px;
 }
 
-/* 横向布局容器 */
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  width: 100%;
-}
-
-.map-section, .histogram-section {
-  flex: 1;
-  min-width: 300px;
+.map-section, .histogram-section, .stats-area {
   background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
   padding: 15px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
-  min-height: 400px;
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
+.map-section {
+  min-height: 500px;
+}
+
+.histogram-section {
+  min-height: 500px;
+}
+
+.stats-area {
+  min-height: 300px;
+}
+
 .map-image, .histogram-image {
   width: 100%;
   height: 100%;
@@ -451,16 +444,6 @@ export default {
   border-radius: 4px;
 }
 
-.table-area {
-  width: 100%;
-  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 20px;
-  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
-}
-
 .loading-container {
   display: flex;
   flex-direction: column;
@@ -502,13 +485,8 @@ export default {
 
 /* 响应式布局调整 */
 @media (max-width: 992px) {
-  .horizontal-container {
+  .content-area {
     flex-direction: column;
   }
-  
-  .map-section, .histogram-section {
-    width: 100%;
-    flex: none;
-  }
 }
 </style>

src/views/User/hmInFlux/grainRemoval/grainRemovalInputFlux.vue

@@ -14,6 +14,16 @@
         <i class="fas fa-exclamation-triangle"></i> {{ error }}
       </div>
 
+      <div class="visualization-section">
+          <img v-if="visualizationImage" :src="visualizationImage" alt="Cd含量地图" class="result-image">
+          <div v-if="visualizationError" class="error-section">
+            <i class="fas fa-exclamation-triangle"></i> {{ visualizationError }}
+          </div>
+          <div v-else class="image-container">
+            
+          </div>
+        </div>
+
       <template v-if="!loading && !error">
         <div class="statistics-section">
           <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
@@ -37,17 +47,6 @@
           </div>
         </div>
 
-        <div class="visualization-section">
-          <h2><i class="fas fa-map"></i> 可视化分析图</h2>
-          <img v-if="visualizationImage" :src="visualizationImage" alt="Cd含量地图" class="result-image">
-          <div v-if="visualizationError" class="error-section">
-            <i class="fas fa-exclamation-triangle"></i> {{ visualizationError }}
-          </div>
-          <div v-else class="image-container">
-            
-          </div>
-        </div>
-
         <div class="data-section">
           <h2><i class="fas fa-table"></i> 详细数据</h2>
           <el-table
@@ -118,7 +117,7 @@ export default {
   props: {
     area: {
       type: String,
-      default: '韶关'
+      default: '乐昌市'
     }
   },
   setup(props) {
@@ -184,7 +183,7 @@ export default {
         
         // 获取可视化图片
         const imageResponse = await fetch(
-          `http://127.0.0.1:8000/api/cd-flux-removal/grain-removal/visualize?area=${encodeURIComponent(props.area)}&level=city`
+          `http://127.0.0.1:8000/api/cd-flux-removal/grain-removal/visualize?area=${encodeURIComponent(props.area)}&level=county`
         );
         
         if (!imageResponse.ok) {

src/views/User/hmInFlux/grainRemoval/samplingDesc1.vue

@@ -125,7 +125,7 @@ export default {
 
 .content-section:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
   background: rgba(255, 255, 255, 0.92);
 }
 
@@ -165,7 +165,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -242,7 +243,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置与图片相同的最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -326,6 +328,11 @@ p::before {
   .sampling-video {
     min-height: 300px;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 700px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 768px) {
@@ -356,6 +363,11 @@ p::before {
   .video-title {
     font-size: 1.3rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 480px) {
@@ -399,5 +411,10 @@ p::before {
   .video-title {
     font-size: 1.1rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 100%; /* 小屏幕上宽度100% */
+  }
 }
 </style>

src/views/User/hmInFlux/strawRemoval/samplingDesc2.vue

@@ -124,7 +124,7 @@ export default {
 
 .content-section:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
   background: rgba(255, 255, 255, 0.92);
 }
 
@@ -164,7 +164,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -241,7 +242,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置与图片相同的最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -325,6 +327,11 @@ p::before {
   .sampling-video {
     min-height: 300px;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 700px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 768px) {
@@ -355,6 +362,11 @@ p::before {
   .video-title {
     font-size: 1.3rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 480px) {
@@ -398,5 +410,10 @@ p::before {
   .video-title {
     font-size: 1.1rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 100%; /* 小屏幕上宽度100% */
+  }
 }
 </style>

src/views/User/hmInFlux/strawRemoval/strawRemovalInputFlux.vue

@@ -14,6 +14,16 @@
         <i class="fas fa-exclamation-triangle"></i> {{ error }}
       </div>
 
+       <div class="visualization-section">
+          <img v-if="visualizationImage" :src="visualizationImage" alt="Cd含量地图" class="result-image">
+          <div v-if="visualizationError" class="error-section">
+            <i class="fas fa-exclamation-triangle"></i> {{ visualizationError }}
+          </div>
+          <div v-else class="image-container">
+            
+          </div>
+        </div>
+
       <template v-if="!loading && !error">
         <div class="statistics-section">
           <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
@@ -37,17 +47,6 @@
           </div>
         </div>
 
-        <div class="visualization-section">
-          <h2><i class="fas fa-map"></i> 可视化分析图</h2>
-          <img v-if="visualizationImage" :src="visualizationImage" alt="Cd含量地图" class="result-image">
-          <div v-if="visualizationError" class="error-section">
-            <i class="fas fa-exclamation-triangle"></i> {{ visualizationError }}
-          </div>
-          <div v-else class="image-container">
-            
-          </div>
-        </div>
-
         <div class="data-section">
           <h2><i class="fas fa-table"></i> 详细数据</h2>
           <el-table
@@ -118,7 +117,7 @@ export default {
   props: {
     area: {
       type: String,
-      default: '韶关'
+      default: '乐昌市'
     }
   },
   setup(props) {
@@ -184,7 +183,7 @@ export default {
         
         // 获取可视化图片
         const imageResponse = await fetch(
-          `http://127.0.0.1:8000/api/cd-flux-removal/straw-removal/visualize?area=${encodeURIComponent(props.area)}&level=city`
+          `http://127.0.0.1:8000/api/cd-flux-removal/straw-removal/visualize?area=${encodeURIComponent(props.area)}&level=county`
         );
         
         if (!imageResponse.ok) {

src/views/User/hmInFlux/subsurfaceLeakage/samplingDesc3.vue

@@ -123,7 +123,7 @@ export default {
 
 .content-section:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
   background: rgba(255, 255, 255, 0.92);
 }
 
@@ -163,7 +163,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -240,7 +241,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置与图片相同的最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -324,6 +326,11 @@ p::before {
   .sampling-video {
     min-height: 300px;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 700px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 768px) {
@@ -354,6 +361,11 @@ p::before {
   .video-title {
     font-size: 1.3rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 480px) {
@@ -397,5 +409,10 @@ p::before {
   .video-title {
     font-size: 1.1rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 100%; /* 小屏幕上宽度100% */
+  }
 }
 </style>

src/views/User/hmInFlux/surfaceRunoff/samplingDesc4.vue

@@ -122,7 +122,7 @@ export default {
 
 .content-section:hover {
   transform: translateY(-5px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 25px rgba(极简版0, 0, 0, 0.15);
   background: rgba(255, 255, 255, 0.92);
 }
 
@@ -162,7 +162,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -239,7 +240,8 @@ p::before {
   overflow: hidden;
   position: relative;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  max-width: 800px;
+  max-width: 800px; /* 设置与图片相同的最大宽度 */
+  width: 100%; /* 宽度100% */
   margin: 0 auto;
   transition: all 0.4s ease;
 }
@@ -323,6 +325,11 @@ p::before {
   .sampling-video {
     min-height: 300px;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 700px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 768px) {
@@ -353,6 +360,11 @@ p::before {
   .video-title {
     font-size: 1.3rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 600px; /* 小屏幕上减小最大宽度 */
+  }
 }
 
 @media (max-width: 480px) {
@@ -396,5 +408,10 @@ p::before {
   .video-title {
     font-size: 1.1rem;
   }
+  
+  .image-container,
+  .video-container {
+    max-width: 100%; /* 小屏幕上宽度100% */
+  }
 }
 </style>