单应用项目,可以创建很多独立工具类页面 ,不用登录 初始化的页面
chenyc
2025-06-09 04b53440f419e937c567c5d4bdeff6387e194e82
src/views/deviceWindoes2.vue
@@ -1,8 +1,8 @@
<template>
    <div class="divice">
      <!-- {{数据初始化}} -->
      <div class="youzhiliao" style="height: 100%;" v-if="deviceData.患者姓名">
        <div class="toubu" style="height: 11%;">
    <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名">
      <div class="toubu" style="height: 11%">
            <el-row
                v-if="deviceData.患者姓名 !== ''"
                style="
@@ -22,7 +22,8 @@
                >{{ deviceData.设备名称 }}
                </span>
                <span
                class="grid-container" @click="initTupiao"
            class="grid-container"
            @click="initTupiao"
                style="margin-left: 5%; font-size: 350%; height: 100%"
                >{{ deviceData.患者姓名 }}
                </span>
@@ -39,25 +40,49 @@
                >{{ 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">
          <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 style="display: inline-block">
                <img
                  @click="centerDialogVisible = true"
                  :src="shezhi"
                  alt="Image 2"
                />
                      </span>
                  </div>
              </div>
            </el-row>
        </div>
        <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%;">
          <el-col :span="6" style="height: 100%; padding-bottom: 10px">
            <div style="height: 100%">
                    <div
                        :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
                        style="
@@ -67,125 +92,255 @@
                          height: 100%;
                          width: 100%;
                        "
                      >
                    </div>
              ></div>
                </div>
              </el-col>
              <!-- 床旁显示血压计有数据的时候 -->
              <template  v-if="床旁血压计.zuihouTime>shishiTime">
                <el-col :span="18" style="height: 100%;">
                  <el-row style="height: 50%; ">
                    <div style="width: 100%; height: 100%;border-radius: 8px;">
                      <div class="item" style="background-color: #ffffff;height: 97%;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
            <el-col :span="18" style="height: 100%">
              <el-row style="height: 50%">
                <div style="width: 100%; height: 100%; border-radius: 8px">
                  <div
                    class="item"
                    style="background-color: #ffffff; height: 97%"
                  >
                    <div style="height: 25%">
                      <div class="container-cord" style="height: 100%">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="tsl"
                              />
                              <span class="text-group_3">血压</span>
                            </div>
                          </div>
                          <div style="height: 75%; text-align: center;font-weight: 600;font-size: 65px;color: #70A3DD;" class="grid-container" >
                    <div
                      style="
                        height: 75%;
                        text-align: center;
                        font-weight: 600;
                        font-size: 65px;
                        color: #70a3dd;
                      "
                      class="grid-container"
                    >
                            {{床旁血压计.sbp}} / {{床旁血压计.dbp}}
                          </div>
                      </div>
                    </div>
                  </el-row>
                  <el-row style="height: 50%;">
                    <div style="width: 100%; height: 100%;border-radius: 8px;">
                      <div class="item" style="background-color: #ffffff;height: 97%;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="xinlv"
              <el-row style="height: 50%">
                <div style="width: 100%; height: 100%; border-radius: 8px">
                  <div
                    class="item"
                    style="background-color: #ffffff; height: 97%"
                  >
                    <div style="height: 25%">
                      <div class="container-cord" style="height: 100%">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="xinlv"
                              />
                              <span class="text-group_3">心率</span>
                            </div>
                          </div>
                          <div style="height: 75%; text-align: center;font-weight: 600;font-size: 65px;color: #70A3DD;" class="grid-container" >
                    <div
                      style="
                        height: 75%;
                        text-align: center;
                        font-weight: 600;
                        font-size: 65px;
                        color: #70a3dd;
                      "
                      class="grid-container"
                    >
                            {{床旁血压计.pulseRate}}
                          </div>
                      </div>
                    </div>
                  </el-row>
                </el-col>
              </template>
              <!-- 未签到 -->
              <template v-else-if="Number(deviceData.透析状态)===0">
                <el-col :span="18" style="height: 100%;">
                  <el-row :gutter="20" style="width: 100%; height: 100%;">
                    <el-col :span="14" style="height: 100%;">
            <el-col :span="18" style="height: 100%">
              <el-row :gutter="20" style="width: 100%; height: 100%">
                <el-col :span="14" style="height: 100%">
                      <div class="container-weiqiandao" >
                        <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;">
                              <div class="container-cord" style="height: 30px;">
                                <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                    <div
                      class="item-weiqiandao"
                      style="background: #e5eeff; border-radius: 8px"
                    >
                      <div class="container-cord" style="height: 30px">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="tsl"
                                />
                                <span class="text-group_3">治疗模式</span>
                              </div>
                              <div class="container-body" style="height: calc(100% - 30px);width: 100%;">
                                <div class="container-body-text" style="color: #3A75B8;font-size: 30px;" >
                                  <span style="font-size: 30px;" v-if="deviceData.透析方案 ==='HDF'"> {{deviceData?.置换方式==='前置换'?'前':'后'}}</span> {{ deviceData.透析方案 }}
                                </div>
                      <div
                        class="container-body"
                        style="height: calc(100% - 30px); width: 100%"
                      >
                        <div
                          class="container-body-text"
                          style="color: #3a75b8; font-size: 30px"
                        >
                          <span
                            style="font-size: 30px"
                            v-if="deviceData.透析方案 === 'HDF'"
                          >
                            {{
                              deviceData?.置换方式 === "前置换" ? "前" : "后"
                            }}</span
                          >
                          {{ deviceData.透析方案 }}
                              </div>
                        </div>
                        <div class="item-weiqiandao" style="background: #F9DEDE;border-radius: 8px;">
                            <div class="container-cord" style="height: 30px;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                    </div>
                    <div
                      class="item-weiqiandao"
                      style="background: #f9dede; border-radius: 8px"
                    >
                      <div class="container-cord" style="height: 30px">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="tsl"
                              />
                              <span class="text-group_3">人工肾</span>
                            </div>
                            <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 28px;">
                              <div class="grid-container-text" style="color: #A78718;" v-for="(item,index) in deviceData.透析器列表" :style="{fontSize:deviceData.透析器列表.length>1?'22px':'28px'}" :key="index">
                      <div
                        class="grid-container"
                        style="
                          height: calc(100% - 30px);
                          width: 100%;
                          font-size: 28px;
                        "
                      >
                        <div
                          class="grid-container-text"
                          style="color: #a78718"
                          v-for="(item, index) in deviceData.透析器列表"
                          :style="{
                            fontSize:
                              deviceData.透析器列表.length > 1
                                ? '22px'
                                : '28px',
                          }"
                          :key="index"
                        >
                                <div class="left-div">{{item.name}}</div>
                                <div class="right-div">{{item.数量}}{{item.单位}}</div>
                          <div class="right-div">
                            {{ item.数量 }}{{ item.单位 }}
                              </div>
                            </div>
                        </div>
                        <div class="item-weiqiandao" style="background: #D9F0E2;border-radius: 8px;">
                          <div class="container-cord" style="height: 30px;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                    </div>
                    <div
                      class="item-weiqiandao"
                      style="background: #d9f0e2; border-radius: 8px"
                    >
                      <div class="container-cord" style="height: 30px">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="tsl"
                              />
                              <span class="text-group_3">一次性循环管路</span>
                            </div>
                            <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 28px;">
                              <div class="grid-container-text" style="color: #3AB859;" v-for="(item,index) in deviceData.管路列表" :style="{fontSize:deviceData.管路列表.length>1?'22px':'28px'}" :key="index">
                      <div
                        class="grid-container"
                        style="
                          height: calc(100% - 30px);
                          width: 100%;
                          font-size: 28px;
                        "
                      >
                        <div
                          class="grid-container-text"
                          style="color: #3ab859"
                          v-for="(item, index) in deviceData.管路列表"
                          :style="{
                            fontSize:
                              deviceData.管路列表.length > 1 ? '22px' : '28px',
                          }"
                          :key="index"
                        >
                                <div class="left-div">{{item.name}}</div>
                                <div class="right-div">{{item.数量}}支</div>
                              </div>
                            </div>
                          </div>
                      </div>
                    </el-col>
                    <el-col :span="10" style="height: 100%;">
                <el-col :span="10" style="height: 100%">
                      <div class="container-weiqiandao">
                        <div class="item-weiqiandao" style="background: #F6F5FA;border-radius: 8px;">
                          <div class="container-cord" style="height: 30px;">
                            <img style="width: 25px;" referrerpolicy="no-referrer" :src="txztimg"
                    <div
                      class="item-weiqiandao"
                      style="background: #f6f5fa; border-radius: 8px"
                    >
                      <div class="container-cord" style="height: 30px">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="txztimg"
                            />
                            <span class="text-group_3">治疗状态</span>
                          </div>
                          <div class="container-body" style="height: calc(100% - 30px);width: 100%;">
                            <div class="container-body-text" style="color: #333333; font-size: 50px;">
                      <div
                        class="container-body"
                        style="height: calc(100% - 30px); width: 100%"
                      >
                        <div
                          class="container-body-text"
                          style="color: #333333; font-size: 50px"
                        >
                              {{txztText}}
                            </div>  
                          </div>  
                        </div>
                        <div class="item-weiqiandao" style="background: #EFE5FF;border-radius: 8px;">
                          <div class="container-cord" style="height: 30px;">
                            <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                    <div
                      class="item-weiqiandao"
                      style="background: #efe5ff; border-radius: 8px"
                    >
                      <div class="container-cord" style="height: 30px">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="tsl"
                            />
                            <span class="text-group_3">透析液</span>
                          </div>
                          <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 28px;">
                            <div class="grid-container-text" style="color: #3AB859;" :style="{fontSize:deviceData.透析液列表.length>1?'22px':'28px'}" v-for="(item,index) in deviceData.透析液列表" :key="index">
                      <div
                        class="grid-container"
                        style="
                          height: calc(100% - 30px);
                          width: 100%;
                          font-size: 28px;
                        "
                      >
                        <div
                          class="grid-container-text"
                          style="color: #3ab859"
                          :style="{
                            fontSize:
                              deviceData.透析液列表.length > 1
                                ? '22px'
                                : '28px',
                          }"
                          v-for="(item, index) in deviceData.透析液列表"
                          :key="index"
                        >
                              <div class="left-div">{{item.name}}</div>
                              <div class="right-div">{{item.数量}}{{item.单位}}</div>
                          <div class="right-div">
                            {{ item.数量 }}{{ item.单位 }}
                            </div>
                          </div>
                        </div>
                    </div>
                      </div>
                    </el-col>
                  </el-row>
