🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
在libs文件夹里建新文件夹timeaxis 里面放入时间轴的js 和css 和代码的时候给文件 路径D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html 添加css 分享页 `<link href="${cdnPath}libs/timeaxis/Creabine-Timeline.css" rel="stylesheet">` 路径:D:\ireport365\ireport365.war\WEB-INF\pages\enduser\designer\index.jsp `<link href="${pageContext.request.contextPath}/libs/timeaxis/Creabine-Timeline.css" rel="stylesheet">` `_scripts.push({url: "/libs/timeaxis/Creabine-Timeline.js"});` 路径:D:\ireport365\ireport365.war\js\enduser\designer\vs-component-basic.js 在最上面加这个方法 ~~~ var initElements = function (_root,_itemList,_startDirectionLeft,_endWords,com) { for (var i = 0; i < _itemList.length; i++) { var _item = document.createElement("div"); _item.className = "TimeLine-Item"; var _contentLeft = document.createElement("div"); var _contentRight = document.createElement("div"); _contentLeft.className = "Item-Content"; _contentRight.className = "Item-Content"; _startDirectionLeft ? _contentRight.style.visibility = "hidden" : _contentLeft.style.visibility = "hidden"; for (var j = 0; j < _itemList[i].contentList.length; j++) { var leftP = document.createElement("p"); var rightP = document.createElement("p"); leftP.innerText = _itemList[i].contentList[j]; rightP.innerText = _itemList[i].contentList[j]; leftP.style.color = com.config.fontColor; rightP.style.color = com.config.fontColor; _contentLeft.appendChild(leftP); _contentRight.appendChild(rightP); } var _itemTime = document.createElement("div"); if( _startDirectionLeft ){ if( i%2 == 0 ){ _itemTime.className = "Item-Time left"; }else{ _itemTime.className = "Item-Time right"; } }else{ if( i%2 == 1 ){ _itemTime.className = "Item-Time right"; }else{ _itemTime.className = "Item-Time left"; } } _itemTime.innerText = _itemList[i].time; _itemTime.style.color = com.config.timeFontColor; _itemTime.style.background = com.config.timeBgColor; _contentLeft.style.background = com.config.bgColor; _contentRight.style.background = com.config.bgColor; _item.appendChild(_contentLeft); _item.appendChild(_itemTime); _item.appendChild(_contentRight); // console.log(_root) _root.append(_item); //startDirectionLeft if( _startDirectionLeft ){ if( i%2 == 0 ){ _contentLeft.style.visibility = "visible"; _contentRight.style.visibility = "hidden"; }else{ _contentLeft.style.visibility = "hidden"; _contentRight.style.visibility = "visible"; } }else{ if( i%2 == 0 ){ _contentLeft.style.visibility = "hidden"; _contentRight.style.visibility = "visible"; }else{ _contentLeft.style.visibility = "visible"; _contentRight.style.visibility = "hidden"; } } } // Tiemline var _timeLine = document.createElement("div"); _timeLine.className = "TimeLine"; var _fakerDiv1 = document.createElement("div"); var _fakerDiv2 = document.createElement("div"); _fakerDiv1.className = "Item-Content"; _fakerDiv1.style.visibility = "hidden"; _fakerDiv1.innerText = "Create by Creabine 2017.02.10"; _fakerDiv2.className = "Item-Content"; _fakerDiv2.style.visibility = "hidden"; _fakerDiv2.innerText = "Create by Creabine 2017.02.10"; var _hrDiv = document.createElement("div"); _hrDiv.className = "TimeLine-Line"; _hr = document.createElement("hr"); _hr.style.background = com.config.timeColor; _hrDiv.appendChild(_hr); _timeLine.appendChild(_fakerDiv1); _timeLine.appendChild(_hrDiv); _timeLine.appendChild(_fakerDiv2); console.log(_timeLine) _root.append(_timeLine); // TimeLine-End if(_endWords){ var _endWordsDiv = document.createElement("div"); _endWordsDiv.className = "TimeLine-End"; _endWordsDiv.innerText = _endWords; _root.append(_endWordsDiv); } calculateHR(_root); } // 时间轴线的长度 function calculateHR(_root){ var _rootHeight = _root.height(); console.log(_rootHeight) _hr.style.height = (_rootHeight) +'px'; _hr.style.bottom = (_rootHeight) +'px'; } ~~~ 加点击的这个对象 属性 ~~~ { name: "", type: "timeAxis", coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_b0080.png", coverImageWidth: "50%", tip: "时间轴" } ~~~ 加默认宽高度 ![](https://box.kancloud.cn/13c58b4498fe1cf166a92f7ecf2242f8_779x635.png) ~~~ 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) { //如果刷新数据事件的发出者是当前控件,不处理本次通知 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 (dimensions && dimensions.length > 0 && measures && measures.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) 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; //从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); //选择项被选中时,发出过滤通知 // $(".signIndex").unbind("click"); // $('.signIndex').on('click',function(){ // $(this).css({'background':'yellow'}).siblings("div").css({'background':'red'}) // var value = $(this).attr('thesign') // var reg = /([<br>][^/]+)$/; // var value = value.replace(reg, ""); // scope.cacheDimensionValue(scope.getLastDimension().name, value); // scope.notifyDimensionValueFilterEvent({ // queryConditionDimensions: true // }); // }) // end var dimensions = component.config.datasourceConfig.dimensions; var measures = component.config.datasourceConfig.measures; var data = component.context.data; if (data == null) { return } var measureIdx = 0; if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) { var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures); for (var i = 0; i < measures.length; i++) { if (newMeasures[i] != null) { measureIdx = i; break } } } var serieData = []; var legendData = []; for (var i = 0; i < data.length; i++) { var dimValue = data[i][dimensions[dimensions.length - 1].name]; if (VSUtils.isEmpty(dimValue)) { continue } serieData.push({ time: dimValue, contentList: [data[i][measures[measureIdx].name] == null ? 0 : data[i][measures[measureIdx].name]] }); legendData.push(dimValue) } 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" }] }); 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, {}) }); } }; a.register("basic", "timeAxis", b); return null }]); ~~~ # 分享的js 路径 在这个文件最上面加两个方法 顶级对象 OA上随便加 ~~~ var initElements = function (_root,_itemList,_startDirectionLeft,_endWords,com) { for (var i = 0; i < _itemList.length; i++) { var _item = document.createElement("div"); _item.className = "TimeLine-Item"; var _contentLeft = document.createElement("div"); var _contentRight = document.createElement("div"); _contentLeft.className = "Item-Content"; _contentRight.className = "Item-Content"; _startDirectionLeft ? _contentRight.style.visibility = "hidden" : _contentLeft.style.visibility = "hidden"; for (var j = 0; j < _itemList[i].contentList.length; j++) { var leftP = document.createElement("p"); var rightP = document.createElement("p"); leftP.innerText = _itemList[i].contentList[j]; rightP.innerText = _itemList[i].contentList[j]; leftP.style.color = com.config.fontColor; rightP.style.color = com.config.fontColor; _contentLeft.appendChild(leftP); _contentRight.appendChild(rightP); } var _itemTime = document.createElement("div"); if( _startDirectionLeft ){ if( i%2 == 0 ){ _itemTime.className = "Item-Time left"; }else{ _itemTime.className = "Item-Time right"; } }else{ if( i%2 == 1 ){ _itemTime.className = "Item-Time right"; }else{ _itemTime.className = "Item-Time left"; } } _itemTime.innerText = _itemList[i].time; _itemTime.style.color = com.config.timeFontColor; _itemTime.style.background = com.config.timeBgColor; _contentLeft.style.background = com.config.bgColor; _contentRight.style.background = com.config.bgColor; _item.appendChild(_contentLeft); _item.appendChild(_itemTime); _item.appendChild(_contentRight); // console.log(_root) _root.append(_item); //startDirectionLeft if( _startDirectionLeft ){ if( i%2 == 0 ){ _contentLeft.style.visibility = "visible"; _contentRight.style.visibility = "hidden"; }else{ _contentLeft.style.visibility = "hidden"; _contentRight.style.visibility = "visible"; } }else{ if( i%2 == 0 ){ _contentLeft.style.visibility = "hidden"; _contentRight.style.visibility = "visible"; }else{ _contentLeft.style.visibility = "visible"; _contentRight.style.visibility = "hidden"; } } } // Tiemline var _timeLine = document.createElement("div"); _timeLine.className = "TimeLine"; var _fakerDiv1 = document.createElement("div"); var _fakerDiv2 = document.createElement("div"); _fakerDiv1.className = "Item-Content"; _fakerDiv1.style.visibility = "hidden"; _fakerDiv1.innerText = "Create by Creabine 2017.02.10"; _fakerDiv2.className = "Item-Content"; _fakerDiv2.style.visibility = "hidden"; _fakerDiv2.innerText = "Create by Creabine 2017.02.10"; var _hrDiv = document.createElement("div"); _hrDiv.className = "TimeLine-Line"; _hr = document.createElement("hr"); _hr.style.background = com.config.timeColor; _hrDiv.appendChild(_hr); _timeLine.appendChild(_fakerDiv1); _timeLine.appendChild(_hrDiv); _timeLine.appendChild(_fakerDiv2); console.log(_timeLine) _root.append(_timeLine); // TimeLine-End if(_endWords){ var _endWordsDiv = document.createElement("div"); _endWordsDiv.className = "TimeLine-End"; _endWordsDiv.innerText = _endWords; _root.append(_endWordsDiv); } calculateHR(_root); } // 时间轴线的长度 function calculateHR(_root){ var _rootHeight = _root.height(); console.log(_rootHeight) _hr.style.height = (_rootHeight) +'px'; _hr.style.bottom = (_rootHeight) +'px'; } var CreabineTimeline = function(options){ if (!options.root) { throw "require root to this CreabineTimeline"; } if (!options.itemList) { throw "require itemList to this CreabineTimeline"; } var _itemList = options.itemList; var _endWords = options.endWords; var _startDirectionLeft = options.startDirectionLeft || true; var _root = options.root; var com = options.com; console.log(com) // var _root = document.getElementById(options.root) // console.log(_root) var _hr = null; function initElements() { if (!_root) { throw "no exist called this name element,please create element called this name"; } _root.className = "Creabine-TimeLine"; for (var i = 0; i < _itemList.length; i++) { var _item = document.createElement("div"); _item.className = "TimeLine-Item"; var _contentLeft = document.createElement("div"); var _contentRight = document.createElement("div"); _contentLeft.className = "Item-Content"; _contentRight.className = "Item-Content"; _startDirectionLeft ? _contentRight.style.visibility = "hidden" : _contentLeft.style.visibility = "hidden"; for (var j = 0; j < _itemList[i].contentList.length; j++) { var leftP = document.createElement("p"); var rightP = document.createElement("p"); leftP.innerText = _itemList[i].contentList[j]; rightP.innerText = _itemList[i].contentList[j]; leftP.style.color = com.config.fontColor; rightP.style.color = com.config.fontColor; _contentLeft.appendChild(leftP); _contentRight.appendChild(rightP); } var _itemTime = document.createElement("div"); if( _startDirectionLeft ){ if( i%2 == 0 ){ _itemTime.className = "Item-Time left"; }else{ _itemTime.className = "Item-Time right"; } }else{ if( i%2 == 1 ){ _itemTime.className = "Item-Time right"; }else{ _itemTime.className = "Item-Time left"; } } _itemTime.innerText = _itemList[i].time; _itemTime.style.color = com.config.timeFontColor; _itemTime.style.background = com.config.timeBgColor; _contentLeft.style.background = com.config.bgColor; _contentRight.style.background = com.config.bgColor; _item.appendChild(_contentLeft); _item.appendChild(_itemTime); _item.appendChild(_contentRight); _root.appendChild(_item); //startDirectionLeft if( _startDirectionLeft ){ if( i%2 == 0 ){ _contentLeft.style.visibility = "visible"; _contentRight.style.visibility = "hidden"; }else{ _contentLeft.style.visibility = "hidden"; _contentRight.style.visibility = "visible"; } }else{ if( i%2 == 0 ){ _contentLeft.style.visibility = "hidden"; _contentRight.style.visibility = "visible"; }else{ _contentLeft.style.visibility = "visible"; _contentRight.style.visibility = "hidden"; } } } // Tiemline var _timeLine = document.createElement("div"); _timeLine.className = "TimeLine"; var _fakerDiv1 = document.createElement("div"); var _fakerDiv2 = document.createElement("div"); _fakerDiv1.className = "Item-Content"; _fakerDiv1.style.visibility = "hidden"; _fakerDiv1.innerText = "Create by Creabine 2017.02.10"; _fakerDiv2.className = "Item-Content"; _fakerDiv2.style.visibility = "hidden"; _fakerDiv2.innerText = "Create by Creabine 2017.02.10"; var _hrDiv = document.createElement("div"); _hrDiv.className = "TimeLine-Line"; _hr = document.createElement("hr"); _hr.style.background = com.config.timeColor; _hrDiv.appendChild(_hr); _timeLine.appendChild(_fakerDiv1); _timeLine.appendChild(_hrDiv); _timeLine.appendChild(_fakerDiv2); _root.appendChild(_timeLine); // TimeLine-End if(_endWords){ var _endWordsDiv = document.createElement("div"); _endWordsDiv.className = "TimeLine-End"; _endWordsDiv.innerText = _endWords; _root.appendChild(_endWordsDiv); } calculateHR(); } function calculateHR(){ var _rootHeight = _root.offsetHeight; _hr.style.height = (_rootHeight) +'px'; _hr.style.bottom = (_rootHeight) +'px'; } initElements(); window.onresize = function(){ calculateHR(); } } ~~~ 在人体下面加 ~~~ 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 (dimensions && dimensions.length > 0 && measures && measures.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; var measures = component.config.datasourceConfig.measures; var data = component.context.data; console.log(data) if (data == null) { return } var measureIdx = 0; if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) { var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures); for (var i = 0; i < measures.length; i++) { if (newMeasures[i] != null) { measureIdx = i; break } } } var serieData = []; var legendData = []; for (var i = 0; i < data.length; i++) { var dimValue = data[i][dimensions[dimensions.length - 1].name]; if (VSUtils.isEmpty(dimValue)) { continue } serieData.push({ time: dimValue, contentList: [data[i][measures[measureIdx].name] == null ? 0 : data[i][measures[measureIdx].name]] }); legendData.push(dimValue) } if (serieData.length == 0) { serieData = [""]; legendData = [""] } // console.log(serieData) // 处理数据 console.log($('#'+component.id)); 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 r = new CreabineTimeline({ // com:component, // root:g[0], // itemList:serieData, // startDirectionLeft: true, // endWords:'持续更新中', // }) }; var timeLineItemList = [ { time:'2010', contentList:[ '《钢铁侠1》', '托尼·史塔克在恐怖分子追捕中受伤,在山洞中造出了第一副盔甲之后回到美国。', ] }, { time:'2010', contentList:[ '《钢铁侠2》', '托尼·史塔克公布了自己钢铁侠的身份,打造了代号“战争机器”的战服。' ] }, ] new CreabineTimeline({ com:component, root:g[0], itemList:timeLineItemList, startDirectionLeft: true, endWords:'持续更新中', }) break; ~~~