路径D:\ireport365\ireport365.war\js\enduser\designer\vs-component-basic.js
添加时间轴 不用修改
~~~
{
name: "",
type: "timeAxis",
coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_b0080.png",
coverImageWidth: "50%",
tip: "时间轴"
},
~~~
不用修改
~~~
case "timeAxis":
a.sizeX = 4;
a.sizeY = 22;
break;
~~~
以下直接覆盖 时间长了 里面不知道该哪儿了
~~~
vsPluginComponentModule.factory("$vcPlugin_basic_timeAxis", ["$vsPluginRegister", function (a) {
var b = {
//配置面板中显示[数据]配置
showDataCategory: true,
//配置面板中显示[标题]配置
showTitleCategory: true,
//配置面板中显示[边框]配置
showBorderCategory: true,
//配置面板中显示[基本]配置
showBasicCategory: true,
//配置面板中显示[浮动]配置
showFixedCategory: true,
//配置面板中显示[事件]配置
showEventCategory: 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;
// component.config.fontColor = '#222';
// component.config.bgColor = '#F0F0F0';
// component.config.timeFontColor = '#FFF';
// component.config.timeBgColor = '#ff8800';
// component.config.timeColor = '#F0F0F0';
},
buildDataDescription: function (dataDescription, scope, element, component, $compile) {
// console.log(scope)
scope.$on(event_refreshBindingData, function (target, param) {
scope.$parent.queryConditionDimensions = true;
//如果刷新数据事件的发出者是当前控件，不处理本次通知
if(param.component != null && scope.component.id === param.component.id){
return;
}
// console.log(scope.component.config.datasourceConfig)
var dimensions = scope.component.config.datasourceConfig.dimensions;
var measures = scope.component.config.datasourceConfig.measures;
if (measures == null) {
measures = []
}
console.log(dimensions)
console.log(scope.$parent.queryConditionDimensions)
if (dimensions && dimensions.length > 0) {
scope.queryModelData({
eventParam: param,
dimensions: dimensions,
measures: measures,
tableKey: scope.component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (response) {
if (response.data.success) {
b.refreshChartView(scope, element, component, $compile)
} else {
toaster.error({
body: response.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
});
},
refreshChartView: function(scope, element, component, $compile) {
var dimensions = component.config.datasourceConfig.dimensions;
// 设置2个维度
component.config.chartDimensionCount = 2
//从context中获得控件数据
var data = component.context.data;
// console.log(data)
// console.log(dimensions)
var serieData = [];
var legendData = [];
for (var i = 0; i < data.length; i++) {
// console.log(data[i])
var dimValue = data[i][dimensions[dimensions.length - 1].name];
// console.log(dimValue)
var dimValue1 = data[i][dimensions[dimensions.length -2].name];
// console.log(dimValue1)
if (VSUtils.isEmpty(dimValue)) {
continue
}
if (VSUtils.isEmpty(dimValue1)) {
continue
}
serieData.push({
time: dimValue1,
contentList: dimValue
});
legendData.push(dimValue1)
}
if (serieData.length == 0) {
serieData = [""];
legendData = [""]
}
// console.log(serieData)
// 处理数据
// console.log($('#'+component.id+' .Creabine-TimeLine').html());
// 清空所有子节点
$('#'+component.id+' .Creabine-TimeLine').html('')
// $('#'+component.id+' .Creabine-TimeLine').html('123456789')
// 调用
var dom = $('#'+component.id+' .Creabine-TimeLine')
initElements(dom,serieData,true,'持续更新中',component);
},
buildChartDescription: function (h, f, c, e) {
var l = {
name: "time",
title: '时间轴',
groups: []
};
c.description.categories.push(l);
h.component = c;
h.calculateBackgroundSize = function (i) {
return f.width() > f.height() ? "auto 100%" : "100% auto"
};
var d = [];
d.push('<div class="timeLine"></div>')
var g = e(d.join(""))(h);
f.html(g);
// 初始化数据
var timeLineItemList = [
{
time:'2010',
contentList:[
'《钢铁侠1》',
'托尼·史塔克在恐怖分子追捕中受伤，在山洞中造出了第一副盔甲之后回到美国。',
]
},
{
time:'2010',
contentList:[
'《钢铁侠2》',
'托尼·史塔克公布了自己钢铁侠的身份,打造了代号“战争机器”的战服。'
]
},
{
time:'2011',
contentList:[
'斯蒂夫·罗杰斯被一支石油勘探队在北极发现，斯蒂夫被解冻随即被送往纽约神盾局，尼克·弗瑞告诉斯蒂夫·罗杰斯他已经长眠了70年。',
]
},
{
time:'2012',
contentList:[
'《复仇者联盟1》',
'洛基在其他恶役的协助下激活了立方体，尼克·弗瑞领导复仇者联盟抵抗外来的入侵，大战洛基。'
]
},
{
time:'2013',
contentList:[
'《钢铁侠3》',
'托尼·斯塔克的生活被强敌毁灭殆尽，无路可退的他必须依靠精良的高科技装备以及过人才智，保护自己和身边最亲近的人，同时揪出真正的幕后元凶。',
]
},
{
time:'2014.12.0000',
contentList:[
'《美国队长2: 冬日战士》',
'复仇者联盟两年后, 神盾局出现九头蛇内奸。斯蒂夫·罗杰斯带领众人挫败敌人，并击败了寒冬战士，发现他其实是自己多年前失踪的好友巴蒂。'
]
},
{
time:'2015',
contentList:[
'《复仇者联盟：奥创时代》',
'《蚁人》'
]
},
]
// console.log(f)
// console.log(c.id)
var r = new CreabineTimeline({
com:c,
root:g[0],
itemList:timeLineItemList,
startDirectionLeft: true,
endWords:'持续更新中',
})
// console.log(h)
l.groups.push({
name: "video",
title: {
text: "配置"
},
elements: [{
title: '时间字体颜色',
type: "colorpicker",
bind: "fontColor"
},
{
title: vsLang.width,
title: '时间背景颜色',
type: "colorpicker",
bind: "bgColor"
},
{
title: vsLang.offset_x,
title: '时间字体颜色',
type: "colorpicker",
bind: "timeFontColor"
},
{
title: vsLang.offset_y,
title: '时间背景颜色',
type: "colorpicker",
bind: "timeBgColor"
},{
title: vsLang.offset_y,
title: '轴线颜色',
type: "colorpicker",
bind: "timeColor"
},{
title: vsLang.table_main_columns,
type: "configSlide",
bind: "chartDimensionCount",
config: {
slideEnd: 20
}
}]
});
h.$watch("component.config.fontColor", function (w, u) {
var p = c.config;
p.fontColor = w;
h.$broadcast(event_refreshChartView, {})
});
h.$watch("component.config.bgColor", function (w, u) {
var p = c.config;
p.bgColor = w;
h.$broadcast(event_refreshChartView, {})
});
h.$watch("component.config.timeFontColor", function (w, u) {
var p = c.config;
p.timeFontColor = w;
h.$broadcast(event_refreshChartView, {})
});
h.$watch("component.config.timeBgColor", function (w, u) {
var p = c.config;
p.timeBgColor = w;
h.$broadcast(event_refreshChartView, {})
});
h.$watch("component.config.timeColor", function (w, u) {
var p = c.config;
p.timeColor = w;
h.$broadcast(event_refreshChartView, {})
});
h.$watch("component.config.chartDimensionCount", function (v, u) {
if (v != null && c.config.datasourceConfig.dimensions != null && c.config.chartDimensionCount <= c.config.datasourceConfig.dimensions.length) {
h.$parent.queryConditionDimensions = true;
h.$broadcast(event_refreshBindingData, {})
}
});
}
};
a.register("basic", "timeAxis", b);
return null
}]);
~~~
路径D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js
同理 搜索代码 替换吧
~~~
case "timeAxis":
var d = [];
d.push('<div class="timeLine"></div>')
var g = $compile(d.join(""))(scope);
element.html(g);
scope.$on(event_refreshBindingData, function (target, param) {
//如果刷新数据事件的发出者是当前控件，不处理本次通知
if(param.component != null && scope.component.id === param.component.id){
return;
}
// console.log(scope.component.config.datasourceConfig)
var dimensions = scope.component.config.datasourceConfig.dimensions;
var measures = scope.component.config.datasourceConfig.measures;
if(measures == null){
measures = [];
}
if (dimensions && dimensions.length > 0) {
scope.queryModelData({
eventParam: param,
dimensions: dimensions,
measures: measures,
tableKey: scope.component.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (response) {
if (response.data.success) {
// console.log(response.data.success)
scope.refreshChartView(scope, element, component, $compile)
} else {
toaster.error({
body: response.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
});
scope.refreshChartView = function(scope, element, component, $compile) {
var dimensions = component.config.datasourceConfig.dimensions;
//从context中获得控件数据
var data = component.context.data;
// console.log(data)
// console.log(dimensions)
var serieData = [];
var legendData = [];
for (var i = 0; i < data.length; i++) {
// console.log(data[i])
var dimValue = data[i][dimensions[dimensions.length - 1].name];
// console.log(dimValue)
var dimValue1 = data[i][dimensions[dimensions.length -2].name];
// console.log(dimValue1)
if (VSUtils.isEmpty(dimValue)) {
continue
}
if (VSUtils.isEmpty(dimValue1)) {
continue
}
serieData.push({
time: dimValue1,
contentList: dimValue
});
legendData.push(dimValue1)
}
if (serieData.length == 0) {
serieData = [""];
legendData = [""]
}
// console.log(serieData)
// 处理数据
// console.log($('#'+component.id+' .Creabine-TimeLine').html());
// 清空所有子节点
$('#'+component.id+' .Creabine-TimeLine').html('')
// $('#'+component.id+' .Creabine-TimeLine').html('123456789')
// 调用
var dom = $('#'+component.id+' .Creabine-TimeLine')
initElements(dom,serieData,true,'持续更新中',component);
};
var timeLineItemList = [
{
time:'2010',
contentList:[
'《钢铁侠1》',
'托尼·史塔克在恐怖分子追捕中受伤，在山洞中造出了第一副盔甲之后回到美国。',
]
},
{
time:'2010',
contentList:[
'《钢铁侠2》',
'托尼·史塔克公布了自己钢铁侠的身份,打造了代号“战争机器”的战服。'
]
},
{
time:'2011',
contentList:[
'斯蒂夫·罗杰斯被一支石油勘探队在北极发现，斯蒂夫被解冻随即被送往纽约神盾局，尼克·弗瑞告诉斯蒂夫·罗杰斯他已经长眠了70年。',
]
},
{
time:'2012',
contentList:[
'《复仇者联盟1》',
'洛基在其他恶役的协助下激活了立方体，尼克·弗瑞领导复仇者联盟抵抗外来的入侵，大战洛基。'
]
},
{
time:'2013',
contentList:[
'《钢铁侠3》',
'托尼·斯塔克的生活被强敌毁灭殆尽，无路可退的他必须依靠精良的高科技装备以及过人才智，保护自己和身边最亲近的人，同时揪出真正的幕后元凶。',
]
},
{
time:'2014.12.0000',
contentList:[
'《美国队长2: 冬日战士》',
'复仇者联盟两年后, 神盾局出现九头蛇内奸。斯蒂夫·罗杰斯带领众人挫败敌人，并击败了寒冬战士，发现他其实是自己多年前失踪的好友巴蒂。'
]
},
{
time:'2015',
contentList:[
'《复仇者联盟：奥创时代》',
'《蚁人》'
]
},
]
new CreabineTimeline({
com:component,
root:g[0],
itemList:timeLineItemList,
startDirectionLeft: true,
endWords:'持续更新中',
})
break;
~~~
- 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说明文档
- 色斑图加透明