【练习】告警策略配置

最新推荐文章于 2024-07-29 17:16:06 发布

YIYIYI1205

最新推荐文章于 2024-07-29 17:16:06 发布

阅读量1.8k

点赞数

分类专栏：前端学习 angularJs

本文链接：https://blog.csdn.net/weixin_40326021/article/details/84631053

版权

前端学习同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

angularJs

10 篇文章 0 订阅

订阅专栏

1、网段多选下拉框

要实现的结果：点击网段多选框后，会显示input框，点击input框后展示下拉列表，可以进行多选

请求两次数据，一是下来列表中的内容，二是初始化内容，列表中已经被选择的内容

实现的方法：我的：在controller中请求初始化的内容，用指令传参传到指令中，在指令中请求下拉列表的内容，在指令中用 $watch监听传到指令的初始化内容，再进行更改（很复杂，并且有很多问题，比如下拉列表内容还没有请求过来，已经初始化完成，此时判断下拉列表中是否有初始化的数据，会报错，因为下拉列表会是undefined）

推荐：直接在controller中用$q.all发起两次异步请求，一起请求成功后直接新建一个展示的数组，存上selected属性，直接把这个数组传给指令，在指令中直接循环这个数组，这时候就可以实现双向数据绑定，而不需要使用$watch

<input type="checkbox" ng-model="strategyForm.strategyObj.network">
<span>网段</span>
<div multi-select-ip input-modal="strategyForm.strategyObj.network" ip-tables="ipTables" output-modal="sendIpRange"></div>

    /* 初始化策略信息 */
    function setAlarmStrategyFunc(){
        alarmService.getAlarmStrategy().then(
            function(resp){                 
                $scope.strategyForm.strategyObj.assets = resp.selectAsset;  //设置资产的对象
                if(resp.alarmNoticeUsers.length!=0){
                    $scope.showList=[];
                    _.forEach(resp.alarmNoticeUsers,function(item){
                        let arr={
                            level:"",
                            type:"",
                            userList:"",
                            id:"",
                            notice:{}
                        };
                        arr.level=_.find($scope.strategyLevelAll,{encoded:item.level}).txt;
                        _.remove($scope.strategyLevel,{encoded:item.level});
                        if($scope.strategyLevel.length==0){
                            $scope.strategyLevel=[{txt:"无"}];
                        }
                        _.forEach(item.noticeMethodList,function(data){
                            arr.type+=_.find($scope.strategyType,{id:parseInt(data)}).name+',';
                        });
                        arr.type=arr.type.slice(0,arr.type.length-1);
                        _.forEach(item.userList,function(data){
                            _.forEach($scope.strategyForm.$userList.input,function(item){
                                arr.userList+=_.find(item.userlist,{id:parseInt(data)}).name+',';
                            });
                        });
                        arr.userList=arr.userList.slice(0,arr.userList.length-1);
                        arr.id=$scope.showList.length+1;
                        arr.notice=item;
                        $scope.showList.push(arr);
                    });
                }
                if(resp.ipTables!=""){
                    $scope.strategyForm.strategyObj.network=true;
                    $scope.ipTables=resp.ipTables.split(',');
                }else{
                    $scope.strategyForm.strategyObj.network=false;
                }
            }, function(){
        });  
    }

