| | |
| | | var project = data[index] // 把data中的第index个项目 赋值给project |
| | | if(project.id==rowName){ |
| | | // 比较时间 |
| | | var currT = new Date() // 系统当前时间 currentTime currT |
| | | var staT = new Date(project.startDay.substring(0,10)) // 项目开始时间 startTime staT |
| | | var endT = new Date(project.endDay.substring(0,10)) // 项目结束时间 endTime endT |
| | | var node = project.nodes |
| | | // 检测项目节点时间是否有空值 |
| | | for(var i=0;i<node.length;i++){ // 循环项目节点时间 |
| | | if(node[i].staT==''||node[i].endTime$==''){ |
| | | var currT = new Date() // 当前时间 |
| | | var staT = new Date(project.startDay.substring(0,10)) // 项目开始时间 |
| | | var endT = new Date(project.endDay.substring(0,10)) // 项目结束时间 |
| | | var nodes = project.nodes |
| | | // 判断项目计划节点时间是否有空值 |
| | | for(var i=0;i<nodes.length;i++){ |
| | | if(nodes[i].staT==''||nodes[i].endTime$==''){ |
| | | show = false |
| | | break |
| | | }else{ |
| | |
| | | // 预计节点时间 |
| | | var tab = '' |
| | | var tabLeft3 = '' |
| | | var day = 86400000 |
| | | var allDay = (endT - staT + day ) / day |
| | | // 预计节点的天数,实际节点天数,占多少格子;预计/实际 节点与项目开始时间的时间间隔(从哪个格子开始渲染) |
| | | var day = 86400000 // 一天是 86400000毫秒 |
| | | var days = (endT - staT + day ) / day // 项目节点天数 |
| | | |
| | | var bigDays = [] |
| | | for(var i = 0;i<node.length;i++){ |
| | | var nodeName = node[i].name // 节点名称 改第一个请求用 |
| | | |
| | | var nodeStartTime = new Date(node[i].startTime.substring(0,10)) // 预计开始时间 |
| | | var nodeEndTime = new Date(node[i].endTime$.substring(0,10)) // 预计结束时间 |
| | | var nodeRealStartTime = new Date(node[i].realStartTime$.substring(0,10)) // 实际开始时间 |
| | | var nodeRealEndTime =new Date(node[i].realEndTime$.substring(0,10)) // 实际结束时间 |
| | | for(var i = 0;i<nodes.length;i++){ |
| | | var projectsName = nodes[i].name // 节点名称 改第一个请求用 |
| | | var proRET = new Date(nodes[i].realEndTime$.substring(0,10)) // 节点实际结束时间 |
| | | var tab2 ='<tr id="td-node'+i+'-gz">'+'<tr id="td-node'+i+'-gz-2">'+'</tr>' |
| | | tab = tab +tab2 |
| | | var tabLeft2 = '<tr class="tab-body">' |
| | | +'<td>'+nodeName+'</td>' |
| | | +'<td>'+node[i].startTime.substring(0,10)+'</td>' |
| | | +'<td>'+node[i].endTime$.substring(0,10)+'</td>' |
| | | +'<td>'+projectsName+'</td>' |
| | | +'<td>'+nodes[i].startTime.substring(0,10)+'</td>' |
| | | +'<td>'+nodes[i].endTime$.substring(0,10)+'</td>' |
| | | tabLeft3 = tabLeft3 + tabLeft2 |
| | | var overtime = endT-nodeRealEndTime |
| | | var overtime = endT-proRET |
| | | if(overtime<0){ |
| | | bigDays.push(nodeRealEndTime) |
| | | bigDays.push(proRET) |
| | | } |
| | | } |
| | | let max = bigDays[0] |
| | |
| | | +'<tr id="tot">' +'</tr>' |
| | | +'<tr id="tot-2">'+'</tr>' |
| | | var tab3 = tab1+tab+'</tbody>' |
| | | /* 节点时间表 */ |
| | | /* 甘特图左侧 项目内容表 */ |
| | | var tabLeft = '<thead>' // 表头 |
| | | +'<tr class="tab-head">' |
| | | +'<th>'+'项目名称'+'</th>' |
| | |
| | | // 填充单元格 |
| | | var nodeId = ["#tot-2"] |
| | | var nodeId4 = [] |
| | | for(let k = 0;k<node.length;k++){ |
| | | for(let k = 0;k<nodes.length;k++){ |
| | | var getId = "#"+"td-node"+k+"-gz" |
| | | var getId2 = "#"+"td-node"+k+"-gz-2" |
| | | nodeId.push(getId) |
| | | nodeId.push(getId2) |
| | | } |
| | | for(let k = 0;k<node.length;k++){ |
| | | for(let k = 0;k<nodes.length;k++){ |
| | | var getId = "#"+"td-node"+k+"-gz" |
| | | var getId2 = "#"+"td-node"+k+"-gz-2" |
| | | nodeId4.push(getId) |
| | |
| | | } |
| | | |
| | | if(max>endT){ |
| | | allDay = (max-staT+day)/day |
| | | days = (max-staT+day)/day |
| | | endT=max |
| | | getDateArr(staT,endT) |
| | | }else{ |
| | |
| | | $("#th-gz").append(strr) |
| | | } |
| | | // 项目时间单元格 |
| | | for(let i=0;i<allDay;i++){ |
| | | str = '<td class="loadBox-2">'+dateArr[i]+'</td>' |
| | | for(let i=0;i<days;i++){ |
| | | str = '<th class="loadBox-2">'+dateArr[i]+'</th>' |
| | | $("#tot").append(str); |
| | | // $(".loadBox").attr('style','width:50px') |
| | | } |
| | | // 节点时间单元格 |
| | | for (let j=0;j<allDay;j++){ |
| | | tds = '<td class="gz-color">'+'</td>' |
| | | for (let j=0;j<days;j++){ |
| | | tds = '<td class="gz-color'+j+' time-color">'+'</td>' |
| | | for(let k in nodeId){ |
| | | $(nodeId[k]).append(tds) |
| | | } |
| | | } |
| | | var nodeId2 = [],nodeId3 = [] |
| | | for(let k = 0;k<node.length;k++){ |
| | | for(let k = 0;k<nodes.length;k++){ |
| | | var getId2 = "#"+"td-node"+k+"-gz" |
| | | var getId3 = "#"+"td-node"+k+"-gz-2" |
| | | nodeId2.push(getId2) |
| | |
| | | for(var i=0;i<nodeId4.length;i++){ |
| | | $(nodeId4[i]).attr("style","background:#eeeeef") |
| | | } |
| | | // for(var j = 0;j < allDay;j++){ |
| | | // for(var j = 0;j < days;j++){ |
| | | // $("#tot").find("td").eq(j+3).attr("style","background:#3597D6") |
| | | // } |
| | | var runDay = Math.ceil((currT - staT)/ day) |
| | | if(runDay>0){ |
| | | for(var j = 0;j < runDay;j++){ |
| | | $("#tot-2").find("td").eq(j).attr("style","background:#0f9a84") |
| | | $("#tot-2").find("td").eq(j).attr("style","background:#8bddde") |
| | | } |
| | | } |
| | | for(var i = 0;i<node.length;i++){ |
| | | var nodeName = node[i].name // 节点 |
| | | var nodeStartTime = new Date(node[i].startTime.substring(0,10)) // 计划开始日期 |
| | | var nodeEndTime = new Date(node[i].endTime$.substring(0,10)) // 计划结束日期 |
| | | var nodeEndTime2 = new Date(nodeEndTime.getTime()+day*2) |
| | | var nodeRealStartTime =new Date(node[i].realStartTime$.substring(0,10)) // 实际开始日期 |
| | | var nodeRealEndTime =new Date(node[i].realEndTime$.substring(0,10)) // 实际结束日期 |
| | | var nodeDay = (nodeEndTime-nodeStartTime+day)/day // 计划工作天数 |
| | | var nodeRSDay = (nodeEndTime-nodeRealStartTime+day)/day // 节点实际工作天数 |
| | | var nodeREDay = (nodeRealEndTime-nodeStartTime+day)/day // 预计开始-实际结束时间段 |
| | | var nodeRealDay = (nodeRealEndTime-nodeRealStartTime+day)/day //实际时间段 |
| | | var intDay = (nodeStartTime-staT)/day // 预计开始时间与项目开始时间的间隔 |
| | | var intRealDay = (nodeRealStartTime-staT)/day // 实际开始与项目开始时间的间隔 |
| | | var nodeRunDay = Math.ceil((currT-nodeStartTime)/ day) |
| | | var nodeRealRunDay = Math.ceil((currT-nodeRealStartTime)/ day) |
| | | var nodeRun = Math.ceil((currT-nodeEndTime-day)/ day) |
| | | var intRunDay = nodeRealEndTime-(nodeRealEndTime-(nodeEndTime-nodeStartTime))/day |
| | | for(var i = 0;i<nodes.length;i++){ |
| | | var proST = new Date(nodes[i].startTime.substring(0,10)) // 计划开始日期 |
| | | var proET = new Date(nodes[i].endTime$.substring(0,10)) // 计划结束日期 |
| | | var proET2 = new Date(proET.getTime()-day*2) // 计划结束日期-2天 |
| | | var proRST =new Date(nodes[i].realStartTime$.substring(0,10)) // 实际开始日期 |
| | | var proRET =new Date(nodes[i].realEndTime$.substring(0,10)) // 实际结束日期 |
| | | var nodeDay = (proET-proST+day)/day // 计划工作天数 |
| | | var nodeRSDay = (proET-proRST+day)/day // 节点实际工作天数 |
| | | var nodeREDay = (proRET-proST+day)/day // 实际结束减计划开始时间 |
| | | var nodeRealDay = (proRET-proRST+day)/day //实际时间段 |
| | | var intDay = (proST-staT)/day // 预计开始时间与项目开始时间的间隔 |
| | | var intRealDay = (proRST-staT)/day // 实际开始与项目开始时间的间隔 |
| | | var intRealEndDay = (proRET-staT)/day // 实际结束与项目开始的间隔 |
| | | var nodeRunDay = Math.ceil((currT-proST)/ day) |
| | | var nodeRealRunDay = Math.ceil((currT-proRST)/ day) |
| | | var nodeRun = Math.ceil((currT-proET-day)/ day) |
| | | var notRealStartDay = proRET-(proET-proST) // 推算的实际开始日期 |
| | | var intNotRealStartTime = (new Date(notRealStartDay)-staT)/day // 推算的开始日期与项目开始日期的时间段 |
| | | |
| | | |
| | | |
| | | // 与当前时间的时间差 |
| | | for(var j=0;j<nodeDay;j++){ |
| | | $(nodeId2[i]).find('td').eq(intDay+j).attr("style","background:#3597D6") |
| | | $(nodeId2[i]).find('td').eq(intDay+j).attr("style","background:#5998f5") |
| | | } |
| | | // 实际开始日期与实际结束日期都填写 按实际时间进渲染 |
| | | if(nodeRealStartTime != "Invalid Date" && nodeRealEndTime !="Invalid Date"){ |
| | | // 实际结束时间超过计划结束时间 超过的时间变红色 |
| | | if(proRST != "Invalid Date" && proRET !="Invalid Date"){ |
| | | |
| | | for(var j=0;j<nodeRealDay;j++){ |
| | | if(nodeRealEndTime<=nodeEndTime){ // 实际结束日期<=计划结束日期 |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#49C7D3") |
| | | }else if(nodeRealEndTime>nodeEndTime && nodeRealEndTime<=nodeEndTime2){ // 实际结束日期>计划结束日期 |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#ccc739") |
| | | if(proRET<=proET2){ // 实际结束日期<=计划结束日期 |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#00cc88") |
| | | }else if(proRET>proET2 && proRET<=proET){ // 实际结束日期>计划结束日期 |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#00cc88") |
| | | }else { // 实际结束日期>计划结束日期+2天 |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#CC3333") |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#e63939") |
| | | } |
| | | } |
| | | // 实际开始时间已填 实际结束时间未填 (实际结束时间按预计结束时间填)改 当前时间与实际开始时间的间隔 |
| | | }else if(nodeRealStartTime != "Invalid Date" && nodeRealEndTime =="Invalid Date"){ |
| | | }else if(proRST != "Invalid Date" && proRET =="Invalid Date"){ |
| | | for(var j=0;j<nodeRealRunDay;j++){ |
| | | if(nodeRun>0){ |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#CC3333") |
| | | }else if(nodeRun>-2 && nodeRun<=0){ |
| | | }else if(nodeRun>-3 && nodeRun<=0){ |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#ccc739") |
| | | }else{ |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#49C7D3") |
| | | $(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#8bddde") |
| | | } |
| | | } |
| | | // 实际开始时间未填 实际结束时间已填 实际开始时间按计划时长往前移 |
| | | }else if(nodeRealStartTime == "Invalid Date" && nodeRealEndTime !="Invalid Date"){ |
| | | if(nodeRealEndTime>nodeEndTime){ // 实际结束日期>计划结束日期 |
| | | for(var j=0;j<nodeREDay;j++){ |
| | | $(nodeId3[i]).find('td').eq(intDay+j).attr("style","background:#CC3333") |
| | | // 实际开始时间未填 实际结束时间已填 实际开始时间按计划开始时间 |
| | | }else if(proRST == "Invalid Date" && proRET !="Invalid Date"){ |
| | | if(proRET<=proST){ // 实际结束日期<=计划开始日期 暂时不填充 |
| | | // for(var j=0;j<nodeDay;j++){ // 天数是节点计划天数 |
| | | // $(nodeId3[i]).find('td').eq(intNotRealStartTime+j).attr("style","background:#49C7D3") // 实际开始日期是 实际结束日期-计划天数 |
| | | // } |
| | | }else if(proRET<=proET){ //实际结束日期<=计划结束日期 |
| | | for(var j=0;j<nodeREDay;j++) { // 天数是 实际结束日期-计划开始日期 |
| | | $(nodeId3[i]).find('td').eq(intDay + j).attr("style", "background:#00cc88")// 实际开始日期是 实际结束日期-计划天数 |
| | | } |
| | | }else if(nodeRealEndTime<=nodeEndTime && nodeRealEndTime>=nodeStartTime){ |
| | | for(var j=0;j<nodeREDay;j++){ |
| | | $(nodeId3[i]).find('td').eq(intDay+j).attr("style","background:#b2e5e8") |
| | | } |
| | | }else{ |
| | | if(intRunDay<0){ |
| | | intRunDay = 0 |
| | | for(var j=0;j<nodeDay;j++){ |
| | | $(nodeId3[i]).find('td').eq(intRunDay+j).attr("style","background:#49C7D3") |
| | | } |
| | | } |
| | | for(var j=0;j<nodeDay;j++){ |
| | | $(nodeId3[i]).find('td').eq(intRunDay+j).attr("style","background:#49C7D3") |
| | | }else{ // 实际结束日期>计划结束日期 |
| | | for(var j=0;j<nodeREDay;j++) { // 天数是 实际结束日期-计划开始日期 |
| | | $(nodeId3[i]).find('td').eq(intDay + j).attr("style", "background:#CC3333")// 实际开始日期是 实际结束日期-计划天数 |
| | | } |
| | | } |
| | | // 实际开始时间未填 实际结束时间未填 |
| | | }else if(nodeRealStartTime == "Invalid Date" && nodeRealEndTime =="Invalid Date"){ |
| | | for(var j=0;j<nodeDay;j++){ |
| | | $(nodeId3[i]).find('td').eq(intDay+j).attr("style","background:#49C7D3") |
| | | } |
| | | }else if(proRST == "Invalid Date" && proRET =="Invalid Date"){ |
| | | |
| | | } |
| | | } |
| | | // 鼠标经过 |
| | | // $("#tabBody").find("tr").eq(3).find("td").eq(30).attr("style","background:#354352") |
| | | // $("#tabBody").find("td").eq(30).attr("style","background:#f60313") |
| | | $(document).on('mouseover','.time-color',function () { |
| | | // console.log($(this).attr('class')) |
| | | var cls = $(this).attr('class').split(' ')[0] |
| | | var cll = '.'+cls |
| | | $(cll).addClass('over-color') |
| | | }) |
| | | // 鼠标离开 |
| | | $(document).on('mouseout','.time-color',function () { |
| | | // console.log($(this).attr('class')) |
| | | var cls = $(this).attr('class').split(' ')[0] |
| | | var cll = '.'+cls |
| | | $(cll).removeClass('over-color') |
| | | }) |
| | | // 滚轮 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | function getDateArr(start,end) { |
| | | let option = new Date(start) // 开始时间 |
| | | let nowDate = new Date(end) // 结束时间 |
| | |
| | | } |
| | | } |
| | | }) |
| | | |
| | | |
| | | |
| | | |