Merge branch 'lili' of qw/12 into master

.hintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "meta-viewport": "off",
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ]
+  }
+}

auto-imports.d.ts

@@ -68,6 +68,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

components.d.ts

@@ -2,27 +2,36 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AirsampleChart: typeof import('./src/components/atmpollution/airsampleChart.vue')['default']
+    AirsampleLine: typeof import('./src/components/atmpollution/airsampleLine.vue')['default']
+    AirSampleTencentMap: typeof import('./src/components/atmpollution/airSampleTencentMap.vue')['default']
     AppAside: typeof import('./src/components/layout/AppAside.vue')['default']
     AppAsideForTab2: typeof import('./src/components/layout/AppAsideForTab2.vue')['default']
     AppHeader: typeof import('./src/components/layout/AppHeader.vue')['default']
     AppLayout: typeof import('./src/components/layout/AppLayout.vue')['default']
+    Atmcompanyline: typeof import('./src/components/atmpollution/atmcompanyline.vue')['default']
+    Atmcompanymap: typeof import('./src/components/atmpollution/atmcompanymap.vue')['default']
+    AtmCompanytencentMap: typeof import('./src/components/atmpollution/atmCompanytencentMap.vue')['default']
+    Atmsamplemap: typeof import('./src/components/atmpollution/atmsamplemap.vue')['default']
+    Crosssectionmap: typeof import('./src/components/irrpollution/crosssectionmap.vue')['default']
+    CrossSectionSamplelineData: typeof import('./src/components/irrpollution/crossSectionSamplelineData.vue')['default']
+    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']
     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']
@@ -30,25 +39,35 @@ 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']
+    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']
+    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']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    Irrwatermap: typeof import('./src/components/irrpollution/irrwatermap.vue')['default']
     PaginationComponent: typeof import('./src/components/PaginationComponent.vue')['default']
+    Riverwaterassay: typeof import('./src/components/irrpollution/riverwaterassay.vue')['default']
     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']
+    Waterassaydata3: typeof import('./src/components/irrpollution/waterassaydata3.vue')['default']
+    Waterassaydata4: typeof import('./src/components/irrpollution/waterassaydata4.vue')['default']
+    Waterdataline: typeof import('./src/components/irrpollution/waterdataline.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
 }

package-lock.json

@@ -9,11 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "@fortawesome/fontawesome-svg-core": "^7.0.0",
-        "@fortawesome/free-solid-svg-icons": "^7.0.0",
-        "@fortawesome/vue-fontawesome": "^3.1.1",
         "@turf/turf": "^7.2.0",
         "@types/d3": "^7.4.3",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.7.9",
@@ -25,10 +23,14 @@
         "echarts-gl": "^2.0.9",
         "element-plus": "^2.9.3",
         "file-saver": "^2.0.5",
+        "font-awesome": "^4.7.0",
         "html2canvas": "^1.4.1",
         "leaflet": "^1.9.4",
+        "leaflet-compass": "^1.5.6",
         "leaflet.chinatmsproviders": "^3.0.6",
         "pinia": "^2.3.0",
+        "proj4": "^2.19.10",
+        "proj4leaflet": "^1.0.2",
         "sass": "^1.84.0",
         "vue": "^3.5.13",
         "vue-echarts": "^7.0.3",
@@ -1191,49 +1193,6 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.0.0.tgz",
-      "integrity": "sha512-PGMrIYXLGA5K8RWy8zwBkd4vFi4z7ubxtet6Yn13Plf6krRTwPbdlCwlcfmoX0R7B4Z643QvrtHmdQ5fNtfFCg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.0.0.tgz",
-      "integrity": "sha512-obBEF+zd98r/KtKVW6A+8UGWeaOoyMpl6Q9P3FzHsOnsg742aXsl8v+H/zp09qSSu/a/Hxe9LNKzbBaQq1CEbA==",
-      "license": "MIT",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.0.0.tgz",
-      "integrity": "sha512-njSLAllkOddYDCXgTFboXn54Oe5FcvpkWq+FoetOHR64PbN0608kM02Lze0xtISGpXgP+i26VyXRQA0Irh3Obw==",
-      "license": "(CC-BY-4.0 AND MIT)",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/vue-fontawesome": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.1.1.tgz",
-      "integrity": "sha512-U5azn4mcUVpjHe4JO0Wbe7Ih8e3VbN83EH7OTBtA5/QGw9qcPGffqcmwsLyZYgEkpVkYbq/6dX1Iyl5KUGMp6Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
-        "vue": ">= 3.0.0 < 4"
-      }
-    },
     "node_modules/@iconify-json/ep": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/@iconify-json/ep/-/ep-1.2.2.tgz",
@@ -5332,6 +5291,24 @@
         "vscode-uri": "^3.0.8"
       }
     },
+    "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",
+      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.2.25"
+      },
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/leaflet": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz",
@@ -7426,6 +7403,15 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "license": "(OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -8141,6 +8127,15 @@
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/leaflet-compass": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmmirror.com/leaflet-compass/-/leaflet-compass-1.5.6.tgz",
+      "integrity": "sha512-Ix3p8/8D5tgNzz3Sp7hxQbMi8sG7Od5kb4qN+Encv4jLxht66mcMM3W7Nqo/1R7r/cESX3s0WyxQk4cIjL+w+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "leaflet": "*"
+      }
+    },
     "node_modules/leaflet.chinatmsproviders": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/leaflet.chinatmsproviders/-/leaflet.chinatmsproviders-3.0.6.tgz",
@@ -8284,6 +8279,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
@@ -8878,6 +8879,28 @@
         "node": ">=6"
       }
     },
+    "node_modules/proj4": {
+      "version": "2.19.10",
+      "resolved": "https://registry.npmmirror.com/proj4/-/proj4-2.19.10.tgz",
+      "integrity": "sha512-uL6/C6kA8+ncJAEDmUeV8PmNJcTlRLDZZa4/87CzRpb8My4p+Ame4LhC4G3H/77z2icVqcu3nNL9h5buSdnY+g==",
+      "license": "MIT",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.5.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ahocevar"
+      }
+    },
+    "node_modules/proj4leaflet": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/proj4leaflet/-/proj4leaflet-1.0.2.tgz",
+      "integrity": "sha512-6GdDeUlhX/tHUiMEj80xQhlPjwrXcdfD0D5OBymY8WvxfbmZcdhNqQk7n7nFf53ue6QdP9ls9ZPjsAxnbZDTsw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "proj4": "^2.3.14"
+      }
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -9736,7 +9759,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -11582,6 +11605,12 @@
       "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==",
       "license": "MIT"
     },
+    "node_modules/wkt-parser": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/wkt-parser/-/wkt-parser-1.5.2.tgz",
+      "integrity": "sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==",
+      "license": "MIT"
+    },
     "node_modules/wmf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",

package.json

@@ -13,11 +13,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@fortawesome/fontawesome-svg-core": "^7.0.0",
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
-    "@fortawesome/vue-fontawesome": "^3.1.1",
     "@turf/turf": "^7.2.0",
     "@types/d3": "^7.4.3",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.7.9",
@@ -29,10 +27,14 @@
     "echarts-gl": "^2.0.9",
     "element-plus": "^2.9.3",
     "file-saver": "^2.0.5",
+    "font-awesome": "^4.7.0",
     "html2canvas": "^1.4.1",
     "leaflet": "^1.9.4",
+    "leaflet-compass": "^1.5.6",
     "leaflet.chinatmsproviders": "^3.0.6",
     "pinia": "^2.3.0",
+    "proj4": "^2.19.10",
+    "proj4leaflet": "^1.0.2",
     "sass": "^1.84.0",
     "vue": "^3.5.13",
     "vue-echarts": "^7.0.3",

src/App.vue

@@ -1,7 +1,6 @@
 <script setup lang='ts'>
 import { RouterView } from "vue-router"
 import request from './utils/request';
