bigScreen/src/views/pageOperation/rightMid/index.vue

<template>
  <div class="w-[116.94vh] h-[85.8vh] bgRightMidBox">
    <div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh]">
      <div class="h-[4.44vh] leading-[4.44vh] text-center bg-[#322369]">
        <div class="inline-block">
          <div class="inline-block w-[5.11vh] text-[#AAAAAA] text-[1.48vh]">
            手术间
          </div>
          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">
            人员
          </div>
          <div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">
            手术名称
          </div>
          <div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">
            申请类型
          </div>
          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
            入手术室时间
          </div>
          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
            麻醉开始时间
          </div>
          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">
            手术开始时间
          </div>
          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">
            是否准点
          </div>
        </div>
      </div>
      <div class="h-[72.58vh]">
        <el-carousel
          direction="vertical"
          :autoplay="true"
          :interval="15000"
          indicatorPosition="none"
        >
          <el-carousel-item v-for="(item, index) in scheduList" :key="index">
            <template v-for="(subItem, index) in item">
              <div
                class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle"
                :key="index"
              >
                <div class="inline-block">
                  <div
                    class="inline-block align-top w-[5.11vh] text-[1.48vh] panmen"
                  >
                    {{ subItem["roomName"] }}
                  </div>
                  <div class="inline-block align-top w-[11.11vh] text-[1.48vh]">
                    {{ subItem["patientName"] }}
                  </div>
                  <div
                    class="inline-block align-top w-[16.51vh] text-[1.48vh] px-1"
                  >
                    <marquee scrollamount="2">{{
                      subItem["operationName"]
                    }}</marquee>
                  </div>
                  <div
                    class="inline-block align-middle w-[13.11vh] text-[1.48vh]"
                  >
                    <img
                      class="mx-auto"
                      src="@/assets/svg/Operation/RightMid/Emergency.svg"
                      v-if="subItem['OperationType']"
                    />
                    <img
                      class="mx-auto"
                      src="@/assets/svg/Operation/RightMid/Other.svg"
                      v-else
                    />
                  </div>
                  <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
                    {{ formatData(subItem["inDateTime"]) }}
                  </div>
                  <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
                    {{ formatData(subItem["anesStartTime"]) }}
                  </div>
                  <div class="inline-block align-top w-[16.66vh] text-[1.48vh]">
                    {{ formatData(subItem["operStartTime"]) }}
                  </div>
                  <div
                    class="inline-block align-top w-[11.11vh] text-[1.48vh]"
                    :class="
                      subItem['IsFirstOnTime']
                        ? 'text-[#349AFC]'
                        : 'text-[#A53FAF]'
                    "
                  >
                    {{ subItem["IsFirstOnTime"] ? "准点" : "不准点" }}
                  </div>
                </div>
              </div>
            </template>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from "element-ui";
import { GetMonitorOperationCount } from "@/api/operation";
import dayjs from "dayjs";
export default {
  data() {
    return {
      scheduList: [],
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format("YYYY-MM-DD");
      if (this.$store.getters.isMock) {
        nowDay = "2024-06-06";
      }
      GetMonitorOperationCount(nowDay).then((res) => {
        this.scheduList = [];
        let group = 0;
        for (let i = 0; i < res["data"]["length"]; i++) {
          group = parseInt(i / 14);
          if (this.scheduList[group]) {
            this.scheduList[group].push(res["data"][i]);
          } else {
            this.scheduList[group] = [res["data"][i]];
          }
        }
        this.isLoading = false;
      });
    },
    formatData(date) {
      let txt = "";
      if (date) {
        txt = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      }
      return txt;
    },
  },
  mounted() {
    this.onGetPageData();
  },
  components: {
    "el-carousel": Carousel,
    "el-carousel-item": CarouselItem,
  },
};
</script>

<style lang="scss" scoped>
.bgRightMidBox {
  background-image: url("@/assets/svg/Operation/RightMid/Box.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.itemStyle {
  background: rgba(74, 78, 103, 0.15);
  box-sizing: border-box;
  border: 1px solid rgba(87, 151, 181, 0.4);
}
:deep(.el-carousel) {
  height: 100%;
  .el-carousel__item,
  .el-carousel__container {
    height: 100%;
  }
}
</style>