灌溉水和大气网页的优化

components.d.ts

@@ -11,7 +11,6 @@ declare module 'vue' {
     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']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -33,7 +32,6 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -42,8 +40,6 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     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']
@@ -56,7 +52,4 @@ declare module 'vue' {
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

myenv/Lib/site-packages/click/_compat.py

@@ -530,7 +530,7 @@ if sys.platform.startswith("win") and WIN:
         if cached is not None:
             return cached
 
-        import colorama
+        import colorama # type: ignore
 
         strip = should_strip_ansi(stream, color)
         ansi_wrapper = colorama.AnsiToWin32(stream, strip=strip)

myenv/Lib/site-packages/pip/_vendor/urllib3/poolmanager.py

@@ -14,7 +14,7 @@ from .exceptions import (
     URLSchemeUnknown,
 )
 from .packages import six
-from .packages.six.moves.urllib.parse import urljoin
+from .packages.six.moves.urllib.parse import urljoin # type: ignore
 from .request import RequestMethods
 from .util.proxy import connection_requires_http_tunnel
 from .util.retry import Retry

package.json

@@ -13,10 +13,14 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@turf/turf": "^7.2.0",
+    "@types/d3": "^7.4.3",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.7.9",
     "chart.js": "^4.4.9",
+    "coordtransform": "^2.1.2",
+    "d3": "^7.9.0",
     "dom-to-image": "^2.6.0",
     "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
@@ -50,7 +54,7 @@
     "unplugin-auto-import": "^19.0.0",
     "unplugin-icons": "^22.0.0",
     "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.5",
+    "vite": "^6.3.5",
     "vite-plugin-vue-devtools": "^7.6.8",
     "vitest": "^2.1.9",
     "vue-tsc": "^2.1.10"

src/App.vue

@@ -1,6 +1,7 @@
 <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'

src/components/layout/AppAside.vue

@@ -5,31 +5,58 @@
       router
       unique-opened
       :default-active="activeMenuItem.index"
+      :default-openeds="defaultOpeneds"
       class="professional-menu"
     >
       <template v-for="item in filteredMenuItems" :key="item.index">
-        <el-sub-menu v-if="item.children" :index="item.index">
+        <!-- 一级菜单：有二级子菜单 -->
+        <el-sub-menu 
+          v-if="item.children && item.children.length > 0" 
+          :index="item.index"
+        >
           <template #title>
-            <el-icon><component :is="item.icon" /></el-icon>
+            <el-icon><component :is="item.icon || Sunny" /></el-icon>
             <span>{{ item.label }}</span>
           </template>
-          <el-menu-item
-            v-for="child in item.children"
-            :key="child.index"
-            :index="child.index"
-            @click="handleMenuClick(child.index)"
-          >
-            <el-icon><component :is="child.icon" /></el-icon>
-            <span>{{ child.label }}</span>
-          </el-menu-item>
+          
+          <!-- 遍历二级子菜单 -->
+          <template v-for="child in item.children.filter(child => child.index)" :key="child.index">
+            <!-- 二级菜单：有三级子菜单 -->
+            <el-sub-menu 
+              v-if="child.children && child.children.length > 0" 
+              :index="child.index"
+            >
+              <template #title>
+                <el-icon><component :is="child.icon || item.icon || Sunny" /></el-icon>
+                <span>{{ child.label }}</span>
+              </template>
+              
+              <!-- 遍历三级子菜单 -->
+              <el-menu-item 
+                v-for="grandchild in child.children" 
+                :key="grandchild.index" 
+                :index="grandchild.index" 
+                @click="handleMenuClick(grandchild)"
+              >
+                <el-icon><component :is="grandchild.icon || child.icon || item.icon || Sunny" /></el-icon>
+                <span>{{ grandchild.label }}</span>
+              </el-menu-item>
+            </el-sub-menu>
+            
+            <!-- 二级菜单：无三级子菜单 -->
+            <el-menu-item 
+              v-else 
+              :index="child.index"
+            >
+              <el-icon><component :is="child.icon || item.icon || Sunny" /></el-icon>
+              <span>{{ child.label }}</span>
+            </el-menu-item>
+          </template>
         </el-sub-menu>
 
-        <el-menu-item
-          v-else
-          :index="item.index"
-          @click="handleMenuClick(item.index)"
-        >
-          <el-icon><component :is="item.icon" /></el-icon>
+        <!-- 一级菜单：无二级子菜单 -->
+        <el-menu-item v-else :index="item.index">
+          <el-icon><component :is="item.icon || Sunny" /></el-icon>
           <span>{{ item.label }}</span>
         </el-menu-item>
       </template>
@@ -41,7 +68,8 @@
 import { reactive, computed, inject, toRefs, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
-import { menuItems } from './menuItems'; // 建议你将 menuItems 独立维护在该文件中
+import { menuItems, type MenuItem } from './menuItems'; // 建议你将 menuItems 独立维护在该文件中
+import { Sunny } from '@element-plus/icons-vue';
 
 const props = defineProps({
   activeTab: {
@@ -63,43 +91,93 @@ const userPermissions = inject('userPermissions', [] as string[]);
 const router = useRouter();
 const activeMenuItem = reactive({ index: '' });
 
-const filteredMenuItems = computed(() =>
-  menuItems
-    .filter(item => item.tab === activeTab.value)
-    .map(item => {
-      if (!item.children) return item;
-      return {
-        ...item,
-        children: item.children.filter(
-          child => !child.permission || userPermissions.includes(child.permission)
-        )
-      };
-    })
-);
+// 1. 修复 filteredMenuItems 计算逻辑
+const filteredMenuItems = computed(() => {
+  // 确保包含所有子菜单（包括嵌套）
+  return menuItems.filter(item => {
+    return item.tab === activeTab.value || 
+           // 包含所有子菜单项
+           (item.children?.some(child => child.tab === activeTab.value));
+  });
+});
+
+// 2. 重构 defaultOpeneds 计算逻辑
+const defaultOpeneds = computed(() => {
+  const currentPath = router.currentRoute.value.path;
+  const openedMenus = new Set<string>();
 
-function handleMenuClick(index: string) {
-  try {
-    if (router.currentRoute.value.path !== index) {
-      router.push(index);
-      activeMenuItem.index = index;
+  // 第一级遍历：匹配直接路径
+  menuItems.forEach(item => {
+    if (item.index === currentPath) {
+      openedMenus.add(item.index);
     }
-  } catch (error) {
-    ElMessage.error('导航失败，请检查网络或联系管理员');
+  });
+
+  // 第二级遍历：匹配嵌套路径
+  menuItems.forEach(item => {
+    item.children?.forEach(child => {
+      // 直接匹配二级路径
+      if (child.index === currentPath) {
+        openedMenus.add(item.index);
+      }
+      
+      // 匹配三级路径
+      child.children?.forEach(grandchild => {
+        if (grandchild.index === currentPath) {
+          openedMenus.add(item.index);
+          openedMenus.add(child.index);
+        }
+      });
+    });
+  });
+
+  console.log("优化后展开菜单", Array.from(openedMenus));
+  return Array.from(openedMenus);
+});
+
+function handleMenuClick(menuItem: MenuItem) {
+  // 直接使用 index 作为目标路径
+  const targetPath = menuItem.index;
+  
+  // 添加调试信息
+  console.log('[导航] 当前路径:', router.currentRoute.value.path);
+  console.log('[导航] 目标路径:', targetPath);
+  
+  // 检查是否已经在目标路径
+  if (router.currentRoute.value.path !== targetPath) {
+    console.log('[导航] 执行导航到:', targetPath);
+    router.push(targetPath).catch(err => {
+      console.error('[导航错误]', err);
+    });
+  } else {
+    console.log('[导航] 已在目标路径，跳过导航');
   }
 }
 
+
+// 4. 删除重复的watch监听器（只保留一个）
 watch(
-  activeTab,
+  () => props.activeTab,
   newVal => {
     const current = filteredMenuItems.value?.[0];
     activeMenuItem.index = current?.children?.[0]?.index || current?.index || '';
   },
   { immediate: true }
 );
+watch(filteredMenuItems, (items) => {
+  items.forEach(item => {
+    console.log("父项index:", item.index); // 检查是否有特殊字符
+    item.children?.forEach(child => {
+      console.log("子项index:", child.index);
+    });
+  });
+});
+
 </script>
 
 <style scoped>
 .professional-menu .el-menu {
+  display: block !important;
   background-color: #f4f6f9;
   border-right: none;
   margin-top: 20px;
@@ -133,4 +211,8 @@ watch(
 .professional-menu .el-icon {
   margin-right: 8px;
 }
+.professional-menu {
+  min-height: 200px !important; /* 强制设置最小高度 */
+  display: block !important; /* 确保元素显示 */
+}
 </style>

src/components/layout/AppLayout.vue

@@ -1,67 +1,217 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watch, defineAsyncComponent } from "vue";
+import type { Component } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useTokenStore } from "@/stores/mytoken";
-import { ElMessageBox, ElMessage } from "element-plus";
+import { ElMessageBox, ElMessage,ElTabPane, type Instance, type TabsPaneContext } from "element-plus";
 import { logout } from "@/API/users";
 
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  router.beforeEach((to, from) => {
+    console.log("[路由导航] 从:", from.path, "到:", to.path);
+    return true;
+  });
+  
+  router.afterEach((to) => {
+    console.log("[路由完成] 当前路径:", to.path);
+  });
+});
+
+// 扩展路由元信息类型
+declare module 'vue-router' {
+  interface RouteMeta {
+    fullScreen?: boolean;
+  }
+}
+
+type RouteConfig = 
+  | string  // 基础路由（如 "/agricultureProductInput"）
+  | {       // 带标签和子路由的嵌套路由
+      path: string;       // 路由路径
+      label: string;      // 显示名称
+      children?: RouteConfig[]; // 子路由（支持多层嵌套）
+    };
+// 定义Tab项类型
+interface TabItem {
+  name: string;
+  label: string;
+  icon: string;
+  routes: RouteConfig[];
+}
+
+// 定义用户信息类型
+interface UserInfo {
+  name: string;
+}
+
+// 定义Token类型
+interface TokenInfo {
+  loginType: string;
+  name?: string;
+}
+
 const router = useRouter();
 const route = useRoute();
 const tokenStore = useTokenStore();
 
+// 类型断言，确保tokenStore类型正确
+const token = tokenStore.token as TokenInfo;
+
 // 是否为全屏页面
 const isFullScreen = computed(() => route.meta.fullScreen === true);
 
 // Tab 配置
-const tabs = computed(() => {
-  if (tokenStore.token.loginType === "admin") {
+const tabs = computed<TabItem[]>(() => {
+  if (token.loginType === "admin") {
     return [
-      { name: "dataManagement", label: "数据管理", icon: "el-icon-folder", routes: ["/soilAcidReductionData","/soilAcidificationData", "/AdminRegionData", "/SoilAssessmentUnitData", "/SoilHeavyMetalData", "/CropHeavyMetalData", "/LandUseTypeData", "/SoilAcidificationData", "/ClimateInfoData", "/GeographicEnvInfoData"] },
-      { name: "infoManagement", label: "信息管理", icon: "el-icon-document", routes: ["/IntroductionUpdate"] },
-      { name: "modelManagement", label: "模型管理及配置", icon: "el-icon-cpu", routes: ["/CadmiumPredictionModel", "/EffectiveCadmiumModel", "/Admin/RiceRiskModel", "/AdminModelSelection", "/Admin/thres", "/Admin/ModelTrain", "/Admin/WheatRiskModel", "/Admin/VegetableRiskModel"] },
-      { name: "userManagement", label: "用户管理", icon: "el-icon-user", routes: ["/UserManagement", "/UserRegistration"] },
+      { 
+        name: "dataManagement", 
+        label: "数据管理", 
+        icon: "el-icon-folder", 
+        routes: ["/soilAcidReductionData","/soilAcidificationData", "/AdminRegionData", "/SoilAssessmentUnitData", "/SoilHeavyMetalData", "/CropHeavyMetalData", "/LandUseTypeData", "/ClimateInfoData", "/GeographicEnvInfoData"] 
+      },
+      { 
+        name: "infoManagement", 
+        label: "信息管理", 
+        icon: "el-icon-document", 
+        routes: ["/IntroductionUpdate"] 
+      },
+      { 
+        name: "modelManagement", 
+        label: "模型管理及配置", 
+        icon: "el-icon-cpu", 
+        routes: ["/CadmiumPredictionModel", "/EffectiveCadmiumModel", "/Admin/RiceRiskModel", "/AdminModelSelection", "/Admin/thres", "/Admin/ModelTrain", "/Admin/WheatRiskModel", "/Admin/VegetableRiskModel"] 
+      },
+      { 
+        name: "userManagement", 
+        label: "用户管理", 
+        icon: "el-icon-user", 
+        routes: ["/UserManagement", "/UserRegistration"] 
+      },
     ];
   } else {
     return [
-      { name: "shuJuKanBan", label: "数据看板", icon: "el-icon-data-analysis", routes: ["/shuJuKanBan"] },
-      { name: "introduction", label: "软件简介", icon: "el-icon-info-filled", routes: ["/SoilPro", "/Overview", "/ResearchFindings", "/Unit"] },
-      { name: "heavyMetalFluxCalculation", label: "重金属输入输出通量", icon: "el-icon-refresh", routes: ["/irrigationWater", "/agriculturalProductInput", "/atmosphericDryWetDeposition", "/surfaceRunoff", "/cropRemoval", "/subsurfaceFlow"] },
-      { name: "mapView", label: "地图展示", icon: "el-icon-map-location", routes: ["/mapView"] },
-      { name: "cadmiumPrediction", label: "土壤镉预测", icon: "el-icon-c-scale-to-original", routes: ["/TotalCadmiumPrediction", "/EffectiveCadmiumPrediction"] },
-      { name: "cropRiskAssessment", label: "作物风险评估", icon: "el-icon-warning", routes: ["/cropRiskAssessment"] },
-      { name: "farmlandQualityAssessment", label: "耕地质量评估", icon: "el-icon-rank", routes: ["/farmlandQualityAssessment"] },
-      { name: "soilAcidificationPrediction", label: "土壤酸化预测", icon: "el-icon-magic-stick", routes: ["/Calculation", "/AcidNeutralizationModel"] },
-      { name: "scenarioSimulation", label: "情景模拟", icon: "el-icon-s-operation", routes: ["/TraditionalFarmingRisk", "/HeavyMetalCadmiumControl", "/SoilAcidificationControl"] },
-      { name: "dataStatistics", label: "数据统计", icon: "el-icon-pie-chart", routes: ["/DetectionStatistics", "/FarmlandPollutionStatistics", "/PlantingRiskStatistics"] },
+      { 
+        name: "shuJuKanBan", 
+        label: "数据看板", 
+        icon: "el-icon-data-analysis", 
+        routes: ["/shuJuKanBan"] 
+      },
+      { 
+        name: "introduction", 
+        label: "软件简介", 
+        icon: "el-icon-info-filled", 
+        routes: ["/SoilPro", "/Overview", "/ResearchFindings", "/Unit"] 
+      },
+      { 
+       name: "heavyMetalFluxCalculation", 
+       label: "重金属输入输出通量", 
+       icon: "el-icon-refresh", 
+       routes: [
+      // 灌溉水：改为对象，包含label和children三级子选项
+        {
+          path: "/irrigationWater", // 父路由路径
+          label: "灌溉水", // 显示的名称（二级选项名称）
+          children: [ // 三级子选项
+            { path: "/irrigationWater/info", label: "信息展示" },
+            { path: "/irrigationWater/map", label: "样本点地图展示" },
+            { path:"/irrigationWater/rivermap", label:"河流地图展示"},
+            { path: "/irrigationWater/data", label: "数据展示" }
+      ]
+        },
+        // 其他二级选项保持不变（字符串路由）
+        "/agricultureProductInput",
+        "/atmosphericDryWetDeposition"
+      ]
+      },
+      { 
+        name: "mapView", 
+        label: "地图展示", 
+        icon: "el-icon-map-location", 
+        routes: ["/mapView"] 
+      },
+      { 
+        name: "cadmiumPrediction", 
+        label: "土壤镉预测", 
+        icon: "el-icon-c-scale-to-original", 
+        routes: ["/TotalCadmiumPrediction", "/EffectiveCadmiumPrediction"] 
+      },
+      { 
+        name: "cropRiskAssessment", 
+        label: "作物风险评估", 
+        icon: "el-icon-warning", 
+        routes: ["/cropRiskAssessment"] 
+      },
+      { 
+        name: "farmlandQualityAssessment", 
+        label: "耕地质量评估", 
+        icon: "el-icon-rank", 
+        routes: ["/farmlandQualityAssessment"] 
+      },
+      { 
+        name: "soilAcidificationPrediction", 
+        label: "土壤酸化预测", 
+        icon: "el-icon-magic-stick", 
+        routes: ["/Calculation", "/AcidNeutralizationModel"] 
+      },
+      { 
+        name: "scenarioSimulation", 
+        label: "情景模拟", 
+        icon: "el-icon-s-operation", 
+        routes: ["/TraditionalFarmingRisk", "/HeavyMetalCadmiumControl", "/SoilAcidificationControl"] 
+      },
+      { 
+        name: "dataStatistics", 
+        label: "数据统计", 
+        icon: "el-icon-pie-chart", 
+        routes: ["/DetectionStatistics", "/FarmlandPollutionStatistics", "/PlantingRiskStatistics"] 
+      },
     ];
   }
 });
 
 // 当前激活 tab
-const activeName = ref(tabs.value[0]?.name || "");
+const activeName = ref<string>(tabs.value[0]?.name || "");
 const showTabs = computed(() => tabs.value.length > 1);
 const tabStyle = computed(() => tabs.value.length === 1 ? { width: "100%", justifyContent: "center" } : {});
 let hasNavigated = false;
 
 watch(() => activeName.value, (newTab) => {
   const tab = tabs.value.find(t => t.name === newTab);
-  const targetPath = tab?.routes?.[0];
+  let targetPath: string | undefined;
+
+  if (tab) {
+    const firstRoute = tab.routes[0]; // RouteConfig 类型（可能是 string 或对象）
+    if (typeof firstRoute === 'string') {
+      targetPath = firstRoute; // 字符串直接用
+    } else {
+      targetPath = firstRoute.path; // 对象取 path 属性
+    }
+  }
+
   if (!hasNavigated) {
     hasNavigated = true;
     return;
   }
   if (tab && targetPath && router.currentRoute.value.path !== targetPath) {
-    router.push({ path: targetPath });
+    router.push({ path: targetPath }); // 现在 targetPath 一定是字符串
   }
 }, { immediate: true });
 
-const handleClick = (tab: any, event: Event) => {
-  activeAsideTab.value = tab.props.name;
+// 处理Tab点击事件
+const handleClick = (tab: TabsPaneContext) => {
+  activeAsideTab.value = tab.props.name as string;
 };
 
-// 侧边栏组件根据 tab 变化
-const AsideComponent = computed(() => {
-  if (["parameterConfig", "dataManagement", "infoManagement", "modelManagement", "userManagement"].includes(activeName.value)) {
+const handleSingleTabClick = () => {
+  activeAsideTab.value = tabs.value[0].name;
+};
+// 侧边栏组件类型
+const AsideComponent = computed<Component>(() => {
+  const adminTabs = ["parameterConfig", "dataManagement", "infoManagement", "modelManagement", "userManagement"];
+  if (adminTabs.includes(activeName.value)) {
     return defineAsyncComponent(() => import("./AppAsideForTab2.vue"));
   } else {
     return defineAsyncComponent(() => import("./AppAside.vue"));
@@ -70,18 +220,22 @@ const AsideComponent = computed(() => {
 
 // 是否显示侧边栏
 const showAside = computed(() => {
-  return (
-    !isFullScreen.value &&
-    activeName.value !== "mapView" &&
-    activeName.value !== "shuJuKanBan" &&
-    activeName.value !== "cropRiskAssessment" &&
-    activeName.value !== "farmlandQualityAssessment"
-  );
+  const hideAsideTabs = ["mapView", "shuJuKanBan", "cropRiskAssessment", "farmlandQualityAssessment"];
+  const result = !isFullScreen.value && !hideAsideTabs.includes(activeName.value) && showTabs.value;
+  console.log("侧边栏是否显示：", result); // 关键打印
+  console.log("当前activeName：", activeName.value); // 查看当前激活的Tab名称
+  console.log("showTabs：", showTabs.value); // 查看tabs长度是否>1
+  return result;
 });
 
-const activeAsideTab = ref(activeName.value || "");
-const userInfo = reactive({ name: tokenStore.token.name || "未登录" });
+const activeAsideTab=ref<string>(activeName.value);
+
+// 用户信息
+const userInfo = reactive<UserInfo>({ 
+  name: token.name || "未登录" 
+});
 
+// 退出登录处理
 const handleLogout = async () => {
   try {
     await ElMessageBox.confirm("确定要退出登录吗？", "提示", {
@@ -93,17 +247,19 @@ const handleLogout = async () => {
     tokenStore.clearToken();
     ElMessage.success("退出成功");
     router.push("/login");
-  } catch {
+  } catch (error) {
     ElMessage.info("已取消退出");
   }
 };
 
+// 主内容区样式
 const mainPaddingStyle = computed(() => {
   return {
     padding: ["mapView", "infoManagement"].includes(activeName.value) ? "0" : "20px",
   };
 });
 
+// 滚动条样式
 const scrollbarStyle = computed(() => {
   return isFullScreen.value ? { height: "100vh" } : { height: "calc(100vh - 128px)" };
 });
@@ -136,7 +292,7 @@ const scrollbarStyle = computed(() => {
 
       <!-- Tab 区域 -->
       <div class="tabs-row" v-if="!isFullScreen">
-        <el-tabs v-if="showTabs" v-model="activeName" class="demo-tabs" :style="tabStyle" @tab-click="handleClick">
+        <el-tabs v-if="showTabs" v-model="activeName" class="demo-tabs" :style="tabStyle" @tab-click=handleClick>
           <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
             <template #label>
               <i :class="['tab-icon', tab.icon]"></i>
@@ -144,7 +300,7 @@ const scrollbarStyle = computed(() => {
             </template>
           </el-tab-pane>
         </el-tabs>
-        <div v-else class="single-tab" @click="handleClick(tabs[0], $event)">
+        <div v-else class="single-tab" @click="handleSingleTabClick">
           <i :class="['tab-icon', tabs[0].icon]"></i>
           <span class="tab-label-text">{{ tabs[0].label }}</span>
         </div>
@@ -152,7 +308,7 @@ const scrollbarStyle = computed(() => {
 
       <!-- 主体区域 -->
       <el-container class="layout-main-container">
-        <el-aside v-if="showAside && showTabs" class="layout-aside">
+        <el-aside v-if="showAside" class="layout-aside">
           <component :is="AsideComponent" :activeTab="activeName" :showTabs="showTabs" />
         </el-aside>
 
@@ -166,7 +322,7 @@ const scrollbarStyle = computed(() => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .layout-container {
   height: 100vh;
   display: flex;
@@ -180,7 +336,7 @@ const scrollbarStyle = computed(() => {
   align-items: center;
   justify-content: space-between;
   padding: 0 50px;
-  background: linear-gradient(to bottom, #6c8598cc 0%, #5b7083cc 100%); /* 更浅色调 */
+  background: linear-gradient(to bottom, #6c8598cc 0%, #5b7083cc 100%);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: none;
@@ -192,7 +348,7 @@ const scrollbarStyle = computed(() => {
   justify-content: center;
   align-items: center;
   padding: 5px 24px;
-  background: linear-gradient(to bottom, #5b7083cc 0%, #4a5e70cc 100%); /* 更浅色调 */
+  background: linear-gradient(to bottom, #5b7083cc 0%, #4a5e70cc 100%);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
@@ -209,7 +365,7 @@ const scrollbarStyle = computed(() => {
 }
 
 .project-name {
-  font-size: 72px;
+  font-size: 32px; /* 原72px太大了，调整为更合理的大小 */
   font-weight: bold;
   color: #f0f3f7;
 }
@@ -221,11 +377,11 @@ const scrollbarStyle = computed(() => {
 }
 
 .el-tabs__item {
-  font-size: 40px;
+  font-size: 16px; /* 原40px太大 */
   font-weight: 600;
-  padding: 25px 36px !important;
+  padding: 12px 24px !important;
   margin: 5px;
-  color: #cfd8dc; /* 默认浅灰文字 */
+  color: #cfd8dc;
   display: flex;
   align-items: center;
   border-radius: 10px;
@@ -233,25 +389,25 @@ const scrollbarStyle = computed(() => {
 }
 
 .el-tabs__item:hover {
-  background-color: #455a64; /* 悬停深色背景 */
-  color: #ffffff; /* 悬停白色文字 */
+  background-color: #455a64;
+  color: #ffffff;
 }
 
 .el-tabs__item.is-active {
-  background-color: #1abc9c; /* 激活亮色背景 */
-  color: #ffffff; /* 激活白色文字 */
+  background-color: #1abc9c;
+  color: #ffffff;
   box-shadow: 0 4px 16px rgba(26, 188, 156, 0.4);
   font-weight: 700;
 }
 
 .tab-icon {
-  font-size: 36px; /* 原 20px */
-  margin-right: 2px;
-  color: inherit; /* 跟随文字颜色 */
+  font-size: 20px;
+  margin-right: 8px;
+  color: inherit;
 }
 
 .tab-label-text {
-  font-size: 20px;
+  font-size: 14px;
   color: inherit;
 }
 
@@ -276,4 +432,18 @@ const scrollbarStyle = computed(() => {
   background-color: #fff;
   overflow: hidden;
 }
-</style>
+
+.single-tab {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px;
+  cursor: pointer;
+  border-radius: 10px;
+  color: #cfd8dc;
+}
+
+.single-tab:hover {
+  background-color: #455a64;
+  color: #ffffff;
+}
+</style>

src/components/layout/menuItems.ts

@@ -16,13 +16,18 @@ import {
     Collection,
     MagicStick,
     HelpFilled,
-    Coin
+    Coin,
+    MapLocation,
+    DataAnalysis,
+    Document,
   } from '@element-plus/icons-vue';
+  import type { Component } from 'vue';
   
   export interface MenuItem {
     index: string;
+    path?:string;
     label: string;
-    icon?: any;
+    icon?: Component;
     tab: string;
     permission?: string;
     children?: MenuItem[];
@@ -60,7 +65,7 @@ import {
       tab: 'introduction'
     },
     {
-      index: 'inputFlux',
+      index: '/heavyMetalFluxCalculation',
       label: '输入通量计算',
       icon: Watermelon,
       tab: 'heavyMetalFluxCalculation',
@@ -69,19 +74,53 @@ import {
           index: '/irrigationWater',
           label: '灌溉水',
           icon: Sunny,
-          tab: 'heavyMetalFluxCalculation'
+          tab: 'heavyMetalFluxCalculation',
+          children: [
+          {
+            index: "/irrigationWater/info", 
+            label: "采样过程",
+            tab: 'heavyMetalFluxCalculation',
+            icon:Document,
+          },
+          {
+            index: "/irrigationWater/point", 
+            label: "采样点展示",
+            tab: 'heavyMetalFluxCalculation',
+            icon:MapLocation,
+          },
+          {
+            index:"/irrigationWater/river",
+            label:"断面展示",
+            tab:'heavyMetalFluxCalculation',
+            icon:MapLocation
+          },
+        ]
         },
         {
           index: '/agriculturalProductInput',
           label: '农产品投入',
           icon: Coin,
-          tab: 'heavyMetalFluxCalculation'
+          tab: 'heavyMetalFluxCalculation',
         },
         {
           index: '/atmosphericDryWetDeposition',
           label: '大气干湿沉降',
           icon: Cloudy,
-          tab: 'heavyMetalFluxCalculation'
+          tab: 'heavyMetalFluxCalculation',
+          children:[
+            {
+            index:"/atmosphericDryWetDeposition/atmpulltionmap",
+            label:"大气污染地图展示",
+            tab:'heavyMetalFluxCalculation',
+            icon:MapLocation
+            },
+            {
+            index:"/atmosphericDryWetDeposition/atmpulltioncompanymap",
+            label:"排污企业",
+            tab:'heavyMetalFluxCalculation',
+            icon:MapLocation
+            },
+          ]
         }
       ]
     },
@@ -157,13 +196,13 @@ import {
           index: '/Calculation',
           label: '土壤反酸预测',
           icon: Sunny,
-          tab: 'heavyMetalFluxCalculation'
+          tab: ''
         },
         {
           index: '/SoilAcidReductionIterativeEvolution',
           label: '反酸模型迭代可视化',
           icon: Coin,
-          tab: 'heavyMetalFluxCalculation'
+          tab: ''
         }
       ]
     },
@@ -177,13 +216,13 @@ import {
           index: '/AcidNeutralizationModel',
           label: '土壤降酸预测',
           icon: Sunny,
-          tab: 'heavyMetalFluxCalculation'
+          tab: ''
         },
         {
           index: '/SoilAcidificationIterativeEvolution',
           label: '土壤降酸预测',
           icon: Coin,
-          tab: 'heavyMetalFluxCalculation'
+          tab: ''
         }
       ]
     },

src/router/index.ts

@@ -100,7 +100,7 @@ const routes = [
       {
         path: "mapView",
         name: "mapView",
-        component: () => import("@/views/User/mapView/tencentMapView.vue"), // 修复路径
+        component: () => import("@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/tencentMapView.vue"), // 修复路径
         meta: { title: "地图展示" },
       },
       {
@@ -349,14 +349,34 @@ const routes = [
         meta: { title: "蔬菜镉污染风险模型" },
       },
       {
-        path: "irrigationWater",
+        path: "/irrigationWater",
         name: "irrigationWater",
         component: () =>
           import(
             "@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/irrigationWater.vue"
           ),
         meta: { title: "灌溉水" },
-      },
+        children: [ 
+          {
+             path: "info",
+             name: "irrigationWaterInfo",
+             component: () => import("@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/rivermessage.vue"),
+             meta: { title: "采样过程" }
+          },
+          {
+             path: "point", 
+             name: "irrigationWaterPoint",
+             component: () => import("@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/point.vue"),
+             meta: { title: "采样点展示" }
+          },
+          {
+             path:"river",
+             name:"irrigationWaterRiver",
+             component: () =>import("@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/rivertencentMapView.vue"),
+             meta:{title:"断面展示"}
+          },
+          ]
+          },
       {
         path: "agriculturalProductInput",
         name: "agriculturalProductInput",
@@ -374,6 +394,20 @@ const routes = [
             "@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmosphericDryWetDeposition.vue"
           ),
         meta: { title: "大气干湿沉降" },
+        children: [ 
+          {
+             path: "atmpulltionmap", 
+             name: "atmosphericDryWetDepositionAtmpulltionmap",
+             component: () => import("@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmtencentMap.vue"),
+             meta: { title: "大气污染地图展示" }
+          },
+          {
+             path:"atmpulltioncompanymap",
+             name:"atmosphericDryWetDepositionAtmosphericDryWetDeposition",
+             component: () =>import("@/views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmcompany.vue"),
+             meta:{title:"排污企业"}
+          },
+          ]
       },
       {
         path: "surfaceRunoff",
@@ -421,15 +455,40 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   const tokenStore = useTokenStore();
-  if (to.name === "login" && tokenStore.token.userid) {
-    next({ name: "selectCityAndCounty" });
-  } else if (to.matched.some((r) => r.meta.requiresAuth)) {
-    tokenStore.token.userid ? next() : next({ name: "login" });
-  } else {
+  
+  console.log('[路由导航] 从:', from.path, '到:', to.path, '是否需要认证:', to.matched.some(r => r.meta.requiresAuth));
+
+  try {
+    // 情况1: 用户已登录但访问登录页，重定向到主页
+    if (to.name === "login" && tokenStore.token.userid) {
+      console.log('[路由导航] 用户已登录，重定向到主页');
+      next({ name: "selectCityAndCounty" });
+      return;
+    }
+    // 情况2: 访问需要认证的路由
+    if (to.matched.some(r => r.meta.requiresAuth)) {
+      // 检查用户是否已登录
+      if (!tokenStore.token.userid) {
+        console.log('[路由导航] 未登录，重定向到登录页');
+        next({ name: "login" });
+        return;
+      }
+      console.log('[路由导航] 已登录，允许访问需要认证的路由');
+      next();
+      return;
+    }
+
+    // 情况3: 不需要认证的路由直接放行
+    console.log('[路由导航] 不需要认证，直接放行');
     next();
+  } catch (error) {
+    console.error('[路由导航错误]', error);
+    next({ name: "login" }); // 发生错误时重定向到登录页
   }
 });
-
+router.afterEach((to) => {
+  console.log('[路由完成] 当前路径:', to.path)
+})
 export default router;

src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmCompanytencentMap.vue

@@ -0,0 +1,479 @@
+<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
+})
+let soilTypeLayer = null
+let currentInfoWindow = null;
+let surveyDataLayer = ref(null);
+let selectedPolygon = ref(null); // 补充定义
+
+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.39, 114),//前大往下，后大往左
+      zoom: 9.25,
+      minZoom: 8,
+      //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: 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('地图初始化完成');
+
+    // 创建样式标签并注入样式
+    const style = document.createElement('style');
+    style.textContent = `
+      .water-info-window {
+        max-width: 80vw !important;
+        width: auto !important;
+        overflow: visible !important;
+      }
+      
+      .info-value {
+        white-space: normal !important;
+        word-wrap: break-word !important;
+        max-width: none !important;
+      }
+    `;
+    document.head.appendChild(style);
+
+  } 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_company_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 geometries = state.excelData.map(item => {  
+  console.log(`ID: ${item.污染源序号}, 坐标: (${item.纬度}, ${item.经度})`); // 替换为新字段  
+  if (!item.污染源序号 || !item.纬度 || !item.经度) return null;  
+  const lat = Number(item.纬度);
+  const lng = Number(item.经度);  
+  if (isNaN(lat) || isNaN(lng)) return null;  
+
+  return {
+    id: item.污染源序号, // 标记 ID 设为「污染源序号」
+    styleId: 'default',
+    position: new TMap.value.LatLng(lat, lng), 
+    properties: {
+      title: item.公司 || `污染源 ${item.污染源序号}`, // 标题用「公司」名称
+      sampler_id: item.污染源序号,
+    }
+  };
+  });
+  
+  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: -220 },
+    
+  });
+  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">污染源序号:</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="info-row">
+      <span class="info-label">类型:</span>
+      <span class="info-value">${matchedData.类型}</span>
+    </div>
+
+    <div class="info-row">
+      <span class="info-label">大气颗粒物排放(t/a):</span>
+      <span class="info-value">${matchedData['大气颗粒物排放(t/a)']}</span>
+    </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;
+}
+
+
+
+.water-info-window {
+  max-width: 80vw; /* 相对视口最大值，更加灵活 */
+  width: auto;
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  overflow: visible; /* 配合自动平移，确保内容不被裁剪 */
+}
+
+/* 标题区：增加渐变装饰线 */
+.info-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e3a8a;
+  text-align: center;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  position: relative; /* 为伪元素准备 */
+}
+.info-title::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  right: 20px;
+  height: 1px;
+  background: linear-gradient(to right, 
+    rgba(30, 58, 138, 0.1), 
+    rgba(30, 58, 138, 0.2), 
+    rgba(30, 58, 138, 0.1)
+  );
+}
+
+/* 数据行：Grid 布局确保对齐 */
+.info-row {
+  display: grid;
+  grid-template-columns: 180px 1fr; /* 标签180px，值自适应 */
+  gap: 12px; /* 列间距 */
+  align-items: flex-start;
+  margin: 10px 0;
+  margin: 10px 0;/**增加行间距，提升可读性 */
+}
+
+/* 标签：右对齐 + 深灰配色 */
+.info-label {
+  text-align: right;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+/* 数据值：浅灰背景 + 智能换行 */
+.info-value {
+  padding: 6px 10px;
+  background: #f3f4f6;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: normal;   /* 长文本强制换行 */
+  word-wrap: break-word;
+  overflow: visible;/**不隐藏溢出内容 */
+  text-overflow: clip;
+  min-height: 24px;        /* 确保最小高度，避免内容塌陷 */
+}
+
+/* 响应式适配（小窗口自动压缩） */
+@media (max-width: 480px) {
+  .water-info-window {
+    max-width: 90vw; /* 占满视口宽度 */
+    padding: 10px;
+  }
+  .info-row {
+    grid-template-columns: 100px 1fr; /* 缩小标签宽度 */
+  }
+}
+</style>

src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmcompany.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="page-container">
+    
+   <div class="point-map">
+    <div class="component-title">采样点地图展示</div>
+   <AtmCompanytencentMap/>
+   </div>
+
+  
+   <div class="point-line">
+    <div class="component-title">采样点数据列表展示</div>
+    <atmcompanyline/>
+   </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';
+
+
+
+
+</script>
+
+<style scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* 整屏高度 */
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  gap: 20px;
+  margin: 0;
+}
+
+.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: 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;
+  width: 100%;
+  margin: 20px auto;
+}
+.component-title {
+  /* 基础布局：左对齐 + 紧凑间距 */
+  text-align: left;        /* 强制左对齐，告别居中 */
+  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
+  padding-left: 24px;      /* 给蓝色方块留空间 */
+  position: relative;      /* 为伪元素定位做准备 */
+
+  /* 文字样式：简约但醒目 */
+  font-size: 1.7rem;      /* 稍小一号，更克制（原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/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmcompanyline.vue

@@ -0,0 +1,218 @@
+<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/heavyMetalFluxCalculation/inputFluxCalculation/atmospheredata/atmtencentMap.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: 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} 的监测数据`);
+    }
+
+    // 创建信息窗口内容
+    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/views/User/heavyMetalFluxCalculation/inputFluxCalculation/atmosphericDryWetDeposition.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="">
-    2
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
+import AtmtencentMap from './atmospheredata/atmtencentMap.vue';
+
+
 export default {
   name: '',
   data() {

src/views/User/heavyMetalFluxCalculation/inputFluxCalculation/irrigationWater.vue

@@ -1,33 +1,9 @@
 <template>
   <div class="page-container">
-    <!-- 上半部分：地图 + 柱状图 -->
-    <div class="top-content">
-      <div class="map-module">
-        <div class="map-box">地图模块</div>
-      </div>
-      <div class="chart-module">
-        <div ref="chartRef" class="chart-box"></div>
-      </div>
-    </div>
-
-    <!-- 中间间距 -->
-    <div class="middle-gap"></div>
+   <div>
+    <router-view></router-view> <!-- 关键：子路由渲染位置 -->
+  </div>
 
-    <!-- 下半部分：表格 -->
-    <div class="table-module">
-      <el-table
-        :data="tableData"
-        style="width: 100%"
-        max-height="100%"
-        border
-        stripe
-        class="scrollable-table"
-      >
-        <el-table-column prop="name" label="项目" width="150" />
-        <el-table-column prop="value" label="数值" width="150" />
-        <el-table-column prop="unit" label="单位" width="100" />
-      </el-table>
-    </div>
   </div>
 </template>
 
@@ -35,90 +11,9 @@
 import { ref, onMounted, watch, computed } from 'vue';
 import * as echarts from 'echarts';
 
-const form = ref({
-  nutrients: 10,
-  heavyMetals: 5,
-  phValue: 7,
-  yieldQuality: 60,
-  pestRate: 3,
-});
-
-const chartRef = ref(null);
-let chartInstance = null;
-
-const initChart = () => {
-  if (!chartRef.value) return;
-  chartInstance = echarts.init(chartRef.value);
 
-  const option = {
-    title: {
-      text: '传统耕种风险比例',
-      left: 'center',
-    },
-    tooltip: {
-      trigger: 'item',
-    },
-    legend: {
-      orient: 'vertical',
-      left: 'left',
-    },
-    series: [
-      {
-        name: '风险因素',
-        type: 'pie',
-        radius: '50%',
-        data: [
-          { value: form.value.nutrients, name: '养分含量' },
-          { value: form.value.heavyMetals, name: '重金属污染' },
-          { value: form.value.phValue, name: 'pH 值' },
-          { value: form.value.yieldQuality, name: '产量或品质' },
-          { value: form.value.pestRate, name: '病虫害率' },
-        ],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0,0,0,0.5)',
-          },
-        },
-      },
-    ],
-  };
-  chartInstance.setOption(option);
-};
 
-const updateChart = () => {
-  if (!chartInstance) return;
-  chartInstance.setOption({
-    series: [
-      {
-        data: [
-          { value: form.value.nutrients, name: '养分含量' },
-          { value: form.value.heavyMetals, name: '重金属污染' },
-          { value: form.value.phValue, name: 'pH 值' },
-          { value: form.value.yieldQuality, name: '产量或品质' },
-          { value: form.value.pestRate, name: '病虫害率' },
-        ],
-      },
-    ],
-  });
-};
 
-onMounted(() => {
-  initChart();
-});
-
-watch(form, () => {
-  updateChart();
-}, { deep: true });
-
-const tableData = computed(() => [
-  { name: '养分含量', value: form.value.nutrients, unit: '%' },
-  { name: '重金属污染', value: form.value.heavyMetals, unit: '%' },
-  { name: 'pH 值', value: form.value.phValue, unit: '' },
-  { name: '产量或品质', value: form.value.yieldQuality, unit: '%' },
-  { name: '病虫害率', value: form.value.pestRate, unit: '%' },
-]);
 </script>
 
 <style scoped>
@@ -131,67 +26,4 @@ const tableData = computed(() => [
   background-color: #f5f7fa;
 }
 
-/* 上半部分占47%高度 */
-.top-content {
-  display: flex;
-  height: 47%;
-  gap: 20px;
-}
-
-/* 中间间距 */
-.middle-gap {
-  height: 10px;
-}
-
-/* 下半部分表格占50%高度 */
-.table-module {
-  height: 50%;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
-  overflow: auto;
-}
-
-.map-module {
-  flex: 1;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.map-box {
-  width: 100%;
-  height: 100%;
-  border: 2px dashed #bbb;
-  border-radius: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: bold;
-  color: #999;
-}
-
-.chart-module {
-  flex: 1;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.chart-box {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-}
-
-.scrollable-table {
-  width: 100%;
-  height: 100%;
-}
 </style>

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="page-container">
+    
+   <div class="point-map">
+    <div class="component-title">采样点地图展示</div>
+   <TencentMapView/>
+   </div>
+
+  
+   <div class="point-line">
+    <div class="component-title">采样点数据列表展示</div>
+    <Waterdataline/>
+   </div>
+
+   <div class="charts-line">
+    <div class="component-title">韶关市各区县重金属平均浓度</div>
+    <Waterassaydata2/>
+   </div>
+  </div>
+</template>
+
+<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';
+
+
+
+
+</script>
+
+<style scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* 整屏高度 */
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #f5f7fa;
+  gap: 20px;
+  margin: 0;
+}
+
+.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: 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;
+  width: 100%;
+  margin: 20px auto;
+}
+.component-title {
+  /* 基础布局：左对齐 + 紧凑间距 */
+  text-align: left;        /* 强制左对齐，告别居中 */
+  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
+  padding-left: 24px;      /* 给蓝色方块留空间 */
+  position: relative;      /* 为伪元素定位做准备 */
+
+  /* 文字样式：简约但醒目 */
+  font-size: 1.7rem;      /* 稍小一号，更克制（原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/heavyMetalFluxCalculation/inputFluxCalculation/waterdata/rivermessage.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <router-view></router-view> <!-- 关键：子路由渲染位置 -->
+  </div>
+  <div class="container">
+    <div class="main-content">
+      <section id="sampling" class="section">
+        <h3>采样过程</h3>
+        
+        <!-- 采样设备图片：3张并排展示 -->
+        <div class="image-container">
+          <div class="image-row">
+            <div class="image-item">
+              <img :src="samplingDeviceImg1" alt="灌溉水采样设备1">
+              <div class="image-caption">图3-1 灌溉水采样设备</div>
+            </div>
+            <div class="image-item">
+              <img :src="samplingDeviceImg2" alt="灌溉水采样设备2">
+              <div class="image-caption">图3-2 灌溉水采样设备</div>
+            </div>
+            <div class="image-item">
+              <img :src="samplingDeviceImg3" alt="灌溉水采样设备3">
+              <div class="image-caption">图3-3 灌溉水采样设备</div>
+            </div>
+          </div>
+        </div>
+
+        <h4>采样容器均为500mL的白色聚乙烯瓶，采样体积均为500mL，采样过程在不同天气条件下进行，主要天气状况包括多云、阴天和小雨，采样点周边环境主要为河流，只有少数样品采集于水渠或瀑布区域。</h4>
+        <br>
+        <h4>绝大多数样品状态为无色、无沉淀、无味、无悬浮物，只有少量样品稍显浑浊并含有沉淀物。为了保证样品的完整性和数据的准确性，采样后的保存方式包括了冷藏、避光、确保标签完好以及采取有效的减震措施，以避免运输过程中的振动和损坏。</h4>
+
+        <!-- 工作人员采样现场：3张并排展示 -->
+        <div class="image-container">
+          <div class="image-row">
+            <div class="image-item">
+              <img :src="workerSamplingImg1" alt="工作人员采样现场1">
+              <div class="image-caption">图4-1 工作人员采样现场</div>
+            </div>
+            <div class="image-item">
+              <img :src="workerSamplingImg2" alt="工作人员采样现场2">
+              <div class="image-caption">图4-2 工作人员采样现场</div>
+            </div>
+            <div class="image-item">
+              <img :src="workerSamplingImg3" alt="工作人员采样现场3">
+              <div class="image-caption">图4-3 工作人员采样现场</div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+    
+    <footer>
+      <p>韶关市环境科学研究院 &copy; 2024 | 水质研究报告</p>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 导入所有图片（确保文件名和路径完全匹配！）
+import samplingDeviceImg1 from '@/assets/samplingequipment1.png';
+import samplingDeviceImg2 from '@/assets/samplingequipment2.png';
+import samplingDeviceImg3 from '@/assets/samplingequipment3.png';
+import workerSamplingImg1 from '@/assets/samplingsite1.png';
+import workerSamplingImg2 from '@/assets/samplingsite2.png';
+import workerSamplingImg3 from '@/assets/samplingsite3.png';
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+onMounted(() => {
+  console.log('当前路由参数:', route.params)
+  console.log('匹配的子路由:', route.matched)
+})
+</script>
+
+<style scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+body {
+  background-color: #f5f9fc;
+  color: #333;
+  line-height: 1.6;
+  padding: 20px;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px 0;
+}
+
+.main-content {
+  width: 100%;
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+}
+
+.section {
+  margin-bottom: 40px;
+  padding-bottom: 30px;
+}
+
+h3 {
+  color: #1e5799;
+  font-size: 1.6rem;
+  margin-bottom: 20px;
+  position: relative;
+  padding-left: 25px;
+}
+
+h3:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  background: #2989d8;
+  border-radius: 4px;
+}
+
+/* 缩小段落字体 */
+p {
+  font-size: 0.9rem; /* 原来可能是1rem，现在缩小 */
+  color: #444;
+  line-height: 1.8;
+  text-align: justify;
+  margin-bottom: 15px;
+}
+
+/* 图片容器：放大图片 + 并排布局 */
+.image-container {
+  background-color: #f8fbff;
+  border: 1px solid #dbe9f5;
+  border-radius: 10px;
+  margin: 20px auto;
+  padding: 20px;
+  text-align: center;
+  max-width: 90%;
+}
+
+/* 图片行：并排展示 */
+.image-row {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap; /* 屏幕小的时候自动换行 */
+}
+
+/* 单个图片项：放大显示 */
+.image-item {
+  flex: 1;
+  min-width: 250px; /* 保证最小宽度 */
+}
+
+.image-item img {
+  width: 100%; /* 占满容器，自然放大 */
+  height: auto; /* 保持比例 */
+  border-radius: 8px;
+}
+
+.image-caption {
+  font-style: italic;
+  color: #666;
+  margin-top: 8px;
+  font-size: 0.85rem;
+}
+
+footer {
+  text-align: center;
+  margin-top: 30px;
+  padding-top: 20px;
+  color: #777;
+  font-size: 0.9rem;
+  border-top: 1px solid #eee;
+}
+</style>

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

@@ -0,0 +1,425 @@
+<template>
+  <div class="map-page">
+    <h3 class="table-title">断面数据地图展示</h3>
+    <div ref="mapContainer" class="map-container"></div>
+  </div>
+
+  <div class="map-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>
+</template>
+
+<script setup>
+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 tMapConfig = reactive({
+  key: import.meta.env.VITE_TMAP_KEY, // 必须配置环境变量（腾讯地图开发者密钥）
+})
+
+// 加载腾讯地图SDK
+const loadSDK = () => {
+  return new Promise((resolve, reject) => {
+    if (window.TMap) {
+      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&key=${tMapConfig.key}&callback=initTMap`
+    window.initTMap = () => {
+      TMap.value = window.TMap
+      resolve(window.TMap)
+    }
+    script.onerror = (err) => {
+      reject(`地图加载失败: ${err.message}`)
+      document.head.removeChild(script)
+    }
+    document.head.appendChild(script)
+  })
+}
+
+// 初始化断面数据（直接嵌入你的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 }
+  ];
+
+  // 处理坐标（WGS84转GCJ02，腾讯地图用GCJ02）
+  state.excelData = rawData.map(item => {
+    const lng = Number(item.经度);
+    const lat = Number(item.纬度);
+    if (isNaN(lat) || isNaN(lng)) {
+      console.error('无效经纬度:', item);
+      return null;
+    }
+    const [gcjLng, gcjLat] = wgs84togcj02(lng, lat); // 坐标转换
+    return {
+      id: item.断面编号,
+      river: item.所属河流,
+      location: item.断面位置,
+      district: item.所属区县,
+      cdValue: item["Cd(mg/L)"],
+      latitude: gcjLat,
+      longitude: gcjLng,
+    };
+  }).filter(item => item !== null);
+}
+
+// 初始化地图
+const initMap = async () => {
+  try {
+    await loadSDK()
+    // 创建地图实例（中心设为数据区域：粤北）
+    map = new TMap.value.Map(mapContainer.value, {
+      center: new TMap.value.LatLng(25.2, 114), //前大往下，后大往左
+      zoom: 9.8,
+      minZoom: 9.8,
+      maxZoom: 14,
+    })
+    // 创建标记图层
+    markersLayer = new TMap.value.MultiMarker({
+      map: map,
+      styles: {
+        default: new TMap.value.MarkerStyle({
+          width: 30,
+          height: 30,
+          //anchor: { x: 15, y: 15 }, // 图标居中
+          src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAyTDIgMjJoMjBMMTIgMnoiIGZpbGw9IiNGRjAwMDAiLz48L3N2Zz4='        })
+      }
+    });
+    // 绑定标记点击事件
+    markersLayer.on('click', handleMarkerClick);
+    // 加载数据并渲染标记
+    initData();
+    updateMarkers();
+    isMapReady.value = true;
+  } catch (err) {
+    console.error('地图初始化失败:', err);
+    error.value = err.message;
+  }
+}
+
+// 更新标记点
+const updateMarkers = () => {
+  const geometries = state.excelData.map(item => ({
+    id: String(item.id), // 统一转字符串，避免类型错误
+    styleId: 'default',
+    position: new TMap.value.LatLng(item.latitude, item.longitude),
+    properties: {
+      title: item.location, // 断面位置作为标题
+    }
+  }));
+  markersLayer.setGeometries(geometries);
+}
+
+// 标记点击事件（直接用本地数据）
+const handleMarkerClick = (e) => {
+  const marker = e.geometry;
+  if (!marker) return;
+  // 查找本地数据
+  const markerId = String(marker.id);
+  const matchedData = state.excelData.find(item => String(item.id) === markerId);
+  if (!matchedData) {
+    console.error('未找到数据:', markerId);
+    return;
+  }
+  // 构建信息窗口内容
+  const content = `
+    <div class="water-info-window">
+      <h3 class="info-title">断面编号：${matchedData.id}</h3>
+      <div class="info-content">
+        <div class="info-row">
+          <span class="info-label">所属河流：</span>
+          <span class="info-value">${matchedData.river}</span>
+        </div>
+
+        <div class="info-row">
+          <span class="info-label">断面位置：</span>
+          <span class="info-value">${matchedData.location}</span> 
+        </div>
+
+        <div class="info-row">
+          <span class="info-label">所属区县：</span>
+          <span class="info-value">${matchedData.district}</span>
+        </div>
+        
+        <div class="info-row">
+          <span class="info-label">Cd含量：</span>
+          <span class="info-value">${matchedData.cdValue} mg/L</span>
+        </div>
+      
+      </div>
+    </div>
+  `;
+  // 关闭之前的信息窗口
+  if (infoWindow.value) {
+    infoWindow.value.close();
+  }
+  // 打开新信息窗口
+  infoWindow.value = new TMap.value.InfoWindow({
+    map: map,
+    position: marker.position,
+    content,
+    offset: { x: 0, y: -32 } // 向上偏移，避免遮挡标记
+  });
+  infoWindow.value.open();
+}
+
+// 生命周期
+onMounted(async () => {
+  try {
+    await loadSDK();
+    await initMap();
+  } catch (err) {
+    error.value = err.message;
+  }
+})
+
+onBeforeUnmount(() => {
+  if (markersLayer) markersLayer.setMap(null); // 销毁标记图层
+  if (infoWindow.value) infoWindow.value.close(); // 关闭信息窗口
+})
+</script>
+
+<style scoped>
+/* 地图容器保持不变 */
+.map-page { 
+  width: 100vw; 
+  height: 40vw; 
+  background-color: white;
+  border-radius:  12px;
+  margin-bottom: 24px;
+}
+
+.map-container { 
+  width: 100%; 
+  height: 50%; 
+  margin: 1rem auto;
+  padding: 0;
+}
+
+/* 信息窗口核心调整：暴力放大 + 宽高适配 */
+:v-deep(.tmap-infowindow) {
+  padding: 20px !important;  /* 超大内边距 */
+  min-width: 320px !important; /* 强制加宽 */
+  font-size: 1.25rem !important; /* 基准字体爆炸大 */
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; /* 阴影增强 */
+}
+
+.water-info-window {
+  background-color: #FFFFFF;
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 32, 71, 0.15);
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  transition: transform 0.3s ease;
+  border: 1px solid #e0e7ef;
+}
+
+.info-title {
+  background: linear-gradient(135deg, #1e88e5, #1565c0);
+  color: white;
+  font-size: 1.15rem;
+  font-weight: 600;
+  padding: 16px 20px;
+  margin: 0;
+  position: relative;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid #e0e7ef;
+}
+
+.info-title:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  right: 20px;
+  height: 1px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 15px;
+  align-items: center;
+  position: relative;
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-row:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: #e3f2fd;
+  border: 2px solid #90caf9;
+}
+
+.info-row:nth-child(4):before {
+  background-color: #ffebee;
+  border-color: #ffcdd2;
+}
+
+.info-label {
+  flex: 0 0 100px;
+  color: #546e7a;
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: right;
+  padding-right: 15px;
+  position: relative;
+}
+
+.info-label:after {
+  content: ":";
+  position: absolute;
+  right: 5px;
+}
+
+.info-value {
+  flex: 1;
+  color: #263238;
+  font-size: 1rem;
+  background: #f8f9fa;
+  padding: 10px 15px;
+  border-radius: 6px;
+  border-left: 3px solid #64b5f6;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
+  transition: all 0.3s ease;
+}
+
+.info-row:nth-child(4) .info-value {
+  color: #e53935;
+  border-left-color: #ef9a9a;
+  font-weight: 600;
+  position: relative;
+}
+
+.info-row:nth-child(4) .info-value:after {
+  content: "mg/L";
+  position: absolute;
+  right: 15px;
+  font-size: 0.85rem;
+  font-weight: normal;
+  color: #78909c;
+}
+
+.table-container {
+  padding: 20px;
+  flex: 1;
+  overflow: auto;
+}
+
+.table-title {
+  /* 基础布局：左对齐 + 紧凑间距 */
+  text-align: left;        /* 强制左对齐，告别居中 */
+  margin: 12px 0;          /* 上下间距缩小，更紧凑（原16px→12px） */
+  padding-left: 24px;      /* 给蓝色方块留空间 */
+  position: relative;      /* 为伪元素定位做准备 */
+
+  /* 文字样式：简约但醒目 */
+  font-size: 1.7rem;      /* 稍小一号，更克制（原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;    /* 轻微圆角，比直角更柔和 */
+}
+
+.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;
+}
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="map-container">
+    <div id="water-system-map"></div>
+  </div>
+</template>
+
+<script setup>
+//水系图的转换
+import 'leaflet/dist/leaflet.css';
+import { onMounted, onUnmounted } from 'vue';
+import L from 'leaflet';
+
+let map; // 声明为全局变量，避免被Vue垃圾回收
+
+onMounted(() => {
+  // 初始化地图容器尺寸
+  const mapContainer = document.getElementById('water-system-map');
+  mapContainer.style.width = '100%';
+  mapContainer.style.height = '600px';
+
+  // 初始化地图（经纬度、缩放级别可根据GeoJSON数据调整）
+  const map = L.map('water-system-map').setView([24.88, 113.62], 9);
+
+
+  // 加载GeoJSON
+  fetch('/data/韶关市河流水系图.geojson')
+    .then(res => {
+      if (!res.ok) {
+        throw new Error('GeoJSON加载失败');
+      }
+      return res.json();
+    })
+    .then(geojson => {
+      // 添加水系样式（可自定义颜色、宽度）
+      L.geoJSON(geojson, {
+        style: {
+          color: '#0066cc',    // 蓝色线条
+          weight: 2,           // 线条宽度
+          opacity: 0.8,        // 透明度
+          lineJoin: 'round'    // 拐角圆润
+        },
+        // 可选：添加鼠标悬停效果
+        onEachFeature(feature, layer) {
+          layer.on('mouseover', function() {
+            this.setStyle({ color: '#ff3300', weight: 3 }); // 悬停变红加粗
+          });
+          layer.on('mouseout', function() {
+            this.setStyle({ color: '#0066cc', weight: 2 }); // 离开恢复
+          });
+        }
+      }).addTo(map);
+    })
+    .catch(err => {
+      console.error('加载GeoJSON失败:', err);
+      alert('水系图加载失败，请检查文件路径');
+    });
+
+  // 监听窗口Resize，适配地图尺寸
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  // 组件销毁时移除事件监听，避免内存泄漏
+  window.removeEventListener('resize', handleResize);
+  if (map) {
+    map.remove();
+    map = null;
+  }
+});
+
+// 窗口Resize处理函数
+function handleResize() {
+  if (map) {
+    map.invalidateSize();
+  }
+}
+</script>
+
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 600px; /* 确保父容器有高度 */
+}
+.leaflet-default-icon-path {
+  background-image: url('https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png');
+}
+</style>

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

@@ -0,0 +1,1045 @@
+<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/waterassaydata1.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="boxplot-container">
+    <div ref="chartRef" style="width: 100%; height: 500px;"></div>
+  </div>
+</template>
+<!--各种重金属的箱图-->
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import { ref, onMounted, onUnmounted } from 'vue';
+import axios from 'axios';
+
+// 明确定义数据类型
+interface HeavyMetalData {
+  sampleId: string;
+  Cr: number | null;
+  As: number | null;
+  Cd: number | null;
+  Hg: number | null;
+  Pb: number | null;
+}
+
+const METALS = ['Cr', 'As', 'Cd', 'Hg', 'Pb'] as const;
+type MetalType = typeof METALS[number];
+
+const METAL_LABELS: Record<MetalType, string> = {
+  Cr: '铬(Cr)',
+  As: '砷(As)',
+  Cd: '镉(Cd)',
+  Hg: '汞(Hg)',
+  Pb: '铅(Pb)'
+};
+
+// 图表变量
+const chartRef = ref<HTMLElement | null>(null);
+const chartInstance = ref<echarts.ECharts | null>(null);
+const metalData = ref<HeavyMetalData[]>([]);
+let resizeHandler: (() => void) | null = null; // 用于存储resize处理函数
+
+// 数据清洗函数
+const cleanData = (rawValue: any): number | null => {
+  if (typeof rawValue === 'string') {
+    const num = parseFloat(rawValue);
+    return isNaN(num) || num < 0 ? null : num;
+  }
+  return typeof rawValue === 'number' && rawValue >= 0 ? rawValue : null;
+};
+
+// 修复后的四分位数计算算法
+const calculateBoxplotStats = (values: number[]): [number, number, number, number, number] | null => {
+  if (values.length < 5) return null; // 至少需要5个数据点才能生成有效的箱线图
+  
+  // 升序排序
+  const sorted = [...values].sort((a, b) => a - b);
+  const n = sorted.length;
+
+  // 正确的分位位置计算
+  const quantile = (p: number) => {
+    const pos = (n + 1) * p;
+    const lowerIndex = Math.max(0, Math.min(n - 1, Math.floor(pos) - 1));
+    const fraction = pos - Math.floor(pos);
+    
+    if (lowerIndex >= n - 1) return sorted[n - 1];
+    return sorted[lowerIndex] + fraction * (sorted[lowerIndex + 1] - sorted[lowerIndex]);
+  };
+
+  return [
+    sorted[0],               // 最小值
+    quantile(0.25),          // Q1
+    quantile(0.5),           // 中位数
+    quantile(0.75),          // Q3
+    sorted[n - 1]            // 最大值
+  ];
+};
+
+// 渲染图表
+const renderBoxplot = () => {
+  if (!chartRef.value || metalData.value.length === 0) return;
+  
+  // 移除旧的resize监听器
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler);
+  }
+
+  // 分组收集每种金属的有效数值
+  const metalValues = Object.fromEntries(
+    METALS.map(metal => [
+      metal, 
+      metalData.value
+        .map(item => item[metal])
+        .filter((val): val is number => val !== null)
+    ])
+  ) as Record<MetalType, number[]>;
+
+  // 准备箱线图数据
+  const validBoxplotData: ([number, number, number, number, number] | null)[] = 
+    METALS.map(metal => calculateBoxplotStats(metalValues[metal]));
+
+  // ECharts配置
+  const option: echarts.EChartsOption = {
+    backgroundColor: '#FFFFFF',
+    title: {
+      text: '重金属浓度分布箱线图',
+      left: 'center',
+      textStyle: { color: '#333', fontSize: 16 }
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        const metalIndex = params.dataIndex;
+        const metal = METALS[metalIndex];
+        const stats = validBoxplotData[metalIndex];
+        
+        // 处理空数据情况（修复图片中的null错误）
+        if (stats === null || stats[0] === null) {
+          return `<span style="color:#ff0000">${METAL_LABELS[metal]}数据不足，无法生成统计值</span>`;
+        }
+        
+        // 类型安全解构（确保所有值都是number类型）
+        const [min, q1, median, q3, max] = stats;
+        
+        return `
+          <b>${METAL_LABELS[metal]}</b><br/>
+          最小值: ${min.toFixed(4)} mg/L<br/>
+          下四分位: ${q1.toFixed(4)} mg/L<br/>
+          中位数: ${median.toFixed(4)} mg/L<br/>
+          上四分位: ${q3.toFixed(4)} mg/L<br/>
+          最大值: ${max.toFixed(4)} mg/L
+        `;
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: METALS.map(metal => METAL_LABELS[metal]),
+      axisLabel: { color: '#333', interval: 0 }
+    },
+    yAxis: {
+      type: 'value',
+      name: '浓度（mg/L）',
+      nameTextStyle: { color: '#333' },
+      axisLabel: { 
+        color: '#333',
+        formatter: (value: number) => value.toFixed(4)
+      }
+    },
+    series: [{
+      type: 'boxplot',
+      // 过滤无效数据（解决ts 2322错误）
+      data: validBoxplotData.filter(arr => arr !== null) as [number, number, number, number, number][],
+      itemStyle: {
+        color: '#4285F4',
+        borderWidth: 1.5
+      },
+      emphasis: {
+        itemStyle: {
+          borderColor: '#333',
+          borderWidth: 2
+        }
+      }
+    }]
+  };
+
+  // 初始化图表
+  if (chartInstance.value) {
+    chartInstance.value.dispose();
+  }
+  chartInstance.value = echarts.init(chartRef.value);
+  chartInstance.value.setOption(option);
+  
+  // 响应式处理
+  resizeHandler = () => chartInstance.value?.resize();
+  window.addEventListener('resize', resizeHandler);
+};
+
+// 数据加载
+const loadData = async () => {
+  try {
+    const response = await axios.get<any[]>(
+      'http://localhost:3000/table/Water_assay_data',
+      { timeout: 5000 }
+    );
+    
+    // 数据转换与过滤
+    metalData.value = response.data
+      .map(item => ({
+        sampleId: String(item.sampleId),
+        Cr: cleanData(item.Cr),
+        As: cleanData(item.As),
+        Cd: cleanData(item.Cd),
+        Hg: cleanData(item.Hg),
+        Pb: cleanData(item.Pb)
+      }))
+      // 修复：允许部分有效数据
+      .filter(item => METALS.some(metal => item[metal] !== null));
+    
+    renderBoxplot();
+  } catch (error) {
+    console.error('数据加载失败:', error);
+    alert('数据加载错误，请查看控制台日志');
+  }
+};
+
+onMounted(() => loadData());
+onUnmounted(() => {
+  // 清理资源
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler);
+  }
+  chartInstance.value?.dispose();
+});
+</script>
+
+<style scoped>
+.boxplot-container {
+  width: 100%;
+  max-width: 1000px;
+  margin: 20px auto;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+</style>

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

@@ -0,0 +1,290 @@
+<template>
+  <div class="region-average-chart">
+    <div ref="chartRef" class="chart-box"></div>
+    <div v-if="loading" class="status">数据加载中...</div>
+    <div v-else-if="error" class="status error">{{ error }}</div>
+  </div>
+</template>
+<!--各地区的重金属平均值得柱状图-->
+<script setup>
+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 EXCLUDE_FIELDS = [
+  'water_assay_ID', 'sample_code', 'assayer_ID', 'assay_time', 
+  'assay_instrument_model', 'water_sample_ID', 'pH'
+];
+const COLORS = ['#ff4d4f99', '#1890ff', '#ffd700',  '#52c41a88', '#722ed199' ];
+
+// 韶关市下属行政区划白名单 [关键修改点]
+const SG_REGIONS = [
+  '浈江区', '武江区', '曲江区', '乐昌市', 
+  '南雄市', '始兴县', '仁化县', '翁源县', 
+  '新丰县', '乳源瑶族自治县'
+];
+
+// ========== 响应式数据 ==========
+const chartRef = ref(null);
+const loading = ref(true);
+const error = ref('');
+let myChart = null;
+
+// ========== 地区提取函数（韶关市专属版）[核心修改] ==========
+const extractRegion = (location) => {
+  if (!location || typeof location !== 'string') return null;
+
+  // 1. 精确匹配官方区县名称
+  const officialMatch = SG_REGIONS.find(region => 
+    location.includes(region)
+  );
+  if (officialMatch) return officialMatch;
+
+  // 2. 处理嵌套格式（如"韶关市-浈江区"）
+  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;
+  }
+
+  // 3. 特殊格式处理（如"韶关市浈江区"）
+  const shortMatch = location.match(/韶关市([区市县][^市]{2,5})/);
+  if (shortMatch && shortMatch[1]) return shortMatch[1];
+
+  // 4. 修正常见拼写错误
+  if (location.includes('乐昌')) return '乐昌市';
+  if (location.includes('乳源')) return '乳源瑶族自治县';
+
+  console.warn(`⚠️ 未识别地区: ${location}`);
+  return '未知区县';
+};
+
+// ========== 数据处理流程 ==========
+const processMergedData = (samplingData, assayData) => {
+  // 1. 构建采样点ID到区县的映射
+  const regionMap = new Map();
+  samplingData.forEach(item => {
+    const region = extractRegion(item.sampling_location || '');
+    if (region && region !== '未知区县') {
+      regionMap.set(item.water_sample_ID, region);
+    }
+  });
+
+  // 2. 关联重金属数据与区县
+  const mergedData = assayData.map(item => ({
+    ...item,
+    region: regionMap.get(item.water_sample_ID) || '未知区县'
+  }));
+
+  // 3. 识别重金属字段
+  const metals = Object.keys(mergedData[0] || {})
+    .filter(key => !EXCLUDE_FIELDS.includes(key) && !isNaN(parseFloat(mergedData[0][key])));
+
+  // 4. 按区县分组统计
+  const regionGroups = {};
+  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 (!regionGroups[region]) {
+      regionGroups[region] = {};
+      metals.forEach(metal => {
+        regionGroups[region][metal] = { sum: 0, count: 0 };
+      });
+    }
+
+    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++;
+      }
+    });
+  });
+  
+  const totalSamples = uniqueSampleIds.size;
+
+  // 5. 按官方顺序排序区县
+  const regions = SG_REGIONS.filter(region => regionGroups[region]);
+  
+  // 6. 添加"全市平均"作为最后一个类别
+  regions.push("全市平均");
+
+  // 7. 构建ECharts数据（包括全市平均值）
+  const series = metals.map((metal, idx) => {
+    // 计算全市平均值
+    const cityWideAvg = cityWideAverages[metal].count 
+      ? (cityWideAverages[metal].sum / cityWideAverages[metal].count).toFixed(2) 
+      : 0;
+    
+    return {
+      name: metal,
+      type: 'bar',
+      data: regions.map(region => {
+        if (region === "全市平均") {
+          return cityWideAvg;
+        }
+        const group = regionGroups[region][metal];
+        return group.count ? (group.sum / group.count).toFixed(2) : 0;
+      }),
+      itemStyle: { 
+        color: COLORS[idx % COLORS.length],
+      },
+      label: {
+        show: true,
+        position: 'top',
+        fontSize:14,
+        color:'#333',
+      }
+    };
+  });
+
+  return { regions, series, totalSamples };
+};
+
+// ========== ECharts 初始化 ==========
+const initChart = ({ regions, series, totalSamples }) => {
+  if (!chartRef.value) return;
+  if (myChart) myChart.dispose();
+
+  myChart = echarts.init(chartRef.value);
+  const option = {
+    title: { 
+      left: 'center',
+      subtext: `数据来源: ${totalSamples}个有效检测样本`,
+      subtextStyle:{
+        fontSize:14
+      }
+    },
+    tooltip: { 
+      trigger: 'axis',
+      formatter: params => {
+        const regionName = params[0].name;
+        const isCityWide = regionName === "全市平均";
+        
+        let content = `${isCityWide ? "全市平均值" : regionName}:`;
+        if (isCityWide) {
+          content += `<br><span style="color: #666;">（基于${totalSamples}个样本计算）</span>`;
+        }
+        
+        return content + params.map(p => `<br>${p.seriesName}: ${p.value} mg/L`).join('');
+      },
+      textSize:{
+        fontSize:14
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: regions,
+      axisLabel: { 
+        rotate: 45,
+        formatter: val => val.replace('韶关市', ''),
+        fontSize:13
+      }
+    },
+    yAxis: { 
+      type: 'value', 
+      name: '浓度(mg/L)' ,
+      axisLabel:{
+        fontSize:13,
+      }
+    },
+    dataZoom: [{
+      type: 'inside',
+      start: 0,
+      end: 100
+    }],
+    series,
+    legend: { 
+      data: series.map(s => s.name), 
+      bottom: 10,
+      textStyle:{
+        fontSize:13
+      }
+    },
+    grid: { 
+      left: '3%', 
+      right: '3%', 
+      bottom: '15%', 
+      containLabel: true 
+    },
+  };
+
+  myChart.setOption(option);
+};
+
+// ========== 生命周期钩子 ==========
+onMounted(async () => {
+  try {
+    const [samplingRes, assayRes] = await Promise.all([
+      axios.get(SAMPLING_API, { timeout: 10000 }),
+      axios.get(ASSAY_API, { timeout: 10000 })
+    ]);
+    
+    initChart(processMergedData(samplingRes.data, assayRes.data));
+  } catch (err) {
+    error.value = '数据加载失败: ' + (err.message || '未知错误');
+    console.error('接口错误:', err);
+  } finally {
+    loading.value = false;
+  }
+});
+
+// 响应式布局
+const resizeHandler = () => myChart && myChart.resize();
+onMounted(() => window.addEventListener('resize', resizeHandler));
+onUnmounted(() => window.removeEventListener('resize', resizeHandler));
+</script>
+
+<style scoped>
+.region-average-chart {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+.chart-box {
+  width: 100%;
+  height: 600px;
+  min-height: 400px;
+  background-color: white;
+  border-radius: 8px;
+}
+.status {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px;
+  background: rgba(255,255,255,0.8);
+  border-radius: 4px;
+}
+.error { 
+  color: #ff4d4f;
+  font-weight: bold;
+}
+</style>

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

@@ -0,0 +1,197 @@
+<template>
+  <div class="heavy-metal-radar">
+    <h2 class="chart-title">重金属指标雷达图分析</h2>
+    <canvas ref="chartRef" class="chart-box"></canvas>
+    <div v-if="loading" class="status">数据加载中...</div>
+    <div v-else-if="error" class="status error">{{ error }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import Chart from 'chart.js/auto';
+import axios from 'axios';
+
+// ========== 接口配置（和柱状图对齐） ==========
+const ASSAY_API = 'http://localhost:3000/table/Water_assay_data'; // 复用柱状图的接口
+
+// ========== 配置项（模仿柱状图） ==========
+const EXCLUDE_FIELDS = [
+  'water_assay_ID', 'sample_code', 'assayer_ID', 'assay_time', 
+  'assay_instrument_model', 'water_sample_ID', 'pH'
+];
+const COLORS = ['#165DFF', '#36CFC9', '#722ED1']; // 雷达图三色
+
+// ========== 响应式数据 ==========
+const chartRef = ref(null);
+const loading = ref(true);
+const error = ref('');
+let radarChart = null;
+
+// ========== 数据处理：提取重金属指标 + 统计计算 ==========
+const processRadarData = (assayData) => {
+  // 1. 提取重金属字段（排除指定字段，且为数值类型）
+  const metals = Object.keys(assayData[0] || {})
+    .filter(key => !EXCLUDE_FIELDS.includes(key) && !isNaN(parseFloat(assayData[0][key])));
+
+  // 2. 计算每个重金属的统计值（均值、中位数、标准差）
+  const stats = metals.map(metal => {
+    const values = assayData.map(item => parseFloat(item[metal])).filter(v => !isNaN(v));
+    return {
+      mean: calculateMean(values),
+      median: calculateMedian(values),
+      std: calculateStdDev(values)
+    };
+  });
+
+  return { metals, stats };
+};
+
+// ========== 统计工具函数 ==========
+const calculateMean = (values) => {
+  if (values.length === 0) return 0;
+  return values.reduce((sum, val) => sum + val, 0) / values.length;
+};
+
+const calculateMedian = (values) => {
+  if (values.length === 0) return 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 
+    ? (sorted[mid - 1] + sorted[mid]) / 2 
+    : sorted[mid];
+};
+
+const calculateStdDev = (values) => {
+  if (values.length <= 1) return 0;
+  const mean = calculateMean(values);
+  const variance = values.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / values.length;
+  return Math.sqrt(variance);
+};
+
+// ========== 初始化雷达图（Chart.js） ==========
+const initRadarChart = ({ metals, stats }) => {
+  if (!chartRef.value) return;
+  if (radarChart) radarChart.destroy();
+
+  const ctx = chartRef.value.getContext('2d');
+  radarChart = new Chart(ctx, {
+    type: 'radar',
+    data: {
+      labels: metals,
+      datasets: [
+        {
+          label: '均值',
+          data: stats.map(s => s.mean.toFixed(2)),
+          borderColor: COLORS[0],
+          backgroundColor: 'rgba(22, 93, 255, 0.1)',
+          pointRadius: 4,
+          borderWidth: 2
+        },
+        {
+          label: '中位数',
+          data: stats.map(s => s.median.toFixed(2)),
+          borderColor: COLORS[1],
+          backgroundColor: 'rgba(54, 207, 201, 0.1)',
+          pointRadius: 4,
+          borderWidth: 2
+        },
+        {
+          label: '标准差',
+          data: stats.map(s => s.std.toFixed(2)),
+          borderColor: COLORS[2],
+          backgroundColor: 'rgba(114, 46, 209, 0.1)',
+          pointRadius: 4,
+          borderWidth: 2
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        r: {
+          beginAtZero: true,
+          ticks: { display: false },
+          pointLabels: { font: { size: 12, weight: 'bold' } },
+          grid: { color: 'rgba(0,0,0,0.05)' },
+          angleLines: { color: 'rgba(0,0,0,0.1)' }
+        }
+      },
+      plugins: {
+        legend: { position: 'bottom' },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.dataset.label}: ${ctx.raw} mg/L`
+          }
+        }
+      }
+    }
+  });
+};
+
+// ========== 生命周期钩子（和柱状图对齐） ==========
+onMounted(async () => {
+  try {
+    // 【关键】和柱状图一样，axios 请求 **不携带凭证**（withCredentials: false，默认就是false）
+    const assayRes = await axios.get(ASSAY_API, { timeout: 10000, withCredentials:false });
+    const processed = processRadarData(assayRes.data);
+    
+    if (processed.metals.length === 0) {
+      throw new Error('未检测到有效重金属指标');
+    }
+    
+    initRadarChart(processed);
+  } catch (err) {
+    error.value = '数据加载失败: ' + (err.message || '未知错误');
+    console.error('接口错误:', err);
+  } finally {
+    loading.value = false;
+  }
+});
+
+// 响应式resize（模仿柱状图）
+const resizeHandler = () => radarChart && radarChart.resize();
+onMounted(() => window.addEventListener('resize', resizeHandler));
+onUnmounted(() => window.removeEventListener('resize', resizeHandler));
+</script>
+
+<style scoped>
+.heavy-metal-radar {
+  width: 100%;
+  max-width: 800px;
+  margin: 20px auto;
+  position: relative;
+  padding-top: 0;
+  background-color: white;
+  border-radius: 8px;
+}
+.chart-box {
+  width: 100%;
+  min-height: 350px;
+  max-height: 600px;
+  height: auto;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+.chart-title {
+  text-align: center;   /* 水平居中 */
+  font-size: 18px;      /* 字体大小 */
+  font-weight: 600;     /* 加粗 */
+  color: #333;          /* 字体颜色 */
+  margin: 10px 0;     /* 底部间距，避免和图表贴紧 */
+}
+.status {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px;
+  background: rgba(255,255,255,0.8);
+  border-radius: 4px;
+  z-index: 10;
+}
+.error { 
+  color: #ff4d4f;
+  font-weight: bold;
+}
+</style>

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

@@ -0,0 +1,340 @@
+<template>
+  <div class="region-average-chart">
+    <!-- 重金属选择器 -->
+    <div class="metal-selector" v-if="!loading && !error && metals.length > 0">
+      <label for="metal-select">选择重金属：</label>
+      <select id="metal-select" v-model="selectedMetal">
+        <option v-for="metal in metals" :key="metal" :value="metal">{{ metal }}</option>
+      </select>
+    </div>
+    
+    <!-- 图表容器 -->
+    <div ref="chartRef" class="chart-box"></div>
+    
+    <!-- 状态信息 -->
+    <div v-if="loading" class="status">数据加载中...</div>
+    <div v-else-if="error" class="status error">{{ error }}</div>
+    <div v-else-if="metals.length === 0" class="status">没有有效的重金属数据</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } 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 EXCLUDE_FIELDS = [
+  'water_assay_ID', 'sample_code', 'assayer_ID', 'assay_time', 
+  'assay_instrument_model', 'water_sample_ID', 'pH'
+];
+const COLORS = [
+  '#FF6B6B', '#4ECDC4', '#FFD166', '#6A4C93', '#1982C4',
+  '#FF9F1C', '#2EC4B6', '#E71D36', '#3A86FF', '#FF006E'
+];
+
+// 韶关市下属行政区划
+const SG_REGIONS = [
+  '浈江区', '武江区', '曲江区', '乐昌市', 
+  '南雄市', '始兴县', '仁化县', '翁源县', 
+  '新丰县', '乳源瑶族自治县'
+];
+
+// ========== 响应式数据 ==========
+const chartRef = ref(null);
+const loading = ref(true);
+const error = ref('');
+// 修复 selectedMetal 未定义问题：提前声明变量
+const selectedMetal = ref(''); 
+const metals = ref([]);
+const chartData = ref(null);
+let myChart = null;
+
+// ========== 地区提取函数 ==========
+const extractRegion = (location) => {
+  if (!location || typeof location !== 'string') return null;
+
+  // 1. 精确匹配官方区县名称
+  const officialMatch = SG_REGIONS.find(region => 
+    location.includes(region)
+  );
+  if (officialMatch) return officialMatch;
+
+  // 2. 处理嵌套格式（如"韶关市-浈江区"）
+  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;
+  }
+
+  // 3. 特殊格式处理（如"韶关市浈江区"）
+  const shortMatch = location.match(/韶关市([区市县][^市]{2,5})/);
+  if (shortMatch && shortMatch[1]) return shortMatch[1];
+
+  // 4. 修正常见拼写错误
+  if (location.includes('乐昌')) return '乐昌市';
+  if (location.includes('乳源')) return '乳源瑶族自治县';
+
+  console.warn(`⚠️ 未识别地区: ${location}`);
+  return '未知区县';
+};
+
+// ========== 数据处理流程 ==========
+const processMergedData = (samplingData, assayData) => {
+  // 1. 构建采样点ID到区县的映射
+  const regionMap = new Map();
+  const uniqueSampleIds = new Set();
+  
+  samplingData.forEach(item => {
+    const region = extractRegion(item.sampling_location || '');
+    if (region && region !== '未知区县') {
+      regionMap.set(item.water_sample_ID, region);
+    }
+  });
+
+  // 2. 关联重金属数据与区县
+  const mergedData = assayData.map(item => ({
+    ...item,
+    region: regionMap.get(item.water_sample_ID) || '未知区县'
+  }));
+
+  // 3. 识别重金属字段
+  const detectedMetals = Object.keys(mergedData[0] || {})
+    .filter(key => !EXCLUDE_FIELDS.includes(key) && !isNaN(parseFloat(mergedData[0][key])));
+  
+  metals.value = detectedMetals;
+  if (detectedMetals.length > 0 && !selectedMetal.value) {
+    selectedMetal.value = detectedMetals[0];
+  }
+
+  // 4. 按区县分组统计
+  const regionGroups = {};
+  
+  mergedData.forEach(item => {
+    const region = item.region;
+    const sampleId = item.water_sample_ID;
+    
+    if (sampleId) uniqueSampleIds.add(sampleId);
+    
+    // 初始化区县数据
+    if (!regionGroups[region]) {
+      regionGroups[region] = {};
+      detectedMetals.forEach(metal => {
+        regionGroups[region][metal] = { sum: 0, count: 0 };
+      });
+    }
+
+    // 统计重金属数据
+    detectedMetals.forEach(metal => {
+      const val = parseFloat(item[metal]);
+      if (!isNaN(val)) {
+        regionGroups[region][metal].sum += val;
+        regionGroups[region][metal].count++;
+      }
+    });
+  });
+
+  // 5. 构建扇形图数据
+  const pieSeriesData = detectedMetals.map(metal => {
+    // 该重金属在各区县的平均浓度总和
+    let totalAverage = 0;
+    
+    // 收集各区县该重金属的平均值
+    const regionAverages = SG_REGIONS.map(region => {
+      if (!regionGroups[region]) return null;
+      
+      const group = regionGroups[region][metal];
+      const avg = group.count ? group.sum / group.count : 0;
+      totalAverage += avg;
+      
+      return { 
+        name: region,
+        value: avg
+      };
+    }).filter(Boolean);
+
+    // 计算占比
+    const seriesData = regionAverages.map(item => ({
+      name: item.name,
+      value: totalAverage > 0 ? (item.value / totalAverage) * 100 : 0,
+      rawValue: item.value // 保留原始浓度值用于显示
+    }));
+
+    return {
+      metal,
+      seriesData
+    };
+  });
+
+  return {
+    regions: SG_REGIONS,
+    pieSeriesData,
+    totalSamples: uniqueSampleIds.size
+  };
+};
+
+// ========== 初始化/更新图表 ==========
+const initChart = () => {
+  if (!chartRef.value || !selectedMetal.value || !chartData.value) return;
+  
+  if (myChart) myChart.dispose();
+  myChart = echarts.init(chartRef.value);
+
+  // 获取当前重金属的数据
+  const currentMetalData = chartData.value.pieSeriesData.find(
+    item => item.metal === selectedMetal.value
+  );
+
+  if (!currentMetalData) return;
+
+  const option = {
+    title: { 
+      text: `韶关市${selectedMetal.value}平均浓度区域占比`, 
+      left: 'center',
+      subtext: `数据来源: ${chartData.value.totalSamples}个有效检测样本`
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: function(params) {
+        return `${params.name}<br/>
+                ${selectedMetal.value}: ${params.data.rawValue.toFixed(4)} mg/L<br/>
+                占比: ${params.percent}%`;
+      }
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 'center',
+      data: currentMetalData.seriesData.map(item => item.name)
+    },
+    series: [
+      {
+        name: selectedMetal.value,
+        type: 'pie',
+        radius: ['35%', '65%'],
+        center: ['45%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '16',
+            fontWeight: 'bold',
+            formatter: '{b}\n{c}%'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: currentMetalData.seriesData
+      }
+    ],
+    color: COLORS
+  };
+
+  myChart.setOption(option);
+};
+
+// ========== 生命周期钩子 ==========
+onMounted(async () => {
+  try {
+    // 修复请求超时问题：将超时时间延长至10秒
+    const [samplingRes, assayRes] = await Promise.all([
+      axios.get(SAMPLING_API, { timeout: 10000 }), // 10秒超时
+      axios.get(ASSAY_API, { timeout: 10000 })
+    ]);
+    
+    chartData.value = processMergedData(samplingRes.data, assayRes.data);
+    initChart();
+  } catch (err) {
+    // 处理超时错误
+    if (err.code === 'ECONNABORTED') {
+      error.value = '请求超时：服务器响应时间超过10秒';
+    } else {
+      error.value = '数据加载失败: ' + (err.message || '未知错误');
+    }
+    console.error('接口错误:', err);
+  } finally {
+    loading.value = false;
+  }
+});
+
+// 监听重金属选择变化
+watch(selectedMetal, (newVal) => {
+  if (newVal && myChart && chartData.value) {
+    initChart();
+  }
+});
+
+// 响应式布局
+const resizeHandler = () => myChart && myChart.resize();
+onMounted(() => window.addEventListener('resize', resizeHandler));
+onUnmounted(() => window.removeEventListener('resize', resizeHandler));
+</script>
+
+<style scoped>
+.region-average-chart {
+  width: 100%;
+  max-width: 1200px;
+  margin: 20px auto;
+  position: relative;
+}
+.chart-box {
+  width: 100%;
+  height: 600px;
+  min-height: 400px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+.status {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px;
+  background: rgba(255,255,255,0.8);
+  border-radius: 4px;
+  text-align: center;
+}
+.error { 
+  color: #ff4d4f;
+  font-weight: bold;
+}
+.metal-selector {
+  margin-bottom: 15px;
+  text-align: center;
+  padding: 10px;
+}
+.metal-selector label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+.metal-selector select {
+  padding: 8px 15px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  background-color: #f8f8f8;
+  font-size: 14px;
+  min-width: 150px;
+  cursor: pointer;
+  transition: border 0.3s;
+}
+.metal-selector select:hover {
+  border-color: #1890ff;
+}
+</style>

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

@@ -0,0 +1,221 @@
+<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">
+        <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: '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' },
+]);
+
+// 状态管理
+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/Water_assay_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/mapView/tencentMapView.vue

@@ -1,2016 +0,0 @@
-<template>
-  <div class="map-page">
-    <div ref="mapContainer" 
-    class="map-container"
-    ></div>
-    <div v-if="error" class="error">{{ error }}</div>
-    <!-- 覆盖层控制 -->
-     <div class="control-panel">
-      <label>
-        <input type="checkbox" v-model="state.showOverlay" @change="toggleOverlay" />
-        显示土壤类型覆盖
-      </label>
-    </div> 
-    <div class="control-panel">
-      <label>
-        <input type="checkbox" v-model="state.showSoilTypes" @change="toggleSoilTypeLayer" />
-        显示韶关市评估单元
-      </label>
-      <label>
-        <input type="checkbox" v-model="state.showSurveyData" @change="toggleSurveyDataLayer" />
-        显示韶关市调查数据
-      </label>
-      <!-- 截图控制 -->
-      <div class="export-controls">
-        <button @click="exportMapImage" :disabled="!isMapReady">
-          {{ isExporting ? '生成中...' : '导出截图' }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
-import html2canvas from 'html2canvas'
-
-const isExporting = ref(false)
-const isMapReady = ref(false)
-const exportSettings = reactive({
-  quality: 0.9,
-  showMapControls: false,
-  showWatermark: true
-})
-const mapContainer = ref(null)
-const activeMarker = 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 markersVectorLayer=null;//标记点向量图层
-let soilTypeVectorLayer=null;//土壤类型多边形图层
-let overlay = null
-const state = reactive({
-  showOverlay: false,
-  showSoilTypes: true,
-  showSurveyData: true,
-  excelData: [],
-  lastTapTime: 0
-})
-let soilTypeLayer = null
-let geoJSONLayer; 
-let currentInfoWindow = null;
-let surveyDataLayer = ref(null);
-let multiPolygon; 
-
-const categoryColors = { // 分类颜色配置
-  '优先保护类': '#00C853', // 绿色
-  '安全利用类': '#FFD600', // 黄色
-  '严格管控类': '#D50000' // 红色
-};
-
-const tMapConfig = reactive({
-  key: import.meta.env.VITE_TMAP_KEY, // 请替换为你的开发者密钥
-  geocoderURL: 'https://apis.map.qq.com/ws/geocoder/v1/'
-})
-
-
-const loadSDK = () => {
-  return new Promise((resolve, reject) => {
-    if (window.TMap?.service?.Geocoder) {
-      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) {
-        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 initData = () => {
-  state.excelData = [
-     {
-        "water_sample_ID": "water1",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大布镇·914乡道",
-        "sample_time": "2024.5.21 8:51",
-        "sample_code": "W36",
-        "water_usage_ID": null,
-        "latitude": 113.161073,
-        "longitude": 24.54181,
-        "weather": "中雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water2",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大布镇·枫树窝",
-        "sample_time": "2024.5.21 11:29",
-        "sample_code": "W40",
-        "water_usage_ID": null,
-        "latitude": 113.075739,
-        "longitude": 24.505885,
-        "weather": "小雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "水渠",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water3",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大布镇·蓓蕾幼儿园",
-        "sample_time": "2024.5.21 9:25",
-        "sample_code": "W48",
-        "water_usage_ID": null,
-        "latitude": 113.134857,
-        "longitude": 24.548262,
-        "weather": "小雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water4",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大布镇·258省道",
-        "sample_time": "2024.5.21 10:02",
-        "sample_code": "W49",
-        "water_usage_ID": null,
-        "latitude": 113.122959,
-        "longitude": 24.542255,
-        "weather": "小雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "稍浑浊、有沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water5",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大布镇·圳下",
-        "sample_time": "2024.5.21 10:23",
-        "sample_code": "W50",
-        "water_usage_ID": null,
-        "latitude": 113.115802,
-        "longitude": 24.540335,
-        "weather": "小雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water6",
-        "sampling_location": "广东省韶关市仁化县周田镇·陂下",
-        "sample_time": "2024.05.22 15:43",
-        "sample_code": "W51",
-        "water_usage_ID": null,
-        "latitude": 113.885527,
-        "longitude": 24.876994,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water7",
-        "sampling_location": "广东省韶关市仁化县黄坑镇·黄坑镇林场",
-        "sample_time": "2024.05.22 17:31",
-        "sample_code": "W57",
-        "water_usage_ID": null,
-        "latitude": 113.796154,
-        "longitude": 25.022423,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water8",
-        "sampling_location": "广东省韶关市仁化县黄坑镇·244省道",
-        "sample_time": "2024.05.23 10:14",
-        "sample_code": "W60",
-        "water_usage_ID": null,
-        "latitude": 113.818861,
-        "longitude": 25.054684,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water9",
-        "sampling_location": "广东省韶关市仁化县丹霞街道·丹霞大道",
-        "sample_time": "2024.05.23 09:46",
-        "sample_code": "W79",
-        "water_usage_ID": null,
-        "latitude": 113.749503,
-        "longitude": 25.061978,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water10",
-        "sampling_location": "广东省韶关市仁化县丹霞街道·康溪1号桥",
-        "sample_time": "2024.05.23 09:19",
-        "sample_code": "W85",
-        "water_usage_ID": null,
-        "latitude": 113.761433,
-        "longitude": 25.118153,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water11",
-        "sampling_location": "广东省韶关市仁化县周田镇·635乡道",
-        "sample_time": "2024.05.22 17:12",
-        "sample_code": "W86",
-        "water_usage_ID": null,
-        "latitude": 113.792797,
-        "longitude": 24.987394,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water12",
-        "sampling_location": "广东省韶关市仁化县长江镇·仁化县长江镇河田村村民委员会",
-        "sample_time": "2024-05-16 09:49:08",
-        "sample_code": "73",
-        "water_usage_ID": null,
-        "latitude": 113.930119,
-        "longitude": 25.356334,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water13",
-        "sampling_location": "广东省韶关市仁化县长江镇·520乡道",
-        "sample_time": "2024-05-16 10:26:35",
-        "sample_code": "74",
-        "water_usage_ID": null,
-        "latitude": 113.965294,
-        "longitude": 25.337432,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water14",
-        "sampling_location": "广东省韶关市仁化县长江镇·黄土坑",
-        "sample_time": "2024-05-17 10:43:03",
-        "sample_code": "75",
-        "water_usage_ID": null,
-        "latitude": 113.867311,
-        "longitude": 25.343983,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water15",
-        "sampling_location": "广东省韶关市仁化县长江镇·陈奢垇",
-        "sample_time": "2024.05.16 09:15",
-        "sample_code": "83",
-        "water_usage_ID": null,
-        "latitude": 113.899667,
-        "longitude": 25.386507,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water16",
-        "sampling_location": "广东省韶关市仁化县长江镇·520乡道",
-        "sample_time": "2024-05-16 10:51:44",
-        "sample_code": "89",
-        "water_usage_ID": null,
-        "latitude": 113.967071,
-        "longitude": 25.318061,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water17",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大桥镇·862乡道",
-        "sample_time": "2024.5.24 13:18",
-        "sample_code": "W12",
-        "water_usage_ID": null,
-        "latitude": 113.158031,
-        "longitude": 25.033346,
-        "weather": "多云",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water18",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大桥镇·862乡道",
-        "sample_time": "2024.5.24 13:55",
-        "sample_code": "W13",
-        "water_usage_ID": null,
-        "latitude": 113.18198,
-        "longitude": 25.055958,
-        "weather": "小雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water19",
-        "sampling_location": "广东省韶关市乳源瑶族自治县游溪镇·水源宫",
-        "sample_time": "2024.5.23 16:35",
-        "sample_code": "W19",
-        "water_usage_ID": null,
-        "latitude": 113.332907,
-        "longitude": 24.847581,
-        "weather": "阴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water20",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·鹰峰东路",
-        "sample_time": "2024.5.22 16:40",
-        "sample_code": "W20",
-        "water_usage_ID": null,
-        "latitude": 113.295062,
-        "longitude": 24.767324,
-        "weather": "阴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water21",
-        "sampling_location": "山里没网络，无法显示具体位置",
-        "sample_time": "2024.5.23 11:19",
-        "sample_code": "W21",
-        "water_usage_ID": null,
-        "latitude": 113.264569,
-        "longitude": 24.818586,
-        "weather": "阴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "水渠",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water22",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·800乡道",
-        "sample_time": "2024.5.23 14:51",
-        "sample_code": "W27",
-        "water_usage_ID": null,
-        "latitude": 113.273083,
-        "longitude": 24.714532,
-        "weather": "多云",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water23",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·南水河",
-        "sample_time": "2024.5.22 15:50",
-        "sample_code": "W28",
-        "water_usage_ID": null,
-        "latitude": 113.350766,
-        "longitude": 24.739597,
-        "weather": "阴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water24",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·801乡道",
-        "sample_time": "2024.5.22 16:17",
-        "sample_code": "W32",
-        "water_usage_ID": null,
-        "latitude": 113.324407,
-        "longitude": 24.714868,
-        "weather": "阴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "稍浑浊、有沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water25",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·大塘洞",
-        "sample_time": "2024.5.22 15:27",
-        "sample_code": "W33",
-        "water_usage_ID": null,
-        "latitude": 113.357618,
-        "longitude": 24.760639,
-        "weather": "多云",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water26",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·新邓屋",
-        "sample_time": "2024.5.22 16:56",
-        "sample_code": "W35",
-        "water_usage_ID": null,
-        "latitude": 113.32175,
-        "longitude": 24.788096,
-        "weather": "阴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water27",
-        "sampling_location": "广东省韶关市乳源瑶族自治县乳城镇·韶关市乳源公路养护中心",
-        "sample_time": "2024.5.23 14:20",
-        "sample_code": "W38",
-        "water_usage_ID": null,
-        "latitude": 113.257542,
-        "longitude": 24.77105,
-        "weather": "多云",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water28",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大桥镇·大桥服务区(京港澳高速深圳方向)",
-        "sample_time": "2024.5.24 12:51",
-        "sample_code": "W41",
-        "water_usage_ID": null,
-        "latitude": 113.141115,
-        "longitude": 25.012915,
-        "weather": "小雨",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "瀑布",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water29",
-        "sampling_location": "广东省韶关市乳源瑶族自治县一六镇·G0423乐广高速",
-        "sample_time": "2024.5.23 15:34",
-        "sample_code": "W42",
-        "water_usage_ID": null,
-        "latitude": 113.401954,
-        "longitude": 24.804447,
-        "weather": "多云",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water30",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大桥镇·866乡道",
-        "sample_time": "2024.5.24 11:14",
-        "sample_code": "W45",
-        "water_usage_ID": null,
-        "latitude": 113.168659,
-        "longitude": 25.005002,
-        "weather": "晴",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "河流",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water31",
-        "sampling_location": "广东省韶关市乳源瑶族自治县大桥镇·东京洞",
-        "sample_time": "2024.5.24 11:44",
-        "sample_code": "W46",
-        "water_usage_ID": null,
-        "latitude": 113.151351,
-        "longitude": 25.018036,
-        "weather": "多云",
-        "storage_container_material": "聚乙烯",
-        "storage_container_color": "白色",
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": "无色、无沉淀",
-        "water_quality": "无味、无悬浮物",
-        "water_environment": "水渠",
-        "storage_method": "①②③",
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water32",
-        "sampling_location": "韶关市乐昌市坪石镇535国道",
-        "sample_time": "2024.05.23 14:42",
-        "sample_code": "W90",
-        "water_usage_ID": null,
-        "latitude": 113.118613,
-        "longitude": 25.340751,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water33",
-        "sampling_location": "韶关市乐昌市梅花镇黄泥塘",
-        "sample_time": "2024.05.22 16:20",
-        "sample_code": "W92",
-        "water_usage_ID": null,
-        "latitude": 113.127812,
-        "longitude": 25.177312,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water34",
-        "sampling_location": "韶关市乐昌市五山镇247省道",
-        "sample_time": "2024.05.21 11:14",
-        "sample_code": "W97",
-        "water_usage_ID": null,
-        "latitude": 113.499578,
-        "longitude": 25.34466,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water35",
-        "sampling_location": "韶关市乐昌市梅花镇坛司村",
-        "sample_time": "2024.05.22 16:35",
-        "sample_code": "W100",
-        "water_usage_ID": null,
-        "latitude": 113.096132,
-        "longitude": 25.175297,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water36",
-        "sampling_location": "韶关市乐昌市北乡镇下秧田",
-        "sample_time": "2024.05.21 16:05",
-        "sample_code": "W111",
-        "water_usage_ID": null,
-        "latitude": 113.337597,
-        "longitude": 25.168542,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water37",
-        "sampling_location": "韶关市乐昌市廊田镇641乡道",
-        "sample_time": "2024.05.21 13:08",
-        "sample_code": "W112",
-        "water_usage_ID": null,
-        "latitude": 113.448766,
-        "longitude": 25.128146,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water38",
-        "sampling_location": "韶关市乐昌市坪石镇330县道",
-        "sample_time": "2024.05.23 15:00",
-        "sample_code": "W114",
-        "water_usage_ID": null,
-        "latitude": 113.097487,
-        "longitude": 25.300121,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": "500",
-        "sampling_volume": 500,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water39",
-        "sampling_location": "广东省韶关市南雄市珠玑镇·417乡道",
-        "sample_time": "2024.07.19 09:13",
-        "sample_code": "NX-GGS-1",
-        "water_usage_ID": null,
-        "latitude": 114.396304,
-        "longitude": 25.242905,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": null,
-        "sampling_volume": null,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water40",
-        "sampling_location": "广东省韶关市南雄市珠玑镇·417乡道",
-        "sample_time": "2024.07.19 09:13",
-        "sample_code": "NX-GGS-2",
-        "water_usage_ID": null,
-        "latitude": 114.396964,
-        "longitude": 25.243337,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": null,
-        "sampling_volume": null,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water41",
-        "sampling_location": "广东省韶关市南雄市珠玑镇·417乡道",
-        "sample_time": "2024.07.19 09:13",
-        "sample_code": "NX-GGS-3",
-        "water_usage_ID": null,
-        "latitude": 114.397697,
-        "longitude": 25.244161,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": null,
-        "sampling_volume": null,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    },
-    {
-        "water_sample_ID": "water42",
-        "sampling_location": "广东省韶关市南雄市珠玑镇·417乡道",
-        "sample_time": "2024.07.19 09:13",
-        "sample_code": "NX-GGS-4",
-        "water_usage_ID": null,
-        "latitude": 114.395773,
-        "longitude": 25.242348,
-        "weather": null,
-        "storage_container_material": null,
-        "storage_container_color": null,
-        "storage_container_capacity": null,
-        "sampling_volume": null,
-        "sample_description": null,
-        "water_quality": null,
-        "water_environment": null,
-        "storage_method": null,
-        "remark": null,
-        "sampler_id": null,
-        "proofreader_id": null,
-        "reviewer_id": null
-    }
-  ].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);
-}
-
-let currentTooltip = null;//当前显示的悬浮窗
-
-// 初始化地图
-const initMap = async () => {
-  try {
-    await loadSDK()
-    
-    map = new TMap.value.Map(mapContainer.value, {
-      center: new TMap.value.LatLng(24.81088,113.59762),
-      zoom: 8,
-      renderOptions: {
-        preserveDrawingBuffer: true, // 必须开启以支持截图
-        antialias: true
-      }
-    })
-
-    // 创建标记点向量图层
-    markersLayer = new TMap.value.MultiMarker({
-      map: map,
-      styles: {
-        default: new TMap.value.MarkerStyle({
-          width: 34,
-          height: 34,
-          anchor: { x: 17, y: 34 },
-        })
-      }    });
-
-    // 创建土壤类型多边形图层
-    soilTypeVectorLayer = new TMap.value.MultiPolygon({
-      map: map,
-      styles: {
-        default: new TMap.value.PolygonStyle({
-          fillColor: '#cccccc',
-          fillOpacity: 0.4,
-          strokeColor: '#333',
-          strokeWidth: 1
-        })
-      }    });
-
-    //const geojsonData = await loadGeoJSON('/data/单元格.geojson');
-    //initMapWithGeoJSON(geojsonData, map);
-    // 绑定点击事件
-    
-     soilTypeVectorLayer.on('mouseover', handlePolygonHover);
-    soilTypeVectorLayer.on('mouseout', handlePolygonOut);
-    
-    
-    initData()
-    //loadData()
-    updateMarkers()
-    await initSurveyDataLayer(map);
-    initSoilTypeLayer();
-
-     // 6. 绑定事件
-    map.on('click', handleMapClick);
-    markersLayer.on('hover', handleMarkerHover);
-    markersLayer.on('mouseout', handleMarkerOut);
-    soilTypeVectorLayer.on('mouseover', handlePolygonHover);
-    soilTypeVectorLayer.on('mouseout', handlePolygonOut);
-
-    // 新增地图就绪状态监听
-    map.on('idle', () => {
-      isMapReady.value = true
-    })
-  } catch (err) {
-    error.value = err.message
-  }
-}
-
-
-// 更新标记点，添加Label显示
-const updateMarkers = () => {
-  // 正确的标记点创建方式
-  const geometries = state.excelData.map(item => {
-    return {
-      id: item.土壤编号,
-      styleId: 'default',
-      position: new TMap.value.LatLng(item.longitude, item.latitude),
-      properties: {
-        title: item.sampling_location,
-        sampler_id:item.water_sample_ID
-      }
-    };
-  });
-  
-  // 一次性设置所有标记
-  markersLayer.setGeometries(geometries);
-  // 调试信息
-  console.log('成功添加标记点数量:', geometries.length);
-  geometries.forEach(geo => {
-    console.log(`标记点: ${geo.properties.title} (${geo.position.lat}, ${geo.position.lng})`);
-  });
-};
-
-// 初始化土壤类型图层
-const initSoilTypeLayer = () => {
-  const assessmentUnits = generateSoilAssessmentUnits();
-  
-  const geometries = assessmentUnits.map(unit => {
-    return {
-      id: unit.id,
-      styleId: unit.category,
-      paths: unit.paths.map(coord => new TMap.value.LatLng(coord[0], coord[1])),
-      properties: {
-        name: unit.name,
-        category: unit.category,
-        phValue: unit.phValue
-      }
-    };
-  });
-  
-  // 设置多边形样式
-  soilTypeVectorLayer.setStyles(
-    Object.keys(categoryColors).reduce((styles, category) => {
-      styles[category] = new TMap.value.PolygonStyle({
-        fillColor: categoryColors[category],
-        fillOpacity: 0.4,
-        strokeColor: '#333',
-        strokeWidth: 1
-      });
-      return styles;
-    }, {})
-  );
-  
-  soilTypeVectorLayer.setGeometries(geometries);
-};
-
-// 标记点悬停事件
-const handleMarkerHover = (e) => {
-
-  const geometry = e.geometry;
-  const properties=e.properties;
-
-  if (!geometry) return;
-  const pixel=map.project(geometry.position);
-  
-  // 移除之前的悬浮框
-  if (currentTooltip) {
-    currentTooltip.classList.remove('visible');
-    setTimeout(() => {
-      document.body.removeChild(currentTooltip);
-      currentTooltip = null;
-    }, 200);
-    return;
-  }
-  
-  // 创建悬浮框
-  currentTooltip = document.createElement('div');
-  currentTooltip.className = 'tooltip';
-  currentTooltip.innerHTML = `
-    <div>
-      <strong>${properties.sampler_id}</strong><br>
-      PH值: ${properties.title}
-    </div>
-  `;
-  
-
-  // 添加到文档
-  document.body.appendChild(currentTooltip);
-  
-  // 计算并设置位置
-  const tooltipWidth = currentTooltip.offsetWidth;
-  const tooltipHeight = currentTooltip.offsetHeight;
-  const position = calculateTooltipPosition(pixel, tooltipWidth, tooltipHeight);
-  currentTooltip.style.left = `${position.left}px`;
-  currentTooltip.style.top = `${position.top}px`;
-  
-  // 显示悬浮框
-  setTimeout(() => {
-    currentTooltip.classList.add('visible');
-  }, 50);
-};
-
-// 标记点鼠标移出事件
-const handleMarkerOut = () => {
-  if (currentTooltip) {
-    currentTooltip.classList.remove('visible');
-    setTimeout(() => {
-      document.body.removeChild(currentTooltip);
-      currentTooltip = null;
-    }, 200);
-  }
-};
-
-// 多边形悬停事件
-const handlePolygonHover = (e) => {
-  const feature = e.feature;
-  if (!feature) return;
-  
-  const properties = feature.properties;
-  
-  // 创建信息窗口
-  if (currentInfoWindow) {
-    currentInfoWindow.close();
-  }
-  
-  currentInfoWindow = new TMap.value.InfoWindow({
-    map: map,
-    position: new TMap.value.LatLng(
-      feature.geometry.getBounds().getCenter().lat,
-      feature.geometry.getBounds().getCenter().lng
-    ),
-    content: `
-      <div class="polygon-info">
-        <h3>${properties.name}</h3>
-        <table>
-          <tr><th>类别:</th><td>${properties.category}</td></tr>
-          <tr><th>PH值:</th><td>${properties.phValue}</td></tr>
-        </table>
-      </div>
-    `,
-    offset: { x: 0, y: -20 }
-  });
-  
-  currentInfoWindow.open();
-}
-
-// 多边形鼠标移出事件
-const handlePolygonOut = () => {
-  if (currentInfoWindow) {
-    currentInfoWindow.close();
-    currentInfoWindow = null;
-  }
-}
-
-
-// 计算悬浮框位置
-const calculateTooltipPosition = (pixel, tooltipWidth, tooltipHeight) => {
-  
-  const mapContainer = document.querySelector('.map-container');
-  if (!mapContainer) return { left: 0, top: 0 };
-  
-  const mapRect = mapContainer.getBoundingClientRect();
-  let left = pixel.x - tooltipWidth / 2;
-  let top = pixel.y + 10;
-  
-  // 边界检测
-  if (top < mapRect.top) top = pixel.y - tooltipHeight - 10;
-  if (left + tooltipWidth > mapRect.right) left = mapRect.right - tooltipWidth;
-  if (left < mapRect.left) left = mapRect.left;
-  
-  return { left, top };
-};
-
-// 加载数据并创建标记
-const loadData = () => {
-  const geometries = state.excelData.map(item => ({
-    id: item.土壤编号,
-    styleId: 'default',
-    position: new TMap.value.LatLng(item.latitude, item.longitude),
-    properties: {
-      title: item.地点,
-      phValue: parseFloat(item.dust_emissions).toFixed(2),
-      isTemp: false
-    },
-  }))
-  //markersLayer.setGeometries(geometries)
-}
-
-// 新增截图方法
-const exportMapImage = async () => {
-  try {
-    isExporting.value = true
-    
-    // 等待地图稳定
-    await new Promise(resolve => setTimeout(resolve, 300))
-
-    const canvas = await html2canvas(mapContainer.value, {
-      useCORS: true,
-      scale: window.devicePixelRatio || 2,
-      backgroundColor: null,
-      logging: true,
-      onclone: (clonedDoc) => {
-        // 处理控件可见性
-        clonedDoc.querySelectorAll('.tmap-control').forEach(control => {
-          control.style.visibility = exportSettings.showMapControls ? 'visible' : 'hidden'
-        })
-        
-        // 添加水印
-        if(exportSettings.showWatermark){
-          const watermark = document.createElement('div')
-          watermark.style = `
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            color: rgba(0,0,0,0.2);
-            font-size: 24px;
-            transform: rotate(-15deg);
-            z-index: 9999;
-          `
-          watermark.textContent = '机密地图 - 禁止外传'
-          clonedDoc.body.appendChild(watermark)
-        }
-      }
-    })
-
-    // 转换为Blob
-    canvas.toBlob(blob => {
-      const link = document.createElement('a')
-      link.download = `土壤地图_${new Date().toISOString().slice(0,10)}.png`
-      link.href = URL.createObjectURL(blob)
-      link.click()
-      URL.revokeObjectURL(link.href)
-    }, 'image/png', exportSettings.quality)
-
-  } catch (error) {
-    console.error('截图失败:', error)
-    error.value = '截图失败，请尝试缩小地图层级'
-    setTimeout(() => error.value = null, 3000)
-  } finally {
-    isExporting.value = false
-  }
-}
-
-
-
-// 新增Marker点击事件处理
-const handleMarkerClick = (e) => {
-  const marker = e.geometry
-  if (!marker) return
-
-  // 关闭之前的信息窗口
-  if (activeMarker.value?.id === marker.id) {
-    infoWindow.close()
-    activeMarker.value = null
-    return
-  }
-
-  // 创建信息窗口内容
-  const content = `
-    <div style="padding:12px">
-      <h3>${marker.properties.title}</h3>
-      <p>PH值: ${marker.properties.phValue}</p>
-    </div>
-  `
-
-  // 打开信息窗口
-  infoWindow = new TMap.value.InfoWindow({
-    map: map,
-    position: marker.position,
-    content: content,
-    offset: {x: 0, y: -32}
-  })
-
-  // 记录当前激活的Marker
-  activeMarker.value = marker
-
-  // 点击其他区域关闭窗口
-  map.on('click', closeInfoWindow)
-}
-
-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>${manageTempMarker.activeTempMarker.value.properties.title}</h3>
-          <p>PH值: ${manageTempMarker.activeTempMarker.value.properties.phValue}</p>
-         </div>
-       `
-     })
-     infoWindow.value.open()
-   } catch (error) {
-     console.error('操作失败详情:', error)
-    error.value = error.message.includes('非法坐标') 
-       ? '请点击有效地图区域' 
-       : '服务暂时不可用，请稍后重试'
-     setTimeout(() => error.value = null, 3000)
-   }
- }
-
- // 关闭信息窗口时同步移除临时标记
- const closeInfoWindow = () => {
-   if (activeTempMarker.value) {
-     manageTempMarker.remove()
-   }
-  if (infoWindow.value) {
-    infoWindow.value.close()
-     infoWindow.value = null
-   }
-map.off('click', closeInfoWindow)
-}
-
-
-// // 验证坐标有效性
- 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 
- }
- }
-
-async function loadGeoJSON(url) {
-  const response = await fetch(url);
-  return await response.json();
-}
-
-function initMapWithGeoJSON(geojsonData, map) {
-  // 销毁旧图层
-  if (geoJSONLayer) {
-    geoJSONLayer.setMap(null);
-    geoJSONLayer = null;
-  }
-  const filteredData = {
-    ...geojsonData,
-    features: geojsonData.features.filter(feature => 
-      feature.properties['raster_value'] !== null && 
-      feature.properties['raster_value'] !== undefined
-    )
-  };
-  // 创建 GeoJSONLayer
-  geoJSONLayer = new TMap.value.vector.GeoJSONLayer({
-    map: map,
-    data: filteredData,
-    zIndex: 1,
-    polygonStyle: new TMap.value.PolygonStyle({ // 必须用 PolygonStyle 类实例
-      color: 'rgba(255, 0, 0, 0.25)', 
-      showBorder: true,
-      borderColor: '#FF0000', 
-      borderWidth: 2
-    })
-  });
-
-  // 获取多边形覆盖层
-  multiPolygon = geoJSONLayer.getGeometryOverlay('polygon');
-
-  // 高亮选中图层
-  const highlightLayer = new TMap.value.MultiPolygon({
-        map,
-        zIndex: 2,
-        styles: {
-          highlight: new TMap.value.PolygonStyle({ // 注意要改为 PolygonStyle
-            color: 'rgba(0, 123, 255, 0.5)',      // 半透明蓝色填充
-            borderColor: '#00FF00',               // 荧光绿边框
-            borderWidth: 2,                       // 加粗边框
-            showBorder: true,
-            extrudeHeight: 15                      // 3D拔起效果[1](@ref)
-          })
-      }});
-   // 高亮区域
-   let highlightGeometry = {
-        id: 'highlightGeo',
-        styleId: 'highlight'
-      }  
-
-    // 绑定点击事件（替换原有的事件监听）
-    multiPolygon.on('hover', (e) => {
-      if (e.geometry) {
-          // 鼠标选中时高亮区域覆盖
-          highlightGeometry.paths = e.geometry.paths;
-          highlightLayer.updateGeometries([highlightGeometry]);
-        } else {
-          // 鼠标移出时取消高亮区域覆盖
-          highlightLayer.setGeometries([]);
-        }
-      })
-};
-
-
-// 加载调查数据并初始化图层
-const initSurveyDataLayer = async (map) => {
-  try {
-    // 加载GeoJSON数据
-    const surveyData = await loadGeoJSON('/data/调查数据.geojson');
-    
-    // 创建分类样式
-    const pointStyles = Object.keys(categoryColors).map(category => ({
-      id: category,
-      style: new TMap.value.MarkerStyle({
-        width: 12,
-        height: 12,
-        anchor: { x: 6, y: 6 },
-        src: createColoredCircle(categoryColors[category]) // 生成圆形图标
-      })
-    }));
-
-    // 初始化图层
-    surveyDataLayer = new TMap.value.MultiMarker({
-      map: map,
-      styles: Object.assign({}, ...pointStyles.map(s => ({ [s.id]: s.style }))),
-      geometries: surveyData.features.map(feature => ({
-        id: feature.properties.ID,
-        styleId: feature.properties.H_XTFX,
-        position: new TMap.value.LatLng(
-          feature.geometry.coordinates[1], 
-          feature.geometry.coordinates[0]
-        ),
-        properties: {
-          ...feature.properties,
-          
-        }
-      }))
-    });
-
-    // 添加点击事件
-    surveyDataLayer.on('click', (event) => {
-      const prop = event.geometry.properties;
-      if (currentInfoWindow) currentInfoWindow.close();
-      currentInfoWindow = new TMap.value.InfoWindow({
-        map: map,
-        position: event.geometry.position,
-        content: `
-          <div class="point-info">
-            <h3>${prop.XMC} ${prop.ZMC} ${prop.CMC}</h3>
-            <p>${prop.H_XTFX}</p>
-          </div>
-        `
-      });
-    });
-  } catch (error) {
-    console.error('调查数据加载失败:', error);
-  }
-};
-
-// 生成圆形图标的base64数据
-const createColoredCircle = (color) => {
-  const canvas = document.createElement('canvas');
-  canvas.width = 24;
-  canvas.height = 24;
-  const ctx = canvas.getContext('2d');
-  
-  // 绘制圆形
-  ctx.beginPath();
-  ctx.arc(12, 12, 8, 0, 2 * Math.PI);
-  ctx.fillStyle = color;
-  ctx.fill();
-  
-  // 添加白色边框
-  ctx.strokeStyle = 'black';
-  ctx.lineWidth = 2;
-  ctx.stroke();
-  
-  return canvas.toDataURL();
-};
-
-  const toggleSoilTypeLayer = () => {
-    if (soilTypeVectorLayer) {
-    soilTypeVectorLayer.setVisible(state.showSoilTypes);
-  }
-  };
-
-  const toggleSurveyDataLayer = () => {
-    if (surveyDataLayer.value) {
-    surveyDataLayer.value.setVisible(state.showSurveyData);
-  }
-  };
-
-// // 切换覆盖层
- const toggleOverlay = () => {
-   if (state.showOverlay) {
-     overlay = new TMap.value.ImageGroundLayer({
-       map: map,
-       bounds: new TMap.value.LatLngBounds(
-         new TMap.value.LatLng(18.17, 103.55), 
-         new TMap.value.LatLng(32.32, 119.82)
-       ),
-       src: 'https://soilgd.com/images/farmland_cut.png'
-     })
-   } else {
-     if (overlay) {
-       overlay.setMap(null)
-       overlay = null
-     }
-   }
- }
-
-onMounted(async () => {
-  try {
-    await loadSDK()
-    initData()
-    await initMap()
-  } catch (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 (farmlandLayer) {
-    farmlandLayer.destroy(); 
-    farmlandLayer = null;
-  }
-  if (bboxLayer) {
-    bboxLayer.destroy(); 
-    bboxLayer = null;
-  }
-  if (soilTypeLayer) {
-    soilTypeLayer.destroy();
-    soilTypeLayer = null;
-  }
-  if (surveyDataLayer) {
-    surveyDataLayer.destroy();
-    surveyDataLayer = null;
-  }
-})
-</script>
-
-<style scoped>
-.map-page {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-}
-
-.map-container {
-  width: 100%;
-  height: 100vh ;
-  min-height: 600px;
-}
-
-.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;
-  }
-}
-
-/* 信息窗口样式 */
-:deep(.tmap-infowindow) {
-  padding: 12px;
-  min-width: 200px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-  background-color: white;
-}
-
-:deep(.tmap-infowindow h3) {
-  margin: 0 0 8px;
-  font-size: 16px;
-  color: #333;
-}
-
-:deep(.tmap-infowindow p) {
-  margin: 4px 0;
-  color: #666;
-  font-size: 14px;
-}
-.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;
-    }
-  }
-}
-
-/* 动态类别颜色 */
-.point-info h3[data-category="优先保护类"] { --category-color: #00C853; }
-.point-info h3[data-category="安全利用类"] { --category-color: #FFD600; }
-.point-info h3[data-category="严格管控类"] { --category-color: #D50000; }
-.highlight-status {
-  padding: 8px;
-  background: rgba(0, 255, 0, 0.1);
-  border-left: 3px solid #00FF00;
-  margin-top: 12px;
-}
-
-
-.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>

韶关市河流水系图.qmd

@@ -0,0 +1,27 @@
+<!DOCTYPE qgis PUBLIC 'http://mrcc.com/qgis.dtd' 'SYSTEM'>
+<qgis version="3.40.8-Bratislava">
+  <identifier></identifier>
+  <parentidentifier></parentidentifier>
+  <language></language>
+  <type></type>
+  <title></title>
+  <abstract></abstract>
+  <links/>
+  <dates/>
+  <fees></fees>
+  <encoding></encoding>
+  <crs>
+    <spatialrefsys nativeFormat="Wkt">
+      <wkt></wkt>
+      <proj4></proj4>
+      <srsid>0</srsid>
+      <srid>0</srid>
+      <authid></authid>
+      <description></description>
+      <projectionacronym></projectionacronym>
+      <ellipsoidacronym></ellipsoidacronym>
+      <geographicflag>false</geographicflag>
+    </spatialrefsys>
+  </crs>
+  <extent/>
+</qgis>