//多选网段
angular.module('soc.app.alarms').directive('multiSelectIp',['alarmService','$log',function(alarmService,$log){
    return {
        restrict: 'AE',
        // replace:true,
        scope:{
            inputModal:"=",
            outputModal:"=",
            ipTables:"=",
        },
        template:
            '<div class="form-group divShow" ng-show="showInputModal">' +
            '<label class="col-md-2 control-label"></label><div class="inputShow col-md-5" id="input"><input type="text" ng-model="showTip" readonly=true autocomplete="off"/>'+
            '<span class="caret caret-right"></span></div><span class="jump" ng-click="jump()">前往配置网段</span>'+
            '<ul class="dropdown-menu innerNet" id="innerNet" ng-show="showUl">'+
            '<li class="checkbox">' +
            '<label><input type="checkbox" ng-model="checkedAll" ng-click="checkedAllItem()"/><span>选择全部</span></label>' +
            '</li>' +
            '<li role="separator" class="divider"></li>' +
            '<li ng-repeat="item in innerNet" class="checkbox">' +
            '<label>' +
            '<input type="checkbox" ng-model="item.selected" ng-click="checkItem()"/><span ng-bind="item.ip"></span>' +
            '</label>' +
            '</li>' +
            '</ul></div>',
        link:function(scope, element){
            scope.showTip='已选择0项';
            scope.jump=function(){
                location.href="/pisces/knowledge/#/geography";
            };
            scope.showList=function(){
                scope.showUl=true;
            }
            scope.checkedAll = false;
            scope.selectedNum=0;
            if(scope.inputModal){
                scope.showInputModal=true;
            }else{
                scope.showInputModal=false;
            }
            alarmService.getIpv4List().then(function (res) {
                scope.innerNet=_.filter(res.data,{is_intranet:true});
                if(scope.innerNet==undefined){
                    scope.innerNet.ip='请进行网段配置';
                }else{
                    _.forEach(scope.innerNet,function(item){
                        item.ip=item.ip_start_str+'-'+item.ip_end_str;
                        item.selected=false;
                    });
                }
                scope.$watch('ipTables',function(){
                    if(scope.ipTables.length!=0){
                        if(scope.innerNet){
                            _.forEach(scope.ipTables,function (item) {
                                _.find(scope.innerNet,{ip:item}).selected=true;
                            })
                            scope.selectedNum=scope.ipTables.length;
                            scope.showTip='已选择'+scope.selectedNum+'项';
                            var outputArr=_.filter(scope.innerNet,{'selected':true});
                            var output=[];
                            _.forEach(outputArr,function(item){
                                output.push(item.ip)
                            })
                            scope.outputModal=output.join(",")
                            if(scope.selectedNum==scope.innerNet.length){
                                scope.checkedAll = true;
                            }else{
                                scope.checkedAll = false;
                            }
                        }
                    }
                })
            },function(res){
                $log.warn("获取网段失败", err);
            })
            scope.$watch('inputModal',function(){
               if(scope.inputModal){
                   scope.showInputModal=true;
               }else{
                   scope.showInputModal=false;
                   scope.outputModal="";
                   scope.checkedAll=false;
               }
            })
            scope.$watch("selectedNum",function () {
                if(scope.selectedNum==0){
                    scope.outputModal="";
                }
            })
            scope.checkedAllItem = function(){
                _.forEach(scope.innerNet, function(item){
                    item.selected = scope.checkedAll;
                });
                if(scope.checkedAll){
                    scope.selectedNum=scope.innerNet.length;
                    var outputArr=_.filter(scope.innerNet,{'selected':true});
                    var output=[];
                    _.forEach(outputArr,function(item){
                        output.push(item.ip)
                    })
                    scope.outputModal=output.join(",")
                }else{
                    scope.selectedNum=0;
                }
                scope.showTip='已选择'+scope.selectedNum+'项';
            };
            scope.checkItem=function(){
                scope.selectedNum=_.filter(scope.innerNet,{'selected':true}).length;
                if(scope.selectedNum==scope.innerNet.length){
                    scope.checkedAll = true;
                }else{
                    scope.checkedAll = false;
                }
                scope.showTip='已选择'+scope.selectedNum+'项';
                var outputArr=_.filter(scope.innerNet,{'selected':true});
                var output=[];
                _.forEach(outputArr,function(item){
                    output.push(item.ip)
                })
                scope.outputModal=output.join(",")
            }
            var input =document.getElementById("input");
            var myDiv = document.getElementById("innerNet");
            document.addEventListener("click", function () {
                scope.showUl = false;
                scope.$apply();//这个一定要加,否则隐藏不了
            });
            myDiv.addEventListener("click", function (event) {
                scope.showUl = true;
                scope.$apply();
                event = event || window.event;
                event.stopPropagation();//阻止事件冒泡,防止隐藏
            });
            input.addEventListener("click", function (event) {
                scope.showUl = true;
                scope.$apply();
                event = event || window.event;
                event.stopPropagation();//阻止事件冒泡,防止隐藏
            });
        }
    }
}]);