ID1625-修改文本

zhangchen

2025-07-26 28f8508d2e63bebc9c3c332c2918ac6b82d69e4a

 src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue

@@ -1,326 +1,346 @@
<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="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-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.bloodFlow }}</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.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.currentDehydrationVolume
                }}({{ 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
          v-if="!whetherDialysisHasBeenEnded"
          :icon="kaiShiImg"
          text="结束透析"
          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, watch } from "vue";
import {
  computed,
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  defineAsyncComponent,
} from "vue";
import * as echarts from "echarts";
import dayjs from "dayjs";

@@ -331,6 +351,9 @@
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,
@@ -365,6 +388,8 @@

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const scheduledTaskDialogRef = ref<any>(null);

// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);
// 血压脉搏趋势图的
@@ -394,9 +419,13 @@
  );
});

watch(() => pageData.value.ktvList, (newVal) => {
watch(
  () => pageData.value.ktvList,
  (newVal) => {
    generateKtvListEchart(newVal);
}, { deep: true });
  },
  { deep: true }
);

watch(
  () => pageData.value.monitoringRecord,
@@ -404,6 +433,14 @@
    generatBloodPressureAndPulseEchart(newVal);
  },
  { deep: true }
);

watch(
  () => props.height,
  () => {
    generateKtvListEchart(pageData.value.ktvList);
    generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
  }
);

/** 生成ktv趋势图 */
@@ -450,7 +487,7 @@
          color: "#70CAAE",
        },
        itemStyle: {
          color: "#70CAAE",
          color: (params: any) => getColor(params.value),
        },
      },
    ],
@@ -460,6 +497,12 @@
  };

  chart.setOption(option, true); // 第二个参数为 true 表示全量更新
};

const getColor = (val: number) => {
  if (val < 1.2) return "#FE0201"; // 红色
  if (val <= 1.6) return "#70CAAE"; // 绿色
  return "#FE6500"; // 橙色
};

/** 生成血压脉搏趋势图 */
@@ -487,9 +530,9 @@

  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 }, // 脉搏
      { 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 },
    ],
    tooltip: {
      trigger: "axis",
@@ -504,6 +547,7 @@
        axisLabel: { show: false },
        splitLine: { show: false },
        gridIndex: 0,
        show: false,
      },
      {
        type: "category",
@@ -514,6 +558,7 @@
        axisLabel: { show: false },
        splitLine: { show: false },
        gridIndex: 1,
        show: false,
      },
      {
        type: "category",
@@ -524,6 +569,7 @@
        axisLabel: { show: true }, // 最下面一层显示时间轴
        splitLine: { show: false },
        gridIndex: 2,
        show: false,
      },
    ],
    yAxis: [
@@ -534,9 +580,9 @@
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 80,
        max: 180,
        interval: 20,
        min: 0,
        max: 300,
        interval: 2,
        gridIndex: 0,
      },
      {
@@ -546,9 +592,9 @@
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 40,
        max: 120,
        interval: 20,
        min: 0,
        max: 300,
        interval: 2,
        gridIndex: 1,
      },
      {
@@ -558,9 +604,9 @@
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 40,
        max: 140,
        interval: 20,
        min: 0,
        max: 300,
        interval: 2,
        gridIndex: 2,
      },
    ],
@@ -623,7 +669,14 @@
};

/** 定时任务 */
const onScheduledTasksClick = () => {};
const onScheduledTasksClick = () => {
  if (
    !bedsideAuxiliaryScreenStore.deviceCode ||
    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
  )
    return ElMessage.warning("未初始化或正在进行初始化操作中");
  scheduledTaskDialogRef.value?.openDialog();
};

/** 叫号 */
const onCallBumberClick = () => {