增加告警查询页面

src/api/device-alarm/alarm-show.js

+import request from '@/utils/request'
+// const baseURL = process.env.VUE_APP_BASE_API
+const baseURL = ''
+
+// 获取数据集列表-分页
+export function getTableData(data) {
+  return request({
+    url: `${baseURL}/iot/alarm/show/list`,
+    method: 'post',
+    data
+  })
+}

src/main.js

@@ -47,7 +47,7 @@ Vue.mixin({
       const val = cellValue || row
       const m = moment(val, 'x')
       const formatText = cellValue ? (format || 'YYYY-MM-DD HH:mm:ss') : column
-      return m.isValid() ? moment(cellValue).format(formatText) : null
+      return m.isValid() ? moment(val).format(formatText) : null
     }
   }
 })

src/router/index.js

@@ -104,11 +104,14 @@ import dataManagement from './modules/dataManagement'
 import dataVisible from './modules/dataVisibleManagement'
 // 设备管理
 import equipmentManagement from './modules/equipmentManagement'
+// 告警管理
+import deviceAlarm from './modules/deviceAlarm'
 
 export const asyncRoutes = [
   dataManagement,
   dataVisible,
   equipmentManagement,
+  deviceAlarm,
   systemManagement,
   tenantManagement,
   // 404 page must be placed at the end !!!

src/router/modules/deviceAlarm.js

+import Common from '@/layout/common/index'
+
+const router = {
+  menuId: 'DeviceAlarm',
+  path: '/device-alarm',
+  name: '告警管理',
+  component: Common,
+  redirect: '/device-alarm/alarm-show',
+  meta: { title: '告警管理', icon: 'data-mgr' },
+  alwaysShow: true,
+  children: [
+    {
+      menuId: 'AlarmShow',
+      path: 'alarm-show',
+      name: '告警列表',
+      component: () => import('@/views/device-alarm/alarm-show'),
+      meta: { title: '告警列表', icon: 'data-model' }
+    }
+  ]
+}
+export default router

src/views/device-alarm/alarm-show/index.vue

+<template>
+  <div>
+    <el-card class="no-bottom">
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="80px"
+        inline
+      >
+        <el-form-item
+          label="设备名称"
+          prop="deviceName"
+        >
+          <el-input v-model="searchForm.deviceName" />
+        </el-form-item>
+        <el-form-item
+          label="告警等级"
+          prop="alarmLevel"
+        >
+          <el-select v-model="searchForm.alarmLevel">
+            <el-option label="故障" :value="1" />
+            <el-option label="警告" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="margin-top-20">
+      <el-table
+        :data="tableData"
+        border
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          width="50px"
+          align="center"
+        />
+        <el-table-column
+          prop="deviceTypeName"
+          label="设备类型"
+        />
+        <el-table-column
+          prop="deviceName"
+          label="设备名称"
+        />
+        <el-table-column
+          prop="dataModelName"
+          label="模型名称"
+        />
+        <el-table-column
+          prop="propertyCode"
+          label="属性代码"
+        />
+        <el-table-column
+          prop="propertyName"
+          label="属性名称"
+        />
+        <el-table-column
+          prop="ruleExpression"
+          label="判定规则"
+          :formatter="ruleExpressionFormatter"
+        />
+        <el-table-column
+          prop="alarmLevel"
+          label="告警等级"
+          :formatter="alarmLevelFormatter"
+        />
+        <el-table-column
+          prop="threshold"
+          label="阈值"
+        />
+        <el-table-column
+          prop="reportValue"
+          label="上报值"
+        />
+        <el-table-column
+          prop="reportTime"
+          label="上报时间"
+          :formatter="$moment"
+          min-width="130px"
+        />
+        <el-table-column
+          prop="alarmTime"
+          label="告警时间"
+          :formatter="$moment"
+          min-width="130px"
+        />
+        <el-table-column
+          label="详情"
+          width="100px"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="editItem(scope.row)">详情</el-button>
+            <!--            <el-popconfirm-->
+            <!--              title="确定要删除此条记录吗？"-->
+            <!--              style="margin-left: 10px"-->
+            <!--              @onConfirm="deleteItem(scope.row.id)"-->
+            <!--            >-->
+            <!--              <el-button slot="reference" type="text">删除</el-button>-->
+            <!--            </el-popconfirm>-->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="margin-top-20 text-align-right"
+        :current-page="pageForm.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageForm.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageForm.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <el-dialog
+      :title="add ? '增加系统' : '告警详情'"
+      :visible.sync="dialogVisible"
+      width="700px"
+    >
+      <el-form
+        v-if="dialogVisible"
+        :model="addForm"
+        label-width="90px"
+      >
+        <el-form-item
+          label="设备类型"
+        >
+          {{ detailItem.deviceTypeName }}
+        </el-form-item>
+        <el-form-item
+          label="设备名称"
+        >
+          {{ detailItem.deviceName }}
+        </el-form-item>
+        <el-form-item
+          label="模型名称"
+        >
+          {{ detailItem.dataModelName }}
+        </el-form-item>
+        <el-form-item
+          label="属性代码"
+        >
+          {{ detailItem.propertyCode }}
+        </el-form-item>
+        <el-form-item
+          label="属性名称"
+        >
+          {{ detailItem.propertyName }}
+        </el-form-item>
+        <el-form-item
+          label="判定规则"
+        >
+          {{ $_dictionaryFormat(detailItem.ruleExpression, 'expression') }}
+        </el-form-item>
+        <el-form-item
+          label="告警等级"
+        >
+          {{ $_dictionaryFormat(detailItem.alarmLevel, 'alarm_level') }}
+        </el-form-item>
+        <el-form-item
+          label="阈值"
+        >
+          {{ detailItem.threshold }}
+        </el-form-item>
+        <el-form-item
+          label="上报值"
+        >
+          {{ detailItem.reportValue }}
+        </el-form-item>
+        <el-form-item
+          label="上报时间"
+        >
+          {{ $moment(detailItem.reportTime, 'YYYY-MM-DD HH:mm:ss') }}
+        </el-form-item>
+        <el-form-item
+          label="告警时间"
+        >
+          {{ $moment(detailItem.alarmTime, 'YYYY-MM-DD HH:mm:ss') }}
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getTableData } from '@/api/device-alarm/alarm-show'
+import dictionary from '@/utils/dictionary'
+export default {
+  name: 'AlarmShow',
+  mixins: [
+    dictionary
+  ],
+  props: {},
+  data() {
+    return {
+      searchForm: {
+        deviceName: null,
+        alarmLevel: null
+      },
+      add: true,
+      dialogVisible: false,
+      tableData: [],
+      detailItem: null,
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getTableData()
+  },
+  mounted() {},
+  methods: {
+    getTableData(pageNum) {
+      const params = {
+        ...this.searchForm,
+        pageNum: this.pageForm.pageNum,
+        pageSize: this.pageForm.pageSize
+      }
+      getTableData(params)
+        .then(res => {
+          const { records, totalSize } = res.data
+          this.tableData = records
+          this.pageForm.total = totalSize
+        })
+        .catch(err => console.error(err))
+    },
+    resetForm() {
+      this.$refs.searchForm.resetFields()
+    },
+    addRow() {
+      this.add = true
+      this.dialogVisible = true
+    },
+    editItem(item) {
+      this.add = false
+      this.detailItem = item
+      this.dialogVisible = true
+    },
+    deleteItem(id) {},
+    saveSystem() {},
+    handleSizeChange(val) {
+      this.pageForm.pageSize = val
+      this.getTableData(1)
+    },
+    handleCurrentChange(val) {
+      this.pageForm.pageNum = val
+      this.getTableData(val)
+    },
+    ruleExpressionFormatter(row, column, cellValue, index) {
+      return this.$_dictionaryFormat(row, column, cellValue, index, 'expression')
+    },
+    alarmLevelFormatter(row, column, cellValue, index) {
+      return this.$_dictionaryFormat(row, column, cellValue, index, 'alarm_level')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>