-import Atmcompanyline from "./views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmcompanyline.vue";
 request({
   url: '/table',
   method: 'get'
@@ -11,7 +10,7 @@ request({
 </script>
 
 <template>
-  <RouterView />
+  <RouterView/>
 </template>
 
 <style scoped></style>

src/components/atmpollution/airSampleTencentMap.vue

@@ -0,0 +1,559 @@
+<template>
+  <div class="map-page">
+    <div ref="mapContainer" class="map-container"></div>
+    <!-- 错误提示 -->
+    <div v-if="error" class="error-message">{{ error }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import axios from 'axios'
+const isMapReady = ref(false)
+const mapContainer = ref(null)
+const error = ref(null)
+const TMap = ref(null);
+let activeTempMarker = ref(null)
+let infoWindow = ref(null)
+let map = null
+let markersLayer = null
+let soilTypeVectorLayer = null; // 土壤类型多边形图层
+let overlay = null
+const state = reactive({
+  showOverlay: false,
+  showSoilTypes: true,
+  showSurveyData: true,
+  shoeWaterSystem: true,
+  excelData: [], // 用于存储从接口获取的数据
+  lastTapTime: 0
+})
+
+const tMapConfig = reactive({
+  key: import.meta.env.VITE_TMAP_KEY, // 请替换为你的开发者密钥
+  geocoderURL: 'https://apis.map.qq.com/ws/geocoder/v1/'
+})
+
+// 加载SDK的代码保持不变...
+const loadSDK = () => {
+  return new Promise((resolve, reject) => {
+    if (window.TMap?.service?.Geocoder) {
+      console.log('SDK已缓存，直接使用');
+      TMap.value = 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=${tMapConfig.key}&callback=initTMap`
+    window.initTMap = () => {
+      if (!window.TMap?.service?.Geocoder) {
+        console.error('SDK加载后仍无效');
+        reject(new Error('地图SDK加载失败'))
+        return
+      }
+      console.log('SDK动态加载完毕');
+      TMap.value = window.TMap
+      resolve(window.TMap)
+    }
+
+    script.onerror = (err) => {
+      console.error('SDK加载报错', err);
+      reject(`地图资源加载失败: ${err.message}`)
+      document.head.removeChild(script)
+    }
+
+    document.head.appendChild(script)
+  })
+}
+
+// 初始化地图 - 保持大部分不变，增加数据加载
+const initMap = async () => {
+  try {
+    await loadSDK()
+    console.log('开始创建地图实例');
+    
+    map = new TMap.value.Map(mapContainer.value, {
+      center: new TMap.value.LatLng(24.9, 113.9),//前大往下，后大往左
+      zoom: 10,
+      minZoom: 9.25,
+      maxZoom: 11,
+      renderOptions: {
+        antialias: true
+      },
+    })
+    console.log('地图实例创建成功');
+    
+    // 创建标记点向量图层
+    markersLayer = new TMap.value.MultiMarker({
+      map: map,
+      zIndex: 1000,
+      collision:false,
+      styles: {
+        default: new TMap.value.MarkerStyle({
+          width: 15, // 图标宽度
+          height: 15, // 图标高度
+          anchor: { x: 12.5, y: 12.5 }, // 居中定位
+          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAiIGZpbGw9InJlZCIvPjwvc3ZnPg=='
+        })
+      }
+    });
+    
+    // 绑定标记点击事件
+    markersLayer.on('click', handleMarkerClick);
+    
+    // 创建土壤类型多边形图层
+    soilTypeVectorLayer = new TMap.value.MultiPolygon({
+      map: map,
+      styles: {
+        default: new TMap.value.PolygonStyle({
+          fillColor: '#cccccc',
+          fillOpacity: 0.4,
+          strokeColor: '#333',
+          strokeWidth: 1
+        })
+      }    
+    });  
+   
+    // 先加载数据，再更新标记
+    await fetchData(); // 新增：获取数据
+    if(state.excelData.length > 0) {
+    const first = state.excelData[0];
+    console.log('第一条数据坐标:', 
+      first.纬度 || first.latitude, 
+      first.经度 || first.longitude
+    );
+  }
+    updateMarkers();   // 更新标记点
+    
+    // 标记地图就绪
+    isMapReady.value = true;
+    console.log('地图初始化完成');
+
+  } catch (err) {
+    isMapReady.value = true;
+    console.error('initMap执行异常：', err);
+    error.value = err.message
+  }
+}
+
+// 新增：从接口获取数据
+const fetchData = async () => {
+  try {
+    const response = await axios.get('http://localhost:3000/table/Atmosphere_summary_data', {
+      timeout: 100000
+    });
+
+    state.excelData = response.data.filter(item => {
+      // 检查数据完整性
+      if(!item['样品编码'] || !item.纬度 || !item.经度) {
+        console.warn(`数据不完整，已跳过: ${item.样品编码 || '未知编码'}`);
+        return false;
+      }
+      
+      const lat = Number(item.纬度);
+      const lng = Number(item.经度);
+      
+      // 验证数值范围
+      const isValid = !isNaN(lat) && !isNaN(lng) && 
+                     lat >= -90 && lat <= 90 && 
+                     lng >= -180 && lng <= 180;
+      
+      if(!isValid) {
+        console.error(`无效经纬度: ${item.样品编码} (${item.纬度}, ${item.经度})`);
+      }
+      return isValid;
+    });
+    
+    console.log('有效数据记录:', state.excelData.length);
+  } catch (err) {
+    console.error('数据请求失败详情:', err.response?.data || err.message);
+    error.value = `数据加载失败: ${err.message}`;
+    
+  }
+}
+
+// 更新标记点 - 保持不变
+const updateMarkers = () => {
+  const coordCount = new Map();
+  const geometries = state.excelData.map(item => {
+    console.log(`ID: ${item.样品编码}, 坐标: (${item.纬度}, ${item.经度})`); // 替换字段名
+    if (!item.样品编码 || !item.纬度 || !item.经度) {
+      console.error(`无效数据项: ${JSON.stringify(item)}`);
+      return null;
+    }
+    const lat = Number(item.纬度);
+    const lng = Number(item.经度);
+
+    if (isNaN(lat) || isNaN(lng)) {
+      console.error(`坐标值非数字: ${item.样品编码} (${item.纬度}, ${item.经度})`);
+      return null;
+    }
+
+    const coordKey = `${lat}_${lng}`;
+    const count = coordCount.get(coordKey) || 0;
+    coordCount.set(coordKey, count + 1);
+
+    let finalLat = lat;
+    let finalLng = lng;
+    
+    // 重复坐标添加偏移
+    if (count > 0) {
+      const latOffset = count * 0.01;  // 南北方向偏移（约11米）
+      const lngOffset = count * 0.02;
+      finalLat = lat + latOffset;
+      finalLng = lng + lngOffset;
+      
+      console.log(`偏移点 ${item.样品编码}: ${lat},${lng} → ${finalLat},${finalLng}`);
+    }
+
+    const position = new TMap.value.LatLng(finalLat, finalLng);
+
+    return {
+      id: item.样品名称,
+      styleId: 'default',
+      position:position, // 替换字段名
+      properties: {
+        title: item.采样 || `采样点 ${item.样品名称}`, 
+        sampler_id: item.样品编码,
+        originalPosition: { lat, lng }
+      }
+    };
+  })
+  
+  markersLayer.setGeometries(geometries);
+  console.log('成功添加标记点数量:', geometries.length);
+};
+
+// Marker点击事件处理 - 保持不变
+const handleMarkerClick = async (e) => {
+  console.log('点击标记点');
+  
+  const marker = e.geometry;
+  if (!marker) {
+    console.error('未获取到标记点对象');
+    return;
+  }
+
+  // 关闭之前的信息窗口
+  if (infoWindow.value) {
+    infoWindow.value.close();
+    infoWindow.value = null;
+  }
+  
+  // 显示加载中
+  infoWindow.value = new TMap.value.InfoWindow({
+    map: map,
+    position: marker.position,
+    content: '<div style="padding:12px;text-align:center">加载数据中...</div>',
+    //offset: { x: 0, y: -32 }
+  });
+  infoWindow.value.open();
+
+  try {
+    const markerId = marker.id.trim();
+    console.log('点击标记点样品名称:', markerId);
+    
+    // 直接从本地数据查找，无需二次请求
+    const matchedData = state.excelData.find(item => 
+      item.样品名称.trim() === markerId
+    );
+
+    if (!matchedData) {
+      console.error("无法匹配的数据列表:", state.excelData.map(i => i.样品名称));
+      throw new Error(`未找到样品名称为 ${markerId} 的监测数据`);
+    }
+
+    // 创建信息窗口内容
+    const content = `
+      <div class="water-info-window">
+        <h3 class="info-title">${matchedData.采样}</h3>
+        <div class="info-row">
+          <span class="info-label">采样点ID:</span>
+          <span class="info-value">${matchedData.样品名称}</span>
+        </div>
+
+        <div class="info-row">
+          <span class="info-label">样品编号:</span>
+          <span class="info-value">${matchedData.样品编号}</span>
+        </div>
+  
+        <div class="contaminant-grid" style="grid-template-columns: repeat(2, 1fr); gap: 8px;">
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Cr mg/kg:</span>
+            <span class="contaminant-value">${matchedData['Cr mg/kg']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Cr ug/m3:</span>
+            <span class="contaminant-value">${matchedData['Cr ug/m3']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">As mg/kg:</span>
+            <span class="contaminant-value">${matchedData['As mg/kg']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">As ug/m3:</span>
+            <span class="contaminant-value">${matchedData['As ug/m3']}</span>
+          </div>
+          
+          <div class="contaminant-item">
+            <span class="contaminant-name">Cd mg/kg:</span>
+            <span class="contaminant-value">${matchedData['Cd mg/kg']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Cd ug/m3:</span>
+            <span class="contaminant-value">${matchedData['Cd ug/m3']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Hg mg/kg:</span>
+            <span class="contaminant-value">${matchedData['Hg mg/kg']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Hg ug/m3:</span>
+            <span class="contaminant-value">${matchedData['Hg ug/m3']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Pb mg/kg:</span>
+            <span class="contaminant-value">${matchedData['Pb mg/kg']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">Pb ug/m3:</span>
+            <span class="contaminant-value">${matchedData['Pb ug/m3']}</span>
+          </div>
+          
+          <div class="contaminant-item">
+            <span class="contaminant-name">颗粒物的重量 mg:</span>
+            <span class="contaminant-value">${matchedData['颗粒物的重量 mg']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">标准体积 m3:</span>
+            <span class="contaminant-value">${matchedData['标准体积 m3']}</span>
+          </div>
+
+          <div class="contaminant-item">
+            <span class="contaminant-name">颗粒物浓度ug/m3:</span>
+            <span class="contaminant-value">${matchedData['颗粒物浓度ug/m3']}</span>
+          </div>
+
+        </div>
+      </div>
+    `;
+    
+    // 更新信息窗口
+    infoWindow.value.setContent(content);
+    
+  } catch (error) {
+    console.error('API请求失败:', error);
+    
+    // 显示错误信息
+    const errorContent = `
+      <div style="padding:12px;color:red">
+        <h3>${marker.properties.title}</h3>
+        <p>获取数据失败: ${error.message}</p>
+      </div>
+    `;
+    
+    infoWindow.value.setContent(errorContent);
+  }
+}
+
+// 其余函数保持不变...
+const manageTempMarker = {
+  add: (lat, lng, phValue) => {
+    if (activeTempMarker.value) {
+      markersLayer.remove("-999")
+    }
+    
+    // 确保已添加临时样式
+    if (!markersLayer.getStyles().temp) {
+      markersLayer.setStyles({
+        temp: new TMap.value.MarkerStyle({
+          width: 30,
+          height: 30,
+          anchor: { x: 12.5, y: 12.5 },
+          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkg2Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDEyYzEuMSAwIDIgLS45IDItMnYtNGMwLTEuMS0uOS0yLTItMmgtMnY0aC00di00SDEyVjJ6bTAgMTZINnYtOEgxOFYxOHoiIGZpbGw9IiNGRjAwMDAiLz48L3N2Zz4='
+        })
+      });
+    }
+    
+    const tempMarker = markersLayer.add({
+      id: "-999",
+      position: new TMap.value.LatLng(lat, lng),
+      styleId: 'temp',
+      properties: {
+        title: '克里金插值',
+        phValue: parseFloat(phValue).toFixed(2),
+        isTemp: true
+      }
+    })
+    activeTempMarker.value = tempMarker
+  },
+  remove: () => {
+    if (activeTempMarker.value) {
+      markersLayer.remove("-999")
+      activeTempMarker.value = null
+    }
+  }
+}
+
+onMounted(async () => {
+  console.log('开始执行 onMounted');
+  
+  try {
+    await initMap()
+    console.log('地图初始化完成');
+  } catch (err) {
+    console.error('onMounted执行异常', err);
+    error.value = err.message
+  }
+})
+
+onBeforeUnmount(() => {
+  if (activeTempMarker.value) {
+    manageTempMarker.remove()
+  }
+  if (markersLayer) markersLayer.setMap(null)
+  if (overlay) overlay.setMap(null)
+  if (infoWindow.value) {
+    infoWindow.value.close()
+    infoWindow.value = null
+  }
+  if (soilTypeVectorLayer) soilTypeVectorLayer.setMap(null)
+})
+</script>
+
+<style>
+/* 原有样式保持不变，修改以下部分 */
+.error-message {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 20px;
+  background-color: #ff4444;
+  color: white;
+  border-radius: 4px;
+  z-index: 9999;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  animation: fadein 0.5s, fadeout 0.5s 4.5s;
+}
+
+@keyframes fadein {
+  from { top: 0; opacity: 0; }
+  to { top: 20px; opacity: 1; }
+}
+
+@keyframes fadeout {
+  from { top: 20px; opacity: 1; }
+  to { top: 0; opacity: 0; }
+}
+
+.map-page {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+
+.map-container {
+  width: 100%;
+  height: 100vh ;
+  min-height: 600px;
+  pointer-events: all;
+}
+
+.contaminants {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2px;
+}
+
+/* 窗口容器：精准控制尺寸 */
+.water-info-window {
+  max-width: 340px !important;
+  width: 100%;
+  height: auto;
+  padding: 8px;
+  box-sizing: border-box;
+  background: #FFFFFF;
+  border-radius: 8px;
+  box-shadow: 0 3px 12px rgba(0, 32, 71, 0.1);
+  border: 1px solid #e5e7eb;
+  overflow: hidden !important;
+}
+
+/* 标题区样式 */
+.info-title {
+  font-size: 0.9rem;
+  padding: 6px 8px;
+  letter-spacing: 0.2px;
+  border-bottom: 1px solid #f1f2f6;
+  margin: 0 0 8px 0;
+}
+
+/* 基础数据行 */
+.info-row {
+  display: flex;
+  align-items: center;
+  margin: 4px 0;
+  padding-left: 8px;
+}
+
+.info-label {
+  font-size: 0.8rem;
+  padding-right: 6px;
+  flex: 0 0 80px;
+}
+
+.info-value {
+  font-size: 0.8rem;
+  padding: 2px 6px;
+  border-left: 2px solid #e5e7eb;
+}
+
+/* 污染物网格：优化布局使名称和数值在同一行并放大字体 */
+.contaminant-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px; /* 减小间距以补偿字体增大 */
+  margin: 4px 0;
+}
+
+/* 污染物项：确保名称和数值在同一行 */
+.contaminant-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 5px; /* 减小内边距 */
+  background: #f9fafb;
+  border-radius: 4px;
+}
+
+/* 增大字体大小，保持在同一行 */
+.contaminant-name {
+  font-size: 0.8rem; /* 增大字体 */
+  color: #6b7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  margin-right: 5px;
+}
+
+.contaminant-value {
+  font-size: 0.8rem; /* 增大字体 */
+  background: #e5e7eb;
+  padding: 2px 6px;
+  border-radius: 3px;
+  min-width: 40px;
+  text-align: center;
+  flex-shrink: 0;
+}
+</style>

src/components/atmpollution/airsampleChart.vue

@@ -0,0 +1,487 @@
+<template>
+  <div class="atmosphere-summary">
+    <!-- 图表容器 -->
+    <div ref="chartRef" class="chart-box"></div>
+    
+    <!-- 状态提示 -->
+    <div v-if="loading" class="status">
+      <div class="spinner"></div>
+      <p>数据加载中...</p>
+    </div>
+    
+    <div v-else-if="error" class="status error">
+      <i class="fa fa-exclamation-circle"></i> {{ error }}
+      <div v-if="errorDetails" class="error-details">
+        <p>错误详情:</p>
+        <pre>{{ errorDetails }}</pre>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import axios from 'axios'
+
+// 接收计算方式（重量/体积）
+const props = defineProps({
+  calculationMethod: {
+    type: String,
+    required: true,
+    default: 'weight'
+  }
+})
+
+// --------------------------
+// 配置区
+// --------------------------
+const BACKEND_PORT = '8000';
+const API_URL = `http://localhost:${BACKEND_PORT}/api/vector/export/all?table_name=Atmo_sample_data`;
+
+// 重量指标字段
+const WEIGHT_FIELDS = [
+  'Cr_particulate',
+  'As_particulate',
+  'Cd_particulate',
+  'Hg_particulate',
+  'Pb_particulate'
+];
+
+// 体积字段名
+const VOLUME_FIELD = 'volume'; 
+
+// 自定义颜色（用户指定）
+const COLORS = ['#ff4d4f99', '#1890ff', '#ffd700', '#52c41a88', '#722ed199'];
+// --------------------------
+
+// 响应式数据
+const chartRef = ref(null);
+const loading = ref(true);
+const error = ref('');
+const showLog = ref(false); // 默认隐藏日志
+const fullLog = ref('');
+let myChart = null;
+
+// 记录日志
+const log = (message) => {
+  const time = new Date().toLocaleTimeString();
+  fullLog.value += `[${time}] ${message}\n`;
+  console.log(`[日志] ${message}`);
+};
+
+/**
+ * 修复JSON中的非法值
+ */
+const fixInvalidJsonValues = (rawData) => {
+  if (typeof rawData !== 'string') {
+    rawData = JSON.stringify(rawData);
+  }
+  
+  const fixedData = rawData
+    .replace(/:\s*NaN\b/g, ': null')
+    .replace(/:\s*"N"\b/g, ': null')
+    .replace(/:\s*"NaN"\b/g, ': null')
+    .replace(/:\s*Infinity\b/g, ': null')
+    .replace(/:\s*-\s*Infinity\b/g, ': null')
+    .replace(/:\s+/g, ': ')
+    .replace(/,\s+/g, ', ');
+  
+  return fixedData;
+};
+
+/**
+ * 重量转体积计算
+ */
+function weightToVolume(weight, volume) {
+  if (weight === undefined || weight === null) {
+    log(`重量值无效: ${weight}`);
+    return 0;
+  }
+  if (volume === undefined || volume === null || volume === 0 || isNaN(volume)) {
+    log(`体积值无效: ${volume}（已自动替换为1）`);
+    volume = 1;
+  }
+  
+  const weightNum = parseFloat(weight);
+  const volumeNum = parseFloat(volume);
+  
+  if (isNaN(weightNum)) {
+    log(`重量无法转换为数字: ${weight}`);
+    return 0;
+  }
+  
+  const ug = weightNum * 1000;
+  return parseFloat((ug / volumeNum).toFixed(2));
+}
+
+/**
+ * 提取区县
+ */
+function getRegion(location) {
+  if (!location || typeof location !== 'string') {
+    return '未知区县';
+  }
+
+  const regions = [
+    '浈江区', '武江区', '曲江区', '乐昌市', 
+    '南雄市', '始兴县', '仁化县', '翁源县', 
+    '新丰县', '乳源瑶族自治县'
+  ];
+
+  // 精确匹配
+  for (const region of regions) {
+    if (location.includes(region)) {
+      return region;
+    }
+  }
+
+  // 模糊匹配
+  const aliasMap = {
+    '浈江': '浈江区', '武江': '武江区', '曲江': '曲江区',
+    '乐昌': '乐昌市', '南雄': '南雄市', '始兴': '始兴县',
+    '仁化': '仁化县', '翁源': '翁源县', '新丰': '新丰县',
+    '乳源': '乳源瑶族自治县'
+  };
+  
+  for (const [alias, region] of Object.entries(aliasMap)) {
+    if (location.includes(alias)) {
+      return region;
+    }
+  }
+
+  return '未知区县';
+}
+
+/**
+ * 数据处理
+ */
+async function processData() {
+  try {
+    log('开始数据处理');
+    const response = await axios.get(API_URL, { 
+      timeout: 15000,
+      responseType: 'text'
+    });
+    
+    const fixedJson = fixInvalidJsonValues(response.data);
+    const geoData = JSON.parse(fixedJson);
+
+    if (!geoData || !geoData.features || !Array.isArray(geoData.features)) {
+      throw new Error('数据结构错误，缺少features数组');
+    }
+    log(`解析到${geoData.features.length}条数据`);
+
+    // 处理数据
+    const processedItems = geoData.features.map((feature, index) => {
+      const props = feature.properties || {};
+      return {
+        id: index,
+        location: props.sampling_location || '',
+        region: getRegion(props.sampling_location || ''),
+        volume: props[VOLUME_FIELD],
+        weights: WEIGHT_FIELDS.reduce((acc, field) => {
+          acc[field] = props[field];
+          return acc;
+        }, {})
+      };
+    });
+
+    // 统计数据
+    const regionStats = {};
+    const totalStats = {};
+    WEIGHT_FIELDS.forEach(field => {
+      totalStats[field] = { sum: 0, count: 0 };
+      totalStats[`${field}_volume`] = { sum: 0, count: 0 };
+    });
+
+    processedItems.forEach(item => {
+      const { region, volume, weights } = item;
+      if (!regionStats[region]) {
+        regionStats[region] = {};
+        WEIGHT_FIELDS.forEach(field => {
+          regionStats[region][field] = { sum: 0, count: 0 };
+          regionStats[region][`${field}_volume`] = { sum: 0, count: 0 };
+        });
+      }
+
+      WEIGHT_FIELDS.forEach(field => {
+        const weightValue = weights[field];
+        const weightNum = parseFloat(weightValue);
+
+        if (!isNaN(weightNum)) {
+          regionStats[region][field].sum += weightNum;
+          regionStats[region][field].count += 1;
+          totalStats[field].sum += weightNum;
+          totalStats[field].count += 1;
+        }
+
+        const volumeValue = weightToVolume(weightValue, volume);
+        regionStats[region][`${field}_volume`].sum += volumeValue;
+        regionStats[region][`${field}_volume`].count += 1;
+        totalStats[`${field}_volume`].sum += volumeValue;
+        totalStats[`${field}_volume`].count += 1;
+      });
+    });
+
+    // 准备图表数据
+    const chartRegions = Object.keys(regionStats).filter(r => r !== '未知区县');
+    if (chartRegions.length === 0) chartRegions.push('未知区县');
+    chartRegions.push('全市平均');
+
+    // 生成系列数据
+    const series = WEIGHT_FIELDS.map((field, index) => {
+      const metricType = props.calculationMethod === 'volume' 
+        ? `${field}_volume` 
+        : field;
+      
+      const data = chartRegions.map(region => {
+        if (region === '全市平均') {
+          return totalStats[metricType].count > 0 
+            ? (totalStats[metricType].sum / totalStats[metricType].count).toFixed(2)
+            : '0.00';
+        }
+        
+        const stats = regionStats[region][metricType];
+        return stats.count > 0 
+          ? (stats.sum / stats.count).toFixed(2)
+          : '0.00';
+      });
+
+      return {
+        name: field.replace('_particulate', ''), // 图例名称（不带后缀）
+        type: 'bar',
+        data,
+        itemStyle: { 
+          color: COLORS[index % COLORS.length] // 使用用户指定的颜色
+        },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 12
+        }
+      };
+    });
+
+    return { regions: chartRegions, series };
+
+  } catch (err) {
+    error.value = '数据处理失败';
+    return null;
+  }
+}
+
+/**
+ * 初始化图表（带单位显示）
+ */
+async function initChart() {
+  loading.value = true;
+  error.value = '';
+  
+  try {
+    await nextTick();
+    if (!chartRef.value) {
+      throw new Error('图表容器未挂载');
+    }
+
+    const chartData = await processData();
+    if (!chartData) return;
+
+    // 确定单位（核心修改：添加单位逻辑）
+    const { unit, titleText } = props.calculationMethod === 'weight' 
+      ? { 
+          unit: 'mg/kg', 
+          titleText: '各区域空气颗粒物重量指标平均值' ,
+        } 
+      : { 
+          unit: 'ug/m³',  // 假设体积单位为ug/m³，可根据实际需求修改
+          titleText: '各区域空气颗粒物体积指标平均值' ,
+        };
+
+    // 销毁旧图表
+    if (myChart) myChart.dispose();
+    myChart = echarts.init(chartRef.value);
+
+    // 设置图表配置（带单位显示）
+    myChart.setOption({
+      title: { 
+        text: titleText,
+        subtext: `单位: ${unit}`, // 标题显示单位
+        left: 'center',
+        textStyle:{fontSize:20},
+        subtextStyle:{fontSize:18}
+      },
+      tooltip: { //提示框
+        trigger: 'axis',
+        formatter: function(params) {
+          // Tooltip显示单位
+          let res = `${params[0].name}<br/>`;
+          params.forEach(item => {
+            res += `${item.marker} ${item.seriesName}: ${item.value} ${unit}<br/>`;
+          });
+          return res;
+        },
+        textStyle:{fontSize:15}
+      },
+      xAxis: {
+        type: 'category',
+        data: chartData.regions,
+        axisLabel: { rotate: 45 ,fontSize:18 }
+      },
+      yAxis: { 
+        type: 'value',
+        axisLabel: {
+          formatter: `{value} ${unit}` // Y轴显示单位
+          ,fontSize:15
+        }
+      },
+      series: chartData.series.map(series => ({  // 遍历每个系列，添加 label 配置
+       ...series,  // 保留原有配置
+       label: {
+         show: true,  // 显示数值标签
+         position: 'top',  // 标签位置（顶部）
+         fontSize: 15,  // 这里才是柱状图数值的字体大小！
+         color: '#333'  // 可选：设置文字颜色
+       }
+      })),
+      legend: { //图例
+        data: chartData.series.map(s => s.name),
+        bottom: 10,
+        textStyle:{fontSize:18}
+      },
+      grid: {
+        left: '5%', right: '5%', bottom: '20%', top: '15%',
+        containLabel: true,
+        axisLabel:{fontSize:18}
+      }
+    }, true);
+
+    // 监听窗口大小
+    const handleResize = () => myChart.resize();
+    window.addEventListener('resize', handleResize);
+    onUnmounted(() => window.removeEventListener('resize', handleResize));
+
+  } catch (err) {
+    error.value = '图表加载失败';
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 监听计算方式变化
+watch(() => props.calculationMethod, initChart);
+
+// 组件挂载后初始化
+onMounted(() => {
+  initChart();
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (myChart) myChart.dispose();
+});
+</script>
+
+<style scoped>
+.atmosphere-summary {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.chart-box {
+  width: 100%;
+  height: 600px;
+  min-height: 400px;
+  background: #fff;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+}
+
+.status {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 80%;
+}
+
+.error {
+  color: #dc3545;
+  border: 1px solid #f5c6cb;
+  background: #f8d7da;
+}
+
+.error-details {
+  margin-top: 15px;
+  text-align: left;
+  font-size: 14px;
+}
+
+.error-details pre {
+  background: rgba(255, 255, 255, 0.8);
+  padding: 10px;
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 200px;
+  white-space: pre-wrap;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 15px;
+  border: 4px solid #e9ecef;
+  border-top: 4px solid #007bff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.debug-panel {
+  margin-top: 20px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.log-toggle {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.log-content {
+  max-height: 300px;
+  overflow: auto;
+  background: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #e9ecef;
+}
+
+.log-content pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: monospace;
+  font-size: 12px;
+}
+</style>

src/components/atmpollution/airsampleLine.vue

@@ -0,0 +1,456 @@
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <!-- 错误提示（带原始响应预览） -->
+    <div v-if="error" class="status error mb-4">
+      <i class="fa fa-exclamation-circle"></i> {{ error }}
+      <div class="raw-response" v-if="rawResponse">
+        <button @click="showRaw = !showRaw" class="mt-2">
+          {{ showRaw ? '收起原始响应' : '查看原始响应（前1000字符）' }}
+        </button>
+        <pre v-if="showRaw" class="mt-2 bg-gray-50 p-2 text-sm">{{ truncatedRawResponse }}</pre>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="py-20 flex justify-center items-center">
+        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+      </div>
+      
+      <!-- 数据展示区：表格 + 地图 + 柱状图 -->
+      <div v-else-if="filteredData.length > 0" class="flex flex-col md:flex-row">
+        <!-- 表格 -->
+        <div class="w-full md:w-1/2 overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th 
+                  v-for="(col, index) in displayColumns" 
+                  :key="index"
+                  :style="{ width: col.width }"  
+                  class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
+                  @click="sortData(col.label)"
+                >
+                  <div class="flex items-center justify-between">
+                    {{ col.label }}
+                    <span v-if="sortKey === col.label" class="ml-1 text-gray-400">
+                      {{ sortOrder === 'asc' ? '↑' : '↓' }}
+                    </span>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="(item, rowIndex) in sortedData" :key="rowIndex" 
+                  class="hover:bg-gray-50 transition-colors duration-150">
+                <td 
+                  v-for="(col, colIndex) in displayColumns" 
+                  :key="colIndex"
+                  :style="{ width: col.width }"  
+                  class="px-6 py-4 whitespace-nowrap text-sm"
+                >
+                  <div class="flex items-center">
+                    <div class="text-gray-900 font-medium">
+                      {{ formatValue(item, col) }}
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- 地图 + 柱状图（右侧区域） -->
+        <div class="w-full md:w-1/2 p-4 flex flex-col">
+          <!-- 地图（依赖：@vue-leaflet/vue-leaflet） -->
+          <div class="h-64 mb-4">
+            <LMap 
+              :center="mapCenter" 
+              :zoom="12" 
+              style="width: 100%; height: 100%"
+            >
+              <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+              <LMarker 
+                v-for="(item, idx) in filteredData" 
+                :key="idx" 
+                :lat-lng="[item.latitude, item.longitude]"
+              >
+                <LPopup>{{ item.sampling_location }}</LPopup>
+              </LMarker>
+            </LMap>
+          </div>
+
+          <!-- 柱状图（依赖：echarts） -->
+          <div class="h-64">
+            <div ref="chart" class="w-full h-full"></div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 空数据状态 -->
+      <div v-else class="p-8 text-center">
+        <div class="flex flex-col items-center justify-center">
+          <div class="text-gray-400 mb-4">
+            <i class="fa fa-database text-5xl"></i>
+          </div>
+          <h3 class="text-lg font-medium text-gray-900 mb-1">暂无有效数据</h3>
+          <p class="text-gray-500">已过滤全空行</p>
+        </div>
+      </div>
+  
+      <!-- 数据统计 -->
+      <div class="p-4 bg-gray-50 border-t border-gray-200">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+          <div class="text-sm text-gray-500 mb-2 md:mb-0">
+            共 <span class="font-medium text-gray-900">{{ filteredData.length }}</span> 条数据
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { LMap, LTileLayer, LMarker, LPopup } from '@vue-leaflet/vue-leaflet'; // 地图组件
+import * as echarts from 'echarts'; // 柱状图
+
+// ========== 接口配置 ==========
+const apiUrl = 'http://localhost:8000/api/vector/export/all?table_name=Atmo_sample_data'; 
+
+// ========== 响应式数据 ==========
+const props = defineProps({
+  calculationMethod: {
+    type: String,
+    required: true,
+    default: 'weight'
+  }
+});
+
+const waterData = ref([]);
+const loading = ref(true);
+const error = ref('');
+const rawResponse = ref('');  
+const showRaw = ref(false);   
+const sortKey = ref('');      
+const sortOrder = ref('asc'); 
+const mapCenter = ref([23.5, 116.5]); // 地图初始中心（根据实际数据调整）
+const chartInstance = ref(null); // ECharts实例
+
+// 换算函数（重量→体积）
+function calculateConcentration(heavyMetalWeight, volume) {
+  if (heavyMetalWeight === undefined || volume === undefined || isNaN(heavyMetalWeight) || isNaN(volume) || volume === 0) {
+    return '未知';
+  }
+  const ug = heavyMetalWeight * 1000; 
+  const concentration = ug / volume;
+  return concentration.toFixed(2); // 保留2位小数
+}
+
+function calculateParticleConcentration(particleWeight, volume) {
+  if (particleWeight === undefined || volume === undefined || isNaN(particleWeight) || isNaN(volume) || volume === 0) {
+    return '未知';
+  }
+  const ug = particleWeight * 1000; 
+  const concentration = ug / volume;
+  return concentration.toFixed(2); // 保留2位小数
+}
+
+// 列配置（补充 width，根据内容合理分配宽度）
+const commonColumns = [
+  { key: 'sampling_location', label: '采样位置', type: 'string', width: '180px' },
+  { key: 'sample_name', label: '样品名称', type: 'string', width: '70px' },
+  { key: 'latitude', label: '纬度', type: 'number', width: '60px' }, // 地图依赖字段
+  { key: 'longitude', label: '经度', type: 'number', width: '60px' },// 地图依赖字段
+];
+
+const weightColumns = [
+  { key: 'Cr_particulate', label: 'Cr mg/kg', type: 'number', width: '80px' },
+  { key: 'As_particulate', label: 'As mg/kg', type: 'number', width: '80px' },
+  { key: 'Cd_particulate', label: 'Cd mg/kg', type: 'number', width: '80px' },
+  { key: 'Hg_particulate', label: 'Hg mg/kg', type: 'number', width: '80px' },
+  { key: 'Pb_particulate', label: 'Pb mg/kg', type: 'number', width: '80px' },
+  { key: 'particle_weight', label: '颗粒物重量 mg', type: 'number', width: '140px' },
+];
+
+const volumeColumns = [
+  { key: 'standard_volume', label: '标准体积 m³', type: 'number', width: '120px' },
+  { label: 'Cr ug/m³', getValue: (item) => calculateConcentration(item.Cr_particulate, item.standard_volume), type: 'number', width: '80px' },
+  { label: 'As ug/m³', getValue: (item) => calculateConcentration(item.As_particulate, item.standard_volume), type: 'number', width: '80px' },
+  { label: 'Cd ug/m³', getValue: (item) => calculateConcentration(item.Cd_particulate, item.standard_volume), type: 'number', width: '80px' },
+  { label: 'Hg ug/m³', getValue: (item) => calculateConcentration(item.Hg_particulate, item.standard_volume), type: 'number', width: '80px' },
+  { label: 'Pb ug/m³', getValue: (item) => calculateConcentration(item.Pb_particulate, item.standard_volume), type: 'number', width: '80px' },
+  { label: '颗粒物浓度 ug/m³', getValue: (item) => calculateParticleConcentration(item.particle_weight, item.standard_volume), type: 'number', width: '140px' },
+];
+
+// 动态生成显示列
+const displayColumns = computed(() => {
+  return props.calculationMethod === 'volume' 
+    ? [...commonColumns, ...volumeColumns] 
+    : [...commonColumns, ...weightColumns];
+});
+
+// 数值格式化
+const formatValue = (item, col) => {
+  if (col.getValue) {
+    const val = col.getValue(item);
+    return val === '未知' ? '-' : val;
+  } else {
+    const value = item[col.key];
+    if (value === null || value === undefined || value === '') return '-';
+    if (col.type === 'number') {
+      const num = parseFloat(value);
+      return isNaN(num) ? '-' : num.toFixed(2); // 统一保留2位小数
+    } else {
+      return value;
+    }
+  }
+};
+
+// 过滤全空行（允许0值）
+const filteredData = computed(() => {
+  return waterData.value.filter(item => {
+    return displayColumns.value.some(col => {
+      let val = col.getValue ? col.getValue(item) : item[col.key];
+      if (col.type === 'string') {
+        return val !== null && val !== '' && val !== '-';
+      } else {
+        const num = parseFloat(val);
+        return !isNaN(num); // 允许0值，仅排除非数字
+      }
+    });
+  });
+});
+
+// 排序功能
+const sortedData = computed(() => {
+  if (!sortKey.value) return filteredData.value;
+  
+  const sortCol = displayColumns.value.find(col => col.label === sortKey.value);
+  if (!sortCol) return filteredData.value;
+  
+  return [...filteredData.value].sort((a, b) => {
+    let valA = sortCol.getValue ? sortCol.getValue(a) : a[sortCol.key];
+    let valB = sortCol.getValue ? sortCol.getValue(b) : b[sortCol.key];
+    
+    if (sortCol.type === 'string') {
+      const strA = valA.toString().trim();
+      const strB = valB.toString().trim();
+      return sortOrder.value === 'asc' 
+        ? strA.localeCompare(strB) 
+        : strB.localeCompare(strA);
+    }
+    
+    const numA = parseFloat(valA) || -Infinity;
+    const numB = parseFloat(valB) || -Infinity;
+    if (numA < numB) return sortOrder.value === 'asc' ? -1 : 1;
+    if (numA > numB) return sortOrder.value === 'asc' ? 1 : -1;
+    return 0;
+  });
+});
+
+// 切换排序
+const sortData = (label) => {
+  const targetCol = displayColumns.value.find(col => col.label === label);
+  if (!targetCol) return;
+  
+  if (sortKey.value === label) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    sortKey.value = label;
+    sortOrder.value = 'asc';
+  }
+};
+
+// 截断原始响应（前1000字符）
+const truncatedRawResponse = computed(() => {
+  return rawResponse.value.length > 1000 
+    ? rawResponse.value.slice(0, 1000) + '...' 
+    : rawResponse.value;
+});
+
+// 柱状图数据（动态生成）
+const chartData = computed(() => {
+  const xData = filteredData.value.map(item => item.sample_name);
+  const yData = filteredData.value.map(item => {
+    if (props.calculationMethod === 'volume') {
+      const val = item['Cr ug/m³'];
+      return val !== '-' ? parseFloat(val) : 0;
+    } else {
+      const val = item.Cr_particulate;
+      return val !== '-' ? parseFloat(val) : 0;
+    }
+  });
+
+  return {
+    xAxis: { type: 'category', data: xData },
+    yAxis: { type: 'value' },
+    series: [{ name: 'Cr 浓度', type: 'bar', data: yData }],
+  };
+});
+
+// 初始化柱状图
+const initChart = () => {
+  nextTick(() => {
+    if (chartInstance.value) chartInstance.value.dispose();
+    chartInstance.value = echarts.init($refs.chart);
+    chartInstance.value.setOption(chartData.value);
+  });
+};
+
+// 监听数据变化，更新图表
+watch(filteredData, () => {
+  if (chartInstance.value) {
+    chartInstance.value.setOption(chartData.value);
+  }
+});
+
+// 数据请求 & 修复逻辑（含超时控制）
+const fetchData = async () => {
+  try {
+    loading.value = true;
+    error.value = '';
+    rawResponse.value = '';
+
+    // 超时控制（5秒）
+    const TIMEOUT = 5000;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), TIMEOUT);
+
+    const response = await fetch(apiUrl, { signal: controller.signal });
+    clearTimeout(timeoutId);
+
+    if (!response.ok) throw new Error(`HTTP 错误：${response.status}`);
+
+    let rawText = await response.text();
+    rawResponse.value = rawText;
+
+    // 修复 JSON 语法（替换 NaN/Infinity）
+    rawText = rawText
+      .replace(/:\s*NaN/g, ': null')
+      .replace(/:\s*Infinity/g, ': null');
+
+    let data;
+    try {
+      data = JSON.parse(rawText);
+    } catch (parseErr) {
+      error.value = `数据解析失败：${parseErr.message}\n原始响应：${rawText.slice(0, 200)}...`;
+      console.error(parseErr, rawText);
+      loading.value = false;
+      return;
+    }
+
+    // 兼容接口格式
+    let features = [];
+    if (data.type === 'FeatureCollection' && Array.isArray(data.features)) {
+      features = data.features;
+    } else if (Array.isArray(data)) {
+      features = data;
+    } else {
+      throw new Error('接口格式异常，需为 FeatureCollection 或数组');
+    }
+
+    // 提取数据（含经纬度）
+    waterData.value = features.map(feature => 
+      feature.properties ? feature.properties : feature
+    );
+
+    // 更新地图中心（取第一个点的经纬度，无数据则保持默认）
+    if (waterData.value.length > 0) {
+      mapCenter.value = [
+        waterData.value[0].latitude, 
+        waterData.value[0].longitude
+      ];
+    }
+
+    console.log('✅ 数据加载完成，记录数：', waterData.value.length);
+    initChart(); // 初始化图表
+
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      error.value = '请求超时！请检查网络或接口响应速度';
+    } else {
+      error.value = `数据加载失败：${err.message}`;
+    }
+    console.error(err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 组件挂载时加载数据
+onMounted(() => {
+  fetchData();
+});
+
+// 卸载时销毁图表
+onUnmounted(() => {
+  if (chartInstance.value) {
+    chartInstance.value.dispose();
+  }
+});
+</script>
+
+<style scoped>
+/* 错误提示样式 */
+.status.error {
+  color: #dc2626;
+  background: #fee2e2;
+  padding: 12px 16px;
+  border-radius: 6px;
+}
+.status.error button {
+  cursor: pointer;
+  background: #ff4d4f;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+.raw-response pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #f9fafb;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+/* 表格核心样式：固定布局 + 列宽生效 */
+table {
+  border-collapse: collapse;
+  table-layout: fixed; 
+  width: 100%;         
+}
+
+th, td {
+  border: 1px solid #d1d5db;
+  text-align: center;
+  padding: 10px 6px;   
+  min-width: 60px;     
+  white-space: normal; 
+  overflow: hidden;    
+  text-overflow: ellipsis; 
+}
+
+/* 地图 & 图表容器 */
+.leaflet-container {
+  width: 100%;
+  height: 100%;
+}
+.echarts-container {
+  width: 100%;
+  height: 100%;
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+  th, td {
+    padding: 8px 4px;
+    font-size: 14px;
+  }
+  .flex-col md:flex-row {
+    flex-direction: column;
+  }
+}
+</style>

src/views/User/HmOutFlux/atmosDeposition/atmCompanytencentMap.vue → src/components/atmpollution/atmCompanytencentMap.vue

@@ -41,7 +41,7 @@ const tMapConfig = reactive({
 const loadSDK = () => {
   return new Promise((resolve, reject) => {
     if (window.TMap?.service?.Geocoder) {
-      console.log('SDK已缓存，直接使用');
+      //console.log('SDK已缓存，直接使用');
       TMap.value = window.TMap
       return resolve(window.TMap)
     }
@@ -54,7 +54,7 @@ const loadSDK = () => {
         reject(new Error('地图SDK加载失败'))
         return
       }
-      console.log('SDK动态加载完毕');
+      //console.log('SDK动态加载完毕');
       TMap.value = window.TMap
       resolve(window.TMap)
     }
@@ -73,7 +73,7 @@ const loadSDK = () => {
 const initMap = async () => {
   try {
     await loadSDK()
-    console.log('开始创建地图实例');
+    //console.log('开始创建地图实例');
     
     map = new TMap.value.Map(mapContainer.value, {
       center: new TMap.value.LatLng(24.39, 114),//前大往下，后大往左
@@ -84,7 +84,7 @@ const initMap = async () => {
         antialias: true
       },
     })
-    console.log('地图实例创建成功');
+    //console.log('地图实例创建成功');
     
     // 创建标记点向量图层
     markersLayer = new TMap.value.MultiMarker({
@@ -96,7 +96,7 @@ const initMap = async () => {
           width: 30, // 图标宽度
           height: 30, // 图标高度
           anchor: { x: 12.5, y: 12.5 }, // 居中定位
-          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTcuMjdsNi4xOCAzLjYzLTEuNjQtNy4wMyA1LjM0LTQuNjMtNy4xOS0uNjFMMTIgM2wtMy4xOSA2LjYzLTcuMTkuNjFMMTAuNDYgMTMuODkgOC44MiAyMC45IDE4IDE3LjI3eiIgZmlsbD0iI0ZGMDAwMCIvPjwvc3ZnPg=='
+          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cG9seWdvbiBwb2ludHM9IjEyLDIgMiwyMCAyMiwyMCIgZmlsbD0iIzFFODhFNSIvPjwvc3ZnPg=='
         })
       }
     });
@@ -121,16 +121,16 @@ const initMap = async () => {
     await fetchData(); // 新增：获取数据
     if(state.excelData.length > 0) {
     const first = state.excelData[0];
-    console.log('第一条数据坐标:', 
-      first.纬度 || first.latitude, 
-      first.经度 || first.longitude
-    );
+   // console.log('第一条数据坐标:', 
+     // first.纬度 || first.latitude, 
+      //first.经度 || first.longitude
+    //);
   }
     updateMarkers();   // 更新标记点
     
     // 标记地图就绪
     isMapReady.value = true;
-    console.log('地图初始化完成');
+    //console.log('地图初始化完成');
 
     // 创建样式标签并注入样式
     const style = document.createElement('style');
@@ -175,7 +175,7 @@ const fetchData = async () => {
       return isValid;
     });
     
-    console.log('有效数据记录:', state.excelData.length);
+    //console.log('有效数据记录:', state.excelData.length);
   } catch (err) {
     console.error('数据请求失败详情:', err.response?.data || err.message);
     error.value = `数据加载失败: ${err.message}`;
@@ -186,7 +186,7 @@ const fetchData = async () => {
 // 更新标记点 - 保持不变
 const updateMarkers = () => {
   const geometries = state.excelData.map(item => {  
-  console.log(`ID: ${item.污染源序号}, 坐标: (${item.纬度}, ${item.经度})`); // 替换为新字段  
+  //console.log(`ID: ${item.污染源序号}, 坐标: (${item.纬度}, ${item.经度})`); // 替换为新字段  
   if (!item.污染源序号 || !item.纬度 || !item.经度) return null;  
   const lat = Number(item.纬度);
   const lng = Number(item.经度);  
@@ -204,12 +204,12 @@ const updateMarkers = () => {
   });
   
   markersLayer.setGeometries(geometries);
-  console.log('成功添加标记点数量:', geometries.length);
+  //console.log('成功添加标记点数量:', geometries.length);
 };
 
 // Marker点击事件处理 - 保持不变
 const handleMarkerClick = async (e) => {
-  console.log('点击标记点');
+  //console.log('点击标记点');
   
   const marker = e.geometry;
   if (!marker) {
@@ -235,7 +235,7 @@ const handleMarkerClick = async (e) => {
 
   try {
     const markerId = marker.id.trim();
-    console.log('点击标记点样品名称:', markerId);
+    //console.log('点击标记点样品名称:', markerId);
     
     // 直接从本地数据查找，无需二次请求
     const matchedData = state.excelData.find(item => 
@@ -307,7 +307,7 @@ const manageTempMarker = {
           width: 30,
           height: 30,
           anchor: { x: 12.5, y: 12.5 },
-          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkg2Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDEyYzEuMSAwIDIgLS45IDItMnYtNGMwLTEuMS0uOS0yLTItMmgtMnY0aC00di00SDEyVjJ6bTAgMTZINnYtOEgxOFYxOHoiIGZpbGw9IiNGRjAwMDAiLz48L3N2Zz4='
+          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cG9seWdvbiBwb2ludHM9IjEyLDIgMiwyMCAyMiwyMCIgZmlsbD0iIzFFODhFNSIvPjwvc3ZnPg=='
         })
       });
     }
@@ -333,11 +333,11 @@ const manageTempMarker = {
 }
 
 onMounted(async () => {
-  console.log('开始执行 onMounted');
+  //console.log('开始执行 onMounted');
   
   try {
     await initMap()
-    console.log('地图初始化完成');
+    //console.log('地图初始化完成');
   } catch (err) {
     console.error('onMounted执行异常', err);
     error.value = err.message

src/components/atmpollution/atmcompanyline.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="region-average-chart">
+    <!-- 错误提示 -->
+    <div v-if="error" class="status error">
+      <i class="fa fa-exclamation-circle"></i> {{ error }}
+      <div class="raw-response" v-if="rawResponse">
+        <button @click="showRaw = !showRaw">
+          {{ showRaw ? '收起原始响应' : '查看原始响应（前1000字符）' }}
+        </button>
+        <pre v-if="showRaw">{{ truncatedRawResponse }}</pre>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>数据加载中...</p>
+    </div>
+
+    <!-- 数据表格 -->
+    <div v-else class="table-container">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>污染源序号</th>
+            <th>公司名称</th>
+            <th>公司类型</th>
+            <th>所属区县</th>
+            <th>颗粒物排放(t/a)</th>
+            <th>经度</th>
+            <th>纬度</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in tableData" :key="item.id">
+            <td>{{ item.id }}</td>
+            <td>{{ item.company_name }}</td>
+            <td>{{ item.company_type }}</td>
+            <td>{{ item.county }}</td>
+            <td>{{ item.particulate_emission }}</td>
+            <td>{{ item.longitude.toFixed(6) }}</td>
+            <td>{{ item.latitude.toFixed(6) }}</td>
+          </tr>
+          <tr v-if="tableData.length === 0">
+            <td colspan="7" class="empty-state">暂无有效数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { wgs84togcj02 } from 'coordtransform'; // 经纬度转换（按需保留）
+
+// ========== 接口配置 ==========
+const apiUrl = 'http://localhost:8000/api/vector/export/all?table_name=atmo_company'; 
+
+// ========== 响应式数据 ==========
+const error = ref('');        // 错误信息
+const loading = ref(true);    // 加载状态
+const tableData = ref([]);    // 表格数据
+const rawResponse = ref('');  // 原始响应文本（调试用）
+const showRaw = ref(false);   // 是否展开原始响应
+
+// 截断原始响应（前1000字符）
+const truncatedRawResponse = computed(() => {
+  return rawResponse.value.length > 1000 
+    ? rawResponse.value.slice(0, 1000) + '...' 
+    : rawResponse.value;
+});
+
+// ========== 数据请求 & 修复逻辑 ==========
+const fetchData = async () => {
+  try {
+    loading.value = true;
+    error.value = '';
+    rawResponse.value = '';
+
+    // 1. 发起请求（获取原始文本）
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error(`HTTP 错误：${response.status}`);
+    }
+
+    // 2. 获取原始响应文本（关键：避免自动解析错误）
+    let rawText = await response.text();
+    rawResponse.value = rawText; // 保存原始响应
+
+    // 3. 暴力替换 NaN 为 null（核心修复！）
+    rawText = rawText.replace(/:\s*NaN/g, ': null'); 
+
+    // 4. 解析 JSON（若失败，报错含修复后内容）
+    const geoJSONData = JSON.parse(rawText);
+
+    // 5. 校验 GeoJSON 结构（兜底）
+    if (!geoJSONData.features || !Array.isArray(geoJSONData.features)) {
+      throw new Error('修复后仍无有效 features 数组');
+    }
+
+    // 6. 处理数据（转换经纬度 + 字段兜底）
+    tableData.value = geoJSONData.features
+      .map(feature => feature.properties || {}) // 兜底空 properties
+      .map(props => {
+        // 经纬度转换（按需调整，若不需要可移除）
+        const lng = Number(props.longitude);
+        const lat = Number(props.latitude);
+        if (isNaN(lng) || isNaN(lat)) {
+          console.warn('无效经纬度，跳过该数据：', props);
+          return null;
+        }
+        const [gcjLng, gcjLat] = wgs84togcj02(lng, lat); // 或直接用 lng/lat
+
+        return {
+          id: props.id || '未知',
+          company_name: props.company_name || '未知',
+          company_type: props.company_type || '未知',
+          county: props.county || '未知',
+          particulate_emission: props.particulate_emission !== undefined 
+            ? props.particulate_emission 
+            : '未知',
+          longitude: gcjLng,
+          latitude: gcjLat
+        };
+      })
+      .filter(item => item !== null); // 过滤无效项
+
+  } catch (err) {
+    error.value = `数据加载失败：${err.message}`;
+    console.error('详细错误：', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// ========== 生命周期 ==========
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped>
+.region-average-chart {
+  width: 100%;
+  margin: 20px 0;
+  padding: 10px;
+}
+
+/* 错误提示 */
+.status.error {
+  color: #dc2626;
+  border: 1px solid #dc2626;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+.status.error button {
+  padding: 2px 6px;
+  cursor: pointer;
+  margin-top: 5px;
+}
+.raw-response pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 12px;
+  margin: 5px 0;
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+
+/* 加载状态 */
+.loading-state {
+  padding: 20px 0;
+  text-align: center;
+}
+.spinner {
+  width: 30px;
+  height: 30px;
+  margin: 0 auto 10px;
+  border: 3px solid #e5e7eb;
+  border-top: 3px solid #333;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 最基础的表格样式 */
+.table-container {
+  overflow-x: auto;
+}
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #ccc;
+}
+.data-table th, .data-table td {
+  padding: 8px 10px;
+  text-align: center;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+.data-table th {
+  font-weight: bold;
+}
+/* 完全移除所有行的背景色和悬停效果 */
+.data-table tr {
+  background-color: transparent;
+}
+.data-table tr:hover {
+  background-color: transparent;
+}
+.empty-state {
+  padding: 20px 0;
+  color: #666;
+}
+</style>

src/components/atmpollution/atmcompanymap.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="map-wrapper">
+    <div ref="mapContainer" class="map-container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const mapContainer = ref(null);
+
+// 定义蓝色三角形标记
+const blueTriangle = L.divIcon({
+  className: 'custom-div-icon',
+  html: `<svg width="24" height="24" viewBox="0 0 24 24">
+          <path d="M12 2L2 22h20L12 2z" fill="#0066CC" stroke="#003366" stroke-width="2"/>
+        </svg>`,
+  iconSize: [24, 24],
+  iconAnchor: [12, 24]
+});
+
+onMounted(() => {
+  if (!mapContainer.value) {
+    console.error('❌ 地图容器未找到！');
+    return;
+  }
+
+  const map = L.map(mapContainer.value, {
+    center: [24.7, 114], // 韶关大致中心
+    zoom: 8.5,
+    minZoom: 8,
+  });
+
+
+  // 区县颜色映射（保持不变）
+  const districtColorMap = {
+    "武江区": "#FF6B6B",
+    "浈江区": "#4ECDC4",
+    "曲江区": "#FFD166",
+    "始兴县": "#A0DAA9",
+    "仁化县": "#6A0572",
+    "翁源县": "#1A535C",
+    "乳源瑶族自治县": "#FF9F1C",
+    "新丰县": "#87CEEB",
+    "乐昌市": "#118AB2",
+    "南雄市": "#06D6A0",
+    "韶关市": "#cccccc",
+  };
+
+  // 区县颜色匹配函数（保持不变）
+  function getDistrictColor(name) {
+    if (districtColorMap[name]) return districtColorMap[name];
+    const normalizedName = name.replace(/市|县|区|自治县/g, '');
+    for (const key in districtColorMap) {
+      if (key.includes(normalizedName) || normalizedName.includes(key.replace(/市|县|区|自治县/g, ''))) {
+        return districtColorMap[key];
+      }
+    }
+    return '#cccccc';
+  }
+
+  // 只加载乡镇级GeoJSON，并根据所属区县着色
+  fetch('/data/韶关市乡镇划分图.geojson')
+    .then(res => {
+      if (!res.ok) throw new Error(`乡镇划分图加载失败：${res.status}`);
+      return res.json();
+    })
+    .then(townshipGeojson => {
+      L.geoJSON(townshipGeojson, {
+        style: (feature) => {
+          // 关键：从乡镇数据中获取所属区县信息（假设属性字段为county）
+          // 请根据你的实际GeoJSON属性字段调整（可能是district、parent等）
+          const countyName = feature.properties.FXZQMC || '';
+          
+          return {
+            fillColor: getDistrictColor(countyName), // 使用所属区县的颜色
+            fillOpacity: 0.7,                       // 填充透明度
+            color: '#333333',                       // 边界线颜色
+            weight: 1,                              // 乡镇边界线粗细（比区县细一些）
+            lineJoin: 'round'                       // 线条拐角圆润
+          };
+        },
+        
+      }).addTo(map);
+      console.log('✅ 乡镇划分图加载完成，已按所属区县着色');
+    })
+    .catch(err => {
+      console.error('❌ 乡镇划分图加载失败：', err);
+      alert('乡镇划分图加载错误：' + err.message);
+    });
+
+  // 加载大气污染源数据（保持不变）
+  fetch('http://localhost:8000/api/vector/export/all?table_name=atmo_company')
+    .then(res => {
+      if (!res.ok) throw new Error(`接口请求失败：${res.status}`);
+      return res.text();
+    })
+    .then(text => {
+      const fixedText = text.replace(
+        /"particulate_emission":\s*NaN/g, 
+        '"particulate_emission": null'
+      );
+      const geoJSONData = JSON.parse(fixedText);
+      
+      console.log('✅ 接口数据加载完成，共', geoJSONData.features.length, '条记录');
+      
+      let markerCount = 0;
+      geoJSONData.features.forEach((feature, idx) => {
+        try {
+          const props = feature.properties;
+          
+          const lng = parseFloat(props.longitude);
+          const lat = parseFloat(props.latitude);
+          if (isNaN(lat) || isNaN(lng) || lat < 22.7 || lat > 25.5 || lng < 112.7 || lng > 115.3) {
+            console.warn(`❌ 无效坐标（第${idx}条）：`, lat, lng);
+            return;
+          }
+
+          const emission = props.particulate_emission !== null ? parseFloat(props.particulate_emission) : null;
+          const formattedEmission = emission === null || isNaN(emission)
+            ? '未知' 
+            : `${emission.toFixed(3)} t/a`;
+
+          const marker = L.marker([lat, lng], {
+            icon: blueTriangle,
+            zIndexOffset: 1000,
+          }).addTo(map);
+
+          marker.bindPopup(`
+            <div class="popup-container">
+              <h3 class="popup-title">${props.company_name || '未知'}</h3>
+              <div class="popup-divider"></div>
+              <p><strong>污染源序号:</strong> ${props.id || '未知'}</p>
+              <p><strong>企业类型:</strong> ${props.company_type || '未知'}</p>
+              <p><strong>所属区县:</strong> ${props.county || '未知'}</p>
+              <p><strong>大气颗粒物排放:</strong> ${formattedEmission}</p>
+            </div>
+          `);
+
+          markerCount++;
+        } catch (err) {
+          console.error(`❌ 处理第${idx}条数据失败：`, err);
+        }
+      });
+
+      console.log(`✅ 成功创建 ${markerCount} 个有效标记`);
+    })
+    .catch(err => {
+      console.error('❌ 接口数据加载失败：', err);
+      alert('数据加载错误：' + err.message);
+    });
+
+  map.on('load', () => {
+    setTimeout(() => {
+      map.invalidateSize();
+      console.log('✅ 地图尺寸已重新计算');
+    }, 300);
+  });
+
+  window.addEventListener('resize', () => {
+    map.invalidateSize();
+  });
+});
+</script>
+
+<style scoped>
+/* 样式保持不变 */
+.map-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.map-container {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* 弹窗样式 */
+::v-deep .popup-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0066CC;
+  margin: 0 0 6px;
+  border-bottom: none;
+  padding-bottom: 8px;
+}
+
+::v-deep .popup-divider {
+  height: 1px;
+  background: #0066CC;
+  margin: 8px 0;
+}
+
+::v-deep .popup-container {
+  min-width: 240px;
+  max-width: 300px;
+  padding: 16px;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+::v-deep .popup-container p {
+  margin: 6px 0;
+  font-size: 15px;
+  color: #666;
+  line-height: 1.6;
+}
+
+::v-deep .popup-container strong {
+  color: #0066CC;
+  font-weight: 600;
+}
+
+::v-deep .exceeding {
+  color: #FF3333;
+  font-weight: bold;
+}
+
+/* 美化弹窗 */
+::v-deep .leaflet-popup-content-wrapper {
+  padding: 0 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
+}
+
+::v-deep .leaflet-popup-content {
+  margin: 0 !important;
+  width: auto !important;
+}
+
+::v-deep .leaflet-popup-tip {
+  display: none;
+}
+
+/* 图例样式 */
+::v-deep .info {
+  padding: 6px 8px;
+  background: white;
+  background: rgba(255,255,255,0.9);
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+
+/* 自定义标记样式 */
+::v-deep .custom-div-icon svg {
+  transition: transform 0.2s;
+  display: block;
+}
+</style>

src/components/atmpollution/atmsamplemap.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="map-wrapper">
+    <div ref="mapContainer" class="map-container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'; 
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const props = defineProps({
+  calculationMethod: {
+    type: String,
+    required: true,
+    default: 'weight' 
+  }
+});
+
+const mapContainer = ref(null);
+const mapInstance = ref(null); 
+const markers = ref([]); 
+
+// ====================== 核心：重量→体积换算逻辑 ======================
+function calculateConcentration(heavyMetalWeight, volume) {
+  if (heavyMetalWeight === undefined || volume === undefined || isNaN(heavyMetalWeight) || isNaN(volume) || volume === 0) {
+    return '未知';
+  }
+  const ug = heavyMetalWeight * 1000; 
+  const concentration = ug / volume;
+  return concentration.toFixed(2); 
+}
+
+function calculateParticleConcentration(particleWeight, volume) {
+  if (particleWeight === undefined || volume === undefined || isNaN(particleWeight) || isNaN(volume) || volume === 0) {
+    return '未知';
+  }
+  const ug = particleWeight * 1000; 
+  const concentration = ug / volume;
+  return concentration.toFixed(2);
+}
+
+// ====================== 指标映射（重量直接取数，体积动态计算） ======================
+const metricsMap = {
+  weight: [ 
+    { label: 'Cr mg/kg', key: 'Cr_particulate' },
+    { label: 'As mg/kg', key: 'As_particulate' },
+    { label: 'Cd mg/kg', key: 'Cd_particulate' },
+    { label: 'Hg mg/kg', key: 'Hg_particulate' },
+    { label: 'Pb mg/kg', key: 'Pb_particulate' },
+    { label: '颗粒物重量 mg', key: 'particle_weight' }
+  ],
+  volume: [ 
+    { label: 'Cr ug/m³', getValue: (item) => calculateConcentration(item.Cr_particulate, item.standard_volume) },
+    { label: 'As ug/m³', getValue: (item) => calculateConcentration(item.As_particulate, item.standard_volume) },
+    { label: 'Cd ug/m³', getValue: (item) => calculateConcentration(item.Cd_particulate, item.standard_volume) },
+    { label: 'Hg ug/m³', getValue: (item) => calculateConcentration(item.Hg_particulate, item.standard_volume) },
+    { label: 'Pb ug/m³', getValue: (item) => calculateConcentration(item.Pb_particulate, item.standard_volume) },
+    { label: '颗粒物浓度 ug/m³', getValue: (item) => calculateParticleConcentration(item.particle_weight, item.standard_volume) },
+    { label: '标准体积 m³', key: 'standard_volume' },
+  ]
+};
+
+// ====================== 工具函数 ======================
+function formatValue(value) {
+  if (value === undefined || value === null || value === '' || isNaN(value)) {
+    return '未知';
+  }
+  return parseFloat(value);
+}
+
+function formatLocation(fullLocation) {
+  if (!fullLocation) return '未知位置';
+  const processed = fullLocation.replace(/^广东省韶关市/, '').trim().replace(/^韶关市/, '');
+  return processed || '未知位置';
+}
+
+function generatePopupContent(item, method) {
+  const metrics = metricsMap[method]; 
+  const metricsHtml = metrics.map(metric => {
+    let value;
+    if (method === 'weight') {
+      value = formatValue(item[metric.key]);
+    } else {
+      value = metric.getValue ? metric.getValue(item) : formatValue(item[metric.key]);
+    }
+    return `
+      <div class="data-item">
+        <span class="item-label">${metric.label}:</span>
+        <span class="item-value">${value}</span>
+      </div>
+    `;
+  }).join('');
+
+  return `
+    <div class="popup-container">
+      <div class="popup-header">
+        <h3 class="popup-title">${formatLocation(item.sampling_location || '未知采样点')}</h3>
+      </div>
+      <ul class="popup-info-list">
+        <li>
+          <span class="info-label">采样点ID:</span>
+          <span class="info-value">${item.ID || item.sample_code || '未知'}</span>
+        </li>
+        <li>
+          <span class="info-label">样品名称:</span>
+          <span class="info-value">${item.sample_name || '未知'}</span>
+        </li>
+      </ul>
+      <div class="grid-container">
+        <div class="grid-item">${metricsHtml}</div>
+      </div>
+    </div>
+  `;
+}
+
+// ====================== 区县名称归一化（处理后缀差异） ======================
+function normalizeDistrictName(name) {
+  if (!name) return '';
+  return name.replace(/市|县|区|自治县/g, ''); // 移除行政后缀
+}
+
+onMounted(() => {
+  if (!mapContainer.value) {
+    console.error('❌ 地图容器未找到！');
+    return;
+  }
+
+  const map = L.map(mapContainer.value, {
+    center: [24.7, 114], 
+    zoom: 8.5,
+    minZoom: 8.3,
+  });
+  mapInstance.value = map;
+
+  // 区县颜色映射（键名与GeoJSON的FXZQMC精确匹配，或归一化后匹配）
+  const districtColorMap = {
+    "武江区": "#FF6B6B",
+    "浈江区": "#4ECDC4",
+    "曲江区": "#FFD166",
+    "始兴县": "#A0DAA9",
+    "仁化县": "#6A0572",
+    "翁源县": "#1A535C",
+    "乳源瑶族自治县": "#FF9F1C", // 支持精确匹配
+    "新丰县": "#87CEEB",
+    "乐昌市": "#118AB2",
+    "南雄市": "#06D6A0",
+    "乳源": "#FF9F1C" // 可选：支持归一化后匹配（如GeoJSON是“乳源”时）
+  };
+
+  // 加载区县边界（关键修改：匹配FXZQMC字段 + 归一化）
+  fetch('/data/韶关市乡镇划分图.geojson')
+    .then(res => {
+      if (!res.ok) throw new Error(`区县边界加载失败：${res.status}`);
+      return res.json();
+    })
+    .then(geojson => {
+      console.log('✅ 区县边界数据加载完成，要素数：', geojson.features.length);
+      
+      L.geoJSON(geojson, {
+        style: (feature) => {
+          const rawDistrictName = feature.properties.FXZQMC || ''; // 从FXZQMC提取
+          const normalizedName = normalizeDistrictName(rawDistrictName);
+          
+          // 优先精确匹配，再归一化匹配
+          const color = districtColorMap[rawDistrictName] || 
+                        districtColorMap[normalizedName] || 
+                        '#cccccc';
+          
+          return {
+            fillColor: color,
+            fillOpacity: 0.7,
+            color: '#333333',
+            weight: 2,
+          };
+        },
+      }).addTo(map);
+
+      // 加载大气数据（修复 JSON 非法值 + 换算逻辑）
+      fetch('http://localhost:8000/api/vector/export/all?table_name=Atmo_sample_data')
+        .then(res => {
+          if (!res.ok) throw new Error(`大气数据加载失败：${res.status}`);
+          return res.text(); // 先取文本，清洗 NaN
+        })
+        .then(text => {
+          const validJsonText = text.replace(/NaN/g, 'null');
+          try {
+            return JSON.parse(validJsonText);
+          } catch (err) {
+            console.error('❌ JSON 解析失败（原始数据含非法值）：', err);
+            throw new Error('数据格式错误，请检查服务端返回');
+          }
+        })
+        .then(geojsonData => {
+          const atmosphereData = geojsonData.features.map(feature => feature.properties);
+          console.log('✅ 大气数据加载完成，记录数：', atmosphereData.length);
+          markers.value = []; 
+          
+          atmosphereData.forEach((item, idx) => {
+            try {
+              // 提取经纬度（兼容 properties 和 geometry）
+              let lat = item.latitude;
+              let lng = item.longitude;
+
+              if (lat === undefined || lng === undefined) {
+                if (item.geometry && item.geometry.type === 'Point' && item.geometry.coordinates.length === 2) {
+                  lng = item.geometry.coordinates[0]; 
+                  lat = item.geometry.coordinates[1];
+                } else {
+                  console.error(`❌ 未找到经纬度字段（第${idx}条）`);
+                  return;
+                }
+              }
+
+              const cleanLat = String(lat).replace(/[^\d.-]/g, '');
+              const cleanLng = String(lng).replace(/[^\d.-]/g, '');
+              
+              lat = parseFloat(parseFloat(cleanLat).toFixed(6));
+              lng = parseFloat(parseFloat(cleanLng).toFixed(6));
+              
+              const marker = L.circleMarker([lat, lng], {
+                radius: 3.5,
+                color: '#FF3333',
+                fillColor: '#FF3333',
+                fillOpacity: 0.9,
+                weight: 1.5,
+                zIndexOffset: 1000,
+              }).addTo(map);
+
+              marker.bindPopup(generatePopupContent(item, props.calculationMethod));
+              markers.value.push({ marker, item });
+            } catch (err) {
+              console.error(`❌ 处理大气数据失败（第${idx}条）：`, err);
+            }
+          });
+        })
+        .catch(err => {
+          console.error('❌ 大气数据加载失败：', err);
+          alert('大气数据接口错误：' + err.message);
+        });
+    })
+    .catch(err => {
+      console.error('❌ 区县边界加载失败：', err);
+      alert('区县边界加载错误：' + err.message);
+    });
+});
+
+// 监听计算方式变化，更新弹窗
+watch(
+  () => props.calculationMethod,
+  (newMethod) => {
+    markers.value.forEach(({ marker, item }) => {
+      marker.bindPopup(generatePopupContent(item, newMethod));
+    });
+    console.log(`✅ 已切换为${newMethod === 'weight' ? '重量' : '体积'}计算方式，弹窗内容已更新`);
+  }
+);
+</script>
+
+<style scoped>
+.map-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.map-container {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+::v-deep .leaflet-popup-content-wrapper {
+  padding: 0 !important;
+  border-radius: 10px !important;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+}
+
+::v-deep .leaflet-popup-content {
+  margin: 0 !important;
+  width: auto !important;
+  max-width: 300px; 
+}
+
+::v-deep .popup-container {
+  min-width: 280px;
+  padding: 12px;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+::v-deep .popup-header {
+  margin-bottom: 10px;
+}
+
+::v-deep .popup-title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0066CC;
+  margin: 0 0 5px;
+  padding-bottom: 6px;
+  border-bottom: 1.5px solid #0066CC;
+}
+
+::v-deep .popup-info-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+::v-deep .popup-info-list li {
+  display: flex;
+  margin: 0;
+  padding: 3px 6px;
+  background: #f9f9f9;
+  border-radius: 3px;
+}
+
+::v-deep .info-label {
+  flex: 0 0 85px;
+  font-weight: 600;
+  color: #333;
+  font-size: 13px;
+}
+
+::v-deep .info-value {
+  flex: 1;
+  color: #666;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+::v-deep .grid-container {
+  display: grid;
+  grid-template-columns: 1fr; 
+  gap: 6px;
+}
+
+::v-deep .grid-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+::v-deep .data-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: #f9f9f9;
+  border-radius: 3px;
+}
+
+::v-deep .item-label {
+  font-weight: 600;
+  color: #555;
+  font-size: 13px;
+}
+
+::v-deep .item-value {
+  color: #000;
+  font-size: 13px;
+}
+
+::v-deep .leaflet-popup-tip {
+  display: none;
+}
+
+::v-deep .leaflet-circle-marker {
+  stroke-width: 1.5px !important;
+}
+
+::v-deep .leaflet-marker-pane .leaflet-circle-marker[fill="#118AB2"]:hover {
+  fill-opacity: 1 !important;
+  stroke-width: 2.5px !important;
+}
+</style>

src/components/atmpollution/heavyMetalEnterprisechart.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="heavy-metal-chart">
+    <!-- 错误提示（带原始响应预览） -->
+    <div v-if="error" class="status error">
+      <i class="fa fa-exclamation-circle"></i> {{ error }}
+      <div class="raw-response" v-if="rawResponse">
+        <button @click="showRaw = !showRaw" class="raw-btn">
+          {{ showRaw ? '收起原始响应' : '查看原始响应（前1000字符）' }}
+        </button>
+        <pre v-if="showRaw" class="raw-pre">{{ truncatedRawResponse }}</pre>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>数据加载中...</p>
+    </div>
+
+    <!-- 图表容器（使用v-show确保DOM始终存在） -->
+    <div 
+      v-show="!loading && !error" 
+      ref="chartRef" 
+      class="chart-box"
+      :style="{ 
+        height: '500px', 
+        border: '2px solid #1890ff', 
+        position: 'relative' 
+      }"
+    >
+      <!-- 容器状态可视化提示（调试用） -->
+      <div class="container-status" v-if="debugMode">
+        容器状态: {{ containerStatus }}
+        <br>
+        高度: {{ containerHeight }}px
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, onUnmounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import axios from 'axios';
+
+// ========== 核心配置 ==========
+const API_URL = 'http://localhost:8000/api/vector/export/all?table_name=atmo_company'; 
+const SG_REGIONS = [
+  '浈江区', '武江区', '曲江区', '乐昌市', 
+  '南雄市', '始兴县', '仁化县', '翁源县', 
+  '新丰县', '乳源县'
+];
+const EXCLUDE_FIELDS = [
+  'id', 'company_name', 'company_type', 'longitude', 'latitude'
+];
+const debugMode = true; // 调试模式：显示容器状态
+
+// ========== 响应式数据 ==========
+const chartRef = ref(null);
+const error = ref('');
+const loading = ref(true);
+const rawResponse = ref('');
+const showRaw = ref(false);
+const containerStatus = ref('未初始化');
+const containerHeight = ref(0);
+let myChart = null;
+
+// 截断原始响应
+const truncatedRawResponse = computed(() => {
+  return rawResponse.value.length > 1000 
+    ? rawResponse.value.slice(0, 1000) + '...' 
+    : rawResponse.value;
+});
+
+// ========== 容器状态检查（实时更新） ==========
+const checkContainer = () => {
+  if (!chartRef.value) {
+    containerStatus.value = '未找到容器元素';
+    containerHeight.value = 0;
+    return false;
+  }
+  
+  containerStatus.value = '已找到容器元素';
+  containerHeight.value = chartRef.value.offsetHeight;
+  return true;
+};
+
+// ========== 数据处理逻辑 ==========
+const processData = (features) => {
+  console.log('🔍 开始处理数据，features数量：', features.length);
+  
+  // 提取有效properties
+  const apiData = features
+    .map(feature => feature.properties || {})
+    .filter(props => Object.keys(props).length > 0);
+  console.log('🔍 有效properties数量：', apiData.length);
+
+  if (apiData.length === 0) {
+    throw new Error('无有效数据（properties为空）');
+  }
+
+  // 识别污染物字段
+  const pollutantFields = Object.keys(apiData[0])
+    .filter(key => 
+      !EXCLUDE_FIELDS.includes(key) &&  
+      !isNaN(parseFloat(apiData[0][key]))  
+    );
+  console.log('🔍 识别的污染物字段：', pollutantFields);
+
+  if (pollutantFields.length === 0) {
+    throw new Error('未识别到有效污染物字段，请检查EXCLUDE_FIELDS');
+  }
+
+  // 按区县统计
+  const regionStats = {};
+  const globalStats = {};
+  let totalSamples = 0;
+
+  pollutantFields.forEach(field => {
+    globalStats[field] = { sum: 0, count: 0 };
+  });
+
+  apiData.forEach(item => {
+    const county = item.county || '未知区县';
+    totalSamples++;
+
+    if (!regionStats[county]) {
+      regionStats[county] = {};
+      pollutantFields.forEach(field => {
+        regionStats[county][field] = { sum: 0, count: 0 };
+      });
+    }
+
+    pollutantFields.forEach(field => {
+      const value = parseFloat(item[field]);
+      if (!isNaN(value)) {
+        regionStats[county][field].sum += value;
+        regionStats[county][field].count++;
+        globalStats[field].sum += value;
+        globalStats[field].count++;
+      }
+    });
+  });
+  console.log('🔍 区县统计结果：', regionStats);
+
+  // 构建有效区县
+  const validRegions = SG_REGIONS.filter(region => regionStats[region])
+    .concat('全市平均');
+  console.log('🔍 有效区县列表：', validRegions);
+
+  // 构建图表数据
+  const series = pollutantFields.map((field, index) => ({
+    name: field,
+    type: 'bar',
+    data: validRegions.map(region => {
+      if (region === '全市平均') {
+        return globalStats[field].count 
+          ? (globalStats[field].sum / globalStats[field].count).toFixed(4) 
+          : 0;
+      }
+      return regionStats[region][field].count 
+        ? (regionStats[region][field].sum / regionStats[region][field].count).toFixed(4) 
+        : 0;
+    }),
+    itemStyle: { 
+  // 当x轴类目是“全市平均”时，柱子显示红色
+  color: (params) => {
+    // params.dataIndex 对应 regions 数组的索引，最后一个是“全市平均”
+    const isTotal = validRegions[params.dataIndex] === '全市平均';
+    return isTotal ? '#ff0000' : '#1890ff'; // 红色可用 #ff0000 或其他红色值
+  }
+},
+    label: { show: true, position: 'top', fontSize: 15 }
+  }));
+
+  return { regions: validRegions, series, totalSamples };
+};
+
+// ========== ECharts初始化 ==========
+const initChart = (data) => {
+  // 检查容器状态
+  if (!checkContainer()) {
+    error.value = '图表容器未准备好，请刷新页面重试';
+    return;
+  }
+
+  // 检查容器高度
+  if (containerHeight.value < 100) {
+    error.value = `容器高度异常（${containerHeight.value}px），请检查样式`;
+    return;
+  }
+
+  // 销毁旧实例
+  if (myChart && !myChart.isDisposed()) {
+    myChart.dispose();
+  }
+
+  // 空数据检查
+  if (data.series.length === 0 || data.regions.length === 0) {
+    error.value = '无有效数据用于绘制图表';
+    return;
+  }
+
+  // 初始化图表
+  try {
+    myChart = echarts.init(chartRef.value);
+    myChart.setOption({
+      title: {
+        text: '韶关市各区县企业污染物平均值',
+        left: 'center',
+        subtext: `基于 ${data.totalSamples} 个有效样本`,
+        subtextStyle: { fontSize: 15 }
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: (params) => {
+          let content = `${params[0].name}：<br>`;
+          params.forEach(p => {
+            content += `${p.seriesName}: ${p.value} t/a<br>`;
+          });
+          return content;
+        },
+        axisLabel:{fontSize:15}
+      },
+      xAxis: {
+        type: 'category',
+        data: data.regions,
+        axisLabel: { rotate: 30, fontSize: 15 }
+      },
+      yAxis: {
+        type: 'value',
+        name: '浓度 (t/a)',
+        nameTextStyle: { fontSize: 15 },
+        axisLabel:{fontSize:15},
+      },
+      
+      series: data.series,
+      grid: { left: '5%', right: '5%', bottom: '20%', containLabel: true }
+    });
+    console.log('✅ 图表初始化成功');
+  } catch (err) {
+    error.value = `图表初始化失败：${err.message}`;
+    console.error('图表初始化错误：', err);
+  }
+};
+
+// ========== 数据请求逻辑 ==========
+const fetchData = async () => {
+  try {
+    loading.value = true;
+    error.value = '';
+    console.log('🚀 开始请求数据：', API_URL);
+
+    // 发起请求（延长超时）
+    const response = await axios.get(API_URL, {
+      timeout: 20000, // 20秒超时
+      responseType: 'text'
+    });
+    rawResponse.value = response.data;
+    console.log('✅ 数据请求成功，状态码：', response.status);
+
+    // 修复NaN并解析
+    const fixedJson = response.data.replace(/:\s*NaN/g, ': null');
+    const geoJSONData = JSON.parse(fixedJson);
+
+    // 校验数据结构
+    if (!geoJSONData.features || !Array.isArray(geoJSONData.features)) {
+      throw new Error('响应数据缺少features数组');
+    }
+
+    // 处理数据
+    const chartData = processData(geoJSONData.features);
+    console.log('✅ 数据处理完成，准备渲染图表');
+
+    // 等待DOM更新（双重保险）
+    await nextTick();
+    console.log('🔄 DOM更新完成，检查容器：', chartRef.value);
+
+    // 强制延迟确保容器准备好（极端情况处理）
+    setTimeout(() => {
+      initChart(chartData);
+    }, 300);
+
+  } catch (err) {
+    error.value = `数据加载失败：${err.message}`;
+    console.error('❌ 数据请求错误：', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// ========== 生命周期 ==========
+onMounted(() => {
+  // 初始检查容器
+  checkContainer();
+  // 开始加载数据
+  fetchData();
+});
+
+// ========== 响应式布局 ==========
+const handleResize = () => {
+  if (myChart) {
+    myChart.resize();
+    console.log('🔄 图表已重绘');
+  }
+};
+onMounted(() => window.addEventListener('resize', handleResize));
+onUnmounted(() => window.removeEventListener('resize', handleResize));
+</script>
+
+<style scoped>
+.heavy-metal-chart {
+  width: 90%;
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  position: relative;
+}
+
+/* 错误提示 */
+.status.error {
+  color: #dc2626;
+  background: #fee2e2;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+.raw-btn {
+  margin: 8px 0;
+  padding: 4px 8px;
+  background: #ff4d4f;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+}
+.raw-pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #f9fafb;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 18px;
+  max-height: 200px;
+  overflow: auto;
+}
+
+/* 加载状态 */
+.loading-state {
+  text-align: center;
+  padding: 60px 0;
+  color: #6b7280;
+}
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 4px solid #e5e7eb;
+  border-top: 4px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 图表容器 */
+.chart-box {
+  width: 100%;
+  min-height: 500px !important; /* 强制最小高度 */
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 容器状态提示 */
+.container-status {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: rgba(255,255,255,0.8);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #1890ff;
+  z-index: 10;
+}
+</style>

src/components/irrpollution/crossSectionSamplelineData.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="map-page">
+    <!-- 错误提示 -->
+    <div v-if="error" class="error-message">
+      <i class="fa fa-exclamation-circle"></i> {{ error }}
+    </div>
+    
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>数据加载中...</p>
+    </div>
+
+    <!-- 数据表格容器 -->
+    <div v-else class="table-container">
+      <table class="data-table">
+        <!-- 表头 -->
+        <thead>
+          <tr>
+            <th>断面编号</th>
+            <th>所属河流</th>
+            <th>断面位置</th>
+            <th>所属区县</th>
+            <th>Cd含量(ug/L)</th>
+            <th>经度</th>
+            <th>纬度</th>
+          </tr>
+        </thead>
+        <!-- 表体（遍历数据） -->
+        <tbody>
+          <tr v-for="item in state.excelData" :key="item.id">
+            <td>{{ item.id }}</td>
+            <td>{{ item.river }}</td>
+            <td>{{ item.location }}</td>
+            <td>{{ item.district }}</td>
+            <td>{{ item.cdValue }}</td>
+            <td>{{ item.longitude.toFixed(6) }}</td> <!-- 保留6位小数 -->
+            <td>{{ item.latitude.toFixed(6) }}</td>
+          </tr>
+          <!-- 空数据提示 -->
+          <tr v-if="state.excelData.length === 0">
+            <td colspan="7" class="empty-state">暂无数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { wgs84togcj02 } from 'coordtransform';
+
+// 状态管理
+const error = ref(null)
+const loading = ref(true)
+const state = reactive({
+  excelData: [], // 存储解析后的断面数据
+  riverAvgData: [] // 存储按河流分组后的平均数据
+})
+
+// 从接口获取数据并处理
+const fetchData = async () => {
+  try {
+    // 接口地址
+    const apiUrl = 'http://localhost:8000/api/vector/export/all?table_name=cross_section'
+    
+    // 发起请求
+    const response = await fetch(apiUrl)
+    if (!response.ok) {
+      throw new Error(`接口请求失败: ${response.status}`)
+    }
+    
+    // 解析GeoJSON数据
+    const geoJsonData = await response.json()
+    
+    // 处理数据
+    state.excelData = geoJsonData.features
+      .map(feature => {
+        const props = feature.properties
+        // 转换经纬度
+        const lng = Number(props.longitude)
+        const lat = Number(props.latitude)
+        
+        if (isNaN(lat) || isNaN(lng)) {
+          console.error('无效经纬度数据:', props)
+          return null
+        }
+        
+        // WGS84转GCJ02坐标
+        const [gcjLng, gcjLat] = wgs84togcj02(lng, lat)
+        
+        return {
+          id: props.id,
+          river: props.river_name || '未知河流',
+          location: props.position || '未知位置',
+          district: props.county || '未知区县',
+          cdValue: props.cd_concentration !== undefined ? props.cd_concentration : '未知',
+          latitude: gcjLat,
+          longitude: gcjLng
+        }
+      })
+      .filter(item => item !== null) // 过滤无效数据
+      
+  } catch (err) {
+    error.value = `数据加载失败: ${err.message}`
+    console.error('数据处理错误:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 生命周期
+onMounted(async () => {
+  await fetchData()
+})
+
+</script>
+
+<style scoped>
+.map-page {
+  width: 100%;
+  margin: 0 auto 24px;
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 错误提示样式 */
+.error-message {
+  color: #dc2626;
+  background-color: #fee2e2;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+}
+
+.error-message i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+/* 加载状态样式 */
+.loading-state {
+  text-align: center;
+  padding: 40px 0;
+  color: #6b7280;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 4px solid #e5e7eb;
+  border-top: 4px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 800px;
+}
+
+.data-table th, .data-table td {
+  padding: 12px 15px;
+  text-align: center;
+  border: 1px solid #e5e7eb;
+}
+
+.data-table th {
+  background-color: #f3f4f6;
+  font-weight: bold;
+  color: #1f2937;
+}
+
+.data-table tr:nth-child(even) {
+  background-color: #f9fafb;
+}
+
+.data-table tr:hover {
+  background-color: #f3f4f6;
+}
+
+/* 空数据状态 */
+.empty-state {
+  padding: 40px 0;
+  color: #6b7280;
+  font-style: italic;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .map-page {
+    width: 96%;
+  }
+  
+  .table-container {
+    overflow-x: auto;
+  }
+}
+</style>

src/components/irrpollution/crossSetionData1.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="chart-page">
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-indicator">
+      <div class="spinner"></div>
+      <p>数据加载中...</p>
+    </div>
+    
+    <!-- 错误提示 -->
+    <div v-else-if="error" class="error-message">
+      <i class="fa fa-exclamation-circle"></i> {{ error }}
+    </div>
+    
+    <!-- 图表容器 -->
+    <div v-else ref="chartContainer" class="chart-container"></div>
+  </div>
+</template>
+<!--按河流划分计算的柱状图-->
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { wgs84togcj02 } from 'coordtransform';
+import * as echarts from 'echarts'
+
+// 状态管理
+const error = ref(null)
+const loading = ref(true)  // 新增加载状态
+const chartContainer = ref(null)
+let chart = null
+
+const state = reactive({
+  excelData: [],        // 存储解析后的断面数据
+  riverAvgData: []      // 存储按河流分组后的平均数据
+})
+
+// 从接口获取数据并初始化
+const initData = async () => {
+  try {
+    // 接口地址
+    const apiUrl = 'http://localhost:8000/api/vector/export/all?table_name=cross_section'
+    
+    // 发起接口请求
+    const response = await fetch(apiUrl)
+    if (!response.ok) {
+      throw new Error(`接口请求失败：HTTP ${response.status}`)
+    }
+    
+    // 解析GeoJSON数据
+    const geoJsonData = await response.json()
+    
+    // 处理每个Feature的properties
+    state.excelData = geoJsonData.features
+      .map(feature => {
+        const props = feature.properties
+        
+        // 处理经纬度（保持原有坐标转换逻辑）
+        const lng = Number(props.longitude)
+        const lat = Number(props.latitude)
+        
+        if (isNaN(lat) || isNaN(lng)) {
+          console.error('无效经纬度数据：', props)
+          return null
+        }
+        
+        // WGS84转GCJ02坐标
+        const [gcjLng, gcjLat] = wgs84togcj02(lng, lat)
+        
+        return {
+          id: props.id,
+          river: props.river_name || '未知河流',
+          location: props.position || '未知位置',
+          district: props.county || '未知区县',
+          cdValue: props.cd_concentration !== undefined ? props.cd_concentration : '未知',
+          latitude: gcjLat,
+          longitude: gcjLng
+        }
+      })
+      .filter(item => item !== null) // 过滤无效数据
+    
+    // 计算河流平均值
+    calculateRiverAvg()
+    
+  } catch (err) {
+    error.value = `数据加载失败：${err.message}`
+    console.error('数据处理错误：', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 按河流分组计算平均值
+const calculateRiverAvg = () => {
+  const riverGroups = {};
+
+  // 分组统计
+  state.excelData.forEach(item => {
+    if (!riverGroups[item.river]) {
+      riverGroups[item.river] = { total: 0, count: 0 }
+    }
+    riverGroups[item.river].total += item.cdValue
+    riverGroups[item.river].count += 1
+  });
+
+  // 计算各组平均值
+  const riverAvg = [];
+  let totalAll = 0;
+  let countAll = 0;
+
+  for (const river in riverGroups) {
+    const avg = riverGroups[river].total / riverGroups[river].count;
+    riverAvg.push({
+      river,
+      avg: parseFloat(avg) // 保留3位小数
+    });
+    totalAll += riverGroups[river].total;
+    countAll += riverGroups[river].count;
+  }
+
+  // 添加总平均值
+  const totalAvg = {
+    river: '总河流平均',
+    avg: parseFloat((totalAll / countAll))
+  };
+  riverAvg.push(totalAvg);
+
+  state.riverAvgData = riverAvg;
+  updateChart(); // 更新图表
+}
+
+// 初始化ECharts实例
+const initChart = () => {
+  if (chartContainer.value) {
+    chart = echarts.init(chartContainer.value)
+    updateChart()
+  }
+}
+
+// 更新图表数据
+const updateChart = () => {
+  if (!chart || state.riverAvgData.length === 0) return;
+
+  // 处理图表数据
+  const rivers = state.riverAvgData.map(item => item.river)
+  const avgs = state.riverAvgData.map(item => item.avg)
+
+  // ECharts配置项
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: '{a} <br/>{b}: {c} ug/L'
+    },
+    grid: {
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: rivers,
+      axisLabel: { interval: 0, fontSize: 15 }
+    },
+    yAxis: {
+      type: 'value',
+      name: 'Cd浓度 (ug/L)',
+      min: 0,
+      nameTextStyle: { fontSize: 15},
+      axisLabel: { formatter: '{value}', fontSize: 15 }
+    },
+    series: [{
+      name: '平均镉浓度',
+      type: 'bar',
+      data: avgs,
+      itemStyle: {
+        color: (params) => 
+          params.dataIndex === rivers.length - 1 ? '#FF4500' : '#1E88E5'
+      },
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}',
+        fontSize: 15
+      },
+      emphasis: { focus: 'series' }
+    }]
+  };
+
+  chart.setOption(option)
+}
+
+// 生命周期钩子
+onMounted(async () => {
+  await initData()   // 先加载数据
+  initChart()        // 再初始化图表
+  
+  // 监听窗口变化
+  window.addEventListener('resize', () => {
+    if (chart) chart.resize()
+  })
+})
+
+onBeforeUnmount(() => {
+  if (chart) chart.dispose() // 销毁图表实例
+})
+</script>
+
+<style scoped>
+.chart-page {
+  width: 100%;
+  margin: 0 auto 24px;
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.chart-container {
+  width: 100%; 
+  height: 400px;
+  margin: 0 auto;
+  border-radius: 12px;
+}
+
+/* 加载状态样式 */
+.loading-indicator {
+  text-align: center;
+  padding: 40px 0;
+  color: #6b7280;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 4px solid #e5e7eb;
+  border-top: 4px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 错误提示样式 */
+.error-message {
+  color: #dc2626;
+  background-color: #fee2e2;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+}
+
+.error-message i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+</style>

src/components/irrpollution/crossSetionData2.vue

@@ -0,0 +1,212 @@
+<template>
+  <!-- 柱状图容器 -->
+  <div class="chart-page">
+    <div ref="chartContainer" class="chart-container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import * as echarts from 'echarts'
+
+// 状态管理
+const chartContainer = ref(null)
+let chart = null
+const state = reactive({
+  excelData: [], // 存储解析后的断面数据
+  districtAvgData: [] // 存储按区县分组后的平均数据
+})
+
+// 从接口初始化数据（核心修改：异步获取 + 严格数据解析）
+const initData = async () => {
+  try {
+    // 接口地址（注意修正空格：localhost）
+    const apiUrl = 'http://localhost:8000/api/vector/export/all?table_name=cross_section'
+    const response = await fetch(apiUrl)
+    
+    if (!response.ok) {
+      throw new Error(`接口请求失败（状态码：${response.status}）`)
+    }
+    
+    const geoJson = await response.json()
+    
+    // 逐行解析Feature，确保每个样本都被处理
+    state.excelData = geoJson.features.map(feature => {
+      const props = feature.properties || {}
+      
+      // 强制转换Cd浓度为数值（处理异常值）
+      let cdValue = parseFloat(props.cd_concentration)
+      if (isNaN(cdValue)) {
+        console.warn('发现无效Cd浓度值，已设为0:', props)
+        cdValue = 0 // 保证参与计算，避免数据缺失
+      }
+      
+      return {
+        id: props.id || '未知ID',       // 兜底处理
+        river: props.river_name || '未知河流',
+        district: props.county || '未知区县',
+        cdValue: cdValue
+      }
+    })
+    
+    calculateDistrictAvg() // 计算区县平均值
+  } catch (err) {
+    console.error('数据加载失败:', err)
+    // 可扩展：全局错误提示
+  }
+}
+
+// 按区县计算平均浓度（核心逻辑保持不变）
+const calculateDistrictAvg = () => {
+  const districtGroups = {};
+  
+  // 1. 分组统计（总和 + 数量）
+  state.excelData.forEach(item => {
+    const district = item.district;
+    if (!districtGroups[district]) {
+      districtGroups[district] = { total: 0, count: 0 };
+    }
+    districtGroups[district].total += item.cdValue;
+    districtGroups[district].count += 1;
+  });
+
+  // 2. 计算平均值 + 总平均
+  const districtAvg = [];
+  let totalAll = 0;
+  let countAll = 0;
+
+  for (const district in districtGroups) {
+    const avg = districtGroups[district].total / districtGroups[district].count;
+    districtAvg.push({
+      district,
+      avg: parseFloat(avg) // 保留3位小数
+    });
+    totalAll += districtGroups[district].total;
+    countAll += districtGroups[district].count;
+  }
+
+  // 添加总平均值（最后一项）
+  districtAvg.push({
+    district: '总平均',
+    avg: parseFloat((totalAll / countAll))
+  });
+
+  state.districtAvgData = districtAvg;
+  updateChart(); // 更新图表
+}
+
+// 初始化图表
+const initChart = () => {
+  if (chartContainer.value) {
+    chart = echarts.init(chartContainer.value);
+    updateChart();
+  }
+}
+
+// 更新图表数据
+const updateChart = () => {
+  if (!chart || state.districtAvgData.length === 0) return;
+
+  // 准备图表数据
+  const districts = state.districtAvgData.map(item => item.district); // x轴：区县名
+  const avgs = state.districtAvgData.map(item => item.avg); // y轴：平均浓度
+
+  // 图表配置
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: '{b}: {c} μg/L' // 悬停提示：区县名 + 浓度值
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '15%', // 底部留空间，防止区县名重叠
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: districts,
+      axisLabel: {
+        interval: 0,
+        fontSize: 15
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: 'Cd浓度 (μg/L)',
+      min: 0, // 从0开始更直观
+      nameTextStyle:{
+        fontSize:15,
+      },
+      axisLabel: {
+        formatter: '{value}',
+        fontSize: 15
+      }
+    },
+    series: [
+      {
+        name: '平均浓度',
+        type: 'bar',
+        data: avgs,
+        itemStyle: {
+          // 为"总平均"设置不同颜色（最后一项）
+          color: (params) => params.dataIndex === districts.length - 1 ? '#FF4500' : '#1E88E5'
+        },
+        label: {
+          show: true, // 显示数值标签
+          position: 'top',
+          formatter: '{c}',
+          fontSize: 15
+        },
+        barWidth: '60%'
+      }
+    ],
+    graphic: [
+      {
+        type: 'rect',
+        left: '5%',   // 与 grid.left 对齐
+        right: '5%',  // 与 grid.right 对齐
+        bottom: '15%',// 与 grid.bottom 对齐（位于绘图区域底部）
+        height: 30,   // 圆弧高度
+        // 顶部左右圆角（半径 15，与高度 30 配合形成上凸圆弧）
+        borderRadius: [15, 15, 0, 0], 
+        fill: '#FFFFFF', // 白色填充
+        z: -1          // 层级低于图表元素（如柱子、坐标轴）
+      }
+    ]
+  };
+
+  chart.setOption(option);
+}
+
+// 生命周期管理
+onMounted(async () => {
+  await initData(); // 先加载接口数据
+  initChart();      // 再初始化图表
+  // 监听窗口 resize，自动调整图表大小
+  window.addEventListener('resize', () => chart && chart.resize());
+})
+
+onBeforeUnmount(() => {
+  // 组件销毁时释放图表资源
+  if (chart) chart.dispose();
+})
+</script>
+
+<style>
+.chart-page {
+  width: 100%;
+  margin: 0 auto 24px;
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.chart-container {
+  width: 100%;
+  height: 500px; 
+  
+}
+
+</style>

src/views/User/HmOutFlux/irrigationWater/crossSectionSampleData.vue → src/components/irrpollution/crossSetionTencentmap.vue

@@ -1,60 +1,19 @@
 <template>
-  <div class="page-container">
     <div class="map-page">
-      <h3 class="table-title">断面数据地图展示</h3>
-      <div ref="mapContainer" class="map-container"></div>
-    </div>
-
-    <div class="table-page">
-      <!-- 数据表格容器 -->
-      <div class="table-container">
-        <h3 class="table-title">断面数据详情</h3>
-        <table class="data-table">
-          <!-- 表头 -->
-          <thead>
-            <tr>
-              <th>断面编号</th>
-              <th>所属河流</th>
-              <th>断面位置</th>
-              <th>所属区县</th>
-              <th>Cd含量(mg/L)</th>
-              <th>经度</th>
-              <th>纬度</th>
-            </tr>
-          </thead>
-          <!-- 表体（遍历数据） -->
-          <tbody>
-            <tr v-for="item in state.excelData" :key="item.id">
-              <td>{{ item.id }}</td>
-              <td>{{ item.river }}</td>
-              <td>{{ item.location }}</td>
-              <td>{{ item.district }}</td>
-              <td>{{ item.cdValue }}</td>
-              <td>{{ item.longitude.toFixed(6) }}</td> <!-- 保留6位小数 -->
-              <td>{{ item.latitude.toFixed(6) }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <div ref="mapContainer" class="map-container"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
 import { wgs84togcj02 } from 'coordtransform';
-
-// 状态管理
 const isMapReady = ref(false)
-const mapContainer = ref(null)
-const error = ref(null)
-const TMap = ref(null)
-let infoWindow = ref(null)
-let map = null
-let markersLayer = null
-const state = reactive({
-  excelData: [], // 存储解析后的断面数据
-})
+const TMap = ref(null); // 存储腾讯地图SDK实例
+const mapContainer = ref(null); // 地图容器DOM
+const state = reactive({ excelData: [] }); // 存储处理后的数据
+const infoWindow = ref(null); // 信息窗口实例
+let map = null; // 地图实例
+let markersLayer = null; // 标记图层实例
 
 // 腾讯地图配置
 const tMapConfig = reactive({
@@ -85,18 +44,18 @@ const loadSDK = () => {
 // 初始化断面数据（直接嵌入你的Excel数据）
 const initData = () => {
   const rawData = [
-    { "断面编号": 0, "所属河流": "浈江", "断面位置": "小古录", "所属区县": "始兴县", "经度": 114.208543, "纬度": 25.059851, "Cd(mg/L)": 0.00011 },
-    { "断面编号": 1, "所属河流": "浈江", "断面位置": "长坝", "所属区县": "仁化县", "经度": 113.692874, "纬度": 24.874845, "Cd(mg/L)": 0.00116 },
-    { "断面编号": 2, "所属河流": "浈江", "断面位置": "东河桥", "所属区县": "浈江区", "经度": 113.601631, "纬度": 24.80784, "Cd(mg/L)": 0.00346 },
-    { "断面编号": 3, "所属河流": "武江", "断面位置": "坪石", "所属区县": "乐昌市", "经度": 113.066281, "纬度": 25.274421, "Cd(mg/L)": 0.00098 },
-    { "断面编号": 4, "所属河流": "武江", "断面位置": "乐昌", "所属区县": "乐昌市", "经度": 113.338782, "纬度": 25.129212, "Cd(mg/L)": 0.00011 },
-    { "断面编号": 5, "所属河流": "武江", "断面位置": "武江桥", "所属区县": "乐昌市", "经度": 113.349815, "纬度": 25.120278, "Cd(mg/L)": 0.00015 },
-    { "断面编号": 6, "所属河流": "北江", "断面位置": "九公里", "所属区县": "浈江区", "经度": 113.580758, "纬度": 24.761299, "Cd(mg/L)": 0.00783 },
-    { "断面编号": 7, "所属河流": "北江", "断面位置": "白土", "所属区县": "曲江区", "经度": 113.531284, "纬度": 24.679958, "Cd(mg/L)": 0.00594 },
-    { "断面编号": 8, "所属河流": "浈江", "断面位置": "昆仑水站", "所属区县": "南雄市", "经度": 114.3629285, "纬度": 25.10053746, "Cd(mg/L)": 0.000517 },
-    { "断面编号": 9, "所属河流": "北江", "断面位置": "白沙", "所属区县": "曲江", "经度": 113.5707136, "纬度": 24.58139261, "Cd(mg/L)": 0.00154 },
-    { "断面编号": 10, "所属河流": "浈江", "断面位置": "周田水站", "所属区县": "仁化县", "经度": 113.8293461, "纬度": 24.97851516, "Cd(mg/L)": 0.000182 },
-    { "断面编号": 11, "所属河流": "武江", "断面位置": "坪石水站", "所属区县": "乐昌市", "经度": 113.0467854, "纬度": 25.28883459, "Cd(mg/L)": 0.001071 }
+    { "断面编号": 0, "所属河流": "浈江", "断面位置": "小古录", "所属区县": "始兴县", "经度": 114.208543, "纬度": 25.059851, "Cd(ug/L)": 0.11 },
+    { "断面编号": 1, "所属河流": "浈江", "断面位置": "长坝", "所属区县": "仁化县", "经度": 113.692874, "纬度": 24.874845, "Cd(ug/L)": 1.116 },
+    { "断面编号": 2, "所属河流": "浈江", "断面位置": "东河桥", "所属区县": "浈江区", "经度": 113.601631, "纬度": 24.80784, "Cd(ug/L)": 3.46 },
+    { "断面编号": 3, "所属河流": "武江", "断面位置": "坪石", "所属区县": "乐昌市", "经度": 113.066281, "纬度": 25.274421, "Cd(ug/L)": 0.98 },
+    { "断面编号": 4, "所属河流": "武江", "断面位置": "乐昌", "所属区县": "乐昌市", "经度": 113.338782, "纬度": 25.129212, "Cd(ug/L)": 0.11 },
+    { "断面编号": 5, "所属河流": "武江", "断面位置": "武江桥", "所属区县": "乐昌市", "经度": 113.349815, "纬度": 25.120278, "Cd(ug/L)": 0.15 },
+    { "断面编号": 6, "所属河流": "北江", "断面位置": "九公里", "所属区县": "浈江区", "经度": 113.580758, "纬度": 24.761299, "Cd(ug/L)": 7.83 },
+    { "断面编号": 7, "所属河流": "北江", "断面位置": "白土", "所属区县": "曲江区", "经度": 113.531284, "纬度": 24.679958, "Cd(ug/L)": 5.94 },
+    { "断面编号": 8, "所属河流": "浈江", "断面位置": "昆仑水站", "所属区县": "南雄市", "经度": 114.3629285, "纬度": 25.10053746, "Cd(ug/L)": 0.517 },
+    { "断面编号": 9, "所属河流": "北江", "断面位置": "白沙", "所属区县": "曲江", "经度": 113.5707136, "纬度": 24.58139261, "Cd(ug/L)": 1.54 },
+    { "断面编号": 10, "所属河流": "浈江", "断面位置": "周田水站", "所属区县": "仁化县", "经度": 113.8293461, "纬度": 24.97851516, "Cd(ug/L)": 0.182 },
+    { "断面编号": 11, "所属河流": "武江", "断面位置": "坪石水站", "所属区县": "乐昌市", "经度": 113.0467854, "纬度": 25.28883459, "Cd(ug/L)": 1.071 }
   ];
 
   // 处理坐标（WGS84转GCJ02，腾讯地图用GCJ02）
@@ -113,7 +72,7 @@ const initData = () => {
       river: item.所属河流,
       location: item.断面位置,
       district: item.所属区县,
-      cdValue: item["Cd(mg/L)"],
+      cdValue: item["Cd(ug/L)"],
       latitude: gcjLat,
       longitude: gcjLng,
     };
@@ -138,8 +97,8 @@ const initMap = async () => {
         default: new TMap.value.MarkerStyle({
           width: 30,
           height: 30,
-          //anchor: { x: 15, y: 15 }, // 图标居中
-          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAyTDIgMjJoMjBMMTIgMnoiIGZpbGw9IiNGRjAwMDAiLz48L3N2Zz4='        })
+          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAyTDIgMjJoMjBMMTIgMnoiIGZpbGw9IiMxRTg4RTUiLz48L3N2Zz4='        
+        })
       }
     });
     // 绑定标记点击事件
@@ -200,7 +159,7 @@ const handleMarkerClick = (e) => {
         
         <div class="info-row">
           <span class="info-label">Cd含量：</span>
-          <span class="info-value">${matchedData.cdValue} mg/L</span>
+          <span class="info-value">${matchedData.cdValue} ug/L</span>
         </div>
       
       </div>
@@ -225,6 +184,12 @@ onMounted(async () => {
   try {
     await loadSDK();
     await initMap();
+q    //监听窗口大小变化，调整图表
+    window.addEventListener('resize',()=>{
+      if(chart){
+        chart.resize();
+      }
+    })
   } catch (err) {
     error.value = err.message;
   }
@@ -237,38 +202,21 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-/* 新增：整体页面容器 */
-.page-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+.map-page {
+  width: 100%;
+  margin: 0 auto 24px; /* 水平居中，底部间距24px */
+  background-color: white;
+  border-radius: 12px;
   padding: 20px;
   box-sizing: border-box;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }
 
-/* 地图容器 */
-.map-page { 
-  width: 100%; 
-  height: 50vh;
-  background-color: rgba(255, 255, 255, 0.85);
+/* 地图容器样式 */
+.map-container {
+  width: 100%;
+  height: 550px; /* 固定高度，确保地图显示完整 */
+  margin: 1rem auto;
   border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  margin-bottom: 24px;
-  overflow: hidden;
-  transition: transform 0.3s ease;
-}
-
-.map-page:hover {
-  transform: translateY(-5px);
-}
-
-.map-container { 
-  width: 100%; 
-  height: calc(100% - 60px); 
-  margin: 0;
-  padding: 0;
 }
 
 /* 表格容器 */
@@ -456,30 +404,13 @@ onBeforeUnmount(() => {
   color: #78909c;
 }
 
-/* 响应式设计 */
+/* 响应式调整 */
 @media (max-width: 768px) {
   .map-page {
-    height: 40vh;
-  }
-  
-  .table-title {
-    font-size: 1.3rem;
-    padding: 12px 12px 12px 20px;
-  }
-  
-  .data-table th, .data-table td {
-    padding: 8px 10px;
-    font-size: 0.9rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .page-container {
-    padding: 15px;
+    width: 96%; /* 小屏幕稍窄，避免边缘拥挤 */
   }
-  
-  .table-title {
-    font-size: 1.2rem;
+  .map-container {
+    height: 300px; /* 小屏幕缩短高度 */
   }
 }
 </style>

src/components/irrpollution/crosssectionmap.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="map-wrapper">
+    <div ref="mapContainer" class="map-container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const mapContainer = ref(null);
+
+// 定义蓝色三角形标记（保持不变）
+const blueTriangle = L.divIcon({
+  className: 'custom-div-icon',
+  html: `<svg width="24" height="24" viewBox="0 0 24 24">
+          <path d="M12 2L2 22h20L12 2z" fill="#0066CC" stroke="#003366" stroke-width="2"/>
+        </svg>`,
+  iconSize: [24, 24],
+  iconAnchor: [12, 24]
+});
+
+onMounted(() => {
+  // 初始化地图（保持不变）
+  if (!mapContainer.value) {
+    console.error('❌ 地图容器未找到！');
+    return;
+  }
+
+  const map = L.map(mapContainer.value, {
+    center: [24.9, 114], // 韶关大致中心  前大往下，后大往左
+    zoom: 8.5,
+    minZoom: 8.3,
+  });
+
+  // 区县颜色映射 + 增强匹配（保持不变）
+  const districtColorMap = {
+    "武江区": "#FF6B6B",
+    "浈江区": "#4ECDC4",
+    "曲江区": "#FFD166",
+    "始兴县": "#A0DAA9",
+    "仁化县": "#6A0572",
+    "翁源县": "#1A535C",
+    "乳源瑶族自治县": "#FF9F1C",
+    "新丰县": "#87CEEB",
+    "乐昌市": "#118AB2",
+    "南雄市": "#06D6A0",
+    "韶关市": "#cccccc",
+  };
+
+  function getDistrictColor(name) {
+    if (districtColorMap[name]) return districtColorMap[name];
+    const normalizedName = name.replace(/市|县|区|自治县/g, '');
+    for (const key in districtColorMap) {
+      if (key.includes(normalizedName) || normalizedName.includes(key.replace(/市|县|区|自治县/g, ''))) {
+        return districtColorMap[key];
+      }
+    }
+    return '#cccccc';
+  }
+
+  // 加载区县边界（保持不变）
+  fetch('/data/韶关市各区县边界图.geojson')
+    .then(res => {
+      if (!res.ok) throw new Error(`区县边界加载失败：${res.status}`);
+      return res.json();
+    })
+    .then(geojson => {
+      L.geoJSON(geojson, {
+        style: (feature) => {
+          const districtName = feature.properties.name || '';
+          const color = getDistrictColor(districtName);
+          return {
+            fillColor: color,
+            fillOpacity: 0.7,
+            color: '#333333',
+            weight: 2,
+          };
+        },
+      }).addTo(map);
+
+      // 加载水系图 + 新增接口数据加载（核心修改）
+      fetch('/data/韶关市河流水系图.geojson')
+        .then(res => {
+          if (!res.ok) throw new Error(`水系图加载失败：${res.status}`);
+          return res.json();
+        })
+        .then(waterGeojson => {
+          L.geoJSON(waterGeojson, {
+            style: {
+              color: '#0066CC',
+              weight: 2,
+              opacity: 0.8,
+            },
+          }).addTo(map);
+
+          // ========================
+          // 从接口加载数据（替换本地rawData）
+          // ========================
+          fetch('http://localhost:8000/api/vector/export/all?table_name=cross_section')
+            .then(res => {
+              if (!res.ok) throw new Error(`数据加载失败：HTTP ${res.status}`);
+              return res.json();
+            })
+            .then(geoJSONData => {
+              // 提取GeoJSON的features.properties作为数据项
+              const dataItems = geoJSONData.features.map(feature => feature.properties);
+              console.log('✅ 接口数据加载完成，要素数：', dataItems.length);
+
+              let markerCount = 0;
+              dataItems.forEach((item, idx) => {
+                try {
+                  // 字段映射（接口字段 → 原逻辑字段）
+                  const mappedItem = {
+                    "断面编号": item.id,
+                    "所属河流": item.river_name,
+                    "断面位置": item.position,
+                    "所属区县": item.county,
+                    "经度": item.longitude,
+                    "纬度": item.latitude,
+                    "Cd(ug/L)": item.cd_concentration
+                  };
+
+                  // 经纬度校验（保持原有逻辑）
+                  const lng = parseFloat(mappedItem.经度);
+                  const lat = parseFloat(mappedItem.纬度);
+                  if (isNaN(lat) || isNaN(lng) || lat < 22.7 || lat > 25.5 || lng < 112.7 || lng > 115.3) {
+                    console.warn(`❌ 坐标越界（第${idx}条）：`, lat, lng, mappedItem);
+                    return;
+                  }
+
+                  // 创建标记（保持原有样式）
+                  const marker = L.marker([lat, lng], {
+                    icon: blueTriangle,
+                    zIndexOffset: 1000,
+                  }).addTo(map);
+
+                  // 镉含量格式化（保持原有逻辑）
+                  const cdValue = parseFloat(mappedItem["Cd(ug/L)"]);
+                  const formattedCd = isNaN(cdValue) ? '未知' : cdValue.toFixed(2) + ' μg/L';
+
+                  // 弹窗内容（保持原有结构）
+                  marker.bindPopup(`
+                    <div class="popup-container">
+                      <h3 class="popup-title">所属河流: ${mappedItem.所属河流}</h3>
+                      <div class="popup-divider"></div>
+                      <p><strong>断面编号:</strong> ${mappedItem.断面编号}</p>
+                      <p><strong>断面位置:</strong> ${mappedItem.断面位置}</p>
+                      <p><strong>所属区县:</strong> ${mappedItem.所属区县}</p>
+                      <p><strong>镉(Cd)含量:</strong> ${formattedCd}</p>
+                    </div>
+                  `);
+
+                  // 鼠标交互（保持原有逻辑）
+                  marker.on('mouseover', () => {
+                    marker.getElement().querySelector('svg').style.transform = 'scale(1.2)';
+                  }).on('mouseout', () => {
+                    marker.getElement().querySelector('svg').style.transform = 'scale(1)';
+                  });
+
+                  markerCount++;
+                } catch (err) {
+                  console.error(`❌ 处理第${idx}条数据失败：`, err);
+                }
+              });
+
+              console.log(`✅ 成功创建 ${markerCount} 个标记点`);
+            })
+            .catch(err => {
+              console.error('❌ 采样点数据加载失败：', err);
+              alert('采样点数据加载错误：' + err.message);
+            });
+          // ========================
+        })
+        .catch(err => {
+          console.error('❌ 水系图加载失败：', err);
+          alert('水系图加载错误：' + err.message);
+        });
+    })
+    .catch(err => {
+      console.error('❌ 区县边界加载失败：', err);
+      alert('区县边界加载错误：' + err.message);
+    });
+});
+</script>
+
+<style scoped>
+/* 原有样式保持不变 */
+.map-wrapper {
+  width: 100%;
+  height: 80%;
+  position: relative;
+}
+.map-container {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+::v-deep .popup-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0066CC;
+  margin: 0 0 6px;
+  border-bottom: none;
+  padding-bottom: 8px;
+}
+
+::v-deep .popup-divider {
+  height: 1px;
+  background: #0066CC;
+  margin: 8px 0;
+}
+
+::v-deep .popup-container {
+  min-width: 240px;
+  max-width: 300px;
+  padding: 16px;
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+::v-deep .popup-container p {
+  margin: 6px 0;
+  font-size: 15px;
+  color: #666;
+  line-height: 1.6;
+}
+
+::v-deep .popup-container strong {
+  color: #0066CC;
+  font-weight: 600;
+}
+
+::v-deep .exceeding {
+  color: #FF3333;
+  font-weight: bold;
+}
+
+::v-deep .leaflet-popup-content-wrapper {
+  padding: 0 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
+}
+
+::v-deep .leaflet-popup-content {
+  margin: 0 !important;
+  width: auto !important;
+}
+
+::v-deep .leaflet-popup-tip {
+  display: none;
+}
+
+::v-deep .info {
+  padding: 6px 8px;
+  background: white;
+  background: rgba(255,255,255,0.9);
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+
+::v-deep .custom-div-icon svg {
+  transition: transform 0.2s;
+  display: block;
+}
+</style>

src/components/irrpollution/irrwatermap.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="map-wrapper" @click.stop>
+    <div ref="mapContainer" class="map-container"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const mapContainer = ref(null);
+
+onMounted(() => {
+  // 初始化地图（强制确保容器可用）
+  if (!mapContainer.value) {
+    console.error('❌ 地图容器未找到！');
+    return;
+  }
+
+  // 定义位置格式化函数（处理"广东省韶关市"前缀）
+  const formatLocation = (fullLocation) => {
+    if (!fullLocation) return '未知位置'; // 处理空值
+    // 移除前缀并清理空格
+    const processed = fullLocation.replace(/^广东省韶关市/, '').trim();
+    // 处理移除后为空的情况
+    return processed || '未知位置';
+  };
+
+  const map = L.map(mapContainer.value, {
+    center: [25, 114], // 韶关大致中心  前大往下，后大往左
+    zoom: 8.5,
+    minZoom: 8.3,
+  });
+
+  // 区县颜色映射（与GeoJSON的properties.name严格匹配）
+  const districtColorMap = {
+    "武江区": "#FF6B6B",
+    "浈江区": "#4ECDC4",
+    "曲江区": "#FFD166",
+    "始兴县": "#A0DAA9",
+    "仁化县": "#6A0572",
+    "翁源县": "#1A535C",
+    "乳源瑶族自治县": "#FF9F1C",
+    "新丰县": "#87CEEB",
+    "乐昌市": "#118AB2",
+    "南雄市": "#06D6A0",
+  };
+
+  // 加载区县边界（带完整错误处理）
+  fetch('/data/韶关市各区县边界图.geojson')
+    .then(res => {
+      if (!res.ok) throw new Error(`区县边界加载失败：${res.status}`);
+      return res.json();
+    })
+    .then(geojson => {
+      console.log('✅ 区县边界数据加载完成，要素数：', geojson.features.length);
+      
+      L.geoJSON(geojson, {
+        style: (feature) => {
+          const districtName = feature.properties.name; // 匹配GeoJSON的name字段
+          const color = districtColorMap[districtName] || '#cccccc';
+          return {
+            fillColor: color,
+            fillOpacity: 0.7,
+            color: '#333333', // 边界颜色
+            weight: 2,        // 边界宽度
+          };
+        },
+      }).addTo(map);
+
+      // 加载水系图（新增，带样式和错误处理）
+      fetch('/data/韶关市河流水系图.geojson')
+        .then(res => {
+          if (!res.ok) throw new Error(`水系图加载失败：${res.status}`);
+          return res.json();
+        })
+        .then(waterGeojson => {
+          console.log('✅ 水系图数据加载完成，要素数：', waterGeojson.features.length);
+          
+          L.geoJSON(waterGeojson, {
+            style: {
+              color: '#0066CC', // 水系颜色
+              weight: 2,       // 线条宽度
+              opacity: 0.8,    // 透明度
+            },
+          }).addTo(map);
+
+          // ========================
+          // 修复核心：加载采样+检测数据（单接口）
+          // ========================
+          fetch('http://localhost:8000/api/vector/export/all?table_name=water_sampling_data')
+            .then(res => {
+              if (!res.ok) throw new Error(`数据加载失败：HTTP ${res.status}`);
+              return res.json();
+            })
+            .then(geoJSONData => { // geoJSONData 是 FeatureCollection 结构
+              console.log('✅ 采样数据加载完成，要素数：', geoJSONData.features.length);
+                
+              let markerCount = 0;
+              geoJSONData.features.forEach((feature, idx) => {
+                const props = feature.properties; // 单个要素的完整属性（采样+检测）
+                try {
+                  // 智能提取经纬度字段（支持多种可能的字段名）
+                  const latField = ['latitude', 'lat', 'Latitude', 'Lat'].find(key => props[key] !== undefined);
+                  const lngField = ['longitude', 'lng', 'Longitude', 'Lng'].find(key => props[key] !== undefined);
+                  
+                  if (!latField || !lngField) {
+                    console.error(`❌ 未找到经纬度字段（第${idx}条）：`, props);
+                    return;
+                  }
+                  
+                  // 清理并转换经纬度（处理特殊字符和逗号）
+                  const cleanLat = String(props[latField]).replace(/[^\d.-]/g, '');
+                  const cleanLng = String(props[lngField]).replace(/[^\d.-]/g, '');
+                  
+                  // 强制四舍五入到6位小数（避免精度问题）
+                  const lat = parseFloat(parseFloat(cleanLat).toFixed(6));
+                  const lng = parseFloat(parseFloat(cleanLng).toFixed(6));
+                  
+                  // 范围校验（扩大范围10%，兼容边界值）
+                  if (isNaN(lat) || isNaN(lng) || lat < 22.7 || lat > 25.5 || lng < 112.7 || lng > 115.3) {
+                    console.warn(`❌ 坐标超出合理范围（第${idx}条）：`, lat, lng, props);
+                    return;
+                  }
+                  
+                  // 创建标记点（使用 L.circleMarker 而非 L.marker）
+                  const marker = L.circleMarker([lat, lng], {
+                    radius: 4,                  // 增大圆点半径，确保可见
+                    color: '#FF3333',           // 边框颜色（红色）
+                    fillColor: '#FF3333',       // 填充颜色（红色）
+                    fillOpacity: 0.9,           // 填充透明度（接近不透明）
+                    weight: 2,                  // 边框宽度（加粗）
+                    zIndexOffset: 1000,         // 提高层级，确保在所有图层之上
+                  }).addTo(map);
+
+                  // 弹窗内容：直接从 props 提取检测数据（匹配实际字段名）
+                  marker.bindPopup(`
+                    <div class="popup-container">
+                      <h3 class="popup-title">${formatLocation(props.sampling_location)}</h3>
+                      <div class="popup-divider"></div> <!-- 分隔线 -->
+                      <table class="popup-table">
+                        <thead>
+                          <tr>
+                            <th>检测项</th>
+                            <th>数值</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr><td>Ph</td><td>${props.ph_value || '未知'}</td></tr>
+                          <tr><td>铬(Cr)</td><td>${props.cr_concentration || '未知'}</td></tr>
+                          <tr><td>砷(As)</td><td>${props.as_concentration || '未知'}</td></tr>
+                          <tr><td>镉(Cd)</td><td>${props.cd_concentration || '未知'}</td></tr>
+                          <tr><td>汞(Hg)</td><td>${props.hg_concentration || '未知'}</td></tr>
+                          <tr><td>铅(Pb)</td><td>${props.pb_concentration || '未知'}</td></tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  `);
+                  
+                  markerCount++;
+                } catch (err) {
+                  console.error(`❌ 处理采样点失败（第${idx}条）：`, err);
+                }
+              });
+
+              console.log(`✅ 成功创建 ${markerCount} 个标记点`);
+            })
+            .catch(err => {
+              console.error('❌ 采样/检测数据加载失败：', err);
+              alert('数据接口错误：' + err.message);
+            });
+          // ========================
+          // 水系图加载完成后的逻辑结束
+          // ========================
+        })
+        .catch(err => {
+          console.error('❌ 水系图加载失败：', err);
+          alert('水系图加载错误：' + err.message);
+        });
+    })
+    .catch(err => {
+      console.error('❌ 区县边界加载失败：', err);
+      alert('区县边界加载错误：' + err.message);
+    });
+});
+</script>
+
+<style scoped>
+.map-wrapper {
+  width:100%;
+  height: 100%;
+  position: relative;
+  z-index: 100;
+}
+.map-container {
+  width: 100% !important;
+  height: 500px !important;
+}
+
+/*  标题和分隔线 */
+::v-deep .popup-title {
+  text-align: center;       /* 居中 */
+  font-size: 16px;          /* 减小字号 */
+  font-weight: 700;         /* 加粗 */
+  color: #0066CC;           /* 蓝色，匹配设计 */
+  margin: 0 0 4px;          /* 间距调整 */
+  border-bottom: 2px solid #0066CC; /* 底部横线 */
+  padding-bottom: 4px;      /* 横线与文字间距 */
+}
+
+::v-deep .popup-divider {
+  height: 1px;              /* 横线高度 */
+  background: #0066CC;      /* 横线颜色 */
+  margin: 6px 0;            /* 上下间距 */
+}
+
+/*  表格样式 */
+::v-deep .popup-table {
+  width: 100%;              /* 占满容器 */
+  border-collapse: collapse;/* 合并边框 */
+  margin-top: 12px;         /* 与段落间距 */
+}
+
+::v-deep .popup-table th,
+::v-deep .popup-table td {
+  border: 1px solid #CCCCCC;/* 单元格边框 */
+  padding: 4px 6px;         /* 内边距 */
+  text-align: center;       /* 内容居中 */
+  font-size: 12px;          /* 字号调整 */
+}
+
+::v-deep .popup-table th {
+  background: #F5F5F5;      /* 表头背景色 */
+  font-weight: 600;         /* 表头加粗 */
+}
+
+/* 美化弹窗（完整层级穿透） */
+::v-deep .leaflet-popup-content-wrapper {
+  padding: 0 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+}
+
+::v-deep .leaflet-popup-content {
+  margin: 0 !important;
+  width: auto !important;
+  max-width: 220px !important;
+}
+
+::v-deep .popup-container {
+  min-width: 180px;
+  max-width: 220px;
+  padding: 10px;/**内边距 */
+  font-family: "Microsoft YaHei", sans-serif;
+}
+
+::v-deep .popup-content p {
+  margin: 6px 0;
+  font-size: 15px;
+  color: #666;
+  line-height: 1.6;
+}
+
+::v-deep .popup-content strong {
+  color: #FF3333; /* 与标记点颜色呼应 */
+  font-weight: 600;
+}
+
+/* 可选：隐藏弹窗箭头，更像卡片 */
+::v-deep .leaflet-popup-tip {
+  display: none;
+}
+
+/* 临时调试：确保标记点可见 */
+::v-deep .leaflet-marker-icon {
+  display: none !important; /* 隐藏默认标记图标 */
+}
+::v-deep .leaflet-circle-marker {
+  stroke-width: 2px !important;
+}
+</style>

src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/tencentMapView.vue → src/components/irrpollution/tencentMapView.vue

@@ -10,12 +10,12 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import axios from 'axios'
 import {wgs84togcj02} from 'coordtransform';
-
 const farmlandLayer = ref(null);
 const isMapReady = ref(false)
 const mapContainer = ref(null)
 const error = ref(null)
 const TMap = ref(null);
+let districtBoundaryLayer = null;
 let activeTempMarker = ref(null)
 let infoWindow = ref(null)
 let map = null
@@ -26,8 +26,8 @@ const state = reactive({
   showOverlay: false,
   showSoilTypes: true,
   showSurveyData: true,
-  shoeWaterSystem:true,
-  excelData: [],
+  showWaterSystem:true,
+  excelData: [],//标记点数据
   lastTapTime: 0
 })
 
@@ -104,7 +104,7 @@ const initData =async ()=>{
         longitude:lng,
       };
     }).filter(item=>item !==null)
-    console.log('成功加载${state.excelData.length}条有效数据');
+    console.log(`成功加载${state.excelData.length}条有效数据`);
   }catch(err){
     console.error('数据初始化失败：',err);
     error.value = err.message;
@@ -123,21 +123,16 @@ const initMap = async () => {
     //console.log('开始创建地图实例');
     
     map = new TMap.value.Map(mapContainer.value, {
-      center: new TMap.value.LatLng(24.55,114.2),//前大往下，后大往左
-      zoom: 9,
-      minZoom:8.5,
-      maxZoom:12,
+      center: new TMap.value.LatLng(24.25,114.5),//前大往下，后大往左
+      zoom:9,
+      zoomControl:true,
       renderOptions: {
         preserveDrawingBuffer: true, // 必须开启以支持截图
         antialias: true
       },
-      restrictBounds: new TMap.value.LatLngBounds(
-    new TMap.value.LatLng(24.8, 113.7), // 西南角（最南最西）
-    new TMap.value.LatLng(25.2, 114.0)  // 东北角（最北最东）
-  )
     })
     //console.log('地图实例创建成功，开始创建markersLayer');
-    
+    //console.log('当前地图样式ID:', map.getMapStyleId());
      if (markersLayer) {
     markersLayer.setMap(null);
     markersLayer = null;
@@ -148,14 +143,14 @@ const initMap = async () => {
   zIndex:1000,
   styles: {
     default: new TMap.value.MarkerStyle({
-      width: 30, // 图标宽度
-      height: 30, // 图标高度
+      width: 15, // 图标宽度
+      height: 15, // 图标高度
       anchor: { x: 12.5, y: 12.5 }, // 居中定位
-      src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTcuMjdsNi4xOCAzLjYzLTEuNjQtNy4wMyA1LjM0LTQuNjMtNy4xOS0uNjFMMTIgM2wtMy4xOSA2LjYzLTcuMTkuNjFMMTAuNDYgMTMuODkgOC44MiAyMC45IDE4IDE3LjI3eiIgZmlsbD0iI0ZGMDAwMCIvPjwvc3ZnPg=='
+      src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAiIGZpbGw9InJlZCIvPjwvc3ZnPg=='
       })
     }
   });
-    console.log('markersLayer是否绑定地图：',markersLayer.getMap() === map);
+    console.log('markersLayer是否绑定地图:',markersLayer.getMap() === map);
     
 
     // 创建土壤类型多边形图层
@@ -183,8 +178,10 @@ const initMap = async () => {
     
 
      // 6. 绑定事件
-    map.on('click', handleMapClick);    
+     
     //console.log('地图实例创建完成，开始加载水系图');
+    //加载区县边界
+    await loadDistrictBoundaries();
     await loadWaterSystemGeoJSON(); // 等待水系图加载完成
 
     // 标记地图就绪
@@ -198,7 +195,6 @@ const initMap = async () => {
       //console.log('地图初始化完成');
       //console.log('标记点图层初始化:',markersLayer.value);
     })
-
   } catch (err) {
     isMapReady.value = true;
     console.error('initMap执行异常：',err);
@@ -209,90 +205,176 @@ const initMap = async () => {
 // 加载水系 GeoJSON 并添加到地图
 const loadWaterSystemGeoJSON = async () => {
   try {
-    // 1. 请求 GeoJSON 文件（路径根据实际存放位置修改，如 public 目录下的 water_system.geojson）
-    const response = await fetch('/data/韶关市河流水系图.geojson');
+    const url = `${window.location.origin}/data/韶关市河流水系图.geojson`;
+    console.log('加载水系:', url);
+    
+    const response = await fetch(url);
+    
+    // 检查响应状态
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`HTTP错误 ${response.status}: ${errorText.substring(0, 100)}`);
+    }
+    
     const geojson = await response.json();
-    //console.log('水系 GeoJSON 加载成功，要素数量：', geojson.features.length);
+    console.log('成功加载水系GeoJSON:', geojson.features.length, '个要素');
+    
+    // 创建腾讯地图可用的坐标转换函数
+    const processCoordinates = (coords) => {
+      const [gcjLng, gcjLat] = wgs84togcj02(coords[0], coords[1]);
+      return new TMap.value.LatLng(gcjLat, gcjLng);
+    };
 
-    // 2. 销毁旧图层（避免重复加载）
+    // 销毁旧图层
     if (waterSystemLayer) {
       waterSystemLayer.setMap(null);
       waterSystemLayer = null;
     }
 
-    // 3. 根据 GeoJSON 类型创建图层（水系通常是 LineString，用 MultiPolyline）
+    // 创建水系图层
     waterSystemLayer = new TMap.value.MultiPolyline({
-      map: map, // 绑定到地图实例
+      map: map,
       styles: {
         default: new TMap.value.PolylineStyle({
-          color: '#0066cc', // 水系线条颜色（蓝色）
-          width: 2,         // 线条宽度
-          opacity: 0.8,     // 透明度
-          lineCap: 'round', // 线条端点圆润
-          lineJoin: 'round' // 线条拐角圆润
+          color: '#0066cc',
+          width: 2,
+          opacity: 0.8,
+          lineCap: 'round',
+          lineJoin: 'round'
         })
       },
       geometries: geojson.features
-        .filter(feature =>{
-    const type = feature.geometry.type;
-    //console.log('要素类型:', type); // 调试：打印每个要素的类型
-    return type === 'LineString' || type === 'MultiLineString';
-     }) // 筛选线要素
+        .filter(feature => {
+          return feature.geometry.type === 'LineString' || 
+                 feature.geometry.type === 'MultiLineString';
+        })
         .map(feature => {
           let paths = [];
+          
           if (feature.geometry.type === 'LineString') {
-          paths = feature.geometry.coordinates.map(coord => {
-           const [gcjLng, gcjLat] = wgs84togcj02(coord[0], coord[1]); // WGS84 → GCJ02
-            return new TMap.value.LatLng(gcjLat, gcjLng);
-          });
-           } else if (feature.geometry.type === 'MultiLineString') {
-           paths = feature.geometry.coordinates.map(line => 
-           line.map(coord => {
-           const [gcjLng, gcjLat] = wgs84togcj02(coord[0], coord[1]);
-           return new TMap.value.LatLng(gcjLat, gcjLng);
-    })
-  );
-}
-    //console.log('转换后的路径长度:', paths.length); // 调试：确保有坐标
-    return {
-      id: feature.id || `water_${Date.now()}`,
-      styleId: 'default',
-      paths: paths,
-      properties: feature.properties
-    };
+            paths = feature.geometry.coordinates.map(processCoordinates);
+          } else {
+            paths = feature.geometry.coordinates.map(line => 
+              line.map(processCoordinates)
+            );
+          }
+          
+          return {
+            id: feature.id || `water_${Date.now()}`,
+            styleId: 'default',
+            paths: paths,
+            properties: feature.properties
+          };
         })
     });
+    console.log('水系图层加载完成');
+
+  } catch (err) {
+    console.error('水系加载失败:', err.message);
+    error.value = `水系图加载失败: ${err.message}`;
+  }
+};
 
-   // console.log('水系图层加载完成');
 
-    // 4. 修正：遍历几何要素，合并边界
-    if (waterSystemLayer) {
-      const geometries = waterSystemLayer.getGeometries(); // 获取所有几何要素
-      if (geometries.length === 0) {
-        console.warn('水系图层无有效几何要素');
-        return;
-      }
+// 加载区县边界数据
+const loadDistrictBoundaries = async () => {
+  try {
+    const url = '/data/韶关市各区县边界图.geojson';
+    console.log('加载区县边界:', url);
+    
+    const response = await fetch(url);
+    
+    // 打印响应状态和头信息
+    console.log('HTTP状态码:', response.status);
+    console.log('内容类型:', response.headers.get('content-type'));
+    console.log('内容长度:', response.headers.get('content-length'));
+    
+    // 检查响应状态
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`HTTP错误 ${response.status}: ${errorText.substring(0, 100)}`);
+    }
+    
+    const geojson = await response.json();
+    console.log('成功加载区县GeoJSON:', geojson.features.length, '个要素');
+
+    // 1. 定义颜色数组（顺序与 geojson.features 中的区县顺序一致）
+    const districtColorMap = {
+      '武江区': '#FF6B6B',
+      '浈江区': '#4ECDC4',
+      '曲江区': '#FFD166',
+      '始兴县': '#A0DAA9',
+      '仁化县': '#6A0572',
+      '翁源县': '#1A535C',
+      '乳源瑶族自治县': '#FF9F1C', // 修正：匹配 GeoJSON 的“乳源瑶族自治县”
+      '新丰县': '#87CEEB', // 新增：为“新丰县”配置颜色（可自定义）
+      '乐昌市': '#118AB2',
+      '南雄市': '#06D6A0'
+    };
 
-      // 初始化边界为第一个要素的边界
-      let bounds = geometries[0].getBounds(); 
-      // 合并剩余要素的边界
-      for (let i = 1; i < geometries.length; i++) {
-        bounds.extend(geometries[i].getBounds()); 
+    // 2. 处理几何数据：为每个区县分配 styleId（用索引，与颜色数组对应）
+    const geometries = geojson.features.map(feature => {
+      const districtName = feature.properties.name;
+      console.log('GEOJSON中的区县名称',districtName);
+      
+      const color = districtColorMap[districtName] ||'#ccc';
+      // 坐标转换（WGS84 → GCJ02，确保边界在正确位置）
+      let paths = [];
+      if (feature.geometry.type === 'Polygon') {
+        paths = feature.geometry.coordinates.map(ring => 
+          ring.map(coord => {
+            const [gcjLng, gcjLat] = wgs84togcj02(coord[0], coord[1]);
+            return new TMap.value.LatLng(gcjLat, gcjLng);
+          })
+        );
+      } else if (feature.geometry.type === 'MultiPolygon') {
+        paths = feature.geometry.coordinates.map(polygon => 
+          polygon.map(ring => 
+            ring.map(coord => {
+              const [gcjLng, gcjLat] = wgs84togcj02(coord[0], coord[1]);
+              return new TMap.value.LatLng(gcjLat, gcjLng);
+            })
+          )
+        );
       }
 
-      // 适配地图视野
-      map.fitBounds(bounds, { padding: [50, 50] }); 
+      // 关键：styleId 设为索引（与颜色数组索引对应）
+      return {
+        id: `district-${districtName}`,
+        styleId: `style-${districtName}`,
+        paths:paths
+      };
+    });
+
+    districtColorMap['武江区'] = '#FF0000'; // 强制武江区为红色
+    // 3. 构建样式对象（key 与 styleId 一致）
+    const styles = {};
+    for(const name in districtColorMap){
+      styles[`style-${name}`]=new TMap.value.PolygonStyle({
+        fillColor:districtColorMap[name],
+        fillOpacity:0.7,
+        strokeColor:'#333',
+        strokeWidth:2
+      })
+       console.log(`区县${name}的样式颜色:`, styles[`style-${name}`].getFillColor());
     }
 
+    // 4. 创建图层并应用样式
+    districtBoundaryLayer = new TMap.value.MultiPolygon({
+      map: map,
+      geometries: geometries,
+      styles:styles
+    });
+    console.log('区县样式对象:', styles);
+    districtBoundaryLayer.setStyles(styles); // 样式生效
+    
   } catch (err) {
-    console.error('水系 GeoJSON 加载失败：', err);
-    error.value = `水系图加载失败：${err.message}`;
+    console.error('加载区县边界失败:', err.message);
+    error.value = `区县边界加载失败: ${err.message}`;
   }
 };
 
 
-
-
 // 更新标记点，添加Label显示
 const updateMarkers = () => {
   // 正确的标记点创建方式
@@ -397,7 +479,7 @@ const handleMarkerClick = async(e) => {
     <div class="divider"></div>
     
     <!-- 重金属区 -->
-    <h4 class="contaminant-title">重金属含量 (mg/L)</h4>
+    <h4 class="contaminant-title">重金属含量 (ug/L)</h4>
     <div class="contaminant-grid">
       <div class="contaminant-item">
         <span class="contaminant-name">Cr:</span>
@@ -441,139 +523,6 @@ const handleMarkerClick = async(e) => {
     infoWindow.value.setContent(errorContent);
   }
 }
-  
-
-
- const manageTempMarker = {
-  add: (lat, lng, phValue) => {
-    if (activeTempMarker.value) {
-      markersLayer.remove("-999")
-    }
-    
-    const tempMarker = markersLayer.add({
-      id: "-999",
-      position: new TMap.value.LatLng(lat, lng),
-      styleId: 'temp',
-      properties: {
-        title: '克里金插值',
-        phValue: parseFloat(phValue).toFixed(2),
-        isTemp: true
-      }
-    })
-    activeTempMarker.value = tempMarker
-  },
-  remove: () => {
-    if (activeTempMarker.value) {
-      markersLayer.remove("-999")
-      activeTempMarker.value = null
-    }
-  }
-}
-
- const handleMapClick = async (e) => {
-  if (selectedPolygon.value) {
-    resetPolygonStyle();
-     infoWindow.value?.close();
-   }
-   const now = Date.now()
-  
-   if (now - state.lastTapTime < 1000) return
-   state.lastTapTime = now
-
-   try {
-     const latLng = e?.latLng
-     if (!latLng) throw new Error("地图点击事件缺少坐标信息")
-
-    const lat = Number(latLng.lat)
-     const lng = Number(latLng.lng)
-
-     if (!isValidCoordinate(lat, lng)) throw new Error(`非法坐标值 (${lat}, ${lng})`)
-
-     //console.log('有效坐标:', lat, lng)
-
-     const result = await reverseGeocode(lat, lng)
-     if (!validateLocation(result)) throw new Error('非有效陆地区域')
-     const phValue = await getPhValue(lng, lat)
-
-    // 使用封装方法添加临时标记
-    manageTempMarker.add(lat, lng, phValue)
-
-     if (infoWindow.value) {
-       infoWindow.value.close()
-     }
-    infoWindow.value = new TMap.value.InfoWindow({
-       map: map,
-       position: new TMap.value.LatLng(lat,lng),
-       content: `
-         <div style="padding:12px">
-           <h3>临时采样点</h3>
-           <p>位置：${result.address}</p>
-          <p>PH值:${phValue}</p>
-         </div>
-       `
-     })
-     infoWindow.value.open()
-   } catch (error) {
-     console.error('操作失败详情:', error)
-    error.value = error.message.includes('非法坐标') 
-       ? '请点击有效地图区域' 
-       : '服务暂时不可用，请稍后重试'
-     setTimeout(() => error.value = null, 3000)
-   }
- }
-
-
-
-// // 验证坐标有效性
- const isValidCoordinate = (lat, lng) => {
-   return !isNaN(lat) && !isNaN(lng) && 
-            lat >= -90 && lat <= 90 && 
-          lng >= -180 && lng <= 180
- }
-
-// // 逆地理编码
- const reverseGeocode = (lat, lng) => {
-   return new Promise((resolve, reject) => {
-     const callbackName = `tmap_callback_${Date.now()}`
-     window[callbackName] = (response) => {
-       delete window[callbackName]
-       document.body.removeChild(script)
-       if (response.status !== 0) reject(response.message)
-       else resolve(response.result)
-     }
-
-     const script = document.createElement('script')
-     script.src = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${tMapConfig.key}&output=jsonp&callback=${callbackName}`
-     script.onerror = reject
-     document.body.appendChild(script)
-   })
- }
-
-// // 验证地理位置
- const validateLocation = (result) => {
-   if (!result || !result.address_component) {
-     return false;
-   }
-   return result.address_component.nation === '中国' &&
-          !['香港特别行政区', '澳门特别行政区', '台湾省'].includes(
-            result.address_component.province
-          )
- }
-
-// // 获取PH值
- const getPhValue = async (lng, lat) => {
-   try {
-     const { data } = await axios.post('https://soilgd.com:5000/kriging_interpolation', {
-       file_name: 'emissions.xlsx',
-       emission_column: 'dust_emissions',
-       points: [[lng, lat]]
-     })
-     return parseFloat(data.interpolated_concentrations[0]).toFixed(2)
-   } catch (error) {
-     console.error('获取PH值失败:', error)
-     throw error 
- }
- }
 
 
 
@@ -636,7 +585,7 @@ onUpdated(() => {
 
 </script>
 
-<style>
+<style scoped>
 .map-page {
   position: relative;
   width: 100vw;
@@ -1042,4 +991,25 @@ onUpdated(() => {
   100% { transform: scale(1); opacity: 0.8; }
 }
 
+/* 区县边界样式 */
+.district-boundary {
+  stroke: #333;
+  stroke-width: 1px;
+  fill-opacity: 0.6;
+  transition: fill-opacity 0.3s;
+}
+
+.district-boundary:hover {
+  fill-opacity: 0.8;
+  stroke-width: 2px;
+}
+
+.district-label {
+  font-size: 14px;
+  font-weight: bold;
+  text-anchor: middle;
+  pointer-events: none;
+  fill: #333;
+  text-shadow: 0 0 3px white, 0 0 3px white, 0 0 3px white;
+}
 </style>

src/views/User/HmOutFlux/irrigationWater/waterassaydata2.vue → src/components/irrpollution/waterassaydata2.vue

@@ -11,18 +11,19 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
 import axios from 'axios';
 
-// ========== 接口配置 ==========
-const SAMPLING_API = 'http://localhost:3000/table/Water_sampling_data';
-const ASSAY_API = 'http://localhost:3000/table/Water_assay_data';
+// ========== 接口配置（仅保留新接口） ==========
+const NEW_API = 'http://localhost:8000/api/vector/export/all?table_name=water_sampling_data';
 
-// ========== 配置项 ==========
+// ========== 配置项（调整字段适配新接口） ==========
+// 排除的非重金属字段（适配新接口字段名）
 const EXCLUDE_FIELDS = [
-  'water_assay_ID', 'sample_code', 'assayer_ID', 'assay_time', 
-  'assay_instrument_model', 'water_sample_ID', 'pH'
+  'id', 'sample_code', 'assayer_id', 'assay_time', 
+  'assay_instrument_model', 'sample_number', 'ph_value',
+  'latitude', 'longitude', 'sampling_location', 'sampling_time' // 新增采样相关非检测字段
 ];
 const COLORS = ['#ff4d4f99', '#1890ff', '#ffd700',  '#52c41a88', '#722ed199' ];
 
-// 韶关市下属行政区划白名单 [关键修改点]
+// 韶关市下属行政区划白名单（保持不变）
 const SG_REGIONS = [
   '浈江区', '武江区', '曲江区', '乐昌市', 
   '南雄市', '始兴县', '仁化县', '翁源县', 
@@ -35,7 +36,7 @@ const loading = ref(true);
 const error = ref('');
 let myChart = null;
 
-// ========== 地区提取函数（韶关市专属版）[核心修改] ==========
+// ========== 地区提取函数（保持不变） ==========
 const extractRegion = (location) => {
   if (!location || typeof location !== 'string') return null;
 
@@ -49,7 +50,6 @@ const extractRegion = (location) => {
   const nestedMatch = location.match(/(韶关市)([^市]+?[区市县])/);
   if (nestedMatch && nestedMatch[2]) {
     const region = nestedMatch[2].replace("韶关市", "").trim();
-    // 验证是否为合法区县
     const validRegion = SG_REGIONS.find(r => r.includes(region));
     if (validRegion) return validRegion;
   }
@@ -66,45 +66,49 @@ const extractRegion = (location) => {
   return '未知区县';
 };
 
-// ========== 数据处理流程 ==========
-const processMergedData = (samplingData, assayData) => {
-  // 1. 构建采样点ID到区县的映射
+// ========== 数据处理流程（适配新接口单数据源） ==========
+const processData = (allData) => {
+  // 1. 构建采样点ID到区县的映射（sample_number对应新接口的水样ID）
   const regionMap = new Map();
-  samplingData.forEach(item => {
+  allData.forEach(item => {
     const region = extractRegion(item.sampling_location || '');
-    if (region && region !== '未知区县') {
-      regionMap.set(item.water_sample_ID, region);
+    if (region && region !== '未知区县' && item.sample_number) {
+      regionMap.set(item.sample_number, region);
     }
   });
 
-  // 2. 关联重金属数据与区县
-  const mergedData = assayData.map(item => ({
+  // 2. 关联重金属数据与区县（单条数据已包含所有信息）
+  const mergedData = allData.map(item => ({
     ...item,
-    region: regionMap.get(item.water_sample_ID) || '未知区县'
+    // 通过sample_number关联区县
+    region: regionMap.get(item.sample_number) || '未知区县'
   }));
 
-  // 3. 识别重金属字段
+  // 3. 识别重金属字段（新接口字段如cr_concentration、as_concentration等）
   const metals = Object.keys(mergedData[0] || {})
-    .filter(key => !EXCLUDE_FIELDS.includes(key) && !isNaN(parseFloat(mergedData[0][key])));
+    .filter(key => 
+      !EXCLUDE_FIELDS.includes(key) &&  // 排除非重金属字段
+      !isNaN(parseFloat(mergedData[0][key])) &&  // 确保是数值
+      key.includes('concentration')  // 新接口重金属字段含concentration
+    );
 
   // 4. 按区县分组统计
   const regionGroups = {};
-  const cityWideAverages = {}; // 新增：全市平均值
+  const cityWideAverages = {}; // 全市平均值
   const uniqueSampleIds = new Set();
   
-  // 初始化全市平均值计数器
+  // 初始化统计计数器
   metals.forEach(metal => {
     cityWideAverages[metal] = { sum: 0, count: 0 };
   });
   
   mergedData.forEach(item => {
     const region = item.region;
-
-    if(item.water_sample_ID){
-      uniqueSampleIds.add(item.water_sample_ID);
+    if (item.sample_number) {
+      uniqueSampleIds.add(item.sample_number);
     }
 
-    // 区县统计
+    // 初始化区县分组
     if (!regionGroups[region]) {
       regionGroups[region] = {};
       metals.forEach(metal => {
@@ -112,14 +116,15 @@ const processMergedData = (samplingData, assayData) => {
       });
     }
 
+    // 统计各重金属含量
     metals.forEach(metal => {
       const val = parseFloat(item[metal]);
       if (!isNaN(val)) {
-        // 更新区县统计
+        // 区县统计
         regionGroups[region][metal].sum += val;
         regionGroups[region][metal].count++;
         
-        // 更新全市统计
+        // 全市统计
         cityWideAverages[metal].sum += val;
         cityWideAverages[metal].count++;
       }
@@ -134,15 +139,21 @@ const processMergedData = (samplingData, assayData) => {
   // 6. 添加"全市平均"作为最后一个类别
   regions.push("全市平均");
 
-  // 7. 构建ECharts数据（包括全市平均值）
+  // 7. 构建ECharts数据（处理重金属字段名显示）
   const series = metals.map((metal, idx) => {
+    // 格式化重金属名称（如cr_concentration → Cr）
+    const prefix = metal.split('_')[0]; // 先获取前缀
+    const metalName = prefix 
+    ? prefix[0].toUpperCase() + prefix.slice(1) // 首字母大写 + 剩余字符
+    : ''; // 处理空字符串情况 
+    
     // 计算全市平均值
     const cityWideAvg = cityWideAverages[metal].count 
       ? (cityWideAverages[metal].sum / cityWideAverages[metal].count).toFixed(2) 
       : 0;
     
     return {
-      name: metal,
+      name: metalName, // 显示简化名称（如Cr、As）
       type: 'bar',
       data: regions.map(region => {
         if (region === "全市平均") {
@@ -157,8 +168,8 @@ const processMergedData = (samplingData, assayData) => {
       label: {
         show: true,
         position: 'top',
-        fontSize:14,
-        color:'#333',
+        fontSize: 15,
+        color: '#333',
       }
     };
   });
@@ -166,7 +177,7 @@ const processMergedData = (samplingData, assayData) => {
   return { regions, series, totalSamples };
 };
 
-// ========== ECharts 初始化 ==========
+// ========== ECharts 初始化（保持不变） ==========
 const initChart = ({ regions, series, totalSamples }) => {
   if (!chartRef.value) return;
   if (myChart) myChart.dispose();
@@ -176,8 +187,8 @@ const initChart = ({ regions, series, totalSamples }) => {
     title: { 
       left: 'center',
       subtext: `数据来源: ${totalSamples}个有效检测样本`,
-      subtextStyle:{
-        fontSize:14
+      subtextStyle: {
+        fontSize: 15
       }
     },
     tooltip: { 
@@ -191,10 +202,10 @@ const initChart = ({ regions, series, totalSamples }) => {
           content += `<br><span style="color: #666;">（基于${totalSamples}个样本计算）</span>`;
         }
         
-        return content + params.map(p => `<br>${p.seriesName}: ${p.value} mg/L`).join('');
+        return content + params.map(p => `<br>${p.seriesName}: ${p.value} ug/L`).join('');
       },
-      textSize:{
-        fontSize:14
+      textStyle: {
+        fontSize: 15
       }
     },
     xAxis: {
@@ -203,14 +214,17 @@ const initChart = ({ regions, series, totalSamples }) => {
       axisLabel: { 
         rotate: 45,
         formatter: val => val.replace('韶关市', ''),
-        fontSize:13
+        fontSize: 15
       }
     },
     yAxis: { 
       type: 'value', 
-      name: '浓度(mg/L)' ,
-      axisLabel:{
-        fontSize:13,
+      name: '浓度(ug/L)',
+      nameTextStyle: {
+        fontSize: 15,
+      },
+      axisLabel: {
+        fontSize: 15,
       }
     },
     dataZoom: [{
@@ -222,8 +236,8 @@ const initChart = ({ regions, series, totalSamples }) => {
     legend: { 
       data: series.map(s => s.name), 
       bottom: 10,
-      textStyle:{
-        fontSize:13
+      textStyle: {
+        fontSize: 15
       }
     },
     grid: { 
@@ -237,15 +251,16 @@ const initChart = ({ regions, series, totalSamples }) => {
   myChart.setOption(option);
 };
 
-// ========== 生命周期钩子 ==========
+// ========== 生命周期钩子（适配新接口） ==========
 onMounted(async () => {
   try {
-    const [samplingRes, assayRes] = await Promise.all([
-      axios.get(SAMPLING_API, { timeout: 10000 }),
-      axios.get(ASSAY_API, { timeout: 10000 })
-    ]);
+    // 仅请求新接口
+    const response = await axios.get(NEW_API, { timeout: 10000 });
+    // 从GeoJSON中提取数据（features.properties）
+    const allData = response.data.features.map(feature => feature.properties);
     
-    initChart(processMergedData(samplingRes.data, assayRes.data));
+    // 处理数据并初始化图表
+    initChart(processData(allData));
   } catch (err) {
     error.value = '数据加载失败: ' + (err.message || '未知错误');
     console.error('接口错误:', err);
@@ -254,7 +269,7 @@ onMounted(async () => {
   }
 });
 
-// 响应式布局
+// 响应式布局（保持不变）
 const resizeHandler = () => myChart && myChart.resize();
 onMounted(() => window.addEventListener('resize', resizeHandler));
 onUnmounted(() => window.removeEventListener('resize', resizeHandler));
@@ -263,13 +278,14 @@ onUnmounted(() => window.removeEventListener('resize', resizeHandler));
 <style scoped>
 .region-average-chart {
   width: 100%;
+  height: 500px;
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
 }
 .chart-box {
   width: 100%;
-  height: 600px;
+  height: 500px;
   min-height: 400px;
   background-color: white;
   border-radius: 8px;
@@ -282,6 +298,7 @@ onUnmounted(() => window.removeEventListener('resize', resizeHandler));
   padding: 15px;
   background: rgba(255,255,255,0.8);
   border-radius: 4px;
+  font-size: 16px;
 }
 .error { 
   color: #ff4d4f;

src/views/User/HmOutFlux/irrigationWater/waterdataline.vue → src/components/irrpollution/waterdataline.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="container mx-auto px-4 py-8">
     <div class="bg-white rounded-xl shadow-lg overflow-hidden">
-      <div class="p-6 border-b border-gray-200">
-        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 text-center">水质检测数据列表</h1>
-        <p class="text-gray-500 text-center mt-2">实时监测与分析水质指标</p>
-      </div>
+      
       
       <!-- 加载状态 -->
       <div v-if="loading" class="py-20 flex justify-center items-center">
@@ -81,15 +78,15 @@
         </div>
       </div>
   
-      <!-- 数据表格 + 统计 -->
-  <div class="p-4 bg-gray-50 border-t border-gray-200">
-    <div class="flex flex-col md:flex-row justify-between items-center">
-      <div class="text-sm text-gray-500 mb-2 md:mb-0">
-        共 <span class="font-medium text-gray-900">{{ filteredData.length }}</span> 条数据
+      <!-- 数据统计 -->
+      <div class="p-4 bg-gray-50 border-t border-gray-200">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+          <div class="text-sm text-gray-500 mb-2 md:mb-0">
+            共 <span class="font-medium text-gray-900">{{ filteredData.length }}</span> 条数据
+          </div>
+        </div>
       </div>
     </div>
-</div>
-    </div>
   </div>
 </template>
 
@@ -97,17 +94,16 @@
 import { ref, computed, onMounted } from 'vue';
 import axios from 'axios';
 
-// 定义固定列配置
+// 适配接口的字段映射（关键修改点）
 const displayColumns = ref([
-  { key: 'water_assay_ID', label: '检测ID' },
-  { key: 'pH', label: 'PH值' },
-  { key: 'Cr', label: '铬含量' },
-  { key: 'As', label: '砷含量' },
-  { key: 'Cd', label: '镉含量' },
-  { key: 'Hg', label: '汞含量' },
-  { key: 'Pb', label: '铅含量' },
-  { key: 'sample_code', label: '样本编码' },
-  { key: 'water_sample_ID', label: '水样ID' },
+  { key: 'sample_number', label: '水样ID' }, // 原water_sample_ID对应接口的sample_number
+  { key:'sampling_location',label:'地理位置'},
+  { key: 'ph_value', label: 'PH值' },
+  { key: 'cr_concentration', label: '铬含量(ug/L)' },
+  { key: 'as_concentration', label: '砷含量(ug/L)' },
+  { key: 'cd_concentration', label: '镉含量(ug/L)' },
+  { key: 'hg_concentration', label: '汞含量(ug/L)' },
+  { key: 'pb_concentration', label: '铅含量(ug/L)' },
 ]);
 
 // 状态管理
@@ -117,13 +113,16 @@ const error = ref(null);
 const sortKey = ref('');
 const sortOrder = ref('asc');
 
-// 获取数据
+// 接口请求（关键修改点：URL和数据解析）
 const fetchData = async () => {
   try {
     loading.value = true;
     error.value = null;
-    const response = await axios.get('http://localhost:3000/table/Water_assay_data');
-    waterData.value = response.data.data || response.data;
+    const response = await axios.get(
+      'http://localhost:8000/api/vector/export/all?table_name=water_sampling_data'
+    );
+    // 解析GeoJSON数据：提取features中的properties作为数据项
+    waterData.value = response.data.features.map(feature => feature.properties);
   } catch (err) {
     error.value = err.message || '无法连接到服务器，请检查接口是否可用';
   } finally {
@@ -131,14 +130,14 @@ const fetchData = async () => {
   }
 };
 
-// 过滤全空行
+// 过滤全空行（逻辑保留，自动适配新字段）
 const filteredData = computed(() => {
   return waterData.value.filter(item => {
     return displayColumns.value.some(col => item[col.key] !== null && item[col.key] !== '-');
   });
 });
 
-// 排序功能
+// 排序功能（逻辑保留，自动适配新字段）
 const sortedData = computed(() => {
   if (!sortKey.value) return filteredData.value;
   
@@ -151,7 +150,7 @@ const sortedData = computed(() => {
   });
 });
 
-// 切换排序
+// 切换排序（逻辑保留）
 const sortData = (key) => {
   if (sortKey.value === key) {
     sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
@@ -161,7 +160,7 @@ const sortData = (key) => {
   }
 };
 
-// 组件挂载
+// 组件挂载（逻辑保留）
 onMounted(() => {
   fetchData();
 });
@@ -186,7 +185,7 @@ onMounted(() => {
 
 /* 文字 */
 .text-center { text-align: center; }
-.text-lg { font-size: 1.125rem; }
+.text-lg { font-size: 1rem; }
 .font-bold { font-weight: 700; }
 .text-gray-800 { color: #111827; }
 
@@ -200,7 +199,16 @@ onMounted(() => {
 }
 
 /* 表格 */
-table { width: 100%; }
+table { 
+  width: 100%; 
+  border-collapse: collapse; /* 合并边框线 */
+}
+th, td {
+  border: 1px solid #d1d5db; /* 灰色边框 */
+  text-align: center; /* 内容居中 */
+  padding: 12px 8px; /* 内边距优化 */
+  font-size: 14px;
+}
 .px-6 { padding: 0 1.5rem; }
 .py-4 { padding: 1rem 0; }
 .hover\:bg-gray-50:hover { background-color: #f9fafb; }
@@ -210,12 +218,4 @@ table { width: 100%; }
   .container { padding: 32px 8px; }
   .px-6 { padding: 0 0.75rem; }
 }
-table {
-  border-collapse: collapse; /* 合并边框线 */
-}
-th, td {
-  border: 1px solid #d1d5db; /* 灰色边框 */
-  text-align: center; /* 内容居中 */
-  padding: 12px 8px; /* 内边距优化 */
-}
 </style>

src/components/layout/menuItems.ts

@@ -359,5 +359,6 @@ import {
       icon: List,
       tab: 'dataStatistics'
     }
-  ].filter(tab => !["shuJuKanBan", "mapView", "introduction"].includes(tab.tab));
+  ].filter(({ tab: menuTab }) => !["shuJuKanBan", "mapView", "introduction"].includes(menuTab));
+
   

src/router/index.ts

@@ -92,7 +92,7 @@ const routes = [
       {
         path: "csSampleData",
         name: "csSampleData",
-        component: () => import("@/views/User/HmOutFlux/irrigationWater/crossSectionSampleData.vue"), 
+        component: () => import("@/views/User/HmOutFlux/irrigationWater/crossSection.vue"), 
         meta: { title: "断面采样数据" },
       },
       {

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

@@ -19,7 +19,5 @@ export default {
 </script>
 
 <style scoped>
-  . {
-    
-  }
+
 </style>

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

@@ -1,559 +1,133 @@
 <template>
-  <div class="map-page">
-    <div ref="mapContainer" class="map-container"></div>
-    <!-- 错误提示 -->
-    <div v-if="error" class="error-message">{{ error }}</div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
-import axios from 'axios'
-const isMapReady = ref(false)
-const mapContainer = ref(null)
-const error = ref(null)
-const TMap = ref(null);
-let activeTempMarker = ref(null)
-let infoWindow = ref(null)
-let map = null
-let markersLayer = null
-let soilTypeVectorLayer = null; // 土壤类型多边形图层
-let overlay = null
-const state = reactive({
-  showOverlay: false,
-  showSoilTypes: true,
-  showSurveyData: true,
-  shoeWaterSystem: true,
-  excelData: [], // 用于存储从接口获取的数据
-  lastTapTime: 0
-})
-
-const tMapConfig = reactive({
-  key: import.meta.env.VITE_TMAP_KEY, // 请替换为你的开发者密钥
-  geocoderURL: 'https://apis.map.qq.com/ws/geocoder/v1/'
-})
-
-// 加载SDK的代码保持不变...
-const loadSDK = () => {
-  return new Promise((resolve, reject) => {
-    if (window.TMap?.service?.Geocoder) {
-      console.log('SDK已缓存，直接使用');
-      TMap.value = 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=${tMapConfig.key}&callback=initTMap`
-    window.initTMap = () => {
-      if (!window.TMap?.service?.Geocoder) {
-        console.error('SDK加载后仍无效');
-        reject(new Error('地图SDK加载失败'))
-        return
-      }
-      console.log('SDK动态加载完毕');
-      TMap.value = window.TMap
-      resolve(window.TMap)
-    }
-
-    script.onerror = (err) => {
-      console.error('SDK加载报错', err);
-      reject(`地图资源加载失败: ${err.message}`)
-      document.head.removeChild(script)
-    }
-
-    document.head.appendChild(script)
-  })
-}
-
-// 初始化地图 - 保持大部分不变，增加数据加载
-const initMap = async () => {
-  try {
-    await loadSDK()
-    console.log('开始创建地图实例');
-    
-    map = new TMap.value.Map(mapContainer.value, {
-      center: new TMap.value.LatLng(24.9, 113.9),//前大往下，后大往左
-      zoom: 10,
-      minZoom: 9.25,
-      maxZoom: 11,
-      renderOptions: {
-        antialias: true
-      },
-    })
-    console.log('地图实例创建成功');
+  <div class="page-container">
     
-    // 创建标记点向量图层
-    markersLayer = new TMap.value.MultiMarker({
-      map: map,
-      zIndex: 1000,
-      collision:false,
-      styles: {
-        default: new TMap.value.MarkerStyle({
-          width: 30, // 图标宽度
-          height: 30, // 图标高度
-          anchor: { x: 12.5, y: 12.5 }, // 居中定位
-          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTcuMjdsNi4xOCAzLjYzLTEuNjQtNy4wMyA1LjM0LTQuNjMtNy4xOS0uNjFMMTIgM2wtMy4xOSA2LjYzLTcuMTkuNjFMMTAuNDYgMTMuODkgOC44MiAyMC45IDE4IDE3LjI3eiIgZmlsbD0iI0ZGMDAwMCIvPjwvc3ZnPg=='
-        })
-      }
-    });
-    
-    // 绑定标记点击事件
-    markersLayer.on('click', handleMarkerClick);
-    
-    // 创建土壤类型多边形图层
-    soilTypeVectorLayer = new TMap.value.MultiPolygon({
-      map: map,
-      styles: {
-        default: new TMap.value.PolygonStyle({
-          fillColor: '#cccccc',
-          fillOpacity: 0.4,
-          strokeColor: '#333',
-          strokeWidth: 1
-        })
-      }    
-    });  
-   
-    // 先加载数据，再更新标记
-    await fetchData(); // 新增：获取数据
-    if(state.excelData.length > 0) {
-    const first = state.excelData[0];
-    console.log('第一条数据坐标:', 
-      first.纬度 || first.latitude, 
-      first.经度 || first.longitude
-    );
-  }
-    updateMarkers();   // 更新标记点
-    
-    // 标记地图就绪
-    isMapReady.value = true;
-    console.log('地图初始化完成');
-
-  } catch (err) {
-    isMapReady.value = true;
-    console.error('initMap执行异常：', err);
-    error.value = err.message
-  }
-}
-
-// 新增：从接口获取数据
-const fetchData = async () => {
-  try {
-    const response = await axios.get('http://localhost:3000/table/Atmosphere_summary_data', {
-      timeout: 100000
-    });
-
-    state.excelData = response.data.filter(item => {
-      // 检查数据完整性
-      if(!item['样品编码'] || !item.纬度 || !item.经度) {
-        console.warn(`数据不完整，已跳过: ${item.样品编码 || '未知编码'}`);
-        return false;
-      }
-      
-      const lat = Number(item.纬度);
-      const lng = Number(item.经度);
-      
-      // 验证数值范围
-      const isValid = !isNaN(lat) && !isNaN(lng) && 
-                     lat >= -90 && lat <= 90 && 
-                     lng >= -180 && lng <= 180;
-      
-      if(!isValid) {
-        console.error(`无效经纬度: ${item.样品编码} (${item.纬度}, ${item.经度})`);
-      }
-      return isValid;
-    });
-    
-    console.log('有效数据记录:', state.excelData.length);
-  } catch (err) {
-    console.error('数据请求失败详情:', err.response?.data || err.message);
-    error.value = `数据加载失败: ${err.message}`;
-    
-  }
-}
-
-// 更新标记点 - 保持不变
-const updateMarkers = () => {
-  const coordCount = new Map();
-  const geometries = state.excelData.map(item => {
-    console.log(`ID: ${item.样品编码}, 坐标: (${item.纬度}, ${item.经度})`); // 替换字段名
-    if (!item.样品编码 || !item.纬度 || !item.经度) {
-      console.error(`无效数据项: ${JSON.stringify(item)}`);
-      return null;
-    }
-    const lat = Number(item.纬度);
-    const lng = Number(item.经度);
-
-    if (isNaN(lat) || isNaN(lng)) {
-      console.error(`坐标值非数字: ${item.样品编码} (${item.纬度}, ${item.经度})`);
-      return null;
-    }
-
-    const coordKey = `${lat}_${lng}`;
-    const count = coordCount.get(coordKey) || 0;
-    coordCount.set(coordKey, count + 1);
-
-    let finalLat = lat;
-    let finalLng = lng;
-    
-    // 重复坐标添加偏移
-    if (count > 0) {
-      const latOffset = count * 0.01;  // 南北方向偏移（约11米）
-      const lngOffset = count * 0.02;
-      finalLat = lat + latOffset;
-      finalLng = lng + lngOffset;
-      
-      console.log(`偏移点 ${item.样品编码}: ${lat},${lng} → ${finalLat},${finalLng}`);
-    }
-
-    const position = new TMap.value.LatLng(finalLat, finalLng);
-
-    return {
-      id: item.样品名称,
-      styleId: 'default',
-      position:position, // 替换字段名
-      properties: {
-        title: item.采样 || `采样点 ${item.样品名称}`, 
-        sampler_id: item.样品编码,
-        originalPosition: { lat, lng }
-      }
-    };
-  })
-  
-  markersLayer.setGeometries(geometries);
-  console.log('成功添加标记点数量:', geometries.length);
-};
-
-// Marker点击事件处理 - 保持不变
-const handleMarkerClick = async (e) => {
-  console.log('点击标记点');
-  
-  const marker = e.geometry;
-  if (!marker) {
-    console.error('未获取到标记点对象');
-    return;
-  }
-
-  // 关闭之前的信息窗口
-  if (infoWindow.value) {
-    infoWindow.value.close();
-    infoWindow.value = null;
-  }
-  
-  // 显示加载中
-  infoWindow.value = new TMap.value.InfoWindow({
-    map: map,
-    position: marker.position,
-    content: '<div style="padding:12px;text-align:center">加载数据中...</div>',
-    //offset: { x: 0, y: -32 }
-  });
-  infoWindow.value.open();
-
-  try {
-    const markerId = marker.id.trim();
-    console.log('点击标记点样品名称:', markerId);
-    
-    // 直接从本地数据查找，无需二次请求
-    const matchedData = state.excelData.find(item => 
-      item.样品名称.trim() === markerId
-    );
-
-    if (!matchedData) {
-      console.error("无法匹配的数据列表:", state.excelData.map(i => i.样品名称));
-      throw new Error(`未找到样品名称为 ${markerId} 的监测数据`);
-    }
+   <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>
 
-    // 创建信息窗口内容
-    const content = `
-      <div class="water-info-window">
-        <h3 class="info-title">${matchedData.采样}</h3>
-        <div class="info-row">
-          <span class="info-label">采样点ID:</span>
-          <span class="info-value">${matchedData.样品名称}</span>
-        </div>
+   <div class="point-map">
+    <div class="component-title">采样点地图展示</div>
+    <div class="map-holder">
+      <atmsamplemap :calculation-method="calculationMethod"/>
+     </div>
+   </div>
 
-        <div class="info-row">
-          <span class="info-label">样品编号:</span>
-          <span class="info-value">${matchedData.样品编号}</span>
-        </div>
   
-        <div class="contaminant-grid" style="grid-template-columns: repeat(2, 1fr); gap: 8px;">
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Cr mg/kg:</span>
-            <span class="contaminant-value">${matchedData['Cr mg/kg']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Cr ug/m3:</span>
-            <span class="contaminant-value">${matchedData['Cr ug/m3']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">As mg/kg:</span>
-            <span class="contaminant-value">${matchedData['As mg/kg']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">As ug/m3:</span>
-            <span class="contaminant-value">${matchedData['As ug/m3']}</span>
-          </div>
-          
-          <div class="contaminant-item">
-            <span class="contaminant-name">Cd mg/kg:</span>
-            <span class="contaminant-value">${matchedData['Cd mg/kg']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Cd ug/m3:</span>
-            <span class="contaminant-value">${matchedData['Cd ug/m3']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Hg mg/kg:</span>
-            <span class="contaminant-value">${matchedData['Hg mg/kg']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Hg ug/m3:</span>
-            <span class="contaminant-value">${matchedData['Hg ug/m3']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Pb mg/kg:</span>
-            <span class="contaminant-value">${matchedData['Pb mg/kg']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">Pb ug/m3:</span>
-            <span class="contaminant-value">${matchedData['Pb ug/m3']}</span>
-          </div>
-          
-          <div class="contaminant-item">
-            <span class="contaminant-name">颗粒物的重量 mg:</span>
-            <span class="contaminant-value">${matchedData['颗粒物的重量 mg']}</span>
-          </div>
-
-          <div class="contaminant-item">
-            <span class="contaminant-name">标准体积 m3:</span>
-            <span class="contaminant-value">${matchedData['标准体积 m3']}</span>
-          </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>
+<!--污染企业-->
 
-          <div class="contaminant-item">
-            <span class="contaminant-name">颗粒物浓度ug/m3:</span>
-            <span class="contaminant-value">${matchedData['颗粒物浓度ug/m3']}</span>
-          </div>
+<script setup>
+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';
 
-        </div>
-      </div>
-    `;
-    
-    // 更新信息窗口
-    infoWindow.value.setContent(content);
-    
-  } catch (error) {
-    console.error('API请求失败:', error);
-    
-    // 显示错误信息
-    const errorContent = `
-      <div style="padding:12px;color:red">
-        <h3>${marker.properties.title}</h3>
-        <p>获取数据失败: ${error.message}</p>
-      </div>
-    `;
-    
-    infoWindow.value.setContent(errorContent);
-  }
-}
+const calculationMethod = ref('weight')
 
-// 其余函数保持不变...
-const manageTempMarker = {
-  add: (lat, lng, phValue) => {
-    if (activeTempMarker.value) {
-      markersLayer.remove("-999")
-    }
-    
-    // 确保已添加临时样式
-    if (!markersLayer.getStyles().temp) {
-      markersLayer.setStyles({
-        temp: new TMap.value.MarkerStyle({
-          width: 30,
-          height: 30,
-          anchor: { x: 12.5, y: 12.5 },
-          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkg2Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDEyYzEuMSAwIDIgLS45IDItMnYtNGMwLTEuMS0uOS0yLTItMmgtMnY0aC00di00SDEyVjJ6bTAgMTZINnYtOEgxOFYxOHoiIGZpbGw9IiNGRjAwMDAiLz48L3N2Zz4='
-        })
-      });
-    }
-    
-    const tempMarker = markersLayer.add({
-      id: "-999",
-      position: new TMap.value.LatLng(lat, lng),
-      styleId: 'temp',
-      properties: {
-        title: '克里金插值',
-        phValue: parseFloat(phValue).toFixed(2),
-        isTemp: true
-      }
-    })
-    activeTempMarker.value = tempMarker
-  },
-  remove: () => {
-    if (activeTempMarker.value) {
-      markersLayer.remove("-999")
-      activeTempMarker.value = null
-    }
-  }
-}
 
-onMounted(async () => {
-  console.log('开始执行 onMounted');
-  
-  try {
-    await initMap()
-    console.log('地图初始化完成');
-  } catch (err) {
-    console.error('onMounted执行异常', err);
-    error.value = err.message
-  }
-})
-
-onBeforeUnmount(() => {
-  if (activeTempMarker.value) {
-    manageTempMarker.remove()
-  }
-  if (markersLayer) markersLayer.setMap(null)
-  if (overlay) overlay.setMap(null)
-  if (infoWindow.value) {
-    infoWindow.value.close()
-    infoWindow.value = null
-  }
-  if (soilTypeVectorLayer) soilTypeVectorLayer.setMap(null)
-})
 </script>
 
-<style>
-/* 原有样式保持不变，修改以下部分 */
-.error-message {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 12px 20px;
-  background-color: #ff4444;
-  color: white;
-  border-radius: 4px;
-  z-index: 9999;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-  animation: fadein 0.5s, fadeout 0.5s 4.5s;
-}
-
-@keyframes fadein {
-  from { top: 0; opacity: 0; }
-  to { top: 20px; opacity: 1; }
-}
-
-@keyframes fadeout {
-  from { top: 20px; opacity: 1; }
-  to { top: 0; opacity: 0; }
-}
-
-.map-page {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-}
-
-.map-container {
-  width: 100%;
-  height: 100vh ;
-  min-height: 600px;
-  pointer-events: all;
-}
-
-.contaminants {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2px;
-}
-
-/* 窗口容器：精准控制尺寸 */
-.water-info-window {
-  max-width: 340px !important;
-  width: 100%;
-  height: auto;
-  padding: 8px;
-  box-sizing: border-box;
-  background: #FFFFFF;
-  border-radius: 8px;
-  box-shadow: 0 3px 12px rgba(0, 32, 71, 0.1);
-  border: 1px solid #e5e7eb;
-  overflow: hidden !important;
-}
-
-/* 标题区样式 */
-.info-title {
-  font-size: 0.9rem;
-  padding: 6px 8px;
-  letter-spacing: 0.2px;
-  border-bottom: 1px solid #f1f2f6;
-  margin: 0 0 8px 0;
-}
-
-/* 基础数据行 */
-.info-row {
+<style scoped>
+.page-container {
   display: flex;
-  align-items: center;
-  margin: 4px 0;
-  padding-left: 8px;
-}
-
-.info-label {
-  font-size: 0.8rem;
-  padding-right: 6px;
-  flex: 0 0 80px;
+  flex-direction: column;
+  height: 100vh; /* 整屏高度 */
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  gap: 20px;
+  margin: 0;
 }
 
-.info-value {
-  font-size: 0.8rem;
-  padding: 2px 6px;
-  border-left: 2px solid #e5e7eb;
+.calculation-select {
+  padding: 12px 24px;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+  font-size: 16px;
+  color: #333;
+  background-color: #fff;
+  cursor: pointer;
 }
-
-/* 污染物网格：优化布局使名称和数值在同一行并放大字体 */
-.contaminant-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 4px; /* 减小间距以补偿字体增大 */
-  margin: 4px 0;
+.calculation-select:focus {
+  outline: none;
+  border-color: #1e88e5;
 }
 
-/* 污染物项：确保名称和数值在同一行 */
-.contaminant-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 3px 5px; /* 减小内边距 */
-  background: #f9fafb;
-  border-radius: 4px;
-}
 
-/* 增大字体大小，保持在同一行 */
-.contaminant-name {
-  font-size: 0.8rem; /* 增大字体 */
-  color: #6b7280;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  margin-right: 5px;
-}
-
-.contaminant-value {
-  font-size: 0.8rem; /* 增大字体 */
-  background: #e5e7eb;
-  padding: 2px 6px;
-  border-radius: 3px;
-  min-width: 40px;
-  text-align: center;
-  flex-shrink: 0;
-}
-</style>
+.map-holder {
+  position: relative;
+  height: 450px;
+  z-index: 100; /* 保持地图在中间层级 */
+  overflow: visible; /* 允许内容溢出 */
+}
+.point-map {
+    flex: 0 0 70%;
+    margin-bottom: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,1);
+    overflow: visible;
+}
+
+.point-line {
+    background-color: white;
+    border-radius: 12px;/*圆角 */
+    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
+    padding: 16px;/*内部间距 */
+    box-sizing: border-box;
+}
+.charts-line{
+  background-color: white;
+  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;    /* 轻微圆角，比直角更柔和 */
+}
+
+</style>

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

@@ -1,218 +0,0 @@
-<template>
-  <div class="container mx-auto px-4 py-8">
-    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
-      <div class="p-6 border-b border-gray-200">
-        <h1 class="text-[clamp(1rem,3vw,2.5rem)] font-bold text-gray-800 text-center">大气污染公司列表</h1>
-      </div>
-      
-      <!-- 加载状态 -->
-      <div v-if="loading" class="py-20 flex justify-center items-center">
-        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-      
-      <!-- 错误状态 -->
-      <div v-else-if="error" class="p-8 bg-red-50 border-l-4 border-red-400 text-red-700">
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <i class="fa fa-exclamation-triangle text-red-500 text-xl"></i>
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-800">加载失败</h3>
-            <div class="mt-2 text-sm text-red-700">
-              <p>{{ error }}</p>
-            </div>
-            <div class="mt-4">
-              <button @click="fetchData" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150 ease-in-out">
-                <i class="fa fa-refresh mr-2"></i>重试
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- 数据表格 -->
-      <div v-else-if="filteredData.length > 0" class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50">
-            <tr>
-              <th 
-                v-for="(col, index) in displayColumns" 
-                :key="index"
-                class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
-                @click="sortData(col.key)"
-              >
-                <div class="flex items-center justify-between">
-                  {{ col.label }}
-                  <span v-if="sortKey === col.key" class="ml-1 text-gray-400">
-                    {{ sortOrder === 'asc' ? '↑' : '↓' }}
-                  </span>
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody class="bg-white divide-y divide-gray-200">
-            <tr v-for="(item, rowIndex) in sortedData" :key="rowIndex" 
-                class="hover:bg-gray-50 transition-colors duration-150">
-              <td 
-                v-for="(col, colIndex) in displayColumns" 
-                :key="colIndex"
-                class="px-6 py-4 whitespace-nowrap text-sm"
-              >
-                <div class="flex items-center">
-                  <div class="text-gray-900 font-medium">
-                    {{ item[col.key] !== null ? item[col.key] : '-' }}
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      
-      <!-- 空数据状态 -->
-      <div v-else class="p-8 text-center">
-        <div class="flex flex-col items-center justify-center">
-          <div class="text-gray-400 mb-4">
-            <i class="fa fa-database text-5xl"></i>
-          </div>
-          <h3 class="text-lg font-medium text-gray-900 mb-1">暂无有效数据</h3>
-          <p class="text-gray-500">已过滤全空行</p>
-        </div>
-      </div>
-  
-      <!-- 数据表格 + 统计 -->
-  <div class="p-4 bg-gray-50 border-t border-gray-200">
-    <div class="flex flex-col md:flex-row justify-between items-center">
-      <div class="text-sm text-gray-500 mb-2 md:mb-0">
-        共 <span class="font-medium text-gray-900">{{ filteredData.length }}</span> 条数据
-      </div>
-    </div>
-</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import axios from 'axios';
-
-// 定义固定列配置
-const displayColumns = ref([
-  { key: '污染源序号', label: '污染源序号' },
-  { key: '公司', label: '公司' },
-  { key: '类型', label: '类型' },
-  { key: '所属区县', label: '所属区县' },
-  { key: '大气颗粒物排放(t/a)', label: '大气颗粒物排放(t/a)' },
-  { key: '经度', label: '经度' },
-  { key: '纬度', label: '纬度' },
-]);
-
-// 状态管理
-const waterData = ref([]);
-const loading = ref(true);
-const error = ref(null);
-const sortKey = ref('');
-const sortOrder = ref('asc');
-
-// 获取数据
-const fetchData = async () => {
-  try {
-    loading.value = true;
-    error.value = null;
-    const response = await axios.get('http://localhost:3000/table/Atmosphere_company_data');
-    waterData.value = response.data.data || response.data;
-  } catch (err) {
-    error.value = err.message || '无法连接到服务器，请检查接口是否可用';
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 过滤全空行
-const filteredData = computed(() => {
-  return waterData.value.filter(item => {
-    return displayColumns.value.some(col => item[col.key] !== null && item[col.key] !== '-');
-  });
-});
-
-// 排序功能
-const sortedData = computed(() => {
-  if (!sortKey.value) return filteredData.value;
-  
-  return [...filteredData.value].sort((a, b) => {
-    const valA = a[sortKey.value];
-    const valB = b[sortKey.value];
-    if (valA < valB) return sortOrder.value === 'asc' ? -1 : 1;
-    if (valA > valB) return sortOrder.value === 'asc' ? 1 : -1;
-    return 0;
-  });
-});
-
-// 切换排序
-const sortData = (key) => {
-  if (sortKey.value === key) {
-    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
-  } else {
-    sortKey.value = key;
-    sortOrder.value = 'asc';
-  }
-};
-
-// 组件挂载
-onMounted(() => {
-  fetchData();
-});
-</script>
-
-<style scoped>
-/* 布局 */
-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 32px 16px;
-}
-.overflow-x-auto { overflow-x: auto; }
-
-/* 卡片 */
-.bg-white { background-color: #fff; }
-.rounded-xl { border-radius: 1rem; }
-.shadow-lg { 
-  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 
-             0 4px 6px -4px rgba(0,0,0,0.1); 
-}
-
-/* 文字 */
-.text-center { text-align: center; }
-.text-lg { font-size: 1.125rem; }
-.font-bold { font-weight: 700; }
-.text-gray-800 { color: #111827; }
-
-/* 动画 */
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* 表格 */
-table { width: 100%; }
-.px-6 { padding: 0 1.5rem; }
-.py-4 { padding: 1rem 0; }
-.hover\:bg-gray-50:hover { background-color: #f9fafb; }
-
-/* 响应式 */
-@media (max-width: 640px) {
-  .container { padding: 32px 8px; }
-  .px-6 { padding: 0 0.75rem; }
-}
-table {
-  border-collapse: collapse; /* 合并边框线 */
-}
-th, td {
-  border: 1px solid #d1d5db; /* 灰色边框 */
-  text-align: center; /* 内容居中 */
-  padding: 12px 8px; /* 内边距优化 */
-}
-</style>

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

@@ -2,24 +2,30 @@
   <div class="page-container">
     
    <div class="point-map">
-    <div class="component-title">采样点地图展示</div>
-   <AtmCompanytencentMap/>
+    <div class="component-title">涉重企业地图展示</div>
+    <div class="map-holder">
+      <atmcompanymap/>
+    </div>
    </div>
 
   
    <div class="point-line">
-    <div class="component-title">采样点数据列表展示</div>
+    <div class="component-title">涉重企业数据列表展示</div>
     <atmcompanyline/>
    </div>
 
+   <div>
+    <div class="component-title">各区县企业平均大气颗粒物排放（t/a）</div>
+    <HeavyMetalEnterprisechart/>
+   </div>
   </div>
 </template>
+<!--污染企业-->
 
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue';
-import * as echarts from 'echarts';
-import atmcompanyline from './atmcompanyline.vue';
-import AtmCompanytencentMap from './atmCompanytencentMap.vue';
+import atmcompanyline from '@/components/atmpollution/atmcompanyline.vue';
+import atmcompanymap from '@/components/atmpollution/atmcompanymap.vue';
+import HeavyMetalEnterprisechart from '@/components/atmpollution/heavyMetalEnterprisechart.vue';
 
 
 
@@ -36,15 +42,24 @@ import AtmCompanytencentMap from './atmCompanytencentMap.vue';
   background-color: #f5f7fa;
   gap: 20px;
   margin: 0;
+  position: relative !important; /* 防止被 Leaflet 修改 */
+  overflow: visible !important; /* 确保标题不被裁剪 */
+}
+
+.map-holder {
+  position: relative ;
+  height: 450px;
+  z-index: 100; /* 保持地图在中间层级 */
+  overflow: visible; /* 允许内容溢出 */
 }
 
 .point-map {
-    flex: 0 0 70%;
+  flex: 0 0 70%;
     margin-bottom: 20px;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,1);
-    overflow: hidden;
+    overflow: visible !important;
 }
 
 .point-line {
@@ -72,7 +87,7 @@ import AtmCompanytencentMap from './atmCompanytencentMap.vue';
   position: relative;      /* 为伪元素定位做准备 */
 
   /* 文字样式：简约但醒目 */
-  font-size: 1.7rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
+  font-size: 1.5rem;      /* 稍小一号，更克制（原1.5rem→1.25rem） */
   font-weight: 600;        /* 适度加粗，比正文突出但不夸张 */
   color: #1e88e5;          /* 统一蓝色，和方块颜色呼应 */
   line-height: 1.2;        /* 紧凑行高，避免臃肿 */

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

@@ -0,0 +1,64 @@
+<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>
+
+</template>
+
+<script setup lang="ts">
+import CrossSectionSamplelineData from '@/components/irrpollution/crossSectionSamplelineData.vue'
+import CrossSetionData1 from '@/components/irrpollution/crossSetionData1.vue';
+import CrossSetionData2 from '@/components/irrpollution/crossSetionData2.vue';
+import crosssectionmap from '@/components/irrpollution/crosssectionmap.vue';
+
+</script>
+
+<style scoped>
+.map-holder {
+  position: relative;
+  height: 600px; /* 减去标题高度，避免覆盖 */
+  overflow: visible;
+  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 {
+  content: "";
+  position: absolute;
+  left: 0;                /* 靠最左侧 */
+  top: 50%;              /* 垂直居中 */
+  transform: translateY(-50%);
+  width: 12px;           /* 方块大小，适中即可 */
+  height: 12px;
+  background-color: #1e88e5; /* 和文字同色，统一感 */
+  border-radius: 2px;    /* 轻微圆角，比直角更柔和 */
+}
+</style>

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

@@ -1,65 +1,86 @@
 <template>
   <div class="page-container">
-    <div class="main-content">
-      <div class="header">
+    <div class="header">
         <h1>灌溉水采样点分析系统</h1>
         <p>韶关市水环境重金属监测数据可视化分析平台</p>
       </div>
-      
-      <div class="content-wrapper">
-        <!-- 第一行：采样点地图 -->
-        <div class="single-row">
-          <div class="component-title">采样点地图展示</div>
-          <div class="map-container">
-            <TencentMapView/>
-          </div>
-        </div>
-
-        <!-- 第二行：数据列表 -->
-        <div class="single-row">
-          <div class="component-title">采样点数据列表展示</div>
-          <div class="data-container">
-            <Waterdataline/>
-          </div>
-        </div>
-
-        <!-- 第三行：浓度图表 -->
-        <div class="single-row">
-          <div class="component-title">韶关市各区县重金属平均浓度</div>
-          <div class="chart-container">
-            <Waterassaydata2/>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <div class="footer">
-      <p>© 2023 水环境重金属监测分析系统 | 环境科学研究院</p>
+
+  <div class="main-content">
+   <div class="point-map">
+    <div class="component-title">采样点地图展示</div>
+    <div class="map-holder">
+        <irrwatermap/>
     </div>
+   </div>
+
+  
+   <div class="point-line">
+    <div class="component-title">采样点数据列表展示</div>
+    <Waterdataline/>
+   </div>
+
+   <div class="charts-line">
+    <div class="component-title">韶关市各区县重金属平均浓度</div>
+    <Waterassaydata2/>
+   </div>
+  </div>
   </div>
 </template>
 
 <script setup>
-import TencentMapView from './tencentMapView.vue';
-import Waterdataline from './waterdataline.vue';
-import Waterassaydata2 from './waterassaydata2.vue';
+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;
+}
 .page-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   padding: 20px;
   box-sizing: border-box;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  background-color: #f5f7fa;
+  gap: 20px;
+  margin: 0;
+  position: relative !important; /* 防止被 Leaflet 修改 */
+  overflow: visible !important; /* 确保标题不被裁剪 */
 }
 
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.point-map {
+    flex: 2; /* 自适应剩余空间 */
+  min-height: 600px; /* 最小高度保证显示 */
+  max-height: 70vh; /* 最大高度限制，避免溢出 */
+  margin-bottom: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 弱化阴影，避免视觉冲突 */
+  position: relative;
+  overflow: hidden; /* 隐藏超出容器的内容 */
+}
+
+.point-line {
+    background-color: white;
+    border-radius: 12px;/*圆角 */
+    box-shadow: 0 2px 8px rgba(0, 0,0, 0.08);
+    padding: 16px;/*内部间距 */
+    box-sizing: border-box;
+}
+.charts-line{
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: 16px;
+  box-sizing: border-box;
   max-width: 1800px;
   margin: 0 auto;
   width: 100%;
@@ -116,16 +137,17 @@ import Waterassaydata2 from './waterassaydata2.vue';
 }
 
 .component-title {
-  text-align: left;
-  margin: 0 0 20px 0;
-  padding: 15px 15px 15px 24px;
-  position: relative;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #1e88e5;
-  line-height: 1.2;
-  background-color: rgba(30, 136, 229, 0.08);
-  border-bottom: 1px solid rgba(30, 136, 229, 0.15);
+  /* 基础布局：左对齐 + 紧凑间距 */
+  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;        /* 紧凑行高，避免臃肿 */
 }
 
 .component-title::before {

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

@@ -1,1045 +0,0 @@
-<template>
-  <div class="map-page">
-    <div ref="mapContainer" 
-     class="map-container"
-    ></div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
-import axios from 'axios'
-import {wgs84togcj02} from 'coordtransform';
-
-const farmlandLayer = ref(null);
-const isMapReady = ref(false)
-const mapContainer = ref(null)
-const error = ref(null)
-const TMap = ref(null);
-let activeTempMarker = ref(null)
-let infoWindow = ref(null)
-let map = null
-let markersLayer = null
-let soilTypeVectorLayer=null;//土壤类型多边形图层
-let waterSystemLayer = null;
-const state = reactive({
-  showOverlay: false,
-  showSoilTypes: true,
-  showSurveyData: true,
-  shoeWaterSystem:true,
-  excelData: [],
-  lastTapTime: 0
-})
-
-
-const tMapConfig = reactive({
-  key: import.meta.env.VITE_TMAP_KEY, // 请替换为你的开发者密钥
-  geocoderURL: 'https://apis.map.qq.com/ws/geocoder/v1/'
-})
-
-
-
-let sdkLoaded = false; // 新增：标记 SDK 是否已加载
-const loadSDK = () => {
-  return new Promise((resolve, reject) => {
-    if (sdkLoaded) { // 已加载则直接返回
-      resolve(window.TMap);
-      return;
-    }
-    // 移除旧脚本（避免重复加载）
-    const oldScript = document.querySelector('script[src*="map.qq.com"]');
-    if (oldScript) oldScript.remove();
-    
-    const script = document.createElement('script');
-    script.src = `https://map.qq.com/api/gljs?v=2.exp&libraries=basic,service,vector&key=${tMapConfig.key}&callback=initTMap`;
-    
-    window.initTMap = () => {
-      sdkLoaded = true; // 标记为已加载
-      if (!window.TMap?.service?.Geocoder) {
-        reject(new Error('地图SDK加载失败'));
-        return;
-      }
-      TMap.value = window.TMap;
-      resolve(window.TMap);
-    };
-    
-    script.onerror = (err) => {
-      reject(`地图资源加载失败: ${err.message}`);
-      document.head.removeChild(script);
-    };
-    document.head.appendChild(script);
-  });
-};
-
-const WATER_SAMPLING_API='http://localhost:3000/table/Water_sampling_data';
-const fetchWaterSamplingData = async ()=>{
-  try{
-    const response = await axios.get(WATER_SAMPLING_API);
-    return response.data.data || response.data;
-  }catch(err){
-    console.error("接口请求失败：",err);
-    throw new Error(`获取水样数据失败：${err.message || '网络错误'}`)
-  }
-};
-
-const initData =async ()=>{
-  try{
-    const rawData = await fetchWaterSamplingData();
-    if(!Array.isArray(rawData)){
-      throw new Error('接口返回数据格式错误');
-    }
-
-    state.excelData = rawData.map(item=>{
-      const lat=Number(item.latitude);
-      const lng=Number(item.longitude);
-
-      if(isNaN(lat)||isNaN(lng)){
-        console.error('无效经纬度数据',item);
-        return null;
-      }
-
-      return{
-        ...item,
-        latitude:lat,
-        longitude:lng,
-      };
-    }).filter(item=>item !==null)
-    console.log('成功加载${state.excelData.length}条有效数据');
-  }catch(err){
-    console.error('数据初始化失败：',err);
-    error.value = err.message;
-    state.excelData=[];
-  }
-}
-
-// 初始化地图
-const initMap = async () => {
-  try {
-    if (map) {
-      map.destroy();
-      map = null;
-    }
-    await loadSDK()
-    //console.log('开始创建地图实例');
-    
-    map = new TMap.value.Map(mapContainer.value, {
-      center: new TMap.value.LatLng(24.55,114.2),//前大往下，后大往左
-      zoom: 9,
-      minZoom:8.5,
-      maxZoom:12,
-      renderOptions: {
-        preserveDrawingBuffer: true, // 必须开启以支持截图
-        antialias: true
-      },
-      restrictBounds: new TMap.value.LatLngBounds(
-    new TMap.value.LatLng(24.8, 113.7), // 西南角（最南最西）
-    new TMap.value.LatLng(25.2, 114.0)  // 东北角（最北最东）
-  )
-    })
-    //console.log('地图实例创建成功，开始创建markersLayer');
-    
-     if (markersLayer) {
-    markersLayer.setMap(null);
-    markersLayer = null;
-  }
-    // 创建标记点向量图层
-  markersLayer = new TMap.value.MultiMarker({
-  map: map,
-  zIndex:1000,
-  styles: {
-    default: new TMap.value.MarkerStyle({
-      width: 30, // 图标宽度
-      height: 30, // 图标高度
-      anchor: { x: 12.5, y: 12.5 }, // 居中定位
-      src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTcuMjdsNi4xOCAzLjYzLTEuNjQtNy4wMyA1LjM0LTQuNjMtNy4xOS0uNjFMMTIgM2wtMy4xOSA2LjYzLTcuMTkuNjFMMTAuNDYgMTMuODkgOC44MiAyMC45IDE4IDE3LjI3eiIgZmlsbD0iI0ZGMDAwMCIvPjwvc3ZnPg=='
-      })
-    }
-  });
-    console.log('markersLayer是否绑定地图：',markersLayer.getMap() === map);
-    
-
-    // 创建土壤类型多边形图层
-    soilTypeVectorLayer = new TMap.value.MultiPolygon({
-      map: map,
-      styles: {
-        default: new TMap.value.PolygonStyle({
-          fillColor: '#cccccc',
-          fillOpacity: 0.4,
-          strokeColor: '#333',
-          strokeWidth: 1
-        })
-      }    
-    });
-    
-  if (typeof handleMarkerClick === 'function' && markersLayer) {
-     markersLayer.on('click', handleMarkerClick); 
-     console.log('[地图] 标记点点击事件绑定成功');
-  }
-    await initData()
-    updateMarkers()
-    // 在updateMarkers()后执行
-   // console.log(markersLayer.getStyles());
-    //console.log(document.querySelector('.tmap-marker img')); 
-    
-
-     // 6. 绑定事件
-    map.on('click', handleMapClick);    
-    //console.log('地图实例创建完成，开始加载水系图');
-    await loadWaterSystemGeoJSON(); // 等待水系图加载完成
-
-    // 标记地图就绪
-    isMapReady.value = true;
-    //console.log('地图初始化完成（含水系图）');
-
-
-    // 新增地图就绪状态监听
-    map.on('idle', () => {
-      isMapReady.value = true;
-      //console.log('地图初始化完成');
-      //console.log('标记点图层初始化:',markersLayer.value);
-    })
-
-  } catch (err) {
-    isMapReady.value = true;
-    console.error('initMap执行异常：',err);
-    error.value = err.message
-  }
-}
-
-// 加载水系 GeoJSON 并添加到地图
-const loadWaterSystemGeoJSON = async () => {
-  try {
-    // 1. 请求 GeoJSON 文件（路径根据实际存放位置修改，如 public 目录下的 water_system.geojson）
-    const response = await fetch('/data/韶关市河流水系图.geojson');
-    const geojson = await response.json();
-    //console.log('水系 GeoJSON 加载成功，要素数量：', geojson.features.length);
-
-    // 2. 销毁旧图层（避免重复加载）
-    if (waterSystemLayer) {
-      waterSystemLayer.setMap(null);
-      waterSystemLayer = null;
-    }
-
-    // 3. 根据 GeoJSON 类型创建图层（水系通常是 LineString，用 MultiPolyline）
-    waterSystemLayer = new TMap.value.MultiPolyline({
-      map: map, // 绑定到地图实例
-      styles: {
-        default: new TMap.value.PolylineStyle({
-          color: '#0066cc', // 水系线条颜色（蓝色）
-          width: 2,         // 线条宽度
-          opacity: 0.8,     // 透明度
-          lineCap: 'round', // 线条端点圆润
-          lineJoin: 'round' // 线条拐角圆润
-        })
-      },
-      geometries: geojson.features
-        .filter(feature =>{
-    const type = feature.geometry.type;
-    //console.log('要素类型:', type); // 调试：打印每个要素的类型
-    return type === 'LineString' || type === 'MultiLineString';
-     }) // 筛选线要素
-        .map(feature => {
-          let paths = [];
-          if (feature.geometry.type === 'LineString') {
-          paths = feature.geometry.coordinates.map(coord => {
-           const [gcjLng, gcjLat] = wgs84togcj02(coord[0], coord[1]); // WGS84 → GCJ02
-            return new TMap.value.LatLng(gcjLat, gcjLng);
-          });
-           } else if (feature.geometry.type === 'MultiLineString') {
-           paths = feature.geometry.coordinates.map(line => 
-           line.map(coord => {
-           const [gcjLng, gcjLat] = wgs84togcj02(coord[0], coord[1]);
-           return new TMap.value.LatLng(gcjLat, gcjLng);
-    })
-  );
-}
-    //console.log('转换后的路径长度:', paths.length); // 调试：确保有坐标
-    return {
-      id: feature.id || `water_${Date.now()}`,
-      styleId: 'default',
-      paths: paths,
-      properties: feature.properties
-    };
-        })
-    });
-
-   // console.log('水系图层加载完成');
-
-    // 4. 修正：遍历几何要素，合并边界
-    if (waterSystemLayer) {
-      const geometries = waterSystemLayer.getGeometries(); // 获取所有几何要素
-      if (geometries.length === 0) {
-        console.warn('水系图层无有效几何要素');
-        return;
-      }
-
-      // 初始化边界为第一个要素的边界
-      let bounds = geometries[0].getBounds(); 
-      // 合并剩余要素的边界
-      for (let i = 1; i < geometries.length; i++) {
-        bounds.extend(geometries[i].getBounds()); 
-      }
-
-      // 适配地图视野
-      map.fitBounds(bounds, { padding: [50, 50] }); 
-    }
-
-  } catch (err) {
-    console.error('水系 GeoJSON 加载失败：', err);
-    error.value = `水系图加载失败：${err.message}`;
-  }
-};
-
-
-
-
-// 更新标记点，添加Label显示
-const updateMarkers = () => {
-  // 正确的标记点创建方式
-  const geometries = state.excelData.map(item => {
-   // console.log(`'原始ID:'"${item.water_sample_ID}"`);
-    //console.log(`坐标验证：lat=${item.latitude},lng=${item.longitude}`);
-    
-    return {
-      id: item.water_sample_ID,
-      styleId: 'default',
-      position: new TMap.value.LatLng( item.latitude,item.longitude),
-      properties: {
-        title: item.sampling_location,
-        sampler_id:item.water_sample_ID,
-      }
-    };
-  })
-  
-  // 一次性设置所有标记
-  markersLayer.setGeometries(geometries);
-};
-
-const API_BASE_URL = 'http://localhost:3000/table/Water_assay_data'; 
-
-// 新增Marker点击事件处理
-const handleMarkerClick = async(e) => {
-  //console.log('点击事件已发生');
-  
-  const marker = e.geometry;
-  const markerId=marker.id.trim();
-
-  if (!marker) {
-    //console.error('未获取到标记点对象');
-    return;
-  }
-
-  // 关闭之前的信息窗口
-  if (infoWindow.value) {
-    infoWindow.value.close();
-    infoWindow.value=null;
-  }
-   // 显示加载中的信息窗口
-  infoWindow.value = new TMap.value.InfoWindow({
-    map: map,
-    position: marker.position,
-    content: '<div style="padding:12px;text-align:center">加载数据中...</div>',
-    // offset: { x: 0, y: -32 }
-  });
-  infoWindow.value.open();
-
-  try {
-    // 调试信息：显示当前点击的标记点ID
-    //console.log('点击标记点ID:', markerId);
-    //console.log('请求URL:', `${API_BASE_URL}?water_sample_ID=eq.${markerId}`);
-    
-    // 调用API获取水质数据 - 使用 markerId 而不是 marker.id
-    const response = await axios.get(API_BASE_URL, {
-      params: {
-        water_sample_ID: `eq.${markerId}`
-      },
-      timeout: 5000
-    });
-    
-    //console.log('API响应数据：', response.data);
-
-    // 关键：手动筛选出 water_sample_ID 匹配的第一条数据
-  const matchedData = response.data.find(item => 
-    item.water_sample_ID.trim() === markerId
-  );
-
-  if (!matchedData) {
-    throw new Error(`未找到采样点 ${markerId} 的监测数据`);
-  }
-
-    // 获取第一条数据
-    const apiData = matchedData;
-    
-    // 调试信息：显示获取到的数据ID
-    //console.log('获取到的水质数据ID:', apiData.water_sample_ID);
-    
-    // 创建信息窗口内容 - 使用 marker.properties.title 确保显示正确位置
-    const content = `
-  <div class="water-info-window">
-    <!-- 标题区 -->
-    <h3 class="info-title">${marker.properties.title}</h3>
-    
-    <!-- 基础信息区 -->
-    <div class="info-row">
-      <span class="info-label">采样点ID:</span>
-      <span class="info-value">${apiData.water_sample_ID}</span>
-    </div>
-    <div class="info-row">
-      <span class="info-label">样本编号:</span>
-      <span class="info-value">${apiData.sample_code || '无'}</span>
-    </div>
-    <div class="info-row">
-      <span class="info-label">pH值:</span>
-      <span class="info-value">${apiData.pH}</span>
-    </div>
-    
-    <!-- 分隔线 -->
-    <div class="divider"></div>
-    
-    <!-- 重金属区 -->
-    <h4 class="contaminant-title">重金属含量 (mg/L)</h4>
-    <div class="contaminant-grid">
-      <div class="contaminant-item">
-        <span class="contaminant-name">Cr:</span>
-        <span class="contaminant-value">${apiData.Cr}</span>
-      </div>
-      <div class="contaminant-item">
-        <span class="contaminant-name">As:</span>
-        <span class="contaminant-value">${apiData.As}</span>
-      </div>
-      <div class="contaminant-item">
-        <span class="contaminant-name">Cd:</span>
-        <span class="contaminant-value">${apiData.Cd}</span>
-      </div>
-      <div class="contaminant-item">
-        <span class="contaminant-name">Hg:</span>
-        <span class="contaminant-value">${apiData.Hg}</span>
-      </div>
-      <div class="contaminant-item">
-        <span class="contaminant-name">Pb:</span>
-        <span class="contaminant-value">${apiData.Pb}</span>
-      </div>
-    </div>
-  </div>
-`;
-    
-    // 更新信息窗口
-    infoWindow.value.setContent(content);
-    
-  } catch (error) {
-    console.error('API请求失败:', error);
-    
-    // 显示错误信息
-    const errorContent = `
-      <div style="padding:12px;color:red">
-        <h3>${marker.properties.title}</h3>
-        <p>获取数据失败: ${error.message}</p>
-        <p>尝试获取的ID: ${markerId}</p>
-      </div>
-    `;
-    
-    infoWindow.value.setContent(errorContent);
-  }
-}
-  
-
-
- const manageTempMarker = {
-  add: (lat, lng, phValue) => {
-    if (activeTempMarker.value) {
-      markersLayer.remove("-999")
-    }
-    
-    const tempMarker = markersLayer.add({
-      id: "-999",
-      position: new TMap.value.LatLng(lat, lng),
-      styleId: 'temp',
-      properties: {
-        title: '克里金插值',
-        phValue: parseFloat(phValue).toFixed(2),
-        isTemp: true
-      }
-    })
-    activeTempMarker.value = tempMarker
-  },
-  remove: () => {
-    if (activeTempMarker.value) {
-      markersLayer.remove("-999")
-      activeTempMarker.value = null
-    }
-  }
-}
-
- const handleMapClick = async (e) => {
-  if (selectedPolygon.value) {
-    resetPolygonStyle();
-     infoWindow.value?.close();
-   }
-   const now = Date.now()
-  
-   if (now - state.lastTapTime < 1000) return
-   state.lastTapTime = now
-
-   try {
-     const latLng = e?.latLng
-     if (!latLng) throw new Error("地图点击事件缺少坐标信息")
-
-    const lat = Number(latLng.lat)
-     const lng = Number(latLng.lng)
-
-     if (!isValidCoordinate(lat, lng)) throw new Error(`非法坐标值 (${lat}, ${lng})`)
-
-     //console.log('有效坐标:', lat, lng)
-
-     const result = await reverseGeocode(lat, lng)
-     if (!validateLocation(result)) throw new Error('非有效陆地区域')
-     const phValue = await getPhValue(lng, lat)
-
-    // 使用封装方法添加临时标记
-    manageTempMarker.add(lat, lng, phValue)
-
-     if (infoWindow.value) {
-       infoWindow.value.close()
-     }
-    infoWindow.value = new TMap.value.InfoWindow({
-       map: map,
-       position: new TMap.value.LatLng(lat,lng),
-       content: `
-         <div style="padding:12px">
-           <h3>临时采样点</h3>
-           <p>位置：${result.address}</p>
-          <p>PH值:${phValue}</p>
-         </div>
-       `
-     })
-     infoWindow.value.open()
-   } catch (error) {
-     console.error('操作失败详情:', error)
-    error.value = error.message.includes('非法坐标') 
-       ? '请点击有效地图区域' 
-       : '服务暂时不可用，请稍后重试'
-     setTimeout(() => error.value = null, 3000)
-   }
- }
-
-
-
-// // 验证坐标有效性
- const isValidCoordinate = (lat, lng) => {
-   return !isNaN(lat) && !isNaN(lng) && 
-            lat >= -90 && lat <= 90 && 
-          lng >= -180 && lng <= 180
- }
-
-// // 逆地理编码
- const reverseGeocode = (lat, lng) => {
-   return new Promise((resolve, reject) => {
-     const callbackName = `tmap_callback_${Date.now()}`
-     window[callbackName] = (response) => {
-       delete window[callbackName]
-       document.body.removeChild(script)
-       if (response.status !== 0) reject(response.message)
-       else resolve(response.result)
-     }
-
-     const script = document.createElement('script')
-     script.src = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${tMapConfig.key}&output=jsonp&callback=${callbackName}`
-     script.onerror = reject
-     document.body.appendChild(script)
-   })
- }
-
-// // 验证地理位置
- const validateLocation = (result) => {
-   if (!result || !result.address_component) {
-     return false;
-   }
-   return result.address_component.nation === '中国' &&
-          !['香港特别行政区', '澳门特别行政区', '台湾省'].includes(
-            result.address_component.province
-          )
- }
-
-// // 获取PH值
- const getPhValue = async (lng, lat) => {
-   try {
-     const { data } = await axios.post('https://soilgd.com:5000/kriging_interpolation', {
-       file_name: 'emissions.xlsx',
-       emission_column: 'dust_emissions',
-       points: [[lng, lat]]
-     })
-     return parseFloat(data.interpolated_concentrations[0]).toFixed(2)
-   } catch (error) {
-     console.error('获取PH值失败:', error)
-     throw error 
- }
- }
-
-
-
-onMounted(async () => {
-  //console.log('开始执行 onMounted');
-  
-  try {
-    await loadSDK();
-    //console.log('SDK加载完成，开始initData');
-    await initMap()
-    //console.log('initMap执行完毕');
-    
-  } catch (err) {
-    console.error('onMounted执行异常',err);
-    error.value = err.message
-  }
-})
-
-onBeforeUnmount(() => {
-  // 1. 销毁地图实例（先销毁，再置空）
-  if (map) {
-    try {
-      map.destroy(); // 腾讯地图销毁方法
-      console.log('[地图] 地图实例已销毁');
-    } catch (e) {
-      console.error('[地图] 销毁失败:', e);
-    }
-    map = null;
-  }
-
-  // 2. 销毁图层（逐个检查）
-  const layers = [markersLayer, soilTypeVectorLayer, waterSystemLayer];
-  layers.forEach(layer => {
-    if (layer) {
-      try {
-        layer.setMap(null); // 从地图移除
-        if (layer.destroy) layer.destroy(); // 调用图层销毁方法
-      } catch (e) {
-        console.error('[地图] 图层销毁失败:', e);
-      }
-    }
-  });
-
-  // 3. 清理全局变量
-  if (window.initTMap) {
-    delete window.initTMap; // 移除全局回调
-  }
-});
-
-
-onUpdated(() => {
-  try {
-    if (map.value && farmlandLayer.value) {
-      // 更新地图视图
-    }
-  } catch (error) {
-    console.error("地图更新错误:", error);
-  }
-});
-
-</script>
-
-<style>
-.map-page {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-}
-
-.map-container {
-  width: 100%;
-  height: 100vh ;
-  min-height: 600px;
-  pointer-events: all;
-}
-
-.control-panel {
-  position: fixed;
-  top: 24px;
-  right: 24px;
-  background: rgba(255, 255, 255, 0.95);
-  padding: 16px;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  z-index: 1000;
-  min-width: 240px;
-  transition: all 0.3s ease;
-}
-
-.control-panel:hover {
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-  transform: translateY(-2px);
-}
-
-.control-panel label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 8px;
-  transition: background 0.2s ease;
-  cursor: pointer;
-}
-
-.control-panel label:hover {
-  background: rgba(56, 118, 255, 0.05);
-}
-
-.control-panel input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  border: 2px solid #3876ff;
-  border-radius: 4px;
-  appearance: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.control-panel input[type="checkbox"]:checked {
-  background: #3876ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
-  background-size: 12px;
-}
-
-.export-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.export-controls button {
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: #3876ff;
-  color: white;
-}
-
-.export-controls button:disabled {
-  background: #e0e0e0;
-  color: #9e9e9e;
-  cursor: not-allowed;
-  opacity: 0.8;
-}
-
-.export-controls button:not(:disabled):hover {
-  background: #2b5dc5;
-  box-shadow: 0 4px 12px rgba(56, 118, 255, 0.3);
-}
-
-/* 新增加载动画 */
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.loading-spinner {
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .control-panel {
-    top: 16px;
-    right: 16px;
-    left: 16px;
-    width: auto;
-    min-width: auto;
-  }
-  
-  .export-controls {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-  
-  .export-controls button {
-    flex: 1;
-    justify-content: center;
-  }
-}
-
-.polygon-info {
-  padding: 12px;
-  max-width: 300px;
-  
-  h3 {
-    margin: 0 0 8px;
-    color: #333;
-    font-size: 16px;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-
-    tr {
-      border-bottom: 1px solid #eee;
-    }
-
-    th, td {
-      padding: 6px 4px;
-      text-align: left;
-      font-size: 14px;
-    }
-
-    th {
-      color: #666;
-      white-space: nowrap;
-      padding-right: 8px;
-    }
-  }
-}
-.point-info {
-  padding: 12px;
-  min-width: 200px;
-  
-  h3 {
-    margin: 0 0 8px;
-    font-size: 14px;
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    display: inline-block;
-    background: var(--category-color);
-  }
-  
-  p {
-    margin: 6px 0;
-    font-size: 13px;
-    line-height: 1.4;
-    
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-
-.tooltip {
-  position: absolute;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1001;
-  font-size: 14px;
-  white-space: nowrap;
-  opacity: 0;
-  transform: translateY(10px);
-  visibility: hidden;
-  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
-  border: 1px solid #e0e0e0;
-}
-
-.tooltip.visible {
-  opacity: 1;
-  transform: translateY(0);
-  visibility: visible;
-}
-
-.tooltip::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-top: 6px solid rgba(255, 255, 255, 0.9);
-  border-top-color: inherit;
-}
-
-:deep(.tmap-vector-label) {
-  white-space: nowrap;
-  pointer-events: none; /* 允许点击穿透，不影响地图交互 */
-}
-
-/* 在style标签中添加以下样式 */
-:deep(.tmap-infowindow) {
-  padding: 12px;
-  min-width: 300px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-  background-color: white;
-}
-
-.db-info {
-  margin-top: 10px;
-  padding: 10px;
-  background-color: #f8f9fa;
-  border-left: 3px solid #4285f4;
-  border-radius: 4px;
-}
-
-.db-info h4 {
-  margin-top: 0;
-  color: #4285f4;
-  font-size: 14px;
-}
-
-.db-info pre {
-  margin: 5px 0 0;
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.water-info-window {
-  font-family: 'Segoe UI', Tahoma, sans-serif;
-  background: #fff;
-  border-radius: 4px;
-  padding: 4px;
-  width: 200px;
-  height:auto;
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  font-size: 0.7rem; /* 基础字体大小调整为0.7rem(约11px) */
-}
-
-.info-title {
-  color: #1e40af;
-  font-size: 0.8rem;
-  margin: 0 0 3px 0;
-  padding-bottom: 2px;
-  border-bottom: 1px solid #e0f2fe;
-  font-weight: 600;
-  text-align: center;
-}
-
-.info-content {
-  padding: 2px;
-}
-
-.info-row {
-  display: flex;
-  margin-bottom: 2px;
-  align-items: center;
-}
-
-.info-label {
-  flex: 0 0 60px; /* 标签宽度调整为60px */
-  color: #475569;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.info-value {
-  flex: 1;
-  color: #0f172a;
-  padding: 1px 3px;
-  background: #f8fafc;
-  border-radius: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.7rem;
-}
-
-.contaminant-section {
-  margin-top: 3px;
-  padding-top: 3px;
-  border-top: 1px dotted #e2e8f0;
-}
-
-.contaminant-title {
-  color: #1e40af;
-  margin: 0 0 2px 0;
-  font-size: 0.7rem;
-  font-weight: 500;
-  padding-left: 2px;
-}
-
-/* 污染物改为网格布局，每行3个 */
-.contaminants {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2px;
-}
-
-.contaminant-item {
-  background: #f8fafc;
-  border-radius: 2px;
-  padding: 2px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border: 0.5px solid #e2e8f0;
-}
-
-.contaminant-name {
-  color: #3b82f6;
-  font-weight: 500;
-  font-size: 0.7rem;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.contaminant-value {
-  color: #0f172a;
-  font-size: 0.8rem;
-  background: #e2e8f0;
-  padding: 1px 2px;
-  border-radius: 2px;
-  margin-top: 1px;
-  min-width: 25px;
-  text-align: center;
-}
-  .assay-info {
-    margin-top: 16px;
-    padding: 8px 12px;
-    background-color: #f5f5f5;
-    border-radius: 6px;
-    font-size: 0.85rem;
-    color: #666;
-    text-align: center;
-  }
-
-  /* 在style标签中添加 */
-.crystal-bubble .bubble {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, #00b4ff, #0077cc);
-  box-shadow: 
-    0 0 10px rgba(0, 183, 255, 0.7),
-    inset 0 0 15px rgba(0, 100, 200, 0.5);
-  position: relative;
-  animation: pulse 1.5s infinite;
-}
-
-.crystal-bubble .water-drop {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: 50%;
-  top: 25%;
-  left: 25%;
-  box-shadow: 
-    0 0 5px #fff,
-    inset 0 0 3px rgba(0, 0, 0, 0.2);
-  transform: rotate(-20deg);
-}
-
-@keyframes pulse {
-  0% { transform: scale(1); opacity: 0.8; }
-  50% { transform: scale(1.1); opacity: 1; }
-  100% { transform: scale(1); opacity: 0.8; }
-}
-
-</style>

src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/point.vue

@@ -3,7 +3,6 @@
     
    <div class="point-map">
     <div class="component-title">采样点地图展示</div>
-   <TencentMapView/>
    </div>
 
   
@@ -22,7 +21,6 @@
 <script setup>
 import { ref, onMounted, watch, computed } from 'vue';
 import * as echarts from 'echarts';
-import TencentMapView from './tencentMapView.vue';
 import Waterdataline from './waterdataline.vue';
 import Waterassaydata2 from './waterassaydata2.vue';