update

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -10,17 +10,23 @@
             </div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
-            <div class="footer-data" v-show="true">
+            <div class="footer-data" v-show="isShow" style="--moveUp: 50px; --moveDown: -90px" :class="className">
                 <div class="empty-png"></div>
-                <div class="col-item" v-for="item in footerList">
+                <div
+                    class="col-item nowrap"
+                    v-for="item in footerList"
+                    :style="{ cursor: item.key == 'allotDeviceNum' ? 'pointer' : 'default' }"
+                    @click="openWatchList(item)"
+                >
                     <div class="col-text">{{ item?.name }}</div>
-                    <div class="col-value">{{ item?.value }}</div>
+                    <div class="col-value nowrap" :title="item.value">{{ item?.value }}</div>
                 </div>
             </div>
-            <div class="footer-dialog-con" v-show="false" :class="show ? 'slide-top' : 'slide-bottom'">
+            <div class="footer-dialog-con" style="--moveUp: 50px; --moveDown: -50px" :class="show ? 'slide-top' : 'slide-bottom'" v-show="false">
                 <FooterDialog></FooterDialog>
             </div>
         </div>
+        <WatchListDialog ref="watchDialogRef"></WatchListDialog>
     </div>
 </template>
 <script lang="ts" setup>
@@ -28,9 +34,9 @@
     import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
     import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
-    import { useFooterTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    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 { getToday } from '/@/utils/utils.ts';
 
     const show = ref(false);
 
@@ -43,26 +49,27 @@
         type: String,
     });
 
-    async function getMapData(type, params = {}) {}
-
     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,
         },
     ];
     onMounted(() => {
@@ -70,6 +77,9 @@
         getFooterTable();
     });
 
+    // 底部表格
+    const { isShow, className, setIsShow } = useMoveClass();
+
     function init() {
         Map.initMap({ el: 'mapContainer' });
         Map.createOverlay(
@@ -87,14 +97,45 @@
             },
             (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);
             }
         );
     }
 
+    const watchDialogRef = ref();
+
+    function openWatchList(item) {
+        if (item.key == 'allotDeviceNum') {
+            watchDialogRef.value.openModal();
+        }
+    }
+
     const { footerList, setFooterList } = useFooterTable();
-    watch(props, () => {
-        getFooterTable();
-    });
+    watch(
+        () => props.orgCode,
+        () => {
+            setIsShow(false);
+            // getFooterTable();
+        }
+    );
 
     async function getFooterTable() {
         const params = {
@@ -130,7 +171,7 @@
         }
 
         .mapContainer {
-            height: 100%;
+            height: calc(100% + 20px);
             margin: 10px 0;
         }
 
@@ -138,7 +179,7 @@
             position: absolute;
             left: 0;
             right: 0;
-            bottom: 0;
+            bottom: var(--moveDown);
             display: flex;
             z-index: 999;
 
@@ -171,9 +212,6 @@
             }
         }
 
-        --moveUp: 50px;
-        --moveDown: -50px;
-
         .footer-dialog-con {
             position: absolute;
             left: 0;