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

<template>
	<div class="remote-manage-page">
	<button @click="getSurgeryData">123</button>
	<button @click="disconnectSurgeryData">断开</button>
		<div class="header-box">
			<div class="thumbnail" @click="viewThumbnail">
				<el-icon>
					<Menu/>
				</el-icon>
				<span>缩略图</span>
			</div>
			<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
					 :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
					 @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
				<span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
			</div>
		</div>
		<div class="content-box">
			<div class="remote-box">
				<RemotePart ref="remotePartRef" @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 {ref} from 'vue'
import {useRouter} from 'vue-router'
import {useRemoteStore} from '@/stores/remote-info-store'
import type {RemoteItem} from '@/utils/public-interface'
import RemoteDialog from './part/remote-dialog.vue'
import RemotePart from './part/remote-part.vue'
import MessagePart from './part/message-part.vue'
import {Session} from "@/utils/storage";

const router = useRouter()
const remoteStore = useRemoteStore()

const remotePartRef = ref()
const messagePartRef = ref()
const remoteDialogRef = ref()
const remoteTask = ref([] as Array<RemoteItem>)

initRemoteTask()

function resetRemoteTaskItem(e: RemoteItem) {
	Object.assign(remoteTask.value[e.index], {
		isRemote: false,
		dataAlarm: false,
		title: '',
		serverUser: '',
		patientName: '',
		patientCode: '',
		index: e.index,
	})
}

function initRemoteTask() {
	remoteTask.value = remoteStore.remoteTasks
	if (remoteTask.value.length < 1) {
		while (remoteTask.value.length < 10) {
			const obj = {
				isRemote: false, // 连接状态
				dataAlarm: false, // 异常状态
				title: '',
				serverUser: '', // 服务器用户名
				patientName: '', // 病人名称
				patientCode: '', // 病人身份证
				index: remoteTask.value.length,
				log: []
			}
			if (remoteTask.value.length < 3) {
				obj.isRemote = true
				obj.title = '远程控制' + (remoteTask.value.length + 1)
				obj.serverUser = 'root'
				obj.patientName = '测试' + (remoteTask.value.length + 1)
			}
			if (remoteTask.value.length == 1) obj.dataAlarm = true
			remoteTask.value.push(obj)
		}
		remoteStore.setRemoteTasks(remoteTask.value)
		if (!remoteStore.currentRemote.index) {
			remoteStore.$patch({currentRemote: remoteTask.value[0]})
		}
	}
}

const viewThumbnail = () => {
	router.push({
		path: '/remote-manage/remote-thumbnail'
	})
}
// 打开任务连接弹窗
const editTask = (item: RemoteItem, index: number) => {
	item.index = index
	// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
	if (item.isRemote) {
		confirmRemote(item)
	} else {
		remoteDialogRef.value.open(item)
	}
}
// 跳转到远程控制
const toRemoteControl = (item: RemoteItem, index: number) => {
	// 如果当前任务是已连接状态则跳转，否则打开弹窗
	if (item.isRemote) {
		router.push('/remote-manage/remote-control')
	} else {
		editTask(item, index)
	}
}
// 连接成功
const confirmRemote = (e: RemoteItem) => {
	messagePartRef.value.setData({
		time: new Date(),
		title: e.title,
		state: '连接成功'
	}, e.index)
	remoteTask.value[e.index] = e // 状态设置为可连接
	remotePartRef.value.initData(e)
	console.log(e);
	getSurgeryData();
}
// 连接失败
const errorRemote = (e: RemoteItem) => {
	messagePartRef.value.setData({
		time: new Date(),
		title: e.title,
		state: '连接失败'
	}, e.index)
}
// 断开连接
const breakRemote = (e: RemoteItem) => {
	resetRemoteTaskItem(e)
	remotePartRef.value.initData()
	messagePartRef.value.setData({
		time: new Date(),
		title: e.title,
		state: '断开连接'
	}, e.index)
//	disconnectSurgeryData("", "1")
}
const addLogAfter = () => {
	messagePartRef.value.scrollToBottom()
}

const ws = new WebSocket("ws://localhost:5173/socket.io/admin/rax/vitalSignsMedicine?token=" + Session.getToken());

ws.onopen = function () {
}

function getSurgeryData() {
	const params = {
		patientName: "1111111",
		idNum: "123567890",
		date: "20230505"
	}
	ws.send(JSON.stringify(params))
}

function disconnectSurgeryData() {
	ws.close();
}

ws.onmessage = function (e) {
	console.log(e)
}

/*const surgeryClient = new Client({
  brokerURL: 'ws://localhost:5173/socket.io/admin/rax/SurgeryData',
  connectHeaders: {
    token: Session.get('token')
  },
  reconnectDelay: 5000,
  heartbeatIncoming: 60000,
  heartbeatOutgoing: 60000
})
surgeryClient.activate()

surgeryClient.onConnect = (data: any) => {
  console.log("connect", data);
}

surgeryClient.onWebSocketError = (error) => {
  console.log('Error with websocket', error)
};

surgeryClient.onStompError = (frame) => {
  console.log('Broker reported error: ' + frame.headers['message'])
  console.log('Additional details: ' + frame.body)
};

function getSurgeryData(username: string, db: string) {
  console.log(username, db);
  surgeryClient.publish({
    destination: "/front/getSurgeryData",
    headers: {
      token: Session.get('token')
    },
    body: JSON.stringify({status: "start", db})
  });
  const account = "admin";
  surgeryClient.subscribe('/topic/user/' + account + ":" + db + '/surgeryData', (data: any) => {
    console.log(data);
  })
}*/

/*function disconnectSurgeryData(username: string, db: string) {
  const account = "admin";
  surgeryClient.unsubscribe("/topic/user/" + account + ":" + db + "/surgeryData");
}

const chatClient = new Client({
  brokerURL: 'ws://localhost:5173/socket.io/admin/rax/chat',
  connectHeaders: {
    token: Session.get('token')
  },
  reconnectDelay: 5000,
  heartbeatIncoming: 60000,
  heartbeatOutgoing: 60000
})
chatClient.activate()

const patientName = '111'
const idNum = '111'
const date = '20230505'

function sendChatMessage() {
  const message = {
    patientName: patientName,
    idNum: idNum,
    date: date,
    msg: '测试消息'
  }
  chatClient.publish({
    destination: '/front/sendMessage',
    headers: {
      token: Session.get('token')
    },
    body: JSON.stringify(message)
  })
}*/

/*chatClient.onConnect = () => {
  chatClient.subscribe('/topic/user/' + patientName + idNum + date + '/chatroomMessage', (data: any) => {
    console.log(data)
  })
}*/

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