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

<template>
  <Box title="消息通知">
    <div class="l-flex__fill l-flex--col c-messageNotice">
      <div class="l-flex__none l-flex--row c-messageNotice__header">
        <div class="l-flex__none col__time">时间</div>
        <div class="l-flex__fill col__deviceName">设备名称</div>
        <div class="l-flex__none col__type">类型</div>
        <div class="l-flex__none col__handle">处理方式</div>
        <div class="l-flex__none col__status">处理结果</div>
      </div>
      <status-wrapper
        v-if="listData.length === 0"
        class="l-flex__fill l-flex--row center"
      />
      <template v-else>
        <div class="l-flex__fill u-relative">
          <div class="c-messageNotice__newList">
            <div
              v-for="item in newAlarmList.slice(0, 4)"
              :key="item.id"
              class="l-flex--row c-messageNotice__item new"
            >
              <div class="l-flex__none col__time l-flex--row center">
                <svg-icon
                  class="alarm__icon"
                  icon-class="v0-alarm"
                  :style="{ color: colors[item.level] }"
                />
                <div>{{ item.happenTime }}</div>
              </div>
              <div class="l-flex__fill col__deviceName">
                <auto-text
                  class="u-text--center"
                  :text="item.deviceName"
                />
              </div>
              <div class="l-flex__none col__type">
                <auto-text
                  class="u-text--center"
                  :text="item.type"
                />
              </div>
              <div class="l-flex__none col__handle">
                <auto-text
                  class="u-text--center"
                  :text="item.handle"
                />
              </div>
              <div class="l-flex__none col__status">
                <auto-text
                  class="u-text--center"
                  :text="item.status.label"
                />
              </div>
            </div>
          </div>
          <div class="c-messageNotice__list">
            <vue-seamless-scroll
              ref="seamlessScroll"
              :data="listData"
              :class-option="classOption"
            >
              <div
                v-for="item in listData"
                :key="item.id"
                class="l-flex--row c-messageNotice__item"
              >
                <div class="l-flex__none col__time l-flex--row center">
                  <svg-icon
                    class="alarm__icon"
                    icon-class="v0-alarm"
                    :style="{ color: colors[item.level] }"
                  />
                  <div>{{ item.happenTime }}</div>
                </div>
                <div class="l-flex__fill col__deviceName">
                  <auto-text
                    class="u-text--center"
                    :text="item.deviceName"
                  />
                </div>
                <div class="l-flex__none col__type">
                  <auto-text
                    class="u-text--center"
                    :text="item.type"
                  />
                </div>
                <div class="l-flex__none col__handle">
                  <auto-text
                    class="u-text--center"
                    :text="item.handle"
                  />
                </div>
                <div class="l-flex__none col__status">
                  <auto-text
                    class="u-text--center"
                    :text="item.status.label"
                  />
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </template>
    </div>
  </Box>
</template>

<script>
import { getDeviceAlarms } from '@/api/device'
import { addTenant } from '@/api/base'
import { parseTime } from '@/utils/index.js'
import VueSeamlessScroll from 'vue-seamless-scroll'
import Box from './Box'

const isTest = false

export default {
  components: {
    Box,
    VueSeamlessScroll
  },
  props: {
    deviceList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      classOption: {
        step: 0.4,
        hoverStop: false
      },
      listData: [],
      newAlarmList: [],
      colors: ['#04A681', '#FFA000', '#F40645']
    }
  },
  created () {
    this.getDeviceAlarms()
    this.$timer = setInterval(this.getDeviceAlarms, 10000)
  },
  beforeDestroy () {
    clearTimeout(this.$timer)
  },
  methods: {
    getTag (value) {
      switch (value) {
        case 0:
          return {
            type: 'danger',
            label: '否'
          }
        case 1:
          return {
            type: 'success',
            label: '是'
          }
        default:
          return {
            label: '-'
          }
      }
    },
    getDeviceAlarms () {
      getDeviceAlarms(
        addTenant({
          pageIndex: 1,
          pageSize: 100
        })
      ).then(({ data }) => {
        if (isTest) {
          if (this.$rupdate) {
            if (!this.deviceList.length) { return }
            if (this.newAlarmList.length > 1) {
              this.newAlarmList = []
              return
            }
            data = this.listData.slice()
            const newAlarm = this.deviceList[Math.floor(Math.random() * this.deviceList.length)]
            data.push({
              id: new Date().valueOf(),
              deviceName: newAlarm.name,
              level: 2,
              happenTime: parseTime(new Date()),
              deviceId: newAlarm.id,
              type: '设备上线',
              handle: '未干预',
              status: {
                label: '-'
              }
            })
          } else {
            this.$rupdate = true
          }
        }
        if (!data.length) {
          return
        }
        const length = data.length
        const lastId = this.listData[0]?.id
        let emit = false
        for (let i = 0; i < length; i++) {
          const item = data[i]
          if (item.id === lastId) {
            break
          }
          if (item.level === 2) {
            this.newAlarmList.unshift(item)
            if (!emit) {
              this.$emit('new-alarm', item)
              emit = true
            }
          }
        }

        this.listData = data
      })
    }
  }
}
</script>

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

  &__list {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

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

    &.new {
      color: #f40645;
      font-weight: bold;
    }
  }

  &__header,
  &__item {
    font-size: 18px;
    line-height: 60px;
    text-align: center;
  }

  .alarm__icon {
    width: 19px;
    height: 19px;
    transform: translateY(-2px);
  }

  .col {
    &__time {
      width: 200px;
    }
    &__type {
      width: 250px;
    }

    &__handle {
      width: 120px;
    }

    &__status {
      width: 120px;
    }
  }

  &__newList {
    animation: sparkle 2s linear infinite;
    &:hover {
      animation: none;
    }
  }

  @keyframes sparkle {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
</style>