前端代码提交

src/api/data-management/model-management.js

@@ -47,3 +47,20 @@ export function deleteModel(data) {
   })
 }
 
+// 保存告警规则
+export function saveAlarmRule(data) {
+  return request({
+    url: `${baseURL}/iot/dataModel/alarmRule/save`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取告警规则列表
+export function listAlarmRule(data) {
+  return request({
+    url: `${baseURL}/iot/dataModel/alarmRule/list`,
+    method: 'post',
+    data
+  })
+}

src/views/data-management/model-management/index.vue

@@ -13,7 +13,7 @@
             prop="name"
           >
             <el-input v-model="searchForm.name" clearable placeholder="模型名称">
-              <el-button slot="append" icon="el-icon-search" @click="listModel(1)"></el-button>
+              <el-button slot="append" icon="el-icon-search" @click="listModel(1)" />
             </el-input>
           </el-form-item>
         </el-form>
@@ -44,6 +44,15 @@
           prop="description"
           label="描述"
         />
+        <el-table-column
+          label="操作"
+          width="140px"
+          align="center"
+        >
+          <template slot-scope="props">
+            <el-button type="text" @click="showRulesView(props.row)">告警规则</el-button>
+          </template>
+        </el-table-column>
       </el-table>
 
       <el-pagination
@@ -87,18 +96,34 @@
         @delete="onDelete()"
       />
     </esv-dialog>
+    <esv-dialog
+      title="告警规则"
+      :visible.sync="rulesDialogVisible"
+      width="60%"
+      top="0"
+    >
+      <Rules
+        v-if="rulesDialogVisible"
+        :id="currentRowId"
+        :add="add"
+        @cancel="rulesDialogVisible = false"
+        @confirm="onRulesConfirm"
+      />
+    </esv-dialog>
   </div>
 </template>
 
 <script>
 import Details from '@/views/data-management/model-management/detail'
 import AddOrUpdate from '@/views/data-management/model-management/AddOrUpdate'
+import Rules from '@/views/data-management/model-management/rules'
 import { listModel } from '@/api/data-management/model-management'
 export default {
   name: 'ObjectModel',
   components: {
     Details,
-    AddOrUpdate
+    AddOrUpdate,
+    Rules
   },
   props: {},
   data() {
@@ -109,6 +134,7 @@ export default {
       add: true,
       dialogVisible: false,
       detailDialogVisible: false,
+      rulesDialogVisible: false,
       tableData: [
       ],
       addForm: {
@@ -182,9 +208,17 @@ export default {
       this.dialogVisible = false
       this.listModel(this.pageForm.pageNum)
     },
+    onRulesConfirm() {
+      this.rulesDialogVisible = false
+    },
     onDelete() {
       this.detailDialogVisible = false
       this.listModel(this.pageForm.pageNum)
+    },
+    showRulesView(row) {
+      this.rulesDialogVisible = true
+      this.currentRowId = row.id
+      this.add = false
     }
   }
 }

src/views/data-management/model-management/rules.vue

+<template>
+  <div>
+    <div>
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>规则列表</span>
+          <el-button style="float: right; margin-left: 10px" type="primary" @click="addRow">添加</el-button>
+        </div>
+        <el-form
+          ref="rulesForm"
+          :model="rulesForm"
+          class="table-form"
+        >
+          <el-table
+            :data="rulesForm.alarmRuleItemList"
+            style="width: 100%; height: 260px;"
+            border
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50px"
+              align="center"
+            />
+            <el-table-column
+              prop="propertyId"
+              label="数据属性"
+              width="155"
+            >
+              <template slot-scope="props">
+                <el-form-item
+                  v-if="props.row.edit"
+                  :prop="`alarmRuleItemList.${props.$index}.propertyId`"
+                  label=""
+                  style="margin-bottom: 0px"
+                >
+                  <el-select v-model="props.row.propertyId">
+                    <el-option
+                      v-for="(item, index) in modelForm.propertyList"
+                      :key="index"
+                      :label="item.propertyName"
+                      :value="item.id"
+                    />
+                  </el-select>
+                </el-form-item>
+                <div v-else>{{ propertyCodeFormat(props.row.propertyId) }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="ruleExpression"
+              label="判定规则"
+              width="155"
+            >
+              <template slot-scope="props">
+                <el-form-item
+                  v-if="props.row.edit"
+                  :prop="`alarmRuleItemList.${props.$index}.ruleExpression`"
+                  label=""
+                  style="margin-bottom: 0px"
+                >
+                  <el-select v-model="props.row.ruleExpression">
+                    <el-option
+                      v-for="(item, index) in dictionary.expression"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <div v-else>{{ $_dictionaryFormat(null, null, props.row.ruleExpression, null, 'expression') }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="threshold"
+              label="判定值"
+            >
+              <template slot-scope="props">
+                <el-form-item
+                  v-if="props.row.edit"
+                  :prop="`alarmRuleItemList.${props.$index}.threshold`"
+                  label=""
+                  style="margin-bottom: 0px"
+                >
+                  <el-input v-model="props.row.threshold" />
+                </el-form-item>
+                <div v-else>{{ props.row.threshold }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="alarmLevel"
+              label="告警等级"
+              width="155"
+            >
+              <template slot-scope="props">
+                <el-form-item
+                  v-if="props.row.edit"
+                  :prop="`alarmRuleItemList.${props.$index}.alarmLevel`"
+                  label=""
+                  style="margin-bottom: 0px"
+                >
+                  <el-select v-model="props.row.alarmLevel">
+                    <el-option
+                      v-for="(item, index) in dictionary.alarm_level"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.code"
+                    />
+                  </el-select>
+                </el-form-item>
+                <div v-else>{{ $_dictionaryFormat(null, null, props.row.alarmLevel, null, 'alarm_level') }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              width="140px"
+              align="center"
+            >
+              <template slot-scope="props">
+                <el-button v-if="!props.row.edit" type="text" style="margin-right: 20px" @click="editItem(props.row)">编辑</el-button>
+                <el-button v-if="props.row.edit" type="text" style="margin-right: 20px" @click="finishItem(props.row)">完成</el-button>
+                <el-popconfirm
+                  title="确定要删除此条记录吗？"
+                  @onConfirm="deleteItem(props.$index)"
+                >
+                  <el-button slot="reference" type="text">删除</el-button>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form>
+      </el-card>
+    </div>
+    <div class="el-dialog__footer" style="margin-top: 20px">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import dictionary from '@/utils/dictionary'
+import { getModelDetail, saveAlarmRule, listAlarmRule } from '@/api/data-management/model-management'
+export default {
+  name: 'Rules',
+  mixins: [dictionary],
+  props: {
+    add: {
+      type: Boolean,
+      default: true
+    },
+    id: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      rulesForm: {
+        modelId: null,
+        alarmRuleItemList: []
+      },
+      modelForm: {
+        name: null,
+        description: null,
+        hasInstance: false,
+        instanceCount: null,
+        propertyList: []
+      }
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    if (!this.add) {
+      this.getModelDetail()
+      this.listAlarmRule()
+    }
+  },
+  methods: {
+    getModelDetail() {
+      getModelDetail({ id: this.id })
+        .then(res => {
+          this.rulesForm.modelId = this.id
+          this.modelForm = {
+            ...res.data
+          }
+          this.modelForm.propertyList = res.data.propertyList.map(v => {
+            return {
+              propertyCode: v.propertyCode,
+              propertyName: v.propertyName,
+              propertyType: v.propertyType,
+              propertyDefaultValue: v.propertyDefaultValue,
+              propertyUnit: v.propertyUnit,
+              id: v.id,
+              edit: false
+            }
+          })
+        })
+        .catch(err => {
+          console.error(err.message)
+          this.$message.error('查询遇到问题')
+        })
+    },
+    listAlarmRule() {
+      listAlarmRule({ modelId: this.id })
+        .then(res => {
+          this.rulesForm.alarmRuleItemList = res.data.map(v => {
+            return {
+              propertyId: v.propertyId,
+              ruleExpression: v.ruleExpression,
+              threshold: v.threshold,
+              alarmLevel: v.alarmLevel,
+              edit: false
+            }
+          })
+        })
+        .catch(err => {
+          console.error(err.message)
+          this.$message.error(err.message)
+        })
+    },
+    cancel() {
+      this.$emit('cancel')
+    },
+    addRow() {
+      this.rulesForm.alarmRuleItemList.push({
+        propertyId: null,
+        ruleExpression: null,
+        threshold: null,
+        alarmLevel: null,
+        edit: true
+      })
+      if (this.rulesForm.alarmRuleItemList.length > 1) {
+        this.rulesForm.alarmRuleItemList[this.rulesForm.alarmRuleItemList.length - 2].edit = false
+      }
+    },
+    validate() {
+      const p = [
+        this.$refs.rulesForm.validate()
+      ]
+      return Promise.all(p)
+    },
+    confirm() {
+      this.validate()
+        .then(_ => {
+          this.saveAlarmRule()
+        })
+        .catch(_ => {})
+    },
+    editItem(row) {
+      row.edit = true
+    },
+    finishItem(row) {
+      row.edit = false
+    },
+    deleteItem(index) {
+      this.rulesForm.alarmRuleItemList.splice(index)
+    },
+    propertyCodeFormat(propertyId) {
+      const property = this.modelForm.propertyList.find(v => v.id === propertyId)
+      return property ? property.propertyName : null
+    },
+    saveAlarmRule() {
+      const params = {
+        modelId: this.rulesForm.modelId
+      }
+      params.alarmRuleItemList = this.rulesForm.alarmRuleItemList.map(v => {
+        return {
+          propertyId: v.propertyId,
+          ruleExpression: v.ruleExpression,
+          threshold: v.threshold,
+          alarmLevel: v.alarmLevel
+        }
+      })
+      saveAlarmRule(params)
+        .then(_ => this.$message.success('保存成功'))
+        .then(_ => {
+          this.$emit('confirm')
+        })
+        .catch(err => {
+          console.error(err.message)
+          this.$message.error(err.message)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.clearfix {
+  line-height: 36px;
+}
+</style>