| | |
| | | <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-if="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always"> |
| | | <el-carousel-item :style="{ height: pageHeight + 'px'}"> |
| | | <div class="youzhiliao" style="height: 100%" > |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | v-if="deviceData.患者姓名 !== ''" |
| | | style=" |
| | | 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;"> |
| | | <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: 40px;"> |
| | | <div class="grid-container-text" style="color: #A78718;" 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 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: 40px;"> |
| | | <div class="grid-container-text" style="color: #3AB859;" v-for="(item,index) in deviceData.管路列表" :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: 60px;"> |
| | | {{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: 40px;"> |
| | | <div class="grid-container-text" style="color: #3AB859;" 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-if="Number(deviceData.透析状态) > 0" |
| | | > |
| | | <el-row style="height: 100%; padding: 0px 20px 10px 20px"> |
| | | <!-- 未签到 --> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) < 1" |
| | | style="height: 70%; width: 100%" |
| | | > |
| | | <div class="container"> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">干体重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.干体重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">透前称重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.透前称重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">上次透后体重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.上次透后称重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">体重增长</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <template |
| | | v-if=" |
| | | deviceData.透前称重 && |
| | | deviceData.干体重 && |
| | | Number(deviceData.透前称重) > 0 |
| | | " |
| | | > |
| | | +{{ |
| | | Number(deviceData.透前称重 - deviceData.干体重).toFixed(1) |
| | | }} |
| | | </template> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">增长率</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <template v-if="deviceData.透前称重 && deviceData.干体重"> |
| | | {{ deviceData.体重增长率 }}% |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 已签到 --> |
| | | <div v-else style="height: 80%; width: 100%; padding-right: 0px"> |
| | | <div style="height: 100%"> |
| | | <el-row |
| | | style="height: 30%; padding: 0px 0px 10px 0px" |
| | | :gutter="20" |
| | | > |
| | | <el-col :span="12"> |
| | | <div |
| | | class="container-cord" |
| | | style=" |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | background-color: #ffffff; |
| | | border-radius: 8px; |
| | | " |
| | | > |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">平均脱水量:</span> |
| | | <span |
| | | style="color: #333333; font-weight: 600; font-size: 25px" |
| | | >{{ deviceData.最近平均脱水量 }}L</span |
| | | > |
| | | <span style="color: #777777; font-size: 25px"> </span> |
| | | </div> |
| | | </el-col> |
| | | </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 style="height: 100%"> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) > 1" |
| | | :ref="'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%;"> |
| | | <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-if="Number(deviceData.透析状态) === 0" |
| | | > |
| | | <el-row gutter="20" style="height: 100%; padding: 10px 20px 20px 20px"> |
| | | <el-col :span="12" style="height: 100%"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">抗凝剂</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.抗凝剂列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.抗凝剂列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}{{ item.单位 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">穿刺针</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 25px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.穿刺针列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.穿刺针列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}支</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">一次性使用透析护理包</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #1d77bd" |
| | | v-for="(item, index) in deviceData.护理包列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.护理包列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}{{ item.单位 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">血管通路</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #1d77bd" |
| | | v-for="(item, index) in deviceData.血管通路列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.血管通路列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.类型 }}</div> |
| | | <div class="right-div" style="width: 200px"> |
| | | {{ item.位置 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </el-carousel-item> |
| | | <el-carousel-item :style="{ height: pageHeight + 'px'}"> |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | v-if="deviceData.患者姓名 !== ''" |
| | | style=" |
| | | font-weight: 900; |
| | | color: #ffffff; |
| | | width: 100%; |
| | | height: 100%; |
| | | line-height: 100%; |
| | | padding: 20px; |
| | | position: relative; |
| | | " |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="font-size: 300%; height: 100%" |
| | | v-if="deviceData.设备名称 !== null" |
| | | >{{ deviceData.设备名称 }} |
| | | </span> |
| | | <span |
| | | class="grid-container" |
| | | @click="initTupiao" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.患者姓名 }} |
| | | </span> |
| | | |
| | | <span |
| | | class="grid-container" |
| | | v-if="deviceData.年龄 !== null" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.年龄 }}岁</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.性别 }}</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ patientSourceAndCode }}</span |
| | | > |
| | | <span |
| | | v-if="deviceData.签到号" |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.签到号 }}</span |
| | | > |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | | padding: 5px; |
| | | height: 100%; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container" |
| | | style="display: flex; align-items: center; padding-right: 20px" |
| | | > |
| | | <span |
| | | style=" |
| | | display: inline-block; |
| | | margin-right: 15px; |
| | | font-size: 30px; |
| | | color: #f56c6c; |
| | | " |
| | | >{{ 倒计时显示 }}</span |
| | | > |
| | | <span style="display: inline-block; margin-right: 15px"> |
| | | <img @click="dingshiShow" :src="dingshi" alt="Image 1" /> |
| | | </span> |
| | | <span style="display: inline-block"> |
| | | <img |
| | | @click="centerDialogVisible = true" |
| | | :src="shezhi" |
| | | alt="Image 2" |
| | | /> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <DoctorAdvice :height="'89%'" :list="deviceData.透析单医嘱列表" /> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | |
| | | <div v-else style="height: 100%"> |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | style=" |
| | | font-weight: 900; |
| | | color: #ffffff; |
| | | width: 100%; |
| | | height: 100%; |
| | | line-height: 100%; |
| | | padding: 20px; |
| | | position: relative; |
| | | " |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="font-size: 300%; height: 100%" |
| | | v-if="deviceData.设备名称 !== null" |
| | | >{{ deviceData.设备名称 }} |
| | | </span> |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | display: grid; |
| | | padding: 5px; |
| | | font-size: 300%; |
| | | height: 100%; |
| | | " |
| | | > |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | | padding: 5px; |
| | | height: 100%; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container" |
| | | style="display: flex; align-items: center; padding-right: 20px" |
| | | > |
| | | <span |
| | | style=" |
| | | display: inline-block; |
| | | margin-right: 15px; |
| | | font-size: 30px; |
| | | color: #f56c6c; |
| | | " |
| | | >{{ 倒计时显示 }}</span |
| | | > |
| | | |
| | | <span style="display: inline-block; margin-right: 15px"> |
| | | <img @click="dingshiShow" :src="dingshi" alt="Image 1" /> |
| | | </span> |
| | | <span style="display: inline-block"> |
| | | <img |
| | | @click="centerDialogVisible = true" |
| | | :src="shezhi" |
| | | alt="Image 2" |
| | | /> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <template v-if="!ispaiban"> |
| | | <div class="chongjian" style="height: 50%"> |
| | | <el-row |
| | | :gutter="10" |
| | | style="height: 100%; padding: 10px 20px 0px 20px" |
| | | > |
| | | <el-col :span="7" style="height: 100%" ref="targetDiv"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px; height: 100%" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">抗凝剂</span> |
| | | </div> |
| | | <div class="grid-container" style="height: calc(100% - 30px);width: 100%;font-size: 40px;"> |
| | | <div class="grid-container-text" style="color: #A78718;" 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 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: 40px;"> |
| | | <div class="grid-container-text" style="color: #A78718;" v-for="(item,index) in deviceData.穿刺针列表" :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: 40px;"> |
| | | <div class="grid-container-text" style="color: #1D77BD;" 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 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: 40px;"> |
| | | <div class="grid-container-text" style="color: #1D77BD;" v-for="(item,index) in deviceData.血管通路列表" :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" |
| | |
| | | <span class="text-group_3">一次性血液透析体外循环管路</span> |
| | | </div> |
| | | <div class="grid-container" style="height: calc(100% - 30px);width: 100%;"> |
| | | <div class="scrollable-container" style="height: 100%;color: #3AB859;"> |
| | | <div class="scrollable-container" style="height: 100%;color: #3AB859;"> |
| | | <ul> |
| | | <li v-for="(item,index) in 当前客户耗材集合.管路" :key="index"> |
| | | {{item}} |
| | |
| | | </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> |
| | | <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="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 { 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 textbaojing = ref(""); |
| | | const iscomfig = 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 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, |
| | | } 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: "正在链接中" }); |
| | | |
| | | 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(() => { |
| | | 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 codeReader = new BrowserMultiFormatReader(); |
| | | const result = await codeReader.decodeFromImage( |
| | | undefined, |
| | | e.target.result, |
| | | { tryHarder: true } |
| | | ); |
| | | // const result = await codeReader.decodeFromImage(undefined, e.target.result); |
| | | deviceCode.value = result.text; |
| | | ElMessage.success("识别成功"); |
| | | } catch (err) { |
| | | console.error("Error details:", err); |
| | | if (err instanceof NotFoundException) { |
| | | ElMessage.error("未找到二维码"); |
| | | } else if (err instanceof ChecksumException) { |
| | | ElMessage.error("校验错误"); |
| | | } else if (err instanceof FormatException) { |
| | | ElMessage.error("格式错误"); |
| | | } else { |
| | | if (zhuantaiStr !== "") { |
| | | zhuantaiStr += "/" + el.状态名称; |
| | | } else { |
| | | zhuantaiStr += el.状态名称; |
| | | ElMessage.error("识别错误请重新识别"); |
| | | console.error(err); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | |
| | | reader.readAsDataURL(file); |
| | | }; |
| | | const shaoma = () => {}; |
| | | watch( |
| | | () => deviceData.value.设备变化, |
| | | () => { |
| | | console.log(deviceData.value.设备名称, "子组件变量"); |
| | | setTimeout(() => { |
| | | if (!xiaoduzhuangti.value) { |
| | | 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(() => { |
| | | initTupiao(); |
| | | }, 500); |
| | | } else if (dataBody.推送类型 === "中央监控大屏信息") { |
| | | 数据初始化.value = false; |
| | | // loading.close() |
| | | console.log(Date.now() + "DEV"); |
| | | if (dataBody?.透析状态) { |
| | | deviceData.value = dataBody?.透析状态; |
| | | if ('透析单医嘱列表' in dataBody.透析状态) { |
| | | deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表; |
| | | } else { |
| | | deviceData.value.透析单医嘱列表 = [] |
| | | } |
| | | if ('患者来源' in dataBody.透析状态) { |
| | | deviceData.value.患者来源 = dataBody.透析状态.患者来源; |
| | | } else { |
| | | deviceData.value.患者来源 = null |
| | | } |
| | | if ('患者门诊住院号' in dataBody.透析状态) { |
| | | deviceData.value.患者门诊住院号 = dataBody.透析状态.患者门诊住院号; |
| | | } else { |
| | | deviceData.value.患者门诊住院号 = '' |
| | | } |
| | | } else { |
| | | deviceData.value.设备名称 = dataBody.IOT信息.床号; |
| | | deviceData.value.患者姓名 = ""; |
| | | if (dataBody?.使用耗材字典) { |
| | | 当前客户耗材集合.value = dataBody?.使用耗材字典; |
| | | } |
| | | } |
| | | |
| | | deviceData.value.设备变化 = Date.now() + "DEV"; |
| | | |
| | | deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表; |
| | | console.log(deviceData.value.设备变化); |
| | | deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | } catch (error) { |
| | | console.log(error); |
| | | } |
| | | }; |
| | | const showxuye = () => { |
| | | let date = new Date(); |
| | | date.setMinutes(date.getMinutes() + 0.1); |
| | | 床旁血压计.value = { |
| | | date_time: "2023-32-3232", |
| | | sbp: "117", |
| | | pulseRate: "77", |
| | | dbp: "99", |
| | | zuihouTime: date, |
| | | }; |
| | | isinitXy.value = true; |
| | | setTimeout(() => { |
| | | initTupiao(); |
| | | }, 500); |
| | | }; |
| | | const 关闭弹框警告 = () => { |
| | | setTimeout(function () { |
| | | console.log("30秒已过,关闭报警设置弹框。"); |
| | | centerDialogVisible3.value = false; |
| | | 倒计时.value = -100; |
| | | }, 30000); // 30000 毫秒 = 30 秒 |
| | | }; |
| | | //初始化 |
| | | const sourceInit = () => { |
| | | console.log("初始化see"); |
| | | if (!source.value || source.value.readyState === 2) { |
| | | creatSource(); |
| | | } |
| | | }; |
| | | // 关闭 WebSocket |
| | | const closeSource = () => { |
| | | console.log("断开"); |
| | | source.value?.close(); |
| | | }; |
| | | // 取消订阅 |
| | | onBeforeMount(() => { |
| | | closeSource(); |
| | | }); |
| | | const initTupiao = () => { |
| | | if (deviceData.value.患者姓名 !== "") { |
| | | const seriesData = [ |
| | | { |
| | | name: "11", |
| | | type: "line", |
| | | symbol: "triangle", |
| | | symbolSize: 10, |
| | | symbolRotate: 180, |
| | | data: [], |
| | | lineStyle: { |
| | | width: 5, // 设置线条宽度为5 |
| | | color: "red", |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 5, |
| | | borderColor: "red", |
| | | color: "red", |
| | | }, |
| | | markPoint: { |
| | | data: [], |
| | | }, |
| | | markLine: { |
| | | symbol: "none", |
| | | lineStyle: { color: "#409EFF", width: 3 }, |
| | | data: [ |
| | | { name: "y90", yAxis: 90, label: { show: false }, symbol: "none" }, |
| | | ], |
| | | }, |
| | | }, |
| | | |
| | | { |
| | | name: "", |
| | | type: "line", |
| | | symbol: "triangle", |
| | | symbolSize: 10, |
| | | data: [], |
| | | lineStyle: { |
| | | color: "#409EFF", |
| | | width: 5, // 设置线条宽度为5 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 5, |
| | | borderColor: "#409EFF", |
| | | color: "#409EFF", |
| | | }, |
| | | markPoint: { |
| | | data: [], |
| | | }, |
| | | markLine: { |
| | | symbol: "none", |
| | | lineStyle: { color: "#F56C6C", width: 3 }, |
| | | data: [ |
| | | { |
| | | name: "y140", |
| | | yAxis: 140, |
| | | label: { show: false }, |
| | | symbol: "none", |
| | | }, |
| | | ], |
| | | }, |
| | | }, |
| | | { |
| | | name: "", |
| | | type: "line", |
| | | symbolSize: 10, |
| | | data: [], |
| | | lineStyle: { |
| | | color: "#D940FF", |
| | | width: 5, // 设置线条宽度为5 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 5, |
| | | borderColor: "#D940FF", |
| | | color: "#D940FF", |
| | | }, |
| | | markPoint: { |
| | | data: [], |
| | | }, |
| | | }, |
| | | ]; |
| | | const xAxisData = []; |
| | | if (Number(deviceData.value.透析状态) >= 2) { |
| | | // alert(111) |
| | | deviceData.value.监测记录列表.forEach((e, index) => { |
| | | seriesData[0].data.push(e.伸缩压); |
| | | seriesData[1].data.push(e.舒张压); |
| | | seriesData[2].data.push(e.脉搏); |
| | | xAxisData.push(index); |
| | | if (index == 0) { |
| | | let y = Number(e.伸缩压) + 20; |
| | | let y2 = Number(e.舒张压) + 20; |
| | | seriesData[0].markPoint.data.push({ |
| | | name: "上机血压", |
| | | value: e.伸缩压, |
| | | xAxis: 0, |
| | | yAxis: e.伸缩压, |
| | | symbolSize: 0, |
| | | symbolOffset: [0, 20], |
| | | label: { fontSize: 20, color: "red" }, |
| | | }); |
| | | seriesData[1].markPoint.data.push({ |
| | | name: "上机血压", |
| | | value: e.舒张压, |
| | | xAxis: 0, |
| | | yAxis: e.舒张压, |
| | | symbolSize: 0, |
| | | symbolOffset: [15, 15], |
| | | label: { fontSize: 20, color: "#409EFF" }, |
| | | }); |
| | | seriesData[2].markPoint.data.push({ |
| | | name: "上机血压", |
| | | value: e.脉搏, |
| | | xAxis: 0, |
| | | yAxis: e.脉搏, |
| | | symbolSize: 0, |
| | | symbolOffset: [10, -10], |
| | | label: { fontSize: 20, color: "#D940FF" }, |
| | | }); |
| | | } else if ( |
| | | deviceData.value.监测记录列表.length > 1 && |
| | | index === deviceData.value.监测记录列表.length - 1 |
| | | ) { |
| | | let y = Number(e.伸缩压) + 20; |
| | | let y2 = Number(e.舒张压) + 20; |
| | | seriesData[0].markPoint.data.push({ |
| | | name: "上机血压", |
| | | value: e.伸缩压, |
| | | xAxis: index, |
| | | yAxis: e.伸缩压, |
| | | symbolSize: 0, |
| | | symbolOffset: [-15, -15], |
| | | label: { fontSize: 20, color: "red" }, |
| | | }); |
| | | seriesData[1].markPoint.data.push({ |
| | | name: "上机血压", |
| | | value: e.舒张压, |
| | | xAxis: index, |
| | | yAxis: e.舒张压, |
| | | symbolSize: 0, |
| | | symbolOffset: [-15, 15], |
| | | label: { fontSize: 20, color: "#409EFF" }, |
| | | }); |
| | | seriesData[2].markPoint.data.push({ |
| | | name: "上机压", |
| | | value: e.脉搏, |
| | | xAxis: index, |
| | | yAxis: e.脉搏, |
| | | symbolSize: 0, |
| | | symbolOffset: [0, -10], |
| | | label: { fontSize: 20, color: "#D940FF" }, |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | 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('请先输入设备编号') |
| | | } |
| | | } |
| | | 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 myChart = echarts.init( |
| | | proxy.$refs["echartsDiv" + 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, |
| | | const option = { |
| | | // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value, |
| | | backgroundColor: "#ffffff", |
| | | tooltip: { |
| | | trigger: "axis", |
| | | }, |
| | |
| | | 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); |
| | | myChart.setOption(option); |
| | | } catch (e) { |
| | | console.log("图标渲染异常异常"); |
| | | } |
| | | |
| | | console.log(deviceData.value); |
| | | } |
| | | }; |
| | | const getItemName=(name:string)=>{ |
| | | if(name){ |
| | | if(name==='血红蛋白测定'){ |
| | | return 'Hgb ' |
| | | } |
| | | else if(name==='铁蛋白'){ |
| | | return 'Fer ' |
| | | } |
| | | else if(name==='白蛋白'){ |
| | | return 'Alb ' |
| | | } |
| | | else if(name==='血清铁蛋白'){ |
| | | return 'SF ' |
| | | } |
| | | else if(name==='钙'){ |
| | | return 'Ga ' |
| | | } |
| | | else if(name==='钾'){ |
| | | return 'K ' |
| | | } |
| | | else if(name==='无机磷'){ |
| | | return 'pi ' |
| | | } |
| | | else if(name==='甲状旁腺激素'){ |
| | | return 'PTH ' |
| | | }else{ |
| | | return name |
| | | } |
| | | } else { |
| | | try { |
| | | const myChart = 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: [], |
| | | }; |
| | | 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); |
| | | } |
| | | }); |
| | | } |
| | | 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 "Ga "; |
| | | } else if (name === "钾") { |
| | | return "K "; |
| | | } else if (name === "无机磷") { |
| | | return "pi "; |
| | | } else if (name === "甲状旁腺激素") { |
| | | return "PTH "; |
| | | } else { |
| | | return name; |
| | | } |
| | | } else { |
| | | return ""; |
| | | } |
| | | }; |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .divice{ |
| | | background: #DAE5EC; |
| | | font-size: 100%; |
| | | border-radius: 4px; |
| | | border: solid 1px; |
| | | .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: 20px; |
| | | } |
| | | } |
| | | .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; /* 文本水平居中 */ |
| | |
| | | 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; /* 自适应宽度,占满剩余空间 */ |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .right-div { |
| | | width: 120px; /* 固定宽度 */ |
| | | text-align: 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> |
| | | |
| | | .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> |