.env

@@ -1,3 +1,3 @@
-VITE_API_URL= 'https://127.0.0.1:5000'
+VITE_API_URL= 'https://www.soilgd.com:5000'
 VITE_TMAP_KEY='2R4BZ-FF4RM-Q6C6U-6TCJL-O2EN5-DVFH5'
 'https://www.soilgd.com:5000''https://127.0.0.1:5000'

components.d.ts

@@ -23,15 +23,19 @@ declare module 'vue' {
     CrossSetionData1: typeof import('./src/components/irrpollution/crossSetionData1.vue')['default']
     CrossSetionData2: typeof import('./src/components/irrpollution/crossSetionData2.vue')['default']
     CrossSetionTencentmap: typeof import('./src/components/irrpollution/crossSetionTencentmap.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
@@ -39,15 +43,21 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     HeavyMetalEnterprisechart: typeof import('./src/components/atmpollution/heavyMetalEnterprisechart.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
@@ -61,7 +71,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TencentMapView: typeof import('./src/components/irrpollution/tencentMapView.vue')['default']
-    Test: typeof import('./src/components/irrpollution/test.vue')['default']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     Waterassaydata1: typeof import('./src/components/irrpollution/waterassaydata1.vue')['default']
     Waterassaydata2: typeof import('./src/components/irrpollution/waterassaydata2.vue')['default']
@@ -70,4 +79,7 @@ declare module 'vue' {
     Waterdataline: typeof import('./src/components/irrpollution/waterdataline.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

package-lock.json

@@ -5052,7 +5052,7 @@
       "version": "1.9.16",
       "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz",
       "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
@@ -5293,7 +5293,7 @@
     },
     "node_modules/@vue-leaflet/vue-leaflet": {
       "version": "0.10.1",
-      "resolved": "https://registry.npmmirror.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
       "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
       "license": "MIT",
       "dependencies": {
@@ -8123,7 +8123,7 @@
     },
     "node_modules/leaflet": {
       "version": "1.9.4",
-      "resolved": "https://registry.npmmirror.com/leaflet/-/leaflet-1.9.4.tgz",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
       "license": "BSD-2-Clause"
     },
@@ -9759,7 +9759,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

src/components/layout/AppLayout.vue

@@ -110,6 +110,25 @@ const bgRouteMap: Record<string, string> = {
   //添加地表径流相关页面的背景图
   "/samplingDesc4": "surface-runoff.jpg",
   "/surfaceRunoffInputFlux": "surface-runoff.jpg",
+  "/totalInputFlux": "background.jpg",
+  "/totalOutputFlux": "background.jpg",
+  "/netFlux": "background.jpg",
+  "/currentYearConcentration": "background.jpg",
+  "/TotalCadmiumPrediction": "background.jpg",
+  "/EffectiveCadmiumPrediction": "background.jpg",
+  "/CropCadmiumPrediction": "background.jpg",
+  "/cropRiskAssessment": "background.jpg",
+  "/farmlandQualityAssessment": "background.jpg",
+  "/Calculation": "background.jpg",
+  "/SoilAcidReductionIterativeEvolution": "background.jpg",
+  "/AcidNeutralizationModel": "background.jpg",
+  "/SoilAcidificationIterativeEvolution": "background.jpg",
+  "/TraditionalFarmingRisk": "background.jpg",
+  "/HeavyMetalCadmiumControl": "background.jpg",
+  "/SoilAcidificationControl": "background.jpg",
+  "/DetectionStatistics": "background.jpg",
+  "/FarmlandPollutionStatistics": "background.jpg",
+  "/PlantingRiskStatistics": "background.jpg",
 };
 
 // 当前是否为特殊背景图页面
@@ -120,7 +139,7 @@ function getBgImageUrl(): string {
   console.log("根据路径查找背景文件名:", bgFile);
   if (bgFile) {
     try {
-      const url = `url(${new URL(`../../assets/bg/${bgFile}`, import.meta.url).href})`;
+      const url = `url(${new URL(`../../assets/bg/background.jpg`, import.meta.url).href})`;
       return url;
     } catch (error) {
       console.error("加载背景图失败:", error);
@@ -508,7 +527,7 @@ const mainStyle = computed(() => {
 .welcome-text {
   font-size: 28px;
   font-weight: 500;
-  color: #333 !important;
+  color: #ffffff !important;
   /* 深色文字 */
 }
 
@@ -601,7 +620,6 @@ const mainStyle = computed(() => {
 .logo {
   height: 60px;
 }
-
 .project-name {
   font-size: 48px;
   font-weight: bold;

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

@@ -1,97 +1,187 @@
 <template>
   <div class="sampling-process">
-    <h2>1. 实地走访调查农业投入品使用情况:</h2>
-    <p>
-      实地走访调查项目实施区域作物种植面积、氮肥、磷肥、钾肥、复合肥、商品有机肥、农药和农家肥等年均施用量。
-      后期方案可利用无人机光谱识别技术调查项目区内的种植结构，再根据具体种植结构详细调查施肥习惯（如水稻田、蔬菜地等等）。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image1" alt="农业投入品使用情况" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图1 农业投入品使用情况
-        </p>
+    <!-- 第一部分：实地走访调查 -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>实地走访调查农业投入品使用情况</h2>
       </div>
-    </div>
-
-    <h2>2.市面流通的农业投入品样品采集:</h2>
-    <p>
-      （1）合计采集市面上流通的及相关行业生产的各种农业投入品合计137份;<br>
-      （2）种类包含但不限于磷肥、钾肥、复合肥、叶面肥、常用农药、农家肥、地膜等;
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image2" alt="农业化肥采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-1 农业化肥采集
-        </p>
-      </div>
-      <div class="image-container">
-        <el-image :src="image3" alt="农药采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-2 农药采集
-        </p>
+      
+      <div class="section-content">
+        <div class="info-card">
+          <div class="card-icon">🚜</div>
+          <div class="card-content">
+            <p>
+              实地走访调查项目实施区域作物种植面积、氮肥、磷肥、钾肥、复合肥、商品有机肥、
+              农药和农家肥等年均施用量。
+            </p>
+            <p>
+              <span class="highlight">后期方案：</span>利用无人机光谱识别技术调查项目区内的种植结构，
+              再根据具体种植结构详细调查施肥习惯（如水稻田、蔬菜地等）。
+            </p>
+          </div>
+        </div>
+        
+        <div class="image-container">
+          <el-image :src="image1" alt="农业投入品使用情况" class="sampling-image"></el-image>
+          <p class="image-caption">图1 农业投入品使用情况</p>
+        </div>
       </div>
-      <div class="image-container">
-        <el-image :src="image4" alt="农膜采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-3 农膜采集
-        </p>
+    </div>
+    
+    <!-- 第二部分：样品采集 -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">2</div>
+        <h2>市面流通的农业投入品样品采集</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image5" alt="有机肥采集" class="sampling-image"></el-image>
-        <p class="image-caption">
-          图2-4 有机肥采集
-        </p>
+      
+      <div class="section-content">
+        <div class="collection-info">
+          <div class="collection-card">
+            <div class="collection-icon">📦</div>
+            <div class="collection-text">
+              <h3>样品数量</h3>
+              <p>合计采集市面上流通的及相关行业生产的各种农业投入品共137份</p>
+            </div>
+          </div>
+          
+          <div class="collection-card">
+            <div class="collection-icon">📋</div>
+            <div class="collection-text">
+              <h3>样品种类</h3>
+              <p>包含但不限于：磷肥、钾肥、复合肥、叶面肥、常用农药、农家肥、地膜等</p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="image-gallery">
+          <div class="gallery-card">
+            <el-image :src="image2" alt="农业化肥采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-1 农业化肥采集</p>
+          </div>
+          <div class="gallery-card">
+            <el-image :src="image3" alt="农药采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-2 农药采集</p>
+          </div>
+          <div class="gallery-card">
+            <el-image :src="image4" alt="农膜采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-3 农膜采集</p>
+          </div>
+          <div class="gallery-card">
+            <el-image :src="image5" alt="有机肥采集" class="sampling-image"></el-image>
+            <p class="image-caption">图2-4 有机肥采集</p>
+          </div>
+        </div>
       </div>
     </div>
-
-    <h2>3. 采集农业投入品样品重金属含量测试:</h2>
-    <p>
-      在完成农业投入品重金属输入通量计算公式的构建和优化后，最终的结果输出将包括各类农业投入品的重金属输入通量数据。
-      这些数据能够量化每种农业投入品在农田中所引入的重金属污染，并为后续的政策制定和管理提供依据。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image6" alt="各农业投入品测试结果" class="sampling-image"></el-image>
-        <p class="image-caption">图3-1 各农业投入品测试结果</p>
+    
+    <!-- 第三部分：重金属含量测试（保持原图比例） -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">3</div>
+        <h2>采集农业投入品样品重金属含量测试</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image7" alt="农业投入品镉含量" class="sampling-image"></el-image>
-        <p class="image-caption">图3-2 农业投入品镉含量</p>
+      
+      <div class="section-content">
+        <div class="testing-info">
+          <div class="info-card">
+            <div class="card-icon">🔬</div>
+            <div class="card-content">
+              <p>
+                在完成农业投入品重金属输入通量计算公式的构建和优化后，最终的结果输出将包括
+                各类农业投入品的重金属输入通量数据。
+              </p>
+              <p>
+                这些数据能够量化每种农业投入品在农田中所引入的重金属污染，并为后续的政策制定
+                和管理提供依据。
+              </p>
+            </div>
+          </div>
+          
+          <!-- 保持原图比例的测试结果 -->
+          <div class="testing-gallery">
+            <div class="results-card">
+              <div class="results-header">
+                <h3>各农业投入品重金属含量测试结果</h3>
+                <p>不同种类农业投入品中重金属含量对比分析</p>
+              </div>
+              <div class="image-container-proportional">
+                <el-image 
+                  :src="image6" 
+                  alt="各农业投入品测试结果" 
+                  class="results-image-proportional">
+                </el-image>
+              </div>
+              <p class="image-caption">图3-1 各农业投入品测试结果</p>
+            </div>
+            
+            <div class="results-card">
+              <div class="results-header">
+                <h3>农业投入品镉含量专项分析</h3>
+                <p>各类农业投入品中镉元素含量分布情况</p>
+              </div>
+              <div class="image-container-proportional">
+                <el-image 
+                  :src="image7" 
+                  alt="农业投入品镉含量" 
+                  class="results-image-proportional">
+                </el-image>
+              </div>
+              <p class="image-caption">图3-2 农业投入品镉含量</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-
-    <h2>4. 农业投入品重金属输入通量计算方法:</h2>
-    <p>
-      通过农业投入品的施用数据与重金属检测结果，建立重金属输入通量计算公式，精确计算不同农业投入品在农田中所引入的重金属污染通量。
-      该阶段包括公式的初步构建、验证与校准，以及公式的持续优化。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image8" alt="农业投入品用量计算方法" class="sampling-image"></el-image>
-        <p class="image-caption">图4-1 农业投入品用量计算方法</p>
-        <div class="formula-text">
-          <p>
-            式中，Ni为农业投入品i的单位面积年施用量，单位：kg/ha/a；
-            Mi为农业投入品i年施用总量，单位：kg/a；
-            Ax为项目区域全年农作物总播种面积，单位：ha；
-          </p>
-        </div>
+    
+    <!-- 第四部分：计算方法 -->
+    <div class="process-section">
+      <div class="section-header">
+        <div class="section-number">4</div>
+        <h2>农业投入品重金属输入通量计算方法</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image9" alt="农业投入品重金属输入通量计算方法" class="sampling-image"></el-image>
-        <p class="image-caption">图4-2 农业投入品重金属输入通量计算方法</p>
-        <div class="formula-text">
-          <p>
-            式中，Ff为单位面积农业投入品途径的重金属输入通量，g/ha/a；
-            Ni为农业投入品i的单位面积年施用量，kg/ha/a；
-            Cij为重金属j在农业投入品i中的含量，mg/kg。
-          </p>
+      
+      <div class="section-content">
+        <div class="info-card">
+          <div class="card-icon">🧮</div>
+          <div class="card-content">
+            <p>
+              通过农业投入品的施用数据与重金属检测结果，建立重金属输入通量计算公式，
+              精确计算不同农业投入品在农田中所引入的重金属污染通量。
+            </p>
+            <p>
+              该阶段包括公式的初步构建、验证与校准，以及公式的持续优化。
+            </p>
+          </div>
+        </div>
+        
+        <div class="formula-section">
+          <div class="formula-card">
+            <div class="formula-image">
+              <el-image :src="image8" alt="农业投入品用量计算方法" class="sampling-image"></el-image>
+              <p class="image-caption">图4-1 农业投入品用量计算方法</p>
+            </div>
+            <div class="formula-text">
+              <p>式中：</p>
+              <p>N<sub>i</sub>为农业投入品i的单位面积年施用量，单位：kg/ha/a；</p>
+              <p>M<sub>i</sub>为农业投入品i年施用总量，单位：kg/a；</p>
+              <p>A<sub>x</sub>为项目区域全年农作物总播种面积，单位：ha；</p>
+            </div>
+          </div>
+          
+          <div class="formula-card">
+            <div class="formula-image">
+              <el-image :src="image9" alt="农业投入品重金属输入通量计算方法" class="sampling-image"></el-image>
+              <p class="image-caption">图4-2 农业投入品重金属输入通量计算方法</p>
+            </div>
+            <div class="formula-text">
+              <p>式中：</p>
+              <p>F<sub>f</sub>为单位面积农业投入品途径的重金属输入通量，g/ha/a；</p>
+              <p>N<sub>i</sub>为农业投入品i的单位面积年施用量，kg/ha/a；</p>
+              <p>C<sub>ij</sub>为重金属j在农业投入品i中的含量，mg/kg。</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -118,11 +208,11 @@ export default {
 
 <style scoped>
 .sampling-process {
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  min-height: 100vh;
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(245, 252, 240, 0.8) 0%, rgba(235, 248, 255, 0.8) 100%);
   position: relative;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -133,105 +223,376 @@ export default {
   width: 100%;
   height: 100%;
   background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
-  opacity: 0.3;
+  opacity: 0.08;
   z-index: -1;
+  filter: blur(2px);
 }
 
-.image-row {
+.process-section {
+  margin-bottom: 50px;
+  padding: 30px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 8px 25px rgba(0, 60, 120, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.process-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 30px 0;
-  gap: 20px;
+  align-items: center;
+  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-p {
-  text-indent: 2em;
-  margin: 15px 0;
-  line-height: 1.6;
+.section-number {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #4a9ef7, #3a9fd3);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
+}
+
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  padding: 0 10px;
+}
+
+.info-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
+  border-left: 4px solid #3a9fd3;
 }
 
-/* 特定段落取消缩进 */
-p:has(> br) {
-  text-indent: 0;
+.card-icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
 }
 
-.image-container {
+.card-content p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #2d3748;
+  margin: 0 0 15px 0;
+}
+
+.highlight {
+  font-weight: 600;
+  color: #1a6fb3;
+}
+
+/* 样品采集部分样式 */
+.collection-info {
+  display: flex;
+  gap: 25px;
+  margin-bottom: 30px;
+}
+
+.collection-card {
   flex: 1;
-  min-width: 280px;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
   display: flex;
-  flex-direction: column;
+  padding: 20px;
+  background: rgba(245, 252, 255, 0.7);
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border-top: 3px solid #3a9fd3;
 }
 
-.image-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.85);
+.collection-icon {
+  font-size: 2.2rem;
+  margin-right: 20px;
+  color: #3a9fd3;
 }
 
-.sampling-image {
-  border-radius: 12px 12px 0 0 !important;
+.collection-text h3 {
+  color: #1a365d;
+  font-size: 1.3rem;
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
+.collection-text p {
+  font-size: 1.05rem;
+  line-height: 1.6;
+  color: #2d3748;
+  margin: 0;
+}
+
+/* 图片画廊样式 */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 25px;
+}
+
+.gallery-card {
+  border-radius: 15px;
   overflow: hidden;
-  border: none !important;
-  width: 100% !important;
-  height: 450px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s ease;
+  background: white;
+}
+
+.gallery-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+}
+
+.sampling-image {
+  width: 100%;
+  height: 230px;
   display: block;
-  transition: transform 0.5s ease;
-  background: rgba(255, 255, 255, 0.4);
   object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.03);
+.gallery-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
 .image-caption {
   text-align: center;
   font-size: 15px;
   color: #2d3748;
-  padding: 12px;
+  padding: 15px;
   font-weight: 500;
-  background: rgba(248, 250, 252, 0.7);
+  background: rgba(248, 250, 252, 0.8);
   margin: 0;
+  border-top: 1px dashed #cbd5e0;
 }
 
-.formula-text {
+/* 第三部分：重金属含量测试（保持原图比例） */
+.testing-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.testing-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px;
+  margin-top: 20px;
+}
+
+.results-card {
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+  transition: all 0.4s ease;
+  background: white;
+  padding: 0;
+}
+
+.results-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+}
+
+.results-header {
+  padding: 20px;
+  background: linear-gradient(90deg, #f0f9ff, #e6f7ff);
+  border-bottom: 1px solid #cce5ff;
+}
+
+.results-header h3 {
+  color: #1a365d;
+  font-size: 1.5rem;
+  margin: 0 0 10px 0;
+  font-weight: 600;
+}
+
+.results-header p {
+  font-size: 1.1rem;
+  color: #4a5568;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 保持原图比例的图片容器 */
+.image-container-proportional {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background: white;
+}
+
+.results-image-proportional {
+  max-width: 100%;
+  max-height: 350px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+  transition: transform 0.4s ease;
+}
+
+.results-card:hover .results-image-proportional {
+  transform: scale(1.03);
+}
+
+/* 公式部分样式 */
+.formula-section {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 30px;
+}
+
+.formula-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 15px;
+  overflow: hidden;
+  background: rgba(250, 255, 245, 0.7);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  border-top: 3px solid #5cb85c;
+}
+
+.formula-image {
   padding: 15px;
-  background: rgba(245, 249, 255, 0.6);
-  border-top: 1px dashed #cbd5e0;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.formula-text {
+  padding: 20px;
 }
+
 .formula-text p {
-  text-indent: 0;
-  font-size: 14px;
-  color: #1a365d;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #2d3748;
+  margin: 0 0 10px 0;
+}
+
+.formula-text sub {
+  font-size: 0.8em;
+  vertical-align: sub;
 }
 
 /* 响应式设计 */
+@media (max-width: 1200px) {
+  .image-gallery {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .formula-section {
+    grid-template-columns: 1fr;
+  }
+  
+  .testing-gallery {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 900px) {
-  .image-container {
-    min-width: 48%;
+  .collection-info {
+    flex-direction: column;
+  }
+  
+  .process-section {
+    padding: 25px;
+  }
+  
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
+  }
+  
+  h2 {
+    font-size: 1.7rem;
   }
 }
 
 @media (max-width: 768px) {
-  .image-container {
-    min-width: 100%;
+  .image-gallery {
+    grid-template-columns: 1fr;
+  }
+  
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .info-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .card-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .collection-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .results-image-proportional {
+    max-height: 300px;
   }
 }
 
 @media (max-width: 480px) {
   .sampling-process {
-    padding: 10px;
+    padding: 15px;
   }
-
+  
+  .process-section {
+    padding: 20px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
   .sampling-image {
     height: 200px;
   }
+  
+  .results-image-proportional {
+    max-height: 250px;
+  }
 }
 </style>

src/views/User/HmOutFlux/atmosDeposition/AtmosDepositionSamplingDesc.vue

@@ -1,68 +1,106 @@
 <template>
   <div class="sampling-process">
-    <h2>1.建立大气污染源清单：</h2>
-    <p>
-      <strong>污染源统计：</strong>
-      根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，
-      对韶关具有排污许可证的企业进行数据统计与调查分析；
-    </p>
-    <p>
-      <strong>污染源统计：</strong>
-      根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，
-      对韶关具有排污许可证的企业进行数据统计与调查分析；
-    </p>
-    <p>
-      <strong>行业调查与筛选：</strong>
-      针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、
-      有色金属冶炼、化工、电子电路制造等。
-    </p>
-    <p>
-      <strong>企业调查与统计分析：</strong>
-      对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、
-      排放标准等信息，建立源清单的详细数据库。对企业的生产规模、产值、用地情况等进行综合评估，确定其在污染排放中的影响程度。
-    </p>
-    <p>
-      <strong>排放数据收集：</strong>
-      收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、
-      硫化物排放总量等大气污染物。获取数据的来源包括企业排污许可证、环保部门监管数据、企业自行监测报告、第三方监测机构数据等。
-    </p>
-    <p>
-      <strong>数据验证与质量控制：</strong>
-      对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，
-      排除可能存在的错误和异常数据，提高数据的可信度。
-    </p>
-    <div class="image-row">
-      <div class="image-container">
+    <!-- 第一部分：建立大气污染源清单 -->
+    <div class="content-section">
+      <div class="section-header">
+        <div class="step-number">1</div>
+        <h2>建立大气污染源清单</h2>
+      </div>
+      
+      <div class="process-steps">
+        <div class="step-card">
+          <div class="step-icon">📊</div>
+          <div class="step-content">
+            <h3>污染源统计</h3>
+            <p>根据韶关市环保部门或政府官方网站公开资料及全国排污许可证管理信息平台，对韶关具有排污许可证的企业进行数据统计与调查分析</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">🔍</div>
+          <div class="step-content">
+            <h3>行业调查与筛选</h3>
+            <p>针对可能存在重金属排放的行业进行全面调查和筛选。这些行业包括燃煤电厂、蓄电池制造、危险废物治理、矿山采选、有色金属冶炼、化工、电子电路制造等</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">🏭</div>
+          <div class="step-content">
+            <h3>企业调查与统计分析</h3>
+            <p>对所有重金属排放企业进行详细调查和统计分析，包括但不限于企业名称、地址坐标、生产工艺、主要产品、排放设施、排放标准等信息，建立源清单的详细数据库</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">📥</div>
+          <div class="step-content">
+            <h3>排放数据收集</h3>
+            <p>收集以上所有企业的大气排放数据，包括但不限于污染物排放许可值、重金属排放总量、大气颗粒物排放总量、氮氧化物排放总量、硫化物排放总量等大气污染物</p>
+          </div>
+        </div>
+        
+        <div class="step-card">
+          <div class="step-icon">✅</div>
+          <div class="step-content">
+            <h3>数据验证与质量控制</h3>
+            <p>对收集到的排放数据进行查找验证和质量控制，确保数据的准确性和可靠性。检查数据的完整性和一致性，排除可能存在的错误和异常数据</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="compact-image-container">
         <el-image :src="image1" alt="大气干湿沉降示意图" class="sampling-image"></el-image>
         <p class="image-caption">图1 大气干湿沉降示意图</p>
       </div>
     </div>
-
-    <h2>2.现场调研：</h2>
-    <p>
-      制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，
-      选择合适的调研方法，如问卷调查、访谈、观察法等。按照调研计划，前往现场进行调研，对企业进行前期的实地考察，
-      了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。在调研过程中，
-      注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。
-    </p>
-    <div class="image-row">
-      <div class="image-container">
+    
+    <!-- 第二部分：现场调研 -->
+    <div class="content-section">
+      <div class="section-header">
+        <div class="step-number">2</div>
+        <h2>现场调研</h2>
+      </div>
+      
+      <div class="text-content">
+        <p>制定重金属排放源的详细调研计划，包括调研时间、地点、人员分工、调研方法等。根据研究目的和问题，选择合适的调研方法，如问卷调查、访谈、观察法等。</p>
+        <p>按照调研计划，前往现场进行调研，对企业进行前期的实地考察，了解能源使用、生产工艺及废气排放情况。对企业所在区域进行调查，大气排放是否会对周围区域产生影响。</p>
+        <p>在调研过程中，注意信息的获取与保存，比如拍照、排污口测距、风向记录等等。</p>
+      </div>
+      
+      <div class="compact-image-container">
         <el-image :src="image2" alt="干湿沉降收集装置" class="sampling-image"></el-image>
         <p class="image-caption">图2 干湿沉降收集装置</p>
       </div>
     </div>
-
-    <h2>3.样品分析：</h2>
-    <p>
-      <strong>重金属检测技术：</strong>
-      例如原子吸收光谱法（AAS）、电感耦合等离子体质谱法（ICP-MS）、X射线荧光光谱法（XRF）等。
-    </p>
-    <p>
-      <strong>数据处理与分析：</strong>
-      质量控制和数据分析的统计方法。
-    </p>
-
-
+    
+    <!-- 第三部分：样品分析 -->
+    <div class="content-section">
+      <div class="section-header">
+        <div class="step-number">3</div>
+        <h2>样品分析</h2>
+      </div>
+      
+      <div class="analysis-methods">
+        <div class="method-card">
+          <h3>重金属检测技术</h3>
+          <ul>
+            <li>原子吸收光谱法（AAS）</li>
+            <li>电感耦合等离子体质谱法（ICP-MS）</li>
+            <li>X射线荧光光谱法（XRF）</li>
+          </ul>
+        </div>
+        
+        <div class="method-card">
+          <h3>数据处理与分析</h3>
+          <ul>
+            <li>质量控制方法</li>
+            <li>统计分析技术</li>
+            <li>数据可视化工具</li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -79,11 +117,11 @@ export default {
 
 <style scoped>
 .sampling-process {
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  min-height: 100vh;
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(240, 248, 255, 0.8) 0%, rgba(230, 247, 255, 0.8) 100%);
   position: relative;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -92,95 +130,249 @@ export default {
   top: 0;
   left: 0;
   width: 100%;
+  height: 100%;
   background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
-  opacity: 0.3;
+  opacity: 0.15;
   z-index: -1;
+  filter: blur(2px);
+}
+
+.content-section {
+  margin-bottom: 50px;
+  padding: 25px;
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
 }
 
-.image-row {
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 30px 0;
-  gap: 20px;
+  align-items: center;
+  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 207, 213, 0.3);
+}
+
+.step-number {
+  width: 45px;
+  height: 45px;
+  background: linear-gradient(135deg, #4a9ef7, #3acfd5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 4px 8px rgba(74, 158, 247, 0.3);
+}
+
+h2 {
+  color: #1a365d;
+  font-size: 1.8rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.text-content {
+  margin-bottom: 25px;
 }
 
 p {
-  text-indent: 2em;
+  margin: 15px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.05rem;
 }
 
-.image-container {
-  flex: 1;
-  min-width: 280px;
+/* 步骤卡片样式 */
+.process-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.step-card {
+  display: flex;
+  background: rgba(245, 249, 255, 0.6);
   border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  padding: 20px;
   transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-left: 4px solid #4a9ef7;
+}
+
+.step-card:hover {
+  background: rgba(230, 242, 255, 0.8);
+  transform: translateX(5px);
+}
+
+.step-icon {
+  font-size: 2rem;
+  margin-right: 20px;
+  color: #3acfd5;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-content h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 1.3rem;
+}
 
-  /* 新增：使用 flex 布局，垂直方向堆叠，内容居中 */
+/* 分析方法卡片 */
+.analysis-methods {
   display: flex;
-  flex-direction: column;
-  align-items: center; /* 水平居中 */
+  gap: 20px;
+  margin-top: 20px;
 }
 
-.image-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.85);
+.method-card {
+  flex: 1;
+  background: rgba(245, 249, 255, 0.6);
+  border-radius: 12px;
+  padding: 20px;
+  border-top: 3px solid #3acfd5;
 }
 
-.sampling-image {
-  border-radius: 12px 12px 0 0 !important;
+.method-card h3 {
+  color: #1a365d;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.3rem;
+}
+
+.method-card ul {
+  padding-left: 20px;
+  margin: 0;
+}
+
+.method-card li {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+/* 紧凑图片容器 */
+.compact-image-container {
+  max-width: 700px;
+  margin: 0 auto;
+  margin-top: 25px;
+  border-radius: 12px;
   overflow: hidden;
-  border: none !important;
-  width: 100%;     /* 改为 100% 宽度，填满容器 */
-  max-width: 600px; 
+  position: relative;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s ease;
+}
+
+.compact-image-container:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
   display: block;
   transition: transform 0.5s ease;
-  background: rgba(255, 255, 255, 0.4);
-
-  /* 新增：居中对齐 */
-  margin-left: auto;
-  margin-right: auto;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
 }
 
-.image-container:hover .sampling-image {
+.compact-image-container:hover .sampling-image {
   transform: scale(1.03);
 }
 
 .image-caption {
   text-align: center;
-  font-size: 15px;
+  font-size: 16px;
   color: #2d3748;
-  padding: 12px;
+  padding: 15px;
   font-weight: 500;
-  background: rgba(248, 250, 252, 0.7);
+  background: rgba(248, 250, 252, 0.8);
   margin: 0;
+  border-top: 1px dashed #cbd5e0;
 }
 
 /* 响应式设计 */
 @media (max-width: 900px) {
-  .image-container {
-    min-width: 48%;
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .analysis-methods {
+    flex-direction: column;
   }
 }
 
 @media (max-width: 768px) {
-
-  .image-container {
-    min-width: 100%;
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
+  .step-number {
+    width: 40px;
+    height: 40px;
+    font-size: 1.4rem;
+  }
+  
+  .compact-image-container {
+    max-width: 90%;
   }
 }
 
 @media (max-width: 480px) {
   .sampling-process {
-    padding: 10px;
+    padding: 12px;
   }
-
-  .sampling-image {
-    height: 200px;
+  
+  .content-section {
+    padding: 18px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .step-number {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  h2 {
+    font-size: 1.5rem;
+  }
+  
+  .step-card {
+    flex-direction: column;
+  }
+  
+  .step-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+    text-align: center;
   }
 }
 </style>

src/views/User/HmOutFlux/atmosDeposition/airInputFlux.vue

@@ -1,23 +1,102 @@
 <template>
-  <div class="">
-    
+  <div class="atmosphere-flux-container">
+    <div class="map-title">大气通量分布图</div>
+    <div class="map-image-container">
+      <img 
+        src="/大气通量.jpg" 
+        alt="大气通量分布图" 
+        class="map-image"
+      >
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  },
-  methods: {
-    
-  }
+  name: 'AtmosphereFluxMap',
 };
 </script>
 
 <style scoped>
+.atmosphere-flux-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+.map-title {
+  background: linear-gradient(to right, #1a5fad, #2c8fd1);
+  color: white;
+  text-align: center;
+  padding: 18px 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.map-content {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  background: #f8fafc;
+}
+
+.map-image-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+
+.map-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  height: 600px;
+  width: 100%;
+}
+
+.map-image:hover {
+  transform: scale(1.02);
+}
+
 
+@media (max-width: 768px) {
+  .map-title {
+    font-size: 1.5rem;
+    padding: 15px 0;
+  }
+  
+  .map-image-container {
+    padding: 15px;
+    min-height: 350px;
+  }
+  
+  .map-footer {
+    font-size: 0.85rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .map-title {
+    font-size: 1.3rem;
+  }
+  
+  .map-image-container {
+    min-height: 280px;
+  }
+}
 </style>

src/views/User/HmOutFlux/atmosDeposition/airSampleData.vue

@@ -1,131 +1,580 @@
 <template>
   <div class="page-container">
+    <!-- 系统标题区域 -->
+    <div class="header-section">
+      <div class="header-content">
+        <h1 class="system-title">韶关市大气污染监测系统</h1>
+        <div class="calculation-selector">
+          <span class="selector-title">计算方式：</span>
+          <select 
+            v-model="calculationMethod" 
+            class="calculation-select"
+          >
+            <option value="weight">按重量计算</option>
+            <option value="volume">按体积计算</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 地图展示区域 -->
+    <div class="dashboard-section map-section">
+      <div class="section-header">
+        <div class="section-icon">🗺️</div>
+        <h2 class="section-title">采样点地理分布</h2>
+      </div>
+      <div class="dashboard-card map-card">
+        <div class="map-holder">
+          <atmsamplemap :calculation-method="calculationMethod" :map-type="mapType"/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 数据展示区域 - 上下排列 -->
+    <div class="data-section">
+      <!-- 数据列表 -->
+      <div class="dashboard-section">
+        <div class="section-header">
+          <div class="section-icon">📋</div>
+          <h2 class="section-title">采样点数据详情</h2>
+          <div class="data-info">
+            <span class="info-item">当前计算方式: {{ calculationMethod === 'weight' ? '按重量' : '按体积' }}</span>
+            <span class="info-item">最后更新: 2025-08-16</span>
+          </div>
+        </div>
+        <div class="dashboard-card data-card">
+          <div class="table-container">
+            <AirsampleLine :calculation-method="calculationMethod"/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 图表分析 -->
+      <div class="dashboard-section">
+        <div class="section-header">
+          <div class="section-icon">📊</div>
+          <h2 class="section-title">区域污染分析</h2>
+        </div>
+        <div class="dashboard-card chart-card">
+          <div class="chart-header">
+            <h3>各区县平均大气重金属污染柱状图</h3>
+            <p>大气污染物区域分布情况 ({{ calculationMethod === 'weight' ? 'mg/m³' : 'μg/m³' }})</p>
+          </div>
+          <div class="chart-container">
+            <AirsampleChart :calculation-method="calculationMethod"/>
+          </div>
+        </div>
+      </div>
+    </div>
     
-   <div class="calculation-selector">
-    <span class="selector-title">计算方式：</span>
-    <select 
-      v-model="calculationMethod" 
-      class="calculation-select"
-    >
-      <option value="weight">按重量计算</option>
-      <option value="volume">按体积计算</option>
-    </select>
-  </div>
-
-   <div class="point-map">
-    <div class="component-title">采样点地图展示</div>
-    <div class="map-holder">
-      <atmsamplemap :calculation-method="calculationMethod"/>
-     </div>
-   </div>
-
   
-   <div class="point-line">
-    <div class="component-title">采样点数据列表展示</div>
-    <AirsampleLine :calculation-method="calculationMethod"/>
-   </div>
-
-   <div>
-    <div class="component-title">各区县平均大气重金属污染柱状图</div>
-    <AirsampleChart :calculation-method="calculationMethod"/>
-   </div>
   </div>
 </template>
-<!--污染企业-->
 
 <script setup>
-import {ref} from 'vue'
+import { ref } from 'vue'
 import AirsampleLine from '@/components/atmpollution/airsampleLine.vue';
 import atmsamplemap from '@/components/atmpollution/atmsamplemap.vue';
 import AirsampleChart from '@/components/atmpollution/airsampleChart.vue';
 
 const calculationMethod = ref('weight')
+const mapType = ref('standard') // standard/satellite
 
-
+const toggleMapType = () => {
+  mapType.value = mapType.value === 'standard' ? 'satellite' : 'standard'
+}
 </script>
 
 <style scoped>
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border极;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 整屏高度 */
-  padding: 0;
-  box-sizing: border-box;
-  
-  gap: 20px;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  padding: 25px;
+  gap: 30px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页眉区域 */
+.header-section {
+   text-align: center;
+  padding: 30px 0 20px;
+  position: relative;
+}
+
+.header-content {
+ display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.system-title {
+  color: #1a365d;
+  font-size: 2.8rem;
+  margin-bottom: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.system-subtitle {
+  font-size: 1.3rem;
+  color: #cbd5e0;
   margin: 0;
 }
 
+.calculation-selector {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.selector-icon {
+  font-size: 1.8rem;
+  color: #4a9ef7;
+}
+
+.selector-title {
+  font-size: 1.1rem;
+  color: black;
+  font-weight: 500;
+}
+
 .calculation-select {
-  padding: 12px 24px;
-  border: 2px solid #ddd;
-  border-radius: 6px;
-  font-size: 16px;
-  color: #333;
-  background-color: #fff;
+  padding: 10px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.15);
+  color: black;
+  font-size: 1rem;
   cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.calculation-select:hover {
+  background: rgba(255, 255, 255, 0.25);
 }
+
 .calculation-select:focus {
   outline: none;
-  border-color: #1e88e5;
+  border-color: #4a9ef7;
+  box-shadow: 0 0 0 2px rgba(74, 158, 247, 0.5);
 }
 
+.header-stats {
+  display: flex;
+  gap: 20px;
+}
 
-.map-holder {
-  position: relative;
-  height: 450px;
-  z-index: 100; /* 保持地图在中间层级 */
-  overflow: visible; /* 允许内容溢出 */
+.stat-card {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
-.point-map {
-    flex: 0 0 70%;
-    margin-bottom: 20px;
-    
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,1);
-    overflow: visible;
+
+.stat-icon {
+  font-size: 2.2rem;
+  color: #4a9ef7;
 }
 
-.point-line {
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+.stat-info {
+  flex: 1;
 }
-.charts-line{
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  max-width: 1800px;
-  width: 100%;
-  margin: 20px auto;
-}
-.component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.component-title::before {
+
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: white;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 1rem;
+  color: #cbd5e0;
+  font-weight: 500;
+}
+
+/* 地图区域 */
+.dashboard-section {
+  margin-bottom: 20px;
+}
+
+.map-section {
+  background: white;
+  border-radius: 16px;
+  padding: 25px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.section-icon {
+  font-size: 2.2rem;
+  color: #3a9fd3;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #1a365d;
+  margin: 0;
+  position: relative;
+  padding-left: 10px;
+}
+
+.section-title::before {
   content: "";
   position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
+  left: 0;
+  top: 50%;
   transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  width: 4px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.map-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 15px;
+}
+
+.map-action-btn {
+  padding: 8px 16px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: #f0f7ff;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.map-action-btn:hover {
+  background: #e1f0ff;
+  transform: translateY(-2px);
+}
+
+/* 卡片设计 */
+.dashboard-card {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6px 20px rgba(0, 60, 120, 0.12);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 60, 120, 0.18);
+}
+
+/* 地图容器 */
+.map-card {
+  height: 550px;
+  position: relative;
+}
+
+.map-holder {
+  position: relative;
+  height: 100%;
+  z-index: 100;
+}
+
+.map-legend {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 200;
+  display: flex;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 10px 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-</style>
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.high-pollution { background-color: #e53e3e; }
+.medium-pollution { background-color: #dd6b20; }
+.low-pollution { background-color: #38a169; }
+
+/* 数据展示区域 - 上下排列 */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 数据卡片 - 固定高度滚动条 */
+.data-card {
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.pagination {
+  display: flex;
+  gap: 10px;
+}
+
+.page-btn {
+  padding: 6px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-btn:hover {
+  background: #edf2f7;
+}
+
+.page-btn.active {
+  background: #4a9ef7;
+  color: white;
+  border-color: #4a9ef7;
+}
+
+/* 图表卡片 */
+.chart-card {
+  height: 550px;
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  min-height: 0; /* 修复flex容器滚动问题 */
+}
+
+.data-info {
+  display: flex;
+  gap: 20px;
+  margin-left: 30px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.chart-header {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 5px 0;
+  font-weight: 600;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+.chart-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+}
+
+.data-select {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.9rem;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  gap: 25px;
+  margin-top: 15px;
+  padding-top: 10px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.cadmium { background-color: #ff6b6b; }
+.lead { background-color: #4ecdc4; }
+.chromium { background-color: #ffd166; }
+.arsenic { background-color: #6a0572; }
+
+/* 页脚区域 */
+.footer-section {
+  margin-top: 30px;
+  padding: 20px 0;
+  text-align: center;
+  color: #546e7a;
+  font-size: 1rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #718096;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .header-stats {
+    flex-wrap: wrap;
+  }
+  
+  .stat-card {
+    flex: 0 0 calc(50% - 10px);
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: 900px) {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+  
+  .system-title {
+    font-size: 2rem;
+  }
+  
+  .section-title {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 15px;
+    gap: 20px;
+  }
+  
+  .map-card {
+    height: 450px;
+  }
+  
+  .data-card, .chart-card {
+    height: 350px;
+  }
+  
+  .section-header {
+    flex-wrap: wrap;
+  }
+  
+  .map-actions {
+    margin-top: 10px;
+    width: 100%;
+  }
+  
+  .data-info {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .system-title {
+    font-size: 1.8rem;
+  }
+  
+  .section-title {
+    font-size: 1.4rem;
+  }
+  
+  .map-card {
+    height: 400px;
+  }
+  
+  .data-card, .chart-card {
+    height: 300px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .header-stats {
+    gap: 10px;
+  }
+  
+  .stat-card {
+    flex: 0 0 100%;
+  }
+}
+</style>

src/views/User/HmOutFlux/atmosDeposition/heavyMetalEnterprise.vue

@@ -1,108 +1,492 @@
 <template>
   <div class="page-container">
+    <!-- 页面标题区域 -->
+    <div class="header-section">
+      <div class="header-content">
+        <h1 class="system-title">韶关市涉重企业环境数据监测系统</h1>
+      </div>
+    </div>
     
-   <div class="point-map">
-    <div class="component-title">涉重企业地图展示</div>
-    <div class="map-holder">
-      <atmcompanymap/>
+    <!-- 地图展示区域 -->
+    <div class="dashboard-section map-section">
+      <div class="section-header">
+        <div class="section-icon">🗺️</div>
+        <h2 class="section-title">涉重企业地理分布</h2>
+      </div>
+      <div class="map-container">
+        <div class="map-holder">
+          <atmcompanymap/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 数据展示区域 - 上下排列 -->
+    <div class="data-section">
+      <!-- 企业数据列表 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📋</div>
+          <h2 class="section-title">涉重企业数据列表</h2>
+          <div class="data-info">
+            <span class="info-item">数据更新时间: 2025-08-16</span>
+            <span class="info-item">当前显示: 42家企业</span>
+          </div>
+        </div>
+        <div class="data-card">
+          <div class="table-container">
+            <atmcompanyline/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 排放分析图表 -->
+      <div class="dashboard-section chart-section">
+        <div class="section-header">
+          <div class="section-icon">📊</div>
+          <h2 class="section-title">大气颗粒物排放分析</h2>
+          <div class="emission-info">
+            <span class="info-item">单位: 吨/年 (t/a)</span>
+            <span class="info-item">统计周期: 2025年</span>
+          </div>
+        </div>
+        <div class="chart-card">
+          <div class="chart-header">
+            <h3>各区县企业平均大气颗粒物排放量</h3>
+            <p>重金属企业大气污染物排放分布情况</p>
+          </div>
+          <div class="chart-container">
+            <HeavyMetalEnterprisechart/>
+          </div>
+          <div class="chart-legend">
+            <div class="legend-item">
+              <div class="legend-color primary"></div>
+              <span>颗粒物排放量</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-   </div>
-
-  
-   <div class="point-line">
-    <div class="component-title">涉重企业数据列表展示</div>
-    <atmcompanyline/>
-   </div>
-
-   <div>
-    <div class="component-title">各区县企业平均大气颗粒物排放（t/a）</div>
-    <HeavyMetalEnterprisechart/>
-   </div>
   </div>
 </template>
-<!--污染企业-->
 
 <script setup>
 import atmcompanyline from '@/components/atmpollution/atmcompanyline.vue';
 import atmcompanymap from '@/components/atmpollution/atmcompanymap.vue';
 import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnterprisechart.vue';
-
-
-
-
 </script>
 
 <style scoped>
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 整屏高度 */
-  padding: 0;
-  box-sizing: border-box;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e9ecef 100%);
+  padding: 25px;
+  gap: 30px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页眉区域 */
+.header-section {
+ text-align: center;
+  padding: 30px 0 20px;
+  position: relative;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.system-title {
+  color: #1a365d;
+  font-size: 2.8rem;
+  margin-bottom: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.system-subtitle {
+  font-size: 1.3rem;
+  color: #cbd5e0;
+  margin: 10px 0 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 极 0.3);
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-3px);
+}
+
+.btn-icon {
+  font-size: 1.2rem;
+}
+
+.header-stats {
+  display: flex;
   gap: 20px;
+}
+
+.stat-card {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 15极 px;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-icon {
+  font-size: 2.5rem;
+  color: #4a9ef7;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: white;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 1rem;
+  color: #cbd5e0;
+  font-weight: 500;
+}
+
+/* 地图区域 */
+.dashboard-section {
+  margin-bottom: 20px;
+}
+
+.map-section {
+  background: white;
+  border-radius: 16px;
+  padding: 25px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.section-icon {
+  font-size: 2.2rem;
+  color: #3a9fd3;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #1a365d;
   margin: 0;
-  position: relative !important; /* 防止被 Leaflet 修改 */
-  overflow: visible !important; /* 确保标题不被裁剪 */
+  position: relative;
+  padding-left: 10px;
+}
+
+.section-title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.map-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.control-label {
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.control-select {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.9rem;
+}
+
+.map-container {
+  position: relative;
+  height: 550px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .map-holder {
-  position: relative ;
+  position: relative;
+  height: 100%;
+  z-index: 100;
+}
+
+.map-legend {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 200;
+  display: flex;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  padding: 10px 15px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.high-risk { background-color: #e53e3e; }
+.medium-risk { background-color: #dd6b20; }
+.low-risk { background-color: #38a169; }
+
+/* 数据展示区域 - 上下排列 */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 企业数据列表 - 固定高度滚动条 */
+.data-card {
   height: 450px;
-  z-index: 100; /* 保持地图在中间层级 */
-  overflow: visible; /* 允许内容溢出 */
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.point-map {
-  flex: 0 0 70%;
-    margin-bottom: 20px;
-    
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,1);
-    overflow: visible !important;
+.table-container {
+  height: 100%;
+  overflow-y: auto;
+  padding: 15px;
 }
 
-.point-line {
-    
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+/* 图表区域 - 固定高度 */
+.chart-card {
+  height: 750px;
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  min-height: 0; /* 修复flex容器滚动问题 */
+}
+
+.data-info, .emission-info {
+  display: flex;
+  gap: 20px;
+  margin-left: 30px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.chart-header {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e2e8f0;
 }
-.charts-line{
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 5px 0;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  padding-top: 10px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.legend-item .primary {
+  background-color: #3182ce;
+}
+
+/* 页脚区域 */
+.footer-section {
+  margin-top: 30px;
+  padding: 20px 0;
+  text-align: center;
+  color: #546e7a;
+  font-size: 1rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #718096;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .header-stats {
+    flex-wrap: wrap;
+  }
   
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  max-width: 1800px;
-  width: 100%;
-  margin: 20px auto;
-}
-.component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.component-title::before {
-  content: "";
-  position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
-  transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  .stat-card {
+    flex: 0 0 calc(50% - 10px);
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: 900px) {
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+  
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  
+  .system-title {
+    font-size: 2rem;
+  }
+  
+  .section-title {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 15px;
+    gap: 20px;
+  }
+  
+  .map-container {
+    height: 450px;
+  }
+  
+  .data-card, .chart-card {
+    height: 350px;
+  }
+  
+  .section-header {
+    flex-wrap: wrap;
+  }
+  
+  .map-controls {
+    margin-top: 10px;
+    width: 100%;
+  }
+  
+  .data-info, .emission-info {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+  }
 }
 
-</style>
+@media (max-width: 480px) {
+  .system-title {
+    font-size: 1.8rem;
+  }
+  
+  .section-title {
+    font-size: 1.4rem;
+  }
+  
+  .map-container {
+    height: 400px;
+  }
+  
+  .data-card, .chart-card {
+    height: 300px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 5px;
+  }
+  
+  .header-stats {
+    gap: 10px;
+  }
+  
+  .stat-card {
+    flex: 0 0 100%;
+  }
+}
+</style>

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

@@ -1,18 +1,89 @@
 <template>
   <div class="cross-container">
-    <h3 class="table-title">断面数据地图展示</h3>
-    <div class="map-holder"><crosssectionmap/></div>
-
-     <h3 class="table-title">断面数据详情</h3>
-     <div><CrossSectionSamplelineData/></div>
-
-     <h3 class="table-title"> 各河流Cd的平均浓度柱状图</h3>
-     <div><CrossSetionData1/></div>
-
-     <h3 class="table-title">各区县的Cd平均浓度柱状图</h3>
-     <div><CrossSetionData2/></div>
+    <!-- 页面标题 -->
+    <div class="section-header">
+      <div class="section-icon">📊</div>
+      <h1 class="page-title">韶关市河流断面水质监测分析系统</h1>
+    </div>
+    
+    <!-- 地图展示区域 -->
+    <div class="dashboard-section">
+      <div class="section-header">
+        <div class="section-icon">🗺️</div>
+        <h2 class="component-title">断面空间分布图</h2>
+      </div>
+      <div class="dashboard-card map-card">
+        <div class="map-holder">
+          <crosssectionmap/>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 表格区域 - 上下排列 -->
+    <div class="tables-section">
+      <!-- 断面数据详情 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📋</div>
+          <h2 class="component-title">断面水质数据详情</h2>
+          <div class="table-info">
+            <span class="info-item">数据更新时间: 2025-08-16</span>
+          </div>
+        </div>
+        <div class="dashboard-card data-card">
+          <div class="table-container">
+            <CrossSectionSamplelineData/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 河流Cd浓度分析 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📈</div>
+          <h2 class="component-title">河流Cd浓度分析</h2>
+          <div class="analysis-legend">
+            <div class="legend-item">
+              <div class="legend-color cadmium"></div>
+              <span>镉(Cd)浓度</span>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card chart-card">
+          <div class="chart-header">
+            <h3>各河流Cd平均浓度对比</h3>
+            <p>韶关市主要河流镉元素含量分布</p>
+          </div>
+          <div class="chart-container">
+            <CrossSetionData1/>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 区县Cd浓度分析 -->
+      <div class="dashboard-section table-section">
+        <div class="section-header">
+          <div class="section-icon">📉</div>
+          <h2 class="component-title">区县Cd浓度分析</h2>
+          <div class="analysis-legend">
+            <div class="legend-item">
+              <div class="legend-color cadmium"></div>
+              <span>镉(Cd)浓度</span>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card chart-card">
+          <div class="chart-header">
+            <h3>各区县Cd平均浓度对比</h3>
+            <p>韶关市行政区划镉元素含量分布</p>
+          </div>
+          <div class="chart-container">
+            <CrossSetionData2/>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -20,45 +91,305 @@ import CrossSectionSamplelineData from '@/components/irrpollution/crossSectionSa
 import CrossSetionData1 from '@/components/irrpollution/crossSetionData1.vue';
 import CrossSetionData2 from '@/components/irrpollution/crossSetionData2.vue';
 import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
-
 </script>
 
 <style scoped>
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+.cross-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+  padding: 25px;
+  gap: 30px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页面标题 */
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.page-title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #1a365d;
+  margin: 0;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
+}
+
+.page-title::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 100px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.section-icon {
+  font-size: 2.5rem;
+  color: #3a9fd3;
+}
+
+/* 主内容区 */
+.dashboard-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 卡片设计 */
+.dashboard-card {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6px 20px rgba(0, 60, 120, 0.12);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 60, 120, 0.18);
+}
+
+/* 地图容器 */
+.map-card {
+  height: 550px;
+  position: relative;
+}
+
 .map-holder {
   position: relative;
-  height: 600px; /* 减去标题高度，避免覆盖 */
-  overflow: visible;
+  height: 100%;
   z-index: 100;
 }
-.cross-container {
-  position: relative !important; /* 防止被 Leaflet 修改 */
-    overflow: visible !important; /* 确保标题不被裁剪 */
-}
-.table-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-  z-index: 200;
-
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
-}
-
-/* 蓝色小方块：用伪元素实现，无额外HTML */
-.table-title::before {
+
+/* 表格区域 */
+.tables-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 数据卡片 - 添加滚动条 */
+.data-card {
+  height: 550px;
+  padding: 0; /* 移除内边距 */
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  flex: 1;
+  overflow-y: auto; /* 添加垂直滚动条 */
+  padding: 15px;
+}
+
+/* 图表卡片 */
+.chart-card {
+  height: 600px;
+  padding: 0; /* 移除内边距 */
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-container {
+  flex: 1;
+  overflow: hidden; /* 确保图表不会溢出 */
+  padding: 20px;
+}
+
+.chart-header {
+  margin-bottom: 15px;
+  padding: 20px 20px 10px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 5px 0;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+/* 组件标题 */
+.component-title {
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #1a365d;
+  position: relative;
+  padding-left: 10px;
+}
+
+.component-title::before {
   content: "";
   position: absolute;
-  left: 0;                /* 靠最左侧 */
-  top: 50%;              /* 垂直居中 */
+  left: 0;
+  top: 50%;
   transform: translateY(-50%);
-  width: 12px;           /* 方块大小，适中即可 */
-  height: 12px;
-  background-color: #1e88e5; /* 和文字同色，统一感 */
-  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+  width: 4px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 2px;
+}
+
+.table-info {
+  display: flex;
+  gap: 20px;
+  margin-left: 30px;
+  font-size: 0.9rem;
+  color: #4a5568;
+}
+
+.analysis-legend {
+  display: flex;
+  gap: 15px;
+  margin-left: 30px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-color {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.cadmium {
+  background-color: #ff6b6b;
+}
+
+/* 页脚区域 */
+.footer-section {
+  margin-top: 30px;
+  padding: 20px 0;
+  text-align: center;
+  color: #546e7a;
+  font-size: 1rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 10px;
+  font-size: 0.9rem;
+  color: #78909c;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .map-card {
+    height: 500px;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 500px;
+  }
+}
+
+@media (max-width: 900px) {
+  .page-title {
+    font-size: 1.8rem;
+  }
+  
+  .component-title {
+    font-size: 1.4rem;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 450px;
+  }
+}
+
+@media (max-width: 768px) {
+  .cross-container {
+    padding: 15px;
+    gap: 20px;
+  }
+  
+  .section-header {
+    flex-wrap: wrap;
+  }
+  
+  .page-title {
+    font-size: 1.6rem;
+    width: 100%;
+    padding-left: 0;
+  }
+  
+  .component-title {
+    font-size: 1.3rem;
+  }
+  
+  .map-card {
+    height: 450px;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 350px;
+  }
+  
+  .table-info,
+  .analysis-legend {
+    margin-left: 0;
+    margin-top: 10px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .page-title {
+    font-size: 1.5rem;
+  }
+  
+  .component-title {
+    font-size: 1.2rem;
+  }
+  
+  .map-card {
+    height: 400px;
+  }
+  
+  .data-card,
+  .chart-card {
+    height: 300px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 5px;
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="irrigation-management">
+   <div class="irrigation-management" style="display: flex; justify-content: center;">
     <!-- 计算页面 -->
-    <div v-if="showCalculation">
+    <div v-if="showCalculation" class="page-container">
       <el-card shadow="always" class="gradient-card">
         <el-radio-group v-model="selectedLandType" style="width: 100%;">
           <!-- 水地 -->
@@ -99,7 +99,7 @@
     </div>
 
     <!-- 结果页面 -->
-    <div v-if="showResults">
+    <div v-if="showResults" class="page-container">
       <el-card shadow="always" class="results-card">
         <div class="results-header">
           <el-button 
@@ -113,16 +113,11 @@
         
         <div class="results-container">
           <el-row :gutter="20" style="margin-top: 30px;">
-            <el-col :span="12">
+            <el-col :span="24">
               <div class="result-subtitle">Cd含量地图</div>
               <img v-if="mapImageUrl" :src="mapImageUrl" alt="Cd含量地图" class="result-image">
               <div v-else class="image-placeholder">地图加载中...</div>
             </el-col>
-            <el-col :span="12">
-              <div class="result-subtitle">Cd含量直方图</div>
-              <img v-if="histogramImageUrl" :src="histogramImageUrl" alt="Cd含量直方图" class="result-image">
-              <div v-else class="image-placeholder">直方图加载中...</div>
-            </el-col>
           </el-row>
           
           <el-row style="margin-top: 30px;">
@@ -736,4 +731,26 @@ export default {
 .back-button:hover {
   background: linear-gradient(to right, #7de8df, #20a03d);
 }
+.irrigation-management {
+  width: 100%;
+}
+
+.page-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  max-width: 1200px;
+}
+
+/* 调整卡片宽度 */
+.gradient-card {
+  width: 90% !important;
+  max-width: 800px;
+}
+
+.results-card {
+  width: 95% !important;
+  max-width: 1200px;
+}
+
 </style>

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

@@ -1,29 +1,61 @@
 <template>
   <div class="page-container">
+    <!-- 页眉设计 -->
     <div class="header">
-        <h1>灌溉水采样点分析系统</h1>
-        <p>韶关市水环境重金属监测数据可视化分析平台</p>
+      <div class="header-content">
+        <div class="header-left">
+          <h1>灌溉水采样点分析系统</h1>
+        </div>
       </div>
-
-  <div class="main-content">
-   <div class="point-map">
-    <div class="component-title">采样点地图展示</div>
-    <div class="map-holder">
-        <irrwatermap/>
+      <div class="header-divider"></div>
     </div>
-   </div>
 
-  
-   <div class="point-line">
-    <div class="component-title">采样点数据列表展示</div>
-    <Waterdataline/>
-   </div>
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 地图展示区域 -->
+      <div class="dashboard-section">
+        <div class="section-header">
+          <div class="section-icon">🗺️</div>
+          <h2 class="component-title">采样点地理分布</h2>
+        </div>
+        <div class="dashboard-card map-card">
+          <div class="map-holder">
+            <irrwatermap/>
+          </div>
+        </div>
+      </div>
 
-   <div class="charts-line">
-    <div class="component-title">韶关市各区县重金属平均浓度</div>
-    <Waterassaydata2/>
-   </div>
-  </div>
+      <!-- 数据展示区域 - 上下排列 -->
+      <div class="data-section">
+        <!-- 数据列表 - 固定高度滚动条 -->
+        <div class="dashboard-section">
+          <div class="section-header">
+            <div class="section-icon">📋</div>
+            <h2 class="component-title">采样点水质数据</h2>
+          </div>
+          <div class="dashboard-card data-card">
+            <div class="table-container">
+              <Waterdataline/>
+            </div>
+          </div>
+        </div>
+
+        <!-- 图表分析 - 上下排列 -->
+        <div class="dashboard-section">
+          <div class="section-header">
+            <div class="section-icon">📊</div>
+            <h2 class="component-title">区域重金属分析</h2>
+          </div>
+          <div class="dashboard-card chart-card">
+            <div class="chart-header">
+              <h3>各区县重金属平均浓度对比</h3>
+              <p>韶关市水环境重金属污染分布情况</p>
+            </div>
+            <Waterassaydata2/>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -31,188 +63,481 @@
 import Waterdataline from '@/components/irrpollution/waterdataline.vue';
 import Waterassaydata2 from '@/components/irrpollution/waterassaydata2.vue';
 import irrwatermap from '@/components/irrpollution/irrwatermap.vue';
-
-
-
-
 </script>
 
 <style scoped>
-.map-holder {
-  position: relative;
-  height: 60%; 
-  z-index: 100;
+/* 基础样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
+
 .page-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
   padding: 20px;
-  box-sizing: border-box;
-  
-  gap: 20px;
-  margin: 0;
-  position: relative !important; /* 防止被 Leaflet 修改 */
-  overflow: visible !important; /* 确保标题不被裁剪 */
+  gap: 25px;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页眉样式 */
+.header {
+  border-radius: 16px;
+  padding: 25px;
 }
 
-.point-map {
-    flex: 2; /* 自适应剩余空间 */
-  min-height: 600px; /* 最小高度保证显示 */
-  max-height: 70vh; /* 最大高度限制，避免溢出 */
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
-  
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 弱化阴影，避免视觉冲突 */
-  position: relative;
-  overflow: hidden; /* 隐藏超出容器的内容 */
 }
 
-.point-line {
-    
-    border-radius: 12px;/*圆角 */
-    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
-    padding: 16px;/*内部间距 */
-    box-sizing: border-box;
+.header-left h1 {
+  color: #1a365d;
+  font-size: 2.4rem;
+  margin-bottom: 10px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
 }
-.charts-line{
+
+.header-left p {
+  color: #2d5986;
+  font-size: 1.3rem;
+  font-weight: 400;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.data-indicator {
+  display: flex;
+  gap: 30px;
+  padding: 15px 25px;
+  background: rgba(235, 245, 255, 0.7);
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 16px;
-  box-sizing: border-box;
-  margin: 0 auto;
-  width: 100%;
+  border-left: 4px solid #3a9fd3;
 }
 
-.header {
+.indicator-item {
   text-align: center;
-  padding: 20px 0 30px;
-  margin-bottom: 20px;
 }
 
-.header h1 {
-  color: #1e88e5;
-  font-size: 2.5rem;
-  margin-bottom: 10px;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+.indicator-value {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: #1a6fb0;
+  line-height: 1.2;
 }
 
-.header p {
-  color: #546e7a;
-  font-size: 1.2rem;
-  max-width: 600px;
-  margin: 0 auto;
+.indicator-label {
+  font-size: 1rem;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+.header-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
 }
 
-.content-wrapper {
+/* 主内容区 */
+.main-content {
   display: flex;
   flex-direction: column;
-  gap: 25px;
+  gap: 30px;
   flex: 1;
 }
 
-.single-row {
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  transition: transform 0.3s ease;
-  width: 100%;
-}
-
-.single-row:hover {
-  transform: translateY(-5px);
+/* 区域标题 */
+.dashboard-section {
+  margin-bottom: 30px;
 }
 
-.map-container {
-  height: 500px;
-  padding: 10px;
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 0 10px;
 }
 
-.data-container, .chart-container {
-  padding: 10px;
-  height: 350px;
+.section-icon {
+  font-size: 2rem;
+  color: #3a9fd3;
 }
 
 .component-title {
-  /* 基础布局：左对齐 + 紧凑间距 */
-  text-align: left;        /* 强制左对齐，告别居中 */
-  margin: 12px 0 5px;          /* 上下间距缩小，更紧凑（原16px→12px） */
-  padding-left: 24px;      /* 给蓝色方块留空间 */
-  position: relative;      /* 为伪元素定位做准备 */
-  z-index: 10000;
-  /* 文字样式：简约但醒目 */
-  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
-  font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
-  color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
-  line-height: 1.2;        /* 紧凑行高，避免臃肿 */
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #1a365d;
+  position: relative;
+  padding-left: 15px;
+  flex-grow: 1;
 }
 
 .component-title::before {
   content: "";
   position: absolute;
-  left: 8px;
+  left: 0;
   top: 50%;
   transform: translateY(-50%);
-  width: 8px;
-  height: 8px;
-  background-color: #1e88e5;
-  border-radius: 50%;
+  width: 6px;
+  height: 80%;
+  background: linear-gradient(to bottom, #4a9ef7, #3acfd5);
+  border-radius: 3px;
 }
 
-.footer {
-  text-align: center;
+.map-actions, .data-actions, .chart-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.map-action-btn, .data-select {
+  padding: 8px 16px;
+  border: 1px solid #cbd5e0;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.map-action-btn:hover {
+  background: #f0f7ff;
+}
+
+.data-select {
+  padding: 8px 12px;
+}
+
+/* 卡片设计 */
+.dashboard-card {
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 6px 20px rgba(0, 60, 120, 0.12);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 30px rgba(0, 60, 120, 0.18);
+}
+
+/* 地图容器 */
+.map-card {
+  height: 550px;
+  position: relative;
+}
+
+.map-holder {
+  position: relative;
+  height: 100%;
+  z-index: 100;
+}
+
+.map-overlay {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 200;
+}
+
+.map-stats {
+  display: flex;
+  gap: 25px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.stat-icon {
+  font-size: 1.8rem;
+}
+
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #1a6fb0;
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 0.95rem;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+/* 数据区域 - 上下排列 */
+.data-section {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+/* 数据卡片 - 固定高度滚动条 */
+.data-card {
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.pagination {
+  display: flex;
+  gap: 10px;
+}
+
+.page-btn {
+  padding: 6px 12px;
+  border: 1px solid #cbd5e0;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.page-btn:hover {
+  background: #edf2f7;
+}
+
+.page-btn.active {
+  background: #4a9ef7;
+  color: white;
+  border-color: #4a9ef7;
+}
+
+/* 图表卡片 */
+.chart-card {
+  height: 600px;
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-header {
+  margin-bottom: 20px;
+}
+
+.chart-header h3 {
+  font-size: 1.4rem;
+  color: #1a365d;
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+
+.chart-header p {
+  font-size: 1rem;
+  color: #718096;
+  margin: 0;
+}
+
+.chart-legend {
+  display: flex;
+  justify-content: center;
+  gap: 25px;
+  margin-top: 20px;
+  padding: 15px 0;
+  border-top: 1px solid #e2e8f0;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.color-box {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.cadmium { background-color: #ff6b6b; }
+.lead { background-color: #4ecdc4; }
+.chromium { background-color: #ffd166; }
+.arsenic { background-color: #6a0572; }
+
+/* 页脚样式 */
+.footer {
   margin-top: 30px;
+  padding: 25px 0;
+  text-align: center;
   color: #546e7a;
+  font-size: 1rem;
+  position: relative;
+}
+
+.footer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
+}
+
+.footer-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 15px;
   font-size: 0.9rem;
+  color: #78909c;
 }
 
 /* 响应式设计 */
 @media (max-width: 1200px) {
-  .map-container {
-    height: 450px;
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+  
+  .header-right {
+    width: 100%;
   }
 }
 
-@media (max-width: 768px) {
-  .header h1 {
+@media (max-width: 900px) {
+  .header-left h1 {
     font-size: 2rem;
   }
   
-  .header p {
-    font-size: 1rem;
+  .header-left p {
+    font-size: 1.1rem;
+  }
+  
+  .map-stats {
+    gap: 15px;
+    padding: 12px;
   }
   
-  .map-container {
+  .stat-value {
+    font-size: 1.6rem;
+  }
+  
+  .data-card, .chart-card {
     height: 400px;
   }
+}
+
+@media (max-width: 768px) {
+  .page-container {
+    padding: 15px;
+    gap: 20px;
+  }
   
-  .data-container, .chart-container {
-    height: 300px;
+  .header {
+    padding: 20px;
+  }
+  
+  .header-left h1 {
+    font-size: 1.8rem;
   }
   
   .component-title {
-    font-size: 1.3rem;
-    padding: 12px 12px 12px 20px;
+    font-size: 1.4rem;
+  }
+  
+  .map-card {
+    height: 450px;
+  }
+  
+  .data-card, .chart-card {
+    height: 350px;
+  }
+  
+  .map-actions, .data-actions, .chart-actions {
+    flex-wrap: wrap;
+    margin-top: 10px;
+  }
+  
+  .stat-item {
+    flex-direction: column;
+    text-align: center;
+    gap: 5px;
+  }
+  
+  .table-footer {
+    flex-direction: column;
+    gap: 15px;
   }
 }
 
 @media (max-width: 480px) {
-  .header h1 {
-    font-size: 1.8rem;
+  .header-left h1 {
+    font-size: 1.6rem;
   }
   
   .component-title {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
+    padding-left: 10px;
   }
   
-  .map-container {
-    height: 350px;
+  .component-title::before {
+    width: 4px;
   }
   
-  .page-container {
-    padding: 15px;
+  .map-card {
+    height: 400px;
+  }
+  
+  .data-card, .chart-card {
+    height: 300px;
+  }
+  
+  .map-stats {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .stat-item {
+    flex: 0 0 calc(50% - 10px);
+    margin-bottom: 10px;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 8px;
   }
 }
 </style>

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

@@ -1,44 +1,110 @@
 <template>
   <div class="sampling-process">
-    <h2>1.采样容器与过程</h2>
-    <p>
-      采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，
-      采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
-        <p class="image-caption">图1-1 采样容器</p>
+    <!-- 采样容器与过程部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">1</div>
+        <h2>采样容器与过程</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图1-2 采样现场</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
-        <p class="image-caption">图1-3 灌溉水采样设备</p>
+      
+      <div class="section-content">
+        <div class="description-card">
+          <div class="icon">🧪</div>
+          <div class="description-text">
+            <p>
+              采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，
+              主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。
+            </p>
+          </div>
+        </div>
+        
+        <div class="image-gallery">
+          <div class="image-card">
+            <el-image :src="image1" alt="采样容器" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>采样容器</h3>
+              <p>500mL白色聚乙烯瓶，符合水质采样标准</p>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <el-image :src="image2" alt="采样现场" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>采样现场</h3>
+              <p>河流环境采样，多云天气条件下进行</p>
+            </div>
+          </div>
+          
+          <div class="image-card">
+            <el-image :src="image3" alt="灌溉水采样设备" class="sampling-image"></el-image>
+            <div class="image-info">
+              <h3>灌溉水采样设备</h3>
+              <p>专业水质采样设备，确保样品完整性</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-
-    <h2>2.样品保存与现场情况</h2>
-    <p>
-      绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物,为了保证样品的完整性和数据的准确性，
-      采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。
-    </p>
-
-    <div class="image-row">
-      <div class="image-container">
-        <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图2-1 采样现场</p>
+    
+    <!-- 样品保存与现场情况部分 -->
+    <div class="section-container">
+      <div class="section-header">
+        <div class="section-number">2</div>
+        <h2>样品保存与现场情况</h2>
       </div>
-      <div class="image-container">
-        <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图2-2 采样现场</p>
-      </div>
-      <div class="image-container">
-        <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
-        <p class="image-caption">图2-3 采样现场</p>
+      
+      <div class="section-content">
+        <div class="preservation-info">
+          <div class="preservation-card">
+            <div class="preservation-icon">🌡️</div>
+            <div>
+              <h3>样品保存</h3>
+              <ul>
+                <li>冷藏保存，温度控制在4℃</li>
+                <li>避光处理，防止光化学反应</li>
+                <li>标签完好，清晰记录采样信息</li>
+                <li>减震措施，防止运输过程损坏</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="preservation-card">
+            <div class="preservation-icon">🔍</div>
+            <div>
+              <h3>样品状态</h3>
+              <ul>
+                <li>绝大多数样品：无色、无沉淀、无味、无悬浮物</li>
+                <li>少数样品：稍显浑浊并含有沉淀物</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        
+        <div class="field-gallery">
+          <div class="field-card">
+            <el-image :src="fieldImage1" alt="工作人员采样现场" class="sampling-image"></el-image>
+            <div class="field-info">
+              <h3>河流采样现场</h3>
+              <p>多云天气下的河流采样工作</p>
+            </div>
+          </div>
+          
+          <div class="field-card">
+            <el-image :src="fieldImage2" alt="工作人员采样现场" class="sampling-image"></el-image>
+            <div class="field-info">
+              <h3>水渠采样现场</h3>
+              <p>小雨天气下的水渠采样工作</p>
+            </div>
+          </div>
+          
+          <div class="field-card">
+            <el-image :src="fieldImage3" alt="工作人员采样现场" class="sampling-image"></el-image>
+            <div class="field-info">
+              <h3>瀑布区域采样</h3>
+              <p>特殊地形条件下的采样工作</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -61,11 +127,11 @@ export default {
 
 <style scoped>
 .sampling-process {
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  min-height: 100vh;
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(245, 250, 255, 0.85) 0%, rgba(235, 245, 255, 0.85) 100%);
   position: relative;
   overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .sampling-process::before {
@@ -76,83 +142,255 @@ export default {
   width: 100%;
   height: 100%;
   background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
-  opacity: 0.3;
+  opacity: 0.12;
   z-index: -1;
+  filter: blur(2px);
 }
 
-.image-row {
+.section-container {
+  margin-bottom: 50px;
+  padding: 30px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 8px 25px rgba(0, 60, 120, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+  position: relative;
+}
+
+.section-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 35px rgba(0, 60, 120, 0.15);
+}
+
+.section-header {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: 30px 0;
-  gap: 20px;
+  align-items: center;
+  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 15px;
+  border-bottom: 2px solid rgba(58, 160, 207, 0.25);
 }
 
-p {
-  text-indent: 2em;
+.section-number {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(135deg, #4a9ef7, #3a9fd3);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-right: 20px;
+  box-shadow: 0 5px 12px rgba(74, 158, 247, 0.25);
 }
 
-.image-container {
-  flex: 1;
-  min-width: 280px;
-  border-radius: 12px;
+h2 {
+  color: #1a365d;
+  font-size: 1.9rem;
+  margin: 0;
+  font-weight: 650;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  padding: 0 10px;
+}
+
+.description-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(235, 245, 255, 0.6);
+  border-radius: 15px;
+}
+
+.icon {
+  font-size: 2.5rem;
+  margin-right: 25px;
+  color: #3a9fd3;
+}
+
+.description-text p {
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: #2d3748;
+  margin: 0;
+}
+
+/* 图片画廊样式 */
+.image-gallery, .field-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
+  margin-top: 20px;
+}
+
+.image-card, .field-card {
+  border-radius: 15px;
   overflow: hidden;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  transition: all 0.4s ease;
+  background: white;
 }
 
-.image-container:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  background: rgba(255, 255, 255, 0.85);
+.image-card:hover, .field-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 }
 
 .sampling-image {
-  border-radius: 12px 12px 0 0 !important;
-  overflow: hidden;
-  border: none !important;
-  width: 100% !important;
-  height: 250px;
+  width: 100%;
+  height: 230px;
   display: block;
-  transition: transform 0.5s ease;
-  background: rgba(255, 255, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.4s ease;
+  background: rgba(245, 249, 255, 0.4);
 }
 
-.image-container:hover .sampling-image {
-  transform: scale(1.03);
+.image-card:hover .sampling-image, .field-card:hover .sampling-image {
+  transform: scale(1.05);
 }
 
-.image-caption {
-  text-align: center;
-  font-size: 15px;
-  color: #2d3748;
-  padding: 12px;
-  font-weight: 500;
-  background: rgba(248, 250, 252, 0.7);
+.image-info, .field-info {
+  padding: 20px;
+}
+
+.image-info h3, .field-info h3 {
+  color: #1a365d;
+  font-size: 1.25rem;
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.image-info p, .field-info p {
+  font-size: 0.95rem;
+  color: #4a5568;
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* 样品保存信息 */
+.preservation-info {
+  display: flex;
+  gap: 25px;
+  margin-bottom: 35px;
+}
+
+.preservation-card {
+  flex: 1;
+  display: flex;
+  padding: 20px;
+  background: rgba(245, 252, 255, 0.7);
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border-left: 4px solid #3a9fd3;
+}
+
+.preservation-icon {
+  font-size: 2.2rem;
+  margin-right: 20px;
+  color: #3a9fd3;
+}
+
+.preservation-card h3 {
+  color: #1a365d;
+  font-size: 1.3rem;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+.preservation-card ul {
+  padding-left: 20px;
   margin: 0;
 }
 
+.preservation-card li {
+  margin-bottom: 10px;
+  font-size: 1.05rem;
+  line-height: 1.6;
+  color: #2d3748;
+}
+
 /* 响应式设计 */
-@media (max-width: 900px) {
-  .image-container {
-    min-width: 48%;
+@media (max-width: 1100px) {
+  .image-gallery, .field-gallery {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .preservation-info {
+    flex-direction: column;
   }
 }
 
 @media (max-width: 768px) {
-
-  .image-container {
-    min-width: 100%;
+  .image-gallery, .field-gallery {
+    grid-template-columns: 1fr;
+  }
+  
+  .section-container {
+    padding: 25px;
+  }
+  
+  .section-number {
+    width: 45px;
+    height: 45px;
+    font-size: 1.6rem;
+  }
+  
+  h2 {
+    font-size: 1.7rem;
+  }
+  
+  .description-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .preservation-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .preservation-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
   }
 }
 
 @media (max-width: 480px) {
   .sampling-process {
-    padding: 10px;
+    padding: 20px;
   }
-
+  
+  .section-container {
+    padding: 20px;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .section-number {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
   .sampling-image {
     height: 200px;
   }

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -201,7 +201,7 @@ export default {
     async fetchLatestMap() {
       try {
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/crop-cd/latest-map/${this.countyName}`,
+          `http://localhost:8000/api/cd-prediction/crop-cd/latest-map/${this.countyName}`,
           { responseType: 'blob' }
         );
         
@@ -217,7 +217,7 @@ export default {
     async fetchLatestHistogram() {
       try {
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/crop-cd/latest-histogram/${this.countyName}`,
+          `http://localhost:8000/api/cd-prediction/crop-cd/latest-histogram/${this.countyName}`,
           { responseType: 'blob' }
         );
         
@@ -396,7 +396,7 @@ export default {
         this.loadingStats = true;
         
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/crop-cd/statistics/${this.countyName}`
+          `http://localhost:8000/api/cd-prediction/crop-cd/statistics/${this.countyName}`
         );
         
         if (response.data.success && response.data.data) {
@@ -440,7 +440,7 @@ export default {
         
         // 调用作物Cd地图接口
         const mapResponse = await axios.post(
-          'https://soilgd.com:8000/api/cd-prediction/crop-cd/generate-and-get-map',
+          'http://localhost:8000/api/cd-prediction/crop-cd/generate-and-get-map',
           formData,
           {
             headers: {
@@ -517,7 +517,7 @@ export default {
         this.$message.info('正在获取作物Cd预测数据...');
         
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/download-final-crop-cd-csv`,
+          `http://localhost:8000/api/cd-prediction/download-final-crop-cd-csv`,
           { responseType: 'blob' }
         );
         

src/views/User/cadmiumPrediction/EffectiveCadmiumPrediction.vue

@@ -84,17 +84,17 @@
         
         <div v-if="!loadingStats && statisticsData.length" class="stats-container">
           <!-- 统计表格 -->
-           <el-table 
-              :data="statisticsData" 
-              style="width: 100%; margin-bottom: 20px;"
-              border
-              stripe
-            >
-              <el-table-column prop="name" label="统计项" min-width="180" />
-              <el-table-column prop="value" label="值" min-width="150" />
-              <el-table-column prop="unit" label="单位" min-width="100" />
-              <el-table-column prop="description" label="描述" min-width="200" />
-            </el-table>
+         <el-table 
+            :data="statisticsData" 
+            style="width: 100%; margin-bottom: 20px;"
+            border
+            stripe
+          >
+            <el-table-column prop="name" label="统计项" min-width="180" />
+            <el-table-column prop="value" label="值" min-width="150" />
+            <el-table-column prop="unit" label="单位" min-width="100" />
+            <el-table-column prop="description" label="描述" min-width="200" />
+          </el-table>
           
           <!-- 统计图表 -->
           <div class="charts-container">
@@ -201,7 +201,7 @@ export default {
     async fetchLatestMap() {
       try {
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/effective-cd/latest-map/${this.countyName}`,
+          `http://localhost:8000/api/cd-prediction/effective-cd/latest-map/${this.countyName}`,
           { responseType: 'blob' }
         );
         
@@ -217,7 +217,7 @@ export default {
     async fetchLatestHistogram() {
       try {
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/effective-cd/latest-histogram/${this.countyName}`,
+          `http://localhost:8000/api/cd-prediction/effective-cd/latest-histogram/${this.countyName}`,
           { responseType: 'blob' }
         );
         
@@ -352,7 +352,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: 'Cd含量'
+          name: '(Cd含量)'
         },
         series: [{
           name: '统计值',
@@ -396,7 +396,7 @@ export default {
         this.loadingStats = true;
         
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/effective-cd/statistics/${this.countyName}`
+          `http://localhost:8000/api/cd-prediction/effective-cd/statistics/${this.countyName}`
         );
         
         if (response.data.success && response.data.data) {
@@ -438,9 +438,9 @@ export default {
         formData.append('county_name', this.countyName);
         formData.append('data_file', this.selectedFile);
         
-        // 调用有效态Cd地图接口
+        // 调用有效Cd地图接口
         const mapResponse = await axios.post(
-          'https://soilgd.com:8000/api/cd-prediction/effective-cd/generate-and-get-map',
+          'http://localhost:8000/api/cd-prediction/effective-cd/generate-and-get-map',
           formData,
           {
             headers: {
@@ -511,13 +511,13 @@ export default {
       URL.revokeObjectURL(link.href);
     },
     
-    // 导出数据
+    // 导出数据 - 修改为获取有效Cd的CSV文件
     async exportData() {
       try {
         this.$message.info('正在获取有效Cd预测数据...');
         
         const response = await axios.get(
-          `https://soilgd.com:8000/api/cd-prediction/download-final-effective-cd-csv`,
+          `http://localhost:8000/api/cd-prediction/download-final-effective-cd-csv`,
           { responseType: 'blob' }
         );
         

src/views/User/cadmiumPrediction/totalInputFlux.vue

@@ -1,134 +1,534 @@
 <template>
-  <div class="cd-input-container">
-    <el-card class="gradient-card" shadow="hover">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <p class="label">大气沉降输入 Cd (g/ha/a)</p>
-          <el-input
-            v-model="atmosphericCd"
-            placeholder="请输入内容"
-            class="custom-input"
-          />
-        </el-col>
-        <el-col :span="12">
-          <p class="label">灌溉水输入 Cd (g/ha/a)</p>
-          <el-input
-            v-model="irrigationCd"
-            placeholder="请输入内容"
-            class="custom-input"
-          />
-        </el-col>
-        <el-col :span="24" style="margin-top: 20px;">
-          <p class="label">农业投入输入 Cd (g/ha/a)</p>
-          <el-input
-            v-model="agriculturalCd"
-            placeholder="请输入内容"
-            class="custom-input"
-          />
-        </el-col>
-        <el-col :span="24" style="margin-top: 20px;">
-          <el-button class="calculate-btn" @click="onCalculate">计算</el-button>
-        </el-col>
-      </el-row>
-    </el-card>
+  <div class="container">
+    <!-- 顶部操作栏 -->
+    <div class="toolbar">
+      <!-- 文件上传区域 -->
+      <div class="upload-section">
+        <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload" style="display: none">
+        <el-button class="custom-button" @click="triggerFileUpload">
+          <el-icon class="upload-icon"><Upload /></el-icon>
+          选择CSV文件
+        </el-button>
+        <span v-if="selectedFile" class="file-name">{{ selectedFile.name }}</span>
+        <el-button 
+          class="custom-button" 
+          :loading="isCalculating" 
+          :disabled="!selectedFile" 
+          @click="calculate"
+        >
+        <el-icon class="upload-icon"><Document /></el-icon>  
+        上传并计算
+        </el-button>
+      </div>
+      <!-- 操作按钮 -->
+      <div class="action-buttons">
+        <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-icon class="upload-icon"><Download /></el-icon>
+          导出直方图</el-button>
+        <el-button class="custom-button" :disabled="!statisticsData.length" @click="exportData">
+          <el-icon class="upload-icon"><Download /></el-icon>
+          导出数据</el-button>
+      </div>
+    </div>
+
+    <!-- 主体内容区 -->
+    <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>
+        
+        <!-- 直方图展示 -->
+        <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 class="stats-area">
+        <h3>Cd输入通量统计信息</h3>
+        <div class="model-info">
+          <el-tag type="info">Cd通量模型</el-tag>
+          <span class="update-time">
+            最后更新: {{ updateTime ? new Date(updateTime).toLocaleString() : '未知' }}
+          </span>
+        </div>
+        
+        <div v-if="loadingStats" class="loading-container">
+          <el-icon class="loading-icon"><Loading /></el-icon>
+          <span>统计数据加载中...</span>
+        </div>
+        
+        <div v-if="!loadingStats && statisticsData.length" class="stats-container">
+          <!-- 统计表格 -->
+         <el-table 
+            :data="statisticsData" 
+            style="width: 100%; margin-bottom: 20px;"
+            border
+            stripe
+          >
+            <el-table-column prop="name" label="统计项" min-width="180" />
+            <el-table-column prop="value" label="值" min-width="150" />
+            <el-table-column prop="unit" label="单位" min-width="100" />
+            <el-table-column prop="description" label="描述" min-width="200" />
+          </el-table>
+          
+        
+        <div v-if="!loadingStats && !statisticsData.length" class="no-data">
+          <el-icon><DataAnalysis /></el-icon>
+          <p>暂无统计数据</p>
+        </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-import { ElCard, ElRow, ElCol, ElInput, ElButton } from 'element-plus';
+<script>
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
+import axios from 'axios';
+import * as echarts from 'echarts';
+import { 
+  Loading, Upload, Picture, Histogram, Download, Document, DataAnalysis 
+} from '@element-plus/icons-vue';
+
+export default {
+  name: 'CdFluxVisualization',
+  components: { 
+    Loading, Upload, Picture, Histogram, Download, Document, DataAnalysis 
+  },
+  data() {
+    return {
+      isCalculating: false,
+      loadingMap: false,
+      loadingHistogram: false,
+      loadingStats: false,
+      statisticsData: [],
+      mapImageUrl: null,
+      histogramImageUrl: null,
+      mapBlob: null,
+      histogramBlob: null,
+      selectedFile: null,
+      distributionChart: null,
+      updateTime: null
+    };
+  },
+
+  mounted() {
+    // 组件挂载时获取最新数据
+    this.fetchLatestResults();
+    this.fetchStatistics();
+  },
 
-const atmosphericCd = ref('');
-const irrigationCd = ref('');
-const agriculturalCd = ref('');
+  beforeDestroy() {
+    if (this.mapImageUrl) URL.revokeObjectURL(this.mapImageUrl);
+    if (this.histogramImageUrl) URL.revokeObjectURL(this.histogramImageUrl);
+    if (this.distributionChart) this.distributionChart.dispose();
+  },
+  methods: {
+    // 触发文件选择
+    triggerFileUpload() {
+      this.$refs.fileInput.click();
+    },
+    
+    // 处理文件上传
+    handleFileUpload(event) {
+      const files = event.target.files;
+      if (files && files.length > 0) {
+        this.selectedFile = files[0];
+      } else {
+        this.selectedFile = null;
+      }
+    },
+    
+    // 获取最新结果
+    async fetchLatestResults() {
+      try {
+        this.loadingMap = true;
+        this.loadingHistogram = true;
+        
+        // 获取最新地图
+        await this.fetchLatestMap();
+        
+        // 获取最新直方图
+        await this.fetchLatestHistogram();
+        
+      } catch (error) {
+        console.error('获取最新结果失败:', error);
+        this.$message.error('获取最新结果失败');
+      } finally {
+        this.loadingMap = false;
+        this.loadingHistogram = false;
+      }
+    },
+    
+    // 获取最新地图
+    async fetchLatestMap() {
+      try {
+        const response = await axios.get(
+          `http://localhost:8000/api/cd-flux/map`,
+          { responseType: 'blob' }
+        );
+        
+        this.mapBlob = response.data;
+        this.mapImageUrl = URL.createObjectURL(this.mapBlob);
+      } catch (error) {
+        console.error('获取最新地图失败:', error);
+        this.$message.warning('获取最新地图失败，请先执行预测');
+      }
+    },
+    
+    // 获取最新直方图
+    async fetchLatestHistogram() {
+      try {
+        const response = await axios.get(
+          `http://localhost:8000/api/cd-flux/histogram`,
+          { responseType: 'blob' }
+        );
+        
+        this.histogramBlob = response.data;
+        this.histogramImageUrl = URL.createObjectURL(this.histogramBlob);
+      } catch (error) {
+        console.error('获取最新直方图失败:', error);
+        this.$message.warning('获取最新直方图失败，请先执行预测');
+      }
+    },
+    
+    // 格式化统计数据
+    formatStatisticsData(stats) {
+      if (!stats) return [];
+      
+      return [
+        { 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通量的标准差' },
+        { name: '有效像元数', value: stats.valid_pixels, unit: '个', description: '有效数据点的数量' },
+        { name: '总像元数', value: stats.total_pixels, unit: '个', description: '总像元数量' }
+      ];
+    },
 
-const onCalculate = () => {
-  // 暂无计算逻辑，仅作展示
-  alert('计算按钮已点击');
+    // 修改fetchStatistics方法
+    async fetchStatistics() {
+      try {
+        this.loadingStats = true;
+        
+        const response = await axios.get(
+          `http://localhost:8000/api/cd-flux/statistics`
+        );
+        
+        if (response.data) {
+          const stats = response.data;
+          this.statisticsData = this.formatStatisticsData(stats);
+          this.updateTime = new Date().toISOString();
+          
+          this.$nextTick(() => {
+            this.initCharts(stats);
+          });
+        }
+      } catch (error) {
+        console.error('获取统计信息失败:', error);
+        this.$message.warning('获取统计信息失败');
+      } finally {
+        this.loadingStats = false;
+      }
+    },
+    
+    // 处理窗口大小变化
+    handleResize() {
+      if (this.distributionChart) this.distributionChart.resize();
+    },
+    
+    // 上传并计算
+    async calculate() {
+      if (!this.selectedFile) {
+        this.$message.warning('请先选择CSV文件');
+        return;
+      }
+      
+      try {
+        this.isCalculating = true;
+        this.loadingMap = true;
+        this.loadingHistogram = true;
+        this.loadingStats = true;
+        
+        // 创建FormData
+        const formData = new FormData();
+        formData.append('csv_file', this.selectedFile);
+        
+        // 调用Cd通量计算接口
+        await axios.post(
+          'http://localhost:8000/api/cd-flux/calculate',
+          formData,
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data'
+            }
+          }
+        );
+        
+        // 更新后重新获取地图、直方图和统计数据
+        await this.fetchLatestResults();
+        await this.fetchStatistics();
+        
+        this.$message.success('计算完成！');
+        
+      } catch (error) {
+        console.error('计算失败:', error);
+        let errorMessage = '计算失败，请重试';
+        
+        if (error.response) {
+          if (error.response.status === 400) {
+            errorMessage = '文件格式错误：' + (error.response.data.detail || '请上传正确的CSV文件');
+          } else if (error.response.status === 500) {
+            errorMessage = '服务器错误：' + (error.response.data.detail || '请稍后重试');
+          }
+        }
+        
+        this.$message.error(errorMessage);
+      } finally {
+        this.isCalculating = false;
+        this.loadingMap = false;
+        this.loadingHistogram = false;
+        this.loadingStats = false;
+      }
+    },
+    
+    // 导出地图
+    exportMap() {
+      if (!this.mapBlob) {
+        this.$message.warning('请先计算生成地图');
+        return;
+      }
+      
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(this.mapBlob);
+      link.download = `Cd输入通量空间分布图.jpg`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    },
+    
+    // 导出直方图
+    exportHistogram() {
+      if (!this.histogramBlob) {
+        this.$message.warning('请先计算生成直方图');
+        return;
+      }
+      
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(this.histogramBlob);
+      link.download = `Cd输入通量直方图.jpg`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    },
+    
+    // 导出数据
+    async exportData() {
+      try {
+        this.$message.info('正在获取Cd输入通量数据...');
+        
+        const response = await axios.get(
+          `http://localhost:8000/api/cd-flux/export-csv`,
+          { responseType: 'blob' }
+        );
+        
+        const blob = new Blob([response.data], { type: 'text/csv' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `Cd输入通量数据.csv`;
+        link.click();
+        URL.revokeObjectURL(link.href);
+        
+        this.$message.success('数据导出成功');
+      } catch (error) {
+        console.error('导出数据失败:', error);
+        this.$message.error('导出数据失败: ' + (error.response?.data?.detail || '请稍后重试'));
+      }
+    }
+  }
 };
 </script>
 
 <style scoped>
-.cd-input-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+/* 保持原有样式不变 */
+.container {
   padding: 20px;
-}
-
-.gradient-card {
-  /* 半透明渐变背景 */
+  /* 添加70%透明度的渐变背景 */
   background: linear-gradient(
     135deg, 
-    rgba(250, 253, 255, 0.8), 
-    rgba(137, 223, 252, 0.8)
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
   );
-  border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  padding: 30px;
-  text-align: left; /* 改为左对齐 */
-  width: 600px;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
-  border: none;
 }
 
-.label {
+.upload-section {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 调整边框透明度 */
+}
+
+.file-name {
+  flex: 1;
+  padding: 0 10px;
+  color: #666;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.custom-button {
+  background-color: #47C3B9 !important;
+  color: #DCFFFA !important;
+  border: none;
+  border-radius: 155px;
+  padding: 10px 20px;
   font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 10px; /* 减少底部外边距 */
-  color: #333;
+  display: flex;
+  align-items: center;
+}
+
+.upload-icon {
+  margin-right: 5px;
 }
 
-.custom-input {
+.content-area {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 横向布局容器 */
+.horizontal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
   width: 100%;
-  max-width: 200px;
-  margin-left: 0; /* 确保输入框靠左对齐 */
 }
 
-/* 自定义输入框样式 */
-:deep(.custom-input .el-input__inner) {
-  background: rgba(255, 255, 255, 0.7);
+.map-section, .histogram-section {
+  flex: 1;
+  min-width: 300px;
+  background-color: rgba(255, 255, 255, 0.8); /* 调整为半透明白色 */
   border-radius: 8px;
-  border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  padding: 10px 15px;
-  font-size: 16px;
-  color: #333;
+  padding: 15px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  min-height: 400px;
+  backdrop-filter: blur(5px); /* 添加模糊效果增强半透明感 */
 }
 
-:deep(.custom-input .el-input__inner:focus) {
-  border-color: #409EFF;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+.map-image, .histogram-image {
+  width: 100%;
+  height: 100%;
+  max-height: 600px;
+  object-fit: contain;
+  border-radius: 4px;
 }
 
-.calculate-btn {
+.table-area {
   width: 100%;
-  max-width: 200px;
-  height: 50px;
-  border: none;
-  border-radius: 25px !important;
-  font-size: 18px;
-  font-weight: bold;
-  transition: all 0.4s ease;
-  
-  /* 渐变背景色 */
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white !important;
-  /* 按钮整体阴影 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
-              0 2px 6px rgba(38, 176, 70, 0.3) inset;
+  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;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #47C3B9;
+}
+
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: #999;
+  font-size: 16px;
+}
+
+.no-data .el-icon {
+  font-size: 48px;
+  margin-bottom: 10px;
 }
 
-.calculate-btn:hover {
-  transform: scale(1.03);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2),
-              0 2px 8px rgba(38, 176, 70, 0.4) inset;
-  background: linear-gradient(to right, #7de8df, #20a03d);
+.loading-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+  animation: rotate 2s linear infinite;
 }
 
-.calculate-btn:active {
-  transform: scale(0.98);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
-              0 1px 6px rgba(38, 176, 70, 0.4) inset;
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式布局调整 */
+@media (max-width: 992px) {
+  .horizontal-container {
+    flex-direction: column;
+  }
+  
+  .map-section, .histogram-section {
+    width: 100%;
+    flex: none;
+  }
 }
 </style>

src/views/User/farmlandQualityAssessment/farmlandQualityAssessment.vue

@@ -1,187 +1,523 @@
 <template>
   <div>
-    <!-- 三个按钮 -->
-    <div class="button-container">
-      <!-- 优先保护类按钮 -->
-      <el-button class="custom-button priority" @click="handleClick('优先保护类', '#4E94F4')">优先保护类</el-button>
-      <!-- 安全利用类按钮 -->
-      <el-button class="custom-button safe" @click="handleClick('安全利用类', '#26BB91')">安全利用类</el-button>
-      <!-- 严格管控类按钮 -->
-      <el-button class="custom-button strict" @click="handleClick('严格管控类', '#77B369')">严格管控类</el-button>
-    </div>
-
-    <!-- 文字和图表区域，只有选中按钮后才显示 -->
-    <div v-show="selectedText" class="info-section">
-      <!-- 显示选中的类别文字 -->
-      <div class="selected-text" :style="{ color: selectedColor }">{{ selectedText }}</div>
-
-      <!-- 图表区域 -->
-      <div class="charts">
-        <!-- 柱状图容器 -->
-        <div ref="barChart" class="chart"></div>
-        <!-- 饼图容器 -->
-        <div ref="pieChart" class="chart"></div>
+    <!-- 顶部信息卡片区域 -->
+    <div class="dashboard">
+      <!-- 合并的统计与分布卡片 -->
+      <div class="dashboard-card combined-card">
+        <div class="card-title">统计与分布</div>
+        <div class="combined-content">
+          <!-- 左侧：单元统计 -->
+          <div class="statistics-section">
+            <h3>单元统计</h3>
+            <div class="statistics">
+              <div class="stat-item">
+                <div class="stat-value">{{ statistics.total_units }}</div>
+                <div class="stat-label">总单元数</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-value">{{ statistics.units_with_data }}</div>
+                <div class="stat-label">有数据单元</div>
+              </div>
+              <!-- 仅当无数据单元数不为0时显示 -->
+              <div class="stat-item" v-if="statistics.units_without_data !== 0">
+                <div class="stat-value">{{ statistics.units_without_data }}</div>
+                <div class="stat-label">无数据单元</div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 右侧：分类分布 -->
+          <div class="distribution-section">
+            <h3>分类分布</h3>
+            <div class="distribution">
+              <div v-for="(count, category) in statistics.category_distribution" :key="category" 
+                  class="category-dist" :style="{ backgroundColor: categoryColors[category] }">
+                <div class="dist-category">{{ category }}</div>
+                <div class="dist-count">{{ count }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 饼图卡片 -->
+      <div class="dashboard-card chart-card">
+        <div class="card-title">点位分类分布</div>
+        <div ref="pointPieChart" class="chart"></div>
       </div>
     </div>
+    
+    <!-- 地图区域 -->
+    <div class="map-area">
+      <div class="map-title">土壤分类分布地图</div>
+      <div ref="mapContainer" class="map-container"></div>
+    </div>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'; // 引入echarts库
+import * as echarts from 'echarts';
+
+// 分类颜色配置
+const categoryColors = {
+  '优先保护类': 'rgba(255, 214, 0, 0.7)', // #FFD600 转换为RGBA
+  '安全利用类': 'rgba(0, 200, 83, 0.7)', // #00C853 转换为RGBA
+  '严格管控类': 'rgba(213, 0, 0, 0.7)'   // #D50000 转换为RGBA
+};
 
 export default {
-  name: 'CategoryButtons',
+  name: 'CategoryMap',
   data() {
     return {
-      selectedText: '',        // 当前选中的类别文字
-      selectedColor: '',       // 当前选中的类别颜色
-      barChartInstance: null,  // 柱状图实例
-      pieChartInstance: null   // 饼图实例
+      map: null,
+      geoJSONLayer: null,
+      multiPolygon: null, 
+      categoryColors,
+      statistics: {
+        total_units: 0,
+        units_with_data: 0,
+        units_without_data: 0,
+        category_distribution: {
+          '优先保护类': 0,
+          '安全利用类': 0,
+          '严格管控类': 0
+        },
+        point_distribution: {
+          '优先保护类': 0,
+          '安全利用类': 0,
+          '严格管控类': 0
+        }
+      },
+      groupingData: [] // 存储接口数据
     };
   },
-  mounted() {
-  // 默认选中“优先保护类”
-  this.handleClick('优先保护类', '#4E94F4');
-},
+  async mounted() {
+    // 获取分类数据
+    await this.fetchGroupingData();
+    
+    // 初始化地图
+    await this.initMap();
+    
+    // 初始化点位分布饼图
+    this.initPointPieChart();
+  },
   methods: {
-    // 按钮点击事件，设置类别和颜色，并生成随机数据
-    handleClick(category, color) {
-      this.selectedText = category;
-      this.selectedColor = color;
-
-      // 模拟柱状图数据
-      const barData = [
-        { name: 'A', value: Math.floor(Math.random() * 100) },
-        { name: 'B', value: Math.floor(Math.random() * 100) },
-        { name: 'C', value: Math.floor(Math.random() * 100) }
-      ];
-
-      // 模拟饼图数据
-      const pieData = [
-        { name: 'X', value: Math.floor(Math.random() * 100) },
-        { name: 'Y', value: Math.floor(Math.random() * 100) },
-        { name: 'Z', value: Math.floor(Math.random() * 100) }
-      ];
-
-      // 等DOM更新后初始化图表
-      this.$nextTick(() => {
-        this.initBarChart(barData);
-        this.initPieChart(pieData);
+    // 获取分类数据
+    async fetchGroupingData() {
+      try {
+        const response = await fetch(`http://localhost:8000/api/unit-grouping/h_xtfx`);
+        const result = await response.json();
+        
+        if (result.success) {
+          this.groupingData = result.data;
+          this.statistics = result.statistics;
+        }
+      } catch (error) {
+        console.error('获取分类数据失败:', error);
+      }
+    },
+    
+    // 初始化地图
+    async initMap() {
+      // 加载TMap SDK
+      const TMap = await this.loadSDK();
+      
+      // 创建地图实例
+      this.map = new TMap.Map(this.$refs.mapContainer, {
+        center: new TMap.LatLng(24.81088, 113.59762),
+        zoom: 12,
+        mapStyleId: 'style1'
       });
+      
+      // 加载GeoJSON数据
+      const geojsonData = await this.loadGeoJSON('https://soilgd.com/data/单元格.geojson');
+      
+      // 初始化GeoJSON图层 - 传递TMap对象
+      this.initMapWithGeoJSON(geojsonData, TMap);
     },
-
-    // 初始化柱状图
-    initBarChart(data) {
-      // 如果实例不存在则初始化
-      if (!this.barChartInstance) {
-        this.barChartInstance = echarts.init(this.$refs.barChart);
-      }
-      // 柱状图配置项
-      const option = {
-        title: { text: '柱状图', left: 'center' },
-        xAxis: { type: 'category', data: data.map(d => d.name) },
-        yAxis: { type: 'value' },
-        series: [
-          {
-            data: data.map(d => d.value),
-            type: 'bar',
-            itemStyle: {
-              color: this.selectedColor // 使用选中的颜色
-            }
+    
+    // 加载SDK
+    loadSDK() {
+      return new Promise((resolve, reject) => {
+        if (window.TMap) return resolve(window.TMap);
+        
+        const script = document.createElement('script');
+        script.src = `https://map.qq.com/api/gljs?v=2.exp&libraries=basic,service,vector&key=${import.meta.env.VITE_TMAP_KEY}&callback=initTMap`;
+        
+        window.initTMap = () => {
+          if (!window.TMap) {
+            reject(new Error('TMap SDK 加载失败'));
+            return;
           }
-        ]
-      };
-      // 设置配置项
-      this.barChartInstance.setOption(option);
+          resolve(window.TMap);
+        };
+        
+        script.onerror = (err) => {
+          reject(new Error('加载地图SDK失败'));
+          document.head.removeChild(script);
+        };
+        
+        document.head.appendChild(script);
+      });
+    },
+    
+    // 加载GeoJSON数据
+    async loadGeoJSON(url) {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`加载GeoJSON失败: ${response.statusText}`);
+        }
+        return await response.json();
+      } catch (error) {
+        console.error('加载GeoJSON数据失败:', error);
+        return { type: 'FeatureCollection', features: [] };
+      }
     },
+    
+    // 初始化GeoJSON图层 - 使用MultiPolygon的setStyles方法
+    initMapWithGeoJSON(geojsonData, TMap) {
+      try {
+        // 创建分类映射表
+        const categoryMap = {};
+        this.groupingData.forEach(item => {
+          categoryMap[item.OBJECTID] = item.h_xtfx;
+        });
+        
+        // 处理GeoJSON特征
+        geojsonData.features.forEach(feature => {
+          const objectId = feature.properties.OBJECTID;
+          const category = categoryMap[objectId];
+          
+          // 添加分类属性
+          feature.properties.category = category;
+        });
+        
+        // 检查TMap对象是否有效
+        if (!TMap || !TMap.PolygonStyle) {
+          throw new Error('TMap对象无效，缺少PolygonStyle');
+        }
+        
+        // 创建GeoJSON图层
+        this.geoJSONLayer = new TMap.vector.GeoJSONLayer({
+          map: this.map,
+          data: geojsonData,
+          polygonStyle: new TMap.PolygonStyle({
+            color: 'rgba(0,0,0,0)',
+            showBorder: false
+          })
+        });
 
-    // 初始化饼图
-    initPieChart(data) {
-      // 如果实例不存在则初始化
-      if (!this.pieChartInstance) {
-        this.pieChartInstance = echarts.init(this.$refs.pieChart);
+        
+        // 获取多边形覆盖层
+        this.multiPolygon = this.geoJSONLayer.getGeometryOverlay('polygon');
+        this.multiPolygon.setMap(this.map);
+        const polygons = this.multiPolygon.getGeometries();
+        
+        // 创建样式映射
+        const styles = {};
+        
+        // 遍历所有多边形，为每个多边形设置样式和唯一ID
+        // 遍历所有多边形，为每个多边形设置样式
+        polygons.forEach((polygon) => {
+          // 直接访问properties属性
+          const properties = polygon.properties;
+          const category = properties.category;
+          
+          // 使用多边形的id作为样式ID的键
+          const styleId = `style_${polygon.id}`;
+          
+          // 根据分类设置颜色
+          const color = category ? this.categoryColors[category] : '#CCCCCC';
+          
+          // 添加样式到映射表
+          styles[styleId] = new TMap.PolygonStyle({
+            color: color,
+            showBorder: true,
+            borderColor: '#000000',
+            borderWidth: 2
+          });
+          
+          // 关键修复：为每个多边形设置样式ID（正确方式）
+          polygon.styleId = styleId; // 直接设置属性
+        });
+        // 使用setStyles方法一次性设置所有样式
+        this.multiPolygon.setStyles(styles);
+        
+        // 更新几何体以应用新样式
+        this.multiPolygon.updateGeometries(polygons);
+        
+      
+      } catch (error) {
+        console.error('初始化GeoJSON图层失败:', error);
       }
-      // 饼图配置项
+    },
+    
+    // 初始化点位分布饼图
+    initPointPieChart() {
+      const chartDom = this.$refs.pointPieChart;
+      if (!chartDom) return;
+      
+      const chart = echarts.init(chartDom);
+      
+      // 准备饼图数据
+      const pieData = Object.entries(this.statistics.category_distribution).map(([name, value]) => ({
+        name,
+        value,
+        itemStyle: { color: this.categoryColors[name] || '#CCCCCC' }
+      }));
+      
       const option = {
-        title: { text: '饼图', left: 'center' },
-        tooltip: { trigger: 'item' },
+        title: {
+          text: '点位分类分布',
+          left: 'center',
+          textStyle: {
+            fontSize: 18,
+            fontWeight: 'bold'
+          }
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'horizontal',
+          bottom: 10,
+          data: Object.keys(this.statistics.point_distribution)
+        },
         series: [
           {
+            name: '点位分布',
             type: 'pie',
-            radius: '60%',
-            data,
+            radius: ['40%', '70%'],
+            center: ['50%', '45%'],
+            avoidLabelOverlap: true,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: true,
+              formatter: '{b}: {c}\n({d}%)',
+              fontSize: 14
+            },
             emphasis: {
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: 'bold'
+              },
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
-            }
+            },
+            data: pieData
           }
         ]
       };
-      // 设置配置项
-      this.pieChartInstance.setOption(option);
+      
+      chart.setOption(option);
+      
+      // 响应式调整
+      window.addEventListener('resize', () => {
+        chart.resize();
+      });
     }
-  },
-  
+  }
 };
 </script>
 
 <style scoped>
-.button-container {
+/* 顶部信息卡片区域 */
+.dashboard {
   display: flex;
-  justify-content: space-between;
-  padding: 56px 350px 0 350px;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
 }
 
-.custom-button {
-  width: 320px;
-  height: 120px;
-  font-size: 36px;
-  font-weight: bold;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
+.dashboard-card {
+  flex: 1;
+  min-width: 280px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: 20px;
+  transition: transform 0.3s ease;
 }
 
-.priority {
-  background-color: #4E94F4; /* 优先保护类按钮颜色 */
+.dashboard-card:hover {
+  transform: translateY(-3px);
 }
 
-.safe {
-  background-color: #26BB91; /* 安全利用类按钮颜色 */
+.chart-card {
+  min-width: 350px;
+  display: flex;
+  flex-direction: column;
 }
 
-.strict {
-  background-color: #77B369; /* 严格管控类按钮颜色 */
+.combined-card {
+  min-width: 500px;
 }
 
-.info-section {
-  margin-top: 30px;
-  margin-left: 50px;
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a1a1a;
+  padding-bottom: 12px;
+  margin-bottom: 15px;
+  border-bottom: 1px solid #eee;
 }
 
-.selected-text {
-  font-size: 36px;
-  font-weight: bold;
-  margin-bottom: 20px;
+/* 合并内容样式 */
+.combined-content {
+  display: flex;
+  gap: 20px;
+}
+
+.statistics-section, .distribution-section {
+  flex: 1;
+}
+
+.statistics-section h3, .distribution-section h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 15px;
+  color: #409EFF;
+  text-align: center;
 }
 
-.charts {
+/* 统计信息样式 */
+.statistics {
   display: flex;
-  justify-content: center;
-  gap: 100px; /* 图表之间的间距 */
-  flex-wrap: wrap; /* 可选：小屏幕时换行显示 */
-  margin-top: 20px;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 15px;
+  background: #f8fafc;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.stat-value {
+  font-size: 26px;
+  font-weight: 700;
+  color: #409EFF;
+  margin-bottom: 5px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 分类分布样式 */
+.distribution {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.category-dist {
+  padding: 15px;
+  border-radius: 8px;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+}
+
+.category-dist:hover {
+  transform: scale(1.02);
 }
 
+.dist-category {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.dist-count {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+/* 饼图样式 */
 .chart {
-  width: 600px;
-  height: 450px;
-  background-color: #fff;
+  height: 300px;
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* 地图区域样式 */
+.map-area {
+  margin-top: 20px;
+  background: white;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.map-title {
+  font-size: 18px;
+  font-weight: 600;
+  padding: 15px 25px;
+  background-color: #f8fafc;
+  border-bottom: 1px solid #eee;
 }
 
+.map-container {
+  width: 100%;
+  height: 60vh; /* 调整为60vh，更紧凑 */
+  min-height: 400px; /* 降低最小高度 */
+  max-height: 700px; /* 添加最大高度限制 */
+}
+
+/* 响应式调整 */
+@media (max-width: 992px) {
+  .dashboard {
+    flex-direction: column;
+  }
+  
+  .dashboard-card {
+    width: 100%;
+  }
+  
+  .combined-content {
+    flex-direction: column;
+  }
+  
+  .combined-card, .chart-card {
+    min-width: 100%;
+  }
+  
+  /* 移动设备上地图高度调整 */
+  .map-container {
+    height: 55vh;
+    min-height: 350px;
+    max-height: 600px;
+  }
+}
+
+/* 小屏幕设备进一步调整 */
+@media (max-width: 768px) {
+  .map-container {
+    height: 50vh;
+    min-height: 300px;
+    max-height: 500px;
+  }
+}
 </style>

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

@@ -2,110 +2,260 @@
   <div class="container">
     <div class="gradient-card">
       <div class="card-header">
-        <h1>籽粒移除输出通量计算器</h1>
-        <p>评估作物镉含量及籽粒移除对镉的影响，助力农业安全生产</p>
+        <h1>籽粒移除输出通量计算结果</h1>
+        <p>{{ area }}地区作物籽粒移除Cd通量分析报告</p>
       </div>
 
-      <div class="instruction-section">
-        <h2>使用说明</h2>
-        <ol>
-          <li>首次使用请点击"作物镉模型计算"按钮。</li>
-          <li>点击"作物镉模型计算"按钮跳转到作物镉模型计算页面。</li>
-          <li>在作物镉模型计算页面完成计算后返回此页面。</li>
-        </ol>
+      <div v-if="loading" class="loading-section">
+        <i class="fas fa-spinner fa-spin"></i> 正在加载数据...
       </div>
 
-      <div class="crop-cd-model-section">
-        <button class="calculate-btn" @click="openCropCdModelPage">
-          <i class="fas fa-calculator"></i> 作物镉模型计算
-        </button>
+      <div v-if="error" class="error-section">
+        <i class="fas fa-exclamation-triangle"></i> {{ error }}
       </div>
 
-      <div class="input-section">
-        <div class="input-group">
-          <label class="label">作物亩产量 (斤)</label>
-          <input v-model="yieldPerMu" placeholder="800" class="custom-input" :disabled="!cropCdModelCalculated" />
+      <template v-if="!loading && !error">
+        <div class="statistics-section">
+          <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.total_samples.toLocaleString() }}</div>
+              <div class="stat-label">总样本数</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.mean_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">平均通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.max_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最大通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.min_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最小通量</div>
+            </div>
+          </div>
         </div>
 
-        <div class="info-panel">
-          <div class="info-item">
-            <i class="fas fa-chart-line"></i>
-            <span>建议范围: 500 - 1500</span>
+        <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>
 
-      <div class="button-section">
-        <button class="calculate-btn" :disabled="!cropCdModelCalculated || !yieldPerMu" @click="onCalculate">
-          <i class="fas fa-calculator"></i> 籽粒移除计算
-        </button>
-      </div>
+        <div class="data-section">
+          <h2><i class="fas fa-table"></i> 详细数据</h2>
+          <el-table
+            :data="tableData"
+            height="400"
+            style="width: 100%"
+            class="custom-table"
+            :header-cell-style="{ background: 'rgba(0, 150, 136, 0.1)', color: '#006064', fontWeight: '600' }"
+          >
+            <el-table-column prop="farmland_id" label="农田ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="sample_id" label="样本ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="crop_cd_value" label="作物镉Cd(mg/kg)" align="center">
+              <template #default="scope">
+                {{ scope.row.crop_cd_value.toFixed(5) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="f11_yield" label="作物亩产量（斤）" width="150" align="center"></el-table-column>
+            <el-table-column prop="grain_removal_flux" label="籽粒移除通量(g/ha/a)" width="170" align="center">
+              <template #default="scope">
+                {{ scope.row.grain_removal_flux.toFixed(5) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <el-pagination
+            background
+            layout="prev, pager, next, sizes, total"
+            :total="results.length"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 20, 50]"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="custom-pagination"
+          >
+          </el-pagination>
+        </div>
 
-      <div class="card-footer">
-        <p><i class="fas fa-lightbulb"></i> 提示: 输入数据后点击"籽粒移除计算"按钮获取详细分析</p>
-      </div>
+        <div class="formula-section">
+          <h2><i class="fas fa-calculator"></i> 计算公式</h2>
+          <div class="formula-card">
+            {{ formula }}
+          </div>
+          <div class="unit-note">
+            <i class="fas fa-info-circle"></i> 单位: {{ unit }}
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <p><i class="fas fa-clock"></i> 报告生成时间: {{ reportTime }}</p>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
 
 export default {
-  name: 'GrainRemovalCalculator',
-  setup() {
-    const cropCdModelCalculated = ref(false);
-    const yieldPerMu = ref(null);
-
-    const openCropCdModelPage = () => {
-      // 这里可以实现跳转到作物镉模型计算页面的逻辑
-      // 例如：window.location.href = '/crop-cd-model';
-      alert('打开作物镉模型计算页面');
-      cropCdModelCalculated.value = true;
+  name: 'GrainRemovalResult',
+  components: {
+    ElTable,
+    ElTableColumn,
+    ElPagination
+  },
+  props: {
+    area: {
+      type: String,
+      default: '韶关'
+    }
+  },
+  setup(props) {
+    // 响应式数据
+    const results = ref([]);
+    const statistics = ref({
+      total_samples: 0,
+      mean_flux: 0,
+      max_flux: 0,
+      min_flux: 0
+    });
+    const formula = ref("");
+    const unit = ref("");
+    const visualizationImage = ref("");
+    const reportTime = ref("");
+    const loading = ref(true);
+    const error = ref(null);
+    
+    // 分页相关变量
+    const currentPage = ref(1);
+    const pageSize = ref(5);
+    
+    // 计算分页后的数据
+    const tableData = computed(() => {
+      const start = (currentPage.value - 1) * pageSize.value;
+      const end = start + pageSize.value;
+      return results.value.slice(start, end);
+    });
+    
+    // 分页事件处理
+    const handleSizeChange = (newSize) => {
+      pageSize.value = newSize;
+      currentPage.value = 1; // 重置到第一页
     };
-
-    const onCalculate = () => {
-      if (!yieldPerMu.value) {
-        alert('请输入作物亩产量');
-        return;
+    
+    const handleCurrentChange = (newPage) => {
+      currentPage.value = newPage;
+    };
+    
+    // 从API获取数据
+    const fetchData = async () => {
+      try {
+        // 获取计算结果数据
+        const dataResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/grain-removal?area=${encodeURIComponent(props.area)}`
+        );
+        
+        if (!dataResponse.ok) {
+          throw new Error(`数据获取失败: ${dataResponse.statusText}`);
+        }
+        
+        const dataJson = await dataResponse.json();
+        
+        if (!dataJson.success) {
+          throw new Error(`API错误: ${dataJson.message}`);
+        }
+        
+        // 设置数据
+        results.value = dataJson.data.results;
+        statistics.value = dataJson.data.statistics;
+        formula.value = dataJson.data.formula;
+        unit.value = dataJson.data.unit;
+        
+        // 获取可视化图片
+        const imageResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/grain-removal/visualize?area=${encodeURIComponent(props.area)}&level=city`
+        );
+        
+        if (!imageResponse.ok) {
+          throw new Error(`图片获取失败: ${imageResponse.statusText}`);
+        }
+        
+        // 创建图片Blob URL
+        const blob = await imageResponse.blob();
+        visualizationImage.value = URL.createObjectURL(blob);
+        
+        // 设置报告时间
+        reportTime.value = new Date().toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+        
+      } catch (err) {
+        console.error('数据获取错误:', err);
+        error.value = err.message || '获取数据时发生错误';
+      } finally {
+        loading.value = false;
       }
-      alert(`计算完成！当前亩产量: ${yieldPerMu.value} 斤`);
     };
-
+    
+    // 组件挂载时获取数据
+    onMounted(() => {
+      fetchData();
+    });
+    
     return {
-      cropCdModelCalculated,
-      yieldPerMu,
-      openCropCdModelPage,
-      onCalculate
+      results,
+      statistics,
+      formula,
+      unit,
+      visualizationImage,
+      reportTime,
+      loading,
+      error,
+      tableData,
+      currentPage,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange
     };
   }
 };
 </script>
 
 <style scoped>
-body, html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden; /* 禁止页面滚动 */
-}
-
+/* 保留您原有的样式，只添加Element UI的自定义样式 */
 .container {
   display: flex;
   justify-content: center;
-  align-items: center; /* 居中对齐 */
-  height: 100vh;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
 }
 
 .gradient-card {
   background: linear-gradient(135deg,
-      rgba(250, 253, 255, 0.8),
-      rgba(137, 223, 252, 0.8));
+      rgba(250, 253, 255, 0.9),
+      rgba(220, 240, 255, 0.9));
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   padding: 30px;
   width: 100%;
-  max-width: 500px;
+  max-width: 1000px;
   backdrop-filter: blur(8px);
   border: none;
   display: flex;
@@ -115,227 +265,209 @@ body, html {
 
 .card-header {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+  border-bottom: 2px solid rgba(0, 96, 100, 0.1);
+  padding-bottom: 20px;
 }
 
 .card-header h1 {
-  font-size: 2rem;
+  font-size: 2.2rem;
   color: #006064;
   margin-bottom: 10px;
   font-weight: 700;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .card-header p {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   color: #00838f;
   opacity: 0.9;
 }
 
-.instruction-section {
+.loading-section, .error-section {
   text-align: center;
-  margin-bottom: 20px;
-}
-
-.instruction-section h2 {
-  font-size: 1.5rem;
+  padding: 40px;
+  font-size: 1.4rem;
   color: #006064;
-  margin-bottom: 10px;
-}
-
-.instruction-section ol {
-  list-style-type: decimal;
-  padding-left: 20px;
-  margin-bottom: 20px;
 }
 
-.instruction-section li {
-  font-size: 1rem;
+.loading-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
   color: #00838f;
-  margin-bottom: 5px;
 }
 
-.crop-cd-model-section {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.input-section {
-  margin: 20px 0;
+.error-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
+  color: #d32f2f;
 }
 
-.input-group {
-  margin-bottom: 20px;
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
 }
 
-.label {
-  display: block;
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 10px;
-  color: #006064;
+.stat-card {
+  background: rgba(178, 235, 242, 0.3);
+  border-radius: 15px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
 }
 
-.custom-input {
-  width: 100%;
-  padding: 15px 10px;
-  border-radius: 12px;
-  border: 2px solid #80deea;
-  font-size: 1rem;
-  background: rgba(255, 255, 255, 0.7);
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+.stat-card:hover {
+  transform: translateY(-5px);
+  background: rgba(178, 235, 242, 0.5);
 }
 
-.custom-input:focus {
-  outline: none;
-  border-color: #26c6da;
-  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #006064;
+  margin-bottom: 8px;
 }
 
-.custom-input:disabled {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: #ccc;
-  cursor: not-allowed;
+.stat-label {
+  font-size: 1.1rem;
+  color: #00838f;
 }
 
-.info-panel {
-  background: rgba(178, 235, 242, 0.4);
-  border-radius: 12px;
-  padding: 15px;
-  margin-top: 15px;
+.visualization-section, 
+.data-section, 
+.formula-section,
+.statistics-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
-.info-item {
+.visualization-section h2,
+.data-section h2,
+.formula-section h2,
+.statistics-section h2 {
+  font-size: 1.6rem;
+  color: #006064;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
-  font-size: 1rem;
-  color: #006064;
+  gap: 10px;
 }
 
-.info-item i {
-  margin-right: 10px;
-  font-size: 1.2rem;
-  color: #00838f;
+.result-image {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
-.button-section {
-  margin: 25px 0;
+.formula-card {
+  font-family: 'Courier New', monospace;
+  font-size: 1.2rem;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  border-radius: 10px;
   text-align: center;
-  flex-grow: 1;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  margin: 20px 0;
+  border: 1px dashed #00838f;
+  color: #006064;
 }
 
-.calculate-btn {
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white;
-  border: none;
-  border-radius: 50px;
-  padding: 15px 30px;
-  font-size: 1.2rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.4s ease;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  display: inline-flex;
+.unit-note {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #00838f;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 250px;
-  position: relative;
-  overflow: hidden;
-}
-
-.calculate-btn i {
-  margin-right: 10px;
-  font-size: 1.4rem;
-}
-
-.calculate-btn:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
-  background: linear-gradient(to right, #7de8df, #20a03d);
-}
-
-.calculate-btn:active {
-  transform: translateY(-2px);
-}
-
-.calculate-btn:disabled {
-  background: gray;
-  cursor: not-allowed;
+  gap: 8px;
 }
 
 .card-footer {
   text-align: center;
   font-size: 1rem;
   color: #00838f;
-  font-style: italic;
-  padding-top: 15px;
+  padding-top: 20px;
   border-top: 1px solid rgba(0, 150, 136, 0.2);
-}
-
-.card-footer i {
-  margin-right: 10px;
-}
-
-/* 水波纹效果 */
-.calculate-btn::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.calculate-btn:active::after {
-  width: 200px;
-  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
 /* 响应式设计 */
-@media (max-width: 480px) {
-  .gradient-card {
-    padding: 20px;
-    width: 100%;
-    max-width: 100%;
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
-
+  
   .card-header h1 {
     font-size: 1.8rem;
   }
-
-  .instruction-section h2 {
+  
+  .visualization-section h2,
+  .data-section h2,
+  .formula-section h2,
+  .statistics-section h2 {
     font-size: 1.4rem;
   }
+}
 
-  .label {
-    font-size: 1rem;
+@media (max-width: 480px) {
+  .gradient-card {
+    padding: 15px;
   }
-
-  .custom-input {
-    padding: 12px;
-    font-size: 0.9rem;
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
-
-  .calculate-btn {
-    padding: 12px 25px;
-    font-size: 1rem;
-    min-width: 200px;
+  
+  .stat-card {
+    padding: 15px;
   }
-
-  .info-item span {
-    font-size: 0.9rem;
+  
+  .stat-value {
+    font-size: 1.5rem;
   }
 }
-</style>
 
+.result-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: #f8f8f8;
+}
 
+/* Element UI 自定义样式 */
+.custom-table {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-top: 20px;
+}
 
+.custom-table .el-table__row {
+  transition: background-color 0.3s;
+}
+
+.custom-table .el-table__row:hover {
+  background-color: rgba(178, 235, 242, 0.3) !important;
+}
+
+.custom-table .el-table__row:nth-child(even) {
+  background-color: rgba(178, 235, 242, 0.15);
+}
+
+.custom-pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>

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

@@ -1,25 +1,302 @@
 <template>
-  <div class="">
+  <div class="sampling-process">
+    <div class="header-section">
+      <h2>籽粒移除</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
     
+    <div class="content-section">
+      <div class="text-content">
+        <p>
+          籽粒移除与人体健康风险的关联更为直接。重金属在作物籽粒中积累后，会通过食物链对人体健康构成潜在威胁，像中国湖南水稻的镉污染就已成为突出的环境健康问题，珠江三角洲各地市水稻籽粒对镉的富集程度甚至超过了蔬菜和水果。
+        </p>
+        <p>
+          图生动描绘了重金属在籽粒中的积累过程，以及籽粒收获后重金属随之输出农田并进入食物链的关联链条。如图所示，土壤中的重金属通过植物根系被吸收并最终富集于籽粒中。当农作物成熟后，农民收割作物并将富含重金属的籽粒收集起来，这一过程使得籽粒中积累的重金属随之离开农田系统，构成重要的重金属输出途径。
+        </p>
+      </div>
+
+      <div class="image-row">
+        <div class="image-container">
+          <el-image :src="image1" alt="籽粒移除是重金属输出的重要途径" class="sampling-image"></el-image>
+          <p class="image-caption">
+            籽粒移除是重金属输出的重要途径
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
+      image1: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/833199a40a0e01e74cc3cfaca476e556-image.png',
     };
-  },
-  methods: {
-    
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>

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

@@ -1,25 +1,302 @@
 <template>
-  <div class="">
+  <div class="sampling-process">
+    <div class="header-section">
+      <h2>秸秆移除</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
     
+    <div class="content-section">
+      <div class="text-content">
+        <p>
+          秸秆移除是重金属输出的重要方式之一。重金属在植物地上部分(包括秸秆)积累,其生物可利用性及在土壤-农作物系统中的迁移转化备受关注。秸秆作为作物残茬，在农田生态系统的重金属循环中扮演关键角色，同时也可能带来人体暴露风险。
+        </p>
+        <p>
+          图清晰地展示了秸秆移除过程中重金属输出的具体路径。如图所示，土壤中的重金属通过植物根系被吸收并转运至地上部分，最终富集于秸秆中。当秸秆被移除时，其中积累的重金属也随之离开农田系统，构成重要的重金属输出途径。图中通过不同颜色标注，展示了不同作物秸秆中重金属种类及含量的差异，进一步说明了在估算秸秆移除的重金属输出量时，必须收集秸秆样品进行处理和化学分析，并将其重金属含量纳入作物收获输出通量计算的必要性。
+        </p>
+      </div>
+
+      <div class="image-row">
+        <div class="image-container">
+          <el-image :src="image1" alt="秸秆移除是重金属输出的重要途径" class="sampling-image"></el-image>
+          <p class="image-caption">
+            秸秆移除是重金属输出的重要途径
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
+      image1: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/d2b2d067ccd777c5d9d0d26618f9b569-image.png',
     };
-  },
-  methods: {
-    
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>

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

@@ -2,113 +2,260 @@
   <div class="container">
     <div class="gradient-card">
       <div class="card-header">
-        <h1>秸秆移除含量计算器</h1>
-        <p>评估作物镉含量及秸秆移除的影响，助力农业安全生产</p>
+        <h1>秸秆移除输出通量计算结果</h1>
+        <p>{{ area }}地区作物秸秆移除Cd通量分析报告</p>
       </div>
 
-      <div class="instruction-section">
-        <h2>使用说明</h2>
-        <ol>
-          <li>首次使用请点击"作物镉模型计算"按钮。</li>
-          <li>点击"作物镉模型计算"按钮跳转到作物镉模型计算页面。</li>
-          <li>在作物镉模型计算页面完成计算后返回此页面。</li>
-        </ol>
+      <div v-if="loading" class="loading-section">
+        <i class="fas fa-spinner fa-spin"></i> 正在加载数据...
       </div>
 
-      <div class="crop-cd-model-section">
-        <button class="calculate-btn" @click="openCropCdModelPage">
-          <i class="fas fa-calculator"></i> 作物镉模型计算
-        </button>
+      <div v-if="error" class="error-section">
+        <i class="fas fa-exclamation-triangle"></i> {{ error }}
       </div>
 
-      <div class="input-section">
-        <div class="input-group">
-          <label class="label">作物亩产量 (斤)</label>
-          <input v-model="yieldPerMu" placeholder="800" class="custom-input" :disabled="!cropCdModelCalculated" />
+      <template v-if="!loading && !error">
+        <div class="statistics-section">
+          <h2><i class="fas fa-chart-bar"></i> 统计分析</h2>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.total_samples.toLocaleString() }}</div>
+              <div class="stat-label">总样本数</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.mean_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">平均通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.max_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最大通量</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value">{{ statistics.min_flux.toFixed(2) }} g/ha/a</div>
+              <div class="stat-label">最小通量</div>
+            </div>
+          </div>
         </div>
 
-        <div class="info-panel">
-          <div class="info-item">
-            <i class="fas fa-chart-line"></i>
-            <span>建议范围: 500 - 1500</span>
+        <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>
 
-      <div class="button-section">
-        <button class="calculate-btn" :disabled="!cropCdModelCalculated || !yieldPerMu" @click="onCalculate">
-          <i class="fas fa-calculator"></i> 秸秆移除计算
-        </button>
-      </div>
+        <div class="data-section">
+          <h2><i class="fas fa-table"></i> 详细数据</h2>
+          <el-table
+            :data="tableData"
+            height="400"
+            style="width: 100%"
+            class="custom-table"
+            :header-cell-style="{ background: 'rgba(0, 150, 136, 0.1)', color: '#006064', fontWeight: '600' }"
+          >
+            <el-table-column prop="farmland_id" label="农田ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="sample_id" label="样本ID" width="120" align="center"></el-table-column>
+            <el-table-column prop="crop_cd_value" label="作物镉Cd(mg/kg)" align="center">
+              <template #default="scope">
+                {{ scope.row.crop_cd_value.toFixed(5) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="f11_yield" label="作物亩产量（斤）" width="150" align="center"></el-table-column>
+            <el-table-column prop="straw_removal_flux" label="秸秆移除通量(g/ha/a)" width="170" align="center">
+              <template #default="scope">
+                {{ scope.row.straw_removal_flux.toFixed(5) }}
+              </template>
+            </el-table-column>
+          </el-table>
+          
+          <el-pagination
+            background
+            layout="prev, pager, next, sizes, total"
+            :total="results.length"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 20, 50]"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            class="custom-pagination"
+          >
+          </el-pagination>
+        </div>
 
-      <div class="card-footer">
-        <p><i class="fas fa-lightbulb"></i> 提示: 输入数据后点击"秸秆移除计算"按钮获取详细分析</p>
-      </div>
+        <div class="formula-section">
+          <h2><i class="fas fa-calculator"></i> 计算公式</h2>
+          <div class="formula-card">
+            {{ formula }}
+          </div>
+          <div class="unit-note">
+            <i class="fas fa-info-circle"></i> 单位: {{ unit }}
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <p><i class="fas fa-clock"></i> 报告生成时间: {{ reportTime }}</p>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
 
 export default {
-  name: 'GrainRemovalCalculator',
-  setup() {
-    const cropCdModelCalculated = ref(false);
-    const yieldPerMu = ref(null);
-
-    const openCropCdModelPage = () => {
-      // 这里可以实现跳转到作物镉模型计算页面的逻辑
-      // 例如：window.location.href = '/crop-cd-model';
-      alert('打开作物镉模型计算页面');
-      cropCdModelCalculated.value = true;
+  name: 'StrawRemovalResult',
+  components: {
+    ElTable,
+    ElTableColumn,
+    ElPagination
+  },
+  props: {
+    area: {
+      type: String,
+      default: '韶关'
+    }
+  },
+  setup(props) {
+    // 响应式数据
+    const results = ref([]);
+    const statistics = ref({
+      total_samples: 0,
+      mean_flux: 0,
+      max_flux: 0,
+      min_flux: 0
+    });
+    const formula = ref("");
+    const unit = ref("");
+    const visualizationImage = ref("");
+    const reportTime = ref("");
+    const loading = ref(true);
+    const error = ref(null);
+    
+    // 分页相关变量
+    const currentPage = ref(1);
+    const pageSize = ref(5);
+    
+    // 计算分页后的数据
+    const tableData = computed(() => {
+      const start = (currentPage.value - 1) * pageSize.value;
+      const end = start + pageSize.value;
+      return results.value.slice(start, end);
+    });
+    
+    // 分页事件处理
+    const handleSizeChange = (newSize) => {
+      pageSize.value = newSize;
+      currentPage.value = 1; // 重置到第一页
     };
-
-    const onCalculate = () => {
-      if (!yieldPerMu.value) {
-        alert('请输入作物亩产量');
-        return;
+    
+    const handleCurrentChange = (newPage) => {
+      currentPage.value = newPage;
+    };
+    
+    // 从API获取数据
+    const fetchData = async () => {
+      try {
+        // 获取计算结果数据
+        const dataResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/straw-removal?area=${encodeURIComponent(props.area)}`
+        );
+        
+        if (!dataResponse.ok) {
+          throw new Error(`数据获取失败: ${dataResponse.statusText}`);
+        }
+        
+        const dataJson = await dataResponse.json();
+        
+        if (!dataJson.success) {
+          throw new Error(`API错误: ${dataJson.message}`);
+        }
+        
+        // 设置数据
+        results.value = dataJson.data.results;
+        statistics.value = dataJson.data.statistics;
+        formula.value = dataJson.data.formula;
+        unit.value = dataJson.data.unit;
+        
+        // 获取可视化图片
+        const imageResponse = await fetch(
+          `http://127.0.0.1:8000/api/cd-flux-removal/straw-removal/visualize?area=${encodeURIComponent(props.area)}&level=city`
+        );
+        
+        if (!imageResponse.ok) {
+          throw new Error(`图片获取失败: ${imageResponse.statusText}`);
+        }
+        
+        // 创建图片Blob URL
+        const blob = await imageResponse.blob();
+        visualizationImage.value = URL.createObjectURL(blob);
+        
+        // 设置报告时间
+        reportTime.value = new Date().toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+        
+      } catch (err) {
+        console.error('数据获取错误:', err);
+        error.value = err.message || '获取数据时发生错误';
+      } finally {
+        loading.value = false;
       }
-      alert(`计算完成！当前亩产量: ${yieldPerMu.value} 斤`);
     };
-
+    
+    // 组件挂载时获取数据
+    onMounted(() => {
+      fetchData();
+    });
+    
     return {
-      cropCdModelCalculated,
-      yieldPerMu,
-      openCropCdModelPage,
-      onCalculate
+      results,
+      statistics,
+      formula,
+      unit,
+      visualizationImage,
+      reportTime,
+      loading,
+      error,
+      tableData,
+      currentPage,
+      pageSize,
+      handleSizeChange,
+      handleCurrentChange
     };
   }
 };
 </script>
 
 <style scoped>
-body,
-html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden;
-  /* 禁止页面滚动 */
-}
-
+/* 保留您原有的样式，只添加Element UI的自定义样式 */
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* 居中对齐 */
-  height: 100vh;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #e6f7ff, #b3e0ff);
 }
 
 .gradient-card {
   background: linear-gradient(135deg,
-      rgba(250, 253, 255, 0.8),
-      rgba(137, 223, 252, 0.8));
+      rgba(250, 253, 255, 0.9),
+      rgba(220, 240, 255, 0.9));
   border-radius: 20px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   padding: 30px;
   width: 100%;
-  max-width: 500px;
+  max-width: 1000px;
   backdrop-filter: blur(8px);
   border: none;
   display: flex;
@@ -118,224 +265,209 @@ html {
 
 .card-header {
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+  border-bottom: 2px solid rgba(0, 96, 100, 0.1);
+  padding-bottom: 20px;
 }
 
 .card-header h1 {
-  font-size: 2rem;
+  font-size: 2.2rem;
   color: #006064;
   margin-bottom: 10px;
   font-weight: 700;
-  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .card-header p {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   color: #00838f;
   opacity: 0.9;
 }
 
-.instruction-section {
+.loading-section, .error-section {
   text-align: center;
-  margin-bottom: 20px;
-}
-
-.instruction-section h2 {
-  font-size: 1.5rem;
+  padding: 40px;
+  font-size: 1.4rem;
   color: #006064;
-  margin-bottom: 10px;
-}
-
-.instruction-section ol {
-  list-style-type: decimal;
-  padding-left: 20px;
-  margin-bottom: 20px;
 }
 
-.instruction-section li {
-  font-size: 1rem;
+.loading-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
   color: #00838f;
-  margin-bottom: 5px;
 }
 
-.crop-cd-model-section {
-  text-align: center;
-  margin-bottom: 20px;
+.error-section i {
+  margin-right: 15px;
+  font-size: 1.8rem;
+  color: #d32f2f;
 }
 
-.input-section {
-  margin: 20px 0;
-}
-
-.input-group {
-  margin-bottom: 20px;
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
 }
 
-.label {
-  display: block;
-  font-weight: 600;
-  font-size: 1.2rem;
-  margin-bottom: 10px;
-  color: #006064;
+.stat-card {
+  background: rgba(178, 235, 242, 0.3);
+  border-radius: 15px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
 }
 
-.custom-input {
-  width: 100%;
-  padding: 15px 10px;
-  border-radius: 12px;
-  border: 2px solid #80deea;
-  font-size: 1rem;
-  background: rgba(255, 255, 255, 0.7);
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+.stat-card:hover {
+  transform: translateY(-5px);
+  background: rgba(178, 235, 242, 0.5);
 }
 
-.custom-input:focus {
-  outline: none;
-  border-color: #26c6da;
-  box-shadow: 0 0 0 4px rgba(38, 198, 218, 0.3);
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #006064;
+  margin-bottom: 8px;
 }
 
-.custom-input:disabled {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: #ccc;
-  cursor: not-allowed;
+.stat-label {
+  font-size: 1.1rem;
+  color: #00838f;
 }
 
-.info-panel {
-  background: rgba(178, 235, 242, 0.4);
-  border-radius: 12px;
-  padding: 15px;
-  margin-top: 15px;
+.visualization-section, 
+.data-section, 
+.formula-section,
+.statistics-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }
 
-.info-item {
+.visualization-section h2,
+.data-section h2,
+.formula-section h2,
+.statistics-section h2 {
+  font-size: 1.6rem;
+  color: #006064;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
-  font-size: 1rem;
-  color: #006064;
+  gap: 10px;
 }
 
-.info-item i {
-  margin-right: 10px;
-  font-size: 1.2rem;
-  color: #00838f;
+.result-image {
+  max-width: 100%;
+  max-height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
-.button-section {
-  margin: 25px 0;
+.formula-card {
+  font-family: 'Courier New', monospace;
+  font-size: 1.2rem;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  border-radius: 10px;
   text-align: center;
-  flex-grow: 1;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  margin: 20px 0;
+  border: 1px dashed #00838f;
+  color: #006064;
 }
 
-.calculate-btn {
-  background: linear-gradient(to right, #8DF9F0, #26B046);
-  color: white;
-  border: none;
-  border-radius: 50px;
-  padding: 15px 30px;
-  font-size: 1.2rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.4s ease;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  display: inline-flex;
+.unit-note {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #00838f;
+  display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 250px;
-  position: relative;
-  overflow: hidden;
-}
-
-.calculate-btn i {
-  margin-right: 10px;
-  font-size: 1.4rem;
-}
-
-.calculate-btn:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
-  background: linear-gradient(to right, #7de8df, #20a03d);
-}
-
-.calculate-btn:active {
-  transform: translateY(-2px);
-}
-
-.calculate-btn:disabled {
-  background: gray;
-  cursor: not-allowed;
+  gap: 8px;
 }
 
 .card-footer {
   text-align: center;
   font-size: 1rem;
   color: #00838f;
-  font-style: italic;
-  padding-top: 15px;
+  padding-top: 20px;
   border-top: 1px solid rgba(0, 150, 136, 0.2);
-}
-
-.card-footer i {
-  margin-right: 10px;
-}
-
-/* 水波纹效果 */
-.calculate-btn::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.calculate-btn:active::after {
-  width: 200px;
-  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
 /* 响应式设计 */
-@media (max-width: 480px) {
-  .gradient-card {
-    padding: 20px;
-    width: 100%;
-    max-width: 100%;
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
-
+  
   .card-header h1 {
     font-size: 1.8rem;
   }
-
-  .instruction-section h2 {
+  
+  .visualization-section h2,
+  .data-section h2,
+  .formula-section h2,
+  .statistics-section h2 {
     font-size: 1.4rem;
   }
+}
 
-  .label {
-    font-size: 1rem;
+@media (max-width: 480px) {
+  .gradient-card {
+    padding: 15px;
   }
-
-  .custom-input {
-    padding: 12px;
-    font-size: 0.9rem;
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
   }
-
-  .calculate-btn {
-    padding: 12px 25px;
-    font-size: 1rem;
-    min-width: 200px;
+  
+  .stat-card {
+    padding: 15px;
   }
-
-  .info-item span {
-    font-size: 0.9rem;
+  
+  .stat-value {
+    font-size: 1.5rem;
   }
 }
-</style>
+
+.result-image {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid #e4e7ed;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: #f8f8f8;
+}
+
+/* Element UI 自定义样式 */
+.custom-table {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-top: 20px;
+}
+
+.custom-table .el-table__row {
+  transition: background-color 0.3s;
+}
+
+.custom-table .el-table__row:hover {
+  background-color: rgba(178, 235, 242, 0.3) !important;
+}
+
+.custom-table .el-table__row:nth-child(even) {
+  background-color: rgba(178, 235, 242, 0.15);
+}
+
+.custom-pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>

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

@@ -1,25 +1,302 @@
 <template>
-  <div class="">
+  <div class="sampling-process">
+    <div class="header-section">
+      <h2>土壤渗流</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
     
+    <div class="content-section">
+      <div class="text-content">
+            <p>
+              土壤渗流是农田土壤重金属输出的重要途径，过度耕种会加剧土壤水分和营养的流失，而降水会对这一过程产生影响。通常，土壤重金属渗流通量通过质量平衡模型间接计算，该模型假设土壤中未渗流的重金属通过径流途径输出。
+            </p>
+             <p>
+              图详细展示了土壤渗流作为重金属纵向迁移重要途径的过程。如图所示，土壤中的重金属在降水和重力作用下，通过土壤孔隙向下渗透，最终进入地下水系统。图中左侧部分清晰地描绘了农田土壤剖面，包括表层土壤、根系分布区以及下方的地下水层。土壤中的水分和溶解态重金属随着水流向下移动，形成明显的渗流路径。
+            </p>
+      </div>
+    </div>
+
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image3" alt="土壤渗流是重金属迁移的重要途径" class="sampling-image"></el-image>
+        <p class="image-caption">
+          土壤渗流是重金属迁移的重要途径
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
+      image3: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/2412b59952255362b77987e45875b820-image.png',
     };
-  },
-  methods: {
-    
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>

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

@@ -1,25 +1,301 @@
 <template>
-  <div class="">
-    
+  <div class="sampling-process">
+     <div class="header-section"> 
+      <h2>地表径流</h2>
+      <div class="subtitle">重金属在土壤-农作物系统中的迁移与输出机制</div>
+    </div>
+   <div class="content-section">
+      <div class="text-content">
+    <p>
+      地表径流是重力作用下的降水沿地表流动并汇入水体的过程，也是土壤重金属输出的主要途径。研究显示，地表径流中重金属浓度与土壤中重金属浓度相关，其输出量则与土壤中重金属溶解态和颗粒态的分配情况有关。随暴雨径流迁移是不同土地利用类型中重金属转移的最主要方式，也是造成地表水大面积非点源重金属污染的根本原因。
+    </p>
+    <p>
+      图动态模拟了降雨条件下土壤中镉、铅、铬等重金属随地表径流进行横向迁移的过程，以及其迁移量和形态随时间的变化规律。如图所示，降水落在农田表面后，在重力作用下沿地表流动，形成地表径流。土壤中的重金属随着地表径流一起被冲刷并汇入水体，最终在河流或湖泊中沉积。
+    </p>
+      </div>
+   </div>
+    <div class="image-row">
+      <div class="image-container">
+        <el-image :src="image4" alt="地表径流是重金属迁移的主要途径" class="sampling-image"></el-image>
+        <p class="image-caption">
+           地表径流是重金属迁移的主要途径
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: '',
   data() {
     return {
-      
-    };
-  },
-  methods: {
     
+      image4: 'https://hunyuan-plugin-1258344706.cos.ap-nanjing.myqcloud.com/pdf_youtu/img/baf4078408e6b4dee9eb96875aac3573-image.png'
+    };
   }
 };
 </script>
 
 <style scoped>
-  . {
-    
+.sampling-process {
+  padding: 30px;
+  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.sampling-process::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://images.unsplash.com/photo-1518834107812-67b0b7c58434?q=80&w=2070&auto=format&fit=crop') center/cover;
+  opacity: 0.15;
+  z-index: -1;
+  filter: blur(2px);
+}
+
+/* 标题区域 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2 {
+  position: relative;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  color: #1a365d;
+  font-size: 2rem;
+  font-weight: 700;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-section h2::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4a9ef7, #3acfd5);
+  border-radius: 3px;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  color: #2d5986;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 内容区域 */
+.content-section {
+  margin-bottom: 40px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s ease;
+  overflow: hidden;
+}
+
+.content-section:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.text-content {
+  margin-bottom: 30px;
+}
+
+p {
+  text-indent: 2em;
+  margin: 20px 0;
+  line-height: 1.8;
+  color: #2d3748;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 20px;
+}
+
+p::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #3a9fd3;
+  font-size: 1.5rem;
+  line-height: 1.8;
+}
+
+/* 图片区域 */
+.image-row {
+  display: flex;
+  justify-content: center;
+}
+
+.image-container {
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  max-width: 800px;
+  margin: 0 auto;
+  transition: all 0.4s ease;
+}
+
+.image-container:hover {
+  transform: scale(1.01);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.sampling-image {
+  width: 100%;
+  height: auto;
+  min-height: 350px;
+  display: block;
+  background: rgba(245, 249, 255, 0.4);
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.image-container:hover .sampling-image {
+  transform: scale(1.02);
+}
+
+.image-caption {
+  text-align: center;
+  font-size: 1.1rem;
+  color: #1a365d;
+  padding: 15px;
+  font-weight: 600;
+  background: linear-gradient(to right, rgba(248, 250, 252, 0.9), rgba(240, 248, 255, 0.9));
+  margin: 0;
+  border-top: 1px dashed #cbd5e0;
+  position: relative;
+}
+
+.image-caption::before {
+  content: "📌";
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 装饰元素 */
+.decorative-element {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(74, 158, 247, 0.1), rgba(58, 207, 213, 0.1));
+  z-index: -1;
+}
+
+.decorative-element:nth-child(1) {
+  top: 10%;
+  left: 5%;
+  width: 80px;
+  height: 80px;
+}
+
+.decorative-element:nth-child(2) {
+  bottom: 15%;
+  right: 8%;
+  width: 60px;
+  height: 60px;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .sampling-process {
+    padding: 20px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+  }
+  
+  .content-section {
+    padding: 20px;
+  }
+  
+  .sampling-image {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sampling-process {
+    padding: 15px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.6rem;
+  }
+  
+  p {
+    font-size: 1rem;
+    padding-left: 15px;
+  }
+  
+  .image-caption {
+    font-size: 1rem;
+    padding: 12px;
+  }
+  
+  .sampling-image {
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
+  .sampling-process {
+    padding: 10px;
+  }
+  
+  .header-section h2 {
+    font-size: 1.4rem;
+  }
+  
+  .subtitle {
+    font-size: 0.95rem;
+  }
+  
+  .content-section {
+    padding: 15px;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    padding-left: 10px;
+  }
+  
+  .image-caption {
+    font-size: 0.9rem;
+    padding: 10px 15px 10px 35px;
+  }
+  
+  .image-caption::before {
+    left: 10px;
+  }
+  
+  .sampling-image {
+    min-height: 200px;
   }
+}
 </style>