<template>
|
<div class="under-treatment-container" :style="{ '--height': height + 'px' }">
|
<div class="left-box">
|
<div class="left-row1">
|
<div class="left-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="left-row1-col2">
|
<Card
|
title="治疗模式"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row1-col2-row1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialysis-mode-content">
|
<div class="dialysis-mode-content-box">
|
<span class="mini-text">{{
|
formatSubstituteMode(pageData.substituteMode)
|
}}</span>
|
<span class="text">{{ pageData.dialysisPlan }}</span>
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="处方备注"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row1-col2-item-row2"
|
header-class-name="mihi-header"
|
>
|
<div class="prescription-remarks">
|
{{ pageData.prescriptionRemarks }}
|
</div>
|
</Card>
|
</div>
|
<div class="left-row1-col3">
|
<Card
|
title="透析器"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row1-col3-row1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box prescription-ehydration-olume">
|
<span class="text">{{ pageData.dialyzer }}</span>
|
</div>
|
</Card>
|
<Card
|
title="异常指标"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row1-col3-row2"
|
header-class-name="mihi-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>
|
</div>
|
<div class="left-row2">
|
<Card
|
title="血温监测"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row2-col1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.currentBloodTemperature }}</span>
|
</div>
|
</Card>
|
<Card
|
title="血压监测"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row2-col2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box venous-pressure">
|
<span class="text"
|
>{{ pageData.venousPressure }}/{{
|
pageData.transmembranePressure
|
}}</span
|
>
|
</div>
|
</Card>
|
<Card
|
title="血压脉搏趋势图"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row2-col3"
|
header-class-name="mihi-header"
|
>
|
<div class=""></div>
|
</Card>
|
</div>
|
<div class="left-row3">
|
<Card
|
title="血容量监测"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row3-col1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.bloodVolumeMonitoring }}</span>
|
</div>
|
</Card>
|
<Card
|
title="KTV监测"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row3-col2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box venous-pressure">
|
<span class="text">{{ pageData.ktv }}</span>
|
</div>
|
</Card>
|
<Card
|
title="KTV趋势图"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card ktv-card left-row3-col3"
|
header-class-name="mihi-header"
|
>
|
<div style="height: 100%">
|
<div ref="ktvListEchartRef" style="width: 100%; height: 100%"></div>
|
</div>
|
</Card>
|
</div>
|
<div class="left-row4">
|
<Card
|
title="血流量"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row4-col"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.bloodFlow }}</span>
|
</div>
|
</Card>
|
<Card
|
title="透析液流量"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card left-row4-col"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.dialysisFluidFlowRate }}</span>
|
</div>
|
</Card>
|
</div>
|
</div>
|
<div class="right-box">
|
<div class="right-box-row1">
|
<Card
|
title="治疗状态"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card right-box-row1-col1"
|
header-class-name="mini-header"
|
>
|
<div class="item-box treatment-status">
|
<span class="text">{{ treatmentStatusText }}</span>
|
</div>
|
</Card>
|
<Card
|
title="脱水量详情"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card right-box-row1-col2"
|
header-class-name="mini-header"
|
>
|
<div class="dehydrated-level">
|
<div class="dehydrated-level-item">
|
<span class="item-left"
|
>平均脱水量：{{ pageData.averageDehydrationRate }} L</span
|
>
|
<span class="item-right">(最近3周9次)</span>
|
</div>
|
<div class="dehydrated-level-item">
|
<div class="item-left">
|
<span
|
>最大脱水量：{{ pageData.maximumDehydrationCapacity }} L</span
|
>
|
<template v-if="pageData.maximumDehydrationDuration"
|
>/
|
<span class="level-dete">{{
|
pageData.maximumDehydrationDuration
|
}}</span>
|
</template>
|
</div>
|
<span class="item-right"
|
>({{ pageData.maximumDehydrationCapacityDate }})</span
|
>
|
</div>
|
</div>
|
</Card>
|
</div>
|
<div class="right-box-row2">
|
<Card
|
title="时间进度"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card right-box-row2-item"
|
header-class-name="mini-header"
|
>
|
<div class="item-box">
|
<div class="item-num"></div>
|
</div>
|
</Card>
|
<Card
|
title="超滤进度"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card right-box-row2-item"
|
header-class-name="mini-header"
|
>
|
<div class="progress-box">
|
<div class="item-num">
|
{{ pageData.currentDehydrationVolume }}/{{
|
pageData.currentDehydrationVolume
|
}}({{ pageData.currentUltrafiltrationRate }})
|
</div>
|
<ProgressBar
|
:percent="
|
(pageData.currentDehydrationVolume /
|
pageData.currentDehydrationVolume) *
|
100
|
"
|
color="#70CAAE"
|
backgroundColor="#D6DEF1"
|
borderRadius="50%"
|
/>
|
</div>
|
</Card>
|
</div>
|
<div class="right-box-row3">
|
<Card
|
title="临时医嘱"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="mini-card right-box-row2-item"
|
header-class-name="mini-header"
|
>
|
<DoctorAdvice :list="pageData.doctorAdvice" />
|
</Card>
|
</div>
|
<div class="right-box-row4">
|
<BlockBotttom
|
:icon="dingShiImg"
|
text="定时任务"
|
backgroundColor="#20C6B6"
|
@click="() => onScheduledTasksClick()"
|
class="btn"
|
/>
|
<BlockBotttom
|
:icon="jiaoHaoImg"
|
text="叫号"
|
backgroundColor="#20C6B6"
|
@click="() => onCallBumberClick()"
|
class="btn"
|
/>
|
<BlockBotttom
|
:icon="addImg"
|
text="添加记录"
|
backgroundColor="#409EFF"
|
@click="() => onAddRecordClick()"
|
class="btn"
|
/>
|
<BlockBotttom
|
:icon="kaiShiImg"
|
text="j结束透析"
|
backgroundColor="#E6A23C"
|
@click="() => onEndClick()"
|
class="btn"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup name="UnderTreatment">
|
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
|
import * as echarts from "echarts";
|
// @ts-ignore
|
import Card from "../components/Card.vue";
|
// @ts-ignore
|
import ProgressBar from "../components/ProgressBar.vue";
|
import DoctorAdvice from "../components/DoctorAdvice/index.vue";
|
// @ts-ignore
|
import BlockBotttom from "../components/BlockBotttom.vue";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import {
|
formatSubstituteMode,
|
formatTestColr,
|
getItemName,
|
formatTestFlag,
|
EMedStatus,
|
} from "@/store/type/bedsideAuxiliaryScreen.type";
|
import type { KtvItem } from "@/store/type/bedsideAuxiliaryScreen.type";
|
import { formatDate } from "@/utils/formatTime";
|
import zlmsImg from "@/img/zlms.png";
|
import dingShiImg from "@/img/dingshi2.png";
|
import jiaoHaoImg from "@/img/jiaoHao.png";
|
import kaiShiImg from "@/img/kaiShi.png";
|
import addImg from "@/img/add.png";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
// ktv趋势图的
|
const ktvListEchartRef = ref<HTMLElement | null>(null);
|
|
const pageData = computed(() => {
|
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
});
|
});
|
|
const treatmentStatusText = computed(() => {
|
const status = bedsideAuxiliaryScreenStore.deviceData.treatmentStatus;
|
if (status === EMedStatus.NOT_CHECKED_IN) return "未签到";
|
if (status === EMedStatus.SIGNED_IN) return "已签到";
|
if (status === EMedStatus.DURING_DIALYSIS) return "透析中";
|
if (status === EMedStatus.END) return "已结束";
|
if (status === EMedStatus.CHECKED) return "已检查";
|
if (status === EMedStatus.ARCHIVED) return "已归档";
|
return "未知状态";
|
});
|
|
// const;
|
|
/** 生成ktv趋势图 */
|
const generateKtvListEchart = (ktvList: KtvItem[]) => {
|
if (!ktvListEchartRef.value) return;
|
if (!ktvList || ktvList.length === 0) return;
|
|
// 检查是否已经有实例
|
let chart = echarts.getInstanceByDom(ktvListEchartRef.value);
|
if (!chart) {
|
chart = echarts.init(ktvListEchartRef.value);
|
}
|
|
const option = {
|
xAxis: {
|
type: "category",
|
data: ktvList.map((item) => formatDate(new Date(item.时间), "HH:mm")),
|
axisLine: { show: true },
|
axisTick: { show: true },
|
// axisLabel: {
|
// margin: 5, // 控制文字与轴的距离，尽量小
|
// fontSize: 12,
|
// },
|
},
|
yAxis: {
|
type: "value",
|
axisLine: { show: true },
|
axisTick: { show: true },
|
// axisLabel: {
|
// margin: 5,
|
// fontSize: 12,
|
// },
|
splitLine: { show: true },
|
},
|
series: [
|
{
|
data: ktvList.map((item) => item.ktv),
|
type: "line",
|
smooth: false,
|
symbol: "circle",
|
symbolSize: 6,
|
lineStyle: {
|
width: 2,
|
color: "#70CAAE",
|
},
|
itemStyle: {
|
color: "#70CAAE",
|
},
|
},
|
],
|
tooltip: {
|
trigger: "axis",
|
},
|
};
|
|
chart.setOption(option, true); // 第二个参数为 true 表示全量更新
|
};
|
|
/** 定时任务 */
|
const onScheduledTasksClick = () => {};
|
|
/** 叫号 */
|
const onCallBumberClick = () => {};
|
|
/** 添加记录 */
|
const onAddRecordClick = () => {};
|
|
/** 结束透析 */
|
const onEndClick = () => {};
|
|
onMounted(() => {
|
// 生成ktv趋势图
|
generateKtvListEchart(pageData.value.ktvList);
|
});
|
|
onBeforeUnmount(() => {
|
// 销毁图表实例
|
if (ktvListEchartRef.value) {
|
const chart = echarts.getInstanceByDom(ktvListEchartRef.value);
|
if (chart) {
|
chart.dispose();
|
}
|
}
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
.under-treatment-container {
|
display: flex;
|
align-items: flex-start;
|
height: var(--height);
|
gap: 4px;
|
padding-bottom: 2px;
|
overflow: hidden;
|
.left-box {
|
width: 58.25%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
|
.left-row1 {
|
width: 100%;
|
height: 38.97%;
|
display: flex;
|
gap: 4px;
|
|
.left-row1-col1,
|
.left-row1-col2,
|
.left-row1-col3 {
|
height: 100%;
|
}
|
|
.left-row1-col1 {
|
width: 26.94%;
|
border-radius: 2px;
|
overflow: hidden;
|
}
|
.left-row1-col2 {
|
width: 26.43%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.left-row1-col2-row1 {
|
height: 36.62%;
|
}
|
|
.left-row1-col2-item-row2 {
|
height: 63.38%;
|
}
|
}
|
.left-row1-col3 {
|
width: 46.63%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.left-row1-col3-row1 {
|
height: 36.62%;
|
}
|
.left-row1-col3-row2 {
|
height: 63.38%;
|
.dialysis-mode-content {
|
height: 100%;
|
.abnormal-indicator {
|
display: inline-block;
|
margin-right: 6px;
|
margin-bottom: 4px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 5px;
|
line-height: 6px;
|
text-align: left;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
}
|
.left-row2 {
|
width: 100%;
|
height: 21.03%;
|
display: flex;
|
gap: 4px;
|
.left-row2-col1 {
|
width: 26.94%;
|
}
|
.left-row2-col2 {
|
width: 26.43%;
|
}
|
.left-row2-col3 {
|
width: 46.62%;
|
}
|
}
|
.left-row3 {
|
width: 100%;
|
height: 21.03%;
|
display: flex;
|
gap: 4px;
|
.left-row3-col1 {
|
width: 26.94%;
|
}
|
.left-row3-col2 {
|
width: 26.43%;
|
}
|
.left-row3-col3 {
|
width: 46.62%;
|
}
|
}
|
.left-row4 {
|
width: 100%;
|
height: 11.79%;
|
display: flex;
|
gap: 4px;
|
.left-row4-col {
|
width: 50%;
|
}
|
}
|
}
|
.right-box {
|
width: 41.75%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.right-box-row1,
|
.right-box-row2,
|
.right-box-row3 .right-box-row4 {
|
width: 100%;
|
}
|
.right-box-row1 {
|
height: 14.44%;
|
display: flex;
|
gap: 4px;
|
.right-box-row1-col1 {
|
width: 36.17%;
|
}
|
.right-box-row1-col2 {
|
width: 63.83%;
|
}
|
}
|
.right-box-row2 {
|
height: 25%;
|
display: flex;
|
gap: 4px;
|
.right-box-row2-item {
|
width: 50%;
|
}
|
}
|
.right-box-row3 {
|
height: 47.78%;
|
}
|
|
.right-box-row4 {
|
height: 12.78%;
|
background: #ffffff;
|
border-radius: 2px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding-right: 13px;
|
.btn {
|
margin-left: 9px;
|
}
|
}
|
}
|
|
.progress-box {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
.item-num {
|
margin-bottom: 4px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 8px;
|
color: #333333;
|
text-align: left;
|
font-style: normal;
|
}
|
}
|
|
.item-box {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 8px;
|
color: #70a3dd;
|
text-align: center;
|
font-style: normal;
|
&.dialysis-mode-content {
|
color: #d58e56;
|
display: flex;
|
align-items: center;
|
// align-items: baseline;
|
.dialysis-mode-content-box {
|
display: flex;
|
align-items: flex-end;
|
line-height: 1;
|
.mini-text {
|
margin-right: 1px;
|
font-size: 5px;
|
color: #c9a589;
|
}
|
}
|
}
|
&.treatment-status {
|
color: #70a3dd;
|
}
|
&.prescription-ehydration-olume {
|
color: #8079cb;
|
}
|
&.current-lood0emperature {
|
color: #70a3dd;
|
font-size: 9px;
|
}
|
&.venous-pressure {
|
color: #70a3dd;
|
font-size: 9px;
|
}
|
}
|
.prescription-remarks {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 5px;
|
color: #d58e56;
|
line-height: 7px;
|
text-align: left;
|
font-style: normal;
|
}
|
.dehydrated-level {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
.dehydrated-level-item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.item-left {
|
flex: 1;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4px;
|
color: #333333;
|
line-height: 6px;
|
font-style: normal;
|
.level-dete {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4px;
|
color: #d58e56;
|
text-align: left;
|
font-style: normal;
|
}
|
}
|
.item-right {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4px;
|
color: #777777;
|
line-height: 6px;
|
font-style: normal;
|
}
|
}
|
}
|
// card header class
|
.mini-card {
|
padding: 2px;
|
}
|
.ktv-card {
|
.card-header {
|
margin-bottom: 0px;
|
}
|
}
|
:deep(.mihi-header) {
|
flex: 0 0 4px;
|
.card-icon {
|
width: 4px;
|
height: 4px;
|
}
|
.card-title {
|
font-size: 4px;
|
}
|
}
|
:deep(.big-header) {
|
flex: 0 0 9px;
|
.card-icon {
|
width: 9px;
|
height: 9px;
|
}
|
.card-title {
|
font-size: 5px;
|
}
|
}
|
}
|
</style>
|