@@ -193,102 +348,204 @@
              </template>
              <!-- 治疗中 -->
              <template v-else>
                <el-col :span="18" style="height: 100%;">
                  <el-row style="height: 50%; padding-bottom: 10px;">
                    <div style="width: 100%; height: 100%;border-radius: 8px;">
                      <el-row style="height: 100%;" :gutter="10">
            <el-col :span="18" style="height: 100%">
              <el-row style="height: 50%; padding-bottom: 10px">
                <div style="width: 100%; height: 100%; border-radius: 8px">
                  <el-row style="height: 100%" :gutter="10">
                        <el-col class="itemboy" style="height:100%" :span="7">
                          <div class="item" style="background-color: #ffffff;height: 97%;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="zlms"
                      <div
                        class="item"
                        style="background-color: #ffffff; height: 97%"
                      >
                        <div style="height: 25%">
                          <div class="container-cord" style="height: 100%">
                            <img
                              style="width: 25px"
                              referrerpolicy="no-referrer"
                              :src="zlms"
                              />
                              <span class="text-group_3">治疗模式</span>
                            </div>
                          </div>
                          <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #D58E56;" class="grid-container" >
                        <div
                          style="
                            height: 75%;
                            text-align: center;
                            font-weight: 600;
                            font-size: 50px;
                            color: #d58e56;
                          "
                          class="grid-container"
                        >
                            <div>
                              <span style="font-size: 30px;" v-if="deviceData.透析方案 ==='HDF'"> {{deviceData?.置换方式==='前置换'?'前':'后'}}</span> {{ deviceData.透析方案 }}
                            <span
                              style="font-size: 30px"
                              v-if="deviceData.透析方案 === 'HDF'"
                            >
                              {{
                                deviceData?.置换方式 === "前置换" ? "前" : "后"
                              }}</span
                            >
                            {{ deviceData.透析方案 }}
                            </div>
                          </div>
                        </div>
                        </el-col>
                        <el-col class="itemboy" style="height:100%" :span="7">
                          <div class="item" style="background-color: #ffffff;height: 97%;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="txztimg"
                      <div
                        class="item"
                        style="background-color: #ffffff; height: 97%"
                      >
                        <div style="height: 25%">
                          <div class="container-cord" style="height: 100%">
                            <img
                              style="width: 25px"
                              referrerpolicy="no-referrer"
                              :src="txztimg"
                              />
                              <span class="text-group_3">治疗状态</span>
                            </div>
                          </div>
                          <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #70A3DD;" class="grid-container" >
                        <div
                          style="
                            height: 75%;
                            text-align: center;
                            font-weight: 600;
                            font-size: 50px;
                            color: #70a3dd;
                          "
                          class="grid-container"
                        >
                          {{txztText}}
                          </div>
                        </div>
                        </el-col>
                        <el-col class="itemboy" style="height:100%" :span="10">
                          <div class="item" style="background-color: #ffffff;height: 97%;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="txq"
                      <div
                        class="item"
                        style="background-color: #ffffff; height: 97%"
                      >
                        <div style="height: 25%">
                          <div class="container-cord" style="height: 100%">
                            <img
                              style="width: 25px"
                              referrerpolicy="no-referrer"
                              :src="txq"
                              />
                              <span class="text-group_3">人工肾</span>
                            </div>
                          </div>
                          <div style="height: 85%; font-weight: 600;font-size: 50px;color: #8079CB;" class="scrollable-text" >
                        <div
                          style="
                            height: 85%;
                            font-weight: 600;
                            font-size: 50px;
                            color: #8079cb;
                          "
                          class="scrollable-text"
                        >
                            {{deviceData.透析器}}
                          </div>
                        </div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-row>
                  <!-- 签到未签到状态 -->
                  <div class="container" v-if="Number(deviceData.透析状态) < 1"  style="height: 50%; ">
                        <div class="item" style="background-color: #FFFFFF;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="xinlv"
              <div
                class="container"
                v-if="Number(deviceData.透析状态) < 1"
                style="height: 50%"
              >
                <div class="item" style="background-color: #ffffff">
                  <div style="height: 25%">
                    <div class="container-cord" style="height: 100%">
                      <img
                        style="width: 25px"
                        referrerpolicy="no-referrer"
                        :src="xinlv"
                              />
                              <span class="text-group_3">异常指标</span>
                            </div>
                          </div>
                          <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333; color: #CA7070;" >
                            <el-row  style="font-size: 30px;">
                              <el-col v-for="(row,index) in deviceData.异常检验指标" :span="8" style="font-weight: 700;" :key="index">
                                {{getItemName(row?.项目名称)}} <b v-if="row?.结果标记==='g'" style="font-weight:bold">⬆</b> <b v-else style="font-weight:bold">⬇</b>
                  <div
                    style="
                      height: 75%;
                      text-align: center;
                      font-weight: 600;
                      font-size: 50px;
                      color: #333333;
                      color: #ca7070;
                    "
                  >
                    <el-row style="font-size: 30px">
                      <el-col
                        v-for="(row, index) in deviceData.异常检验指标"
                        :span="8"
                        style="font-weight: 700"
                        :key="index"
                      >
                        {{ getItemName(row?.项目名称) }}
                        <b
                          v-if="row?.结果标记 === 'g'"
                          style="font-weight: bold"
                          >⬆</b
                        >
                        <b v-else style="font-weight: bold">⬇</b>
                              </el-col> 
                            </el-row>
                          </div>
                        </div>
                        <div class="item" style="background-color: #ffffff;">
                          <div style="height: 25%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div class="item" style="background-color: #ffffff">
                  <div style="height: 25%">
                    <div class="container-cord" style="height: 100%">
                      <img
                        style="width: 25px"
                        referrerpolicy="no-referrer"
                        :src="tsl"
                              />
                              <span class="text-group_3">处方脱水量</span>
                            </div>
                          </div>
                          <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #8079CB;" class="grid-container" >
                            <span v-if="deviceData.处方脱水量"> {{deviceData.处方脱水量}} L</span>
                  <div
                    style="
                      height: 75%;
                      text-align: center;
                      font-weight: 600;
                      font-size: 50px;
                      color: #8079cb;
                    "
                    class="grid-container"
                  >
                    <span v-if="deviceData.处方脱水量">
                      {{ deviceData.处方脱水量 }} L</span
                    >
                          </div>
                        </div>
                  </div>
                  <!-- 透析中状态 -->
                  <div  class="container" v-else  style="height: 50%; ">
                        <div class="item" style="background-color: #FFFFFF;">
                          <div style="height: 10%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="sjjd"
              <div class="container" v-else style="height: 50%">
                <div class="item" style="background-color: #ffffff">
                  <div style="height: 10%">
                    <div class="container-cord" style="height: 100%">
                      <img
                        style="width: 25px"
                        referrerpolicy="no-referrer"
                        :src="sjjd"
                              />
                              <span class="text-group_3">时间进度</span>
                            </div>
                          </div>
                          <div style="height: 90%; text-align: center;font-weight: 600;font-size: 38px;color: #333333;" class="grid-container" >
                  <div
                    style="
                      height: 90%;
                      text-align: center;
                      font-weight: 600;
                      font-size: 38px;
                      color: #333333;
                    "
                    class="grid-container"
                  >
                          <div>
                            <span style="color: #303133">{{
                            jgTime4(deviceData.iot_透析时间)
@@ -305,21 +562,37 @@
                              :stroke-width="15"
                              :show-text="false"
                              color="#70A3DD"
                              :percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
                        :percentage="
                          (Number(deviceData.iot_透析时间) /
                            (Number(deviceData.透析处方的时长) * 60)) *
                          100
                        "
                              status="success"
                            />
                          </div>
                          </div>
                        </div>
                        <div class="item" style="background-color: #ffffff;">
                          <div style="height: 10%;">
                            <div class="container-cord" style="height: 100%;">
                              <img style="width: 25px;" referrerpolicy="no-referrer" :src="cljd"
                <div class="item" style="background-color: #ffffff">
                  <div style="height: 10%">
                    <div class="container-cord" style="height: 100%">
                      <img
                        style="width: 25px"
                        referrerpolicy="no-referrer"
                        :src="cljd"
                              />
                              <span class="text-group_3">超滤进度</span>
                            </div>
                          </div>
                          <div style="height: 90%; text-align: center;font-weight: 600;font-size: 38px;color: #8079CB;" class="grid-container" >
                  <div
                    style="
                      height: 90%;
                      text-align: center;
                      font-weight: 600;
                      font-size: 38px;
                      color: #8079cb;
                    "
                    class="grid-container"
                  >
                            <div>
                              <span style="color: #303133">{{
                                  Number(deviceData.iot_当前脱水量).toFixed(1)
@@ -337,7 +610,11 @@
                                :stroke-width="15"
                                :show-text="false"
                                color="#70CAAE"
                                :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
                        :percentage="
                          (Number(deviceData.iot_当前脱水量) /
                            Number(deviceData.处方脱水量)) *
                          100
                        "
                              />
                            </div>
                          </div>
@@ -345,142 +622,277 @@
                  </div>
                </el-col>
              </template>
          </el-row>
        </div>
        <!-- 治疗中 -->
        <div class="mowei" style="height: 39%;" v-if="Number(deviceData.透析状态) >0">
      <div
        class="mowei"
        style="height: 39%"
        v-if="Number(deviceData.透析状态) > 0"
      >
          <el-row style="height: 100%; padding:0px 20px 10px 20px">
            <!-- 未签到 -->
            <div v-if="Number(deviceData.透析状态) < 1"  style="height: 70%;width: 100%;">
          <div
            v-if="Number(deviceData.透析状态) < 1"
            style="height: 70%; width: 100%"
          >
              <div class="container">
                <div class="item">
                  <div style="height: 25%;">
                    <div class="container-cord" style="height: 100%;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tizhong"
                <div style="height: 25%">
                  <div class="container-cord" style="height: 100%">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tizhong"
                      />
                      <span class="text-group_3">干体重</span>
                    </div>
                  </div>
                  <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;" class="grid-container" >
                <div
                  style="
                    height: 75%;
                    text-align: center;
                    font-weight: 600;
                    font-size: 50px;
                    color: #333333;
                  "
                  class="grid-container"
                >
                    {{ Number(deviceData.干体重).toFixed(1) }}
                  </div>
                </div>
                <div class="item">
                  <div style="height: 25%;">
                    <div class="container-cord" style="height: 100%;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tizhong"
                <div style="height: 25%">
                  <div class="container-cord" style="height: 100%">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tizhong"
                      />
                      <span class="text-group_3" >透前称重</span>
                    </div>
                  </div>
                  <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;" class="grid-container" >
                <div
                  style="
                    height: 75%;
                    text-align: center;
                    font-weight: 600;
                    font-size: 50px;
                    color: #333333;
                  "
                  class="grid-container"
                >
                    {{ Number(deviceData.透前称重).toFixed(1) }}
                  </div>
                </div>
                <div class="item">
                  <div style="height: 25%;">
                    <div class="container-cord" style="height: 100%;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tizhong"
                <div style="height: 25%">
                  <div class="container-cord" style="height: 100%">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tizhong"
                      />
                      <span class="text-group_3">上次透后体重</span>
                    </div>
                  </div>
                  <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;" class="grid-container" >
                <div
                  style="
                    height: 75%;
                    text-align: center;
                    font-weight: 600;
                    font-size: 50px;
                    color: #333333;
                  "
                  class="grid-container"
                >
                    {{ Number(deviceData.上次透后称重).toFixed(1) }}
                  </div>
                </div>
                <div class="item">
                  <div style="height: 25%;">
                    <div class="container-cord" style="height: 100%;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tizhong"
                <div style="height: 25%">
                  <div class="container-cord" style="height: 100%">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tizhong"
                      />
                      <span class="text-group_3" >体重增长</span>
                    </div>
                  </div>
                  <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;" class="grid-container" >
                    <template v-if="deviceData.透前称重&&deviceData.干体重&&Number(deviceData.透前称重)>0">
                <div
                  style="
                    height: 75%;
                    text-align: center;
                    font-weight: 600;
                    font-size: 50px;
                    color: #333333;
                  "
                  class="grid-container"
                >
                  <template
                    v-if="
                      deviceData.透前称重 &&
                      deviceData.干体重 &&
                      Number(deviceData.透前称重) > 0
                    "
                  >
                      +{{
                        Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
                      }}
                    </template>
                  </div>
                </div>
                <div class="item">
                  <div style="height: 25%;">
                    <div class="container-cord" style="height: 100%;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tizhong"
                <div style="height: 25%">
                  <div class="container-cord" style="height: 100%">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tizhong"
                      />
                      <span class="text-group_3">增长率</span>
                    </div>
                  </div>
                  <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;" class="grid-container" >
                <div
                  style="
                    height: 75%;
                    text-align: center;
                    font-weight: 600;
                    font-size: 50px;
                    color: #333333;
                  "
                  class="grid-container"
                >
                    <template v-if="deviceData.透前称重&&deviceData.干体重">
                      {{ deviceData.体重增长率 }}%
                    </template>
                  </div>
                </div>
            </div>
            </div>
            <!-- 已签到 -->
            <div v-else  style="height: 80%;width: 100%; padding-right: 0px;">
              <div style="height: 100%; ">
                <el-row style="height: 30%; padding: 0px 0px 10px 0px;" :gutter="20">
          <div v-else style="height: 80%; width: 100%; padding-right: 0px">
            <div style="height: 100%">
              <el-row
                style="height: 30%; padding: 0px 0px 10px 0px"
                :gutter="20"
              >
                  <el-col :span="12">
                    <div class="container-cord" style="height: 100%;padding-left: 20PX;background-color: #FFFFFF;border-radius: 8px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                  <div
                    class="container-cord"
                    style="
                      height: 100%;
                      padding-left: 20px;
                      background-color: #ffffff;
                      border-radius: 8px;
                    "
                  >
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">平均脱水量:</span>
                      <span style="color: #333333;font-weight: 600;font-size: 25px;">{{deviceData.最近平均脱水量}}L</span>
                      <span style="color: #777777;font-size: 25px;"> </span>
                    <span
                      style="color: #333333; font-weight: 600; font-size: 25px"
                      >{{ deviceData.最近平均脱水量 }}L</span
                    >
                    <span style="color: #777777; font-size: 25px"> </span>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="container-cord" style="height: 100%;padding-left: 20PX;background-color: #FFFFFF;border-radius: 8px;">
                        <img style="width: 25px;margin-right: 10px;"
                  <div
                    class="container-cord"
                    style="
                      height: 100%;
                      padding-left: 20px;
                      background-color: #ffffff;
                      border-radius: 8px;
                    "
                  >
                    <img
                      style="width: 25px; margin-right: 10px"
                          referrerpolicy="no-referrer"
                          :src="tsl"
                        />
                        <span class="text-group_3">最大脱水量: </span>
                        <span style="color: #333333;font-weight: 600;font-size: 25px;">{{deviceData.最近最大脱水量}}L</span>
                        <span style="color: #777777;font-size: 25px;">({{deviceData.最近最大脱水量日期}})</span>
                    <span
                      style="color: #333333; font-weight: 600; font-size: 25px"
                      >{{ deviceData.最近最大脱水量 }}L</span
                    >
                    <span style="color: #777777; font-size: 25px"
                      >({{ deviceData.最近最大脱水量日期 }})</span
                    >
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height:70%;padding: 0px 0px 10px 0px;"  :gutter="20">
                  <el-col :span="6" style="height: 100%; ">
                    <div class="item" style="height: 100%;padding-bottom: 10px; gap: 10px; /* 设置所有方向的间距为10px */">
                      <div style="height: 25%;">
                        <div class="container-cord" style="height: 100%;">
                          <img style="width: 25px;" referrerpolicy="no-referrer" :src="xinlv"
              <el-row
                style="height: 70%; padding: 0px 0px 10px 0px"
                :gutter="20"
              >
                <el-col :span="6" style="height: 100%">
                  <div
                    class="item"
                    style="
                      height: 100%;
                      padding-bottom: 10px;
                      gap: 10px; /* 设置所有方向的间距为10px */
                    "
                  >
                    <div style="height: 25%">
                      <div class="container-cord" style="height: 100%">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="xinlv"
                          />
                          <span class="text-group_3">异常指标</span>
                        </div>
                      </div>
                      <div style="height: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #333333;color: #CA7070;"  >
                        <el-row style="font-size: 30px;">
                          <el-col v-for="(row,index) in deviceData.异常检验指标" :span="12" style="font-weight: 700;" :key="index">
                            {{getItemName(row?.项目名称)}} <b v-if="row?.结果标记==='g'" style="font-weight:bold">⬆</b> <b v-else style="font-weight:bold">⬇</b>
                    <div
                      style="
                        height: 75%;
                        text-align: center;
                        font-weight: 600;
                        font-size: 50px;
                        color: #333333;
                        color: #ca7070;
                      "
                    >
                      <el-row style="font-size: 30px">
                        <el-col
                          v-for="(row, index) in deviceData.异常检验指标"
                          :span="12"
                          style="font-weight: 700"
                          :key="index"
                        >
                          {{ getItemName(row?.项目名称) }}
                          <b
                            v-if="row?.结果标记 === 'g'"
                            style="font-weight: bold"
                            >⬆</b
                          >
                          <b v-else style="font-weight: bold">⬇</b>
                          </el-col> 
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="18" style="height: 100%;width: 100%;">
                    <div class="item" style="height: 100%;padding-bottom: 10px; /* 设置所有方向的间距为10px */">
                      <div style="height: 100%;">
                <el-col :span="18" style="height: 100%; width: 100%">
                  <div
                    class="item"
                    style="
                      height: 100%;
                      padding-bottom: 10px; /* 设置所有方向的间距为10px */
                    "
                  >
                    <div style="height: 100%">
                        <div 
                            v-if="Number(deviceData.透析状态) > 1"
                              :ref="'echartsDiv' + deviceData.设备编号"
                              style="height: 97%"
                            >
                          </div>
                      ></div>
                      </div>
                    </div>
                  </el-col>
@@ -488,83 +900,187 @@
              </div>
            </div>
            <!-- 消息提示一直显示最新的消息 -->
            <div  style="height: 20%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 30px;">
              <div style="height: 100%;">
                <div class="container-cord" style="height: 100%;padding-left: 20PX;">
                  <img style="width: 25px;"
          <div
            style="
              height: 20%;
              width: 100%;
              background: #fef0e1;
              border-radius: 8px;
              font-size: 30px;
            "
          >
            <div style="height: 100%">
              <div
                class="container-cord"
                style="height: 100%; padding-left: 20px"
              >
                <img
                  style="width: 25px"
                    referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
                  />
                  
                  <span class="text-group_3" v-if="isinitXy&&Number(deviceData.透析状态) >= 1" >
                    最近一次, 高压:{{床旁血压计.sbp}},低压: {{床旁血压计.dbp}}, 心率: {{床旁血压计.pulseRate}}
                <span
                  class="text-group_3"
                  v-if="isinitXy && Number(deviceData.透析状态) >= 1"
                >
                  最近一次, 高压:{{ 床旁血压计.sbp }},低压:
                  {{ 床旁血压计.dbp }}, 心率: {{ 床旁血压计.pulseRate }}
                  </span>
                  <span class="text-group_3" v-else>暂无通知消息哦</span>
                </div>
              </div>
            </div>
          </el-row>
        </div>
         <!-- 未签到 -->
        <div class="mowei" style="height: 39%;" v-if="Number(deviceData.透析状态) ===0">
          <el-row gutter="20" style="height: 100%;padding:10px 20px 20px 20px;">
            <el-col :span="12" style="height: 100%;">
              <div class="container-weiqiandao" style="height: 100%;" >
                <div class="item-weiqiandao" style="background: #FFEDD2;border-radius: 8px;">
                  <div class="container-cord" style="height: 30px;">
                    <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
      <div
        class="mowei"
        style="height: 39%"
        v-if="Number(deviceData.透析状态) === 0"
      >
        <el-row gutter="20" style="height: 100%; padding: 10px 20px 20px 20px">
          <el-col :span="12" style="height: 100%">
            <div class="container-weiqiandao" style="height: 100%">
              <div
                class="item-weiqiandao"
                style="background: #ffedd2; border-radius: 8px"
              >
                <div class="container-cord" style="height: 30px">
                  <img
                    style="width: 25px"
                    referrerpolicy="no-referrer"
                    :src="tsl"
                    />
                    <span class="text-group_3">抗凝剂</span>
                  </div>
                  <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                    <div class="grid-container-text" style="color: #A78718;" v-for="(item,index) in deviceData.抗凝剂列表" :style="{fontSize:deviceData.抗凝剂列表.length>1?'22px':'28px'}" :key="index">
                <div
                  class="grid-container"
                  style="height: calc(100% - 30px); width: 100%"
                >
                  <div
                    class="grid-container-text"
                    style="color: #a78718"
                    v-for="(item, index) in deviceData.抗凝剂列表"
                    :style="{
                      fontSize:
                        deviceData.抗凝剂列表.length > 1 ? '22px' : '28px',
                    }"
                    :key="index"
                  >
                      <div class="left-div">{{item.name}}</div>
                      <div class="right-div">{{item.数量}}{{item.单位}}</div>
                    </div>
                  </div>
                </div>
                <div class="item-weiqiandao" style="background: #FFEDD2;border-radius: 8px;">
                  <div class="container-cord" style="height: 30px;">
                    <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
              <div
                class="item-weiqiandao"
                style="background: #ffedd2; border-radius: 8px"
              >
                <div class="container-cord" style="height: 30px">
                  <img
                    style="width: 25px"
                    referrerpolicy="no-referrer"
                    :src="tsl"
                    />
                    <span class="text-group_3">穿刺针</span>
                  </div>
                  <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 25px;">
                    <div class="grid-container-text" style="color: #A78718;" v-for="(item,index) in deviceData.穿刺针列表" :style="{fontSize:deviceData.穿刺针列表.length>1?'22px':'28px'}" :key="index">
                <div
                  class="grid-container"
                  style="
                    height: calc(100% - 30px);
                    width: 100%;
                    font-size: 25px;
                  "
                >
                  <div
                    class="grid-container-text"
                    style="color: #a78718"
                    v-for="(item, index) in deviceData.穿刺针列表"
                    :style="{
                      fontSize:
                        deviceData.穿刺针列表.length > 1 ? '22px' : '28px',
                    }"
                    :key="index"
                  >
                      <div class="left-div">{{item.name}}</div>
                      <div class="right-div">{{item.数量}}支</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="container-weiqiandao" style="height: 100%;" >
                <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;">
                  <div class="container-cord" style="height: 30px;">
                    <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
            <div class="container-weiqiandao" style="height: 100%">
              <div
                class="item-weiqiandao"
                style="background: #e5eeff; border-radius: 8px"
              >
                <div class="container-cord" style="height: 30px">
                  <img
                    style="width: 25px"
                    referrerpolicy="no-referrer"
                    :src="tsl"
                    />
                    <span class="text-group_3">一次性使用透析护理包</span>
                  </div>
                  <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 28px;">
                    <div class="grid-container-text" style="color: #1D77BD;" v-for="(item,index) in deviceData.护理包列表" :style="{fontSize:deviceData.护理包列表.length>1?'22px':'28px'}"  :key="index">
                <div
                  class="grid-container"
                  style="
                    height: calc(100% - 30px);
                    width: 100%;
                    font-size: 28px;
                  "
                >
                  <div
                    class="grid-container-text"
                    style="color: #1d77bd"
                    v-for="(item, index) in deviceData.护理包列表"
                    :style="{
                      fontSize:
                        deviceData.护理包列表.length > 1 ? '22px' : '28px',
                    }"
                    :key="index"
                  >
                      <div class="left-div">{{item.name}}</div>
                      <div class="right-div">{{item.数量}}{{item.单位}}</div>
                    </div>
                  </div>
                </div>
                <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;">
                  <div class="container-cord" style="height: 30px;">
                    <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
              <div
                class="item-weiqiandao"
                style="background: #e5eeff; border-radius: 8px"
              >
                <div class="container-cord" style="height: 30px">
                  <img
                    style="width: 25px"
                    referrerpolicy="no-referrer"
                    :src="tsl"
                    />
                    <span class="text-group_3">血管通路</span>
                  </div>
                  <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 28px;">
                    <div class="grid-container-text" style="color: #1D77BD;" v-for="(item,index) in deviceData.血管通路列表" :style="{fontSize:deviceData.血管通路列表.length>1?'22px':'28px'}" :key="index">
                <div
                  class="grid-container"
                  style="
                    height: calc(100% - 30px);
                    width: 100%;
                    font-size: 28px;
                  "
                >
                  <div
                    class="grid-container-text"
                    style="color: #1d77bd"
                    v-for="(item, index) in deviceData.血管通路列表"
                    :style="{
                      fontSize:
                        deviceData.血管通路列表.length > 1 ? '22px' : '28px',
                    }"
                    :key="index"
                  >
                      <div class="left-div">{{item.类型}}</div>
                      <div class="right-div" style="width: 200px;">{{item.位置}}</div>
                    <div class="right-div" style="width: 200px">
                      {{ item.位置 }}
                    </div>
                    </div>
                  </div>
                </div>
