update 弹窗增加手机号字段，增加预警详情弹窗

src/components/body-d-left/left.api.ts

@@ -6,6 +6,7 @@ export enum Api {
     getDetail = '/health-medical/medical/hospital/getMedicalHospital',
     complaint = '/health-emergency/emergency/tblHelpCenter/sicknessTypeStatistic',
     orderDetail = '/health-emergency/emergency/order/list',
+    listCustom = '/health-watch/watch/watchMonitorData/listCustom',
 }
 
 //获取全部部门
@@ -18,3 +19,5 @@ export const complaint = (params: any) => get(Api.complaint, params);
 export const getDetail = (params: any) => get(Api.getDetail, params);
 //获取主诉分类应急工单详情
 export const getOrderDetail = (params: any) => get(Api.orderDetail, params);
+//副屏预警查看详情
+export const getEarlyWarningDetail = (params: any) => get(Api.listCustom, params);

src/components/body-d-right/oneR.vue

@@ -37,6 +37,10 @@
                         <span>异常事件：</span>
                         <span>{{ userInfo?.eventType_dictText }}</span>
                     </div>
+                    <div class="con-item">
+                        <span>异常值：</span>
+                        <span>{{ userInfo?.dataValue }}</span>
+                    </div>
                     <div class="con-item">
                         <span>发生时间：</span>
                         <span>{{ userInfo?.warnTime }}</span>
@@ -84,6 +88,7 @@
         eventType_dictText: '',
         warnTime: '',
         address: '',
