<template>
|
<div
|
class="sphygmomanometer-container"
|
:style="{ '--height': height + 'px' }"
|
>
|
<div class="row1">
|
<div class="row1-col1">
|
<el-image
|
:src="pageData.patientPhone"
|
style="width: 100%; height: 100%"
|
>
|
<template #placeholder>
|
<div class="image-slot">加载中<span class="dot">...</span></div>
|
</template>
|
</el-image>
|
</div>
|
<div class="row1-col2">
|
<Card
|
title="血压"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="row1-col2-item"
|
header-class-name="mini-header"
|
>
|
<div class="item-box">
|
<span class="text">{{ pageData.sbp }} / {{ pageData.dbp }}</span>
|
</div>
|
</Card>
|
<Card
|
title="心率"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="row1-col2-item"
|
header-class-name="mini-header"
|
>
|
<div class="item-box">
|
<span class="text">{{ pageData.pulseRate }}</span>
|
</div>
|
</Card>
|
</div>
|
</div>
|
<div class="row2">
|
<Card
|
title="平均脱水量"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="row2-item"
|
>
|
<div class="item-box">
|
<span
|
class="text"
|
v-if="
|
pageData.averageDehydrationRate ||
|
[0, '0'].includes(pageData.averageDehydrationRate)
|
"
|
>{{ pageData.averageDehydrationRate }} L</span
|
>
|
</div>
|
</Card>
|
<Card
|
title="最大脱水量"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="row2-item"
|
>
|
<div class="item-box">
|
<div class="text">
|
<span
|
v-if="
|
pageData.maximumDehydrationCapacity ||
|
[0, '0'].includes(pageData.maximumDehydrationCapacity)
|
"
|
>{{ pageData.maximumDehydrationCapacity }}L</span
|
>
|
<span
|
v-if="pageData.maximumDehydrationCapacityDate"
|
style="color: #999"
|
>({{ pageData.maximumDehydrationCapacityDate }})</span
|
>
|
</div>
|
</div>
|
</Card>
|
</div>
|
<div class="row3">
|
<Card
|
title="异常指标"
|
:icon="xinlvImg"
|
background-color="#ffffff"
|
class="row3-col1"
|
header-class-name="mini-header"
|
>
|
<div class="dialysis-mode-content">
|
<span
|
v-for="(item, index) in pageData.abnormalItems"
|
:key="index"
|
class="abnormal-indicator"
|
:style="{ color: formatTestColr(item.结果标记) }"
|
>
|
{{ getItemName(item.项目名称) }}
|
{{ formatTestFlag(item.结果标记) }}
|
</span>
|
</div>
|
</Card>
|
|
<div class="blood-ressure-and-pulse-echart-card">
|
<div class="blood-pressure-and0pulse-echart">
|
<div
|
ref="bloodPressureAndPulseEchartRef"
|
style="width: 100%; height: 90%"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
|
import * as echarts from "echarts";
|
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import {
|
formatSubstituteMode,
|
formatTestColr,
|
getItemName,
|
formatTestFlag,
|
EMedStatus,
|
MonitoringRecord,
|
} from "@/store/type/bedsideAuxiliaryScreen.type";
|
// @ts-ignore
|
import Card from "../components/Card.vue";
|
import txqImg from "@/img/txq.png";
|
import xinlvImg from "@/img/xinlv.png";
|
import xinLv2Img from "@/img/xinlv2.png";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
// 血压脉搏趋势图的
|
const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);
|
|
const pageData = computed(() => {
|
return Object.assign(
|
bedsideAuxiliaryScreenStore.deviceData.sphygmomanometer,
|
{
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
averageDehydrationRate:
|
bedsideAuxiliaryScreenStore.deviceData.underTreatment
|
.averageDehydrationRate, // 平均脱水量
|
maximumDehydrationCapacity:
|
bedsideAuxiliaryScreenStore.deviceData.underTreatment
|
.maximumDehydrationCapacity, // 最大脱水
|
maximumDehydrationCapacityDate:
|
bedsideAuxiliaryScreenStore.deviceData.underTreatment
|
.maximumDehydrationCapacityDate, // 最大脱水量的日期
|
abnormalItems:
|
bedsideAuxiliaryScreenStore.deviceData.underTreatment.abnormalItems, // 异常指标
|
monitoringRecord:
|
bedsideAuxiliaryScreenStore.deviceData.underTreatment.monitoringRecord, // 血压脉搏数据
|
}
|
);
|
});
|
|
watch(
|
() => pageData.value.monitoringRecord,
|
(newVal) => {
|
generatBloodPressureAndPulseEchart(newVal);
|
},
|
{ deep: true }
|
);
|
|
/** 生成血压脉搏趋势图 */
|
const generatBloodPressureAndPulseEchart = (
|
bloodPressureAndPulses: MonitoringRecord[]
|
) => {
|
if (!bloodPressureAndPulseEchartRef.value) return;
|
|
let chart = echarts.getInstanceByDom(bloodPressureAndPulseEchartRef.value);
|
if (!chart) {
|
chart = echarts.init(bloodPressureAndPulseEchartRef.value);
|
}
|
|
const telescopicPressureDatas: number[] = []; // 伸缩压
|
const diastolicPressureDatas: number[] = []; // 舒张压
|
const pulseDatas: number[] = []; // 脉搏
|
const xAxisData: string[] = []; // 横坐标
|
|
bloodPressureAndPulses.forEach((item, index) => {
|
telescopicPressureDatas.push(+item.伸缩压);
|
diastolicPressureDatas.push(+item.舒张压);
|
pulseDatas.push(+item.脉搏);
|
xAxisData.push(String(index + 1));
|
});
|
|
const option = {
|
grid: [
|
{ top: "15%", height: "28%", left: 40, right: 20, containLabel: true },
|
{ top: "35%", height: "28%", left: 40, right: 20, containLabel: true },
|
{ top: "67%", height: "28%", left: 40, right: 20, containLabel: true },
|
],
|
tooltip: {
|
trigger: "axis",
|
},
|
xAxis: [
|
{
|
type: "category",
|
data: xAxisData,
|
boundaryGap: false,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: { show: false },
|
splitLine: { show: false },
|
gridIndex: 0,
|
show: false,
|
},
|
{
|
type: "category",
|
data: xAxisData,
|
boundaryGap: false,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: { show: false },
|
splitLine: { show: false },
|
gridIndex: 1,
|
show: false,
|
},
|
{
|
type: "category",
|
data: xAxisData,
|
boundaryGap: false,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: { show: true }, // 最下面一层显示时间轴
|
splitLine: { show: false },
|
gridIndex: 2,
|
show: false,
|
},
|
],
|
yAxis: [
|
{
|
type: "value",
|
show: false,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: { show: false },
|
splitLine: { show: false },
|
gridIndex: 0,
|
min: 0,
|
max: 300,
|
interval: 2,
|
},
|
{
|
type: "value",
|
show: false,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: { show: false },
|
splitLine: { show: false },
|
min: 0,
|
max: 300,
|
interval: 2,
|
gridIndex: 1,
|
},
|
{
|
type: "value",
|
show: false,
|
axisLine: { show: false },
|
axisTick: { show: false },
|
axisLabel: { show: false },
|
splitLine: { show: false },
|
min: 0,
|
max: 300,
|
interval: 2,
|
gridIndex: 2,
|
},
|
],
|
series: [
|
{
|
name: "伸缩压",
|
xAxisIndex: 0,
|
yAxisIndex: 0,
|
data: wrapData(telescopicPressureDatas),
|
type: "line",
|
smooth: false,
|
symbol: "circle",
|
symbolSize: 6,
|
lineStyle: { width: 2, color: "#FE0201" },
|
itemStyle: { color: "#FE0201" },
|
label: { color: "#FE0201" },
|
},
|
{
|
name: "舒张压",
|
xAxisIndex: 1,
|
yAxisIndex: 1,
|
data: wrapData(diastolicPressureDatas),
|
type: "line",
|
smooth: false,
|
symbol: "circle",
|
symbolSize: 6,
|
lineStyle: { width: 2, color: "#70A3DD" },
|
itemStyle: { color: "#70A3DD" },
|
label: { color: "#70A3DD" },
|
},
|
{
|
name: "脉搏",
|
xAxisIndex: 2,
|
yAxisIndex: 2,
|
data: wrapData(pulseDatas),
|
type: "line",
|
smooth: false,
|
symbol: "circle",
|
symbolSize: 6,
|
lineStyle: { width: 2, color: "#8079CB" },
|
itemStyle: { color: "#8079CB" },
|
label: { color: "#8079CB" },
|
},
|
],
|
};
|
chart.setOption(option);
|
};
|
|
// 给首尾点加上 label
|
const wrapData = (arr: number[]) => {
|
return arr.map((v, i) => ({
|
value: v,
|
label: {
|
show: i === 0 || i === arr.length - 1,
|
position: "top",
|
fontSize: 12,
|
},
|
}));
|
};
|
|
onMounted(() => {
|
generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
|
});
|
|
onBeforeUnmount(() => {
|
if (bloodPressureAndPulseEchartRef.value) {
|
const chart = echarts.getInstanceByDom(
|
bloodPressureAndPulseEchartRef.value
|
);
|
if (chart) {
|
chart.dispose();
|
}
|
}
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
.sphygmomanometer-container {
|
display: flex;
|
flex-direction: column;
|
height: var(--height);
|
padding-bottom: 2px;
|
gap: 4px;
|
.row1 {
|
height: 45%;
|
display: flex;
|
gap: 4px;
|
.row1-col1 {
|
width: 20%;
|
border-radius: 2px;
|
overflow: hidden;
|
}
|
.row1-col2 {
|
width: 80%;
|
display: flex;
|
gap: 4px;
|
.row1-col2-item {
|
width: 50%;
|
}
|
}
|
}
|
.row2 {
|
height: 25%;
|
display: flex;
|
gap: 4px;
|
.row2-item {
|
width: 50%;
|
}
|
}
|
.row3 {
|
height: 35%;
|
display: flex;
|
gap: 4px;
|
.row3-col1 {
|
width: 20%;
|
.dialysis-mode-content {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 4px;
|
font-size: 6px;
|
font-weight: bold;
|
span {
|
white-space: nowrap;
|
}
|
}
|
}
|
.blood-ressure-and-pulse-echart-card {
|
position: relative;
|
width: 80%;
|
background-color: #ffffff;
|
border-radius: 2px;
|
.blood-pressure-and0pulse-echart {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
width: 98%;
|
height: 96%;
|
}
|
}
|
}
|
|
.item-box {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: bold;
|
font-size: 12px;
|
color: #70a3dd;
|
text-align: center;
|
font-style: normal;
|
&.treatment-status {
|
color: #70a3dd;
|
}
|
&.prescription-ehydration-olume {
|
color: #8079cb;
|
}
|
&.current-lood0emperature {
|
color: #70a3dd;
|
font-size: 9px;
|
}
|
&.venous-pressure {
|
color: #70a3dd;
|
font-size: 9px;
|
}
|
}
|
}
|
</style>
|
