告警规则区间

whychdw

2021-05-18 8cee18b13bc4ab0f2b93c3554955fa9543f67f5d

告警规则区间

 src/pages/warn/dialog/addWarnRule.vue

@@ -1,212 +1,330 @@
<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-form-item label="告警设备" class="inline" prop="deviceFlag">
            <el-select
                v-model="params.deviceFlag" placeholder="请选择告警设备"
                @change="fieldChange">
              <el-option
                  v-for="item in types" :key="item.value"
                  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警名称" class="inline" prop="field">
            <el-select v-model="params.field" placeholder="请选择告警名称">
              <el-option
                  v-for="item in warns" :key="item.value"
                  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警类型" class="inline" prop="thresholdFlag">
            <el-select v-model="params.thresholdFlag" placeholder="请选择告警类型">
              <el-option
                  v-for="item in ranges" :key="item.value"
                  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警阈值" class="inline" prop="thresholdValue">
            <el-input v-model="params.thresholdValue" placeholder="请输入告警阈值"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警阈值时间（s）" class="inline" prop="thresholdDuration">
            <el-input v-model="params.thresholdDuration" placeholder="请输入告警阈值时间"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警级别" class="inline" prop="level">
            <el-select v-model="params.level" placeholder="请选择级别">
              <el-option
                  v-for="item in levels" :key="item.value"
                  :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-footer">
        <three-btn @click="submitForm">确定</three-btn>
        <three-btn @click="close">取消</three-btn>
      </div>
    </el-form>
  </div>
    <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-form-item label="告警设备" class="inline" prop="deviceFlag">
                        <el-select
                            v-model="params.deviceFlag" placeholder="请选择告警设备"
                            @change="deviceFlagChange">
                            <el-option
                                v-for="item in types" :key="item.value"
                                :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item label="告警名称" class="inline" prop="field">
                        <el-select
                            v-model="params.field" placeholder="请选择告警名称"
                            @change="fieldChange">
                            <el-option
                                v-for="item in warns" :key="item.value"
                                :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item label="告警类型" class="inline" prop="thresholdFlag">
                        <el-select
                            v-model="params.thresholdFlag" placeholder="请选择告警类型"
                            @change="thresholdFlagChange">
                            <el-option
                                v-for="item in ranges" :key="item.value"
                                :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item label="告警级别" class="inline" prop="level">
                        <el-select
                            v-model="params.level" placeholder="请选择级别"
                            @change="levelChange">
                            <el-option
                                v-for="item in levels" :key="item.value"
                                :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item :label="thresholdLabel" class="inline" prop="thresholdValue">
                        <el-input v-model="params.thresholdValue" placeholder="请输入告警阈值"></el-input>
                    </el-form-item>
                </el-col>
                <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-row>
            <div class="form-footer">
                <three-btn @click="submitForm">确定</three-btn>
                <three-btn @click="close">取消</three-btn>
            </div>
        </el-form>
    </div>
</template>

<script>
import ThreeBtn from "@/components/ThreeBtn";
import {warnRules} from "@/pages/warn/js/const";
import {getItemByValue} from "@/assets/js/tools"
import {searchWarnRange} from "@/pages/warn/js/api";
import {addWarnRule} from "@/pages/warn/js/api";
import {
    searchWarnRange,
    searchLevelList,
    addWarnRule,
    thresholdValueRanges,
} from "@/pages/warn/js/api";

