告警规则管理

whychdw

2021-05-19 389f9033949cef1747b64ac63a1d47fca5c6564c

告警规则管理

 src/pages/warn/dialog/addWarnRule.vue

@@ -5,7 +5,12 @@
            :model="params" :rules="rules"
            class="params-dialog">
            <el-row :gutter="layout.gutter">
                <el-col :span="layout.span">
                <el-col :span="24" v-if="edit">
                    <el-form-item label="告警内容" class="inline">
                        <el-input v-model="totalText" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span" v-if="!edit">
                    <el-form-item label="告警设备" class="inline" prop="deviceFlag">
                        <el-select
                            v-model="params.deviceFlag" placeholder="请选择告警设备"
@@ -16,7 +21,7 @@
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                <el-col :span="layout.span" v-if="!edit">
                    <el-form-item label="告警名称" class="inline" prop="field">
                        <el-select
                            v-model="params.field" placeholder="请选择告警名称"
@@ -27,7 +32,7 @@
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                <el-col :span="layout.span" v-if="!edit">
                    <el-form-item label="告警类型" class="inline" prop="thresholdFlag">
                        <el-select
                            v-model="params.thresholdFlag" placeholder="请选择告警类型"
@@ -42,7 +47,7 @@
                    <el-form-item label="告警级别" class="inline" prop="level">
                        <el-select
                            v-model="params.level" placeholder="请选择级别"
                            @change="levelChange">
                            @change="levelChange" :disabled="edit">
                            <el-option
                                v-for="item in levels" :key="item.value"
                                :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
@@ -57,6 +62,18 @@
                <el-col :span="layout.span">
                    <el-form-item label="告警阈值时间（s）" class="inline" prop="thresholdDuration">
                        <el-input v-model.number="params.thresholdDuration" placeholder="请输入告警阈值时间"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span" v-if="edit">
                    <el-form-item label="是否开启告警" class="inline" prop="thresholdDuration">
                        <br>
                        <el-switch
                            v-model="params.status"
                            active-color="#13ce66"
                            inactive-color="#dcdfe6"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
@@ -76,7 +93,7 @@
    searchWarnRange,
    searchLevelList,
    addWarnRule,
    thresholdValueRanges,
    thresholdValueRanges, editWarnRule,
} from "@/pages/warn/js/api";

export default {
@@ -93,6 +110,16 @@
            type: Number,
            default: 0
        },
        info: {
            type: Object,
            default() {
                return {}
            }
        },
        edit: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        let validateThresholdValue = (rule, value, callback) => {
@@ -100,16 +127,36 @@
            let text = ""
            // 大小均不为空
            if(ranges[0] != null && ranges[1] != null) {
                if(this.edit) {
                    if(value<ranges[0] || value>ranges[1]) {
                        text = this.regText;
                    }
                }else {
                if(value<=ranges[0] || value>=ranges[1]) {
                    text = this.regText;
                }
                }

            }else if(ranges[0] != null) {
                if(this.edit) {
                    if(value<ranges[0]) {
                        text = this.regText;
                    }
                }else {
                if(value<=ranges[0]) {
                    text = this.regText;
                }
                }

            }else if(ranges[1] != null) {
                if(this.edit) {
                    if(value>ranges[1]) {
                        text = this.regText;
                    }
                }else {
                if(value>=ranges[1]) {
                    text = this.regText;
                    }
                }
            }

@@ -128,6 +175,7 @@
            ranges: [],
            types: [],
            params: {
                id: -1,
                description: "",
                deviceFlag: "",
                field: "",
@@ -174,6 +222,15 @@
            let item = getItemByValue(type, list);  // 告警设备
            if (item != -1) {
                this.types = item.types;
            }
            // 编辑状态
            if(this.edit) {
                Object.keys(this.info).forEach(key=>{
                    if(this.params[key] != undefined) {
                        this.params[key] = this.info[key];
                    }
                });
                this.levelChange();
            }
        },
        deviceFlagChange(deviceFlag) {
@@ -257,12 +314,17 @@
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let warns = this.warns;
                    let params = this.params;
                    if(this.edit) {
                        this.editWarnRule(params);
                    }else {
                        let warns = this.warns;
                    let ranges = this.ranges;
                    params.name = getItemByValue(params.field, warns).label;
                    params.description = params.name + getItemByValue(params.thresholdFlag, ranges).label;
                    this.addWarnRule(params);
                    }

                } else {
                    console.log('error submit!!');
                    return false;
@@ -273,13 +335,29 @@
            addWarnRule(params).then(res => {
                let rs = res.data;
                if (rs.code == 1) {
                    this.$layer.msg('添加成功');
                    this.$layer.msg('添加告警规则成功');
                    // 添加成功
                    this.success();
                    // 关闭面板
                    this.close();
                } else {
                    this.$layer.msg('添加失败');
                    this.$layer.msg('添加告警规则失败');
                }
            }).catch(error => {
                this.$layer.msg('请求网路失败');
            });
        },
        editWarnRule(params) {
            editWarnRule(params).then(res=>{
                let rs = res.data;
                if (rs.code == 1) {
                    this.$layer.msg('更新告警规则成功');
                    // 添加成功
                    this.success();
                    // 关闭面板
                    this.close();
                } else {
                    this.$layer.msg('更新告警规则失败');
                }
            }).catch(error => {
                this.$layer.msg('请求网路失败');
@@ -315,6 +393,11 @@
                return "取值范围小于"+ranges[1];
            }
            return "";
        },
        totalText() {
            let types = this.types;
            let type = getItemByValue(this.params.deviceFlag, types);
            return type.label+"-"+this.params.description;
        }
    },
    mounted() {

 src/pages/warn/dialog/editWarnRule.vue

New file
@@ -0,0 +1,66 @@
<template>
    <div class="dialog-content-wrapper">
        <el-form
            ref="ruleForm" size="mini" label-position="left"
            :model="params" :rules="rules"
            class="params-dialog">
            <el-row :gutter="layout.gutter">
                <el-col :span="layout.span"></el-col>
            </el-row>
            <div class="form-footer">
                <three-btn @click="submitForm">确定</three-btn>
                <three-btn @click="close">取消</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "editWarnRule",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            layout: {
                gutter: 16,
                span: 12,
            },
            params: {},
            rules: {}
        }
    },
    methods: {
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    console.log("提交");
                }else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        close() {
            this.$emit("update:visible", false);
        },
    },
    computed: {

    },
    mounted() {

    },
    destroyed() {

    }
}
</script>

