#510 1、指标过滤

对当前的订阅选择过滤指标
     2、对资源过滤、资源指标过滤（ 选在对指定指定资源（当前订阅的资源）进行过滤）
          1.能过滤资源
          2.能过滤指定资源下的指标

@@ -313,6 +313,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         '<button data-id="{{d.subId}}" lay-tips="指标订阅" type="button" class="layui-btn layui-btn-xs layui-btn-normal alarmsubscribe-kpi-btn"><i class="iconfont">&#XE520;</i></button>' +
                         '<button data-id="{{d.subId}}" lay-tips="资源类型订阅" type="button" class="layui-btn layui-btn-xs layui-btn-normal alarmsubscribe-resType-btn"><i class="iconfont">&#XE521;</i></button>' +
                         '<button data-id="{{d.subId}}" lay-tips="业务类型订阅" type="button" class="layui-btn layui-btn-xs layui-btn-normal alarmsubscribe-busId-btn"><i class="iconfont">&#XE522;</i></button>' +
+                        '<button data-id="{{d.subId}}" lay-tips="订阅指标、资源排除配置" type="button" class="layui-btn layui-btn-xs layui-btn-normal alarmsubscribe-exclude-kpi"><i class="layui-icon layui-icon-templeate-1"></i>' +
                         '</div>'
                 }
             ]],
@@ -772,6 +773,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         }
                     });
                 });
+
                 //查看资源类型订阅列表
                 $(".view-alarmsubscribe-resType").on("click", function () {
                     var subId = $(this).data("id");
@@ -783,6 +785,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         return true;
                     });
                 });
+
                 //查看业务类型订阅列表
                 $(".view-alarmsubscribe-busId").on("click", function () {
                     var subId = $(this).data("id");
@@ -794,6 +797,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         return true;
                     });
                 });
+
                 //资源订阅
                 $(".alarmsubscribe-resource-btn").on("click", function () {
                     if ($.inArray('back:alarmsubscribe:resource', checkList) == -1) {
@@ -914,6 +918,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         return true;
                     });
                 });
+
                 //资源类型订阅
                 $(".alarmsubscribe-resType-btn").on("click", function () {
                     var subId = $(this).data("id");
@@ -929,6 +934,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         insertResTypeOrBusId(data, 0, subId);
                     });
                 });
+
                 //业务类型订阅
                 $(".alarmsubscribe-busId-btn").on("click", function () {
                     var subId = $(this).data("id");
@@ -944,6 +950,20 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','sessions'], function
                         insertResTypeOrBusId(data, 1, subId);
                     });
                 });
+
+                // 排除订阅指标
+                $(".alarmsubscribe-exclude-kpi").on("click",function () {
+                    var subId = $(this).data("id");
+                    var title = `<a class="layui-icon layui-icon-templeate-1"></a>告警订阅排除订阅指标`;
+                    layer.open({
+                        type: 2
+                        , title: title
+                        , shade: 0.8
+                        , area: ['80%', '90%']
+                        , id: 'alarmsubscribe-exclude-kpi' //设定一个id，防止重复弹出
+                        , content: `/vue3/index.html#/alarmsubscribe/excludeKpi?subId=${subId}`
+                    })
+                });
             }
         });
 

@@ -36,6 +36,10 @@
     display: flex;
 }
 
