fix(血压趋势图): ID2166-修复血压渲染bug

zhangchen

2025-07-07 d1c5b122df58f3bb9bac227ec637c2c7370f81f3

 src/views/deviceWindoes2.vue

@@ -1,7 +1,7 @@
<template>
  <div class="divice">
    <!-- {{数据初始化}} -->
    <el-carousel v-if="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
    <el-carousel v-show="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
      <el-carousel-item  :style="{ height: pageHeight + 'px'}">
      <div class="youzhiliao" style="height: 100%" >
      <div class="toubu" style="height: 11%">
@@ -641,12 +641,12 @@
      <div
        class="mowei"
        style="height: 39%"
        v-if="Number(deviceData.透析状态) > 0"
        v-show="Number(deviceData.透析状态) > 0"
      >
        <el-row style="height: 100%; padding: 0px 20px 10px 20px">
          <!-- 未签到 -->
          <div
            v-if="Number(deviceData.透析状态) < 1"
            v-show="Number(deviceData.透析状态) < 1"
            style="height: 70%; width: 100%"
          >
            <div class="container">
@@ -785,7 +785,7 @@
            </div>
          </div>
          <!-- 已签到 -->
          <div v-else style="height: 80%; width: 100%; padding-right: 0px">
          <div v-show="Number(deviceData.透析状态) >= 1" style="height: 80%; width: 100%; padding-right: 0px">
            <div style="height: 100%">
              <el-row
                style="height: 30%; padding: 0px 0px 10px 0px"
@@ -901,10 +901,10 @@
                      padding-bottom: 10px; /* 设置所有方向的间距为10px */
                    "
                  >
                    <div style="height: 100%">
                    <div v-show="Number(deviceData.透析状态) > 1" class="zcc_test" style="height: 100%">
                      <div
                        v-if="Number(deviceData.透析状态) > 1"
                        :ref="'echartsDiv' + deviceData.设备编号"
                        :class="'echartsDiv-' + deviceData.设备编号"
                        style="height: 97%"
                      ></div>
                    </div>
@@ -951,7 +951,7 @@
      <div
        class="mowei"
        style="height: 39%"
        v-if="Number(deviceData.透析状态) === 0"
        v-show="Number(deviceData.透析状态) === 0"
      >
        <el-row gutter="20" style="height: 100%; padding: 10px 20px 20px 20px">
          <el-col :span="12" style="height: 100%">
@@ -1107,7 +1107,7 @@
      <el-carousel-item :style="{ height: pageHeight + 'px'}">
        <div class="toubu" style="height: 11%">
        <el-row
          v-if="deviceData.患者姓名 !== ''"
          v-show="deviceData.患者姓名 !== ''"
          style="
            font-weight: 900;
            color: #ffffff;
@@ -1197,7 +1197,7 @@
      </el-carousel-item>
    </el-carousel>

    <div v-else style="height: 100%">
    <div v-show="!deviceData.患者姓名" style="height: 100%">
      <div class="toubu" style="height: 11%">
        <el-row
          style="
@@ -1793,6 +1793,7 @@
  watch,
  onUnmounted,
  onBeforeUnmount,
  nextTick,
} from "vue";
import { Local } from "../utils/storage";
import * as echarts from "echarts";
@@ -1888,6 +1889,10 @@
const sseData = ref({});
// sse状态
const readyState = ref({ key: 0, value: "正在链接中" });

// 血压的echart实例
let bloodPressureEchart: echarts.ECharts | null = null
let observer;
 
const deviceCode = ref("");
const shishiTime = ref(new Date());
@@ -2114,6 +2119,7 @@
    if (床旁血压计.value.zuihouTime > shishiTime.value) {
    } else {
      setTimeout(() => {
        console.log("初始化血压图表222222");
        initTupiao();
      }, 500);
    }
