From 1dafbcf3148590cdf7de8f3694664888109afcda Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期二, 01 七月 2025 15:31:30 +0800
Subject: [PATCH] ID1743-修改完成
---
src/views/deviceWindoes2.vue | 2186 +++++++++++-----------
src/components/doctorAdvice/index.vue | 6
src/views/a.vue | 3284 +++++++++++++++++++++++++++++++++++
3 files changed, 4,386 insertions(+), 1,090 deletions(-)
diff --git a/src/components/doctorAdvice/index.vue b/src/components/doctorAdvice/index.vue
index 7568f9e..2bb8729 100644
--- a/src/components/doctorAdvice/index.vue
+++ b/src/components/doctorAdvice/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="doctor_advice_container" :style="{ height: height + 'px' }">
+ <div class="doctor_advice_container" :style="{ height: height }">
<div class="doctor_advice_list">
<div
v-for="(item, index) in drugOrders"
@@ -32,8 +32,8 @@
props: {
// 容器的高度
height: {
- type: Number,
- default: 0,
+ type: String,
+ default: '100%',
},
// 医嘱列表
list: {
diff --git a/src/views/a.vue b/src/views/a.vue
new file mode 100644
index 0000000..cb96448
--- /dev/null
+++ b/src/views/a.vue
@@ -0,0 +1,3284 @@
+<template>
+ <div class="divice">
+ <!-- {{数据初始化}} -->
+ <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名">
+ <div id="toubu" class="toubu" style="height: 11%">
+ <el-row
+ v-if="deviceData.患者姓名 !== ''"
+ style="
+ font-weight: 900;
+ color: #ffffff;
+ width: 100%;
+ height: 100%;
+ line-height: 100%;
+ padding: 20px;
+ position: relative;
+ "
+ >
+ <span
+ class="grid-container"
+ style="font-size: 300%; height: 100%"
+ v-if="deviceData.设备名称 !== null"
+ >{{ deviceData.设备名称 }}
+ </span>
+ <span
+ class="grid-container"
+ @click="initTupiao"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.患者姓名 }}
+ </span>
+
+ <span
+ class="grid-container"
+ v-if="deviceData.年龄 !== null"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.年龄 }}岁</span
+ >
+ <span
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.性别 }}</span
+ >
+ <span
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ patientSourceAndCode }}</span
+ >
+ <span
+ v-if="deviceData.签到号"
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.签到号 }}</span
+ >
+
+ <div
+ style="
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 5px;
+ height: 100%;
+ "
+ >
+ <div
+ class="grid-container"
+ style="display: flex; align-items: center; padding-right: 20px"
+ >
+ <span
+ style="
+ display: inline-block;
+ margin-right: 15px;
+ font-size: 30px;
+ color: #f56c6c;
+ "
+ >{{ 倒计时显示 }}</span
+ >
+ <span style="display: inline-block; margin-right: 15px">
+ <img @click="dingshiShow" :src="dingshi" alt="Image 1" />
+ </span>
+ <span style="display: inline-block">
+ <img
+ @click="centerDialogVisible = true"
+ :src="shezhi"
+ alt="Image 2"
+ />
+ </span>
+ </div>
+ </div>
+ </el-row>
+ </div>
+ <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
+ :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">
+ <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>
+ </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">
+ <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>
+ </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>
+ </div>
+ </div>
+ <div
+ style="
+ height: 75%;
+ text-align: center;
+ font-weight: 600;
+ color: #333333;
+ color: #ca7070;
+ overflow: hidden;
+ overflow-y: auto;
+ "
+ >
+ <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
+ >
+ </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
+ "
+ 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
+ >
+ </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>
+ </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>
+ </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;
+ "
+ >
+ <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.位置 }}
+ </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%">
+ <el-row
+ style="
+ font-weight: 900;
+ color: #ffffff;
+ width: 100%;
+ height: 100%;
+ line-height: 100%;
+ padding: 20px;
+ position: relative;
+ "
+ >
+ <span
+ class="grid-container"
+ style="font-size: 300%; height: 100%"
+ v-if="deviceData.设备名称 !== null"
+ >{{ deviceData.设备名称 }}
+ </span>
+
+ <div
+ style="
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: grid;
+ padding: 5px;
+ font-size: 300%;
+ height: 100%;
+ "
+ >
+ <div
+ style="
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 5px;
+ height: 100%;
+ "
+ >
+ <div
+ class="grid-container"
+ style="display: flex; align-items: center; padding-right: 20px"
+ >
+ <span
+ style="
+ display: inline-block;
+ margin-right: 15px;
+ font-size: 30px;
+ color: #f56c6c;
+ "
+ >{{ 倒计时显示 }}</span
+ >
+
+ <span style="display: inline-block; margin-right: 15px">
+ <img @click="dingshiShow" :src="dingshi" alt="Image 1" />
+ </span>
+ <span style="display: inline-block">
+ <img
+ @click="centerDialogVisible = true"
+ :src="shezhi"
+ alt="Image 2"
+ />
+ </span>
+ </div>
+ </div>
+ </div>
+ </el-row>
+ </div>
+ <template v-if="!ispaiban">
+ <div class="chongjian" style="height: 50%">
+ <el-row
+ :gutter="10"
+ style="height: 100%; padding: 10px 20px 0px 20px"
+ >
+ <el-col :span="7" style="height: 100%" ref="targetDiv">
+ <div class="container-weiqiandao" style="height: 100%">
+ <div
+ class="item-weiqiandao"
+ style="background: #ffedd2; border-radius: 8px; height: 100%"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">抗凝剂</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div class="scrollable-container" style="height: 100%">
+ <ul>
+ <li
+ v-for="(item, index) in 当前客户耗材集合.抗凝剂"
+ :key="index"
+ >
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="10" style="height: 100%">
+ <div class="cont_parent">
+ <div
+ class="cont_child"
+ style="background: #e5eeff; border-radius: 8px"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">透析方案</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div class="container-body-text" style="color: #3a75b8">
+ <template
+ v-for="(item, index) in 当前客户耗材集合.透析模式"
+ :key="index"
+ >
+ <span> {{ item }}</span
+ ><template
+ v-if="当前客户耗材集合.透析模式.length > index + 1"
+ >,</template
+ >
+ </template>
+ </div>
+ </div>
+ </div>
+ <div
+ class="cont_child"
+ style="background: #d9f0e2; border-radius: 8px"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">一次性血液透析体外循环管路</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div
+ class="scrollable-container"
+ style="height: 100%; color: #3ab859"
+ >
+ <ul>
+ <li
+ v-for="(item, index) in 当前客户耗材集合.管路"
+ :key="index"
+ >
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div
+ class="cont_child"
+ style="background: #f9dede; border-radius: 8px"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">一次性使用透析护理包</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div
+ class="scrollable-container"
+ style="height: 100%; color: #902d2d"
+ >
+ <ul>
+ <li
+ v-for="(item, index) in 当前客户耗材集合.护理包"
+ :key="index"
+ >
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="container-weiqiandao" >
+
+ <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;height: 100%;">
+ <div class="container-cord" style="height: 30px;">
+ <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
+ />
+ <span class="text-group_3">透析方案</span>
+ </div>
+ <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
+ <div class="container-body-text" style="color: #3A75B8;">
+ <template v-for="(item,index) in 当前客户耗材集合.透析模式" :key="index">
+ <span> {{item}}</span><template v-if="当前客户耗材集合.透析模式.length>index+1">,</template>
+ </template>
+
+ </div>
+ </div>
+ </div>
+ <div class="item-weiqiandao" style="background: #D9F0E2;border-radius: 8px;height: 100%;">
+ <div class="container-cord" style="height: 30px;">
+ <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
+ />
+ <span class="text-group_3">一次性血液透析体外循环管路</span>
+ </div>
+ <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
+ <div class="scrollable-container" style="height: 100%;color: #3AB859;">
+ <ul>
+ <li v-for="(item,index) in 当前客户耗材集合.管路" :key="index">
+ {{item}}
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="item-weiqiandao" style="background: #F9DEDE;border-radius: 8px;height: 100%;">
+ <div class="container-cord" style="height: 30px;">
+ <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
+ />
+ <span class="text-group_3">一次性使用透析护理包</span>
+ </div>
+ <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
+ <div class="scrollable-container" style="height: 100%;color: #902D2D;">
+ <ul>
+ <li v-for="(item,index) in 当前客户耗材集合.护理包" :key="index">
+ {{item}}
+ </li>
+
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div> -->
+ </el-col>
+ <el-col :span="7" style="height: 100%">
+ <div class="container-weiqiandao" style="height: 100%">
+ <div
+ class="item-weiqiandao"
+ style="background: #efe5ff; border-radius: 8px; height: 100%"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">一次性使用内瘘穿刺针</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div
+ class="scrollable-container"
+ style="height: 100%; color: #a78718"
+ >
+ <ul>
+ <li
+ v-for="(item, index) in 当前客户耗材集合.穿刺针"
+ :key="index"
+ >
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="mowei" style="height: 39%">
+ <el-row
+ :gutter="20"
+ style="height: 100%; padding: 10px 20px 10px 20px"
+ >
+ <el-col :span="12" style="height: 100%">
+ <div class="container-weiqiandao" style="height: 100%">
+ <div
+ class="item-weiqiandao"
+ style="background: #f6f5fa; border-radius: 8px; height: 100%"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">血液透析器</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div style="height: 100%; color: #333333; font-weight: 600">
+ <div>
+ <span
+ v-for="(item, index) in 当前客户耗材集合.透析器"
+ :key="index"
+ style="margin-right: 10px"
+ >
+ {{ item
+ }}<template
+ v-if="当前客户耗材集合.透析器.length > index + 1"
+ >,</template
+ >
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="container-weiqiandao" style="height: 100%">
+ <div
+ class="item-weiqiandao"
+ style="background: #f6f5fa; border-radius: 8px; height: 100%"
+ >
+ <div class="container-cord" style="height: 30px">
+ <img
+ style="width: 25px"
+ referrerpolicy="no-referrer"
+ :src="tsl"
+ />
+ <span class="text-group_3">血液透析滤过器</span>
+ </div>
+ <div
+ class="grid-container"
+ style="height: calc(100% - 30px); width: 100%"
+ >
+ <div style="height: 100%; color: #333333; font-weight: 600">
+ <div>
+ <span
+ v-for="(item, index) in 当前客户耗材集合.滤过器"
+ :key="index"
+ style="margin-right: 10px"
+ >
+ {{ item
+ }}<template
+ v-if="当前客户耗材集合.滤过器.length > index + 1"
+ >,</template
+ >
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </template>
+ <template v-else>
+ <div
+ style="
+ height: 89%;
+ width: 100%;
+ background: #fef0e1;
+ border-radius: 8px;
+ font-size: 100px;
+ "
+ >
+ <div style="height: 100%">
+ <div
+ class="container-cord"
+ style="height: 100%; padding-left: 20px"
+ >
+ <img
+ style="width: 100px"
+ referrerpolicy="no-referrer"
+ src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
+ />
+ <span class="text-group_3" style="font-size: 100px"
+ >等待患者排班</span
+ >
+ </div>
+ </div>
+ </div>
+ </template>
+ </div>
+ <el-dialog
+ :show-close="false"
+ :close-on-press-escape="false"
+ :close-on-click-modal="false"
+ title="提示"
+ v-model="centerDialogVisible"
+ width="500px"
+ center
+ >
+ <span>
+ <el-form
+ label-position="left"
+ label-width="auto"
+ style="max-width: 600px"
+ >
+ <el-space fill>
+ <el-alert type="绑定设备" show-icon :closable="false">
+ <p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
+ <p>也可以选择二维码图片文件识别</p>
+ </el-alert>
+ <el-form-item label="设备编号">
+ <el-input v-model="deviceCode" />
+ </el-form-item>
+ </el-space>
+ </el-form>
+ <div>
+ <input
+ type="file"
+ pattern="选取二维码"
+ accept="image/*"
+ @change="onFileChange"
+ />
+ </div>
+ </span>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="centerDialogVisible = false">取消</el-button>
+ <!-- <el-button @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>
+ </template>
+ </el-dialog>
+ <el-dialog
+ v-model="centerDialogVisible2"
+ custom-class="custom-dialog"
+ :show-close="false"
+ width="700"
+ center
+ >
+ <template #header="{ titleId, titleClass }">
+ <div class="my-header">
+ <h4 style="color: white" :id="titleId" :class="titleClass">
+ 定时任务设置
+ </h4>
+ </div>
+ </template>
+ <span>
+ <div style="margin-right: 10px">
+ <el-form :model="formInline" size="large" label-width="100px">
+ <el-form-item label="时间设定：">
+ <el-col :span="10">
+ <el-input-number
+ style="width: 100%"
+ v-model="formInline.xiaoshi"
+ :min="0"
+ :max="10"
+ />
+ </el-col>
+ <el-col :span="2" class="text-center">
+ <span class="text-gray-500">小时 </span>
+ </el-col>
+ <el-col :span="10">
+ <el-input-number
+ style="width: 100%"
+ v-model="formInline.fenzhong"
+ :min="1"
+ :max="59"
+ />
+ </el-col>
+ <el-col :span="2" class="text-center">
+ <span class="text-gray-500">分钟 </span>
+ </el-col>
+ </el-form-item>
+
+ <el-form-item label="提醒内容：">
+ <el-input
+ v-if="!formInline.selectOpen"
+ v-model="formInline.alertText"
+ style="max-width: 600px"
+ placeholder="请填写报警内容"
+ type="textarea"
+ class="input-with-select"
+ >
+ </el-input>
+ <el-select
+ v-else
+ v-model="formInline.selectType"
+ style="width: 100%"
+ placeholder="选择内容"
+ >
+ <el-option label="测血压" value="测血压" />
+ <el-option label="开超滤" value="开超滤" />
+ <el-option label="给药" value="给药" />
+ <el-option label="调电导度" value="调电导度" />
+ <el-option label="调血流量" value="调血流量" />
+ <el-option label="冲管" value="冲管" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="定型文：">
+ <el-switch v-model="formInline.selectOpen" />
+ </el-form-item>
+ </el-form>
+ </div>
+ </span>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="centerDialogVisible2 = false">取消</el-button>
+ <el-button type="primary" @click="setDingshi"> 确定 </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <el-dialog
+ v-model="centerDialogVisible3"
+ custom-class="custom-dialog"
+ :show-close="false"
+ width="800"
+ center
+ >
+ <template #header="{ titleId, titleClass }">
+ <div class="my-header">
+ <h4 style="color: white" :id="titleId" :class="titleClass">
+ 定时任务提醒
+ </h4>
+ </div>
+ </template>
+ <span>
+ <div style="text-align: center; font-size: 35px">
+ <h3>{{ 倒计时告警文本 }}</h3>
+ </div>
+ </span>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button type="" @click="centerDialogVisible3 = false"
+ >取消</el-button
+ >
+ <el-button type="primary" @click="centerDialogVisible3 = false">
+ 确定
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+</template>
+ <script lang="ts" setup>
+import {
+ BrowserMultiFormatReader,
+ NotFoundException,
+ ChecksumException,
+ FormatException,
+} from "@zxing/library";
+import TQS88 from "../img/TQS88.png";
+import shezhi from "../img/shezhi.png";
+import dingshi from "../img/dingshi.png";
+import xinlv from "../img/xinlv.png";
+import tsl from "../img/tsl.png";
+import zlms from "../img/zlms.png";
+import txztimg from "../img/txzt.png";
+import txq from "../img/txq.png";
+import sjjd from "../img/sjjd.png";
+import cljd from "../img/cljd.png";
+import tizhong from "../img/tizhong.png";
+import { EventSourcePolyfill } from "event-source-polyfill";
+import 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,
+ onBeforeMount,
+ onMounted,
+ ref,
+ watch,
+ onUnmounted,
+ onBeforeUnmount,
+ nextTick
+} from "vue";
+import { Local } from "../utils/storage";
+import * as echarts from "echarts";
+import { jgTime4 } from "../utils/formatTime";
+import { setTimeoutAlert } from "../utils/httpApi";
+import DoctorAdvice from '../components/doctorAdvice/index.vue';
+
+// 创建 Audio 对象，指向 public 目录下的音频文件
+const alarmSound = new Audio(alertbaojin); //一般报警声音
+const alarmSoundCXY = new Audio(cxybaojing); //测血压报警
+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";
+const ispaiban = ref(false);
+import { ElLoading, ElMessage } from "element-plus";
+// 连接服务器
+const source = ref<EventSourcePolyfill | null>(null);
+//接收到的sse数据
+const sseData = ref({});
+// sse状态
+const readyState = ref({ key: 0, value: "正在链接中" });
+
+const deviceCode = ref("");
+const shishiTime = ref(new Date());
+//有没有推送过血压如果有 就一直会显示血压数据
+const isinitXy = ref(false);
+const 床旁血压计 = ref({
+ date_time: "",
+ sbp: "178",
+ pulseRate: "11",
+ dbp: "111",
+ zuihouTime: new Date(),
+});
+const formInline = ref({
+ xiaoshi: 0,
+ fenzhong: 5,
+ alertText: "",
+ selectType: "",
+ selectOpen: false,
+});
+
+const 当前客户耗材集合 = ref({});
+const deviceData = ref({
+ 患者来源: null,
+ 患者门诊住院号: '',
+ 签到号: '',
+ 透析单医嘱列表: [],
+ iot_传输时间: "2025-01-10 19:15:24",
+ iot_当前脱水量: 2.04,
+ iot_脱水目标量: 3.3,
+ iot_脱水速率: 0.82,
+ iot_跨膜压: 40,
+ iot_透析时间: 149,
+ iot_静脉压: 86,
+ 上次透后称重: 72.5,
+ 体重增加: 3.1,
+ 体重增长率: 4.5,
+ 分区编号: "109195231931115eZmM",
+ 处方脱水量: 3.3,
+ 实时脱水量: 1.65,
+ 干体重: 69.5,
+ 年龄: 59,
+ 异常检验指标: [],
+ 性别: "男",
+ 患者头像:
+ "http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
+ 患者姓名: "",
+ 患者编号: "PAT9090070832211PyVq",
+ 患者透析号: "0207",
+ 最后一条血压: 116,
+ 此次脱水量: 6.1,
+ 监测血压是否低于百分之30: false,
+ 监测血压是否高于百分之30: false,
+ 监测记录列表: [
+ {
+ 伸缩压: "152",
+ 脉搏: "66",
+ 舒张压: "76",
+ },
+ {
+ 伸缩压: "133",
+ 脉搏: "67",
+ 舒张压: "72",
+ },
+ {
+ 伸缩压: "116",
+ 脉搏: "79",
+ 舒张压: "63",
+ },
+ ],
+ 第一条血压: 152,
+ 脉搏列表: "66,67,79",
+ 血压低值列表: "76,72,63",
+ 血压高值列表: "152,133,116",
+ 设备分区类型: 0,
+ 设备号: "23",
+ 设备名称: "页面初始化中，请耐心等待！",
+ 设备序列号: "B97AP002",
+ 设备状态列表: [],
+ 设备编号: "DEVICE9195233509924hOHL",
+ 超滤速度过快: null,
+ 跨膜压列表: "2753,33,37",
+ 跨膜压是否大于200: false,
+ 透前称重: 75.6,
+ 透前脉搏: 77,
+ 透前血压_伸缩压: 136,
+ 透前血压_舒张压: 57,
+ 透析单编号: "9347151058555cAjJ",
+ 透析器: "B-17AHF",
+ 透析处方的时长: 4,
+ 透析处方的时长_分钟: "00",
+ 透析处方的时长_小时: "4",
+ 透析开始时间: "2025-01-10 16:44:00",
+ 透析方案: "HD",
+ 透析状态: "1.0",
+ 透析结束时间: "2025-01-10 20:44:00",
+ 设备变化: "1736508117033DEV",
+ 属性历史列表: [
+ {
+ 属性列表: [
+ {
+ identifier: "D",
+ identifierText: "血液流速",
+ time2: 1736507724242,
+ time: 1736507724242,
+ finalText: "00240",
+ isShow: 1,
+ },
+ {
+ identifier: "F",
+ identifierText: "透析液温度",
+ time2: 1736507724242,
+ time: 1736507724242,
+ finalText: "036.4",
+ isShow: 1,
+ },
+ {
+ identifier: "G",
+ identifierText: "透析液电导度",
+ time2: 1736507724242,
+ time: 1736507724242,
+ finalText: "013.8",
+ isShow: 1,
+ },
+ ],
+ 查询时间: "2025-01-10 19:17:57",
+ },
+ {
+ 属性列表: [
+ {
+ identifier: "D",
+ identifierText: "血液流速",
+ time2: 1736507538186,
+ time: 1736507538186,
+ finalText: "00240",
+ isShow: 1,
+ },
+ {
+ identifier: "F",
+ identifierText: "透析液温度",
+ time2: 1736507538186,
+ time: 1736507538186,
+ finalText: "036.5",
+ isShow: 1,
+ },
+ {
+ identifier: "G",
+ identifierText: "透析液电导度",
+ time2: 1736507538186,
+ time: 1736507538186,
+ finalText: "013.7",
+ isShow: 1,
+ },
+ ],
+ 查询时间: "2025-01-10 19:12:59",
+ },
+ {
+ 属性列表: [
+ {
+ identifier: "D",
+ identifierText: "血液流速",
+ time2: 1736507290239,
+ time: 1736507290239,
+ finalText: "00240",
+ isShow: 1,
+ },
+ {
+ identifier: "F",
+ identifierText: "透析液温度",
+ time2: 1736507290239,
+ time: 1736507290239,
+ finalText: "036.5",
+ isShow: 1,
+ },
+ {
+ identifier: "G",
+ identifierText: "透析液电导度",
+ time2: 1736507290239,
+ time: 1736507290239,
+ finalText: "013.8",
+ isShow: 1,
+ },
+ ],
+ 查询时间: "2025-01-10 19:08:00",
+ },
+ ],
+});
+// 告警提示
+// 识别窗口
+const video = ref<HTMLVideoElement | null>(null);
+// 识别数据流
+let stream: MediaStream | null = null;
+const centerDialogVisible2 = ref(false);
+const centerDialogVisible3 = ref(false);
+const centerDialogVisible = ref(false);
+const background = ref("");
+const txztText = ref("");
+const textcolor = ref("");
+const wd = ref("");
+const ls = ref("");
+const ddd = ref("");
+const contentHeight = ref(0); // 中间内容的高度
+const isShowXY = computed(() => {
+ if (床旁血压计.value.zuihouTime > shishiTime.value) {
+ return true;
+ } else {
+ 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 {
+ nextTick(() => {
+ setTimeout(() => {
+ initTupiao();
+ }, 500);
+ });
+ }
+ }
+);
+const txzt: any = computed(() => {
+ return deviceData.value.透析状态;
+});
+// 是否是消毒类型和待机
+const xiaoduzhuangti = computed(() => {
+ return false;
+});
+// 打开定时任务设置
+const dingshiShow = () => {
+ formInline.value = {
+ xiaoshi: 0,
+ fenzhong: 5,
+ alertText: "",
+ selectType: "",
+ selectOpen: false,
+ };
+ centerDialogVisible2.value = true;
+};
+// 保存定时任务
+const setDingshi = () => {
+ console.log("--------------------");
+ console.log(formInline.value);
+ console.log(deviceCode.value);
+ const minutes = formInline.value.xiaoshi * 60 + formInline.value.fenzhong;
+ let alertText = "";
+ if (formInline.value.selectOpen) {
+ alertText = formInline.value.selectType;
+ } else {
+ alertText = formInline.value.alertText;
+ }
+ if (alertText === "") {
+ ElMessage.warning("设置报警消息不能为空");
+ return true;
+ }
+ setTimeoutAlert({
+ deviceCode: deviceCode.value,
+ minutes: minutes,
+ alertText: alertText,
+ }).then((res) => {
+ console.log(res.data);
+ if (res.data === "OK") {
+ 倒计时.value = minutes * 60;
+ centerDialogVisible2.value = false;
+ 倒计时告警文本.value = alertText;
+ } else {
+ ElMessage.warning(res.message);
+ }
+ });
+ // centerDialogVisible2.value=false
+};
+
+// 状态颜色
+const zhuangtaiColor = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ let colorStr = "#13CE66";
+ if (list && list.length > 0) {
+ // 默认显示第一状态颜色
+ // colorStr=list[0].状态颜色
+ // 消毒状态优先级高
+ const x = list.findIndex((e) => {
+ return e.状态类型 === "透析机消毒" || e.状态类型 === "在线";
+ });
+ if (x !== 0) {
+ colorStr = list[0].状态颜色;
+ }
+ }
+ return colorStr;
+});
+// 没有报警就返回空字符传
+const noBaoji = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ let zhuantaiStr = "";
+ let jinggaoStr = "";
+ if (list && list.length > 0) {
+ list.forEach((el: any) => {
+ if (el.是否为警告标记 === 1) {
+ if (jinggaoStr !== "") {
+ jinggaoStr += "/" + el.状态名称;
+ } else {
+ jinggaoStr += el.状态名称;
+ }
+ } else {
+ zhuantaiStr += el.状态名称;
+ }
+ });
+ }
+ return jinggaoStr;
+});
+// 状态返回
+const zhuangtaiStr = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ let zhuantaiStr = "";
+ if (list && list.length > 0) {
+ list.forEach((el: any) => {
+ if (
+ el.是否为警告标记 === 1 ||
+ el.状态类型 === "透析机消毒" ||
+ el.状态类型 === "在线"
+ ) {
+ //去掉待机和消毒状态显示
+ } else {
+ if (zhuantaiStr !== "") {
+ zhuantaiStr += "/" + el.状态名称;
+ } else {
+ zhuantaiStr += el.状态名称;
+ }
+ }
+ });
+ }
+
+ return zhuantaiStr;
+});
+const isbaioji = computed(() => {
+ const list = deviceData.value.设备状态列表;
+ if (
+ (deviceData.value.监测血压是否低于百分之30 ||
+ deviceData.value.跨膜压是否大于200 ||
+ deviceData.value.监测血压是否高于百分之30) &&
+ deviceData.value.透析状态 === "2.0"
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+});
+// 透前血压告警
+const tqXygj = computed(() => {
+ if (
+ deviceData.value.透前血压_伸缩压 > 160 ||
+ deviceData.value.透前血压_伸缩压 < 90
+ ) {
+ return true;
+ } else {
+ return false;
+ }
+});
+// 透前脉搏告警
+const tqMbgj = computed(() => {
+ if (deviceData.value.透前脉搏 > 90) {
+ return true;
+ } else {
+ return false;
+ }
+});
+// 设置内联样式对象
+const backgroundStyle = {
+ backgroundImage: `url(${TQS88})`,
+ backgroundSize: "cover", // 根据需要调整
+ backgroundPosition: "center", // 根据需要调整
+};
+
+watch(
+ () => txzt.value,
+ () => {
+ if (txzt.value === "0.0") {
+ txztText.value = "未签";
+ textcolor.value = "#FAFAFA";
+ background.value = "#606266";
+ } else if (txzt.value === "1.0") {
+ // 蓝色
+ textcolor.value = "#faecd8";
+ background.value = "#E6A23C";
+ txztText.value = "已签";
+ } else if (txzt.value === "2.0") {
+ // 绿色
+ // textcolor.value = '#D9F5E2';
+ // background.value='#67C23A'
+ textcolor.value = "#ECF5FF";
+ background.value = "#409EFF";
+ txztText.value = "透中";
+ } else if (txzt.value === "2.5") {
+ //
+ textcolor.value = "#fde2e2";
+ background.value = "#fab6b6";
+ txztText.value = "结束";
+ } else if (txzt.value === "3.0") {
+ // 已经结束
+ textcolor.value = "#FFECD0";
+ background.value = "#E6A23C";
+ txztText.value = "检查";
+ } else if (txzt.value === "4.0") {
+ // yij
+ textcolor.value = "#FFECD0";
+ background.value = "#E6A23C";
+ txztText.value = "归档";
+ }
+ },
+ {
+ immediate: true,
+ deep: true,
+ }
+);
+const formatSecondsToTime = (totalSeconds) => {
+ // 向下取整
+ let hours = Math.floor(totalSeconds / 3600);
+ let minutes = Math.floor((totalSeconds % 3600) / 60);
+ let seconds = totalSeconds % 60;
+
+ // 补零函数
+ const pad = (num) => String(num).padStart(2, "0");
+
+ return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+};
+
+const 倒计时 = ref(-100);
+const 倒计时显示 = ref("00:00:00");
+const 倒计时告警文本 = ref("");
+// 定时器回调函数
+const updateTime = () => {
+ 倒计时.value--;
+ if (倒计时.value > 0) {
+ 倒计时显示.value = formatSecondsToTime(倒计时.value);
+ } else if (倒计时.value > -5) {
+ 倒计时显示.value = "";
+ // 只有没触发的时候才触发他
+ 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) {
+ deviceCode.value = devcieCode;
+ sourceInit();
+ } else {
+ centerDialogVisible.value = true;
+ }
+ intervalId = setInterval(updateTime, 1000);
+ const width = window.innerWidth;
+const height = window.innerHeight;
+
+console.log('可视区域宽度:', width);
+console.log('可视区域高度:', height);
+
+});
+// 在组件卸载前清除定时器，防止内存泄漏
+onBeforeUnmount(() => {
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+});
+
+const saveSet = () => {
+ if (deviceCode.value) {
+ centerDialogVisible.value = false;
+ Local.set("devcieCode", deviceCode.value);
+ sourceInit();
+ window.location.reload();
+ } else {
+ ElMessage.warning("请先输入设备编号");
+ }
+};
+
+/**
+ * 刷新页面
+ */
+const shuaxin = () => {
+ window.location.reload();
+};
+const onFileChange = async (event: Event) => {
+ const inputElement = event.target as HTMLInputElement;
+ if (!inputElement.files || inputElement.files.length === 0) return;
+
+ const file = inputElement.files[0];
+ const reader = new FileReader();
+
+ reader.onload = async (e) => {
+ if (e.target && typeof e.target.result === "string") {
+ try {
+ const codeReader = new BrowserMultiFormatReader();
+ const result = await codeReader.decodeFromImage(
+ undefined,
+ e.target.result,
+ { tryHarder: true }
+ );
+ // const result = await codeReader.decodeFromImage(undefined, e.target.result);
+ deviceCode.value = result.text;
+ ElMessage.success("识别成功");
+ } catch (err) {
+ console.error("Error details:", err);
+ if (err instanceof NotFoundException) {
+ ElMessage.error("未找到二维码");
+ } else if (err instanceof ChecksumException) {
+ ElMessage.error("校验错误");
+ } else if (err instanceof FormatException) {
+ ElMessage.error("格式错误");
+ } else {
+ ElMessage.error("识别错误请重新识别");
+ console.error(err);
+ }
+ }
+ }
+ };
+
+ reader.readAsDataURL(file);
+};
+const shaoma = () => {};
+watch(
+ () => deviceData.value.设备变化,
+ () => {
+ console.log(deviceData.value.设备名称, "子组件变量");
+ setTimeout(() => {
+ if (!xiaoduzhuangti.value) {
+ initTupiao();
+ }
+ }, 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 = import.meta.env.VITE_SSE_BASE_URL;
+ const stateArr = [
+ { key: 0, value: "正在链接中" },
+ { key: 1, value: "已经链接并且可以通讯" },
+ { key: 2, value: "连接已关闭或者没有链接成功" },
+ ];
+ try {
+ source.value = new EventSourcePolyfill(`${test}${deviceCode.value}`, {
+ heartbeatTimeout: 60000,
+ });
+ source.value.onopen = (e) => {
+ console.log("链接成功");
+ ElMessage.success("链接服务成功");
+ readyState.value = stateArr[source.value?.readyState ?? 0];
+ console.log(e);
+ };
+ source.value.onerror = (e) => {
+ console.log(e, "异常情况-----");
+ ElMessage.warning("链接服务失败，请耐心等待重连。。");
+ readyState.value = stateArr[source.value?.readyState ?? 0];
+ };
+ source.value.onmessage = (e) => {
+ console.log("收到消息", e.data);
+ shishiTime.value = new Date();
+ if (e.data) {
+ const msg = e.data;
+ let dif = msg.indexOf("event:message");
+ let beng = msg.indexOf("{");
+ let end = msg.length - 1;
+ if (beng !== -1 && end !== -1 && dif !== -1) {
+ const datax = msg.slice(beng, end + 1);
+ const dataBody = JSON.parse(datax);
+ console.log(dataBody);
+ console.log(dataBody);
+ if (dataBody.倒计时?.提醒文本) {
+ 倒计时.value = dataBody.倒计时?.设定提醒倒计时;
+ console.log("设置了倒计时值", 倒计时.value);
+ if (
+ 倒计时.value <= 0 &&
+ 倒计时.value >= -60 &&
+ centerDialogVisible3.value === false
+ ) {
+ centerDialogVisible3.value = true;
+ 倒计时告警文本.value = dataBody.倒计时?.提醒文本;
+ 关闭弹框警告();
+ // toggleAlarm();
+ } else if (倒计时.value <= -60) {
+ centerDialogVisible3.value = false;
+ }
+ }
+ if (dataBody.推送类型 === "床旁血压计") {
+ isinitXy.value = true;
+ let date = new Date();
+ date.setMinutes(date.getMinutes() + 5);
+ 床旁血压计.value = {
+ date_time: dataBody?.床旁血压结果?.measureTime,
+ sbp: dataBody?.床旁血压结果?.sbp,
+ pulseRate: dataBody?.床旁血压结果?.pulseRate,
+ dbp: dataBody?.床旁血压结果?.dbp,
+ zuihouTime: date,
+ };
+
+ 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.患者姓名 = "";
+ if (dataBody?.使用耗材字典) {
+ 当前客户耗材集合.value = dataBody?.使用耗材字典;
+ }
+ }
+
+ deviceData.value.设备变化 = Date.now() + "DEV";
+
+ deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表;
+ console.log(deviceData.value.设备变化);
+ deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表;
+ }
+ }
+ }
+ };
+ } catch (error) {
+ console.log(error);
+ }
+};
+const showxuye = () => {
+ let date = new Date();
+ date.setMinutes(date.getMinutes() + 0.1);
+ 床旁血压计.value = {
+ date_time: "2023-32-3232",
+ sbp: "117",
+ pulseRate: "77",
+ dbp: "99",
+ zuihouTime: date,
+ };
+ isinitXy.value = true;
+ setTimeout(() => {
+ initTupiao();
+ }, 500);
+};
+const 关闭弹框警告 = () => {
+ setTimeout(function () {
+ console.log("30秒已过，关闭报警设置弹框。");
+ centerDialogVisible3.value = false;
+ 倒计时.value = -100;
+ }, 30000); // 30000 毫秒 = 30 秒
+};
+//初始化
+const sourceInit = () => {
+ console.log("初始化see");
+ if (!source.value || source.value.readyState === 2) {
+ creatSource();
+ }
+};
+// 关闭 WebSocket
+const closeSource = () => {
+ console.log("断开");
+ source.value?.close();
+};
+// 取消订阅
+onBeforeMount(() => {
+ closeSource();
+});
+const initTupiao = () => {
+ if (deviceData.value.患者姓名 !== "") {
+ const seriesData = [
+ {
+ name: "11",
+ type: "line",
+ symbol: "triangle",
+ symbolSize: 10,
+ symbolRotate: 180,
+ data: [],
+ lineStyle: {
+ width: 5, // 设置线条宽度为5
+ color: "red",
+ },
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: "red",
+ color: "red",
+ },
+ markPoint: {
+ data: [],
+ },
+ markLine: {
+ symbol: "none",
+ lineStyle: { color: "#409EFF", width: 3 },
+ data: [
+ { name: "y90", yAxis: 90, label: { show: false }, symbol: "none" },
+ ],
+ },
+ },
+
+ {
+ name: "",
+ type: "line",
+ symbol: "triangle",
+ symbolSize: 10,
+ data: [],
+ lineStyle: {
+ color: "#409EFF",
+ width: 5, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: "#409EFF",
+ color: "#409EFF",
+ },
+ markPoint: {
+ data: [],
+ },
+ markLine: {
+ symbol: "none",
+ lineStyle: { color: "#F56C6C", width: 3 },
+ data: [
+ {
+ name: "y140",
+ yAxis: 140,
+ label: { show: false },
+ symbol: "none",
+ },
+ ],
+ },
+ },
+ {
+ name: "",
+ type: "line",
+ symbolSize: 10,
+ data: [],
+ lineStyle: {
+ color: "#D940FF",
+ width: 5, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: "#D940FF",
+ color: "#D940FF",
+ },
+ markPoint: {
+ data: [],
+ },
+ },
+ ];
+ const xAxisData = [];
+ if (Number(deviceData.value.透析状态) >= 2) {
+ // alert(111)
+ deviceData.value.监测记录列表.forEach((e, index) => {
+ seriesData[0].data.push(e.伸缩压);
+ seriesData[1].data.push(e.舒张压);
+ seriesData[2].data.push(e.脉搏);
+ xAxisData.push(index);
+ if (index == 0) {
+ let y = Number(e.伸缩压) + 20;
+ let y2 = Number(e.舒张压) + 20;
+ seriesData[0].markPoint.data.push({
+ name: "上机血压",
+ value: e.伸缩压,
+ xAxis: 0,
+ yAxis: e.伸缩压,
+ symbolSize: 0,
+ symbolOffset: [0, 20],
+ label: { fontSize: 20, color: "red" },
+ });
+ seriesData[1].markPoint.data.push({
+ name: "上机血压",
+ value: e.舒张压,
+ xAxis: 0,
+ yAxis: e.舒张压,
+ symbolSize: 0,
+ symbolOffset: [15, 15],
+ label: { fontSize: 20, color: "#409EFF" },
+ });
+ seriesData[2].markPoint.data.push({
+ name: "上机血压",
+ value: e.脉搏,
+ xAxis: 0,
+ yAxis: e.脉搏,
+ symbolSize: 0,
+ symbolOffset: [10, -10],
+ label: { fontSize: 20, color: "#D940FF" },
+ });
+ } else if (
+ deviceData.value.监测记录列表.length > 1 &&
+ index === deviceData.value.监测记录列表.length - 1
+ ) {
+ let y = Number(e.伸缩压) + 20;
+ let y2 = Number(e.舒张压) + 20;
+ seriesData[0].markPoint.data.push({
+ name: "上机血压",
+ value: e.伸缩压,
+ xAxis: index,
+ yAxis: e.伸缩压,
+ symbolSize: 0,
+ symbolOffset: [-15, -15],
+ label: { fontSize: 20, color: "red" },
+ });
+ seriesData[1].markPoint.data.push({
+ name: "上机血压",
+ value: e.舒张压,
+ xAxis: index,
+ yAxis: e.舒张压,
+ symbolSize: 0,
+ symbolOffset: [-15, 15],
+ label: { fontSize: 20, color: "#409EFF" },
+ });
+ seriesData[2].markPoint.data.push({
+ name: "上机压",
+ value: e.脉搏,
+ xAxis: index,
+ yAxis: e.脉搏,
+ symbolSize: 0,
+ symbolOffset: [0, -10],
+ label: { fontSize: 20, color: "#D940FF" },
+ });
+ }
+ });
+ if (deviceData.value.监测记录列表.length === 1) {
+ xAxisData.push(1);
+ }
+ try {
+ 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",
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 20,
+ top: 0,
+ bottom: 0,
+ },
+ xAxis: {
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: xAxisData,
+ axisTick: {
+ show: true, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ show: false,
+ name: "",
+ type: "value",
+ min: 20,
+ max: 220,
+ interval: 20, // 指定刻度间隔,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: seriesData,
+ };
+ if (myChart) {
+ myChart.setOption(option);
+ }
+ } catch (e) {
+ console.log("图标渲染异常异常");
+ }
+ } else {
+ try {
+ let myChart = null;
+
+ if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
+ myChart = echarts.init(
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ );
+ }
+
+
+ const option = {
+ backgroundColor:
+ 床旁血压计.value.zuihouTime > shishiTime.value
+ ? "#ffffff"
+ : textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 5,
+ top: 0,
+ bottom: 0,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: [1, 2, 3, 4],
+ },
+ yAxis: {
+ name: "",
+ type: "value",
+ min: 20,
+ max: 220,
+ interval: 20, // 指定刻度间隔,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [],
+ };
+ if (myChart) {
+ myChart.setOption(option);
+ }
+ } catch (e) {
+ console.log("图表渲染异常异常: ", e);
+ console.log(
+ "异常",
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ );
+ }
+ }
+ } else if (deviceData.value.患者姓名 === "") {
+ const tbdata1 = [];
+ const tbdata2 = [];
+ const tbdata3 = [];
+ if (deviceData.value.属性历史列表) {
+ deviceData.value.属性历史列表.forEach((e, index) => {
+ // 温度
+ const wdMode = e.属性列表.find((l) => {
+ return l.identifierText === "透析液温度";
+ });
+ if (wdMode) {
+ tbdata1.push(Number(wdMode?.finalText));
+ wd.value = Number(wdMode?.finalText);
+ }
+
+ // 血液流速
+ const xymode = e.属性列表.find((l) => {
+ return l.identifierText === "血液流速";
+ });
+ if (xymode) {
+ tbdata2.push(Number(xymode?.finalText));
+ ls.value = Number(xymode?.finalText);
+ }
+
+ // 电导度
+ const dddMode = e.属性列表.find((l) => {
+ return l.identifierText === "透析液电导度";
+ });
+ if (dddMode) {
+ tbdata3.push(Number(dddMode?.finalText));
+ ddd.value = Number(dddMode?.finalText);
+ }
+ });
+ }
+ try {
+ console.log("渲染设备");
+ 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: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 100,
+ bottom: 0,
+ },
+ xAxis: {
+ show: true, // 隐藏X轴
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: [1, 2, 3],
+ axisTick: {
+ show: false, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ type: "value",
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: tbdata1,
+ type: "line",
+ lineStyle: {
+ width: 10, // 设置线条宽度为5
+ color: "red",
+ },
+ },
+ ],
+ };
+ const option2 = {
+ // backgroundColor: textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 100,
+ bottom: 0,
+ },
+ xAxis: {
+ show: false, // 隐藏X轴
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: [1, 2, 3],
+ axisTick: {
+ show: false, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ type: "value",
+ min: -10,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: tbdata2,
+ type: "line",
+ lineStyle: {
+ width: 10, // 设置线条宽度为5
+ color: "#409EFF",
+ },
+ },
+ ],
+ };
+ const option3 = {
+ // backgroundColor: textcolor.value,
+ tooltip: {
+ trigger: "axis",
+ },
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 8,
+ top: 100,
+ bottom: 0,
+ },
+ xAxis: {
+ show: false, // 隐藏X轴
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: [1, 2, 3],
+ axisTick: {
+ show: false, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ type: "value",
+ min: -10,
+ splitLine: {
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: tbdata3,
+ type: "line",
+ lineStyle: {
+ width: 10, // 设置线条宽度为5
+ color: "#E6A23C",
+ },
+ },
+ ],
+ };
+ if (myChart1) {
+ myChart1.setOption(option1);
+ }
+ if (myChart2) {
+ myChart2.setOption(option2);
+ }
+ if (myChart3) {
+ myChart3.setOption(option3);
+ }
+ } catch (e) {
+ console.log("图标渲染异常异常");
+ }
+
+ console.log(deviceData.value);
+ }
+};
+const getItemName = (name: string) => {
+ if (name) {
+ if (name === "血红蛋白测定") {
+ return "Hgb ";
+ } else if (name === "铁蛋白") {
+ return "Fer ";
+ } else if (name === "白蛋白") {
+ return "Alb ";
+ } else if (name === "血清铁蛋白") {
+ return "SF ";
+ } else if (name === "钙") {
+ return "Ga ";
+ } else if (name === "钾") {
+ return "K ";
+ } else if (name === "无机磷") {
+ return "pi ";
+ } else if (name === "甲状旁腺激素") {
+ return "PTH ";
+ } else {
+ return name;
+ }
+ } else {
+ return "";
+ }
+};
+</script>
+<style lang="less" scoped>
+.divice {
+ background: #dae5ec;
+ font-size: 100%;
+ border-radius: 4px;
+ border: solid 1px;
+ width: 100%;
+ height: 100%;
+ border: 1px solid coral;
+ user-select: none;
+ .toubu {
+ // padding-left: 20px;
+ width: 100%;
+ background: #70a3dd;
+ border-radius: 4px 0px 16px 16px;
+ }
+ .chongjian {
+ .container {
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ width: 100%;
+ gap: 10px; /* 设置所有方向的间距为10px */
+ }
+ .item {
+ border: 1px solid #ccc;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin-bottom: 10px;
+ }
+ }
+ .mowei {
+ .container {
+ height: 100%;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ width: 100%;
+ gap: 10px; /* 设置所有方向的间距为10px */
+ }
+ .item {
+ border: 1px solid #ccc;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin-bottom: 10px;
+ }
+ }
+}
+/* 定义闪烁动画 */
+@keyframes blink {
+ 0% {
+ border: 4px solid red;
+ }
+ 50% {
+ border: 4px solid Transparent;
+ }
+ 100% {
+ border: 4px solid red;
+ // border-bottom:8px solid red ;
+ }
+}
+
+/* 应用闪烁动画 */
+.blink {
+ // float: left; /* 让div浮动到左边 */
+ width: 100%;
+ height: 100%;
+ animation: blink 2s infinite; /* 每秒闪烁一次，无限次数 */
+
+ // border-left:5px solid red ;
+ // border-right:5px solid red ;
+
+ // background: red;
+ cursor: pointer;
+ // margin-bottom: 100%;
+}
+@keyframes blink2 {
+ 0% {
+ background: red;
+ }
+ 50% {
+ background: Transparent;
+ }
+ 100% {
+ background: red;
+ // border-bottom:8px solid red ;
+ }
+}
+.blink2 {
+ animation: blink2 2s infinite; /* 每秒闪烁一次，无限次数 */
+ width: 100%;
+ height: 100%;
+}
+.grid-container {
+ display: grid;
+ align-items: center; /* 垂直居中 */
+ height: 100vh; /* 根据需要调整高度 */
+}
+
+.centered-text {
+ font-weight: 600;
+ /* 其他样式 */
+}
+.container-cord {
+ display: flex;
+ align-items: center; /* 垂直居中对齐 */
+ // border: 1px solid #ccc;
+ // padding: 10px;
+ .image {
+ margin-right: 10px; /* 图片和文字之间的间距 */
+ }
+ .text-group_3 {
+ margin-left: 10px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 16px;
+ }
+}
+.container-weiqiandao {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ gap: 10px; /* 调整这个值来设置间隔 */
+}
+
+.item-weiqiandao {
+ flex: 1; /* 确保每个子 div 占据相同的高度 */
+ background-color: lightblue; /* 可以根据需要调整背景颜色 */
+ padding: 10px; /* 添加内边距以美化显示 */
+}
+.container-body {
+ display: flex;
+ justify-content: center; /* 水平居中 */
+ align-items: center; /* 垂直居中 */
+ // padding: 10px;
+}
+.container-body-text {
+ text-align: center; /* 文本水平居中 */
+ white-space: nowrap; /* 防止文本换行 */
+ overflow: hidden; /* 隐藏溢出内容 */
+ text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
+ width: 100%; /* 确保宽度为父容器的100% */
+ font-weight: 600;
+ font-size: 50px;
+ color: #d58e56;
+}
+.grid-container-text {
+ display: flex;
+ width: 100%; /* 容器宽度可以根据需要调整 */
+ padding-left: 10px;
+}
+.left-div {
+ flex-grow: 1; /* 自适应宽度，占满剩余空间 */
+ white-space: nowrap; /* 防止文字自动换行 */
+ overflow: hidden; /* 隐藏超出容器宽度的内容 */
+ text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
+ width: 100%; /* 设置一个具体的宽度或确保有继承宽度 */
+ font-weight: 600;
+}
+
+.right-div {
+ width: 50px; /* 固定宽度 */
+ font-size: 16px;
+ display: flex;
+ justify-content: center; /* 水平居中 */
+ align-items: center; /* 垂直居中 */
+}
+/* 设置你的div占据整个高度，并在需要时显示滚动条 */
+.scrollable-container {
+ height: 100%;
+ overflow-y: auto; /* 当内容超出容器高度时，垂直方向上显示滚动条 */
+}
+
+/* 可选：给ul设置一些样式 */
+.scrollable-container ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.scrollable-container li {
+ // padding: 4px;
+ font-weight: 600;
+ // border-bottom: 1px solid #ddd;
+}
+
+.cont_parent {
+ height: 100%;
+ display: grid;
+ grid-template-rows: repeat(3, 1fr); /* 将容器划分为3行，每行占1份 */
+ gap: 5px; /* 子元素之间的间隙（可选） */
+}
+
+.cont_child {
+ border: 1px solid #ccc;
+ padding: 10px;
+ overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
+ box-sizing: border-box; /* 确保 padding 和 border 不增加实际高度 */
+}
+.scrollable-text {
+ white-space: nowrap;
+ overflow-x: auto;
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+ // border: 1px solid #e4e4e4;
+ // font-size: 16px;
+}
+.custom-dialog {
+ border-radius: 10px;
+}
+
+.my-header {
+ background-color: #ff6b6b; /* 标题背景颜色 */
+ color: white; /* 标题文字颜色 */
+ font-size: 18px; /* 标题字体大小 */
+ padding-top: 1px; /* 内边距 */
+ padding-bottom: 1px; /* 内边距 */
+ text-align: center; /* 文字居中 */
+ border-top-left-radius: 10px; /* 左上角圆角 */
+ border-top-right-radius: 10px; /* 右上角圆角 */
+}
+.el-dialog {
+ padding: 0;
+ padding-bottom: 10px;
+}
+</style>
diff --git a/src/views/deviceWindoes2.vue b/src/views/deviceWindoes2.vue
index cb96448..b3f6724 100644
--- a/src/views/deviceWindoes2.vue
+++ b/src/views/deviceWindoes2.vue
@@ -1,8 +1,10 @@
<template>
<div class="divice">
<!-- {{数据初始化}} -->
- <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名">
- <div id="toubu" class="toubu" style="height: 11%">
+ <el-carousel v-if="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
+ <el-carousel-item :style="{ height: pageHeight + 'px'}">
+ <div class="youzhiliao" style="height: 100%" >
+ <div class="toubu" style="height: 11%">
<el-row
v-if="deviceData.患者姓名 !== ''"
style="
@@ -50,7 +52,7 @@
style="margin-left: 2%; font-size: 200%; height: 100%"
>{{ deviceData.签到号 }}</span
>
-
+
<div
style="
position: absolute;
@@ -90,779 +92,292 @@
</div>
</el-row>
</div>
- <el-carousel v-if="contentHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
- <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }">
- <div :style="{ height: (contentHeight - 10) + 'px' }">
- <div class="chongjian" style="height: 50%;">
- <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="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">
<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">
- <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>
- </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">
- <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>
- </el-row>
- <!-- 签到未签到状态 -->
- <div
- class="container"
- v-if="Number(deviceData.透析状态) < 1"
- style="height: 50%"
+ class="item"
+ style="background-color: #ffffff; height: 97%"
>
- <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;
- "
- >
- <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 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 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
- >
- </div>
+ <div
+ style="
+ height: 75%;
+ text-align: center;
+ font-weight: 600;
+ font-size: 65px;
+ color: #70a3dd;
+ "
+ class="grid-container"
+ >
+ {{ 床旁血压计.sbp }} / {{ 床旁血压计.dbp }}
</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>
+ </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
- style="
- height: 90%;
- text-align: center;
- font-weight: 600;
- font-size: 38px;
- color: #333333;
- "
- class="grid-container"
+ class="container-body"
+ style="height: calc(100% - 30px); width: 100%"
>
- <div>
- <span style="color: #303133">{{
- jgTime4(deviceData.iot_透析时间)
- }}</span
- >/<span
- >{{ deviceData.透析处方的时长_小时 }}:{{
- deviceData.透析处方的时长_分钟
+ <div
+ class="container-body-text"
+ style="color: #3a75b8; font-size: 30px"
+ >
+ <span
+ style="font-size: 30px"
+ v-if="deviceData.透析方案 === 'HDF'"
+ >
+ {{
+ 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"
- />
+ {{ deviceData.透析方案 }}
</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
+ 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
- style="
- height: 90%;
- text-align: center;
- font-weight: 600;
- font-size: 38px;
- color: #8079cb;
- "
class="grid-container"
+ style="
+ height: calc(100% - 30px);
+ width: 100%;
+ font-size: 28px;
+ "
>
- <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
+ 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>
- <el-progress
- :text-inside="true"
- :stroke-width="15"
- :show-text="false"
- color="#70CAAE"
- :percentage="
- (Number(deviceData.iot_当前脱水量) /
- Number(deviceData.处方脱水量)) *
- 100
- "
- />
+ </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>
- </template>
- </el-row>
- </div>
+ <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>
<!-- 治疗中 -->
- <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>
- </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%">
+ <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="
- height: 100%;
- padding-bottom: 10px;
- gap: 10px; /* 设置所有方向的间距为10px */
- "
+ 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"
+ :src="zlms"
/>
- <span class="text-group_3">异常指标</span>
+ <span class="text-group_3">治疗模式</span>
</div>
</div>
<div
@@ -871,247 +386,817 @@
text-align: center;
font-weight: 600;
font-size: 50px;
- color: #333333;
- color: #ca7070;
- overflow: hidden;
- overflow-y: auto;
+ color: #d58e56;
"
+ class="grid-container"
>
- <el-row style="font-size: 20px">
- <el-col
- v-for="(row, index) in deviceData.异常检验指标"
- :span="12"
- style="font-weight: 700"
- :key="index"
+ <div>
+ <span
+ style="font-size: 30px"
+ v-if="deviceData.透析方案 === 'HDF'"
>
- {{ getItemName(row?.项目名称) }}
- <b
- v-if="row?.结果标记 === 'g'"
- style="font-weight: bold"
- >⬆</b
- >
- <b v-else style="font-weight: bold">⬇</b>
- </el-col>
- </el-row>
+ {{
+ deviceData?.置换方式 === "前置换" ? "前" : "后"
+ }}</span
+ >
+ {{ deviceData.透析方案 }}
+ </div>
</div>
</div>
</el-col>
- <el-col :span="18" style="height: 100%; width: 100%">
+ <el-col class="itemboy" style="height: 100%" :span="7">
<div
class="item"
- style="
- height: 100%;
- padding-bottom: 10px; /* 设置所有方向的间距为10px */
- "
+ style="background-color: #ffffff; height: 97%"
>
- <div style="height: 100%">
- <div
- v-if="Number(deviceData.透析状态) > 1"
- :ref="'echartsDiv' + deviceData.设备编号"
- style="height: 97%"
- ></div>
+ <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: 20%;
- width: 100%;
- background: #fef0e1;
- border-radius: 8px;
- font-size: 30px;
- "
+ class="container"
+ v-if="Number(deviceData.透析状态) < 1"
+ style="height: 50%"
>
- <div style="height: 100%">
+ <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-y: auto;
+ "
+ >
+ <el-row style="font-size: 20px">
+ <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
+ >
+ </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
+ "
+ 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
+ >
+ </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>
+ </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>
+ </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"
+ style="
+ height: 100%;
+ padding-left: 20px;
+ background-color: #ffffff;
+ border-radius: 8px;
+ "
>
<img
style="width: 25px"
referrerpolicy="no-referrer"
- src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
+ :src="tsl"
/>
-
+ <span class="text-group_3">平均脱水量：</span>
<span
- class="text-group_3"
- v-if="isinitXy && Number(deviceData.透析状态) >= 1"
+ style="color: #333333; font-weight: 600; font-size: 25px"
+ >{{ deviceData.最近平均脱水量 }}L</span
>
- 最近一次， 高压：{{ 床旁血压计.sbp }}，低压：
- {{ 床旁血压计.dbp }}， 心率： {{ 床旁血压计.pulseRate }}
- </span>
- <span class="text-group_3" v-else>暂无通知消息哦</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-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>
- </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%;
+ font-size: 25px;
+ "
+ >
<div
- class="item-weiqiandao"
- style="background: #ffedd2; border-radius: 8px"
+ class="grid-container-text"
+ style="color: #a78718"
+ v-for="(item, index) in deviceData.穿刺针列表"
+ :style="{
+ fontSize:
+ deviceData.穿刺针列表.length > 1 ? '22px' : '28px',
+ }"
+ :key="index"
>
- <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 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="item-weiqiandao"
- style="background: #ffedd2; border-radius: 8px"
+ class="grid-container-text"
+ style="color: #1d77bd"
+ v-for="(item, index) in deviceData.护理包列表"
+ :style="{
+ fontSize:
+ deviceData.护理包列表.length > 1 ? '22px' : '28px',
+ }"
+ :key="index"
>
- <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 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>
- </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>
+ </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 :style="{ height: pageHeight + 'px'}">
+ <div class="toubu" style="height: 11%">
+ <el-row
+ v-if="deviceData.患者姓名 !== ''"
+ style="
+ font-weight: 900;
+ color: #ffffff;
+ width: 100%;
+ height: 100%;
+ line-height: 100%;
+ padding: 20px;
+ position: relative;
+ "
+ >
+ <span
+ class="grid-container"
+ style="font-size: 300%; height: 100%"
+ v-if="deviceData.设备名称 !== null"
+ >{{ deviceData.设备名称 }}
+ </span>
+ <span
+ class="grid-container"
+ @click="initTupiao"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.患者姓名 }}
+ </span>
+
+ <span
+ class="grid-container"
+ v-if="deviceData.年龄 !== null"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.年龄 }}岁</span
+ >
+ <span
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.性别 }}</span
+ >
+ <span
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ patientSourceAndCode }}</span
+ >
+ <span
+ v-if="deviceData.签到号"
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.签到号 }}</span
+ >
+
+ <div
+ style="
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 5px;
+ height: 100%;
+ "
+ >
+ <div
+ class="grid-container"
+ style="display: flex; align-items: center; padding-right: 20px"
+ >
+ <span
+ style="
+ display: inline-block;
+ margin-right: 15px;
+ font-size: 30px;
+ color: #f56c6c;
+ "
+ >{{ 倒计时显示 }}</span
+ >
+ <span style="display: inline-block; margin-right: 15px">
+ <img @click="dingshiShow" :src="dingshi" alt="Image 1" />
+ </span>
+ <span style="display: inline-block">
+ <img
+ @click="centerDialogVisible = true"
+ :src="shezhi"
+ alt="Image 2"
+ />
+ </span>
+ </div>
+ </div>
+ </el-row>
+ </div>
+ <DoctorAdvice :height="'89%'" :list="deviceData.透析单医嘱列表" />
</el-carousel-item>
</el-carousel>
- </div>
+
<div v-else style="height: 100%">
<div class="toubu" style="height: 11%">
<el-row
@@ -1131,7 +1216,7 @@
v-if="deviceData.设备名称 !== null"
>{{ deviceData.设备名称 }}
</span>
-
+
<div
style="
position: absolute;
@@ -1168,7 +1253,7 @@
"
>{{ 倒计时显示 }}</span
>
-
+
<span style="display: inline-block; margin-right: 15px">
<img @click="dingshiShow" :src="dingshi" alt="Image 1" />
</span>
@@ -1318,7 +1403,7 @@
</div>
</div>
<!-- <div class="container-weiqiandao" >
-
+
<div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;height: 100%;">
<div class="container-cord" style="height: 30px;">
<img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
@@ -1602,7 +1687,7 @@
<span class="text-gray-500">分钟 </span>
</el-col>
</el-form-item>
-
+
<el-form-item label="提醒内容：">
<el-input
v-if="!formInline.selectOpen"
@@ -1698,7 +1783,7 @@
import tdddbaojing from "../assets/tzddd.mp3";
import tzxllbaojing from "../assets/tzxll.mp3";
import cgbaojing from "../assets/cg.mp3";
-
+
import {
computed,
getCurrentInstance,
@@ -1708,14 +1793,12 @@
watch,
onUnmounted,
onBeforeUnmount,
- nextTick
} from "vue";
import { Local } from "../utils/storage";
import * as echarts from "echarts";
import { jgTime4 } from "../utils/formatTime";
import { setTimeoutAlert } from "../utils/httpApi";
import DoctorAdvice from '../components/doctorAdvice/index.vue';
-
// 创建 Audio 对象，指向 public 目录下的音频文件
const alarmSound = new Audio(alertbaojin); //一般报警声音
const alarmSoundCXY = new Audio(cxybaojing); //测血压报警
@@ -1730,8 +1813,7 @@
alarmSoundTZxll.loop = true; // 循环播放
const alarmSoundCG = new Audio(cgbaojing); //冲管
alarmSoundCG.loop = true; // 循环播放
-
-const isHeightSet = ref(false);
+
// 控制播放状态的变量
const isPlaying = ref(false);
// 切换播放/暂停的方法
@@ -1806,7 +1888,7 @@
const sseData = ref({});
// sse状态
const readyState = ref({ key: 0, value: "正在链接中" });
-
+
const deviceCode = ref("");
const shishiTime = ref(new Date());
//有没有推送过血压如果有 就一直会显示血压数据
@@ -1825,7 +1907,7 @@
selectType: "",
selectOpen: false,
});
-
+
const 当前客户耗材集合 = ref({});
const deviceData = ref({
患者来源: null,
@@ -2006,7 +2088,7 @@
const wd = ref("");
const ls = ref("");
const ddd = ref("");
-const contentHeight = ref(0); // 中间内容的高度
+const pageHeight = ref(0);
const isShowXY = computed(() => {
if (床旁血压计.value.zuihouTime > shishiTime.value) {
return true;
@@ -2031,11 +2113,9 @@
() => {
if (床旁血压计.value.zuihouTime > shishiTime.value) {
} else {
- nextTick(() => {
- setTimeout(() => {
- initTupiao();
- }, 500);
- });
+ setTimeout(() => {
+ initTupiao();
+ }, 500);
}
}
);
@@ -2089,7 +2169,7 @@
});
// centerDialogVisible2.value=false
};
-
+
// 状态颜色
const zhuangtaiColor = computed(() => {
const list = deviceData.value.设备状态列表;
@@ -2148,7 +2228,7 @@
}
});
}
-
+
return zhuantaiStr;
});
const isbaioji = computed(() => {
@@ -2189,7 +2269,7 @@
backgroundSize: "cover", // 根据需要调整
backgroundPosition: "center", // 根据需要调整
};
-
+
watch(
() => txzt.value,
() => {
@@ -2236,13 +2316,13 @@
let hours = Math.floor(totalSeconds / 3600);
let minutes = Math.floor((totalSeconds % 3600) / 60);
let seconds = totalSeconds % 60;
-
+
// 补零函数
const pad = (num) => String(num).padStart(2, "0");
-
+
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
};
-
+
const 倒计时 = ref(-100);
const 倒计时显示 = ref("00:00:00");
const 倒计时告警文本 = ref("");
@@ -2306,12 +2386,8 @@
centerDialogVisible.value = true;
}
intervalId = setInterval(updateTime, 1000);
- const width = window.innerWidth;
-const height = window.innerHeight;
-
-console.log('可视区域宽度:', width);
-console.log('可视区域高度:', height);
-
+ const height = window.innerHeight;
+ pageHeight.value = height;
});
// 在组件卸载前清除定时器，防止内存泄漏
onBeforeUnmount(() => {
@@ -2319,7 +2395,7 @@
clearInterval(intervalId);
}
});
-
+
const saveSet = () => {
if (deviceCode.value) {
centerDialogVisible.value = false;
@@ -2330,7 +2406,7 @@
ElMessage.warning("请先输入设备编号");
}
};
-
+
/**
* 刷新页面
*/
@@ -2340,10 +2416,10 @@
const onFileChange = async (event: Event) => {
const inputElement = event.target as HTMLInputElement;
if (!inputElement.files || inputElement.files.length === 0) return;
-
+
const file = inputElement.files[0];
const reader = new FileReader();
-
+
reader.onload = async (e) => {
if (e.target && typeof e.target.result === "string") {
try {
@@ -2371,7 +2447,7 @@
}
}
};
-
+
reader.readAsDataURL(file);
};
const shaoma = () => {};
@@ -2383,43 +2459,16 @@
if (!xiaoduzhuangti.value) {
initTupiao();
}
- }, 1000);
+ }, 500);
}
);
-
-watch(() => deviceData.value.患者姓名, (newVal: string, oldVal: string) => {
- console.log("患者姓名变化:", newVal)
-
- if (newVal && oldVal !== newVal) {
- isHeightSet.value = false // 重置标识
- contentHeight.value = 0; // 清空高度，强制更新 el-carousel
-
- setTimeout(() => {
- if (isHeightSet.value) return // 如果已设置过就不重复执行
-
- const windowHeight = window.innerHeight
- const toubu = document.getElementById('toubu')
- const toubuHeight = toubu ? toubu.offsetHeight : 0
-
- const newHeight = windowHeight - toubuHeight
-
- if (newHeight !== contentHeight.value) {
- contentHeight.value = newHeight
- console.log("更新 contentHeight.value: ", contentHeight.value)
- }
-
- isHeightSet.value = true
- }, 500)
- }
-})
-
const 数据初始化 = ref(false);
//创建链接对象
const creatSource = () => {
// http://testbs.ihemodialysis.com/sse/sseEvent
// const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
数据初始化.value = true;
- const test = import.meta.env.VITE_SSE_BASE_URL;
+ const test = "https://backend.ihemodialysis.com/sse/sseEvent/";
const stateArr = [
{ key: 0, value: "正在链接中" },
{ key: 1, value: "已经链接并且可以通讯" },
@@ -2480,13 +2529,9 @@
dbp: dataBody?.床旁血压结果?.dbp,
zuihouTime: date,
};
-
- nextTick(() => {
- setTimeout(() => {
- initTupiao();
- }, 500);
- });
-
+ setTimeout(() => {
+ initTupiao();
+ }, 500);
} else if (dataBody.推送类型 === "中央监控大屏信息") {
数据初始化.value = false;
// loading.close()
@@ -2515,9 +2560,9 @@
当前客户耗材集合.value = dataBody?.使用耗材字典;
}
}
-
+
deviceData.value.设备变化 = Date.now() + "DEV";
-
+
deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表;
console.log(deviceData.value.设备变化);
deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表;
@@ -2597,7 +2642,7 @@
],
},
},
-
+
{
name: "",
type: "line",
@@ -2725,14 +2770,9 @@
xAxisData.push(1);
}
try {
- let myChart = null;
-
- if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
- myChart = echarts.init(
- proxy.$refs["echartsDiv" + deviceData.value.设备编号]
- );
- }
-
+ const myChart = echarts.init(
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ );
const option = {
// backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
backgroundColor: "#ffffff",
@@ -2769,23 +2809,16 @@
},
series: seriesData,
};
- if (myChart) {
- myChart.setOption(option);
- }
+ myChart.setOption(option);
} catch (e) {
console.log("图标渲染异常异常");
}
} else {
try {
- let myChart = null;
-
- if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
- myChart = echarts.init(
- proxy.$refs["echartsDiv" + deviceData.value.设备编号]
- );
- }
-
-
+ const myChart = echarts.init(
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ );
+
const option = {
backgroundColor:
床旁血压计.value.zuihouTime > shishiTime.value
@@ -2819,11 +2852,8 @@
},
series: [],
};
- if (myChart) {
- myChart.setOption(option);
- }
+ myChart.setOption(option);
} catch (e) {
- console.log("图表渲染异常异常: ", e);
console.log(
"异常",
proxy.$refs["echartsDiv" + deviceData.value.设备编号]
@@ -2831,6 +2861,7 @@
}
}
} else if (deviceData.value.患者姓名 === "") {
+ console.log("2222");
const tbdata1 = [];
const tbdata2 = [];
const tbdata3 = [];
@@ -2844,7 +2875,7 @@
tbdata1.push(Number(wdMode?.finalText));
wd.value = Number(wdMode?.finalText);
}
-
+
// 血液流速
const xymode = e.属性列表.find((l) => {
return l.identifierText === "血液流速";
@@ -2853,7 +2884,7 @@
tbdata2.push(Number(xymode?.finalText));
ls.value = Number(xymode?.finalText);
}
-
+
// 电导度
const dddMode = e.属性列表.find((l) => {
return l.identifierText === "透析液电导度";
@@ -2866,28 +2897,15 @@
}
try {
console.log("渲染设备");
- let myChart1 = null;
- let myChart2 = null;
- let myChart3 = null;
-
- if (proxy.$refs["echartsDivwd" + deviceData.value.设备编号]) {
- myChart1 = echarts.init(
- 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 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.设备编号]
+ );
const option1 = {
// backgroundColor: textcolor.value,
tooltip: {
@@ -3010,19 +3028,13 @@
},
],
};
- if (myChart1) {
- myChart1.setOption(option1);
- }
- if (myChart2) {
- myChart2.setOption(option2);
- }
- if (myChart3) {
- myChart3.setOption(option3);
- }
+ myChart1.setOption(option1);
+ myChart2.setOption(option2);
+ myChart3.setOption(option3);
} catch (e) {
console.log("图标渲染异常异常");
}
-
+
console.log(deviceData.value);
}
};
@@ -3116,17 +3128,17 @@
// border-bottom:8px solid red ;
}
}
-
+
/* 应用闪烁动画 */
.blink {
// float: left; /* 让div浮动到左边 */
width: 100%;
height: 100%;
animation: blink 2s infinite; /* 每秒闪烁一次，无限次数 */
-
+
// border-left:5px solid red ;
// border-right:5px solid red ;
-
+
// background: red;
cursor: pointer;
// margin-bottom: 100%;
@@ -3153,7 +3165,7 @@
align-items: center; /* 垂直居中 */
height: 100vh; /* 根据需要调整高度 */
}
-
+
.centered-text {
font-weight: 600;
/* 其他样式 */
@@ -3179,7 +3191,7 @@
height: 100%;
gap: 10px; /* 调整这个值来设置间隔 */
}
-
+
.item-weiqiandao {
flex: 1; /* 确保每个子 div 占据相同的高度 */
background-color: lightblue; /* 可以根据需要调整背景颜色 */
@@ -3214,7 +3226,7 @@
width: 100%; /* 设置一个具体的宽度或确保有继承宽度 */
font-weight: 600;
}
-
+
.right-div {
width: 50px; /* 固定宽度 */
font-size: 16px;
@@ -3227,27 +3239,27 @@
height: 100%;
overflow-y: auto; /* 当内容超出容器高度时，垂直方向上显示滚动条 */
}
-
+
/* 可选：给ul设置一些样式 */
.scrollable-container ul {
list-style: none;
padding: 0;
margin: 0;
}
-
+
.scrollable-container li {
// padding: 4px;
font-weight: 600;
// border-bottom: 1px solid #ddd;
}
-
+
.cont_parent {
height: 100%;
display: grid;
grid-template-rows: repeat(3, 1fr); /* 将容器划分为3行，每行占1份 */
gap: 5px; /* 子元素之间的间隙（可选） */
}
-
+
.cont_child {
border: 1px solid #ccc;
padding: 10px;
@@ -3266,7 +3278,7 @@
.custom-dialog {
border-radius: 10px;
}
-
+
.my-header {
background-color: #ff6b6b; /* 标题背景颜色 */
color: white; /* 标题文字颜色 */
@@ -3281,4 +3293,4 @@
padding: 0;
padding-bottom: 10px;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0