From 35a4f17fd30e2c470d82a99e483019755b0df5b9 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期一, 01 九月 2025 16:06:00 +0800
Subject: [PATCH] Merge branch 'ID1956-已签到页面改版' into test
---
src/views/deviceWindoes2.vue | 4886 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 3,137 insertions(+), 1,749 deletions(-)
diff --git a/src/views/deviceWindoes2.vue b/src/views/deviceWindoes2.vue
index 1ed4985..45b1bbc 100644
--- a/src/views/deviceWindoes2.vue
+++ b/src/views/deviceWindoes2.vue
@@ -1,615 +1,1409 @@
<template>
- <div class="divice">
- <div class="youzhiliao" style="height: 100%;" v-if="deviceData.患者姓名">
- <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: 5%; font-size: 350%; height: 100%"
- >{{ deviceData.患者姓名 }}
- </span>
+ <div class="divice">
+ <!-- {{数据初始化}} -->
+ <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="
+ 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: 5%; font-size: 300%; height: 100%"
- >{{ deviceData.年龄 }}岁</span
- >
- <span
- class="grid-container"
- style="margin-left: 5%; font-size: 300%; height: 100%"
- >{{ deviceData.性别 }}</span
- >
- <div style="
- position: absolute;
- top: 0;
- right: 0;
- display: grid;
- padding: 5px;
- font-size: 300%;
- height: 100%
- ">
- <span class="grid-container"
- style="height: 100%;color: #303133;padding-right: 20px;"
+ <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>
+ <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%"
>
- <el-image @click="centerDialogVisible=true" :src="shezhi"></el-image>
- </span>
- </div>
- </el-row>
- </div>
- <div class="chongjian" style="height: 50%;">
- <el-row :gutter="20" style="height: 100%; padding: 20px;">
- <el-col :span="6" style="height: 100%;">
- <div style="height: 100%">
+ <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="{ backgroundImage: `url(${deviceData.患者头像})` }"
+ 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="
- background-size: 100% 100%;
- border-radius: 5px;
- margin-bottom: 1%;
- height: 100%;
+ height: calc(100% - 30px);
width: 100%;
+ font-size: 28px;
"
>
- </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
+ 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 style="height: 75%; text-align: center;font-weight: 600;font-size: 65px;color: #70A3DD;" class="grid-container" >
- {{床旁血压计.sbp}} / {{床旁血压计.dbp}}
- </div>
+ </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
+ 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>
-
- </el-row>
+ </div>
</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>
+ <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 :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"
+ <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 class="container-body" style="height: calc(100% - 30px);width: 100%;">
- <div class="container-body-text" style="color: #333333; font-size: 50px;">
- {{txztText}}
- </div>
- </div>
</div>
- <div class="item-weiqiandao" style="background: #EFE5FF;border-radius: 8px;">
- <div class="container-cord" style="height: 30px;">
- <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
+ <div
+ 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 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>
+ <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>
- </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: 75%; text-align: center;font-weight: 600;font-size: 50px;color: #8079CB;" class="grid-container" >
- {{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>
- </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;font-size: 50px;color: #333333; color: #CA7070;" >
- <el-row style="font-size: 30px;">
- <el-col v-for="(row,index) in deviceData.异常检验指标" :span="8" style="font-weight: 700;" :key="index">
- {{getItemName(row?.项目名称)}} <b v-if="row?.结果标记==='g'" style="font-weight:bold">⬆</b> <b v-else style="font-weight:bold">⬇</b>
- </el-col>
- </el-row>
-
- </div>
- </div>
- <div class="item" style="background-color: #ffffff;">
- <div style="height: 25%;">
- <div class="container-cord" style="height: 100%;">
- <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
- />
- <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>
</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: 50px;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="25"
- :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: 50px;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="25"
- :show-text="false"
- color="#70CAAE"
- :percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
- />
- </div>
- </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;
+ 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>
- </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>
-
+ <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>
- <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: 70%;width: 100%; padding-right: 0px;padding-bottom: 10px;">
- <el-row style="height:100%" :gutter="20">
- <el-col :span="6" style="height: 100%; ">
- <div class="item" style="height: 100%;padding-bottom: 10px; gap: 10px; /* 设置所有方向的间距为10px */">
- <div style="height: 25%;">
- <div class="container-cord" style="height: 100%;">
- <img style="width: 25px;" referrerpolicy="no-referrer" :src="xinlv"
+ </el-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;" >
- <el-row style="font-size: 30px;">
- <el-col v-for="(row,index) in deviceData.异常检验指标" :span="12" style="font-weight: 700;" :key="index">
- {{getItemName(row?.项目名称)}} <b v-if="row?.结果标记==='g'" style="font-weight:bold">⬆</b> <b v-else style="font-weight:bold">⬇</b>
- </el-col>
+ <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>
+ <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 style="height: 30%;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
+ 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>
- </el-row>
- </div>
- <!-- 未签到 -->
- <div class="mowei" style="height: 39%;" v-if="Number(deviceData.透析状态) ===0">
- <el-row gutter="20" style="height: 100%;padding:10px 20px 20px 20px;">
- <el-col :span="12" style="height: 100%;">
- <div class="container-weiqiandao" style="height: 100%;" >
- <div class="item-weiqiandao" style="background: #FFEDD2;border-radius: 8px;">
- <div class="container-cord" style="height: 30px;">
- <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
+ </div>
+ </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>
+ <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: 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 v-show="!deviceData.患者姓名" 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="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
+ 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="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"
+ <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%;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
+ 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-row>
- </div>
- </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%
- ">
- <span class="grid-container"
- style="height: 100%;color: #303133;padding-right: 20px;"
- >
- <el-image @click="centerDialogVisible=true" :src="shezhi"></el-image>
- </span>
- </div>
- </el-row>
- </div>
- <template v-if="!ispaiban">
- <div class="chongjian" style="height: 50%;">
- <el-row :gutter="20" style="height: 100%; padding: 20px;">
- <el-col :span="7" style="height: 100%;">
- <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">
- <div class="container-weiqiandao" >
+ <!-- <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"
@@ -659,982 +1453,1374 @@
</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> -->
+ </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>
- </el-col>
- </el-row>
- </div>
- <div class="mowei" style="height: 39%;">
- <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: #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>
+ </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>
- </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>
+ </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>
- </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;"
+ </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>
+ <span class="text-group_3" style="font-size: 100px"
+ >等待患者排班</span
+ >
</div>
-
</div>
</div>
- </template>
-
- </div>
- <el-dialog
+ </template>
+ </div>
+ <el-dialog
:show-close="false"
:close-on-press-escape="false"
:close-on-click-modal="false"
title="提示"
v-model="centerDialogVisible"
width="500px"
- center>
+ center
+ >
<span>
- <el-form label-position="left" label-width="auto" style="max-width: 600px">
+ <el-form
+ label-position="left"
+ label-width="auto"
+ style="max-width: 600px"
+ >
<el-space fill>
- <el-alert type="warning" show-icon :closable="false">
+ <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>
- <video ref="video" width="300" height="300" autoplay></video>
- <input type="text" v-model="codeResult" placeholder="扫描结果将会显示在这里">
+ <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 type="primary" @click="shaoma">
- 扫码录入
- </el-button>
- <el-button type="primary" @click="saveSet">
- 确认
+ <!-- <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>
+ </div>
+</template>
<script lang="ts" setup>
- import TQS88 from "../img/TQS88.png";
- import shezhi from '../img/shezhi.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 jsQR from 'jsqr';
- import { computed, getCurrentInstance, onBeforeMount, onMounted, ref, watch, watchEffect } from "vue";
- import { Local } from '../utils/storage';
- import * as echarts from "echarts";
- import { jgTime4 } from "../utils/formatTime";
- const { proxy } = getCurrentInstance() as any;
- // 在需要使用的组件中引入
- import { ChatDotSquare } from '@element-plus/icons-vue';
- const ispaiban=ref(false)
- import { 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 当前客户耗材集合=ref({})
- const deviceData = ref({
- 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",
- 设备名称: "24",
- 设备序列号: "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);
- // 识别文本
- const codeResult = ref<string>('');
- // 识别数据流
- let stream: MediaStream | null = null;
- const centerDialogVisible = ref(false);
- const background = ref("");
- const txztText = ref("");
- const textcolor = ref("");
- const wd = ref("");
- const ls = ref("");
- const ddd = ref("");
- const isShowXY=computed(()=>{
- if(床旁血压计.value.zuihouTime>shishiTime.value){
- return true
- }else{
- return false
+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 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();
}
- })
- watch(() =>isShowXY.value,
- ()=>{
- if(床旁血压计.value.zuihouTime>shishiTime.value){
-
- }else{
- setTimeout(()=>{
- initTupiao()
- },500)
-
-
- }
- }
- )
- const txzt: any = computed(() => {
- return deviceData.value.透析状态;
- });
- // 是否是消毒类型和待机
- const xiaoduzhuangti = computed(() => {
- return 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.状态类型 === "在线";
+ } else {
+ if (倒计时告警文本.value === "测血压") {
+ alarmSoundCXY.currentTime = 0; // 从头开始
+ alarmSoundCXY.play().catch((err) => {
+ console.error("播放失败:", err);
});
- if (x !== 0) {
- colorStr = list[0].状态颜色;
- }
+ } 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);
+ });
}
- return colorStr;
+ }
+ 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: "正在链接中" });
+
+// 血压的echart实例
+let bloodPressureEchart: echarts.ECharts | null = null
+let observer;
+
+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 pageHeight = 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 {
+ setTimeout(() => {
+ console.log("初始化血压图表222222");
+ 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);
+ }
});
- // 没有报警就返回空字符传
- 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.状态名称;
- }
+ // 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 = "归档";
}
- 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.状态类型 === "在线"
- ) {
- //去掉待机和消毒状态显示
+ },
+ {
+ 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 height = window.innerHeight;
+ pageHeight.value = 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 result = await decodeQRCodeFromFile(file as unknown as File);
+ deviceCode.value = result;
+ 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 {
- if (zhuantaiStr !== "") {
- zhuantaiStr += "/" + el.状态名称;
- } else {
- zhuantaiStr += el.状态名称;
+ ElMessage.error("识别错误请重新识别");
+ console.error(err);
+ }
+ }
+ }
+ };
+
+ reader.readAsDataURL(file);
+};
+
+const decodeQRCodeFromFile = async (file: File): Promise<string> => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+
+ reader.onload = async (e: any) => {
+ const imageBase64 = e.target.result;
+ const codeReader = new BrowserMultiFormatReader();
+
+ try {
+ const result = await codeReader.decodeFromImage(undefined, imageBase64);
+ resolve(result.getText());
+ } catch (err) {
+ reject(err);
+ }
+ };
+
+ reader.onerror = () => reject(new Error("读取文件失败"));
+ reader.readAsDataURL(file);
+ });
+};
+const shaoma = () => {};
+watch(
+ () => deviceData.value.设备变化,
+ () => {
+ console.log(deviceData.value.设备名称, "子组件变量");
+ setTimeout(() => {
+ if (!xiaoduzhuangti.value) {
+ console.log("初始化血压图表111111");
+ initTupiao();
+ }
+ }, 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,
+ };
+ 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.患者姓名 = "";
+ 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(() => {
+ console.log("初始化血压图表333333");
+
+ 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 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 = [
+ {
+ 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" },
+ });
}
});
- }
-
- 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,
- }
- );
- onMounted(() => {
- let devcieCode=Local.get('devcieCode')
- if(devcieCode){
- deviceCode.value=devcieCode
- sourceInit()
- }else{
- centerDialogVisible.value=true
- }
- });
- const saveSet=()=>{
- if(deviceCode.value){
- centerDialogVisible.value=false
- Local.set('devcieCode',deviceCode.value)
- sourceInit()
- window.location.reload();
- }else{
- ElMessage.warning('请先输入设备编号')
- }
- }
- function captureFrame() {
- if (!video.value) return;
-
- const canvas = document.createElement('canvas');
- const context = canvas.getContext('2d');
- if (!context || !video.value) return;
-
- canvas.width = video.value.videoWidth;
- canvas.height = video.value.videoHeight;
- context.drawImage(video.value, 0, 0, canvas.width, canvas.height);
- const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-
- // 解析二维码
- const code = jsQR(imageData.data, imageData.width, imageData.height);
- if (code) {
- codeResult.value = code.data;
- }
-
- // 定期捕获帧
- setTimeout(captureFrame, 500);
- }
- const startCamera=async()=> {
- if (video.value) {
- try {
- stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
- if (video.value) {
- video.value.srcObject = stream;
- video.value.play();
-
- // 开始捕获帧
- captureFrame();
- }
- } catch (e) {
- console.error("无法访问摄像头", e);
- }
- }
-}
- const shaoma=()=>{
- startCamera()
- }
- watch(
- () => deviceData.value.设备变化,
- () => {
- console.log(deviceData.value.设备名称,'子组件变量')
- setTimeout(() => {
- if (!xiaoduzhuangti.value) {
- initTupiao();
- }
- }, 500);
- }
- );
- //创建链接对象
- const creatSource = () => {
- // http://testbs.ihemodialysis.com/sse/sseEvent
- const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
- // const test='https://backend.ihemodialysis.com/sse/sseEvent/'
- 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('链接成功')
- readyState.value = stateArr[source.value?.readyState ?? 0];
- console.log(e)
- };
- source.value.onerror = (e) => {
- console.log(e,'异常情况-----')
- 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.推送类型==='床旁血压计'){
- 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
- }
- setTimeout(()=>{
- initTupiao()
- },500)
- }else if(dataBody.推送类型==='中央监控大屏信息'){
- console.log(Date.now() + 'DEV')
- if(dataBody?.透析状态){
- deviceData.value=dataBody?.透析状态
- }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 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 {
- const 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,
- };
- myChart.setOption(option);
- } catch (e) {
- console.log("图标渲染异常异常");
- }
- } else {
- try {
- const 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: [],
- };
- myChart.setOption(option);
- } catch (e) {
- console.log("异常", proxy.$refs["echartsDiv" + deviceData.value.设备编号]);
- }
- }
- } else if (deviceData.value.患者姓名 === "") {
- console.log('2222')
- 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);
- }
- });
+ if (deviceData.value.监测记录列表.length === 1) {
+ xAxisData.push(1);
}
try {
- console.log('渲染设备')
- const myChart1 = echarts.init(
- proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
- );
- const myChart2 = echarts.init(
- proxy.$refs["echartsDivls" + deviceData.value.设备编号]
- );
- const myChart3 = echarts.init(
- proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
- );
- const option1 = {
- // backgroundColor: textcolor.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,
+ backgroundColor: "#ffffff",
tooltip: {
trigger: "axis",
},
@@ -1642,302 +2828,464 @@
show: false,
},
grid: {
- left: 8,
- top: 100,
+ left: 20,
+ top: 0,
bottom: 0,
},
xAxis: {
- show: true, // 隐藏X轴
type: "category",
// 标记做右往左排列
boundaryGap: false,
- data: [1, 2, 3],
+ data: xAxisData,
axisTick: {
- show: false, // 显示 X 轴刻度
+ show: true, // 显示 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: {
+ name: "",
type: "value",
- min: -10,
+ min: 20,
+ max: 220,
+ interval: 20, // 指定刻度间隔,
splitLine: {
show: false,
},
},
- series: [
- {
- data: tbdata2,
- type: "line",
- lineStyle: {
- width: 10, // 设置线条宽度为5
- color: "#409EFF",
- },
- },
- ],
+ series: seriesData,
};
- 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",
- },
- },
- ],
- };
- myChart1.setOption(option1);
- myChart2.setOption(option2);
- myChart3.setOption(option3);
+ // 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);
}
-
- 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 {
+ try {
+ // if (!bloodPressureEchart) {
+ // // @ts-ignore
+ // bloodPressureEchart = echarts.init(
+ // proxy.$refs["echartsDiv" + deviceData.value.设备编号]
+ // );
+ // }
+
- }else{
- return ''
+ 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: [],
+ };
+ // console.log('deviceData.透析状态2: ', Number(deviceData.value.透析状态));
+ // // bloodPressureEchart.setOption(option);
+ // nextTick(() => {
+ // // bloodPressureEchart.setOption(option);
+ // bloodPressureEchart.setOption(option);
+ // });
+ renderEcharts(option);
+ } catch (e) {
+ console.log(
+ "异常",
+ proxy.$refs["echartsDiv" + deviceData.value.设备编号],
+ e
+ );
+ }
}
+ } else if (deviceData.value.患者姓名 === "") {
+ console.log("2222");
+ 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("渲染设备");
+ 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: {
+ 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",
+ },
+ },
+ ],
+ };
+ myChart1.setOption(option1);
+ myChart2.setOption(option2);
+ myChart3.setOption(option3);
+ } catch (e) {
+ console.log("图标渲染异常异常");
+ }
+
+ console.log(deviceData.value);
}
- </script>
+};
+
+
+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 "Ca ";
+ } else if (name === "钾") {
+ return "K ";
+ } else if (name === "无机磷") {
+ return "P ";
+ } 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;
+.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%;
- height: 100%;
- border: 1px solid coral;
- .toubu{
- // padding-left: 20px;
- width: 100%;
- background: #70A3DD;
- border-radius: 4px 0px 16px 16px;
+ 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 */
}
- .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;
-
- }
+ .item {
+ border: 1px solid #ccc;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin-bottom: 10px;
}
}
- /* 定义闪烁动画 */
- @keyframes blink {
+ .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 ;
+ border: 4px solid red;
}
50% {
- border:4px solid Transparent ;
+ border: 4px solid Transparent;
}
100% {
- border:4px solid red ;
+ border: 4px solid red;
// border-bottom:8px solid red ;
}
- }
-
- /* 应用闪烁动画 */
- .blink {
- // float: left; /* 让div浮动到左边 */
- width: 100%;
- height: 100%;
- animation: blink 2s infinite; /* 每秒闪烁一次，无限次数 */
-
+}
+
+/* 应用闪烁动画 */
+.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 {
+ cursor: pointer;
+ // margin-bottom: 100%;
+}
+@keyframes blink2 {
0% {
- background: red ;
+ background: red;
}
50% {
- background: Transparent ;
+ background: Transparent;
}
100% {
- background: red ;
+ 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; /* 调整这个值来设置间隔 */
}
-
+.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 {
+ display: flex;
+ justify-content: center; /* 水平居中 */
+ align-items: center; /* 垂直居中 */
+ // padding: 10px;
}
.container-body-text {
text-align: center; /* 文本水平居中 */
@@ -1945,48 +3293,88 @@
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
width: 100%; /* 确保宽度为父容器的100% */
- font-weight: 600;font-size: 50px;color: #D58E56;
+ font-weight: 600;
+ font-size: 50px;
+ color: #d58e56;
}
-.grid-container-text{
- display: flex;
- width: 100%; /* 容器宽度可以根据需要调整 */
- padding-left: 10px;
+.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占据整个高度，并在需要时显示滚动条 */
+.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;
+ // padding: 4px;
font-weight: 600;
// border-bottom: 1px solid #ddd;
}
-
- </style>
\ No newline at end of file
+
+.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>
\ No newline at end of file
--
Gitblit v1.8.0