[Wip 0000] 地图详情改版

src/api/sys/map.ts

@@ -32,13 +32,13 @@ export function getMarkers(params: any): Promise<any> {
         id: root.rawid,
         name: root.departName,
         radius: 10,
-        managementName: root.departName,
         mineCode: children.map((c) => c.mineCode).join(','),
         lat: latitude,
         lng: longitude,
         children: children.map((e) => {
           return {
             ...e,
+            name: root.departName,
             rootId: root.rawid,
             lat: e.latitude,
             lng: e.longitude,

src/layouts/default/feature/SimpleMap.vue

@@ -143,16 +143,18 @@
         icon: L.divIcon(iconConfig),
         riseOnHover: true,
       }).on('click', () => {
+        // 将绑定到该标记点的所有子标记点添加到地图上
         layerMap.forEach((group, code) => {
           map?.removeLayer(group);
           if (code === item.id) {
-            // map?.addLayer(group);
-            // map?.flyToBounds(group.getBounds());
-            map?.flyToBounds(layerMap.get(item.id).getBounds());
+            map?.addLayer(group);
+            map?.flyToBounds(group.getBounds());
+            // map?.flyToBounds(layerMap.get(item.id).getBounds());
           }
         });
         appStore.setSimpleMapParams({ mineCode: item.mineCode });
       });
+      // 将该标记点添加到默认地图上
       marker.addTo(layerMap.get(DEFAULT_LAYER_ID)!);
 
       // 创建子标记点
@@ -161,9 +163,7 @@
       item.children.forEach((child: any) => {
         const popupContent = generatePopupContent(child);
         const childMarker = L.marker([child.lat, child.lng]).bindPopup(popupContent);
-        if (layerMap.has(child.rootId)) {
-          childMarker.addTo(layerMap.get(child.rootId)!);
-        }
+        childMarker.addTo(layerMap.get(item.id)!);
       });
     });
   }

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

@@ -64,7 +64,7 @@ export const alarmLevelColor = [StatusColorEnum.red, StatusColorEnum.blue, Statu
  * 生成标准标记点（子节点）的弹出框 HTML
  */
 export function generatePopupContent(data: any): string {
-  const { goafDataList = [], id, mineName, managementName, goafNum, alarmLevel } = data;
+  const { goafDataList = [], id, mineName, name, gasLevelName, gjMineStatus } = data;
   const tbodyInnerHtml = goafDataList.reduce((html, { devicePos, alarmLevel, linkStatus }, index) => {
     html += `
       <tr>
@@ -82,15 +82,15 @@ export function generatePopupContent(data: any): string {
     <div class="leaflet-popup-content__divider"></div>
     <div class="leaflet-popup-content__board mb-1">
       <div class="mr-5px">所属执法处</div>
-      <div>${managementName}</div>
+      <div>${name}</div>
     </div>
     <div class="leaflet-popup-content__board mb-1">
-      <div class="mr-5px">采空区密闭数量</div>
-      <div>${goafNum}</div>
+      <div class="mr-5px">瓦斯等级</div>
+      <div>${gasLevelName}</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 class="mr-5px">生产状态</div>
+      <div>${gjMineStatus}</div>
     </div>
     <div class="leaflet-popup-content__divider"></div>
     <table id="${id}" class="leaflet-popup-content__table w-full mt-1">