34

chenyc

2025-01-20 5c7adfc5605a9f050a7e10ec8e7d07da23277608

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