$(document).on("dblclick",".row",function(){
|
var index = $(".row").index(this) // 确定在表格中的第几行
|
var rowName = $(this).children(".projects").html() // 当前行中类名为projects的类中的文字
|
var project = data[index] // 把data中的第index个项目 赋值给project
|
if(project.id==rowName){
|
|
|
|
// 比较时间
|
var currentTime = new Date() // 系统当前时间
|
var startTime = new Date(project.startDay.substring(0,10)) // 项目开始时间
|
var endTime = new Date(project.endDay.substring(0,10)) // 项目结束时间
|
var node = project.nodes
|
for(var i=0;i<node.length;i++){
|
if(node[i].startTime==''||node[i].endTime$==''){
|
show = false
|
break
|
}else{
|
show = true
|
}
|
|
|
}
|
if(show==true){
|
$("#details").attr("style","display:block")
|
}else if(show==false){
|
$("#tips").attr("style","display:block")
|
}
|
// 项目名称
|
$("#details h2").html(project.id)
|
// 预计节点时间
|
var tab = ''
|
var tabLeft3 = ''
|
var day = 86400000
|
var allDay = (endTime - startTime + day ) / day
|
// 预计节点的天数,实际节点天数,占多少格子;预计/实际 节点与项目开始时间的时间间隔（从哪个格子开始渲染）
|
console.log(allDay)
|
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)) // 实际结束时间
|
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>'
|
tabLeft3 = tabLeft3 + tabLeft2
|
var overtime = endTime-nodeRealEndTime
|
if(overtime<0){
|
bigDays.push(nodeRealEndTime)
|
}
|
}
|
let max = bigDays[0]
|
for(var i = 0;i<bigDays.length;i++){
|
max = max <max[i+1] ? max[i+1] : max
|
}
|
var tab1 =
|
'<thead>'
|
+'<tr id="th-gz">' + '</tr>'
|
+'</thead>'
|
+'<tbody>'
|
+'<tr id="tot">' +'</tr>'
|
+'<tr id="tot-2">'+'</tr>'
|
var tab3 = tab1+tab+'</tbody>'
|
/* 节点时间表 */
|
var tabLeft = '<thead>' // 表头
|
+'<tr class="tab-head">'
|
+'<th>'+'项目名称'+'</th>'
|
+'<th>'+'开始时间'+'</th>'
|
+'<th>'+'结束时间'+'</th>'
|
+'</tr>'
|
+'</thead>'
|
+'<tbody>' // 表身 （项目节点始末）
|
+'<tr class="tab-body">'
|
+'<td style="height: 54px">'+'项目总时长'+'</td>'
|
+'<td style="height: 54px">'+project.startDay.substring(0,10)+'</td>'
|
+'<td style="height: 54px">'+project.endDay.substring(0,10)+'</td>'
|
+'</tr>'
|
|
var tabLeft4 = tabLeft + tabLeft3 +'</tbody>'
|
$("#details-tab-left").empty()
|
$("#details-tab-left").append(tabLeft4)
|
$("#details-tab").empty()
|
$("#details-tab").append(tab3);
|
// 填充单元格
|
var nodeId = ["#tot-2"]
|
var nodeId4 = []
|
for(let k = 0;k<node.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++){
|
var getId = "#"+"td-node"+k+"-gz"
|
var getId2 = "#"+"td-node"+k+"-gz-2"
|
nodeId4.push(getId)
|
nodeId4.push(getId2)
|
k++
|
}
|
|
if(max>endTime){
|
allDay = (max-startTime+day)/day
|
endTime=max
|
getDateArr(startTime,endTime)
|
}else{
|
getDateArr(startTime,endTime);
|
}
|
let newDataArr = []
|
if(allDay <= 40){
|
let iday = allDay
|
if(monthDays.length<2){
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
|
strr = stt
|
$("#th-gz").append(strr)
|
}else{
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
var gze=monthDays[monthDays.length-1]-(monthDays[monthDays.length-1]-endTime.getDate())
|
stc = '<td class="loadBox" colspan="'+gze+'">'+newMonthArr[newMonthArr.length-1]+'</td>'
|
strr = stt+stc
|
$("#th-gz").append(strr)
|
|
for(let i=0;i<iday;i++){
|
str = '<td class="loadBox-2">'+dateArr[i]+'</td>'
|
$("#tot").append(str);
|
// $(".loadBox").attr('style','width:50px')
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}
|
|
}else if(allDay>40 && allDay<=80){
|
let iday = Math.ceil(allDay / 2 )
|
for(var m=0;m<monthDays.length-1;m++){
|
var gzd=monthDays[m]
|
std = '<td class="loadBox" colspan="'+gzd+'">'+newMonthArr[m]+'</td>'
|
}
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
var gze=monthDays[monthDays.length-1]-(monthDays[monthDays.length-1]-endTime.getDate())
|
stc = '<td class="loadBox" colspan="'+gze+'">'+newMonthArr[newMonthArr.length-1]+'</td>'
|
strr = stt+std+stc
|
$("#th-gz").append(strr)
|
for(let k=0;k<dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k++
|
}
|
for(let i=0;i<iday;i++){
|
str = '<td class="loadBox-2" colspan="2">'+newDataArr[i]+'</td>'
|
$("#tot").append(str);
|
// $(".loadBox").attr('style','width:50px')
|
}
|
allDays = allDay%2
|
if(allDays==1){
|
allDay = allDay+1
|
}else {
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}else if(allDay>80 && allDay<=120){
|
let iday = Math.ceil(allDay / 3 )
|
var num = 1
|
var ste = null
|
for(var m=0;m<monthDays.length-2;m++){
|
var gzd=monthDays[m+1]
|
|
std = '<td class="loadBox" colspan="'+gzd+'">'+newMonthArr[num]+'</td>'
|
ste=ste+std
|
num++
|
}
|
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
var gze=monthDays[monthDays.length-1]-(monthDays[monthDays.length-1]-endTime.getDate())
|
stc = '<td class="loadBox" colspan="'+gze+'">'+newMonthArr[newMonthArr.length-1]+'</td>'
|
strr = stt+ste+stc
|
$("#th-gz").append(strr)
|
for(let k=0;k<=dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k=k+2
|
}
|
for(let i=0;i<iday;i++){
|
// 固定表
|
str = '<td class="loadBox-2" colspan="3">'+newDataArr[i]+'</td>'
|
$("#tot").append(str);
|
// $(".loadBox").attr('style','width:10px;padding:0px')
|
}
|
allDays = allDay%3
|
if(allDays==1){
|
allDay = allDay+2
|
}else if(allDays==2){
|
allDay = allDay+1
|
}else{
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}else if(allDay>120 && allDay<=160){
|
let iday = Math.ceil(allDay / 4 )
|
var num = 1
|
var ste = null
|
for(var m=0;m<monthDays.length-2;m++){
|
var gzd=monthDays[m+1]
|
std = '<td class="loadBox" colspan="'+gzd+'">'+newMonthArr[num]+'</td>'
|
ste=ste+std
|
num++
|
}
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
var gze=monthDays[monthDays.length-1]-(monthDays[monthDays.length-1]-endTime.getDate())
|
stc = '<td class="loadBox" colspan="'+gze+'">'+newMonthArr[newMonthArr.length-1]+'</td>'
|
strr = stt+ste+stc
|
$("#th-gz").append(strr)
|
for(let k=0;k<=dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k=k+3
|
}
|
for(let i=0;i<iday;i++){
|
str = '<td class="loadBox-2" colspan="4">'+newDataArr[i]+'</td>'
|
$("#tot").append(str);
|
}
|
allDays = allDay%4
|
if(allDays==1){
|
allDay = allDay+3
|
}else if(allDays==2){
|
allDay = allDay+2
|
}else if(allDays==3){
|
allDay = allDay+1
|
}else{
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}else if(allDay>160 && allDay<=200){
|
let iday = Math.ceil(allDay / 5 )
|
var num = 1
|
var ste = null
|
for(var m=0;m<monthDays.length-2;m++){
|
var gzd=monthDays[m+1]
|
|
std = '<td class="loadBox" colspan="'+gzd+'">'+newMonthArr[num]+'</td>'
|
ste=ste+std
|
num++
|
}
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
var gze=monthDays[monthDays.length-1]-(monthDays[monthDays.length-1]-endTime.getDate())
|
stc = '<td class="loadBox" colspan="'+gze+'">'+newMonthArr[newMonthArr.length-1]+'</td>'
|
strr = stt+ste+stc
|
$("#th-gz").append(strr)
|
for(let k=0;k<=dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k=k+4
|
}
|
for(let i=0;i<iday;i++){
|
// 固定表
|
str = '<td class="loadBox-2" colspan="5">'+newDataArr[i]+'</td>'
|
$("#tot").append(str);
|
}
|
allDays = allDay%5
|
if(allDays==1){
|
allDay = allDay+4
|
}else if(allDays==2){
|
allDay = allDay+3
|
}else if(allDays==3){
|
allDay = allDay+2
|
}else if(allDays==4){
|
allDay = allDay+1
|
}else{
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}else if(allDay>200 && allDay<=240){
|
let iday = Math.ceil(allDay / 6 )
|
var num = 1
|
var ste = null
|
for(var m=0;m<monthDays.length-2;m++){
|
var gzd=monthDays[m+1]
|
std = '<td class="loadBox" colspan="'+gzd+'">'+newMonthArr[num]+'</td>'
|
ste=ste+std
|
num++
|
}
|
var gz=monthDays[0]-startTime.getDate()+1
|
stt = '<td class="loadBox" colspan="'+gz+'">'+newMonthArr[0]+'</td>'
|
var gze=monthDays[monthDays.length-1]-(monthDays[monthDays.length-1]-endTime.getDate())
|
stc = '<td class="loadBox" colspan="'+gze+'">'+newMonthArr[newMonthArr.length-1]+'</td>'
|
strr = stt+ste+stc
|
$("#th-gz").append(strr)
|
for(let k=0;k<=dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k=k+5
|
}
|
for(let i=0;i<iday;i++){
|
// 固定表
|
str = '<td class="loadBox-2" colspan="6">'+newDataArr[i]+'</td>'
|
$("#tot").append(str);
|
}
|
allDays = allDay%6
|
if(allDays==1){
|
allDay = allDay+5
|
}else if(allDays==2){
|
allDay = allDay+4
|
}else if(allDays==3){
|
allDay = allDay+3
|
}else if(allDays==4){
|
allDay = allDay+2
|
}else if(allDays==5){
|
allDay = allDay+1
|
}else{
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}else if(allDay>240){
|
let iday = Math.ceil(allDay / 7 )
|
for(let k=0;k<=dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k=k+6
|
}
|
for(let i=0;i<iday;i++){
|
// 固定表
|
str = '<td class="loadBox" colspan="7">'+newDataArr[i]+'</td>'
|
$("#th-gz").append(str);
|
}
|
allDays = allDay%7
|
if(allDays==1){
|
allDay = allDay+6
|
}else if(allDays==2){
|
allDay = allDay+5
|
}else if(allDays==3){
|
allDay = allDay+4
|
}else if(allDays==4){
|
allDay = allDay+3
|
}else if(allDays==5){
|
allDay = allDay+2
|
}else if(allDays==6){
|
allDay = allDay+1
|
}else{
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}else if(allDay>280){
|
let iday = Math.ceil(allDay / 8 )
|
for(let k=0;k<=dateArr.length;k++){
|
var newDays = dateArr[k]
|
newDataArr.push(newDays)
|
k=k+7
|
}
|
for(let i=0;i<iday;i++){
|
// 固定表
|
str = '<td class="loadBox-2" colspan="8">'+newDataArr[i]+'</td>'
|
$("#th-gz").append(str);
|
}
|
allDays = allDay%8
|
if(allDays==1){
|
allDay = allDay+7
|
}else if(allDays==2){
|
allDay = allDay+6
|
}else if(allDays==3){
|
allDay = allDay+5
|
}else if(allDays==4){
|
allDay = allDay+4
|
}else if(allDays==5){
|
allDay = allDay+3
|
}else if(allDays==6){
|
allDay = allDay+2
|
}else if(allDays==7){
|
allDay = allDay+1
|
}else{
|
allDay = allDay
|
}
|
for (let j=0;j<allDay;j++){
|
tds = '<td class="gz-color">'+'</td>'
|
for(let k in nodeId){
|
$(nodeId[k]).append(tds)
|
}
|
}
|
}
|
// 123
|
var nodeId2 = [],nodeId3 = []
|
for(let k = 0;k<node.length;k++){
|
var getId2 = "#"+"td-node"+k+"-gz"
|
var getId3 = "#"+"td-node"+k+"-gz-2"
|
nodeId2.push(getId2)
|
nodeId3.push(getId3)
|
}
|
for(var i=0;i<nodeId4.length;i++){
|
$(nodeId4[i]).attr("style","background:#eeeeef")
|
}
|
// for(var j = 0;j < allDay;j++){
|
// $("#tot").find("td").eq(j+3).attr("style","background:#3597D6")
|
// }
|
var runDay = Math.ceil((currentTime - startTime)/ day)
|
if(runDay>0){
|
for(var j = 0;j < runDay;j++){
|
$("#tot-2").find("td").eq(j).attr("style","background:#49C7D3")
|
}
|
}
|
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)) // 实际结束时间
|
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-startTime)/day // 预计开始时间与项目开始时间的间隔
|
var intRealDay = (nodeRealStartTime-startTime)/day // 实际开始与项目开始时间的间隔
|
var nodeRunDay = Math.ceil((currentTime-nodeStartTime)/ day)
|
var nodeRealRunDay = Math.ceil((currentTime-nodeRealStartTime)/ day)
|
var nodeRun = Math.ceil((currentTime-nodeEndTime-day)/ day)
|
var intRunDay = nodeRealEndTime-(nodeRealEndTime-(nodeEndTime-nodeStartTime))/day
|
// 与当前时间的时间差
|
for(var j=0;j<nodeDay;j++){
|
$(nodeId2[i]).find('td').eq(intDay+j).attr("style","background:#3597D6")
|
}
|
// 实际开始时间与结束时间都填写 按实际时间进渲染
|
if(nodeRealStartTime != "Invalid Date" && nodeRealEndTime !="Invalid Date"){
|
for(var j=0;j<nodeRealDay;j++){
|
$(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#49C7D3")
|
}
|
// 实际开始时间已填 实际结束时间未填 实际结束时间按预计结束时间填
|
}else if(nodeRealStartTime != "Invalid Date" && nodeRealEndTime =="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){
|
$(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#CC9933")
|
}else{
|
$(nodeId3[i]).find('td').eq(intRealDay+j).attr("style","background:#49C7D3")
|
}
|
}
|
// 实际开始时间未填 实际结束时间已填 实际开始时间按预计开始时间填
|
}else if(nodeRealStartTime == "Invalid Date" && nodeRealEndTime !="Invalid Date"){
|
if(nodeEndTime<nodeRealEndTime){
|
for(var j=0;j<nodeREDay;j++){
|
$(nodeId3[i]).find('td').eq(intDay+j).attr("style","background:#49C7D3")
|
}
|
}else if(nodeEndTime>=nodeRealEndTime && nodeRealEndTime>=nodeStartTime){
|
for(var j=0;j<nodeREDay;j++){
|
$(nodeId3[i]).find('td').eq(intDay+j).attr("style","background:#49C7D3")
|
}
|
}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 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")
|
}
|
}
|
}
|
function getDateArr(start,end) {
|
let option = new Date(start) // 开始时间
|
let nowDate = new Date(end) // 结束时间
|
let times = option.getTime() // 获取当前时间戳(毫秒）
|
let ms = (nowDate - option ) / 86400000 // 相差的总天是的毫秒数(天数)
|
let days = Math.ceil(ms) // 向上取整数
|
dateArr = [] // 创建日期数组
|
monthArr = []
|
monthDays=[]
|
let num = 0
|
while (num<=days){
|
let needDate = new Date(times)
|
times += 86400000 // 加一天
|
let dayDAY = needDate.getDate(); // 获取当前时间的日期 1号 2号 3号 4号 等
|
dayDAY = dayDAY<10 ? '0'+dayDAY : dayDAY
|
dateArr.push(dayDAY)
|
let month = needDate.getMonth()+1
|
month = month<10 ? '0'+month : month
|
let year = needDate.getFullYear()
|
yMonth = year+'-'+month
|
monthArr.push(yMonth)
|
num++; // 计次用
|
}
|
function unique (monthArr) {
|
return Array.from(new Set(monthArr))
|
}
|
newMonthArr = unique(monthArr)
|
for(var i=0;i<newMonthArr.length;i++){
|
s = newMonthArr[i].split("-")
|
var d = new Date(s[0],s[1],0);
|
a = d.getDate()
|
monthDays.push(a)
|
}
|
}
|
}
|
})
|
|
