$customService

如果在开发中要引用$customService服务，首先需要在config.json中的services中增加配置， 其次要在main.js或用户自己的创建的其他js文件中，引用该插件。

示例：

{
"develop":{
"html":"index.html",
"css":["./index.css"],
"entry":"./main.js",
"scripts":{
}
},
"plugins":[],
"libs":[],
"services":["$customService"],
"customAttributes":{
"pro":[
]
}
}
(function(){
return {
$data:{
properties:null
$instance:null
},
$methods:{
},
$hookds:{
onInit(properties){
this.$customService=window.services.$customService;
},
onDestroy(){
},
setData(data,datasourceInfo){
},
outSizeCallBack(info){
}
}
}
})

$customService service中封装了一些供自定义组件调用的方法。

singleDataSourceDrillDown(selectColumnName,properties)/singleDataSourceDrillUp(selectColumnName,properties)

功能：单数据源下钻/单数据源上钻

参数：

属性类型备注
selectColumnNameString选择的维度的名称；
propertiesObject自定义组件的properties

示例：

{
"develop":{
"html":"index.html",
"css":["./styles/index.css"],
"entry":"./scripts/main.js",
"scripts":{
}
},
"plugins":[],
"services":["$customService","$eventDispatch"],
"libs":["https://cdn.jsdelivr.net/npm/vue/dist/vue.js"],
"customAttributes":{
"pro":[
],
"con":[
{
"type":"BiDatasourceConfigComponent",
"customInput":{
"dimensionCount":1,
"measureCount":1,
"canDrillDown":true,
"widgetCanDrillDown":true
},
"setDataParams":{
"simple":true
}
},{
"type":"ShadowTitleDisplay",
"name":"参与组件过滤"
}
]
}
}
<body>
<div id="_#visroot#_" class="_#customWidget#_">
<div class="drillupBtn" v-if="table1.drillup&&!table1.requesting" v-on:click="drillup()">
上钻
</div>
<table>
<thead>
<tr>
<template v-for="dimension in table1.dimensions">
<th>{{dimension.name}}</th>
<th v-for="name in table1.data[dimension.column]" class="clickItem" style="cursor:pointer;color:rgb(255,255,0)" v-on:click="drilldown(dimension,name)">{{name}}</th>
</template>
</tr>
</thead>
<tbody>
<tr v-for="measure in table1.measures">
<td>{{measure.name}}</td><td v-for="value in table1.data[measure.column]">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</body>
(function(options){
var $customService=null;
var $eventDispatch=null;
var vueData={
title:"vue 渲染 返回数据",
table1:{
data:{},
dimensions:[],
measures:[],
drilldown:false,
drillup:false,
requesting:false
}
};
new Vue({
el: '#_#visroot#_',
data: vueData,
methods: {
drilldown:function(dimension,name){
$customService.multiDataSourceDrillDown(name,returnData.datasource1,returnData.properties_.config.linkage,returnData.properties_);
returnData.drilldownIndex++;
if(returnData.drilldownIndex>0){
vueData.table1.drillup=true;
}
vueData.table1.requesting=true;
},
drillup:function(){
if(returnData.drilldownIndex>0){
returnData.drilldownIndex--;
}
if(returnData.drilldownIndex===0)vueData.table1.drillup=false;
$customService.multiDataSourceDrillUp(returnData.datasource1,returnData.properties_.config.linkage,returnData.properties_);
}
}
});
Vue.config.productionTip=false;
var returnData= {
datasource1:null,
datasource2:null,
properties_:null,
$customService:null,
$eventDispatch:null,
drilldownIndex:0,
onInit(properties_){
this.properties_=properties_;
$customService=this.$customService=window.services.$customService;
$eventDispatch=this.$eventDispatch=window.services.$eventDispatch;
console.debug('customService:');
console.debug(this.$customService);
},
onDestroy(){
console.log('销毁');
},
setData(data,obj){
if(data&&obj){
vueData.table1.requesting=false;
console.log("自定义组件得到数据1:");
console.log(data);
console.log(obj);
let dimensionList=this.$customService.getDataSourceDimensionColumns(obj.data);
let measureList=this.$customService.getDataSourceMeasureColumns(obj.data);
console.log(dimensionList);
console.log(measureList);
vueData.table1.dimensions.splice(0,vueData.table1.dimensions.length);
vueData.table1.measures.splice(0,vueData.table1.measures.length);
let index=dimensionList.findIndex(item=>item.type==='drill-folder');
if(index>-1){
vueData.table1.drilldown=true;
let drilldownItem=dimensionList[0];
vueData.table1.dimensions.push(drilldownItem.list[drilldownItem.index]);
}else{
vueData.table1.dimensions.push(...dimensionList);
}
vueData.table1.measures.push(...measureList);
Object.keys(data.data).forEach(key=>{
vueData.table1.data[key]=data.data[key];
});
this.datasource1=obj.data;
}
},
outSizeCallBack(value){
console.log(value)
},
colorChange(value){
console.log(value);
},
multiDataSourceSetData1(data,obj){
if(data&&obj){
vueData.table1.requesting=false;
console.log("自定义组件得到数据1:");
console.log(data);
console.log(obj);
let dimensionList=this.$customService.getDataSourceDimensionColumns(obj.data);
let measureList=this.$customService.getDataSourceMeasureColumns(obj.data);
console.log(dimensionList);
console.log(measureList);
vueData.table1.dimensions.splice(0,vueData.table1.dimensions.length);
vueData.table1.measures.splice(0,vueData.table1.measures.length);
let index=dimensionList.findIndex(item=>item.type==='drill-folder');
if(index>-1){
vueData.table1.drilldown=true;
let drilldownItem=dimensionList[0];
vueData.table1.dimensions.push(drilldownItem.list[drilldownItem.index]);
}else{
vueData.table1.dimensions.push(...dimensionList);
}
vueData.table1.measures.push(...measureList);
Object.keys(data.data).forEach(key=>{
vueData.table1.data[key]=data.data[key];
});
this.datasource1=obj.data;
}
}
}
return returnData;
})

