add terminal/alarm page

xiuosiot-frontend/src/api/terminal/alarm.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/alarmInfo/select',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/alarmInfo/update',
+    method: 'post',
+    data
+  })
+}

xiuosiot-frontend/src/views/terminal/alarm/index.vue

@@ -7,56 +7,87 @@
           <div id="chart" class="chart" />
           <div class="data-box">
             <div class="data">
-              <p class="desc">告警数(7日)</p>
-              <h1 class="num">17</h1>
+              <p class="desc">告警数</p>
+              <h1 class="num" @click="getList()">{{ alarmNum }}</h1>
             </div>
             <div class="data">
-              <p class="desc">未处理告警数(7日)</p>
-              <h1 class="num">8</h1>
+              <p class="desc">未处理告警数</p>
+              <h1 class="num" @click="getList('',1)">{{ unprocessedAlarmNum }}</h1>
             </div>
           </div>
         </div>
         <div class="header_right">
           <div class="data">
             <p class="desc">紧急</p>
-            <h1 class="num emergency">6</h1>
+            <h1 class="num emergency" @click="getList(0)">{{ emergencyNum }}</h1>
           </div>
           <div class="data">
             <p class="desc">重要</p>
-            <h1 class="num important">1</h1>
+            <h1 class="num important" @click="getList(1)">{{ importantNum }}</h1>
           </div>
           <div class="data">
             <p class="desc">次要</p>
-            <h1 class="num minor">8</h1>
+            <h1 class="num minor" @click="getList(2)">{{ minorNum }}</h1>
           </div>
           <div class="data">
             <p class="desc">提示</p>
-            <h1 class="num info">1</h1>
+            <h1 class="num info" @click="getList(3)">{{ infoNum }}</h1>
           </div>
         </div>
       </div>
     </el-card>
-    <el-col :span="12">
+    <el-col v-for="(item,index) in alarmList" :key="index" :span="12" style="padding:15px 10px">
       <div class="alarm-container">
         <div class="img-box">
-          <img src="">
+          <img :src="item.url" width="130px">
         </div>
         <div class="content">
-          <p>{{ '设备序列号：test1' }}</p>
-          <p>{{ '报警时间：2022/08/18' }}</p>
-          <p>状态：<span>未处理</span>报警名称：<span>{{ '文本文本文本文本' }}</span></p>
-          <p><span>内核序列号： 1234567890</span><span>设备类型：gateway</span></p>
+          <p class="no">{{ '设备序列号：'+item.deviceNo }}</p>
+          <p class="date">{{ '报警时间：'+item.alarmTime }}</p>
+          <p :class="item.alarmStatus===0?'processed':'unprocessed'">{{ '状态：'+item.statusDesc }}<span class="alarm_name">{{ '报警名称：'+item.alarmName }}</span></p>
+          <p>
+            <span class="type"><img src="@/assets/images/hard-drive.png">{{ '设备类型：'+item.deviceType }}</span>
+          </p>
         </div>
         <div class="button">
-          <el-button>处理</el-button>
+          <el-button type="primary" size="small" @click="detail(item)">{{ item.alarmStatus===1?'处理':'查看' }}</el-button>
         </div>
-        <img src="" class="status"></img>
+        <img :src="levelImg(item.alarmLevel)" class="status">
       </div>
     </el-col>
