[Pref 0000] 开发地图交互内容，优化交互体验

src/api/sys/map.ts

@@ -1,3 +1,4 @@
+import { useMineDepartmentStore } from '/@/store/modules/mine';
 import { defHttp } from '/@/utils/http/axios';
 import { omitBy, isNil } from 'lodash-es';
 
@@ -10,6 +11,8 @@ enum Api {
  * @param params
  */
 export function getMarkers(params: any): Promise<any> {
+  const mineStore = useMineDepartmentStore();
+
   return defHttp.post({ url: Api.list, params: omitBy(params, isNil) }, { joinParamsToUrl: true }).then(({ records }) => {
     // const presets = [
     //   ['36.644181586865905', '109.48980355362514', '1566106'],
@@ -36,42 +39,38 @@ export function getMarkers(params: any): Promise<any> {
         ['34.561576287484176', '107.43571011212084', '1566103'],
         ['34.361576287484176', '107.23571011212084', '1566103'],
       ],
+      '38017ef114164ac5b1ff314b49694c2d': [
+        ['32.685619853722', '109.02571163416906', '1566109'],
+        ['32.685619853722', '109.02571163416906', '1566109'],
+        ['32.685619853722', '109.02571163416906', '1566109'],
+      ],
     };
 
-    const results: any = {};
+    return mineStore.getDepartTree.reduce((array: any[], root) => {
+      const children = records.filter((e) => e.managementId === root.rawid);
 
-    records.forEach((ele) => {
-      const temp = {
-        name: ele.mineName,
+      const ele = {
+        name: root.departName,
         radius: 10,
-        ...ele,
-      };
-      if (results[ele.managementId]) {
-        results[ele.managementId].children.push(temp);
-      } else {
-        results[ele.managementId] = {
-          ...temp,
-          children: [temp],
-        };
-      }
-    });
-
-    return Object.values(results).map((ele: any) => {
-      return {
-        ...ele,
-        lat: presets[ele.managementId][2][0],
-        lng: presets[ele.managementId][2][1],
-        gb: presets[ele.managementId][2][2],
-        children: ele.children.map((ele2: any, index) => {
+        managementName: root.departName,
+        mineCode: children.map((c) => c.mineCode).join(','),
+        lat: presets[root.rawid][2][0],
+        lng: presets[root.rawid][2][1],
+        gb: presets[root.rawid][2][2],
+        children: children.map((e, i) => {
           return {
-            ...ele2,
-            lat: presets[ele.managementId][index][0],
-            lng: presets[ele.managementId][index][1],
-            gb: presets[ele.managementId][index][2],
+            ...e,
+            lat: presets[root.rawid][i][0],
+            lng: presets[root.rawid][i][1],
+            gb: presets[root.rawid][i][2],
           };
         }),
       };
-    });
+
+      array.push(ele);
+
+      return array;
+    }, []);
   });
 }
 

src/layouts/default/feature/SimpleMap.vue

@@ -1,25 +1,25 @@
 <template>
   <div ref="mapContainer" class="map-container"></div>
-  <div class="map-reset-btn">
-    <Button type="primary" @click="reset"> 重置 </Button>
+  <div v-if="appStore.getSimpleMapParams.mineCode" class="map-reset-btn">
+    <Button type="primary" @click="reset">重置</Button>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref, onMounted, onUnmounted } from 'vue';
-  // 引入 Leaflet
   import L from 'leaflet';
   import 'leaflet/dist/leaflet.css';
-  import { getGoafAlarmLevel, getMarkers } from '/@/api/sys/map';
-  import { StatusColorEnum } from '/@/enums/jeecgEnum';
   import { Button } from 'ant-design-vue';
-  // Ant Design Vue 图标
-  // --- 1. 组件引用和状态定义 ---
+  import { getGoafAlarmLevel, getMarkers } from '/@/api/sys/map';
+  import { DEFAULT_LAYER_ID, regionColorMap, tileLayerConfigs, generatePopupContent, getRootMarkerIcon } from './simpleMap.data';
+  import { useAppStore } from '/@/store/modules/app';
+
+  const appStore = useAppStore();
   const mapContainer = ref(null);
+  let map: L.Map | null = null;
 
-  const DEFAULT_LAYER_ID = 'default';
-  // 邮政编码，GeoJSON中存有完整编码，下面是去掉了后两位00的编码
-  const layerMap = new Map<string, L.Layer>([
+  // 图层组 Map（基于所有区域编码初始化）
+  const layerMap = new Map<string, L.LayerGroup>([
     [DEFAULT_LAYER_ID, L.featureGroup()],
     // 西安
     ['1566101', L.featureGroup()],
@@ -42,289 +42,131 @@
     // 商洛
     ['1566111', L.featureGroup()],
   ]);
-  const colorMap = new Map<string, string>([
-    ['1566101', '#14baff'],
-    ['1566102', '#14baff'],
-    ['1566103', '#ffff12'],
-    ['1566104', '#ffff12'],
-    ['1566105', '#ffab12'],
-    ['1566106', '#ffab12'],
-    ['1566107', '#fe1414'],
-    ['1566108', '#fe1414'],
-    ['1566109', '#fe1414'],
-    ['1566111', '#fe1414'],
-    ['810321182c6a40fa92d5acccdba34ce3', '#ffff12'],
-    ['63afd272d0e24c7e9c1475c6498f0c80', '#ffab12'],
-  ]);
-
-  let map: typeof L = null; // Leaflet 地图实例
 
-  // --- 2. 配置项声明 ---
-  const tileLayers: any[] = [
-    {
-      name: '基准瓦片',
-      layer: null,
-      url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
-      // url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
-      addByDefault: false,
-      options: {
-        maxZoom: 18,
-        // attribution: '',
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        // crossOrigin: true,
-      },
-    },
-    {
-      name: '卫星图',
-      layer: null,
-      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-      addByDefault: false,
-      options: {
-        maxZoom: 18,
-        attribution: '© Esri',
-      },
-    },
-    {
-      name: '高德地图',
-      layer: null,
-      url: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
-      addByDefault: true,
-      options: {
-        className: 'light-blue-theme',
-        maxZoom: 18,
-        subdomains: ['1', '2', '3', '4'], // 高德底图服务器集群
-        attribution: '© 高德地图', // 版权声明（必填，遵守使用规范）
-      },
-    },
-  ];
-
-  // --- 3. 地图初始化 ---
-  onMounted(() => {
+  onMounted(async () => {
     if (!mapContainer.value) return;
 
-    // 创建地图实例，设置中心和初始缩放级别
+    reset();
+
     map = L.map(mapContainer.value, {
-      center: [35.841, 108.94], // 西安市中心坐标 [纬度, 经度]
-      zoom: 7, // 初始缩放级别，适合城市级别查看
-      zoomControl: false, // 显示缩放控件
-      attributionControl: false, // 显示属性控件
+      center: [35.841, 108.94],
+      zoom: 7,
+      zoomControl: false,
+      attributionControl: false,
     });
 
-    // 初始化所有瓦片图层
     initTileLayers();
-    // 请求矿区数据并初始化标记点图层
-    initMarkers();
-    // 初始化陕西省GeoJSON图层
-    initGeoJSON();
+    await initMarkers();
+    await initGeoJSON();
 
-    layerMap.get(DEFAULT_LAYER_ID).addTo(map);
+    layerMap.get(DEFAULT_LAYER_ID)?.addTo(map);
   });
 
   onUnmounted(() => {
-    map && map.remove();
+    map?.remove();
   });
 
-  // 初始化瓦片图层
+  /** 初始化瓦片图层 */
   function initTileLayers() {
-    tileLayers.forEach((config) => {
-      config.layer = L.tileLayer(config.url, config.options);
-
+    tileLayerConfigs.forEach((config) => {
+      const layer = L.tileLayer(config.url, config.options);
       if (config.addByDefault) {
-        config.layer.addTo(map);
+        layer.addTo(map!);
       }
     });
   }
 
+  /** 加载 GeoJSON 并添加到对应图层组 */
   async function initGeoJSON() {
     const response = await fetch('/js/shanxi.geo.json');
     const ShanXiGeoJSON = await response.json();
 
     layerMap.forEach((group, code) => {
-      const features = ShanXiGeoJSON.features.filter((feature) => {
+      const features = ShanXiGeoJSON.features.filter((feature: any) => {
         if (code === DEFAULT_LAYER_ID) return true;
         return feature.properties.gb.startsWith(code);
       });
 
-      const GeoJSON = L.geoJSON(features, {
+      const geoJsonLayer = L.geoJSON(features, {
         style(feature) {
           const gb = feature.properties.gb.slice(0, -2);
           return {
-            fillColor: colorMap.get(gb) || '#14baff',
+            fillColor: regionColorMap[gb] || '#14baff',
             fillOpacity: 0.2,
             weight: 2,
             opacity: 1,
             color: '#ff9100',
           };
         },
-        onEachFeature(__, layer) {
+        onEachFeature(_, layer) {
           layer.on({
             mouseover: (e) => {
-              const layer = e.target;
-
-              layer.setStyle({
-                weight: 2,
-                fillOpacity: 0.6,
-              });
-
-              layer.bringToFront();
+              e.target.setStyle({ weight: 2, fillOpacity: 0.6 });
+              e.target.bringToFront();
             },
             mouseout: (e) => {
-              GeoJSON.resetStyle(e.target);
+              geoJsonLayer.resetStyle(e.target);
             },
-            // click: zoomToFeature,
           });
         },
       });
 
-      // layerMap.set(code, GeoJSON);
-      GeoJSON.addTo(group);
-    });
-  }
-
-  /** 生成一个标准的标记点，通过传入的数据，请求详情信息并生成监测详情框 */
-  async function generateStandardMarker(marker: any, options: any) {
-    const linkArr = ['断线', '正常', '标校'];
-    const statusArr = ['暂无信息', '低风险', '一般风险', '较高风险', '高风险'];
-    const colorArr = [StatusColorEnum.red, StatusColorEnum.blue, StatusColorEnum.gold, StatusColorEnum.purple, StatusColorEnum.red];
-
-    const tbodyInnerHtml = await getGoafAlarmLevel({ mineCode: marker.mineCode }).then(({ goafDataList, alarmLevel, goafNum }) => {
-      marker.alarmLevel = alarmLevel;
-      marker.goafNum = goafNum;
-
-      return goafDataList.reduce((htmlstr, item, index) => {
-        htmlstr += `
-          <tr>
-            <td>${index + 1}</td>
-            <td>${item.devicePos}</td>
-            <td style="color: ${colorArr[item.alarmLevel || 0]}">${statusArr[item.alarmLevel || 0]}</td>
-            <td style="color: ${colorArr[item.linkStatus || 0]}">${linkArr[item.linkStatus || 0]}</td>
-          </tr>
-        `;
-
-        return htmlstr;
-      }, ``);
+      geoJsonLayer.addTo(group);
     });
-
-    return L.marker([marker.lat, marker.lng], options).bindPopup(
-      `
-        <div class="leaflet-popup-content__title">${marker.mineName}</div>
-        <div class="leaflet-popup-content__divider"></div>
-        <div class="leaflet-popup-content__board mb-5px">
-          <div class="mr-5px">所属执法处</div>
-          <div>${marker.managementName}</div>
-        </div>
-        <div class="leaflet-popup-content__board mb-5px">
-          <div class="mr-5px">采空区密闭数量</div>
-          <div>${marker.goafNum}</div>
-        </div>
-        <div class="leaflet-popup-content__board">
-          <div class="mr-5px">密闭整体风险等级</div>
-          <div style="color: ${colorArr[marker.alarmLevel]}">${statusArr[marker.alarmLevel]}</div>
-        </div>
-        <div class="leaflet-popup-content__divider"></div>
-        <table id="${marker.id}" class="leaflet-popup-content__table w-full mt-10px">
-          <thead>
-            <tr>
-              <th>序号</th>
-              <th>采空区名称</th>
-              <th>风险等级</th>
-              <th>通讯状态</th>
-            </tr>
-          </thead>
-          <tbody>
-            ${tbodyInnerHtml.length ? tbodyInnerHtml : `<tr><td colspan="4">暂无数据</td></tr>`}
-          </tbody>
-        </table>
-      `
-    );
   }
 
-  function generateRootMarker(marker: any, options: any) {
-    const size = 40;
-    const icon = L.divIcon({
-      className: 'numbered-marker',
-      html: `
-        <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" style="overflow: visible;">
-          <!-- 圆形背景 -->
-          <circle
-            cx="${size / 2}"
-            cy="${size / 2}"
-            r="${size / 2 - 2}"
-            fill="${colorMap.get(marker.gb)}"
-          />
-          <!-- 数字文本 -->
-          <text
-            x="${size / 2}"
-            y="${size / 2}"
-            text-anchor="middle"
-            dominant-baseline="middle"
-            fill="gray"
-            font-size="16"
-            font-weight="bold"
-            font-family="Arial, sans-serif"
-          >${marker.children.length}</text>
-        </svg>
-      `,
-      iconSize: [size, size],
-      iconAnchor: [size / 2, size / 2],
-      popupAnchor: [0, -size / 2],
-    });
-
-    return L.marker([marker.lat, marker.lng], {
-      icon,
-      color: colorMap.get(marker.gb),
-      fillColor: colorMap.get(marker.gb),
-      ...options,
-    }).on('click', () => {
-      layerMap.forEach((group, code) => {
-        map.removeLayer(group);
-
-        if (code === marker.gb) {
-          map.addLayer(group);
-          console.log('debug bounds', group, marker);
-          map.flyToBounds(group.getBounds());
-        }
-      });
-    });
-  }
-
-  /** 请求矿区数据并初始化标记点 */
+  /** 初始化所有标记点 */
   async function initMarkers() {
     const records = await getMarkers({ pageNo: 0, paseSize: 9999 });
-    const details: Promise<any>[] = [];
+    const promises: Promise<void>[] = [];
+
     records.forEach((item) => {
-      generateRootMarker(item, {
+      // 创建根标记点
+      const iconConfig = getRootMarkerIcon(40, item.children.length, regionColorMap[item.gb]);
+      const marker = L.marker([item.lat, item.lng], {
+        icon: L.divIcon(iconConfig),
         riseOnHover: true,
-      }).addTo(layerMap.get(DEFAULT_LAYER_ID));
+      }).on('click', () => {
+        layerMap.forEach((group, code) => {
+          map?.removeLayer(group);
+          if (code === item.gb) {
+            map?.addLayer(group);
+            map?.flyToBounds(group.getBounds());
+          }
+        });
+        appStore.setSimpleMapParams({ mineCode: item.mineCode });
+      });
+      marker.addTo(layerMap.get(DEFAULT_LAYER_ID)!);
 
+      // 创建子标记点
       if (!item.children.length) return;
-
-      item.children.forEach((child) => {
-        details.push(
-          generateStandardMarker(child, {
-            riseOnHover: false,
-          }).then((marker) => {
+      item.children.forEach((child: any) => {
+        promises.push(
+          getGoafAlarmLevel({ mineCode: child.mineCode }).then((result) => {
+            const popupContent = generatePopupContent(result);
+            const childMarker = L.marker([child.lat, child.lng], { riseOnHover: false }).bindPopup(popupContent);
             if (layerMap.has(child.gb)) {
-              marker.addTo(layerMap.get(child.gb));
+              childMarker.addTo(layerMap.get(child.gb)!);
             }
           })
         );
       });
     });
 
-    await Promise.all(details);
+    await Promise.all(promises);
   }
 
+  /** 重置视图到默认图层 */
   function reset() {
-    layerMap.forEach((layer, code) => {
-      map.removeLayer(layer);
-
+    layerMap.forEach((group, code) => {
+      map?.removeLayer(group);
       if (code === DEFAULT_LAYER_ID) {
-        map.addLayer(layer);
-
-        map.flyToBounds(layer.getBounds());
+        map?.addLayer(group);
+        map?.flyToBounds(group.getBounds());
       }
     });
+
+    appStore.setSimpleMapParams({});
   }
 </script>
 

src/layouts/default/feature/simpleMap.data.ts

@@ -0,0 +1,136 @@
+import { get } from 'lodash';
+import { StatusColorEnum } from '/@/enums/jeecgEnum';
+
+// 默认图层ID
+export const DEFAULT_LAYER_ID = 'default';
+
+// 区域颜色映射（包含所有需要用到的编码）
+export const regionColorMap: Record<string, string> = {
+  DEFAULT_LAYER_ID: '#14baff',
+  '1566101': '#14baff',
+  '1566102': '#14baff',
+  '1566103': '#ffff12',
+  '1566104': '#ffff12',
+  '1566105': '#ffab12',
+  '1566106': '#ffab12',
+  '1566107': '#fe1414',
+  '1566108': '#fe1414',
+  '1566109': '#fe1414',
+  '1566111': '#fe1414',
+  //   '810321182c6a40fa92d5acccdba34ce3': '#ffff12',
+  //   '63afd272d0e24c7e9c1475c6498f0c80': '#ffab12',
+};
+
+// 瓦片图层配置（不含运行时的 layer 属性）
+export const tileLayerConfigs = [
+  {
+    name: '基准瓦片',
+    url: 'https://shaanxizhxx.chinamine-safety.gov.cn/zh1/8/33/17.png',
+    addByDefault: false,
+    options: {
+      maxZoom: 18,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    },
+  },
+  {
+    name: '卫星图',
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    addByDefault: false,
+    options: {
+      maxZoom: 18,
+      attribution: '© Esri',
+    },
+  },
+  {
+    name: '高德地图',
+    url: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+    addByDefault: true,
+    options: {
+      className: 'light-blue-theme',
+      maxZoom: 18,
+      subdomains: ['1', '2', '3', '4'],
+      attribution: '© 高德地图',
+    },
+  },
+];
+
+// 状态文本与颜色映射（直接使用枚举值）
+export const linkStatusText = ['断线', '正常', '标校'];
+export const alarmLevelText = ['暂无信息', '低风险', '一般风险', '较高风险', '高风险'];
+export const alarmLevelColor = [StatusColorEnum.red, StatusColorEnum.blue, StatusColorEnum.gold, StatusColorEnum.purple, StatusColorEnum.red];
+
+/**
+ * 生成标准标记点（子节点）的弹出框 HTML
+ */
+export function generatePopupContent(data: any): string {
+  const { goafDataList = [], id, mineName, managementName, goafNum, alarmLevel } = data;
+  const tbodyInnerHtml = goafDataList.reduce((html, { devicePos, alarmLevel, linkStatus }, index) => {
+    html += `
+      <tr>
+        <td>${index + 1}</td>
+        <td>${devicePos}</td>
+        <td style="color: ${get(alarmLevelColor, alarmLevel, alarmLevelColor[0])}">${get(alarmLevelText, alarmLevel, alarmLevelText[0])}</td>
+        <td style="color: ${get(alarmLevelColor, linkStatus, alarmLevelColor[0])}">${get(linkStatusText, linkStatus, linkStatusText[0])}</td>
+      </tr>
+    `;
+    return html;
+  }, '');
+
+  return `
+    <div class="leaflet-popup-content__title">${mineName}</div>
+    <div class="leaflet-popup-content__divider"></div>
+    <div class="leaflet-popup-content__board mb-5px">
+      <div class="mr-5px">所属执法处</div>
+      <div>${managementName}</div>
+    </div>
+    <div class="leaflet-popup-content__board mb-5px">
+      <div class="mr-5px">采空区密闭数量</div>
+      <div>${goafNum}</div>
+    </div>
+    <div class="leaflet-popup-content__board">
+      <div class="mr-5px">密闭整体风险等级</div>
+      <div style="color: ${get(alarmLevelColor, alarmLevel, alarmLevelColor[0])}">${get(alarmLevelText, alarmLevel, alarmLevelText[0])}</div>
+    </div>
+    <div class="leaflet-popup-content__divider"></div>
+    <table id="${id}" class="leaflet-popup-content__table w-full mt-10px">
+      <thead>
+        <tr>
+          <th>序号</th>
+          <th>采空区名称</th>
+          <th>风险等级</th>
+          <th>通讯状态</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${tbodyInnerHtml.length ? tbodyInnerHtml : '<tr><td colspan="4">暂无数据</td></tr>'}
+      </tbody>
+    </table>
+  `;
+}
+
+/**
+ * 生成根标记点的图标配置
+ */
+export function getRootMarkerIcon(size: number, count: number, color: string) {
+  return {
+    className: 'numbered-marker',
+    html: `
+      <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" style="overflow: visible;">
+        <circle cx="${size / 2}" cy="${size / 2}" r="${size / 2 - 2}" fill="${color}" />
+        <text
+          x="${size / 2}"
+          y="${size / 2}"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          fill="gray"
+          font-size="16"
+          font-weight="bold"
+          font-family="Arial, sans-serif"
+        >${count}</text>
+      </svg>
+    `,
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    popupAnchor: [0, -size / 2],
+  };
+}

src/store/modules/app.ts

@@ -1,4 +1,4 @@
-import type { MainAppProps } from "#/main";
+import type { MainAppProps } from '#/main';
 import type { ProjectConfig, HeaderSetting, MenuSetting, TransitionSetting, MultiTabsSetting } from '/#/config';
 import type { BeforeMiniState } from '/#/store';
 
@@ -23,9 +23,11 @@ interface AppState {
   // When the window shrinks, remember some states, and restore these states when the window is restored
   beforeMiniInfo: BeforeMiniState;
   // 页面跳转临时参数存储
-  messageHrefParams: any,
+  messageHrefParams: any;
   // 应用参数
-  mainAppProps: MainAppProps,
+  mainAppProps: MainAppProps;
+  // 地图选择了的参数，存储于此供各页面使用
+  simpleMapParams: any;
 
   widthScale: number;
   heightScale: number;
@@ -40,6 +42,7 @@ export const useAppStore = defineStore({
     beforeMiniInfo: {},
     messageHrefParams: {},
     mainAppProps: {},
+    simpleMapParams: {},
     widthScale: 1,
     heightScale: 1,
   }),
@@ -84,12 +87,15 @@ export const useAppStore = defineStore({
     getMultiTabsSetting(): MultiTabsSetting {
       return this.getProjectConfig.multiTabsSetting;
     },
-    getMessageHrefParams():any{
+    getMessageHrefParams(): any {
       return this.messageHrefParams;
     },
     getMainAppProps(): MainAppProps {
       return this.mainAppProps;
     },
+    getSimpleMapParams(): any {
+      return this.simpleMapParams;
+    },
 
     getLayoutHideSider(): boolean {
       const hideLayoutTypes = getHideLayoutTypes();
@@ -161,19 +167,22 @@ export const useAppStore = defineStore({
     },
 
     // 设置主应用参数
-    setMainAppProps(args: MainAppProps)  {
+    setMainAppProps(args: MainAppProps) {
       this.mainAppProps.hideHeader = args.hideHeader ?? false;
       this.mainAppProps.hideSider = args.hideSider ?? false;
       this.mainAppProps.hideMultiTabs = args.hideMultiTabs ?? false;
     },
 
+    setSimpleMapParams(params: any): void {
+      this.simpleMapParams = params;
+    },
+
     setWidthScale(scale: number) {
       this.widthScale = scale;
     },
     setHeightScale(scale: number) {
       this.heightScale = scale;
     },
-
   },
 });
 

src/views/dashboard/SealedGoaf/index.vue

@@ -15,15 +15,17 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
   import { useInitConfigs, useInitPage } from '@/components/Configurable/hooks/useInit';
   import { testConfigSealedGoaf } from './configurable.data.sealedGoaf';
-  import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum, getGoafAlarmLevel } from './sealedGoaf.api';
+  import { getCoalSeamFireNum, getMineProductionStatusNum, getOverLimitNum, getGoafAlarmNum } from './sealedGoaf.api';
   import ModulePrimary from '/@/components/Configurable/ModulePrimary.vue';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { useAppStore } from '/@/store/modules/app';
 
   const { title = '老空区永久密闭监测与分析系统' } = useGlobSetting();
   const { data, updateData } = useInitPage(title);
+  const appStore = useAppStore();
 
   const cfgs = computed(() => configs.value);
   const { configs, fetchConfigs } = useInitConfigs();
@@ -32,7 +34,7 @@
     productionStatusData: null,
     overLimitData: null,
     goafAlarmData: null,
-    goafAlarmLevel: null,
+    // goafAlarmLevel: null,
     totalNum: {
       productionNum: 0, // 原有生产状态总计
       alarmNum: {
@@ -45,18 +47,16 @@
     },
   }); // 所有数据汇总
 
-  onMounted(async () => {
+  async function fetchHomeData() {
     try {
-      // 1. 先获取基础配置（若有接口获取配置则保留，否则直接用本地testConfigSealedGoaf）
-      await fetchConfigs('sealed_goaf');
-
       // 2. 异步获取所有接口数据（并行请求提升性能）
-      const [coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel] = await Promise.all([
-        getCoalSeamFireNum(), // 煤层自燃倾向数据
-        getMineProductionStatusNum(), // 当日生产状态数据
-        getOverLimitNum(), // 超限数据（可按需处理）
-        getGoafAlarmNum({}), // 执法处风险统计
-        getGoafAlarmLevel({ mineCode: '100008' }),
+      const [coalSeamFireData, productionStatusData, overLimitData, goafAlarmData] = await Promise.all([
+        getCoalSeamFireNum(appStore.simpleMapParams), // 煤层自燃倾向数据
+        getMineProductionStatusNum(appStore.simpleMapParams), // 当日生产状态数据
+        getOverLimitNum(appStore.simpleMapParams), // 超限数据（可按需处理）
+        getGoafAlarmNum(appStore.simpleMapParams), // 执法处风险统计
+        // getGoafAlarmLevel(appStore.simpleMapParams),
+        // getGoafAlarmLevel({ mineCode: '100008' }),
       ]);
 
       const totalProductionNum = Array.isArray(productionStatusData) ? productionStatusData.reduce((sum, item) => sum + (item.num || 0), 0) : 0;
@@ -82,17 +82,26 @@
       const totalNum = { productionNum: totalProductionNum, alarmNum: { alarm1Total, alarm2Total, alarm3Total, alarm4Total, alarmTotal } };
 
       // 3. 把接口数据赋值给响应式变量（备用）
-      mineData.value = { coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, goafAlarmLevel, totalNum };
-      // 4. 赋值更新后的配置到configs（触发组件重新渲染）
-      if (configs.value.length === 0) {
-        configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新
-      }
+      mineData.value = { coalSeamFireData, productionStatusData, overLimitData, goafAlarmData, totalNum };
 
       // 5. 更新页面数据
       updateData(mineData.value);
     } catch (error) {
       console.error('数据获取/配置更新失败：', error);
     }
+  }
+
+  watch(() => appStore.getSimpleMapParams, fetchHomeData);
+
+  onMounted(() => {
+    fetchHomeData(); // 4. 赋值更新后的配置到configs（触发组件重新渲染）
+
+    // 1. 先获取基础配置（若有接口获取配置则保留，否则直接用本地testConfigSealedGoaf）
+    fetchConfigs('sealed_goaf').then(() => {
+      if (configs.value.length === 0) {
+        configs.value = [...testConfigSealedGoaf]; // 解构触发响应式更新
+      }
+    });
   });
 
   // 数据处理函数

src/views/dashboard/SealedGoaf/sealedGoaf.api.ts

@@ -2,35 +2,38 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   getCoalSeamFireNum = '/province/homeData/getCoalSeamFireNum',
-  getMineProductionStatusNum  = '/province/homeData/getMineProductionStatusNum',
+  getMineProductionStatusNum = '/province/homeData/getMineProductionStatusNum',
   getOverLimitNum = '/province/homeData/getOverLimitNum',
   getGoafAlarmNum = '/province/homeData/getGoafAlarmNum',
   getGoafAlarmLevel = '/province/homeData/getGoafAlarmLevel',
 }
 
 // 查询煤层自燃倾向数量统计
-export const getCoalSeamFireNum = () =>
+export const getCoalSeamFireNum = (params) =>
   defHttp.post({
     url: Api.getCoalSeamFireNum,
+    params,
   });
 
 // 查询矿井生成状态统计
-export const getMineProductionStatusNum = () =>
+export const getMineProductionStatusNum = (params) =>
   defHttp.post({
     url: Api.getMineProductionStatusNum,
+    params,
   });
 
 // 查询采空区超限数量统计
-export const getOverLimitNum = () =>
+export const getOverLimitNum = (params) =>
   defHttp.post({
     url: Api.getOverLimitNum,
+    params,
   });
 
 // 执法处风险统计
 export const getGoafAlarmNum = (params) =>
   defHttp.post({
     url: Api.getGoafAlarmNum,
-    params
+    params,
   });
 
 // 根据矿编码查询矿下采空区风险等级
@@ -38,5 +41,5 @@ export const getGoafAlarmLevel = (params) =>
   defHttp.post({
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     url: Api.getGoafAlarmLevel,
-    params
-  });
+    params,
+  });

src/views/system/algorithm/index.vue

@@ -44,7 +44,7 @@
       </template>
     </BasicTable>
   </Flex>
-  <BasicModal width="60%" :height="600" @register="registerModal" @ok="handleSubmit" title="预警参数设置">
+  <BasicModal width="60%" :height="500" @register="registerModal" @ok="handleSubmit" title="预警参数设置">
     <BasicForm @register="registerForm">
       <template #InputRangeNumber="{ model, field, schema }">
         <a-form-item>