water-dispatch-web/src/views/bigScreen/component/transferBoard.vue

<template>
  <div class="board-item-container" ref="board-item-container">
    <div
      class="board-item-container-item"
      v-for="(item,index) in rows"
      :key="`${item.id}-${item.scroll}`"
      :style="`
                height: ${heights[index]}px;
                line-height: ${heights[index]}px;
                transition: all .2s;
              `"
      @click="showDetail(item)">
      <dv-border-box-13 style="width: 100%;height: 100%;min-height: .5px;" :style="{ 'opacity': heights[index] ? 1 : 0}">
        <div style="width: 100%;height: 100%;padding: 30px 20px;line-height: 1;" class="d-flex flex-column jc-between flex-1">
          <div class="board-item__top d-flex jc-between ai-center">
            <dv-decoration-11 style="width: 160px;height: 48px;">{{typeMap.get(item.status)}}</dv-decoration-11>
            <p class="fw-b equipment-name">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
          </div>
          <div class="board-item__bottom d-flex jc-between ai-start">
            <div class="time-info">
              <div v-for="(label,key) in contentLK" style="display: inline-block;">
                {{label}}：{{ $moment(item[key]).format('YYYY-MM-DD HH:mm') || '-' }}
              </div>
              <div v-if="setTransferStatusNumber === 4" :style="{ 'color': lastTimeColor($moment(new Date(item.start_time)).diff($moment(time),'minutes')) }">
                倒计时：{{ $moment(new Date(item.start_time)).diff($moment(time),'minutes') }}分
              </div>
            </div>
            <div v-if="setTransferStatusNumber !== -1" @click.stop="showDetail(item)">
              <dv-border-box-8 reverse class="fw-b text-center" style="width: 64px;height: 38px;line-height: 38px;cursor: pointer;"
              >{{setStatusText}}</dv-border-box-8>
            </div>
          </div>
        </div>
      </dv-border-box-13>
    </div>

  </div>
</template>

<script>
import { deepCopy } from "@/utils";
import { save } from "@/api/system/baseForm";

export default {
  inject: ['showModal'],
  props: {
    transfers: Array,
    setTransferStatusNumber: Number,
    contentLK: Object,
  },
  data() {
    return {
      nowRow: {},
      dom: '',
      needCalc: false,
      rowNum: 4,
      height: 0,
      width: 0,
      avgHeight: 0,
      updater: 0,
      animationIndex: 0,
      heights: [],
      animationHandler: '',
      copyTransfers: [],
      rows: [],
      typeMap: new Map([
        [1,'待下发'],
        [2,'已下发'],
        [3,'待执行'],
        [4,'执行中'],
        [5,'已取消'],
        [6,'已完成']
      ]),
      time: new Date(),
      timer: null
    }
  },
  methods: {
    showDetail (item) {
      this.nowRow = deepCopy(item);
      console.log(this.nowRow)
      this.$emit('showDetail',item)
    },

    setTransferStatus (data) {
      const { status, start_sign, end_sign } = data;

      let copyRow = deepCopy(this.nowRow);
      if (status === 4) {
        copyRow.act_start_time = this.$moment().format('YYYY-MM-DD HH:mm')
        copyRow.start_sign = start_sign
      }
      if (status === 6) {
        copyRow.act_end_time = this.$moment().format('YYYY-MM-DD HH:mm')
        copyRow.end_sign = end_sign
      }
      copyRow.status = status;
      for (let key in copyRow) {
        if (/_relation/g.test(key)) {
          delete copyRow[key]
        }
      }
      save({
        table_name: 'transfers',
        ...copyRow
      }).then(_ => {
        this.$emit('refresh')
      })
    },


    initWH (resize = true) {
      const { $nextTick, $refs, onResize } = this

      return new Promise(resolve => {
        $nextTick(_ => {
          const dom = this.dom = $refs['board-item-container']

          this.width = dom ? dom.clientWidth : 0
          this.height = dom ? dom.clientHeight : 0

          if (!dom) {
            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
          } else if (!this.width || !this.height) {
            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
          }

          if (typeof onResize === 'function' && resize) onResize()

          resolve()
        })
      })
    },
    calcHeights (onresize = false) {
      const { height, rowNum } = this

      let allHeight = this.height

      const avgHeight = allHeight / rowNum

      this.avgHeight = avgHeight

      if (!onresize) this.heights = new Array(this.transfers.length).fill(avgHeight)

    },
    async animation (start = false) {
      const { needCalc, calcHeights } = this

      if (needCalc) {
        calcHeights()
        this.needCalc = false;
      }

      let { avgHeight, animationIndex, mergedConfig, animation, updater } = this

      const { waitTime, carousel, rowNum } = {
        waitTime: 5000,
        carousel: 'single',
        rowNum: this.rowNum
      }

      const rowLength = this.copyTransfers.length

      if (rowNum >= rowLength) return

      if (start) {
        await new Promise(resolve => setTimeout(resolve, waitTime))
        if (updater !== this.updater) return
      }


      const animationNum = carousel === 'single' ? 1 : rowNum
      let rows = this.copyTransfers.slice(animationIndex)
      rows.push(...this.copyTransfers.slice(0, animationIndex))

      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
      this.heights = new Array(rowLength).fill(this.avgHeight)

      await new Promise(resolve => setTimeout(resolve, 300))
      if (updater !== this.updater) return

      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))

      animationIndex += animationNum

      const back = animationIndex - rowLength
      if (back >= 0) animationIndex = back

      this.animationIndex = animationIndex
      this.animationHandler = setTimeout(animation, waitTime - 300)
    },
    stopAnimation () {
      const { animationHandler, updater } = this

      this.updater = (updater + 1) % 999999

      if (!animationHandler) return

      clearTimeout(animationHandler)
    },
  },
  computed: {
    setStatusText () {
      if (this.setTransferStatusNumber === 4) return '执行';
      if (this.setTransferStatusNumber === 6) return '关闭';
    },
    lastTimeColor () {
      return function (min) {
        if (min <= 0) {
          return "red"
        } else if (min > 0 && min <= 5) {
          return "orange"
        } else {
          return "#eee"
        }
      }
    },
  },
  watch: {
    async transfers(val) {
      const h = this.$createElement;
      if (val && val.length > 0) {
        this.rows = val.map((i,index) => ({...i,scroll: index}))
        this.copyTransfers = deepCopy(val);
        await this.$nextTick();
        await this.initWH(false);
        this.calcHeights();
        await this.animation(true);

        this.timer = setInterval(() => {
          this.time = new Date()

          this.rows.forEach(item => {
            if (item.status === 2) {
              let lastMins = this.$moment(new Date(item.start_time)).diff(this.$moment(),'minutes')
              if (lastMins === 3) {
                this.showModal(true,h('div',[
                  h('p',item.equipment_id_equipments_id_relation?.name),
                  h('p',item.content),
                  h('p',`开始时间：${this.$moment(item.start_time).format('YYYY-MM-DD HH:mm')}`)
                ]))
              }
            }
            if (item.status === 4) {
              let lastMins = this.$moment(new Date(item.end_time)).diff(this.$moment(),'minutes')
              if (lastMins === 3) {
                this.showModal(true,h('div',[
                  h('p',item.equipment_id_equipments_id_relation?.name),
                  h('p',item.content),
                  h('p',`结束时间：${this.$moment(item.end_time).format('YYYY-MM-DD HH:mm')}`)
                ]))
              }
            }
          })
        },1000 * 60)
      } else {
        this.rows = []
        this.copyTransfers = []
        await this.$nextTick();
        await this.initWH(false);
        this.calcHeights();
        await this.animation(true);
      }
    }
  },
  async mounted() {
  },
  destroyed () {
    clearInterval(this.timer)
    this.$bus.$off('transferSave')
    const { stopAnimation } = this

    stopAnimation();
  }
}
</script>

<style scoped lang="scss">
.board-item {
  width: 31%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .equipment-name {
    font-size: 18px;
    letter-spacing: 1px;
  }
  &__title {
    width: 40%;
    height: 44px;
    text-align: center;
    font-size: 17px;
    line-height: 44px;
    flex: 0;

    margin: auto;
    margin-top: 20px;
  }
  &-container {
    overflow: hidden;
    flex: 1;

    margin-top: 20px;

    &-item {
      width: 100%;
    }
  }
  .time-info {
    line-height: 1.5;
    width: 86%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
  }
}
::v-deep .row-item .ceil {
  width: 100%;
}

::v-deep .box-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1;

  padding: 30px 12px;

  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 10px 0 10px;

    & > div:nth-child(1) {
      background: #eccb77;
      border-radius: 30px;
      color: #333;
      padding: 6px 10px;
      font-weight: 600;
    }
    & > div:nth-child(2)  {
      font-weight: 600;
      font-size: 17px;
    }
  }
  &-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 10px 10px 0 10px;

    span {
      color: $primaryColor;
    }
    & > div:nth-child(1) {
      text-align: left;
      line-height: 2;
      font-size: 16px;
      font-weight: 600;
    }
    & > div:nth-child(2) {
      cursor: pointer;
      line-height: 2;
      font-size: 15px;
      font-weight: 600;
      background: $primaryColor;
      border-radius: 8px;
      border: 2px solid rgb(119, 232, 250);

      padding: 0 8px;
    }

  }
}
</style>