From fdea342eec9a3f8fd951d17796788dddefa921ea Mon Sep 17 00:00:00 2001
From: zhaoyz <11@22.com>
Date: Tue, 16 Apr 2024 17:22:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ws.ts                             |  46 ---
 src/views/index.vue                       |   1 -
 src/views/remote-manage/remote-manage.vue | 439 +++++++++++-----------
 3 files changed, 227 insertions(+), 259 deletions(-)
 delete mode 100644 src/api/ws.ts

diff --git a/src/api/ws.ts b/src/api/ws.ts
deleted file mode 100644
index 07a0189..0000000
--- a/src/api/ws.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-let ws: WebSocket;
-
-function init(url: string | URL, protocols?: string | string[]) {
-    return new Promise(resolve => {
-        try {
-            ws = new WebSocket(url);
-            resolve(true)
-        } catch (e) {
-            console.log(e)
-        }
-    })
-}
-
-function close(code?: number, reason?: string) {
-    ws.close(code, reason)
-}
-
-function send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
-    ws.send(data)
-}
-
-function closeListener(cb: any) {
-    ws.onclose = cb
-}
-
-function openListener(cb: any) {
-    ws.onopen = cb
-}
-
-function errorListener(cb: any) {
-    ws.onerror = cb
-}
-
-function messageListener(cb: any) {
-    ws.onmessage = cb
-}
-
-export const wsApi= {
-    init,
-    close,
-    send,
-    closeListener,
-    openListener,
-    errorListener,
-    messageListener
-}
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 6c45ef4..4233d57 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -67,7 +67,6 @@ import {ElMessage, ElMessageBox} from 'element-plus'
 import {useLoginStore} from '@/stores/user-info-store'
 import {getHospitalsData} from '@/static-data/core'
 import userInfoForm from '@/components/user-info.vue'
-import {wsApi} from "@/api/ws";
 import {Session} from "@/utils/storage";
 import {logout} from "@/api/login";
 
diff --git a/src/views/remote-manage/remote-manage.vue b/src/views/remote-manage/remote-manage.vue
index 0babbd9..bd4d839 100644
--- a/src/views/remote-manage/remote-manage.vue
+++ b/src/views/remote-manage/remote-manage.vue
@@ -1,41 +1,41 @@
 <template>
-  <div class="remote-manage-page">
-    <div class="header-box">
-      <div class="thumbnail" @click="viewThumbnail">
-        <el-icon>
-          <Menu/>
-        </el-icon>
-        <span>缩略图</span>
-      </div>
-      <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
-           :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
-           @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
-        <span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
-      </div>
-    </div>
-    <div class="content-box">
-      <div class="remote-box">
-        <RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
-      </div>
-      <div class="message-box">
-        <MessagePart ref="messagePartRef"/>
-      </div>
-    </div>
-  </div>
-  <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
+	<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 {onMounted, reactive, ref, toRefs, watch} from 'vue'
+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 {Client} from "@stomp/stompjs";
 import {Session} from "@/utils/storage";
-import {wsApi} from "@/api/ws";
 
 const router = useRouter()
 const remoteStore = useRemoteStore()
@@ -48,104 +48,126 @@ 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,
-  })
+	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]})
-    }
-  }
+	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'
-  })
+	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)
-  }
+	item.index = index
+	// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
+	if (item.isRemote) {
+		confirmRemote(item)
+	} else {
+		remoteDialogRef.value.open(item)
+	}
 }
 // 跳转到远程控制
 const toRemoteControl = (item: RemoteItem, index: number) => {
-  // 如果当前任务是已连接状态则跳转，否则打开弹窗
-  if (item.isRemote) {
-    router.push('/remote-manage/remote-control')
-  } else {
-    editTask(item, index)
-  }
+	// 如果当前任务是已连接状态则跳转，否则打开弹窗
+	if (item.isRemote) {
+		router.push('/remote-manage/remote-control')
+	} else {
+		editTask(item, index)
+	}
 }
 // 连接成功
 const confirmRemote = (e: RemoteItem) => {
-  messagePartRef.value.setData({
-    time: new Date(),
-    title: e.title,
-    state: '连接成功'
-  }, e.index)
-  remoteTask.value[e.index] = e // 状态设置为可连接
-  remotePartRef.value.initData(e)
-  console.log(e);
-  getSurgeryData(e.patientCode, e.patientName);
+	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)
+	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")
+	resetRemoteTaskItem(e)
+	remotePartRef.value.initData()
+	messagePartRef.value.setData({
+		time: new Date(),
+		title: e.title,
+		state: '断开连接'
+	}, e.index)
+//	disconnectSurgeryData("", "1")
 }
 const addLogAfter = () => {
-  messagePartRef.value.scrollToBottom()
+	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({
@@ -229,133 +251,126 @@ function sendChatMessage() {
   })
 }*/
 
-wsApi.init("ws://localhost:5173/socket.io/admin/vitalSignsMedicine").then(() => {
-
-})
- wsApi.openListener((cb: any) => {
-      console.log(cb)
-  })
-
 </script>
 
 <style lang='scss' scoped>
 .remote-manage-page {
-  width: 100%;
-  height: 100%;
-  padding-top: 15px;
-  overflow-y: auto;
-  overflow-x: hidden;
+	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;
+	.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;
+		.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;
-      }
+			.el-icon {
+				font-size: 1.4em;
+			}
 
-      & > span {
-        display: none;
-        margin-left: 5px;
-        line-height: 1;
-        white-space: nowrap;
-      }
+			& > span {
+				display: none;
+				margin-left: 5px;
+				line-height: 1;
+				white-space: nowrap;
+			}
 
-      &:hover {
-        width: 160px;
-        transition: all .3s;
+			&:hover {
+				width: 160px;
+				transition: all .3s;
 
-        & > span {
-          display: block;
-        }
-      }
-    }
+				& > 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;
+		.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;
-      }
+			&:hover {
+				background: rgba($main-color, .1);
+				transition: all .6s;
+			}
 
-      &.connecting {
-        background: $main-color;
-        color: white;
+			&.connecting {
+				background: $main-color;
+				color: white;
 
-        &:hover {
-          background: rgba($main-color, .8);
-        }
-      }
+				&:hover {
+					background: rgba($main-color, .8);
+				}
+			}
 
-      &.alarm {
-        background: #f80000;
-        border-color: #f80000;
-        color: white;
+			&.alarm {
+				background: #f80000;
+				border-color: #f80000;
+				color: white;
 
-        &:hover {
-          background: rgba(#f80000, .8);
-        }
-      }
-    }
-  }
+				&: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;
+	.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%;
-    }
+		.remote-box {
+			width: calc(100% - 370px);
+			flex-grow: 1;
+			height: 100%;
+		}
 
-    .message-box {
-      width: 350px;
-      height: 100%;
-      margin-left: 20px;
-    }
-  }
+		.message-box {
+			width: 350px;
+			height: 100%;
+			margin-left: 20px;
+		}
+	}
 }</style>