<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>
|
|
<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;"
|
>
|
<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="{ 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: 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>
|
</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>
|
</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: 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"
|
/>
|
<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>
|
</el-row>
|
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="18" style="height: 100%;width: 100%;">
|
<div class="item" style="height: 100%;padding-bottom: 10px; /* 设置所有方向的间距为10px */">
|
<div style="height: 100%;">
|
<div
|
v-if="Number(deviceData.透析状态) > 1"
|
:ref="'echartsDiv' + deviceData.设备编号"
|
style="height: 97%"
|
>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 消息提示一直显示最新的消息 -->
|
<div 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>
|
</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>
|
<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="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;height: 100%;">
|
<div class="container-cord" style="height: 30px;">
|
<img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
|
/>
|
<span class="text-group_3">透析方案</span>
|
</div>
|
<div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
|
<div class="container-body-text" style="color: #3A75B8;">
|
<template v-for="(item,index) in 当前客户耗材集合.透析模式" :key="index">
|
<span> {{item}}</span><template v-if="当前客户耗材集合.透析模式.length>index+1">,</template>
|
</template>
|
|
</div>
|
</div>
|
</div>
|
<div class="item-weiqiandao" style="background: #D9F0E2;border-radius: 8px;height: 100%;">
|
<div class="container-cord" style="height: 30px;">
|
<img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
|
/>
|
<span class="text-group_3">一次性血液透析体外循环管路</span>
|
</div>
|
<div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
|
<div class="scrollable-container" style="height: 100%;color: #3AB859;">
|
<ul>
|
<li v-for="(item,index) in 当前客户耗材集合.管路" :key="index">
|
{{item}}
|
</li>
|
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="item-weiqiandao" style="background: #F9DEDE;border-radius: 8px;height: 100%;">
|
<div class="container-cord" style="height: 30px;">
|
<img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
|
/>
|
<span class="text-group_3">一次性使用透析护理包</span>
|
</div>
|
<div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
|
<div class="scrollable-container" style="height: 100%;color: #902D2D;">
|
<ul>
|
<li v-for="(item,index) in 当前客户耗材集合.护理包" :key="index">
|
{{item}}
|
</li>
|
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="7" style="height: 100%;">
|
<div class="container-weiqiandao" style="height: 100%">
|
<div class="item-weiqiandao" style="background: #EFE5FF;border-radius: 8px;height: 100%;">
|
<div class="container-cord" style="height: 30px;">
|
<img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
|
/>
|
<span class="text-group_3">一次性使用内瘘穿刺针</span>
|
</div>
|
<div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
|
<div class="scrollable-container" style="height: 100%;color: #A78718;">
|
<ul>
|
<li v-for="(item,index) in 当前客户耗材集合.穿刺针" :key="index">
|
{{item}}
|
</li>
|
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="mowei" style="height: 39%;">
|
<el-row :gutter="20" style="height: 100%;padding:10px 20px 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>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="container-weiqiandao" style="height: 100%">
|
<div class="item-weiqiandao" style="background: #F6F5FA;border-radius: 8px;height: 100%;">
|
<div class="container-cord" style="height: 30px;">
|
<img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
|
/>
|
<span class="text-group_3">血液透析滤过器</span>
|
</div>
|
<div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
|
<div style="height: 100%;color: #333333;font-weight: 600;">
|
<div>
|
<span v-for="(item,index) in 当前客户耗材集合.滤过器" :key="index" style="margin-right: 10px">
|
{{item}}<template v-if="当前客户耗材集合.滤过器.length>index+1">,</template>
|
</span>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
<template v-else>
|
<div style="height: 89%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 100px;">
|
<div style="height: 100%;">
|
<div class="container-cord" style="height: 100%;padding-left: 20PX;">
|
<img style="width: 100px;"
|
referrerpolicy="no-referrer"
|
src="https://lanhu-oss.lanhuapp.com/SketchPng7d7c4e66d2f3fb56cb7c93cf3b359782ee05a12117f39e9b1836bff686aca428"
|
/>
|
<span class="text-group_3" style="font-size: 100px;">等待患者排班</span>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
</div>
|
<el-dialog
|
:show-close="false"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
title="提示"
|
v-model="centerDialogVisible"
|
width="500px"
|
center>
|
<span>
|
<el-form label-position="left" label-width="auto" style="max-width: 600px">
|
<el-space fill>
|
<el-alert type="warning" show-icon :closable="false">
|
<p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
|
</el-alert>
|
<el-form-item label="设备编号">
|
<el-input v-model="deviceCode" />
|
</el-form-item>
|
</el-space>
|
</el-form>
|
</span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="centerDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="saveSet">
|
确认
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</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
|
}
|
})
|
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.状态类型 === "在线";
|
});
|
if (x !== 0) {
|
colorStr = list[0].状态颜色;
|
}
|
}
|
return colorStr;
|
});
|
// 没有报警就返回空字符传
|
const noBaoji = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
let zhuantaiStr = "";
|
let jinggaoStr = "";
|
if (list && list.length > 0) {
|
list.forEach((el: any) => {
|
if (el.是否为警告标记 === 1) {
|
if (jinggaoStr !== "") {
|
jinggaoStr += "/" + el.状态名称;
|
} else {
|
jinggaoStr += el.状态名称;
|
}
|
} else {
|
zhuantaiStr += el.状态名称;
|
}
|
});
|
}
|
return jinggaoStr;
|
});
|
// 状态返回
|
const zhuangtaiStr = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
let zhuantaiStr = "";
|
if (list && list.length > 0) {
|
list.forEach((el: any) => {
|
if (
|
el.是否为警告标记 === 1 ||
|
el.状态类型 === "透析机消毒" ||
|
el.状态类型 === "在线"
|
) {
|
//去掉待机和消毒状态显示
|
} else {
|
if (zhuantaiStr !== "") {
|
zhuantaiStr += "/" + el.状态名称;
|
} else {
|
zhuantaiStr += el.状态名称;
|
}
|
}
|
});
|
}
|
|
return zhuantaiStr;
|
});
|
const isbaioji = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
if (
|
(deviceData.value.监测血压是否低于百分之30 ||
|
deviceData.value.跨膜压是否大于200 ||
|
deviceData.value.监测血压是否高于百分之30) &&
|
deviceData.value.透析状态 === "2.0"
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
// 透前血压告警
|
const tqXygj = computed(() => {
|
if (deviceData.value.透前血压_伸缩压 > 160 || deviceData.value.透前血压_伸缩压 < 90) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
// 透前脉搏告警
|
const tqMbgj = computed(() => {
|
if (deviceData.value.透前脉搏 > 90) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
// 设置内联样式对象
|
const backgroundStyle = {
|
backgroundImage: `url(${TQS88})`,
|
backgroundSize: "cover", // 根据需要调整
|
backgroundPosition: "center", // 根据需要调整
|
};
|
|
watch(
|
() => txzt.value,
|
() => {
|
if (txzt.value === "0.0") {
|
txztText.value = "未签";
|
textcolor.value = "#FAFAFA";
|
background.value = "#606266";
|
} else if (txzt.value === "1.0") {
|
// 蓝色
|
textcolor.value = "#faecd8";
|
background.value = "#E6A23C";
|
txztText.value = "已签";
|
} else if (txzt.value === "2.0") {
|
// 绿色
|
// textcolor.value = '#D9F5E2';
|
// background.value='#67C23A'
|
textcolor.value = "#ECF5FF";
|
background.value = "#409EFF";
|
txztText.value = "透中";
|
} else if (txzt.value === "2.5") {
|
//
|
textcolor.value = "#fde2e2";
|
background.value = "#fab6b6";
|
txztText.value = "结束";
|
} else if (txzt.value === "3.0") {
|
// 已经结束
|
textcolor.value = "#FFECD0";
|
background.value = "#E6A23C";
|
txztText.value = "检查";
|
} else if (txzt.value === "4.0") {
|
// yij
|
textcolor.value = "#FFECD0";
|
background.value = "#E6A23C";
|
txztText.value = "归档";
|
}
|
},
|
{
|
immediate: true,
|
deep: true,
|
}
|
);
|
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);
|
}
|
});
|
}
|
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);
|
}
|
};
|
const getItemName=(name:string)=>{
|
if(name){
|
if(name==='血红蛋白测定'){
|
return 'Hgb '
|
}
|
else if(name==='铁蛋白'){
|
return 'Fer '
|
}
|
else if(name==='白蛋白'){
|
return 'Alb '
|
}
|
else if(name==='血清铁蛋白'){
|
return 'SF '
|
}
|
else if(name==='钙'){
|
return 'Ga '
|
}
|
else if(name==='钾'){
|
return 'K '
|
}
|
else if(name==='无机磷'){
|
return 'pi '
|
}
|
else if(name==='甲状旁腺激素'){
|
return 'PTH '
|
}else{
|
return name
|
}
|
|
}else{
|
return ''
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.divice{
|
background: #DAE5EC;
|
font-size: 100%;
|
border-radius: 4px;
|
border: solid 1px;
|
width: 100%;
|
height: 100%;
|
border: 1px solid coral;
|
.toubu{
|
// padding-left: 20px;
|
width: 100%;
|
background: #70A3DD;
|
border-radius: 4px 0px 16px 16px;
|
}
|
.chongjian{
|
.container {
|
height: 100%;
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
width: 100%;
|
gap: 10px; /* 设置所有方向的间距为10px */
|
}
|
.item {
|
border: 1px solid #ccc;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
border-radius: 8px;
|
margin-bottom: 10px;
|
|
}
|
}
|
.mowei{
|
.container {
|
height: 100%;
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
width: 100%;
|
gap: 10px; /* 设置所有方向的间距为10px */
|
}
|
.item {
|
border: 1px solid #ccc;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
border-radius: 8px;
|
margin-bottom: 10px;
|
|
}
|
}
|
}
|
/* 定义闪烁动画 */
|
@keyframes blink {
|
0% {
|
border:4px solid red ;
|
}
|
50% {
|
border:4px solid Transparent ;
|
}
|
100% {
|
border:4px solid red ;
|
// border-bottom:8px solid red ;
|
}
|
}
|
|
/* 应用闪烁动画 */
|
.blink {
|
// float: left; /* 让div浮动到左边 */
|
width: 100%;
|
height: 100%;
|
animation: blink 2s infinite; /* 每秒闪烁一次，无限次数 */
|
|
// border-left:5px solid red ;
|
// border-right:5px solid red ;
|
|
// background: red;
|
cursor: pointer;
|
// margin-bottom: 100%;
|
}
|
@keyframes blink2 {
|
0% {
|
background: red ;
|
}
|
50% {
|
background: Transparent ;
|
}
|
100% {
|
background: red ;
|
// border-bottom:8px solid red ;
|
}
|
}
|
.blink2{
|
animation: blink2 2s infinite; /* 每秒闪烁一次，无限次数 */
|
width: 100%;
|
height: 100%;
|
}
|
.grid-container {
|
display: grid;
|
align-items: center; /* 垂直居中 */
|
height: 100vh; /* 根据需要调整高度 */
|
}
|
|
.centered-text {
|
font-weight: 600;
|
/* 其他样式 */
|
}
|
.container-cord {
|
display: flex;
|
align-items: center; /* 垂直居中对齐 */
|
// border: 1px solid #ccc;
|
// padding: 10px;
|
.image {
|
margin-right: 10px; /* 图片和文字之间的间距 */
|
}
|
.text-group_3 {
|
margin-left:10px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 16px;
|
}
|
}
|
.container-weiqiandao {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
gap: 10px; /* 调整这个值来设置间隔 */
|
}
|
|
.item-weiqiandao {
|
flex: 1; /* 确保每个子 div 占据相同的高度 */
|
background-color: lightblue; /* 可以根据需要调整背景颜色 */
|
padding: 10px; /* 添加内边距以美化显示 */
|
}
|
.container-body{
|
display: flex;
|
justify-content: center; /* 水平居中 */
|
align-items: center; /* 垂直居中 */
|
// padding: 10px;
|
}
|
.container-body-text {
|
text-align: center; /* 文本水平居中 */
|
white-space: nowrap; /* 防止文本换行 */
|
overflow: hidden; /* 隐藏溢出内容 */
|
text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
|
width: 100%; /* 确保宽度为父容器的100% */
|
font-weight: 600;font-size: 50px;color: #D58E56;
|
}
|
.grid-container-text{
|
display: flex;
|
width: 100%; /* 容器宽度可以根据需要调整 */
|
padding-left: 10px;
|
}
|
.left-div {
|
flex-grow: 1; /* 自适应宽度，占满剩余空间 */
|
white-space: nowrap; /* 防止文字自动换行 */
|
overflow: hidden; /* 隐藏超出容器宽度的内容 */
|
text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
|
width: 100%; /* 设置一个具体的宽度或确保有继承宽度 */
|
font-weight: 600;
|
}
|
|
.right-div {
|
width: 50px; /* 固定宽度 */
|
font-size: 16px;
|
display: flex;
|
justify-content: center; /* 水平居中 */
|
align-items: center; /* 垂直居中 */
|
|
|
}
|
/* 设置你的div占据整个高度，并在需要时显示滚动条 */
|
.scrollable-container {
|
height: 100%;
|
overflow-y: auto; /* 当内容超出容器高度时，垂直方向上显示滚动条 */
|
}
|
|
/* 可选：给ul设置一些样式 */
|
.scrollable-container ul {
|
list-style: none;
|
padding: 0;
|
margin: 0;
|
}
|
|
.scrollable-container li {
|
padding: 4px;
|
font-weight: 600;
|
// border-bottom: 1px solid #ddd;
|
}
|
|
</style>
|
