water-dispatch-web/src/views/bigScreen1/index.vue

<template>
  <div id="big-screen" ref="appRef">
    <topBackground></topBackground>
    <Title></Title>
    <toDo></toDo>
    <doing></doing>
  </div>
</template>

<script>
import topBackground from "@/views/bigScreen1/component/topBackground.vue";
import Title from "@/views/bigScreen1/component/title.vue";
import toDo from "@/views/bigScreen1/component/toDo.vue";
import doing from "@/views/bigScreen1/component/doing.vue";
import { index } from "@/api/system/baseForm";
import { refreshTransferTime } from "@/settings";
export default {
  components: {
    topBackground,
    Title,
    toDo,
    doing
  },
  provide() {
    return {
      transfers: (status="toDo") => {
        switch (status) {
          case "toDo":
            return this.transfers1;
          case "doing":
            return this.transfers2;
          case "done":
            return this.transfers3;
          default:
            return [];
        }
      },
      nowTime: () => this.time,
    }
  },
  data() {
    return {
      forwardRefreshTime: '',
      transfers1: [],
      transfers2: [],
      transfers3: [],

      time: this.$moment(),
      timer: null,
      transferTimer: null,
    }
  },
  methods: {
    startTime () {
      this.timer = setInterval(() => {
        this.time = this.$moment()
      },1000)
    },

    setRem () {
      const baseSize = 15;
      const scale = document.documentElement.clientWidth / 1920;
      document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";

      window.requestAnimationFrame(this.setRem)
    },

    async getTransfer(isFirst = false) {
      if (isFirst) {
        this.forwardRefreshTime = this.$moment();
        this.transfers1 = [];
        this.transfers2 = [];
        this.transfers3 = [];
        const res = (
          await index({
            table_name: "transfers",
            page: 1,
            page_size: 9999,
            filter: [
              {
                key: 'start_time',
                op: 'range',
                value: `${this.$moment().startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment().endOf('days').format('YYYY-MM-DD HH:mm:ss')}`
              },
              {
                key: 'status',
                op: 'neq',
                value: 1
              }
            ]
          },false)
        ).data;
        res.forEach(i => {
          if (i.status === 2 || i.status === 3) {
            this.transfers1.push(i)
          }
          if (i.status === 4 || i.status === 5) {
            this.transfers2.push(i)
          }
          if (i.status === 6) {
            this.transfers3.push(i)
          }
        })
      } else {
        const res = (
          (await index({
              table_name: "transfers",
              page: 1,
              page_size: 9999,
              filter: [
                {
                  key: "created_at",
                  op: "range",
                  value: `${this.forwardRefreshTime.format('YYYY-MM-DD HH:mm:ss')},${this.$moment().format('YYYY-MM-DD HH:mm:ss')}`
                },
                {
                  key: "status",
                  op: "range",
                  value: "2,3"
                }
              ]
            },false)
          ).data);
        if (res.length > 0) {
          this.transfers1.push(...res)
        }
        this.forwardRefreshTime = this.$moment()
      }
    }
  },
  computed: {},
  created() {
    this.setRem();
    window.onresize = this.setRem;
    this.getTransfer(true);
    this.transferTimer = setInterval(() => {
      this.getTransfer()
    },refreshTransferTime)
  },
  mounted() {
    this.startTime()
  },
  destroyed() {
    window.onscroll = null;
    document.documentElement.style.fontSize = "15px";
    clearInterval(this.timer);
    clearInterval(this.transferTimer);
  }
}
</script>

<style scoped lang="scss">
#big-screen {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100vw;
  height: 100vh;

  z-index: 2;
  position: relative;
}
</style>
<style lang="scss">
#app:has(#big-screen) {
  .app-main {
    padding: 0;
  }
  .app-wrapper {
    overflow: hidden!important;
  }
  .main-container {
    margin: 0;
  }
  .sidebar-container,.fixed-header {
    display: none;
  }
}
</style>