| | |
| | | </div> |
| | | </Card> |
| | | <Card |
| | | title="KTV监测" |
| | | title="Kt/V监测" |
| | | :icon="xinLv2Img" |
| | | background-color="#ffffff" |
| | | class="mini-card left-row3-col2" |
| | |
| | | </div> |
| | | </Card> |
| | | <Card |
| | | title="KTV趋势图" |
| | | title="Kt/V趋势图" |
| | | :icon="xinLv2Img" |
| | | background-color="#ffffff" |
| | | class="mini-card ktv-card left-row3-col3" |
| | |
| | | </div> |
| | | <div class="left-row4"> |
| | | <Card |
| | | title="血流量" |
| | | 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> |
| | | <span class="text">{{ pageData.venousPressure2 }}/{{ pageData.transmembranePressure2 }}</span> |
| | | </div> |
| | | </Card> |
| | | <Card |
| | | title="透析液流量" |
| | | 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> |
| | | <span class="text">{{ pageData.bloodFlow }}/{{ pageData.dialysisFluidFlowRate }}</span> |
| | | </div> |
| | | </Card> |
| | | </div> |
| | |
| | | header-class-name="mini-header" |
| | | > |
| | | <div class="progress-box"> |
| | | <div class="item-num"> |
| | | <div class="item-num item-num-2"> |
| | | {{ pageData.currentDehydrationVolume }}/{{ |
| | | pageData.prescriptionDehydrationVolume |
| | | }}({{ pageData.currentUltrafiltrationRate }}) |
| | |
| | | backgroundColor="#D6DEF1" |
| | | borderRadius="50%" |
| | | /> |
| | | <div class="cftsl-text">处方脱水量:<span class="cftsl-num">{{ pageData.处方脱水量 }}L</span></div> |
| | | </div> |
| | | </Card> |
| | | </div> |
| | |
| | | @click="() => onScheduledTasksClick()" |
| | | class="btn" |
| | | /> |
| | | <BlockBotttom |
| | | <!-- <BlockBotttom |
| | | :icon="jiaoHaoImg" |
| | | text="叫号" |
| | | backgroundColor="#20C6B6" |
| | | @click="() => onCallBumberClick()" |
| | | class="btn" |
| | | /> |
| | | <BlockBotttom |
| | | /> --> |
| | | <!-- <BlockBotttom |
| | | :icon="addImg" |
| | | text="添加记录" |
| | | backgroundColor="#409EFF" |
| | | @click="() => onAddRecordClick()" |
| | | class="btn" |
| | | /> |
| | | /> --> |
| | | <BlockBotttom |
| | | v-if="!whetherDialysisHasBeenEnded" |
| | | :icon="kaiShiImg" |
| | |
| | | </div> |
| | | <!-- 定时任务 --> |
| | | <ScheduledTaskDialog ref="scheduledTaskDialogRef" /> |
| | | <!-- 结束透析组件 --> |
| | | <EndDialysis ref="endDialysisRef" /> |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup name="UnderTreatment"> |
| | |
| | | const ScheduledTaskDialog = defineAsyncComponent( |
| | | () => import("../components/ScheduledTask.vue") |
| | | ); |
| | | const EndDialysis = defineAsyncComponent(() => import("../components/EndDialysis/index.vue")); |
| | | import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen"; |
| | | import { |
| | | formatSubstituteMode, |
| | |
| | | const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore(); |
| | | |
| | | const scheduledTaskDialogRef = ref<any>(null); |
| | | const endDialysisRef = ref<any>(null); |
| | | |
| | | // ktv趋势图的 |
| | | const ktvListEchartRef = ref<HTMLElement | null>(null); |
| | |
| | | +bedsideAuxiliaryScreenStore.deviceData.treatmentStatus >= EMedStatus.END |
| | | ); |
| | | }); |
| | | |
| | | |
| | | |
| | | watch( |
| | | () => pageData.value.ktvList, |
| | |
| | | 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[] |
| | |
| | | const telescopicPressureDatas: number[] = []; // 伸缩压 |
| | | const diastolicPressureDatas: number[] = []; // 舒张压 |
| | | const pulseDatas: number[] = []; // 脉搏 |
| | | const xAxisData: string[] = []; // 横坐标 |
| | | 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(String(index + 1)); |
| | | 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 = { |
| | | grid: [ |
| | | { top: "5%", height: "28%", left: 40, right: 20, containLabel: true }, |
| | | { top: "35%", height: "28%", left: 40, right: 20, containLabel: true }, |
| | | { top: "65%", height: "28%", left: 40, right: 20, containLabel: true }, |
| | | ], |
| | | backgroundColor: "#ffffff", |
| | | tooltip: { |
| | | trigger: "axis", |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: "category", |
| | | data: xAxisData, |
| | | boundaryGap: false, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | gridIndex: 0, |
| | | 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, |
| | | }, |
| | | { |
| | | 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 }, |
| | | min: 0, |
| | | max: 300, |
| | | interval: 2, |
| | | gridIndex: 0, |
| | | }, |
| | | { |
| | | 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", |
| | | symbol: "triangle", |
| | | symbolSize: 6, |
| | | lineStyle: { width: 2, color: "#FE0201" }, |
| | | itemStyle: { color: "#FE0201" }, |
| | | label: { color: "#FE0201" }, |
| | | 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: "舒张压", |
| | | xAxisIndex: 1, |
| | | yAxisIndex: 1, |
| | | data: wrapData(diastolicPressureDatas), |
| | | type: "line", |
| | | smooth: false, |
| | | symbol: "circle", |
| | | symbol: "triangle", |
| | | symbolSize: 6, |
| | | lineStyle: { width: 2, color: "#70A3DD" }, |
| | | itemStyle: { color: "#70A3DD" }, |
| | | label: { color: "#70A3DD" }, |
| | | 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: "脉搏", |
| | | 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" }, |
| | | data: pulseDatas, |
| | | lineStyle: { |
| | | color: "#D940FF", |
| | | width: 2, // 设置线条宽度为5 |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 2, |
| | | borderColor: "#D940FF", |
| | | color: "#D940FF", |
| | | }, |
| | | markPoint: { |
| | | data: markPointPulseDatas, |
| | | }, |
| | | }, |
| | | ], |
| | | }; |
| | |
| | | |
| | | /** 结束透析 */ |
| | | const onEndClick = () => { |
| | | ElMessage({ |
| | | message: "功能开发中,敬请期待!", |
| | | type: "warning", |
| | | }); |
| | | if ( |
| | | !bedsideAuxiliaryScreenStore.deviceCode || |
| | | !bedsideAuxiliaryScreenStore.deviceData.deviceCode |
| | | ) |
| | | return ElMessage.warning("未初始化或正在进行初始化操作中"); |
| | | if (!bedsideAuxiliaryScreenStore.userInfo?.token) |
| | | return ElMessage.warning("请登录"); |
| | | endDialysisRef.value?.openDialog(); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | |
| | | color: #333333; |
| | | text-align: left; |
| | | font-style: normal; |
| | | &.item-num-2 { |
| | | margin-bottom: 2px; |
| | | } |
| | | } |
| | | .cftsl-text { |
| | | font-family: PingFangSC, PingFang SC; |
| | | font-weight: 600; |
| | | font-size: 5px; |
| | | color: #333333; |
| | | text-align: left; |
| | | font-style: normal; |
| | | .cftsl-num { |
| | | color: #a91a1a; |
| | | } |
| | | } |
| | | } |
| | | |