[Feat 0000] 首页地图添加Marker及详情检测框

src/layouts/default/feature/SimpleMap.vue

@@ -2,16 +2,18 @@
   <div ref="mapContainer" class="map-container"></div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
   import { ref, onMounted, onUnmounted } from 'vue';
   // 引入 Leaflet
   import L from 'leaflet';
   import 'leaflet/dist/leaflet.css';
+  import { list, getGoafAlarmLevel } from '/@/api/sys/map';
+  import { StatusColorEnum } from '/@/enums/jeecgEnum';
   // Ant Design Vue 图标
 
   // --- 1. 组件引用和状态定义 ---
   const mapContainer = ref(null);
-  let map = null; // Leaflet 地图实例
+  let map: typeof L = null; // Leaflet 地图实例
 
   // --- 2. 瓦片图层配置 ---
   const tileLayers = {
@@ -20,6 +22,7 @@
       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: '',
@@ -31,6 +34,7 @@
       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',
@@ -40,6 +44,7 @@
       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,
@@ -74,13 +79,9 @@
 
     // 初始化所有瓦片图层
     initTileLayers();
-
-    // 默认显示自定义底图
-    tileLayers.gaode.layer.addTo(map);
-    // tileLayers.custom.layer.addTo(map);
-    // tileLayers.satellite.layer.addTo(map);
-
-    // initMarkers();
+    // 请求矿区数据并初始化标记点图层
+    initMarkers();
+    // 初始化陕西省GeoJSON图层
     initGeoJSON();
   }
 
@@ -89,6 +90,10 @@
     Object.keys(tileLayers).forEach((key) => {
       const config = tileLayers[key];
       config.layer = L.tileLayer(config.url, config.options);
+
+      if (config.addByDefault) {
+        config.layer.addTo(map);
+      }
     });
   }
 
@@ -159,66 +164,84 @@
     }).addTo(map);
   }
 
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  /** 生成一个标准的标记点，通过传入的数据，请求详情信息并生成监测详情框 */
+  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 }) => {
+      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;
+      }, ``);
+    });
+
+    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.status]}">${statusArr[marker.status]}</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>
+      `
+    );
+  }
+
+  /** 请求矿区数据并初始化标记点 */
   async function initMarkers() {
-    const markers = await Promise.resolve([
-      {
-        name: '太原',
-        lat: 37.857014,
-        lng: 112.549248,
-        value: 35,
-        color: 'red',
-        radius: 10,
-        type: 'marker',
-      },
-    ]);
-    // const circles = await Promise.resolve([
-    //   {
-    //     name: '西安',
-    //     lat: 34.343161,
-    //     lng: 108.915024,
-    //     value: 35,
-    //     color: 'red',
-    //     radius: 10,
-    //     type: 'circle',
-    //   },
-    // ]);
-    // circles.forEach((circle) => {
-    //   L.circleMarker([circle.lat, circle.lng], { radius: circle.radius, color: circle.color, fillColor: circle.color, fillOpacity: 0.5 })
-    //     .addTo(map)
-    //     .bindPopup(`${circle.name}: ${circle.value}`);
-    // });
-    markers.forEach((marker) => {
-      L.marker([marker.lat, marker.lng], { title: marker.name })
-        .addTo(map)
-        .bindPopup(
-          `
-            <div class="leaflet-popup-content__title">${marker.name}: ${marker.value}</div>
-            <div class="leaflet-popup-content__divider"></div>
-            <div class="leaflet-popup-content__board w-200px">
-              <div>测试字体</div>
-              <div>测试数值</div>
-            </div>
-            <table class="leaflet-popup-content__table w-full mt-10px">
-              <thead>
-                <tr>
-                  <th>name</th>
-                  <th>value</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>测试数据1</td>
-                  <td>100</td>
-                </tr>
-                <tr>
-                  <td>测试数据2</td>
-                  <td>200</td>
-                </tr>
-              </tbody>
-            </table>
-          `
-        );
+    const { records } = await list({ pageNo: 0, paseSize: 9999 });
+    records.forEach((item, index) => {
+      const presets = [
+        [36.644181586865905, 109.48980355362514],
+        [33.063924198120645, 107.01782226562501],
+        [34.34116826510752, 108.93468369998695],
+        [34.361576287484176, 107.23571011212084],
+      ];
+
+      generateStandardMarker(
+        {
+          name: item.mineName,
+          lat: presets[index][0],
+          lng: presets[index][1],
+          // color: 'red',
+          radius: 10,
+          type: 'marker',
+          ...item,
+        },
+        {}
+      ).then((r) => r.addTo(map));
     });
   }
 </script>
@@ -251,6 +274,8 @@
     }
 
     .leaflet-popup-content {
+      margin: 13px 20px;
+      min-width: 280px;
       // &__popup {
       // }
 
@@ -282,12 +307,14 @@
         }
         tbody {
           tr {
-            padding: 5px;
             background-color: @map-popup-table-th-bg;
           }
           tr:nth-child(even) {
             background-color: @map-popup-table-theven-bg;
           }
+          td {
+            padding: 5px;
+          }
         }
       }
     }