417 lines
14 KiB
Vue
417 lines
14 KiB
Vue
<template>
|
||
<div class="terminal-container common-card" :class="[themeType]">
|
||
<public-title title="健康终端报警" :themeType="themeType">
|
||
<template #right>
|
||
<span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
|
||
</template>
|
||
</public-title>
|
||
<div class="inner">
|
||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||
<div
|
||
class="item right-top-item"
|
||
:class="themeType"
|
||
v-for="(item, i) in scrollList"
|
||
:key="i"
|
||
:style="{ padding: props.setInter ? '10px 0' : '3% 0' }"
|
||
>
|
||
<span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
|
||
<span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
|
||
<div class="time-icon">
|
||
<span>{{ item?.warnTime }}</span>
|
||
<span class="terminal-icon" @click="handlePolice(item)" title="健康报警员工信息"></span>
|
||
<span class="position" @click="sendPosition(item)" title="员工定位"></span>
|
||
</div>
|
||
</div>
|
||
</vue3-seamless-scroll>
|
||
</div>
|
||
<div class="bottom-d" v-if="showStatistics">
|
||
<div>
|
||
<div>
|
||
日累计
|
||
<span>{{ dayInfo?.dayCount || 0 }}</span>
|
||
次
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
周累计
|
||
<span>{{ dayInfo?.weekCount || 0 }}</span>
|
||
次
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
月累计
|
||
<span>{{ dayInfo?.monthCount || 0 }}</span>
|
||
次
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||
<template #container>
|
||
<div class="police-con" :class="[themeType]">
|
||
<Row style="font-size: 14px; font-weight: bold"> 个人信息 </Row>
|
||
<Row>
|
||
<Col :span="8">姓名：{{ userInfo?.realName || '--' }}</Col>
|
||
<Col :span="8">性别：{{ userInfo?.sex_dictText || '--' }}</Col>
|
||
<Col :span="8">年龄：{{ userInfo?.age || '--' }}</Col>
|
||
</Row>
|
||
<Row>
|
||
<Col :span="8">二级单位：{{ userInfo?.orgName2 || '--' }}</Col>
|
||
<Col :span="8">部门：{{ userInfo?.orgName || '--' }}</Col>
|
||
<Col :span="8">手机号码：{{ userInfo?.phone || '--' }}</Col>
|
||
</Row>
|
||
<Row style="font-size: 14px; font-weight: bold"> 健康信息 </Row>
|
||
<Row> 异常事件：{{ userInfo?.eventType_dictText || '--' }} </Row>
|
||
<Row>
|
||
<Col :span="8">异常值：{{ userInfo?.dataValue || '--' }}</Col>
|
||
<Col :span="16">发生时间：{{ userInfo?.warnTime || '--' }}</Col>
|
||
</Row>
|
||
<div style="display: flex">
|
||
<div style="width: 67px">发生地点：</div>
|
||
<div style="width: calc(100% - 67px); display: flex; overflow-wrap: anywhere">
|
||
{{ userInfo?.address || userInfo?.gpsErrorMsg || '--' }}
|
||
</div>
|
||
</div>
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>姓名：</div>-->
|
||
<!-- <div>{{ userInfo?.realName }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>二级单位：</div>-->
|
||
<!-- <div>{{ userInfo?.orgName1 }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>手机号码：</div>-->
|
||
<!-- <div>{{ userInfo?.phone }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>异常事件：</div>-->
|
||
<!-- <div>{{ userInfo?.eventType_dictText }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>异常值：</div>-->
|
||
<!-- <div>{{ userInfo?.dataValue }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>发生时间：</div>-->
|
||
<!-- <div>{{ userInfo?.warnTime }}</div>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="con-item">-->
|
||
<!-- <div>发生地点：</div>-->
|
||
<!-- <div v-if="userInfo?.address">{{ userInfo?.address }}</div>-->
|
||
<!-- <div style="color: #eb3636" v-else>{{ userInfo?.gpsErrorMsg }}</div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import PublicTitle from '/@/components/publicTitle.vue';
|
||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||
import { getMonitorList, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
|
||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||
import { DataType } from '/@/utils/settings.ts';
|
||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||
import { Col, message, Row } from 'ant-design-vue';
|
||
import { useUserStore } from '/@/store/modules/user.ts';
|
||
import dayjs from 'dayjs';
|
||
|
||
const props = defineProps({
|
||
setting: Object,
|
||
setInter: {
|
||
type: Boolean,
|
||
default: () => false,
|
||
},
|
||
timeInterval: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
showStatistics: {
|
||
type: Boolean,
|
||
default: () => false,
|
||
},
|
||
socketData: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
});
|
||
const { themeType } = useTheme();
|
||
const emit = defineEmits(['emit-view-detail']);
|
||
const router = useRouter();
|
||
const { setSession, getSession } = useSession();
|
||
const { RIGHT_KEY1_NEW } = caching;
|
||
|
||
const classOption = ref({
|
||
step: 0.3, // 速度
|
||
});
|
||
const openInfor = ref<boolean>(false); //弹窗显示
|
||
const userInfo = ref({
|
||
realName: '',
|
||
orgName1: '',
|
||
phone: '',
|
||
eventType_dictText: '',
|
||
warnTime: '',
|
||
address: '',
|
||
dataValue: '',
|
||
});
|
||
const dayInfo = ref<any>({});
|
||
onMounted(() => {
|
||
getScrollList();
|
||
// 如果为庆阳应急中心，需调用统计接口
|
||
if (props.setInter) {
|
||
interval.value = setInterval(() => {
|
||
getScrollList();
|
||
}, 30000);
|
||
getStatic();
|
||
}
|
||
});
|
||
|
||
function getStatic() {
|
||
monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
|
||
.then((res: any) => {
|
||
if (res.code === 200) {
|
||
dayInfo.value = res?.result;
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
console.log(e);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @desc open员工信息
|
||
*/
|
||
function handlePolice(item) {
|
||
userInfo.value = item;
|
||
openInfor.value = true;
|
||
classOption.value.step = 0;
|
||
}
|
||
|
||
/**
|
||
* @desc close员工信息
|
||
*/
|
||
function handlePoliceClose() {
|
||
openInfor.value = false;
|
||
classOption.value.step = 0.3;
|
||
}
|
||
/**
|
||
* @desc 终端报警
|
||
* */
|
||
const scrollList = ref([]);
|
||
const userStore = useUserStore();
|
||
|
||
const interval = ref<any>(null);
|
||
const nowDate = ref(dayjs());
|
||
|
||
onUnmounted(() => {
|
||
interval.value && clearInterval(interval.value);
|
||
});
|
||
|
||
watch(
|
||
() => props.socketData,
|
||
(v) => {
|
||
console.log(v);
|
||
if (props.setInter) {
|
||
getStatic();
|
||
}
|
||
getScrollList();
|
||
}
|
||
);
|
||
async function getScrollList() {
|
||
try {
|
||
let orgCodeList = userStore.getCenterInfo?.serviceScope;
|
||
let codeList = '';
|
||
if (orgCodeList) {
|
||
codeList = orgCodeList + ',' + props.setting?.orgCode;
|
||
} else {
|
||
codeList = props.setting?.orgCode;
|
||
}
|
||
// 如果为庆阳应急中心，需要拼上当天的日期
|
||
const { code, result } = await getMonitorList({
|
||
pageSize: 10,
|
||
pageNo: 1,
|
||
orgCodeList: codeList,
|
||
...(props.setInter ? props.timeInterval : {}),
|
||
});
|
||
if (code == 200) {
|
||
setSession(RIGHT_KEY1_NEW, JSON.stringify(result.records));
|
||
scrollList.value = result.records;
|
||
}
|
||
} catch {
|
||
scrollList.value = JSON.parse(getSession(RIGHT_KEY1_NEW));
|
||
}
|
||
}
|
||
|
||
function sendPosition(item) {
|
||
let { lon, lat } = item;
|
||
if (lon && lat) {
|
||
Map.createMarker(item, () => {
|
||
handlePolice(item);
|
||
});
|
||
} else {
|
||
message.warn('暂无经纬度信息！');
|
||
}
|
||
}
|
||
|
||
function viewDetail() {
|
||
emit('emit-view-detail');
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
.terminal-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.right-text {
|
||
font-weight: 100;
|
||
cursor: pointer;
|
||
margin-right: 3px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.right-text.light {
|
||
color: #667ecc;
|
||
}
|
||
|
||
.right-text:hover {
|
||
color: #129bff;
|
||
}
|
||
|
||
.inner {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
//height: calc(100% - 40px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px 0;
|
||
|
||
.scroll {
|
||
width: 98%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 3% 0;
|
||
|
||
.time-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.terminal-icon {
|
||
margin-left: 15px;
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.position {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-size: 100% 100%;
|
||
margin-left: 5px;
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.police-con {
|
||
padding: 2% 0 2% 5%;
|
||
|
||
.con-item {
|
||
padding: 1.3% 0;
|
||
display: flex;
|
||
|
||
div:nth-child(1) {
|
||
font-weight: bold;
|
||
width: 100px;
|
||
text-align: right;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
width: calc(100% - 100px);
|
||
}
|
||
}
|
||
}
|
||
.ant-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.bottom-d {
|
||
display: flex;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
justify-content: space-around;
|
||
color: #ffffff;
|
||
padding: 5px 0;
|
||
border-radius: 5px;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
|
||
span {
|
||
font-size: 28px !important;
|
||
padding: 0 3px;
|
||
}
|
||
}
|
||
</style>
|
||
<!--<style lang="less">-->
|
||
<!-- .dialog-con {-->
|
||
<!-- background-color: #00152b;-->
|
||
<!-- // antd表格样式-->
|
||
<!-- .ant-table-thead > tr > th {-->
|
||
<!-- //border-bottom: 1px solid #1e73c2 !important;-->
|
||
<!-- }-->
|
||
|
||
<!-- .ant-table-body {-->
|
||
<!-- background-color: #00152b !important;-->
|
||
<!-- }-->
|
||
|
||
<!-- .ant-modal-header {-->
|
||
<!-- border-bottom: none !important;-->
|
||
<!-- }-->
|
||
|
||
<!-- .ant-table-tbody > tr > td {-->
|
||
<!-- border-bottom: 1px solid #1e73c2 !important;-->
|
||
<!-- background-color: #00152b !important;-->
|
||
<!-- color: #ffffff !important;-->
|
||
<!-- }-->
|
||
|
||
<!-- .ant-table-tbody > tr.ant-table-row:hover > td,-->
|
||
<!-- .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
|
||
<!-- .ant-table-thead > tr > th {-->
|
||
<!-- background-color: #00152b !important;-->
|
||
<!-- color: #ffffff !important;-->
|
||
<!-- }-->
|
||
|
||
<!-- .ant-table-cell-scrollbar {-->
|
||
<!-- box-shadow: none !important;-->
|
||
<!-- }-->
|
||
|
||
<!-- /*-->
|
||
<!--表格滚动条-->
|
||
<!--*/-->
|
||
|
||
<!-- .ant-table-body::-webkit-scrollbar-thumb {-->
|
||
<!-- border: 4px solid rgba(0, 0, 0, 0);-->
|
||
<!-- height: 6px;-->
|
||
<!-- border-radius: 25px;-->
|
||
<!-- background-clip: padding-box;-->
|
||
<!-- background-color: rgba(30, 115, 194, 0.3);-->
|
||
<!-- }-->
|
||
<!-- }-->
|
||
<!--</style>-->
|