@@ -573,8 +1089,8 @@
          </el-row>
        </div>
      </div>
      <div v-else style="height: 100%;">
        <div class="toubu" style="height: 11%;">
    <div v-else style="height: 100%">
      <div class="toubu" style="height: 11%">
            <el-row
                style="
                font-weight: 900;
@@ -593,24 +1109,52 @@
                >{{ deviceData.设备名称 }}
                </span>
             
                <div style="
          <div
            style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  display: grid;
                  padding: 5px;
                  font-size: 300%;
                  height: 100%
                ">
                  <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>
              height: 100%;
            "
          >
            <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 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 style="display: inline-block">
                  <img
                    @click="centerDialogVisible = true"
                    :src="shezhi"
                    alt="Image 2"
                  />
                        </span>
                    </div>
                </div>
@@ -618,75 +1162,133 @@
            </el-row>
        </div>
        <template v-if="!ispaiban">
          <div  class="chongjian" style="height: 50%;">
            <el-row :gutter="10" style="height: 100%; padding:10px 20px 0px 20px;">
              <el-col :span="7" style="height: 100%;" ref="targetDiv">
        <div class="chongjian" style="height: 50%">
          <el-row
            :gutter="10"
            style="height: 100%; padding: 10px 20px 0px 20px"
          >
            <el-col :span="7" style="height: 100%" ref="targetDiv">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #FFEDD2;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="item-weiqiandao"
                  style="background: #ffedd2; border-radius: 8px; height: 100%"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">抗凝剂</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="scrollable-container"  style="height: 100%;">
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div class="scrollable-container" style="height: 100%">
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.抗凝剂" :key="index">
                        <li
                          v-for="(item, index) in 当前客户耗材集合.抗凝剂"
                          :key="index"
                        >
                              {{item}}
                            </li>
                          </ul>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="10" style="height: 100%;">
            <el-col :span="10" style="height: 100%">
                <div class="cont_parent">
                  <div class="cont_child" style="background: #E5EEFF;border-radius: 8px;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="cont_child"
                  style="background: #e5eeff; border-radius: 8px"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">透析方案</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="container-body-text" style="color: #3A75B8;">
                        <template v-for="(item,index) in 当前客户耗材集合.透析模式" :key="index">
                          <span> {{item}}</span><template v-if="当前客户耗材集合.透析模式.length>index+1">,</template>
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div class="container-body-text" style="color: #3a75b8">
                      <template
                        v-for="(item, index) in 当前客户耗材集合.透析模式"
                        :key="index"
                      >
                        <span> {{ item }}</span
                        ><template
                          v-if="当前客户耗材集合.透析模式.length > index + 1"
                          >,</template
                        >
                        </template>
                      </div>
                    </div>
                  </div>
                  <div class="cont_child" style="background: #D9F0E2;border-radius: 8px;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="cont_child"
                  style="background: #d9f0e2; border-radius: 8px"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">一次性血液透析体外循环管路</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                        <div class="scrollable-container"   style="height: 100%;color: #3AB859;">
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div
                      class="scrollable-container"
                      style="height: 100%; color: #3ab859"
                    >
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.管路" :key="index">
                        <li
                          v-for="(item, index) in 当前客户耗材集合.管路"
                          :key="index"
                        >
                              {{item}}
                            </li>
                          </ul>
                        </div>
                    </div>
                  </div>
                  <div class="cont_child" style="background: #F9DEDE;border-radius: 8px;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="cont_child"
                  style="background: #f9dede; border-radius: 8px"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">一次性使用透析护理包</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="scrollable-container"  style="height: 100%;color: #902D2D;">
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div
                      class="scrollable-container"
                      style="height: 100%; color: #902d2d"
                    >
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.护理包" :key="index">
                        <li
                          v-for="(item, index) in 当前客户耗材集合.护理包"
                          :key="index"
                        >
                              {{item}}
                            </li>
                          </ul>
                        </div>
                    </div>
