springboot+thymeleaf+mybatis实现甘特图的详细过程

首先我们要明白：这个甘特图需要哪些动态数据。
（1）需要：id，tname，number，计划开始时间，开始时间，计划结束时间，结束时间，项目负责人，参与人，知情人id，计划时长（可以计算得出的，不必在数据库中）；前置任务；项目进度，该任务属于哪个任务
（2）然后利用easycode插件生成实体类，映射类，服务类，ontcroller等
(3)利用bootstrap框架做出甘特图的样式，写好js。
								
									 <!doctype html> 

									 <html xmlns:th=  "http://HdhCmsTestthymeleleaf.org"  > 

									 <head> 

									       <title>ganttu.html</title> 

									       <meta name=  "keywords"   content=  "keyword1,keyword2,keyword3"   /> 

									       <meta http-equiv=  "content-type"   content=  "text/html; charset=utf-8"   /> 

									       <meta name=  "reason"   content=  "甘特图的实际进度与计划进度可能不符,为了展示实际进度与计划进度的差异和方便统计,自己写了个甘特图框架"   /> 

									       <meta name=  "mast"   content=  "使用代码之前请留言,禁止转载..."   /> 

									       <meta name=  "description"   content=  "liuyuhang    的甘特图,当前版本1.0,2019-02-19"   /> 

									       <meta name=  "description"   content=  "时间日期格式:yyyy-mm-dd"   /> 

									       <meta name=  "description"   content=  "①计划进度与实际进度双重进度体系"   /> 

									       <meta name=  "description"   content=  "②有前置任务连接线"   /> 

									       <meta name=  "description"   content=  "③可修改图颜色"   /> 

									       <meta name=  "description"   content=  "④可隐藏与展示列"   /> 

									       <meta name=  "description"   content=  "⑤可隐藏域展示子项目"   /> 

									       <meta name=  "description"   content=  "⑥可跳转时间到当前时间"   /> 

									       <meta name=  "description"   content=  "⑦可从当前项目开始时间查看"   /> 

									       <meta name=  "description"   content=  "⑦可隐藏某时间之前的内容"   /> 

									       <meta name=  "warning"   content=  "⑧未做图拖拽,并不打算做..."   /> 

									       <meta name=  "author"   content=  "liuyuhang 13501043063"   /> 

									       <!-- 只引用了这些,其余的并没有引用 --> 

									       <link href=  "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"   rel=  "external nofollow"    rel=  "stylesheet"   /> 

									       <script src=  "https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"  ></script> 

									       <script src=  "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"  ></script> 

									       <style type=  "text/css"  > 

									           #ganttu-head { 

									               height: 70px; 

									               background-color: #dddddd; 

									               padding: 10px 20px; 

									           } 

									           #ganttu-body { 

									               min-height: 780px; 

									               background-color: #eeeeee; 

									               padding: 10px 20px; 

									               font-size: 20px; 

									           } 

									           #ganttu-index-projectname { 

									               display: inline; 

									               padding: 5px 15px; 

									               background-image: linear-gradient(to left, #  222222   0  %, #  222222   75  %, #  000000   100  %); 

									               color: white; 

									               border-radius: 18px; 

									           } 

									           #ganttu-index-projectdesc { 

									               display: inline; 

									               padding: 5px 15px; 

									               background-image: linear-gradient(to left, #  777777   0  %, #  777777   75  %, #  333333   100  %); 

									               color: white; 

									               border-radius: 18px; 

									           } 

									           td { 

									               white-space: nowrap 

									           } 

									       </style> 

									 </head> 

									 <body> 

									 <div id=  'ganttu-head'   class  =  'col-lg-12 col-md-12 col-sm-12 col-xs-12'   style=  "height:100px"   > 

									       <div style=  'display: inline;font-size: 30px;font-weight: normal;padding: 5px 15px;'  >甘特图面板</div> 

									       <div id=  'ganttu-index-projectname'  >此项目 名称...</div> 

									       <div id=  'ganttu-index-projectdesc'  >此项目描述...</div> 

									 </div> 

									 <div id=  'ganttu-body'   class  =  'col-lg-12 col-md-12 col-sm-12 col-xs-12'   style=  ';overflow-x:scroll;font-size:14px;'  > 

									       <!-- 甘特图放到了这个div中 --> 

									       <div id=  "lyh-ganttu"   class  =  'col-lg-12 col-md-12 col-sm-12 col-xs-12'   style=  'position:relative;padding:0px;height:700px;'  ></div> 

									 </div> 

									 </body> 

									 <script type=  "text/javascript"   th:inline=  "javascript"  > 

									       $(function() { 

									           lyhganttuinit(  'lyh-ganttu'  );   //甘特图初始化 

									       }) 

									       var lyhganttudata=[[${lyhganttudata}]]; 

									       /** 

									        * 甘特图设置,变量名固定 

									        */ 

									       var lyhganttuconfig = { 

									           start :   '1900/01/01'  ,   //初始化开始时间配置    - 别在意 

									           end :   '1900/01/10'  ,   //初始化结束时间配置    - 别在意 

									           planborder :   '#1a8cff'  ,   //计划进度的border颜色 

									           planbackground :   '#80bfff'  ,   //计划进度的back颜色 

									           border :   '#ffaa00'  ,   //实际进度的border染颜色 

									           background :   '#ffcc66'  ,   //实际进度的back颜色 

									           linecolor :   'green'  ,   //前置任务线颜色 

									           //表格中的thead的题头设置,可按照格式任意添加或减少 

									           labels : { 

									               'projectname'   : { 

									                   'name'   :   '         任务名         '  , 

									                   'show'   :   true  , 

									               },   //任务名 

									               'projectcode'   : { 

									                   'name'   :   '编号'  , 

									                   'show'   :   true  , 

									               },   //编号 

									               'planstartat'   : { 

									                   'name'   :   '计划开始'  , 

									                   'show'   :   true  , 

									               },   //计划开始时间 

									               'planendat'   : { 

									                   'name'   :   '计划结束'  , 

									                   'show'   :   false  , 

									               },   //计划结束时间 

									               'startat'   : { 

									                   'name'   :   '实际开始'  , 

									                   'show'   :   false  , 

									               },   //实际开始时间 

									               'endat'   : { 

									                   'name'   :   '实际结束'  , 

									                   'show'   :   false  , 

									               },   //实际结束时间 

									               'persent'   : { 

									                   'name'   :   '完成比例'  , 

									                   'show'   :   true  , 

									               },   //完工百分比 

									               'dur'   : { 

									                   'name'   :   '时长'  , 

									                   'show'   :   true  , 

									               },   //持续时间 

									               'resps'   : { 

									                   'name'   :   '负责人'  , 

									                   'show'   :   true  , 

									               },   //负责人 

									               'actors'   : { 

									                   'name'   :   '参与人'  , 

									                   'show'   :   true  , 

									               },   //参与人 

									               'insiders'   : { 

									                   'name'   :   '知情人'  , 

									                   'show'   :   false  , 

									               },   //知情人 

									               'before'   : { 

									                   'name'   :   '前置任务'  , 

									                   'show'   :   false  , 

									               },   //前置任务 

									               'operate'   : { 

									                   'name'   :   "<button java" id="highlighter_469129">
			
				 ? 

									 @requestmapping  (value =   "/gantee"  ,method = requestmethod.get) 

									       public   string gantee(model model)   throws   jsonexception { 

									           renwu renwu = renwuservice.querybyid(  new   integer(  "1"  )); 

									           map jsondata =   new   hashmap(); 

									           list<map> jsonarray =   new   arraylist<>(); 

									           map jsonobject =   new   hashmap(); 

									           integer id = renwu.getprojectid(); 

									           integer  pid = renwu.getpid(); 

									           string projectname = renwu.getprojectname(); 

									           string projectcode = renwu.getprojectcode(); 

									           simpledateformat dateformat =   new   simpledateformat(  "yyyy/mm/dd"  ); 

									           date planstartdate = renwu.getplanstartat(); 

									           date planenddate = renwu.getplanendat(); 

									           date startdate = renwu.getstartat(); 

									           date enddate = renwu.getendat(); 

									           string planstartstr = dateformat.format(planstartdate); 

									           string planendstr = dateformat.format(planenddate); 

									           string startstr = dateformat.format(startdate); 

									           string endstr = dateformat.format(enddate); 

									           string persent = renwu.getpersent(); 

									           string resps = renwu.getresps(); 

									           string actors = renwu.getactors(); 

									           string insiders = renwu.getinsiders(); 

									           integer dur = renwu.getdur(); 

									           integer before = renwu.getbefore(); 

									           jsonobject.put(  "id"  ,id); 

									           jsonobject.put(  "pid"  ,pid); 

									           jsonobject.put(  "projectname"  ,projectname); 

									           jsonobject.put(  "projectcode"  ,projectcode); 

									           jsonobject.put(  "planstartat"  ,planstartstr); 

									           jsonobject.put(  "planendat"  ,planendstr); 

									           jsonobject.put(  "startat"  ,startstr); 

									           jsonobject.put(  "endat"  ,endstr); 

									           jsonobject.put(  "persent"  ,persent); 

									           jsonobject.put(  "resps"  ,resps); 

									           jsonobject.put(  "actors"  ,actors); 

									           jsonobject.put(  "insiders"  ,insiders); 

									           jsonobject.put(  "dur"  ,dur); 

									           jsonobject.put(  "before"  ,  new   object[]{before}); 

									           jsonarray.add(jsonobject); 

									           jsondata.put(  "data"  ,jsonarray); 

									           model.addattribute(  "lyhganttudata"  ,jsondata); 

									           return   "ganttu"  ; 

									       } 

	（5）直接启动springboot项目即可。

	这个是springboot项目，自然也是可以转到springcloud的子项目中。

	　　注意：html并不是我原创没我只是在其基础上改了一下js。在这个开放的时代，我觉得大家应该把学到的东西开放出来，不管多好或是很差。

	到此这篇关于springboot+thymeleaf+mybatis实现甘特图的详细过程的文章就介绍到这了,更多相关springboot+thymeleaf+mybatis实现甘特图内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

	原文链接：https://HdhCmsTestcnblogs测试数据/leleChang/p/12884498.html

查看更多关于springboot+thymeleaf+mybatis实现甘特图的详细过程的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did214202

          更新时间：2023-05-04  
         阅读：28次 
	
上一篇： Java实现权重随机算法详解 
 下一篇：手把手教你搞懂冒泡排序和选择排序 
相关资讯