update

src/components/secondaryScreen/secondMap/components/footerDialog.vue

@@ -2,29 +2,39 @@
     <div class="modal-content">
         <div class="empty-png"></div>
         <div class="modal-header">
-            <button type="button" aria-label="Close" class="modal-close">X</button>
+            <button type="button" aria-label="Close" class="modal-close" @click="closeDialog">X</button>
             <div class="modal-title" id="vcDialogTitle0">健康报警员工信息</div>
         </div>
         <div class="modal-body">
             <div class="info-left">
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div v-for="item in detailLeft" :key="item.key"
+                    ><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
+                >
             </div>
             <div class="info-right">
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div v-for="item in detailRight" :key="item.key"
+                    ><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
+                >
             </div>
         </div>
     </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    const emits = defineEmits(['closeDialog']);
+
+    const props = defineProps({
+        detailRight: Array,
+        detailLeft: Array,
+    });
+
+    function closeDialog() {
+        emits('closeDialog');
+    }
+</script>
 
 <style scoped lang="less">
     .modal-content {
         position: relative;
-        //background-clip: padding-box;
         border: 0;
         border-radius: 2px;
 
@@ -36,9 +46,10 @@
         }
 
         .modal-close {
+            width: 40px;
+            height: 40px;
             position: absolute;
-            top: 10px;
-            right: 6px;
+            right: 0;
             z-index: 10;
             padding: 0;
             color: #999999;
@@ -58,7 +69,6 @@
 
             .modal-title {
                 margin: 0;
-                color: rgba(0, 0, 0, 0.85);
                 font-weight: 500;
                 font-size: 16px;
                 line-height: 22px;
@@ -83,6 +93,7 @@
             color: #ffffff;
             background-color: #00152b;
             border: 1px solid #129bff;
+            border-top: none;
             padding: 2% 0 2% 5%;
             display: flex;
 

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

@@ -18,10 +18,13 @@
 <script setup lang="ts">
     import Dialog from '/@/components/dialog/Dialog.vue';
     import { ref } from 'vue';
+    import { columns } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { getUserListByDeptId } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
     //分页相关
     const current = ref(1);
     const pageSize = ref(10);
     const total = ref(0);
+    const deptId = ref();
     const paginationProp = ref({
         showSizeChanger: true,
         pageSizeOptions: ['10', '30', '50'],
@@ -35,150 +38,32 @@
     function pageChange(page, pageS) {
         current.value = page;
         pageSize.value = pageS;
+        getRecords(deptId.value);
     }
 
-    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 dataSource = ref([]);
     const visible = ref(false);
 
-    function openModal() {
-        console.log('1');
+    function openModal(id: string) {
         visible.value = true;
+        deptId.value = id;
+        getRecords(id);
     }
 
     function closeModal() {
         visible.value = false;
     }
 
+    async function getRecords(id: string) {
+        if (!id) {
+            return;
+        }
+        const { code, result } = await getUserListByDeptId({ orgId: id, pageSize: pageSize.value, pageNo: current.value });
+        if (code == 200) {
+            dataSource.value = result?.records;
+        }
+    }
+
     defineExpose({
         openModal,
         closeModal,
@@ -211,7 +96,7 @@
 
     :deep(.ant-table-tbody > tr > td) {
         border-bottom: none;
-        padding: 0px 4px;
+        padding: 0 4px;
     }
 
     :deep(.ant-table-row:hover) {

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);

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -1,9 +1,15 @@
 import { get } from '/@/api/request.ts';
 
 export enum Api {
-    footerStatistic = '/health-watch/watch/deptStatisticData/list',
+    footerStatistic = '/health-watch/watch/deptStatisticData/listByorgCode',
     mapListApi = '/health-watch/watch/watchDevice/getMapList',
+    getUserListByDeptId = '/health-watch/watch/watchDevice/getUserListByDeptId',
 }
 
+/**
+ * 底部单行表格
+ * @param params
+ */
 export const footerApi = (params) => get(Api.footerStatistic, params);
 export const mapListApi = (params) => get(Api.mapListApi, params);
+export const getUserListByDeptId = (params) => get(Api.getUserListByDeptId, params);

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -1,40 +1,26 @@
-// export const tabList = [
-//     {
-//         name: '所有资源',
-//         type: TabType.all,
-//     },
-//     {
-//         name: '油田医院',
-//         type: TabType.youTianYiYuan,
-//     },
-//     {
-//         name: '医疗点',
-//         type: TabType.yiLiaoDian,
-//     },
-// ];
-import {cloneDeep} from 'lodash-es';
-import {nextTick, onMounted, ref} from "vue";
-import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
+import { cloneDeep } from 'lodash-es';
+import { onMounted, ref } from 'vue';
+import { allSecondaryDeparts } from '/@/components/secondaryScreen/commonApi';
 
 export const watchIcon = new URL('/@/assets/img/watch.png', import.meta.url).href;
 
 export function useDepart() {
     const orgCode = ref();
     const option = ref([]);
-    const fieldNames = {label: 'departName', value: 'orgCode',}
+    const fieldNames = { label: 'departName', value: 'orgCode' };
     onMounted(() => {
         getOptionData();
     });
 
     function setOption(data) {
         option.value = data;
-        orgCode.value = data[0]?.orgCode
+        orgCode.value = data[0]?.orgCode;
     }
 
     async function getOptionData() {
-        const {result, code} = await allSecondaryDeparts();
+        const { result, code } = await allSecondaryDeparts();
         if (code == 200) {
-            setOption(result)
+            setOption(result);
         }
     }
 
@@ -42,112 +28,177 @@ export function useDepart() {
         orgCode,
         option,
         setOption,
-        fieldNames
+        fieldNames,
     };
 }
 
 export function useTimeType(t) {
-    const type = ref(t || '')
+    const type = ref(t || '');
     const timeRangeOption = [
         {
             label: '近一周',
-            value: 'week'
+            value: 'week',
         },
         {
             label: '近一月',
-            value: 'month'
+            value: 'month',
         },
         {
             label: '近一年',
-            value: 'year'
-        }
-    ]
+            value: 'year',
+        },
+    ];
     return {
         type,
-        timeRangeOption
-    }
+        timeRangeOption,
+    };
 }
 
 export function useFooterTable() {
-    const isShowAlarm = ref(false)
+    const isShowAlarm = ref(false);
 
     function setIsShowAlarm(type: boolean) {
-        isShowAlarm.value = type
+        isShowAlarm.value = type;
     }
 
     const footerList = ref([
         {
             name: '单位名称',
             value: '',
-            key: 'orgName'
+            key: 'orgName',
+            extData: {},
         },
         {
             name: '单位人数',
             value: '',
-            key: 'userCount'
+            key: 'userCount',
+            extData: {},
         },
         {
             name: '入库设备数量',
             value: '',
-            key: 'deviceNum'
+            key: 'deviceNum',
+            extData: {},
         },
         {
             name: '佩戴手表人数',
             value: '',
             key: 'allotDeviceNum',
+            extData: {},
         },
         {
             name: '近一周活跃人数',
             value: '',
-            key: 'sevenDayNum'
+            key: 'sevenDayNum',
+            extData: {},
         },
         {
             name: '近一月活跃人数',
             value: '',
-            key: 'a'
+            key: 'thirtyDayNum',
+            extData: {},
         },
         {
             name: '近一年活跃人数',
             value: '',
-            key: 'b'
-        }
-    ])
+            key: 'yearDayNum',
+            extData: {},
+        },
+    ]);
 
     function setFooterList(res: any) {
-
-        const arrList = cloneDeep(footerList.value)
+        const arrList = cloneDeep(footerList.value);
         if (res) {
-            arrList.forEach(item => {
-                item.value = res[item.key] || ''
-            })
+            console.log('resssss', res);
+            arrList.forEach((item) => {
+                item.value = res[item.key];
+                item.extData = res;
+            });
         }
-        footerList.value = arrList
-
+        footerList.value = arrList;
     }
 
     return {
         footerList,
         setFooterList,
         setIsShowAlarm,
-        isShowAlarm
+        isShowAlarm,
+    };
+}
+
+export function useAlarmDetail() {
+    const detailLeft = ref([
+        {
+            name: '员工姓名',
+            value: '',
+            key: 'realName',
+        },
+        {
+            name: '工具编码',
+            value: '',
+            key: 'watchNo',
+        },
+        {
+            name: '单位名称',
+            value: '',
+            key: 'orgName2',
+        },
+    ]);
+    const detailRight = ref([
+        {
+            name: '部门名称',
+            value: '',
+            key: 'orgName',
+        },
+        {
+            name: '事件类型',
+            value: '',
+            key: 'eventType_dictText',
+        },
+        {
+            name: '异常数据',
+            value: '',
+            key: 'dataValue',
+        },
+        {
+            name: '报警时间',
+            value: '',
+            key: 'warnTime',
+        },
+    ]);
+
+    function setDetail(res) {
+        if (res) {
+            detailLeft.value.forEach((item) => {
+                item.value = res[item.key];
+            });
+            detailRight.value.forEach((item) => {
+                item.value = res[item.key];
+            });
+        }
     }
+
+    return {
+        detailLeft,
+        detailRight,
+        setDetail,
+    };
 }
 
 export function useMoveClass() {
-    const isShow = ref(false)
-    const className = ref('slide-bottom')
+    const isShow = ref(false);
+    const className = ref('slide-bottom');
 
     function setIsShow(type: boolean) {
-        isShow.value = type
-        className.value = type ? 'slide-top' : 'slide-bottom'
+        isShow.value = type;
+        className.value = type ? 'slide-top' : 'slide-bottom';
     }
 
     return {
         isShow,
         className,
-        setIsShow
-    }
-
+        setIsShow,
+    };
 }
 
 export function useTree() {
@@ -172,10 +223,79 @@ export function useTree() {
                 },
             ],
         },
