feat:完成手术排程

src/router/index.js

@@ -46,6 +46,12 @@ const routes = [
     meta: { title: '家属等候大屏' },
     component: () => import('@/views/waitList/index.vue'),
   },
+  {
+    path: '/scheduleList',
+    name: 'scheduleList',
+    meta: { title: '手术排程' },
+    component: () => import('@/views/scheduleList/index.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/scheduleList/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <section class="waitBox bg-[#F3F2FA]">
+    <nav class="h-[11.11vh] pl-[3.7vh] pr-[2.22vh] flex justify-between items-center bg-[#5D49AF] relative">
+      <div class="logBox h-[5vh]">
+        <img class="h-full" src="@/assets/svg/Wait/logo.png" />
+      </div>
+      <div class="absolute titleBox w-full flex justify-around">
+        <div class="flex items-center">
+          <p class="text-[5.55vh] font-bold mr-[1.48vh]">手术排程</p>
+          <span class="text-[2.96vh] text-[#ccc] tracking-widest">({{ carouselCountDown }}s)</span>
+        </div>
+      </div>
+      <div class="timeBox text-right">
+        <p class="text-[3.14vh] font-medium leading-tight">{{ formatTime }}</p>
+        <p class="text-[1.66vh]">{{ formatDate }}</p>
+      </div>
+    </nav>
+    <main class="h-[calc(100vh-18.51vh)] p-[24px] pb-0 relative" ref="mainRef">
+      <div class="absolute top-[24px] left-1/2 -translate-x-1/2 w-[calc(100%-48px)]">
+        <div class="bg-[#9A82FF] flex text-center" :style="carouselNav">
+          <div class="w-[8%] border-r">手术间</div>
+          <div class="w-[8%] border-r">台次</div>
+          <div class="w-[10%] border-r">患者姓名</div>
+          <div class="w-[10%] border-r">科室</div>
+          <div class="w-[14%] border-r">手术名称</div>
+          <div class="w-[10%] border-r">主刀医生</div>
+          <div class="w-[10%] border-r">主麻医生</div>
+          <div class="w-[10%] border-r">巡回护士</div>
+          <div class="w-[10%] border-r">器械护士</div>
+          <div class="w-[10%]">状态</div>
+        </div>
+        <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
+          <template v-if="patientList['length']">
+            <el-carousel direction="vertical" :autoplay="false" indicatorPosition="none" ref="carousel" @change="onCarouselChange">
+              <el-carousel-item v-for="(item, index) in patientList" :key="index">
+                <section class="carouselItemBox">
+                  <div v-for="(subItem, index) in item" :key="index" :style="carouselItemStyle">
+                    <div class="flex text-center">
+                      <div class="w-[8%] border-r text-[#333] truncate">{{ subItem['RoomName'] }}</div>
+                      <div class="w-[8%] border-r text-[#333] truncate">{{ subItem['Sequence'] }}</div>
+                      <div class="w-[10%] border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div>
+                      <div class="w-[10%] border-r text-[#333] truncate">{{ subItem['WardName'] }}</div>
+                      <div class="w-[14%] border-r text-[#333] leading-none">
+                        <marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{ subItem['OperationName'] }}</marquee>
+                      </div>
+                      <div class="w-[10%] border-r text-[#333] truncate">{{ subItem['Surgeon'] }}</div>
+                      <div class="w-[10%] border-r text-[#333] truncate">{{ subItem['AnesthesiaDoctor'] }}</div>
+                      <div class="w-[10%] border-r text-[#333] truncate">
+                        <p class="text-[#333]" v-if="subItem['OperationNursList']['length'] <= 1">
+                          {{ subItem['OperationNursList'].join() }}
+                        </p>
+                        <marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle" v-else> {{ subItem['OperationNursList'].join() }}</marquee>
+                      </div>
+                      <div class="w-[10%] border-r text-[#333] truncate">
+                        <p class="text-[#333]" v-if="subItem['SupplyNurseList']['length'] <= 1">
+                          {{ subItem['SupplyNurseList'].join() }}
+                        </p>
+                        <marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle" v-else> {{ subItem['SupplyNurseList'].join() }}</marquee>
+                      </div>
+                      <div class="w-[10%] text-[#333]" :style="{ color: `${textToColor(statusToTxt(subItem['ProcStatus']))}` }">
+                        {{ statusToTxt(subItem['ProcStatus']) }}
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </el-carousel-item>
+            </el-carousel>
+          </template>
+        </div>
+      </div>
+
+      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex">
+        <template v-for="(item, index) in patientList">
+          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ 'bg-[#8C8D92]': index == activeIndex }" :key="index" />
+        </template>
+      </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 { Carousel, CarouselItem } from 'element-ui';
+import dayjs from 'dayjs';
+import { statusToTxt, textToColor } from '@/utils/common';
+
+export default {
+  data() {
+    return {
+      isLoading: true,
+      mainRefHeight: 0,
+      showItemNum: 8,
+      carouselNav: {},
+      carouselWrap: {},
+      carouselItemStyle: {},
+      patientList: [],
+      currentDateTime: dayjs().format('YYYY-MM-DD HH:mm dddd'),
+      dateTimer: null,
+      carouselCountDown: 10,
+      carouselTimer: null,
+      activeIndex: 0,
+      getDataTimer: null,
+    };
+  },
+  methods: {
+    statusToTxt,
+    textToColor,
+    onGetPageData() {
+      let today = dayjs().format('YYYY-MM-DD');
+      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 = [];
+          if (res['Data']['Data']) {
+            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];
+              }
+            }
+            if (!this.carouselTimer) {
+              this.onCarouselTimer();
+            }
+          }
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    onCarouselTimer() {
+      this.$nextTick(() => {
+        this.carouselTimer = setInterval(() => {
+          this.carouselCountDown -= 1;
+          if (this.carouselCountDown == 0) {
+            this.$refs.carousel.next();
+            this.carouselCountDown = 3;
+          }
+        }, 1000);
+      });
+    },
+    onCalculate() {
+      // 根据展示数量计算高度
+      this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40);
+      const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
+      this.carouselNav = {
+        'font-size': `${(rowHeight * 0.33).toFixed(2)}px`,
+        'line-height': `${rowHeight.toFixed(2)}px`,
+      };
+      this.carouselWrap = {
+        height: `${(rowHeight * this.showItemNum).toFixed(2)}px`,
+      };
+      this.carouselItemStyle = {
+        'line-height': `${rowHeight.toFixed(2)}px`,
+        height: `${rowHeight.toFixed(2)}px`,
+        'font-size': `${(rowHeight * 0.31).toFixed(2)}px`,
+      };
+    },
+    onCarouselChange(index) {
+      this.activeIndex = index;
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.onCalculate();
+
+      // 每秒更新一次当前时间
+      this.dateTimer = setInterval(() => {
+        this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
+      }, 10000);
+
+      this.onGetPageData();
+      this.getDataTimer = setInterval(() => {
+        this.onGetPageData();
+      }, 35000);
+      window.addEventListener('resize', this.onCalculate);
+    });
+  },
+  components: {
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
+  },
+  computed: {
+    formatDate() {
+      const timeArr = this.currentDateTime.split(' ');
+      let weekName = '星期一';
+      if (timeArr[2] == 'Tuesday') {
+        weekName = '星期二';
+      }
+      if (timeArr[2] == 'Wednesday') {
+        weekName = '星期三';
+      }
+      if (timeArr[2] == 'Thursday') {
+        weekName = '星期四';
+      }
+      if (timeArr[2] == 'Friday') {
+        weekName = '星期五';
+      }
+      if (timeArr[2] == 'Saturday') {
+        weekName = '星期六';
+      }
+      if (timeArr[2] == 'Sunday') {
+        weekName = '星期日';
+      }
+      return `${timeArr[0]} ${weekName}`;
+    },
+    formatTime() {
+      return this.currentDateTime.split(' ')[1];
+    },
+  },
+  beforeDestroy() {
+    // 清除定时器
+    clearInterval(this.dateTimer);
+    clearInterval(this.carouselTimer);
+    clearInterval(this.getDataTimer);
+    // 组件销毁前移除 resize 事件监听器
+    window.removeEventListener('resize', this.onCalculate);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-carousel) {
+  height: 100%;
+  .el-carousel__container,
+  .el-carousel__item {
+    height: 100%;
+    .carouselItemBox {
+      > div:nth-child(odd) {
+        background: #fff;
+      }
+      > div:nth-child(even) {
+        background: #f5f8ff;
+      }
+    }
+  }
+}
+</style>

