告警规则区间

whychdw

2021-05-18 8cee18b13bc4ab0f2b93c3554955fa9543f67f5d

告警规则区间

 src/pages/warn/dialog/addWarnRule.vue

@@ -9,7 +9,7 @@
          <el-form-item label="告警设备" class="inline" prop="deviceFlag">
            <el-select
                v-model="params.deviceFlag" placeholder="请选择告警设备"
                @change="fieldChange">
                            @change="deviceFlagChange">
              <el-option
                  v-for="item in types" :key="item.value"
                  :label="item.label" :value="item.value"></el-option>
@@ -18,7 +18,9 @@
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警名称" class="inline" prop="field">
            <el-select v-model="params.field" placeholder="请选择告警名称">
                        <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>
@@ -27,7 +29,9 @@
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警类型" class="inline" prop="thresholdFlag">
            <el-select v-model="params.thresholdFlag" placeholder="请选择告警类型">
                        <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>
@@ -35,22 +39,24 @@
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="告警阈值" class="inline" prop="thresholdValue">
                    <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="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-input v-model.number="params.thresholdDuration" placeholder="请输入告警阈值时间"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
@@ -66,8 +72,12 @@
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",
@@ -85,6 +95,30 @@
    },
  },
  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,
@@ -101,8 +135,9 @@
        name: "",
        status: 1,
        thresholdDuration: 0,
        thresholdFlag: 1,
        thresholdValue: 0
                thresholdFlag: "",
                thresholdValue: 0,
                unit: ""
      },
      rules: {
        deviceFlag:[
@@ -122,9 +157,11 @@
        ],
        thresholdValue: [
          { required: true, message: '请输入告警阈值', trigger: 'blur' },
                    {validator: validateThresholdValue, trigger: 'blur' }
        ],
      },
      warns: [],
            thresholdValueRanges: [null,null],
    }
  },
  methods: {
@@ -139,11 +176,13 @@
        this.types = item.types;
      }
    },
    fieldChange(field) {
        deviceFlagChange(deviceFlag) {
      let types = this.types;
      let item = getItemByValue(field, types);
      // 初始化名称
            let item = getItemByValue(deviceFlag, types);
            // 初始化值
      this.params.field = "";
            this.params.thresholdFlag = "";
            this.params.level = "";
      searchWarnRange(item.url).then(res=>{
        let fieldNames = [];
        let fieldValues = [];
@@ -159,6 +198,60 @@
        });
      }).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() {
@@ -199,6 +292,31 @@
      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();
  }

 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>