update

.env.development

@@ -1,2 +1,4 @@
-// 王昊地址
+# 王昊地址
-VITE_GLOB_API_URL=http://192.168.1.6
+#VITE_GLOB_API_URL=http://192.168.1.6
+#开发环境
+VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io

src/assets/less/index.less

@@ -57,6 +57,12 @@
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+.nowrap {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ant-select-dropdown {
   background-color: #00152b !important;
   border-right: 1px solid #1b7ef2;

src/assets/mapUtils/commonFun.ts

@@ -35,7 +35,7 @@ export function typeToIcon(type: string) {
         return createIcon({ icon: mapIcon3, iconSize, imageSize });
     }
     if (type == '6') {
-        return createIcon({ icon: watchIcon, iconSize: [21, 44], imageSize: [21, 44] });
+        return createIcon({ icon: watchIcon, iconSize: [23, 51], imageSize: [23, 51] });
     }
 }
 

src/components/dialog/Dialog.vue

@@ -35,6 +35,7 @@
             width: 100%;
             height: 40px;
             background: url('../../assets/images/dialog.png') no-repeat;
+            background: rgba(0, 0, 0, 0.6);
             background-size: 100% 100%;
             color: #ffffff !important;
             padding-left: 2%;
@@ -43,6 +44,7 @@
         .ant-modal-header {
             padding: 0 !important;
             padding-bottom: 0;
+            border-bottom: none;
         }
 
         .ant-modal-header,

src/components/secondaryScreen/secondMap/components/watchListDialog.vue

@@ -0,0 +1,282 @@
+<template>
+    <Dialog :openVis="visible" width="65%" title="健康终端报警列表" @close="closeModal">
+        <template #container>
+            <div class="dialog-con">
+                <a-table
+                    class="ant-table-striped"
+                    :dataSource="dataSource"
+                    :columns="columns"
+                    :scroll="{ y: '56vh' }"
+                    :pagination="paginationProp"
+                    :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+                >
+                </a-table>
+            </div>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { ref } from 'vue';
+    //分页相关
+    const current = ref(1);
+    const pageSize = ref(10);
+    const total = ref(0);
+    const paginationProp = ref({
+        showSizeChanger: true,
+        pageSizeOptions: ['10', '30', '50'],
+        pageSize,
+        current,
+        total,
+        showTotal: (total) => `总 ${total} 条`,
+        onChange: pageChange,
+    });
+
+    function pageChange(page, pageS) {
+        // debugger;
+        current.value = page;
+        pageSize.value = pageS;
+    }
+
+    const dataSource = ref([
+        {
+            key: '1',
+            name: '胡彦斌1',
+            age: 32,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '2',
+            name: '胡彦祖2',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '3',
+            name: '胡彦祖3',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '4',
+            name: '胡彦祖4',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '5',
+            name: '胡彦祖5',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '6',
+            name: '胡彦祖6',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '7',
+            name: '胡彦祖7',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '8',
+            name: '胡彦祖8',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '9',
+            name: '胡彦祖9',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+        {
+            key: '10',
+            name: '胡彦祖10',
+            age: 42,
+            address: '西湖区湖底公园1号',
+        },
+    ]);
+
+    const columns = ref([
+        {
+            title: '员工名称',
+            dataIndex: 'name',
+            align: 'center',
+            key: 'name',
+        },
+        {
+            title: '单位名称',
+            dataIndex: 'age',
+            align: 'center',
+            key: 'age',
+        },
+        {
+            title: '部门名称',
+            dataIndex: 'address',
+            align: 'center',
+            key: 'address',
+        },
+        {
+            title: '工具编码',
+            dataIndex: 'address1',
+            align: 'center',
+            key: 'address1',
+        },
+        {
+            title: '心率（次/分）',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+        {
+            title: '血氧（%）',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+        {
+            title: '压力',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+        {
+            title: '睡眠',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+        {
+            title: '体温（℃）',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+        {
+            title: '锻炼（千卡）',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+        {
+            title: '步数（米）',
+            dataIndex: 'address2',
+            align: 'center',
+            key: 'address2',
+        },
+    ]);
+    const visible = ref(true);
+
+    function openModal() {
+        console.log('1');
+        visible.value = true;
+    }
+
+    function closeModal() {
+        visible.value = false;
+    }
+
+    defineExpose({
+        openModal,
+        closeModal,
+    });
+</script>
+<style scoped lang="less">
+    .dialog-con {
+        background-color: #00152b;
+        border: 1px solid #129bff;
+        min-height: 500px;
+    }
+
+    :deep(.ant-table-thead > tr > th) {
+        color: #fff !important;
+        background: rgba(35, 132, 221, 0.5) !important;
+        border-top: 1px solid #1d4e7c !important;
+        border-bottom: none;
+        padding: 9px 9px;
+    }
+
+    :deep(.ant-table-cell-scrollbar) {
+        box-shadow: none !important;
+    }
+
+    :deep(.ant-table) {
+        color: #fff;
+        background-color: transparent;
+        pointer-events: none;
+    }
+
+    :deep(.ant-table-tbody > tr > td) {
+        border-bottom: none;
+        padding: 0px 4px;
+    }
+
+    :deep(.ant-table-row:hover) {
+        background-color: transparent;
+        color: #ffffff;
+    }
+
+    .ant-table-striped :deep(.table-default) td,
+    .ant-table-striped :deep(.table-striped) td {
+        background-color: #00152b;
+        border-bottom: 1px solid #2384dd;
+    }
+
+    //#00152b
+    // 分页
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+
+    :deep(.ant-pagination-item) {
+        background-color: #1f2935;
+        color: #ffffff;
+        border: none;
+    }
+
+    // 当前页选中的样式
+    :deep(.ant-pagination-item-active) {
+        background-color: #0081ff;
+    }
+
+    :deep(.ant-pagination-item-active a) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-item a),
+    :deep(.ant-pagination-total-text) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        color: #ffffff;
+        background-color: #1f2935;
+    }
+
+    // 省略样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+        color: #ffffff;
+    }
+
+    // 省略鼠标移入样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
+        color: rgba(255, 255, 255, 0.4);
+    }
+
+    // 下一页
+    :deep(.ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+
+    :deep(.ant-table-pagination-right) {
+        margin-right: 10px !important;
+    }
+</style>

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, () => {
+    watch(
-        getFooterTable();
+        () => 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;

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -88,7 +88,7 @@ export function useFooterTable() {
         {
             name: '佩戴手表人数',
             value: '',
-            key: 'allotDeviceNum'
+            key: 'allotDeviceNum',
         },
         {
             name: '近一周活跃人数',
@@ -123,4 +123,21 @@ export function useFooterTable() {
         footerList,
         setFooterList
     }
+}
+
+export function useMoveClass() {
+    const isShow = ref(false)
+    const className = ref('slide-bottom')
+
+    function setIsShow(type: boolean) {
+        isShow.value = type
+        className.value = type ? 'slide-top' : 'slide-bottom'
+    }
+
+    return {
+        isShow,
+        className,
+        setIsShow
+    }
+
 }