@@ -2388,6 +2394,7 @@
  intervalId = setInterval(updateTime, 1000);
  const height = window.innerHeight;
  pageHeight.value = height;

});
// 在组件卸载前清除定时器，防止内存泄漏
onBeforeUnmount(() => {
@@ -2457,6 +2464,7 @@
    console.log(deviceData.value.设备名称, "子组件变量");
    setTimeout(() => {
      if (!xiaoduzhuangti.value) {
        console.log("初始化血压图表111111");
        initTupiao();
      }
    }, 500);
@@ -2468,7 +2476,7 @@
  // http://testbs.ihemodialysis.com/sse/sseEvent
  // const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
  数据初始化.value = true;
  const test = import.meta.env.VITE_API_BASE_URL;
  const test = import.meta.env.VITE_SSE_BASE_URL;
  const stateArr = [
    { key: 0, value: "正在链接中" },
    { key: 1, value: "已经链接并且可以通讯" },
@@ -2530,6 +2538,7 @@
              zuihouTime: date,
            };
            setTimeout(() => {
        console.log("初始化血压图表444444");
              initTupiao();
            }, 500);
          } else if (dataBody.推送类型 === "中央监控大屏信息") {
@@ -2538,7 +2547,7 @@
            console.log(Date.now() + "DEV");
            if (dataBody?.透析状态) {
              deviceData.value = dataBody?.透析状态;
              if ('透析单医嘱列表' in dataBody.透析状态) {
              if ('透析单医嘱列表' in dataBody.透析状态 && dataBody.透析状态?.透析单医嘱列表) {
                deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表;
              } else {
                deviceData.value.透析单医嘱列表 = []
@@ -2586,6 +2595,8 @@
  };
  isinitXy.value = true;
  setTimeout(() => {
        console.log("初始化血压图表333333");

    initTupiao();
  }, 500);
};
@@ -2612,6 +2623,20 @@
onBeforeMount(() => {
  closeSource();
});


const renderEcharts = (options: any) => {
  const boxes = document.querySelectorAll(`.echartsDiv-${deviceData.value.设备编号}`);
  boxes.forEach(box => {
    if ((box as HTMLElement).dataset.initialized === 'true') return;
    const chart = echarts.init(box as HTMLElement);
    chart.setOption(options);
    (box as HTMLElement).dataset.initialized = 'true';
  });
}



const initTupiao = () => {
  if (deviceData.value.患者姓名 !== "") {
    const seriesData = [
@@ -2770,9 +2795,14 @@
        xAxisData.push(1);
      }
      try {
        const myChart = echarts.init(
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        );
        // console.log('proxy.$refs["echartsDiv" + deviceData.value.设备编号]: ', proxy.$refs["echartsDiv" + deviceData.value.设备编号])
        // if (!bloodPressureEchart) {
        //     bloodPressureEchart = echarts.init(
        //     proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        //   );
        // }
        // console.log('bloodPressureEchart: ', bloodPressureEchart)

        const option = {
          // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          backgroundColor: "#ffffff",
@@ -2809,15 +2839,43 @@
          },
          series: seriesData,
        };
        myChart.setOption(option);
        // console.log("渲染设备", deviceData.value.设备编号, option);
        // console.log('deviceData.透析状态1: ', Number(deviceData.value.透析状态));
        // nextTick(() => {
        //     bloodPressureEchart.setOption(option);
        //     bloodPressureEchart.resize();
        //     setTimeout(() => {
        //     // 方法1：检查容器内是否有canvas元素
        //     const canvas = bloodPressureEchart.getDom().querySelector('canvas');
        //     console.log('canvas: ', canvas);
        //     if (!canvas) {
        //       console.error('图表渲染失败：未生成canvas元素');
        //       return;
        //     }
        //     // 方法2：检查canvas的宽高
        //     if (canvas.width === 0 || canvas.height === 0) {
        //       console.error('图表渲染失败：canvas宽高为0');
        //       return;
        //     }
        //     // 方法3：检查图表实例的宽高
        //     if (bloodPressureEchart.getWidth() === 0 || bloodPressureEchart.getHeight() === 0) {
        //       console.error('图表渲染失败：图表实例宽高为0');
        //       return;
        //     }}, 1000);
        // });
        renderEcharts(option);
      } catch (e) {
        console.log("图标渲染异常异常");
        console.log("图标渲染异常异常：", e);
      }
    } else {
      try {
        const myChart = echarts.init(
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        );
        // if (!bloodPressureEchart) { 
        //     // @ts-ignore
        //   bloodPressureEchart = echarts.init(
        //     proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        //   );
        // }

 
        const option = {
          backgroundColor:
@@ -2852,11 +2910,18 @@
          },
          series: [],
        };
        myChart.setOption(option);
        // console.log('deviceData.透析状态2: ', Number(deviceData.value.透析状态));
        // // bloodPressureEchart.setOption(option);
        // nextTick(() => {
        //   // bloodPressureEchart.setOption(option);
        //     bloodPressureEchart.setOption(option);
        // });
        renderEcharts(option);
      } catch (e) {
        console.log(
          "异常",
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
          proxy.$refs["echartsDiv" + deviceData.value.设备编号],
          e
        );
      }
    }
@@ -3038,6 +3103,8 @@
    console.log(deviceData.value);
  }
};


const getItemName = (name: string) => {
  if (name) {
    if (name === "血红蛋白测定") {