远程管理接口调试

package.json

@@ -10,7 +10,9 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "axios": "^1.3.3",
+    "crypto-js": "4.2.0",
     "echarts": "^5.4.1",
     "element-plus": "2.3.1",
     "js-cookie": "^3.0.5",
@@ -20,8 +22,7 @@
     "vant": "^4.8.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
-    "xlsx": "^0.18.5",
+    "xlsx": "^0.18.5"
-    "crypto-js": "4.2.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",

src/views/login/login.vue

@@ -377,7 +377,6 @@ function sliderSuccess() {
     // 存储token 信息
     Session.set('token', data.access_token);
     Session.set('refresh_token', data.refresh_token);
-    console.log(data);
     toHome()
   })
 }

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

@@ -15,7 +15,7 @@
       <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 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">
@@ -23,12 +23,15 @@
 
         </div>
         <div class="btn-box">
-					<el-button class="start-btn" color="#F80000" @click="getTableData(!isStart)">{{ isStart ? '终止' : '开始'
+          <el-button class="start-btn" color="#F80000" @click="getTableData(!isStart)">{{
-					}}</el-button>
+              isStart ? '终止' : '开始'
+            }}
+          </el-button>
           <div class="right-btn-box">
             <el-button :class="{ 'active': isAIDose }" size="small" @click="getTableData(true)">AI给药</el-button>
             <el-button :class="{ 'active': !isAIDose }" size="small"
-							@click="getTableData(false)">人工给药</el-button>
+                       @click="getTableData(false)">人工给药
+            </el-button>
           </div>
         </div>
       </div>
@@ -38,15 +41,18 @@
             <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" />
+                         :value="item.value"/>
             </el-select>
             <el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
             <el-button color="#C77000">已连接</el-button>
             <el-button color="#C77000">机器人运行正常</el-button>
           </div>
-					<el-button color="#e0e0e0" @click="backRemote"><el-icon>
+          <el-button color="#e0e0e0" @click="backRemote">
-							<Back />
+            <el-icon>
-						</el-icon> 返回</el-button>
+              <Back/>
+            </el-icon>
+            返回
+          </el-button>
         </div>
         <div class="monitoring-message">
           <div class="left-box">
@@ -59,15 +65,15 @@
             <div class="video-box" @click="playPause">
               <div class="icon-box">
                 <el-icon v-if="isVideoPlay">
-									<VideoPause />
+                  <VideoPause/>
                 </el-icon>
                 <el-icon v-else>
-									<VideoPlay />
+                  <VideoPlay/>
                 </el-icon>
               </div>
               <!--  poster="@/assets/imgs/video_bck.png" -->
               <video ref="liveVideo">
-								<source src="@/assets/medical.mp4" type="video/mp4" />
+                <source src="@/assets/medical.mp4" type="video/mp4"/>
               </video>
             </div>
             <div class="message-box">
@@ -78,7 +84,7 @@
                 </li>
               </ul>
               <div class="send-box">
-								<el-input v-model="msgVal" placeholder="请输入消息" />
+                <el-input v-model="msgVal" placeholder="请输入消息"/>
                 <el-button color="#006080" @click="sendMsg">发送消息</el-button>
               </div>
             </div>
@@ -86,27 +92,33 @@
         </div>
         <div class="table-box">
           <el-table :data="tableData" height="100%" style="width: 100%">
-						<el-table-column prop="num" label="票号" width="40" align="center" />
+            <el-table-column prop="num" label="票号" width="40" align="center"/>
-						<el-table-column prop="name" label="药物名称" align="center" />
+            <el-table-column prop="name" label="药物名称" align="center"/>
-						<el-table-column prop="speed" label="速度(ml/h)" width="100" />
+            <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 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>
+                  <el-button size="small" color="#006080" @click="tableItemPlus(scope)">
-											<Plus />
+                    <el-icon>
-										</el-icon></el-button>
+                      <Plus/>
+                    </el-icon>
+                  </el-button>
                   <el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
-										@click="tableItemMinus(scope)"><el-icon>
+                             @click="tableItemMinus(scope)">
-											<Minus />
+                    <el-icon>
-										</el-icon></el-button>
+                      <Minus/>
+                    </el-icon>
+                  </el-button>
                   <el-button size="small" color="#006080" @click="tableItemConfirm(scope)"