src/views/waitList/index.vue

@@ -25,17 +25,17 @@
           <div class="flex-1">状态</div>
         </div>
         <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
-          <el-carousel direction="vertical" :autoplay="false" indicatorPosition="none" ref="carousel" @change="onCarouselChange">
+          <template v-if="patientList['length']">
-            <template v-if="patientList['length']">
+            <el-carousel direction="vertical" :autoplay="false" indicatorPosition="none" ref="carousel" @change="onCarouselChange">
               <el-carousel-item v-for="(item, index) in patientList" :key="index">
                 <section class="carouselItemBox">
                   <template v-for="(subItem, index) in item">
                     <div :key="index" :style="carouselItemStyle">
-                      <div class="flex text-center text-[#333]">
+                      <div class="flex text-center">
-                        <div class="flex-1 border-r text-[#333]">{{ subItem['RoomName'] }}</div>
+                        <div class="flex-1 border-r text-[#333] truncate">{{ subItem['RoomName'] }}</div>
-                        <div class="flex-1 border-r text-[#333]">{{ subItem['PatientName'] }}</div>
+                        <div class="flex-1 border-r text-[#333] truncate">{{ subItem['PatientName'] }}</div>
-                        <div class="flex-1 border-r text-[#333]">{{ subItem['BedNo'] }}</div>
+                        <div class="flex-1 border-r text-[#333] truncate">{{ subItem['BedNo'] }}</div>
-                        <div class="flex-1 border-r text-[#333]">{{ subItem['WardName'] }}</div>
+                        <div class="flex-1 border-r text-[#333] truncate">{{ subItem['WardName'] }}</div>
                         <div class="flex-1 text-[#333]" :style="{ color: `${textToColor(statusToTxt(subItem['ProcStatus']))}` }">
                           {{ statusToTxt(subItem['ProcStatus']) }}
                         </div>
