ID1743-修改完成

zhangchen

2025-07-01 1dafbcf3148590cdf7de8f3694664888109afcda

 src/views/deviceWindoes2.vue

@@ -1,8 +1,10 @@
<template>
  <div class="divice">
    <!-- {{数据初始化}} -->
    <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名">
      <div id="toubu" class="toubu" style="height: 11%">
    <el-carousel v-if="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%">
        <el-row
          v-if="deviceData.患者姓名 !== ''"
          style="
@@ -90,10 +92,7 @@
          </div>
        </el-row>
      </div>
      <el-carousel v-if="contentHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
        <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }">
          <div :style="{ height: (contentHeight - 10) + 'px' }">
            <div class="chongjian" style="height: 50%;">
      <div class="chongjian" style="height: 50%">
            <el-row :gutter="20" style="height: 100%; padding: 20px 20px 10px 20px">
              <el-col :span="6" style="height: 100%; padding-bottom: 10px">
                <div style="height: 100%">
@@ -489,11 +488,10 @@
                          font-weight: 600;
                              color: #333333;
                          color: #ca7070;
                          overflow: hidden;
                          overflow-y: auto;
                        "
                      >
                        <el-row style="font-size: 20px; overflow: hidden;">
                    <el-row style="font-size: 20px">
                          <el-col
                            v-for="(row, index) in deviceData.异常检验指标"
                            :span="8"
@@ -642,7 +640,7 @@
          <!-- 治疗中 -->
          <div
            class="mowei"
            style="height: 39%;"
        style="height: 39%"
            v-if="Number(deviceData.透析状态) > 0"
          >
            <el-row style="height: 100%; padding: 0px 20px 10px 20px">
@@ -873,7 +871,6 @@
                            font-size: 50px;
                            color: #333333;
                            color: #ca7070;
                            overflow: hidden;
                            overflow-y: auto;
                          "
                        >
@@ -881,7 +878,7 @@
                            <el-col
                              v-for="(row, index) in deviceData.异常检验指标"
                              :span="12"
                              style="font-weight: 700"
                          style="font-weight: 700;"
                              :key="index"
                            >
                              {{ getItemName(row?.项目名称) }}
@@ -1107,11 +1104,99 @@
          </div>
          </div>
      </el-carousel-item>
      <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }">
        <DoctorAdvice :height="(contentHeight - 10)" :list="deviceData.透析单医嘱列表" />
      <el-carousel-item :style="{ height: pageHeight + 'px'}">
        <div class="toubu" style="height: 11%">
        <el-row
          v-if="deviceData.患者姓名 !== ''"
          style="
            font-weight: 900;
            color: #ffffff;
            width: 100%;
            height: 100%;
            line-height: 100%;
            padding: 20px;
            position: relative;
          "
        >
          <span
            class="grid-container"
            style="font-size: 300%; height: 100%"
            v-if="deviceData.设备名称 !== null"
            >{{ deviceData.设备名称 }}
          </span>
          <span
            class="grid-container"
            @click="initTupiao"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.患者姓名 }}
          </span>

          <span
            class="grid-container"
            v-if="deviceData.年龄 !== null"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.年龄 }}岁</span
          >
          <span
            class="grid-container"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.性别 }}</span
          >
          <span
            class="grid-container"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ patientSourceAndCode }}</span
          >
          <span
          v-if="deviceData.签到号"
            class="grid-container"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.签到号 }}</span
          >
 
          <div
            style="
              position: absolute;
              top: 0;
              right: 0;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding: 5px;
              height: 100%;
            "
          >
            <div
              class="grid-container"
              style="display: flex; align-items: center; padding-right: 20px"
            >
              <span
                style="
                  display: inline-block;
                  margin-right: 15px;
                  font-size: 30px;
                  color: #f56c6c;
                "
                >{{ 倒计时显示 }}</span
              >
              <span style="display: inline-block; margin-right: 15px">
                <img @click="dingshiShow" :src="dingshi" alt="Image 1" />
              </span>
              <span style="display: inline-block">
                <img
                  @click="centerDialogVisible = true"
                  :src="shezhi"
                  alt="Image 2"
                />
              </span>
            </div>
          </div>
        </el-row>
      </div>
        <DoctorAdvice :height="'89%'" :list="deviceData.透析单医嘱列表" />
      </el-carousel-item>
    </el-carousel>
    </div>

    <div v-else style="height: 100%">
      <div class="toubu" style="height: 11%">
        <el-row
@@ -1708,14 +1793,12 @@
  watch,
  onUnmounted,
  onBeforeUnmount,
  nextTick
} from "vue";
import { Local } from "../utils/storage";
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
import { setTimeoutAlert } from "../utils/httpApi";
import DoctorAdvice from '../components/doctorAdvice/index.vue';

// 创建 Audio 对象，指向 public 目录下的音频文件
const alarmSound = new Audio(alertbaojin); //一般报警声音
const alarmSoundCXY = new Audio(cxybaojing); //测血压报警
@@ -1731,7 +1814,6 @@
const alarmSoundCG = new Audio(cgbaojing); //冲管
alarmSoundCG.loop = true; // 循环播放

