bigScreen/src/views/scheduleList/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] relative overflow-hidden">
      <div class="logBox h-[7vh]">
        <img class="h-full" :src="logoUrl" v-show="logoUrl" />
        <img class="h-full" :src="logoUrlBackup" v-show="!logoUrl && logoUrlBackup" />
      </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">
          <template v-for="item in colList">
            <div class="font-semibold border-r "
              :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`" :key="item['columnCode']"
              v-if="item['isShow']">
              <div class="h-full flex items-center selectBox" v-if="item['depFilter']">
                <el-select v-model="selectDepList" class="flex-grow" filterable :filterMethod="onSelectDepFilter"
                  multiple collapseTags :multipleLimit="1" :popperAppendToBody="false" @change="onSelectChange(item)">
                  <template v-for="(subItem, index) in depList">
                    <el-option :key="index" :label="subItem['DisplayName']" :value="subItem['Code']"
                      v-if="subItem['isShow']" />
                  </template>
                </el-select>
              </div>
              <p @click="onDepFilter(item)" v-else class="truncate">{{ item['columnName'] }}</p>
            </div>
          </template>
        </div>
        <div :style="carouselWrap" class="border border-[#9A82FF] border-t-0" v-loading="isLoading">
          <template v-if="patientList['length']">
            <el-carousel direction="vertical" :autoplay="true" indicatorPosition="none" ref="carousel" :interval="0"
              @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">
                      <template v-for="item in colList">
                        <template v-if="item['columnCode'] == 'ProcStatusName'">
                          <div class="border-r text-[#333] font-semibold truncate px-3"
                            :style="{ color: `${textToColor(subItem['ProcStatusName'])}`, 'flex-basis': `${item['width']}px` }"
                            :key="item['columnCode']" v-if="item['isShow']">
                            {{ subItem['ProcStatusName'] }}
                          </div>
                        </template>
                        <template v-else-if="item['columnCode'] == 'IntendedOperationName'">
                          <div class="border-r text-[#333] font-semibold truncate px-3"
                            :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
                            :key="item['columnCode']" v-if="item['isShow']">
                            <marquee scrollamount="3" class="text-[#333]" :style="carouselItemStyle">{{
                              subItem['IntendedOperationName'] }}</marquee>
                          </div>
                        </template>
                        <template v-else>
                          <div class="border-r text-[#333] font-semibold truncate px-3"
                            :style="item['width'] ? `flex-basis:${item['width']}px` : `flex-grow: 1;`"
                            :key="item['columnCode']" v-if="item['isShow']">
                            {{ subItem[item['columnCode']] }}
                          </div>
                        </template>
                      </template>
                    </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 { getDynamicTableHeader, getDynamicTableList, getGlobeConfig, getDepList } from '@/api/publishApi';
import { Carousel, CarouselItem, Select, Option } from 'element-ui';
import { statusToTxt, textToColor } from '@/utils/common';
import dayjs from 'dayjs';
import PinyinMatch from "pinyin-match";

export default {
  data() {
    return {
      isLoading: true,
      mainRefHeight: 0,
      showItemNum: 12,
      carouselNav: {},
      carouselWrap: {},
      carouselItemStyle: {},
      patientList: [],
      currentDateTime: dayjs().format('YYYY-MM-DD HH:mm dddd'),
      dateTimer: null,
      carouselCountDown: 20,
      carouselTimer: null,
      activeIndex: 0,
      getDataTimer: null,
      colList: [],
      queryCondition: [],
      logoUrl: "",
      logoUrlBackup: "",
      groupIndex: -1,
      roomNameList: [],
      stayTime: 30,
      depList: [],
      selectDepList: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    };
  },
  methods: {
    statusToTxt,
    textToColor,
    onGetPageData() {
      let today = dayjs().format('YYYY-MM-DD');
      // today = '2024-06-06';
      const QueryFiledDic = {};
      this.queryCondition.forEach(queryItem => {
        if (queryItem['queryType'] == 'dateTime') {
          QueryFiledDic[queryItem['queryFiled']] = today;
        }
      });
      getDynamicTableList({
        PageSize: 999,
        GroupCode: 'SSPCDP',
        QueryFiledDic,
      })
        .then(res => {
          this.patientList = [];
          if (res['Data']['Data']['length']) {
            // 过滤结束时间
            const deadline = dayjs().valueOf() - (60 * this.stayTime * 1000);
            res['Data']['Data'] = res['Data']['Data'].filter(item => {
              if (item['ProcStatus'] == 35 && item['OutRoomDateTime']) {
                return dayjs(item['OutRoomDateTime']).valueOf() > deadline
              }
              if (item['ProcStatus'] == 45 && item['OutPacuDateTime']) {
                return dayjs(item['OutPacuDateTime']).valueOf() > deadline
              }
              return true
            })

            // 过滤部门
            if (this.selectDepList.length) {
              res['Data']['Data'] = res['Data']['Data'].filter(item => {
                return this.selectDepList.includes(item['DeptCode'])
              })
            }
            // 分区
            if (this.groupIndex >= 0) {
              if (this.roomNameList[this.groupIndex]) {
                res['Data']['Data'] = res['Data']['Data'].filter(item => {
                  return this.roomNameList[this.groupIndex].includes(item['RoomName'])
                })
              } else {
                res['Data']['Data'] = [];
              }
            }
            for (let index = 0; index < res['Data']['Data']['length']; index++) {
              const element = res['Data']['Data'][index];
              const groupIndex = parseInt(index / this.showItemNum);
              if (this.patientList[groupIndex]) {
                this.patientList[groupIndex].push(element);
              } else {
                this.patientList[groupIndex] = [element];
              }
            }
            if (!this.carouselTimer && res['Data']['Data']['length'] > this.showItemNum) {
              this.onCarouselTimer();
            }
          } else {
            clearInterval(this.carouselTimer);
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    onCarouselTimer() {
      this.$nextTick(() => {
        this.carouselTimer = setInterval(() => {
          this.carouselCountDown -= 1;
          if (this.carouselCountDown == 0) {
            this.$refs.carousel.next();
            this.carouselCountDown = 20;
          }
        }, 1000);
      });
    },
    onCalculate() {
      // 根据展示数量计算高度
      this.mainRefHeight = parseInt(this.$refs.mainRef.clientHeight - 24 - 40);
      const rowHeight = this.mainRefHeight / (this.showItemNum + 1);
      this.carouselNav = {
        'font-size': `${(rowHeight * 0.5).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.48).toFixed(2)}px`,
      };
    },
    onCarouselChange(index) {
      this.activeIndex = index;
    },
    onGetblobe() {
      getGlobeConfig({ isTree: false }).then(res => {
        res['Data']['Item'].forEach(item => {
          if (item['Key'] == 'HospitalLogo') {
            this.logoUrl = item['Value']
          }
          if (item['Key'] == "CorporateLogo") {
            this.logoUrlBackup = item['Value']
          }
          if (item['Key'] == "RoomName") {
            this.roomNameList = JSON.parse(item['Value'])
          }
          if (item['Key'] == "StayTime") {
            this.stayTime = Number(item['Value'])
          }
        })
      })
    },
    onGetDepList() {
      getDepList().then(res => {
        this.depList = res['Data'].map((item, index) => {
          item['isShow'] = index < 30
          return item
        })
      })
    },
    onDepFilter(rowData) {
      if (rowData['columnCode'] == 'DeptName') {
        rowData['depFilter'] = true
        this.$nextTick(() => {
          const selectBox = document.querySelector(".selectBox");
          if (selectBox) {
            const selectNode = selectBox.querySelector(".el-select");
            if (selectNode) {
              const instance = selectNode.__vue__;
              if (instance && typeof instance.toggleMenu === "function") {
                instance.toggleMenu();
                return;
              }
            }
          }
        })
      }
    },
    onSelectDepFilter(val) {
      if (val) {
        this.depList.map(item => {
          item["isShow"] = PinyinMatch.match(item["DisplayName"], val);
        })
      }
      else {
        this.depList.map((item, index) => {
          item["isShow"] = index < 30;
        })
      }
    },
    onSelectChange(rowData) {
      if (!this.selectDepList.length) {
        rowData['depFilter'] = false
      }
      this.onGetPageData()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.onCalculate();
      this.onGetblobe();
      this.onGetDepList()

      // 每秒更新一次当前时间
      this.dateTimer = setInterval(() => {
        this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm dddd');
      }, 10000);

      getDynamicTableHeader({
        query: 'SSPCDP',
      }).then(res => {
        if (res['Data']['Data']['length']) {
          res = res['Data']['Data'][0];
          this.colList = JSON.parse(res['ReportHeadColumn']).map(item => {
            item['depFilter'] = false
            return item
          });
          this.queryCondition = JSON.parse(res['QueryCondition']);
        }
        this.onGetPageData();
        this.getDataTimer = setInterval(() => {
          this.onGetPageData();
        }, 120000);
        window.addEventListener('resize', this.onCalculate);
      });
    });
  },
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
    'el-select': Select,
    'el-option': Option,
  },
  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];
    },
  },
  watch: {
    '$route.params.groupIndex'(newVal) {
      if (newVal) {
        this.groupIndex = newVal;
      } else {
        this.groupIndex = -1;
      }
      this.onGetPageData();
    }
  },
  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;
      }
    }
  }
}

.selectBox {
  :deep(.el-select) {
    .el-input__inner {
      border: none;
    }

    .el-input__suffix {
      visibility: hidden;
    }

    .el-select-dropdown {
      text-align: left;

      span {
        font-size: 16px;
      }
    }

    .el-select__tags-text {
      font-size: 16px;
    }
  }
}
</style>