添加按钮

src/stores/remote-ws-store.ts

@@ -287,7 +287,7 @@ export const useRemoteWsStore = defineStore("remoteWs", {
                         patientName: name,
                         idNum: id,
                         date: date,
-                        msgType: "msg"
+                        msgType: "init"
                     }))
                 }
             }

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

@@ -28,7 +28,7 @@
             开始
           </el-button>
           <div class="right-btn-box">
-                        <el-button :class="{ 'active': isAIDose }" size="small" >AI给药</el-button>
+            <el-button :class="{ 'active': isAIDose }" size="small">AI给药</el-button>
             <el-button :class="{ 'active': !isAIDose }" size="small">人工给药</el-button>
           </div>
         </div>
@@ -37,18 +37,19 @@
       <div class="right-box">
         <div class="top-btn-box">
           <div class="top-left-btn-box">
-<!--                        <el-select v-model="database" filterable placeholder="Select" style="width: 100%;"-->
+            <!--                        <el-select v-model="database" filterable placeholder="Select" style="width: 100%;"-->
-<!--                                   @change="selectDatabase">-->
+            <!--                                   @change="selectDatabase">-->
-<!--                            <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"-->
+            <!--                            <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"-->
-<!--                                       :value="item.value"/>-->
+            <!--                                       :value="item.value"/>-->
-<!--                        </el-select>-->
+            <!--                        </el-select>-->
             <el-space direction="vertical">
-                        <el-text style="margin-right:20px;font-size: 18px;font-weight:700;color:#006080 ">病人尿量(ml):500</el-text>
+              <el-text style="margin-right:20px;font-size: 18px;font-weight:700;color:#006080 ">病人尿量(ml):500
+              </el-text>
             </el-space>
             <el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
-                      <el-button color="#C77000" @click="">连接远程控制</el-button>
+            <el-button color="#C77000" @click="connectRemote" v-if="!whetherControl">连接远程控制</el-button>
-<!--                      <el-button color="#C77000">已连接</el-button>-->
+            <el-button color="#C77000"  v-if="whetherControl">已控制</el-button>
-                      <el-button color="#C77000" @click="">断开远程控制</el-button>
+            <el-button color="#C77000" @click="disconnectControl">断开远程控制</el-button>
 
           </div>
           <el-button color="#e0e0e0" @click="backRemote">
@@ -122,12 +123,12 @@
             <el-table-column label="特殊情况人为干预" align="center">
               <template #default="scope">
                 <div class="table-btn-box">
-                                    <el-button size="small" color="#006080" @click="tableItemPlus(scope)">
+                  <el-button size="small" color="#006080" @click="tableItemPlus(scope)" :disabled="!whetherControl" >
                     <el-icon>
                       <Plus/>
                     </el-icon>
                   </el-button>
-                                    <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
+                  <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0 || !whetherControl"
                              @click="tableItemMinus(scope)">
                     <el-icon>
                       <Minus/>
@@ -136,9 +137,9 @@
                   <!--									<el-button size="small" color="#006080" @click="tableItemConfirm(scope)"
                              :disabled="tableDataStore[scope.$index].speed === scope.row.speed">确定-->
                   <el-button size="small" color="#006080"
-                                               @click="tableItemConfirm(scope, varTableData)">确定
+                             @click="tableItemConfirm(scope, varTableData)" :disabled="!whetherControl">确定
                   </el-button>
-                                    <el-button size="small" color="#006080" @click="tableItemCancel(scope)">取消
+                  <el-button size="small" color="#006080" @click="tableItemCancel(scope)" :disabled="!whetherControl">取消
                   </el-button>
                 </div>
               </template>
@@ -158,21 +159,21 @@
             <el-table-column label="特殊情况人为干预" align="center">
               <template #default="scope">
                 <div class="table-btn-box">
-                                    <el-button size="small" color="#006080" @click="tableItemPlus(scope)">
+                  <el-button size="small" color="#006080" @click="tableItemPlus(scope)" :disabled="!whetherControl">
                     <el-icon>
                       <Plus/>
                     </el-icon>
                   </el-button>
-                                    <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
+                  <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0 || !whetherControl"
                              @click="tableItemMinus(scope)">
                     <el-icon>
                       <Minus/>
                     </el-icon>
                   </el-button>
                   <el-button size="small" color="#006080"
