<template>
|
<div class="signed-in-container" :style="{ '--height': height + 'px' }">
|
<div class="row1">
|
<div class="col 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="col row1-col2">
|
<Card
|
title="治疗模式"
|
:icon="tslImg"
|
background-color="#ffffff"
|
class="mini-card row1-col2-row1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialysis-mode-content">
|
<span class="text-1">{{
|
formatSubstituteMode(pageData.置换方式)
|
}}</span>
|
<span class="text-2">{{ pageData.治疗模式 }}</span>
|
</div>
|
</Card>
|
<Card
|
title="处方脱水量"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row1-col2-row2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box prescription-ehydration-olume">
|
<span
|
>{{ pageData.处方脱水量 }}
|
<template v-if="pageData.处方脱水量">L</template></span
|
>
|
</div>
|
</Card>
|
</div>
|
<div class="col row1-col3">
|
<Card
|
title="置换总量"
|
:icon="zlztImg"
|
background-color="#ffffff"
|
class="mini-card row1-col3-row1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box total-amount-replacement">
|
<span>{{ pageData.置换总量 }}</span>
|
</div>
|
</Card>
|
<Card
|
title="透析时长"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row1-col3-row2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialysis-duration">
|
<span>{{ pageData.透析时长2 }}</span>
|
</div>
|
</Card>
|
</div>
|
<div class="col row1-col4">
|
<Card
|
title="透析器"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="mini-card row1-col4-row1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialyzer">
|
<span>{{ pageData.透析器 }}</span>
|
</div>
|
</Card>
|
<Card
|
title="抗凝剂"
|
:icon="tslImg"
|
background-color="#ffffff"
|
class="mini-card row1-col4-row2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box anticoagulant">
|
<div
|
v-for="(item, index) in pageData.抗凝剂"
|
:key="index"
|
class="list-item"
|
>
|
<div class="list-item-name">
|
{{ item.name }}
|
</div>
|
<div class="list-item-num">
|
<span>首剂：{{ item.首剂 }}{{ item.单位 }}</span>
|
<span
|
>追加/维持：{{
|
item.是否为追加 ? item.追加剂量 : item.维持剂量
|
}}{{ item.单位 }}</span
|
>
|
</div>
|
<div class="list-item-num">
|
<span>总量：{{ item.总量 }}{{ item.单位 }}</span>
|
</div>
|
</div>
|
</div>
|
</Card>
|
</div>
|
<div class="col row1-col5">
|
<Card
|
title="脱水量详情"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row1-col5-row1"
|
header-class-name="mini-header"
|
>
|
<div class="dehydrated-level">
|
<div class="dehydrated-level-item">
|
<span class="item-left"
|
>平均脱水量：{{ pageData.最近平均脱水量 }} L</span
|
>
|
<span class="item-right">(最近9次)</span>
|
</div>
|
<div class="dehydrated-level-item">
|
<div class="item-left">
|
<span>最大脱水量：{{ pageData.最近最大脱水量 }} L</span>
|
<template v-if="pageData.最近最大脱水量透析时长"
|
>/
|
<span class="level-dete">{{
|
formatDuration(pageData.最近最大脱水量透析时长)
|
}}</span>
|
</template>
|
</div>
|
<span class="item-right"
|
>({{ pageData.最近最大脱水量透析日期 }})</span
|
>
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="处方备注"
|
:icon="maibo2Img"
|
background-color="#ffffff"
|
class="mini-card row1-col5-row2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box prescription-remarks">
|
<span>{{ pageData.处方备注 }}</span>
|
</div>
|
</Card>
|
</div>
|
</div>
|
<div class="row2">
|
<div class="col row2-col1">
|
<div class="row2-col1-row1">
|
<Card
|
title="处方血流量"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row2-col1-row1-col1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box blood-flow">
|
<span>{{ pageData.处方血流量 }}</span>
|
</div>
|
</Card>
|
<Card
|
title="处方钠"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row2-col1-row1-col2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box prescription-sodium">
|
<span>{{ pageData.处方钠 }}</span>
|
</div>
|
</Card>
|
</div>
|
<div class="row2-col1-row2">
|
<Card
|
title="透析液流量"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row2-col1-row2-col1"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialysis-fluid-flow-rate">
|
<span>{{ pageData.透析液流量 }}</span>
|
</div>
|
</Card>
|
<Card
|
title="透析液种类"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="mini-card row2-col1-row2-col2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box types-dialysis-fluid">
|
<div>葡萄糖:{{ pageData.葡萄糖 }}</div>
|
<div>钙:{{ pageData.钙 }}</div>
|
</div>
|
</Card>
|
</div>
|
<Card
|
title="治疗状态"
|
:icon="zlztImg"
|
background-color="#ffffff"
|
class="mini-card row2-col1-row3"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box treatment-status">
|
<span>已签到</span>
|
</div>
|
</Card>
|
</div>
|
<div class="col row2-col2">
|
<Card
|
title="参考指标"
|
:icon="tizhongImg"
|
background-color="#ffffff"
|
class="reference-indicators"
|
header-class-name="mihi-header"
|
>
|
<template #right>
|
{{ nowDateText }}
|
</template>
|
<table class="item-box reference-indicators-content">
|
<tbody>
|
<tr>
|
<td>血压<br />超滤量<br /></td>
|
<td
|
ref="bloodPressureRectangularChart"
|
style="overflow: hidden"
|
>
|
<canvas width="1px" height="1px" />
|
</td>
|
</tr>
|
<tr>
|
<td>干体重</td>
|
<td>{{ fourPointBloodPressureMap.干体重 }}kg</td>
|
</tr>
|
<tr>
|
<td>体重增长</td>
|
<td class="flex-td">
|
<span class="sub-text">(透前-上次透后)</span
|
><span class="right-text">{{ weightGain1 }}kg</span>
|
</td>
|
</tr>
|
<tr>
|
<td>体重增长</td>
|
<td class="flex-td">
|
<span class="sub-text">(透前-干体重)</span
|
><span class="text-right">{{ weightGain2 }}kg</span>
|
</td>
|
</tr>
|
<!-- <tr>
|
<td>脱水量</td>
|
<td>{{ pageData.脱水量 }}%</td>
|
</tr> -->
|
<tr>
|
<td>透前体重</td>
|
<td>{{ fourPointBloodPressureMap?.透前体重 }}kg</td>
|
</tr>
|
<tr>
|
<td>透后体重</td>
|
<td>{{ fourPointBloodPressureMap?.透后体重 }}kg</td>
|
</tr>
|
<tr>
|
<td>透析时间</td>
|
<td>{{ fourPointBloodPressureMap?.透析时间 }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</Card>
|
</div>
|
<div class="col row2-col3">
|
<Card
|
title="临时医嘱"
|
:icon="yizhuImg"
|
background-color="#ffffff"
|
class="mini-card"
|
header-class-name="mini-header"
|
>
|
<DoctorAdvice :list="pageData.临时医嘱列表" />
|
</Card>
|
</div>
|
</div>
|
<div class="row3">
|
<BlockBotttom
|
:icon="dingShiImg"
|
text="定时任务"
|
backgroundColor="#20C6B6"
|
@click="() => onScheduledTasksClick()"
|
class="btn"
|
/>
|
<!-- <BlockBotttom
|
:icon="jiaoHaoImg"
|
text="叫号"
|
backgroundColor="#20C6B6"
|
@click="() => onCallBumberClick()"
|
class="btn"
|
/> -->
|
<BlockBotttom
|
:icon="kaiShiImg"
|
text="开始"
|
backgroundColor="#409EFF"
|
@click="() => onStartClick()"
|
class="btn"
|
/>
|
</div>
|
<!-- 定时任务 -->
|
<ScheduledTaskDialog ref="scheduledTaskDialogRef" />
|
<!-- 开始透析组件 -->
|
<StartDialysis ref="startDialysisRef" />
|
</div>
|
</template>
|
<script lang="ts" setup name="SignedIn">
|
import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue";
|
import dayjs from "dayjs";
|
import "dayjs/locale/zh-cn";
|
dayjs.locale("zh-cn");
|
// @ts-ignore
|
import Card from "../components/Card.vue";
|
import DoctorAdvice from "../components/DoctorAdvice/index.vue";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import type { 四点血压图数据 } from "@/store/type/bedsideAuxiliaryScreen.type";
|
import tslImg from "@/img/tsl.png";
|
import dingShiImg from "@/img/dingshi2.png";
|
import jiaoHaoImg from "@/img/jiaoHao.png";
|
import kaiShiImg from "@/img/kaiShi.png";
|
import xinlvImg from "@/img/xinlv.png";
|
import zlmsImg from "@/img/zlms.png";
|
import zlztImg from "@/img/txzt.png";
|
import cljdImg from "@/img/cljd.png";
|
import txqImg from "@/img/txq.png";
|
import tizhongImg from "@/img/tizhong.png";
|
import yizhuImg from "@/img/yizhu.png";
|
import maibo2Img from "@/img/maibo2.png";
|
|
import {
|
getItemName,
|
formatTestColr,
|
formatTestFlag,
|
formatSubstituteMode,
|
} from "@/store/type/bedsideAuxiliaryScreen.type";
|
// @ts-ignore
|
import BlockBotttom from "../components/BlockBotttom.vue";
|
import { ElMessage } from "element-plus";
|
const ScheduledTaskDialog = defineAsyncComponent(
|
() => import("../components/ScheduledTask.vue")
|
);
|
const StartDialysis = defineAsyncComponent(() => import('../components/StartDialysis/index.vue'));
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const bloodPressureRectangularChart = ref<HTMLElement | null>(null);
|
const scheduledTaskDialogRef = ref<any>(null);
|
const startDialysisRef = ref<any>(null);
|
|
const pageData = computed(() => {
|
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
});
|
});
|
|
const fourPointBloodPressureMap = computed(() => {
|
let result = {};
|
if (
|
pageData.value.四点血压图数据 &&
|
pageData.value.四点血压图数据.length > 0
|
) {
|
result = pageData.value.四点血压图数据[0];
|
}
|
return result;
|
});
|
|
const nowDateText = computed(() => {
|
if (fourPointBloodPressureMap.value?.透析日期) {
|
let result = dayjs(fourPointBloodPressureMap.value?.透析日期).format(
|
"YYYY-MM-DD"
|
);
|
result += `(${dayjs(fourPointBloodPressureMap.value?.透析日期).format(
|
"ddd"
|
)})`;
|
return result;
|
}
|
return "";
|
});
|
|
const weightGain1 = computed(() => {
|
if (
|
pageData.value.四点血压图数据 &&
|
pageData.value.四点血压图数据.length > 1
|
) {
|
const value =
|
pageData.value.四点血压图数据[0].透前体重 -
|
pageData.value.四点血压图数据[1].透后体重;
|
const formattedValue = Number.isInteger(value)
|
? value
|
: Number(value.toFixed(1));
|
return formattedValue;
|
}
|
return "";
|
});
|
|
const weightGain2 = computed(() => {
|
const value =
|
fourPointBloodPressureMap.value.透前体重 -
|
fourPointBloodPressureMap.value.干体重;
|
const formattedValue = Number.isInteger(value)
|
? value
|
: Number(value.toFixed(1));
|
return formattedValue;
|
});
|
|
watch(
|
() => pageData.value.四点血压图数据,
|
(newVal) => {
|
genderBloodPressureRectangularChart(newVal);
|
}
|
);
|
|
/** 点击定时任务 */
|
const onScheduledTasksClick = () => {
|
if (
|
!bedsideAuxiliaryScreenStore.deviceCode ||
|
!bedsideAuxiliaryScreenStore.deviceData.deviceCode
|
)
|
return ElMessage.warning("未初始化或正在进行初始化操作中");
|
scheduledTaskDialogRef.value?.openDialog();
|
};
|
|
const onCallBumberClick = () => {
|
ElMessage({
|
message: "功能开发中，敬请期待！",
|
type: "warning",
|
});
|
};
|
|
const onStartClick = () => {
|
if (
|
!bedsideAuxiliaryScreenStore.deviceCode ||
|
!bedsideAuxiliaryScreenStore.deviceData.deviceCode
|
)
|
return ElMessage.warning("未初始化或正在进行初始化操作中");
|
if (!bedsideAuxiliaryScreenStore.userInfo?.token)
|
return ElMessage.warning("请登录");
|
startDialysisRef.value?.openDialog();
|
};
|
|
const genderBloodPressureRectangularChart = (
|
datas: 四点血压图数据[] | null
|
) => {
|
if (!bloodPressureRectangularChart.value) return;
|
|
const benchmarkData = { width: 386, height: 280 };
|
|
// 获取容器宽高（90% 缩放）
|
const containerWidth = bloodPressureRectangularChart.value.offsetWidth * 0.9;
|
const containerHeight =
|
bloodPressureRectangularChart.value.offsetHeight * 0.9;
|
|
// 获取设备像素比
|
const dpr = window.devicePixelRatio || 1;
|
|
// 等比例缩放因子（保持比例）
|
const scale = Math.min(
|
containerWidth / benchmarkData.width,
|
containerHeight / benchmarkData.height
|
);
|
|
// 计算实际画布 CSS 尺寸
|
const cssWidth = benchmarkData.width * scale;
|
const cssHeight = benchmarkData.height * scale;
|
|
// 获取 canvas
|
let canvas = bloodPressureRectangularChart.value.querySelector("canvas");
|
if (!canvas) {
|
canvas = document.createElement("canvas");
|
bloodPressureRectangularChart.value.appendChild(canvas);
|
}
|
|
// 物理像素
|
canvas.width = cssWidth * dpr;
|
canvas.height = cssHeight * dpr;
|
canvas.style.width = `${cssWidth}px`;
|
canvas.style.height = `${cssHeight}px`;
|
|
const ctx = canvas.getContext("2d");
|
if (!ctx) return;
|
|
// 先清除画布（按物理像素）
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// 缩放到实际坐标系（dpr & scale）
|
ctx.save();
|
ctx.scale(dpr * scale, dpr * scale);
|
|
// 基准坐标系：benchmarkData.width × benchmarkData.height
|
const chartWidth = benchmarkData.width;
|
const chartHeight = benchmarkData.height;
|
|
// ========== 绘制基线 ==========
|
const upperLimitY = chartHeight * 0.5; // 200
|
ctx.beginPath();
|
ctx.moveTo(0, upperLimitY);
|
ctx.lineTo(chartWidth, upperLimitY);
|
ctx.strokeStyle = "red";
|
ctx.lineWidth = 1;
|
ctx.stroke();
|
|
const lowerLimitY = chartHeight * (1 - 0.2857); // 140
|
ctx.beginPath();
|
ctx.moveTo(0, lowerLimitY);
|
ctx.lineTo(chartWidth, lowerLimitY);
|
ctx.strokeStyle = "blue";
|
ctx.lineWidth = 1;
|
ctx.stroke();
|
|
// ========== 血压数据 ==========
|
const measurements = [
|
{
|
systolic: datas?.[0]?.血压1_透前收缩压 ?? 0,
|
diastolic: datas?.[0]?.血压1_透前舒张压 ?? 0,
|
},
|
{
|
systolic: datas?.[0]?.血压2_前半程最低收缩压 ?? 0,
|
diastolic: datas?.[0]?.血压2_前半程最低舒张压 ?? 0,
|
},
|
{
|
systolic: datas?.[0]?.血压3_后半程最低收缩压 ?? 0,
|
diastolic: datas?.[0]?.血压3_后半程最低舒张压 ?? 0,
|
},
|
{
|
systolic: datas?.[0]?.血压4_透后收缩压 ?? 0,
|
diastolic: datas?.[0]?.血压4_透后舒张压 ?? 0,
|
},
|
];
|
|
const measurementWidth = chartWidth / (measurements.length + 1);
|
|
// 收缩压线
|
let systolicEnd = { x: 0, y: 0 };
|
ctx.beginPath();
|
ctx.moveTo(measurementWidth, chartHeight - measurements[0].systolic);
|
for (let i = 1; i < measurements.length; i++) {
|
const x = (i + 1) * measurementWidth;
|
ctx.lineTo(x, chartHeight - measurements[i].systolic);
|
if (i === measurements.length - 1) {
|
systolicEnd = { x, y: chartHeight - measurements[i].systolic };
|
}
|
}
|
ctx.strokeStyle = "black";
|
ctx.stroke();
|
|
// 舒张压线
|
let diastolicEnd = { x: 0, y: 0 };
|
ctx.beginPath();
|
ctx.moveTo(measurementWidth, chartHeight - measurements[0].diastolic);
|
for (let i = 1; i < measurements.length; i++) {
|
const x = (i + 1) * measurementWidth;
|
ctx.lineTo(x, chartHeight - measurements[i].diastolic);
|
if (i === measurements.length - 1) {
|
diastolicEnd = { x, y: chartHeight - measurements[i].diastolic };
|
}
|
}
|
ctx.strokeStyle = "black";
|
ctx.stroke();
|
|
// 连接起始 & 结束
|
ctx.beginPath();
|
ctx.moveTo(measurementWidth, chartHeight - measurements[0].systolic);
|
ctx.lineTo(measurementWidth, chartHeight - measurements[0].diastolic);
|
ctx.moveTo(systolicEnd.x, systolicEnd.y);
|
ctx.lineTo(diastolicEnd.x, diastolicEnd.y);
|
ctx.stroke();
|
|
// ========== 文本 ==========
|
const baseFontSize = 24;
|
ctx.font = `${baseFontSize}px Arial`;
|
ctx.textAlign = "center";
|
ctx.textBaseline = "middle";
|
ctx.fillStyle = "black";
|
|
measurements.forEach((m, i) => {
|
const x = (i + 1) * measurementWidth;
|
ctx.fillText(m.systolic.toString(), x, chartHeight - m.systolic - 5);
|
ctx.fillText(m.diastolic.toString(), x, chartHeight - m.diastolic + 10);
|
});
|
|
// ========== 圆柱体 ==========
|
const 计算脱水量刻度 = 100 / (datas?.[0]?.超滤总量 || 1);
|
const cylinderX = chartWidth * 0.9;
|
const cylinderY = chartHeight;
|
const cylinderRadius = 6;
|
const cylinderHeight = 计算脱水量刻度 * (datas?.[0]?.超滤总量 || 0);
|
const 体重增长_透前减干体重 = weightGain2.value;
|
const 透前减干体重减超滤总量差值 =
|
Math.round((体重增长_透前减干体重 - (datas?.[0]?.超滤总量 || 0)) * 10) / 10;
|
|
drawCylinder(
|
ctx,
|
chartHeight,
|
1, // 因为已经 scale 过了
|
cylinderX,
|
cylinderY,
|
cylinderRadius,
|
cylinderHeight,
|
datas?.[0]?.超滤总量?.toString() ?? "0 L",
|
datas?.[0]?.脱水百分比 ?? 0,
|
datas?.[0]?.透后体重减干体重的差值 ?? 0,
|
体重增长_透前减干体重,
|
透前减干体重减超滤总量差值
|
);
|
|
ctx.restore(); // 恢复
|
};
|
|
const drawCylinder = (
|
ctx: CanvasRenderingContext2D,
|
canvasHeight: number,
|
scale: number,
|
x: number,
|
y: number,
|
radius: number,
|
height: number,
|
超滤总量: string, // 超滤总量
|
脱水百分比: number, // 脱水百分比
|
透后体重减干体重的差值: number, // 透后体重减干体重的差值
|
体重增长_透前减干体重: number, // 体重增长_透前减干体重
|
透前减干体重减超滤总量差值: number // 透前减干体重减超滤总量差值
|
) => {
|
ctx.beginPath();
|
ctx.arc(x, y + height, radius, 0, Math.PI * 2);
|
ctx.fillStyle = "#409EFF"; // 填充蓝色
|
ctx.strokeStyle = "#409EFF";
|
if (脱水百分比 > 3) {
|
ctx.fillStyle = "#E6A23C"; // 填充黄色
|
ctx.strokeStyle = "#E6A23C";
|
} else if (脱水百分比 > 5) {
|
ctx.fillStyle = "#F56C6C"; // 填充红色
|
ctx.strokeStyle = "#F56C6C";
|
}
|
ctx.fill();
|
ctx.stroke();
|
|
// 绘制侧面矩形
|
ctx.beginPath();
|
ctx.moveTo(x - radius, y - height);
|
ctx.lineTo(x - radius, y + height);
|
ctx.lineTo(x + radius, y + height);
|
ctx.lineTo(x + radius, y - height);
|
ctx.closePath();
|
ctx.fill();
|
ctx.stroke();
|
|
const cylinderWidth = radius;
|
const textX = x + cylinderWidth + 20; // 文本位置在圆柱体右侧
|
|
const baseFontSize = 16;
|
|
// 添加文本说明
|
|
// 如果超滤总量 与 体重增长_透前减干体重 相等，则显示 "/超滤总量"
|
if (Number(超滤总量) && 体重增长_透前减干体重 === Number(超滤总量)) {
|
ctx.font = `${baseFontSize * scale}px Arial`;
|
ctx.textAlign = "center";
|
ctx.fillStyle = "#07c160";
|
ctx.fillText(
|
"/" + 超滤总量,
|
textX,
|
canvasHeight - height + height * 0.3 + 10
|
);
|
} else {
|
// 透析前-干体重
|
ctx.font = `${baseFontSize * scale}px Arial`;
|
ctx.textAlign = "center";
|
ctx.fillStyle = "#409EFF";
|
ctx.fillText(体重增长_透前减干体重 + "", textX, canvasHeight - height + 10);
|
// 超滤总量
|
ctx.font = `${baseFontSize * scale}px Arial`;
|
ctx.textAlign = "center";
|
ctx.fillStyle = "#07c160";
|
ctx.fillText(超滤总量, textX, canvasHeight - height + height * 0.3 + 10);
|
}
|
|
if (透前减干体重减超滤总量差值 > 0) {
|
ctx.font = `${baseFontSize * scale}px Arial`;
|
ctx.textAlign = "center";
|
ctx.fillStyle = "#000000";
|
ctx.fillText(透前减干体重减超滤总量差值 + "", textX, canvasHeight - 10); // 文本位于圆柱上方一点
|
}
|
};
|
|
function formatDuration(input: string): string {
|
const match = input.match(/(\d+)小时(\d+)分钟/);
|
if (!match) return input; // 如果不符合格式，直接返回原字符串
|
|
const hours = parseInt(match[1], 10);
|
const minutes = parseInt(match[2], 10);
|
|
if (minutes > 0) {
|
return `${hours}h${minutes}min`;
|
}
|
return `${hours}h`;
|
}
|
onMounted(() => {
|
genderBloodPressureRectangularChart(pageData.value.四点血压图数据);
|
});
|
</script>
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
.signed-in-container {
|
position: relative;
|
height: var(--height);
|
overflow: hidden;
|
.row1 {
|
height: 38.38%;
|
overflow: hidden;
|
margin-bottom: 1.07%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.col {
|
height: 100%;
|
border-radius: 2px;
|
overflow: hidden;
|
&.row1-col1 {
|
flex: 0 0 14.86%;
|
}
|
&.row1-col2 {
|
flex: 0 0 14.57%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-col2-row1 {
|
flex: 0 0 40%;
|
.dialysis-mode-content {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.text-1 {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 6px;
|
color: #c9a589;
|
line-height: 8px;
|
text-align: center;
|
font-style: normal;
|
}
|
.text-2 {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #d58e56;
|
line-height: 12px;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
}
|
.row1-col2-row2 {
|
flex: 0 0 60%;
|
.prescription-ehydration-olume {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 11px;
|
color: #e87d00;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
}
|
&.row1-col3 {
|
flex: 0 0 14.57%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-col3-row1 {
|
flex: 0 0 40%;
|
.total-amount-replacement {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #d58e56;
|
line-height: 13px;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
.row1-col3-row2 {
|
flex: 0 0 60%;
|
.dialysis-duration {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 8px;
|
color: #333333;
|
line-height: 11px;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
}
|
&.row1-col4 {
|
flex: 0 0 25.71%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-col4-row1 {
|
flex: 0 0 40%;
|
.dialyzer {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #333333;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
.row1-col4-row2 {
|
flex: 0 0 60%;
|
.anticoagulant {
|
.list-item {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4.5px;
|
color: #333333;
|
line-height: 6px;
|
text-align: left;
|
font-style: normal;
|
.list-item-name {
|
// margin-bottom: 2px;
|
}
|
}
|
}
|
}
|
}
|
&.row1-col5 {
|
flex: 0 0 25.71%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-col5-row1 {
|
flex: 0 0 40%;
|
.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;
|
}
|
}
|
}
|
}
|
.row1-col5-row2 {
|
flex: 0 0 60%;
|
.prescription-remarks {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 4px;
|
color: #9a1717;
|
line-height: 6px;
|
text-align: left;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
}
|
.row2 {
|
height: 44.56%;
|
overflow: hidden;
|
margin-bottom: 1.07%;
|
display: flex;
|
justify-content: space-between;
|
.col {
|
height: 100%;
|
border-radius: 2px;
|
overflow: hidden;
|
&.row2-col1 {
|
flex: 0 0 38%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.row2-col1-row1 {
|
height: 34%;
|
display: flex;
|
gap: 4px;
|
.row2-col1-row1-col1 {
|
flex: 1;
|
height: 100%;
|
.blood-flow {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #333333;
|
line-height: 12px;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
.row2-col1-row1-col2 {
|
flex: 1;
|
height: 100%;
|
.prescription-sodium {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #333333;
|
line-height: 12px;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
}
|
.row2-col1-row2 {
|
height: 34%;
|
display: flex;
|
gap: 4px;
|
.row2-col1-row2-col1 {
|
flex: 1;
|
height: 100%;
|
.dialysis-fluid-flow-rate {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #333333;
|
line-height: 12px;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
.row2-col1-row2-col2 {
|
flex: 1;
|
height: 100%;
|
.types-dialysis-fluid {
|
display: flex;
|
flex-direction: column;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4.2px;
|
color: #333333;
|
font-style: normal;
|
}
|
}
|
}
|
.row2-col1-row3 {
|
height: 22.3%;
|
flex-direction: row;
|
.treatment-status {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 9px;
|
color: #70a3dd;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
}
|
&.row2-col2 {
|
flex: 0 0 18.2%;
|
}
|
&.row2-col3 {
|
flex: 0 0 41.4%;
|
}
|
}
|
}
|
.row3 {
|
height: 11.92%;
|
overflow: hidden;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding-right: 13px;
|
border-radius: 2px;
|
.btn {
|
margin-left: 9px;
|
}
|
}
|
:deep(.mihi-header) {
|
flex: 0 0 4px;
|
.card-icon {
|
width: 4px;
|
height: 4px;
|
}
|
.card-title {
|
font-size: 4px;
|
}
|
}
|
}
|
.item-box {
|
height: 100%;
|
overflow-y: auto !important;
|
}
|
:deep(.mini-header) {
|
flex: 0 0 4px !important;
|
.card-icon {
|
width: 4px !important;
|
height: 4px !important;
|
}
|
.card-title {
|
font-size: 4px !important;
|
}
|
}
|
</style>
|
// <style lang="less">
|
// .reference-indicators {
|
// padding: 0 !important;
|
// .card-header {
|
// padding: 3px 4px;
|
// }
|
// }
|
//
|
</style>
|
<style lang="less">
|
.reference-indicators {
|
padding: 0 !important;
|
.card-header {
|
padding: 3px 4px;
|
margin-bottom: 0 !important;
|
}
|
.reference-indicators-content {
|
width: 100%;
|
border-collapse: collapse;
|
td {
|
border: 1px solid #dfdfdf; /* 黑色边框 */
|
border-left: none;
|
text-align: center;
|
vertical-align: middle;
|
}
|
& td:first-child {
|
width: 36%;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 3px;
|
color: #333333;
|
text-align: center;
|
font-style: normal;
|
}
|
& td:last-child {
|
position: relative;
|
width: 64%;
|
border-right: none;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 3.6px;
|
color: #333333;
|
text-align: center;
|
font-style: normal;
|
&.flex-td {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
width: 100%;
|
}
|
.sub-text {
|
font-size: 3px;
|
color: #666;
|
margin-right: 1.2px;
|
white-space: nowrap;
|
}
|
// .text-right {
|
// position: absolute;
|
// right: 0;
|
// top: 50%;
|
// transform: translateY(-50%);
|
// font-size: 3px;
|
// color: #666;
|
// }
|
}
|
& tr:not(:first-child) td {
|
height: 6px;
|
}
|
}
|
}
|
</style>
|
