34

chenyc

2025-02-10 7db10f956d97ae2bd1fe97eb87603020f17bc59f

 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,8 @@
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="70"
                    :show-text="false"
                    :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
                  />
                </div>
                <div style="height: 20%">
@@ -208,7 +211,8 @@
                  <el-progress
                    :text-inside="true"
                    :stroke-width="26"
                    :percentage="80"
                    :show-text="false"
                    :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
                    status="success"
                  />
                </div>
@@ -217,7 +221,7 @@
          </div>
        </el-col>
        <el-col :span="12">
          <div
          <div 
            v-if="Number(deviceData.透析状态) > 1"
            :ref="'echartsDiv' + deviceData.设备编号"
            style="height: 97%"
@@ -227,23 +231,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 +255,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 +295,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">
      <el-row style="height: 20%;background-color: #ffffff; ">
      
        <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 +384,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 +422,14 @@
                &nbsp;
              </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 +449,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 +503,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 +512,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 +546,7 @@
  性别: "男",
  患者头像:
    "http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
  患者姓名: "李金山",
  患者姓名: "",
  患者编号: "PAT9090070832211PyVq",
  患者透析号: "0207",
  最后一条血压: 116,
@@ -550,15 +576,9 @@
  血压高值列表: "152,133,116",
  设备分区类型: 0,
  设备号: "23",
  设备名称: "23",
  设备名称: "初始化。。。",
  设备序列号: "B97AP002",
  设备状态列表: [
    {
      是否为警告标记: 0,
      状态名称: "待机",
      状态类型: "待机",
      状态颜色: "#13CE66",
    },
  ],
  设备编号: "DEVICE9195233509924hOHL",
  超滤速度过快: null,
@@ -575,7 +595,7 @@
  透析处方的时长_小时: "4",
  透析开始时间: "2025-01-10 16:44:00",
  透析方案: "HD",
  透析状态: "2.0",
  透析状态: "1.0",
  透析结束时间: "2025-01-10 20:44:00",
  设备变化: "1736508117033DEV",
  属性历史列表: [
@@ -678,6 +698,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 +777,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 +853,17 @@
  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()
    window.location.reload();
  }else{
    ElMessage.warning('请先输入设备编号')
  }
@@ -840,7 +871,7 @@
watch(
  () => deviceData.value.设备变化,
  () => {
    // console.log(device.value.设备名称,'子组件变量')
    console.log(deviceData.value.设备名称,'子组件变量')
    setTimeout(() => {
      if (!xiaoduzhuangti.value) {
        initTupiao();
@@ -848,35 +879,110 @@
    }, 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.患者姓名=''
                    }
                    
                    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信息.状态列表
                    
                  }
                 
                }
            }
        };
        } 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 +1006,10 @@
        data: [],
        lineStyle: {
          color: "#409EFF",
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
        },
        itemStyle: {
          borderWidth: 3,
          borderWidth: 5,
          borderColor: "#409EFF",
          color: "#409EFF",
        },
@@ -930,7 +1036,7 @@
        data: [],
        lineStyle: {
          color: "#D940FF",
          width: 5, // 设置线条宽度为5
          width: 10, // 设置线条宽度为5
        },
        markPoint: {
          data: [],
@@ -1097,6 +1203,7 @@
      }
    }
  } else if (deviceData.value.患者姓名 === "") {
    console.log('2222')
    const tbdata1 = [];
    const tbdata2 = [];
    const tbdata3 = [];
@@ -1131,6 +1238,7 @@
      });
    }
    try {
      console.log('渲染设备')
      const myChart1 = echarts.init(
        proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
      );
@@ -1141,7 +1249,7 @@
        proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
      );
      const option1 = {
        backgroundColor: textcolor.value,
        // backgroundColor: textcolor.value,
        tooltip: {
          trigger: "axis",
        },
@@ -1150,11 +1258,11 @@
        },
        grid: {
          left: 8,
          top: 30,
          top: 100,
          bottom: 0,
        },
        xAxis: {
          show: false, // 隐藏X轴
          show: true, // 隐藏X轴
          type: "category",
          // 标记做右往左排列
          boundaryGap: false,
@@ -1181,7 +1289,7 @@
        ],
      };
      const option2 = {
        backgroundColor: textcolor.value,
        // backgroundColor: textcolor.value,
        tooltip: {
          trigger: "axis",
        },
@@ -1190,7 +1298,7 @@
        },
        grid: {
          left: 8,
          top: 20,
          top: 100,
          bottom: 0,
        },
        xAxis: {
@@ -1222,7 +1330,7 @@
        ],
      };
      const option3 = {
        backgroundColor: textcolor.value,
        // backgroundColor: textcolor.value,
        tooltip: {
          trigger: "axis",
        },
@@ -1231,7 +1339,7 @@
        },
        grid: {
          left: 8,
          top: 10,
          top: 100,
          bottom: 0,
        },
        xAxis: {
@@ -1356,4 +1464,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>