mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-24 04:54:58 +08:00
This commit is contained in:
mouse
parent
cfaca9d1f9
commit
f268349edf
|
|
@ -1,110 +1,128 @@
|
|||
import {getData, postData} from '@/axios/index'
|
||||
import { getData, postData } from '@/axios/index'
|
||||
|
||||
export const getHospitalsData = () => {
|
||||
const hospitals = [] as any
|
||||
hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
|
||||
hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
|
||||
hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
|
||||
return new Promise((resolve, reject) => {
|
||||
getData('/url', {}).then((res: any) => {
|
||||
resolve(hospitals)
|
||||
}).catch((err: any) => {
|
||||
resolve(hospitals)
|
||||
})
|
||||
const hospitals = [] as any
|
||||
hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
|
||||
hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
|
||||
hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
|
||||
return new Promise((resolve, reject) => {
|
||||
getData('/url', {}).then((res: any) => {
|
||||
resolve(hospitals)
|
||||
}).catch((err: any) => {
|
||||
resolve(hospitals)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const getPhoneAreasData = () => {
|
||||
return ['中国 +86']
|
||||
return ['中国 +86']
|
||||
}
|
||||
|
||||
export const getDeptData = () => {
|
||||
const depts = []
|
||||
depts.push({ label: '神经外科', value: '神经外科' })
|
||||
depts.push({ label: '心脏内科', value: '心脏内科' })
|
||||
return depts
|
||||
const depts = []
|
||||
depts.push({ label: '神经外科', value: '神经外科' })
|
||||
depts.push({ label: '心脏内科', value: '心脏内科' })
|
||||
return depts
|
||||
}
|
||||
|
||||
export const getMessageType = () => {
|
||||
const type = []
|
||||
type.push({ label: '通知', value: '通知' })
|
||||
type.push({ label: '公告', value: '公告' })
|
||||
return type
|
||||
const type = []
|
||||
type.push({ label: '通知', value: '通知' })
|
||||
type.push({ label: '公告', value: '公告' })
|
||||
return type
|
||||
}
|
||||
|
||||
export const getLogType = () => {
|
||||
const type = []
|
||||
type.push({ label: '正常', value: '正常' })
|
||||
type.push({ label: '异常', value: '异常' })
|
||||
type.push({ label: '添加', value: '添加' })
|
||||
type.push({ label: '删除', value: '删除' })
|
||||
type.push({ label: '编辑', value: '编辑' })
|
||||
return type
|
||||
const type = []
|
||||
type.push({ label: '正常', value: '正常' })
|
||||
type.push({ label: '异常', value: '异常' })
|
||||
type.push({ label: '添加', value: '添加' })
|
||||
type.push({ label: '删除', value: '删除' })
|
||||
type.push({ label: '编辑', value: '编辑' })
|
||||
return type
|
||||
}
|
||||
|
||||
export const getusers = () => {
|
||||
const user = []
|
||||
while (user.length < 50) {
|
||||
user.push({ name: '管理员' + user.length, code: 'admin' + user.length })
|
||||
}
|
||||
return user
|
||||
const user = []
|
||||
while (user.length < 50) {
|
||||
user.push({ name: '管理员' + user.length, code: 'admin' + user.length })
|
||||
}
|
||||
return user
|
||||
}
|
||||
|
||||
// 病人名称数据
|
||||
export const getPatients = () => {
|
||||
const patients = []
|
||||
while (patients.length < 10000) {
|
||||
patients.push({ name: '张' + patients.length, code: 'BH' + patients.length })
|
||||
}
|
||||
return patients
|
||||
const patients = []
|
||||
while (patients.length < 10000) {
|
||||
patients.push({ name: '张' + patients.length, code: 'BH' + patients.length })
|
||||
}
|
||||
return patients
|
||||
}
|
||||
|
||||
export const getNarcotismWay = () => {
|
||||
const narcotismWay = []
|
||||
while (narcotismWay.length < 10) {
|
||||
const str: string = '麻醉方式' + (narcotismWay.length + 1)
|
||||
narcotismWay.push({label: str, value: str})
|
||||
}
|
||||
return narcotismWay
|
||||
const narcotismWay = []
|
||||
while (narcotismWay.length < 10) {
|
||||
const str: string = '麻醉方式' + (narcotismWay.length + 1)
|
||||
narcotismWay.push({ label: str, value: str })
|
||||
}
|
||||
return narcotismWay
|
||||
}
|
||||
|
||||
export const getFormTypes = () => {
|
||||
const types = [
|
||||
{name: '生命体征表单'},
|
||||
{name: 'AI给药记录'},
|
||||
{name: '医生给药记录'},
|
||||
{name: '给药命令反馈'},
|
||||
{name: '输药泵定时间反馈'},
|
||||
{name: '术后信息表单'},
|
||||
{name: '1生命体征表单'},
|
||||
{name: '1AI给药记录'},
|
||||
{name: '1医生给药记录'},
|
||||
{name: '1给药命令反馈'},
|
||||
{name: '1输药泵定时间反馈'},
|
||||
{name: '1术后信息表单'},
|
||||
{name: '2生命体征表单'},
|
||||
{name: '2AI给药记录'},
|
||||
{name: '2医生给药记录'},
|
||||
{name: '2给药命令反馈'},
|
||||
{name: '2输药泵定时间反馈'},
|
||||
{name: '2术后信息表单'},
|
||||
]
|
||||
return types
|
||||
const types = [
|
||||
{ name: '生命体征表单' },
|
||||
{ name: 'AI给药记录' },
|
||||
{ name: '医生给药记录' },
|
||||
{ name: '给药命令反馈' },
|
||||
{ name: '输药泵定时间反馈' },
|
||||
{ name: '术后信息表单' },
|
||||
{ name: '1生命体征表单' },
|
||||
{ name: '1AI给药记录' },
|
||||
{ name: '1医生给药记录' },
|
||||
{ name: '1给药命令反馈' },
|
||||
{ name: '1输药泵定时间反馈' },
|
||||
{ name: '1术后信息表单' },
|
||||
{ name: '2生命体征表单' },
|
||||
{ name: '2AI给药记录' },
|
||||
{ name: '2医生给药记录' },
|
||||
{ name: '2给药命令反馈' },
|
||||
{ name: '2输药泵定时间反馈' },
|
||||
{ name: '2术后信息表单' },
|
||||
]
|
||||
return types
|
||||
}
|
||||
export const getDataAlarmState = (value: number, key: string) => {
|
||||
const alarms: any = {
|
||||
BIS: { min: 40, max: 60 },
|
||||
HR: { min: 50, max: 80 },
|
||||
SBP: { min: 90, max: 120 },
|
||||
DBP: { min: 60, max: 90 },
|
||||
ST: { min: -0.2, max: 0.2 },
|
||||
EtCO2: { min: 30, max: 45 }
|
||||
}
|
||||
const obj = alarms[key]
|
||||
let res: 'min' | 'max' | '' = ''
|
||||
if(obj) {
|
||||
if(value < obj.min) res = 'min'
|
||||
else if(value > obj.max) res = 'max'
|
||||
}
|
||||
return res
|
||||
export const getDataAlarmState = (value: number | undefined, key: string) => {
|
||||
if (value === undefined) return
|
||||
const alarms: any = {
|
||||
BIS: { min: 40, max: 60 },
|
||||
HR: { min: 50, max: 80 },
|
||||
SBP: { min: 90, max: 120 },
|
||||
DBP: { min: 60, max: 90 },
|
||||
ST: { min: -0.2, max: 0.2 },
|
||||
EtCO2: { min: 30, max: 45 }
|
||||
}
|
||||
const obj = alarms[key]
|
||||
let res: 'min' | 'max' | '' = ''
|
||||
if (obj) {
|
||||
if (value < obj.min) res = 'min'
|
||||
else if (value > obj.max) res = 'max'
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
export const setRemoteLog = (obj: any, callback: (title: string, size: string) => void) => {
|
||||
const alarms = {
|
||||
BIS: getDataAlarmState(obj.BIS, 'BIS'),
|
||||
SBP: getDataAlarmState(obj.SBP, 'SBP'),
|
||||
SPO2: getDataAlarmState(obj.SPO2, 'SPO2'),
|
||||
DBP: getDataAlarmState(obj.DBP, 'DBP'),
|
||||
HR: getDataAlarmState(obj.HR, 'HR'),
|
||||
TEMP: getDataAlarmState(obj.TEMP, 'TEMP')
|
||||
}
|
||||
if (alarms.BIS) callback('脑电双频指数', alarms.BIS)
|
||||
if (alarms.SBP) callback('收缩率', alarms.SBP)
|
||||
if (alarms.SPO2) callback('氧饱和度', alarms.SPO2)
|
||||
if (alarms.DBP) callback('舒张压', alarms.DBP)
|
||||
if (alarms.HR) callback('心率', alarms.HR)
|
||||
if (alarms.TEMP) callback('体温', alarms.TEMP)
|
||||
}
|
||||
|
|
@ -25,6 +25,11 @@ export const useRemoteStore = defineStore('remote', {
|
|||
this.remoteTasks[index].log.push(obj)
|
||||
}
|
||||
},
|
||||
setRemoteDataAlarm(bol: boolean, index: number) {
|
||||
if(this.remoteTasks[index]) {
|
||||
this.remoteTasks[index].dataAlarm = bol
|
||||
}
|
||||
},
|
||||
getCurrentRemote() {
|
||||
return this.currentRemote
|
||||
},
|
||||
|
|
|
|||
|
|
@ -40,10 +40,12 @@ remoteTasks.value = useRemoteStore().remoteTasks
|
|||
// })
|
||||
|
||||
function scrollToBottom() {
|
||||
listRef.value.scrollTo({
|
||||
top: listRef.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
setTimeout(() => {
|
||||
listRef.value.scrollTo({
|
||||
top: listRef.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<div class="title">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div ref="listRef" class="content">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in currentRemote.log || []" :key="index"
|
||||
<el-timeline-item v-for="(item, index) in remoteStore.currentRemote.log || []" :key="index"
|
||||
:timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
|
||||
:class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }">
|
||||
{{ item.title + ' ' + item.state }}
|
||||
|
|
@ -24,17 +24,25 @@ import { dateFormater } from '@/utils/date-util'
|
|||
|
||||
defineExpose({
|
||||
setData,
|
||||
scrollToBottom
|
||||
})
|
||||
|
||||
const remoteStore = useRemoteStore()
|
||||
const currentRemote = ref({} as RemoteItem)
|
||||
currentRemote.value = useRemoteStore().currentRemote
|
||||
const listRef = ref()
|
||||
|
||||
function setData(e: RemoteLogItem, index: number) {
|
||||
remoteStore.setRemoteLog(e, index)
|
||||
remoteStore.setCurrentRemoteLog(e)
|
||||
remoteStore.$patch({currentRemote: remoteStore.remoteTasks[index]})
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
setTimeout(() => {
|
||||
listRef.value.scrollTo({
|
||||
top: listRef.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
|
|
|||
|
|
@ -117,15 +117,17 @@ import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
|
|||
import { dateFormater } from '@/utils/date-util'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store';
|
||||
import type { RemoteItem, PatientInfoItem } from '@/utils/public-interface'
|
||||
import { setRemoteLog } from '@/static-data/core'
|
||||
|
||||
const emit = defineEmits(['breakRemote'])
|
||||
const emit = defineEmits(['addLogAfter', 'breakRemote'])
|
||||
|
||||
const remoteStore = useRemoteStore()
|
||||
let timer = 0
|
||||
const mediaMini800 = ref(false)
|
||||
const remoteItem = ref<RemoteItem>({} as RemoteItem)
|
||||
const patientInfo = ref({} as PatientInfoItem)
|
||||
|
||||
initData(useRemoteStore().getCurrentRemote())
|
||||
initData(remoteStore.currentRemote)
|
||||
|
||||
defineExpose({
|
||||
initData
|
||||
|
|
@ -133,7 +135,6 @@ defineExpose({
|
|||
|
||||
onBeforeUnmount(() => {
|
||||
// 页面卸载后清楚定时器
|
||||
console.log('~~~~~~~~~~~~~~~')
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
|
|
@ -141,26 +142,43 @@ window.addEventListener('resize', () => {
|
|||
mediaMini800.value = Boolean(window.innerWidth < 801)
|
||||
});
|
||||
|
||||
function initData(e?: any) {
|
||||
if(e) remoteItem.value = e
|
||||
const obj = e || {}
|
||||
function initData(e?: RemoteItem) {
|
||||
const obj = e || {} as RemoteItem
|
||||
remoteItem.value = obj
|
||||
patientInfo.value.state = obj.dataAlarm
|
||||
patientInfo.value.name = obj.patientName || ''
|
||||
patientInfo.value.code = 'XXXXXX'
|
||||
clearInterval(timer)
|
||||
if(!patientInfo.value.name) return
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function getData() {
|
||||
remoteItem.value.dataAlarm = false
|
||||
const obj = {
|
||||
BIS: Math.ceil(Math.random() * 100),
|
||||
SBP: Math.ceil(Math.random() * 100),
|
||||
SPO2: Math.ceil(Math.random() * 100),
|
||||
DBP: Math.ceil(Math.random() * 100),
|
||||
HR: Math.ceil(Math.random() * 100),
|
||||
TEMP: Math.ceil(Math.random() * 100),
|
||||
} as PatientInfoItem
|
||||
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)
|
||||
setRemoteLog(obj, (title: string, size: string) => {
|
||||
obj.state = true
|
||||
remoteItem.value.dataAlarm = true
|
||||
remoteStore.setRemoteLog({
|
||||
time: new Date(),
|
||||
title,
|
||||
state: '异常'
|
||||
}, remoteItem.value.index)
|
||||
})
|
||||
remoteStore.setRemoteDataAlarm(remoteItem.value.dataAlarm, remoteItem.value.index)
|
||||
remoteStore.$patch({currentRemote: remoteStore.remoteTasks[remoteItem.value.index]})
|
||||
Object.assign(patientInfo.value, obj)
|
||||
emit('addLogAfter')
|
||||
}
|
||||
|
||||
const breakRemote = () => {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
<template>
|
||||
<div class="remote-manage-page">
|
||||
<div class="header-box">
|
||||
<div class="thumbnail" @click="viewThumbnail">
|
||||
<el-icon><Menu /></el-icon>
|
||||
<span>缩略图</span>
|
||||
</div>
|
||||
<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
|
||||
:class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
|
||||
@click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
|
||||
<span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div class="remote-box">
|
||||
<RemotePart ref="remotePartRef" @breakRemote="breakRemote" />
|
||||
</div>
|
||||
<div class="message-box">
|
||||
<MessagePart ref="messagePartRef" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="remote-manage-page">
|
||||
<div class="header-box">
|
||||
<div class="thumbnail" @click="viewThumbnail">
|
||||
<el-icon>
|
||||
<Menu />
|
||||
</el-icon>
|
||||
<span>缩略图</span>
|
||||
</div>
|
||||
<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
|
||||
:class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
|
||||
@click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
|
||||
<span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" />
|
||||
<div class="content-box">
|
||||
<div class="remote-box">
|
||||
<RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote" />
|
||||
</div>
|
||||
<div class="message-box">
|
||||
<MessagePart ref="messagePartRef" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" />
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
@ -42,46 +44,45 @@ const remoteTask = ref([] as Array<RemoteItem>)
|
|||
initRemoteTask()
|
||||
|
||||
function resetRemoteTaskItem(e: RemoteItem) {
|
||||
remoteTask.value[e.index] = {
|
||||
isRemote: false,
|
||||
dataAlarm: false,
|
||||
title: '',
|
||||
serverUser: '',
|
||||
patientName: '',
|
||||
patientCode: '',
|
||||
index: e.index,
|
||||
log: []
|
||||
}
|
||||
Object.assign(remoteTask.value[e.index], {
|
||||
isRemote: false,
|
||||
dataAlarm: false,
|
||||
title: '',
|
||||
serverUser: '',
|
||||
patientName: '',
|
||||
patientCode: '',
|
||||
index: e.index,
|
||||
})
|
||||
}
|
||||
function initRemoteTask() {
|
||||
remoteTask.value = useRemoteStore().remoteTasks
|
||||
if(remoteTask.value.length < 1) {
|
||||
while (remoteTask.value.length < 10) {
|
||||
const obj = {
|
||||
isRemote: false, // 连接状态
|
||||
dataAlarm: false, // 异常状态
|
||||
title: '',
|
||||
serverUser: '', // 服务器用户名
|
||||
patientName: '', // 病人名称
|
||||
patientCode: '', // 病人身份证
|
||||
index: remoteTask.value.length,
|
||||
log: []
|
||||
}
|
||||
if (remoteTask.value.length < 3) {
|
||||
obj.isRemote = true
|
||||
obj.title = '远程控制' + (remoteTask.value.length + 1)
|
||||
obj.serverUser = 'root'
|
||||
obj.patientName = '测试' + (remoteTask.value.length + 1)
|
||||
}
|
||||
if (remoteTask.value.length == 1) obj.dataAlarm = true
|
||||
remoteTask.value.push(obj)
|
||||
remoteTask.value = useRemoteStore().remoteTasks
|
||||
if (remoteTask.value.length < 1) {
|
||||
while (remoteTask.value.length < 10) {
|
||||
const obj = {
|
||||
isRemote: false, // 连接状态
|
||||
dataAlarm: false, // 异常状态
|
||||
title: '',
|
||||
serverUser: '', // 服务器用户名
|
||||
patientName: '', // 病人名称
|
||||
patientCode: '', // 病人身份证
|
||||
index: remoteTask.value.length,
|
||||
log: []
|
||||
}
|
||||
useRemoteStore().setRemoteTasks(remoteTask.value)
|
||||
const remoteStore = useRemoteStore().currentRemote
|
||||
if (!remoteStore.index) {
|
||||
useRemoteStore().$patch({currentRemote: remoteTask.value[0]})
|
||||
if (remoteTask.value.length < 3) {
|
||||
obj.isRemote = true
|
||||
obj.title = '远程控制' + (remoteTask.value.length + 1)
|
||||
obj.serverUser = 'root'
|
||||
obj.patientName = '测试' + (remoteTask.value.length + 1)
|
||||
}
|
||||
if (remoteTask.value.length == 1) obj.dataAlarm = true
|
||||
remoteTask.value.push(obj)
|
||||
}
|
||||
useRemoteStore().setRemoteTasks(remoteTask.value)
|
||||
const remoteStore = useRemoteStore().currentRemote
|
||||
if (!remoteStore.index) {
|
||||
useRemoteStore().$patch({ currentRemote: remoteTask.value[0] })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const viewThumbnail = () => {
|
||||
|
|
@ -91,165 +92,174 @@ const viewThumbnail = () => {
|
|||
}
|
||||
// 打开任务连接弹窗
|
||||
const editTask = (item: RemoteItem, index: number) => {
|
||||
item.index = index
|
||||
// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
confirmRemote(item)
|
||||
} else {
|
||||
remoteDialogRef.value.open(item)
|
||||
}
|
||||
item.index = index
|
||||
// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
confirmRemote(item)
|
||||
} else {
|
||||
remoteDialogRef.value.open(item)
|
||||
}
|
||||
}
|
||||
// 跳转到远程控制
|
||||
const toRemoteControl = (item: RemoteItem, index: number) => {
|
||||
// 如果当前任务是已连接状态则跳转，否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
router.push('/remote-manage/remote-control')
|
||||
} else {
|
||||
editTask(item, index)
|
||||
}
|
||||
// 如果当前任务是已连接状态则跳转，否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
router.push('/remote-manage/remote-control')
|
||||
} else {
|
||||
editTask(item, index)
|
||||
}
|
||||
}
|
||||
// 连接成功
|
||||
const confirmRemote = (e: RemoteItem) => {
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接成功'
|
||||
}, e.index)
|
||||
remoteTask.value[e.index] = e // 状态设置为可连接
|
||||
remotePartRef.value.initData(e)
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接成功'
|
||||
}, e.index)
|
||||
remoteTask.value[e.index] = e // 状态设置为可连接
|
||||
remotePartRef.value.initData(e)
|
||||
}
|
||||
// 连接失败
|
||||
const errorRemote = (e: RemoteItem) => {
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接失败'
|
||||
}, e.index)
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接失败'
|
||||
}, e.index)
|
||||
}
|
||||
// 断开连接
|
||||
const breakRemote = (e: RemoteItem) => {
|
||||
resetRemoteTaskItem(e)
|
||||
remotePartRef.value.initData()
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '断开连接'
|
||||
}, e.index)
|
||||
resetRemoteTaskItem(e)
|
||||
remotePartRef.value.initData()
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '断开连接'
|
||||
}, e.index)
|
||||
}
|
||||
const addLogAfter = () => {
|
||||
messagePartRef.value.scrollToBottom()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.remote-manage-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.header-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
.header-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
background: white;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.thumbnail {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f8b300;
|
||||
border-top-left-radius: 35px;
|
||||
border-bottom-left-radius: 35px;
|
||||
box-shadow: -3px 3px 5px 0 rgba(black, .2);
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
transition: all .1s;
|
||||
.el-icon {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
&>span {
|
||||
display: none;
|
||||
margin-left: 5px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&:hover {
|
||||
width: 160px;
|
||||
transition: all .3s;
|
||||
&>span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.task-btn-item {
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
width: 17%;
|
||||
min-width: 200px;
|
||||
height: 70px;
|
||||
margin: 10px 20px;
|
||||
border: 2px solid $main-color;
|
||||
color: $main-color;
|
||||
border-radius: 5px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all .6s;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
&.connecting {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .8);
|
||||
}
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
background: #f80000;
|
||||
border-color: #f80000;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba(#f80000, .8);
|
||||
}
|
||||
}
|
||||
min-height: 180px;
|
||||
background: white;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.thumbnail {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f8b300;
|
||||
border-top-left-radius: 35px;
|
||||
border-bottom-left-radius: 35px;
|
||||
box-shadow: -3px 3px 5px 0 rgba(black, .2);
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
transition: all .1s;
|
||||
|
||||
.el-icon {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&>span {
|
||||
display: none;
|
||||
margin-left: 5px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 160px;
|
||||
transition: all .3s;
|
||||
|
||||
&>span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 195px);
|
||||
min-height: 600px;
|
||||
margin-top: 15px;
|
||||
background: white;
|
||||
padding: 20px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.task-btn-item {
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
width: 17%;
|
||||
min-width: 200px;
|
||||
height: 70px;
|
||||
margin: 10px 20px;
|
||||
border: 2px solid $main-color;
|
||||
color: $main-color;
|
||||
border-radius: 5px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all .6s;
|
||||
|
||||
.remote-box {
|
||||
width: calc(100% - 370px);
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba($main-color, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
&.connecting {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, .8);
|
||||
}
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
background: #f80000;
|
||||
border-color: #f80000;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba(#f80000, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
.content-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 195px);
|
||||
min-height: 600px;
|
||||
margin-top: 15px;
|
||||
background: white;
|
||||
padding: 20px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.remote-box {
|
||||
width: calc(100% - 370px);
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user