<template>
|
<div
|
class="divice"
|
:class="{ blink: isbaioji }"
|
:style="{ borderColor: background }"
|
>
|
<div
|
v-if="deviceData.患者姓名 !== '' && !xiaoduzhuangti"
|
style="height: 100%"
|
>
|
<el-row
|
v-if="deviceData.患者姓名 !== ''"
|
:style="{ backgroundColor: background }"
|
:class="{ blink2: isbaioji }"
|
style="
|
font-weight: 900;
|
color: #ffffff;
|
width: 100%;
|
height: 20%;
|
line-height: 100%;
|
padding: 5px;
|
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
|
v-if="
|
deviceData.iot_跨膜压 >= 200 && Number(deviceData.透析状态) === 2
|
"
|
class="grid-container"
|
style="margin-left: 5%; height: 100%;color: #303133"
|
>
|
TMP↑
|
</span>
|
<span
|
v-if="
|
deviceData.iot_跨膜压 < 0 && Number(deviceData.透析状态) === 2
|
"
|
style="color: #303133"
|
>
|
TMP↓
|
</span>
|
<span
|
v-if="
|
deviceData.监测血压是否低于百分之30 &&
|
Number(deviceData.透析状态) === 2
|
"
|
style="color: #303133"
|
>
|
BP↓
|
</span>
|
<span
|
v-if="
|
deviceData.监测血压是否高于百分之30 &&
|
Number(deviceData.透析状态) === 2
|
"
|
style="color: #303133"
|
>
|
BP↑
|
</span>
|
</div>
|
</el-row>
|
<template v-if="床旁血压计.zuihouTime>shishiTime">
|
<el-row style="height: 80%; background-color: #ffffff">
|
<el-col :span="8" style="font-weight: bold; color: black; ">
|
<div style="height: 30%; text-align: right;" class="grid-container">
|
<p><b style="font-size: 150%;color: red;">↑</b><b style="font-size:400%">178</b></p>
|
</div>
|
<div style="height: 30%; text-align: right; " class="grid-container">
|
<p><b style="font-size: 150%;color: red;">↓</b><b style="font-size:400%">88</b></p>
|
</div>
|
<div style="height: 33%; text-align: right;" class="grid-container">
|
<div>
|
<!-- <el-image style="width: 50px; height: 50px;" :src="maibo"></el-image> 2 -->
|
<p><b style="font-size: 150%;color: red;" >♥</b><b style="font-size:400%">78</b></p>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="4"></el-col>
|
<el-col :span="12">
|
<!-- 展示血压记录图 -->
|
<div
|
v-if="Number(deviceData.透析状态) > 1"
|
:ref="'echartsDiv' + deviceData.设备编号"
|
style="height: 80%;width: 100%;"
|
>
|
</div>
|
<div style="height: 20%;text-align: center;" class="grid-container">
|
{{床旁血压计.date_time}}
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
<template v-else>
|
<el-row
|
v-if="deviceData.患者姓名 !== ''"
|
:style="{ backgroundColor: textcolor }"
|
style="padding-right: 2px; height: 60%"
|
>
|
<el-col :span="12" style="height: 100%">
|
<div style="height: 100%">
|
<el-row style="padding: 5% 0px 0px 20px; height: 100%">
|
<el-col :span="10" style="height: 100%">
|
<div
|
:style="{ backgroundImage: `url(${deviceData.患者头像})` }"
|
style="
|
background-size: 100% 100%;
|
border-radius: 5px;
|
margin-bottom: 1%;
|
height: 100%;
|
width: 100%;
|
"
|
></div>
|
</el-col>
|
<el-col
|
:span="14"
|
style="
|
padding-left: 5px;
|
height: 100%;
|
font-weight: 700;
|
font-size: 300%;
|
"
|
>
|
<el-row style="height: 20%">
|
<el-col
|
class="grid-container"
|
style="height: 100%"
|
:span="12"
|
:style="{
|
color: deviceData.透析方案 === 'HDF' ? '#E6A23C' : '',
|
}"
|
>
|
{{ deviceData.透析方案 }}
|
</el-col>
|
<el-col
|
:span="12"
|
class="grid-container"
|
style="
|
text-align: right;
|
font-weight: 800;
|
color: #70a3dd;
|
white-space: nowrap;
|
height: 100%;
|
"
|
>
|
{{ txztText }}
|
</el-col>
|
</el-row>
|
<div style="height: 20%">
|
<template v-if="Number(deviceData.透析状态) >= 2">
|
<div class="grid-container" style="height: 100%">
|
<div>
|
<span
|
v-if="deviceData.iot_静脉压"
|
style="color: #409eff"
|
>{{ deviceData.iot_静脉压 }}/</span
|
><span
|
v-if="deviceData.iot_跨膜压"
|
:style="{
|
color: deviceData.iot_跨膜压 > 200 ? 'red' : '',
|
}"
|
>{{ deviceData.iot_跨膜压 }}</span
|
>
|
</div>
|
</div>
|
</template>
|
</div>
|
<div style="height: 20%">
|
<span v-if="Number(deviceData.透析状态) >= 2">
|
<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
|
>
|
</span>
|
<span v-if="Number(deviceData.透析状态) == 1">
|
<span style="color: #303133">{{
|
Number(deviceData.iot_当前脱水量).toFixed(1)
|
}}</span
|
>/<span>{{
|
Number(deviceData.处方脱水量).toFixed(1)
|
}}</span>
|
</span>
|
</div>
|
<div style="height: 10%">
|
<el-progress
|
:text-inside="true"
|
:stroke-width="26"
|
:show-text="false"
|
:percentage=" Number(deviceData.iot_当前脱水量)/Number(deviceData.处方脱水量)*100"
|
/>
|
</div>
|
<div style="height: 20%">
|
<span v-if="Number(deviceData.透析状态) >= 1">
|
<span style="color: #303133">{{
|
jgTime4(deviceData.iot_透析时间)
|
}}</span
|
>/<span
|
>{{ deviceData.透析处方的时长_小时 }}:{{
|
deviceData.透析处方的时长_分钟
|
}}</span
|
>
|
</span>
|
</div>
|
<div style="height: 10%">
|
<el-progress
|
:text-inside="true"
|
:stroke-width="26"
|
:show-text="false"
|
:percentage="(Number(deviceData.iot_透析时间)/(Number(deviceData.透析处方的时长)*60))*100"
|
status="success"
|
/>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
|
<el-col :span="12">
|
<!-- 展示血压记录图 -->
|
<div
|
v-if="Number(deviceData.透析状态) > 1"
|
:ref="'echartsDiv' + deviceData.设备编号"
|
style="height: 97%"
|
>
|
</div>
|
<div
|
v-if="Number(deviceData.透析状态) === 1"
|
style="text-align: right; height: 100%"
|
>
|
<div
|
style="
|
height: 25%;
|
font-weight: 600;
|
color: #909399;
|
"
|
>
|
<div class="grid-container" style="height: 100%;">
|
<div
|
style="
|
font-weight: 800;
|
"
|
>
|
透前称重
|
<b style="font-size: 200%;color: #303133;">{{ Number(deviceData.透前称重).toFixed(1) }}</b>
|
</div
|
>
|
</div>
|
</div>
|
<div
|
class="container"
|
style="
|
height: 25%;
|
font-weight: 600;
|
color: #909399;
|
"
|
>
|
<div class="grid-container" style="height: 100%;">
|
<div
|
style="
|
font-weight: 800;
|
color: #909399;
|
"
|
>
|
干体重
|
<b style="font-size: 200%;color: #303133;">{{ Number(deviceData.干体重).toFixed(1) }}</b>
|
上次透后称重
|
<b style="font-size: 200%;color: #303133;">{{ Number(deviceData.上次透后称重).toFixed(1) }}</b>
|
</div
|
>
|
</div>
|
</div>
|
<div
|
:style="{ color: deviceData.体重增长率 >= 5 ? 'red' : '#303133' }"
|
style="height: 25%; font-weight: 600;color: #909399;"
|
>
|
<div class="grid-container" style="height: 100%;">
|
<div>
|
体重增长
|
<b style="font-size: 200%; color: #303133;"
|
v-if="Number(deviceData.透前称重 - deviceData.干体重) > 0"
|
>+{{
|
Number(deviceData.透前称重 - deviceData.干体重).toFixed(1)
|
}}</b
|
>
|
增长率<b style="font-size: 200%;color: #303133;">({{ deviceData.体重增长率 }}%)</b>
|
</div>
|
</div>
|
</div>
|
<div
|
class="container"
|
style="
|
font-weight: 600;
|
height: 25%;
|
color: #909399;
|
margin-left: -20px;
|
"
|
>
|
<div class="grid-container" style="height: 100%;">
|
<div>
|
透前血压
|
<span
|
v-if="deviceData.透前血压_伸缩压"
|
:style="{ color: tqXygj ? 'red' : '#303133' }"
|
style="font-weight: 800; font-size: 200%; white-space: nowrap"
|
>{{ deviceData.透前血压_伸缩压 }}/</span
|
>
|
<span
|
:style="{ color: tqXygj ? 'red' : '#303133' }"
|
style="font-weight: 800; font-size: 200%; white-space: nowrap"
|
>{{ deviceData.透前血压_舒张压 }}</span
|
>
|
脉搏
|
<span
|
v-if="deviceData.透前脉搏"
|
:style="{ color: tqMbgj ? 'red' : '#303133' }"
|
style="font-weight: 800; font-size: 200%; white-space: nowrap"
|
>{{ deviceData.透前脉搏 }}</span
|
>
|
</div>
|
</div>
|
|
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="height: 20%;background-color: #ffffff; ">
|
|
|
<div v-if="isinitXy" style="font-size: 250%; color: cornflowerblue;height: 80%; width: 100%;" class="grid-container">
|
|
<div style="text-align: center;width: 100%;" class="flash-text">
|
最近一次， 高压：{{床旁血压计.sbp}}，低压： {{床旁血压计.dbp}}， 心率： {{床旁血压计.pulseRate}}
|
</div>
|
|
</div>
|
<div v-if="isinitXy" style="color: cornflowerblue;height: 20%; width: 100%;" class="grid-container">
|
<div style="text-align: center;width: 100%; color: #909399;">
|
<!-- {{isShowXY}} -->
|
<!-- {{床旁血压计.zuihouTime}} / {{shishiTime}}
|
{{}} -->
|
{{床旁血压计.date_time}}
|
</div>
|
|
</div>
|
<div v-else style="font-size: 200%;height: 100%;text-align: center;padding: 5px; font-weight: 1000;" class="grid-container">
|
透析器：{{deviceData.透析器}}
|
</div>
|
<!-- <div style="font-size: 300%; color: red;height: 100%;" class="grid-container">
|
|
患者掉压验证请注意!
|
|
</div> -->
|
<!-- <el-alert style="font-size: 300%" title="处方已经确认。医嘱已执行" type="success" show-icon />
|
<el-alert title="患者治疗过程中掉压验证，请注意！" type="warning" show-icon /> -->
|
|
</el-row>
|
</template>
|
</div>
|
<div
|
v-else
|
style="height: 100%; border: #409eff 1px solid"
|
:class="{ blink2: noBaoji !== '' }"
|
>
|
<el-row
|
style="
|
font-weight: 900;
|
font-size: 300%;
|
color: #3b3737;
|
width: 100%;
|
height: 20%;
|
border: #3b3737 1px solid;
|
"
|
>
|
<el-row
|
v-if="noBaoji === ''"
|
:style="{ backgroundColor: zhuangtaiColor }"
|
style="
|
color: #ffffff;
|
width: 100%;
|
height: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
"
|
>
|
<div class="grid-container" style="height: 100%" @click="initTupiao">
|
{{ deviceData.设备名称 }} {{ zhuangtaiStr }}
|
</div>
|
</el-row>
|
|
<el-row v-else style="width: 100%">
|
<el-col
|
:span="24"
|
style="
|
color: #ffffff;
|
width: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
"
|
>
|
{{ deviceData.设备名称 }} {{ noBaoji }}
|
</el-col>
|
</el-row>
|
</el-row>
|
<el-row
|
style="padding-right: 2px; height: 80%; background-color: #ffffff"
|
>
|
<el-col :span="15" style="height: 100%">
|
<div style="height: 100%">
|
<el-row style="padding: 0px 0px 0px 0px; height: 100%">
|
<el-col
|
:span="10"
|
:style="{ backgroundImage: `url(${TQS88})` }"
|
style="
|
background-size: 100% 100%;
|
border-radius: 5px;
|
margin-top: 2%;
|
margin-bottom: 1%;
|
"
|
>
|
|
</el-col>
|
<el-col
|
v-if="noBaoji === ''"
|
:span="14"
|
style="
|
padding-left: 5px;
|
height: 100%;
|
font-weight: 500;
|
font-size: 100%;
|
font-size: 200%
|
"
|
>
|
<div
|
class="grid-container"
|
style="height: 33%; line-height: 100%; color: red"
|
>
|
<div class="centered-text">温度：{{ wd }}</div>
|
</div>
|
|
<div class="grid-container" style="height: 33%; color: #409eff">
|
<div class="centered-text">流速：{{ ls }}</div>
|
</div>
|
<div class="grid-container" style="height: 33%; color: #e6a23c">
|
<div class="centered-text">Cond:{{ ddd }}</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :span="9" v-if="noBaoji == ''">
|
<!-- 历史状态画图 -->
|
<div
|
:ref="'echartsDivwd' + deviceData.设备编号"
|
style="height: 33%"
|
></div>
|
<div
|
:ref="'echartsDivls' + deviceData.设备编号"
|
style="height: 33%"
|
></div>
|
<div
|
:ref="'echartsDivddd' + deviceData.设备编号"
|
style="height: 33%"
|
></div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 设置按钮 -->
|
<button id="settingsButton" class="fixed-bottom-right" @click="centerDialogVisible=true">⚙️</button>
|
<!-- <button id="settingsButton" class="fixed-bottom-right" @click="showxuye">⚙️</button> -->
|
<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 maibo from '../img/maibo2.png'
|
import xueya from '../img/xueya.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';
|
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:'',
|
pulseRate:'',
|
dbp:'',
|
zuihouTime:new Date()
|
})
|
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",
|
设备名称: "初始化。。。",
|
设备序列号: "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 stateArr = [
|
{ key: 0, value: "正在链接中" },
|
{ key: 1, value: "已经链接并且可以通讯" },
|
{ key: 2, value: "连接已关闭或者没有链接成功" },
|
];
|
try {
|
source.value= new EventSourcePolyfill(`https://backend.ihemodialysis.com/sse/sseEvent/${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.患者姓名=''
|
}
|
|
deviceData.value.设备变化=Date.now() + 'DEV'
|
console.log(1)
|
console.log(2)
|
deviceData.value.属性历史列表=dataBody?.IOT信息?.属性历史列表
|
console.log(3)
|
|
console.log(4)
|
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: 10, // 设置线条宽度为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: 10, // 设置线条宽度为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: 10, // 设置线条宽度为5
|
},
|
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: [25, -15],
|
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: textcolor.value,
|
tooltip: {
|
trigger: "axis",
|
},
|
toolbox: {
|
show: false,
|
},
|
grid: {
|
left: 8,
|
top: 0,
|
bottom: 0,
|
},
|
xAxis: {
|
type: "category",
|
// 标记做右往左排列
|
boundaryGap: false,
|
data: xAxisData,
|
axisTick: {
|
show: true, // 显示 X 轴刻度
|
},
|
},
|
yAxis: {
|
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);
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.divice {
|
font-size: 100%;
|
border-radius: 4px;
|
border: solid 1px;
|
width: 100%;
|
height: 100%;
|
border: 1px solid coral;
|
}
|
/* 定义闪烁动画 */
|
@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;
|
/* 其他样式 */
|
}
|
/* 固定定位设置按钮 */
|
.fixed-bottom-right {
|
position: fixed;
|
bottom: 20px; /* 距离底部的距离 */
|
right: 20px; /* 距离右侧的距离 */
|
z-index: 1000; /* 确保按钮位于页面内容之上 */
|
padding: 5px 10px;
|
background-color: #fbfdff;
|
color: white;
|
border: none;
|
border-radius: 5px;
|
cursor: pointer;
|
font-size: 16px;
|
}
|
|
/* 鼠标悬停时改变颜色 */
|
.fixed-bottom-right:hover {
|
background-color: #0056b3;
|
}
|
// /* 定义闪现动画的关键帧 */
|
// @keyframes flash {
|
// 0%, 100% {
|
// opacity: 1; /* 开始和结束时完全可见 */
|
// }
|
// 50% {
|
// opacity: 0; /* 中间时刻完全透明 */
|
// }
|
// }
|
|
/* 应用动画到 div */
|
.flash-text {
|
animation-name: flash;
|
animation-duration: 2s; /* 动画持续时间 */
|
animation-timing-function: linear; /* 动画速度曲线 */
|
animation-iteration-count: infinite; /* 动画重复次数 */
|
animation-direction: alternate; /* 动画方向 */
|
}
|
</style>
|
