update

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -2,7 +2,6 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="form-container">
-                <button @click="test">点击</button>
                 <slot name="rightForm"></slot>
             </div>
             <div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
@@ -24,62 +23,32 @@
             </div>
             <div
                 class="footer-dialog-con"
-                style="--moveUp: 110px; --moveDown: -50px"
-                :class="show ? 'slide-top' : 'slide-bottom'"
+                style="--moveUp: 120px; --moveDown: -120px"
+                :class="isShowAlarm ? 'slide-top' : 'slide-bottom'"
                 v-show="isShowAlarm"
             >
-                <FooterDialog></FooterDialog>
+                <FooterDialog :detailLeft="detailLeft" :detailRight="detailRight" @closeDialog="closeDialog"></FooterDialog>
             </div>
         </div>
         <WatchListDialog ref="watchDialogRef"></WatchListDialog>
     </div>
 </template>
 <script lang="ts" setup>
-    import { onMounted, ref, watch } from 'vue';
+    import { onMounted, ref } from '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 { useAlarmDetail, useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.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);
-
-    function test() {
-        show.value = !show.value;
-    }
-
     const props = defineProps({
         orgCode: String,
         type: String,
     });
-
-    const markerList = [
-        {
-            lon: 109.42,
-            lat: 33.9,
-            type: '6',
-            name: '第一采油厂',
-            count: 20,
-        },
-        {
-            lon: 106.59,
-            lat: 34.93,
-            type: '6',
-            name: '第二采油厂',
-            count: 40,
-        },
-        {
-            lon: 109.42,
-            lat: 31.9,
-            type: '6',
-            name: '第三采油厂',
-            count: 60,
-        },
-    ];
-
+    const mapList = ref([]); //地图数据
     // 底部表格
     const { isShow, className, setIsShow } = useMoveClass();
 
@@ -91,18 +60,13 @@
     const watchDialogRef = ref();
 
     function openWatchList(item) {
+        console.log('item', item);
         if (item.key == 'allotDeviceNum') {
-            watchDialogRef.value.openModal();
+            watchDialogRef.value.openModal(item.extData?.deptId);
         }
     }
 
     const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
-    watch(
-        () => props.orgCode,
-        () => {
-            setIsShow(false);
-        }
-    );
 
     async function getFooterTable(orgCode) {
         const params = {
@@ -111,51 +75,57 @@
         };
         const { code, result } = await footerApi(params);
         if (code == 200) {
-            setFooterList(result.records[0]);
+            setFooterList(result);
         }
     }
 
-    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;
+        try {
+            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: (val) => {
+                            return `<div style="
                                 width: 21px;
                                 height: 44px;
                                 position: absolute;
                                 left: -20px;
-                                top: -20px;" title="${val.departName}">
+                                top: -20px;" title="${val?.departName}">
                             </div>`;
+                        },
                     },
-                },
-                (val) => {
-                    console.log('val', val);
-                    getFooterTable(val.orgCode);
-                    setIsShow(true);
-                }
-            );
-        }
+                    (val) => {
+                        getFooterTable(val.orgCode);
+                        setIsShow(true);
+                    }
+                );
+            }
+        } catch {}
     }
 
+    const { detailLeft, detailRight, setDetail } = useAlarmDetail();
     onMounted(() => {
         init();
-
+        //点击预警定位
         $bus.on(earlyWarning, (params) => {
-            console.log('params', params);
+            setDetail(params);
             drawMarker(params);
-            isShow.value ? setIsShow(true) : setIsShow(false);
-            isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
+            setIsShowAlarm(true);
         });
     });
 
-    function drawMarker(data) {
+    /**
+     *@desc 预警弹窗关闭
+     */
+    function closeDialog() {
+        setIsShowAlarm(!isShowAlarm.value);
+    }
+
+    function drawMarker(data: any) {
         const { lon, lat } = data;
         if (!lon || !lat) return;
         Map.createMarker(data);