const isHeightSet = ref(false);
// 控制播放状态的变量
const isPlaying = ref(false);
// 切换播放/暂停的方法
@@ -2006,7 +2088,7 @@
const wd = ref("");
const ls = ref("");
const ddd = ref("");
const contentHeight = ref(0); // 中间内容的高度
const pageHeight = ref(0);
const isShowXY = computed(() => {
  if (床旁血压计.value.zuihouTime > shishiTime.value) {
    return true;
@@ -2031,11 +2113,9 @@
  () => {
    if (床旁血压计.value.zuihouTime > shishiTime.value) {
    } else {
            nextTick(() => {
              setTimeout(() => {
                initTupiao();
              }, 500);
            });
    }
  }
);
@@ -2306,12 +2386,8 @@
    centerDialogVisible.value = true;
  }
  intervalId = setInterval(updateTime, 1000);
  const width = window.innerWidth;
const height = window.innerHeight;

console.log('可视区域宽度:', width);
console.log('可视区域高度:', height);

  pageHeight.value = height;
});
// 在组件卸载前清除定时器，防止内存泄漏
onBeforeUnmount(() => {
@@ -2383,43 +2459,16 @@
      if (!xiaoduzhuangti.value) {
        initTupiao();
      }
    }, 1000);
    }, 500);
  }
);

watch(() => deviceData.value.患者姓名, (newVal: string, oldVal: string) => {
  console.log("患者姓名变化:", newVal)

  if (newVal && oldVal !== newVal) {
    isHeightSet.value = false // 重置标识
    contentHeight.value = 0;  // 清空高度，强制更新 el-carousel

    setTimeout(() => {
      if (isHeightSet.value) return // 如果已设置过就不重复执行

      const windowHeight = window.innerHeight
      const toubu = document.getElementById('toubu')
      const toubuHeight = toubu ? toubu.offsetHeight : 0

      const newHeight = windowHeight - toubuHeight

      if (newHeight !== contentHeight.value) {
        contentHeight.value = newHeight
        console.log("更新 contentHeight.value: ", contentHeight.value)
      }

      isHeightSet.value = true
    }, 500)
  }
})

const 数据初始化 = ref(false);
//创建链接对象
const creatSource = () => {
  // http://testbs.ihemodialysis.com/sse/sseEvent
  // const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
  数据初始化.value = true;
  const test = import.meta.env.VITE_SSE_BASE_URL;
  const test = "https://backend.ihemodialysis.com/sse/sseEvent/";
  const stateArr = [
    { key: 0, value: "正在链接中" },
    { key: 1, value: "已经链接并且可以通讯" },
@@ -2480,13 +2529,9 @@
              dbp: dataBody?.床旁血压结果?.dbp,
              zuihouTime: date,
            };

            nextTick(() => {
              setTimeout(() => {
                initTupiao();
              }, 500);
            });

          } else if (dataBody.推送类型 === "中央监控大屏信息") {
            数据初始化.value = false;
            // loading.close()
@@ -2725,14 +2770,9 @@
        xAxisData.push(1);
      }
      try {
        let myChart = null;

        if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
          myChart = echarts.init(
        const myChart = echarts.init(
            proxy.$refs["echartsDiv" + deviceData.value.设备编号]
          );
        }

        const option = {
          // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          backgroundColor: "#ffffff",
@@ -2769,22 +2809,15 @@
          },
          series: seriesData,
        };
        if (myChart) {
          myChart.setOption(option);
        }
      } catch (e) {
        console.log("图标渲染异常异常");
      }
    } else {
      try {
        let myChart = null;

        if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
          myChart = echarts.init(
        const myChart = echarts.init(
            proxy.$refs["echartsDiv" + deviceData.value.设备编号]
          );
        }


        const option = {
          backgroundColor:
@@ -2819,11 +2852,8 @@
          },
          series: [],
        };
        if (myChart) {
          myChart.setOption(option);
        }
      } catch (e) {
        console.log("图表渲染异常异常: ", e);
        console.log(
          "异常",
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
@@ -2831,6 +2861,7 @@
      }
    }
  } else if (deviceData.value.患者姓名 === "") {
    console.log("2222");
    const tbdata1 = [];
    const tbdata2 = [];
    const tbdata3 = [];
@@ -2866,28 +2897,15 @@
    }
    try {
      console.log("渲染设备");
      let myChart1 = null;
      let myChart2 = null;
      let myChart3 = null;

      if (proxy.$refs["echartsDivwd" + deviceData.value.设备编号]) {
        myChart1 = echarts.init(
      const myChart1 = echarts.init(
          proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
        );
      }

      if (proxy.$refs["echartsDivls" + deviceData.value.设备编号]) {
          myChart2 = echarts.init(
      const myChart2 = echarts.init(
            proxy.$refs["echartsDivls" + deviceData.value.设备编号]
          );
      }

      if (proxy.$refs["echartsDivddd" + deviceData.value.设备编号]) {
        myChart3 = echarts.init(
      const myChart3 = echarts.init(
          proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
        );
      }

      const option1 = {
        // backgroundColor: textcolor.value,
        tooltip: {
@@ -3010,15 +3028,9 @@
          },
        ],
      };
      if (myChart1) {
        myChart1.setOption(option1);
      }
      if (myChart2) {
        myChart2.setOption(option2);
      }
      if (myChart3) {
        myChart3.setOption(option3);
      }
    } catch (e) {
      console.log("图标渲染异常异常");
    }