ID1825-治疗中暂存

zhangchen

2025-07-24 9135933a27832ec2234b5e074d88192fb4bf52d1

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

@@ -12,21 +12,318 @@
            </template>
          </el-image>
        </div>
        <div class="left-row1-col2"></div>
        <div class="left-row1-col3"></div>
        <div class="left-row1-col2">
          <Card
            title="治疗模式"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="mini-card left-row1-col2-row1"
            header-class-name="mihi-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="mihi-header"
          >
            <div class="prescription-remarks">
              {{ pageData.prescriptionRemarks }}
            </div>
          </Card>
        </div>
        <div class="left-row1-col3">
          <Card
            title="透析器"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="mini-card left-row1-col3-row1"
            header-class-name="mihi-header"
          >
            <div class="item-box prescription-ehydration-olume">
              <span class="text">{{ pageData.dialyzer }}</span>
            </div>
          </Card>
          <Card
            title="异常指标"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="mini-card left-row1-col3-row2"
            header-class-name="mihi-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"></div>
      <div class="left-row3"></div>
      <div class="left-row4"></div>
      <div class="left-row2">
        <Card
          title="血温监测"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row2-col1"
          header-class-name="mihi-header"
        >
          <div class="item-box current-lood0emperature">
            <span class="text">{{ pageData.currentBloodTemperature }}</span>
          </div>
        </Card>
        <Card
          title="血压监测"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row2-col2"
          header-class-name="mihi-header"
        >
          <div class="item-box venous-pressure">
            <span class="text"
              >{{ pageData.venousPressure }}/{{
                pageData.transmembranePressure
              }}</span
            >
          </div>
        </Card>
        <Card
          title="血压脉搏趋势图"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row2-col3"
          header-class-name="mihi-header"
        >
          <div class=""></div>
        </Card>
      </div>
      <div class="left-row3">
        <Card
          title="血容量监测"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row3-col1"
          header-class-name="mihi-header"
        >
          <div class="item-box current-lood0emperature">
            <span class="text">{{ pageData.bloodVolumeMonitoring }}</span>
          </div>
        </Card>
        <Card
          title="KTV监测"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row3-col2"
          header-class-name="mihi-header"
        >
          <div class="item-box venous-pressure">
            <span class="text">{{ pageData.ktv }}</span>
          </div>
        </Card>
        <Card
          title="KTV趋势图"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card ktv-card left-row3-col3"
          header-class-name="mihi-header"
        >
          <div style="height: 100%">
            <div ref="ktvListEchartRef" style="width: 100%; height: 100%"></div>
          </div>
        </Card>
      </div>
      <div class="left-row4">
        <Card
          title="血流量"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row4-col"
          header-class-name="mihi-header"
        >
          <div class="item-box current-lood0emperature">
            <span class="text">{{ pageData.bloodFlow }}</span>
          </div>
        </Card>
        <Card
          title="透析液流量"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card left-row4-col"
          header-class-name="mihi-header"
        >
          <div class="item-box current-lood0emperature">
            <span class="text">{{ pageData.dialysisFluidFlowRate }}</span>
          </div>
        </Card>
      </div>
    </div>
    <div class="right-box"></div>
    <div class="right-box">
      <div class="right-box-row1">
        <Card
          title="治疗状态"
          :icon="zlmsImg"
          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="zlmsImg"
          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>
            <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>
        </Card>
      </div>
      <div class="right-box-row2">
        <Card
          title="时间进度"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card right-box-row2-item"
          header-class-name="mini-header"
        >
          <div class="item-box">
            <div class="item-num"></div>
          </div>
        </Card>
        <Card
          title="超滤进度"
          :icon="zlmsImg"
          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.currentDehydrationVolume) *
                100
              "
              color="#70CAAE"
              backgroundColor="#D6DEF1"
              borderRadius="50%"
            />
          </div>
        </Card>
      </div>
      <div class="right-box-row3">
        <Card
          title="临时医嘱"
          :icon="zlmsImg"
          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"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="UnderTreatment">
