smsb-web-develop/src/views/device/detail/components/DeviceAlarm.vue

<template>
  <div>
    <c-table
      :curr="options"
      @pagination="getList"
    >
      <el-table-column
        align="center"
        width="50"
      >
        <template #header>
          <i
            class="o-refresh el-icon-refresh"
            @click="getList"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="截图"
        align="center"
        class-name="c-thumbnail-col"
        width="100"
      >
        <template v-slot="scope">
          <i
            v-if="scope.row.picUrl"
            class="o-thumbnail u-pointer"
            :style="{ 'background-image': `url('${scope.row.picUrl}')` }"
            @click="toView(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="告警类型"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="handle"
        label="处理方式"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="处理结果"
        align="center"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-tag
            class="o-tag"
            :type="scope.row.status"
            size="medium"
          >
            {{ scope.row.statusTip }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="短信通知"
        align="center"
      >
        <template v-slot="scope">
          <el-tag
            class="o-tag"
            :type="scope.row.note ? 'success' : 'danger'"
            size="medium"
          >
            {{ scope.row.note ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="邮件通知"
        align="center"
      >
        <template v-slot="scope">
          <el-tag
            class="o-tag"
            :type="scope.row.email ? 'success' : 'danger'"
            size="medium"
          >
            {{ scope.row.email ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="happenTime"
        label="告警时间"
        align="center"
        show-overflow-tooltip
      />
    </c-table>
    <preview ref="preview" />
  </div>
</template>

<script>
import { getThumbnailUrl } from '@/api/asset'
import { getDeviceAlarms } from '@/api/device'
import { createListOptions } from '@/utils'
import { AssetType } from '@/constant'
import Preview from '@/components/Preview'

export default {
  name: 'DeviceAlarm',
  components: {
    Preview
  },
  props: {
    device: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      options: createListOptions({ deviceId: this.device.id })
    }
  },
  activated () {
    this.getList()
  },
  methods: {
    transform ({ pic, picUrl, type, handle, status, note, email, happenTime }) {
      return {
        picUrl: pic && picUrl ? getThumbnailUrl(picUrl) : null,
        keyName: picUrl,
        type: ['疑似黑屏', '设备离线', '屏幕拓扑结构异常'][type],
        handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][handle],
        status: ['primary', 'success', 'danger', 'primary'][status],
        statusTip: ['处理中', '成功', '失败', '无'][status],
        note, email, happenTime
      }
    },
    getList () {
      const options = this.options
      if (!options.loading) {
        options.error = false
        options.loading = true
        getDeviceAlarms(options.params).then(({ data, totalCount }) => {
          options.list = data.map(this.transform)
          options.totalCount = totalCount
        }, () => {
          options.error = true
          options.list = []
        }).finally(() => {
          options.loading = false
        })
      }
    },
    toView (alarm) {
      this.$refs.preview.show({
        type: AssetType.IMAGE,
        keyName: alarm.keyName
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-row-gap: $spacing;
  grid-column-gap: $spacing;
  align-items: start;

  &__block {
    height: 180px;
    border: 1px solid $info;
    border-radius: 2px;
  }
}
</style>