| | |
| | | <template> |
| | | <div class="divice"> |
| | | <!-- {{数据初始化}} --> |
| | | <div class="youzhiliao" style="height: 100%" v-if="deviceData.患者姓名"> |
| | | <div id="toubu" class="toubu" style="height: 11%"> |
| | | <el-carousel v-show="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always"> |
| | | <el-carousel-item :style="{ height: pageHeight + 'px'}"> |
| | | <div class="youzhiliao" style="height: 100%" > |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | v-if="deviceData.患者姓名 !== ''" |
| | | style=" |
| | |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.签到号 }}</span |
| | | > |
| | | |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <el-carousel v-if="contentHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always"> |
| | | <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }"> |
| | | <div :style="{ height: (contentHeight - 10) + 'px' }"> |
| | | <div class="chongjian" style="height: 50%;"> |
| | | <el-row :gutter="20" style="height: 100%; padding: 20px 20px 10px 20px"> |
| | | <el-col :span="6" style="height: 100%; padding-bottom: 10px"> |
| | | <div style="height: 100%"> |
| | | <div class="chongjian" style="height: 50%"> |
| | | <el-row :gutter="20" style="height: 100%; padding: 20px 20px 10px 20px"> |
| | | <el-col :span="6" style="height: 100%; padding-bottom: 10px"> |
| | | <div style="height: 100%"> |
| | | <div |
| | | :style="{ backgroundImage: `url(${deviceData.患者头像})` }" |
| | | style=" |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | /* margin-bottom: 1%; */ |
| | | height: 100%; |
| | | width: 100%; |
| | | " |
| | | ></div> |
| | | </div> |
| | | </el-col> |
| | | <!-- 床旁显示血压计有数据的时候 --> |
| | | <template v-if="床旁血压计.zuihouTime > shishiTime"> |
| | | <el-col :span="18" style="height: 100%"> |
| | | <el-row style="height: 50%"> |
| | | <div style="width: 100%; height: 100%; border-radius: 8px"> |
| | | <div |
| | | :style="{ backgroundImage: `url(${deviceData.患者头像})` }" |
| | | style=" |
| | | background-size: 100% 100%; |
| | | border-radius: 5px; |
| | | /* margin-bottom: 1%; */ |
| | | height: 100%; |
| | | width: 100%; |
| | | " |
| | | ></div> |
| | | </div> |
| | | </el-col> |
| | | <!-- 床旁显示血压计有数据的时候 --> |
| | | <template v-if="床旁血压计.zuihouTime > shishiTime"> |
| | | <el-col :span="18" style="height: 100%"> |
| | | <el-row style="height: 50%"> |
| | | <div style="width: 100%; height: 100%; border-radius: 8px"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">血压</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 65px; |
| | | color: #70a3dd; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ 床旁血压计.sbp }} / {{ 床旁血压计.dbp }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | <el-row style="height: 50%"> |
| | | <div style="width: 100%; height: 100%; border-radius: 8px"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="xinlv" |
| | | /> |
| | | <span class="text-group_3">心率</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 65px; |
| | | color: #70a3dd; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ 床旁血压计.pulseRate }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </el-col> |
| | | </template> |
| | | <!-- 未签到 --> |
| | | <template v-else-if="Number(deviceData.透析状态) === 0"> |
| | | <el-col :span="18" style="height: 100%"> |
| | | <el-row :gutter="20" style="width: 100%; height: 100%"> |
| | | <el-col :span="14" style="height: 100%"> |
| | | <div class="container-weiqiandao"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">治疗模式</span> |
| | | </div> |
| | | <div |
| | | class="container-body" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div |
| | | class="container-body-text" |
| | | style="color: #3a75b8; font-size: 30px" |
| | | > |
| | | <span |
| | | style="font-size: 30px" |
| | | v-if="deviceData.透析方案 === 'HDF'" |
| | | > |
| | | {{ |
| | | deviceData?.置换方式 === "前置换" ? "前" : "后" |
| | | }}</span |
| | | > |
| | | {{ deviceData.透析方案 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #f9dede; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">人工肾</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.透析器列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.透析器列表.length > 1 |
| | | ? '22px' |
| | | : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div"> |
| | | {{ item.数量 }}{{ item.单位 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #d9f0e2; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">一次性循环管路</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #3ab859" |
| | | v-for="(item, index) in deviceData.管路列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.管路列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}支</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="10" style="height: 100%"> |
| | | <div class="container-weiqiandao"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #f6f5fa; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="txztimg" |
| | | /> |
| | | <span class="text-group_3">治疗状态</span> |
| | | </div> |
| | | <div |
| | | class="container-body" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div |
| | | class="container-body-text" |
| | | style="color: #333333; font-size: 50px" |
| | | > |
| | | {{ txztText }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #efe5ff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">透析液</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #3ab859" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.透析液列表.length > 1 |
| | | ? '22px' |
| | | : '28px', |
| | | }" |
| | | v-for="(item, index) in deviceData.透析液列表" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div"> |
| | | {{ item.数量 }}{{ item.单位 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-col> |
| | | </template> |
| | | <!-- 治疗中 --> |
| | | <template v-else> |
| | | <el-col :span="18" style="height: 100%"> |
| | | <el-row style="height: 50%; padding-bottom: 10px"> |
| | | <div style="width: 100%; height: 100%; border-radius: 8px"> |
| | | <el-row style="height: 100%" :gutter="10"> |
| | | <el-col class="itemboy" style="height: 100%" :span="7"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="zlms" |
| | | /> |
| | | <span class="text-group_3">治疗模式</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #d58e56; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <div> |
| | | <span |
| | | style="font-size: 30px" |
| | | v-if="deviceData.透析方案 === 'HDF'" |
| | | > |
| | | {{ |
| | | deviceData?.置换方式 === "前置换" ? "前" : "后" |
| | | }}</span |
| | | > |
| | | {{ deviceData.透析方案 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col class="itemboy" style="height: 100%" :span="7"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="txztimg" |
| | | /> |
| | | <span class="text-group_3">治疗状态</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #70a3dd; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ txztText }} |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col class="itemboy" style="height: 100%" :span="10"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="txq" |
| | | /> |
| | | <span class="text-group_3">人工肾</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 85%; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #8079cb; |
| | | " |
| | | class="scrollable-text" |
| | | > |
| | | {{ deviceData.透析器 }} |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </el-row> |
| | | <!-- 签到未签到状态 --> |
| | | <div |
| | | class="container" |
| | | v-if="Number(deviceData.透析状态) < 1" |
| | | style="height: 50%" |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="xinlv" |
| | | /> |
| | | <span class="text-group_3">异常指标</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | color: #333333; |
| | | color: #ca7070; |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | " |
| | | > |
| | | <el-row style="font-size: 20px; overflow: hidden;"> |
| | | <el-col |
| | | v-for="(row, index) in deviceData.异常检验指标" |
| | | :span="8" |
| | | style="font-weight: 700" |
| | | :key="index" |
| | | > |
| | | {{ getItemName(row?.项目名称) }} |
| | | <b |
| | | v-if="row?.结果标记 === 'g'" |
| | | style="font-weight: bold" |
| | | >⬆</b |
| | | > |
| | | <b v-else style="font-weight: bold">⬇</b> |
| | | </el-col> |
| | | </el-row> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">血压</span> |
| | | </div> |
| | | </div> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">处方脱水量</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 25px; |
| | | color: #8079cb; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <span v-if="deviceData.处方脱水量"> |
| | | {{ deviceData.处方脱水量 }} L</span |
| | | > |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 65px; |
| | | color: #70a3dd; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ 床旁血压计.sbp }} / {{ 床旁血压计.dbp }} |
| | | </div> |
| | | </div> |
| | | <!-- 透析中状态 --> |
| | | <div class="container" v-else style="height: 50%"> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 10%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="sjjd" |
| | | /> |
| | | <span class="text-group_3">时间进度</span> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | <el-row style="height: 50%"> |
| | | <div style="width: 100%; height: 100%; border-radius: 8px"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="xinlv" |
| | | /> |
| | | <span class="text-group_3">心率</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 65px; |
| | | color: #70a3dd; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ 床旁血压计.pulseRate }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </el-col> |
| | | </template> |
| | | <!-- 未签到 --> |
| | | <template v-else-if="Number(deviceData.透析状态) === 0"> |
| | | <el-col :span="18" style="height: 100%"> |
| | | <el-row :gutter="20" style="width: 100%; height: 100%"> |
| | | <el-col :span="14" style="height: 100%"> |
| | | <div class="container-weiqiandao"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">治疗模式</span> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 90%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 38px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | class="container-body" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div> |
| | | <span style="color: #303133">{{ |
| | | jgTime4(deviceData.iot_透析时间) |
| | | }}</span |
| | | >/<span |
| | | >{{ deviceData.透析处方的时长_小时 }}:{{ |
| | | deviceData.透析处方的时长_分钟 |
| | | <div |
| | | class="container-body-text" |
| | | style="color: #3a75b8; font-size: 30px" |
| | | > |
| | | <span |
| | | style="font-size: 30px" |
| | | v-if="deviceData.透析方案 === 'HDF'" |
| | | > |
| | | {{ |
| | | deviceData?.置换方式 === "前置换" ? "前" : "后" |
| | | }}</span |
| | | > |
| | | </div> |
| | | <div> |
| | | <el-progress |
| | | :text-inside="true" |
| | | :stroke-width="15" |
| | | :show-text="false" |
| | | color="#70A3DD" |
| | | :percentage=" |
| | | (Number(deviceData.iot_透析时间) / |
| | | (Number(deviceData.透析处方的时长) * 60)) * |
| | | 100 |
| | | " |
| | | status="success" |
| | | /> |
| | | {{ deviceData.透析方案 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 10%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="cljd" |
| | | /> |
| | | <span class="text-group_3">超滤进度</span> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #f9dede; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">人工肾</span> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 90%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 38px; |
| | | color: #8079cb; |
| | | " |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div> |
| | | <span style="color: #303133">{{ |
| | | Number(deviceData.iot_当前脱水量).toFixed(1) |
| | | }}</span |
| | | >/<span>{{ |
| | | Number(deviceData.iot_脱水目标量).toFixed(1) |
| | | }}</span |
| | | ><span style="font-size: 80%" |
| | | >({{ deviceData.iot_脱水速率 }})</span |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.透析器列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.透析器列表.length > 1 |
| | | ? '22px' |
| | | : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div"> |
| | | {{ item.数量 }}{{ item.单位 }} |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <el-progress |
| | | :text-inside="true" |
| | | :stroke-width="15" |
| | | :show-text="false" |
| | | color="#70CAAE" |
| | | :percentage=" |
| | | (Number(deviceData.iot_当前脱水量) / |
| | | Number(deviceData.处方脱水量)) * |
| | | 100 |
| | | " |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #d9f0e2; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">一次性循环管路</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #3ab859" |
| | | v-for="(item, index) in deviceData.管路列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.管路列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}支</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </template> |
| | | </el-row> |
| | | </div> |
| | | <el-col :span="10" style="height: 100%"> |
| | | <div class="container-weiqiandao"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #f6f5fa; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="txztimg" |
| | | /> |
| | | <span class="text-group_3">治疗状态</span> |
| | | </div> |
| | | <div |
| | | class="container-body" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div |
| | | class="container-body-text" |
| | | style="color: #333333; font-size: 50px" |
| | | > |
| | | {{ txztText }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #efe5ff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">透析液</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #3ab859" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.透析液列表.length > 1 |
| | | ? '22px' |
| | | : '28px', |
| | | }" |
| | | v-for="(item, index) in deviceData.透析液列表" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div"> |
| | | {{ item.数量 }}{{ item.单位 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-col> |
| | | </template> |
| | | <!-- 治疗中 --> |
| | | <div |
| | | class="mowei" |
| | | style="height: 39%;" |
| | | v-if="Number(deviceData.透析状态) > 0" |
| | | > |
| | | <el-row style="height: 100%; padding: 0px 20px 10px 20px"> |
| | | <!-- 未签到 --> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) < 1" |
| | | style="height: 70%; width: 100%" |
| | | > |
| | | <div class="container"> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">干体重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.干体重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">透前称重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.透前称重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">上次透后体重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.上次透后称重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">体重增长</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <template |
| | | v-if=" |
| | | deviceData.透前称重 && |
| | | deviceData.干体重 && |
| | | Number(deviceData.透前称重) > 0 |
| | | " |
| | | > |
| | | +{{ |
| | | Number(deviceData.透前称重 - deviceData.干体重).toFixed(1) |
| | | }} |
| | | </template> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">增长率</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <template v-if="deviceData.透前称重 && deviceData.干体重"> |
| | | {{ deviceData.体重增长率 }}% |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 已签到 --> |
| | | <div v-else style="height: 80%; width: 100%; padding-right: 0px"> |
| | | <div style="height: 100%"> |
| | | <el-row |
| | | style="height: 30%; padding: 0px 0px 10px 0px" |
| | | :gutter="20" |
| | | > |
| | | <el-col :span="12"> |
| | | <div |
| | | class="container-cord" |
| | | style=" |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | background-color: #ffffff; |
| | | border-radius: 8px; |
| | | " |
| | | > |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">平均脱水量:</span> |
| | | <span |
| | | style="color: #333333; font-weight: 600; font-size: 25px" |
| | | >{{ deviceData.最近平均脱水量 }}L</span |
| | | > |
| | | <span style="color: #777777; font-size: 25px"> </span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div |
| | | class="container-cord" |
| | | style=" |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | background-color: #ffffff; |
| | | border-radius: 8px; |
| | | " |
| | | > |
| | | <img |
| | | style="width: 25px; margin-right: 10px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">最大脱水量: </span> |
| | | <span |
| | | style="color: #333333; font-weight: 600; font-size: 25px" |
| | | >{{ deviceData.最近最大脱水量 }}L</span |
| | | > |
| | | <span style="color: #777777; font-size: 25px" |
| | | >({{ deviceData.最近最大脱水量日期 }})</span |
| | | > |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row |
| | | style="height: 70%; padding: 0px 0px 10px 0px" |
| | | :gutter="20" |
| | | > |
| | | <el-col :span="6" style="height: 100%"> |
| | | <template v-else> |
| | | <el-col :span="18" style="height: 100%"> |
| | | <el-row style="height: 50%; padding-bottom: 10px"> |
| | | <div style="width: 100%; height: 100%; border-radius: 8px"> |
| | | <el-row style="height: 100%" :gutter="10"> |
| | | <el-col class="itemboy" style="height: 100%" :span="7"> |
| | | <div |
| | | class="item" |
| | | style=" |
| | | height: 100%; |
| | | padding-bottom: 10px; |
| | | gap: 10px; /* 设置所有方向的间距为10px */ |
| | | " |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="xinlv" |
| | | :src="zlms" |
| | | /> |
| | | <span class="text-group_3">异常指标</span> |
| | | <span class="text-group_3">治疗模式</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | color: #ca7070; |
| | | overflow: hidden; |
| | | overflow-y: auto; |
| | | color: #d58e56; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <el-row style="font-size: 20px"> |
| | | <el-col |
| | | v-for="(row, index) in deviceData.异常检验指标" |
| | | :span="12" |
| | | style="font-weight: 700" |
| | | :key="index" |
| | | <div> |
| | | <span |
| | | style="font-size: 30px" |
| | | v-if="deviceData.透析方案 === 'HDF'" |
| | | > |
| | | {{ getItemName(row?.项目名称) }} |
| | | <b |
| | | v-if="row?.结果标记 === 'g'" |
| | | style="font-weight: bold" |
| | | >⬆</b |
| | | > |
| | | <b v-else style="font-weight: bold">⬇</b> |
| | | </el-col> |
| | | </el-row> |
| | | {{ |
| | | deviceData?.置换方式 === "前置换" ? "前" : "后" |
| | | }}</span |
| | | > |
| | | {{ deviceData.透析方案 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="18" style="height: 100%; width: 100%"> |
| | | <el-col class="itemboy" style="height: 100%" :span="7"> |
| | | <div |
| | | class="item" |
| | | style=" |
| | | height: 100%; |
| | | padding-bottom: 10px; /* 设置所有方向的间距为10px */ |
| | | " |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 100%"> |
| | | <div |
| | | v-if="Number(deviceData.透析状态) > 1" |
| | | :ref="'echartsDiv' + deviceData.设备编号" |
| | | style="height: 97%" |
| | | ></div> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="txztimg" |
| | | /> |
| | | <span class="text-group_3">治疗状态</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #70a3dd; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ txztText }} |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col class="itemboy" style="height: 100%" :span="10"> |
| | | <div |
| | | class="item" |
| | | style="background-color: #ffffff; height: 97%" |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="txq" |
| | | /> |
| | | <span class="text-group_3">人工肾</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 85%; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #8079cb; |
| | | " |
| | | class="scrollable-text" |
| | | > |
| | | {{ deviceData.透析器 }} |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <!-- 消息提示一直显示最新的消息 --> |
| | | </el-row> |
| | | <!-- 签到未签到状态 --> |
| | | <div |
| | | style=" |
| | | height: 20%; |
| | | width: 100%; |
| | | background: #fef0e1; |
| | | border-radius: 8px; |
| | | font-size: 30px; |
| | | " |
| | | class="container" |
| | | v-if="Number(deviceData.透析状态) < 1" |
| | | style="height: 50%" |
| | | > |
| | | <div style="height: 100%"> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="xinlv" |
| | | /> |
| | | <span class="text-group_3">异常指标</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | color: #333333; |
| | | color: #ca7070; |
| | | overflow-y: auto; |
| | | " |
| | | > |
| | | <el-row style="font-size: 20px"> |
| | | <el-col |
| | | v-for="(row, index) in deviceData.异常检验指标" |
| | | :span="8" |
| | | style="font-weight: 700" |
| | | :key="index" |
| | | > |
| | | {{ getItemName(row?.项目名称) }} |
| | | <b |
| | | v-if="row?.结果标记 === 'g'" |
| | | style="font-weight: bold" |
| | | >⬆</b |
| | | > |
| | | <b v-else style="font-weight: bold">⬇</b> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">处方脱水量</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 25px; |
| | | color: #8079cb; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <span v-if="deviceData.处方脱水量"> |
| | | {{ deviceData.处方脱水量 }} L</span |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 透析中状态 --> |
| | | <div class="container" v-else style="height: 50%"> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 10%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="sjjd" |
| | | /> |
| | | <span class="text-group_3">时间进度</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 90%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 38px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <div> |
| | | <span style="color: #303133">{{ |
| | | jgTime4(deviceData.iot_透析时间) |
| | | }}</span |
| | | >/<span |
| | | >{{ deviceData.透析处方的时长_小时 }}:{{ |
| | | deviceData.透析处方的时长_分钟 |
| | | }}</span |
| | | > |
| | | </div> |
| | | <div> |
| | | <el-progress |
| | | :text-inside="true" |
| | | :stroke-width="15" |
| | | :show-text="false" |
| | | color="#70A3DD" |
| | | :percentage=" |
| | | (Number(deviceData.iot_透析时间) / |
| | | (Number(deviceData.透析处方的时长) * 60)) * |
| | | 100 |
| | | " |
| | | status="success" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="item" style="background-color: #ffffff"> |
| | | <div style="height: 10%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="cljd" |
| | | /> |
| | | <span class="text-group_3">超滤进度</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 90%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 38px; |
| | | color: #8079cb; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <div> |
| | | <span style="color: #303133">{{ |
| | | Number(deviceData.iot_当前脱水量).toFixed(1) |
| | | }}</span |
| | | >/<span>{{ |
| | | Number(deviceData.iot_脱水目标量).toFixed(1) |
| | | }}</span |
| | | ><span style="font-size: 80%" |
| | | >({{ deviceData.iot_脱水速率 }})</span |
| | | > |
| | | </div> |
| | | <div> |
| | | <el-progress |
| | | :text-inside="true" |
| | | :stroke-width="15" |
| | | :show-text="false" |
| | | color="#70CAAE" |
| | | :percentage=" |
| | | (Number(deviceData.iot_当前脱水量) / |
| | | Number(deviceData.处方脱水量)) * |
| | | 100 |
| | | " |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </template> |
| | | </el-row> |
| | | </div> |
| | | <!-- 治疗中 --> |
| | | <div |
| | | class="mowei" |
| | | style="height: 39%" |
| | | v-show="Number(deviceData.透析状态) > 0" |
| | | > |
| | | <el-row style="height: 100%; padding: 0px 20px 10px 20px"> |
| | | <!-- 未签到 --> |
| | | <div |
| | | v-show="Number(deviceData.透析状态) < 1" |
| | | style="height: 70%; width: 100%" |
| | | > |
| | | <div class="container"> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">干体重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.干体重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">透前称重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.透前称重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">上次透后体重</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | {{ Number(deviceData.上次透后称重).toFixed(1) }} |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">体重增长</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <template |
| | | v-if=" |
| | | deviceData.透前称重 && |
| | | deviceData.干体重 && |
| | | Number(deviceData.透前称重) > 0 |
| | | " |
| | | > |
| | | +{{ |
| | | Number(deviceData.透前称重 - deviceData.干体重).toFixed(1) |
| | | }} |
| | | </template> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tizhong" |
| | | /> |
| | | <span class="text-group_3">增长率</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | " |
| | | class="grid-container" |
| | | > |
| | | <template v-if="deviceData.透前称重 && deviceData.干体重"> |
| | | {{ deviceData.体重增长率 }}% |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 已签到 --> |
| | | <div v-show="Number(deviceData.透析状态) >= 1" style="height: 80%; width: 100%; padding-right: 0px"> |
| | | <div style="height: 100%"> |
| | | <el-row |
| | | style="height: 30%; padding: 0px 0px 10px 0px" |
| | | :gutter="20" |
| | | > |
| | | <el-col :span="12"> |
| | | <div |
| | | class="container-cord" |
| | | style="height: 100%; padding-left: 20px" |
| | | style=" |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | background-color: #ffffff; |
| | | border-radius: 8px; |
| | | " |
| | | > |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428" |
| | | :src="tsl" |
| | | /> |
| | | |
| | | <span class="text-group_3">平均脱水量:</span> |
| | | <span |
| | | class="text-group_3" |
| | | v-if="isinitXy && Number(deviceData.透析状态) >= 1" |
| | | style="color: #333333; font-weight: 600; font-size: 25px" |
| | | >{{ deviceData.最近平均脱水量 }}L</span |
| | | > |
| | | 最近一次, 高压:{{ 床旁血压计.sbp }},低压: |
| | | {{ 床旁血压计.dbp }}, 心率: {{ 床旁血压计.pulseRate }} |
| | | </span> |
| | | <span class="text-group_3" v-else>暂无通知消息哦</span> |
| | | <span style="color: #777777; font-size: 25px"> </span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div |
| | | class="container-cord" |
| | | style=" |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | background-color: #ffffff; |
| | | border-radius: 8px; |
| | | " |
| | | > |
| | | <img |
| | | style="width: 25px; margin-right: 10px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">最大脱水量: </span> |
| | | <span |
| | | style="color: #333333; font-weight: 600; font-size: 25px" |
| | | >{{ deviceData.最近最大脱水量 }}L</span |
| | | > |
| | | <span style="color: #777777; font-size: 25px" |
| | | >({{ deviceData.最近最大脱水量日期 }})</span |
| | | > |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row |
| | | style="height: 70%; padding: 0px 0px 10px 0px" |
| | | :gutter="20" |
| | | > |
| | | <el-col :span="6" style="height: 100%"> |
| | | <div |
| | | class="item" |
| | | style=" |
| | | height: 100%; |
| | | padding-bottom: 10px; |
| | | gap: 10px; /* 设置所有方向的间距为10px */ |
| | | " |
| | | > |
| | | <div style="height: 25%"> |
| | | <div class="container-cord" style="height: 100%"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="xinlv" |
| | | /> |
| | | <span class="text-group_3">异常指标</span> |
| | | </div> |
| | | </div> |
| | | <div |
| | | style=" |
| | | height: 75%; |
| | | text-align: center; |
| | | font-weight: 600; |
| | | font-size: 50px; |
| | | color: #333333; |
| | | color: #ca7070; |
| | | overflow-y: auto; |
| | | " |
| | | > |
| | | <el-row style="font-size: 20px"> |
| | | <el-col |
| | | v-for="(row, index) in deviceData.异常检验指标" |
| | | :span="12" |
| | | style="font-weight: 700;" |
| | | :key="index" |
| | | > |
| | | {{ getItemName(row?.项目名称) }} |
| | | <b |
| | | v-if="row?.结果标记 === 'g'" |
| | | style="font-weight: bold" |
| | | >⬆</b |
| | | > |
| | | <b v-else style="font-weight: bold">⬇</b> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="18" style="height: 100%; width: 100%"> |
| | | <div |
| | | class="item" |
| | | style=" |
| | | height: 100%; |
| | | padding-bottom: 10px; /* 设置所有方向的间距为10px */ |
| | | " |
| | | > |
| | | <div v-show="Number(deviceData.透析状态) > 1" class="zcc_test" style="height: 100%"> |
| | | <div |
| | | :ref="'echartsDiv' + deviceData.设备编号" |
| | | :class="'echartsDiv-' + deviceData.设备编号" |
| | | style="height: 97%" |
| | | ></div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | <!-- 消息提示一直显示最新的消息 --> |
| | | <div |
| | | style=" |
| | | height: 20%; |
| | | width: 100%; |
| | | background: #fef0e1; |
| | | border-radius: 8px; |
| | | font-size: 30px; |
| | | " |
| | | > |
| | | <div style="height: 100%"> |
| | | <div |
| | | class="container-cord" |
| | | style="height: 100%; padding-left: 20px" |
| | | > |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428" |
| | | /> |
| | | |
| | | <span |
| | | class="text-group_3" |
| | | v-if="isinitXy && Number(deviceData.透析状态) >= 1" |
| | | > |
| | | 最近一次, 高压:{{ 床旁血压计.sbp }},低压: |
| | | {{ 床旁血压计.dbp }}, 心率: {{ 床旁血压计.pulseRate }} |
| | | </span> |
| | | <span class="text-group_3" v-else>暂无通知消息哦</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <!-- 未签到 --> |
| | | <div |
| | | class="mowei" |
| | | style="height: 39%" |
| | | v-show="Number(deviceData.透析状态) === 0" |
| | | > |
| | | <el-row gutter="20" style="height: 100%; padding: 10px 20px 20px 20px"> |
| | | <el-col :span="12" style="height: 100%"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">抗凝剂</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.抗凝剂列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.抗凝剂列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}{{ item.单位 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <!-- 未签到 --> |
| | | <div |
| | | class="mowei" |
| | | style="height: 39%" |
| | | v-if="Number(deviceData.透析状态) === 0" |
| | | > |
| | | <el-row gutter="20" style="height: 100%; padding: 10px 20px 20px 20px"> |
| | | <el-col :span="12" style="height: 100%"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">穿刺针</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 25px; |
| | | " |
| | | > |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px" |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.穿刺针列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.穿刺针列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">抗凝剂</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style="height: calc(100% - 30px); width: 100%" |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.抗凝剂列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.抗凝剂列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}{{ item.单位 }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}支</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">一次性使用透析护理包</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #ffedd2; border-radius: 8px" |
| | | class="grid-container-text" |
| | | style="color: #1d77bd" |
| | | v-for="(item, index) in deviceData.护理包列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.护理包列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">穿刺针</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 25px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #a78718" |
| | | v-for="(item, index) in deviceData.穿刺针列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.穿刺针列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}支</div> |
| | | </div> |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}{{ item.单位 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">血管通路</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #1d77bd" |
| | | v-for="(item, index) in deviceData.血管通路列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.血管通路列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.类型 }}</div> |
| | | <div class="right-div" style="width: 200px"> |
| | | {{ item.位置 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="container-weiqiandao" style="height: 100%"> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">一次性使用透析护理包</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #1d77bd" |
| | | v-for="(item, index) in deviceData.护理包列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.护理包列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.name }}</div> |
| | | <div class="right-div">{{ item.数量 }}{{ item.单位 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="item-weiqiandao" |
| | | style="background: #e5eeff; border-radius: 8px" |
| | | > |
| | | <div class="container-cord" style="height: 30px"> |
| | | <img |
| | | style="width: 25px" |
| | | referrerpolicy="no-referrer" |
| | | :src="tsl" |
| | | /> |
| | | <span class="text-group_3">血管通路</span> |
| | | </div> |
| | | <div |
| | | class="grid-container" |
| | | style=" |
| | | height: calc(100% - 30px); |
| | | width: 100%; |
| | | font-size: 28px; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container-text" |
| | | style="color: #1d77bd" |
| | | v-for="(item, index) in deviceData.血管通路列表" |
| | | :style="{ |
| | | fontSize: |
| | | deviceData.血管通路列表.length > 1 ? '22px' : '28px', |
| | | }" |
| | | :key="index" |
| | | > |
| | | <div class="left-div">{{ item.类型 }}</div> |
| | | <div class="right-div" style="width: 200px"> |
| | | {{ item.位置 }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> |
| | | </el-carousel-item> |
| | | <el-carousel-item :style="{ height: (contentHeight - 10) + 'px' }"> |
| | | <DoctorAdvice :height="(contentHeight - 10)" :list="deviceData.透析单医嘱列表" /> |
| | | <el-carousel-item :style="{ height: pageHeight + 'px'}"> |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | v-show="deviceData.患者姓名 !== ''" |
| | | style=" |
| | | font-weight: 900; |
| | | color: #ffffff; |
| | | width: 100%; |
| | | height: 100%; |
| | | line-height: 100%; |
| | | padding: 20px; |
| | | position: relative; |
| | | " |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="font-size: 300%; height: 100%" |
| | | v-if="deviceData.设备名称 !== null" |
| | | >{{ deviceData.设备名称 }} |
| | | </span> |
| | | <span |
| | | class="grid-container" |
| | | @click="initTupiao" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.患者姓名 }} |
| | | </span> |
| | | |
| | | <span |
| | | class="grid-container" |
| | | v-if="deviceData.年龄 !== null" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.年龄 }}岁</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.性别 }}</span |
| | | > |
| | | <span |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ patientSourceAndCode }}</span |
| | | > |
| | | <span |
| | | v-if="deviceData.签到号" |
| | | class="grid-container" |
| | | style="margin-left: 2%; font-size: 200%; height: 100%" |
| | | >{{ deviceData.签到号 }}</span |
| | | > |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | | padding: 5px; |
| | | height: 100%; |
| | | " |
| | | > |
| | | <div |
| | | class="grid-container" |
| | | style="display: flex; align-items: center; padding-right: 20px" |
| | | > |
| | | <span |
| | | style=" |
| | | display: inline-block; |
| | | margin-right: 15px; |
| | | font-size: 30px; |
| | | color: #f56c6c; |
| | | " |
| | | >{{ 倒计时显示 }}</span |
| | | > |
| | | <span style="display: inline-block; margin-right: 15px"> |
| | | <img @click="dingshiShow" :src="dingshi" alt="Image 1" /> |
| | | </span> |
| | | <span style="display: inline-block"> |
| | | <img |
| | | @click="centerDialogVisible = true" |
| | | :src="shezhi" |
| | | alt="Image 2" |
| | | /> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </div> |
| | | <DoctorAdvice :height="'89%'" :list="deviceData.透析单医嘱列表" /> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | </div> |
| | | <div v-else style="height: 100%"> |
| | | |
| | | <div v-show="!deviceData.患者姓名" style="height: 100%"> |
| | | <div class="toubu" style="height: 11%"> |
| | | <el-row |
| | | style=" |
| | |
| | | v-if="deviceData.设备名称 !== null" |
| | | >{{ deviceData.设备名称 }} |
| | | </span> |
| | | |
| | | |
| | | <div |
| | | style=" |
| | | position: absolute; |
| | |
| | | " |
| | | >{{ 倒计时显示 }}</span |
| | | > |
| | | |
| | | |
| | | <span style="display: inline-block; margin-right: 15px"> |
| | | <img @click="dingshiShow" :src="dingshi" alt="Image 1" /> |
| | | </span> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- <div class="container-weiqiandao" > |
| | | |
| | | |
| | | <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;height: 100%;"> |
| | | <div class="container-cord" style="height: 30px;"> |
| | | <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl" |
| | |
| | | <span class="text-gray-500">分钟 </span> |
| | | </el-col> |
| | | </el-form-item> |
| | | |
| | | |
| | | <el-form-item label="提醒内容:"> |
| | | <el-input |
| | | v-if="!formInline.selectOpen" |
| | |
| | | import tdddbaojing from "../assets/tzddd.mp3"; |
| | | import tzxllbaojing from "../assets/tzxll.mp3"; |
| | | import cgbaojing from "../assets/cg.mp3"; |
| | | |
| | | |
| | | import { |
| | | computed, |
| | | getCurrentInstance, |
| | |
| | | watch, |
| | | onUnmounted, |
| | | onBeforeUnmount, |
| | | nextTick |
| | | nextTick, |
| | | } from "vue"; |
| | | import { Local } from "../utils/storage"; |
| | | import * as echarts from "echarts"; |
| | | import { jgTime4 } from "../utils/formatTime"; |
| | | import { setTimeoutAlert } from "../utils/httpApi"; |
| | | import DoctorAdvice from '../components/doctorAdvice/index.vue'; |
| | | |
| | | // 创建 Audio 对象,指向 public 目录下的音频文件 |
| | | const alarmSound = new Audio(alertbaojin); //一般报警声音 |
| | | const alarmSoundCXY = new Audio(cxybaojing); //测血压报警 |
| | |
| | | alarmSoundTZxll.loop = true; // 循环播放 |
| | | const alarmSoundCG = new Audio(cgbaojing); //冲管 |
| | | alarmSoundCG.loop = true; // 循环播放 |
| | | |
| | | const isHeightSet = ref(false); |
| | | |
| | | // 控制播放状态的变量 |
| | | const isPlaying = ref(false); |
| | | // 切换播放/暂停的方法 |
| | |
| | | // sse状态 |
| | | const readyState = ref({ key: 0, value: "正在链接中" }); |
| | | |
| | | // 血压的echart实例 |
| | | let bloodPressureEchart: echarts.ECharts | null = null |
| | | let observer; |
| | | |
| | | const deviceCode = ref(""); |
| | | const shishiTime = ref(new Date()); |
| | | //有没有推送过血压如果有 就一直会显示血压数据 |
| | |
| | | selectType: "", |
| | | selectOpen: false, |
| | | }); |
| | | |
| | | |
| | | const 当前客户耗材集合 = ref({}); |
| | | const deviceData = ref({ |
| | | 患者来源: null, |
| | |
| | | const wd = ref(""); |
| | | const ls = ref(""); |
| | | const ddd = ref(""); |
| | | const contentHeight = ref(0); // 中间内容的高度 |
| | | const pageHeight = ref(0); |
| | | const isShowXY = computed(() => { |
| | | if (床旁血压计.value.zuihouTime > shishiTime.value) { |
| | | return true; |
| | |
| | | () => { |
| | | if (床旁血压计.value.zuihouTime > shishiTime.value) { |
| | | } else { |
| | | nextTick(() => { |
| | | setTimeout(() => { |
| | | initTupiao(); |
| | | }, 500); |
| | | }); |
| | | setTimeout(() => { |
| | | console.log("初始化血压图表222222"); |
| | | initTupiao(); |
| | | }, 500); |
| | | } |
| | | } |
| | | ); |
| | |
| | | }); |
| | | // centerDialogVisible2.value=false |
| | | }; |
| | | |
| | | |
| | | // 状态颜色 |
| | | const zhuangtaiColor = computed(() => { |
| | | const list = deviceData.value.设备状态列表; |
| | |
| | | } |
| | | }); |
| | | } |
| | | |
| | | |
| | | return zhuantaiStr; |
| | | }); |
| | | const isbaioji = computed(() => { |
| | |
| | | backgroundSize: "cover", // 根据需要调整 |
| | | backgroundPosition: "center", // 根据需要调整 |
| | | }; |
| | | |
| | | |
| | | watch( |
| | | () => txzt.value, |
| | | () => { |
| | |
| | | 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(""); |
| | |
| | | centerDialogVisible.value = true; |
| | | } |
| | | intervalId = setInterval(updateTime, 1000); |
| | | const width = window.innerWidth; |
| | | const height = window.innerHeight; |
| | | |
| | | console.log('可视区域宽度:', width); |
| | | console.log('可视区域高度:', height); |
| | | const height = window.innerHeight; |
| | | pageHeight.value = height; |
| | | |
| | | }); |
| | | // 在组件卸载前清除定时器,防止内存泄漏 |
| | |
| | | clearInterval(intervalId); |
| | | } |
| | | }); |
| | | |
| | | |
| | | const saveSet = () => { |
| | | if (deviceCode.value) { |
| | | centerDialogVisible.value = false; |
| | |
| | | ElMessage.warning("请先输入设备编号"); |
| | | } |
| | | }; |
| | | |
| | | |
| | | /** |
| | | * 刷新页面 |
| | | */ |
| | |
| | | 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 { |
| | |
| | | } |
| | | } |
| | | }; |
| | | |
| | | |
| | | reader.readAsDataURL(file); |
| | | }; |
| | | const shaoma = () => {}; |
| | |
| | | console.log(deviceData.value.设备名称, "子组件变量"); |
| | | setTimeout(() => { |
| | | if (!xiaoduzhuangti.value) { |
| | | console.log("初始化血压图表111111"); |
| | | initTupiao(); |
| | | } |
| | | }, 1000); |
| | | }, 500); |
| | | } |
| | | ); |
| | | |
| | | watch(() => deviceData.value.患者姓名, (newVal: string, oldVal: string) => { |
| | | console.log("患者姓名变化:", newVal) |
| | | |
| | | if (newVal && oldVal !== newVal) { |
| | | isHeightSet.value = false // 重置标识 |
| | | contentHeight.value = 0; // 清空高度,强制更新 el-carousel |
| | | |
| | | setTimeout(() => { |
| | | if (isHeightSet.value) return // 如果已设置过就不重复执行 |
| | | |
| | | const windowHeight = window.innerHeight |
| | | const toubu = document.getElementById('toubu') |
| | | const toubuHeight = toubu ? toubu.offsetHeight : 0 |
| | | |
| | | const newHeight = windowHeight - toubuHeight |
| | | |
| | | if (newHeight !== contentHeight.value) { |
| | | contentHeight.value = newHeight |
| | | console.log("更新 contentHeight.value: ", contentHeight.value) |
| | | } |
| | | |
| | | isHeightSet.value = true |
| | | }, 500) |
| | | } |
| | | }) |
| | | |
| | | const 数据初始化 = ref(false); |
| | | //创建链接对象 |
| | | const creatSource = () => { |
| | |
| | | dbp: dataBody?.床旁血压结果?.dbp, |
| | | zuihouTime: date, |
| | | }; |
| | | |
| | | nextTick(() => { |
| | | setTimeout(() => { |
| | | initTupiao(); |
| | | }, 500); |
| | | }); |
| | | |
| | | setTimeout(() => { |
| | | console.log("初始化血压图表444444"); |
| | | initTupiao(); |
| | | }, 500); |
| | | } else if (dataBody.推送类型 === "中央监控大屏信息") { |
| | | 数据初始化.value = false; |
| | | // loading.close() |
| | | console.log(Date.now() + "DEV"); |
| | | if (dataBody?.透析状态) { |
| | | deviceData.value = dataBody?.透析状态; |
| | | if ('透析单医嘱列表' in dataBody.透析状态) { |
| | | if ('透析单医嘱列表' in dataBody.透析状态 && dataBody.透析状态?.透析单医嘱列表) { |
| | | deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表; |
| | | } else { |
| | | deviceData.value.透析单医嘱列表 = [] |
| | |
| | | 当前客户耗材集合.value = dataBody?.使用耗材字典; |
| | | } |
| | | } |
| | | |
| | | |
| | | deviceData.value.设备变化 = Date.now() + "DEV"; |
| | | |
| | | |
| | | deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表; |
| | | console.log(deviceData.value.设备变化); |
| | | deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表; |
| | |
| | | }; |
| | | isinitXy.value = true; |
| | | setTimeout(() => { |
| | | console.log("初始化血压图表333333"); |
| | | |
| | | initTupiao(); |
| | | }, 500); |
| | | }; |
| | |
| | | onBeforeMount(() => { |
| | | closeSource(); |
| | | }); |
| | | |
| | | |
| | | const renderEcharts = (options: any) => { |
| | | const boxes = document.querySelectorAll(`.echartsDiv-${deviceData.value.设备编号}`); |
| | | boxes.forEach(box => { |
| | | if ((box as HTMLElement).dataset.initialized === 'true') return; |
| | | const chart = echarts.init(box as HTMLElement); |
| | | chart.setOption(options); |
| | | (box as HTMLElement).dataset.initialized = 'true'; |
| | | }); |
| | | } |
| | | |
| | | |
| | | |
| | | const initTupiao = () => { |
| | | if (deviceData.value.患者姓名 !== "") { |
| | | const seriesData = [ |
| | |
| | | ], |
| | | }, |
| | | }, |
| | | |
| | | |
| | | { |
| | | name: "", |
| | | type: "line", |
| | |
| | | xAxisData.push(1); |
| | | } |
| | | try { |
| | | let myChart = null; |
| | | |
| | | if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) { |
| | | myChart = echarts.init( |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | ); |
| | | } |
| | | // console.log('proxy.$refs["echartsDiv" + deviceData.value.设备编号]: ', proxy.$refs["echartsDiv" + deviceData.value.设备编号]) |
| | | // if (!bloodPressureEchart) { |
| | | // bloodPressureEchart = echarts.init( |
| | | // proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | // ); |
| | | // } |
| | | // console.log('bloodPressureEchart: ', bloodPressureEchart) |
| | | |
| | | const option = { |
| | | // backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value, |
| | |
| | | }, |
| | | series: seriesData, |
| | | }; |
| | | if (myChart) { |
| | | myChart.setOption(option); |
| | | } |
| | | // console.log("渲染设备", deviceData.value.设备编号, option); |
| | | // console.log('deviceData.透析状态1: ', Number(deviceData.value.透析状态)); |
| | | // nextTick(() => { |
| | | // bloodPressureEchart.setOption(option); |
| | | // bloodPressureEchart.resize(); |
| | | // setTimeout(() => { |
| | | // // 方法1:检查容器内是否有canvas元素 |
| | | // const canvas = bloodPressureEchart.getDom().querySelector('canvas'); |
| | | // console.log('canvas: ', canvas); |
| | | // if (!canvas) { |
| | | // console.error('图表渲染失败:未生成canvas元素'); |
| | | // return; |
| | | // } |
| | | // // 方法2:检查canvas的宽高 |
| | | // if (canvas.width === 0 || canvas.height === 0) { |
| | | // console.error('图表渲染失败:canvas宽高为0'); |
| | | // return; |
| | | // } |
| | | // // 方法3:检查图表实例的宽高 |
| | | // if (bloodPressureEchart.getWidth() === 0 || bloodPressureEchart.getHeight() === 0) { |
| | | // console.error('图表渲染失败:图表实例宽高为0'); |
| | | // return; |
| | | // }}, 1000); |
| | | // }); |
| | | renderEcharts(option); |
| | | } catch (e) { |
| | | console.log("图标渲染异常异常"); |
| | | console.log("图标渲染异常异常:", e); |
| | | } |
| | | } else { |
| | | try { |
| | | let myChart = null; |
| | | // if (!bloodPressureEchart) { |
| | | // // @ts-ignore |
| | | // bloodPressureEchart = echarts.init( |
| | | // proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | // ); |
| | | // } |
| | | |
| | | if (proxy.$refs["echartsDiv" + deviceData.value.设备编号]) { |
| | | myChart = echarts.init( |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | ); |
| | | } |
| | | |
| | | |
| | | |
| | | const option = { |
| | | backgroundColor: |
| | | 床旁血压计.value.zuihouTime > shishiTime.value |
| | |
| | | }, |
| | | series: [], |
| | | }; |
| | | if (myChart) { |
| | | myChart.setOption(option); |
| | | } |
| | | // console.log('deviceData.透析状态2: ', Number(deviceData.value.透析状态)); |
| | | // // bloodPressureEchart.setOption(option); |
| | | // nextTick(() => { |
| | | // // bloodPressureEchart.setOption(option); |
| | | // bloodPressureEchart.setOption(option); |
| | | // }); |
| | | renderEcharts(option); |
| | | } catch (e) { |
| | | console.log("图表渲染异常异常: ", e); |
| | | console.log( |
| | | "异常", |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号] |
| | | proxy.$refs["echartsDiv" + deviceData.value.设备编号], |
| | | e |
| | | ); |
| | | } |
| | | } |
| | | } else if (deviceData.value.患者姓名 === "") { |
| | | console.log("2222"); |
| | | const tbdata1 = []; |
| | | const tbdata2 = []; |
| | | const tbdata3 = []; |
| | |
| | | tbdata1.push(Number(wdMode?.finalText)); |
| | | wd.value = Number(wdMode?.finalText); |
| | | } |
| | | |
| | | |
| | | // 血液流速 |
| | | const xymode = e.属性列表.find((l) => { |
| | | return l.identifierText === "血液流速"; |
| | |
| | | tbdata2.push(Number(xymode?.finalText)); |
| | | ls.value = Number(xymode?.finalText); |
| | | } |
| | | |
| | | |
| | | // 电导度 |
| | | const dddMode = e.属性列表.find((l) => { |
| | | return l.identifierText === "透析液电导度"; |
| | |
| | | } |
| | | try { |
| | | console.log("渲染设备"); |
| | | let myChart1 = null; |
| | | let myChart2 = null; |
| | | let myChart3 = null; |
| | | |
| | | if (proxy.$refs["echartsDivwd" + deviceData.value.设备编号]) { |
| | | myChart1 = echarts.init( |
| | | proxy.$refs["echartsDivwd" + deviceData.value.设备编号] |
| | | ); |
| | | } |
| | | |
| | | if (proxy.$refs["echartsDivls" + deviceData.value.设备编号]) { |
| | | myChart2 = echarts.init( |
| | | proxy.$refs["echartsDivls" + deviceData.value.设备编号] |
| | | ); |
| | | } |
| | | |
| | | if (proxy.$refs["echartsDivddd" + deviceData.value.设备编号]) { |
| | | myChart3 = echarts.init( |
| | | proxy.$refs["echartsDivddd" + deviceData.value.设备编号] |
| | | ); |
| | | } |
| | | |
| | | const myChart1 = echarts.init( |
| | | proxy.$refs["echartsDivwd" + deviceData.value.设备编号] |
| | | ); |
| | | const myChart2 = echarts.init( |
| | | proxy.$refs["echartsDivls" + deviceData.value.设备编号] |
| | | ); |
| | | const myChart3 = echarts.init( |
| | | proxy.$refs["echartsDivddd" + deviceData.value.设备编号] |
| | | ); |
| | | const option1 = { |
| | | // backgroundColor: textcolor.value, |
| | | tooltip: { |
| | |
| | | }, |
| | | ], |
| | | }; |
| | | if (myChart1) { |
| | | myChart1.setOption(option1); |
| | | } |
| | | if (myChart2) { |
| | | myChart2.setOption(option2); |
| | | } |
| | | if (myChart3) { |
| | | myChart3.setOption(option3); |
| | | } |
| | | myChart1.setOption(option1); |
| | | myChart2.setOption(option2); |
| | | myChart3.setOption(option3); |
| | | } catch (e) { |
| | | console.log("图标渲染异常异常"); |
| | | } |
| | | |
| | | |
| | | console.log(deviceData.value); |
| | | } |
| | | }; |
| | | |
| | | |
| | | const getItemName = (name: string) => { |
| | | if (name) { |
| | | if (name === "血红蛋白测定") { |
| | | return "Hgb "; |
| | | if (name === "血红蛋白") { |
| | | return "HGB "; |
| | | } else if (name === "铁蛋白") { |
| | | return "Fer "; |
| | | return "FER "; |
| | | } else if (name === "白蛋白") { |
| | | return "Alb "; |
| | | } else if (name === "血清铁蛋白") { |
| | | return "SF "; |
| | | } else if (name === "钙") { |
| | | return "Ga "; |
| | | return "ALB "; |
| | | } |
| | | // else if (name === "血清铁蛋白") { |
| | | // return "SF "; |
| | | // } |
| | | else if (name === "钙") { |
| | | return "Ca "; |
| | | } else if (name === "钾") { |
| | | return "K "; |
| | | } else if (name === "无机磷") { |
| | | return "pi "; |
| | | return "P "; |
| | | } else if (name === "甲状旁腺激素") { |
| | | return "PTH "; |
| | | } else { |
| | |
| | | // border-bottom:8px solid red ; |
| | | } |
| | | } |
| | | |
| | | |
| | | /* 应用闪烁动画 */ |
| | | .blink { |
| | | // float: left; /* 让div浮动到左边 */ |
| | | width: 100%; |
| | | height: 100%; |
| | | animation: blink 2s infinite; /* 每秒闪烁一次,无限次数 */ |
| | | |
| | | |
| | | // border-left:5px solid red ; |
| | | // border-right:5px solid red ; |
| | | |
| | | |
| | | // background: red; |
| | | cursor: pointer; |
| | | // margin-bottom: 100%; |
| | |
| | | align-items: center; /* 垂直居中 */ |
| | | height: 100vh; /* 根据需要调整高度 */ |
| | | } |
| | | |
| | | |
| | | .centered-text { |
| | | font-weight: 600; |
| | | /* 其他样式 */ |
| | |
| | | height: 100%; |
| | | gap: 10px; /* 调整这个值来设置间隔 */ |
| | | } |
| | | |
| | | |
| | | .item-weiqiandao { |
| | | flex: 1; /* 确保每个子 div 占据相同的高度 */ |
| | | background-color: lightblue; /* 可以根据需要调整背景颜色 */ |
| | |
| | | width: 100%; /* 设置一个具体的宽度或确保有继承宽度 */ |
| | | font-weight: 600; |
| | | } |
| | | |
| | | |
| | | .right-div { |
| | | width: 50px; /* 固定宽度 */ |
| | | font-size: 16px; |
| | |
| | | height: 100%; |
| | | overflow-y: auto; /* 当内容超出容器高度时,垂直方向上显示滚动条 */ |
| | | } |
| | | |
| | | |
| | | /* 可选:给ul设置一些样式 */ |
| | | .scrollable-container ul { |
| | | list-style: none; |
| | | padding: 0; |
| | | margin: 0; |
| | | } |
| | | |
| | | |
| | | .scrollable-container li { |
| | | // padding: 4px; |
| | | font-weight: 600; |
| | | // border-bottom: 1px solid #ddd; |
| | | } |
| | | |
| | | |
| | | .cont_parent { |
| | | height: 100%; |
| | | display: grid; |
| | | grid-template-rows: repeat(3, 1fr); /* 将容器划分为3行,每行占1份 */ |
| | | gap: 5px; /* 子元素之间的间隙(可选) */ |
| | | } |
| | | |
| | | |
| | | .cont_child { |
| | | border: 1px solid #ccc; |
| | | padding: 10px; |
| | |
| | | .custom-dialog { |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | |
| | | .my-header { |
| | | background-color: #ff6b6b; /* 标题背景颜色 */ |
| | | color: white; /* 标题文字颜色 */ |
| | |
| | | padding: 0; |
| | | padding-bottom: 10px; |
| | | } |
| | | </style> |
| | | </style> |