+
+    <el-dialog :title="current.alarmStatus===1?'报警处理':'报警查看'" :visible.sync="visible" width="500px" @close="close">
+      <div class="dialog_content">
+        <div class="content1">
+          <p class="no">{{ '设备序列号：'+current.deviceNo }}</p>
+          <p><img src="@/assets/images/clock.png"><span class="date">{{ '报警时间：'+current.alarmTime }}</span></p>
+          <p><img src="@/assets/images/file.png"><span class="alarm_name">{{ '报警名称：'+current.alarmName }}</span></p>
+        </div>
+        <div class="content2">
+          <span class="type"><img src="@/assets/images/hard-drive.png"></img>{{ '设备类型：'+current.deviceType }}</span>
+        </div>
+      </div>
+      <div class="form_box">
+        <span :class="levelClass(current.alarmLevel)">{{ '报警级别：'+levelDesc(current.alarmLevel) }}</span>
+        <div class="status">
+          <span>状态：</span>
+          <el-select v-model="form.alarmStatus" size="small" :disabled="current.alarmStatus===0">
+            <el-option v-for="(item,index) in statusList" :key="index" :value="item.value" :label="item.label" />
+          </el-select>
+        </div>
+        <el-input v-model="form.alarmRes" type="textarea" placeholder="请输入具体处理方案" :disabled="current.alarmStatus===0" />
+      </div>
+      <div v-if="current.alarmStatus!==0" slot="footer" class="dialog-footer">
+        <el-button class="dialog_button" type="primary" @click="save">保存</el-button>
+        <el-button @click="visible=false">取消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getList, update } from '@/api/terminal/alarm'
+
 export default {
   data() {
     return {
@@ -96,19 +127,19 @@ export default {
             data: [
               {
                 name: '紧要',
-                value: '3720'
+                value: 1
               },
               {
                 name: '重要',
-                value: '2920'
+                value: 2
               },
               {
                 name: '次要',
-                value: '2200'
+                value: 3
               },
               {
                 name: '提示',
-                value: '1420'
+                value: 4
               }
             ],
             hoverAnimation: false,
@@ -118,17 +149,175 @@ export default {
           }
         ]
       },
-      alarmList: []
+      alarmList: [
+        {
+          deviceNo: 'A000001',
+          url: require('@/assets/images/fm100.png'),
+          alarmTime: '2022/09/25',
+          alarmStatus: 1,
+          statusDesc: '未处理',
+          deviceType: 'M168-LoRa-FM100',
+          alarmLevel: 0
+        }
+      ],
+      alarmNum: 0,
+      unprocessedAlarmNum: 0,
+      emergencyNum: 0,
+      importantNum: 0,
+      minorNum: 0,
+      infoNum: 0,
+      current: {},
+      form: {
+        alarmStatus: 1,
+        alarmRes: ''
+      },
+      statusList: [
+        {
+          label: '未处理',
+          value: 1
+        },
+        {
+          label: '已处理',
+          value: 0
+        }
+      ],
+      visible: false
     }
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById('chart'))
-    this.myChart.setOption(this.option)
+    this.getList()
     window.addEventListener('resize', this.myChart.resize)
+  },
+  methods: {
+    getList(alarmLevel = '', alarmStatus = null) {
+      getList({ alarmLevel, alarmStatus }).then((res) => {
+        this.alarmList = res.data.map((item) => {
+          const statusDesc = item.alarmStatus === 1 ? '未处理' : '已处理'
+          let url
+          switch (item.deviceType) {
+            case 'RV400-4G-FR100':
+              url = require('@/assets/images/fr100.png')
+              break
+            case 'M528-A800-5G-HM100':
+              url = require('@/assets/images/hm100.png')
+              break
+            case 'M168-LoRa-FM100':
+              url = require('@/assets/images/fm100.png')
+              break
+            case 'RV400-NPU16T-5G-AR100':
+              url = require('@/assets/images/ar100.png')
+              break
+            case 'RV400-NPU4T-5G-SR100':
+              url = require('@/assets/images/sr100-simulate.png')
+              break
+          }
+          return { ...item, statusDesc, url }
+        })
+        this.getSum()
+      })
+    },
+    getSum() {
+      this.alarmNum = this.alarmList.length
+      this.unprocessedAlarmNum =
+        this.alarmList.filter((item) => item.alarmStatus === 1).length || 0
+      this.emergencyNum =
+        this.alarmList.filter((item) => item.alarmLevel === 0).length || 0
+      this.importantNum =
+        this.alarmList.filter((item) => item.alarmLevel === 1).length || 0
+      this.minorNum =
+        this.alarmList.filter((item) => item.alarmLevel === 2).length || 0
+      this.infoNum =
+        this.alarmList.filter((item) => item.alarmLevel === 3).length || 0
+      this.setOption()
+    },
+    setOption() {
+      this.option.series[0].data[0].value = this.emergencyNum
+      this.option.series[0].data[1].value = this.importantNum
+      this.option.series[0].data[2].value = this.minorNum
+      this.option.series[0].data[3].value = this.infoNum
+      this.myChart.setOption(this.option)
+    },
+    levelImg(level) {
+      switch (level) {
+        case 0:
+          return require('@/assets/images/emergency.png')
+        case 1:
+          return require('@/assets/images/important.png')
+        case 2:
+          return require('@/assets/images/minor.png')
+        case 3:
+          return require('@/assets/images/info.png')
+      }
+    },
+    levelDesc(level) {
+      switch (level) {
+        case 0:
+          return '紧急'
+        case 1:
+          return '重要'
+        case 2:
+          return '次要'
+        case 3:
+          return '提示'
+      }
+    },
+    levelClass(level) {
+      switch (level) {
+        case 0:
+          return 'emergency'
+        case 1:
+          return 'important'
+        case 2:
+          return 'minor'
+        case 3:
+          return 'info'
+      }
+    },
+    detail(item) {
+      this.current = item
+      if (this.current.alarmStatus === 0) {
+        this.form.alarmRes = this.current.alarmRes
+        this.form.alarmStatus = this.current.alarmStatus
+      }
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+      this.form = { alarmStatus: 1, alarmRes: '' }
+    },
+    save() {
+      const data = {
+        deviceNo: this.current.deviceNo,
+        alarmName: this.current.alarmName,
+        alarmTime: this.current.alarmTime,
+        deviceType: this.current.deviceType,
+        alarmLevel: this.current.alarmLevel,
+        alarmStatus: this.form.alarmStatus,
+        alarmRes: this.form.alarmRes
+      }
+      update(data).then(res => {
+        if (res.code === '200000') {
+          this.$message.success('处理成功')
+          this.getList()
+          this.close()
+        }
+      })
+    }
   }
 }
 </script>
 <style lang="scss">
