milestone相關前端控件的設計方案
原來的需求是模擬visio里面做出來的時間線的效果，所以我就做成了下面那種方案;這幾天閑逛，看到別人做的不錯的設計，我這里記下來；
我初步看了一下前端代碼繪制部分基于svg d3.js;
下面我來說說我認為他的這種設計到底好在哪里,從用戶視角:
采用明顯的顏色來區分,已完成迭代，當前迭代，未開始迭代
雖然我那個設計中也采用了顏色進行狀態區分,但是線條小，視覺上不如這個明顯;
環形的進度顯示相對于單純的百分比數值顯示更能聚焦人的注意力,
不僅記錄進度還加入了相關的代碼量和工作量記錄,將用戶可能關注的相關要素集中呈現,避免二次對照的過程;
當區段的長度相對小時,隱藏了代碼量部分的顯示，改成了鼠標浮動時顯示完整信息;
鼠標浮動于當前時間點是，提示總體的一些進度和匯總信息;
還可以注意到一些這樣細節，同一段的的斜杠前后的字體大小或者顏色的變化的設計,都一樣或者過于整齊的設計容易讓人產生視覺疲勞;
其他的一些點,狀態圖的信息提示欄提供了更詳細的描述信息;
采用了更多的進度和趨勢的圖形輔助,更直觀明了;
還有一個我認為不錯的特點，右上角的播放循環展板的功能;
看了一下這個項目的前端公共依賴：
echarts.js
EventEmitter.min.js//EventEmitter v5.2.5
jquery-3.3.1.min.js//jQuery v3.3.1
jquery-ui.min.js//jQuery UI - v1.11.0
jquery.gridly.js//1.2.9
bootstrap.min.js//Bootstrap v3.3.7
Bootstrap: popover.js v3.2.0
Bootstrap: tooltip.js v3.2.0
bootstrap-slider.min.js//10.0.2
pnotify.js
bootstrap-table.js//1.12.1
jquery.dataTables.js//DataTables 1.10.4
dataTables.bootstrap.js
dataTables.rowsGroup.js//RowsGroup for DataTables v2.0.0
ColVis.min.js//1.0.8
DT_bootstrap.js
ckeditor.js//2003-2018
ckeditor/styles.js
ckeditor/lang/zh-cn.js
d3.js//3.2.8
jqPaginator.js
select2.min.js
bootstrap-multiselect.js//Bootstrap Multiselect v0.9.8
基本上是使用jquery+bootstrap的前端結構，并沒有使用一些當前流行的前端框架，但是代碼邏輯還是清晰的；
/*-------------------------------------------------------------------------------------------------*/
less教程
https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
交互設計文檔設計的一些查詢記錄
https://cloud.tencent.com/developer/article/1165820
https://www.cnblogs.com/JoannaQ/p/3900463.html
https://www.ctolib.com/topics-36574.html
https://zhuanlan.zhihu.com/p/21577848
http://www.yzsekj.com/cn_asp/m_newsview.asp%3Ftypeid%3D60%26id%3D83
https://wemp.app/posts/7b00dafd-a935-4c9a-a6cb-0bc0587ce6de
/*--------------------------------------------------------------------------------------------------*/
/*------------------------------------分割線-----------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
基于angularjs和mxgraph的里程碑計劃控件
控件效果:
控件實現:
首先下載 :https://github.com/jgraph/mxgraph?最新的版本
需要其中的mxgraph-master\javaScript\examples\grapheditor\www目錄中的所有和src中的mxClient.js文件，
控件模板:
控制器:
angular.module('xxx.milestone',?[]).component('mview',?{ ????controller:?['$scope',?'$http',?'$window',?'$stateParams',?'$timeout','$compile',?'xxxService',?function($scope,?$http,?$window,?$stateParams,?$timeout,$compile,?xxxService)?{ var?tid?=?0; ????????var?oldtid?=?tid; Object.defineProperty(this,?'tid',?{ get:?function()?{ ??return?tid; }, set:?function(newVal)?{ if(oldtid!=0?&&?oldtid?==?newVal){ return; } oldtid?=?newVal; tid?=?newVal; console.log('tid?changed:',?newVal); $scope.timelineId?=?tid; $scope.initData(); } }); ????????var?contextpath?=?window.Ruban.contextPath; ????????$scope.RangeYear?=?[]; ????????$scope.RangeMonth?=?[]; ????????$scope.timelineData?=?[]; ????????$scope.addMile?=?{}; ????????$scope.xml?=?""; ????????$scope.timelineId?=?1; ????????$scope.initDraw?=?false; ????????$scope.ht?=?300; ????????$scope.contentRestore?=?{}; ????????$scope.initData?=?function?()?{ var?param?=?{ ????????????????"timelineId":?$scope.timelineId ????????????}; ????????????$scope.ht?=?$scope.timelineId.split(",").length?*?300; var?url?=?contextpath?+?'api/private/xxxx/getTimeline.json'; xxxService.commonPostJQlike(url,?param,?function?(response)?{ ????????????????if(!response.data.success){ ???????????????????window.location.href=contextpath?+"xxxHome.html#!/error"; ???????????????????return; ????????????????} ????????????????$scope.timelineData?=?response.data.data; ????????????????$scope.xml?=?response.data.xml; ????????????var?bgDate?=?new?Date($scope.timelineData[0].bg); ????????????var?edDate?=?new?Date($scope.timelineData[0].ed); ????????????$scope.RangeYear?=?[]; ????????????$scope.RangeMonth?=?[]; ????????????for(var?i?=?bgDate.getFullYear();i?controllerAs:?'MilestoneController', ????templateUrl:?window.Ruban.contextPath+'pages/xxxx/milestone.html', ????bindings:?{ ????????tid:?'@' ????} });
使用形式：
后端的一些實現：
主要是使用dom4j寫了一個MxGraphService的類來對顯示到前端的mxgraph繪制對應的xml文件，
public static String formatXmlByInfo(List
//說明根據數據庫中由timelineId查詢到對應的里程碑信息來請求格式化繪圖xml節點信息
public static List
//id 為用來遞增為繪圖圖元的id，該函數用來格式化返回最基本的中間的時間線
public static List
//返回指示當前日期的位置圖元
public static List
//返回計劃里程碑圖元
public static List
//返回實際完成時間點圖元
說明：上面的格式化過程其實很簡單，具體是解析參數化過后的樣本結構xml獲得相應的xml節點返回，注意返回的xml Node需要clone以便添加到最終的根節點；
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
