bigScreen/src/views/waitList/index.vue

<template>
  <section class="waitBox bg-[#F3F2FA]">
    <nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF]">
      <div class="logBox w-[11.57vh] h-[7.4vh]">
        <img class="h-full" src="@/assets/svg/Wait/logo.svg" />
      </div>
      <div class="titleBox flex items-center">
        <p class="text-[5.55vh] font-bold mr-[1.48vh]">家属等候大屏</p>
        <span class="text-[2.96vh] text-[#ccc] tracking-widest">(9s)</span>
      </div>
      <div class="timeBox text-right">
        <p class="text-[3.14vh] font-medium leading-tight">15:31</p>
        <p class="text-[1.66vh]">2024-07-09 星期二</p>
      </div>
    </nav>
    <main class="h-[calc(100vh-18.51vh)] p-[2.22vh] pb-0" ref="mainRef">
      <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
        <div class="flex-1 border-r">手术间</div>
        <div class="flex-1 border-r">患者姓名</div>
        <div class="flex-1 border-r">床号</div>
        <div class="flex-1 border-r">科室</div>
        <div class="flex-1">状态</div>
      </div>
      <div :style="carouselOuterWrap" v-loading="isLoading">
        <div :style="carouselIneerWrap" class="border border-[#9A82FF] border-t-0"></div>
      </div>
    </main>
    <footer class="h-[7.4vh] flex items-center justify-around bg-[#5D49AF]">
      <div class="flex items-center">
        <div class="logBox w-[15vh] h-[3.7vh] mr-[1.48vh]">
          <img class="h-full" src="@/assets/svg/Wait/footText.png" />
        </div>
        <p class="text-[2.59vh]">请勿吸烟，请照顾好自己随身携带的物品，请耐心等待，我们将竭诚为您服务</p>
      </div>
    </footer>
  </section>
</template>

<script>
import { getAnesPatientList } from '@/api/waitList';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      isLoading: true,
      mainRefHeight: 0,
      showItemNum: 9,
      carouselNav: {},
      carouselOuterWrap: {},
      carouselIneerWrap: {},
      patientList: [],
    };
  },
  methods: {
    onGetPageData() {
      let today = dayjs().format('YYYY-MM-DD');
      today = '2024-06-06';
      getAnesPatientList({
        ScheduledDateTime: today,
        Status: -1,
        IsPacu: false,
        IsEOperation: false,
        IsAnesManage: true,
        IsInfect: false,
        IsRadiation: false,
        IsPostoperativeAnalgesia: false,
        IsSurgicalFreezing: false,
        IsType: false,
      })
        .then(res => {
          this.patientList = [];
          for (let index = 0; index < res['Data']['Data']['AnesPatientLists'].length; index++) {
            const element = res['Data']['Data']['AnesPatientLists'][index];
            const groupIndex = parseInt(index / this.showItemNum);
            if (this.patientList[groupIndex]) {
              this.patientList[groupIndex].push(element);
            } else {
              this.patientList[groupIndex] = [element];
            }
          }
          console.log(this.patientList);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
  mounted() {
    const mainEl = window.getComputedStyle(this.$refs.mainRef);
    this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - parseFloat(mainEl['paddingTop'])) - 40;
    const itemHeight = this.mainRefHeight / (this.showItemNum + 1);
    const rowHeight = itemHeight / 1080;
    this.carouselNav = {
      'font-size': `${(rowHeight * 43).toFixed(2)}vh`,
      'line-height': `${(rowHeight * 100).toFixed(2)}vh`,
    };
    this.carouselOuterWrap = {
      height: `calc(100% - ${(rowHeight * 100).toFixed(2)}vh)`,
    };
    this.carouselIneerWrap = {
      height: `calc(100% - 40px)`,
    };
    this.onGetPageData();
  },
};
</script>

<style lang="scss" scoped></style>