<template>
|
<div class="divice">
|
<!-- {{数据初始化}} -->
|
<el-carousel v-show="deviceData.患者姓名 && pageHeight > 0" height="auto" :autoplay="false" motion-blur :initial-index="0" always="always">
|
<el-carousel-item :style="{ height: pageHeight + 'px'}">
|
<div class="youzhiliao" style="height: 100%" >
|
<div class="toubu" style="height: 11%">
|
<el-row
|
v-if="deviceData.患者姓名 !== ''"
|
style="
|
font-weight: 900;
|
color: #ffffff;
|
width: 100%;
|
height: 100%;
|
line-height: 100%;
|
padding: 20px;
|
position: relative;
|
"
|
>
|
<span
|
class="grid-container"
|
style="font-size: 300%; height: 100%"
|
v-if="deviceData.设备名称 !== null"
|
>{{ deviceData.设备名称 }}
|
</span>
|
<span
|
class="grid-container"
|
@click="initTupiao"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.患者姓名 }}
|
</span>
|
|
<span
|
class="grid-container"
|
v-if="deviceData.年龄 !== null"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.年龄 }}岁</span
|
>
|
<span
|
class="grid-container"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.性别 }}</span
|
>
|
<span
|
class="grid-container"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ patientSourceAndCode }}</span
|
>
|
<span
|
v-if="deviceData.签到号"
|
class="grid-container"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.签到号 }}</span
|
>
|
|
<div
|
style="
|
position: absolute;
|
top: 0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 5px;
|
height: 100%;
|
"
|
>
|
<div
|
class="grid-container"
|
style="display: flex; align-items: center; padding-right: 20px"
|
>
|
<span
|
style="
|
display: inline-block;
|
margin-right: 15px;
|
font-size: 30px;
|
color: #f56c6c;
|
"
|
>{{ 倒计时显示 }}</span
|
>
|
<span style="display: inline-block; margin-right: 15px">
|
<img @click="dingshiShow" :src="dingshi" alt="Image 1" />
|
</span>
|
<span style="display: inline-block">
|
<img
|
@click="centerDialogVisible = true"
|
:src="shezhi"
|
alt="Image 2"
|
/>
|
</span>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
<div class="chongjian" style="height: 50%">
|
<el-row :gutter="20" style="height: 100%; padding: 20px 20px 10px 20px">
|
<el-col :span="6" style="height: 100%; padding-bottom: 10px">
|
<div style="height: 100%">
|
<div
|
:style="{ backgroundImage: `url(${deviceData.患者头像})` }"
|
style="
|
background-size: 100% 100%;
|
border-radius: 5px;
|
/* margin-bottom: 1%; */
|
height: 100%;
|
width: 100%;
|
"
|
></div>
|
</div>
|
</el-col>
|
<!-- 床旁显示血压计有数据的时候 -->
|
<template v-if="床旁血压计.zuihouTime > shishiTime">
|
<el-col :span="18" style="height: 100%">
|
<el-row style="height: 50%">
|
<div style="width: 100%; height: 100%; border-radius: 8px">
|
<div
|
class="item"
|
style="background-color: #ffffff; height: 97%"
|
>
|
<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%"
|
>
|
<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;
|
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%">
|
<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>
|
<div
|
class="item-weiqiandao"
|
style="background: #ffedd2; border-radius: 8px"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">穿刺针</span>
|
</div>
|
<div
|
class="grid-container"
|
style="
|
height: calc(100% - 30px);
|
width: 100%;
|
font-size: 25px;
|
"
|
>
|
<div
|
class="grid-container-text"
|
style="color: #a78718"
|
v-for="(item, index) in deviceData.穿刺针列表"
|
:style="{
|
fontSize:
|
deviceData.穿刺针列表.length > 1 ? '22px' : '28px',
|
}"
|
:key="index"
|
>
|
<div class="left-div">{{ item.name }}</div>
|
<div class="right-div">{{ item.数量 }}支</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="container-weiqiandao" style="height: 100%">
|
<div
|
class="item-weiqiandao"
|
style="background: #e5eeff; border-radius: 8px"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">一次性使用透析护理包</span>
|
</div>
|
<div
|
class="grid-container"
|
style="
|
height: calc(100% - 30px);
|
width: 100%;
|
font-size: 28px;
|
"
|
>
|
<div
|
class="grid-container-text"
|
style="color: #1d77bd"
|
v-for="(item, index) in deviceData.护理包列表"
|
:style="{
|
fontSize:
|
deviceData.护理包列表.length > 1 ? '22px' : '28px',
|
}"
|
:key="index"
|
>
|
<div class="left-div">{{ item.name }}</div>
|
<div class="right-div">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div>
|
</div>
|
<div
|
class="item-weiqiandao"
|
style="background: #e5eeff; border-radius: 8px"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">血管通路</span>
|
</div>
|
<div
|
class="grid-container"
|
style="
|
height: calc(100% - 30px);
|
width: 100%;
|
font-size: 28px;
|
"
|
>
|
<div
|
class="grid-container-text"
|
style="color: #1d77bd"
|
v-for="(item, index) in deviceData.血管通路列表"
|
:style="{
|
fontSize:
|
deviceData.血管通路列表.length > 1 ? '22px' : '28px',
|
}"
|
:key="index"
|
>
|
<div class="left-div">{{ item.类型 }}</div>
|
<div class="right-div" style="width: 200px">
|
{{ item.位置 }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-carousel-item>
|
<el-carousel-item :style="{ height: pageHeight + 'px'}">
|
<div class="toubu" style="height: 11%">
|
<el-row
|
v-show="deviceData.患者姓名 !== ''"
|
style="
|
font-weight: 900;
|
color: #ffffff;
|
width: 100%;
|
height: 100%;
|
line-height: 100%;
|
padding: 20px;
|
position: relative;
|
"
|
>
|
<span
|
class="grid-container"
|
style="font-size: 300%; height: 100%"
|
v-if="deviceData.设备名称 !== null"
|
>{{ deviceData.设备名称 }}
|
</span>
|
<span
|
class="grid-container"
|
@click="initTupiao"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.患者姓名 }}
|
</span>
|
|
<span
|
class="grid-container"
|
v-if="deviceData.年龄 !== null"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.年龄 }}岁</span
|
>
|
<span
|
class="grid-container"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.性别 }}</span
|
>
|
<span
|
class="grid-container"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ patientSourceAndCode }}</span
|
>
|
<span
|
v-if="deviceData.签到号"
|
class="grid-container"
|
style="margin-left: 2%; font-size: 200%; height: 100%"
|
>{{ deviceData.签到号 }}</span
|
>
|
|
<div
|
style="
|
position: absolute;
|
top: 0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 5px;
|
height: 100%;
|
"
|
>
|
<div
|
class="grid-container"
|
style="display: flex; align-items: center; padding-right: 20px"
|
>
|
<span
|
style="
|
display: inline-block;
|
margin-right: 15px;
|
font-size: 30px;
|
color: #f56c6c;
|
"
|
>{{ 倒计时显示 }}</span
|
>
|
<span style="display: inline-block; margin-right: 15px">
|
<img @click="dingshiShow" :src="dingshi" alt="Image 1" />
|
</span>
|
<span style="display: inline-block">
|
<img
|
@click="centerDialogVisible = true"
|
:src="shezhi"
|
alt="Image 2"
|
/>
|
</span>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
<DoctorAdvice :height="'89%'" :list="deviceData.透析单医嘱列表" />
|
</el-carousel-item>
|
</el-carousel>
|
|
<div v-show="!deviceData.患者姓名" style="height: 100%">
|
<div class="toubu" style="height: 11%">
|
<el-row
|
style="
|
font-weight: 900;
|
color: #ffffff;
|
width: 100%;
|
height: 100%;
|
line-height: 100%;
|
padding: 20px;
|
position: relative;
|
"
|
>
|
<span
|
class="grid-container"
|
style="font-size: 300%; height: 100%"
|
v-if="deviceData.设备名称 !== null"
|
>{{ deviceData.设备名称 }}
|
</span>
|
|
<div
|
style="
|
position: absolute;
|
top: 0;
|
right: 0;
|
display: grid;
|
padding: 5px;
|
font-size: 300%;
|
height: 100%;
|
"
|
>
|
<div
|
style="
|
position: absolute;
|
top: 0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 5px;
|
height: 100%;
|
"
|
>
|
<div
|
class="grid-container"
|
style="display: flex; align-items: center; padding-right: 20px"
|
>
|
<span
|
style="
|
display: inline-block;
|
margin-right: 15px;
|
font-size: 30px;
|
color: #f56c6c;
|
"
|
>{{ 倒计时显示 }}</span
|
>
|
|
<span style="display: inline-block; margin-right: 15px">
|
<img @click="dingshiShow" :src="dingshi" alt="Image 1" />
|
</span>
|
<span style="display: inline-block">
|
<img
|
@click="centerDialogVisible = true"
|
:src="shezhi"
|
alt="Image 2"
|
/>
|
</span>
|
</div>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
<template v-if="!ispaiban">
|
<div class="chongjian" style="height: 50%">
|
<el-row
|
:gutter="10"
|
style="height: 100%; padding: 10px 20px 0px 20px"
|
>
|
<el-col :span="7" style="height: 100%" ref="targetDiv">
|
<div class="container-weiqiandao" style="height: 100%">
|
<div
|
class="item-weiqiandao"
|
style="background: #ffedd2; border-radius: 8px; height: 100%"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">抗凝剂</span>
|
</div>
|
<div
|
class="grid-container"
|
style="height: calc(100% - 30px); width: 100%"
|
>
|
<div class="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" style="height: 100%">
|
<div class="cont_parent">
|
<div
|
class="cont_child"
|
style="background: #e5eeff; border-radius: 8px"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">透析方案</span>
|
</div>
|
<div
|
class="grid-container"
|
style="height: calc(100% - 30px); width: 100%"
|
>
|
<div class="container-body-text" style="color: #3a75b8">
|
<template
|
v-for="(item, index) in 当前客户耗材集合.透析模式"
|
:key="index"
|
>
|
<span> {{ item }}</span
|
><template
|
v-if="当前客户耗材集合.透析模式.length > index + 1"
|
>,</template
|
>
|
</template>
|
</div>
|
</div>
|
</div>
|
<div
|
class="cont_child"
|
style="background: #d9f0e2; border-radius: 8px"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">一次性血液透析体外循环管路</span>
|
</div>
|
<div
|
class="grid-container"
|
style="height: calc(100% - 30px); width: 100%"
|
>
|
<div
|
class="scrollable-container"
|
style="height: 100%; color: #3ab859"
|
>
|
<ul>
|
<li
|
v-for="(item, index) in 当前客户耗材集合.管路"
|
:key="index"
|
>
|
{{ item }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div
|
class="cont_child"
|
style="background: #f9dede; border-radius: 8px"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">一次性使用透析护理包</span>
|
</div>
|
<div
|
class="grid-container"
|
style="height: calc(100% - 30px); width: 100%"
|
>
|
<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>
|
<!-- <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 10px 20px"
|
>
|
<el-col :span="12" style="height: 100%">
|
<div class="container-weiqiandao" style="height: 100%">
|
<div
|
class="item-weiqiandao"
|
style="background: #f6f5fa; border-radius: 8px; height: 100%"
|
>
|
<div class="container-cord" style="height: 30px">
|
<img
|
style="width: 25px"
|
referrerpolicy="no-referrer"
|
:src="tsl"
|
/>
|
<span class="text-group_3">血液透析器</span>
|
</div>
|
<div
|
class="grid-container"
|
style="height: calc(100% - 30px); width: 100%"
|
>
|
<div style="height: 100%; color: #333333; font-weight: 600">
|
<div>
|
<span
|
v-for="(item, index) in 当前客户耗材集合.透析器"
|
:key="index"
|
style="margin-right: 10px"
|
>
|
{{ item
|
}}<template
|
v-if="当前客户耗材集合.透析器.length > index + 1"
|
>,</template
|
>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</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="绑定设备" show-icon :closable="false">
|
<p>"请输入设备编号后才能使用不然无法定位到数据来源:</p>
|
<p>也可以选择二维码图片文件识别</p>
|
</el-alert>
|
<el-form-item label="设备编号">
|
<el-input v-model="deviceCode" />
|
</el-form-item>
|
</el-space>
|
</el-form>
|
<div>
|
<input
|
type="file"
|
pattern="选取二维码"
|
accept="image/*"
|
@change="onFileChange"
|
/>
|
</div>
|
</span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="centerDialogVisible = false">取消</el-button>
|
<!-- <el-button @click="test">测试播报</el-button> -->
|
<!-- <el-button @click="toggleAlarm">测试报警</el-button> -->
|
<el-button type="primary" @click="saveSet"> 确认 </el-button>
|
<el-button type="success" @click="shuaxin"> 刷新 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog
|
v-model="centerDialogVisible2"
|
custom-class="custom-dialog"
|
:show-close="false"
|
width="700"
|
center
|
>
|
<template #header="{ titleId, titleClass }">
|
<div class="my-header">
|
<h4 style="color: white" :id="titleId" :class="titleClass">
|
定时任务设置
|
</h4>
|
</div>
|
</template>
|
<span>
|
<div style="margin-right: 10px">
|
<el-form :model="formInline" size="large" label-width="100px">
|
<el-form-item label="时间设定：">
|
<el-col :span="10">
|
<el-input-number
|
style="width: 100%"
|
v-model="formInline.xiaoshi"
|
:min="0"
|
:max="10"
|
/>
|
</el-col>
|
<el-col :span="2" class="text-center">
|
<span class="text-gray-500">小时 </span>
|
</el-col>
|
<el-col :span="10">
|
<el-input-number
|
style="width: 100%"
|
v-model="formInline.fenzhong"
|
:min="1"
|
:max="59"
|
/>
|
</el-col>
|
<el-col :span="2" class="text-center">
|
<span class="text-gray-500">分钟 </span>
|
</el-col>
|
</el-form-item>
|
|
<el-form-item label="提醒内容：">
|
<el-input
|
v-if="!formInline.selectOpen"
|
v-model="formInline.alertText"
|
style="max-width: 600px"
|
placeholder="请填写报警内容"
|
type="textarea"
|
class="input-with-select"
|
>
|
</el-input>
|
<el-select
|
v-else
|
v-model="formInline.selectType"
|
style="width: 100%"
|
placeholder="选择内容"
|
>
|
<el-option label="测血压" value="测血压" />
|
<el-option label="开超滤" value="开超滤" />
|
<el-option label="给药" value="给药" />
|
<el-option label="调电导度" value="调电导度" />
|
<el-option label="调血流量" value="调血流量" />
|
<el-option label="冲管" value="冲管" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="定型文：">
|
<el-switch v-model="formInline.selectOpen" />
|
</el-form-item>
|
</el-form>
|
</div>
|
</span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="centerDialogVisible2 = false">取消</el-button>
|
<el-button type="primary" @click="setDingshi"> 确定 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog
|
v-model="centerDialogVisible3"
|
custom-class="custom-dialog"
|
:show-close="false"
|
width="800"
|
center
|
>
|
<template #header="{ titleId, titleClass }">
|
<div class="my-header">
|
<h4 style="color: white" :id="titleId" :class="titleClass">
|
定时任务提醒
|
</h4>
|
</div>
|
</template>
|
<span>
|
<div style="text-align: center; font-size: 35px">
|
<h3>{{ 倒计时告警文本 }}</h3>
|
</div>
|
</span>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="" @click="centerDialogVisible3 = false"
|
>取消</el-button
|
>
|
<el-button type="primary" @click="centerDialogVisible3 = false">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import {
|
BrowserMultiFormatReader,
|
NotFoundException,
|
ChecksumException,
|
FormatException,
|
} from "@zxing/library";
|
import TQS88 from "../img/TQS88.png";
|
import shezhi from "../img/shezhi.png";
|
import dingshi from "../img/dingshi.png";
|
import xinlv from "../img/xinlv.png";
|
import tsl from "../img/tsl.png";
|
import zlms from "../img/zlms.png";
|
import txztimg from "../img/txzt.png";
|
import txq from "../img/txq.png";
|
import sjjd from "../img/sjjd.png";
|
import cljd from "../img/cljd.png";
|
import tizhong from "../img/tizhong.png";
|
import { EventSourcePolyfill } from "event-source-polyfill";
|
import alertbaojin from "../assets/alert.wav";
|
import cxybaojing from "../assets/cxy.mp3";
|
import gybaojing from "../assets/gy.mp3";
|
import kclbaojing from "../assets/kcl.mp3";
|
import tdddbaojing from "../assets/tzddd.mp3";
|
import tzxllbaojing from "../assets/tzxll.mp3";
|
import cgbaojing from "../assets/cg.mp3";
|
|
import {
|
computed,
|
getCurrentInstance,
|
onBeforeMount,
|
onMounted,
|
ref,
|
watch,
|
onUnmounted,
|
onBeforeUnmount,
|
nextTick,
|
} from "vue";
|
import { Local } from "../utils/storage";
|
import * as echarts from "echarts";
|
import { jgTime4 } from "../utils/formatTime";
|
import { setTimeoutAlert } from "../utils/httpApi";
|
import DoctorAdvice from '../components/doctorAdvice/index.vue';
|
// 创建 Audio 对象，指向 public 目录下的音频文件
|
const alarmSound = new Audio(alertbaojin); //一般报警声音
|
const alarmSoundCXY = new Audio(cxybaojing); //测血压报警
|
alarmSoundCXY.loop = true; // 循环播放
|
const alarmSoundGY = new Audio(gybaojing); //给药报警
|
alarmSoundGY.loop = true; // 循环播放
|
const alarmSoundKCL = new Audio(kclbaojing); //开超滤报警
|
alarmSoundKCL.loop = true; // 循环播放
|
const alarmSoundTZDDD = new Audio(tdddbaojing); //调整电导度
|
alarmSoundTZDDD.loop = true; // 循环播放
|
const alarmSoundTZxll = new Audio(tzxllbaojing); //调整电导度
|
alarmSoundTZxll.loop = true; // 循环播放
|
const alarmSoundCG = new Audio(cgbaojing); //冲管
|
alarmSoundCG.loop = true; // 循环播放
|
|
// 控制播放状态的变量
|
const isPlaying = ref(false);
|
// 切换播放/暂停的方法
|
const toggleAlarm = () => {
|
console.log('-------------')
|
console.log('看看是打开还是暂停')
|
if (isPlaying.value) {
|
if (倒计时告警文本.value === "测血压") {
|
|
alarmSoundCXY.pause();
|
} else if (倒计时告警文本.value === "冲管") {
|
alarmSoundCG.pause();
|
} else if (倒计时告警文本.value === "开超滤") {
|
alarmSoundKCL.pause();
|
} else if (倒计时告警文本.value === "给药") {
|
alarmSoundGY.pause();
|
} else if (倒计时告警文本.value === "调电导度") {
|
alarmSoundTZDDD.pause();
|
} else if (倒计时告警文本.value === "调血流量") {
|
alarmSoundTZxll.pause();
|
} else {
|
alarmSound.pause();
|
}
|
} else {
|
if (倒计时告警文本.value === "测血压") {
|
alarmSoundCXY.currentTime = 0; // 从头开始
|
alarmSoundCXY.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
} else if (倒计时告警文本.value === "冲管") {
|
alarmSoundCG.currentTime = 0; // 从头开始
|
alarmSoundCG.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
} else if (倒计时告警文本.value === "开超滤") {
|
alarmSoundKCL.currentTime = 0; // 从头开始
|
alarmSoundKCL.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
} else if (倒计时告警文本.value === "给药") {
|
alarmSoundGY.currentTime = 0; // 从头开始
|
alarmSoundGY.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
} else if (倒计时告警文本.value === "调电导度") {
|
alarmSoundTZDDD.currentTime = 0; // 从头开始
|
alarmSoundTZDDD.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
} else if (倒计时告警文本.value === "调血流量") {
|
alarmSoundTZxll.currentTime = 0; // 从头开始
|
alarmSoundTZxll.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
} else {
|
alarmSound.currentTime = 0; // 从头开始播放
|
alarmSound.play().catch((err) => {
|
console.error("播放失败:", err);
|
});
|
}
|
}
|
isPlaying.value = !isPlaying.value;
|
};
|
const { proxy } = getCurrentInstance() as any;
|
// 在需要使用的组件中引入
|
import { ChatDotSquare } from "@element-plus/icons-vue";
|
const ispaiban = ref(false);
|
import { ElLoading, ElMessage } from "element-plus";
|
// 连接服务器
|
const source = ref<EventSourcePolyfill | null>(null);
|
//接收到的sse数据
|
const sseData = ref({});
|
// sse状态
|
const readyState = ref({ key: 0, value: "正在链接中" });
|
|
// 血压的echart实例
|
let bloodPressureEchart: echarts.ECharts | null = null
|
let observer;
|
|
const deviceCode = ref("");
|
const shishiTime = ref(new Date());
|
//有没有推送过血压如果有 就一直会显示血压数据
|
const isinitXy = ref(false);
|
const 床旁血压计 = ref({
|
date_time: "",
|
sbp: "178",
|
pulseRate: "11",
|
dbp: "111",
|
zuihouTime: new Date(),
|
});
|
const formInline = ref({
|
xiaoshi: 0,
|
fenzhong: 5,
|
alertText: "",
|
selectType: "",
|
selectOpen: false,
|
});
|
|
const 当前客户耗材集合 = ref({});
|
const deviceData = ref({
|
患者来源: null,
|
患者门诊住院号: '',
|
签到号: '',
|
透析单医嘱列表: [],
|
iot_传输时间: "2025-01-10 19:15:24",
|
iot_当前脱水量: 2.04,
|
iot_脱水目标量: 3.3,
|
iot_脱水速率: 0.82,
|
iot_跨膜压: 40,
|
iot_透析时间: 149,
|
iot_静脉压: 86,
|
上次透后称重: 72.5,
|
体重增加: 3.1,
|
体重增长率: 4.5,
|
分区编号: "109195231931115eZmM",
|
处方脱水量: 3.3,
|
实时脱水量: 1.65,
|
干体重: 69.5,
|
年龄: 59,
|
异常检验指标: [],
|
性别: "男",
|
患者头像:
|
"http://dhimg.leon056.com/hemodialysis/face/PAT9090070832211PyVq/face-IMG_20240413_112705.jpg-202404131127536157.jpg",
|
患者姓名: "",
|
患者编号: "PAT9090070832211PyVq",
|
患者透析号: "0207",
|
最后一条血压: 116,
|
此次脱水量: 6.1,
|
监测血压是否低于百分之30: false,
|
监测血压是否高于百分之30: false,
|
监测记录列表: [
|
{
|
伸缩压: "152",
|
脉搏: "66",
|
舒张压: "76",
|
},
|
{
|
伸缩压: "133",
|
脉搏: "67",
|
舒张压: "72",
|
},
|
{
|
伸缩压: "116",
|
脉搏: "79",
|
舒张压: "63",
|
},
|
],
|
第一条血压: 152,
|
脉搏列表: "66,67,79",
|
血压低值列表: "76,72,63",
|
血压高值列表: "152,133,116",
|
设备分区类型: 0,
|
设备号: "23",
|
设备名称: "页面初始化中，请耐心等待！",
|
设备序列号: "B97AP002",
|
设备状态列表: [],
|
设备编号: "DEVICE9195233509924hOHL",
|
超滤速度过快: null,
|
跨膜压列表: "2753,33,37",
|
跨膜压是否大于200: false,
|
透前称重: 75.6,
|
透前脉搏: 77,
|
透前血压_伸缩压: 136,
|
透前血压_舒张压: 57,
|
透析单编号: "9347151058555cAjJ",
|
透析器: "B-17AHF",
|
透析处方的时长: 4,
|
透析处方的时长_分钟: "00",
|
透析处方的时长_小时: "4",
|
透析开始时间: "2025-01-10 16:44:00",
|
透析方案: "HD",
|
透析状态: "1.0",
|
透析结束时间: "2025-01-10 20:44:00",
|
设备变化: "1736508117033DEV",
|
属性历史列表: [
|
{
|
属性列表: [
|
{
|
identifier: "D",
|
identifierText: "血液流速",
|
time2: 1736507724242,
|
time: 1736507724242,
|
finalText: "00240",
|
isShow: 1,
|
},
|
{
|
identifier: "F",
|
identifierText: "透析液温度",
|
time2: 1736507724242,
|
time: 1736507724242,
|
finalText: "036.4",
|
isShow: 1,
|
},
|
{
|
identifier: "G",
|
identifierText: "透析液电导度",
|
time2: 1736507724242,
|
time: 1736507724242,
|
finalText: "013.8",
|
isShow: 1,
|
},
|
],
|
查询时间: "2025-01-10 19:17:57",
|
},
|
{
|
属性列表: [
|
{
|
identifier: "D",
|
identifierText: "血液流速",
|
time2: 1736507538186,
|
time: 1736507538186,
|
finalText: "00240",
|
isShow: 1,
|
},
|
{
|
identifier: "F",
|
identifierText: "透析液温度",
|
time2: 1736507538186,
|
time: 1736507538186,
|
finalText: "036.5",
|
isShow: 1,
|
},
|
{
|
identifier: "G",
|
identifierText: "透析液电导度",
|
time2: 1736507538186,
|
time: 1736507538186,
|
finalText: "013.7",
|
isShow: 1,
|
},
|
],
|
查询时间: "2025-01-10 19:12:59",
|
},
|
{
|
属性列表: [
|
{
|
identifier: "D",
|
identifierText: "血液流速",
|
time2: 1736507290239,
|
time: 1736507290239,
|
finalText: "00240",
|
isShow: 1,
|
},
|
{
|
identifier: "F",
|
identifierText: "透析液温度",
|
time2: 1736507290239,
|
time: 1736507290239,
|
finalText: "036.5",
|
isShow: 1,
|
},
|
{
|
identifier: "G",
|
identifierText: "透析液电导度",
|
time2: 1736507290239,
|
time: 1736507290239,
|
finalText: "013.8",
|
isShow: 1,
|
},
|
],
|
查询时间: "2025-01-10 19:08:00",
|
},
|
],
|
});
|
// 告警提示
|
// 识别窗口
|
const video = ref<HTMLVideoElement | null>(null);
|
// 识别数据流
|
let stream: MediaStream | null = null;
|
const centerDialogVisible2 = ref(false);
|
const centerDialogVisible3 = ref(false);
|
const centerDialogVisible = ref(false);
|
const background = ref("");
|
const txztText = ref("");
|
const textcolor = ref("");
|
const wd = ref("");
|
const ls = ref("");
|
const ddd = ref("");
|
const pageHeight = ref(0);
|
const isShowXY = computed(() => {
|
if (床旁血压计.value.zuihouTime > shishiTime.value) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
|
const patientSourceAndCode = computed(() => {
|
let res = '';
|
if (deviceData.value.患者来源 === null) {
|
return ''
|
} else {
|
res = deviceData.value.患者来源 === 1 ? '住院号：' : '门诊号：';
|
res += deviceData.value.患者门诊住院号;
|
}
|
return res;
|
})
|
|
watch(
|
() => isShowXY.value,
|
() => {
|
if (床旁血压计.value.zuihouTime > shishiTime.value) {
|
} else {
|
setTimeout(() => {
|
console.log("初始化血压图表222222");
|
initTupiao();
|
}, 500);
|
}
|
}
|
);
|
const txzt: any = computed(() => {
|
return deviceData.value.透析状态;
|
});
|
// 是否是消毒类型和待机
|
const xiaoduzhuangti = computed(() => {
|
return false;
|
});
|
// 打开定时任务设置
|
const dingshiShow = () => {
|
formInline.value = {
|
xiaoshi: 0,
|
fenzhong: 5,
|
alertText: "",
|
selectType: "",
|
selectOpen: false,
|
};
|
centerDialogVisible2.value = true;
|
};
|
// 保存定时任务
|
const setDingshi = () => {
|
console.log("--------------------");
|
console.log(formInline.value);
|
console.log(deviceCode.value);
|
const minutes = formInline.value.xiaoshi * 60 + formInline.value.fenzhong;
|
let alertText = "";
|
if (formInline.value.selectOpen) {
|
alertText = formInline.value.selectType;
|
} else {
|
alertText = formInline.value.alertText;
|
}
|
if (alertText === "") {
|
ElMessage.warning("设置报警消息不能为空");
|
return true;
|
}
|
setTimeoutAlert({
|
deviceCode: deviceCode.value,
|
minutes: minutes,
|
alertText: alertText,
|
}).then((res) => {
|
console.log(res.data);
|
if (res.data === "OK") {
|
倒计时.value = minutes * 60;
|
centerDialogVisible2.value = false;
|
倒计时告警文本.value = alertText;
|
} else {
|
ElMessage.warning(res.message);
|
}
|
});
|
// centerDialogVisible2.value=false
|
};
|
|
// 状态颜色
|
const zhuangtaiColor = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
let colorStr = "#13CE66";
|
if (list && list.length > 0) {
|
// 默认显示第一状态颜色
|
// colorStr=list[0].状态颜色
|
// 消毒状态优先级高
|
const x = list.findIndex((e) => {
|
return e.状态类型 === "透析机消毒" || e.状态类型 === "在线";
|
});
|
if (x !== 0) {
|
colorStr = list[0].状态颜色;
|
}
|
}
|
return colorStr;
|
});
|
// 没有报警就返回空字符传
|
const noBaoji = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
let zhuantaiStr = "";
|
let jinggaoStr = "";
|
if (list && list.length > 0) {
|
list.forEach((el: any) => {
|
if (el.是否为警告标记 === 1) {
|
if (jinggaoStr !== "") {
|
jinggaoStr += "/" + el.状态名称;
|
} else {
|
jinggaoStr += el.状态名称;
|
}
|
} else {
|
zhuantaiStr += el.状态名称;
|
}
|
});
|
}
|
return jinggaoStr;
|
});
|
// 状态返回
|
const zhuangtaiStr = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
let zhuantaiStr = "";
|
if (list && list.length > 0) {
|
list.forEach((el: any) => {
|
if (
|
el.是否为警告标记 === 1 ||
|
el.状态类型 === "透析机消毒" ||
|
el.状态类型 === "在线"
|
) {
|
//去掉待机和消毒状态显示
|
} else {
|
if (zhuantaiStr !== "") {
|
zhuantaiStr += "/" + el.状态名称;
|
} else {
|
zhuantaiStr += el.状态名称;
|
}
|
}
|
});
|
}
|
|
return zhuantaiStr;
|
});
|
const isbaioji = computed(() => {
|
const list = deviceData.value.设备状态列表;
|
if (
|
(deviceData.value.监测血压是否低于百分之30 ||
|
deviceData.value.跨膜压是否大于200 ||
|
deviceData.value.监测血压是否高于百分之30) &&
|
deviceData.value.透析状态 === "2.0"
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
// 透前血压告警
|
const tqXygj = computed(() => {
|
if (
|
deviceData.value.透前血压_伸缩压 > 160 ||
|
deviceData.value.透前血压_伸缩压 < 90
|
) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
// 透前脉搏告警
|
const tqMbgj = computed(() => {
|
if (deviceData.value.透前脉搏 > 90) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
// 设置内联样式对象
|
const backgroundStyle = {
|
backgroundImage: `url(${TQS88})`,
|
backgroundSize: "cover", // 根据需要调整
|
backgroundPosition: "center", // 根据需要调整
|
};
|
|
watch(
|
() => txzt.value,
|
() => {
|
if (txzt.value === "0.0") {
|
txztText.value = "未签";
|
textcolor.value = "#FAFAFA";
|
background.value = "#606266";
|
} else if (txzt.value === "1.0") {
|
// 蓝色
|
textcolor.value = "#faecd8";
|
background.value = "#E6A23C";
|
txztText.value = "已签";
|
} else if (txzt.value === "2.0") {
|
// 绿色
|
// textcolor.value = '#D9F5E2';
|
// background.value='#67C23A'
|
textcolor.value = "#ECF5FF";
|
background.value = "#409EFF";
|
txztText.value = "透中";
|
} else if (txzt.value === "2.5") {
|
//
|
textcolor.value = "#fde2e2";
|
background.value = "#fab6b6";
|
txztText.value = "结束";
|
} else if (txzt.value === "3.0") {
|
// 已经结束
|
textcolor.value = "#FFECD0";
|
background.value = "#E6A23C";
|
txztText.value = "检查";
|
} else if (txzt.value === "4.0") {
|
// yij
|
textcolor.value = "#FFECD0";
|
background.value = "#E6A23C";
|
txztText.value = "归档";
|
}
|
},
|
{
|
immediate: true,
|
deep: true,
|
}
|
);
|
const formatSecondsToTime = (totalSeconds) => {
|
// 向下取整
|
let hours = Math.floor(totalSeconds / 3600);
|
let minutes = Math.floor((totalSeconds % 3600) / 60);
|
let seconds = totalSeconds % 60;
|
|
// 补零函数
|
const pad = (num) => String(num).padStart(2, "0");
|
|
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
|
};
|
|
const 倒计时 = ref(-100);
|
const 倒计时显示 = ref("00:00:00");
|
const 倒计时告警文本 = ref("");
|
// 定时器回调函数
|
const updateTime = () => {
|
倒计时.value--;
|
if (倒计时.value > 0) {
|
倒计时显示.value = formatSecondsToTime(倒计时.value);
|
} else if (倒计时.value > -5) {
|
倒计时显示.value = "";
|
// 只有没触发的时候才触发他
|
if (centerDialogVisible3.value === false) {
|
centerDialogVisible3.value = true;
|
关闭弹框警告();
|
// toggleAlarm();
|
}
|
} else {
|
倒计时显示.value = "";
|
}
|
};
|
let intervalId = null;
|
watch(()=>centerDialogVisible3.value,()=>{
|
if(centerDialogVisible3.value===false){
|
alarmSound.pause();
|
alarmSoundCXY.pause();
|
alarmSoundKCL.pause();
|
alarmSoundGY.pause();
|
alarmSoundTZDDD.pause();
|
alarmSoundTZxll.pause();
|
alarmSoundCG.pause();
|
}else{
|
if (倒计时告警文本.value === "测血压") {
|
alarmSoundCXY.play();
|
}
|
else if (倒计时告警文本.value === "冲管") {
|
alarmSoundCG.play();
|
}
|
else if (倒计时告警文本.value === "开超滤") {
|
alarmSoundKCL.play();
|
}
|
else if (倒计时告警文本.value === "给药") {
|
alarmSoundGY.play();
|
}
|
else if (倒计时告警文本.value === "调电导度") {
|
alarmSoundTZDDD.play();
|
}
|
else if (倒计时告警文本.value === "调血流量") {
|
alarmSoundTZxll.play();
|
}
|
else {
|
alarmSound.play();
|
}
|
}
|
})
|
onMounted(() => {
|
let devcieCode = Local.get("devcieCode");
|
if (devcieCode) {
|
deviceCode.value = devcieCode;
|
sourceInit();
|
} else {
|
centerDialogVisible.value = true;
|
}
|
intervalId = setInterval(updateTime, 1000);
|
const height = window.innerHeight;
|
pageHeight.value = height;
|
|
});
|
// 在组件卸载前清除定时器，防止内存泄漏
|
onBeforeUnmount(() => {
|
if (intervalId) {
|
clearInterval(intervalId);
|
}
|
});
|
|
const saveSet = () => {
|
if (deviceCode.value) {
|
centerDialogVisible.value = false;
|
Local.set("devcieCode", deviceCode.value);
|
sourceInit();
|
window.location.reload();
|
} else {
|
ElMessage.warning("请先输入设备编号");
|
}
|
};
|
|
/**
|
* 刷新页面
|
*/
|
const shuaxin = () => {
|
window.location.reload();
|
};
|
const onFileChange = async (event: Event) => {
|
const inputElement = event.target as HTMLInputElement;
|
if (!inputElement.files || inputElement.files.length === 0) return;
|
|
const file = inputElement.files[0];
|
const reader = new FileReader();
|
|
reader.onload = async (e) => {
|
if (e.target && typeof e.target.result === "string") {
|
try {
|
const codeReader = new BrowserMultiFormatReader();
|
const result = await codeReader.decodeFromImage(
|
undefined,
|
e.target.result,
|
{ tryHarder: true }
|
);
|
// const result = await codeReader.decodeFromImage(undefined, e.target.result);
|
deviceCode.value = result.text;
|
ElMessage.success("识别成功");
|
} catch (err) {
|
console.error("Error details:", err);
|
if (err instanceof NotFoundException) {
|
ElMessage.error("未找到二维码");
|
} else if (err instanceof ChecksumException) {
|
ElMessage.error("校验错误");
|
} else if (err instanceof FormatException) {
|
ElMessage.error("格式错误");
|
} else {
|
ElMessage.error("识别错误请重新识别");
|
console.error(err);
|
}
|
}
|
}
|
};
|
|
reader.readAsDataURL(file);
|
};
|
const shaoma = () => {};
|
watch(
|
() => deviceData.value.设备变化,
|
() => {
|
console.log(deviceData.value.设备名称, "子组件变量");
|
setTimeout(() => {
|
if (!xiaoduzhuangti.value) {
|
console.log("初始化血压图表111111");
|
initTupiao();
|
}
|
}, 500);
|
}
|
);
|
const 数据初始化 = ref(false);
|
//创建链接对象
|
const creatSource = () => {
|
// http://testbs.ihemodialysis.com/sse/sseEvent
|
// const test='http://testbs.ihemodialysis.com/sse/sseEvent/'
|
数据初始化.value = true;
|
const test = import.meta.env.VITE_SSE_BASE_URL;
|
const stateArr = [
|
{ key: 0, value: "正在链接中" },
|
{ key: 1, value: "已经链接并且可以通讯" },
|
{ key: 2, value: "连接已关闭或者没有链接成功" },
|
];
|
try {
|
source.value = new EventSourcePolyfill(`${test}${deviceCode.value}`, {
|
heartbeatTimeout: 60000,
|
});
|
source.value.onopen = (e) => {
|
console.log("链接成功");
|
ElMessage.success("链接服务成功");
|
readyState.value = stateArr[source.value?.readyState ?? 0];
|
console.log(e);
|
};
|
source.value.onerror = (e) => {
|
console.log(e, "异常情况-----");
|
ElMessage.warning("链接服务失败，请耐心等待重连。。");
|
readyState.value = stateArr[source.value?.readyState ?? 0];
|
};
|
source.value.onmessage = (e) => {
|
console.log("收到消息", e.data);
|
shishiTime.value = new Date();
|
if (e.data) {
|
const msg = e.data;
|
let dif = msg.indexOf("event:message");
|
let beng = msg.indexOf("{");
|
let end = msg.length - 1;
|
if (beng !== -1 && end !== -1 && dif !== -1) {
|
const datax = msg.slice(beng, end + 1);
|
const dataBody = JSON.parse(datax);
|
console.log(dataBody);
|
console.log(dataBody);
|
if (dataBody.倒计时?.提醒文本) {
|
倒计时.value = dataBody.倒计时?.设定提醒倒计时;
|
console.log("设置了倒计时值", 倒计时.value);
|
if (
|
倒计时.value <= 0 &&
|
倒计时.value >= -60 &&
|
centerDialogVisible3.value === false
|
) {
|
centerDialogVisible3.value = true;
|
倒计时告警文本.value = dataBody.倒计时?.提醒文本;
|
关闭弹框警告();
|
// toggleAlarm();
|
} else if (倒计时.value <= -60) {
|
centerDialogVisible3.value = false;
|
}
|
}
|
if (dataBody.推送类型 === "床旁血压计") {
|
isinitXy.value = true;
|
let date = new Date();
|
date.setMinutes(date.getMinutes() + 5);
|
床旁血压计.value = {
|
date_time: dataBody?.床旁血压结果?.measureTime,
|
sbp: dataBody?.床旁血压结果?.sbp,
|
pulseRate: dataBody?.床旁血压结果?.pulseRate,
|
dbp: dataBody?.床旁血压结果?.dbp,
|
zuihouTime: date,
|
};
|
setTimeout(() => {
|
console.log("初始化血压图表444444");
|
initTupiao();
|
}, 500);
|
} else if (dataBody.推送类型 === "中央监控大屏信息") {
|
数据初始化.value = false;
|
// loading.close()
|
console.log(Date.now() + "DEV");
|
if (dataBody?.透析状态) {
|
deviceData.value = dataBody?.透析状态;
|
if ('透析单医嘱列表' in dataBody.透析状态 && dataBody.透析状态?.透析单医嘱列表) {
|
deviceData.value.透析单医嘱列表 = dataBody.透析状态.透析单医嘱列表;
|
} else {
|
deviceData.value.透析单医嘱列表 = []
|
}
|
if ('患者来源' in dataBody.透析状态) {
|
deviceData.value.患者来源 = dataBody.透析状态.患者来源;
|
} else {
|
deviceData.value.患者来源 = null
|
}
|
if ('患者门诊住院号' in dataBody.透析状态) {
|
deviceData.value.患者门诊住院号 = dataBody.透析状态.患者门诊住院号;
|
} else {
|
deviceData.value.患者门诊住院号 = ''
|
}
|
} else {
|
deviceData.value.设备名称 = dataBody.IOT信息.床号;
|
deviceData.value.患者姓名 = "";
|
if (dataBody?.使用耗材字典) {
|
当前客户耗材集合.value = dataBody?.使用耗材字典;
|
}
|
}
|
|
deviceData.value.设备变化 = Date.now() + "DEV";
|
|
deviceData.value.属性历史列表 = dataBody?.IOT信息?.属性历史列表;
|
console.log(deviceData.value.设备变化);
|
deviceData.value.设备状态列表 = dataBody.IOT信息.状态列表;
|
}
|
}
|
}
|
};
|
} catch (error) {
|
console.log(error);
|
}
|
};
|
const showxuye = () => {
|
let date = new Date();
|
date.setMinutes(date.getMinutes() + 0.1);
|
床旁血压计.value = {
|
date_time: "2023-32-3232",
|
sbp: "117",
|
pulseRate: "77",
|
dbp: "99",
|
zuihouTime: date,
|
};
|
isinitXy.value = true;
|
setTimeout(() => {
|
console.log("初始化血压图表333333");
|
|
initTupiao();
|
}, 500);
|
};
|
const 关闭弹框警告 = () => {
|
setTimeout(function () {
|
console.log("30秒已过，关闭报警设置弹框。");
|
centerDialogVisible3.value = false;
|
倒计时.value = -100;
|
}, 30000); // 30000 毫秒 = 30 秒
|
};
|
//初始化
|
const sourceInit = () => {
|
console.log("初始化see");
|
if (!source.value || source.value.readyState === 2) {
|
creatSource();
|
}
|
};
|
// 关闭 WebSocket
|
const closeSource = () => {
|
console.log("断开");
|
source.value?.close();
|
};
|
// 取消订阅
|
onBeforeMount(() => {
|
closeSource();
|
});
|
|
|
const renderEcharts = (options: any) => {
|
const boxes = document.querySelectorAll(`.echartsDiv-${deviceData.value.设备编号}`);
|
boxes.forEach(box => {
|
if ((box as HTMLElement).dataset.initialized === 'true') return;
|
const chart = echarts.init(box as HTMLElement);
|
chart.setOption(options);
|
(box as HTMLElement).dataset.initialized = 'true';
|
});
|
}
|
|
|
|
const initTupiao = () => {
|
if (deviceData.value.患者姓名 !== "") {
|
const seriesData = [
|
{
|
name: "11",
|
type: "line",
|
symbol: "triangle",
|
symbolSize: 10,
|
symbolRotate: 180,
|
data: [],
|
lineStyle: {
|
width: 5, // 设置线条宽度为5
|
color: "red",
|
},
|
itemStyle: {
|
borderWidth: 5,
|
borderColor: "red",
|
color: "red",
|
},
|
markPoint: {
|
data: [],
|
},
|
markLine: {
|
symbol: "none",
|
lineStyle: { color: "#409EFF", width: 3 },
|
data: [
|
{ name: "y90", yAxis: 90, label: { show: false }, symbol: "none" },
|
],
|
},
|
},
|
|
{
|
name: "",
|
type: "line",
|
symbol: "triangle",
|
symbolSize: 10,
|
data: [],
|
lineStyle: {
|
color: "#409EFF",
|
width: 5, // 设置线条宽度为5
|
},
|
itemStyle: {
|
borderWidth: 5,
|
borderColor: "#409EFF",
|
color: "#409EFF",
|
},
|
markPoint: {
|
data: [],
|
},
|
markLine: {
|
symbol: "none",
|
lineStyle: { color: "#F56C6C", width: 3 },
|
data: [
|
{
|
name: "y140",
|
yAxis: 140,
|
label: { show: false },
|
symbol: "none",
|
},
|
],
|
},
|
},
|
{
|
name: "",
|
type: "line",
|
symbolSize: 10,
|
data: [],
|
lineStyle: {
|
color: "#D940FF",
|
width: 5, // 设置线条宽度为5
|
},
|
itemStyle: {
|
borderWidth: 5,
|
borderColor: "#D940FF",
|
color: "#D940FF",
|
},
|
markPoint: {
|
data: [],
|
},
|
},
|
];
|
const xAxisData = [];
|
if (Number(deviceData.value.透析状态) >= 2) {
|
// alert(111)
|
deviceData.value.监测记录列表.forEach((e, index) => {
|
seriesData[0].data.push(e.伸缩压);
|
seriesData[1].data.push(e.舒张压);
|
seriesData[2].data.push(e.脉搏);
|
xAxisData.push(index);
|
if (index == 0) {
|
let y = Number(e.伸缩压) + 20;
|
let y2 = Number(e.舒张压) + 20;
|
seriesData[0].markPoint.data.push({
|
name: "上机血压",
|
value: e.伸缩压,
|
xAxis: 0,
|
yAxis: e.伸缩压,
|
symbolSize: 0,
|
symbolOffset: [0, 20],
|
label: { fontSize: 20, color: "red" },
|
});
|
seriesData[1].markPoint.data.push({
|
name: "上机血压",
|
value: e.舒张压,
|
xAxis: 0,
|
yAxis: e.舒张压,
|
symbolSize: 0,
|
symbolOffset: [15, 15],
|
label: { fontSize: 20, color: "#409EFF" },
|
});
|
seriesData[2].markPoint.data.push({
|
name: "上机血压",
|
value: e.脉搏,
|
xAxis: 0,
|
yAxis: e.脉搏,
|
symbolSize: 0,
|
symbolOffset: [10, -10],
|
label: { fontSize: 20, color: "#D940FF" },
|
});
|
} else if (
|
deviceData.value.监测记录列表.length > 1 &&
|
index === deviceData.value.监测记录列表.length - 1
|
) {
|
let y = Number(e.伸缩压) + 20;
|
let y2 = Number(e.舒张压) + 20;
|
seriesData[0].markPoint.data.push({
|
name: "上机血压",
|
value: e.伸缩压,
|
xAxis: index,
|
yAxis: e.伸缩压,
|
symbolSize: 0,
|
symbolOffset: [-15, -15],
|
label: { fontSize: 20, color: "red" },
|
});
|
seriesData[1].markPoint.data.push({
|
name: "上机血压",
|
value: e.舒张压,
|
xAxis: index,
|
yAxis: e.舒张压,
|
symbolSize: 0,
|
symbolOffset: [-15, 15],
|
label: { fontSize: 20, color: "#409EFF" },
|
});
|
seriesData[2].markPoint.data.push({
|
name: "上机压",
|
value: e.脉搏,
|
xAxis: index,
|
yAxis: e.脉搏,
|
symbolSize: 0,
|
symbolOffset: [0, -10],
|
label: { fontSize: 20, color: "#D940FF" },
|
});
|
}
|
});
|
if (deviceData.value.监测记录列表.length === 1) {
|
xAxisData.push(1);
|
}
|
try {
|
// console.log('proxy.$refs["echartsDiv" + deviceData.value.设备编号]: ', proxy.$refs["echartsDiv" + deviceData.value.设备编号])
|
// if (!bloodPressureEchart) {
|
// bloodPressureEchart = echarts.init(
|
// proxy.$refs["echartsDiv" + deviceData.value.设备编号]
|
// );
|
// }
|
// console.log('bloodPressureEchart: ', bloodPressureEchart)
|
|
const option = {
|
// backgroundColor: 床旁血压计.value.zuihouTime>shishiTime.value?'#ffffff':textcolor.value,
|
backgroundColor: "#ffffff",
|
tooltip: {
|
trigger: "axis",
|
},
|
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,
|
};
|
// 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("图标渲染异常异常：", e);
|
}
|
} else {
|
try {
|
// if (!bloodPressureEchart) {
|
// // @ts-ignore
|
// bloodPressureEchart = 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: [],
|
};
|
// console.log('deviceData.透析状态2: ', Number(deviceData.value.透析状态));
|
// // bloodPressureEchart.setOption(option);
|
// nextTick(() => {
|
// // bloodPressureEchart.setOption(option);
|
// bloodPressureEchart.setOption(option);
|
// });
|
renderEcharts(option);
|
} catch (e) {
|
console.log(
|
"异常",
|
proxy.$refs["echartsDiv" + deviceData.value.设备编号],
|
e
|
);
|
}
|
}
|
} else if (deviceData.value.患者姓名 === "") {
|
console.log("2222");
|
const tbdata1 = [];
|
const tbdata2 = [];
|
const tbdata3 = [];
|
if (deviceData.value.属性历史列表) {
|
deviceData.value.属性历史列表.forEach((e, index) => {
|
// 温度
|
const wdMode = e.属性列表.find((l) => {
|
return l.identifierText === "透析液温度";
|
});
|
if (wdMode) {
|
tbdata1.push(Number(wdMode?.finalText));
|
wd.value = Number(wdMode?.finalText);
|
}
|
|
// 血液流速
|
const xymode = e.属性列表.find((l) => {
|
return l.identifierText === "血液流速";
|
});
|
if (xymode) {
|
tbdata2.push(Number(xymode?.finalText));
|
ls.value = Number(xymode?.finalText);
|
}
|
|
// 电导度
|
const dddMode = e.属性列表.find((l) => {
|
return l.identifierText === "透析液电导度";
|
});
|
if (dddMode) {
|
tbdata3.push(Number(dddMode?.finalText));
|
ddd.value = Number(dddMode?.finalText);
|
}
|
});
|
}
|
try {
|
console.log("渲染设备");
|
const myChart1 = echarts.init(
|
proxy.$refs["echartsDivwd" + deviceData.value.设备编号]
|
);
|
const myChart2 = echarts.init(
|
proxy.$refs["echartsDivls" + deviceData.value.设备编号]
|
);
|
const myChart3 = echarts.init(
|
proxy.$refs["echartsDivddd" + deviceData.value.设备编号]
|
);
|
const option1 = {
|
// backgroundColor: textcolor.value,
|
tooltip: {
|
trigger: "axis",
|
},
|
toolbox: {
|
show: false,
|
},
|
grid: {
|
left: 8,
|
top: 100,
|
bottom: 0,
|
},
|
xAxis: {
|
show: true, // 隐藏X轴
|
type: "category",
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: [1, 2, 3],
|
axisTick: {
|
show: false, // 显示 X 轴刻度
|
},
|
},
|
yAxis: {
|
type: "value",
|
splitLine: {
|
show: false,
|
},
|
},
|
series: [
|
{
|
data: tbdata1,
|
type: "line",
|
lineStyle: {
|
width: 10, // 设置线条宽度为5
|
color: "red",
|
},
|
},
|
],
|
};
|
const option2 = {
|
// backgroundColor: textcolor.value,
|
tooltip: {
|
trigger: "axis",
|
},
|
toolbox: {
|
show: false,
|
},
|
grid: {
|
left: 8,
|
top: 100,
|
bottom: 0,
|
},
|
xAxis: {
|
show: false, // 隐藏X轴
|
type: "category",
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: [1, 2, 3],
|
axisTick: {
|
show: false, // 显示 X 轴刻度
|
},
|
},
|
yAxis: {
|
type: "value",
|
min: -10,
|
splitLine: {
|
show: false,
|
},
|
},
|
series: [
|
{
|
data: tbdata2,
|
type: "line",
|
lineStyle: {
|
width: 10, // 设置线条宽度为5
|
color: "#409EFF",
|
},
|
},
|
],
|
};
|
const option3 = {
|
// backgroundColor: textcolor.value,
|
tooltip: {
|
trigger: "axis",
|
},
|
toolbox: {
|
show: false,
|
},
|
grid: {
|
left: 8,
|
top: 100,
|
bottom: 0,
|
},
|
xAxis: {
|
show: false, // 隐藏X轴
|
type: "category",
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: [1, 2, 3],
|
axisTick: {
|
show: false, // 显示 X 轴刻度
|
},
|
},
|
yAxis: {
|
type: "value",
|
min: -10,
|
splitLine: {
|
show: false,
|
},
|
},
|
series: [
|
{
|
data: tbdata3,
|
type: "line",
|
lineStyle: {
|
width: 10, // 设置线条宽度为5
|
color: "#E6A23C",
|
},
|
},
|
],
|
};
|
myChart1.setOption(option1);
|
myChart2.setOption(option2);
|
myChart3.setOption(option3);
|
} catch (e) {
|
console.log("图标渲染异常异常");
|
}
|
|
console.log(deviceData.value);
|
}
|
};
|
|
|
const getItemName = (name: string) => {
|
if (name) {
|
if (name === "血红蛋白测定") {
|
return "Hgb ";
|
} else if (name === "铁蛋白") {
|
return "Fer ";
|
} else if (name === "白蛋白") {
|
return "Alb ";
|
}
|
// else if (name === "血清铁蛋白") {
|
// return "SF ";
|
// }
|
else if (name === "钙") {
|
return "Ca ";
|
} else if (name === "钾") {
|
return "K ";
|
} else if (name === "无机磷") {
|
return "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;
|
user-select: none;
|
.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;
|
}
|
|
.cont_parent {
|
height: 100%;
|
display: grid;
|
grid-template-rows: repeat(3, 1fr); /* 将容器划分为3行，每行占1份 */
|
gap: 5px; /* 子元素之间的间隙（可选） */
|
}
|
|
.cont_child {
|
border: 1px solid #ccc;
|
padding: 10px;
|
overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
|
box-sizing: border-box; /* 确保 padding 和 border 不增加实际高度 */
|
}
|
.scrollable-text {
|
white-space: nowrap;
|
overflow-x: auto;
|
width: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
// border: 1px solid #e4e4e4;
|
// font-size: 16px;
|
}
|
.custom-dialog {
|
border-radius: 10px;
|
}
|
|
.my-header {
|
background-color: #ff6b6b; /* 标题背景颜色 */
|
color: white; /* 标题文字颜色 */
|
font-size: 18px; /* 标题字体大小 */
|
padding-top: 1px; /* 内边距 */
|
padding-bottom: 1px; /* 内边距 */
|
text-align: center; /* 文字居中 */
|
border-top-left-radius: 10px; /* 左上角圆角 */
|
border-top-right-radius: 10px; /* 右上角圆角 */
|
}
|
.el-dialog {
|
padding: 0;
|
padding-bottom: 10px;
|
}
|
</style>
|
