From a946727844689184a11c95f56cf5da442daf6b24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E7=8C=AB?=
 <13581431+xiongmao1988@user.noreply.gitee.com>
Date: Fri, 26 Jul 2024 13:52:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/remote-ws-store.ts              |    2 +-
 src/views/remote-manage/remote-control.vue | 1738 ++++++++++----------
 2 files changed, 893 insertions(+), 847 deletions(-)

diff --git a/src/stores/remote-ws-store.ts b/src/stores/remote-ws-store.ts
index e9337be..8af7964 100644
--- a/src/stores/remote-ws-store.ts
+++ b/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"
                     }))
                 }
             }
diff --git a/src/views/remote-manage/remote-control.vue b/src/views/remote-manage/remote-control.vue
index 10b8f65..edc4e35 100644
--- a/src/views/remote-manage/remote-control.vue
+++ b/src/views/remote-manage/remote-control.vue
@@ -1,208 +1,209 @@
 <template>
-    <div class="remote-box" id="screenBox">
-        <div class="main-box">
-            <div class="left-box">
-                <h3>{{ currentRemote?.taskName }}</h3>
-                <chart-line ref="chartDom1" class="chart-line" :names="['BIS', 'HR']"
-                            @exception-event="vitalExcepEvent"></chart-line>
-                <chart-line ref="chartDom2" class="chart-line" :names="['SBP', 'DBP']"
-                            @exception-event="vitalExcepEvent"></chart-line>
-                <chart-line ref="chartDom3" class="chart-line" :names="['SPO2', 'TEMP']"
-                            @exception-event="vitalExcepEvent"></chart-line>
-                <chart-ecg ref="chartDom4" class="chart-ecg" :name="['CH1', 'CH2']"
-                           @exception-event="vitalExcepEvent"></chart-ecg>
+  <div class="remote-box" id="screenBox">
+    <div class="main-box">
+      <div class="left-box">
+        <h3>{{ currentRemote?.taskName }}</h3>
+        <chart-line ref="chartDom1" class="chart-line" :names="['BIS', 'HR']"
+                    @exception-event="vitalExcepEvent"></chart-line>
+        <chart-line ref="chartDom2" class="chart-line" :names="['SBP', 'DBP']"
+                    @exception-event="vitalExcepEvent"></chart-line>
+        <chart-line ref="chartDom3" class="chart-line" :names="['SPO2', 'TEMP']"
+                    @exception-event="vitalExcepEvent"></chart-line>
+        <chart-ecg ref="chartDom4" class="chart-ecg" :name="['CH1', 'CH2']"
+                   @exception-event="vitalExcepEvent"></chart-ecg>
+      </div>
+
+      <div class="center-box">
+        <div class="body-box">
+          <div class="body-img">
+            <img src="@/assets/imgs/main_body.png" style="width: 100%;height: 100%;"/>
+            <img class="lung-img" :class="{ 'shake_1': lungAlarm }"
+                 :src="lungAlarm ? imgLungAlarm : imgLung">
+            <img class="heart-img" :class="{ 'shake_1': heartAlarm }"
+                 :src="heartAlarm ? imgHeartAlarm : imgHeart">
+          </div>
+        </div>
+        <div class="btn-box">
+          <el-button class="start-btn" color="#F80000" @click="startAI">
+            开始
+          </el-button>
+          <div class="right-btn-box">
+            <el-button :class="{ 'active': isAIDose }" size="small">AI给药</el-button>
+            <el-button :class="{ 'active': !isAIDose }" size="small">人工给药</el-button>
+          </div>
+        </div>
+      </div>
+
+      <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%;"-->
+            <!--                                   @change="selectDatabase">-->
+            <!--                            <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"-->
+            <!--                                       :value="item.value"/>-->
+            <!--                        </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-space>
+            <el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
+            <el-button color="#C77000" @click="connectRemote" v-if="!whetherControl">连接远程控制</el-button>
+            <el-button color="#C77000"  v-if="whetherControl">已控制</el-button>
+            <el-button color="#C77000" @click="disconnectControl">断开远程控制</el-button>
+
+          </div>
+          <el-button color="#e0e0e0" @click="backRemote">
+            <el-icon>
+              <Back/>
+            </el-icon>
+            返回
+          </el-button>
+        </div>
+        <div class="monitoring-message">
+          <div class="left-box">
+            <span class="unusual-title">异常信息</span>
+            <ul ref="unusualMsgRef" class="unusual-box">
+              <li v-for="item in unusual" :key="item">{{ item }}</li>
+            </ul>
+          </div>
+          <div class="right-box">
+            <div class="video-box" @click="playPause">
+              <div class="icon-box">
+                <el-icon v-if="isVideoPlay">
+                  <VideoPause/>
+                </el-icon>
+                <el-icon v-else>
+                  <VideoPlay/>
+                </el-icon>
+              </div>
+              <!--  poster="@/assets/imgs/video_bck.png" -->
+              <video ref="liveVideo">
+                <source src="@/assets/medical.mp4" type="video/mp4"/>
+              </video>
             </div>
-
-            <div class="center-box">
-                <div class="body-box">
-                    <div class="body-img">
-                        <img src="@/assets/imgs/main_body.png" style="width: 100%;height: 100%;"/>
-                        <img class="lung-img" :class="{ 'shake_1': lungAlarm }"
-                             :src="lungAlarm ? imgLungAlarm : imgLung">
-                        <img class="heart-img" :class="{ 'shake_1': heartAlarm }"
-                             :src="heartAlarm ? imgHeartAlarm : imgHeart">
-                    </div>
-                </div>
-                <div class="btn-box">
-                    <el-button class="start-btn" color="#F80000" @click="startAI">
-                        开始
-                    </el-button>
-                    <div class="right-btn-box">
-                        <el-button :class="{ 'active': isAIDose }" size="small" >AI给药</el-button>
-                        <el-button :class="{ 'active': !isAIDose }" size="small">人工给药</el-button>
-                    </div>
-                </div>
+            <div class="message-box">
+              <ul ref="msgLog" class="message-log">
+                <li v-for="(item, index) in mssageList" :key="'msg-log-' + index"
+                    :class="{ 'align-right': item.createName == userName }">
+                  <span>{{ item.content }}</span>
+                </li>
+              </ul>
+              <div class="send-box">
+                <el-input v-model="msgVal" placeholder="请输入消息"/>
+                <el-button color="#006080" @click="sendMsg">发送消息</el-button>
+              </div>
             </div>