@@ -44,8 +44,8 @@
                   </template>
                 </section>
               </el-carousel-item>
-            </template>
+            </el-carousel>
-          </el-carousel>
+          </template>
         </div>
       </div>
 
@@ -95,7 +95,6 @@ export default {
     textToColor,
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
-      today = '2024-06-06';
       getAnesPatientList({
         ScheduledDateTime: today,
         Status: -1,
@@ -110,17 +109,19 @@ export default {
       })
         .then(res => {
           this.patientList = [];
-          for (let index = 0; index < res['Data']['Data']['AnesPatientLists'].length; index++) {
+          if (res['Data']['Data']) {
-            const element = res['Data']['Data']['AnesPatientLists'][index];
+            for (let index = 0; index < res['Data']['Data']['AnesPatientLists'].length; index++) {
-            const groupIndex = parseInt(index / this.showItemNum);
+              const element = res['Data']['Data']['AnesPatientLists'][index];
-            if (this.patientList[groupIndex]) {
+              const groupIndex = parseInt(index / this.showItemNum);
-              this.patientList[groupIndex].push(element);
+              if (this.patientList[groupIndex]) {
-            } else {
+                this.patientList[groupIndex].push(element);
-              this.patientList[groupIndex] = [element];
+              } else {
+                this.patientList[groupIndex] = [element];
+              }
+            }
+            if (!this.carouselTimer) {
+              this.onCarouselTimer();
             }
-          }
-          if (!this.carouselTimer) {
-            this.onCarouselTimer();
           }
         })
         .finally(() => {