【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 }); } }