data2/Single_application.git

parent: 6f3615d0 | 补丁 | 提交 | ignore whitespace

chenyc

2025-01-20 5c7adfc5605a9f050a7e10ec8e7d07da23277608

4个文件已修改

	index.html	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package-lock.json	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/Home.vue	100 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 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>

 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",

 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"
  },

 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: [],

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

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

			@@ -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"
			},

			@@ -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: [],