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

<template>
  <div id="big-screen" ref="appRef">
    <topBackground></topBackground>
    <Title @show-done="$refs['done'].show()"></Title>
    <toDo ref="toDo"
          @step-click="stepClick"
          @callback="e => {
             $refs['callback'].setId(e.id)
             $refs['callback'].setType('add')
             $refs['callback'].show()
           }"></toDo>
    <doing ref="doing"
           @step-click="stepClick"
           @callback="e => {
             $refs['callback'].setId(e.id)
             $refs['callback'].setType('add')
             $refs['callback'].show()
           }"></doing>
    <done ref="done" @step-click="stepClick"></done>
    <detailTransfer ref="detailTransfer"
                    @start="start"
                    @pause="pause"
                    @refresh="getTransfer(true)"></detailTransfer>
    <callback ref="callback"></callback>
  </div>
</template>

<script>
import callback from "@/views/bigScreen1/component/callback.vue";
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 done from "@/views/bigScreen1/component/done.vue";
import detailTransfer from "@/views/bigScreen1/component/detailTransfer.vue";
import { index } from "@/api/system/baseForm";
import { refreshTransferTime } from "@/settings";
export default {
  components: {
    callback,
    topBackground,
    Title,
    toDo,
    doing,
    done,
    detailTransfer
  },
  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: {
    start () {
      this.$refs['toDo'].isPaused = false;
      this.$refs['doing'].isPaused = false;
      console.log('start',this.$refs['toDo'].isPaused)
    },
    pause () {
      this.$refs['toDo'].isPaused = true;
      this.$refs['doing'].isPaused = true;
      console.log('pause',this.$refs['toDo'].isPaused)
    },
    stepClick ({ data, isDetail }) {
      this.$refs['detailTransfer'].setData(data);
      this.$refs['detailTransfer'].readonly = isDetail;
      this.$refs['detailTransfer'].show();
    },

    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();
        let transfers1 = [];
        let transfers2 = [];
        let transfers3 = [];
        const res = (
          await index({
            table_name: "transfers",
            page: 1,
            page_size: 9999,
            sort_name: "start_time",
            sort_type: "asc",
            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 || i.status === 4) {
            transfers1.push(i)
          }
          if (i.status === 5 || i.status === 6) {
            transfers2.push(i)
          }
          if (i.status === 7) {
            transfers3.push(i)
          }
        })
        this.transfers1 = transfers1;
        this.transfers2 = transfers2;
        this.transfers3 = transfers3;
      } 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: "eq",
                  value: "2"
                }
              ]
            },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: 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>