update: 新疆大屏

src/views/indexSun/centerMap.vue

@@ -63,12 +63,14 @@
 </template>
 <script setup lang="ts">
     import { ref, onMounted } from 'vue';
-    import { tabList, legendList } from '/@/views/indexSun/indexSun.ts';
+    import { tabList, legendList, infoContent } from '/@/views/indexSun/indexSun.ts';
     import { message } from 'ant-design-vue';
     import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
     import { Map } from '/@/assets/mapUtils/map.ts';
     import { aircraft, getKmStr, getTimeStr, mapApiSwitch, TabType } from '/@/components/xianMap/xianMapHooks.ts';
     import { useDetailStore } from '/@/store/modules/detailData.ts';
+    import $bus from '/@/utils/bus.ts';
+    import { earlyWarning } from '/@/utils/busConstant.ts';
 
     const list = ref(tabList);
     const currentIndex = ref(0);
@@ -104,6 +106,19 @@
             Map.map && Map.map.on('zoomend', setLevel);
             Map.map && Map.map.on('zoomend', setLevel);
         });
+        $bus.on(earlyWarning, (params) => {
+            console.log(params, 12323);
+            drawMarker(params);
+        });
+        document.addEventListener('click', (e) => {
+            let t = e.target.closest('.viewBtn');
+            if (t) {
+                console.log(t.id);
+                if (t.id) {
+                    handleClcikDetail(JSON.parse(t.id));
+                }
+            }
+        });
     });
     function setLevel() {
         //获取当前地图级别
@@ -182,8 +197,9 @@
             }
         });
     }
-    async function getMapData(type, params = {}) {
+    async function getMapData(type, params = { type: '' }) {
         try {
+            console.log(type, params, 'asghujis');
             const { code, result } = await mapApiSwitch(type, params);
             if (code == 200) {
                 if (Array.isArray(result) && result.length > 0) {
@@ -200,7 +216,14 @@
                             </div>`;
                             },
                         },
-                        () => {},
+                        async (val) => {
+                            console.log(val);
+                            Map.createInfoModal({ option: val, content: infoContent(val) });
+                            // const viewBtn = document.getElementById(val.id);
+                            // viewBtn.onclick = () => {
+                            //     handleClcikDetail(val);
+                            // };
+                        },
                         true
                     );
                 } else {
@@ -218,6 +241,9 @@
         showDrivingPanel.value = false;
         emits('clearHospitalList');
     }
+    function handleClcikDetail(res) {
+        console.log(res);
+    }
     function setTitle({ time, distance }) {
         let str = '全程';
         str += getTimeStr(time);
@@ -238,6 +264,15 @@
             }
         });
     }
+    function drawMarker(data: any) {
+        console.log(data);
+        const { lon, lat } = data;
+        if (!lon || !lat) {
+            Map.clearMarker();
+            return;
+        }
+        Map.createMarker({ ...data, realName: data.userName });
+    }
 </script>
 
 <style lang="less" scoped>
@@ -483,5 +518,36 @@
                 }
             }
         }
+        :deep(.modal-box) {
+            width: 330px;
+            height: 220px;
+            padding: 10px 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            .modal-item {
+                display: flex;
+                justify-content: space-between;
+                .item-one {
+                    width: 50%;
+                }
+                .item-two {
+                    color: #00ccff;
+                }
+            }
+            .modal-btn {
+                display: flex;
+                justify-content: center;
+                .view-btn {
+                    padding: 5px;
+                    width: 60%;
+                    text-align: center;
+                    color: #00ccff;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    border: 1px solid #00ccff;
+                }
+            }
+        }
     }
 </style>