From 69a37b00da3147c95c18e922d113c9a176563af0 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期四, 24 七月 2025 21:10:19 +0800
Subject: [PATCH] ID1625-x
---
src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue | 935 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 907 insertions(+), 28 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
index 44678c7..b05d642 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
@@ -12,21 +12,351 @@
</template>
</el-image>
</div>
- <div class="left-row1-col2"></div>
- <div class="left-row1-col3"></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"></div>
- <div class="left-row3"></div>
- <div class="left-row4"></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="KTV监测"
+ :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="KTV趋势图"
+ :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.bloodFlow }}</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.dialysisFluidFlowRate }}</span>
+ </div>
+ </Card>
+ </div>
</div>
- <div class="right-box"></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">(最近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="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.prescriptionDialysisDuration
+ }}:{{ 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.currentDehydrationVolume
+ }}({{ 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>
</template>
<script lang="ts" setup name="UnderTreatment">
-import { computed } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount, watch } 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";
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;
@@ -35,10 +365,313 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+// 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 }
+);
+
+/** 生成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: "#70CAAE",
+ },
+ },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ };
+
+ chart.setOption(option, true); // 第二个参数为 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: "10%", height: "25%", left: 30, right: 20 },
+ { top: "38%", height: "25%", left: 30, right: 20 },
+ { top: "66%", height: "25%", left: 30, right: 20 },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ gridIndex: 0,
+ },
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ gridIndex: 1,
+ },
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: true }, // 最下面一层显示时间轴
+ splitLine: { show: false },
+ gridIndex: 2,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ show: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ min: "dataMin", // 自动以数据最小值为最小值
+ max: "dataMax",
+ gridIndex: 0,
+ },
+ {
+ type: "value",
+ show: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ min: "dataMin", // 自动以数据最小值为最小值
+ max: "dataMax",
+ gridIndex: 1,
+ },
+ {
+ type: "value",
+ show: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ min: "dataMin", // 自动以数据最小值为最小值
+ max: "dataMax",
+ 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,
+ },
+ }));
+};
+
+/** 定时任务 */
+const onScheduledTasksClick = () => {};
+
+/** 叫号 */
+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>
@@ -55,48 +688,294 @@
padding-bottom: 2px;
overflow: hidden;
.left-box {
- flex: 0 0 58.25%;
- height: calc(100% - 12px);
+ width: 58.25%;
+ height: 100%;
display: flex;
- align-items: flex-start;
flex-direction: column;
gap: 4px;
- div {
- width: 100%;
- }
+
.left-row1 {
- flex: 0 0 41.99%;
- // width: calc(100% - 8px);
- gap: 4px;
+ width: 100%;
+ height: 38.97%;
display: flex;
- background: blue;
+ gap: 4px;
+
+ .left-row1-col1,
+ .left-row1-col2,
+ .left-row1-col3 {
+ height: 100%;
+ }
+
.left-row1-col1 {
- flex: 0 0 26.94%;
+ width: 26.94%;
+ border-radius: 2px;
+ overflow: hidden;
}
.left-row1-col2 {
- flex: 0 0 26.42%;
+ 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 {
- flex: 0 0 46.63%;
+ 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 {
- flex: 0 0 22.65%;
- background: yellow;
+ 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 {
- flex: 0 0 22.65%;
- background: orange;
+ 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 {
- flex: 0 0 12.71%;
- background: purple;
+ width: 100%;
+ height: 11.79%;
+ display: flex;
+ gap: 4px;
+ .left-row4-col {
+ width: 50%;
+ }
}
}
.right-box {
- flex: 0 0 41.75%;
+ width: 41.75%;
height: 100%;
- background: green;
+ 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>
--
Gitblit v1.8.0