远程管理接口调试

This commit is contained in:
zhaoyz 2024-03-16 12:00:13 +08:00
parent c962e9f5fe
commit 9186e1a01b
5 changed files with 881 additions and 785 deletions

View File

@ -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",
"crypto-js": "4.2.0"
"xlsx": "^0.18.5"
},
"devDependencies": {
"@types/js-cookie": "^3.0.6",

View File

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

View File

@ -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>
<el-button class="start-btn" color="#F80000" @click="getTableData(!isStart)">{{
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>
<Back />
</el-icon> </el-button>
<el-button color="#e0e0e0" @click="backRemote">
<el-icon>
<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="name" label="药物名称" align="center" />
<el-table-column prop="speed" label="速度(ml/h)" 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 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" @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>
@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>
: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 { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRemoteStore } from '@/stores/remote-info-store'
import { dateFormater } from '@/utils/date-util';
import { post } from "@/utils/request";
import {onMounted, ref, reactive, onBeforeUnmount} from 'vue';
import {useRouter, useRoute} from 'vue-router'
import {ElMessageBox, ElMessage} from 'element-plus';
import {useRemoteStore} from '@/stores/remote-info-store'
import {dateFormater} from '@/utils/date-util';
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: 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}
];
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));
}
// AIMedicineTableDoctorMedicineTable 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: 'nurse', msg: '好的' });
mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
mssageList.value.push({ user: 'nurse', msg: '好的' });
mssageList.value.push({user: 'admin', msg: '请您把治疗单和药品给我'});
mssageList.value.push({user: 'nurse', msg: '好的'});
mssageList.value.push({user: 'admin', 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) => {
});
// aiai
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%;

View File

@ -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>

View File

@ -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/, ''),
},
}
}
})