+.container .cm-card .search>button {
+    margin-left: 10px;
+}
+
 .container .cm-card .search .condition {
     width: calc(100% - 200px);
     display: flex;

@@ -42,6 +42,11 @@ const routes = [{
 		path: '/vue3/portSenseSelect',
 		name: 'portSenseSelect',
 		component: () => myImport('views/portSenseSelect/index')
+	},
+	{
+		path: '/alarmsubscribe/excludeKpi',
+		name: 'alarmSubscribeExcludeKpi',
+		component: () => myImport('views/alarmsubscribe/index')
 	}
 ];
 

+<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'0px'}">
+    <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%'}">
+        <div class="search">
+            <el-form-item>
+                <el-input v-model="searchForm.keyword" placeholder="输入关键字"
+                          @keydown.enter.native="getPage"></el-input>
+            </el-form-item>
+            <el-form-item style="margin-left: 10px">
+                <el-button type="primary" @click="getPage"><i class="iconfont icon-sousuo"></i>搜索</el-button>
+                <el-button @click="showExcludeKpi(true)">指标过滤</el-button>
+                <el-button @click="showResDialog(true)">资源过滤</el-button>
+            </el-form-item>
+        </div>
+
+        <div class="search-table">
+            <cm-table-page :columns="list.columns"
+                           :dataList="list.dataList"
+                           :total="list.total"
+                           :showIndex="true"
+                           :showBorder="true"
+                           :showPage="false"
+                           :showTools="true"
+                           :height="(height - 105)">
+                <template #default="{row,prop,column}">
+                    <div v-if="prop == 'enable'">
+                        <el-switch
+                                @change="setEnable(row)"
+                                inline-prompt
+                                :active-value="1"
+                                :inactive-value="0"
+                                active-text="启用"
+                                inactive-text="禁用"
+                                v-model="row.enable"
+                                active-color="#13ce66"
+                                inactive-color="#ff4949"
+                        />
+                    </div>
+                </template>
+                <template #tools="{scope}">
+                    <el-button type="text" size="small" @click.prevent="deleteItem(scope.row,scope.$index)">
+                        <i class="el-icon-delete"/>
+                    </el-button>
+                </template>
+            </cm-table-page>
+        </div>
+    </div>
+
+    <!-- 弹框区域 -->
+    <cm-dialog title="指标过滤配置" width="300px" :showDialogVisible="excludeKpiFlag"
+               @hidedialog="showExcludeKpi" :showFooter="true" @okfunc="saveKpiInfo">
+        <template v-slot>
+            <el-select clearable multiple v-model="kpiDetail.dataList" placeholder="请选择指标">
+                <el-option
+                           v-for="item in kpiDetail.options"
+                        :key="item.kpiId"
+                        :label="item.kpiName"
+                        :value="item.kpiId">
+                    <span style="float: left">{{ item.kpiId }}</span>
+                    <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.kpiName }}</span>
+                </el-option>
+            </el-select>
+        </template>
+    </cm-dialog>
+
+    <cm-dialog title="资源指标过滤配置" width="80%" :showDialogVisible="resFlag"
+               @hidedialog="showResDialog" :showFooter="true" @okfunc="saveResInfo">
+        <template v-slot >
+            <div style="height: 300px">
+                <cm-table-page :columns="reslist.columns"
+                               :dataList="reslist.dataList"
+                               :showIndex="true"
+                               :showBorder="true"
+                               :showPage="false"
+                               :showTools="false"
+                               :height="300">
+                    <template #default="{row,prop,column}">
+                        <div v-if="prop == 'excludeKpi'">
+                            <el-select clearable multiple collapse-tags v-model="row.excludeKpi" placeholder="请选择指标">
+                                <el-option
+                                        v-for="item in resKpiList"
+                                        :key="item.kpiId"
+                                        :label="item.kpiName"
+                                        :value="item.kpiId">
+                                    <span style="float: left">{{ item.kpiId }}</span>
+                                    <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.kpiName }}</span>
+                                </el-option>
+                            </el-select>
+                        </div>
+                    </template>
+                </cm-table-page>
+            </div>
+    </cm-dialog>
+</div>

