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;
              `">
      <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: 38px;">{{typeMap.get(item.status)}}</dv-decoration-11>
            <p class="fw-b">{{ 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 style="line-height: 1.5;">
              <div class="start-time">
                执行时间：{{ item.start_time }}
              </div>
              <div class="final-time">
                倒计时：{{ $moment(new Date(item.start_time)).diff($moment(),'minutes') }}分
              </div>
            </div>
            <div v-if="setTransferStatusNumber !== -1" @click="setTransferStatus(4,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 {
  props: {
    transfers: Array,
    setTransferStatusNumber: Number
  },
  data() {
    return {
      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,'已完成']
      ])
    }
  },
  methods: {
    setTransferStatus (status,row) {
      if (!this.setTransferStatusNumber) {
        console.warn('setTransferStatusNumber is required')
        return
      }
      let copyRow = deepCopy(row);
      copyRow.status = this.setTransferStatusNumber;
      for (let key in copyRow) {
        if (/_relation/g.test(key)) {
          delete copyRow[key]
        }
      }
      save({
        table_name: 'transfers',
        ...copyRow
      }).then(_ => {})
    },


    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 '完成';
    }
  },
  watch: {
    async transfers(val) {
      if (val && val.length > 0) {
        this.rows = val.map((i,index) => ({...i,scroll: index}))
        this.copyTransfers = deepCopy(val);
        await this.initWH(false);
        this.calcHeights();
        await this.animation(true);
      }
    }
  },
  async mounted() {
  },
  destroyed () {
    const { stopAnimation } = this

    stopAnimation();
  }
}
</script>

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

  &__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%;
    }
  }
}
::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>