@@ -745,21 +1347,35 @@
                  </div>
                </div> -->
              </el-col>
              <el-col :span="7" style="height: 100%;">
            <el-col :span="7" style="height: 100%">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #EFE5FF;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="item-weiqiandao"
                  style="background: #efe5ff; border-radius: 8px; height: 100%"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">一次性使用内瘘穿刺针</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="scrollable-container"  style="height: 100%;color: #A78718;">
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div
                      class="scrollable-container"
                      style="height: 100%; color: #a78718"
                    >
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.穿刺针" :key="index">
                        <li
                          v-for="(item, index) in 当前客户耗材集合.穿刺针"
                          :key="index"
                        >
                              {{item}}
                            </li>
                          </ul>
                        </div>
                    </div>
@@ -768,23 +1384,42 @@
              </el-col>
            </el-row>
          </div>
          <div  class="mowei" style="height: 39%;">
            <el-row :gutter="20" style="height: 100%;padding:10px 20px 10px 20px;">
        <div class="mowei" style="height: 39%">
          <el-row
            :gutter="20"
            style="height: 100%; padding: 10px 20px 10px 20px"
          >
              <el-col :span="12" style="height: 100%">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #F6F5FA;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="item-weiqiandao"
                  style="background: #f6f5fa; border-radius: 8px; height: 100%"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">血液透析器</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div  style="height: 100%;color: #333333;font-weight: 600;">
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div style="height: 100%; color: #333333; font-weight: 600">
                          <div>
                            <span v-for="(item,index) in 当前客户耗材集合.透析器" :key="index" style="margin-right: 10px">
                              {{item}}<template v-if="当前客户耗材集合.透析器.length>index+1">,</template>
                        <span
                          v-for="(item, index) in 当前客户耗材集合.透析器"
                          :key="index"
                          style="margin-right: 10px"
                        >
                          {{ item
                          }}<template
                            v-if="当前客户耗材集合.透析器.length > index + 1"
                            >,</template
                          >
                            </span>
                          </div>
                        </div>
                    </div>
