From ef6b957561341b7301ba8d1e19a36b824af5c18f Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期二, 16 九月 2025 13:29:42 +0800
Subject: [PATCH] ID1766-优化开始透析
---
src/views/Home.vue | 593 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 332 insertions(+), 261 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3985fa5..8a5b48e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -93,268 +93,307 @@
</span>
</div>
</el-row>
- <el-row
- v-if="deviceData.患者姓名 !== ''"
- :style="{ backgroundColor: textcolor }"
- style="padding-right: 2px; height: 60%"
- >
- <el-col :span="12" style="height: 100%">
- <div style="height: 100%">
- <el-row style="padding: 5% 0px 0px 20px; height: 100%">
- <el-col :span="10" style="height: 100%">
- <div
- :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
+ <template v-if="床旁血压计.zuihouTime>shishiTime">
+ <el-row style="height: 80%; background-color: #ffffff">
+ <el-col :span="8" style="font-weight: bold; color: black; ">
+ <div style="height: 30%; text-align: right;" class="grid-container">
+ <p><b style="font-size: 250%;color: red; ">↑</b><b style="font-size:500%">{{床旁血压计.sbp}}</b></p>
+ </div>
+ <div style="height: 30%; text-align: right; " class="grid-container">
+ <p><b style="font-size: 250%;color: red;">↓</b><b style="font-size:500%"> {{床旁血压计.dbp}}</b></p>
+ </div>
+ <div style="height: 33%; text-align: right;" class="grid-container">
+ <div>
+ <!-- <el-image style="width: 50px; height: 50px;" :src="maibo"></el-image> 2 -->
+ <p><b style="font-size: 250%;color: red;" >♥</b><b style="font-size:500%">{{床旁血压计.pulseRate}}</b></p>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="4"></el-col>
+ <el-col :span="12">
+ <!-- 展示血压记录图 -->
+ <div
+ v-if="Number(deviceData.透析状态) > 1"
+ :ref="'echartsDiv' + deviceData.设备编号"
+ style="height: 80%;width: 100%;"
+ >
+ </div>
+ <div style="height: 20%;text-align: center;" class="grid-container">
+ {{床旁血压计.date_time}}
+ </div>
+ </el-col>
+ </el-row>
+ </template>
+ <template v-else>
+ <el-row
+ v-if="deviceData.患者姓名 !== ''"
+ :style="{ backgroundColor: textcolor }"
+ style="padding-right: 2px; height: 60%"
+ >
+ <el-col :span="12" style="height: 100%">
+ <div style="height: 100%">
+ <el-row style="padding: 5% 0px 0px 20px; height: 100%">
+ <el-col :span="10" style="height: 100%">
+ <div
+ :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
+ style="
+ background-size: 100% 100%;
+ border-radius: 5px;
+ margin-bottom: 1%;
+ height: 100%;
+ width: 100%;
+ "
+ ></div>
+ </el-col>
+ <el-col
+ :span="14"
style="
- background-size: 100% 100%;
- border-radius: 5px;
- margin-bottom: 1%;
+ padding-left: 5px;
height: 100%;
- width: 100%;
+ font-weight: 700;
+ font-size: 300%;
"
- ></div>
- </el-col>
- <el-col
- :span="14"
+ >
+ <el-row style="height: 20%">
+ <el-col
+ class="grid-container"
+ style="height: 100%"
+ :span="12"
+ :style="{
+ color: deviceData.透析方案 === 'HDF' ? '#E6A23C' : '',
+ }"
+ >
+ {{ deviceData.透析方案 }}
+ </el-col>
+ <el-col
+ :span="12"
+ class="grid-container"
+ style="
+ text-align: right;
+ font-weight: 800;
+ color: #70a3dd;
+ white-space: nowrap;
+ height: 100%;
+ "
+ >
+ {{ txztText }}
+ </el-col>
+ </el-row>
+ <div style="height: 20%">
+ <template v-if="Number(deviceData.透析状态) >= 2">
+ <div class="grid-container" style="height: 100%">
+ <div>
+ <span
+ v-if="deviceData.iot_静脉压"
+ style="color: #409eff"
+ >{{ deviceData.iot_静脉压 }}/</span
+ ><span
+ v-if="deviceData.iot_跨膜压"
+ :style="{
+ color: deviceData.iot_跨膜压 > 200 ? 'red' : '',
+ }"
+ >{{ deviceData.iot_跨膜压 }}</span
+ >
+ </div>
+ </div>
+ </template>
+ </div>
+ <div style="height: 20%">
+ <span v-if="Number(deviceData.透析状态) >= 2">
+ <span style="color: #303133">{{
+ Number(deviceData.iot_当前脱水量).toFixed(1)
+ }}</span
+ >/<span>{{
+ Number(deviceData.iot_脱水目标量).toFixed(1)
+ }}</span
+ ><span style="font-size: 80%"
+ >({{ deviceData.iot_脱水速率 }})</span
+ >
+ </span>
+ <span v-if="Number(deviceData.透析状态) == 1">
+ <span style="color: #303133">{{
+ Number(deviceData.iot_当前脱水量).toFixed(1)
+ }}</span
+ >/<span>{{
+ Number(deviceData.处方脱水量).toFixed(1)
+ }}</span>
+ </span>
+ </div>
+ <div style="height: 10%">
+ <el-progress
+ :text-inside="true"
+ :stroke-width="26"
+ :show-text="false"
+ :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
+ />
+ </div>
+ <div style="height: 20%">
+ <span v-if="Number(deviceData.透析状态) >= 1">
+ <span style="color: #303133">{{
+ jgTime4(deviceData.iot_透析时间)
+ }}</span
+ >/<span
+ >{{ deviceData.透析处方的时长_小时 }}:{{
+ deviceData.透析处方的时长_分钟
+ }}</span
+ >
+ </span>
+ </div>
+ <div style="height: 10%">
+ <el-progress
+ :text-inside="true"
+ :stroke-width="26"
+ :show-text="false"
+ :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
+ status="success"
+ />
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </el-col>
+
+ <el-col :span="12">
+ <!-- 展示血压记录图 -->
+ <div
+ v-if="Number(deviceData.透析状态) > 1"
+ :ref="'echartsDiv' + deviceData.设备编号"
+ style="height: 97%"
+ >
+ </div>
+ <div
+ v-if="Number(deviceData.透析状态) === 1"
+ style="text-align: right; height: 100%"
+ >
+ <div
style="
- padding-left: 5px;
- height: 100%;
- font-weight: 700;
- font-size: 300%;
+ height: 25%;
+ font-weight: 600;
+ color: #909399;
"
>
- <el-row style="height: 20%">
- <el-col
- class="grid-container"
- style="height: 100%"
- :span="12"
- :style="{
- color: deviceData.透析方案 === 'HDF' ? '#E6A23C' : '',
- }"
- >
- {{ deviceData.透析方案 }}
- </el-col>
- <el-col
- :span="12"
- class="grid-container"
+ <div class="grid-container" style="height: 100%;">
+ <div
style="
- text-align: right;
font-weight: 800;
- color: #70a3dd;
- white-space: nowrap;
- height: 100%;
"
- >
- {{ txztText }}
- </el-col>
- </el-row>
- <div style="height: 20%">
- <template v-if="Number(deviceData.透析状态) >= 2">
- <div class="grid-container" style="height: 100%">
- <div>
- <span
- v-if="deviceData.iot_静脉压"
- style="color: #409eff"
- >{{ deviceData.iot_静脉压 }}/</span
- ><span
- v-if="deviceData.iot_跨膜压"
- :style="{
- color: deviceData.iot_跨膜压 > 200 ? 'red' : '',
- }"
- >{{ deviceData.iot_跨膜压 }}</span
- >
- </div>
- </div>
- </template>
- </div>
- <div style="height: 20%">
- <span v-if="Number(deviceData.透析状态) >= 2">
- <span style="color: #303133">{{
- Number(deviceData.iot_当前脱水量).toFixed(1)
- }}</span
- >/<span style="font-size: 90%">{{
- Number(deviceData.iot_脱水目标量).toFixed(1)
- }}</span
- ><span style="font-size: 80%"
- >({{ deviceData.iot_脱水速率 }})</span
>
- </span>
- <span v-if="Number(deviceData.透析状态) == 1">
- <span style="color: #303133">{{
- Number(deviceData.iot_当前脱水量).toFixed(1)
- }}</span
- >/<span style="font-size: 90%">{{
- Number(deviceData.处方脱水量).toFixed(1)
- }}</span>
- </span>
- </div>
- <div style="height: 10%">
- <el-progress
- :text-inside="true"
- :stroke-width="26"
- :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
- />
- </div>
- <div style="height: 20%">
- <span v-if="Number(deviceData.透析状态) >= 1">
- <span style="color: #303133">{{
- jgTime4(deviceData.iot_透析时间)
- }}</span
- >/<span style="color: #606266"
- >{{ deviceData.透析处方的时长_小时 }}:{{
- deviceData.透析处方的时长_分钟
- }}</span
- >
- </span>
- </div>
- <div style="height: 10%">
- <el-progress
- :text-inside="true"
- :stroke-width="26"
- :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
- status="success"
- />
- </div>
- </el-col>
- </el-row>
- </div>
- </el-col>
- <el-col :span="12">
- <div
- v-if="Number(deviceData.透析状态) > 1"
- :ref="'echartsDiv' + deviceData.设备编号"
- style="height: 97%"
- ></div>
- <div
- v-if="Number(deviceData.透析状态) === 1"
- style="text-align: right; height: 100%"
- >
- <div
- style="
- height: 25%;
- font-weight: 600;
- color: #909399;
- "
- >
- <div class="grid-container" style="height: 100%;">
- <div
- style="
- font-weight: 800;
- "
+ 透前称重
+ <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.透前称重).toFixed(1) }}</b>
+ </div
>
- 透前称重
- <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.透前称重).toFixed(1) }}</b>
- </div
- >
+ </div>
</div>
- </div>
- <div
- class="container"
- style="
- height: 25%;
- font-weight: 600;
- color: #909399;
- "
- >
- <div class="grid-container" style="height: 100%;">
- <div
- style="
- font-weight: 800;
- color: #909399;
- "
- >
- 干体重
- <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.干体重).toFixed(1) }}</b>
- 上次透后称重
- <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.上次透后称重).toFixed(1) }}</b>
- </div
- >
- </div>
- </div>
- <div
- :style="{ color: deviceData.体重增长率 >= 5 ? 'red' : '#303133' }"
- style="height: 25%; font-weight: 600;color: #909399;"
- >
- <div class="grid-container" style="height: 100%;">
- <div>
- 体重增长
- <b style="font-size: 200%; color: #303133;"
- v-if="Number(deviceData.透前称重 - deviceData.干体重) > 0"
- >+{{
- Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
- }}</b
+ <div
+ class="container"
+ style="
+ height: 25%;
+ font-weight: 600;
+ color: #909399;
+ "
+ >
+ <div class="grid-container" style="height: 100%;">
+ <div
+ style="
+ font-weight: 800;
+ color: #909399;
+ "
>
- 增长率<b style="font-size: 200%;color: #303133;">({{ deviceData.体重增长率 }}%)</b>
- </div>
+ 干体重
+ <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.干体重).toFixed(1) }}</b>
+ 上次透后称重
+ <b style="font-size: 200%;color: #303133;">{{ Number(deviceData.上次透后称重).toFixed(1) }}</b>
+ </div
+ >
</div>
- </div>
- <div
- class="container"
- style="
- font-weight: 600;
- height: 25%;
- color: #909399;
- margin-left: -20px;
- "
- >
- <div class="grid-container" style="height: 100%;">
+ </div>
+ <div
+ :style="{ color: deviceData.体重增长率 >= 5 ? 'red' : '#303133' }"
+ style="height: 25%; font-weight: 600;color: #909399;"
+ >
+ <div class="grid-container" style="height: 100%;">
<div>
- 透前血压
- <span
- v-if="deviceData.透前血压_伸缩压"
- :style="{ color: tqXygj ? 'red' : '#303133' }"
- style="font-weight: 800; font-size: 200%; white-space: nowrap"
- >{{ deviceData.透前血压_伸缩压 }}/</span
- >
- <span
- :style="{ color: tqXygj ? 'red' : '#303133' }"
- style="font-weight: 800; font-size: 200%; white-space: nowrap"
- >{{ deviceData.透前血压_舒张压 }}</span
- >
- 脉搏
- <span
- v-if="deviceData.透前脉搏"
- :style="{ color: tqMbgj ? 'red' : '#303133' }"
- style="font-weight: 800; font-size: 200%; white-space: nowrap"
- >{{ deviceData.透前脉搏 }}</span
- >
+ 体重增长
+ <b style="font-size: 200%; color: #303133;"
+ v-if="Number(deviceData.透前称重 - deviceData.干体重) > 0"
+ >+{{
+ Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
+ }}</b
+ >
+ 增长率<b style="font-size: 200%;color: #303133;">({{ deviceData.体重增长率 }}%)</b>
+ </div>
</div>
</div>
+ <div
+ class="container"
+ style="
+ font-weight: 600;
+ height: 25%;
+ color: #909399;
+ margin-left: -20px;
+ "
+ >
+ <div class="grid-container" style="height: 100%;">
+ <div>
+ 透前血压
+ <span
+ v-if="deviceData.透前血压_伸缩压"
+ :style="{ color: tqXygj ? 'red' : '#303133' }"
+ style="font-weight: 800; font-size: 200%; white-space: nowrap"
+ >{{ deviceData.透前血压_伸缩压 }}/</span
+ >
+ <span
+ :style="{ color: tqXygj ? 'red' : '#303133' }"
+ style="font-weight: 800; font-size: 200%; white-space: nowrap"
+ >{{ deviceData.透前血压_舒张压 }}</span
+ >
+ 脉搏
+ <span
+ v-if="deviceData.透前脉搏"
+ :style="{ color: tqMbgj ? 'red' : '#303133' }"
+ style="font-weight: 800; font-size: 200%; white-space: nowrap"
+ >{{ deviceData.透前脉搏 }}</span
+ >
+ </div>
+ </div>
-
+
+ </div>
</div>
+ </el-col>
+ </el-row>
+ <el-row style="height: 20%;background-color: #ffffff; ">
+
+
+ <div v-if="isinitXy" style="font-size: 250%; color: cornflowerblue;height: 80%; width: 100%;" class="grid-container">
+
+ <div style="text-align: center;width: 100%;" class="flash-text">
+ 最近一次， 高压：{{床旁血压计.sbp}}，低压： {{床旁血压计.dbp}}， 心率： {{床旁血压计.pulseRate}}
+ </div>
+
</div>
- </el-col>
- </el-row>
- <el-row style="height: 20%;background-color: #ffffff; line-height: 50px;">
-
- <div v-if="床旁血压计.zuihouTime>shishiTime" style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
- <div style="text-align: center;width: 100%; color: #909399;">
- <!-- {{isShowXY}} -->
- <!-- {{床旁血压计.zuihouTime}} / {{shishiTime}}
- {{}} -->
- {{床旁血压计.date_time}}
- </div>
-
- </div>
- <div v-if="床旁血压计.zuihouTime>shishiTime" style="font-size: 300%; color: cornflowerblue;height: 80%; width: 100%;" class="grid-container">
-
- <div style="text-align: center;width: 100%;" class="flash-text">
- 高压：{{床旁血压计.sbp}}，低压： {{床旁血压计.dbp}}， 心率： {{床旁血压计.pulseRate}}
- </div>
+ <div v-if="isinitXy" style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
+ <div style="text-align: center;width: 100%; color: #909399;">
+ <!-- {{isShowXY}} -->
+ <!-- {{床旁血压计.zuihouTime}} / {{shishiTime}}
+ {{}} -->
+ {{床旁血压计.date_time}}
+ </div>
+
+ </div>
+ <div v-else style="font-size: 200%;height: 100%;text-align: center;padding: 5px; font-weight: 1000;" class="grid-container">
+ 透析器：{{deviceData.透析器}}
+ </div>
+ <!-- <div style="font-size: 300%; color: red;height: 100%;" class="grid-container">
+
+ 患者掉压验证请注意!
- </div>
- <div v-else style="font-size: 200%;height: 100%;text-align: center; color: #909399;padding: 5px;" class="grid-container">
- 透析器：{{deviceData.透析器}}
- </div>
- <!-- <div style="font-size: 300%; color: red;height: 100%;" class="grid-container">
-
- 患者掉压验证请注意!
+ </div> -->
+ <!-- <el-alert style="font-size: 300%" title="处方已经确认。医嘱已执行" type="success" show-icon />
+ <el-alert title="患者治疗过程中掉压验证，请注意！" type="warning" show-icon /> -->
- </div> -->
- <!-- <el-alert style="font-size: 300%" title="处方已经确认。医嘱已执行" type="success" show-icon />
- <el-alert title="患者治疗过程中掉压验证，请注意！" type="warning" show-icon /> -->
-
- </el-row>
+ </el-row>
+ </template>
</div>
<div
v-else
@@ -466,6 +505,7 @@
</div>
<!-- 设置按钮 -->
<button id="settingsButton" class="fixed-bottom-right" @click="centerDialogVisible=true">⚙️</button>
+ <!-- <button id="settingsButton" class="fixed-bottom-right" @click="showxuye">⚙️</button> -->
<el-dialog
:show-close="false"
:close-on-press-escape="false"
@@ -499,10 +539,10 @@
</template>
<script lang="ts" setup>
import TQS88 from "../img/TQS88.png";
-import maibo from '../img/maibo.png'
+import maibo from '../img/maibo2.png'
import xueya from '../img/xueya.png'
import {EventSourcePolyfill} from 'event-source-polyfill';
-import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch } from "vue";
+import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, watchEffect } from "vue";
import { Local } from '../utils/storage';
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
@@ -518,6 +558,8 @@
const readyState = ref({ key: 0, value: "正在链接中" });
const deviceCode=ref('')
const shishiTime=ref(new Date())
+//有没有推送过血压如果有 就一直会显示血压数据
+const isinitXy=ref(false)
const 床旁血压计=ref({
date_time:'',
sbp:'',
@@ -577,12 +619,6 @@
设备名称: "初始化。。。",
设备序列号: "B97AP002",
设备状态列表: [
- {
- 是否为警告标记: 0,
- 状态名称: "待机",
- 状态类型: "待机",
- 状态颜色: "#13CE66",
- },
],
设备编号: "DEVICE9195233509924hOHL",
超滤速度过快: null,
@@ -703,12 +739,25 @@
const ls = ref("");
const ddd = ref("");
const isShowXY=computed(()=>{
- if(床旁血压计.value.zuihouTime>new Date()){
+ if(床旁血压计.value.zuihouTime>shishiTime.value){
return true
}else{
return false
}
})
+watch(() =>isShowXY.value,
+ ()=>{
+ if(床旁血压计.value.zuihouTime>shishiTime.value){
+
+ }else{
+ setTimeout(()=>{
+ initTupiao()
+ },500)
+
+
+ }
+ }
+)
const txzt: any = computed(() => {
return deviceData.value.透析状态;
});
@@ -812,6 +861,7 @@
backgroundSize: "cover", // 根据需要调整
backgroundPosition: "center", // 根据需要调整
};
+
watch(
() => txzt.value,
() => {
@@ -867,6 +917,7 @@
centerDialogVisible.value=false
Local.set('devcieCode',deviceCode.value)
sourceInit()
+ window.location.reload();
}else{
ElMessage.warning('请先输入设备编号')
}
@@ -917,8 +968,9 @@
console.log(dataBody)
console.log(dataBody)
if(dataBody.推送类型==='床旁血压计'){
+ isinitXy.value=true
let date = new Date();
- date.setMinutes(date.getMinutes() + 1);
+ date.setMinutes(date.getMinutes() + 5);
床旁血压计.value={
date_time:dataBody?.床旁血压结果?.measureTime,
sbp:dataBody?.床旁血压结果?.sbp,
@@ -926,6 +978,9 @@
dbp:dataBody?.床旁血压结果?.dbp,
zuihouTime:date
}
+ setTimeout(()=>{
+ initTupiao()
+ },500)
}else if(dataBody.推送类型==='中央监控大屏信息'){
console.log(Date.now() + 'DEV')
if(dataBody?.透析状态){
@@ -954,6 +1009,21 @@
console.log(error);
}
};
+const showxuye=()=>{
+ let date = new Date();
+ date.setMinutes(date.getMinutes() + 0.1);
+ 床旁血压计.value={
+ date_time:'2023-32-3232',
+ sbp:'117',
+ pulseRate:'77',
+ dbp:'99',
+ zuihouTime:date
+ }
+ isinitXy.value=true
+ setTimeout(()=>{
+ initTupiao()
+ },500)
+}
//初始化
const sourceInit = () => {
console.log('初始化see')
@@ -1127,7 +1197,8 @@
proxy.$refs["echartsDiv" + deviceData.value.设备编号]
);
const option = {
- backgroundColor: textcolor.value,
+ backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1171,7 +1242,7 @@
);
const option = {
- backgroundColor: textcolor.value,
+ backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1467,15 +1538,15 @@
.fixed-bottom-right:hover {
background-color: #0056b3;
}
-/* 定义闪现动画的关键帧 */
-@keyframes flash {
- 0%, 100% {
- opacity: 1; /* 开始和结束时完全可见 */
- }
- 50% {
- opacity: 0; /* 中间时刻完全透明 */
- }
-}
+// /* 定义闪现动画的关键帧 */
+// @keyframes flash {
+// 0%, 100% {
+// opacity: 1; /* 开始和结束时完全可见 */
+// }
+// 50% {
+// opacity: 0; /* 中间时刻完全透明 */
+// }
+// }
/* 应用动画到 div */
.flash-text {
--
Gitblit v1.8.0