From 5c7adfc5605a9f050a7e10ec8e7d07da23277608 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期一, 20 一月 2025 19:51:58 +0800
Subject: [PATCH] 34
---
package-lock.json | 12 ++++++
index.html | 2
package.json | 1
src/views/Home.vue | 100 +++++++++++++++++++++++++++++++++++++++-----------
4 files changed, 92 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index b971d12..d132714 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover orientation=landscape" >
<meta name="x5-orientation" content="landscape"> <!-- 针对QQ浏览器 -->
<meta name="screen-orientation" content="landscape"> <!-- 针对UC浏览器 -->
<title>胜透床旁监测</title>
diff --git a/package-lock.json b/package-lock.json
index 86aeeb4..4f4628d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"echarts": "^5.6.0",
"element-plus": "^2.9.2",
+ "event-source-polyfill": "^1.0.31",
"vue": "^3.5.13",
"vue-router": "^4.0.13"
},
@@ -1243,6 +1244,12 @@
"version": "2.0.2",
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+ },
+ "node_modules/event-source-polyfill": {
+ "version": "1.0.31",
+ "resolved": "https://registry.npmmirror.com/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
+ "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==",
+ "license": "MIT"
},
"node_modules/fsevents": {
"version": "2.3.3",
@@ -2515,6 +2522,11 @@
"resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
+ "event-source-polyfill": {
+ "version": "1.0.31",
+ "resolved": "https://registry.npmmirror.com/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
+ "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA=="
+ },
"fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
diff --git a/package.json b/package.json
index 145c50d..6732866 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"dependencies": {
"echarts": "^5.6.0",
"element-plus": "^2.9.2",
+ "event-source-polyfill": "^1.0.31",
"vue": "^3.5.13",
"vue-router": "^4.0.13"
},
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4413653..70e0d01 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>
@@ -492,7 +494,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,6 +503,12 @@
// 在需要使用的组件中引入
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 deviceData = ref({
iot_传输时间: "2025-01-10 19:15:24",
@@ -826,6 +835,7 @@
let devcieCode=Local.get('devcieCode')
if(devcieCode){
deviceCode.value=devcieCode
+ sourceInit()
}else{
centerDialogVisible.value=true
}
@@ -833,6 +843,7 @@
const saveSet=()=>{
if(deviceCode.value){
Local.set('devcieCode',deviceCode.value)
+ sourceInit()
}else{
ElMessage.warning('请先输入设备编号')
}
@@ -848,35 +859,80 @@
}, 500);
}
);
+//创建链接对象
+const creatSource = () => {
+ const stateArr = [
+ { key: 0, value: "正在链接中" },
+ { key: 1, value: "已经链接并且可以通讯" },
+ { key: 2, value: "连接已关闭或者没有链接成功" },
+ ];
+ try {
+ source.value= new EventSourcePolyfill(`https://hemobs.icoldchain.cn/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)
+ 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)
+ deviceData.value=dataBody.透析状态
+ deviceData.value.属性历史列表=dataBody.IOT信息.属性历史列表
+ deviceData.value.设备变化=Date.now() + 'DEV'
+ }
+ }
-// 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.患者姓名} 跨膜压过高请及时处理`;
-// }
-// };
+ };
+ } 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 +956,10 @@
data: [],
lineStyle: {
color: "#409EFF",
- width: 5, // 设置线条宽度为5
+ width: 10, // 设置线条宽度为5
},
itemStyle: {
- borderWidth: 3,
+ borderWidth: 5,
borderColor: "#409EFF",
color: "#409EFF",
},
@@ -930,7 +986,7 @@
data: [],
lineStyle: {
color: "#D940FF",
- width: 5, // 设置线条宽度为5
+ width: 10, // 设置线条宽度为5
},
markPoint: {
data: [],
--
Gitblit v1.8.0