@@ -793,19 +1428,35 @@
              </el-col>
              <el-col :span="12">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #F6F5FA;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                <div
                  class="item-weiqiandao"
                  style="background: #f6f5fa; border-radius: 8px; height: 100%"
                >
                  <div class="container-cord" style="height: 30px">
                    <img
                      style="width: 25px"
                      referrerpolicy="no-referrer"
                      :src="tsl"
                      />
                      <span class="text-group_3">血液透析滤过器</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div style="height: 100%;color: #333333;font-weight: 600;">
                  <div
                    class="grid-container"
                    style="height: calc(100% - 30px); width: 100%"
                  >
                    <div style="height: 100%; color: #333333; font-weight: 600">
                        <div>
                            <span v-for="(item,index) in 当前客户耗材集合.滤过器" :key="index" style="margin-right: 10px">
                              {{item}}<template v-if="当前客户耗材集合.滤过器.length>index+1">,</template>
                        <span
                          v-for="(item, index) in 当前客户耗材集合.滤过器"
                          :key="index"
                          style="margin-right: 10px"
                        >
                          {{ item
                          }}<template
                            v-if="当前客户耗材集合.滤过器.length > index + 1"
                            >,</template
                          >
                            </span>
                          </div>
                        </div>
                    </div>
@@ -816,20 +1467,32 @@
          </div>
        </template>
        <template v-else>
          <div   style="height: 89%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 100px;">
          <div style="height: 100%;">
            <div class="container-cord" style="height: 100%;padding-left: 20PX;">
              <img style="width: 100px;"
        <div
          style="
            height: 89%;
            width: 100%;
            background: #fef0e1;
            border-radius: 8px;
            font-size: 100px;
          "
        >
          <div style="height: 100%">
            <div
              class="container-cord"
              style="height: 100%; padding-left: 20px"
            >
              <img
                style="width: 100px"
                referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
              />
              <span class="text-group_3" style="font-size: 100px;">等待患者排班</span>
              <span class="text-group_3" style="font-size: 100px"
                >等待患者排班</span
              >
            </div>
          </div>
        </div>
        </template>
      </div>
      <el-dialog
      :show-close="false"
