告警规则管理

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(value<=ranges[0] || value>=ranges[1]) {
                    text = this.regText;
                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(value<=ranges[0]) {
                    text = this.regText;
                if(this.edit) {
                    if(value<ranges[0]) {
                        text = this.regText;
                    }
                }else {
                    if(value<=ranges[0]) {
                        text = this.regText;
                    }
                }

            }else if(ranges[1] != null) {
                if(value>=ranges[1]) {
                    text = this.regText;
                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;
                    let ranges = this.ranges;
                    params.name = getItemByValue(params.field, warns).label;
                    params.description = params.name + getItemByValue(params.thresholdFlag, ranges).label;
                    this.addWarnRule(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,15 +335,31 @@
            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

@@ -1,223 +1,252 @@
<template>
  <flex-layout>
    <page-panel title="进线屏告警设置" class="flex-page-content" :border="true">
      <div slot="title" class="page-panel-title">
        <span class="title-pillar"></span>
        {{ title }}
      </div>
      <template slot="btnGrp">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogVisible=true">新增告警</el-button>
      </template>
      <el-table
          stripe size="mini" header-row-class-name="header-primary"
          height="100%" :data="list"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0)">
        <el-table-column
            prop="devType"
            label="告警设备"
            min-width="180px"
            align="center"
            :resizable="false">
        </el-table-column>
        <el-table-column
            prop="name"
            label="告警名称"
            min-width="180px"
            align="center"
            :resizable="false">
        </el-table-column>
        <el-table-column
            prop="description"
            label="告警描述"
            align="center"
            min-width="180px"
            :resizable="false">
        </el-table-column>
        <el-table-column
            prop="thresholdValue"
            label="告警阈值"
            align="center"
            min-width="180px"
            :resizable="false">
            <template slot-scope="scope">
                {{scope.row.thresholdValue}}{{scope.row.unit}}
    <flex-layout>
        <page-panel title="进线屏告警设置" class="flex-page-content" :border="true">
            <div slot="title" class="page-panel-title">
                <span class="title-pillar"></span>
                {{ title }}
            </div>
            <template slot="btnGrp">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddDialog">新增告警</el-button>
            </template>
        </el-table-column>
        <el-table-column
            prop="thresholdDuration"
            label="告警阈值时间(ms)"
            align="center"
            min-width="180px"
            :resizable="false">
        </el-table-column>
        <el-table-column
            prop="warnLevel"
            label="告警级别"
            align="center"
            min-width="180px"
            :resizable="false">
        </el-table-column>
        <el-table-column
            prop="status"
            label="是否开启告警"
            min-width="180px"
            align="center"
            :resizable="false">
          <template slot-scope="scope">
            <el-switch
                :value="scope.row.status"
                active-color="#13ce66"
                inactive-color="#dcdfe6"
                :active-value="1"
                :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="tools"
            fixed="right"
            label="编辑"
            min-width="180px"
            align="center"
            :resizable="false">
          <template slot-scope="scope">
            <el-button type="primary" size="mini">编辑</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="新增告警"
        :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>
    </el-dialog>
  </flex-layout>
            <el-table
                stripe size="mini" header-row-class-name="header-primary"
                height="100%" :data="list"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0)">
                <el-table-column
                    prop="devType"
                    label="告警设备"
                    min-width="180px"
                    align="center"
                    :resizable="false">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="告警名称"
                    min-width="180px"
                    align="center"
                    :resizable="false">
                </el-table-column>
                <el-table-column
                    prop="description"
                    label="告警描述"
                    align="center"
                    min-width="180px"
                    :resizable="false">
                </el-table-column>
                <el-table-column
                    prop="thresholdValue"
                    label="告警阈值"
                    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"
                    label="告警阈值时间(ms)"
                    align="center"
                    min-width="180px"
                    :resizable="false">
                </el-table-column>
                <el-table-column
                    prop="warnLevel"
                    label="告警级别"
                    align="center"
                    min-width="180px"
                    :resizable="false">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="是否开启告警"
                    min-width="180px"
                    align="center"
                    :resizable="false">
                    <template slot-scope="scope">
                        <el-switch
                            :value="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#dcdfe6"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="tools"
                    fixed="right"
                    label="编辑"
                    min-width="180px"
                    align="center"
                    :resizable="false">
                    <template slot-scope="scope">
                        <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="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" :info="info" :edit="edit"></add-warn-rule>
        </el-dialog>
    </flex-layout>
</template>

<script>
import pagePanel from '@/components/pagePanel';
import {
  getItemByValue,
  getLabel
    getItemByValue,
    getLabel
} from '@/assets/js/tools';
import {
  searchWarnRule,
  delWarnRule,
    searchWarnRule,
    delWarnRule,
} from './js/api';
import {
  warnRules
    warnRules
} from "./js/const";
import AddWarnRule from "@/pages/warn/dialog/addWarnRule";

export default {
  name: "incomingScreenWarnRule",
  components: {
    AddWarnRule,
    pagePanel
  },
  data() {

    return {
      title:'',
      deviceFlag: 0,
      loading: false,
      dialogVisible: false,
      list: [],
      devTypes: [],
      warnLevels: [],
    }
  },
  watch: {
    'key'() {
      this.init();
    name: "incomingScreenWarnRule",
    components: {
        AddWarnRule,
        pagePanel
    },
  },
  methods: {
    init() {
      let deviceFlag = this.key;
      this.deviceFlag = deviceFlag;

      let rules = warnRules();
      this.warnLevels = rules.levels;
      let item = getItemByValue(this.deviceFlag, rules.list);
      if(item == -1) {
        this.$router.push('/index/xx')
      }else {
        this.title = item.title;
        this.devTypes = item.types;
        this.searchWarnRule();
      }

    },
    // 查询告警
    searchWarnRule() {
      let devTypes = this.devTypes;
      let warnLevels = this.warnLevels;
      this.loading = true;
      searchWarnRule(this.deviceFlag).then(res => {
        let data = [];
        if (res.data.code == 1) {
          data = res.data.data;
    data() {
        return {
            title: '',
            deviceFlag: 0,
            loading: false,
            dialogVisible: false,
            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: "一般",
            }
        }
        data = data.map(item=>{
          item.devType = getLabel(item.deviceFlag, devTypes);
          item.warnLevel = getLabel(item.level, warnLevels);
          return item;
        });
        // 设置表格的数据
        this.list = data;
        this.closeLoading();
      }).catch(error => {
        this.closeLoading();
        console.log(error);
      });
    },
    successAdd(){
      // 查询告警规则
      this.searchWarnRule();
    watch: {
        'key'() {
            this.init();
        },
    },
    delWarnRule(data) {
      this.$confirm('此操作将删除该告警规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        delWarnRule(data.id).then(res=>{
          let rs = res.data;
          if(rs.code == 1) {
            this.$layer.msg('删除成功');
          }else {
            this.$layer.msg('删除失败');
          }
          this.searchWarnRule();
        }).catch(()=>{
          this.$layer.msg('网络请求异常');
        });
      }).catch(()=>{});
    methods: {
        init() {
            let deviceFlag = this.key;
            this.deviceFlag = deviceFlag;

            let rules = warnRules();
            this.warnLevels = rules.levels;
            let item = getItemByValue(this.deviceFlag, rules.list);
            if (item == -1) {
                this.$router.push('/index/xx')
            } else {
                this.title = item.title;
                this.devTypes = item.types;
                this.searchWarnRule();
            }

        },
        showAddDialog() {
            this.edit = false;
            this.dialogVisible = true;
        },
        // 查询告警
        searchWarnRule() {
            let devTypes = this.devTypes;
            let warnLevels = this.warnLevels;
            this.loading = true;
            searchWarnRule(this.deviceFlag).then(res => {
                let data = [];
                if (res.data.code == 1) {
                    data = res.data.data;
                }
                data = data.map(item => {
                    item.devType = getLabel(item.deviceFlag, devTypes);
                    item.warnLevel = getLabel(item.level, warnLevels);
                    return item;
                });
                // 设置表格的数据
                this.list = data;
                this.closeLoading();
            }).catch(error => {
                this.closeLoading();
                console.log(error);
            });
        },
        successAdd() {
            // 查询告警规则
            this.searchWarnRule();
        },
        editRule(data) {
            this.info = data;
            this.edit = true;
            this.dialogVisible = true;
        },
        delWarnRule(data) {
            this.$confirm('此操作将删除该告警规则, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delWarnRule(data.id).then(res => {
                    let rs = res.data;
                    if (rs.code == 1) {
                        this.$layer.msg('删除成功');
                    } else {
                        this.$layer.msg('删除失败');
                    }
                    this.searchWarnRule();
                }).catch(() => {
                    this.$layer.msg('网络请求异常');
                });
            }).catch(() => {
            });
        },
        closeLoading() {
            this.$nextTick(() => {
                this.loading = false;
            });
        }
    },
    closeLoading() {
      this.$nextTick(()=>{
        this.loading = false;
      });
    computed: {
        key() {
            return Number(this.$route.params.deviceFlag);
        },
        dialogTitle() {
            return this.edit?'编辑告警':'新增告警';
        }
    },
    mounted() {
        this.init();
    }
  },
  computed: {
    key() {
      return Number(this.$route.params.deviceFlag);
    },
  },
  mounted() {
    this.init();
  }
}
</script>