From 4d9be1e572745750541be8be52a3cb30e1a8408f Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 12 九月 2025 16:01:07 +0800
Subject: [PATCH] ID1766-封装axios公共模块
---
src/views/deviceWindoes2.vue | 2518 ++++++++++++++++++++++++++++++++---------------------------
1 files changed, 1,355 insertions(+), 1,163 deletions(-)
diff --git a/src/views/deviceWindoes2.vue b/src/views/deviceWindoes2.vue
index 0322e29..b29f928 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-show="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
+ <el-carousel-item :style="{ height: pageHeight + 'px'}">
+ <div class="youzhiliao" style="height: 100%" >
+ <div class="toubu" style="height: 11%">
<el-row
v-if="deviceData.患者姓名 !== ''"
style="
@@ -24,22 +26,33 @@
<span
class="grid-container"
@click="initTupiao"
- style="margin-left: 5%; font-size: 350%; height: 100%"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
>{{ deviceData.患者姓名 }}
</span>
<span
class="grid-container"
v-if="deviceData.年龄 !== null"
- style="margin-left: 5%; font-size: 300%; height: 100%"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
>{{ deviceData.年龄 }}岁</span
>
<span
class="grid-container"
- style="margin-left: 5%; font-size: 300%; height: 100%"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
>{{ deviceData.性别 }}</span
>
-
+ <span
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ patientSourceAndCode }}</span
+ >
+ <span
+ v-if="deviceData.签到号"
+ class="grid-container"
+ style="margin-left: 2%; font-size: 200%; height: 100%"
+ >{{ deviceData.签到号 }}</span
+ >
+
<div
style="
position: absolute;
@@ -79,777 +92,292 @@
</div>
</el-row>
</div>
- <el-carousel v-if="contentHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0">
- <el-carousel-item :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;
- font-size: 50px;
- color: #333333;
- color: #ca7070;
- "
- >
- <el-row style="font-size: 30px">
- <el-col
- v-for="(row, index) in deviceData.异常检验指标"
- :span="8"
- style="font-weight: 700"
- :key="index"
- >
- {{ getItemName(row?.项目名称) }}
- <b
- v-if="row?.结果标记 === 'g'"
- style="font-weight: bold"
- >⬆</b
- >
- <b v-else style="font-weight: bold">⬇</b>
- </el-col>
- </el-row>
+ <div 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: 50px;
- 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
@@ -858,245 +386,818 @@
text-align: center;
font-weight: 600;
font-size: 50px;
- color: #333333;
- color: #ca7070;
+ color: #d58e56;
"
+ class="grid-container"
>
- <el-row style="font-size: 30px">
- <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-show="Number(deviceData.透析状态) > 0"
+ >
+ <el-row style="height: 100%; padding: 0px 20px 10px 20px">
+ <!-- 未签到 -->
+ <div
+ v-show="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-show="Number(deviceData.透析状态) >= 1" style="height: 80%; width: 100%; padding-right: 0px">
+ <div style="height: 100%">
+ <el-row
+ style="height: 30%; padding: 0px 0px 10px 0px"
+ :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 v-show="Number(deviceData.透析状态) > 1" class="zcc_test" style="height: 100%">
+ <div
+ :ref="'echartsDiv' + deviceData.设备编号"
+ :class="'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-show="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>
+ </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-show="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 v-show="!deviceData.患者姓名" style="height: 100%">
<div class="toubu" style="height: 11%">
<el-row
style="
@@ -1115,7 +1216,7 @@
v-if="deviceData.设备名称 !== null"
>{{ deviceData.设备名称 }}
</span>
-
+
<div
style="
position: absolute;
@@ -1152,7 +1253,7 @@
"
>{{ 倒计时显示 }}</span
>
-
+
<span style="display: inline-block; margin-right: 15px">
<img @click="dingshiShow" :src="dingshi" alt="Image 1" />
</span>
@@ -1302,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"
@@ -1538,8 +1639,8 @@
<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 @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>
@@ -1586,7 +1687,7 @@
<span class="text-gray-500">分钟 </span>
</el-col>
</el-form-item>
-
+
<el-form-item label="提醒内容：">
<el-input
v-if="!formInline.selectOpen"
@@ -1606,6 +1707,9 @@
<el-option label="测血压" value="测血压" />
<el-option label="开超滤" value="开超滤" />
<el-option label="给药" value="给药" />
+ <el-option label="调电导度" value="调电导度" />
+ <el-option label="调血流量" value="调血流量" />
+ <el-option label="冲管" value="冲管" />
</el-select>
</el-form-item>
<el-form-item label="定型文：">
@@ -1672,8 +1776,14 @@
import cljd from "../img/cljd.png";
import tizhong from "../img/tizhong.png";
import { EventSourcePolyfill } from "event-source-polyfill";
-import alertbaojin from '../assets/alert.wav'
-
+import 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,
@@ -1683,7 +1793,7 @@
watch,
onUnmounted,
onBeforeUnmount,
- nextTick
+ nextTick,
} from "vue";
import { Local } from "../utils/storage";
import * as echarts from "echarts";
@@ -1691,25 +1801,83 @@
import { setTimeoutAlert } from "../utils/httpApi";
import DoctorAdvice from '../components/doctorAdvice/index.vue';
// 创建 Audio 对象，指向 public 目录下的音频文件
-const alarmSound = new Audio(alertbaojin)
-
+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 isPlaying = ref(false)
+const isPlaying = ref(false);
// 切换播放/暂停的方法
const toggleAlarm = () => {
+ console.log('-------------')
+ console.log('看看是打开还是暂停')
if (isPlaying.value) {
- alarmSound.pause()
+ 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 {
- alarmSound.currentTime = 0 // 从头开始播放
- alarmSound.play().catch((err) => {
- console.error('播放失败:', err)
- })
+ 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
-}
-// 语音播报
-import Speech from "speak-tts";
-const speech = ref(null);
+ isPlaying.value = !isPlaying.value;
+};
const { proxy } = getCurrentInstance() as any;
// 在需要使用的组件中引入
import { ChatDotSquare } from "@element-plus/icons-vue";
@@ -1722,6 +1890,10 @@
// sse状态
const readyState = ref({ key: 0, value: "正在链接中" });
+// 血压的echart实例
+let bloodPressureEchart: echarts.ECharts | null = null
+let observer;
+
const deviceCode = ref("");
const shishiTime = ref(new Date());
//有没有推送过血压如果有 就一直会显示血压数据
@@ -1740,9 +1912,12 @@
selectType: "",
selectOpen: false,
});
-
+
const 当前客户耗材集合 = ref({});
const deviceData = ref({
+ 患者来源: null,
+ 患者门诊住院号: '',
+ 签到号: '',
透析单医嘱列表: [],
iot_传输时间: "2025-01-10 19:15:24",
iot_当前脱水量: 2.04,
@@ -1918,7 +2093,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;
@@ -1926,16 +2101,27 @@
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);
- });
+ setTimeout(() => {
+ console.log("初始化血压图表222222");
+ initTupiao();
+ }, 500);
}
}
);
@@ -1959,7 +2145,6 @@
};
// 保存定时任务
const setDingshi = () => {
-
console.log("--------------------");
console.log(formInline.value);
console.log(deviceCode.value);
@@ -1970,7 +2155,7 @@
} else {
alertText = formInline.value.alertText;
}
- if (alertText==='') {
+ if (alertText === "") {
ElMessage.warning("设置报警消息不能为空");
return true;
}
@@ -1983,14 +2168,14 @@
if (res.data === "OK") {
倒计时.value = minutes * 60;
centerDialogVisible2.value = false;
- 倒计时告警文本.value = alertText
+ 倒计时告警文本.value = alertText;
} else {
ElMessage.warning(res.message);
}
});
// centerDialogVisible2.value=false
};
-
+
// 状态颜色
const zhuangtaiColor = computed(() => {
const list = deviceData.value.设备状态列表;
@@ -2049,7 +2234,7 @@
}
});
}
-
+
return zhuantaiStr;
});
const isbaioji = computed(() => {
@@ -2090,7 +2275,7 @@
backgroundSize: "cover", // 根据需要调整
backgroundPosition: "center", // 根据需要调整
};
-
+
watch(
() => txzt.value,
() => {
@@ -2137,36 +2322,67 @@
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);
- 倒计时.value--;
- } else if(倒计时.value!==-100) {
+ } else if (倒计时.value > -5) {
倒计时显示.value = "";
// 只有没触发的时候才触发他
- if(centerDialogVisible3.value===false){
- centerDialogVisible3.value = true;
- 关闭弹框警告();
- // 播报警告文本(倒计时告警文本.value);
- toggleAlarm()
- }
-
- }else{
+ if (centerDialogVisible3.value === false) {
+ centerDialogVisible3.value = true;
+ 关闭弹框警告();
+ // toggleAlarm();
+ }
+ } else {
倒计时显示.value = "";
}
};
let intervalId = null;
+watch(()=>centerDialogVisible3.value,()=>{
+ if(centerDialogVisible3.value===false){
+ alarmSound.pause();
+ alarmSoundCXY.pause();
+ alarmSoundKCL.pause();
+ alarmSoundGY.pause();
+ alarmSoundTZDDD.pause();
+ alarmSoundTZxll.pause();
+ alarmSoundCG.pause();
+ }else{
+ if (倒计时告警文本.value === "测血压") {
+ alarmSoundCXY.play();
+ }
+ else if (倒计时告警文本.value === "冲管") {
+ alarmSoundCG.play();
+ }
+ else if (倒计时告警文本.value === "开超滤") {
+ alarmSoundKCL.play();
+ }
+ else if (倒计时告警文本.value === "给药") {
+ alarmSoundGY.play();
+ }
+ else if (倒计时告警文本.value === "调电导度") {
+ alarmSoundTZDDD.play();
+ }
+ else if (倒计时告警文本.value === "调血流量") {
+ alarmSoundTZxll.play();
+ }
+ else {
+ alarmSound.play();
+ }
+ }
+})
onMounted(() => {
let devcieCode = Local.get("devcieCode");
if (devcieCode) {
@@ -2176,12 +2392,9 @@
centerDialogVisible.value = true;
}
intervalId = setInterval(updateTime, 1000);
- speech.value = new Speech();
- speech.value?.setLanguage("zh-CN");
- speech.value?.init().then(() => {
- console.log("语音初 始化成功");
- // test()
- });
+ const height = window.innerHeight;
+ pageHeight.value = height;
+
});
// 在组件卸载前清除定时器，防止内存泄漏
onBeforeUnmount(() => {
@@ -2189,7 +2402,7 @@
clearInterval(intervalId);
}
});
-
+
const saveSet = () => {
if (deviceCode.value) {
centerDialogVisible.value = false;
@@ -2200,7 +2413,7 @@
ElMessage.warning("请先输入设备编号");
}
};
-
+
/**
* 刷新页面
*/
@@ -2210,10 +2423,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 {
@@ -2241,7 +2454,7 @@
}
}
};
-
+
reader.readAsDataURL(file);
};
const shaoma = () => {};
@@ -2251,33 +2464,19 @@
console.log(deviceData.value.设备名称, "子组件变量");
setTimeout(() => {
if (!xiaoduzhuangti.value) {
+ console.log("初始化血压图表111111");
initTupiao();
}
- }, 1000);
- }
-);
-
-watch(() => deviceData.value.患者姓名, (newVal: string) => {
- console.log("患者姓名变化:", newVal);
- if (newVal) {
- contentHeight.value = 0; // 重置高度
- setTimeout(() => {
- const windowHeight = window.innerHeight
- const toubu = document.getElementById('toubu')
- const toubuHeight = toubu ? toubu.offsetHeight : 0
- contentHeight.value = windowHeight - toubuHeight
- console.log("contentHeight.value: ", contentHeight.value)
}, 500);
}
-})
-
+);
const 数据初始化 = ref(false);
//创建链接对象
const creatSource = () => {
// http://testbs.ihemodialysis.com/sse/sseEvent
// const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
数据初始化.value = true;
- const test = "https://backend.ihemodialysis.com/sse/sseEvent/";
+ const test = import.meta.env.VITE_SSE_BASE_URL;
const stateArr = [
{ key: 0, value: "正在链接中" },
{ key: 1, value: "已经链接并且可以通讯" },
@@ -2314,12 +2513,15 @@
if (dataBody.倒计时?.提醒文本) {
倒计时.value = dataBody.倒计时?.设定提醒倒计时;
console.log("设置了倒计时值", 倒计时.value);
- if (倒计时.value <= 0 && 倒计时.value >= -60&& centerDialogVisible3.value===false) {
+ if (
+ 倒计时.value <= 0 &&
+ 倒计时.value >= -60 &&
+ centerDialogVisible3.value === false
+ ) {
centerDialogVisible3.value = true;
倒计时告警文本.value = dataBody.倒计时?.提醒文本;
关闭弹框警告();
- 播报警告文本(倒计时告警文本.value);
- toggleAlarm()
+ // toggleAlarm();
} else if (倒计时.value <= -60) {
centerDialogVisible3.value = false;
}
@@ -2335,19 +2537,31 @@
dbp: dataBody?.床旁血压结果?.dbp,
zuihouTime: date,
};
-
- nextTick(() => {
- setTimeout(() => {
- initTupiao();
- }, 500);
- });
-
+ setTimeout(() => {
+ console.log("初始化血压图表444444");
+ initTupiao();
+ }, 500);
} else if (dataBody.推送类型 === "中央监控大屏信息") {
数据初始化.value = false;
// loading.close()
console.log(Date.now() + "DEV");
if (dataBody?.透析状态) {
deviceData.value = dataBody?.透析状态;
+ if ('透析单医嘱列表' in dataBody.透析状态 && 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.患者姓名 = "";
@@ -2355,15 +2569,12 @@
当前客户耗材集合.value = dataBody?.使用耗材字典;
}
}
-
+
deviceData.value.设备变化 = Date.now() + "DEV";
-
+
deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表;
console.log(deviceData.value.设备变化);
deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表;
- if ('透析单医嘱列表' in dataBody.透析状态) {
- deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表;
- }
}
}
}
@@ -2384,6 +2595,8 @@
};
isinitXy.value = true;
setTimeout(() => {
+ console.log("初始化血压图表333333");
+
initTupiao();
}, 500);
};
@@ -2391,56 +2604,9 @@
setTimeout(function () {
console.log("30秒已过，关闭报警设置弹框。");
centerDialogVisible3.value = false;
- toggleAlarm()
- 倒计时.value=-100
+ 倒计时.value = -100;
}, 30000); // 30000 毫秒 = 30 秒
};
-const 播报警告文本 = (tex) => {
- if (centerDialogVisible3.value) {
- console.log(centerDialogVisible3.value,'播报')
- speech.value
- .speak({
- text: tex,
- listeners: {
- //开始播放
- onstart: () => {
- console.log("开始播报");
- },
- //判断播放是否完毕
- onend: () => {
- console.log("播报完成");
- },
- //恢复播放
- onresume: () => {
- console.log("Resume utterance");
- },
- },
- })
- .then(() => {
- 播报警告文本(tex);
- });
- }
-};
-const test=()=>{
- speech.value
- .speak({
- text: '你好，我现在在测试播报内容',
- listeners: {
- //开始播放
- onstart: () => {
- console.log("开始播报");
- },
- //判断播放是否完毕
- onend: () => {
- console.log("播报完成");
- },
- //恢复播放
- onresume: () => {
- console.log("Resume utterance");
- },
- },
- })
-}
//初始化
const sourceInit = () => {
console.log("初始化see");
@@ -2457,6 +2623,20 @@
onBeforeMount(() => {
closeSource();
});
+
+
+const renderEcharts = (options: any) => {
+ const boxes = document.querySelectorAll(`.echartsDiv-${deviceData.value.设备编号}`);
+ boxes.forEach(box => {
+ if ((box as HTMLElement).dataset.initialized === 'true') return;
+ const chart = echarts.init(box as HTMLElement);
+ chart.setOption(options);
+ (box as HTMLElement).dataset.initialized = 'true';
+ });
+}
+
+
+
const initTupiao = () => {
if (deviceData.value.患者姓名 !== "") {
const seriesData = [
@@ -2487,7 +2667,7 @@
],
},
},
-
+
{
name: "",
type: "line",
@@ -2601,7 +2781,7 @@
label: { fontSize: 20, color: "#409EFF" },
});
seriesData[2].markPoint.data.push({
- name: "上机血压",
+ name: "上机压",
value: e.脉搏,
xAxis: index,
yAxis: e.脉搏,
@@ -2615,13 +2795,13 @@
xAxisData.push(1);
}
try {
- let myChart = null;
-
- if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
- myChart = echarts.init(
- proxy.$refs["echartsDiv" + deviceData.value.设备编号]
- );
- }
+ // console.log('proxy.$refs["echartsDiv" + deviceData.value.设备编号]: ', proxy.$refs["echartsDiv" + deviceData.value.设备编号])
+ // if (!bloodPressureEchart) {
+ // bloodPressureEchart = echarts.init(
+ // proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ // );
+ // }
+ // console.log('bloodPressureEchart: ', bloodPressureEchart)
const option = {
// backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
@@ -2659,23 +2839,44 @@
},
series: seriesData,
};
- if (myChart) {
- myChart.setOption(option);
- }
+ // console.log("渲染设备", deviceData.value.设备编号, option);
+ // console.log('deviceData.透析状态1: ', Number(deviceData.value.透析状态));
+ // nextTick(() => {
+ // bloodPressureEchart.setOption(option);
+ // bloodPressureEchart.resize();
+ // setTimeout(() => {
+ // // 方法1：检查容器内是否有canvas元素
+ // const canvas = bloodPressureEchart.getDom().querySelector('canvas');
+ // console.log('canvas: ', canvas);
+ // if (!canvas) {
+ // console.error('图表渲染失败：未生成canvas元素');
+ // return;
+ // }
+ // // 方法2：检查canvas的宽高
+ // if (canvas.width === 0 || canvas.height === 0) {
+ // console.error('图表渲染失败：canvas宽高为0');
+ // return;
+ // }
+ // // 方法3：检查图表实例的宽高
+ // if (bloodPressureEchart.getWidth() === 0 || bloodPressureEchart.getHeight() === 0) {
+ // console.error('图表渲染失败：图表实例宽高为0');
+ // return;
+ // }}, 1000);
+ // });
+ renderEcharts(option);
} catch (e) {
- console.log("图标渲染异常异常");
+ console.log("图标渲染异常异常：", e);
}
} else {
try {
- let myChart = null;
+ // if (!bloodPressureEchart) {
+ // // @ts-ignore
+ // bloodPressureEchart = echarts.init(
+ // proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ // );
+ // }
- if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) {
- myChart = echarts.init(
- proxy.$refs["echartsDiv" + deviceData.value.设备编号]
- );
- }
-
-
+
const option = {
backgroundColor:
床旁血压计.value.zuihouTime > shishiTime.value
@@ -2709,18 +2910,23 @@
},
series: [],
};
- if (myChart) {
- myChart.setOption(option);
- }
+ // console.log('deviceData.透析状态2: ', Number(deviceData.value.透析状态));
+ // // bloodPressureEchart.setOption(option);
+ // nextTick(() => {
+ // // bloodPressureEchart.setOption(option);
+ // bloodPressureEchart.setOption(option);
+ // });
+ renderEcharts(option);
} catch (e) {
- console.log("图表渲染异常异常: ", e);
console.log(
"异常",
- proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号],
+ e
);
}
}
} else if (deviceData.value.患者姓名 === "") {
+ console.log("2222");
const tbdata1 = [];
const tbdata2 = [];
const tbdata3 = [];
@@ -2734,7 +2940,7 @@
tbdata1.push(Number(wdMode?.finalText));
wd.value = Number(wdMode?.finalText);
}
-
+
// 血液流速
const xymode = e.属性列表.find((l) => {
return l.identifierText === "血液流速";
@@ -2743,7 +2949,7 @@
tbdata2.push(Number(xymode?.finalText));
ls.value = Number(xymode?.finalText);
}
-
+
// 电导度
const dddMode = e.属性列表.find((l) => {
return l.identifierText === "透析液电导度";
@@ -2756,28 +2962,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: {
@@ -2900,38 +3093,36 @@
},
],
};
- 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);
}
};
+
+
const getItemName = (name: string) => {
if (name) {
- if (name === "血红蛋白测定") {
- return "Hgb ";
+ if (name === "血红蛋白") {
+ return "HGB ";
} else if (name === "铁蛋白") {
- return "Fer ";
+ return "FER ";
} else if (name === "白蛋白") {
- return "Alb ";
- } else if (name === "血清铁蛋白") {
- return "SF ";
- } else if (name === "钙") {
- return "Ga ";
+ return "ALB ";
+ }
+ // else if (name === "血清铁蛋白") {
+ // return "SF ";
+ // }
+ else if (name === "钙") {
+ return "Ca ";
} else if (name === "钾") {
return "K ";
} else if (name === "无机磷") {
- return "pi ";
+ return "P ";
} else if (name === "甲状旁腺激素") {
return "PTH ";
} else {
@@ -2951,6 +3142,7 @@
width: 100%;
height: 100%;
border: 1px solid coral;
+ user-select: none;
.toubu {
// padding-left: 20px;
width: 100%;
@@ -3005,17 +3197,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%;
@@ -3042,7 +3234,7 @@
align-items: center; /* 垂直居中 */
height: 100vh; /* 根据需要调整高度 */
}
-
+
.centered-text {
font-weight: 600;
/* 其他样式 */
@@ -3068,7 +3260,7 @@
height: 100%;
gap: 10px; /* 调整这个值来设置间隔 */
}
-
+
.item-weiqiandao {
flex: 1; /* 确保每个子 div 占据相同的高度 */
background-color: lightblue; /* 可以根据需要调整背景颜色 */
@@ -3103,7 +3295,7 @@
width: 100%; /* 设置一个具体的宽度或确保有继承宽度 */
font-weight: 600;
}
-
+
.right-div {
width: 50px; /* 固定宽度 */
font-size: 16px;
@@ -3116,27 +3308,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;
@@ -3155,7 +3347,7 @@
.custom-dialog {
border-radius: 10px;
}
-
+
.my-header {
background-color: #ff6b6b; /* 标题背景颜色 */
color: white; /* 标题文字颜色 */
@@ -3170,4 +3362,4 @@
padding: 0;
padding-bottom: 10px;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0