@@ -838,9 +1501,14 @@
      title="提示"
      v-model="centerDialogVisible"
      width="500px"
      center>
      center
    >
      <span>
        <el-form label-position="left" label-width="auto" style="max-width: 600px">
        <el-form
          label-position="left"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-space fill>
            <el-alert type="绑定设备" show-icon :closable="false">
              <p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
@@ -852,39 +1520,58 @@
          </el-space>
        </el-form>
        <div>
          <input type="file" pattern="选取二维码" accept="image/*" @change="onFileChange"  />
          <input
            type="file"
            pattern="选取二维码"
            accept="image/*"
            @change="onFileChange"
          />
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSet">
            确认
          </el-button>
          <el-button type="success" @click="shuaxin">
            刷新
          </el-button>
          <el-button type="primary" @click="saveSet"> 确认 </el-button>
          <el-button type="success" @click="shuaxin"> 刷新 </el-button>
        </div>
      </template>
      </el-dialog>
      <el-dialog v-model="centerDialogVisible2" custom-class="custom-dialog" :show-close="false" width="600" center>
    <el-dialog
      v-model="centerDialogVisible2"
      custom-class="custom-dialog"
      :show-close="false"
      width="700"
      center
    >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 style="color: white;" :id="titleId" :class="titleClass">定时任务设置</h4>
          <h4 style="color: white" :id="titleId" :class="titleClass">
            定时任务设置
          </h4>
          </div>
        </template>
        <span>
            <div>
              <el-form  :model="formInline"  label-width="100px">
        <div style="margin-right: 10px">
          <el-form :model="formInline" size="large" label-width="100px">
                <el-form-item label="时间设定:">
                  <el-col :span="10">
                    <el-input-number style="width: 100%;" v-model="formInline.xiaoshi" :min="0" :max="10" />
                <el-input-number
                  style="width: 100%"
                  v-model="formInline.xiaoshi"
                  :min="0"
                  :max="10"
                />
                  </el-col>
                  <el-col :span="2" class="text-center">
                    <span class="text-gray-500">小时 </span>
                  </el-col>
                  <el-col :span="10">
                    <el-input-number style="width: 100%;" v-model="formInline.fenzhong" :min="1" :max="59" />
                <el-input-number
                  style="width: 100%"
                  v-model="formInline.fenzhong"
                  :min="1"
                  :max="59"
                />
                  </el-col>
                  <el-col :span="2" class="text-center">
                    <span class="text-gray-500">分钟 </span>
@@ -892,7 +1579,8 @@
                </el-form-item>
               
                <el-form-item label="提醒内容:">
                  <el-input v-if="!formInline.selectOpen"
              <el-input
                v-if="!formInline.selectOpen"
                      v-model="formInline.alertText"
                      style="max-width: 600px"
                      placeholder="请填写报警内容"
@@ -900,44 +1588,54 @@
                      class="input-with-select"
                    >
                  </el-input>
                  <el-select v-else  v-model="formInline.selectType" style="width: 100%;" placeholder="选择内容" >
              <el-select
                v-else
                v-model="formInline.selectType"
                style="width: 100%"
                placeholder="选择内容"
              >
                      <el-option label="测血压" value="测血压" />
                      <el-option label="开超滤" value="开超滤" />
                      <el-option label="给药" value="给药" />
                  </el-select>
                </el-form-item>
                <el-form-item label="定型文:">
                  <el-switch v-model="formInline.selectOpen" />
                </el-form-item>
              </el-form>
            </div>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="centerDialogVisible2=false">取消</el-button>
            <el-button type="primary" @click="setDingshi">
              确定
            </el-button>
          <el-button type="primary" @click="setDingshi"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="centerDialogVisible3" custom-class="custom-dialog" :show-close="false" width="700" center>
    <el-dialog
      v-model="centerDialogVisible3"
      custom-class="custom-dialog"
      :show-close="false"
      width="800"
      center
    >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 style="color: white;" :id="titleId" :class="titleClass">定时任务提醒</h4>
          <h4 style="color: white" :id="titleId" :class="titleClass">
            定时任务提醒
          </h4>
          </div>
        </template>
        <span>
            <div style="text-align: center;font-size: 30px">
        <div style="text-align: center; font-size: 35px">
              <h3>{{倒计时告警文本}}</h3>
            </div>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="" @click="centerDialogVisible3=false">取消</el-button>
          <el-button type="" @click="centerDialogVisible3 = false"
            >取消</el-button
          >
            <el-button type="primary"  @click="centerDialogVisible3=false">
              确定
            </el-button>
@@ -945,33 +1643,47 @@
        </template>
      </el-dialog>
    </div>  
  </template>
  <script lang="ts" setup>
  import { BrowserMultiFormatReader, NotFoundException, ChecksumException, FormatException } from '@zxing/library';
import {
  BrowserMultiFormatReader,
  NotFoundException,
  ChecksumException,
  FormatException,
} from "@zxing/library";
  import TQS88 from "../img/TQS88.png";
  import shezhi from '../img/shezhi.png'
  import dingshi from '../img/dingshi.png'
  import xinlv from '../img/xinlv.png'
  import tsl from '../img/tsl.png'
  import zlms from '../img/zlms.png'
  import txztimg from '../img/txzt.png'
  import txq from '../img/txq.png'
  import sjjd from '../img/sjjd.png'
  import cljd from '../img/cljd.png'
  import tizhong from '../img/tizhong.png'
  import {EventSourcePolyfill} from 'event-source-polyfill';
  import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, onUnmounted, onBeforeUnmount  } from "vue";
  import { Local } from '../utils/storage';
import shezhi from "../img/shezhi.png";
import dingshi from "../img/dingshi.png";
import xinlv from "../img/xinlv.png";
import tsl from "../img/tsl.png";
import zlms from "../img/zlms.png";
import txztimg from "../img/txzt.png";
import txq from "../img/txq.png";
import sjjd from "../img/sjjd.png";
import cljd from "../img/cljd.png";
import tizhong from "../img/tizhong.png";
import { EventSourcePolyfill } from "event-source-polyfill";
import {
  computed,
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  ref,
  watch,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import { Local } from "../utils/storage";
  import * as echarts from "echarts";
  import { jgTime4 } from "../utils/formatTime";
  import {setTimeoutAlert} from '../utils/httpApi'
import { setTimeoutAlert } from "../utils/httpApi";
// 语音播报
import Speech from "speak-tts";
const speech = ref(null);
  const { proxy } = getCurrentInstance() as any;
  // 在需要使用的组件中引入
  import { ChatDotSquare } from '@element-plus/icons-vue';
  const ispaiban=ref(false)
import { ChatDotSquare } from "@element-plus/icons-vue";
const ispaiban = ref(false);
  import { ElLoading, ElMessage } from "element-plus";
  // 连接服务器
  const source = ref<EventSourcePolyfill | null>(null);
@@ -980,27 +1692,26 @@
   // sse状态
  const readyState = ref({ key: 0, value: "正在链接中" });
  const deviceCode=ref('')
  const shishiTime=ref(new Date())
const deviceCode = ref("");
const shishiTime = ref(new Date());
  //有没有推送过血压如果有 就一直会显示血压数据
  const isinitXy=ref(false)
const isinitXy = ref(false);
  const 床旁血压计=ref({
    date_time:'',
    sbp:'178',
    pulseRate:'11',
    dbp:'111',
    zuihouTime:new Date()
  })
  date_time: "",
  sbp: "178",
  pulseRate: "11",
  dbp: "111",
  zuihouTime: new Date(),
});
  const formInline=ref({
    xiaoshi:0,
    fenzhong:5,
    alertText:'',
    selectType:'',
    selectOpen:false
  })
  alertText: "",
  selectType: "",
  selectOpen: false,
});
  
  const 当前客户耗材集合=ref({})
