接口
This commit is contained in:
zhaotiantian
@@ -1,318 +1,322 @@
|
||||
<template>
|
||||
<div class="terminal-container">
|
||||
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog"/>
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||
<span>{{item.name}}</span>
|
||||
<span>{{item.abnormal}}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{item.time}}</span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
</div>
|
||||
<div class="terminal-container">
|
||||
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.abnormal }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item.time }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
<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.name }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>二级单位：</span>
|
||||
<span>{{ userInfo.unit }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>手机号码：</span>
|
||||
<span>{{ userInfo.iphone }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>异常事件：</span>
|
||||
<span>{{ userInfo.abnormal }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生时间：</span>
|
||||
<span>{{ userInfo.time }}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生地点：</span>
|
||||
<span>{{ userInfo.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</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.name}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>二级单位：</span>
|
||||
<span>{{userInfo.unit}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>手机号码：</span>
|
||||
<span>{{userInfo.iphone}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>异常事件：</span>
|
||||
<span>{{userInfo.abnormal}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生时间：</span>
|
||||
<span>{{userInfo.time}}</span>
|
||||
</div>
|
||||
<div class="con-item">
|
||||
<span>发生地点：</span>
|
||||
<span>{{userInfo.address}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PublicTitle from "../publicTitle.vue";
|
||||
import Dialog from '../dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
const policeLists = ref([
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
}
|
||||
])
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
name:'王苗',
|
||||
unit:'长庆油田',
|
||||
iphone:'1897263745',
|
||||
abnormal:'体温异常',
|
||||
time:'2023-11-23 16:23',
|
||||
address:'陕西省西安市'
|
||||
});
|
||||
|
||||
const dataSource=ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns= ref([
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
align:'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '单位信息',
|
||||
dataIndex: 'age',
|
||||
align:'center',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address',
|
||||
align:'center',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address1',
|
||||
align:'center',
|
||||
key: 'address1',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address2',
|
||||
align:'center',
|
||||
key: 'address2',
|
||||
}
|
||||
import { ref } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import Dialog from '../dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
const policeLists = ref([
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
]);
|
||||
function handleDialog(){
|
||||
open.value = true
|
||||
}
|
||||
function handleClose(){
|
||||
open.value = false
|
||||
}
|
||||
function handlePolice(){
|
||||
openInfor.value = true
|
||||
}
|
||||
function handlePoliceClose(){
|
||||
openInfor.value = false
|
||||
}
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
name: '王苗',
|
||||
unit: '长庆油田',
|
||||
iphone: '1897263745',
|
||||
abnormal: '体温异常',
|
||||
time: '2023-11-23 16:23',
|
||||
address: '陕西省西安市',
|
||||
});
|
||||
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '单位信息',
|
||||
dataIndex: 'age',
|
||||
align: 'center',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address',
|
||||
align: 'center',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'address1',
|
||||
align: 'center',
|
||||
key: 'address1',
|
||||
},
|
||||
{
|
||||
title: '异常事件',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '异常值',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生时间',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
{
|
||||
title: '发生地点',
|
||||
dataIndex: 'address2',
|
||||
align: 'center',
|
||||
key: 'address2',
|
||||
},
|
||||
]);
|
||||
function handleDialog() {
|
||||
open.value = true;
|
||||
}
|
||||
function handleClose() {
|
||||
open.value = false;
|
||||
}
|
||||
function handlePolice() {
|
||||
openInfor.value = true;
|
||||
}
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.scroll {
|
||||
width: 90%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
span{
|
||||
color:#ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.time-icon {
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.terminal-icon {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url("../../assets/images/terminal.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor:pointer;
|
||||
}
|
||||
justify-content: center;
|
||||
.scroll {
|
||||
width: 90%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.terminal-icon {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('../../assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-con{
|
||||
background-color: #00152B;
|
||||
border: 1px solid #129BFF;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.dialog-con {
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user