ID1825-暂存

zhangchen

2025-07-09 6c0b8c25d8c523c3f800aaae59362abef7fd1906

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

@@ -10,7 +10,15 @@
        background-color="#FFEDD2"
        class="row1-left"
      >
      <div class=""></div>
        <div class="list-1">
          <div
            v-for="(item, index) in consumablesCollection.抗凝剂"
            :key="index"
            class="list-1-item"
          >
            {{ item }}
          </div>
        </div>
      </Card>
      <div class="row1-content">
        <Card
@@ -18,13 +26,33 @@
          :icon="tslImg"
          background-color="#E5EEFF"
          class="row1-content-card"
        />
        >
          <div class="list-2">
            <div
              v-for="(item, index) in consumablesCollection.透析模式"
              :key="index"
              class="list-2-item"
            >
              {{ item }}
            </div>
          </div>
        </Card>
        <Card
          title="一次性血液透析体外循环管路"
          :icon="tslImg"
          background-color="#D9F0E2"
          class="row1-content-card"
        />
        >
          <div class="list-3">
            <div
              v-for="(item, index) in consumablesCollection.管路"
              :key="index"
              class="list-3-item"
            >
              {{ item }}
            </div>
          </div>
        </Card>
        <Card
          title="一次性使用透析护理包"
          :icon="tslImg"
@@ -37,7 +65,17 @@
        :icon="tslImg"
        background-color="#EFE5FF"
        class="row1-right"
      />
      >
        <div class="list-1">
          <div
            v-for="(item, index) in consumablesCollection.穿刺针"
            :key="index"
            class="list-1-item"
          >
            {{ item }}
          </div>
        </div>
      </Card>
    </div>
    <div class="row2-container">
      <Card
@@ -57,29 +95,41 @@
</template>

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

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

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const consumablesCollection = computed(() => {
  return bedsideAuxiliaryScreenStore.deviceData.consumablesCollection;
});
</script>

<style lang="less" scoped>
*{
  box-sizing: border-box;
}
.unplanned-schedule-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: var(--height);
  overflow: hidden;
  .row1-container {
    flex: 1;
    margin-bottom: 4px;
    display: flex;
    width: 100%;
    gap: 4px;

    min-height: 0; 
    > .row1-left,
    .row1-right {
      width: 103px;
@@ -104,9 +154,50 @@
    display: flex;
    width: 100%;
    gap: 4px;
    min-height: 0; 
    > .row2-card {
      flex: 1;
    }
  }
  .list-1 {
    .list-1-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 4px;
      color: #a78718;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-top: 2px;
      }
    }
  }
  .list-2 {
    .list-2-item {
      display: inline-block;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 5px;
      color: #3a75b8;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-left: 5px;
      }
    }
  }
  .list-3 {
    .list-3-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 4px;
      color: #3ab859;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-top: 2px;
      }
    }
  }
}
</style>