up

src/api/goaf/alarm.js

@@ -28,3 +28,23 @@ export function getSensorOverviewByPage(params) {
     params
   })
 }
+
+export function getAlertRectifyInfoByPage(params) {
+  return request({
+    url: '/goaf/goafsensoralarmreport/page',
+    params
+  })
+}
+export function getAlertRectifyInfoByList(params) {
+  return request({
+    url: '/goaf/goafsensoralarmreport/list',
+    params
+  })
+}
+export function updateAlertRectify(data) {
+  return request({
+    url: '/goaf/goafsensoralarmreport/update',
+    method: 'PUT',
+    data
+  })
+}

src/views/bigScreen/home/components/alertRectifyHand.vue

@@ -0,0 +1,177 @@
+<template>
+  <el-drawer
+    title="告警整改"
+    :modal-append-to-body="false"
+    :modal="false"
+    :wrapper-closable="false"
+    size="100%"
+    :visible.sync="dialogVisible"
+  >
+    <div slot="title" class="alertRectify-title">告警整改</div>
+    <div class="alertRectify-wrap">
+      <div v-if="type===1" class="alertRectify-form">
+        <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="right" label-width="120px">
+          <div class="flex">
+            <el-form-item label="已完成" prop="goafSensorAlarmFinishNum">
+              <el-input v-model.number="formData.goafSensorAlarmFinishNum" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="未完成" prop="goafSensorAlarmEndNum">
+              <el-input v-model.number="formData.goafSensorAlarmEndNum" autocomplete="off" />
+            </el-form-item>
+          </div>
+          <el-form-item label="告警整改情况">
+            <el-input v-model="formData.goafSensorAlarmReportContent" type="textarea" :rows="7" style="width: 75%;" />
+          </el-form-item>
+        </el-form>
+        <div class="btn-group">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button class="cancel-btn" @click="dialogVisible = false">取 消</el-button>
+        </div>
+      </div>
+      <div v-if="type===2" class="alertRectifyHand-detail">
+        <div class="head">
+          <div class="state-item">
+            <span class="lable">已完成：</span>
+            <span class="number">{{ formData.goafSensorAlarmFinishNum }}</span>
+          </div>
+          <div class="state-item rt">
+            <span class="lable">未完成：</span>
+            <span class="number">{{ formData.goafSensorAlarmEndNum }}</span>
+          </div>
+        </div>
+        <div class="cont">
+          <span class="lable">告警整改情况：</span>
+          <div class="info">{{ formData.goafSensorAlarmReportContent }}</div>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { updateAlertRectify } from '@/api/goaf/alarm'
+export default {
+  name: 'AlertRectifyHand',
+  data() {
+    return {
+      dialogVisible: false,
+      tableData: [],
+      groupList: [],
+      userList: [],
+      type: undefined,
+      formData: {
+        'goafSensorAlarmEndNum': 0,
+        'goafSensorAlarmFinishNum': 0,
+        'goafSensorAlarmReportContent': null,
+        'goafSensorAlarmReportId': undefined
+      },
+      rules: {
+        goafSensorAlarmEndNum: [
+          { required: true, message: '请填写未完成数量', trigger: 'blur' },
+          { type: 'number', message: '未完成数量必须为数字值' }
+        ],
+        goafSensorAlarmFinishNum: [
+          { required: true, message: '请填写已完成数量', trigger: 'blur' },
+          { type: 'number', message: '已完成数量必须为数字值' }
+        ]
+      }
+    }
+  },
+  methods: {
+    dangerStatus(val) {
+      const status = ['待提交', '待评审', '待整改', '待验收', '完成']
+      return val === -1 ? '撤销' : status[val]
+    },
+    AlarmLevel(val) {
+      const obj = { 0: '一般', 1: '重大' }
+      return obj[val] || '--'
+    },
+    loadData(data, type) {
+      this.formData = {
+        'goafSensorAlarmEndNum': data.goafSensorAlarmEndNum,
+        'goafSensorAlarmFinishNum': data.goafSensorAlarmFinishNum,
+        'goafSensorAlarmReportContent': data.goafSensorAlarmReportContent,
+        'goafSensorAlarmReportId': data.goafSensorAlarmReportId
+      }
+      this.type = type
+      this.dialogVisible = true
+    },
+    submitForm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          updateAlertRectify(this.formData).then((res) => {
+            this.$message.success('编辑成功！')
+            this.$emit('success')
+            this.dialogVisible = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+    <style lang="scss" scoped>
+    .alertRectify-title{
+      text-align: center;
+    }
+    .alertRectify-form{
+      max-width: 1000px;
+      margin: 0 auto;
+      box-shadow: 2px 4px 8px rgba(48, 99 ,121,0.6);
+      border-radius: 10px;
+      box-sizing: border-box;
+      margin-top: 30px;
+          .flex{
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+          }
+        .btn-group{
+          padding-top: 30px;
+          text-align: center;
+        }
+    }
+    .alertRectifyHand-detail{
+        max-width: 800px;
+        padding: 15px 30px;
+        margin: 0 auto;
+        box-shadow: 2px 4px 8px rgba(48, 99 ,121,0.6);
+        border-radius: 10px;
+        box-sizing: border-box;
+        .head{
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            .state-item{
+                color: #fff;
+                width: 50%;
+                .lable{
+                    width: 120px;
+                    display: inline-block;
+                }
+                .number{
+                    font-weight: 600;
+                    display: inline-block;
+                }
+                .rt{
+                    text-align: left;
+                }
+            }
+        }
+        .cont{
+            color: #fff;
+            display: flex;
+            padding-top: 10px;
+            .lable{
+                width: 120px;
+                display: inline-block;
+            }
+            .info{
+                display: inline-block;
+                min-height: 150px;
+                flex: 1;
+                line-height: 1.5;
+            }
+        }
+    }
+    </style>
+

src/views/bigScreen/home/components/alertRectifyInfo.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="item report">
+    <div class="title">
+      <span class="name">告警整改情况</span>
+    </div>
+    <div class="container" :style="height?'height:'+height:''">
+      <vueSeamlessScroll ref="seamlessScroll" :data="items" :class-option="defaultOption">
+        <div class="table-wrap">
+          <table>
+            <tr class="report-title">
+              <td>名称</td>
+              <td>未完成</td>
+              <td>已完成</td>
+              <td>操作</td>
+            </tr>
+            <tr v-for="(item,index) in items" :key="index" class="report-item">
+              <td>{{ item.goafSensorAlarmReportTime }}告警整改情况</td>
+              <td>{{ item.goafSensorAlarmEndNum }}</td>
+              <td>{{ item.goafSensorAlarmFinishNum }}</td>
+              <td class="handle">
+                <span class="edit" @click="handle(item,1)">编辑</span>
+                <span class="detail" @click="handle(item,2)">查看</span>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </vueSeamlessScroll>
+    </div>
+    <alertRectifyHand ref="alertRectifyHand" @success="handlesuccess" />
+  </div>
+</template>
+<script>
+import { getAlertRectifyInfoByList } from '@/api/goaf/alarm'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import alertRectifyHand from './alertRectifyHand.vue'
+export default {
+  name: 'AlertRectifyInfo',
+  components: {
+    vueSeamlessScroll,
+    alertRectifyHand
+  },
+  props: {
+    height: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      defaultOption: {
+        step: 1, // 数值越大速度滚动越快
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true,
+        singleHeight: 0,
+        singleWidth: 0,
+        waitTime: 1000
+      },
+      items: [],
+      total: 0
+    }
+  },
+  created() {
+    this.loadData()
+  },
+  methods: {
+    dangerStatus(val) {
+      const status = ['待提交', '待评审', '待整改', '待验收', '完成']
+      return val === -1 ? '撤销' : status[val]
+    },
+    AlarmLevel(val) {
+      const obj = { 0: '一般', 1: '重大' }
+      return obj[val] || '--'
+    },
+    loadData() {
+      getAlertRectifyInfoByList().then((res) => {
+        const { data } = res
+        this.items = data
+      })
+    },
+    handle(data, type) {
+      this.$refs['alertRectifyHand'].loadData(data, type)
+    },
+    handlesuccess() {
+      this.loadData()
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+  .container{
+
+      height: 36vh !important;
+      .table-wrap{
+        table{
+          tr td{
+            font-size: 8px !important;
+            text-align: center;
+            &.handle{
+                .edit{
+                    color: #2AFFFF;
+                    padding: 5px;
+                }
+                .detail{
+                    color: #e0dbdb;
+                    padding: 5px;
+                }
+            }
+          }
+        }
+      }
+  }
+  </style>
+

src/views/bigScreen/home/components/index.js

@@ -14,6 +14,7 @@ import DeviceState from './DeviceState.vue'
 import DeviceInfo from './DeviceInfo.vue'
 
 import WaveChart from './WaveChart.vue'
+import alertRectifyInfo from './alertRectifyInfo.vue'
 
 export {
   WarningStatistics,
@@ -27,5 +28,6 @@ export {
   SensorStatusCircle,
   DeviceState,
   DeviceInfo,
-  WaveChart
+  WaveChart,
+  alertRectifyInfo
 }

src/views/bigScreen/home/index.vue

@@ -20,7 +20,8 @@
     </div>
     <div class="side-right">
       <sensor-status ref="sensor-status" />
-      <sensor-warning-info ref="sensor-warning-info" height="60vh !important" />
+      <sensor-warning-info ref="sensor-warning-info" height="25vh !important" />
+      <alertRectifyInfo height="30vh !important" />
     </div>
   </div>
 </template>
@@ -35,7 +36,8 @@ import {
   SensorStatusCircle,
   DeviceState,
   DeviceInfo,
-  WaveChart
+  WaveChart,
+  alertRectifyInfo
 } from './components'
 export default {
   name: 'Home',
@@ -46,7 +48,8 @@ export default {
     SensorStatusCircle,
     DeviceState,
     DeviceInfo,
-    WaveChart
+    WaveChart,
+    alertRectifyInfo
   },
   // mixins: [mixins],
   data() {
@@ -114,13 +117,14 @@ export default {
       if (!message.includes('{')) {
         return
       }
+      // eslint-disable-next-line no-unused-vars
       const data = message ? JSON.parse(Uint8ArrayToString(message)) : ''
-      this.$nextTick(() => {
-        if (topic.includes('topic/iotplatform/update/all')) {
-          console.log(data)
-          this.init()
-        }
-      })
+      // this.$nextTick(() => {
+      //   if (topic.includes('topic/iotplatform/update/all')) {
+      //     console.log(data)
+      //     this.init()
+      //   }
+      // })
     }
   }
 }