時間軸 · 代碼梳理

在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; ~~~