自定义控件分为2个脚本：
Designer脚本： 被报表设计器引用，用来定义控件的配置面板和渲染等；
View脚本：当用户查看报表时被引用，仅用于渲染；
//请将$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);
}]);
//请勿修改此处命名参数
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
});
}
}
