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

<template>
  <schema-table
    ref="table"
    class="l-flex__self"
    :schema="schema"
  >
    <preview-dialog ref="previewDialog" />
  </schema-table>
</template>

<script>
import { getDeviceAlarms } from '@/api/device'
import { createListOptions } from '@/utils'
import { SupportedAlarmStrategies } from '@/constant'

export default {
  name: 'DeviceAlarm',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      options: createListOptions({ deviceId: this.device.id }),
      schema: {
        condition: { deviceId: this.device.id },
        list: getDeviceAlarms,
        cols: [
          { type: 'refresh' },
          { prop: 'file', label: '截图', type: 'asset', on: this.onView },
          { prop: 'type', label: '类型', 'min-width': 120 },
          { prop: 'handle', label: '处理方式' },
          { prop: 'status', label: '处理结果', type: 'tag' },
          ...SupportedAlarmStrategies.map(({ key, label }) => {
            return {
              prop: key,
              label: `${label}通知`,
              type: 'tag'
            }
          }),
          { prop: 'happenTime', label: '时间', 'min-width': 120 }
        ]
      }
    }
  },
  methods: {
    onView ({ file }) {
      this.$refs.previewDialog.show(file)
    }
  }
}
</script>