<template>
|
<div>
|
<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="mini-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="mini-header"
|
>
|
<div class="prescription-remarks">
|
{{ pageData.prescriptionRemarks }}
|
</div>
|
</Card>
|
</div>
|
<div class="left-row1-col3">
|
<Card
|
title="透析器"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="mini-card left-row1-col3-row1"
|
header-class-name="mini-header"
|
>
|
<div class="item-box prescription-ehydration-olume">
|
<span class="text">{{ pageData.dialyzer }}</span>
|
</div>
|
</Card>
|
<Card
|
title="异常指标"
|
:icon="xinlvImg"
|
background-color="#ffffff"
|
class="mini-card left-row1-col3-row2"
|
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>
|
</div>
|
<div class="left-row2">
|
<Card
|
title="血温监测"
|
:icon="xinLv2Img"
|
background-color="#ffffff"
|
class="mini-card left-row2-col1"
|
header-class-name="mini-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.currentBloodTemperature }}</span>
|
</div>
|
</Card>
|
<Card
|
title="血压监测"
|
:icon="xinLv2Img"
|
background-color="#ffffff"
|
class="mini-card left-row2-col2"
|
header-class-name="mini-header"
|
>
|
<div class="item-box venous-pressure">
|
<span class="text"
|
>{{ pageData.venousPressure }}/{{
|
pageData.transmembranePressure
|
}}</span
|
>
|
</div>
|
</Card>
|
<Card
|
title="血压脉搏趋势图"
|
:icon="xinLv2Img"
|
background-color="#ffffff"
|
class="mini-card ktv-card left-row2-col3"
|
header-class-name="mini-header"
|
>
|
<div style="height: 100%">
|
<div
|
ref="bloodPressureAndPulseEchartRef"
|
style="width: 100%; height: 100%"
|
></div>
|
</div>
|
</Card>
|
</div>
|
<div class="left-row3">
|
<Card
|
title="血容量监测"
|
:icon="xinLv2Img"
|
background-color="#ffffff"
|
class="mini-card left-row3-col1"
|
header-class-name="mini-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.bloodVolumeMonitoring }}</span>
|
</div>
|
</Card>
|
<Card
|
title="Kt/V监测"
|
:icon="xinLv2Img"
|
background-color="#ffffff"
|
class="mini-card left-row3-col2"
|
header-class-name="mini-header"
|
>
|
<div class="item-box venous-pressure">
|
<span class="text">{{ pageData.ktv }}</span>
|
</div>
|
</Card>
|
<Card
|
title="Kt/V趋势图"
|
:icon="xinLv2Img"
|
background-color="#ffffff"
|
class="mini-card ktv-card left-row3-col3"
|
header-class-name="mini-header"
|
>
|
<div style="height: 100%">
|
<div
|
ref="ktvListEchartRef"
|
style="width: 100%; height: 100%"
|
></div>
|
</div>
|
</Card>
|
</div>
|
<div class="left-row4">
|
<Card
|
title="静脉压/跨膜压"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="mini-card left-row4-col"
|
header-class-name="mini-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.venousPressure2 }}/{{ pageData.transmembranePressure2 }}</span>
|
</div>
|
</Card>
|
<Card
|
title="血流量/透析液流量"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="mini-card left-row4-col"
|
header-class-name="mini-header"
|
>
|
<div class="item-box current-lood0emperature">
|
<span class="text">{{ pageData.bloodFlow }}/{{ pageData.dialysisFluidFlowRate }}</span>
|
</div>
|
</Card>
|
</div>
|
</div>
|
<div class="right-box">
|
<div class="right-box-row1">
|
<Card
|
title="治疗状态"
|
:icon="txztImg"
|
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="cljdImg"
|
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">(最近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="sjjdImg"
|
background-color="#ffffff"
|
class="mini-card right-box-row2-item"
|
header-class-name="mini-header"
|
>
|
<div class="progress-box">
|
<div class="item-num">
|
{{ jgTime4(pageData.dialysisDuration) }}/{{
|
pageData.prescriptionDialysisDurationHour
|
}}:{{ pageData.prescriptionDialysisDurationMin }}
|
</div>
|
<ProgressBar
|
:percent="
|
(Number(pageData.dialysisDuration) /
|
(Number(pageData.prescriptionDialysisDuration) * 60)) *
|
100
|
"
|
color="#70A3DD"
|
backgroundColor="#D6DEF1"
|
borderRadius="50%"
|
/>
|
</div>
|
</Card>
|
<Card
|
title="超滤进度"
|
:icon="cljdImg"
|
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.prescriptionDehydrationVolume
|
}}({{ pageData.currentUltrafiltrationRate }})
|
</div>
|
<ProgressBar
|
:percent="
|
(pageData.currentDehydrationVolume /
|
pageData.prescriptionDehydrationVolume) *
|
100
|
"
|
color="#70CAAE"
|
backgroundColor="#D6DEF1"
|
borderRadius="50%"
|
/>
|
</div>
|
</Card>
|
</div>
|
<div class="right-box-row3">
|
<Card
|
title="临时医嘱"
|
:icon="yizhuImg"
|
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
|
v-if="!whetherDialysisHasBeenEnded"
|
:icon="kaiShiImg"
|
text="结束透析"
|
backgroundColor="#E6A23C"
|
@click="() => onEndClick()"
|
class="btn"
|
/>
|
</div>
|
</div>
|
</div>
|
<!-- 定时任务 -->
|
<ScheduledTaskDialog ref="scheduledTaskDialogRef" />
|
</div>
|
</template>
|
<script lang="ts" setup name="UnderTreatment">
|
import {
|
computed,
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
watch,
|
defineAsyncComponent,
|
} from "vue";
|
import * as echarts from "echarts";
|
import dayjs from "dayjs";
|
|
// @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";
|
const ScheduledTaskDialog = defineAsyncComponent(
|
() => import("../components/ScheduledTask.vue")
|
);
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import {
|
formatSubstituteMode,
|
formatTestColr,
|
getItemName,
|
formatTestFlag,
|
EMedStatus,
|
} from "@/store/type/bedsideAuxiliaryScreen.type";
|
import type {
|
KtvItem,
|
MonitoringRecord,
|
} from "@/store/type/bedsideAuxiliaryScreen.type";
|
import { formatDate, jgTime4, jgTime5 } 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";
|
import txqImg from "@/img/txq.png";
|
import xinlvImg from "@/img/xinlv.png";
|
import xinLv2Img from "@/img/xinlv2.png";
|
import txztImg from "@/img/txzt.png";
|
import cljdImg from "@/img/cljd.png";
|
import sjjdImg from "@/img/sjjd.png";
|
import yizhuImg from "@/img/yizhu.png";
|
import { ElMessage } from "element-plus";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const scheduledTaskDialogRef = ref<any>(null);
|
|
// ktv趋势图的
|
const ktvListEchartRef = ref<HTMLElement | null>(null);
|
// 血压脉搏趋势图的
|
const bloodPressureAndPulseEchartRef = 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 whetherDialysisHasBeenEnded = computed(() => {
|
return (
|
+bedsideAuxiliaryScreenStore.deviceData.treatmentStatus >= EMedStatus.END
|
);
|
});
|
|
watch(
|
() => pageData.value.ktvList,
|
(newVal) => {
|
generateKtvListEchart(newVal);
|
},
|
{ deep: true }
|
);
|
|
watch(
|
() => pageData.value.monitoringRecord,
|
(newVal) => {
|
generatBloodPressureAndPulseEchart(newVal);
|
},
|
{ deep: true }
|
);
|
|
watch(
|
() => props.height,
|
() => {
|
generateKtvListEchart(pageData.value.ktvList);
|
generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
|
}
|
);
|
|
/** 生成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 = {
|
grid: {
|
top: 6,
|
bottom: 20,
|
right: 20,
|
},
|
xAxis: {
|
type: "category",
|
data: ktvList.map((item) => dayjs(item.时间).format("HH:mm")),
|
axisLine: { show: true },
|
axisTick: { show: true },
|
splitLine: { show: false },
|
},
|
yAxis: {
|
type: "value",
|
axisLine: { show: true },
|
axisTick: { show: true },
|
splitLine: { show: false },
|
|
splitNumber: 4,
|
},
|
series: [
|
{
|
data: ktvList.map((item) => item.ktv),
|
type: "line",
|
smooth: false,
|
symbol: "circle",
|
symbolSize: 6,
|
lineStyle: {
|
width: 2,
|
color: "#70CAAE",
|
},
|
itemStyle: {
|
color: (params: any) => getColor(params.value),
|
},
|
},
|
],
|
tooltip: {
|
trigger: "axis",
|
},
|
};
|
|
chart.setOption(option, true); // 第二个参数为 true 表示全量更新
|
};
|
|
const getColor = (val: number) => {
|
if (val < 1.2) return "#FE0201"; // 红色
|
if (val <= 1.6) return "#70CAAE"; // 绿色
|
return "#FE6500"; // 橙色
|
};
|
|
const formatMarkPoint = (
|
name: string,
|
value: number,
|
yAxis: number,
|
xAxis: number,
|
symbolSize: number,
|
symbolOffset: number[],
|
color: string
|
) => {
|
return {
|
name,
|
value,
|
yAxis,
|
xAxis,
|
symbolSize,
|
symbolOffset,
|
label: { fontSize: 8, color },
|
};
|
};
|
|
/** 生成血压脉搏趋势图 */
|
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: number[] = []; // 横坐标
|
|
const markPointTelescopicPressureDatas: any[] = []; // 伸缩压的markPoint
|
const markPointDiastolicPressureDatas: any[] = []; // 舒张压的markPoint
|
const markPointPulseDatas: any[] = []; // 脉搏的markPoint
|
|
bloodPressureAndPulses.forEach((item, index) => {
|
telescopicPressureDatas.push(+item.伸缩压);
|
diastolicPressureDatas.push(+item.舒张压);
|
pulseDatas.push(+item.脉搏);
|
xAxisData.push(index);
|
if (index === 0) {
|
markPointTelescopicPressureDatas.push(
|
formatMarkPoint(
|
"伸缩压",
|
+item.伸缩压,
|
+item.伸缩压,
|
0,
|
0,
|
[0, 10],
|
"red"
|
)
|
);
|
markPointDiastolicPressureDatas.push(
|
formatMarkPoint(
|
"舒张压",
|
+item.舒张压,
|
+item.舒张压,
|
0,
|
0,
|
[15, 5],
|
"#409EFF"
|
)
|
);
|
markPointPulseDatas.push(
|
formatMarkPoint(
|
"脉搏",
|
+item.脉搏,
|
+item.脉搏,
|
0,
|
0,
|
[10, -15],
|
"#D940FF"
|
)
|
);
|
} else if (
|
bloodPressureAndPulses.length > 1 &&
|
index === bloodPressureAndPulses.length - 1
|
) {
|
markPointTelescopicPressureDatas.push(
|
formatMarkPoint(
|
"伸缩压",
|
+item.伸缩压,
|
+item.伸缩压,
|
index,
|
0,
|
[-15, -20],
|
"red"
|
)
|
);
|
markPointDiastolicPressureDatas.push(
|
formatMarkPoint(
|
"舒张压",
|
+item.舒张压,
|
+item.舒张压,
|
index,
|
0,
|
[-15, 0],
|
"#409EFF"
|
)
|
);
|
markPointPulseDatas.push(
|
formatMarkPoint(
|
"脉搏",
|
+item.脉搏,
|
+item.脉搏,
|
index,
|
0,
|
[0, 0],
|
"#D940FF"
|
)
|
);
|
}
|
});
|
|
if (bloodPressureAndPulses.length === 1) {
|
xAxisData.push(1);
|
}
|
|
const option = {
|
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: 40,
|
max: 220,
|
interval: 10, // 指定刻度间隔,
|
splitLine: {
|
show: false,
|
},
|
},
|
series: [
|
{
|
name: "伸缩压",
|
type: "line",
|
symbol: "triangle",
|
symbolSize: 6,
|
symbolRotate: 180,
|
data: telescopicPressureDatas,
|
lineStyle: {
|
width: 2, // 设置线条宽度为5
|
color: "red",
|
},
|
itemStyle: {
|
borderWidth: 2,
|
borderColor: "red",
|
color: "red",
|
},
|
markPoint: {
|
data: markPointTelescopicPressureDatas,
|
},
|
markLine: {
|
symbol: "none",
|
lineStyle: { color: "#409EFF", width: 2 },
|
data: [
|
{ name: "y90", yAxis: 90, label: { show: false }, symbol: "none" },
|
],
|
},
|
},
|
{
|
name: "舒张压",
|
type: "line",
|
symbol: "triangle",
|
symbolSize: 6,
|
data: diastolicPressureDatas,
|
lineStyle: {
|
color: "#409EFF",
|
width: 2, // 设置线条宽度为5
|
},
|
itemStyle: {
|
borderWidth: 2,
|
borderColor: "#409EFF",
|
color: "#409EFF",
|
},
|
markPoint: {
|
data: markPointDiastolicPressureDatas,
|
},
|
markLine: {
|
symbol: "none",
|
lineStyle: { color: "#F56C6C", width: 2 },
|
data: [
|
{
|
name: "y140",
|
yAxis: 140,
|
label: { show: false },
|
symbol: "none",
|
},
|
],
|
},
|
},
|
{
|
name: "脉搏",
|
type: "line",
|
symbolSize: 6,
|
data: pulseDatas,
|
lineStyle: {
|
color: "#D940FF",
|
width: 2, // 设置线条宽度为5
|
},
|
itemStyle: {
|
borderWidth: 2,
|
borderColor: "#D940FF",
|
color: "#D940FF",
|
},
|
markPoint: {
|
data: markPointPulseDatas,
|
},
|
},
|
],
|
};
|
|
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,
|
},
|
}));
|
};
|
|
/** 定时任务 */
|
const onScheduledTasksClick = () => {
|
if (
|
!bedsideAuxiliaryScreenStore.deviceCode ||
|
!bedsideAuxiliaryScreenStore.deviceData.deviceCode
|
)
|
return ElMessage.warning("未初始化或正在进行初始化操作中");
|
scheduledTaskDialogRef.value?.openDialog();
|
};
|
|
/** 叫号 */
|
const onCallBumberClick = () => {
|
ElMessage({
|
message: "功能开发中，敬请期待！",
|
type: "warning",
|
});
|
};
|
|
/** 添加记录 */
|
const onAddRecordClick = () => {
|
ElMessage({
|
message: "功能开发中，敬请期待！",
|
type: "warning",
|
});
|
};
|
|
/** 结束透析 */
|
const onEndClick = () => {
|
ElMessage({
|
message: "功能开发中，敬请期待！",
|
type: "warning",
|
});
|
};
|
|
onMounted(() => {
|
// 生成ktv趋势图
|
generateKtvListEchart(pageData.value.ktvList);
|
generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
|
});
|
|
onBeforeUnmount(() => {
|
// 销毁图表实例
|
if (ktvListEchartRef.value) {
|
const chart = echarts.getInstanceByDom(ktvListEchartRef.value);
|
if (chart) {
|
chart.dispose();
|
}
|
}
|
if (bloodPressureAndPulseEchartRef.value) {
|
const chart = echarts.getInstanceByDom(
|
bloodPressureAndPulseEchartRef.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 {
|
overflow: visible;
|
.card-header {
|
margin-bottom: 0px;
|
}
|
::v-deep(.card-main) {
|
overflow: visible !important;
|
div {
|
overflow: visible;
|
}
|
}
|
}
|
:deep(.mini-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>
|
