feat: support alarm strategy configuration

.env.development

@@ -11,9 +11,6 @@ VUE_APP_GATEWAY = 'isoc.artaplay.com:8443'
 # 71服务器
 # VUE_APP_GATEWAY = 'isoc.artaplay.com:7443'
 # VUE_APP_KEYCLOAK_OPTIONS_REALM = 'smsb-test'
-# aliyun
-# VUE_APP_GATEWAY = 'msr.idms.top'
-# VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.idms.top/auth'
 # 徐州
 # VUE_APP_GATEWAY = 'msr.rondochina.com:6443'
 # VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.rondochina.com:6443/auth'

src/components/table/Table/Column.vue

@@ -17,6 +17,7 @@ export default {
       return h('el-table-column', {
         props: {
           width: 50,
+          'label-class-name': 'o-refresh-header',
           ...props
         },
         scopedSlots: {

src/constant.js

@@ -112,3 +112,12 @@ Object.values(RoleAccess).forEach(roles => {
     roles.push(Access.VIEW_CAMERAS)
   }
 })
+
+export const AlarmStrategy = {
+  note: '短信',
+  email: '邮件',
+  wechat: '微信',
+  wechatApplet: '小程序'
+}
+
+export const AlarmStrategies = ['note', 'email', 'wechat', 'wechatApplet']

src/scss/bem/_component.scss

@@ -236,6 +236,12 @@
   & + &.far {
     margin-left: $spacing  !important;
   }
+
+  &--v {
+    & + & {
+      margin-top: 10px !important;
+    }
+  }
 }
 
 .c-tabs {

src/scss/bem/_object.scss

@@ -185,6 +185,10 @@
   }
 }
 
+.o-refresh-header.cell {
+  display: inline-flex !important;
+}
+
 .o-refresh {
   color: $gray;
   font-size: 24px;

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

@@ -10,9 +10,13 @@
 <script>
 import { getDeviceAlarms } from '@/api/device'
 import { createListOptions } from '@/utils'
-import { AssetType } from '@/constant'
+import {
+  AssetType,
+  AlarmStrategy,
+  AlarmStrategies
+} from '@/constant'
 
-const Alarms = {
+const Alarm = {
   0: '疑似黑屏',
   1: '设备离线',
   2: '屏幕拓扑结构异常',
@@ -26,13 +30,6 @@ const Alarms = {
   1000: '分割器异常'
 }
 
-function getAlarmType (type) {
-  if (type >= 1101 && type <= 1116) {
-    return '分割器异常'
-  }
-  return Alarms[type] || '-'
-}
-
 export default {
   name: 'DeviceAlarm',
   props: {
@@ -52,26 +49,31 @@ export default {
         cols: [
           { type: 'refresh' },
           { prop: 'asset', label: '截图', type: 'asset', on: this.onView },
-          { prop: 'type', label: '告警类型' },
+          { prop: 'type', label: '类型' },
           { prop: 'handle', label: '处理方式' },
           { prop: 'status', label: '处理结果', type: 'tag' },
-          { prop: 'note', label: '短信通知', type: 'tag' },
-          { prop: 'email', label: '邮件通知', type: 'tag' },
-          { prop: 'happenTime', label: '告警时间' }
+          ...AlarmStrategies.map(key => {
+            return {
+              prop: key,
+              label: `${AlarmStrategy[key]}通知`,
+              type: 'tag'
+            }
+          }),
+          { prop: 'happenTime', label: '时间', 'min-width': 120 }
         ]
       }
     }
   },
   methods: {
-    transform ({ pic, picUrl, type, handle, status, note, email, happenTime }) {
-      return {
+    transform ({ pic, picUrl, type, handle, status, happenTime, ...data }) {
+      const alarm = {
         asset: pic && picUrl
           ? {
             type: AssetType.IMAGE,
             url: picUrl
           }
           : null,
-        type: getAlarmType(type),
+        type: this.getType(type),
         handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][handle] || '-',
         status: handle <= 2 && status <= 2
           ? {
@@ -79,16 +81,34 @@ export default {
             label: ['处理中', '成功', '失败'][status]
           }
           : null,
-        note: {
-          type: ['danger', 'success'][note],
-          label: ['否', '是'][note]
-        },
-        email: {
-          type: ['danger', 'success'][email],
-          label: ['否', '是'][email]
-        },
         happenTime
       }
+      AlarmStrategies.forEach(key => {
+        alarm[key] = this.getTag(data[key])
+      })
+      return alarm
+    },
+    getType (type) {
+      if (type >= 1101 && type <= 1116) {
+        return '分割器异常'
+      }
+      return Alarm[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/realm/tenant/Tenant.vue

@@ -54,6 +54,36 @@
         </template>
       </div>
     </confirm-dialog>
+    <confirm-dialog
+      ref="strategyDialog"
+      title="告警设置"
+      @confirm="onSaveStrategy"
+    >
+      <div class="u-align-self--center">
+        <div
+          v-for="strategy in strategies"
+          :key="strategy.level"
+          class="c-sibling-item--v far"
+        >
+          <div class="c-sibling-item--v u-bold">{{ strategy.name }}</div>
+          <div class="l-flex--row c-sibling-item--v">
+            <div
+              v-for="option in strategy.options"
+              :key="option.key"
+              class="c-sibling-item far"
+            >
+              <span class="c-sibling-item">{{ option.label }}</span>
+              <el-switch
+                v-model="option.value"
+                class="c-sibling-item"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </confirm-dialog>
   </wrapper>
 </template>
 
@@ -65,6 +95,10 @@ import {
   updateGroup,
   deleteGroup
 } from '@/api/user'
+import {
+  getInformStrategy,
+  updateInformStrategy
+} from './api'
 import { unbindDevices } from '@/api/device'
 
 export default {
@@ -94,14 +128,16 @@ export default {
                 label: aiAudit === '1' ? '开启' : '关闭'
               }
           } },
-          { type: 'invoke', width: 180, render: [
+          { type: 'invoke', width: 240, render: [
             { label: '编辑', on: this.onEdit },
+            { label: '告警设置', render ({ parentGroup }) { return !parentGroup }, on: this.onStrategy },
             { label: '新增下级', render ({ parentGroup }) { return !parentGroup }, on: this.onAddSub },
             { label: '删除', on: this.onDel }
           ] }
         ]
       },
-      group: {}
+      group: {},
+      strategies: []
     }
   },
   methods: {
@@ -206,7 +242,32 @@ export default {
             this.$closeLoading(loading)
           })
       })
+    },
+    onStrategy ({ path }) {
+      this.$tenant = path
+      getInformStrategy(path).then(data => {
+        console.log(data)
+        this.strategies = data
+        this.$refs.strategyDialog.show()
+      })
+    },
+    onSaveStrategy (done) {
+      const strategies = {}
+      this.strategies.forEach(({ level, options }) => {
+        const strategy = {}
+        options.forEach(({ key, value }) => {
+          strategy[key] = value
+        })
+        strategies[level] = strategy
+      })
+      updateInformStrategy(this.$tenant, strategies).then(done)
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.o-strategy-name {
+  width: 60px;
+}
+</style>

src/views/realm/tenant/api.js

@@ -0,0 +1,49 @@
+import {
+  send,
+  update
+} from '@/api/base'
+import {
+  AlarmStrategy,
+  AlarmStrategies
+} from '@/constant'
+
+const AlarmLevel = {
+  0: '提示性预警',
+  1: '中级预警',
+  2: '紧急预警'
+}
+
+export function getInformStrategy (tenant) {
+  return send({
+    url: '/device/informStrategy',
+    method: 'GET',
+    params: { tenant }
+  }).then(({ data: { strategy } }) => Object.keys(strategy).sort().map(key => {
+    return {
+      level: key,
+      name: AlarmLevel[key],
+      options: getStrategyOptions(strategy[key])
+    }
+  }))
+}
+
+function getStrategyOptions (strategy) {
+  return AlarmStrategies.map(key => {
+    return {
+      key,
+      label: AlarmStrategy[key],
+      value: strategy[key]
+    }
+  })
+}
+
+export function updateInformStrategy (tenant, strategy) {
+  return update({
+    url: '/device/informStrategy',
+    method: 'POST',
+    data: {
+      tenant,
+      strategy
+    }
+  })
+}