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

<template>
	<div class="remote-manage-page">
		<div class="header-box">
			<div class="thumbnail" @click="viewThumbnail">
				<el-icon>
					<Menu/>
				</el-icon>
				<span>缩略图</span>
			</div>
			<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
					 :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
					 @click="editTask(item)" @dblclick="toRemoteControl(item)">
				<span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
			</div>
		</div>
		<div class="content-box">
			<div class="remote-box">
				<RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
			</div>
			<div class="message-box">
				<MessagePart ref="messagePartRef"/>
			</div>
		</div>
	</div>
	<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import RemoteDialog from './part/remote-dialog.vue'
import RemotePart from './part/remote-part.vue'
import MessagePart from './part/message-part.vue'
import {useRemoteWsStore} from "@/stores/remote-ws-store";

const router = useRouter()
const remotePartRef = ref()
const messagePartRef = ref()
const remoteDialogRef = ref()
const remoteTask = ref([] as Array<any>)
const remoteWsStore = useRemoteWsStore();

onMounted(() => {
	initRemoteTask()
})

function initRemoteTask() {
	remoteTask.value = remoteWsStore.initRemoteTask()
	remotePartRef.value.showData(remoteWsStore.currentTaskIndex);
}

const viewThumbnail = () => {
	router.push({
		path: '/remote-manage/remote-thumbnail',
		query: {
		}
	})
}
// 打开任务连接弹窗
const editTask = (item: any) => {
	// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
	if (item.isRemote) {
		remotePartRef.value.showData(item.index)
	} else {
		remoteDialogRef.value.open(item.index)
	}
}
// 跳转到远程控制
const toRemoteControl = (item: any) => {
	// 如果当前任务是已连接状态则跳转，否则打开弹窗
	if (item.isRemote) {
		router.push('/remote-manage/remote-control')
	} else {
		remoteDialogRef.value.open(item.index)
	}
}
// 连接成功
const confirmRemote = () => {
	messagePartRef.value.scrollToBottom()
	// 状态设置为可连接
	remotePartRef.value.initData()
}
// 连接失败
const errorRemote = () => {
	messagePartRef.value.scrollToBottom()
}
// 断开连接
const breakRemote = () => {
	messagePartRef.value.scrollToBottom()
}
const addLogAfter = () => {
	messagePartRef.value.scrollToBottom()
}

</script>

<style lang='scss' scoped>
.remote-manage-page {
	width: 100%;
	height: 100%;
	padding-top: 15px;
	overflow-y: auto;
	overflow-x: hidden;

	.header-box {
		position: relative;
		width: 100%;
		min-height: 180px;
		background: white;
		padding: 0 30px;
		display: flex;
		flex-wrap: wrap;

		.thumbnail {
			cursor: pointer;
			position: absolute;
			width: 70px;
			height: 70px;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #f8b300;
			border-top-left-radius: 35px;
			border-bottom-left-radius: 35px;
			box-shadow: -3px 3px 5px 0 rgba(black, .2);
			font-size: 20px;
			color: white;
			transition: all .1s;

			.el-icon {
				font-size: 1.4em;
			}

			& > span {
				display: none;
				margin-left: 5px;
				line-height: 1;
				white-space: nowrap;
			}

			&:hover {
				width: 160px;
				transition: all .3s;

				& > span {
					display: block;
				}
			}
		}

		.task-btn-item {
			cursor: pointer;
			flex-grow: 1;
			width: 17%;
			min-width: 200px;
			height: 70px;
			margin: 10px 20px;
			border: 2px solid $main-color;
			color: $main-color;
			border-radius: 5px;
			font-size: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all .6s;

			&:hover {
				background: rgba($main-color, .1);
				transition: all .6s;
			}

			&.connecting {
				background: $main-color;
				color: white;

				&:hover {
					background: rgba($main-color, .8);
				}
			}

			&.alarm {
				background: #f80000;
				border-color: #f80000;
				color: white;

				&:hover {
					background: rgba(#f80000, .8);
				}
			}
		}
	}

	.content-box {
		width: 100%;
		height: calc(100% - 195px);
		min-height: 600px;
		margin-top: 15px;
		background: white;
		padding: 20px 50px;
		display: flex;
		justify-content: space-between;

		.remote-box {
			width: calc(100% - 370px);
			flex-grow: 1;
			height: 100%;
		}

		.message-box {
			width: 350px;
			height: 100%;
			margin-left: 20px;
		}
	}
}</style>