export default {
  name: "addWarnRule",
  components: {
    ThreeBtn
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    name: "addWarnRule",
    components: {
        ThreeBtn
    },
    type: {
      type: Number,
      default: 0
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        type: {
            type: Number,
            default: 0
        },
    },
  },
  data() {
    return {
      layout: {
        span: 12,
        gutter: 16
      },
      levels: [],
      ranges: [],
      types: [],
      params: {
        description: "",
        deviceFlag: "",
        field: "",
        level: "",
        name: "",
        status: 1,
        thresholdDuration: 0,
        thresholdFlag: 1,
        thresholdValue: 0
      },
      rules: {
        deviceFlag:[
          { required: true, message: '请选择告警设备', trigger: 'blur' },
        ],
        field: [
          { required: true, message: '请选择告警名称', trigger: 'blur' },
        ],
        level: [
          { required: true, message: '请选择告警等级', trigger: 'blur' },
        ],
        thresholdDuration: [
          { required: true, message: '请输入告警阈值时间', trigger: 'blur' },
        ],
        thresholdFlag: [
          { required: true, message: '请输入告警类型', trigger: 'blur' },
        ],
        thresholdValue: [
          { required: true, message: '请输入告警阈值', trigger: 'blur' },
        ],
      },
      warns: [],
    data() {
        let validateThresholdValue = (rule, value, callback) => {
            let ranges = this.thresholdValueRanges;
            let text = ""
            // 大小均不为空
            if(ranges[0] != null && ranges[1] != null) {
                if(value<=ranges[0] || value>=ranges[1]) {
                    text = this.regText;
                }
            }else if(ranges[0] != null) {
                if(value<=ranges[0]) {
                    text = this.regText;
                }
            }else if(ranges[1] != null) {
                if(value>=ranges[1]) {
                    text = this.regText;
                }
            }

            if(text) {
                callback(new Error(text));
            }else {
                callback();
            }
        };
        return {
            layout: {
                span: 12,
                gutter: 16
            },
            levels: [],
            ranges: [],
            types: [],
            params: {
                description: "",
                deviceFlag: "",
                field: "",
                level: "",
                name: "",
                status: 1,
                thresholdDuration: 0,
                thresholdFlag: "",
                thresholdValue: 0,
                unit: ""
            },
            rules: {
                deviceFlag: [
                    {required: true, message: '请选择告警设备', trigger: 'blur'},
                ],
                field: [
                    {required: true, message: '请选择告警名称', trigger: 'blur'},
                ],
                level: [
                    {required: true, message: '请选择告警等级', trigger: 'blur'},
                ],
                thresholdDuration: [
                    {required: true, message: '请输入告警阈值时间', trigger: 'blur'},
                ],
                thresholdFlag: [
                    {required: true, message: '请输入告警类型', trigger: 'blur'},
                ],
                thresholdValue: [
                    {required: true, message: '请输入告警阈值', trigger: 'blur'},
                    {validator: validateThresholdValue, trigger: 'blur' }
                ],
            },
            warns: [],
            thresholdValueRanges: [null,null],
        }
    },
    methods: {
        init() {
            let rules = warnRules();
            let type = this.type;         // 设备
            let list = rules.list;
            this.levels = rules.levels;   // 告警等级
            this.ranges = rules.ranges;   // 告警范围
            let item = getItemByValue(type, list);  // 告警设备
            if (item != -1) {
                this.types = item.types;
            }
        },
        deviceFlagChange(deviceFlag) {
            let types = this.types;
            let item = getItemByValue(deviceFlag, types);
            // 初始化值
            this.params.field = "";
            this.params.thresholdFlag = "";
            this.params.level = "";
            searchWarnRange(item.url).then(res => {
                let fieldNames = [];
                let fieldValues = [];
                if (res.data.code == 1) {
                    fieldNames = res.data.data.fieldNames;
                    fieldValues = res.data.data.fieldValues;
                }
                this.warns = fieldValues.map((item, index) => {
                    return {
                        label: fieldNames[index],
                        value: item,
                    };
                });
            }).catch(error => {
                console.log(error);
            });
        },
        fieldChange() {
            // 初始化值
            this.params.thresholdFlag = "";
            this.params.level = "";
        },
        thresholdFlagChange() {
            let params = this.params;
            // 初始化值
            this.params.level = "";
            searchLevelList({
                deviceFlag: params.deviceFlag,
                field: params.field,
                thresholdFlag: params.thresholdFlag,
            }).then(res=>{
                let rs = res.data;
                let data = [];
                if(rs.code == 1) {
                    data = rs.data;
                }
                // 遍历等级级别对于已存在的等级设置不可选中
                this.levels = this.levels.map(item=>{
                    let isIn = false;
                    for(let i=0; i<data.length; i++) {
                        if(item.value == data[i]) {
                            isIn = true;
                            break;
                        }
                    }
                    item.disabled = isIn;
                    return item;
                });
            }).catch(error=>{
                console.log(error);
            });
        },
        levelChange() {
            let params = this.params;
            thresholdValueRanges({
                deviceFlag: params.deviceFlag,
                field: params.field,
                thresholdFlag: params.thresholdFlag,
                level: params.level,
            }).then(res=>{
                let rs = res.data;
                let data = [null, null];
                if(rs.code == 1) {
                    data = rs.data;
                }
                // 设置告警阈值的取值区间
                this.thresholdValueRanges = data;
            }).catch(error=>{

            });
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let warns = this.warns;
                    let params = this.params;
                    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;
                }
            });
        },
        addWarnRule(params) {   // 添加告警规则
            addWarnRule(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('请求网路失败');
            });
        },
        success() {
            this.$emit('success', this.params);
        },
        close() {
            this.$emit("update:visible", false);
        },
    },
    computed: {
        thresholdLabel() {
            let params = this.params;
            if(this.regText || params.unit) {
                return '告警阀值('+this.regText+params.unit+')';
            }else {
                return '告警阀值';
            }

        },
        regText() {
            let ranges = this.thresholdValueRanges;
            // 大小均不为空
            if(ranges[0] != null && ranges[1] != null) {
                return "取值范围"+ranges[0]+"~"+ranges[1];
            }
            if(ranges[0] != null) {
                return "取值范围大于"+ranges[0];
            }
            if(ranges[1] != null) {
                return "取值范围小于"+ranges[1];
            }
            return "";
        }
    },
    mounted() {
        this.init();
    }
  },
  methods: {
    init() {
      let rules = warnRules();
      let type = this.type;         // 设备
      let list = rules.list;
      this.levels = rules.levels;   // 告警等级
      this.ranges = rules.ranges;   // 告警范围
      let item = getItemByValue(type, list);  // 告警设备
      if (item != -1) {
        this.types = item.types;
      }
    },
    fieldChange(field) {
      let types = this.types;
      let item = getItemByValue(field, types);
      // 初始化名称
      this.params.field = "";
      searchWarnRange(item.url).then(res=>{
        let fieldNames = [];
        let fieldValues = [];
        if(res.data.code == 1) {
          fieldNames = res.data.data.fieldNames;
          fieldValues = res.data.data.fieldValues;
        }
        this.warns = fieldValues.map((item,index)=>{
          return {
            label: fieldNames[index],
            value: item,
          };
        });
      }).catch(error=>{
        console.log(error);
      });
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let warns = this.warns;
          let params = this.params;
          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;
        }
      });
    },
    addWarnRule(params) {   // 添加告警规则
      addWarnRule(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('请求网路失败');
      });
    },
    success() {
      this.$emit('success', this.params);
    },
    close() {
      this.$emit("update:visible", false);
    },
  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped>
