| | |
| | | <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="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 |
| | | 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="zlmsImg" |
| | | title="血压监测" |
| | | :icon="xinLv2Img" |
| | | background-color="#ffffff" |
| | | class="mini-card left-row1-col2-item-row2" |
| | | class="mini-card left-row2-col2" |
| | | header-class-name="mini-header" |
| | | > |
| | | <div class="prescription-remarks"> |
| | | {{ pageData.prescriptionRemarks }} |
| | | <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-row1-col3"> |
| | | <div class="left-row3"> |
| | | <Card |
| | | title="透析器" |
| | | 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-row1-col3-row1" |
| | | class="mini-card left-row4-col" |
| | | header-class-name="mini-header" |
| | | > |
| | | <div class="item-box prescription-ehydration-olume"> |
| | | <span class="text">{{ pageData.dialyzer }}</span> |
| | | <div class="item-box current-lood0emperature"> |
| | | <span class="text">{{ pageData.venousPressure2 }}/{{ pageData.transmembranePressure2 }}</span> |
| | | </div> |
| | | </Card> |
| | | <Card |
| | | title="异常指标" |
| | | :icon="xinlvImg" |
| | | title="血流量/透析液流量" |
| | | :icon="txqImg" |
| | | background-color="#ffffff" |
| | | class="mini-card left-row1-col3-row2" |
| | | class="mini-card left-row4-col" |
| | | 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 class="item-box current-lood0emperature"> |
| | | <span class="text">{{ pageData.bloodFlow }}/{{ pageData.dialysisFluidFlowRate }}</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="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 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 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> |
| | | <div class="dehydrated-level-item"> |
| | | <div class="item-left"> |
| | | <span |
| | | >最大脱水量:{{ pageData.maximumDehydrationCapacity }} L</span |
| | | </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 |
| | | > |
| | | <template v-if="pageData.maximumDehydrationDuration" |
| | | >/ |
| | | <span class="level-dete">{{ |
| | | pageData.maximumDehydrationDuration |
| | | }}</span> |
| | | </template> |
| | | <span class="item-right">(最近9次)</span> |
| | | </div> |
| | | <span class="item-right" |
| | | >({{ pageData.maximumDehydrationCapacityDate }})</span |
| | | > |
| | | <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> |
| | | </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 }} |
| | | </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> |
| | | <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 }}) |
| | | </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> |
| | | <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 |
| | | :icon="kaiShiImg" |
| | | text="j结束透析" |
| | | backgroundColor="#E6A23C" |
| | | @click="() => onEndClick()" |
| | | class="btn" |
| | | /> |
| | | </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 } from "vue"; |
| | | import { |
| | | computed, |
| | | ref, |
| | | onMounted, |
| | | onBeforeUnmount, |
| | | watch, |
| | | defineAsyncComponent, |
| | | } from "vue"; |
| | | import * as echarts from "echarts"; |
| | | import dayjs from "dayjs"; |
| | | |
| | |
| | | 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, |
| | |
| | | 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); |
| | |
| | | return "未知状态"; |
| | | }); |
| | | |
| | | // const; |
| | | /** 是否已结束透析 */ |
| | | 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[]) => { |
| | |
| | | color: "#70CAAE", |
| | | }, |
| | | itemStyle: { |
| | | color: "#70CAAE", |
| | | color: (params: any) => getColor(params.value), |
| | | }, |
| | | }, |
| | | ], |
| | |
| | | }; |
| | | |
| | | 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 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: "20%", height: "27%", left: 30, right: 20 }, // 伸缩压 |
| | | { top: "45%", height: "27%", left: 30, right: 20 }, // 舒张压 |
| | | { top: "67%", height: "27%", left: 30, right: 20 }, // 脉搏 |
| | | ], |
| | | 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 轴刻度 |
| | | }, |
| | | { |
| | | 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", |
| | | }, |
| | | yAxis: { |
| | | show: false, |
| | | name: "", |
| | | type: "value", |
| | | min: 40, |
| | | max: 220, |
| | | interval: 10, // 指定刻度间隔, |
| | | splitLine: { |
| | | show: false, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | min: 80, |
| | | max: 180, |
| | | interval: 20, |
| | | gridIndex: 0, |
| | | }, |
| | | { |
| | | type: "value", |
| | | show: false, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | min: 40, |
| | | max: 120, |
| | | interval: 20, |
| | | gridIndex: 1, |
| | | }, |
| | | { |
| | | type: "value", |
| | | show: false, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { show: false }, |
| | | splitLine: { show: false }, |
| | | min: 40, |
| | | max: 140, |
| | | interval: 20, |
| | | 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 onScheduledTasksClick = () => {}; |
| | | const onScheduledTasksClick = () => { |
| | | if ( |
| | | !bedsideAuxiliaryScreenStore.deviceCode || |
| | | !bedsideAuxiliaryScreenStore.deviceData.deviceCode |
| | | ) |
| | | return ElMessage.warning("未初始化或正在进行初始化操作中"); |
| | | scheduledTaskDialogRef.value?.openDialog(); |
| | | }; |
| | | |
| | | /** 叫号 */ |
| | | const onCallBumberClick = () => {}; |
| | | const onCallBumberClick = () => { |
| | | ElMessage({ |
| | | message: "功能开发中,敬请期待!", |
| | | type: "warning", |
| | | }); |
| | | }; |
| | | |
| | | /** 添加记录 */ |
| | | const onAddRecordClick = () => {}; |
| | | const onAddRecordClick = () => { |
| | | ElMessage({ |
| | | message: "功能开发中,敬请期待!", |
| | | type: "warning", |
| | | }); |
| | | }; |
| | | |
| | | /** 结束透析 */ |
| | | const onEndClick = () => {}; |
| | | const onEndClick = () => { |
| | | ElMessage({ |
| | | message: "功能开发中,敬请期待!", |
| | | type: "warning", |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // 生成ktv趋势图 |