From 22d317d72b111b71a1830f2b01af293fb0af3060 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期五, 24 一月 2025 18:23:58 +0800
Subject: [PATCH] 34
---
src/views/Home.vue | 350 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 240 insertions(+), 110 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4413653..e5e0526 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -53,13 +53,15 @@
display: grid;
padding: 5px;
font-size: 300%;
+ height: 100%
"
>
<span
v-if="
deviceData.iot_跨膜压 >= 200 && Number(deviceData.透析状态) === 2
"
- style="color: #303133"
+ class="grid-container"
+ style="margin-left: 5%; height: 100%;color: #303133"
>
TMP↑
</span>
@@ -189,7 +191,7 @@
<el-progress
:text-inside="true"
:stroke-width="26"
- :percentage="70"
+ :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
/>
</div>
<div style="height: 20%">
@@ -208,7 +210,7 @@
<el-progress
:text-inside="true"
:stroke-width="26"
- :percentage="80"
+ :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
status="success"
/>
</div>
@@ -217,7 +219,7 @@
</div>
</el-col>
<el-col :span="12">
- <div
+ <div
v-if="Number(deviceData.透析状态) > 1"
:ref="'echartsDiv' + deviceData.设备编号"
style="height: 97%"
@@ -227,23 +229,23 @@
style="text-align: right; height: 100%"
>
<div
- class="container"
style="
height: 25%;
font-weight: 600;
color: #909399;
- font-size: 80%;
"
>
- CW:<span
- style="
- font-weight: 800;
- font-size: 130%;
- color: #303133;
- white-space: nowrap;
- "
- >{{ Number(deviceData.透前称重).toFixed(1) }}</span
- >
+ <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
+ >
+ </div>
</div>
<div
class="container"
@@ -251,42 +253,39 @@
height: 25%;
font-weight: 600;
color: #909399;
- font-size: 80%;
"
>
- D<span
- style="
- font-weight: 800;
- font-size: 130%;
- color: #303133;
- white-space: nowrap;
- "
- >{{ Number(deviceData.干体重).toFixed(1) }}</span
- >L<span
- style="
- font-weight: 800;
- font-size: 130%;
- color: #303133;
- white-space: nowrap;
- "
- >{{ Number(deviceData.上次透后称重) }}</span
- >
+ <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; font-size: 80%"
+ style="height: 25%; font-weight: 600;color: #909399;"
>
- <span
- style="font-weight: 800; font-size: 130%; white-space: nowrap"
- >
- <template
- v-if="Number(deviceData.透前称重 - deviceData.干体重) > 0"
- >+</template
- >{{
- Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
- }}
- </span>
- <span>({{ deviceData.体重增长率 }}%)</span>
+ <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
+ >
+ 增长率<b style="font-size: 200%;color: #303133;">({{ deviceData.体重增长率 }}%)</b>
+ </div>
+ </div>
</div>
<div
class="container"
@@ -294,49 +293,58 @@
font-weight: 600;
height: 25%;
color: #909399;
- font-size: 80%;
margin-left: -20px;
"
>
- <span
- v-if="deviceData.透前血压_伸缩压"
- :style="{ color: tqXygj ? 'red' : '#303133' }"
- style="font-weight: 800; font-size: 130%; white-space: nowrap"
- >{{ deviceData.透前血压_伸缩压 }}/</span
- >
- <span
- :style="{ color: tqXygj ? 'red' : '#303133' }"
- style="font-weight: 800; font-size: 130%; white-space: nowrap"
- >{{ deviceData.透前血压_舒张压 }}</span
- >
- <span
- v-if="deviceData.透前脉搏"
- :style="{ color: tqMbgj ? 'red' : '#303133' }"
- style="font-weight: 800; font-size: 130%; white-space: nowrap"
- >,{{ deviceData.透前脉搏 }}</span
- >
+ <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; line-height: 50px;">
- <!-- <div style="font-size: 200%;height: 100%;text-align: center; color: #909399;" class="grid-container">
-
- <el-icon><ChatDotSquare /></el-icon>暂无通知
-
- </div> -->
- <div style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
+
+ <div v-if="床旁血压计.zuihouTime>shishiTime" style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
<div style="text-align: center;width: 100%; color: #909399;">
- 2025-01-11 12:23:45
+ <!-- {{isShowXY}} -->
+ <!-- {{床旁血压计.zuihouTime}} / {{shishiTime}}
+ {{}} -->
+ {{床旁血压计.date_time}}
</div>
</div>
- <div style="font-size: 300%; color: cornflowerblue;height: 80%; width: 100%;" class="grid-container">
+ <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%;">
- 高压：118，低压：88， 心率：89
+ <div style="text-align: center;width: 100%;" class="flash-text">
+ 高压：{{床旁血压计.sbp}}，低压： {{床旁血压计.dbp}}， 心率： {{床旁血压计.pulseRate}}
</div>
+ </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">
@@ -374,7 +382,7 @@
overflow: hidden;
"
>
- <div class="grid-container" style="height: 100%">
+ <div class="grid-container" style="height: 100%" @click="initTupiao">
{{ deviceData.设备名称 }} {{ zhuangtaiStr }}
</div>
</el-row>
@@ -412,13 +420,14 @@
</el-col>
<el-col
- v-if="noBaoji !== ''"
+ v-if="noBaoji === ''"
:span="14"
style="
padding-left: 5px;
height: 100%;
font-weight: 500;
font-size: 100%;
+ font-size: 200%
"
>
<div
@@ -438,7 +447,7 @@
</el-row>
</div>
</el-col>
- <el-col :span="9" v-if="noBaoji !== ''">
+ <el-col :span="9" v-if="noBaoji == ''">
<!-- 历史状态画图 -->
<div
:ref="'echartsDivwd' + deviceData.设备编号"
@@ -492,7 +501,8 @@
import TQS88 from "../img/TQS88.png";
import maibo from '../img/maibo.png'
import xueya from '../img/xueya.png'
-import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import {EventSourcePolyfill} from 'event-source-polyfill';
+import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch } from "vue";
import { Local } from '../utils/storage';
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
@@ -500,7 +510,21 @@
// 在需要使用的组件中引入
import { ChatDotSquare } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
+// 连接服务器
+const source = ref<EventSourcePolyfill | null>(null);
+//接收到的sse数据
+const sseData = ref({});
+ // sse状态
+const readyState = ref({ key: 0, value: "正在链接中" });
const deviceCode=ref('')
+const shishiTime=ref(new Date())
+const 床旁血压计=ref({
+ date_time:'',
+ sbp:'',
+ pulseRate:'',
+ dbp:'',
+ zuihouTime:new Date()
+})
const deviceData = ref({
iot_传输时间: "2025-01-10 19:15:24",
iot_当前脱水量: 2.04,
@@ -520,7 +544,7 @@
性别: "男",
患者头像:
"http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
- 患者姓名: "李金山",
+ 患者姓名: "",
患者编号: "PAT9090070832211PyVq",
患者透析号: "0207",
最后一条血压: 116,
@@ -550,7 +574,7 @@
血压高值列表: "152,133,116",
设备分区类型: 0,
设备号: "23",
- 设备名称: "23",
+ 设备名称: "",
设备序列号: "B97AP002",
设备状态列表: [
{
@@ -575,7 +599,7 @@
透析处方的时长_小时: "4",
透析开始时间: "2025-01-10 16:44:00",
透析方案: "HD",
- 透析状态: "2.0",
+ 透析状态: "1.0",
透析结束时间: "2025-01-10 20:44:00",
设备变化: "1736508117033DEV",
属性历史列表: [
@@ -678,6 +702,13 @@
const wd = ref("");
const ls = ref("");
const ddd = ref("");
+const isShowXY=computed(()=>{
+ if(床旁血压计.value.zuihouTime>new Date()){
+ return true
+ }else{
+ return false
+ }
+})
const txzt: any = computed(() => {
return deviceData.value.透析状态;
});
@@ -750,9 +781,9 @@
const list = deviceData.value.设备状态列表;
if (
(deviceData.value.监测血压是否低于百分之30 ||
- deviceData.value.跨膜压是否大于200 ||
- deviceData.value.监测血压是否高于百分之30) &&
- deviceData.value.透析状态 === "2.0"
+ deviceData.value.跨膜压是否大于200 ||
+ deviceData.value.监测血压是否高于百分之30) &&
+ deviceData.value.透析状态 === "2.0"
) {
return true;
} else {
@@ -826,13 +857,16 @@
let devcieCode=Local.get('devcieCode')
if(devcieCode){
deviceCode.value=devcieCode
+ sourceInit()
}else{
centerDialogVisible.value=true
}
});
const saveSet=()=>{
if(deviceCode.value){
+ centerDialogVisible.value=false
Local.set('devcieCode',deviceCode.value)
+ sourceInit()
}else{
ElMessage.warning('请先输入设备编号')
}
@@ -840,7 +874,7 @@
watch(
() => deviceData.value.设备变化,
() => {
- // console.log(device.value.设备名称,'子组件变量')
+ console.log(deviceData.value.设备名称,'子组件变量')
setTimeout(() => {
if (!xiaoduzhuangti.value) {
initTupiao();
@@ -848,35 +882,111 @@
}, 500);
}
);
-
-// const showgaojing = () => {
-// if (deviceData.value.监测血压是否低于百分之30) {
-// centerDialogVisible.value = true;
-// iscomfig.value = true;
-// textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 监测血压下降至上机血压30%了，请及时处理`;
-// }
-// if (deviceData.value.跨膜压是否大于200) {
-// centerDialogVisible.value = true;
-// iscomfig.value = true;
-// textbaojing.value = `${deviceData.value.设备名称}床，${deviceData.value.患者姓名} 跨膜压过高请及时处理`;
-// }
-// };
+//创建链接对象
+const creatSource = () => {
+ // http://testbs.ihemodialysis.com/sse/sseEvent
+ const stateArr = [
+ { key: 0, value: "正在链接中" },
+ { key: 1, value: "已经链接并且可以通讯" },
+ { key: 2, value: "连接已关闭或者没有链接成功" },
+ ];
+ try {
+ source.value= new EventSourcePolyfill(`https://backend.ihemodialysis.com/sse/sseEvent/${deviceCode.value}`,{
+ heartbeatTimeout:60000
+ });
+ source.value.onopen = (e) => {
+ console.log('链接成功')
+ readyState.value = stateArr[source.value?.readyState ?? 0];
+ console.log(e)
+ };
+ source.value.onerror = (e) => {
+ console.log(e,'异常情况-----')
+ readyState.value = stateArr[source.value?.readyState ?? 0];
+ };
+ source.value.onmessage = (e) => {
+ console.log('收到消息',e.data)
+ shishiTime.value=new Date();
+ if(e.data){
+ const msg=e.data
+ let dif=msg.indexOf('event:message')
+ let beng=msg.indexOf('{')
+ let end=msg.length-1
+ if(beng!==-1&&end!==-1&&dif!==-1){
+ const datax=msg.slice(beng,end+1)
+ const dataBody=JSON.parse(datax)
+ console.log(dataBody)
+ console.log(dataBody)
+ if(dataBody.推送类型==='床旁血压计'){
+ let date = new Date();
+ date.setMinutes(date.getMinutes() + 1);
+ 床旁血压计.value={
+ date_time:dataBody?.床旁血压结果?.measureTime,
+ sbp:dataBody?.床旁血压结果?.sbp,
+ pulseRate:dataBody?.床旁血压结果?.pulseRate,
+ dbp:dataBody?.床旁血压结果?.dbp,
+ zuihouTime:date
+ }
+ }else if(dataBody.推送类型==='中央监控大屏信息'){
+ console.log(Date.now() + 'DEV')
+ if(dataBody?.透析状态){
+ deviceData.value=dataBody?.透析状态
+ }else{
+ deviceData.value.设备名称=dataBody.IOT信息.床号
+ }
+
+ deviceData.value.设备变化=Date.now() + 'DEV'
+ console.log(1)
+ console.log(2)
+ deviceData.value.属性历史列表=dataBody?.IOT信息?.属性历史列表
+ console.log(3)
+
+ console.log(4)
+ console.log(deviceData.value.设备变化)
+ deviceData.value.设备状态列表=dataBody.IOT信息.状态列表
+ if(!dataBody.透析状态){
+ deviceData.value.患者姓名=''
+ }
+ }
+
+ }
+ }
+ };
+ } catch (error) {
+ console.log(error);
+ }
+ };
+//初始化
+const sourceInit = () => {
+ console.log('初始化see')
+ if (!source.value|| source.value.readyState === 2) {
+ creatSource();
+ }
+};
+// 关闭 WebSocket
+const closeSource = () => {
+ console.log('断开')
+ source.value?.close();
+};
+// 取消订阅
+onBeforeMount(()=>{
+ closeSource()
+})
const initTupiao = () => {
if (deviceData.value.患者姓名 !== "") {
const seriesData = [
{
- name: "",
+ name: "11",
type: "line",
symbol: "triangle",
symbolSize: 10,
symbolRotate: 180,
data: [],
lineStyle: {
- width: 5, // 设置线条宽度为5
+ width: 10, // 设置线条宽度为5
color: "red",
},
itemStyle: {
- borderWidth: 3,
+ borderWidth: 5,
borderColor: "red",
color: "red",
},
@@ -900,10 +1010,10 @@
data: [],
lineStyle: {
color: "#409EFF",
- width: 5, // 设置线条宽度为5
+ width: 10, // 设置线条宽度为5
},
itemStyle: {
- borderWidth: 3,
+ borderWidth: 5,
borderColor: "#409EFF",
color: "#409EFF",
},
@@ -930,7 +1040,7 @@
data: [],
lineStyle: {
color: "#D940FF",
- width: 5, // 设置线条宽度为5
+ width: 10, // 设置线条宽度为5
},
markPoint: {
data: [],
@@ -1097,6 +1207,7 @@
}
}
} else if (deviceData.value.患者姓名 === "") {
+ console.log('2222')
const tbdata1 = [];
const tbdata2 = [];
const tbdata3 = [];
@@ -1131,6 +1242,7 @@
});
}
try {
+ console.log('渲染设备')
const myChart1 = echarts.init(
proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
);
@@ -1141,7 +1253,7 @@
proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
);
const option1 = {
- backgroundColor: textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1150,11 +1262,11 @@
},
grid: {
left: 8,
- top: 30,
+ top: 100,
bottom: 0,
},
xAxis: {
- show: false, // 隐藏X轴
+ show: true, // 隐藏X轴
type: "category",
// 标记做右往左排列
boundaryGap: false,
@@ -1181,7 +1293,7 @@
],
};
const option2 = {
- backgroundColor: textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1190,7 +1302,7 @@
},
grid: {
left: 8,
- top: 20,
+ top: 100,
bottom: 0,
},
xAxis: {
@@ -1222,7 +1334,7 @@
],
};
const option3 = {
- backgroundColor: textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1231,7 +1343,7 @@
},
grid: {
left: 8,
- top: 10,
+ top: 100,
bottom: 0,
},
xAxis: {
@@ -1356,4 +1468,22 @@
.fixed-bottom-right:hover {
background-color: #0056b3;
}
+/* 定义闪现动画的关键帧 */
+@keyframes flash {
+ 0%, 100% {
+ opacity: 1; /* 开始和结束时完全可见 */
+ }
+ 50% {
+ opacity: 0; /* 中间时刻完全透明 */
+ }
+}
+
+/* 应用动画到 div */
+.flash-text {
+ animation-name: flash;
+ animation-duration: 2s; /* 动画持续时间 */
+ animation-timing-function: linear; /* 动画速度曲线 */
+ animation-iteration-count: infinite; /* 动画重复次数 */
+ animation-direction: alternate; /* 动画方向 */
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0