mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2026-06-16 15:41:48 +08:00
yy
parent
54054c4bcc
commit
ca4faa9b61
|
|
@ -22,7 +22,7 @@ export function getMonthlyLogCount(startTime: string, endTime: string) {
|
|||
})
|
||||
}
|
||||
|
||||
export function getPage(current: number, size: number, condition: {timeInterval: string, logType: string}) {
|
||||
export function getPage(current: number, size: number, condition?: {timeInterval: string, logType: string}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.get(getPageUrl, {
|
||||
params: {
|
||||
|
|
|
|||
|
|
@ -1,159 +0,0 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="ts" name="global-websocket">
|
||||
import { ElNotification } from 'element-plus';
|
||||
import { Session } from '/@/utils/storage';
|
||||
|
||||
const emit = defineEmits(['rollback']);
|
||||
|
||||
const props = defineProps({
|
||||
uri: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
webSocket: ref(), // webSocket实例
|
||||
lockReconnect: false, // 重连锁，避免多次重连
|
||||
maxReconnect: 6, // 最大重连次数， -1 标识无限重连
|
||||
reconnectTime: 0, // 重连尝试次数
|
||||
heartbeat: {
|
||||
interval: 30 * 1000, // 心跳间隔时间
|
||||
timeout: 10 * 1000, // 响应超时时间
|
||||
pingTimeoutObj: ref(), // 延时发送心跳的定时器
|
||||
pongTimeoutObj: ref(), // 接收心跳响应的定时器
|
||||
pingMessage: JSON.stringify({ type: 'ping' }), // 心跳请求信息
|
||||
},
|
||||
});
|
||||
|
||||
const token = computed(() => {
|
||||
return Session.getToken();
|
||||
});
|
||||
|
||||
const tenant = computed(() => {
|
||||
return Session.getTenant();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initWebSocket();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
state.webSocket.close();
|
||||
clearTimeoutObj(state.heartbeat);
|
||||
});
|
||||
|
||||
const initWebSocket = () => {
|
||||
// ws地址
|
||||
let host = window.location.host;
|
||||
// baseURL
|
||||
let baseURL = import.meta.env.VITE_API_URL;
|
||||
let wsUri = `ws://${host}${baseURL}${props.uri}?access_token=${token.value}&TENANT-ID=${tenant.value}`;
|
||||
// 建立连接
|
||||
state.webSocket = new WebSocket(wsUri);
|
||||
// 连接成功
|
||||
state.webSocket.onopen = onOpen;
|
||||
// 连接错误
|
||||
state.webSocket.onerror = onError;
|
||||
// 接收信息
|
||||
state.webSocket.onmessage = onMessage;
|
||||
// 连接关闭
|
||||
state.webSocket.onclose = onClose;
|
||||
};
|
||||
|
||||
const reconnect = () => {
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
if (state.lockReconnect || (state.maxReconnect !== -1 && state.reconnectTime > state.maxReconnect)) {
|
||||
return;
|
||||
}
|
||||
state.lockReconnect = true;
|
||||
setTimeout(() => {
|
||||
state.reconnectTime++;
|
||||
// 建立新连接
|
||||
initWebSocket();
|
||||
state.lockReconnect = false;
|
||||
}, 5000);
|
||||
};
|
||||
/**
|
||||
* 清空定时器
|
||||
*/
|
||||
const clearTimeoutObj = (heartbeat: any) => {
|
||||
heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj);
|
||||
heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj);
|
||||
};
|
||||
/**
|
||||
* 开启心跳
|
||||
*/
|
||||
const startHeartbeat = () => {
|
||||
const webSocket = state.webSocket;
|
||||
const heartbeat = state.heartbeat;
|
||||
// 清空定时器
|
||||
clearTimeoutObj(heartbeat);
|
||||
// 延时发送下一次心跳
|
||||
heartbeat.pingTimeoutObj = setTimeout(() => {
|
||||
// 如果连接正常
|
||||
if (webSocket.readyState === 1) {
|
||||
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||||
webSocket.send(heartbeat.pingMessage);
|
||||
// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器
|
||||
heartbeat.pongTimeoutObj = setTimeout(() => {
|
||||
webSocket.close();
|
||||
}, heartbeat.timeout);
|
||||
} else {
|
||||
// 否则重连
|
||||
reconnect();
|
||||
}
|
||||
}, heartbeat.interval);
|
||||
};
|
||||
|
||||
/**
|
||||
* 连接成功事件
|
||||
*/
|
||||
const onOpen = () => {
|
||||
//开启心跳
|
||||
startHeartbeat();
|
||||
state.reconnectTime = 0;
|
||||
};
|
||||
/**
|
||||
* 连接失败事件
|
||||
* @param e
|
||||
*/
|
||||
const onError = () => {
|
||||
//重连
|
||||
reconnect();
|
||||
};
|
||||
|
||||
/**
|
||||
* 连接关闭事件
|
||||
* @param e
|
||||
*/
|
||||
const onClose = () => {
|
||||
//重连
|
||||
reconnect();
|
||||
};
|
||||
/**
|
||||
* 接收服务器推送的信息
|
||||
* @param msgEvent
|
||||
*/
|
||||
const onMessage = (msgEvent: any) => {
|
||||
//收到服务器信息，心跳重置并发送
|
||||
startHeartbeat();
|
||||
const text = msgEvent.data;
|
||||
|
||||
if (text.indexOf('pong') > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
ElNotification.warning({
|
||||
title: '消息提醒',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: text + '请及时处理',
|
||||
offset: 60,
|
||||
});
|
||||
|
||||
emit('rollback', text);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,214 +1,384 @@
|
|||
import {defineStore} from "pinia";
|
||||
import {Session} from "@/utils/storage";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const vitalUrl = "ws://localhost:5173/socket.io/admin/rax/vitalSignsMedicine?token=" + Session.getToken()
|
||||
const medicineUrl = "ws://localhost:5173/socket.io/admin/rax/addMedicine?token=" + Session.getToken()
|
||||
const chatUrl = "ws://localhost:5173/socket.io/admin/rax/chatRoom?token=" + Session.getToken()
|
||||
const vitalUrl = "ws://" + window.location.host + "/socket.io/admin/rax/vitalSignsMedicine?token=" + Session.getToken()
|
||||
const medicineUrl = "ws://" + window.location.host + "/socket.io/admin/rax/addMedicine?token=" + Session.getToken()
|
||||
const chatUrl = "ws://" + window.location.host + "/socket.io/admin/rax/chatRoom?token=" + Session.getToken()
|
||||
|
||||
export const useRemoteWsStore = defineStore("remoteWs", {
|
||||
state: () => {
|
||||
return {
|
||||
patient: {} as any,
|
||||
remoteTasks: [] as any,
|
||||
remoteTasksCap: 10,
|
||||
currentTaskIndex: 0,
|
||||
varMedicine: ["丙泊酚", "舒芬太尼", "瑞芬太尼", "顺阿曲库胺"],
|
||||
fixedMedicine: ["尼卡地平", "艾司洛尔", "麻黄素", "阿托品"],
|
||||
exceptionType: ["BIS_except", "DBP_except", "EtCO2_except", "HR_except", "SBP_except", "ST_except"],
|
||||
exceptionMsg: {
|
||||
"BIS_except": "脑电双频指数异常", "DBP_except": "舒张压异常", "EtCO2_except": "呼气末二氧化碳异常",
|
||||
"HR_except": "心率异常", "SBP_except": "收缩压异常", "ST_except": "ST异常"
|
||||
} as any,
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
initRemoteTask() {
|
||||
if (this.remoteTasks.length <= 0) {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.remoteTasks.push({
|
||||
isRemote: false,
|
||||
isException: false,
|
||||
taskName: "",
|
||||
server: "",
|
||||
serverun: "",
|
||||
serverps: "",
|
||||
patient: "",
|
||||
patientId: "",
|
||||
date: "",
|
||||
log: [],
|
||||
index: i
|
||||
})
|
||||
}
|
||||
}
|
||||
return this.remoteTasks
|
||||
},
|
||||
resetRemoteTask(i: number) {
|
||||
this.remoteTasks[i] = Object.assign(this.remoteTasks[i], {
|
||||
isRemote: false,
|
||||
isException: false,
|
||||
taskName: "",
|
||||
server: "",
|
||||
serverun: "",
|
||||
serverps: "",
|
||||
patient: "",
|
||||
patientId: "",
|
||||
date: "",
|
||||
log: [],
|
||||
index: i,
|
||||
message: []
|
||||
})
|
||||
},
|
||||
getActiveRemoteTask() {
|
||||
for (let i = 0; i < this.remoteTasks.length; i++) {
|
||||
if (this.remoteTasks[i].isRemote) return i
|
||||
}
|
||||
},
|
||||
setRemoteLog(log: any, i: number) {
|
||||
this.remoteTasks[i].log.push(log)
|
||||
},
|
||||
createConnect(name: string, id: string, date: string) {
|
||||
if (!this.patient[name + id + date]) {
|
||||
const vitalWS = new WebSocket(vitalUrl)
|
||||
const medicineWS = new WebSocket(medicineUrl)
|
||||
const chatWS = new WebSocket(chatUrl)
|
||||
vitalWS.onopen = function () {
|
||||
vitalWS.send(JSON.stringify({
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date
|
||||
}))
|
||||
}
|
||||
medicineWS.onopen = function () {
|
||||
medicineWS.send(JSON.stringify({
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date
|
||||
}))
|
||||
}
|
||||
chatWS.onopen = function () {
|
||||
chatWS.send(JSON.stringify({
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date
|
||||
}))
|
||||
}
|
||||
this.patient[name + id + date] = {
|
||||
vitalWS,
|
||||
medicineWS,
|
||||
chatWS
|
||||
}
|
||||
}
|
||||
},
|
||||
disconnect(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.vitalWS.close()
|
||||
patient.medicineWS.close()
|
||||
patient.chatWS.close()
|
||||
delete this.patient[name + id + date]
|
||||
}
|
||||
},
|
||||
subscribeVital(name: string, id: string, date: string, cb: any) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.vitalWS.onmessage = cb
|
||||
patient.vitalCB = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
unsubscribeVital(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient && patient.vitalWS) {
|
||||
patient.vitalWS.onmessage = undefined;
|
||||
patient.vitalCB = undefined;
|
||||
}
|
||||
},
|
||||
sendMsg(name: string, id: string, date: string, msg: string, cb: any) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
const params = {
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date,
|
||||
msg
|
||||
}
|
||||
patient.chatWS.send(JSON.stringify(params))
|
||||
cb({
|
||||
status: 0
|
||||
})
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
subscribeChat(name: string, id: string, date: string, cb: any) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.chatCB = cb
|
||||
patient.chatWS.onmessage = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
unsubscribeChat(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
patient.chatCB = undefined;
|
||||
patient.chatWS.onmessage = undefined;
|
||||
},
|
||||
sendMedicine(args: {
|
||||
name: string,
|
||||
id: string,
|
||||
date: string,
|
||||
flag: string,
|
||||
medicine: string,
|
||||
value: string
|
||||
}, cb: any) {
|
||||
const patient: any = this.patient[args.name + args.id + args.date]
|
||||
if (patient) {
|
||||
const params = {
|
||||
patientName: args.name,
|
||||
idNum: args.id,
|
||||
date: args.date,
|
||||
flag: args.flag,
|
||||
medicine: args.medicine,
|
||||
value: args.value
|
||||
}
|
||||
patient.medicineWS.send(JSON.stringify(params))
|
||||
cb({
|
||||
status: 0
|
||||
})
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
subscribeMedicine(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.medicineCB = cb
|
||||
patient.medicineWS.onmessage = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
unsubscribeMedicine(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
patient.medicineCB = undefined;
|
||||
patient.medicineWS.onmessage = undefined;
|
||||
}
|
||||
}
|
||||
state: () => {
|
||||
return {
|
||||
patient: {} as any,
|
||||
remoteTasks: [] as any,
|
||||
remoteTasksCap: 10,
|
||||
currentTaskIndex: 0,
|
||||
varMedicine: ["丙泊酚", "舒芬太尼", "瑞芬太尼", "顺阿曲库胺"],
|
||||
fixedMedicine: ["尼卡地平", "艾司洛尔", "麻黄素", "阿托品"],
|
||||
exceptionType: ["BIS_except", "DBP_except", "EtCO2_except", "HR_except", "SBP_except", "ST_except"],
|
||||
exceptionMsg: {
|
||||
"BIS_except": "脑电双频指数异常", "DBP_except": "舒张压异常", "EtCO2_except": "呼气末二氧化碳异常",
|
||||
"HR_except": "心率异常", "SBP_except": "收缩压异常", "ST_except": "ST异常"
|
||||
} as any,
|
||||
exceptions: {} as any,
|
||||
closeStatus: {} as any
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setCurrentTaskIndex(i: number) {
|
||||
this.currentTaskIndex = i
|
||||
Session.set("currentTaskIndex", i)
|
||||
},
|
||||
getCurrentTaskIndex() {
|
||||
if (Session.get("currentTaskIndex") && Session.get("currentTaskIndex") > -1) {
|
||||
this.currentTaskIndex = Session.get("currentTaskIndex")
|
||||
}
|
||||
return this.currentTaskIndex
|
||||
},
|
||||
setExceptions(i: number, e: any) {
|
||||
this.exceptions[i] = e
|
||||
},
|
||||
getExceptions() {
|
||||
return this.exceptions
|
||||
},
|
||||
getCloseStatus() {
|
||||
return this.closeStatus
|
||||
},
|
||||
setRemoteTask() {
|
||||
Session.set("remoteTasks", this.remoteTasks)
|
||||
},
|
||||
getRemoteTask() {
|
||||
if (Session.get("remoteTasks") && !this.remoteTasks) {
|
||||
this.remoteTasks = Session.get("remoteTasks")
|
||||
}
|
||||
return this.remoteTasks
|
||||
},
|
||||
initRemoteTask() {
|
||||
if (Session.get("remoteTasks") && !this.remoteTasks) {
|
||||
this.remoteTasks = Session.get("remoteTasks")
|
||||
}
|
||||
if (this.remoteTasks.length <= 0) {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.remoteTasks.push({
|
||||
isRemote: false,
|
||||
isException: false,
|
||||
taskName: "",
|
||||
server: "",
|
||||
serverun: "",
|
||||
serverps: "",
|
||||
patient: "",
|
||||
patientId: "",
|
||||
date: "",
|
||||
log: [],
|
||||
index: i
|
||||
})
|
||||
}
|
||||
}
|
||||
return this.remoteTasks
|
||||
},
|
||||
resetRemoteTask(i: number) {
|
||||
this.remoteTasks[i] = Object.assign(this.remoteTasks[i], {
|
||||
isRemote: false,
|
||||
isException: false,
|
||||
taskName: "",
|
||||
server: "",
|
||||
serverun: "",
|
||||
serverps: "",
|
||||
patient: "",
|
||||
patientId: "",
|
||||
date: "",
|
||||
log: [],
|
||||
index: i,
|
||||
message: []
|
||||
})
|
||||
Session.set("remoteTasks", this.remoteTasks)
|
||||
},
|
||||
getActiveRemoteTask() {
|
||||
let index = 0
|
||||
for (let i = 0; i < this.remoteTasks.length; i++) {
|
||||
if (this.remoteTasks[i].isRemote) index = i
|
||||
}
|
||||
return index
|
||||
},
|
||||
setRemoteLog(log: any, i: number) {
|
||||
this.remoteTasks[i].log.push(log)
|
||||
},
|
||||
disconnect(name: string, id: string, date: string) {
|
||||
this.disconnectVital(name, id, date)
|
||||
this.disconnectChat(name, id, date)
|
||||
this.disconnectMedicine(name, id, date)
|
||||
delete this.patient[name + id + date]
|
||||
},
|
||||
createVitalConnect(name: string, id: string, date: string) {
|
||||
if (!this.patient[name + id + date]) this.patient[name + id + date] = {}
|
||||
const patient = this.patient[name + id + date]
|
||||
if (!patient['vitalWS']) {
|
||||
patient['vitalWS'] = new WebSocket(vitalUrl)
|
||||
patient.vitalWS.onopen = () => {
|
||||
patient.vitalWS.send(JSON.stringify({
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date,
|
||||
msgType: "msg"
|
||||
}))
|
||||
}
|
||||
}
|
||||
},
|
||||
subscribeVital(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.vitalWS) {
|
||||
patient.vitalWS.onmessage = (e: any) => {
|
||||
if (e && e.data) {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.msgType == "msg") {
|
||||
cb(e)
|
||||
} else {
|
||||
patient.vitalWS.send(JSON.stringify({msgType: "heartbeat"}))
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
vitalOnclose(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.vitalWS) {
|
||||
patient.vitalWS.onclose = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
vitalOnerror(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.vitalWS) {
|
||||
patient.vitalWS.onerror = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
unsubscribeVital(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.vitalWS.onmessage = undefined
|
||||
patient.vitalWS.onclose = undefined
|
||||
patient.vitalWS.onerror = undefined
|
||||
}
|
||||
},
|
||||
disconnectVital(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient && patient.vitalWS) {
|
||||
this.closeStatus[name + id + date + 'vitalWS'] = true
|
||||
patient.vitalWS.close()
|
||||
delete patient['vitalWS']
|
||||
delete this.closeStatus[name + id + date + 'vitalWS']
|
||||
}
|
||||
},
|
||||
createChatConnect(name: string, id: string, date: string) {
|
||||
if (!this.patient[name + id + date]) this.patient[name + id + date] = {}
|
||||
const patient = this.patient[name + id + date]
|
||||
if (!patient['chatWS']) {
|
||||
patient['chatWS'] = new WebSocket(chatUrl)
|
||||
patient.chatWS.onopen = function () {
|
||||
patient.chatWS.send(JSON.stringify({
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date,
|
||||
msgType: "msg"
|
||||
}))
|
||||
}
|
||||
}
|
||||
},
|
||||
subscribeChat(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.chatWS) {
|
||||
patient.chatWS.onmessage = (e: any) => {
|
||||
if (e && e.data) {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.msgType == "msg") {
|
||||
cb(e)
|
||||
} else {
|
||||
patient.chatWS.send(JSON.stringify({msgType: "heartbeat"}))
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
chatOnclose(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.chatWS) {
|
||||
patient.chatWS.onclose = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
chatOnerror(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.chatWS) {
|
||||
patient.chatWS.onerror = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
unsubscribeChat(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.chatWS.onmessage = undefined
|
||||
patient.chatWS.onclose = undefined
|
||||
patient.chatWS.onerror = undefined
|
||||
}
|
||||
},
|
||||
sendMsg(name: string, id: string, date: string, msg: string, cb: any) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
const params = {
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date,
|
||||
msg
|
||||
}
|
||||
patient.chatWS.send(JSON.stringify(params))
|
||||
cb({
|
||||
status: 0
|
||||
})
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
disconnectChat(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient && patient.chatWS) {
|
||||
this.closeStatus[name + id + date + 'chatWS'] = true
|
||||
patient.chatWS.close()
|
||||
delete patient['chatWS']
|
||||
delete this.closeStatus[name + id + date + 'chatWS']
|
||||
}
|
||||
},
|
||||
createMedicineConnect(name: string, id: string, date: string) {
|
||||
if (!this.patient[name + id + date]) this.patient[name + id + date] = {}
|
||||
const patient = this.patient[name + id + date]
|
||||
if (!patient['medicineWS']) {
|
||||
patient['medicineWS'] = new WebSocket(medicineUrl)
|
||||
patient.medicineWS.onopen = function () {
|
||||
patient.medicineWS.send(JSON.stringify({
|
||||
patientName: name,
|
||||
idNum: id,
|
||||
date: date,
|
||||
msgType: "msg"
|
||||
}))
|
||||
}
|
||||
}
|
||||
},
|
||||
subscribeMedicine(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.medicineWS.onmessage = (e: any) => {
|
||||
if (e && e.data) {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.msgType == "msg") {
|
||||
cb(e)
|
||||
} else {
|
||||
patient.medicineWS.send(JSON.stringify({msgType: "heartbeat"}))
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
medicineOnclose(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.medicineWS) {
|
||||
patient.medicineWS.onclose = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
medicineOnerror(name: string, id: string, date: string, cb: any) {
|
||||
const patient = this.patient[name + id + date]
|
||||
if (patient.medicineWS) {
|
||||
patient.medicineWS.onerror = cb
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
unsubscribeMedicine(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient) {
|
||||
patient.medicineWS.onmessage = undefined
|
||||
patient.medicineWS.onclose = undefined
|
||||
patient.medicineWS.onerror = undefined
|
||||
}
|
||||
},
|
||||
sendMedicine(args: {
|
||||
name: string,
|
||||
id: string,
|
||||
date: string,
|
||||
flag: string,
|
||||
medicine: string,
|
||||
value: string
|
||||
}, cb: any) {
|
||||
const patient: any = this.patient[args.name + args.id + args.date]
|
||||
if (patient) {
|
||||
const params = {
|
||||
patientName: args.name,
|
||||
idNum: args.id,
|
||||
date: args.date,
|
||||
flag: args.flag,
|
||||
medicine: args.medicine,
|
||||
value: args.value
|
||||
}
|
||||
patient.medicineWS.send(JSON.stringify(params))
|
||||
cb({
|
||||
status: 0
|
||||
})
|
||||
} else {
|
||||
cb({
|
||||
status: 1,
|
||||
msg: "已断开连接"
|
||||
})
|
||||
}
|
||||
},
|
||||
disconnectMedicine(name: string, id: string, date: string) {
|
||||
const patient: any = this.patient[name + id + date]
|
||||
if (patient && patient.medicineWS) {
|
||||
this.closeStatus[name + id + date + 'medicineWS'] = true
|
||||
patient.medicineWS.close()
|
||||
delete patient['medicineWS']
|
||||
delete this.closeStatus[name + id + date + 'medicineWS']
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
@ -79,7 +79,7 @@ function handleResponse(response: any) {
|
|||
|
||||
axiosInstance.interceptors.response.use(handleResponse, error => {
|
||||
const code = error.response.status || 200
|
||||
if (code == 424 || code == 401) {
|
||||
if (code == 424) {
|
||||
ElMessageBox.confirm('令牌状态已过期，请点击重新登录', "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
</div>
|
||||
<div class="header-box">
|
||||
<div class="header-item">
|
||||
<span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
|
||||
<span class="text2-color f14">{{ userInfo.roleName }}</span>
|
||||
<span class="main-color f20" style="font-weight: 600;">{{ userInfo?.name }}</span>
|
||||
<span class="text2-color f14">{{ userInfo?.roleName }}</span>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;">
|
||||
|
|
@ -55,39 +55,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-drawer
|
||||
class="message-drawer-box"
|
||||
v-model="userStore.showHomeMsg"
|
||||
title="通知消息"
|
||||
>
|
||||
<div class="body">
|
||||
<el-card style="margin-top: 10px;" v-for="(item, index) in messageTable">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.category }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text item">{{ item.message }}</p>
|
||||
<template #footer>
|
||||
<span>{{ item.creatorName }}</span>
|
||||
<span style="float: inline-end;">{{ item.createTime }}</span>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<el-pagination
|
||||
v-model:page-size="size"
|
||||
v-model:current-page="current"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
layout="prev, pager, next, jumper, sizes"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -110,10 +77,6 @@ const userStore = useUserStore();
|
|||
const userInfo = userStore.getlogin()
|
||||
const showLogMod = ref(false)
|
||||
const messages = ref([] as any)
|
||||
const messageTable = ref([] as any)
|
||||
const current = ref(1);
|
||||
const size = ref(10);
|
||||
const total = ref(0);
|
||||
const todoTotal = ref(0) // 日历添加的记录提醒统计
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -131,9 +94,6 @@ function init() {
|
|||
});
|
||||
getTodoCount();
|
||||
messages.value = [];
|
||||
messageTable.value = [];
|
||||
current.value = 1
|
||||
total.value = 0
|
||||
loadMsg();
|
||||
}
|
||||
|
||||
|
|
@ -145,25 +105,11 @@ function getTodoCount() {
|
|||
});
|
||||
}
|
||||
|
||||
function handleSizeChange() {
|
||||
messageTable.value = [];
|
||||
loadMsg()
|
||||
}
|
||||
|
||||
function handleCurrentChange() {
|
||||
messageTable.value = [];
|
||||
loadMsg()
|
||||
}
|
||||
|
||||
async function loadMsg() {
|
||||
const res = await msgApi.page(current.value, size.value)
|
||||
const res = await msgApi.page(0, 10)
|
||||
if (res.code == 0) {
|
||||
total.value = res.data.total
|
||||
res.data.records.forEach((row: any) => {
|
||||
if (current.value == 1) {
|
||||
messages.value.push(row)
|
||||
}
|
||||
messageTable.value.push(row)
|
||||
messages.value.push(row)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,96 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<div class="head-box">
|
||||
<div class="logo-box">
|
||||
<img src="@/assets/imgs/logo.png"/>
|
||||
</div>
|
||||
<ul class="menu-box">
|
||||
<li class="menu-item" v-for="item in menus" :key="item.path"
|
||||
:class="{ 'active': menuActive.indexOf(item.path) === 0 }"
|
||||
@click="menuToPath(item)"><i :class="item.meta.icon"></i><span>{{
|
||||
item.name
|
||||
}}</span></li>
|
||||
</ul>
|
||||
<div class="user-box">
|
||||
<!-- 超级管理员可切换医院 -->
|
||||
<el-select class="select-hospital" style="width: 150px;"
|
||||
v-model="hospital" size="small" @change="selectHospital">
|
||||
<el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
<!-- <el-button text>
|
||||
<el-icon>
|
||||
<Search/>
|
||||
</el-icon>
|
||||
</el-button>-->
|
||||
<el-button text @click="userStore.showHomeMsg=true">
|
||||
<el-badge is-dot>
|
||||
<el-icon>
|
||||
<Bell/>
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</el-button>
|
||||
<el-button text @click="toggleFullscreen">
|
||||
<el-icon>
|
||||
<FullScreen/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-dropdown trigger="click" @command="userCommand">
|
||||
<div class="page-content">
|
||||
<div class="head-box">
|
||||
<div class="logo-box">
|
||||
<img src="@/assets/imgs/logo.png"/>
|
||||
</div>
|
||||
<ul class="menu-box">
|
||||
<li class="menu-item" v-for="item in menus" :key="item.path"
|
||||
:class="{ 'active': menuActive.indexOf(item.path) === 0 }"
|
||||
@click="menuToPath(item)"><i :class="item.meta.icon"></i><span>{{
|
||||
item.name
|
||||
}}</span></li>
|
||||
</ul>
|
||||
<div class="user-box">
|
||||
<!-- 超级管理员可切换医院 -->
|
||||
<el-select class="select-hospital" style="width: 150px;"
|
||||
v-model="hospital" size="small" @change="selectHospital">
|
||||
<el-option v-for="(item, index) in hospitals" :key="index" :label="item.name"
|
||||
:value="item.id ? item.id : ''"/>
|
||||
</el-select>
|
||||
<!-- <el-button text>
|
||||
<el-icon>
|
||||
<Search/>
|
||||
</el-icon>
|
||||
</el-button>-->
|
||||
<el-button text @click="userStore.showHomeMsg=true">
|
||||
<el-badge is-dot>
|
||||
<el-icon>
|
||||
<Bell/>
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</el-button>
|
||||
<el-button text @click="toggleFullscreen">
|
||||
<el-icon>
|
||||
<FullScreen/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-dropdown trigger="click" @command="userCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ userInfo.name }}
|
||||
{{ userInfo?.name }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down/>
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="info">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="info">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<RouterView/>
|
||||
</div>
|
||||
<el-drawer v-model="isShowUserInfoDrawer" size="35%" :with-header="false">
|
||||
<userInfoForm @close="isShowUserInfoDrawer = false"/>
|
||||
</el-drawer>
|
||||
<el-drawer
|
||||
class="message-drawer-box"
|
||||
v-model="userStore.showHomeMsg"
|
||||
title="通知消息"
|
||||
>
|
||||
<div class="body">
|
||||
<el-card style="margin-top: 10px;" v-for="(item, index) in messageTable">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.category }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="text item">{{ item.message }}</p>
|
||||
<template #footer>
|
||||
<span>{{ item.creatorName }}</span>
|
||||
<span style="float: inline-end;">{{ item.createTime }}</span>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<el-pagination
|
||||
v-model:page-size="size"
|
||||
v-model:current-page="current"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
layout="prev, pager, next, jumper, sizes"
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<RouterView/>
|
||||
</div>
|
||||
<el-drawer v-model="isShowUserInfoDrawer" size="35%" :with-header="false">
|
||||
<userInfoForm @close="isShowUserInfoDrawer = false"/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
@ -67,6 +101,7 @@ import {useUserStore} from '@/stores/user-info-store'
|
|||
import userInfoForm from '@/components/user-info.vue'
|
||||
import {logout} from "@/api/login";
|
||||
import * as hospitalApi from "@/api/hospital";
|
||||
import * as msgApi from "@/api/sys-message";
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
|
@ -78,211 +113,238 @@ const hospitals = ref([] as any)
|
|||
const menus = ref([] as any)
|
||||
const isShowUserInfoDrawer = ref(false)
|
||||
const menuActive = ref('/')
|
||||
const messageTable = ref([] as any)
|
||||
const current = ref(1);
|
||||
const size = ref(10);
|
||||
const total = ref(0);
|
||||
|
||||
router.isReady().then(() => {
|
||||
menuActive.value = route.path
|
||||
menuActive.value = route.path
|
||||
})
|
||||
router.beforeEach((to, from, next) => {
|
||||
menuActive.value = to.path
|
||||
next()
|
||||
menuActive.value = to.path
|
||||
next()
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
init();
|
||||
})
|
||||
|
||||
function init() {
|
||||
getHospitalList();
|
||||
handleMenu();
|
||||
getHospitalList();
|
||||
handleMenu();
|
||||
messageTable.value = [];
|
||||
current.value = 1
|
||||
total.value = 0
|
||||
}
|
||||
|
||||
function handleMenu() {
|
||||
useUserStore().getMenuPathList().then((res: any) => {
|
||||
menus.value = res.menus;
|
||||
});
|
||||
useUserStore().getMenuPathList().then((res: any) => {
|
||||
menus.value = res.menus;
|
||||
});
|
||||
}
|
||||
|
||||
function handleSizeChange() {
|
||||
messageTable.value = [];
|
||||
loadMsg()
|
||||
}
|
||||
|
||||
function handleCurrentChange() {
|
||||
messageTable.value = [];
|
||||
loadMsg()
|
||||
}
|
||||
|
||||
async function loadMsg() {
|
||||
const res = await msgApi.page(current.value, size.value)
|
||||
if (res.code == 0) {
|
||||
total.value = res.data.total
|
||||
res.data.records.forEach((row: any) => {
|
||||
messageTable.value.push(row)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const menuToPath = (e: any) => {
|
||||
menuActive.value = e.path
|
||||
router.push(e.path)
|
||||
menuActive.value = e.path
|
||||
router.push(e.children.length > 0 ? (e.children[0].path ? e.children[0].path : e.path) : e.path)
|
||||
}
|
||||
|
||||
async function getHospitalList() {
|
||||
const data: any = await hospitalApi.getCurrentHospital();
|
||||
hospitalApi.getMyHospitalList().then((res: any) => {
|
||||
hospitals.value = [];
|
||||
if (res.code == 0 && res.data.length > 0) {
|
||||
hospitals.value = res.data;
|
||||
if (data.data) {
|
||||
hospital.value = data.data;
|
||||
}
|
||||
preHospital.value = hospital.value
|
||||
}
|
||||
})
|
||||
const data: any = await hospitalApi.getCurrentHospital();
|
||||
hospitalApi.getMyHospitalList().then((res: any) => {
|
||||
hospitals.value = [];
|
||||
if (res.code == 0 && res.data.length > 0) {
|
||||
hospitals.value = res.data;
|
||||
if (data.data && data.data != 'null') {
|
||||
hospital.value = data.data;
|
||||
}
|
||||
preHospital.value = hospital.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 切换医院
|
||||
const selectHospital = (e: any) => {
|
||||
if (hospitals.value.length == 0) return;
|
||||
// 根据实际情况看是否需要重新登录
|
||||
ElMessageBox.confirm(
|
||||
'是否跳转到所选择医院？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
hospitalApi.changeHospital(hospital.value).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
if (hospitals.value.length == 0) return;
|
||||
// 根据实际情况看是否需要重新登录
|
||||
ElMessageBox.confirm(
|
||||
'是否跳转到所选择医院？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
hospitalApi.changeHospital(hospital.value).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
hospital.value = preHospital.value;
|
||||
ElMessage.error("切换失败")
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
hospital.value = preHospital.value;
|
||||
ElMessage.error("切换失败")
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
hospital.value = preHospital.value;
|
||||
})
|
||||
}
|
||||
const toggleFullscreen = () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
const userCommand = async (e: string) => {
|
||||
switch (e) {
|
||||
case 'logout':
|
||||
await logout()
|
||||
useUserStore().logout();
|
||||
window.location.replace("/");
|
||||
break;
|
||||
case 'info':
|
||||
isShowUserInfoDrawer.value = true
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
switch (e) {
|
||||
case 'logout':
|
||||
await logout()
|
||||
useUserStore().logout();
|
||||
window.location.replace("/");
|
||||
break;
|
||||
case 'info':
|
||||
isShowUserInfoDrawer.value = true
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.page-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.head-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 0 464px 0 284px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.logo-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: $main-color;
|
||||
.head-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
transition: all .5s;
|
||||
-webkit-transition: all .5s;
|
||||
padding: 0 464px 0 284px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: #f2f3f5;
|
||||
transition: all .5s;
|
||||
-webkit-transition: all .5s;
|
||||
.logo-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #f2f3f5;
|
||||
transition: all .5s;
|
||||
-webkit-transition: all .5s;
|
||||
|
||||
.menu-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: $main-color;
|
||||
height: 70px;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
transition: all .5s;
|
||||
-webkit-transition: all .5s;
|
||||
|
||||
&:hover {
|
||||
background: #f2f3f5;
|
||||
transition: all .5s;
|
||||
-webkit-transition: all .5s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #f2f3f5;
|
||||
transition: all .5s;
|
||||
-webkit-transition: all .5s;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
.user-box {
|
||||
position: absolute;
|
||||
width: 440px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background: white;
|
||||
|
||||
.select-hospital {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.area {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: $main-color;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
border: 1px solid #8c9094;
|
||||
border-radius: 7px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
& > .el-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > .el-dropdown {
|
||||
flex-shrink: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
position: absolute;
|
||||
width: 440px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
background: white;
|
||||
|
||||
.select-hospital {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.area {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: $main-color;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
border: 1px solid #8c9094;
|
||||
border-radius: 7px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
& > .el-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > .el-dropdown {
|
||||
flex-shrink: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
& > .main-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
& > .main-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-width: 1610px) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {dateFormater} from '@/utils/date-util';
|
|||
import {useRemoteWsStore} from "@/stores/remote-ws-store";
|
||||
|
||||
const chartDom = ref();
|
||||
const props = withDefaults(defineProps<{ names?: string[] }>(), {
|
||||
const props = withDefaults(defineProps<{ names?: any }>(), {
|
||||
names: ['CH1', 'CH2']
|
||||
});
|
||||
defineExpose({
|
||||
|
|
@ -67,7 +67,7 @@ function chartInit() {
|
|||
formatter: (params: any) => {
|
||||
let str = params[0].axisValue;
|
||||
str += `<br>`;
|
||||
props.names.forEach((item, index) => {
|
||||
props.names.forEach((item: any, index: any) => {
|
||||
str += params[index].marker;
|
||||
str += params[index].seriesName + ' ';
|
||||
str += `${params[index].value} HZ`;
|
||||
|
|
@ -124,8 +124,8 @@ function getXData() {
|
|||
}
|
||||
|
||||
function getSeries() {
|
||||
props.names.forEach((name, index) => {
|
||||
const serie = {
|
||||
props.names.forEach((name: any, index: any) => {
|
||||
const serie: any = {
|
||||
name,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="chart-dom-box">
|
||||
<div ref="chartDom" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="chart-dom-box">
|
||||
<div ref="chartDom" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -12,12 +12,12 @@ import {useRemoteWsStore} from "@/stores/remote-ws-store";
|
|||
|
||||
const chartDom = ref();
|
||||
const props = withDefaults(defineProps<{
|
||||
names: string[]
|
||||
names: any
|
||||
}>(), {
|
||||
names: ['BIS', 'HR']
|
||||
names: ['BIS', 'HR']
|
||||
});
|
||||
defineExpose({
|
||||
updateChartData
|
||||
updateChartData
|
||||
});
|
||||
const emit = defineEmits(["exceptionEvent"]);
|
||||
let chart: any;
|
||||
|
|
@ -29,191 +29,191 @@ let currentNode: any;
|
|||
const remoteWsStore = useRemoteWsStore();
|
||||
|
||||
onMounted(() => {
|
||||
chartInit();
|
||||
chartInit();
|
||||
});
|
||||
|
||||
function updateChartData(data: any) {
|
||||
if (data) {
|
||||
if (currentNode && currentNode.Time == data.Time) {
|
||||
return;
|
||||
} else {
|
||||
currentNode = data;
|
||||
if (data) {
|
||||
if (currentNode && currentNode.Time == data.Time) {
|
||||
return;
|
||||
} else {
|
||||
currentNode = data;
|
||||
}
|
||||
xData.shift();
|
||||
xData.push(dateFormater("HH:mm:ss", data.Time ? data.Time - 8 * 60 * 60 * 1000 : ''));
|
||||
series.forEach((serie: any) => {
|
||||
serie.data.shift();
|
||||
serie.data.push(data[serie.name]);
|
||||
if (data[serie.name + '_except']) {
|
||||
emit("exceptionEvent", remoteWsStore.exceptionMsg[serie.name + '_except']);
|
||||
}
|
||||
})
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: xData,
|
||||
},
|
||||
series,
|
||||
})
|
||||
}
|
||||
xData.shift();
|
||||
xData.push(dateFormater("HH:mm:ss", data.Time ? data.Time - 8 * 60 * 60 * 1000 : ''));
|
||||
series.forEach(serie => {
|
||||
serie.data.shift();
|
||||
serie.data.push(data[serie.name]);
|
||||
if (data[serie.name + '_except']) {
|
||||
emit("exceptionEvent", remoteWsStore.exceptionMsg[serie.name + '_except']);
|
||||
}
|
||||
})
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: xData,
|
||||
},
|
||||
series,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function chartInit() {
|
||||
chart = echarts.init(chartDom.value as HTMLElement);
|
||||
chart.clear();
|
||||
getSeries();
|
||||
getXData();
|
||||
getLegendData();
|
||||
const option: any = {
|
||||
color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
let str = '';
|
||||
str += params[0].axisValue;
|
||||
str += '<br>';
|
||||
props.names.forEach((item, index) => {
|
||||
str += params[index].marker;
|
||||
str += params[index].seriesName + ' ';
|
||||
switch (item) {
|
||||
case 'BIS':
|
||||
str += `脑电双频指数<麻醉深度>：${params[index].value}`;
|
||||
break;
|
||||
case 'HR':
|
||||
str += `心率：${params[index].value} 次/分`;
|
||||
break;
|
||||
case 'SBP':
|
||||
str += `收缩压：${params[index].value} mmHg`;
|
||||
break;
|
||||
case 'DBP':
|
||||
str += `舒张压：${params[index].value} mmHg`;
|
||||
break;
|
||||
case 'SPO2':
|
||||
str += `体温：${params[index].value}`;
|
||||
break;
|
||||
case 'TEMP':
|
||||
str += `氧饱和度：${params[index].value}`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
str += index === 0 ? '<br>' : '';
|
||||
});
|
||||
return str;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'plain',
|
||||
show: true,
|
||||
top: 0,
|
||||
right: 15,
|
||||
itemGap: 30,
|
||||
itemWidth: 20,
|
||||
itemHeight: 3,
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
lineHeight: 30,
|
||||
},
|
||||
formatter: (params: string) => {
|
||||
const index = props.names.findIndex((item) => item === params);
|
||||
let str = params + ' ';
|
||||
switch (params) {
|
||||
case 'BIS':
|
||||
str += `${series[index].data[series[index].data.length - 1]}`;
|
||||
break;
|
||||
case 'HR':
|
||||
str += `${series[index].data[series[index].data.length - 1]} 次/分`;
|
||||
break;
|
||||
case 'SBP':
|
||||
str += `${series[index].data[series[index].data.length - 1]} mmHg`;
|
||||
break;
|
||||
case 'DBP':
|
||||
str += `${series[index].data[series[index].data.length - 1]} mmHg`;
|
||||
break;
|
||||
case 'SPO2':
|
||||
str += `${series[index].data[series[index].data.length - 1]}`;
|
||||
break;
|
||||
case 'TEMP':
|
||||
str += `${series[index].data[series[index].data.length - 1]}`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
data: legendData
|
||||
},
|
||||
grid: {
|
||||
left: 5,
|
||||
right: 25,
|
||||
bottom: 5,
|
||||
top: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {lineStyle: {color: '#006080'}}
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: `{value} ${props.names[0] === 'BIS' ? '次/分' : props.names[0] === 'SBP' ? 'mmHg' : ''}`
|
||||
},
|
||||
axisLine: {show: true, lineStyle: {color: '#006080'}},
|
||||
splitLine: {lineStyle: {color: '#C0C4CC', width: 1, type: 'dashed'}},
|
||||
},
|
||||
series,
|
||||
};
|
||||
if (props.names[0] !== 'BIS'
|
||||
) {
|
||||
option.yAxis.max = (value: any) => value.max + 20;
|
||||
}
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
window.addEventListener('resize', () => {
|
||||
chart.resize();
|
||||
});
|
||||
chart = echarts.init(chartDom.value as HTMLElement);
|
||||
chart.clear();
|
||||
getSeries();
|
||||
getXData();
|
||||
getLegendData();
|
||||
const option: any = {
|
||||
color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
let str = '';
|
||||
str += params[0].axisValue;
|
||||
str += '<br>';
|
||||
props.names.forEach((item: any, index: any) => {
|
||||
str += params[index].marker;
|
||||
str += params[index].seriesName + ' ';
|
||||
switch (item) {
|
||||
case 'BIS':
|
||||
str += `脑电双频指数<麻醉深度>：${params[index].value}`;
|
||||
break;
|
||||
case 'HR':
|
||||
str += `心率：${params[index].value} 次/分`;
|
||||
break;
|
||||
case 'SBP':
|
||||
str += `收缩压：${params[index].value} mmHg`;
|
||||
break;
|
||||
case 'DBP':
|
||||
str += `舒张压：${params[index].value} mmHg`;
|
||||
break;
|
||||
case 'SPO2':
|
||||
str += `体温：${params[index].value}`;
|
||||
break;
|
||||
case 'TEMP':
|
||||
str += `氧饱和度：${params[index].value}`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
str += index === 0 ? '<br>' : '';
|
||||
});
|
||||
return str;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'plain',
|
||||
show: true,
|
||||
top: 0,
|
||||
right: 15,
|
||||
itemGap: 30,
|
||||
itemWidth: 20,
|
||||
itemHeight: 3,
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
lineHeight: 30,
|
||||
},
|
||||
formatter: (params: string) => {
|
||||
const index = props.names.findIndex((item: any) => item === params);
|
||||
let str = params + ' ';
|
||||
switch (params) {
|
||||
case 'BIS':
|
||||
str += `${series[index].data[series[index].data.length - 1]}`;
|
||||
break;
|
||||
case 'HR':
|
||||
str += `${series[index].data[series[index].data.length - 1]} 次/分`;
|
||||
break;
|
||||
case 'SBP':
|
||||
str += `${series[index].data[series[index].data.length - 1]} mmHg`;
|
||||
break;
|
||||
case 'DBP':
|
||||
str += `${series[index].data[series[index].data.length - 1]} mmHg`;
|
||||
break;
|
||||
case 'SPO2':
|
||||
str += `${series[index].data[series[index].data.length - 1]}`;
|
||||
break;
|
||||
case 'TEMP':
|
||||
str += `${series[index].data[series[index].data.length - 1]}`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
data: legendData
|
||||
},
|
||||
grid: {
|
||||
left: 5,
|
||||
right: 25,
|
||||
bottom: 5,
|
||||
top: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {lineStyle: {color: '#006080'}}
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: `{value} ${props.names[0] === 'BIS' ? '次/分' : props.names[0] === 'SBP' ? 'mmHg' : ''}`
|
||||
},
|
||||
axisLine: {show: true, lineStyle: {color: '#006080'}},
|
||||
splitLine: {lineStyle: {color: '#C0C4CC', width: 1, type: 'dashed'}},
|
||||
},
|
||||
series,
|
||||
};
|
||||
if (props.names[0] !== 'BIS'
|
||||
) {
|
||||
option.yAxis.max = (value: any) => value.max + 20;
|
||||
}
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
window.addEventListener('resize', () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getSeries() {
|
||||
props.names.forEach(name => {
|
||||
const serie = {
|
||||
name,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
data: [] as number[],
|
||||
};
|
||||
for (let i = 0; i < 10; i++) {
|
||||
serie.data.push(0);
|
||||
}
|
||||
series.push(serie)
|
||||
});
|
||||
props.names.forEach((name: any) => {
|
||||
const serie = {
|
||||
name,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
data: [] as number[],
|
||||
};
|
||||
for (let i = 0; i < 10; i++) {
|
||||
serie.data.push(0);
|
||||
}
|
||||
series.push(serie)
|
||||
});
|
||||
}
|
||||
|
||||
function getXData() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
xData.push(0);
|
||||
}
|
||||
for (let i = 0; i < 10; i++) {
|
||||
xData.push(0);
|
||||
}
|
||||
}
|
||||
|
||||
function getLegendData() {
|
||||
props.names.forEach((name, index) => {
|
||||
legendData.push({
|
||||
name,
|
||||
textStyle: {color: colors[index]},
|
||||
});
|
||||
});
|
||||
props.names.forEach((name: any, index: any) => {
|
||||
legendData.push({
|
||||
name,
|
||||
textStyle: {color: colors[index]},
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-dom-box {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import {onMounted} from 'vue'
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {useUserStore} from "@/stores/user-info-store";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="message-item-part">
|
||||
<div class="tag-index">{{ index + 1 }}</div>
|
||||
<ul ref="listRef">
|
||||
<li v-for="(item, i) in remoteWsStore.remoteTasks[index]?.log || []" :key="i">
|
||||
<li v-for="(item, i) in remoteWsStore.getRemoteTask()[index]?.log || []" :key="i">
|
||||
<span>{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</span>
|
||||
<span>{{ item.taskName }}</span>
|
||||
<span>{{ item.state }}</span>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</div>
|
||||
<div ref="listRef" class="content">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]?.log || []" :key="index"
|
||||
<el-timeline-item v-for="(item, index) in remoteWsStore.getRemoteTask()[remoteWsStore.getCurrentTaskIndex()]?.log || []" :key="index"
|
||||
:timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
|
||||
:class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }">
|
||||
{{ item.taskName + ' ' + item.state }}
|
||||
|
|
@ -20,7 +20,6 @@ import {ref} from 'vue'
|
|||
import {dateFormater} from '@/utils/date-util'
|
||||
import {useRemoteWsStore} from "@/stores/remote-ws-store";
|
||||
|
||||
|
||||
defineExpose({
|
||||
setData,
|
||||
scrollToBottom
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
<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.serverun }}</p>
|
||||
<p>密码：*********</p>
|
||||
<br>-->
|
||||
<p class="input-box"><span>输入病人姓名：</span>
|
||||
<el-input v-model="patientInfo.patient"></el-input>
|
||||
</p>
|
||||
<p class="input-box"><span>输入病人身份证号：</span>
|
||||
<el-input v-model="patientInfo.patientId"></el-input>
|
||||
</p>
|
||||
<p class="input-box"><span>请选择手术时间：</span>
|
||||
<el-date-picker
|
||||
v-model="patientInfo.date"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
/>
|
||||
</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" style="margin-left: 50px;" @click="dialogVisible = false">返回</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<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.serverun }}</p>
|
||||
<p>密码：*********</p>
|
||||
<br>-->
|
||||
<p class="input-box"><span>输入病人姓名：</span>
|
||||
<el-input v-model="patientInfo.patient"></el-input>
|
||||
</p>
|
||||
<p class="input-box"><span>输入病人身份证号：</span>
|
||||
<el-input v-model="patientInfo.patientId"></el-input>
|
||||
</p>
|
||||
<p class="input-box"><span>请选择手术时间：</span>
|
||||
<el-date-picker
|
||||
v-model="patientInfo.date"
|
||||
type="date"
|
||||
placeholder="请选择日期"
|
||||
/>
|
||||
</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" style="margin-left: 50px;" @click="dialogVisible = false">返回</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
@ -45,58 +45,58 @@ const patientInfo = ref({} as any)
|
|||
const remoteWsStore = useRemoteWsStore();
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
open,
|
||||
close,
|
||||
})
|
||||
|
||||
function open(i: number) {
|
||||
patientInfo.value = remoteWsStore.remoteTasks[i];
|
||||
patientInfo.value.date = new Date();
|
||||
dialogVisible.value = true;
|
||||
patientInfo.value = remoteWsStore.getRemoteTask()[i]
|
||||
patientInfo.value.date = new Date();
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function close() {
|
||||
dialogVisible.value = false
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const confirmRemote = () => {
|
||||
if (patientInfo.value.patientId && patientInfo.value.patient) {
|
||||
ElMessage.success('连接成功！')
|
||||
patientInfo.value.isRemote = true
|
||||
patientInfo.value.taskName = '远程控制' + (patientInfo.value.index + 1)
|
||||
patientInfo.value.date = dateFormater("yyyyMMdd", patientInfo.value.date)
|
||||
unsubscribeLastTask();
|
||||
remoteWsStore.$patch({currentTaskIndex: patientInfo.value.index})
|
||||
remoteWsStore.setRemoteLog({
|
||||
time: new Date(),
|
||||
taskName: patientInfo.value.taskName,
|
||||
state: '连接成功',
|
||||
type: "normal"
|
||||
}, remoteWsStore.currentTaskIndex)
|
||||
emit('confirmRemote', patientInfo.value)
|
||||
close()
|
||||
} else {
|
||||
remoteWsStore.setRemoteLog({
|
||||
time: new Date(),
|
||||
taskName: patientInfo.value.taskName,
|
||||
state: '连接失败'
|
||||
}, patientInfo.value.index)
|
||||
ElMessage.error('连接失败！')
|
||||
emit('errorRemote', patientInfo.value)
|
||||
}
|
||||
if (patientInfo.value.patientId && patientInfo.value.patient) {
|
||||
ElMessage.success('连接成功！')
|
||||
patientInfo.value.isRemote = true
|
||||
patientInfo.value.taskName = '远程控制' + (patientInfo.value.index + 1)
|
||||
patientInfo.value.date = dateFormater("yyyyMMdd", patientInfo.value.date)
|
||||
unsubscribeLastTask()
|
||||
remoteWsStore.setCurrentTaskIndex(patientInfo.value.index)
|
||||
remoteWsStore.setRemoteLog({
|
||||
time: new Date(),
|
||||
taskName: patientInfo.value.taskName,
|
||||
state: '连接成功',
|
||||
type: "normal"
|
||||
}, remoteWsStore.getCurrentTaskIndex())
|
||||
emit('confirmRemote', patientInfo.value)
|
||||
close()
|
||||
} else {
|
||||
remoteWsStore.setRemoteLog({
|
||||
time: new Date(),
|
||||
taskName: patientInfo.value.taskName,
|
||||
state: '连接失败'
|
||||
}, patientInfo.value.index)
|
||||
ElMessage.error('连接失败！')
|
||||
emit('errorRemote', patientInfo.value)
|
||||
}
|
||||
}
|
||||
const breakRemote = () => {
|
||||
ElMessage.info('连接已断开！')
|
||||
emit('breakRemote', patientInfo.value)
|
||||
close()
|
||||
ElMessage.info('连接已断开！')
|
||||
emit('breakRemote', patientInfo.value)
|
||||
close()
|
||||
}
|
||||
|
||||
const unsubscribeLastTask = () => {
|
||||
const lastTaskIndex = remoteWsStore.currentTaskIndex;
|
||||
const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex];
|
||||
if (lastTask) {
|
||||
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date);
|
||||
}
|
||||
const lastTaskIndex = remoteWsStore.getCurrentTaskIndex();
|
||||
const lastTask: any = remoteWsStore.getRemoteTask()[lastTaskIndex];
|
||||
if (lastTask) {
|
||||
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -107,34 +107,42 @@ const unsubscribeLastTask = () => {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&>img {
|
||||
|
||||
& > 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 {
|
||||
& > 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;
|
||||
|
|
@ -151,11 +159,12 @@ const unsubscribeLastTask = () => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
|
||||
.el-button {
|
||||
font-weight: 600;
|
||||
padding: 15px 50px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,114 +1,131 @@
|
|||
<template>
|
||||
<div class="remote-item-part">
|
||||
<div class="title">
|
||||
<span>{{ remoteTask.taskName || '远程控制' }}</span>
|
||||
</div>
|
||||
<div class="content mini" :class="{ 'is-total': remoteTask.isRemote }">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ remoteTask.patient }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ remoteTask.patientId }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">手术时间</span>
|
||||
<span class="input-value">{{
|
||||
remoteTask.date
|
||||
}}</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.BIS_except }">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{ 'alarm': patientInfo.SBP_except }">
|
||||
<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 class="row-item yellow" :class="{ 'alarm': patientInfo.DBP_except }">
|
||||
<span class="label">DBP</span>
|
||||
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow" :class="{ 'alarm': patientInfo.HR_except }">
|
||||
<span class="label">HR</span>
|
||||
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow">
|
||||
<span class="label">TEMP</span>
|
||||
<span class="value">{{ patientInfo.TEMP }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<img src="@/assets/imgs/main_body_intact.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remote-item-part">
|
||||
<div class="title">
|
||||
<span>{{ remoteTask.taskName || '远程控制' }}</span>
|
||||
</div>
|
||||
<div class="content mini" :class="{ 'is-total': remoteTask.isRemote }">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ remoteTask.patient }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ remoteTask.patientId }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">手术时间</span>
|
||||
<span class="input-value">{{
|
||||
remoteTask.date
|
||||
}}</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.BIS_except }">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{ 'alarm': patientInfo.SBP_except }">
|
||||
<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 class="row-item yellow" :class="{ 'alarm': patientInfo.DBP_except }">
|
||||
<span class="label">DBP</span>
|
||||
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow" :class="{ 'alarm': patientInfo.HR_except }">
|
||||
<span class="label">HR</span>
|
||||
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow">
|
||||
<span class="label">TEMP</span>
|
||||
<span class="value">{{ patientInfo.TEMP }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<img src="@/assets/imgs/main_body_intact.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import {onMounted, onUnmounted, ref} from 'vue'
|
||||
import {useRemoteWsStore} from "@/stores/remote-ws-store";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const props = withDefaults(defineProps<{ index: number }>(), {
|
||||
index: () => 0
|
||||
index: () => 0
|
||||
})
|
||||
const emit = defineEmits(['addLogAfter'])
|
||||
const remoteWsStore = useRemoteWsStore();
|
||||
const remoteTask = ref(remoteWsStore.remoteTasks[props.index]);
|
||||
const remoteTask = ref(remoteWsStore.getRemoteTask()[props.index]);
|
||||
const patientInfo = ref({} as any)
|
||||
|
||||
onMounted(() => {
|
||||
// 连接成功执行查询
|
||||
if (remoteTask.value.isRemote) {
|
||||
initData()
|
||||
}
|
||||
// 连接成功执行查询
|
||||
if (remoteTask.value.isRemote) {
|
||||
initData()
|
||||
}
|
||||
})
|
||||
onUnmounted(() => {
|
||||
remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date);
|
||||
remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date);
|
||||
})
|
||||
|
||||
function initData() {
|
||||
subscribeVital();
|
||||
onClose()
|
||||
subscribeVital()
|
||||
}
|
||||
|
||||
function subscribeVital() {
|
||||
remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, (res: any) => {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.vitalSignsList && data.vitalSignsList.length > 0) {
|
||||
Object.assign(patientInfo.value, data.vitalSignsList[0]);
|
||||
patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
|
||||
patientInfo.value.DBP_except || patientInfo.value.HR_except);
|
||||
setLog(patientInfo.value, props.index)
|
||||
emit('addLogAfter', props.index)
|
||||
}
|
||||
})
|
||||
remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, (res: any) => {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.vitalSignsList && data.vitalSignsList.length > 0) {
|
||||
Object.assign(patientInfo.value, data.vitalSignsList[0]);
|
||||
patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
|
||||
patientInfo.value.DBP_except || patientInfo.value.HR_except);
|
||||
setLog(patientInfo.value, props.index)
|
||||
emit('addLogAfter', props.index)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
remoteWsStore.vitalOnclose(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, () => {
|
||||
ElMessage.info('远程' + props.index + '已断开！')
|
||||
const status = remoteWsStore.getCloseStatus()
|
||||
if (!status[remoteTask.value.patient + remoteTask.value.patientId + remoteTask.value.date + 'vitalWS']) {
|
||||
setTimeout(() => {
|
||||
initData()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function setLog(data: any, index: number) {
|
||||
remoteWsStore.exceptionType.forEach((item: any) => {
|
||||
if (data[item]) {
|
||||
const msg: any = remoteWsStore.exceptionMsg[item];
|
||||
remoteWsStore.setRemoteLog({
|
||||
state: msg,
|
||||
taskName: remoteTask.value.taskName,
|
||||
time: new Date(),
|
||||
type: "exception"
|
||||
}, index);
|
||||
if (remoteWsStore.getExceptions()[index]?.Time != data.Time) {
|
||||
remoteWsStore.setExceptions(index, data)
|
||||
remoteWsStore.exceptionType.forEach((item: any) => {
|
||||
if (data[item]) {
|
||||
const msg: any = remoteWsStore.exceptionMsg[item];
|
||||
remoteWsStore.setRemoteLog({
|
||||
state: msg,
|
||||
taskName: remoteTask.value.taskName,
|
||||
time: item.Time,
|
||||
type: "exception"
|
||||
}, index);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -117,233 +134,235 @@ function setLog(data: any, index: number) {
|
|||
$size: 20px;
|
||||
|
||||
.remote-item-part {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
transition: all .6s;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: rgba(black, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
font-size: $size*0.7;
|
||||
text-align: center;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - #{$size});
|
||||
padding: $size*0.5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.common-box {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
transition: all .6s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
@extend .common-box;
|
||||
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: rgba(black, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
color: white;
|
||||
font-size: $size*0.6;
|
||||
line-height: $size;
|
||||
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% - $size*0.5);
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 50%;
|
||||
height: $size;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
font-size: $size*0.7;
|
||||
text-align: center;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
|
||||
.unit {
|
||||
font-size: $size*0.6;
|
||||
font-family: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box .value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
|
||||
.row-item.alarm {
|
||||
.label {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: red !important;
|
||||
border-color: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: 100%;
|
||||
|
||||
.row-item {
|
||||
padding: $size*0.5 0;
|
||||
height: $size;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: $size*3;
|
||||
height: $size;
|
||||
background: transparent;
|
||||
color: $main-color;
|
||||
font-size: $size*0.6;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
width: 100%;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
font-size: $size*0.6;
|
||||
color: $main-color;
|
||||
border-bottom: 1px solid $border2-color;
|
||||
}
|
||||
|
||||
.tag-value {
|
||||
margin-left: $size*0.5;
|
||||
padding: 0 $size*0.5;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
font-size: $size*0.7;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
background: $border2-color;
|
||||
border-radius: 8px;
|
||||
|
||||
&.normal {
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
&.mini {
|
||||
padding: $size;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - #{$size});
|
||||
padding: $size*0.5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-box {
|
||||
width: 50%;
|
||||
}
|
||||
.common-box {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.is-total {
|
||||
.left-box {
|
||||
.info-box {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@extend .common-box;
|
||||
|
||||
.row-item.yellow {
|
||||
.label {
|
||||
background: $main-color;
|
||||
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: $size;
|
||||
color: white;
|
||||
font-size: $size*0.6;
|
||||
line-height: $size;
|
||||
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% - $size * 0.5);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
width: 50%;
|
||||
height: $size;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
font-size: $size*0.7;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
|
||||
.unit {
|
||||
font-size: $size*0.6;
|
||||
font-family: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box .value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
|
||||
.row-item.alarm {
|
||||
.label {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: red !important;
|
||||
border-color: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: 100%;
|
||||
|
||||
.row-item {
|
||||
padding: $size*0.5 0;
|
||||
height: $size;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: $size*3;
|
||||
height: $size;
|
||||
background: transparent;
|
||||
color: $main-color;
|
||||
font-size: $size*0.6;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
width: 100%;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
font-size: $size*0.6;
|
||||
color: $main-color;
|
||||
border-bottom: 1px solid $border2-color;
|
||||
}
|
||||
|
||||
.tag-value {
|
||||
margin-left: $size*0.5;
|
||||
padding: 0 $size*0.5;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
font-size: $size*0.7;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
background: $border2-color;
|
||||
border-radius: 8px;
|
||||
|
||||
&.normal {
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mini {
|
||||
padding: $size;
|
||||
|
||||
.left-box {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.is-total {
|
||||
.left-box {
|
||||
.info-box {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-item.yellow {
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -1,124 +1,125 @@
|
|||
<template>
|
||||
<div class="remote-part">
|
||||
<div class="title">
|
||||
<span>{{ remoteItem?.taskName || '远程控制' }}</span>
|
||||
<el-button v-if="remoteItem?.taskName" class="break-btn" @click="breakRemote">断开连接</el-button>
|
||||
</div>
|
||||
<!-- 小分辨率 -->
|
||||
<div v-if="mediaMini800" class="content mini" :class="{'is-total': remoteItem?.isRemote}">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ remoteItem.patient }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ remoteItem.patientId }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">手术时间</span>
|
||||
<span class="input-value">{{
|
||||
remoteItem.date
|
||||
}}</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.BIS_except}">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.SBP_except}">
|
||||
<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 class="row-item yellow" :class="{'alarm': patientInfo.DBP_except}">
|
||||
<span class="label">DBP</span>
|
||||
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow" :class="{'alarm': patientInfo.HR_except}">
|
||||
<span class="label">HR</span>
|
||||
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow">
|
||||
<span class="label">TEMP</span>
|
||||
<span class="value">{{ patientInfo.TEMP }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<img src="@/assets/imgs/main_body_intact.png">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="content" :class="{'is-total': remoteItem?.isRemote}">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ remoteItem.patient }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ remoteItem.patientId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.BIS_except}">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.SBP_except}">
|
||||
<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">{{
|
||||
remoteItem.date
|
||||
}}</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_except}">
|
||||
<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_except}">
|
||||
<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>
|
||||
<div class="remote-part">
|
||||
<div class="title">
|
||||
<span>{{ remoteItem?.taskName || '远程控制' }}</span>
|
||||
<el-button v-if="remoteItem?.taskName" class="break-btn" @click="breakRemote">断开连接</el-button>
|
||||
</div>
|
||||
<!-- 小分辨率 -->
|
||||
<div v-if="mediaMini800" class="content mini" :class="{'is-total': remoteItem?.isRemote}">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ remoteItem.patient }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ remoteItem.patientId }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">手术时间</span>
|
||||
<span class="input-value">{{
|
||||
remoteItem.date
|
||||
}}</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.BIS_except}">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.SBP_except}">
|
||||
<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 class="row-item yellow" :class="{'alarm': patientInfo.DBP_except}">
|
||||
<span class="label">DBP</span>
|
||||
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow" :class="{'alarm': patientInfo.HR_except}">
|
||||
<span class="label">HR</span>
|
||||
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
|
||||
</div>
|
||||
<div class="row-item yellow">
|
||||
<span class="label">TEMP</span>
|
||||
<span class="value">{{ patientInfo.TEMP }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<img src="@/assets/imgs/main_body_intact.png">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="content" :class="{'is-total': remoteItem?.isRemote}">
|
||||
<div class="left-box">
|
||||
<div class="info-box">
|
||||
<div class="row-item">
|
||||
<span class="label">病人名称</span>
|
||||
<span class="input-value">{{ remoteItem.patient }}</span>
|
||||
</div>
|
||||
<div class="row-item">
|
||||
<span class="label">住院号</span>
|
||||
<span class="input-value">{{ remoteItem.patientId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.BIS_except}">
|
||||
<span class="label">BIS</span>
|
||||
<span class="value">{{ patientInfo.BIS }}</span>
|
||||
</div>
|
||||
<div class="row-item" :class="{'alarm': patientInfo.SBP_except}">
|
||||
<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">{{
|
||||
remoteItem.date
|
||||
}}</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_except}">
|
||||
<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_except}">
|
||||
<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 {onUnmounted, ref} from 'vue'
|
||||
import {useRemoteWsStore} from "@/stores/remote-ws-store";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const emit = defineEmits(['addLogAfter', 'breakRemote'])
|
||||
const mediaMini800 = ref(false)
|
||||
|
|
@ -127,289 +128,310 @@ const patientInfo = ref({} as any)
|
|||
const remoteWsStore = useRemoteWsStore()
|
||||
|
||||
defineExpose({
|
||||
initData, showData
|
||||
initData, showData
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
mediaMini800.value = Boolean(window.innerWidth < 801)
|
||||
mediaMini800.value = Boolean(window.innerWidth < 801)
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date);
|
||||
remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
|
||||
})
|
||||
|
||||
function showData(i: any) {
|
||||
const lastTaskIndex = remoteWsStore.currentTaskIndex;
|
||||
const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex];
|
||||
if (lastTask) {
|
||||
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date);
|
||||
}
|
||||
remoteWsStore.currentTaskIndex = i
|
||||
remoteItem.value = remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]
|
||||
getData()
|
||||
const lastTaskIndex = remoteWsStore.getCurrentTaskIndex();
|
||||
const lastTask: any = remoteWsStore.getRemoteTask()[lastTaskIndex];
|
||||
if (lastTask) {
|
||||
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date)
|
||||
}
|
||||
remoteWsStore.setCurrentTaskIndex(i)
|
||||
remoteItem.value = remoteWsStore.getRemoteTask()[remoteWsStore.getCurrentTaskIndex()]
|
||||
onClose()
|
||||
getData()
|
||||
}
|
||||
|
||||
function initData() {
|
||||
remoteItem.value = remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]
|
||||
remoteWsStore.createConnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
|
||||
getData()
|
||||
remoteItem.value = remoteWsStore.getRemoteTask()[remoteWsStore.getCurrentTaskIndex()]
|
||||
if (remoteItem.value.patient && remoteItem.value.patientId && remoteItem.value.date) {
|
||||
remoteWsStore.createVitalConnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
|
||||
onClose()
|
||||
getData()
|
||||
}
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
remoteWsStore.vitalOnclose(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, () => {
|
||||
ElMessage.info('远程' + remoteWsStore.getCurrentTaskIndex() + '已断开！')
|
||||
const status = remoteWsStore.getCloseStatus()
|
||||
if (!status[remoteItem.value.patient + remoteItem.value.patientId + remoteItem.value.date + 'vitalWS']) {
|
||||
setTimeout(() => {
|
||||
initData()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getData() {
|
||||
remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date);
|
||||
remoteWsStore.subscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, (res: any) => {
|
||||
if (res && res.data) {
|
||||
const data = JSON.parse(res.data);
|
||||
if (data.vitalSignsList && data.vitalSignsList.length > 0) {
|
||||
Object.assign(patientInfo.value, data.vitalSignsList[0]);
|
||||
patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
|
||||
patientInfo.value.DBP_except || patientInfo.value.HR_except);
|
||||
setLog(patientInfo.value)
|
||||
emit('addLogAfter')
|
||||
}
|
||||
}
|
||||
})
|
||||
remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
|
||||
remoteWsStore.subscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, (res: any) => {
|
||||
if (res && res.data) {
|
||||
const data = JSON.parse(res.data)
|
||||
if (data.vitalSignsList && data.vitalSignsList.length > 0) {
|
||||
Object.assign(patientInfo.value, data.vitalSignsList[0]);
|
||||
patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
|
||||
patientInfo.value.DBP_except || patientInfo.value.HR_except)
|
||||
setLog(patientInfo.value)
|
||||
emit('addLogAfter')
|
||||
} else if (data.code == 1) {
|
||||
ElMessage.error(data.msg)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function setLog(data: any) {
|
||||
remoteWsStore.exceptionType.forEach((item: any) => {
|
||||
if (data[item]) {
|
||||
const msg: any = remoteWsStore.exceptionMsg[item];
|
||||
remoteWsStore.setRemoteLog({
|
||||
state: msg,
|
||||
taskName: remoteItem.value.taskName,
|
||||
time: new Date(),
|
||||
type: "exception"
|
||||
}, remoteWsStore.currentTaskIndex);
|
||||
}
|
||||
})
|
||||
if (remoteWsStore.getExceptions()[remoteWsStore.getCurrentTaskIndex()]?.Time != data.Time) {
|
||||
remoteWsStore.setExceptions(remoteWsStore.getCurrentTaskIndex(), data)
|
||||
remoteWsStore.exceptionType.forEach((item: any) => {
|
||||
if (data[item]) {
|
||||
const msg: any = remoteWsStore.exceptionMsg[item]
|
||||
remoteWsStore.setRemoteLog({
|
||||
state: msg,
|
||||
taskName: remoteItem.value.taskName,
|
||||
time: item.Time,
|
||||
type: "exception"
|
||||
}, remoteWsStore.getCurrentTaskIndex())
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const breakRemote = () => {
|
||||
remoteWsStore.disconnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
|
||||
remoteWsStore.resetRemoteTask(remoteWsStore.currentTaskIndex)
|
||||
if (remoteWsStore.getActiveRemoteTask()) {
|
||||
showData(remoteWsStore.getActiveRemoteTask())
|
||||
}
|
||||
emit('breakRemote')
|
||||
remoteWsStore.disconnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
|
||||
remoteWsStore.resetRemoteTask(remoteWsStore.getCurrentTaskIndex())
|
||||
if (remoteWsStore.getActiveRemoteTask()) {
|
||||
showData(remoteWsStore.getActiveRemoteTask())
|
||||
}
|
||||
emit('breakRemote')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.remote-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
|
||||
.break-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
.break-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.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;
|
||||
}
|
||||
.common-box {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
@extend .common-box;
|
||||
.left-box {
|
||||
@extend .common-box;
|
||||
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.center-box {
|
||||
@extend .common-box;
|
||||
.center-box {
|
||||
@extend .common-box;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
@extend .common-box;
|
||||
.right-box {
|
||||
@extend .common-box;
|
||||
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.row-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.info-box, .row-item .value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-total {
|
||||
.info-box, .row-item .value {
|
||||
display: block;
|
||||
}
|
||||
&.is-total {
|
||||
.info-box, .row-item .value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
font-size: 16px;
|
||||
font-family: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box .value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
.right-box .value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
|
||||
.row-item.alarm {
|
||||
.label {
|
||||
background: red !important;
|
||||
}
|
||||
.row-item.alarm {
|
||||
.label {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: red !important;
|
||||
border-color: red !important;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
color: red !important;
|
||||
border-color: red !important;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: 100%;
|
||||
.info-box {
|
||||
width: 100%;
|
||||
|
||||
.row-item {
|
||||
padding: 10px 0;
|
||||
height: 40px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
&.normal {
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.alarm {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mini {
|
||||
padding: 20px;
|
||||
&.mini {
|
||||
padding: 20px;
|
||||
|
||||
.left-box {
|
||||
width: 240px;
|
||||
}
|
||||
.left-box {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
.center-box {
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
||||
&.is-total {
|
||||
.left-box {
|
||||
.info-box {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&.is-total {
|
||||
.left-box {
|
||||
.info-box {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-item.yellow {
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
.row-item.yellow {
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.value {
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -46,7 +46,7 @@ onMounted(() => {
|
|||
|
||||
function initRemoteTask() {
|
||||
remoteTask.value = remoteWsStore.initRemoteTask()
|
||||
remotePartRef.value.showData(remoteWsStore.currentTaskIndex);
|
||||
remotePartRef.value.initData()
|
||||
}
|
||||
|
||||
const viewThumbnail = () => {
|
||||
|
|
@ -69,6 +69,7 @@ const editTask = (item: any) => {
|
|||
const toRemoteControl = (item: any) => {
|
||||
// 如果当前任务是已连接状态则跳转，否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
remoteWsStore.setCurrentTaskIndex(item.index)
|
||||
router.push('/remote-manage/remote-control')
|
||||
} else {
|
||||
remoteDialogRef.value.open(item.index)
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const remoteTask = ref([] as any);
|
|||
const remoteWsStore = useRemoteWsStore();
|
||||
|
||||
onMounted(() => {
|
||||
remoteTask.value = remoteWsStore.remoteTasks;
|
||||
remoteTask.value = remoteWsStore.getRemoteTask();
|
||||
})
|
||||
|
||||
const openRemote = (params: any) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user