import { computed } from "vue";
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
// @ts-ignore
import Card from "../components/Card.vue";
// @ts-ignore
import ProgressBar from "../components/ProgressBar.vue";
import DoctorAdvice from "../components/DoctorAdvice/index.vue";
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import {
  formatSubstituteMode,
  formatTestColr,
  getItemName,
  formatTestFlag,
  EMedStatus,
} from "@/store/type/bedsideAuxiliaryScreen.type";
import type { KtvItem } from "@/store/type/bedsideAuxiliaryScreen.type";
import { formatDate } from "@/utils/formatTime";
import zlmsImg from "@/img/zlms.png";
import dingShiImg from "@/img/dingshi2.png";
import jiaoHaoImg from "@/img/jiaoHao.png";
import kaiShiImg from "@/img/kaiShi.png";
import addImg from "@/img/add.png";

interface Props {
  height: number;
@@ -35,10 +332,109 @@

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
    patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
  });
});

const treatmentStatusText = computed(() => {
  const status = bedsideAuxiliaryScreenStore.deviceData.treatmentStatus;
  if (status === EMedStatus.NOT_CHECKED_IN) return "未签到";
  if (status === EMedStatus.SIGNED_IN) return "已签到";
  if (status === EMedStatus.DURING_DIALYSIS) return "透析中";
  if (status === EMedStatus.END) return "已结束";
  if (status === EMedStatus.CHECKED) return "已检查";
  if (status === EMedStatus.ARCHIVED) return "已归档";
  return "未知状态";
});

// const;

