单应用项目,可以创建很多独立工具类页面 ,不用登录 初始化的页面
zhangchen
2025-07-01 c7ec2fc769d64eecf04d1f2786c07e40ac945d0b
src/views/deviceWindoes2.vue
@@ -2,7 +2,7 @@
  <div class="divice">
    <!-- {{数据初始化}} -->
    <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名">
      <div class="toubu" style="height: 11%">
      <div id="toubu" class="toubu" style="height: 11%">
        <el-row
          v-if="deviceData.患者姓名 !== ''"
          style="
@@ -24,20 +24,31 @@
          <span
            class="grid-container"
            @click="initTupiao"
            style="margin-left: 5%; font-size: 350%; height: 100%"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.患者姓名 }}
          </span>
          <span
            class="grid-container"
            v-if="deviceData.年龄 !== null"
            style="margin-left: 5%; font-size: 300%; height: 100%"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.年龄 }}岁</span
          >
          <span
            class="grid-container"
            style="margin-left: 5%; font-size: 300%; height: 100%"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.性别 }}</span
          >
          <span
            class="grid-container"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ patientSourceAndCode }}</span
          >
          <span
          v-if="deviceData.签到号"
            class="grid-container"
            style="margin-left: 2%; font-size: 200%; height: 100%"
            >{{ deviceData.签到号 }}</span
          >
          <div
