过滤器控件模板

回到主页

过滤器控件模板

· 【用户手册】厦门艾科思移动报表平台使用

 【Designer脚本模板】 

//请将$vcPlugin_demo_demoEcharts中的demo换成相应的分类标识
vsPluginComponentModule.factory('$vcPlugin_demo_demoFilterWidget', ['$vsPluginRegister', '$timeout', function ($vsPluginRegister, $timeout) {
 
    var factory = {
 
        //配置面板中显示[数据]配置
        showDataCategory: true,
        //配置面板中显示[边框]配置
        showBorderCategory: true,
        //配置面板中显示[基本]配置
        showBasicCategory: true,
        //配置面板中显示[浮动]配置
        showFixedCategory: true,
        //配置面板中显示[事件]配置
        showEventCategory: true,
        //配置面板中显示[标题]配置
        showTitleCategory: false,
        //配置面板中显示[预警]配置
        showThresholdCategory: false,
 
        /* 控件的初始化 */
        init: function(scope, element, component, $compile){
            scope.element = element;
            scope.component = component;
            //开启页面过滤
            component.config.pageFilter = true;
            //控件的图形维度数量设置为1
            scope.component.config.chartDimensionCount = 1;
            component.config.selectedItem = null;
            //配置默认属性
            if(component.config.inited == null){
                component.config.inited = true;
                component.config.itemHeight = 40;
                component.config.itemLineHeight = 40;
                //未选中项的背景色和字体色
                component.config.itemBgColor = "#ffffff";
                component.config.itemFontColor = "#333333";
                //选中项的背景色和字体色
                component.config.selectedItemBgColor = "#2990EA";
                component.config.selectedItemFontColor = "#ffffff";
            }
 
        },
 
        /*
         * 构建数据描述，此方法中对控件的数据进行处理
         */
        buildDataDescription: function(dataDescription, scope, element, component, $compile){
            //接收控件刷新数据的事件
            scope.$on(event_refreshComponentData, function(target, param){
                //如果刷新数据事件的发出者是当前控件，不处理本次通知
                if(param.component != null && scope.component.id === param.component.id){
                    return;
                }
                scope.queryComponentData(param, {
                    onSuccess: function(){
                        refreshChartView(scope, element, component, $compile);
                    }
                });
            });
 
            /*
             * 页面过滤回调方法，其它控件查询数据时会调用该方法，获取过滤的属性
             * 当component.config.pageFilter设置为true时被调用
             */           
            scope.component.context.getPageFilter = function(){
                var result = [];
                if(component.config.selectedItem != null){
                    //将图形维度的值配置到过滤项中
                    var value = component.config.selectedItem.value
                    if(value != null && value !== vsLang.heji){
                        result.push({
                            column: scope.getLastDimension().name,
                            exp: "=",
                            value: value
                        });
                    }
                }
                return result;
            }
             
            //选择项被选中时，发出过滤通知
            scope.onItemClicked = function(){
                var value = component.config.selectedItem.value;
                //将选中项的值缓存起来
                scope.cacheDimensionValue(scope.getLastDimension().name, value);
                $timeout(function(){
                    scope.notifyDimensionValueFilterEvent({
                        queryConditionDimensions: true
                    });
                });
            }
 
        },
 
        /*
         * 构建图形描述，此方法中定义控件的配置面板
         */
        buildChartDescription: function(scope, element, component, $compile, $sce){
             
            scope.isSelectedItem = function(item){
                return component.config.selectedItem != null && ""+item.value === ""+component.config.selectedItem.value;
            }
             
            scope.getItemStyle = function(item){
                if(scope.isSelectedItem(item)){
                    return {
                        'background-color':component.config.selectedItemBgColor,
                        'color': component.config.selectedItemFontColor
                    }
                }else{
                    return {
                        'background-color':component.config.itemBgColor,
                        'color': component.config.itemFontColor
                    }
                }
                     
            }
             
            var html = [];
            html.push("<div style='height:100%;overflow-x:auto;overflow-y:hidden;'>");
            html.push(" <div ng-show='component.config.datasourceConfig.dimensions == null' style='height:100%;width:100%;display:table;'>");
            html.push("  <div style='text-align:center;background-color:#f0f0f0;vertical-align:middle;display:table-cell;cursor:pointer;'>");
            html.push("     请配置数据源");
            html.push("  </div>");
            html.push(" </div>");
            html.push(" <div ng-show='component.config.datasourceConfig.dimensions != null' style='height:100%;width:100%;display:table;'>");
            html.push("  <div style='vertical-align:middle;display:table-cell;text-align:center;cursor:pointer;word-break: keep-all;white-space:nowrap;' ng-style=\"getItemStyle(item)\" ng-repeat='item in component.config.optionItems track by $index' ng-model='component.config.selectedItem' ng-click='onItemClicked()' uib-btn-radio=\"item\">");
            html.push("   {{item.label}}");
            html.push("  </div>");
            html.push(" </div>");
            html.push("</div>");
             
            var el = $compile(html.join(""))( scope );
            element.html(el);
             
            {
                //未选中
                var categoryDesc = {
                    name: "unselected",
                    title: "未选中",
                    groups: []
                };
                 
                categoryDesc.groups.push({
                    name: "itemBg",
                    title: {
                        text: "背景"
                    },
                    elements: [{
                        title: "颜色",
                        type: "colorpicker",
                        bind: "itemBgColor"
                    }]
                });
                 
                categoryDesc.groups.push({
                    name: "itemText",
                    title: {
                        text: "文本"
                    },
                    elements: [{
                        title: "尺寸",
                        type: "configSlide",
                        bind: "itemFontSize",
                        config: {
                            slideEnd: 100
                        }
                    },{
                        title: "颜色",
                        type: "colorpicker",
                        bind: "itemFontColor"
                    }]
                });
                 
                component.description.categories.push(categoryDesc);
                 
            }
             
            {
                //选中
                var categoryDesc = {
                    name: "selected",
                    title: "选中",
                    groups: []
                };
                 
                categoryDesc.groups.push({
                    name: "itemBg",
                    title: {
                        text: "背景"
                    },
                    elements: [{
                        title: "颜色",
                        type: "colorpicker",
                        bind: "selectedItemBgColor"
                    }]
                });
                 
                categoryDesc.groups.push({
                    name: "itemText",
                    title: {
                        text: "文本"
                    },
                    elements: [{
                        title: "尺寸",
                        type: "configSlide",
                        bind: "selectedItemFontSize",
                        config: {
                            slideEnd: 100
                        }
                    },{
                        title: "颜色",
                        type: "colorpicker",
                        bind: "selectedItemFontColor"
                    }]
                });
                 
                component.description.categories.push(categoryDesc);
                 
            }
        }
    };
     
    var buildSettingDescription = function(scope, element, component, $compile){
        //构建[设置]配置面板
        var category = {
            name: "setting",
            title: "设置",
            groups: []
        };
        component.description.categories.push(category);
 
        category.groups.push({
            name: "text",
            title: {
                text: "文本设置"
            },
            elements: [{
                title: "",
                type: "text-area",
                bind: "content"
            }]
        });
        category.groups.push({
            name: "font",
            title: {
                text: vsLang.font
            },
            elements: [{
                title: "尺寸",
                type: "configSlide",
                bind: "fontSize",
                config: {
                    slideStart: 10,
                    slideEnd: 100
                }
            },{
                title: "对齐",
                type: "horizontal-align",
                bind: "textAlign"
            },{
                title: "颜色",
                type: "colorpicker",
                bind: "color"
            }]
        });
 
    }
     
     //刷新控件渲染
    var refreshChartView = function(scope, element, component, $compile){
        var dimensions = component.config.datasourceConfig.dimensions;
        //从context中获得控件数据
        var data = component.context.data;
        //获取图形维度默认值
        var initValue = scope.parseInitValue();
        //过滤器中的选项
        var optionItems = [];
        //当前选中项
        var selectedItem = null;
        //将维度值设置为过滤器中的选项
        for(var i = 0; i < data.length; i++){
            var value = data[i][dimensions[dimensions.length-1].name];
            var item = {
                label: ""+value,
                value: ""+value
            };
            //检查值是否是合计，中文环境下是'合计',英文环境下是"All"
            if(value != null && value === vsLang.heji){
                //获取合计别名
                item.label = scope.getDimensionSummaryAlias(dimensions[dimensions.length-1].name);
            }
            optionItems.push(item);
        }
        //检查是否配置了维度默认值
        if(initValue != null && component.context.first_render_init_value == null){
            component.context.first_render_init_value = initValue;
            selectedItem = {
                value: initValue,
                label: initValue
            };
        }else{
            //如果没有配置维度默认值，尝试从缓存中获取维度值作为默认选中
            var cachedSelectedValue = scope.getCachedDimensionValue(dimensions[dimensions.length-1].name);
            for(var i = 0; i < optionItems.length; i++){
                if(""+optionItems[i].value === ""+cachedSelectedValue){
                    selectedItem = optionItems[i];
                    break;
                }
            }
        }
        scope.component.config.optionItems = optionItems;
        //如果默认选中的值为空，则将第一个值作为默认选中
        if(selectedItem == null && optionItems.length > 0){
            selectedItem = optionItems[0];
        }
        component.config.selectedItem = selectedItem;
        //将选中的值缓存起来
        scope.cacheDimensionValue(dimensions[dimensions.length-1].name, selectedItem == null ? null : selectedItem.value);
    };
 
    //请将第一个参数"demo"换成相应的分类标识
    $vsPluginRegister.register("demo", "demoFilterWidget", factory);
 
}]);

 【View脚本模板】 