/** 生成ktv趋势图 */
const generateKtvListEchart = (ktvList: KtvItem[]) => {
  if (!ktvListEchartRef.value) return;
  if (!ktvList || ktvList.length === 0) return;

  // 检查是否已经有实例
  let chart = echarts.getInstanceByDom(ktvListEchartRef.value);
  if (!chart) {
    chart = echarts.init(ktvListEchartRef.value);
  }

  const option = {
    xAxis: {
      type: "category",
      data: ktvList.map((item) => formatDate(new Date(item.时间), "HH:mm")),
      axisLine: { show: true },
      axisTick: { show: true },
      // axisLabel: {
      //   margin: 5, // 控制文字与轴的距离，尽量小
      //   fontSize: 12,
      // },
    },
    yAxis: {
      type: "value",
      axisLine: { show: true },
      axisTick: { show: true },
      // axisLabel: {
      //   margin: 5,
      //   fontSize: 12,
      // },
      splitLine: { show: true },
    },
    series: [
      {
        data: ktvList.map((item) => item.ktv),
        type: "line",
        smooth: false,
        symbol: "circle",
        symbolSize: 6,
        lineStyle: {
          width: 2,
          color: "#70CAAE",
        },
        itemStyle: {
          color: "#70CAAE",
        },
      },
    ],
    tooltip: {
      trigger: "axis",
    },
  };

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

/** 定时任务 */
const onScheduledTasksClick = () => {};

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

/** 添加记录 */
const onAddRecordClick = () => {};

/** 结束透析 */
const onEndClick = () => {};

onMounted(() => {
  // 生成ktv趋势图
  generateKtvListEchart(pageData.value.ktvList);
});

onBeforeUnmount(() => {
  // 销毁图表实例
  if (ktvListEchartRef.value) {
    const chart = echarts.getInstanceByDom(ktvListEchartRef.value);
    if (chart) {
      chart.dispose();
    }
  }
});
</script>

@@ -55,48 +451,287 @@
  padding-bottom: 2px;
  overflow: hidden;
  .left-box {
    flex: 0 0 58.25%;
    height: calc(100% - 12px);
    width: 58.25%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    div {
      width: 100%;
    }

    .left-row1 {
      flex: 0 0 41.99%;
      // width: calc(100% - 8px);
      gap: 4px;
      width: 100%;
      height: 38.97%;
      display: flex;
      background: blue;
      gap: 4px;

      .left-row1-col1,
      .left-row1-col2,
      .left-row1-col3 {
        height: 100%;
      }

      .left-row1-col1 {
        flex: 0 0 26.94%;
        width: 26.94%;
        border-radius: 2px;
        overflow: hidden;
      }
      .left-row1-col2 {
        flex: 0 0 26.42%;
        width: 26.43%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        .left-row1-col2-row1 {
          height: 36.62%;
        }

        .left-row1-col2-item-row2 {
          height: 63.38%;
        }
      }
      .left-row1-col3 {
        flex: 0 0 46.63%;
        width: 46.63%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        .left-row1-col3-row1 {
          height: 36.62%;
        }
        .left-row1-col3-row2 {
          height: 63.38%;
          .dialysis-mode-content {
            height: 100%;
            .abnormal-indicator {
              display: inline-block;
              margin-right: 6px;
              margin-bottom: 4px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 5px;
              line-height: 6px;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
    }
    .left-row2 {
      flex: 0 0 22.65%;
      background: yellow;
      width: 100%;
      height: 21.03%;
      display: flex;
      gap: 4px;
      .left-row2-col1 {
        width: 26.94%;
      }
      .left-row2-col2 {
        width: 26.43%;
      }
      .left-row2-col3 {
        width: 46.62%;
      }
    }
    .left-row3 {
      flex: 0 0 22.65%;
      background: orange;
      width: 100%;
      height: 21.03%;
      display: flex;
      gap: 4px;
      .left-row3-col1 {
        width: 26.94%;
      }
      .left-row3-col2 {
        width: 26.43%;
      }
      .left-row3-col3 {
        width: 46.62%;
      }
    }
    .left-row4 {
      flex: 0 0 12.71%;
      background: purple;
      width: 100%;
      height: 11.79%;
      display: flex;
      gap: 4px;
      .left-row4-col {
        width: 50%;
      }
    }
  }
  .right-box {
    flex: 0 0 41.75%;
    width: 41.75%;
    height: 100%;
    background: green;
    display: flex;
    flex-direction: column;
    gap: 4px;
    .right-box-row1,
    .right-box-row2,
    .right-box-row3 .right-box-row4 {
      width: 100%;
    }
    .right-box-row1 {
      height: 14.44%;
      display: flex;
      gap: 4px;
      .right-box-row1-col1 {
        width: 36.17%;
      }
      .right-box-row1-col2 {
        width: 63.83%;
      }
    }
    .right-box-row2 {
      height: 25%;
      display: flex;
      gap: 4px;
      .right-box-row2-item {
        width: 50%;
      }
    }
    .right-box-row3 {
      height: 47.78%;
    }

    .right-box-row4 {
      height: 12.78%;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 13px;
      .btn {
        margin-left: 9px;
      }
    }
  }

  .progress-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    .item-num {
      margin-bottom: 4px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 8px;
      color: #333333;
      text-align: left;
      font-style: normal;
    }
  }

  .item-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 8px;
    color: #70a3dd;
    text-align: center;
    font-style: normal;
    &.dialysis-mode-content {
      color: #d58e56;
      display: flex;
      align-items: center;
      // align-items: baseline;
      .dialysis-mode-content-box {
        display: flex;
        align-items: flex-end;
        line-height: 1;
        .mini-text {
          margin-right: 1px;
          font-size: 5px;
          color: #c9a589;
        }
      }
    }
    &.treatment-status {
      color: #70a3dd;
    }
    &.prescription-ehydration-olume {
      color: #8079cb;
    }
    &.current-lood0emperature {
      color: #70a3dd;
      font-size: 9px;
    }
    &.venous-pressure {
      color: #70a3dd;
      font-size: 9px;
    }
  }
  .prescription-remarks {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 5px;
    color: #d58e56;
    line-height: 7px;
    text-align: left;
    font-style: normal;
  }
  .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;
      }
    }
  }
  // card header class
  .mini-card {
    padding: 2px;
  }
  .ktv-card {
    .card-header {
      margin-bottom: 0px;
    }
  }
  :deep(.mihi-header) {
    flex: 0 0 4px;
    .card-icon {
      width: 4px;
      height: 4px;
    }
    .card-title {
      font-size: 4px;
    }
  }
  :deep(.big-header) {
    flex: 0 0 9px;
    .card-icon {
      width: 9px;
      height: 9px;
    }
    .card-title {
      font-size: 5px;
    }
  }
}
</style>