+const excludeResInfo = (proxy,subId,callback) =>{
+    let resFlag = Vue.ref(false);
+    // 列表展示结果
+    let reslist = Vue.ref({
+        columns: [{
+            prop: 'resName',
+            label: '资源名称'
+        }, {
+            prop: 'ip',
+            label: 'IP地址'
+        }, {
+            prop: 'adminName',
+            label: '负责人'
+        }, {
+            prop: 'resTypeName',
+            label: '资源类型'
+        }, {
+            prop: 'healthDesc',
+            label: '资源状态'
+        }, {
+            prop: 'excludeKpi',
+            label: '过滤指标'
+        }],
+        dataList: [],
+        total: 0
+    });
+    let resKpiList = Vue.ref([]);
+
+    let showResDialog = (flg) =>{
+
+        if(flg && flg == true){
+            getResList();
+            // 获取指标列表
+            proxy.$http.get(`/api-web/alarmsubscribe/exclude/getAlarmPolicyKpiList/res`, {subId:subId}, function (res) {
+                if (res && res.data) {
+                    resKpiList.value = res.data;
+                }
+            });
+        } else {
+            resFlag.value = flg;
+        }
+    }
+
+    /**
+     * 获取资源列表
+     * <p>
+     * 作者： Wang
+     * 时间：2022/2/15 15:27
+     */
+    let getResList = () => {
+        proxy.$http.get(`/api-web/alarmsubscribe/exclude/getSubResListBySubId/${subId}`, {subId:subId}, function (res) {
+            if (res && res.data) {
+                reslist.value.dataList = res.data;
+                resFlag.value = true;
+            }
+        });
+    }
+
+    let saveResInfo = () => {
+        let params = [];
+
+        reslist.value.dataList.forEach(function (v){
+            v.excludeKpi.forEach(function (kpi){
+                params.push({
+                    resId:v.resId,
+                    subId:subId,
+                    kpiId:kpi
+                })
+            })
+
+        })
+
+        // 保存策略过滤配置
+        proxy.$http.post(`/api-web/alarmsubscribe/exclude/saveResConfig`, params, function (res) {
+            if (res && res.success) {
+                proxy.$global.showMsg("保存成功", "success");
+                if(callback){
+                    callback();
+                }
+                showResDialog(false);
+            }
+        });
+
+    }
+
+    return {
+        resFlag,
+        reslist,
+        showResDialog,
+        getResList,
+        resKpiList,
+        saveResInfo
+    }
+
+}
+
+const excludeKpi = (proxy,subId,callback) => {
+    let excludeKpiFlag = Vue.ref(false);
+    let kpiDetail = Vue.ref({
+        options:[],
+        dataList:[]
+    });
+
+    let showExcludeKpi = function (flag) {
+        excludeKpiFlag.value = flag;
+        if(flag && flag == true && kpiDetail.value.options.length == 0){
+            getAlarmPolicyKpiList();
+        }
+    }
+
+    let getAlarmPolicyKpiList = function (){
+        proxy.$http.get(`/api-web/alarmsubscribe/exclude/getAlarmPolicyKpiList/kpi`, {subId:subId}, function (res) {
+            if (res && res.data) {
+                kpiDetail.value.options = res.data;
+            }
+        });
+    }
+
+    let saveKpiInfo = function () {
+        let params = [];
+        kpiDetail.value.dataList.forEach(function (v){
+            params.push({
+                subId:subId,
+                kpiId:v
+            })
+        })
+        if(params.length > 0){
+            // 保存策略过滤配置
+            proxy.$http.post(`/api-web/alarmsubscribe/exclude/saveConfig`, params, function (res) {
+                if (res && res.success) {
+                    proxy.$global.showMsg("保存成功", "success");
+                    if(callback){
+                        callback();
+                    }
+                    showExcludeKpi(false);
+                }
+            });
+        }
+    }
+
+    return {
+        excludeKpiFlag,
+        showExcludeKpi,
+        kpiDetail,
+        saveKpiInfo
+    }
+}
+
+export default {
+    name: 'resIndex',
+    template: '',
+    components: {},
+    data() {
+        return {
+            props: {
+                label: 'label',
+                children: 'children'
+            }
+        }
+    },
+    setup() {
+        const {proxy} = Vue.getCurrentInstance();
+        let height = Vue.ref(window.innerHeight - 20);
+
+        let sunId = proxy.$global.getQueryVariable('subId');
+
+        // 搜索表单内容
+        let searchForm = Vue.ref({
+            keyword: '',
+            page: 1,
+            pageSize: 10
+        });
+
+        // 列表展示结果
+        let list = Vue.ref({
+            columns: [{
+                prop: 'subName',
+                label: '订阅名称'
+            }, {
+                prop: 'resName',
+                label: '资源名称'
+            }, {
+                prop: 'kpiId',
+                label: '指标ID'
+            }, {
+                prop: 'kpiName',
+                label: '指标名称'
+            }, {
+                prop: 'enable',
+                label: '状态'
+            }],
+            dataList: [],
+            total: 0
+        });
+
+        /**
+         * 分页查询
+         * <p>
+         * 作者： Wang
+         * 时间：2021/12/13 16:51
+         */
+        let getPage = () => {
+            proxy.$http.get(`/api-web/alarmsubscribe/exclude/list`, {
+                keyword: searchForm.value.keyword,
+                subId: sunId
+            }, function (res) {
+                if (res && res.data) {
+                    list.value.dataList = res.data;
+                }
+            });
+        }
+
+        /**
+         * 修改状态
+         * <p>
+         * 作者： Wang
+         * 时间：2022/2/11 16:30
+         */
+        let setEnable = (row) => {
+            if (!row.id) {
+                return;
+            }
+            proxy.$http.get(`/api-web/alarmsubscribe/exclude/setEnable`, {
+                id: row.id,
+                enable: row.enable
+            }, function (res) {
+                if (res && res.success) {
+                    proxy.$global.showMsg("更新成功", "success")
+                }
+            });
+        }
+
+        /**
+         * 删除
+         * @param row
+         * @param index
+         */
+        let deleteItem = (row,index) =>{
+            proxy.$global.confirm("将永久删除该配置选项，请确认！", function () {
+                debugger
+                proxy.$http.get(`/api-web/alarmsubscribe/exclude/delete/${row.id}`, {}, function (res) {
+                    if (res && res.success) {
+                        proxy.$global.showMsg('保存成功！');
+                        getPage()
+                    }
+                })
+
+            });
+        }
+
+
+        const {
+            excludeKpiFlag,
+            showExcludeKpi,
+            kpiDetail,
+            saveKpiInfo
+        } = excludeKpi(proxy,sunId,getPage)
+
+
+        const {
+            resFlag,
+            reslist,
+            showResDialog,
+            getResList,
+            resKpiList,
+            saveResInfo
+        } = excludeResInfo(proxy,sunId,getPage);
+
+
+        // 挂载完
+        Vue.onMounted(() => {
+            // 初始化加载页面
+            getPage();
+        })
+
+        return {
+            height,
+            searchForm,
+            list,
+            getPage,
+            setEnable,
+            deleteItem,
+
+            // 配置指标
+            excludeKpiFlag,
+            showExcludeKpi,
+            kpiDetail,
+            saveKpiInfo,
+
+            // 配置资源
+            resFlag,
+            reslist,
+            showResDialog,
+            getResList,
+            resKpiList,
+            saveResInfo
+
+        }
+    }
+}

@@ -164,6 +164,11 @@ const routes = [{
 		path: '/vue3/portSenseSelect',
 		name: 'portSenseSelect',
 		component: () => myImport('views/portSenseSelect/index')
+	},
+	{
+		path: '/alarmsubscribe/excludeKpi',
+		name: 'alarmSubscribeExcludeKpi',
+		component: () => myImport('views/alarmsubscribe/index')
 	}
 ];