const 当前客户耗材集合 = ref({});
  const deviceData = ref({
    iot_传输时间: "2025-01-10 19:15:24",
    iot_当前脱水量: 2.04,
@@ -1053,8 +1764,7 @@
    设备号: "23",
    设备名称: "页面初始化中,请耐心等待!",
    设备序列号: "B97AP002",
    设备状态列表: [
    ],
  设备状态列表: [],
    设备编号: "DEVICE9195233509924hOHL",
    超滤速度过快: null,
    跨膜压列表: "2753,33,37",
@@ -1168,8 +1878,8 @@
  const video = ref<HTMLVideoElement | null>(null);
  // 识别数据流
  let stream: MediaStream | null = null;
  const centerDialogVisible2=ref(false)
  const centerDialogVisible3=ref(false)
const centerDialogVisible2 = ref(false);
const centerDialogVisible3 = ref(false);
  const centerDialogVisible = ref(false);
  const background = ref("");
  const txztText = ref("");
@@ -1179,24 +1889,22 @@
  const ddd = ref("");
  const isShowXY=computed(()=>{
    if(床旁血压计.value.zuihouTime>shishiTime.value){
      return true
    return true;
    }else{
      return false
    return false;
    }
  })
  watch(() =>isShowXY.value,
});
watch(
  () => isShowXY.value,
      ()=>{
        if(床旁血压计.value.zuihouTime>shishiTime.value){
        }else{
          setTimeout(()=>{
            initTupiao()
          },500)
        initTupiao();
      }, 500);
        }
      }
  )
);
  const txzt: any = computed(() => {
    return deviceData.value.透析状态;
  });
@@ -1205,40 +1913,48 @@
    return false;
  });
  // 打开定时任务设置
  const dingshiShow=(()=>{
const dingshiShow = () => {
    formInline.value={
      xiaoshi:0,
      fenzhong:5,
      alertText:'',
      selectType:'',
      selectOpen:false
    }
    centerDialogVisible2.value=true
  })
    alertText: "",
    selectType: "",
    selectOpen: false,
  };
  centerDialogVisible2.value = true;
};
  // 保存定时任务
  const setDingshi=(()=>{
    console.log('--------------------')
    console.log(formInline.value)
    console.log(deviceCode.value)
    const minutes=formInline.value.xiaoshi*60+formInline.value.fenzhong
    let alertText=''
const setDingshi = () => {
  if (!formInline.value.alertText) {
    ElMessage.warning("设置报警消息不能为空");
    return true;
  }
  console.log("--------------------");
  console.log(formInline.value);
  console.log(deviceCode.value);
  const minutes = formInline.value.xiaoshi * 60 + formInline.value.fenzhong;
  let alertText = "";
    if(formInline.value.selectOpen){
      alertText=formInline.value.selectType
    alertText = formInline.value.selectType;
    }else{
      alertText=formInline.value.alertText
    alertText = formInline.value.alertText;
    }
    setTimeoutAlert({deviceCode:deviceCode.value,minutes:minutes,alertText:alertText}).then(res=>{
      console.log(res.data)
      if(res.data==='OK'){
        倒计时.value=minutes*60
        centerDialogVisible2.value=false
  setTimeoutAlert({
    deviceCode: deviceCode.value,
    minutes: minutes,
    alertText: alertText,
  }).then((res) => {
    console.log(res.data);
    if (res.data === "OK") {
      倒计时.value = minutes * 60;
      centerDialogVisible2.value = false;
      }else{
        ElMessage.warning(res.message)
      ElMessage.warning(res.message);
      }
    })
  });
    // centerDialogVisible2.value=false
  })
};
  // 状态颜色
  const zhuangtaiColor = computed(() => {
    const list = deviceData.value.设备状态列表;
@@ -1315,7 +2031,10 @@
  });
  // 透前血压告警
  const tqXygj = computed(() => {
    if (deviceData.value.透前血压_伸缩压 > 160 || deviceData.value.透前血压_伸缩压 < 90) {
  if (
    deviceData.value.透前血压_伸缩压 > 160 ||
    deviceData.value.透前血压_伸缩压 < 90
  ) {
      return true;
    } else {
      return false;
@@ -1384,36 +2103,39 @@
  let seconds = totalSeconds % 60;
  // 补零函数
  const pad = (num) => String(num).padStart(2, '0');
  const pad = (num) => String(num).padStart(2, "0");
  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}
};
  const 倒计时=ref(0)
  const 倒计时显示=ref('00:00:00')
  const 倒计时告警文本=ref('')
const 倒计时 = ref(0);
const 倒计时显示 = ref("00:00:00");
const 倒计时告警文本 = ref("");
  // 定时器回调函数
  const updateTime = () => {
    if(倒计时.value>0){
      倒计时显示.value = formatSecondsToTime(倒计时.value)
      倒计时.value--
    倒计时显示.value = formatSecondsToTime(倒计时.value);
    倒计时.value--;
    }else{
      倒计时显示.value = ''
    倒计时显示.value = "";
    }
  };
  let intervalId = null;
  onMounted(() => {
    let devcieCode=Local.get('devcieCode')
  let devcieCode = Local.get("devcieCode");
    if(devcieCode){
      deviceCode.value=devcieCode
      sourceInit()
    deviceCode.value = devcieCode;
    sourceInit();
    }else{
      centerDialogVisible.value=true
    centerDialogVisible.value = true;
    }
    intervalId = setInterval(updateTime, 1000);
  speech.value = new Speech();
  speech.value?.setLanguage("zh-CN");
  speech.value?.init().then(() => {
    console.log("语音初 始化成功");
    // test()
  });
  });
  // 在组件卸载前清除定时器,防止内存泄漏
  onBeforeUnmount(() => {
@@ -1422,24 +2144,23 @@
    }
  });
  const saveSet=()=>{
    if(deviceCode.value){
      centerDialogVisible.value=false
      Local.set('devcieCode',deviceCode.value)
      sourceInit()
    centerDialogVisible.value = false;
    Local.set("devcieCode", deviceCode.value);
    sourceInit();
      window.location.reload();
    }else{
      ElMessage.warning('请先输入设备编号')
    ElMessage.warning("请先输入设备编号");
    }
  }
};
  /**
   * 刷新页面
   */
  const shuaxin=()=>{
    window.location.reload();
  }
};
  const onFileChange=async(event: Event)=> {
    const inputElement = event.target as HTMLInputElement;
    if (!inputElement.files || inputElement.files.length === 0) return;
@@ -1448,15 +2169,19 @@
    const reader = new FileReader();
    reader.onload = async (e) => {
      if (e.target && typeof e.target.result === 'string') {
    if (e.target && typeof e.target.result === "string") {
        try {
          const codeReader = new BrowserMultiFormatReader();
          const result = await codeReader.decodeFromImage(undefined, e.target.result, { tryHarder: true });
        const result = await codeReader.decodeFromImage(
          undefined,
          e.target.result,
          { tryHarder: true }
        );
          // const result = await codeReader.decodeFromImage(undefined, e.target.result);
          deviceCode.value = result.text;
          ElMessage.success('识别成功')
        ElMessage.success("识别成功");
        } catch (err) {
          console.error('Error details:', err);
        console.error("Error details:", err);
          if (err instanceof NotFoundException) {
            ElMessage.error("未找到二维码");
          } else if (err instanceof ChecksumException) {
@@ -1472,13 +2197,12 @@
    };
    reader.readAsDataURL(file);
  }
  const shaoma=()=>{
  }
};
const shaoma = () => {};
  watch(
    () => deviceData.value.设备变化,
    () => {
      console.log(deviceData.value.设备名称,'子组件变量')
    console.log(deviceData.value.设备名称, "子组件变量");
      setTimeout(() => {
        if (!xiaoduzhuangti.value) {
          initTupiao();
@@ -1486,13 +2210,13 @@
      }, 500);
    }
  );
  const 数据初始化=ref(false)
const 数据初始化 = ref(false);
  //创建链接对象
  const creatSource = () => {
    // http://testbs.ihemodialysis.com/sse/sseEvent
    // const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
    数据初始化.value=true
      const test='https://backend.ihemodialysis.com/sse/sseEvent/'
  数据初始化.value = true;
  const test = "https://backend.ihemodialysis.com/sse/sseEvent/";
      const stateArr = [
      { key: 0, value: "正在链接中" },
      { key: 1, value: "已经链接并且可以通讯" },
@@ -1500,45 +2224,46 @@
      ];
      try {
      source.value=  new EventSourcePolyfill(`${test}${deviceCode.value}`,{
          heartbeatTimeout:60000
      heartbeatTimeout: 60000,
      });
      source.value.onopen = (e) => {
          console.log('链接成功')
          ElMessage.success('链接服务成功')
      console.log("链接成功");
      ElMessage.success("链接服务成功");
          readyState.value = stateArr[source.value?.readyState ?? 0];
          console.log(e)
      console.log(e);
      };
      source.value.onerror = (e) => {
          console.log(e,'异常情况-----')
          ElMessage.warning('链接服务失败,请耐心等待重连。。')
      console.log(e, "异常情况-----");
      ElMessage.warning("链接服务失败,请耐心等待重连。。");
          readyState.value = stateArr[source.value?.readyState ?? 0];
      };
      source.value.onmessage = (e) => {
          console.log('收到消息',e.data)
      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
        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)
          const datax = msg.slice(beng, end + 1);
          const dataBody = JSON.parse(datax);
          console.log(dataBody);
          console.log(dataBody);
                if(dataBody.倒计时?.提醒文本){
                  倒计时.value=dataBody.倒计时?.设定提醒倒计时
                  console.log('设置了倒计时值',倒计时.value)
            倒计时.value = dataBody.倒计时?.设定提醒倒计时;
            console.log("设置了倒计时值", 倒计时.value);
                  if(倒计时.value<=0&&倒计时.value>=-60){
                    centerDialogVisible3.value=true
                    倒计时告警文本.value=dataBody.倒计时?.提醒文本
                    关闭弹框警告()
              centerDialogVisible3.value = true;
              倒计时告警文本.value = dataBody.倒计时?.提醒文本;
              关闭弹框警告();
              播报警告文本(倒计时告警文本.value);
                  }else if(倒计时.value<=-60){
                    centerDialogVisible3.value=false
              centerDialogVisible3.value = false;
                  }
                }
                if(dataBody.推送类型==='床旁血压计'){
                  isinitXy.value=true
          if (dataBody.推送类型 === "床旁血压计") {
            isinitXy.value = true;
                  let date = new Date();
                  date.setMinutes(date.getMinutes() + 5);
                  床旁血压计.value={
@@ -1546,33 +2271,31 @@
                    sbp:dataBody?.床旁血压结果?.sbp,
                    pulseRate:dataBody?.床旁血压结果?.pulseRate,
                    dbp:dataBody?.床旁血压结果?.dbp,
                    zuihouTime:date
                  }
              zuihouTime: date,
            };
                  setTimeout(()=>{
                    initTupiao()
                  },500)
                }else if(dataBody.推送类型==='中央监控大屏信息'){
                  数据初始化.value=false
              initTupiao();
            }, 500);
          } else if (dataBody.推送类型 === "中央监控大屏信息") {
            数据初始化.value = false;
                  // loading.close()
                  console.log(Date.now() + 'DEV')
            console.log(Date.now() + "DEV");
                  if(dataBody?.透析状态){
                    deviceData.value=dataBody?.透析状态
              deviceData.value = dataBody?.透析状态;
                  }else{
                    deviceData.value.设备名称=dataBody.IOT信息.床号
                    deviceData.value.患者姓名=''
              deviceData.value.设备名称 = dataBody.IOT信息.床号;
              deviceData.value.患者姓名 = "";
                    if(dataBody?.使用耗材字典){
                      当前客户耗材集合.value=dataBody?.使用耗材字典
                当前客户耗材集合.value = dataBody?.使用耗材字典;
                    }
                  }
                  
                  deviceData.value.设备变化=Date.now() + 'DEV'
            deviceData.value.设备变化 = Date.now() + "DEV";
                  deviceData.value.属性历史列表=dataBody?.IOT信息?.属性历史列表
                  console.log(deviceData.value.设备变化)
                  deviceData.value.设备状态列表=dataBody.IOT信息.状态列表
            deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表;
            console.log(deviceData.value.设备变化);
            deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表;
                }
              }
          }
      };
@@ -1584,40 +2307,64 @@
    let date = new Date();
    date.setMinutes(date.getMinutes() + 0.1);
    床旁血压计.value={
      date_time:'2023-32-3232',
      sbp:'117',
      pulseRate:'77',
      dbp:'99',
      zuihouTime:date
    }
    isinitXy.value=true
    date_time: "2023-32-3232",
    sbp: "117",
    pulseRate: "77",
    dbp: "99",
    zuihouTime: date,
  };
  isinitXy.value = true;
    setTimeout(()=>{
      initTupiao()
    },500)
  }
    initTupiao();
  }, 500);
};
  const 关闭弹框警告=()=>{
    setTimeout(function() {
        console.log("30秒已过,关闭报警设置弹框。");
        centerDialogVisible3.value=false
    centerDialogVisible3.value = false;
    }, 30000); // 30000 毫秒 = 30 秒
};
const 播报警告文本 = (tex) => {
  if (centerDialogVisible3.value) {
    speech.value
      .speak({
        text: tex,
        listeners: {
          //开始播放
          onstart: () => {
            console.log("开始播报");
          },
          //判断播放是否完毕
          onend: () => {
            console.log("播报完成");
          },
          //恢复播放
          onresume: () => {
            console.log("Resume utterance");
          },
        },
      })
      .then(() => {
        播报警告文本(tex);
      });
  }
};
  //初始化
  const sourceInit = () => {
      console.log('初始化see')
  console.log("初始化see");
      if (!source.value|| source.value.readyState === 2) {
      creatSource();
      }
  };
  //  关闭 WebSocket
  const closeSource = () => {
      console.log('断开')
  console.log("断开");
      source.value?.close();
  };
  // 取消订阅
  onBeforeMount(()=>{
      closeSource()
  })
  closeSource();
});
  const initTupiao = () => {
    if (deviceData.value.患者姓名 !== "") {
      const seriesData = [
@@ -1826,7 +2573,10 @@
          );
  
          const option = {
            backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          backgroundColor:
            床旁血压计.value.zuihouTime > shishiTime.value
              ? "#ffffff"
              : textcolor.value,
            tooltip: {
              trigger: "axis",
            },
@@ -1857,11 +2607,14 @@
          };
          myChart.setOption(option);
        } catch (e) {
          console.log("异常", proxy.$refs["echartsDiv" + deviceData.value.设备编号]);
        console.log(
          "异常",
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        );
        }
      }
    } else if (deviceData.value.患者姓名 === "") {
      console.log('2222')
    console.log("2222");
      const tbdata1 = [];
      const tbdata2 = [];
      const tbdata3 = [];
@@ -1896,7 +2649,7 @@
        });
      }
      try {
        console.log('渲染设备')
      console.log("渲染设备");
        const myChart1 = echarts.init(
          proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
        );
@@ -2040,42 +2793,33 @@
  };
  const getItemName=(name:string)=>{
    if(name){
      if(name==='血红蛋白测定'){
        return 'Hgb '
      }
      else if(name==='铁蛋白'){
        return 'Fer '
      }
      else if(name==='白蛋白'){
        return 'Alb '
      }
      else if(name==='血清铁蛋白'){
        return 'SF '
      }
      else if(name==='钙'){
        return 'Ga '
      }
      else if(name==='钾'){
        return 'K '
      }
      else if(name==='无机磷'){
        return 'pi '
      }
      else if(name==='甲状旁腺激素'){
        return 'PTH '
    if (name === "血红蛋白测定") {
      return "Hgb ";
    } else if (name === "铁蛋白") {
      return "Fer ";
    } else if (name === "白蛋白") {
      return "Alb ";
    } else if (name === "血清铁蛋白") {
      return "SF ";
    } else if (name === "钙") {
      return "Ga ";
    } else if (name === "钾") {
      return "K ";
    } else if (name === "无机磷") {
      return "pi ";
    } else if (name === "甲状旁腺激素") {
      return "PTH ";
      }else{
        return name
      return name;
      }
    }else{
      return ''
    return "";
    }
  }
};
  </script>