+        dataValue: '',
     });
     onMounted(() => {
         getScrollList();

src/components/secondaryScreen/screen-right/threeR.vue

@@ -1,6 +1,8 @@
 <template>
     <div>
-        <public-title title="预警" :theme-type="themeType" />
+        <public-title title="预警" :theme-type="themeType">
+            <template #right><span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span></template>
+        </public-title>
         <div class="inner-screen">
             <a-table
                 :scroll="{
@@ -10,8 +12,11 @@
                 :columns="monitorColumns"
                 :dataSource="dataSource"
                 :pagination="pagination"
-                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default no-white' : 'table-striped no-white')"
+                :rowClassName="
+                    (record, index) => (index % 2 === 1 ? 'table-default no-white cursor-pointer' : 'table-striped no-white cursor-pointer')
+                "
                 class="ant-table-striped three-table"
+                :custom-row="customRow"
             >
                 <template #address="{ text, record }">
                     <div class="police-times" @click="handlePoliceDetail(record)">
@@ -20,11 +25,14 @@
                 </template>
             </a-table>
         </div>
+        <!--预警查看详情-->
+        <EarlyWarningDialog ref="earlyWarningRef"></EarlyWarningDialog>
     </div>
 </template>
 <script lang="ts" setup>
     import { onUnmounted, ref, watch } from 'vue';
     import PublicTitle from '/@/components/publicTitle.vue';
+    import EarlyWarningDialog from '/@/views/components/earlyWarningDialog.vue';
     import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
     import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
     import $bus from '/@/utils/bus.ts';
@@ -115,16 +123,45 @@
     const { refreshState } = useRefresh(PAGE_SWITCH, () => {
         // interval();
     });
+
+    function customRow(record = {}) {
+        return {
+            onClick: () => {
+                handlePoliceDetail(record);
+            },
+        };
+    }
+
+    const earlyWarningRef = ref(null);
+
+    /**
+     * 查看详情
+     */
+    function viewDetail() {
+        earlyWarningRef.value && earlyWarningRef.value.openDialog();
+    }
+
     onUnmounted(() => {
         clearInterval(timer.value);
     });
 </script>
 <style lang="less" scoped>
+    .right-text {
+        font-weight: 100;
+        cursor: pointer;
+        margin-right: 3px;
+        font-size: 18px;
+    }
+
     .inner-screen {
         width: 100%;
         height: calc(100% - 40px);
         margin: 20px 0;
 
+        .cursor-pointer {
+            cursor: pointer;
+        }
+
         .police-times {
             display: flex;
             align-items: center;
@@ -153,6 +190,7 @@
         :deep(.ant-table-tbody > tr > td) {
             border-bottom: none;
             padding: 6px 4px;
+            cursor: pointer;
         }
 
         :deep(.ant-table-tbody > tr.ant-table-placeholder:hover > td) {

src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue

@@ -9,8 +9,7 @@
         :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
     >
         <template #bodyCell="{ column, record, index, text }">
-            <template v-if="column.customRender && isFunction(column.customRender)">
-                {{ column.customRender({ column, record, index, text }) }}
+            <template v-if="column.customRender && isFunction(column.customRender)" v-html="column.customRender({ column, record, index, text })">
             </template>
             <slot v-else-if="column.slot" :name="column.slot" v-bind="{ column, record, index, text } || {}"></slot>
             <template v-else>

src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue

@@ -4,8 +4,9 @@
             <div class="user-info-modal" style="display: flex">
                 <div style="width: 23%; padding: 0 20px 20px" class="fff">
                     <div style="margin-bottom: 10px; font-weight: bold"> 员工姓名：{{ infoData?.username }}</div>
-                    <div style="margin-bottom: 10px; font-weight: bold"> 员工工号：{{ infoData?.workNo }} </div>
+                    <div style="margin-bottom: 10px; font-weight: bold"> 员工工号：{{ infoData?.workNo }}</div>
                     <div style="margin-bottom: 10px; font-weight: bold"> 工具编码：{{ infoData?.watchNo }}</div>
+                    <div style="margin-bottom: 10px; font-weight: bold"> 手机号码：{{ infoData?.phone }}</div>
                     <div style="margin-bottom: 10px; font-weight: bold"> 单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：{{ infoData?.unit }} </div>
                     <div style="margin-bottom: 10px; font-weight: bold">
                         部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：{{ infoData?.department }}

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -150,7 +150,10 @@
 
     function drawMarker(data: any) {
         const { lon, lat } = data;
-        if (!lon || !lat) return;
+        if (!lon || !lat) {
+            Map.clearMarker();
+            return;
+        }
         Map.createMarker(data);
     }
 </script>

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -129,16 +129,21 @@ export function useAlarmDetail() {
             value: '',
             key: 'realName',
         },
+        {
+            name: '部门名称',
+            value: '',
+            key: 'orgName',
+        },
+        {
+            name: '手机号码',
+            value: '',
+            key: 'phone',
+        },
         {
             name: '工具编码',
             value: '',
             key: 'watchNo',
         },
-        {
-            name: '单位名称',
-            value: '',
-            key: 'orgName2',
-        },
         {
             name: '位置',
             value: '',
@@ -154,9 +159,9 @@ export function useAlarmDetail() {
     ]);
     const detailRight = ref([
         {
-            name: '部门名称',
+            name: '单位名称',
             value: '',
-            key: 'orgName',
+            key: 'orgName2',
         },
         {
             name: '事件类型',
@@ -275,6 +280,13 @@ export const columns = [
         key: 'watchNo',
         ellipsis: true,
     },
+    {
+        title: '手机号码',
+        dataIndex: 'phone',
+        align: 'center',
+        key: 'phone',
+        ellipsis: true,
+    },
     {
         title: '心率（次/分）',
         dataIndex: 'heartRate',

src/views/components/dialogHooks.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue';
 
-export function useDialog({ title }) {
+export function useDialog({ title } = {}) {
     const visible = ref(false);
 
     function openDialog() {

src/views/components/earlyWarningDialog.vue

@@ -0,0 +1,85 @@
+<template>
+    <Dialog :openVis="visible" width="60%" title="预警详情" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <BasicTable
+                style="margin: 5px"
+                ref="registerTable"
+                class="table-container"
+                :class="[themeType]"
+                :key="visible"
+                :columns="columns"
+                :api="getEarlyWarningDetail"
+            ></BasicTable>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { h, ref, watch } from 'vue';
+    import { getEarlyWarningDetail } from '/@/components/body-d-left/left.api.ts';
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+
+    const emit = defineEmits(['close']);
+    const { visible, closeDialog, openDialog } = useDialog();
+    const registerTable = ref(null);
+    const props = defineProps({
+        title: String,
+    });
+    const { themeType } = useTheme();
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'userName',
+            key: 'userName',
+        },
+        {
+            title: '单位名称',
+            dataIndex: 'secondDepart',
+            key: 'secondDepart',
+        },
+        {
+            title: '部门名称',
+            dataIndex: 'thirdDepart',
+            key: 'thirdDepart',
+        },
+        {
+            title: '手机号码',
+            dataIndex: 'phone',
+            key: 'phone',
+        },
+        {
+            title: '事件类型',
+            dataIndex: 'eventType_dictText',
+            key: 'eventType_dictText',
+        },
+        {
+            title: '异常值',
+            dataIndex: 'dataValue',
+            key: 'dataValue',
+        },
+        {
+            title: '详细地址',
+            dataIndex: 'address',
+            key: 'address',
+            customRender: ({ record }) => {
+                return !record?.address ? h('div', { style: { color: 'red' } }, record?.gpsErrorMsg) : record?.address;
+            },
+            ellipsis: true,
+        },
+        {
+            title: '预警时间',
+            dataIndex: 'warnTime',
+            key: 'warnTime',
+        },
+    ];
+    watch(props, () => {
+        registerTable.value?.getRecords();
+    });
+    defineExpose({
+        openDialog,
+    });
+</script>
+
+<style scoped lang="less"></style>

src/views/components/emergencyDialog.vue

@@ -23,6 +23,10 @@
                     <span>部门：</span>
                     <span>{{ userInfo?.orgName }}</span>
                 </div>
+                <div class="con-item">
+                    <span>电话：</span>
+                    <span>{{ userInfo?.phone }}</span>
+                </div>
             </div>
             <div class="btn-box">
                 <a-button type="primary" @click="confirmHelp">确认</a-button>
@@ -48,6 +52,7 @@
         departName?: string;
         orgName?: string;
         type?: string;
+        phone?: string;
     }
 
     const userInfo: Ref<UserInfo> = ref({});