-
-            <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%;"-->
-<!--                                   @change="selectDatabase">-->
-<!--                            <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"-->
-<!--                                       :value="item.value"/>-->
-<!--                        </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-space>
-                      <el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
-                      <el-button color="#C77000" @click="">连接远程控制</el-button>
-<!--                      <el-button color="#C77000">已连接</el-button>-->
-                      <el-button color="#C77000" @click="">断开远程控制</el-button>
-
-                    </div>
-                    <el-button color="#e0e0e0" @click="backRemote">
-                        <el-icon>
-                            <Back/>
-                        </el-icon>
-                        返回
-                    </el-button>
-                </div>
-                <div class="monitoring-message">
-                    <div class="left-box">
-                        <span class="unusual-title">异常信息</span>
-                        <ul ref="unusualMsgRef" class="unusual-box">
-                            <li v-for="item in unusual" :key="item">{{ item }}</li>
-                        </ul>
-                    </div>
-                    <div class="right-box">
-                        <div class="video-box" @click="playPause">
-                            <div class="icon-box">
-                                <el-icon v-if="isVideoPlay">
-                                    <VideoPause/>
-                                </el-icon>
-                                <el-icon v-else>
-                                    <VideoPlay/>
-                                </el-icon>
-                            </div>
-                            <!--  poster="@/assets/imgs/video_bck.png" -->
-                            <video ref="liveVideo">
-                                <source src="@/assets/medical.mp4" type="video/mp4"/>
-                            </video>
-                        </div>
-                        <div class="message-box">
-                            <ul ref="msgLog" class="message-log">
-                                <li v-for="(item, index) in mssageList" :key="'msg-log-' + index"
-                                    :class="{ 'align-right': item.createName == userName }">
-                                    <span>{{ item.content }}</span>
-                                </li>
-                            </ul>
-                            <div class="send-box">
-                                <el-input v-model="msgVal" placeholder="请输入消息"/>
-                                <el-button color="#006080" @click="sendMsg">发送消息</el-button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <!-- table1 -->
-                <div class="table-box">
-                    <el-table :data="varTableData" height="100%" style="width: 100%">
-                        <el-table-column prop="num" label="泵号" width="40" align="center"/>
-                        <el-table-column prop="name" label="药物名称" align="center"/>
-                        <el-table-column prop="speed" label="速度(ml/h)" width="120">
-                            <template #header>
-                                <el-dropdown @command="table1SpeedCommand">
+          </div>
+        </div>
+        <!-- table1 -->
+        <div class="table-box">
+          <el-table :data="varTableData" height="100%" style="width: 100%">
+            <el-table-column prop="num" label="泵号" width="40" align="center"/>
+            <el-table-column prop="name" label="药物名称" align="center"/>
+            <el-table-column prop="speed" label="速度(ml/h)" width="120">
+              <template #header>
+                <el-dropdown @command="table1SpeedCommand">
                   <span style="color: white;font-size: 14px;line-height: 20px;">
                     {{ table1SpeedVal || '请选择速度' }}
                   </span>
-                                    <template #dropdown>
-                                        <el-dropdown-menu>
-                                            <el-dropdown-item command="速度(ug/kg/min)">速度(ug/kg/min)
-                                            </el-dropdown-item>
-                                            <el-dropdown-item command="速度(ml/h)">速度(ml/h)</el-dropdown-item>
-                                        </el-dropdown-menu>
-                                    </template>
-                                </el-dropdown>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="total" label="累计药量(ml)" width="100">
-                            <template #default="scope">—</template>
-                        </el-table-column>
-                        <el-table-column prop="state" label="工作状态" width="70" align="center"/>
-                        <el-table-column label="特殊情况人为干预" align="center">
-                            <template #default="scope">
-                                <div class="table-btn-box">
-                                    <el-button size="small" color="#006080" @click="tableItemPlus(scope)">
-                                        <el-icon>
-                                            <Plus/>
-                                        </el-icon>
-                                    </el-button>
-                                    <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
-                                               @click="tableItemMinus(scope)">
-                                        <el-icon>
-                                            <Minus/>
-                                        </el-icon>
-                                    </el-button>
-                                    <!--									<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)">确定
-                                    </el-button>
-                                    <el-button size="small" color="#006080" @click="tableItemCancel(scope)">取消
-                                    </el-button>
-                                </div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="速度(ug/kg/min)">速度(ug/kg/min)
+                      </el-dropdown-item>
+                      <el-dropdown-item command="速度(ml/h)">速度(ml/h)</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </template>
+            </el-table-column>
+            <el-table-column prop="total" label="累计药量(ml)" width="100">
+              <template #default="scope">—</template>
+            </el-table-column>
+            <el-table-column prop="state" label="工作状态" width="70" align="center"/>
+            <el-table-column label="特殊情况人为干预" align="center">
+              <template #default="scope">
+                <div class="table-btn-box">
+                  <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 || !whetherControl"
+                             @click="tableItemMinus(scope)">
+                    <el-icon>
+                      <Minus/>
+                    </el-icon>
+                  </el-button>
+                  <!--									<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)" :disabled="!whetherControl">确定
+                  </el-button>
+                  <el-button size="small" color="#006080" @click="tableItemCancel(scope)" :disabled="!whetherControl">取消
+                  </el-button>
                 </div>
-                <!-- table2 -->
-                <div class="table-box">
-                    <el-table :data="fixedTableData" height="100%" style="width: 100%">
-                        <el-table-column prop="num" label="泵号" width="40" align="center"/>
-                        <el-table-column prop="name" label="药物名称" align="center"/>
-                        <el-table-column prop="speed" label="速度(ml/h)" width="100"/>
-                        <el-table-column prop="total" label="累计药量(ml)" width="100">
-                            <template #default="scope">—</template>
-                        </el-table-column>
-                        <el-table-column prop="state" label="工作状态" width="70" align="center"/>
-                        <el-table-column label="特殊情况人为干预" align="center">
-                            <template #default="scope">
-                                <div class="table-btn-box">
-                                    <el-button size="small" color="#006080" @click="tableItemPlus(scope)">
-                                        <el-icon>
-                                            <Plus/>
-                                        </el-icon>
-                                    </el-button>
-                                    <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
-                                               @click="tableItemMinus(scope)">
-                                        <el-icon>
-                                            <Minus/>
-                                        </el-icon>
-                                    </el-button>
-                                    <el-button size="small" color="#006080"
-                                               @click="tableItemConfirm(scope, fixedTableData)">确定
-                                    </el-button>
-                                    <el-button size="small" color="#006080" @click="tableItemCancel(scope)">取消
-                                    </el-button>
-                                </div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-            </div>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
+        <!-- table2 -->
+        <div class="table-box">
+          <el-table :data="fixedTableData" height="100%" style="width: 100%">
+            <el-table-column prop="num" label="泵号" width="40" align="center"/>
+            <el-table-column prop="name" label="药物名称" align="center"/>
+            <el-table-column prop="speed" label="速度(ml/h)" width="100"/>
+            <el-table-column prop="total" label="累计药量(ml)" width="100">
+              <template #default="scope">—</template>
+            </el-table-column>
+            <el-table-column prop="state" label="工作状态" width="70" align="center"/>
+            <el-table-column label="特殊情况人为干预" align="center">
+              <template #default="scope">
+                <div class="table-btn-box">
+                  <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 || !whetherControl"
+                             @click="tableItemMinus(scope)">
+                    <el-icon>
+                      <Minus/>
+                    </el-icon>
+                  </el-button>
+                  <el-button size="small" color="#006080"
+                             @click="tableItemConfirm(scope, fixedTableData)" :disabled="!whetherControl">确定
+                  </el-button>
+                  <el-button size="small" color="#006080" @click="tableItemCancel(scope)" :disabled="!whetherControl">取消
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
 