demo下载

reLoadCustomWidgetData(properties)

功能：主动重新请求数据。

参数：properties

属性类型备注
propertiesObject自定义组件的properties

checkOutConfigItemByName(customAttributes,name)

功能： 在properties.config.customAttribute中根据属性栏组件的名称查找。先从样式组件中查找，如果存在对应的配置，则停止查找返回该配置项的内容，否则继续在数据源组件中查找

参数：

属性类型备注
customAttributesObject自定义组件的properties.config.customAttributes
nameString自定义组件的属性栏组件的名称

返回值： 将返回 config.json下配置的customAttributes中，名称为用户传入的那一项。 如果没有查找到，将返回undefined;

示例：

{
"develop":{
"html":"index.html",
"css":["./css/index.css"],
"entry":"./main.js",
"scripts":{
}
},
"plugins":[],
"services":[],
"libs":[],
"customAttributes":{
"pro":[
{
"type":"WidgetSelect",
"name":"下拉列表",
"customInput":{
"ngvSelects":[
],
"ngvModel":"standard",
"labelName":"lable",
"valueName":"value",
"ngvHeight":"100px"
},
"callback":"selectChanged"
},
],
"con":[]
}
}

上例中配置了一个下拉列表，那么我们可以在js中根据名称“下拉列表”，获得该项的引用，并对ngvSelects赋值。

(function(option){
var $=window.plugins.jquery;
return {
$data:{
...
},
$hooks:{
onInit(properties){
this.$customService=window.services.$customService;
this.properties=properties;
this.pageListItem=this.$customService.checkOutConfigItemByName(this.properties.config.customAttributes,"页面列表");
this.pageListItem.customInput.ngvSelects=this.$customService.getPageNameList();
...
...
},
onDestroy(){
},
setData(value){
}
},
$methods:{
titleChange(deviceId){
},
selectChanged(name){
}
}
}
})

checkGrouItemContainMultiDataSource(children)

功能： 如果属性栏分组组件中配置了多数据源组件，该方法可以返回其中第一个是多数据源组件的引用。

参数： | 属性 | 类型 | 备注 | | -------------- | ---- | ------------ | | children | Array | 自定义组件的properties.config.customAttributes.con |

示例：

{
"develop":{
"html":"index.html",
"css":["./styles/index.css"],
"entry":"./scripts/main.js",
"scripts":{
}
},
"plugins":[],
"services":["$customService"],
"libs":[],
"customAttributes":{
"pro":[
],
"con":[
{
"type":"PropertiesItemGroup",
"name":"多数据源",
"customInput":{
"showSwitchButton":true,
"switchStatus":false,
"childItemArrowDisplay":true,
"rightOperator":"plus",
"children":[
[{
"type":"BiDatasourceConfigForMultiComponent",
"customInput":{
"canDrillDown":true,
"widgetCanDrillDown":true,
"data":{
"model_id": null,
"dataType": "nothing",
"timeFormat": "",
"datasourceInfo": {
"dsUuid": "",
"table": "",
"name": "",
"mode": ""
},
"requestParams": [],
"measure": [],
"dimension": [],
"screen": true
},
"dimensionCount":1
},
"callback":"multiDataSourceSetData1"
}]
]
}
}
]
}
}

上例中在数据源组件中配置了一个分组组件，又在它的children中配置了一个多数据源组件。

(function(option){
var $=window.plugins.jquery;
return {
$data:{
...
},
$hooks:{
onInit(properties){
this.$customService=window.services.$customService;
let groupItem=properties.config.customAttributes.con[0];
let multiDataSource=this.$customService.checkGrouItemContainMultiDataSource(groupItem.customInput.children)
},
onDestroy(){
},
setData(value){
}
},
$methods:{
...
...
}
}
})

checkoutCustomComponentIsContainMultiDataSource(properties)

