smsb-web-develop/src/views/dashboard/v1/DeviceCalender.vue

<template>
  <box title="各大屏当前播放节目">
    <div class="l-flex__fill l-flex--col c-calendar u-text-center">
      <div class="l-flex__none l-flex--row c-calendar__header">
        <div class="col__deviceName">设备名称</div>
        <div class="col__programName">节目名称</div>
        <div class="col__calender">时间排期</div>
        <div class="col__createTime">更新时间</div>
        <div class="col__status">状态</div>
      </div>
      <div class="l-flex__fill u-relative">
        <div class="c-calendar__list">
          <vue-seamless-scroll
            :data="tableData"
            :class-option="classOption"
          >
            <div
              v-for="item in tableData"
              :key="item.id"
              class="l-flex--row c-calendar__item"
            >
              <div class="col__deviceName">
                <auto-text
                  class="u-text-center"
                  :text="item.name"
                />
              </div>
              <div class="col__programName">
                <auto-text :text="item.programName" />
              </div>
              <div class="col__calender">
                <auto-text :text="item.programDesc" />
              </div>
              <div class="col__createTime">
                <auto-text :text="item.updateTime" />
              </div>
              <div class="col__status o-red">{{ item.status }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </box>
</template>

<script>
import { getTimelines } from './api'
import {
  isHit,
  toDate,
  getEventDescription
} from '@/utils/event'
import VueSeamlessScroll from 'vue-seamless-scroll'
import Box from './Box'

export default {
  name: 'DeviceCalender',
  components: {
    VueSeamlessScroll,
    Box
  },
  props: {
    deviceList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      classOption: {
        step: 0.5,
        hoverStop: false
      },
      programMap: null
    }
  },
  computed: {
    tableData () {
      const map = this.programMap
      return this.deviceList.map(({ id, name, onlineStatus }) => {
        const data = map ? map[id] : null
        return {
          id, name,
          updateTime: data ? data.updateTime : '-',
          programName: map
            ? data?.event?.target.name || '暂无节目'
            : '查询中...',
          programDesc: map && data?.event ? getEventDescription(data.event) : '-',
          status: onlineStatus === 1 && map && data?.event ? '在播' : ''
        }
      })
    }
  },
  watch: {
    deviceList: {
      handler () {
        if (this.deviceList.length) {
          this.getTimelines()
        }
      },
      immediate: true
    }
  },
  methods: {
    getTimelines () {
      getTimelines(this.deviceList.map(i => i.id), { custom: true }).then(
        data => {
          const map = {}
          data.forEach(({ deviceId, updateTime, eventDetail }) => {
            map[deviceId] = {
              updateTime,
              event: this.getCurrentEvent(eventDetail)
            }
          })
          this.programMap = map
        }
      )
    },
    getCurrentEvent (events) {
      if (events.length) {
        const now = new Date()
        const timeline = events.filter(({ until }) => !until || now < new Date(until)).sort((a, b) => {
          if (b.priority === a.priority) {
            return toDate(a.start) - toDate(b.start)
          }
          return b.priority - a.priority
        })
        for (let i = 0; i < timeline.length; i++) {
          const event = timeline[i]
          if (isHit(event, now)) {
            return event
          }
        }
      }
      return null
    }
  }
}
</script>

<style lang="scss" scoped>
.c-calendar {
  &__header {
    color: #9ea9cd;
    background-color: #313a5a;
  }

  &__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__item {
    color: #ffffff;
    border-bottom: 1px solid #313a5a;
  }

  &__header,
  &__item {
    font-size: 18px;
    line-height: 60px;
    text-align: center;
  }
  .alarm__icon {
    width: 19px;
    height: 19px;
    transform: translateY(-2px);
  }

  .col {
    &__deviceName {
      flex: 1;
      min-width: 0;
    }

    &__programName {
      flex: 1;
      min-width: 0;
    }

    &__calender {
      flex: 2;
      min-width: 0;
    }

    &__createTime {
      flex: 1;
      min-width: 0;
    }

    &__status {
      width: 50px;

      &.o-red {
        color: #f40645;
      }
    }
  }
}
</style>