@@ -79,280 +90,30 @@
          </div>
        </el-row>
      </div>
      <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%">
              <div
                :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
                style="
                  background-size: 100% 100%;
                  border-radius: 5px;
                  /* margin-bottom: 1%; */
                  height: 100%;
                  width: 100%;
                "
              ></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">
      <el-carousel v-if="contentHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
        <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }">
          <div :style="{ height: (contentHeight - 10) + 'px' }">
            <div class="chongjian" style="height: 50%;">
            <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%">
                  <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"
                    >
                      {{ 床旁血压计.sbp }} / {{ 床旁血压计.dbp }}
                    </div>
                  </div>
                    :style="{ backgroundImage: `url(${deviceData.患者头像})` }"
                    style="
                      background-size: 100% 100%;
                      border-radius: 5px;
                      /* margin-bottom: 1%; */
                      height: 100%;
                      width: 100%;
                    "
                  ></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"
                        />
                        <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"
                    >
                      {{ 床旁血压计.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%">
                  <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"
                        />
                        <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>
                    </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="left-div">{{ item.name }}</div>
                          <div class="right-div">
                            {{ item.数量 }}{{ item.单位 }}
                          </div>
                        </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"
                        />
                        <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="left-div">{{ item.name }}</div>
                          <div class="right-div">{{ item.数量 }}支</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <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"
                        />
                        <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"
                        >
                          {{ 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"
                        />
                        <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="left-div">{{ item.name }}</div>
                          <div class="right-div">
                            {{ item.数量 }}{{ item.单位 }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </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 class="itemboy" style="height: 100%" :span="7">
              </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%"
@@ -362,9 +123,9 @@
                            <img
                              style="width: 25px"
                              referrerpolicy="no-referrer"
                              :src="zlms"
                              :src="tsl"
                            />
                            <span class="text-group_3">治疗模式</span>
                            <span class="text-group_3">血压</span>
                          </div>
                        </div>
                        <div
@@ -372,32 +133,170 @@
                            height: 75%;
                            text-align: center;
                            font-weight: 600;
                            font-size: 50px;
                            color: #d58e56;
                            font-size: 65px;
                            color: #70a3dd;
                          "
                          class="grid-container"
                        >
                          <div>
                            <span
                              style="font-size: 30px"
                              v-if="deviceData.透析方案 === 'HDF'"
                            >
                              {{
                                deviceData?.置换方式 === "前置换" ? "前" : "后"
                              }}</span
                            >
                            {{ deviceData.透析方案 }}
                          </div>
                          {{ 床旁血压计.sbp }} / {{ 床旁血压计.dbp }}
                        </div>
                      </div>
                    </el-col>
                    <el-col class="itemboy" style="height: 100%" :span="7">
                    </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"
                            />
                            <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"
                        >
                          {{ 床旁血压计.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%">
                      <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"
                            />
                            <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>
                        </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="left-div">{{ item.name }}</div>
                              <div class="right-div">
                                {{ item.数量 }}{{ item.单位 }}
                              </div>
                            </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"
                            />
                            <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="left-div">{{ item.name }}</div>
                              <div class="right-div">{{ item.数量 }}支</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <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"
@@ -405,449 +304,363 @@
                            />
                            <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"
                        >
                          {{ 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"
                            />
                            <span class="text-group_3">人工肾</span>
                          <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
                          style="
                            height: 85%;
                            font-weight: 600;
                            font-size: 50px;
                            color: #8079cb;
                          "
                          class="scrollable-text"
                          class="item-weiqiandao"
                          style="background: #efe5ff; border-radius: 8px"
                        >
                          {{ deviceData.透析器 }}
                          <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="left-div">{{ item.name }}</div>
                              <div class="right-div">
                                {{ item.数量 }}{{ item.单位 }}
                              </div>
                            </div>
                          </div>
                        </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"
                      />
                      <span class="text-group_3">异常指标</span>
                </el-col>
              </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 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"
                                />
                                <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>
                                <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"
                                />
                                <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"
                            >
                              {{ 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"
                                />
                                <span class="text-group_3">人工肾</span>
                              </div>
                            </div>
                            <div
                              style="
                                height: 85%;
                                font-weight: 600;
                                font-size: 50px;
                                color: #8079cb;
                              "
                              class="scrollable-text"
                            >
                              {{ deviceData.透析器 }}
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  </el-row>
                  <!-- 签到未签到状态 -->
                  <div
                    style="
                      height: 75%;
                      text-align: center;
                      font-weight: 600;
                      font-size: 50px;
                      color: #333333;
                      color: #ca7070;
                    "
                    class="container"
                    v-if="Number(deviceData.透析状态) < 1"
                    style="height: 50%"
                  >
                    <el-row style="font-size: 30px">
                      <el-col
                        v-for="(row, index) in deviceData.异常检验指标"
                        :span="8"
                        style="font-weight: 700"
                        :key="index"
                    <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;
                              color: #333333;
                          color: #ca7070;
                          overflow: hidden;
                          overflow-y: auto;
                        "
                      >
                        {{ getItemName(row?.项目名称) }}
                        <b
                          v-if="row?.结果标记 === 'g'"
                          style="font-weight: bold"
                          >⬆</b
                        <el-row style="font-size: 20px; overflow: hidden;">
                          <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"
                          />
                          <span class="text-group_3">处方脱水量</span>
                        </div>
                      </div>
                      <div
                        style="
                          height: 75%;
                          text-align: center;
                          font-weight: 600;
                          font-size: 25px;
                          color: #8079cb;
                        "
                        class="grid-container"
                      >
                        <span v-if="deviceData.处方脱水量">
                          {{ deviceData.处方脱水量 }} L</span
                        >
                        <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"
                      />
                      <span class="text-group_3">处方脱水量</span>
                      </div>
                    </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>
                </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"
                      />
                      <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>
                      <span style="color: #303133">{{
                        jgTime4(deviceData.iot_透析时间)
                      }}</span
                      >/<span
                        >{{ deviceData.透析处方的时长_小时 }}:{{
                          deviceData.透析处方的时长_分钟
                        }}</span
                      >
                    </div>
                    <div>
                      <el-progress
                        :text-inside="true"
                        :stroke-width="15"
                        :show-text="false"
                        color="#70A3DD"
                        :percentage="
                          (Number(deviceData.iot_透析时间) /
                            (Number(deviceData.透析处方的时长) * 60)) *
                          100
                  <!-- 透析中状态 -->
                  <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;
                        "
                        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"
                      />
                      <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>
                      <span style="color: #303133">{{
                        Number(deviceData.iot_当前脱水量).toFixed(1)
                      }}</span
                      >/<span>{{
                        Number(deviceData.iot_脱水目标量).toFixed(1)
                      }}</span
                      ><span style="font-size: 80%"
                        >({{ deviceData.iot_脱水速率 }})</span
                        class="grid-container"
                      >
                        <div>
                          <span style="color: #303133">{{
                            jgTime4(deviceData.iot_透析时间)
                          }}</span
                          >/<span
                            >{{ deviceData.透析处方的时长_小时 }}:{{
                              deviceData.透析处方的时长_分钟
                            }}</span
                          >
                        </div>
                        <div>
                          <el-progress
                            :text-inside="true"
                            :stroke-width="15"
                            :show-text="false"
                            color="#70A3DD"
                            :percentage="
                              (Number(deviceData.iot_透析时间) /
                                (Number(deviceData.透析处方的时长) * 60)) *
                              100
                            "
                            status="success"
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <el-progress
                        :text-inside="true"
                        :stroke-width="15"
                        :show-text="false"
                        color="#70CAAE"
                        :percentage="
                          (Number(deviceData.iot_当前脱水量) /
                            Number(deviceData.处方脱水量)) *
                          100
                    <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>
                          <span style="color: #303133">{{
                            Number(deviceData.iot_当前脱水量).toFixed(1)
                          }}</span
                          >/<span>{{
                            Number(deviceData.iot_脱水目标量).toFixed(1)
                          }}</span
                          ><span style="font-size: 80%"
                            >({{ deviceData.iot_脱水速率 }})</span
                          >
                        </div>
                        <div>
                          <el-progress
                            :text-inside="true"
                            :stroke-width="15"
                            :show-text="false"
                            color="#70CAAE"
                            :percentage="
                              (Number(deviceData.iot_当前脱水量) /
                                Number(deviceData.处方脱水量)) *
                              100
                            "
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </template>
        </el-row>
      </div>
      <!-- 治疗中 -->
      <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 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"
                    />
                    <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"
                >
                  {{ 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"
                    />
                    <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"
                >
                  {{ 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"
                    />
                    <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"
                >
                  {{ 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"
                    />
                    <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
                    "
                  >
                    +{{
                      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"
                    />
                    <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.干体重">
                    {{ deviceData.体重增长率 }}%
                  </template>
                </div>
              </div>
            </div>
                </el-col>
              </template>
            </el-row>
          </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
            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%"
              >
                <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"
                    />
                    <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>
                  </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"
                      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
                    >
                  </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 class="container">
                  <div class="item">
                    <div style="height: 25%">
                      <div class="container-cord" style="height: 100%">
                        <img
                          style="width: 25px"
                          referrerpolicy="no-referrer"
                          :src="xinlv"
                          :src="tizhong"
                        />
                        <span class="text-group_3">异常指标</span>
                        <span class="text-group_3">干体重</span>
                      </div>
                    </div>
                    <div
@@ -857,237 +670,447 @@
                        font-weight: 600;
                        font-size: 50px;
                        color: #333333;
                        color: #ca7070;
                      "
                      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"
                        />
                        <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"
                    >
                      {{ 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"
                        />
                        <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"
                    >
                      {{ 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"
                        />
                        <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
                        "
                      >
                        +{{
                          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"
                        />
                        <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.干体重">
                        {{ 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"
                  >
                    <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"
                        />
                        <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>
                      </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"
                          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
                        >
                      </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"
                            />
                            <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;
                            overflow: hidden;
                            overflow-y: auto;
                          "
                        >
                          <el-row style="font-size: 20px">
                            <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%">
                          <div
                            v-if="Number(deviceData.透析状态) > 1"
                            :ref="'echartsDiv' + deviceData.设备编号"
                            style="height: 97%"
                          ></div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </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"
                      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>
                    <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"
                      />
                      <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="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"
                      />
                      <span class="text-group_3">穿刺针</span>
                    </div>
                    <div
                      class="grid-container"
                      style="
                        height: calc(100% - 30px);
                        width: 100%;
                        font-size: 25px;
                      "
                    >
                      <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%">
                      <div
                        v-if="Number(deviceData.透析状态) > 1"
                        :ref="'echartsDiv' + deviceData.设备编号"
                        style="height: 97%"
                      ></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </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"
                  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>
                <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"
                  />
                  <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="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"
                  />
                  <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="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"
                  />
                  <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="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"
                  />
                  <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="left-div">{{ item.类型 }}</div>
                    <div class="right-div" style="width: 200px">
                      {{ item.位置 }}
                        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>
              </div>
            </div>
          </el-col>
        </el-row>
      </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"
                      />
                      <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="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"
                      />
                      <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="left-div">{{ item.类型 }}</div>
                        <div class="right-div" style="width: 200px">
                          {{ item.位置 }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          </div>
      </el-carousel-item>
      <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }">
        <DoctorAdvice :height="(contentHeight - 10)" :list="deviceData.透析单医嘱列表" />
      </el-carousel-item>
    </el-carousel>
    </div>
    <div v-else style="height: 100%">
      <div class="toubu" style="height: 11%">
@@ -1531,7 +1554,8 @@
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button @click="test">测试播报</el-button>
          <!-- <el-button @click="test">测试播报</el-button> -->
          <!-- <el-button @click="toggleAlarm">测试报警</el-button> -->
          <el-button type="primary" @click="saveSet"> 确认 </el-button>
          <el-button type="success" @click="shuaxin"> 刷新 </el-button>
        </div>
@@ -1598,6 +1622,9 @@
                <el-option label="测血压" value="测血压" />
                <el-option label="开超滤" value="开超滤" />
                <el-option label="给药" value="给药" />
                <el-option label="调电导度" value="调电导度" />
                <el-option label="调血流量" value="调血流量" />
                <el-option label="冲管" value="冲管" />
              </el-select>
            </el-form-item>
            <el-form-item label="定型文:">
@@ -1664,6 +1691,14 @@
import cljd from "../img/cljd.png";
import tizhong from "../img/tizhong.png";
import { EventSourcePolyfill } from "event-source-polyfill";
import alertbaojin from "../assets/alert.wav";
import cxybaojing from "../assets/cxy.mp3";
import gybaojing from "../assets/gy.mp3";
import kclbaojing from "../assets/kcl.mp3";
import tdddbaojing from "../assets/tzddd.mp3";
import tzxllbaojing from "../assets/tzxll.mp3";
import cgbaojing from "../assets/cg.mp3";
import {
  computed,
  getCurrentInstance,
@@ -1673,14 +1708,93 @@
  watch,
  onUnmounted,
  onBeforeUnmount,
  nextTick
} from "vue";
import { Local } from "../utils/storage";
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
import { setTimeoutAlert } from "../utils/httpApi";
// 语音播报
import Speech from "speak-tts";
const speech = ref(null);
import DoctorAdvice from '../components/doctorAdvice/index.vue';
// 创建 Audio 对象,指向 public 目录下的音频文件
const alarmSound = new Audio(alertbaojin); //一般报警声音
const alarmSoundCXY = new Audio(cxybaojing); //测血压报警
alarmSoundCXY.loop = true; // 循环播放
const alarmSoundGY = new Audio(gybaojing); //给药报警
alarmSoundGY.loop = true; // 循环播放
const alarmSoundKCL = new Audio(kclbaojing); //开超滤报警
alarmSoundKCL.loop = true; // 循环播放
const alarmSoundTZDDD = new Audio(tdddbaojing); //调整电导度
alarmSoundTZDDD.loop = true; // 循环播放
const alarmSoundTZxll = new Audio(tzxllbaojing); //调整电导度
alarmSoundTZxll.loop = true; // 循环播放
const alarmSoundCG = new Audio(cgbaojing); //冲管
alarmSoundCG.loop = true; // 循环播放
const isHeightSet = ref(false);
// 控制播放状态的变量
const isPlaying = ref(false);
// 切换播放/暂停的方法
const toggleAlarm = () => {
  console.log('-------------')
  console.log('看看是打开还是暂停')
  if (isPlaying.value) {
    if (倒计时告警文本.value === "测血压") {
      alarmSoundCXY.pause();
    } else if (倒计时告警文本.value === "冲管") {
      alarmSoundCG.pause();
    } else if (倒计时告警文本.value === "开超滤") {
      alarmSoundKCL.pause();
    } else if (倒计时告警文本.value === "给药") {
      alarmSoundGY.pause();
    } else if (倒计时告警文本.value === "调电导度") {
      alarmSoundTZDDD.pause();
    } else if (倒计时告警文本.value === "调血流量") {
      alarmSoundTZxll.pause();
    } else {
      alarmSound.pause();
    }
  } else {
    if (倒计时告警文本.value === "测血压") {
      alarmSoundCXY.currentTime = 0; // 从头开始
      alarmSoundCXY.play().catch((err) => {
        console.error("播放失败:", err);
      });
    } else if (倒计时告警文本.value === "冲管") {
      alarmSoundCG.currentTime = 0; // 从头开始
      alarmSoundCG.play().catch((err) => {
        console.error("播放失败:", err);
      });
    } else if (倒计时告警文本.value === "开超滤") {
      alarmSoundKCL.currentTime = 0; // 从头开始
      alarmSoundKCL.play().catch((err) => {
        console.error("播放失败:", err);
      });
    } else if (倒计时告警文本.value === "给药") {
      alarmSoundGY.currentTime = 0; // 从头开始
      alarmSoundGY.play().catch((err) => {
        console.error("播放失败:", err);
      });
    } else if (倒计时告警文本.value === "调电导度") {
      alarmSoundTZDDD.currentTime = 0; // 从头开始
      alarmSoundTZDDD.play().catch((err) => {
        console.error("播放失败:", err);
      });
    } else if (倒计时告警文本.value === "调血流量") {
      alarmSoundTZxll.currentTime = 0; // 从头开始
      alarmSoundTZxll.play().catch((err) => {
        console.error("播放失败:", err);
      });
    } else {
      alarmSound.currentTime = 0; // 从头开始播放
      alarmSound.play().catch((err) => {
        console.error("播放失败:", err);
      });
    }
  }
  isPlaying.value = !isPlaying.value;
};
const { proxy } = getCurrentInstance() as any;
// 在需要使用的组件中引入
import { ChatDotSquare } from "@element-plus/icons-vue";
@@ -1714,6 +1828,10 @@
const 当前客户耗材集合 = ref({});
const deviceData = ref({
  患者来源: null,
  患者门诊住院号: '',
  签到号: '',
  透析单医嘱列表: [],
  iot_传输时间: "2025-01-10 19:15:24",
  iot_当前脱水量: 2.04,
  iot_脱水目标量: 3.3,
@@ -1888,6 +2006,7 @@
const wd = ref("");
const ls = ref("");
const ddd = ref("");
const contentHeight = ref(0); // 中间内容的高度
const isShowXY = computed(() => {
  if (床旁血压计.value.zuihouTime > shishiTime.value) {
    return true;
@@ -1895,14 +2014,28 @@
    return false;
  }
});
const patientSourceAndCode = computed(() => {
  let res = '';
  if (deviceData.value.患者来源 === null) {
    return ''
  } else {
    res = deviceData.value.患者来源 === 1 ? '住院号:' : '门诊号:';
    res += deviceData.value.患者门诊住院号;
  }
  return res;
})
watch(
  () => isShowXY.value,
  () => {
    if (床旁血压计.value.zuihouTime > shishiTime.value) {
    } else {
      setTimeout(() => {
        initTupiao();
      }, 500);
            nextTick(() => {
              setTimeout(() => {
                initTupiao();
              }, 500);
            });
    }
  }
);
@@ -1926,7 +2059,6 @@
};
// 保存定时任务
const setDingshi = () => {
  console.log("--------------------");
  console.log(formInline.value);
  console.log(deviceCode.value);
@@ -1937,7 +2069,7 @@
  } else {
    alertText = formInline.value.alertText;
  }
  if (alertText==='') {
  if (alertText === "") {
    ElMessage.warning("设置报警消息不能为空");
    return true;
  }
@@ -1950,7 +2082,7 @@
    if (res.data === "OK") {
      倒计时.value = minutes * 60;
      centerDialogVisible2.value = false;
      倒计时告警文本.value = alertText
      倒计时告警文本.value = alertText;
    } else {
      ElMessage.warning(res.message);
    }
@@ -2116,23 +2248,55 @@
const 倒计时告警文本 = ref("");
// 定时器回调函数
const updateTime = () => {
  倒计时.value--;
  if (倒计时.value > 0) {
    倒计时显示.value = formatSecondsToTime(倒计时.value);
    倒计时.value--;
  } else if(倒计时.value!==-100) {
  } else if (倒计时.value > -5) {
    倒计时显示.value = "";
    // 只有没触发的时候才触发他
    if(centerDialogVisible3.value===false){
      centerDialogVisible3.value = true;
      关闭弹框警告();
      播报警告文本(倒计时告警文本.value);
    }
  }else{
     if (centerDialogVisible3.value === false) {
       centerDialogVisible3.value = true;
       关闭弹框警告();
      //  toggleAlarm();
     }
  } else {
    倒计时显示.value = "";
  }
};
let intervalId = null;
watch(()=>centerDialogVisible3.value,()=>{
  if(centerDialogVisible3.value===false){
    alarmSound.pause();
    alarmSoundCXY.pause();
    alarmSoundKCL.pause();
    alarmSoundGY.pause();
    alarmSoundTZDDD.pause();
    alarmSoundTZxll.pause();
    alarmSoundCG.pause();
  }else{
    if (倒计时告警文本.value === "测血压") {
      alarmSoundCXY.play();
    }
    else if (倒计时告警文本.value === "冲管") {
      alarmSoundCG.play();
    }
    else if (倒计时告警文本.value === "开超滤") {
      alarmSoundKCL.play();
    }
    else if (倒计时告警文本.value === "给药") {
      alarmSoundGY.play();
    }
    else if (倒计时告警文本.value === "调电导度") {
      alarmSoundTZDDD.play();
    }
    else if (倒计时告警文本.value === "调血流量") {
      alarmSoundTZxll.play();
    }
    else {
      alarmSound.play();
    }
  }
})
onMounted(() => {
  let devcieCode = Local.get("devcieCode");
  if (devcieCode) {
@@ -2142,12 +2306,12 @@
    centerDialogVisible.value = true;
  }
  intervalId = setInterval(updateTime, 1000);
  speech.value = new Speech();
  speech.value?.setLanguage("zh-CN");
  speech.value?.init().then(() => {
    console.log("语音初 始化成功");
    // test()
  });
  const width = window.innerWidth;
const height = window.innerHeight;
console.log('可视区域宽度:', width);
console.log('可视区域高度:', height);
});
// 在组件卸载前清除定时器,防止内存泄漏
onBeforeUnmount(() => {
@@ -2219,16 +2383,43 @@
      if (!xiaoduzhuangti.value) {
        initTupiao();
      }
    }, 500);
    }, 1000);
  }
);
watch(() => deviceData.value.患者姓名, (newVal: string, oldVal: string) => {
  console.log("患者姓名变化:", newVal)
  if (newVal && oldVal !== newVal) {
    isHeightSet.value = false // 重置标识
    contentHeight.value = 0;  // 清空高度,强制更新 el-carousel
    setTimeout(() => {
      if (isHeightSet.value) return // 如果已设置过就不重复执行
      const windowHeight = window.innerHeight
      const toubu = document.getElementById('toubu')
      const toubuHeight = toubu ? toubu.offsetHeight : 0
      const newHeight = windowHeight - toubuHeight
      if (newHeight !== contentHeight.value) {
        contentHeight.value = newHeight
        console.log("更新 contentHeight.value: ", contentHeight.value)
      }
      isHeightSet.value = true
    }, 500)
  }
})
const 数据初始化 = ref(false);
//创建链接对象
const creatSource = () => {
  // http://testbs.ihemodialysis.com/sse/sseEvent
  // const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
  数据初始化.value = true;
  const test = "https://backend.ihemodialysis.com/sse/sseEvent/";
  const test = import.meta.env.VITE_SSE_BASE_URL;
  const stateArr = [
    { key: 0, value: "正在链接中" },
    { key: 1, value: "已经链接并且可以通讯" },
@@ -2265,11 +2456,15 @@
          if (dataBody.倒计时?.提醒文本) {
            倒计时.value = dataBody.倒计时?.设定提醒倒计时;
            console.log("设置了倒计时值", 倒计时.value);
            if (倒计时.value <= 0 && 倒计时.value >= -60&& centerDialogVisible3.value===false) {
            if (
              倒计时.value <= 0 &&
              倒计时.value >= -60 &&
              centerDialogVisible3.value === false
            ) {
              centerDialogVisible3.value = true;
              倒计时告警文本.value = dataBody.倒计时?.提醒文本;
              关闭弹框警告();
              播报警告文本(倒计时告警文本.value);
              // toggleAlarm();
            } else if (倒计时.value <= -60) {
              centerDialogVisible3.value = false;
            }
@@ -2285,15 +2480,34 @@
              dbp: dataBody?.床旁血压结果?.dbp,
              zuihouTime: date,
            };
            setTimeout(() => {
              initTupiao();
            }, 500);
            nextTick(() => {
              setTimeout(() => {
                initTupiao();
              }, 500);
            });
          } else if (dataBody.推送类型 === "中央监控大屏信息") {
            数据初始化.value = false;
            // loading.close()
            console.log(Date.now() + "DEV");
            if (dataBody?.透析状态) {
              deviceData.value = dataBody?.透析状态;
              if ('透析单医嘱列表' in dataBody.透析状态) {
                deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表;
              } else {
                deviceData.value.透析单医嘱列表 = []
              }
              if ('患者来源' in dataBody.透析状态) {
                deviceData.value.患者来源 = dataBody.透析状态.患者来源;
              } else {
                deviceData.value.患者来源 = null
              }
              if ('患者门诊住院号' in dataBody.透析状态) {
                deviceData.value.患者门诊住院号 = dataBody.透析状态.患者门诊住院号;
              } else {
                deviceData.value.患者门诊住院号 = ''
              }
            } else {
              deviceData.value.设备名称 = dataBody.IOT信息.床号;
              deviceData.value.患者姓名 = "";
@@ -2334,55 +2548,9 @@
  setTimeout(function () {
    console.log("30秒已过,关闭报警设置弹框。");
    centerDialogVisible3.value = false;
    倒计时.value=-100
    倒计时.value = -100;
  }, 30000); // 30000 毫秒 = 30 秒
};
const 播报警告文本 = (tex) => {
  if (centerDialogVisible3.value) {
    console.log(centerDialogVisible3.value,'播报')
    speech.value
      .speak({
        text: tex,
        listeners: {
          //开始播放
          onstart: () => {
            console.log("开始播报");
          },
          //判断播放是否完毕
          onend: () => {
            console.log("播报完成");
          },
          //恢复播放
          onresume: () => {
            console.log("Resume utterance");
          },
        },
      })
      .then(() => {
        播报警告文本(tex);
      });
  }
};
const test=()=>{
  speech.value
      .speak({
        text: '你好,我现在在测试播报内容',
        listeners: {
          //开始播放
          onstart: () => {
            console.log("开始播报");
          },
          //判断播放是否完毕
          onend: () => {
            console.log("播报完成");
          },
          //恢复播放
          onresume: () => {
            console.log("Resume utterance");
          },
        },
      })
}
//初始化
const sourceInit = () => {
  console.log("初始化see");
@@ -2543,7 +2711,7 @@
            label: { fontSize: 20, color: "#409EFF" },
          });
          seriesData[2].markPoint.data.push({
            name: "上机血压",
            name: "上机压",
            value: e.脉搏,
            xAxis: index,
            yAxis: e.脉搏,
@@ -2557,9 +2725,14 @@
        xAxisData.push(1);
      }
      try {
        const myChart = echarts.init(
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        );
        let myChart = null;
        if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
          myChart = echarts.init(
            proxy.$refs["echartsDiv" + deviceData.value.设备编号]
          );
        }
        const option = {
          // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
          backgroundColor: "#ffffff",
@@ -2596,15 +2769,22 @@
          },
          series: seriesData,
        };
        myChart.setOption(option);
        if (myChart) {
          myChart.setOption(option);
        }
      } catch (e) {
        console.log("图标渲染异常异常");
      }
    } else {
      try {
        const myChart = echarts.init(
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
        );
        let myChart = null;
        if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
          myChart = echarts.init(
            proxy.$refs["echartsDiv" + deviceData.value.设备编号]
          );
        }
        const option = {
          backgroundColor:
@@ -2639,8 +2819,11 @@
          },
          series: [],
        };
        myChart.setOption(option);
        if (myChart) {
          myChart.setOption(option);
        }
      } catch (e) {
        console.log("图表渲染异常异常: ", e);
        console.log(
          "异常",
          proxy.$refs["echartsDiv" + deviceData.value.设备编号]
@@ -2648,7 +2831,6 @@
      }
    }
  } else if (deviceData.value.患者姓名 === "") {
    console.log("2222");
    const tbdata1 = [];
    const tbdata2 = [];
    const tbdata3 = [];
@@ -2684,15 +2866,28 @@
    }
    try {
      console.log("渲染设备");
      const myChart1 = echarts.init(
        proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
      );
      const myChart2 = echarts.init(
        proxy.$refs["echartsDivls" + deviceData.value.设备编号]
      );
      const myChart3 = echarts.init(
        proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
      );
      let myChart1 = null;
      let myChart2 = null;
      let myChart3 = null;
      if (proxy.$refs["echartsDivwd" + deviceData.value.设备编号]) {
        myChart1 = echarts.init(
          proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
        );
      }
      if (proxy.$refs["echartsDivls" + deviceData.value.设备编号]) {
          myChart2 = echarts.init(
            proxy.$refs["echartsDivls" + deviceData.value.设备编号]
          );
      }
      if (proxy.$refs["echartsDivddd" + deviceData.value.设备编号]) {
        myChart3 = echarts.init(
          proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
        );
      }
      const option1 = {
        // backgroundColor: textcolor.value,
        tooltip: {
@@ -2815,9 +3010,15 @@
          },
        ],
      };
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      if (myChart1) {
        myChart1.setOption(option1);
      }
      if (myChart2) {
        myChart2.setOption(option2);
      }
      if (myChart3) {
        myChart3.setOption(option3);
      }
    } catch (e) {
      console.log("图标渲染异常异常");
    }
@@ -2860,6 +3061,7 @@
  width: 100%;
  height: 100%;
  border: 1px solid coral;
  user-select: none;
  .toubu {
    // padding-left: 20px;
    width: 100%;