update

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -22,7 +22,12 @@
                     <div class="col-value nowrap" :title="item.value">{{ item?.value }}</div>
                 </div>
             </div>
-            <div class="footer-dialog-con" style="--moveUp: 50px; --moveDown: -50px" :class="show ? 'slide-top' : 'slide-bottom'" v-show="false">
+            <div
+                class="footer-dialog-con"
+                style="--moveUp: 110px; --moveDown: -50px"
+                :class="show ? 'slide-top' : 'slide-bottom'"
+                v-show="isShowAlarm"
+            >
                 <FooterDialog></FooterDialog>
             </div>
         </div>
@@ -31,12 +36,14 @@
 </template>
 <script lang="ts" setup>
     import { onMounted, ref, watch } from 'vue';
-    import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
+    import $bus from '/@/utils/bus.ts';
     import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
     import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
     import { useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
-    import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
+    import { footerApi, mapListApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
+    import { earlyWarning } from '/@/utils/busConstant.ts';
+    import { getToday } from '/@/utils/utils.ts';
 
     const show = ref(false);
 
@@ -72,52 +79,13 @@
             count: 60,
         },
     ];
-    onMounted(() => {
-        init();
-        getFooterTable();
-    });
 
     // 底部表格
     const { isShow, className, setIsShow } = useMoveClass();
 
     function init() {
         Map.initMap({ el: 'mapContainer' });
-        Map.createOverlay(
-            markerList,
-            {
-                content: function (val) {
-                    return `<div style="color: red;
-                                width: 21px;
-                                height: 44px;
-                                position: absolute;
-                                left: -20px;
-                                top: -20px;" title="${val.name}">
-                            </div>`;
-                },
-            },
-            (val) => {
-                console.log('info', val);
-                const obj = {
-                    id: '1731587716383043586',
-                    orgCode: 'A01A01',
-                    orgCodeLeaf: 'A01A01A01',
-                    userCount: 4 + Math.random() * 4,
-                    deviceNum: 0,
-                    allotDeviceNum: Math.random() * 4,
-                    sevenDayNum: 1 + Math.random() * 4,
-                    fourteenDayNum: 1 + Math.random() * 4,
-                    heartRateErrorNum: Math.random() * 4,
-                    spoErrorNum: Math.random() * 4,
-                    stressErrorNum: Math.random() * 4,
-                    tempErrorNum: Math.random() * 4,
-                    dataDate: '2023-12-04 00:00:00',
-                    orgName: '安全环保监督部',
-                    deptName: '定边监督站',
-                };
-                setIsShow(true);
-                setFooterList(obj);
-            }
-        );
+        getMapList();
     }
 
     const watchDialogRef = ref();
@@ -128,25 +96,70 @@
         }
     }
 
-    const { footerList, setFooterList } = useFooterTable();
+    const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
     watch(
         () => props.orgCode,
         () => {
             setIsShow(false);
-            // getFooterTable();
         }
     );
 
-    async function getFooterTable() {
+    async function getFooterTable(orgCode) {
         const params = {
-            orgCode: 'A01A01' || props.orgCode,
-            // dataDate: getToday(),
+            orgCode: orgCode || props.orgCode,
+            dataDate: getToday(),
         };
         const { code, result } = await footerApi(params);
         if (code == 200) {
             setFooterList(result.records[0]);
         }
     }
+
+    const mapList = ref([]);
+
+    async function getMapList() {
+        const { code, result } = await mapListApi();
+        if (code == 200 && result.length > 0) {
+            const newArr = result.map((item) => ({ ...item, type: '6' }));
+            mapList.value = newArr;
+            Map.createOverlay(
+                newArr,
+                {
+                    content: function (val) {
+                        return `<div style="color: red;
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val.departName}">
+                            </div>`;
+                    },
+                },
+                (val) => {
+                    console.log('val', val);
+                    getFooterTable(val.orgCode);
+                    setIsShow(true);
+                }
+            );
+        }
+    }
+
+    onMounted(() => {
+        init();
+
+        $bus.on(earlyWarning, (params) => {
+            console.log('params', params);
+            drawMarker(params);
+            isShow.value ? setIsShow(true) : setIsShow(false);
+            isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
+        });
+    });
+
+    function drawMarker(data) {
+        const { lon, lat } = data;
+        if (!lon || !lat) return;
+        Map.createMarker(data);
+    }
 </script>
 <style lang="less" scoped>
     .center-map {