终端弹窗
This commit is contained in:
zhaotiantian
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@@ -1,9 +1,9 @@
|
||||
.type-time {
|
||||
text-align: right;
|
||||
padding-right: 4%;
|
||||
padding-top: 5%;
|
||||
font-size: 18px;
|
||||
|
||||
padding-top: 3%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
span {
|
||||
padding: 0 2%;
|
||||
cursor: pointer;
|
||||
@@ -17,10 +17,10 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 70%;
|
||||
left: 8px;
|
||||
bottom: -14px;
|
||||
height: 8px;
|
||||
width: 72%;
|
||||
left: 6px;
|
||||
bottom: -12px;
|
||||
height: 6px;
|
||||
background: url("../images/light.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@@ -48,4 +48,26 @@
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
/*
|
||||
antd表格样式
|
||||
*/
|
||||
.ant-table-thead > tr > th{
|
||||
border-bottom: 1px solid #1e73c2!important;
|
||||
}
|
||||
.ant-table-body{
|
||||
background-color: #00152B;
|
||||
}
|
||||
.ant-modal-header{
|
||||
border-bottom: none!important;
|
||||
}
|
||||
.ant-table-tbody > tr > td{
|
||||
border-bottom: 1px solid #1e73c2!important;
|
||||
background-color: #00152B;
|
||||
color: #ffffff;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
Button,
|
||||
Radio,
|
||||
Modal,
|
||||
Table
|
||||
} from 'ant-design-vue';
|
||||
|
||||
export default function registerGlobComp(app: App) {
|
||||
@@ -13,4 +14,5 @@ export default function registerGlobComp(app: App) {
|
||||
.use(Input)
|
||||
.use(Radio)
|
||||
.use(Modal)
|
||||
.use(Table)
|
||||
}
|
||||
@@ -68,7 +68,7 @@ function handleSelect(index:number){
|
||||
display: grid;
|
||||
align-items: start;
|
||||
.server-item{
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
|
||||
@@ -77,12 +77,11 @@ function handleSelect(index:number){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:nth-child(1){
|
||||
font-size: 28px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
span:nth-child(2){
|
||||
padding-top: 6%;
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<div>
|
||||
<public-title title="主诉分类"/>
|
||||
<div class="inner">
|
||||
<div class="">
|
||||
<div class="title">
|
||||
<div class="type-time">
|
||||
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
|
||||
</div>
|
||||
<div>全部数据</div>
|
||||
<div class="type-all">全部数据</div>
|
||||
</div>
|
||||
<div class="line-chart" ref="chiefChart"></div>
|
||||
</div>
|
||||
@@ -47,14 +47,14 @@ function initChart(xData,ydata){
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize:16,
|
||||
fontSize:14,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize:16,
|
||||
fontSize:14,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
@@ -90,6 +90,13 @@ function initChart(xData,ydata){
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
.title{
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
.type-all{
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.line-chart{
|
||||
margin: 0 auto;
|
||||
width: 96%;
|
||||
|
||||
@@ -8,14 +8,46 @@
|
||||
<span>{{item.abnormal}}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{item.time}}</span>
|
||||
<span class="terminal-icon"></span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
<Dialog :openVis="open" width="40%" title="健康终端报警列表" @close="handleClose">
|
||||
<Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
|
||||
<template #container>
|
||||
<div>34534</div>
|
||||
<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>
|
||||
@@ -58,13 +90,172 @@
|
||||
}
|
||||
])
|
||||
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 {
|
||||
@@ -80,7 +271,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 0;
|
||||
padding: 3% 0;
|
||||
span{
|
||||
color:#ffffff;
|
||||
font-size: 16px;
|
||||
@@ -96,8 +287,32 @@
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -2,7 +2,10 @@
|
||||
<div>
|
||||
<public-title title="基层医疗点远程会诊"/>
|
||||
<div class="inner">
|
||||
|
||||
<div class="inner-item"></div>
|
||||
<div class="inner-item"></div>
|
||||
<div class="inner-item"></div>
|
||||
<div class="inner-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -11,8 +14,33 @@
|
||||
import PublicTitle from "../publicTitle.vue";
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
.inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-content: space-around;
|
||||
padding-top: 2%;
|
||||
.inner-item{
|
||||
width: 48%;
|
||||
height: 46%;
|
||||
}
|
||||
.inner-item:nth-child(1){
|
||||
background: url("../../assets/images/doctors1.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(2){
|
||||
background: url("../../assets/images/doctors2.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(3){
|
||||
background: url("../../assets/images/doctors3.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.inner-item:nth-child(4){
|
||||
background: url("../../assets/images/doctors4.png")no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -29,7 +29,7 @@ function initChart(xData,ydata){
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 32,
|
||||
fontSize: 28,
|
||||
},
|
||||
},
|
||||
color:['#0098FA','#0CD9B5','#3B72AD'],
|
||||
@@ -42,7 +42,7 @@ function initChart(xData,ydata){
|
||||
icon: 'circle',
|
||||
textStyle:{
|
||||
color:'#ffffff',
|
||||
fontSize:18,
|
||||
fontSize:16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
||||
@@ -31,24 +31,20 @@
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ant-modal-header{
|
||||
position: relative;
|
||||
background: linear-gradient(270deg, rgba(106,112,124,0.4) 0%, rgba(106,112,124,0) 70%, rgba(106,112,124,0) 100%);
|
||||
opacity: 1;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(270deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 7px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #45A2FF;
|
||||
}
|
||||
}
|
||||
.ant-modal-title{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: url("../../assets/images/dialog.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff!important;
|
||||
padding-left: 2%;
|
||||
}
|
||||
.ant-modal-header{
|
||||
padding: 0!important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.ant-modal-header,.ant-modal-content{
|
||||
background-color: transparent!important;
|
||||
@@ -56,8 +52,14 @@
|
||||
.ant-modal-body{
|
||||
padding: 0!important;
|
||||
}
|
||||
:deep(.anticon){
|
||||
color: #999999;
|
||||
.ant-modal-close-x,.anticon {
|
||||
color: #999999!important;
|
||||
}
|
||||
.ant-modal-footer{
|
||||
border-top: none!important;
|
||||
}
|
||||
.ant-modal-wrap{
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user