<style scoped>

</style>

 src/pages/warn/js/api.js

@@ -30,6 +30,20 @@
        data,
    });
}

/**
 * 编辑告警规则
 * @param data
 * @returns {AxiosPromise}
 */
export const editWarnRule = (data)=>{
    return axios({
        method: "PUT",
        url: '/alarmRule',
        data,
    });
}

/**
 * 删除告警
 * @param params

 src/pages/warn/warnRule.vue

@@ -6,7 +6,7 @@
        {{ title }}
      </div>
      <template slot="btnGrp">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogVisible=true">新增告警</el-button>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddDialog">新增告警</el-button>
      </template>
      <el-table
          stripe size="mini" header-row-class-name="header-primary"
@@ -84,21 +84,22 @@
            align="center"
            :resizable="false">
          <template slot-scope="scope">
            <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="primary" size="mini" @click="editRule(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delWarnRule(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </page-panel>
    <el-dialog
        title="新增告警"
            :title="dialogTitle"
        :visible.sync="dialogVisible"
        class="dialog-center"
        width="auto"
        top="0"
        :close-on-click-modal="false"
        :modal-append-to-body="false">
      <add-warn-rule :type="deviceFlag" :visible.sync="dialogVisible" v-if="dialogVisible" @success="successAdd"></add-warn-rule>
            <add-warn-rule :type="deviceFlag" :visible.sync="dialogVisible" v-if="dialogVisible"
                           @success="successAdd" :info="info" :edit="edit"></add-warn-rule>
    </el-dialog>
  </flex-layout>
</template>
@@ -125,7 +126,6 @@
    pagePanel
  },
  data() {

    return {
      title:'',
      deviceFlag: 0,
@@ -134,6 +134,22 @@
      list: [],
      devTypes: [],
      warnLevels: [],
            edit: false,
            info: {
                description: "",
                devType: "",
                deviceFlag: 101,
                field: "rectifier_vol",
                id: 51,
                level: 0,
                name: "整流电源电压",
                status: 1,
                thresholdDuration: 20,
                thresholdFlag: 1,
                thresholdValue: 100,
                unit: "",
                warnLevel: "一般",
            }
    }
  },
  watch: {
@@ -157,6 +173,10 @@
        this.searchWarnRule();
      }

        },
        showAddDialog() {
            this.edit = false;
            this.dialogVisible = true;
    },
    // 查询告警
    searchWarnRule() {
@@ -185,6 +205,11 @@
      // 查询告警规则
      this.searchWarnRule();
    },
        editRule(data) {
            this.info = data;
            this.edit = true;
            this.dialogVisible = true;
        },
    delWarnRule(data) {
      this.$confirm('此操作将删除该告警规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
@@ -202,7 +227,8 @@
        }).catch(()=>{
          this.$layer.msg('网络请求异常');
        });
      }).catch(()=>{});
            }).catch(() => {
            });
    },
    closeLoading() {
      this.$nextTick(()=>{
@@ -214,6 +240,9 @@
    key() {
      return Number(this.$route.params.deviceFlag);
    },
        dialogTitle() {
            return this.edit?'编辑告警':'新增告警';
        }
  },
  mounted() {
    this.init();