.dialog-content-wrapper {
  width: 500px;
    width: 500px;
}
</style>

 src/pages/warn/js/api.js

@@ -45,9 +45,40 @@
    });
}

/**
 * 查询告警名称和告警字段
 * @param url
 * @returns {AxiosPromise}
 */
export const searchWarnRange = (url)=>{
    return axios({
        method: "GET",
        url: url,
    });
}

/**
 * 查询已存在告警等级
 * @param params
 * @returns {AxiosPromise}
 */
export const searchLevelList = (params)=>{
    return axios({
        method: "GET",
        url: "/alarmRule/levelList",
        params
    });
}

/**
 * 查询告警阈值的区间
 * @param data
 * @returns {AxiosPromise}
 */
export const thresholdValueRanges = (data)=>{
    return axios({
        method: "POST",
        url: "/alarmRule/thresholdValue",
        data
    });
}

 src/pages/warn/js/const.js

@@ -4,14 +4,17 @@
            {
                label: '一般',
                value: 0,
                disabled: false,
            },
            {
                label: '重要',
                value: 1,
                disabled: false,
            },
            {
                label: '严重',
                value: 2,
                disabled: false,
            },
        ],
        ranges: [

 src/pages/warn/warnRule.vue

@@ -42,6 +42,9 @@
            align="center"
            min-width="180px"
            :resizable="false">
            <template slot-scope="scope">
                {{scope.row.thresholdValue}}{{scope.row.unit}}
            </template>
        </el-table-column>
        <el-table-column
            prop="thresholdDuration"
@@ -93,6 +96,7 @@
        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>
    </el-dialog>