-                                               @click="tableItemConfirm(scope, fixedTableData)">确定
+                             @click="tableItemConfirm(scope, fixedTableData)" :disabled="!whetherControl">确定
                   </el-button>
-                                    <el-button size="small" color="#006080" @click="tableItemCancel(scope)">取消
+                  <el-button size="small" color="#006080" @click="tableItemCancel(scope)" :disabled="!whetherControl">取消
                   </el-button>
                 </div>
               </template>
@@ -202,7 +203,7 @@
 <script lang="ts" setup>
 import {onMounted, onUnmounted, reactive, ref} from 'vue';
 import {useRouter} from 'vue-router'
-import {ElMessage} from 'element-plus';
+import {ElMessage,ElMessageBox} from 'element-plus';
 import {dateFormater} from '@/utils/date-util';
 import chartLine from './chart/chart-line.vue';
 import chartEcg from './chart/chart-ecg.vue';
@@ -262,10 +263,13 @@ const unusual = ref([] as any);
 const fixedTableData = ref([] as any[]);
 const varTableData = ref([] as any[]);
 const table1SpeedVal = ref('');
+const whetherControl =ref(false);
+
 let currentAIMedicine: any;
 let currentDocMedicine: any;
 const medicineSpeedTemp: any = {};
 
+
 onMounted(() => {
   if (!currentRemote.value.isRemote) {
     router.replace('/remote-manage/remote-manage');
@@ -321,7 +325,33 @@ 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 openHandle = () => {
+    whetherControl.value= true;
+    console.log("ws连接成功啦")
+  }
+  const clostHandle = () => {
+    console.log("ws关闭成功啦")
+  }
+  const messageHandle = ({data}) => {
+    console.log("前端接受到的信息啦")
+  }
+  const errorHandle = () => {
+    whetherControl.value= false;
+    console.log("ws出错啦")
+  }
+  ws.addEventListener("open", openHandle)
+  ws.addEventListener("clost", clostHandle)
+  ws.addEventListener("message", messageHandle)
+  ws.addEventListener("error", errorHandle)
+}
 const subscribeChat = () => {
   onChatClose()
   remoteWsStore.subscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
@@ -600,6 +630,13 @@ const tableItemMinus = (e: any) => {
 }
 
 const tableItemConfirm = (e: any, tableData: any) => {
+
+  ElMessageBox.confirm('确定给药吗？', '确认提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  })
+      .then(() => {
+        // 点击确定按钮后的逻辑
         if (tableData.length < 1) return;
         const params = {
           name: currentRemote.value.patient,
@@ -612,8 +649,12 @@ const tableItemConfirm = (e: any, tableData: any) => {
         }
         remoteWsStore.sendMedicine(params, function () {
         });
+      })
+      .catch(() => {
+        // 点击取消按钮后的逻辑
+        e.row.speed = medicineSpeedTemp[e.row.name];
+      });
 }
-
 const tableItemCancel = (e: any) => {
   e.row.speed = medicineSpeedTemp[e.row.name];
 }
@@ -725,25 +766,29 @@ function startAI() {
           position: relative;
           // width: 400px;
           // height: 650px;
-                    width: 1000px;
+          margin-top: 80px;
-                    height: 850px;
+          width: 500px;
+          height: 812.5px;
+          min-height: 650px;
+          //width: 1000px;
+          //height: 850px;
           //min-height: 650px;
 
           .lung-img {
             position: absolute;
-                        //width: 500px;
+            width: 500px;
-                        width: 100%;
+            //width: 100%;
             height: auto;
-                        top: 230px;
+            top: 240px;
             left: 0;
             transition: all 2s;
           }
 
           .heart-img {
             position: absolute;
-                        width: 100%;
+            width: 500px;
             height: auto;
-                        top: 55%;
+            top: 420px;
             left: 0;
             transition: all 2s;
           }
@@ -885,7 +930,7 @@ function startAI() {
             height: 270px;
             background: $main-color;
             /* background: url(@/assets/imgs/video_bck.png);
-        background-size: 100% 100%; */
+background-size: 100% 100%; */
 
             &:hover {
               .icon-box {
@@ -938,6 +983,7 @@ function startAI() {
 
                 &.align-right {
                   text-align: right;
+
                   span {
                     background: $main-color;
                   }