ID1825-未排班页面初步完成

zhangchen

2025-07-19 150b02fb27bf7bbcf3cb3653be484f8fab5b3999

 src/views/mobile/bedsideAuxiliaryScreen/components/NotSignedIn.vue

@@ -1,11 +1,304 @@
<template>
  <div class="not_signed_in_container"></div>
  <div class="not-signed-in-container" :style="{ '--height': height + 'px' }">
    <div class="row1-container">
      <div class="row1-left">
        <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-center">
        <div class="row1-center-row1">
          <Card
            title="透析模式"
            :icon="tslImg"
            background-color="#E5EEFF"
            class="row1-center-row1-item"
          >
            <div class="dialysis-mode-content">
              <span>{{ pageData.dialysisMode }}</span>
            </div>
          </Card>
          <Card
            title="治疗模式"
            :icon="tslImg"
            background-color="#F1EEFA"
            class="row1-center-row1-item"
          >
            <div class="dialysis-mode-content item-2">
              <span>未签到</span>
            </div>
          </Card>
        </div>
        <Card
          title="一次性使用管路"
          :icon="tslImg"
          background-color="#D9F0E2"
          class="row1-center-row2"
        >
          <div class="list-box-1">
            <div
              v-for="(item, index) in pageData.pipingList"
              :key="index"
              class="list-item"
              style="color: #3ab859"
            >
              <div class="list-item-left">
                {{ item.name }}
              </div>
              <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
            </div>
          </div>
        </Card>
      </div>
      <div class="row1-right">
        <Card
          title="透析器"
          :icon="tslImg"
          background-color="#F9DEDE"
          class="row1-right-item"
        >
          <div class="list-box-1">
            <div
              v-for="(item, index) in pageData.dialyzerList"
              :key="index"
              class="list-item"
            >
              <div class="list-item-left">
                {{ item.name }}
              </div>
              <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
            </div>
          </div>
        </Card>
        <Card
          title="透析液"
          :icon="tslImg"
          background-color="#EFE5FF"
          class="row1-right-item"
        >
          <div class="list-box-1">
            <div
              v-for="(item, index) in pageData.dialysateList"
              :key="index"
              class="list-item"
            >
              <div class="list-item-left">
                {{ item.name }}
              </div>
              <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
            </div>
          </div>
        </Card>
      </div>
    </div>
    <div class="row2-container">
      <Card
        title="抗凝剂"
        :icon="tslImg"
        background-color="#FFEDD2"
        class="row-item"
      >
        <!-- <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.pipingList"
            :key="index"
            class="list-item"
            style="color: #3ab859"
          >
            <div class="list-item-left">
              {{ item.name }}
            </div>
            <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
          </div>
        </div> -->
      </Card>
      <Card
        title="一次性使用透析护理包"
        :icon="tslImg"
        background-color="#E5EEFF"
        class="row-item"
      >
        <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.carePackage"
            :key="index"
            class="list-item"
            style="color: #1D77BD"
          >
            <div class="list-item-left">
              {{ item.name }}
            </div>
            <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
          </div>
        </div>
      </Card>
    </div>
    <div class="row3-container">
      <Card
        title="穿刺针"
        :icon="tslImg"
        background-color="#FFEDD2"
        class="row-item"
      >
        <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.punctureNeedle"
            :key="index"
            class="list-item"
            style="color: #A78718"
          >
            <div class="list-item-left">
              {{ item.name }}
            </div>
            <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
          </div>
        </div>
      </Card>
      <Card
        title="血管通路"
        :icon="tslImg"
        background-color="#E5EEFF"
        class="row-item"
      >
        <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.vascularAccess"
            :key="index"
            class="list-item"
            style="color: #1D77BD"
          >
            <div class="list-item-left">{{ item.位置 }} {{ item.类型 }}</div>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup name="NotSignedIn">
import { computed } from "vue";
// @ts-ignore
import Card from "./Card.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import tslImg from "@/img/tsl.png";

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

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.notSignedIn, {
    patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
  });
});
</script>

<style>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.not-signed-in-container {
  display: flex;
  flex-direction: column;
  height: var(--height);
  gap: 4px; // 行间间距
  overflow: hidden;
  padding-bottom: 2px;

  .row1-container {
    display: flex;
    flex: 59.3; // 59.3%
    min-height: 0;
    gap: 4px; // 行间间距

    .row1-left {
      width: 75px;
      border-radius: 2px;
      overflow: hidden;
    }
    .row1-center,
    .row1-right {
      flex: 1;
    }
    .row1-center {
      display: flex;
      flex-direction: column;
      gap: 4px; // 行间间距

      .row1-center-row1 {
        flex: 1;
        display: flex;
        gap: 4px; // 行间间距
        .row1-center-row1-item {
          flex: 1;
          .dialysis-mode-content {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 11px;
            color: #3a75b8;
            text-align: center;
            font-style: normal;
            &.item-2 {
              color: #333;
            }
          }
        }
      }
      .row1-center-row2 {
        flex: 1;
      }
    }
    .row1-right {
      display: flex;
      flex-direction: column;
      gap: 4px;
      .row1-right-item {
        flex: 1;
      }
    }
  }

  .row2-container,
  .row3-container {
    flex: 20.35;
    min-height: 0;
    display: flex;
    gap: 4px;
    .row-item {
      flex: 1;
    }
  }
  .list-box-1 {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 5px;
      color: #a78718;
      line-height: 6px;
      text-align: left;
      font-style: normal;
      .list-item-left {
        flex: 1;
      }
      .list-item-right {
      }
    }
  }
}
</style>