refactor: device alarm

src/api/device.js

@@ -11,6 +11,10 @@ import {
   addScope,
   addUser
 } from './base'
+import {
+  AssetType,
+  AlarmStrategies
+} from '@/constant'
 
 export function getRatiosWithUser () {
   return tenantRequest({
@@ -357,9 +361,78 @@ export function getDeviceAlarms (query) {
       pageIndex, pageSize,
       ...params
     }
+  }).then(({ data, totalCount }) => {
+    return {
+      data: data.map(({ id, deviceName, level, pic, picUrl, type, handle, status, happenTime, ...item }) => {
+        const alarm = {
+          id, deviceName, level, happenTime,
+          asset: pic && picUrl
+            ? {
+              type: AssetType.IMAGE,
+              url: picUrl,
+              thumbnail: picUrl
+            }
+            : null,
+          type: getType(type),
+          handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][handle] || '-',
+          status: handle <= 2 && status <= 2
+            ? {
+              type: ['primary', 'success', 'danger'][status],
+              label: ['处理中', '成功', '失败'][status]
+            }
+            : { label: '-' }
+        }
+        AlarmStrategies.forEach(({ key }) => {
+          alarm[key] = getTag(item[key])
+        })
+        return alarm
+      }),
+      totalCount
+    }
   })
 }
 