+.el-dialog__footer {
+  border-top: 1px solid #f3f3f3;
+}
+.el-textarea__inner {
+  background-color: #fafafa;
+  height: 150px;
+}
+.el-select--small {
+  width: 100px !important;
+}
 .header_card {
   .el-card__body {
     padding: 0 20px !important;
@@ -143,13 +332,13 @@ export default {
     width: 50%;
     display: flex;
     align-items: center;
-    .line{
+    .line {
       position: absolute;
       right: -20px;
       top: 30%;
       height: 40%;
       width: 1px;
-      background-color:#DCDCDC ;
+      background-color: #dcdcdc;
     }
     .chart {
       min-width: 200px;
@@ -177,6 +366,7 @@ export default {
       color: #999999;
     }
     .num {
+      cursor: pointer;
       font-size: 40px;
       font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
       font-weight: 500;
@@ -184,6 +374,119 @@ export default {
     }
   }
 }
+.alarm-container {
+  position: relative;
+  background-color: #fff;
+  height: 150px;
+  .img-box {
+    background-color: #eff7ff;
+    width: 160px;
+    height: 100%;
+    text-align: center;
+    line-height: 150px;
+    float: left;
+    img {
+      vertical-align: middle;
+    }
+  }
+  .content {
+    overflow: hidden;
+    padding-left: 20px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    p {
+      font-size: 14px;
+      white-space: nowrap;
+    }
+    .no {
+      font-size: 18px;
+      font-weight: bold;
+      color: #000000;
+    }
+    .date {
+      font-weight: 400;
+      color: #666666;
+    }
+    .alarm_name {
+      color: #666666;
+      margin-left: 20px;
+    }
+    .type {
+      padding: 2px 10px;
+      border-radius: 4px;
+      background-color: #eff7ff;
+      img {
+        vertical-align: top;
+        margin-right: 5px;
+      }
+    }
+  }
+  .button {
+    position: absolute;
+    right: 14px;
+    top: 10px;
+    button {
+      width: 72px;
+      background-color: #0099ff;
+      border-color: #0099ff;
+    }
+  }
+  .status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+.dialog_content {
+  background-color: #eff7ff;
+  border-radius: 10px;
+  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+  img {
+    vertical-align: top;
+    margin-right: 10px;
+  }
+  .content1 {
+    padding: 5px 20px;
+    .no {
+      font-size: 18px;
+      font-weight: bold;
+      color: #000000;
+    }
+    .date {
+      color: #666666;
+      font-size: 14px;
+    }
+    .alarm_name {
+      color: #666666;
+      font-size: 14px;
+    }
+  }
+  .content2 {
+    padding: 20px 20px;
+    border-top: 1px solid #ebebec;
+    .type {
+      padding: 2px 10px;
+      border-radius: 4px;
+      font-family: PingFang SC-Regular, PingFang SC;
+      background-color: #b9d7f5;
+      color: #333333;
+    }
+  }
+}
+.form_box {
+  margin-top: 20px;
+  .status {
+    display: inline-block;
+    margin-left: 220px;
+    margin-bottom: 20px;
+  }
+}
+.dialog-footer {
+  text-align: end;
+  .dialog_button {
+    background-color: #0099ff;
+    border-color: #0099ff;
+  }
+}
 .emergency {
   color: #ff0000 !important;
 }
@@ -196,4 +499,10 @@ export default {
 .info {
   color: #aeaeae !important;
 }
+.unprocessed {
+  color: #f25656;
+}
+.processed {
+  color: #00b5c0;
+}
 </style>