mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2026-06-14 18:11:47 +08:00
远程连接
This commit is contained in:
gaofy
parent
21b6f6a32e
commit
923d34feb8
|
|
@ -23,6 +23,9 @@
|
|||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.el-button:not(.el-button--primary) {
|
||||
color: $main-color;
|
||||
}
|
||||
.el-button.is-link {
|
||||
color: $main-color;
|
||||
&:hover,
|
||||
|
|
@ -65,6 +68,9 @@
|
|||
|
||||
.el-dialog {
|
||||
border-radius: 20px;
|
||||
&.header-none .el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
.el-dialog__header {
|
||||
padding: 30px 30px 0 30px;
|
||||
.el-dialog__headerbtn {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
}
|
||||
$main-color: #006080;
|
||||
$border-color: #EBEEF5;
|
||||
$border1-color: #E4E7ED;
|
||||
$border2-color: #DCDFE6;
|
||||
$text-color: #303133;
|
||||
$text1-color: #606266;
|
||||
$text2-color: #909399;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
|
@ -15,6 +15,8 @@ import './assets/font/iconfont.css';
|
|||
import '@/assets/css/custom-element.scss'
|
||||
import '@/assets/css/animastore.css'
|
||||
|
||||
// import '@/utils/debugger'
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(main)
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,20 @@ const router = createRouter({
|
|||
{
|
||||
path: '/remote-manage',
|
||||
name: '远程管理',
|
||||
redirect: '/remote-manage/remote-manage',
|
||||
component: () => import('@/views/remote-manage/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/remote-manage/remote-manage',
|
||||
name: '远程管理',
|
||||
component: () => import('@/views/remote-manage/remote-manage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/remote-manage/remote-control',
|
||||
name: '远程控制',
|
||||
component: () => import('@/views/remote-manage/remote-control.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system-manage',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useRemoteStore = defineStore('remote', {
|
||||
state: () => {
|
||||
return {
|
||||
currentRemote: {
|
||||
|
||||
} as any
|
||||
}
|
||||
},
|
||||
// 也可以这样定义
|
||||
// state: () => ({ count: 0 })
|
||||
actions: {
|
||||
getCurrentRemote() {
|
||||
return this.currentRemote
|
||||
},
|
||||
setCurrentRemote(e: object) {
|
||||
this.currentRemote = e
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
// stores/counter.js
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useLoginStore = defineStore('login', {
|
||||
|
|
@ -8,6 +7,12 @@ export const useLoginStore = defineStore('login', {
|
|||
isLogin: true,
|
||||
account: 'admin',
|
||||
name: '管理员',
|
||||
/**
|
||||
* 公司： 后台管理
|
||||
* 医院高级管理员： 首页、权限管理、患者管理、远程管理、日志管理
|
||||
* 医院中级管理员： 首页、患者管理、远程管理
|
||||
* 医院普通用户： 首页、患者管理
|
||||
*/
|
||||
permissions: '超级管理员',
|
||||
hospital: '北京第一医院'
|
||||
} as any
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
setInterval(() => {
|
||||
debugger
|
||||
}, 1000)
|
||||
|
|
@ -1,4 +1,14 @@
|
|||
export interface MenuItem {
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
|
||||
export interface RemoteItem{
|
||||
isRemote: boolean
|
||||
dataAlarm: boolean
|
||||
title: string
|
||||
serverUser: string
|
||||
patientName: string
|
||||
patientCode: string
|
||||
index?: number
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<RouterView/>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div class="message-part">
|
||||
<div class="title">消息通知</div>
|
||||
<div class="content">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
|
||||
:class="{ 'alarm': item.state === '连接失败' }">
|
||||
{{ item.title + ' ' + item.state }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
|
||||
interface ActivitiesItem {
|
||||
time: Date
|
||||
title: string
|
||||
state: string
|
||||
}
|
||||
|
||||
const activities: any = ref([] as Array<ActivitiesItem>)
|
||||
|
||||
defineExpose({
|
||||
setData,
|
||||
})
|
||||
|
||||
function setData(e: ActivitiesItem) {
|
||||
activities.value.push(e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.message-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
margin-top: 40px;
|
||||
padding: 0 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-timeline-item) {
|
||||
color: $main-color;
|
||||
|
||||
.el-timeline-item__content,
|
||||
.el-timeline-item__timestamp {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
color: red;
|
||||
.el-timeline-item__node {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<el-dialog class="header-none" v-model="dialogVisible" :width="700" :show-close="false">
|
||||
<div class="content-box">
|
||||
<img src="@/assets/imgs/remote/remote_bck.png">
|
||||
<div class="info">
|
||||
<h3>连接云服务器</h3>
|
||||
<br>
|
||||
<p>云服务器连接状态：{{ patientInfo.isRemote ? '已连接' : '未连接' }}</p>
|
||||
<p>输入用户名：{{ patientInfo.serverUser }}</p>
|
||||
<p>密码：*********</p>
|
||||
<br>
|
||||
<p class="input-box"><span>输入病人姓名：</span><el-input v-model="patientInfo.patientName"></el-input></p>
|
||||
<p class="input-box"><span>输入病人身份证号：</span><el-input v-model="patientInfo.patientCode"></el-input></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<el-button class="f18" type="primary" @click="confirmRemote">确定连接</el-button>
|
||||
<el-button class="f18" @click="breakRemote">断开连接</el-button>
|
||||
<el-button class="f18" @click="dialogVisible = false">返回</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store';
|
||||
import type { RemoteItem } from '@/utils/public-interface';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const emit = defineEmits(['confirmRemote', 'errorRemote', 'breakRemote'])
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const patientInfo = ref({} as RemoteItem)
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
})
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
function open(e: RemoteItem) {
|
||||
if(useRemoteStore().getCurrentRemote().index === e.index) {
|
||||
router.push('/remote-manage/remote-control')
|
||||
return
|
||||
}
|
||||
patientInfo.value = e
|
||||
dialogVisible.value = true
|
||||
}
|
||||
function close() {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const confirmRemote = () => {
|
||||
if(patientInfo.value.patientCode) {
|
||||
ElMessage.success('连接成功！')
|
||||
emit('confirmRemote', patientInfo.value)
|
||||
close()
|
||||
}else{
|
||||
ElMessage.error('连接失败！')
|
||||
emit('errorRemote', patientInfo.value)
|
||||
}
|
||||
}
|
||||
const breakRemote = () => {
|
||||
ElMessage.info('连接已断开！')
|
||||
emit('breakRemote', patientInfo.value)
|
||||
close()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&>img {
|
||||
width: 260px;
|
||||
border: 1px solid #C77000;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.info {
|
||||
width: calc(100% - 290px);
|
||||
color: $main-color;
|
||||
line-height: 2;
|
||||
font-weight: 600;
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
p {
|
||||
font-size: 15px;
|
||||
}
|
||||
.input-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&>span {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
:deep(.el-input) {
|
||||
border-bottom: 1px solid $text3-color;
|
||||
.el-input__wrapper {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
input {
|
||||
height: 20px;
|
||||
font-size: 15px;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
.el-button {
|
||||
font-weight: 600;
|
||||
padding: 15px 50px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<div class="remote-part">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="content" :class="{'is-total': isRemote}">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ patientInfo.name }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ patientInfo.code }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.BIS < 40 || patientInfo.BIS > 60}">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.SBP < 90 || patientInfo.SBP > 120}">
|
||||
<span class="label">SBP</span>
|
||||
<span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">SPO2</span>
|
||||
<span class="value">{{ patientInfo.SPO2 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<img src="@/assets/imgs/main_body_intact.png">
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">手术时间</span>
|
||||
<span class="input-value">{{ patientInfo.time && dateFormater('yyyy-MM-dd HH:mm:ss', patientInfo.time) }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">手术状态</span>
|
||||
<span class="tag-value" :class="{'normal': !patientInfo.state}">正常</span>
|
||||
<span class="tag-value" :class="{'alarm': patientInfo.state}">异常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.DBP < 60 || patientInfo.DBP > 90}">
|
||||
<span class="label">DBP</span>
|
||||
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.HR < 50 || patientInfo.HR > 80}">
|
||||
<span class="label">HR</span>
|
||||
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">TEMP</span>
|
||||
<span class="value">{{ patientInfo.TEMP }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store';
|
||||
|
||||
interface PatientInfoItem {
|
||||
name: string // 病人名称
|
||||
code: string // 住院号
|
||||
time: Date // 手术时间
|
||||
state: boolean // 手术状态 false 正常 true 异常
|
||||
BIS: number
|
||||
SBP: number
|
||||
SPO2: number
|
||||
DBP: number
|
||||
HR: number
|
||||
TEMP: number
|
||||
}
|
||||
|
||||
const title = ref('远程控制')
|
||||
const isRemote = ref(false) // 连接状态
|
||||
const patientInfo = ref({} as PatientInfoItem)
|
||||
|
||||
initData(useRemoteStore().getCurrentRemote())
|
||||
|
||||
defineExpose({
|
||||
initData
|
||||
})
|
||||
|
||||
function initData(e?: any) {
|
||||
const obj = e || {}
|
||||
title.value = e.title
|
||||
isRemote.value = e.isRemote
|
||||
patientInfo.value.state = e.dataAlarm
|
||||
patientInfo.value.name = obj.patientName || ''
|
||||
patientInfo.value.code = 'XXXXXX'
|
||||
patientInfo.value.time = new Date()
|
||||
patientInfo.value.BIS = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.SBP = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.SPO2 = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.DBP = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.HR = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.TEMP = Math.ceil(Math.random() * 100)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.remote-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.common-box {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
.left-box {
|
||||
@extend .common-box;
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
.center-box {
|
||||
@extend .common-box;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
@extend .common-box;
|
||||
.label {
|
||||
background: #f8b300;
|
||||
}
|
||||
}
|
||||
.row-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.label {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.info-box, .row-item .value {
|
||||
display: none;
|
||||
}
|
||||
&.is-total {
|
||||
.info-box, .row-item .value {
|
||||
display: block;
|
||||
}
|
||||
.label {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
.value {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
.unit {
|
||||
font-size: 16px;
|
||||
font-family: 400;
|
||||
}
|
||||
}
|
||||
.right-box .value {
|
||||
color: #f8b300;
|
||||
border-color: #f8b300;
|
||||
}
|
||||
.row-item.alarm {
|
||||
.label {
|
||||
background: red;
|
||||
}
|
||||
.value {
|
||||
color: red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
.info-box {
|
||||
width: 100%;
|
||||
.row-item {
|
||||
padding: 10px 0;
|
||||
height: 40px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.label {
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
color: $main-color;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
.input-value {
|
||||
width: 100%;
|
||||
height: 21px;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
color: $main-color;
|
||||
border-bottom: 1px solid $border2-color;
|
||||
}
|
||||
.tag-value {
|
||||
margin-left: 30px;
|
||||
padding: 0 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
background: $border2-color;
|
||||
border-radius: 8px;
|
||||
&.normal {
|
||||
background: $main-color;
|
||||
}
|
||||
&.alarm {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,910 @@
|
|||
<template>
|
||||
<div class="remote-box" id="screenBox">
|
||||
<div class="main-box">
|
||||
<div class="left-box">
|
||||
<h3>{{ useRemoteStore().getCurrentRemote().title }}</h3>
|
||||
<chart-line ref="chartDom1" class="chart-line" :names="['BIS', 'HR']"
|
||||
:chartData="featureTable"></chart-line>
|
||||
<chart-line ref="chartDom2" class="chart-line" :names="['SBP', 'DBP']"
|
||||
:chartData="featureTable"></chart-line>
|
||||
<chart-line ref="chartDom3" class="chart-line" :names="['SPO2', 'TEMP']"
|
||||
:chartData="featureTable"></chart-line>
|
||||
<chart-ecg ref="chartDom4" class="chart-ecg" :chartData="featureTable"></chart-ecg>
|
||||
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<div class="body-box">
|
||||
<div class="body-img">
|
||||
<img src="@/assets/imgs/main_body.png" style="width: 100%;height: 100%;" />
|
||||
<img class="lung-img" :class="{ 'shake_1': lungAlarm }" :src="lungAlarm ? imgLungAlarm : imgLung">
|
||||
<img class="heart-img" :class="{ 'shake_1': heartAlarm }"
|
||||
:src="heartAlarm ? imgHeartAlarm : imgHeart">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<el-button class="start-btn" color="#F80000" @click="getTableData(!isStart)">{{ isStart ? '终止' : '开始'
|
||||
}}</el-button>
|
||||
<div class="right-btn-box">
|
||||
<el-button :class="{ 'active': isAIDose }" size="small" @click="getTableData(true)">AI给药</el-button>
|
||||
<el-button :class="{ 'active': !isAIDose }" size="small"
|
||||
@click="getTableData(false)">人工给药</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="top-btn-box">
|
||||
<div class="top-left-btn-box">
|
||||
<el-select v-model="database" filterable placeholder="Select" style="width: 100%;"
|
||||
@change="selectDatabase">
|
||||
<el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<el-button color="#C77000">患者信息</el-button>
|
||||
<el-button color="#C77000">已连接</el-button>
|
||||
<el-button color="#C77000">机器人运行正常</el-button>
|
||||
</div>
|
||||
<el-button color="#e0e0e0" @click="backRemote"><el-icon>
|
||||
<Back />
|
||||
</el-icon> 返回</el-button>
|
||||
</div>
|
||||
<div class="monitoring-message">
|
||||
<div class="left-box">
|
||||
<span class="unusual-title">异常信息</span>
|
||||
<ul ref="unusualMsg" class="unusual-box">
|
||||
<li v-for="item in unusual" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="video-box" @click="playPause">
|
||||
<div class="icon-box">
|
||||
<el-icon v-if="isVideoPlay">
|
||||
<VideoPause />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<VideoPlay />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- poster="@/assets/imgs/video_bck.png" -->
|
||||
<video ref="liveVideo">
|
||||
<source src="@/assets/medical.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="message-box">
|
||||
<ul ref="msgLog" class="message-log">
|
||||
<li v-for="(item, index) in mssageList" :key="'msg-log-' + index"
|
||||
:class="{ 'align-right': item.user === userName }">
|
||||
<span>{{ item.msg }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="send-box">
|
||||
<el-input v-model="msgVal" placeholder="请输入消息" />
|
||||
<el-button color="#006080" @click="sendMsg">发送消息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-box">
|
||||
<el-table :data="tableData" height="100%" style="width: 100%">
|
||||
<el-table-column prop="num" label="票号" width="40" align="center" />
|
||||
<el-table-column prop="name" label="药物名称" align="center" />
|
||||
<el-table-column prop="speed" label="速度(ml/h)" width="100" />
|
||||
<el-table-column prop="total" label="累计药量(ml)" width="100">
|
||||
<template #default="scope">—</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="工作状态" width="70" align="center" />
|
||||
<el-table-column label="特殊情况人为干预" align="center">
|
||||
<template #default="scope">
|
||||
<div class="table-btn-box">
|
||||
<el-button size="small" color="#006080" @click="tableItemPlus(scope)"><el-icon>
|
||||
<Plus />
|
||||
</el-icon></el-button>
|
||||
<el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
|
||||
@click="tableItemMinus(scope)"><el-icon>
|
||||
<Minus />
|
||||
</el-icon></el-button>
|
||||
<el-button size="small" color="#006080" @click="tableItemConfirm(scope)"
|
||||
:disabled="tableDataStore[scope.$index].speed === scope.row.speed">确定</el-button>
|
||||
<el-button size="small" color="#006080" @click="tableItemCancel(scope)"
|
||||
:disabled="tableDataStore[scope.$index].speed === scope.row.speed">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="setDatabaseDialog" title="请选择需要查询的病人" width="300px" align-center>
|
||||
<el-select v-model="database" filterable placeholder="Select" style="width: 100%;">
|
||||
<el-option v-for="item in databaseOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="setDatabaseDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="setDatabase">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, reactive } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { useRemoteStore } from '@/stores/remote-info-store'
|
||||
import { dateFormater } from '@/utils/date-util';
|
||||
import { post } from "@/axios/index";
|
||||
import chartLine from './chart/chart-line.vue';
|
||||
import chartEcg from './chart/chart-ecg.vue';
|
||||
import imgLung from '@/assets/imgs/lung.png';
|
||||
import imgHeart from '@/assets/imgs/heart.png';
|
||||
import imgLungAlarm from '@/assets/imgs/lung_alarm.png';
|
||||
import imgHeartAlarm from '@/assets/imgs/heart_alarm.png';
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const medicineCustom: any[] = [
|
||||
{ name: '丙泊酚', plus: 0.5, total: 50 },
|
||||
{ name: '舒芬太尼', plus: 1, total: 100 },
|
||||
{ name: '瑞芬太尼', plus: 0.05, total: 5 },
|
||||
{ name: '顺阿曲库胺', plus: 0.02, total: 2 },
|
||||
{ name: '尼卡地平', plus: 1, total: 100 },
|
||||
{ name: '艾司洛尔', plus: 1, total: 100 },
|
||||
{ name: '麻黄素', plus: 1, total: 100 },
|
||||
{ name: '阿托品', plus: 1, total: 100 },
|
||||
{ name: '罗库溴铵', plus: 0.1, total: 10 }
|
||||
];
|
||||
let featureTimer = 0;
|
||||
let ecgTimer = 0;
|
||||
let aiFlagTimer = 0;
|
||||
let medicineTimer = 0;
|
||||
const currentRemote = useRemoteStore().getCurrentRemote()
|
||||
|
||||
const chartDom1 = ref(),
|
||||
chartDom2 = ref(),
|
||||
chartDom3 = ref(),
|
||||
chartDom4 = ref(),
|
||||
liveVideo = ref(),
|
||||
msgLog = ref(),
|
||||
unusualMsg = ref();
|
||||
|
||||
const database = ref('');
|
||||
const databaseOptions = ref([] as { value: string, label: string }[]);
|
||||
const messageSum = ref(10);
|
||||
const userName = ref('admin');
|
||||
const setDatabaseDialog = ref(false);
|
||||
const featureTable = ref([] as any[]);
|
||||
let chartNowData = reactive({ ID: 0 });
|
||||
const lungAlarm = ref(false); // 肺部警告
|
||||
const heartAlarm = ref(false); // 心脏警告
|
||||
const isStart = ref(false); // 是否开始
|
||||
const isAIDose = ref(false); // 是否AI给药
|
||||
const isVideoPlay = ref(false); // 视频是否播放
|
||||
const videoSrc = ref('https://www.runoob.com/try/demo_source/mov_bbb.mp4');
|
||||
const mssageList = ref([] as any);
|
||||
const msgVal = ref('');
|
||||
const unusual = ref([] as any);
|
||||
const tableData = ref([] as any[]);
|
||||
const tableDataStore = ref([] as any[]);
|
||||
|
||||
getDatabases();
|
||||
onMounted(() => {
|
||||
if(currentRemote.isRemote) {
|
||||
|
||||
}else{
|
||||
router.replace('/remote-manage/remote-manage')
|
||||
return
|
||||
}
|
||||
msgLogScrollBottom();
|
||||
getChartData(); // 定时任务
|
||||
getAIFlag(); // 定时任务
|
||||
getMedicine(); // 定时任务
|
||||
initScale();
|
||||
|
||||
});
|
||||
|
||||
function initData() {
|
||||
lungAlarm.value = false;
|
||||
heartAlarm.value = false;
|
||||
isStart.value = false;
|
||||
isAIDose.value = false;
|
||||
unusual.value = [];
|
||||
mssageList.value = [];
|
||||
tableData.value = [];
|
||||
tableDataStore.value = [];
|
||||
const currentRemote = useRemoteStore().getCurrentRemote() // 当前远程连接
|
||||
|
||||
getFeatureTable();
|
||||
getMssageLog();
|
||||
getTableData(isAIDose.value);
|
||||
try {
|
||||
msgLogScrollBottom();
|
||||
} catch (error) { }
|
||||
|
||||
}
|
||||
// AIFlagTable 表2秒获取一次
|
||||
function getAIFlag() {
|
||||
let isRunTimer = true;
|
||||
clearInterval(aiFlagTimer);
|
||||
aiFlagTimer = setInterval(() => {
|
||||
if (isRunTimer) {
|
||||
isRunTimer = false;
|
||||
post('/getaiflag', { database: database.value, start: 0, end: 1 }, (res: any) => {
|
||||
if (res.status === 200 && res.data.length > 0) {
|
||||
const flag = Boolean(res.data[0].Flag);
|
||||
if (isAIDose.value !== flag) getTableData(Boolean(res.data[0].Flag));
|
||||
}
|
||||
isRunTimer = true;
|
||||
});
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
function setTableData(res: any) {
|
||||
if (res.data.length > 0) {
|
||||
let i = 0;
|
||||
const ary: any = [];
|
||||
for (let key in res.data[0]) {
|
||||
if (key !== 'ID' && key !== 'Phase' && key !== 'Time' && key !== 'TIME') {
|
||||
i++;
|
||||
ary.push({ Phase: res.data[0].Phase, num: i, name: key, speed: res.data[0][key], total: medicineCustom.find(o => o.name === key)?.total, state: '正常' });
|
||||
}
|
||||
}
|
||||
tableData.value = ary;
|
||||
|
||||
} else {
|
||||
const defaultMedicine: string[] = ['丙泊酚', '舒芬太尼', '瑞芬太尼', '顺阿曲库胺', '尼卡地平', '艾司洛尔', '麻黄素', '阿托品'];
|
||||
const ary: any = [];
|
||||
defaultMedicine.forEach((item, index) => {
|
||||
ary.push({ Phase: 1, num: index + 1, name: item, speed: 0, total: medicineCustom.find(o => o.name === item)?.total, state: '正常' });
|
||||
});
|
||||
tableData.value = ary;
|
||||
}
|
||||
tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
|
||||
}
|
||||
// AIMedicineTable、DoctorMedicineTable 表2秒获取一次
|
||||
function getMedicine() {
|
||||
let isRunTimer = true;
|
||||
clearInterval(medicineTimer);
|
||||
setInterval(() => {
|
||||
if (isRunTimer && JSON.stringify(tableDataStore) === JSON.stringify(tableData) && isAIDose.value) {
|
||||
isRunTimer = false;
|
||||
const url = isAIDose.value ? '/getaimedicine' : '/getdoctormedicine';
|
||||
post(url, { database: database.value, start: 0, end: 1 }, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
setTableData(res);
|
||||
}
|
||||
isRunTimer = true;
|
||||
});
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
// FeatureTable 表2秒获取一次
|
||||
function getChartData() {
|
||||
let isRunTimer = true;
|
||||
clearInterval(featureTimer);
|
||||
clearInterval(ecgTimer);
|
||||
setInterval(() => {
|
||||
if (isRunTimer) {
|
||||
getData()
|
||||
}
|
||||
}, 2000);
|
||||
setInterval(() => {
|
||||
try {
|
||||
chartDom4.value.updateChart(0, new Date());
|
||||
} catch (error) { }
|
||||
}, 1000);
|
||||
function getData() {
|
||||
isRunTimer = false;
|
||||
post('/getfeature', { database: database.value, start: 0, end: 1 }, (res: any) => {
|
||||
const obj = (res.data && res.data[0]) || {};
|
||||
if (obj.ID !== chartNowData.ID) {
|
||||
chartNowData = obj;
|
||||
const isHR = obj.HR >= 50 && obj.HR <= 80;
|
||||
const isSBP = obj.SBP >= 90 && obj.SBP <= 120;
|
||||
const isDBP = obj.DBP >= 60 && obj.DBP <= 90;
|
||||
// const isST = obj.ST >= -0.2 && obj.ST <= 0.2;
|
||||
if (!isHR) unusualUpDate('心率异常');
|
||||
if (!isSBP) unusualUpDate('收缩压异常');
|
||||
if (!isDBP) unusualUpDate('舒张异常');
|
||||
// if (!isST) unusualUpDate('心电图ST段变异度异常');
|
||||
lungAlarm.value = Boolean(!isSBP || !isDBP);
|
||||
// heartAlarm.value = Boolean(!isHR || !isST);
|
||||
heartAlarm.value = Boolean(!isHR);
|
||||
chartDom1.value.updateChart([obj.BIS, obj.HR], obj.Time || obj.TIME);
|
||||
chartDom2.value.updateChart([obj.SBP, obj.DBP], obj.Time || obj.TIME);
|
||||
chartDom3.value.updateChart([obj.SPO2, obj.TEMP], obj.Time || obj.TIME);
|
||||
// chartDom4.value.updateChart(obj.ST, obj.Time || obj.TIME);
|
||||
}
|
||||
isRunTimer = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
function getFeatureTable() {
|
||||
featureTable.value = [];
|
||||
post('/getfeature', { database: database.value, start: 1, end: 50 }, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
featureTable.value = res.data.reverse();
|
||||
setTimeout(() => {
|
||||
chartDom1.value.chartSet();
|
||||
chartDom2.value.chartSet();
|
||||
chartDom3.value.chartSet();
|
||||
chartDom4.value.chartSet();
|
||||
}, 0);
|
||||
} else {
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function getDatabases() {
|
||||
post('/getdatabases', {}, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
databaseOptions.value = [];
|
||||
const hideDatabase = ['information_schema', 'mysql', 'performance_schema', '北工大412824200020002000', '数据模拟412824200020002000'];
|
||||
res.data.forEach((item: any, index: number) => {
|
||||
if (!hideDatabase.some(e => e === item.Database)) databaseOptions.value.push({ value: item.Database, label: item.Database });
|
||||
})
|
||||
database.value = databaseOptions.value[0].label;
|
||||
initData();
|
||||
}
|
||||
});
|
||||
}
|
||||
function msgLogScrollBottom() {
|
||||
msgLog.value.scrollTo({
|
||||
top: msgLog.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
function unusualUpDate(msg: string) {
|
||||
unusual.value.push(dateFormater('HH:mm:ss') + msg);
|
||||
setTimeout(() => {
|
||||
unusualMsg.value.scrollTo({
|
||||
top: unusualMsg.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
function getMssageLog() {
|
||||
mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
|
||||
mssageList.value.push({ user: 'nurse', msg: '好的' });
|
||||
mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
|
||||
mssageList.value.push({ user: 'nurse', msg: '好的' });
|
||||
}
|
||||
function getTableData(e: boolean) {
|
||||
if (tableData.value.length > 0 && e === isAIDose.value) return;
|
||||
// 人工转ai 人工给药数据插到ai给药表
|
||||
let promise = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (e && tableDataStore.value.length > 0) {
|
||||
let key = `Phase`;
|
||||
let value = `${tableDataStore.value[0].Phase}`;
|
||||
tableDataStore.value.forEach(item => {
|
||||
key += `, ${item.name}`;
|
||||
value += `, ${item.speed}`;
|
||||
});
|
||||
post('/addaimedicine', { database: database.value, key, value }, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
|
||||
}
|
||||
resolve(true)
|
||||
});
|
||||
} else {
|
||||
resolve(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
promise().then((e: any) => {
|
||||
isStart.value = e;
|
||||
isAIDose.value = e;
|
||||
const url = e ? '/getaimedicine' : '/getdoctormedicine';
|
||||
post(url, { database: database.value, start: 0, end: 1 }, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
setTableData(res);
|
||||
}
|
||||
});
|
||||
post('/addaiflag', { database: database.value, flag: e ? 1 : 0 }, (res: any) => {
|
||||
console.log(res.status);
|
||||
})
|
||||
});
|
||||
}
|
||||
function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
|
||||
let width = designWidth || 1920,
|
||||
height = designHeight || 1030;
|
||||
let clientHeight = document.documentElement.clientHeight - 50;
|
||||
let clientWidth = document.documentElement.clientWidth;
|
||||
let scale = 1;
|
||||
scale = clientHeight / height;
|
||||
const renderDom = document.getElementById(renderDomId);
|
||||
if (renderDom) {
|
||||
renderDom.style.height = clientHeight / scale + 'px';
|
||||
renderDom.style.width = clientWidth / scale + 'px';
|
||||
renderDom.style.transform = 'scale(' + scale + ')';
|
||||
}
|
||||
}
|
||||
function initScale() {
|
||||
let w = 1920,
|
||||
h = 1030;
|
||||
keepFit(w, h, 'screenBox');
|
||||
window.addEventListener('resize', () => {
|
||||
keepFit(w, h, 'screenBox');
|
||||
});
|
||||
}
|
||||
|
||||
const selectDatabase = (value: any) => {
|
||||
initData();
|
||||
};
|
||||
const setDatabase = () => {
|
||||
initData();
|
||||
setDatabaseDialog.value = false;
|
||||
};
|
||||
const backRemote = () => {
|
||||
router.back()
|
||||
}
|
||||
const playPause = () => {
|
||||
if (liveVideo.value.paused) {
|
||||
liveVideo.value.play(); // 播放视频
|
||||
isVideoPlay.value = true;
|
||||
} else {
|
||||
liveVideo.value.pause(); // 暂停视频
|
||||
isVideoPlay.value = false;
|
||||
}
|
||||
}
|
||||
const sendMsg = () => {
|
||||
if (msgVal.value.trim() == '') return;
|
||||
mssageList.value.push({ user: userName.value, msg: msgVal.value });
|
||||
msgVal.value = '';
|
||||
setTimeout(() => {
|
||||
msgLogScrollBottom()
|
||||
}, 0);
|
||||
};
|
||||
const tableItemPlus = (e: any) => {
|
||||
const obj = medicineCustom.find(item => item.name === e.row.name) || { plus: 1 };
|
||||
e.row.speed += obj.plus;
|
||||
e.row.speed = Number(e.row.speed.toFixed(2));
|
||||
};
|
||||
const tableItemMinus = (e: any) => {
|
||||
const obj = medicineCustom.find(item => item.name === e.row.name) || { plus: 1 };
|
||||
if (!isAIDose.value && e.row.speed - obj.plus <= 0) return;
|
||||
e.row.speed -= obj.plus;
|
||||
if (e.row.speed < 0) e.row.speed = 0;
|
||||
else e.row.speed = Number(e.row.speed.toFixed(2));
|
||||
};
|
||||
const tableItemConfirm = (e: any) => {
|
||||
tableDataStore.value[e.$index].speed = e.row.speed;
|
||||
if (tableData.value.length < 1) return;
|
||||
let key = `Phase`;
|
||||
let value = `${tableData.value[0].Phase}`;
|
||||
tableData.value.forEach(item => {
|
||||
key += `, ${item.name}`;
|
||||
value += `, ${item.speed}`;
|
||||
});
|
||||
post(isAIDose.value ? '/addaimedicine' : '/adddoctormedicine', { database: database.value, key, value }, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
});
|
||||
// 如果是ai药量表保存后同时在人工表中插入ai药量表数据
|
||||
if (isAIDose.value) {
|
||||
post('/adddoctormedicine', { database: database.value, key, value }, (res: any) => {
|
||||
if (res.status === 200) {
|
||||
ElMessage({
|
||||
message: '保存成功！',
|
||||
type: 'success',
|
||||
});
|
||||
getTableData(false); // 保存成功后切换为人工给药
|
||||
} else {
|
||||
ElMessage({
|
||||
message: JSON.stringify(res),
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
ElMessage({
|
||||
message: JSON.stringify(res),
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const tableItemCancel = (e: any) => {
|
||||
e.row.speed = tableDataStore.value[e.$index].speed;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.remote-box {
|
||||
width: 1920px;
|
||||
height: 1020px;
|
||||
background: #f1f3f5;
|
||||
padding-top: 10px;
|
||||
transform-origin: top left;
|
||||
overflow-y: auto;
|
||||
.el-button {
|
||||
color: white;
|
||||
}
|
||||
.main-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// min-height: 1080px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-box {
|
||||
width: 670px;
|
||||
height: 100%;
|
||||
|
||||
&>h3 {
|
||||
font-size: 20px;
|
||||
color: $main-color;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
width: 100%;
|
||||
height: calc(25% - 15px - 12.5px);
|
||||
margin-bottom: 20px;
|
||||
background: #e8f5f8;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-ecg {
|
||||
width: 100%;
|
||||
height: calc(25% - 15px - 12.5px);
|
||||
border-left: 1px solid #92b3c1;
|
||||
border-bottom: 1px solid #92b3c1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 15px solid #285e7d;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: -5px;
|
||||
right: 0;
|
||||
border-left: 15px solid #285e7d;
|
||||
border-right: 0;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: calc(100% - 1500px);
|
||||
min-width: 500px;
|
||||
height: 100%;
|
||||
|
||||
.body-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 110px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.body-img {
|
||||
position: relative;
|
||||
// width: 400px;
|
||||
// height: 650px;
|
||||
width: 500px;
|
||||
height: 812.5px;
|
||||
min-height: 650px;
|
||||
|
||||
.lung-img {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
top: 240px;
|
||||
left: 0;
|
||||
transition: all 2s;
|
||||
}
|
||||
|
||||
.heart-img {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
top: 420px;
|
||||
left: 0;
|
||||
transition: all 2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.start-btn {
|
||||
width: 230px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
border-radius: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.right-btn-box {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 62px;
|
||||
top: calc(50% - 31px);
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
line-height: 22px;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #616161;
|
||||
|
||||
&.active {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
width: 670px;
|
||||
height: 100%;
|
||||
|
||||
.top-btn-box {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.top-left-btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.el-select {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
border-radius: 16px;
|
||||
height: 31px;
|
||||
background-color: transparent;
|
||||
color: #c77000;
|
||||
}
|
||||
|
||||
&>.el-button {
|
||||
border-radius: 4px;
|
||||
background-color: #f2f3f5;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.monitoring-message {
|
||||
width: 670px;
|
||||
height: 550px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&>.left-box {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
|
||||
.unusual-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 38px;
|
||||
color: #C77000;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
border: 1px dashed #C1C1C1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.unusual-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 45px);
|
||||
// background: #F8F8F8;
|
||||
border-left: 1px dashed #C1C1C1;
|
||||
// border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
padding: 8px 16px;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
color: #F80000;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.right-box {
|
||||
width: calc(100% - 205px);
|
||||
height: 100%;
|
||||
|
||||
.video-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 270px;
|
||||
background: $main-color;
|
||||
/* background: url(@/assets/imgs/video_bck.png);
|
||||
background-size: 100% 100%; */
|
||||
|
||||
&:hover {
|
||||
.icon-box {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 60px;
|
||||
color: white;
|
||||
background: rgba(black, .3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
width: 100%;
|
||||
height: 270px;
|
||||
// margin-bottom: 5px;
|
||||
|
||||
.message-log {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #c8c8c8;
|
||||
background: #f8f8f8;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin: 5px 0;
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
padding: 6px 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
background: $main-color;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-box {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.el-input {
|
||||
width: calc(100% - 110px);
|
||||
height: 32px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: #F2F3F5;
|
||||
border-color: #C1C1C1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding: 0;
|
||||
width: 100px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 589px);
|
||||
|
||||
:deep(.el-table__inner-wrapper) {
|
||||
.el-table__cell {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper {
|
||||
tr {
|
||||
background-color: $main-color;
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
color: white;
|
||||
background-color: $main-color;
|
||||
padding: 8px 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-btn-box {
|
||||
.el-button {
|
||||
padding: 0 7px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user