<style lang="less" scoped>
  .divice{
    background: #DAE5EC;
  background: #dae5ec;
    font-size: 100%;
    border-radius: 4px;
    border: solid 1px;
@@ -2085,7 +2829,7 @@
    .toubu{
        // padding-left: 20px;
        width: 100%;
        background: #70A3DD;
    background: #70a3dd;
        border-radius: 4px 0px 16px 16px;
    }
    .chongjian{
@@ -2103,7 +2847,6 @@
            box-sizing: border-box;
            border-radius: 8px;
            margin-bottom: 10px;
        }
    }
    .mowei{
@@ -2121,7 +2864,6 @@
            box-sizing: border-box;
            border-radius: 8px;
            margin-bottom: 10px;
        }
    }
  }
@@ -2206,7 +2948,6 @@
  flex: 1; /* 确保每个子 div 占据相同的高度 */
  background-color: lightblue; /* 可以根据需要调整背景颜色 */
  padding: 10px; /* 添加内边距以美化显示 */
}
.container-body{
    display: flex;
@@ -2220,7 +2961,9 @@
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
  width: 100%; /* 确保宽度为父容器的100% */
  font-weight: 600;font-size: 50px;color: #D58E56;
  font-weight: 600;
  font-size: 50px;
  color: #d58e56;
}
.grid-container-text{
    display: flex;
@@ -2242,8 +2985,6 @@
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  /* 设置你的div占据整个高度,并在需要时显示滚动条 */
.scrollable-container {