+const AlarmType = {
+  0: '疑似黑屏',
+  1: '设备离线',
+  2: '屏幕拓扑结构异常',
+  3: '播放非法视频',
+  4: '接收卡离线',
+  5: '发送控制设备离线',
+  6: '浪潮智能网关离线',
+  7: '屏幕监控摄像头离线',
+  8: '人流监测摄像头离线',
+  9: '设备上线',
+  10: '回采疑似',
+  11: '回采不合规',
+  12: '空档期',
+  1000: '分割器异常'
+}
+
+function getType (type) {
+  if (type >= 1101 && type <= 1116) {
+    type = 1000
+  }
+  return AlarmType[type] || '-'
+}
+
+function getTag (value) {
+  switch (value) {
+    case 0:
+      return {
+        type: 'danger',
+        label: '否'
+      }
+    case 1:
+      return {
+        type: 'success',
+        label: '是'
+      }
+    default:
+      return { label: '-' }
+  }
+}
+
 export function getTasks (query) {
   const { pageNum: pageIndex, pageSize, ...params } = query
   return request({

src/components/table/Table/Column.vue

@@ -150,7 +150,16 @@ export default {
     },
     renderTag (tag, data) {
       if (!tag) {
-        return '-'
+        return this.$createElement('span', {
+          staticClass: 'o-tag u-readonly',
+          staticStyle: { display: 'inline-block' }
+        }, '-')
+      }
+      if (!tag.type) {
+        return this.$createElement('span', {
+          staticClass: 'o-tag u-readonly',
+          staticStyle: { display: 'inline-block' }
+        }, tag.label)
       }
       const { msg } = tag
       if (msg) {

src/constant.js

@@ -124,28 +124,9 @@ export const RoleAccess = {
   ]
 }
 
-export const AlarmStrategy = {
-  note: '短信',
-  email: '邮件',
-  wechat: '微信',
-  wechatApplet: '小程序'
-}
-
-export const AlarmStrategies = ['note', 'email', 'wechat', 'wechatApplet']
-
-export const AlarmType = {
-  0: '疑似黑屏',
-  1: '设备离线',
-  2: '屏幕拓扑结构异常',
-  3: '播放非法视频',
-  4: '接收卡离线',
-  5: '发送控制设备离线',
-  6: '浪潮智能网关离线',
-  7: '屏幕监控摄像头离线',
-  8: '人流监测摄像头离线',
-  9: '设备上线',
-  10: '回采疑似',
-  11: '回采不合规',
-  12: '空档期',
-  1000: '分割器异常'
-}
+export const AlarmStrategies = [
+  { key: 'note', label: '短信' },
+  { key: 'email', label: '邮件' },
+  { key: 'wechat', label: '微信' },
+  { key: 'wechatApplet', label: '小程序' }
+]

src/views/device/detail/components/DeviceAlarm.vue

@@ -10,12 +10,7 @@
 <script>
 import { getDeviceAlarms } from '@/api/device'
 import { createListOptions } from '@/utils'
-import {
-  AssetType,
-  AlarmStrategy,
-  AlarmStrategies,
-  AlarmType
-} from '@/constant'
+import { AlarmStrategies } from '@/constant'
 
 export default {
   name: 'DeviceAlarm',
@@ -31,19 +26,19 @@ export default {
       schema: {
         condition: { deviceId: this.device.id },
         list: getDeviceAlarms,
-        transform: this.transform,
         cols: [
           { type: 'refresh' },
           { prop: 'asset', label: '截图', type: 'asset', on: this.onView },
           { prop: 'type', label: '类型', 'min-width': 120 },
           { prop: 'handle', label: '处理方式' },
-          { prop: 'status', label: '处理结果', type: 'tag' },
-          ...AlarmStrategies.map(key => {
+          { prop: 'status', label: '处理结果', type: 'tag', align: 'center' },
+          ...AlarmStrategies.map(({ key, label }) => {
             return {
               prop: key,
-              label: `${AlarmStrategy[key]}通知`,
+              label: `${label}通知`,
               type: 'tag',
-              'min-width': 100
+              'min-width': 100,
+              align: 'center'
             }
           }),
           { prop: 'happenTime', label: '时间', 'min-width': 120 }
@@ -52,51 +47,6 @@ export default {
     }
   },
   methods: {
-    transform ({ pic, picUrl, type, handle, status, happenTime, ...data }) {
-      const alarm = {
-        asset: pic && picUrl
-          ? {
-            type: AssetType.IMAGE,
-            url: picUrl
-          }
-          : null,
-        type: this.getType(type),
-        handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][handle] || '-',
-        status: handle <= 2 && status <= 2
-          ? {
-            type: ['primary', 'success', 'danger'][status],
-            label: ['处理中', '成功', '失败'][status]
-          }
-          : null,
-        happenTime
-      }
-      AlarmStrategies.forEach(key => {
-        alarm[key] = this.getTag(data[key])
-      })
-      return alarm
-    },
-    getType (type) {
-      if (type >= 1101 && type <= 1116) {
-        type = 1000
-      }
-      return AlarmType[type] || '-'
-    },
-    getTag (value) {
-      switch (value) {
-        case 0:
-          return {
-            type: 'danger',
-            label: '否'
-          }
-        case 1:
-          return {
-            type: 'success',
-            label: '是'
-          }
-        default:
-          return null
-      }
-    },
     onView (asset) {
       this.$refs.previewDialog.show(asset)
     }

src/views/device/detail/dashboard/DeviceAlarm.vue

@@ -54,7 +54,7 @@
                 {{ item.type }}
               </div>
               <div class="l-flex__fill">{{ item.handle }}</div>
-              <div class="l-flex__fill">{{ item.status }}</div>
+              <div class="l-flex__fill">{{ item.status.label }}</div>
             </div>
           </vue-seamless-scroll>
         </div>
@@ -66,7 +66,6 @@
 <script>
 import Box from './Box'
 import { getDeviceAlarms } from '@/api/device'
-import { AlarmType } from '@/constant'
 import vueSeamlessScroll from './vue-seamless-scroll.min.js'
 
 export default {
@@ -109,27 +108,12 @@ export default {
       }).then(
         ({ data }) => {
           this.error = false
-          this.listData = data.map(item => {
-            return {
-              ...item,
-              type: this.getType(item.type),
-              handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][item.handle] || '-',
-              status: item.handle <= 2 && item.status <= 2
-                ? ['处理中', '成功', '失败'][item.status] || '-'
-                : '-'
-            }
-          })
+          this.listData = data
         },
         () => {
           this.error = true
         }
       )
-    },
-    getType (type) {
-      if (type >= 1101 && type <= 1116) {
-        type = 1000
-      }
-      return AlarmType[type] || '-'
     }
   }
 }

src/views/realm/settings/api.js

@@ -3,10 +3,7 @@ import {
   update,
   send
 } from '@/api/base'
-import {
-  AlarmStrategy,
-  AlarmStrategies
-} from '@/constant'
+import { AlarmStrategies } from '@/constant'
 
 const AlarmLevel = {
   0: '提示性预警',
@@ -29,10 +26,9 @@ export function getInformStrategy (tenant) {
 }
 
 function getStrategyOptions (strategy) {
-  return AlarmStrategies.map(key => {
+  return AlarmStrategies.map(({ key, label }) => {
     return {
-      key,
-      label: AlarmStrategy[key],
+      key, label,
       value: strategy[key]
     }
   })