-										:disabled="tableDataStore[scope.$index].speed === scope.row.speed">确定</el-button>
+                             :disabled="tableDataStore[scope.$index].speed === scope.row.speed">确定
+                  </el-button>
                   <el-button size="small" color="#006080" @click="tableItemCancel(scope)"
-										:disabled="tableDataStore[scope.$index].speed === scope.row.speed">取消</el-button>
+                             :disabled="tableDataStore[scope.$index].speed === scope.row.speed">取消
+                  </el-button>
                 </div>
               </template>
             </el-table-column>
@@ -117,7 +129,7 @@
 
     <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-option v-for="item in databaseOptions" :key="item.value" :label="item.label" :value="item.value"/>
       </el-select>
       <template #footer>
 				<span class="dialog-footer">
@@ -126,17 +138,19 @@
 				</span>
       </template>
     </el-dialog>
-		<el-dialog v-model="isPatientDialog" title="患者信息" width="40%"><PatientsForm ref="patientsFormRef" type="view" @close="isPatientDialog = false" /></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, ref, reactive, onBeforeUnmount } from 'vue';
+import {onMounted, ref, reactive, onBeforeUnmount} from 'vue';
-import { useRouter, useRoute } from 'vue-router'
+import {useRouter, useRoute} from 'vue-router'
-import { ElMessageBox, ElMessage } from 'element-plus';
+import {ElMessageBox, ElMessage} from 'element-plus';
-import { useRemoteStore } from '@/stores/remote-info-store'
+import {useRemoteStore} from '@/stores/remote-info-store'
-import { dateFormater } from '@/utils/date-util';
+import {dateFormater} from '@/utils/date-util';
-import { post } from "@/utils/request";
+import {post} from "@/utils/request";
 import chartLine from './chart/chart-line.vue';
 import chartEcg from './chart/chart-ecg.vue';
 import PatientsForm from '@/views/patients-manage/form/patients-form.vue'
@@ -150,15 +164,15 @@ const router = useRouter()
 const route = useRoute()
 
 const medicineCustom: any[] = [
-	{ name: '丙泊酚', plus: 0.5, total: 50 },
+  {name: '丙泊酚', plus: 0.5, total: 50},
-	{ name: '舒芬太尼', plus: 1, total: 100 },
+  {name: '舒芬太尼', plus: 1, total: 100},
-	{ name: '瑞芬太尼', plus: 0.05, total: 5 },
+  {name: '瑞芬太尼', plus: 0.05, total: 5},
-	{ name: '顺阿曲库胺', plus: 0.02, total: 2 },
+  {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: 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.1, total: 10}
 ];
 let featureTimer = 0;
 let ecgTimer = 0;
@@ -182,7 +196,7 @@ const messageSum = ref(10);
 const userName = ref('admin');
 const setDatabaseDialog = ref(false);
 const featureTable = ref([] as any[]);
-let chartNowData = reactive({ ID: 0 });
+let chartNowData = reactive({ID: 0});
 const lungAlarm = ref(false); // 肺部警告
 const heartAlarm = ref(false); // 心脏警告
 const isStart = ref(false); // 是否开始