-        <el-dialog v-model="setDatabaseDialog" title="请选择需要查询的病人" width="300px" align-center>
-            <el-select v-model="database" filterable placeholder="Select" style="width: 100%;">
-                <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label" :value="item.value"/>
-            </el-select>
-            <template #footer>
+    <el-dialog v-model="setDatabaseDialog" title="请选择需要查询的病人" width="300px" align-center>
+      <el-select v-model="database" filterable placeholder="Select" style="width: 100%;">
+        <el-option v-for="item in databaseOptions" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+      <template #footer>
 				<span class="dialog-footer">
 					<el-button @click="setDatabaseDialog = false">取消</el-button>
 					<el-button type="primary" @click="setDatabase">确定</el-button>
 				</span>
-            </template>
-        </el-dialog>
-        <el-dialog v-model="isPatientDialog" title="患者信息" width="40%">
-            <PatientsForm ref="patientsFormRef" type="view" @close="isPatientDialog = false"/>
-        </el-dialog>
-    </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="isPatientDialog" title="患者信息" width="40%">
+      <PatientsForm ref="patientsFormRef" type="view" @close="isPatientDialog = false"/>
+    </el-dialog>
+  </div>
 </template>
 
 <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';
@@ -219,15 +220,15 @@ import {getPatientInfo} from "@/api/patient";
 const router = useRouter()
 
 const medicineCustom: any[] = [
-    {name: '丙泊酚', plus: 0.5, total: 50},
-    {name: '舒芬太尼', plus: 1, total: 100},
-    {name: '瑞芬太尼', plus: 0.05, total: 5},
-    {name: '顺阿曲库胺', plus: 0.02, total: 2},
-    {name: '尼卡地平', plus: 1, total: 100},
-    {name: '艾司洛尔', plus: 1, total: 100},
-    {name: '麻黄素', plus: 1, total: 100},
-    {name: '阿托品', plus: 1, total: 100},
-    {name: '罗库溴铵', plus: 0.1, total: 10}
+  {name: '丙泊酚', plus: 0.5, total: 50},
+  {name: '舒芬太尼', plus: 1, total: 100},
+  {name: '瑞芬太尼', plus: 0.05, total: 5},
+  {name: '顺阿曲库胺', plus: 0.02, total: 2},
+  {name: '尼卡地平', plus: 1, total: 100},
+  {name: '艾司洛尔', plus: 1, total: 100},
+  {name: '麻黄素', plus: 1, total: 100},
+  {name: '阿托品', plus: 1, total: 100},
+  {name: '罗库溴铵', plus: 0.1, total: 10}
 ]
 const remoteWsStore = useRemoteWsStore()
 const currentRemote = ref(remoteWsStore.getRemoteTask()[remoteWsStore.getCurrentTaskIndex()])
@@ -235,13 +236,13 @@ const userInfo = useUserStore()
 
 
 const chartDom1 = ref(),
-        chartDom2 = ref(),
-        chartDom3 = ref(),
-        chartDom4 = ref(),
-        liveVideo = ref(),
-        msgLog = ref(),
-        unusualMsgRef = ref(),
-        patientsFormRef = ref()
+    chartDom2 = ref(),
+    chartDom3 = ref(),
+    chartDom4 = ref(),
+    liveVideo = ref(),
+    msgLog = ref(),
+    unusualMsgRef = ref(),
+    patientsFormRef = ref()
 
 const isPatientDialog = ref(false)
 const database = ref('')
@@ -262,769 +263,814 @@ 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');
-        return;
-    }
-    msgLogScrollBottom()
-    initScale()
-    createConnect()
-    subscribeWS()
+  if (!currentRemote.value.isRemote) {
+    router.replace('/remote-manage/remote-manage');
+    return;
+  }
+  msgLogScrollBottom()
+  initScale()
+  createConnect()
+  subscribeWS()
 });
 
 onUnmounted(() => {
-    remoteWsStore.unsubscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index);
-    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()
+  remoteWsStore.unsubscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index);
+  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()
 })
 
 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)
+  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 disconnect() {
-    remoteWsStore.disconnectMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
-    remoteWsStore.disconnectChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
+  remoteWsStore.disconnectMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
+  remoteWsStore.disconnectChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
 
-    if (!router.currentRoute.value.path.startsWith('/remote-manage/')) {
-        const tasks: any = remoteWsStore.getRemoteTask()
-        tasks.forEach((task: any) => {
-            remoteWsStore.disconnect(task.patient, task.patientId, task.date, task.index)
-        })
-    }
+  if (!router.currentRoute.value.path.startsWith('/remote-manage/')) {
+    const tasks: any = remoteWsStore.getRemoteTask()
+    tasks.forEach((task: any) => {
+      remoteWsStore.disconnect(task.patient, task.patientId, task.date, task.index)
+    })
+  }
 }
 
 function subscribeWS() {
-    subscribeVital()
-    subscribeChat()
-    subscribeMedicine()
+  subscribeVital()
+  subscribeChat()
+  subscribeMedicine()
 }
 
 const subscribeVital = () => {
-    onVitalClose()
-    remoteWsStore.subscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
-            (res: any) => {
-                if (res.status != 2) {
-                    const data = JSON.parse(res.data);
-                    chartDom1.value.updateChartData(data.vitalSignsList[0]);
-                    chartDom2.value.updateChartData(data.vitalSignsList[0]);
-                    chartDom3.value.updateChartData(data.vitalSignsList[0]);
-                    chartDom4.value.updateChartData(data.vitalSignsList[0]);
-                    updateMedicineTable(data.aiMedicineList[0], data.docMedicineList);
-                }
-            })
+  onVitalClose()
+  remoteWsStore.subscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
+      (res: any) => {
+        if (res.status != 2) {
+          const data = JSON.parse(res.data);
+          chartDom1.value.updateChartData(data.vitalSignsList[0]);
+          chartDom2.value.updateChartData(data.vitalSignsList[0]);
+          chartDom3.value.updateChartData(data.vitalSignsList[0]);
+          chartDom4.value.updateChartData(data.vitalSignsList[0]);
+          updateMedicineTable(data.aiMedicineList[0], data.docMedicineList);
+        }
+      })
 }
