281 lines
8.4 KiB
Vue
281 lines
8.4 KiB
Vue
<template>
|
||
<div class="terminal-container">
|
||
<public-title title="健康终端报警">
|
||
<template #right>
|
||
<span class="right-text" @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" 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="open" width="65%" title="健康终端报警列表" @close="handleClose">-->
|
||
<!-- <template #container>-->
|
||
<!-- <div class="dialog-con">-->
|
||
<!-- <a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />-->
|
||
<!-- </div>-->
|
||
<!-- </template>-->
|
||
<!-- </Dialog>-->
|
||
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
|
||
<template #container>
|
||
<div class="police-con">
|
||
<div class="con-item">
|
||
<span>姓名：</span>
|
||
<span>{{ userInfo?.realName }}</span>
|
||
</div>
|
||
<div class="con-item">
|
||
<span>二级单位：</span>
|
||
<span>{{ userInfo?.orgName1 }}</span>
|
||
</div>
|
||
<div class="con-item">
|
||
<span>手机号码：</span>
|
||
<span>{{ userInfo?.phone }}</span>
|
||
</div>
|
||
<div class="con-item">
|
||
<span>异常事件：</span>
|
||
<span>{{ userInfo?.eventType_dictText }}</span>
|
||
</div>
|
||
<div class="con-item">
|
||
<span>发生时间：</span>
|
||
<span>{{ userInfo?.warnTime }}</span>
|
||
</div>
|
||
<div class="con-item">
|
||
<span>发生地点：</span>
|
||
<span>{{ userInfo?.address }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import $bus from '/@/utils/bus.ts';
|
||
import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||
import PublicTitle from '/@/components/publicTitle.vue';
|
||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||
|
||
const router = useRouter();
|
||
const classOption = ref({
|
||
step: 0.3, // 速度
|
||
});
|
||
const open = ref<boolean>(false);
|
||
const openInfor = ref<boolean>(false);
|
||
const userInfo = ref({
|
||
realName: '',
|
||
orgName1: '',
|
||
phone: '',
|
||
eventType_dictText: '',
|
||
warnTime: '',
|
||
address: '',
|
||
});
|
||
|
||
const dataSource = ref([
|
||
{
|
||
key: '1',
|
||
name: '胡彦斌',
|
||
age: 32,
|
||
address: '西湖区湖底公园1号',
|
||
},
|
||
]);
|
||
|
||
/**
|
||
* @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;
|
||
}
|
||
|
||
onMounted(() => {
|
||
getScrollList();
|
||
});
|
||
|
||
/**
|
||
* @desc 终端报警
|
||
* */
|
||
const scrollList = ref([]);
|
||
|
||
async function getScrollList() {
|
||
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
|
||
if (code == 200) {
|
||
scrollList.value = result.records;
|
||
}
|
||
}
|
||
|
||
function sendPosition(item) {
|
||
let { lon, lat } = item;
|
||
if (lon && lat) {
|
||
Map.createMarker(item, () => {
|
||
handlePolice(item);
|
||
});
|
||
}
|
||
}
|
||
|
||
function viewDetail() {
|
||
router.push({ path: '/secondScreen' });
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
.right-text {
|
||
font-weight: 100;
|
||
cursor: pointer;
|
||
margin-right: 3px;
|
||
}
|
||
|
||
.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;
|
||
|
||
.fixed-width {
|
||
display: inline-flex;
|
||
width: 100px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
span {
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.time-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.terminal-icon {
|
||
margin-left: 15px;
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
background: url('/@/assets/images/terminal.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.position {
|
||
margin-left: 5px;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: url('/@/assets/img/position.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.police-con {
|
||
color: #ffffff;
|
||
background-color: #00152b;
|
||
border: 1px solid #129bff;
|
||
padding: 2% 0 2% 5%;
|
||
|
||
.con-item {
|
||
padding: 1.3% 0;
|
||
|
||
span:nth-child(1) {
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
width: 20%;
|
||
text-align: right;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
padding-left: 2%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.dialog-con {
|
||
background-color: #00152b;
|
||
border: 1px solid #129bff;
|
||
/*
|
||
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> |