Merge branch 'ID1825-床旁副屏改版' into test

zhangchen

2025-07-25 64aaf44b6b2948631ebd0d9840d51e5e31ae5479

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

New file
@@ -0,0 +1,441 @@
<template>
  <div class="signed-in-container" :style="{ '--height': height + 'px' }">
    <div class="row1">
      <div class="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="row1-col2">
        <Card
          title="异常指标"
          :icon="xinlvImg"
          background-color="#ffffff"
          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 class="row1-col3">
        <div class="row1-col3-row1">
          <Card
            title="治疗模式"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="row1-col3-row1-item"
            header-class-name="mihi-header"
          >
            <div class="item-box dialysis-mode-content">
              {{ pageData.dialysisPlan }}
            </div>
          </Card>
          <Card
            title="治疗状态"
            :icon="zlztImg"
            background-color="#ffffff"
            class="row1-col3-row1-item"
            header-class-name="mihi-header"
          >
            <div class="item-box treatment-status">已签到</div>
          </Card>
        </div>
        <Card
          title="处方脱水量"
          :icon="cljdImg"
          background-color="#ffffff"
          class="row1-col3-row2"
          header-class-name="mihi-header"
        >
          <div class="item-box prescription-ehydration-olume">
            {{ pageData.prescriptionDehydrationVolume }} L
          </div>
        </Card>
      </div>
      <div class="row1-col4">
        <Card
          title="透析器(显示规格)"
          :icon="txqImg"
          background-color="#ffffff"
          class="row1-col4-row"
          header-class-name="mihi-header"
        >
          <div class="item-box dialyzer">
            {{ pageData.dialyzer }}
          </div>
        </Card>
        <Card
          title="脱水量详情"
          :icon="cljdImg"
          background-color="#ffffff"
          class="row1-col4-row"
          header-class-name="mihi-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">
              <span class="item-left"
                >最大脱水量：{{ pageData.maximumDehydrationCapacity }} L</span
              >
              <span class="item-right"
                >({{ pageData.maximumDehydrationCapacityDate }})</span
              >
            </div>
          </div>
        </Card>
      </div>
    </div>
    <div class="row2">
      <Card
        title="干体重"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.dryWeight }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="透前体重"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.preDialysisWeight }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="上次透后体重"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{
            pageData.weightAfterLastDialysis
          }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="体重增长"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span v-if="pageData.weightIncreaseRate > 0" class="weight-text">+</span>
          <span class="weight-text">{{ pageData.weightIncrease }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="增长率"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.weightIncreaseRate }}</span>
          <span class="unit-text">%</span>
        </div>
      </Card>
    </div>
    <div class="row3">
      <BlockBotttom
        :icon="dingShiImg"
        text="定时任务"
        backgroundColor="#20C6B6"
        @click="() => onScheduledTasksClick()"
        class="btn"
      />
      <BlockBotttom
        :icon="jiaoHaoImg"
        text="叫号"
        backgroundColor="#20C6B6"
        @click="() => onCallBumberClick()"
        class="btn"
      />
      <BlockBotttom
        :icon="kaiShiImg"
        text="开始"
        backgroundColor="#409EFF"
        @click="() => onStartClick()"
        class="btn"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="SignedIn">
import { computed } from "vue";
// @ts-ignore
import Card from "../components/Card.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import tslImg from "@/img/tsl.png";
import dingShiImg from "@/img/dingshi2.png";
import jiaoHaoImg from "@/img/jiaoHao.png";
import kaiShiImg from "@/img/kaiShi.png";
import xinlvImg from "@/img/xinlv.png";
import zlmsImg from "@/img/zlms.png";
import zlztImg from '@/img/txzt.png';
import cljdImg from "@/img/cljd.png";
import txqImg from "@/img/txq.png";
import tizhongImg from "@/img/tizhong.png";

import {
  getItemName,
  formatTestColr,
  formatTestFlag,
} from "@/store/type/bedsideAuxiliaryScreen.type";
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
import { ElMessage } from "element-plus/es";

interface Props {
  height: number;
}
const props = defineProps<Props>();

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

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

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

const onCallBumberClick = () => {
  ElMessage({
    message: "功能开发中，敬请期待！",
    type: "warning",
  });
};

const onStartClick = () => {
  ElMessage({
    message: "功能开发中，敬请期待！",
    type: "warning",
  });
};
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.signed-in-container {
  position: relative;
  height: var(--height);
  overflow: hidden;
  .row1 {
    height: 37.44%;
    margin-bottom: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .row1-col1 {
      flex: 0 0 14.86%;
      height: 100%;
      border-radius: 2px;
      overflow: hidden;
    }
    .row1-col2 {
      flex: 0 0 32.86%;
      height: 100%;
      .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;
        }
      }
    }
    .row1-col3 {
      flex: 0 0 23.71%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .row1-col3-row1 {
        flex: 1;
        display: flex;
        gap: 4px;
        .row1-col3-row1-item {
          flex: 1;
        }
      }
      .row1-col3-row2 {
        flex: 1;
      }
    }
    .row1-col4 {
      flex: 0 0 25.14%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .row1-col4-row {
        flex: 1;
        .dehydrated-level {
          padding-left: 6px;
          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;
            }
            .item-right {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 4px;
              color: #777777;
              line-height: 6px;
              font-style: normal;
            }
          }
        }
      }
    }
  }
  .row2 {
    height: 21.72%;
    overflow: hidden;
    display: flex;
    gap: 4px;
    .row2-item {
      flex: 1;

      .weight-box {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
        align-items: baseline;
        .weight-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 11px;
          color: #333333;
          text-align: center;
          font-style: normal;
        }
        .unit-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 7px;
          color: #333333;
          text-align: center;
          font-style: normal;
        }
      }
    }
  }
  .row3 {
    position: absolute;
    width: 100%;
    bottom: 2px;
    height: 13.33%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 13px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 2px;
    .btn {
      margin-left: 9px;
    }
  }
  .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;
    }
    &.treatment-status {
      color: #70a3dd;
    }
    &.prescription-ehydration-olume {
      color: #8079cb;
    }
  }
  // card header class
  :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>