-    ]
-    const orgCode = ref([])
+    ];
+    const orgCode = ref([]);
     return {
         orgCode,
-        treeOption
-    }
-}
+        treeOption,
+    };
+}
+
+export const columns = [
+    {
+        title: '员工名称',
+        dataIndex: 'realName',
+        align: 'center',
+        key: 'realName',
+    },
+    {
+        title: '单位名称',
+        dataIndex: 'orgName',
+        align: 'center',
+        key: 'orgName',
+    },
+    {
+        title: '部门名称',
+        dataIndex: 'orgName1',
+        align: 'center',
+        key: 'orgName1',
+    },
+    {
+        title: '工具编码',
+        dataIndex: 'watchNo',
+        align: 'center',
+        key: 'watchNo',
+    },
+    {
+        title: '心率（次/分）',
+        dataIndex: 'heartRate',
+        align: 'center',
+        key: 'heartRate',
+    },
+    {
+        title: '血氧（%）',
+        dataIndex: 'spo2',
+        align: 'center',
+        key: 'spo2',
+    },
+    {
+        title: '压力',
+        dataIndex: 'stress',
+        align: 'center',
+        key: 'stress',
+    },
+    {
+        title: '睡眠',
+        dataIndex: 'sleep',
+        align: 'center',
+        key: 'sleep',
+    },
+    {
+        title: '体温（℃）',
+        dataIndex: 'temp',
+        align: 'center',
+        key: 'temp',
+    },
+    {
+        title: '锻炼（千卡）',
+        dataIndex: 'exercise',
+        align: 'center',
+        key: 'exercise',
+    },
+    {
+        title: '步数（米）',
+        dataIndex: 'workout',
+        align: 'center',
+        key: 'workout',
+    },
+];