//请勿修改此处命名参数
var build_demoFilterWidget_component = function(scope, element, $compile, $timeout){
 
    var component = scope.component;
     
    component.config.selectedItem = null;
     
    scope.isSelectedItem = function(item){
        return component.config.selectedItem != null && ""+item.value === ""+component.config.selectedItem.value;
    }
     
    scope.getItemStyle = function(item){
        if(scope.isSelectedItem(item)){
            return {
                'background-color':component.config.selectedItemBgColor,
                'color': component.config.selectedItemFontColor
            }
        }else{
            return {
                'background-color':component.config.itemBgColor,
                'color': component.config.itemFontColor
            }
        }
             
    }
     
    var html = [];
    html.push("<div style='height:100%;overflow-x:auto;overflow-y:hidden;'>");
    html.push(" <div ng-show='component.config.datasourceConfig.dimensions == null' style='height:100%;width:100%;display:table;'>");
    html.push("  <div style='text-align:center;background-color:#f0f0f0;vertical-align:middle;display:table-cell;cursor:pointer;'>");
    html.push("     请配置数据源");
    html.push("  </div>");
    html.push(" </div>");
    html.push(" <div ng-show='component.config.datasourceConfig.dimensions != null' style='height:100%;width:100%;display:table;'>");
    html.push("  <div style='vertical-align:middle;display:table-cell;text-align:center;cursor:pointer;word-break: keep-all;white-space:nowrap;' ng-style=\"getItemStyle(item)\" ng-repeat='item in component.config.optionItems track by $index' ng-model='component.config.selectedItem' ng-click='onItemClicked()' uib-btn-radio=\"item\">");
    html.push("   {{item.label}}");
    html.push("  </div>");
    html.push(" </div>");
    html.push("</div>");
     
    var el = $compile(html.join(""))( scope );
    element.html(el);
 
    //刷新控件渲染，可直接将designer.js中的方法复制过来
    var refreshChartView = function(){
        var dimensions = component.config.datasourceConfig.dimensions;
        //从context中获得控件数据
        var data = component.context.data;
        //获取图形维度默认值
        var initValue = scope.parseInitValue();
        //过滤器中的选项
        var optionItems = [];
        //当前选中项
        var selectedItem = null;
        //将维度值设置为过滤器中的选项
        for(var i = 0; i < data.length; i++){
            var value = data[i][dimensions[dimensions.length-1].name];
            var item = {
                label: ""+value,
                value: ""+value
            };
            //检查值是否是合计，中文环境下是'合计',英文环境下是"All"
            if(value != null && value === vsLang.heji){
                //获取合计别名
                item.label = scope.getDimensionSummaryAlias(dimensions[dimensions.length-1].name);
            }
            optionItems.push(item);
        }
        //检查是否配置了维度默认值
        if(initValue != null && component.context.first_render_init_value == null){
            component.context.first_render_init_value = initValue;
            selectedItem = {
                value: initValue,
                label: initValue
            };
        }else{
            //如果没有配置维度默认值，尝试从缓存中获取维度值作为默认选中
            var cachedSelectedValue = scope.getCachedDimensionValue(dimensions[dimensions.length-1].name);
            for(var i = 0; i < optionItems.length; i++){
                if(""+optionItems[i].value === ""+cachedSelectedValue){
                    selectedItem = optionItems[i];
                    break;
                }
            }
        }
        scope.component.config.optionItems = optionItems;
        //如果默认选中的值为空，则将第一个值作为默认选中
        if(selectedItem == null && optionItems.length > 0){
            selectedItem = optionItems[0];
        }
        component.config.selectedItem = selectedItem;
        //将选中的值缓存起来
        scope.cacheDimensionValue(dimensions[dimensions.length-1].name, selectedItem == null ? null : selectedItem.value);
    };
 
    //接收控件刷新数据的事件
    scope.$on(event_refreshComponentData, function(target, param){
        //如果刷新数据事件的发出者是当前控件，不处理本次通知
        if(param.component != null && scope.component.id === param.component.id){
            return;
        }
        scope.queryComponentData(param, {
            onSuccess: function(){
                refreshChartView(scope, element, component, $compile);
            }
        });
    });
 
    /*
     * 页面过滤回调方法，其它控件查询数据时会调用该方法，获取过滤的属性
     * 当component.config.pageFilter设置为true时被调用
     */           
    scope.component.context.getPageFilter = function(){
        var result = [];
        if(component.config.selectedItem != null){
            //将图形维度的值配置到过滤项中
            var value = component.config.selectedItem.value
            if(value != null && value !== vsLang.heji){
                result.push({
                    column: scope.getLastDimension().name,
                    exp: "=",
                    value: value
                });
            }
        }
        return result;
    }
     
    //选择项被选中时，发出过滤通知
    scope.onItemClicked = function(){
        var value = component.config.selectedItem.value;
        //将选中项的值缓存起来
        scope.cacheDimensionValue(scope.getLastDimension().name, value);
        scope.notifyDimensionValueFilterEvent({
            queryConditionDimensions: true
        });
    }
 
}