rax-medical/src/views/remote-manage/part/remote-part.vue

<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>
</template>

<script lang='ts' setup>
import {onUnmounted, ref} from 'vue'
import {useRemoteWsStore} from "@/stores/remote-ws-store";

const emit = defineEmits(['addLogAfter', 'breakRemote'])
const mediaMini800 = ref(false)
const remoteItem = ref({} as any)
const patientInfo = ref({} as any)
const remoteWsStore = useRemoteWsStore()

defineExpose({
	initData, showData
});

window.addEventListener('resize', () => {
	mediaMini800.value = Boolean(window.innerWidth < 801)
});

onUnmounted(() => {
	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()
}

function initData() {
	remoteItem.value = remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]
	remoteWsStore.createConnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
	getData()
}

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')
			}
		}
	})
}

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);
		}
	})
}

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')
}

</script>

<style lang='scss' scoped>
.remote-part {
	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;

		.break-btn {
			position: absolute;
			top: 4px;
			right: 20px;
		}
	}

	.content {
		width: 100%;
		height: calc(100% - 40px);
		padding: 20px 50px;
		display: flex;
		justify-content: space-between;

		.common-box {
			width: 30%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
		}

		.left-box {
			@extend .common-box;

			.label {
				background: $main-color;
			}
		}

		.center-box {
			@extend .common-box;

			img {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.right-box {
			@extend .common-box;

			.label {
				background: $main-color;
			}
		}

		.row-item {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.label {
				flex-shrink: 0;
				width: 100%;
				height: 40px;
				color: white;
				font-size: 18px;
				line-height: 40px;
				text-align: center;
				border-radius: 5px;
			}
		}

		.info-box, .row-item .value {
			display: none;
		}

		&.is-total {
			.info-box, .row-item .value {
				display: block;
			}

			.label {
				width: calc(50% - 10px);
			}

			.value {
				width: 50%;
				height: 40px;
				border-width: 1px;
				border-style: solid;
				text-align: center;
				border-radius: 5px;
				color: $main-color;
				border-color: $main-color;
				font-size: 22px;
				line-height: 40px;
				font-weight: 600;

				.unit {
					font-size: 16px;
					font-family: 400;
				}
			}

			.right-box .value {
				color: $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: 10px 0;
					height: 40px;
					justify-content: flex-start;
					align-items: center;

					.label {
						width: 70px;
						height: 20px;
						background: transparent;
						color: $main-color;
						font-size: 16px;
						line-height: 20px;
						font-weight: 600;
						text-align: left;
					}

					.input-value {
						width: 100%;
						height: 21px;
						line-height: 20px;
						font-size: 16px;
						color: $main-color;
						border-bottom: 1px solid $border2-color;
					}

					.tag-value {
						margin-left: 30px;
						padding: 0 20px;
						height: 30px;
						line-height: 30px;
						font-size: 18px;
						color: white;
						font-weight: 600;
						background: $border2-color;
						border-radius: 8px;

						&.normal {
							background: $main-color;
						}

						&.alarm {
							background: red;
						}
					}
				}
			}
		}

		&.mini {
			padding: 20px;

			.left-box {
				width: 240px;
			}

			.center-box {
				width: calc(100% - 250px);
			}

			&.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>