+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,
-            (res: any) => {
-                mssageList.value.push(JSON.parse(res.data));
-            })
+  onChatClose()
+  remoteWsStore.subscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
+      (res: any) => {
+        mssageList.value.push(JSON.parse(res.data));
+      })
 }
 
 const subscribeMedicine = () => {
-    onMedicineClose()
-    remoteWsStore.subscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
-            (res: any) => {
-                const data = JSON.parse(res.data);
-                if (data.status != 1) {
-                    if (data.medicine) {
-                        if (varTableData.value[data.medicine]) varTableData.value[data.medicine] = medicineSpeedTemp[data.medicine];
-                        if (fixedTableData.value[data.medicine]) fixedTableData.value[data.medicine] = medicineSpeedTemp[data.medicine];
-                    }
-                } else {
-                    ElMessage.error(data.msg)
-                }
-            })
+  onMedicineClose()
+  remoteWsStore.subscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
+      (res: any) => {
+        const data = JSON.parse(res.data);
+        if (data.status != 1) {
+          if (data.medicine) {
+            if (varTableData.value[data.medicine]) varTableData.value[data.medicine] = medicineSpeedTemp[data.medicine];
+            if (fixedTableData.value[data.medicine]) fixedTableData.value[data.medicine] = medicineSpeedTemp[data.medicine];
+          }
+        } else {
+          ElMessage.error(data.msg)
+        }
+      })
 }
 
 const onVitalClose = () => {
-    remoteWsStore.vitalOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index, () => {
-        ElMessage.info('远程控制' + (currentRemote.value.index + 1) + '， 生命体征数据连接断开，正在尝试重连……')
-        setTimeout(() => {
-            remoteWsStore.createVitalConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
-            subscribeVital()
-        }, 3000)
-    })
+  remoteWsStore.vitalOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index, () => {
+    ElMessage.info('远程控制' + (currentRemote.value.index + 1) + '， 生命体征数据连接断开，正在尝试重连……')
+    setTimeout(() => {
+      remoteWsStore.createVitalConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
+      subscribeVital()
+    }, 3000)
+  })
 }
 
 const onChatClose = () => {
-    remoteWsStore.chatOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index, () => {
-        ElMessage.info('远程控制' + (currentRemote.value.index + 1) + '， 通讯连接断开，正在尝试重连……')
-        setTimeout(() => {
-            remoteWsStore.createChatConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
-            subscribeChat()
-        }, 3000)
-    })
+  remoteWsStore.chatOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index, () => {
+    ElMessage.info('远程控制' + (currentRemote.value.index + 1) + '， 通讯连接断开，正在尝试重连……')
+    setTimeout(() => {
+      remoteWsStore.createChatConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
+      subscribeChat()
+    }, 3000)
+  })
 }
 
 const onMedicineClose = () => {
-    remoteWsStore.medicineOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index, () => {
-        ElMessage.info('远程控制' + (currentRemote.value.index + 1) + '， 给药连接断开，正在尝试重连……')
-        setTimeout(() => {
-            remoteWsStore.createMedicineConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
-            subscribeMedicine()
-        }, 3000)
-    })
+  remoteWsStore.medicineOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index, () => {
+    ElMessage.info('远程控制' + (currentRemote.value.index + 1) + '， 给药连接断开，正在尝试重连……')
+    setTimeout(() => {
+      remoteWsStore.createMedicineConnect(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
+      subscribeMedicine()
+    }, 3000)
+  })
 }
 
 function initData() {
-    lungAlarm.value = false;
-    heartAlarm.value = false;
-    isAIDose.value = false;
-    unusual.value = [];
-    mssageList.value = [];
-    fixedTableData.value = [];
-    varTableData.value = [];
-    featureTable.value = [];
-    try {
-        msgLogScrollBottom();
-    } catch (error) {
-    }
+  lungAlarm.value = false;
+  heartAlarm.value = false;
+  isAIDose.value = false;
+  unusual.value = [];
+  mssageList.value = [];
+  fixedTableData.value = [];
+  varTableData.value = [];
+  featureTable.value = [];
+  try {
+    msgLogScrollBottom();
+  } catch (error) {
+  }
 }
 
 function updateMedicineTable(aiMedicine: any, doctorMedicine: any) {
-    if (aiMedicine) {
-        delete aiMedicine._id;
-        delete aiMedicine.Time;
-        if (currentAIMedicine && currentAIMedicine.Time == aiMedicine.Time) {
-        } else {
-            currentAIMedicine = aiMedicine;
-            const keys = Object.keys(aiMedicine);
-            keys.forEach(key => {
-                medicineSpeedTemp[key] = aiMedicine[key];
-            })
-            if (varTableData.value.length > 0) {
-                varTableData.value.forEach((medicine: any) => {
-                    medicine.speed = aiMedicine[medicine.name];
-                })
-                fixedTableData.value.forEach((medicine: any) => {
-                    medicine.speed = aiMedicine[medicine.name];
-                })
-            } else {
-                const varTable: any = [];
-                const fixedTable: any = [];
-                keys.forEach(key => {
-                    const medicine = {
-                        Phase: 0,
-                        name: key,
-                        speed: aiMedicine[key],
-                        total: 0,
-                        state: "正常"
-                    }
-                    if (remoteWsStore.varMedicine.includes(key)) {
-                        varTable.push(medicine);
-                    } else {
-                        fixedTable.push(medicine);
-                    }
-                })
-                varTableData.value = varTable;
-                fixedTableData.value = fixedTable;
-            }
-        }
+  if (aiMedicine) {
+    delete aiMedicine._id;
+    delete aiMedicine.Time;
+    if (currentAIMedicine && currentAIMedicine.Time == aiMedicine.Time) {
+    } else {
+      currentAIMedicine = aiMedicine;
+      const keys = Object.keys(aiMedicine);
+      keys.forEach(key => {
+        medicineSpeedTemp[key] = aiMedicine[key];
+      })
+      if (varTableData.value.length > 0) {
+        varTableData.value.forEach((medicine: any) => {
+          medicine.speed = aiMedicine[medicine.name];
+        })
+        fixedTableData.value.forEach((medicine: any) => {
+          medicine.speed = aiMedicine[medicine.name];
+        })
+      } else {
+        const varTable: any = [];
+        const fixedTable: any = [];
+        keys.forEach(key => {
+          const medicine = {
+            Phase: 0,
+            name: key,
+            speed: aiMedicine[key],
+            total: 0,
+            state: "正常"
+          }
+          if (remoteWsStore.varMedicine.includes(key)) {
+            varTable.push(medicine);
+          } else {
+            fixedTable.push(medicine);
+          }
+        })
+        varTableData.value = varTable;
+        fixedTableData.value = fixedTable;
+      }
     }
+  }
 
-    if (doctorMedicine) {
-        delete doctorMedicine._id;
-        delete doctorMedicine.Time;
-        if (currentDocMedicine && currentDocMedicine.Time == doctorMedicine.Time) {
-        } else {
-            currentDocMedicine = doctorMedicine;
-            const keys = Object.keys(doctorMedicine);
-            keys.forEach(key => {
-                medicineSpeedTemp[key] = doctorMedicine[key];
-            })
+  if (doctorMedicine) {
+    delete doctorMedicine._id;
+    delete doctorMedicine.Time;
+    if (currentDocMedicine && currentDocMedicine.Time == doctorMedicine.Time) {
+    } else {
+      currentDocMedicine = doctorMedicine;
+      const keys = Object.keys(doctorMedicine);
+      keys.forEach(key => {
+        medicineSpeedTemp[key] = doctorMedicine[key];
+      })
 
-            if (varTableData.value.length > 0) {
-                varTableData.value.forEach((medicine: any) => {
-                    medicine.speed = doctorMedicine[medicine.name];
-                });
-                fixedTableData.value.forEach((medicine: any) => {
-                    medicine.speed = doctorMedicine[medicine.name];
-                })
-            } else {
-                const varTable: any = [];
-                const fixedTable: any = [];
-                keys.forEach(key => {
-                    const medicine = {
-                        Phase: 0,
-                        name: key,
-                        speed: aiMedicine[key],
-                        total: 0,
-                        state: "正常"
-                    }
-                    if (remoteWsStore.varMedicine.includes(key)) {
-                        varTable.push(medicine);
-                    } else {
-                        fixedTable.push(medicine);
-                    }
-                })
-                varTableData.value = varTable;
-                fixedTableData.value = fixedTable;
-            }
-        }
+      if (varTableData.value.length > 0) {
+        varTableData.value.forEach((medicine: any) => {
+          medicine.speed = doctorMedicine[medicine.name];
+        });
+        fixedTableData.value.forEach((medicine: any) => {
+          medicine.speed = doctorMedicine[medicine.name];
+        })
+      } else {
+        const varTable: any = [];
+        const fixedTable: any = [];
+        keys.forEach(key => {
+          const medicine = {
+            Phase: 0,
+            name: key,
+            speed: aiMedicine[key],
+            total: 0,
+            state: "正常"
+          }
+          if (remoteWsStore.varMedicine.includes(key)) {
+            varTable.push(medicine);
+          } else {
+            fixedTable.push(medicine);
+          }
+        })
+        varTableData.value = varTable;
+        fixedTableData.value = fixedTable;
+      }
     }
+  }
 }
 
 function vitalExcepEvent(data: any) {
-    logUpdate(data)
+  logUpdate(data)
 }
 
 function logUpdate(msg: string) {
-    unusual.value.push(dateFormater('HH:mm:ss') + msg);
-    setTimeout(() => {
-        unusualMsgRef.value.scrollTo({
-            top: unusualMsgRef.value.scrollHeight,
-            behavior: 'smooth'
-        });
+  unusual.value.push(dateFormater('HH:mm:ss') + msg);
+  setTimeout(() => {
+    unusualMsgRef.value.scrollTo({
+      top: unusualMsgRef.value.scrollHeight,
+      behavior: 'smooth'
     });
+  });
 }
 
 // table 速度选择
 function table1SpeedCommand(e: any) {
-    table1SpeedVal.value = e
+  table1SpeedVal.value = e
 }
 
 
 function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
-    let width = designWidth || 1920,
-            height = designHeight || 1010;
-    let clientHeight = document.documentElement.clientHeight - 50;
-    let clientWidth = document.documentElement.clientWidth;
-    let scale = 1;
-    scale = (clientHeight / clientWidth) < (height / width) ? clientHeight / height : clientWidth / width;
-    // scale = clientHeight / height;
-    // scale = clientWidth / width;
-    const renderDom = document.getElementById(renderDomId);
-    if (renderDom) {
-        renderDom.style.height = clientHeight / scale + 'px';
-        renderDom.style.width = clientWidth / scale + 'px';
-        renderDom.style.transform = 'scale(' + scale + ')';
-    }
+  let width = designWidth || 1920,
+      height = designHeight || 1010;
+  let clientHeight = document.documentElement.clientHeight - 50;
+  let clientWidth = document.documentElement.clientWidth;
+  let scale = 1;
+  scale = (clientHeight / clientWidth) < (height / width) ? clientHeight / height : clientWidth / width;
+  // scale = clientHeight / height;
+  // scale = clientWidth / width;
+  const renderDom = document.getElementById(renderDomId);
+  if (renderDom) {
+    renderDom.style.height = clientHeight / scale + 'px';
+    renderDom.style.width = clientWidth / scale + 'px';
+    renderDom.style.transform = 'scale(' + scale + ')';
+  }
 }
 
 function initScale() {
-    let w = 1920,
-            h = 1010;
+  let w = 1920,
+      h = 1010;
+  keepFit(w, h, 'screenBox');
+  window.addEventListener('resize', () => {
     keepFit(w, h, 'screenBox');
-    window.addEventListener('resize', () => {
-        keepFit(w, h, 'screenBox');
-    });
+  });
 }
 
 const selectDatabase = (value: any) => {
-    initData();
+  initData();
 };
 const setDatabase = () => {
-    initData();
-    setDatabaseDialog.value = false;
+  initData();
+  setDatabaseDialog.value = false;
 };
 
 const viewPatientInfo = () => {
-    getPatientInfo(currentRemote.value.patient, currentRemote.value.patientId,
-            currentRemote.value.date).then(res => {
-    })
-    isPatientDialog.value = true;
-    setTimeout(() => {
-        patientsFormRef.value.resetData()
-        patientsFormRef.value.formData = JSON.parse(JSON.stringify({
-            id: '',
-            name: '测试',
-            code: 'afasf',
-            sex: '男',
-            dept: '测试',
-            bodyHeight: '170',
-            isMedicalHistory: '无',
-            bodyWeight: '80',
-            medicalHistoryName: '无',
-            age: '22',
-            allergyHistoryName: '无',
-            phone: '123456',
-            hospitalTime: new Date()
-        }))
-    }, 0)
+  getPatientInfo(currentRemote.value.patient, currentRemote.value.patientId,
+      currentRemote.value.date).then(res => {
+  })
+  isPatientDialog.value = true;
+  setTimeout(() => {
+    patientsFormRef.value.resetData()
+    patientsFormRef.value.formData = JSON.parse(JSON.stringify({
+      id: '',
+      name: '测试',
+      code: 'afasf',
+      sex: '男',
+      dept: '测试',
+      bodyHeight: '170',
+      isMedicalHistory: '无',
+      bodyWeight: '80',
+      medicalHistoryName: '无',
+      age: '22',
+      allergyHistoryName: '无',
+      phone: '123456',
+      hospitalTime: new Date()
+    }))
+  }, 0)
 }
 const backRemote = () => {
-    router.back();
+  router.back();
 }
 const playPause = () => {
-    if (liveVideo.value.paused) {
-        liveVideo.value.play(); // 播放视频
-        isVideoPlay.value = true;
-    } else {
-        liveVideo.value.pause(); // 暂停视频
-        isVideoPlay.value = false;
-    }
+  if (liveVideo.value.paused) {
+    liveVideo.value.play(); // 播放视频
+    isVideoPlay.value = true;
+  } else {
+    liveVideo.value.pause(); // 暂停视频
+    isVideoPlay.value = false;
+  }
 }
 const sendMsg = () => {
-    if (msgVal.value.trim() == '') return;
-    remoteWsStore.sendMsg(currentRemote.value.patient, currentRemote.value.patientId,
-            currentRemote.value.date, msgVal.value, currentRemote.value.index, function (res: any) {
-                if (res.code == 1) {
-                    ElMessage.error(res.msg)
-                }
-            })
-    msgVal.value = '';
-    setTimeout(() => {
-        msgLogScrollBottom()
-    }, 0);
+  if (msgVal.value.trim() == '') return;
+  remoteWsStore.sendMsg(currentRemote.value.patient, currentRemote.value.patientId,
+      currentRemote.value.date, msgVal.value, currentRemote.value.index, function (res: any) {
+        if (res.code == 1) {
+          ElMessage.error(res.msg)
+        }
+      })
+  msgVal.value = '';
+  setTimeout(() => {
+    msgLogScrollBottom()
+  }, 0);
 }
 
 function msgLogScrollBottom() {
-    msgLog.value.scrollTo({
-        top: msgLog.value.scrollHeight,
-        behavior: 'smooth'
-    });
+  msgLog.value.scrollTo({
+    top: msgLog.value.scrollHeight,
+    behavior: 'smooth'
+  });
 }
 
 const tableItemPlus = (e: any) => {
-    const obj = medicineCustom.find(item => item.name === e.row.name) || {plus: 1};
-    e.row.speed += obj.plus;
-    e.row.speed = Number(e.row.speed.toFixed(2));
+  const obj = medicineCustom.find(item => item.name === e.row.name) || {plus: 1};
+  e.row.speed += obj.plus;
+  e.row.speed = Number(e.row.speed.toFixed(2));
 }
 
 const tableItemMinus = (e: any) => {
-    const obj = medicineCustom.find(item => item.name === e.row.name) || {plus: 1};
-    if (!isAIDose.value && e.row.speed - obj.plus <= 0) return;
-    e.row.speed -= obj.plus;
-    if (e.row.speed < 0) e.row.speed = 0;
-    else e.row.speed = Number(e.row.speed.toFixed(2));
+  const obj = medicineCustom.find(item => item.name === e.row.name) || {plus: 1};
+  if (!isAIDose.value && e.row.speed - obj.plus <= 0) return;
+  e.row.speed -= obj.plus;
+  if (e.row.speed < 0) e.row.speed = 0;
+  else e.row.speed = Number(e.row.speed.toFixed(2));
 }
 
 const tableItemConfirm = (e: any, tableData: any) => {
-    if (tableData.length < 1) return;
-    const params = {
-        name: currentRemote.value.patient,
-        id: currentRemote.value.patientId,
-        date: currentRemote.value.date,
-        flag: "1",
-        medicine: e.row.name,
-        value: e.row.speed,
-        index: currentRemote.value.index
-    }
-    remoteWsStore.sendMedicine(params, function () {
-    });
-}
 
+  ElMessageBox.confirm('确定给药吗？', '确认提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  })
+      .then(() => {
+        // 点击确定按钮后的逻辑
+        if (tableData.length < 1) return;
+        const params = {
+          name: currentRemote.value.patient,
+          id: currentRemote.value.patientId,
+          date: currentRemote.value.date,
+          flag: "1",
+          medicine: e.row.name,
+          value: e.row.speed,
+          index: currentRemote.value.index
+        }
+        remoteWsStore.sendMedicine(params, function () {
+        });
+      })
+      .catch(() => {
+        // 点击取消按钮后的逻辑
+        e.row.speed = medicineSpeedTemp[e.row.name];
+      });
+}
 const tableItemCancel = (e: any) => {
-    e.row.speed = medicineSpeedTemp[e.row.name];
+  e.row.speed = medicineSpeedTemp[e.row.name];
 }
 
 function startAI() {
-    const params: any = {
-        name: currentRemote.value.patient,
-        id: currentRemote.value.patientId,
-        date: currentRemote.value.date,
-        flag: "0",
-    }
-    remoteWsStore.sendMedicine(params, function () {
-    });
+  const params: any = {
+    name: currentRemote.value.patient,
+    id: currentRemote.value.patientId,
+    date: currentRemote.value.date,
+    flag: "0",
+  }
+  remoteWsStore.sendMedicine(params, function () {
+  });
 }
 
 </script>
 
 <style lang="scss" scoped>
 .remote-box {
+  width: 100%;
+  height: 100%;
+  background: #f1f3f5;
+  padding: 10px 0 20px 0;
+  transform-origin: top left;
+  overflow-y: auto;
+
+  .el-button {
+    color: white;
+  }
+
+  .main-box {
     width: 100%;
     height: 100%;
-    background: #f1f3f5;
-    padding: 10px 0 20px 0;
-    transform-origin: top left;
-    overflow-y: auto;
+    background: white;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
 
-    .el-button {
-        color: white;
+    .left-box {
+      width: 35%;
+      height: 100%;
+
+      & > h3 {
+        font-size: 26px;
+        color: $main-color;
+        line-height: 30px;
+        margin-bottom: 20px;
+        font-weight: 600;
+      }
+
+      .chart-line {
+        width: 100%;
+        height: calc(25% - 30px);
+        margin-bottom: 20px;
+        background: #e8f5f8;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+        // overflow: hidden;
+      }
+
+      .chart-ecg {
+        width: 100%;
+        height: calc(25% - 50px);
+        border-left: 1px solid #92b3c1;
+        border-bottom: 1px solid #92b3c1;
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          top: 0;
+          left: -5px;
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+          border-bottom: 15px solid #285e7d;
+          border-top: 0;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          bottom: -5px;
+          right: 0;
+          border-left: 15px solid #285e7d;
+          border-right: 0;
+          border-bottom: 5px solid transparent;
+          border-top: 5px solid transparent;
+        }
+      }
     }
 
-    .main-box {
+    .center-box {
+      width: calc(100% - 1500px);
+      min-width: 500px;
+      height: 100%;
+
+      .body-box {
         width: 100%;
-        height: 100%;
-        background: white;
-        padding: 20px;
-        box-sizing: border-box;
+        height: calc(100% - 110px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .body-img {
+          position: relative;
+          // width: 400px;
+          // height: 650px;
+          margin-top: 80px;
+          width: 500px;
+          height: 812.5px;
+          min-height: 650px;
+          //width: 1000px;
+          //height: 850px;
+          //min-height: 650px;
+
+          .lung-img {
+            position: absolute;
+            width: 500px;
+            //width: 100%;
+            height: auto;
+            top: 240px;
+            left: 0;
+            transition: all 2s;
+          }
+
+          .heart-img {
+            position: absolute;
+            width: 500px;
+            height: auto;
+            top: 420px;
+            left: 0;
+            transition: all 2s;
+          }
+        }
+      }
+
+      .btn-box {
+        position: relative;
+        width: 100%;
+        height: 110px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .start-btn {
+          width: 230px;
+          height: 40px;
+          font-size: 20px;
+          border-radius: 16px;
+          font-weight: 600;
+        }
+
+        .right-btn-box {
+          position: absolute;
+          width: 100px;
+          height: 62px;
+          top: calc(50% - 31px);
+          right: 0;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .el-button {
+            width: 100%;
+            padding: 0;
+            height: 25px;
+            line-height: 22px;
+            border: 1px solid #e0e0e0;
+            color: #616161;
+
+            &.active {
+              background: $main-color;
+              color: white;
+            }
+
+            &:last-of-type {
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .right-box {
+      width: 35%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .top-btn-box {
+        width: 100%;
+        height: 34px;
+        margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .top-left-btn-box {
+          display: flex;
+          align-items: center;
+
+          .el-select {
+            margin-right: 10px;
+          }
+        }
+
+        .el-button {
+          border-radius: 16px;
+          height: 31px;
+          background-color: transparent;
+          color: #c77000;
+        }
+
+        & > .el-button {
+          border-radius: 4px;
+          background-color: #f2f3f5;
+          color: $main-color;
+        }
+      }
+
+      .monitoring-message {
+        width: 670px;
+        height: 450px;
+        padding-bottom: 10px;
         display: flex;
         justify-content: space-between;
 
-        .left-box {
-            width: 35%;
-            height: 100%;
+        & > .left-box {
+          position: relative;
+          width: 200px;
+          height: 100%;
 
-            & > h3 {
-                font-size: 26px;
-                color: $main-color;
+          .unusual-title {
+            display: block;
+            width: 100%;
+            line-height: 38px;
+            color: #C77000;
+            font-size: 20px;
+            text-align: center;
+            border: 1px dashed #C1C1C1;
+            border-radius: 10px;
+          }
+
+          .unusual-box {
+            width: 100%;
+            height: calc(100% - 45px);
+            // background: #F8F8F8;
+            border-left: 1px dashed #C1C1C1;
+            // border-radius: 4px;
+            margin-top: 5px;
+            padding: 8px 16px;
+            overflow-y: auto;
+
+            li {
+              color: #F80000;
+              font-size: 14px;
+              line-height: 22px;
+            }
+          }
+        }
+
+        & > .right-box {
+          width: calc(100% - 205px);
+          height: 100%;
+
+          .video-box {
+            position: relative;
+            width: 100%;
+            height: 270px;
+            background: $main-color;
+            /* background: url(@/assets/imgs/video_bck.png);
+background-size: 100% 100%; */
+
+            &:hover {
+              .icon-box {
+                display: flex;
+              }
+            }
+
+            .icon-box {
+              display: none;
+              position: absolute;
+              top: 0;
+              left: 0;
+              bottom: 0;
+              right: 0;
+              font-size: 60px;
+              color: white;
+              background: rgba(black, .3);
+              justify-content: center;
+              align-items: center;
+            }
+
+            video {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+
+          .message-box {
+            width: 100%;
+            //            height: 270px;
+            height: 149px;
+            // margin-bottom: 5px;
+
+            .message-log {
+              width: 100%;
+              height: calc(100% - 40px);
+              max-height: 109px;
+              padding: 16px 20px;
+              box-sizing: border-box;
+              border: 1px solid #c8c8c8;
+              background: #f8f8f8;
+              overflow-y: auto;
+
+              li {
+                width: 100%;
+                font-size: 14px;
+                line-height: 1.6;
+                margin: 5px 0;
+
+                &.align-right {
+                  text-align: right;
+
+                  span {
+                    background: $main-color;
+                  }
+                }
+
+                span {
+                  display: inline-block;
+                  max-width: 80%;
+                  padding: 6px 8px;
+                  box-sizing: border-box;
+                  border-radius: 8px;
+                  color: white;
+                  letter-spacing: 1px;
+                  background: #92b3c1;
+                  text-align: left;
+                }
+              }
+            }
+
+            .send-box {
+              width: 100%;
+              height: 40px;
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-end;
+
+              .el-input {
+                width: calc(100% - 110px);
+                height: 32px;
+
+                :deep(.el-input__wrapper) {
+                  background-color: #F2F3F5;
+                  border-color: #C1C1C1;
+                }
+              }
+
+              .el-button {
+                padding: 0;
+                width: 100px;
                 line-height: 30px;
-                margin-bottom: 20px;
-                font-weight: 600;
+              }
+            }
+          }
+        }
+      }
+
+      .table-box {
+        width: 100%;
+        height: calc(50% - 264.5px);
+        margin-bottom: 20px;
+        flex-grow: 1;
+
+        :deep(.el-table__inner-wrapper) {
+          .el-table__cell {
+            padding: 6px 0;
+          }
+
+          .cell {
+            padding: 0 2px;
+          }
+
+          .el-table__header-wrapper {
+            tr {
+              background-color: $main-color;
             }
 
-            .chart-line {
-                width: 100%;
-                height: calc(25% - 30px);
-                margin-bottom: 20px;
-                background: #e8f5f8;
-                border-top-left-radius: 20px;
-                border-top-right-radius: 20px;
-                // overflow: hidden;
-            }
-
-            .chart-ecg {
-                width: 100%;
-                height: calc(25% - 50px);
-                border-left: 1px solid #92b3c1;
-                border-bottom: 1px solid #92b3c1;
-
-                &::before {
-                    content: '';
-                    position: absolute;
-                    width: 0;
-                    height: 0;
-                    top: 0;
-                    left: -5px;
-                    border-left: 5px solid transparent;
-                    border-right: 5px solid transparent;
-                    border-bottom: 15px solid #285e7d;
-                    border-top: 0;
-                }
-
-                &::after {
-                    content: '';
-                    position: absolute;
-                    width: 0;
-                    height: 0;
-                    bottom: -5px;
-                    right: 0;
-                    border-left: 15px solid #285e7d;
-                    border-right: 0;
-                    border-bottom: 5px solid transparent;
-                    border-top: 5px solid transparent;
-                }
+            th.el-table__cell {
+              color: white;
+              background-color: $main-color;
+              padding: 8px 0;
+              font-weight: 400;
             }
+          }
         }
 
-        .center-box {
-            width: calc(100% - 1500px);
-            min-width: 500px;
-            height: 100%;
+        .table-btn-box {
+          .el-button {
+            padding: 0 7px;
+            height: 24px;
+            line-height: 22px;
 
-            .body-box {
-                width: 100%;
-                height: calc(100% - 110px);
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                .body-img {
-                    position: relative;
-                    // width: 400px;
-                    // height: 650px;
-                    width: 1000px;
-                    height: 850px;
-                    //min-height: 650px;
-
-                    .lung-img {
-                        position: absolute;
-                        //width: 500px;
-                        width: 100%;
-                        height: auto;
-                        top: 230px;
-                        left: 0;
-                        transition: all 2s;
-                    }
-
-                    .heart-img {
-                        position: absolute;
-                        width: 100%;
-                        height: auto;
-                        top: 55%;
-                        left: 0;
-                        transition: all 2s;
-                    }
-                }
-            }
-
-            .btn-box {
-                position: relative;
-                width: 100%;
-                height: 110px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                .start-btn {
-                    width: 230px;
-                    height: 40px;
-                    font-size: 20px;
-                    border-radius: 16px;
-                    font-weight: 600;
-                }
-
-                .right-btn-box {
-                    position: absolute;
-                    width: 100px;
-                    height: 62px;
-                    top: calc(50% - 31px);
-                    right: 0;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-
-                    .el-button {
-                        width: 100%;
-                        padding: 0;
-                        height: 25px;
-                        line-height: 22px;
-                        border: 1px solid #e0e0e0;
-                        color: #616161;
-
-                        &.active {
-                            background: $main-color;
-                            color: white;
-                        }
-
-                        &:last-of-type {
-                            margin: 0;
-                        }
-                    }
-                }
-            }
-        }
-
-        .right-box {
-            width: 35%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-
-            .top-btn-box {
-                width: 100%;
-                height: 34px;
-                margin-bottom: 5px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .top-left-btn-box {
-                    display: flex;
-                    align-items: center;
-
-                    .el-select {
-                        margin-right: 10px;
-                    }
-                }
-
-                .el-button {
-                    border-radius: 16px;
-                    height: 31px;
-                    background-color: transparent;
-                    color: #c77000;
-                }
-
-                & > .el-button {
-                    border-radius: 4px;
-                    background-color: #f2f3f5;
-                    color: $main-color;
-                }
-            }
-
-            .monitoring-message {
-                width: 670px;
-                height: 450px;
-                padding-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-
-                & > .left-box {
-                    position: relative;
-                    width: 200px;
-                    height: 100%;
-
-                    .unusual-title {
-                        display: block;
-                        width: 100%;
-                        line-height: 38px;
-                        color: #C77000;
-                        font-size: 20px;
-                        text-align: center;
-                        border: 1px dashed #C1C1C1;
-                        border-radius: 10px;
-                    }
-
-                    .unusual-box {
-                        width: 100%;
-                        height: calc(100% - 45px);
-                        // background: #F8F8F8;
-                        border-left: 1px dashed #C1C1C1;
-                        // border-radius: 4px;
-                        margin-top: 5px;
-                        padding: 8px 16px;
-                        overflow-y: auto;
-
-                        li {
-                            color: #F80000;
-                            font-size: 14px;
-                            line-height: 22px;
-                        }
-                    }
-                }
-
-                & > .right-box {
-                    width: calc(100% - 205px);
-                    height: 100%;
-
-                    .video-box {
-                        position: relative;
-                        width: 100%;
-                        height: 270px;
-                        background: $main-color;
-                        /* background: url(@/assets/imgs/video_bck.png);
-        background-size: 100% 100%; */
-
-                        &:hover {
-                            .icon-box {
-                                display: flex;
-                            }
-                        }
-
-                        .icon-box {
-                            display: none;
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            bottom: 0;
-                            right: 0;
-                            font-size: 60px;
-                            color: white;
-                            background: rgba(black, .3);
-                            justify-content: center;
-                            align-items: center;
-                        }
-
-                        video {
-                            width: 100%;
-                            height: 100%;
-                            object-fit: cover;
-                        }
-                    }
-
-                    .message-box {
-                        width: 100%;
-                        //            height: 270px;
-                        height: 149px;
-                        // margin-bottom: 5px;
-
-                        .message-log {
-                            width: 100%;
-                            height: calc(100% - 40px);
-                            max-height: 109px;
-                            padding: 16px 20px;
-                            box-sizing: border-box;
-                            border: 1px solid #c8c8c8;
-                            background: #f8f8f8;
-                            overflow-y: auto;
-
-                            li {
-                                width: 100%;
-                                font-size: 14px;
-                                line-height: 1.6;
-                                margin: 5px 0;
-
-                                &.align-right {
-                                    text-align: right;
-                                  span {
-                                    background: $main-color;
-                                  }
-                                }
-
-                                span {
-                                    display: inline-block;
-                                    max-width: 80%;
-                                    padding: 6px 8px;
-                                    box-sizing: border-box;
-                                    border-radius: 8px;
-                                    color: white;
-                                    letter-spacing: 1px;
-                                    background: #92b3c1;
-                                    text-align: left;
-                                }
-                            }
-                        }
-
-                        .send-box {
-                            width: 100%;
-                            height: 40px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: flex-end;
-
-                            .el-input {
-                                width: calc(100% - 110px);
-                                height: 32px;
-
-                                :deep(.el-input__wrapper) {
-                                    background-color: #F2F3F5;
-                                    border-color: #C1C1C1;
-                                }
-                            }
-
-                            .el-button {
-                                padding: 0;
-                                width: 100px;
-                                line-height: 30px;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .table-box {
-                width: 100%;
-                height: calc(50% - 264.5px);
-                margin-bottom: 20px;
-                flex-grow: 1;
-
-                :deep(.el-table__inner-wrapper) {
-                    .el-table__cell {
-                        padding: 6px 0;
-                    }
-
-                    .cell {
-                        padding: 0 2px;
-                    }
-
-                    .el-table__header-wrapper {
-                        tr {
-                            background-color: $main-color;
-                        }
-
-                        th.el-table__cell {
-                            color: white;
-                            background-color: $main-color;
-                            padding: 8px 0;
-                            font-weight: 400;
-                        }
-                    }
-                }
-
-                .table-btn-box {
-                    .el-button {
-                        padding: 0 7px;
-                        height: 24px;
-                        line-height: 22px;
-
-                        &:not(:first-of-type) {
-                            margin-left: 4px;
-                        }
-                    }
-                }
+            &:not(:first-of-type) {
+              margin-left: 4px;
             }
+          }
         }
+      }
     }
+  }
 }</style>