@@ -197,9 +211,9 @@ const tableDataStore = ref([] as any[]);
 
 getDatabases();
 onMounted(() => {
-	if(currentRemote.isRemote) {
+  if (currentRemote.isRemote) {
 
-	}else{
+  } else {
     router.replace('/remote-manage/remote-manage')
     return
   }
@@ -234,9 +248,11 @@ function initData() {
   getTableData(isAIDose.value);
   try {
     msgLogScrollBottom();
-	} catch (error) { }
+  } catch (error) {
+  }
 
 }
+
 // AIFlagTable 表2秒获取一次
 function getAIFlag() {
   let isRunTimer = true;
@@ -244,7 +260,7 @@ function getAIFlag() {
   aiFlagTimer = setInterval(() => {
     if (isRunTimer) {
       isRunTimer = false;
-			post('/getaiflag', { database: database.value, start: 0, end: 1 }, (res: any) => {
+      post('/getaiflag', {database: database.value, start: 0, end: 1}, (res: any) => {
         if (res.status === 200 && res.data.length > 0) {
           const flag = Boolean(res.data[0].Flag);
           if (isAIDose.value !== flag) getTableData(Boolean(res.data[0].Flag));
@@ -254,6 +270,7 @@ function getAIFlag() {
     }
   }, 2000);
 }
+
 function setTableData(res: any) {
   if (res.data.length > 0) {
     let i = 0;
@@ -261,7 +278,14 @@ function setTableData(res: any) {
     for (let key in res.data[0]) {
       if (key !== 'ID' && key !== 'Phase' && key !== 'Time' && key !== 'TIME') {
         i++;
-				ary.push({ Phase: res.data[0].Phase, num: i, name: key, speed: res.data[0][key], total: medicineCustom.find(o => o.name === key)?.total, state: '正常' });
+        ary.push({
+          Phase: res.data[0].Phase,
+          num: i,
+          name: key,
+          speed: res.data[0][key],
+          total: medicineCustom.find(o => o.name === key)?.total,
+          state: '正常'
+        });
       }
     }
     tableData.value = ary;
@@ -270,12 +294,20 @@ function setTableData(res: any) {
     const defaultMedicine: string[] = ['丙泊酚', '舒芬太尼', '瑞芬太尼', '顺阿曲库胺', '尼卡地平', '艾司洛尔', '麻黄素', '阿托品'];
     const ary: any = [];
     defaultMedicine.forEach((item, index) => {
-			ary.push({ Phase: 1, num: index + 1, name: item, speed: 0, total: medicineCustom.find(o => o.name === item)?.total, state: '正常' });
+      ary.push({
+        Phase: 1,
+        num: index + 1,
+        name: item,
+        speed: 0,
+        total: medicineCustom.find(o => o.name === item)?.total,
+        state: '正常'
+      });
     });
     tableData.value = ary;
   }
   tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
 }
+
 // AIMedicineTable、DoctorMedicineTable 表2秒获取一次
 function getMedicine() {
   let isRunTimer = true;
@@ -284,7 +316,7 @@ function getMedicine() {
     if (isRunTimer && JSON.stringify(tableDataStore) === JSON.stringify(tableData) && isAIDose.value) {
       isRunTimer = false;
       const url = isAIDose.value ? '/getaimedicine' : '/getdoctormedicine';
-			post(url, { database: database.value, start: 0, end: 1 }, (res: any) => {
+      post(url, {database: database.value, start: 0, end: 1}, (res: any) => {
         if (res.status === 200) {
           setTableData(res);
         }
@@ -293,6 +325,7 @@ function getMedicine() {
     }
   }, 2000);
 }
+
 // FeatureTable 表2秒获取一次
 function getChartData() {
   let isRunTimer = true;
@@ -306,11 +339,13 @@ function getChartData() {
   ecgTimer = setInterval(() => {
     try {
       chartDom4.value.updateChart(0, new Date());
-		} catch (error) { }
+    } catch (error) {
+    }
   }, 1000);
+
   function getData() {
     isRunTimer = false;
-		post('/getfeature', { database: database.value, start: 0, end: 1 }, (res: any) => {
+    post('/getfeature', {database: database.value, start: 0, end: 1}, (res: any) => {
       const obj = (res.data && res.data[0]) || {};
       if (obj.ID !== chartNowData.ID) {
         chartNowData = obj;
@@ -334,9 +369,10 @@ function getChartData() {
     });
   }
 }
+
 function getFeatureTable() {
   featureTable.value = [];
-	post('/getfeature', { database: database.value, start: 1, end: 50 }, (res: any) => {
+  post('/getfeature', {database: database.value, start: 1, end: 50}, (res: any) => {
     if (res.status === 200) {
       featureTable.value = res.data.reverse();
       setTimeout(() => {
@@ -353,25 +389,31 @@ function getFeatureTable() {
     }
   });
 }
+
 function getDatabases() {
   post('/getdatabases', {}, (res: any) => {
     if (res.status === 200) {
       databaseOptions.value = [];
       const hideDatabase = ['information_schema', 'mysql', 'performance_schema', '北工大412824200020002000', '数据模拟412824200020002000'];
       res.data.forEach((item: any, index: number) => {
-				if (!hideDatabase.some(e => e === item.Database)) databaseOptions.value.push({ value: item.Database, label: item.Database });
+        if (!hideDatabase.some(e => e === item.Database)) databaseOptions.value.push({
+          value: item.Database,
+          label: item.Database
+        });
       })
       database.value = databaseOptions.value[0].label;
       initData();
     }
   });
 }
+
 function msgLogScrollBottom() {
   msgLog.value.scrollTo({
     top: msgLog.value.scrollHeight,
     behavior: 'smooth'
   });
 }
+
 function unusualUpDate(msg: string) {
   unusual.value.push(dateFormater('HH:mm:ss') + msg);
   setTimeout(() => {
@@ -381,12 +423,14 @@ function unusualUpDate(msg: string) {
     });
   });
 }
+
 function getMssageLog() {
-	mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
+  mssageList.value.push({user: 'admin', msg: '请您把治疗单和药品给我'});
-	mssageList.value.push({ user: 'nurse', msg: '好的' });
+  mssageList.value.push({user: 'nurse', msg: '好的'});
-	mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
+  mssageList.value.push({user: 'admin', msg: '请您把治疗单和药品给我'});
-	mssageList.value.push({ user: 'nurse', msg: '好的' });
+  mssageList.value.push({user: 'nurse', msg: '好的'});
 }
+
 function getTableData(e: boolean) {
   if (tableData.value.length > 0 && e === isAIDose.value) return;
   // 人工转ai 人工给药数据插到ai给药表
@@ -399,7 +443,7 @@ function getTableData(e: boolean) {
           key += `, ${item.name}`;
           value += `, ${item.speed}`;
         });
-				post('/addaimedicine', { database: database.value, key, value }, (res: any) => {
+        post('/addaimedicine', {database: database.value, key, value}, (res: any) => {
           if (res.status === 200) {
             tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
           }
@@ -414,16 +458,17 @@ function getTableData(e: boolean) {
     isStart.value = e;
     isAIDose.value = e;
     const url = e ? '/getaimedicine' : '/getdoctormedicine';
-		post(url, { database: database.value, start: 0, end: 1 }, (res: any) => {
+    post(url, {database: database.value, start: 0, end: 1}, (res: any) => {
       if (res.status === 200) {
         setTableData(res);
       }
     });
-		post('/addaiflag', { database: database.value, flag: e ? 1 : 0 }, (res: any) => {
+    post('/addaiflag', {database: database.value, flag: e ? 1 : 0}, (res: any) => {
       // console.log(res.status);
     })
   });
 }
+
 function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
   let width = designWidth || 1920,
       height = designHeight || 1010;
@@ -440,6 +485,7 @@ function keepFit(designWidth: number, designHeight: number, renderDomId: string)
     renderDom.style.transform = 'scale(' + scale + ')';
   }
 }
+
 function initScale() {
   let w = 1920,
       h = 1010;
@@ -491,19 +537,19 @@ const playPause = () => {
 }
 const sendMsg = () => {
   if (msgVal.value.trim() == '') return;
-	mssageList.value.push({ user: userName.value, msg: msgVal.value });
+  mssageList.value.push({user: userName.value, msg: msgVal.value});
   msgVal.value = '';
   setTimeout(() => {
     msgLogScrollBottom()
   }, 0);
 };
 const tableItemPlus = (e: any) => {
-	const obj = medicineCustom.find(item => item.name === e.row.name) || { plus: 1 };
+  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 };
+  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;
@@ -518,7 +564,7 @@ const tableItemConfirm = (e: any) => {
     key += `, ${item.name}`;
     value += `, ${item.speed}`;
   });
-	post(isAIDose.value ? '/addaimedicine' : '/adddoctormedicine', { database: database.value, key, value }, (res: any) => {
+  post(isAIDose.value ? '/addaimedicine' : '/adddoctormedicine', {database: database.value, key, value}, (res: any) => {
     if (res.status === 200) {
       tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
       ElMessage({
@@ -527,7 +573,7 @@ const tableItemConfirm = (e: any) => {
       });
       // 如果是ai药量表保存后同时在人工表中插入ai药量表数据
       if (isAIDose.value) {
-				post('/adddoctormedicine', { database: database.value, key, value }, (res: any) => {
+        post('/adddoctormedicine', {database: database.value, key, value}, (res: any) => {
           if (res.status === 200) {
             ElMessage({
               message: '保存成功！',
@@ -564,9 +610,11 @@ const tableItemCancel = (e: any) => {
   padding: 10px 0 20px 0;
   transform-origin: top left;
   overflow-y: auto;
+
   .el-button {
     color: white;
   }
+
   .main-box {
     width: 100%;
     height: 100%;
@@ -580,7 +628,7 @@ const tableItemCancel = (e: any) => {
       width: 670px;
       height: 100%;
 
-			&>h3 {
+      & > h3 {
         font-size: 26px;
         color: $main-color;
         line-height: 30px;
@@ -724,6 +772,7 @@ const tableItemCancel = (e: any) => {
       height: 100%;
       display: flex;
       flex-direction: column;
+
       .top-btn-box {
         width: 100%;
         height: 34px;
@@ -748,7 +797,7 @@ const tableItemCancel = (e: any) => {
           color: #c77000;
         }
 
-				&>.el-button {
+        & > .el-button {
           border-radius: 4px;
           background-color: #f2f3f5;
           color: $main-color;
@@ -762,7 +811,7 @@ const tableItemCancel = (e: any) => {
         display: flex;
         justify-content: space-between;
 
-				&>.left-box {
+        & > .left-box {
           position: relative;
           width: 200px;
           height: 100%;
@@ -796,7 +845,7 @@ const tableItemCancel = (e: any) => {
           }
         }
 
-				&>.right-box {
+        & > .right-box {
           width: calc(100% - 205px);
           height: 100%;
 

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

@@ -33,6 +33,8 @@ 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";
 
 const router = useRouter()
 const remoteStore = useRemoteStore()
@@ -118,6 +120,8 @@ const confirmRemote = (e: RemoteItem) => {
   }, e.index)
   remoteTask.value[e.index] = e // 状态设置为可连接
   remotePartRef.value.initData(e)
+  console.log(e);
+  getSurgeryData(e.patientCode, e.patientName);
 }
 // 连接失败
 const errorRemote = (e: RemoteItem) => {
@@ -140,6 +144,43 @@ const breakRemote = (e: RemoteItem) => {
 const addLogAfter = () => {
   messagePartRef.value.scrollToBottom()
 }
+
+const surgeryClient = new Client({
+  brokerURL: 'ws://localhost:5173/socket.io/admin/rax/SurgeryData',
+  connectHeaders: {
+    access_token: Session.get('token')
+  }
+})
+surgeryClient.activate()
+
+surgeryClient.onWebSocketError = (error) => {
+  console.log('Error with websocket', error)
+};
+
+surgeryClient.onStompError = (frame) => {
+  console.log('Broker reported error: ' + frame.headers['message'])
+  console.log('Additional details: ' + frame.body)
+};
+
+function getSurgeryData(username: string, db: string) {
+  console.log(username, db);
+  surgeryClient.publish({
+    destination: "/front/getSurgeryData",
+    body: JSON.stringify({'status': "start", db})
+  });
+  const account = "admin";
+  surgeryClient.subscribe('/topic/user/' + account + ":" + db + '/surgeryData', (data: any) => {
+    console.log(data);
+  })
+}
+
+function disconnectSurgeryData(username: string, db: string) {
+  surgeryClient.publish({
+    destination: "/front/getSurgeryData",
+    body: JSON.stringify({'status': "stop", db, username})
+  });
+  surgeryClient.unsubscribe("/topic/user/" + username + "/surgeryData");
+}
 </script>
 
 <style lang='scss' scoped>

vite.config.ts

@@ -27,7 +27,13 @@ export default defineConfig({
         ws: true, // 是否启用 WebSocket
         changeOrigin: true, // 是否修改请求头中的 Origin 字段
         rewrite: (path) => path.replace(/^\/api/, ''),
-      }
+      },
+      '/socket.io': {
+        target: 'ws://localhost:9999',
+        ws: true,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/socket.io/, ''),
+      },
     }
   }
 })