功能： 如果属性栏分组组件中配置了多数据源组件，该方法可以将查找所有的多数据源组件，并以数组形式返回。

参数： | 属性 | 类型 | 备注 | | -------------- | ---- | ------------ | | properties | Array | 自定义组件的properties |

示例：

(function(option){
var $=window.plugins.jquery;
return {
$data:{
...
properties:null
},
$hooks:{
onInit(properties){
this.$customService=window.services.$customService;
let groupItem=properties.config.customAttributes.con[0];
let multiDataSourceList:Array<any>=this.$customService.checkoutCustomComponentIsContainMultiDataSource(this.properties)
//将所有是多数据源组件返回。
},
onDestroy(){
},
setData(value){
}
},
$methods:{
...
...
}
}
})

getDataSourceDimensionColumns(data)/getDataSourceMeasureColumns(data)

功能： 该方法将数据源信息中的dimension/measure 字段名提取出来，以数组形式返回

参数： | 属性 | 类型 | 备注 | | -------------- | ---- | ------------ | | data | Object | 自定义组件的properties |

(function(options){
var returnData= {
properties_:null,
drilldownIndex:0,
onInit(properties_){
this.properties_=properties_;
$customService=this.$customService=window.services.$customService;
$eventDispatch=this.$eventDispatch=window.services.$eventDispatch;
},
onDestroy(){
console.log('销毁');
},
setData(data,obj){
if(data&&obj){
...
let dimensionList=this.$customService.getDataSourceDimensionColumns(obj.data);
let measureList=this.$customService.getDataSourceMeasureColumns(obj.data);
....
}
},
outSizeCallBack(value){
console.log(value)
},
colorChange(value){
console.log(value);
},
multiDataSourceSetData1(data,obj){
}
}
return returnData;
})

getPageNameList()

功能： 返回所有页面的列表

入参:无

返回值:

属性类型备注
listArray[ { "lable": "页面名称", "value": "页面名称" }]

以数组形式返回所有页面的数组。

selectPage(pageName)

功能：页面跳转

入参:

属性类型备注
pageNameString传入要跳转的页面名称

调用后，将跳转到目标页面。

setDeviceId(deviceId)

功能：设定设备id值到服务中，以便跳转页面后，其他连接了相关api数据源的组件可以展示该设备的数据。

入参:

属性类型备注
deviceIdString用户的设备id，供给用户自定义的api数据源作为入参

demo下载

getFontList()

功能：该方法返回云视界内部已经支持的字体列表

返回值：

[
{ "lable": "PingFangSC-Regular", "value": "PingFangSC-Regular" },
{ "lable": "Fantasy", "value": "Fantasy" },
{ "lable": "Microsoft YaHei", "value": "Microsoft YaHei" },
{ "lable": "Arial", "value": "Arial" },
{ "lable": "Helvetica", "value": "Helvetica" },
{ "lable": "sans-serif", "value": "sans-serif" },
{ "lable": "Arial Black", "value": "Arial Black" },
{ "lable": "Georgia", "value": "Georgia" },
{ "lable": "Verdana", "value": "Verdana" },
{ "lable": "serif", "value": "serif" },
{ "lable": "Monaco", "value": "Monaco" },
{ "lable": "SimSun", "value": "SimSun" },
{ "lable": "Cursive", "value": "Cursive" },
{ "lable": "workFont", "value": "workFont" },
{ "lable": "digitalFont ", "value": "digitalFont" },
{ "lable": "BebasNeueRegular ", "value": "BebasNeueRegular" },
{ "lable": "Helvetica ", "value": "Helvetica" }
]

updateRightBarWidgetData(root,pros,proName,atrribute)

功能：异步请求后给列表选择框设定下拉值后，需要调用该方法使数据正常显示。

属性类型备注
rootString自定义组件固定id:#visroot#
prosString自定义组件的普通属性栏或数据源下的配置列表；如：properties.config.customAttributes.pro或properties.config.customAttributes.con
proNameString某一项属性栏属性组件的名称，item.name
atrributeString想要更新某一个组件的入参的变量名

示例：

(function(option){
var $=window.plugins.jquery;
return {
$data:{
properties:null,
pageListItem:null,
$customService:null,
$$eventDispatch:null,
deviceId:null,
pageName:null,
},
$hooks:{
onInit(properties){
this.$customService=window.services.$customService;
this.properties=properties;
this.pageListItem=this.$customService.checkOutConfigItemByName(this.properties.config.customAttributes,"页面列表");//获取“页面列表”那一项的引用
let list=this.$customService.getPageNameList();//获取所有页面列表
this.pageListItem.customInput.ngvSelects=list;//给页面列表下拉框赋值
this.$customService.updateRightBarWidgetData('_#visroot#_',this.properties.config.customAttributes.pro,"页面列表","ngvSelects");//更新数据
});
},1000);
},
onDestroy(){
},
setData(value){
}
},
$methods:{
}
}
})
Edit this page