Merge branch 'ID2130-未签到页面优化' into test

zhangchen

2025-09-24 3b2e941a83ad49d3167df864a5a06a81ef944470

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

@@ -133,7 +133,7 @@
            </div>
          </Card>
          <Card
            title="KTV监测"
            title="Kt/V监测"
            :icon="xinLv2Img"
            background-color="#ffffff"
            class="mini-card left-row3-col2"
@@ -144,7 +144,7 @@
            </div>
          </Card>
          <Card
            title="KTV趋势图"
            title="Kt/V趋势图"
            :icon="xinLv2Img"
            background-color="#ffffff"
            class="mini-card ktv-card left-row3-col3"
@@ -160,25 +160,25 @@
        </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>
@@ -241,7 +241,7 @@
            header-class-name="mini-header"
          >
            <div class="progress-box">
              <div class="item-num">
              <div class="item-num item-num-2">
                {{ jgTime4(pageData.dialysisDuration) }}/{{
                  pageData.prescriptionDialysisDurationHour
                }}:{{ pageData.prescriptionDialysisDurationMin }}
@@ -256,6 +256,7 @@
                backgroundColor="#D6DEF1"
                borderRadius="50%"
              />
              <div class="cftsl-text">当前时间:<span class="">{{ time }}</span></div>
            </div>
          </Card>
          <Card
@@ -266,7 +267,7 @@
            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 }})
@@ -281,6 +282,7 @@
                backgroundColor="#D6DEF1"
                borderRadius="50%"
              />
              <div class="cftsl-text">处方脱水量：<span class="cftsl-num">{{ pageData.处方脱水量 }}L</span></div>
            </div>
          </Card>
        </div>
@@ -303,20 +305,20 @@
            @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"
@@ -330,6 +332,8 @@
    </div>
    <!-- 定时任务 -->
    <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
    <!-- 结束透析组件 -->
    <EndDialysis ref="endDialysisRef" />
  </div>
</template>
<script lang="ts" setup name="UnderTreatment">
@@ -354,6 +358,7 @@
const ScheduledTaskDialog = defineAsyncComponent(
  () => import("../components/ScheduledTask.vue")
);
const EndDialysis = defineAsyncComponent(() => import("../components/EndDialysis/index.vue"));
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import {
  formatSubstituteMode,
@@ -389,11 +394,15 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const scheduledTaskDialogRef = ref<any>(null);
const endDialysisRef = ref<any>(null);

// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);
// 血压脉搏趋势图的
const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);

const time = ref(dayjs().format("HH:mm"))
let timer: number | undefined

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
@@ -418,6 +427,8 @@
    +bedsideAuxiliaryScreenStore.deviceData.treatmentStatus >= EMedStatus.END
  );
});



watch(
  () => pageData.value.ktvList,
@@ -505,6 +516,26 @@
  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[]
@@ -519,136 +550,204 @@
  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,
        },
      },
    ],
  };
@@ -696,19 +795,31 @@

/** 结束透析 */
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(() => {
  // 生成ktv趋势图
  generateKtvListEchart(pageData.value.ktvList);
  generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
  // 初始化
  time.value = dayjs().format("HH:mm")

  // 每分钟刷新一次
  timer = window.setInterval(() => {
    time.value = dayjs().format("HH:mm")
  }, 1000 * 1)
});

onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
  // 销毁图表实例
  if (ktvListEchartRef.value) {
    const chart = echarts.getInstanceByDom(ktvListEchartRef.value);
@@ -891,7 +1002,7 @@
    }
  }

  .progress-box {
.progress-box {
    display: flex;
    align-items: center;
    flex-direction: column;
@@ -903,6 +1014,20 @@
      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;
      }
    }
  }