css样式 在designer.css desing.css
~~~
/* 表格图例 */
.zuan_tag>li{
display: inline-block;
cursor: pointer;
}
~~~
main.html 里 加开启组件html片段
~~~
<div ng-switch-when="drillDownSelect">
<div class="col col-xs-5" style="line-height:30px;">
{{element.title}}
</div>
<div class="col col-xs-7" style2="max-height:300px; overflow-y:auto;padding-right:10px !important;">
<ui-select multiple sortable="true" close-on-select="false" ng-model="component.config[element.bind].drillDown" theme="select2" ng-disabled="disabled" style="width:100%;">
<ui-select-match placeholder="">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="item in component.config.datasourceConfig.metadataConfig.metadataTable.modelInfo.dimensions | filter:$select.search">
<span ng-bind-html="item.label | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</div>
</div>
~~~
vs-component-widget-grid。js
// 3357行
d.internalBuildColumnDescription(t, m, o, n, q); 下面
~~~
var x = {
name: "zuanqu",
title: "数据钻取",
groups: []
};
x.groups.push({
name: "",
title: {
text: "数据钻取"
},
elements: [
{
title: "下钻开启",
bind: "drilling_show",
type: "switch-55",
on: vsLang.on,
off: vsLang.off
}]
});
if (t.component.config.datasourceConfig == null) {
t.component.config.datasourceConfig = {}
}
var U = function() {
return t.component.config.datasourceConfig != null && t.component.config.datasourceConfig.metadataConfig != null && t.component.config.datasourceConfig.metadataConfig.metadataTable != null && t.component.config.datasourceConfig.datasourceType == "metadata"
};
x.groups.push({
show: U,
title: {
text: "维度选择"
},
elements: [{
title: "选择"+vsLang.dimension,
type: "drillDownSelect",
bind: "datasourceConfig"
}]
});
var ac = null;
if (t.component.config.datasourceConfig.metadataConfig != null) {
ac = t.component.config.datasourceConfig.metadataConfig.metadataTable.modelInfo
}
x.groups.push({
name: "",
title: {
text: "图例"
},
elements: [{
title: "开启-关闭",
type: "switch",
bind: "drilling_tu",
on: vsLang.on,
off: vsLang.off,
},
{
title: "水平位置",
type: "radio-icon",
bind: "legendPosX",
items: [{
name: "左对齐",
value: "left",
icon: "fa fa-align-left"
},{
name: "居中",
value: "center",
icon: "fa fa-align-center"
},{
name: "右对齐",
value: "right",
icon: "fa fa-align-right"
}]
},{
title: vsLang.font_color,
type: "colorpicker",
bind: "drilling_color"
}]
});
console.log(x)
// 监听数据钻取开启与关闭
t.$watch("component.config.drilling_show", function (v, u) {
var p = o.config.chartConfig;
if (v != null && (u == null || u !== v)) {
// console.log(v)
o.config.drilling_show = v;
console.log(o.config.drilling_show)
}
});
// 转取方式
t.$watch("component.config.drillingType", function (v, u) {
var p = o.config.chartConfig;
if (v != null && (u == null || u !== v)) {
console.log(v)
console.log(u)
}
});
// 显示或隐藏
t.$watch("component.config.drilling_tu", function (v, u) {
if (v != null && (u == null || u !== v)) {
var p = o.config.chartConfig;
console.log(v)
if(v == true){
p.drillingShow = 'block'
console.log(p)
o.context.chart.setOption(p)
}else if(v == false){
p.drillingShow = 'none'
console.log(p)
o.context.chart.setOption(p)
}
}
});
// 新增加
// end
// 字体颜色
t.$watch("component.config.drilling_color", function (w, u) {
if (w != null && g.isValidColor(w)) {
var v = o.config.chartConfig;
v.drilling_color = w;
o.context.chart.setOption(v)
}
});
// 垂直方向
// t.$watch('component.config.legendPosY', function(w, u){
// if(w != null && (u == null || w !== u)){
// var v = o.config.chartConfig;
// v.legendPosY = w;
// console.log(v.legendPosY)
// o.context.chart.setOption(v)
// }
// });
//水平方向
t.$watch('component.config.legendPosX', function(w, u){
if(w != null && (u == null || w !== u)){
var v = o.config.chartConfig;
v.drilling_x = w;
console.log(v.drilling_x)
o.context.chart.setOption(v)
}
});
o.description.categories.push(x);
// end
~~~
# 分别添加 在design.js也就是分享页 也要添加这两行代码
`o.push("<div class='zuan_tag' style='width:100%;right:0;height:40px;line-height:40px;' ng-style=\"{'display':component.config.drilling_tu?'block':'none' ,'color':component.config.drilling_color ,'text-align':component.config.legendPosX }\" ><li ng-repeat='item in component.config.datasourceConfig.drillDown'>{{ item.label }}>></li></div>");`
# 添加这行代码
`s.config.drillDown = true;`
# 在点击事件里添加
搜索component.config.chartConfig.onRowSelected = function(d, i, orgIndex) { 可以找到代码位置
具体添加代码如下：
~~~
// 判断下钻
if(i==orgIndex && component.config.drilling_show === true){
isACtive = true;
// console.log(index)
var d = component.config.datasourceConfig.dimensions;
if(index <=number.length ){
alert("111")
index++;
number[index] = d[0];
// component.config.datasourceConfig.drillDown = component.config.datasourceConfig.dimensions;
// component.config.datasourceConfig.drillDown[index] = component.config.datasourceConfig.dimensions[index];
newDimensions.push(component.config.datasourceConfig.drillDown[index]);
console.log(component.config.datasourceConfig.drillDown[index+1])
}
// number.push(d[0])
// console.log(number)
console.log(component.config.datasourceConfig.drillDown)
function test(){
var dimensions = component.config.datasourceConfig.drillDown;
var measures = component.config.datasourceConfig.measures;
if (dimensions && dimensions.length > 0) {
scope.component.config.showDimensionBar = true;
console.log(dimensions)
scope.queryModelData({
eventParam: {},
dimensions: dimensions,
measures: measures,
tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key,
number:{
data:number,
paramKeys:component.config.datasourceConfig.drillDown,
newDimensions:newDimensions
},
onQuerySuccess: function(response) {
if (response.data.success) {
console.log(response.data)
refreshChartView();
// console.log('kanaknkankan')
console.log(component.config.chartConfig.data)
} else {
console.log(response.data.message)
}
},
onError: function() {}
})
}
}
scope.$on(event_refreshBindingData,test() )
}
~~~
搜索代码上面添加这个
~~~
var dril = (component.config.datasourceConfig.drillDown.length);
var number = new Array(dril)
for(var i = 0;i < dril;i++){
number[i]='';
}
var newDimensions = [];
// console.log(number)
var index = -1;
~~~
# engine.js 查看最终参数变化的位置
查看具体代码变化的主要字段 数组的顺序索引要保持一致 不然没有数据
- video
- treemap
- mian.html文件注释
- 配置项tab
- 配置项属性
- internalRefreshAxisMdelData函数梳理
- 函数配置项-engine文件
- 替换数据源流程
- design.js
- 树图
- 下钻 废弃
- 人体图
- 下钻地图
- 行列互转
- 预览样式
- logo旁边的报表名
- echarts 组件生成图片
- 数据集样式
- 头部 黑色head
- 手机 ipad 图片
- k线图部分
- 平台管理css样式
- 目录css和平板的边距
- 设计页-数据源-目录
- 数据集 - 查看数据表 -按钮和目录样式
- 报表列表页按钮css
- 角色管理页按钮css
- 推送通知按钮css
- 子账号按钮css
- 数据连接
- openlayers地图线路图
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 说明
- 常用图标小bug
- echarts 气泡地图
- echarts 线路轨迹图
- 导出pdf
- 可视化sql--css
- 表格滚动
- 主题色
- 时间轴
- 分享弹框
- 管理平台header和菜单
- 报表平台和菜单
- 初始化组件颜色
- 其他弹框
- olap分析样式-废弃
- 3d地图柱状图
- 关系图
- olap分析
- 地区地图
- k线图相关属性设置
- 世界地图
- 时间轴（new）
- 选择省份下转地图
- 选择省市飞线地图
- 面积预警地图默认颜色
- 组件覆层开关组件
- 汽车仪表盘bug
- 雷达图bug修复不能分享的问题
- 饼状 条形图 自动播放
- 临时用
- 自动轮播
- 方形元素 按钮浮动报错
- 面积预警地图整合可选择省市区
- 下钻地图添加返回按钮
- 下钻地图修复预警bug
- 基本时间组件
- 添加时钟组件
- 3d地球组件
- 盒须图
- 组件加载动画
- 报表背景渐变色
- 主题模板
- 没用
- 3机房第三方组件
- 设计
- 分享
- 3d机房需要的静态资源
- cesium地球需要的文件以及样式
- cesium地球
- 设计页
- 分享页
- 图标条形图
- 世豪-前端代码整理
- component.css 文件新添加
- 杂项
- index.jsp
- designer.css 样式暂时不整理 里面比较杂
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加组件设置页模板
- 以前的报表页设置控制器---做个记录
- 大概修改过的代码
- 2019-5-8 修改皮肤控制器
- 选择模板
- 桑基图2019-11-20
- bug 修正 2019-11-21
- 插图柱状图
- cesiumchart组件
- gis 地图 联动 弹框 图标
- 动态面积图添加按钮类配置项
- 玫瑰图形组件
- cesium 图形 和three.js 冲突的bug
- gis 地图 默认图层
- 网格标签
- gis 点图 值域
- gis 面图 值域
- 按钮图标添加提示框
- 百度地图
- 剩余的组件
- gulp说明文档
- 色斑图加透明