feat: web端和unity端的远程连接

src/router/routes.ts

@@ -61,6 +61,7 @@ export const constantRoute = [
         path: '/remote-manage',
         name: '远程管理',
         component: () => import('@/views/remote-manage/index.vue'),
+        redirect: '/remote-manage/remote-manage',
         children: [
           {
             path: '/remote-manage/remote-manage',

src/views/remote-manage/remote-control.vue

@@ -36,7 +36,7 @@
 
       <div class="right-box">
         <div class="top-btn-box">
-          <div class="top-left-btn-box">
+          <div class="top-left-btn-box" v-loading="connectionUnityLoading">
             <!--                        <el-select v-model="database" filterable placeholder="Select" style="width: 100%;"-->
             <!--                                   @change="selectDatabase">-->
             <!--                            <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"-->
@@ -47,10 +47,12 @@
               </el-text>
             </el-space>
             <el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
-            <el-button color="#C77000" @click="connectionUnity" v-if="!whetherControl">连接远程控制</el-button>
-            <el-button color="#C77000"  v-if="whetherControl">已控制</el-button>
-            <el-button color="#C77000" @click="disconnectControl">断开远程控制</el-button>
-
+            <el-button color="#C77000" @click="connectionUnity('1')" v-if="!whetherControl">连接远程控制</el-button>
+            <template v-else>
+              <el-button color="#C77000">已控制</el-button>
+              <el-button type="text" color="#C77000">ping：{{timeDiffPing||'-'}}</el-button>
+              <el-button color="#C77000" @click="connectionUnity('0')">断开远程控制</el-button>
+            </template>
           </div>
           <el-button color="#e0e0e0" @click="backRemote">
             <el-icon>
@@ -201,7 +203,7 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, onUnmounted, reactive, ref} from 'vue';
+import {computed, onMounted, onUnmounted, reactive, ref, watch} from 'vue';
 import {useRouter} from 'vue-router'
 import {ElMessage,ElMessageBox} from 'element-plus';
 import {dateFormater} from '@/utils/date-util';
@@ -264,12 +266,15 @@ const fixedTableData = ref([] as any[]);
 const varTableData = ref([] as any[]);
 const table1SpeedVal = ref('');
 const whetherControl =ref(false);
-
+const subscribeMedicineData=ref(null);
+const pingData=ref(0);
+const intervalFun=ref(null);
+const timeDiffPing=ref(0);
+const cachePingFirstTime=ref(0);
 let currentAIMedicine: any;
 let currentDocMedicine: any;
 const medicineSpeedTemp: any = {};
-
-
+const connectionUnityLoading=ref(false);
 onMounted(() => {
   if (!currentRemote.value.isRemote) {
     router.replace('/remote-manage/remote-manage');
@@ -279,6 +284,7 @@ onMounted(() => {
   initScale()
   createConnect()
   subscribeWS()
+  intervalFun.value=setInterval(loopSendMedicinePing,1000*10) as any;
 });
 
 onUnmounted(() => {
@@ -286,22 +292,104 @@ onUnmounted(() => {
   remoteWsStore.unsubscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index);
   remoteWsStore.unsubscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index);
   disconnect()
+  intervalFun.value=null
 })
+watch(subscribeMedicineData,(newValue:any,oldValue:any)=>{
+  if (newValue) {
+    const {msgType,unityConnectionFlag}=newValue;
+    switch (msgType) {
+      case 'unityRequestConnection':
+          const params: any = {
+            name: currentRemote.value.patient,
+            id: currentRemote.value.patientId,
+            date: currentRemote.value.date,
+            index:currentRemote.value.index,
+            msgType: "webResponseConnection",
+            flag:"1"
+          }
+          ElMessageBox.confirm('确定接受远程控制', '确认提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '拒绝',
+          })
+          .then(() => {
+            whetherControl.value = unityConnectionFlag==='1';
+            remoteWsStore.reqMedicineConnect({...params,flag:unityConnectionFlag},(res:any)=>{console.log('res >>>>>',res);});
+          })
+          .catch(() => {
+            // 点击取消按钮后的逻辑
+            whetherControl.value = false;
+            remoteWsStore.reqMedicineConnect({...params,flag:'0'},(res:any)=>{console.log('res >>>>>',res);});
+          });
+        break;
+      case 'unityResponseConnection':
+        whetherControl.value=unityConnectionFlag==='1';
+        if (unityConnectionFlag==='1') {
+            ElMessage.success('连接成功')
+        }else{
+            ElMessage.info('连接断开')
+        }
+        break;
+      case 'pong':
+        pingData.value=newValue.msg;
+        break;
+    
+      default:
+        break;
+    }
+  }
+})
+watch(pingData,(newValue:any,oldValue:any)=>{
+  if (newValue&&oldValue) {
+    const timeDiff= Math.abs(newValue - oldValue)
+    const res= Math.ceil(timeDiff / 10)
+    timeDiffPing.value=res
+  }else{
+    if (newValue) {
+      const res=Math.abs(newValue - (cachePingFirstTime.value || +new Date())) / 10
+      timeDiffPing.value=Math.ceil(res)
+    }else{
+      timeDiffPing.value= 0 / 10
+    }
+  }
 
+})
 function createConnect() {
   remoteWsStore.createChatConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
   remoteWsStore.createMedicineConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
 }
 
-
-// 连接远程控制
-function connectionUnity(){
-  console.log("连接远程控制");
-  remoteWsStore.reqMedicineConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
-      "webRequestConnection","1");
+function loopSendMedicinePing(){
+  if (!whetherControl.value) {
+    return
+  }
+  remoteWsStore.loopSendMedicinePing(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,(res:any)=>{})
+  if (cachePingFirstTime.value) {
+    return;
+  }
+  cachePingFirstTime.value= +new Date()
+}
+// 连接远程控制
+function connectionUnity(flag:string){
+  if (flag==="1") {
+    console.log("连接远程控制");
+    connectionUnityLoading.value=true
+  }else{
+    console.log("断开远程控制");
+    connectionUnityLoading.value=false
+  }
+    const params: any = {
+    name: currentRemote.value.patient,
+    id: currentRemote.value.patientId,
+    date: currentRemote.value.date,
+    index:currentRemote.value.index,
+    msgType: "webRequestConnection",
+	  flag
+  }
+  remoteWsStore.reqMedicineConnect(params,()=>{
+    connectionUnityLoading.value=false
+  });
+  // 
 }
-
-
 
 function disconnect() {
   remoteWsStore.disconnectMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
@@ -321,9 +409,6 @@ function subscribeWS() {
   subscribeMedicine()
 }
 
-
-
-
 const subscribeVital = () => {
   onVitalClose()
   remoteWsStore.subscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
@@ -338,14 +423,11 @@ const subscribeVital = () => {
         }
       })
 }
-const disconnectControl = () => {
-  whetherControl.value= false;
-}
+
 const connectRemote = () => {
   //console.log("远程连接成功");
 
-
-  const ws = new WebSocket(`ws://110.41.142.124:9999/socket.io/admin/rax/addMedicine`)
+  const ws = new WebSocket(`ws://110.41.142.124:6379/socket.io/admin/rax/addMedicine`)
   const openHandle = () => {
     whetherControl.value= true;
     console.log("ws连接成功啦")
@@ -378,6 +460,7 @@ const subscribeMedicine = () => {
   remoteWsStore.subscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
       (res: any) => {
         const data = JSON.parse(res.data);
+        subscribeMedicineData.value=data;
         if (data.status != 1) {
           if (data.medicine) {
             if (varTableData.value[data.medicine]) varTableData.value[data.medicine] = medicineSpeedTemp[data.medicine];

src/views/remote-manage/remote-thumbnail.vue

@@ -40,6 +40,10 @@ const remoteWsStore = useRemoteWsStore();
 
 onMounted(() => {
 	remoteTask.value = remoteWsStore.getRemoteTask();
+  if (remoteTask.value.length) {
+    return
+  }
+	router.push('/remote-manage/remote-manage');
 })
 
 onUnmounted(() => {