Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

【Designer脚本模板】


Code Block
languagejs
//请勿修改此处命名参数请将$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);

}]);

...