回到主页
回到主页

13.自定义控件

· 【用户手册】厦门艾科思移动报表平台使用,厦门艾科思报表平台系统管理

自定义控件分为2个脚本:

Designer脚本: 被报表设计器引用,用来定义控件的配置面板和渲染等;

View脚本:当用户查看报表时被引用,仅用于渲染;

【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

});

}

}

上一篇
预警通知脚本配置
下一篇
大数据分析:原著 PK 电影,谁更得观众心?
 回到主页
strikingly icon上线了提供技术支持
Cookie的使用
我们使用cookie来改善浏览体验、保证安全性和数据收集。一旦点击接受,就表示你接受这些用于广告和分析的cookie。你可以随时更改你的cookie设置。 了解更多
全部接受
设置
全部拒绝
Cookie设置
必要的Cookies
这些cookies支持诸如安全性、网络管理和可访问性等核心功能。这些cookies无法关闭。
分析性Cookies
这些cookies帮助我们更好地了解访问者与我们网站的互动情况,并帮助我们发现错误。
首选项Cookies
这些cookies允许网站记住你的选择,以提供更好的功能和个性化支持。
保存