From 57712331391fbc6c0022d9c1cc80704bc1cdd1d7 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期三, 22 一月 2025 12:17:25 +0800
Subject: [PATCH] 完善功能
---
src/views/Home.vue | 249 +++++++++++++++++++++++++++++++------------------
1 files changed, 158 insertions(+), 91 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 70e0d01..cfede1b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -219,7 +219,7 @@
</div>
</el-col>
<el-col :span="12">
- <div
+ <div
v-if="Number(deviceData.透析状态) > 1"
:ref="'echartsDiv' + deviceData.设备编号"
style="height: 97%"
@@ -229,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"
@@ -253,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"
@@ -296,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">
@@ -376,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>
@@ -414,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
@@ -440,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.设备编号"
@@ -510,6 +517,14 @@
// 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,
@@ -529,7 +544,7 @@
性别: "男",
患者头像:
"http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
- 患者姓名: "李金山",
+ 患者姓名: "",
患者编号: "PAT9090070832211PyVq",
患者透析号: "0207",
最后一条血压: 116,
@@ -584,7 +599,7 @@
透析处方的时长_小时: "4",
透析开始时间: "2025-01-10 16:44:00",
透析方案: "HD",
- 透析状态: "2.0",
+ 透析状态: "1.0",
透析结束时间: "2025-01-10 20:44:00",
设备变化: "1736508117033DEV",
属性历史列表: [
@@ -687,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.透析状态;
});
@@ -759,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 {
@@ -851,7 +873,7 @@
watch(
() => deviceData.value.设备变化,
() => {
- // console.log(device.value.设备名称,'子组件变量')
+ console.log(deviceData.value.设备名称,'子组件变量')
setTimeout(() => {
if (!xiaoduzhuangti.value) {
initTupiao();
@@ -867,7 +889,7 @@
{ key: 2, value: "连接已关闭或者没有链接成功" },
];
try {
- source.value= new EventSourcePolyfill(`https://hemobs.icoldchain.cn/sse/sseEvent/${deviceCode.value}`,{
+ source.value= new EventSourcePolyfill(`http://testbs.ihemodialysis.com/sse/sseEvent/${deviceCode.value}`,{
heartbeatTimeout:60000
});
source.value.onopen = (e) => {
@@ -881,6 +903,7 @@
};
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')
@@ -890,12 +913,36 @@
const datax=msg.slice(beng,end+1)
const dataBody=JSON.parse(datax)
console.log(dataBody)
- deviceData.value=dataBody.透析状态
- deviceData.value.属性历史列表=dataBody.IOT信息.属性历史列表
- deviceData.value.设备变化=Date.now() + 'DEV'
+ 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')
+ deviceData.value=dataBody?.透析状态
+ 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);
@@ -1153,6 +1200,7 @@
}
}
} else if (deviceData.value.患者姓名 === "") {
+ console.log('2222')
const tbdata1 = [];
const tbdata2 = [];
const tbdata3 = [];
@@ -1187,6 +1235,7 @@
});
}
try {
+ console.log('渲染设备')
const myChart1 = echarts.init(
proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
);
@@ -1197,7 +1246,7 @@
proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
);
const option1 = {
- backgroundColor: textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1206,11 +1255,11 @@
},
grid: {
left: 8,
- top: 30,
+ top: 100,
bottom: 0,
},
xAxis: {
- show: false, // 隐藏X轴
+ show: true, // 隐藏X轴
type: "category",
// 标记做右往左排列
boundaryGap: false,
@@ -1237,7 +1286,7 @@
],
};
const option2 = {
- backgroundColor: textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1246,7 +1295,7 @@
},
grid: {
left: 8,
- top: 20,
+ top: 100,
bottom: 0,
},
xAxis: {
@@ -1278,7 +1327,7 @@
],
};
const option3 = {
- backgroundColor: textcolor.value,
+ // backgroundColor: textcolor.value,
tooltip: {
trigger: "axis",
},
@@ -1287,7 +1336,7 @@
},
grid: {
left: 8,
- top: 10,
+ top: 100,
bottom: 0,
},
xAxis: {
@@ -1412,4 +1461,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