270 lines
8.5 KiB
Vue
270 lines
8.5 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">
|
||
<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>
|
||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||
<template #container>
|
||
<div class="police-con" :class="[themeType]">
|
||
<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, ref } 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 } 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 { message } from 'ant-design-vue';
|
||
|
||
const props = defineProps({
|
||
setting: Object,
|
||
});
|
||
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: '',
|
||
});
|
||
onMounted(() => {
|
||
getScrollList();
|
||
});
|
||
|
||
/**
|
||
* @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([]);
|
||
|
||
async function getScrollList() {
|
||
try {
|
||
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1, orgCode: props.setting?.orgCode });
|
||
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">
|
||
.right-text {
|
||
font-weight: 100;
|
||
cursor: pointer;
|
||
margin-right: 3px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.right-text.light {
|
||
color: #667ecc;
|
||
}
|
||
|
||
.right-text:hover {
|
||
color: #129bff;
|
||
}
|
||
|
||
.inner {
|
||
height: calc(100% - 40px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.scroll {
|
||
width: 98%;
|
||
height: 88%;
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
</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>-->
|