renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zk
2024-07-08 15:22:03 +08:00
parent b732e3ab64
commit e367d13c78
10 changed files with 166 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/left.api.ts
+3
View File
@@ -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
+5
View File
@@ -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
+40 -2
View File
@@ -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
+1 -2
View File
@@ -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
+2 -1
View File
@@ -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
+4 -1
View File
@@ -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
+19 -7
View File
@@ -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
+2 -2
View File
@@ -1,6 +1,6 @@
import { ref } from 'vue';
export function useDialog({ title }) {
export function useDialog({ title } = {}) {
const visible = ref(false);
function openDialog() {
@@ -17,4 +17,4 @@ export function useDialog({ title }) {
openDialog,
closeDialog,
};
}
}
src/views/components/earlyWarningDialog.vue
+85
View File
@@ -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
+5
View File
@@ -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({});