更新前端

mrzhssss

2022-01-21 72c120049ba6db6eded053e3ba106c2e13696e82

更新前端

 src/main/webapp/static/css/style.css

@@ -14,18 +14,36 @@
}
#top-tab {
    width: 100%;
    height: 10%;
    height: 109px;
    background-image: url(../image/head_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}
#logo-bar {
    width: 200px;
    height: 109px;
	
    position: absolute;
	
	
	
}
#top-tab img {
    width: 200px;
    height: 109px;
    position: absolute;
    top: -15px;
    left: 20px;
    transform: scale(0.6);

}

#top-tab h1{
    color:white;
    line-height: 94px;
    text-align: center;
}

#showTime {
    width: 350px;
    height: 80px;
@@ -37,23 +55,9 @@
    text-align: center;
    font-size: 20px;
}
#showTime {
    float: right;
}

table,th,td {
    border: 1px solid #fff;
    cursor: default;
	
}
th {
    height: 50px;
    width: 50px;
    background-color: /* #223962 */#3a4a5a;
}
td {
    cursor: pointer;
}



#main-tab {
    margin-top: 1%;
@@ -62,16 +66,27 @@
    color: #d9d9d9;
    margin-left: 1%;
}
#main-tab,th,td{
    border: 1px solid #fff;
    cursor: default;
}
#main-tab th {
    height: 50px;
    width: 50px;
    background-color: /* #223962 */#3a4a5a;
}


#main-tab td {
   width: 50px;
   height: 50px;
   border-collapse: collapse;
   text-align: center;
   
   cursor: pointer;
}
/*.normal {*/
/*    background-color: #009966;*/
/*}*/
/* .normal {
    background-color: #009966;
} */
.nor-mal {
    background-color: #3a4a5a;
}
@@ -81,7 +96,7 @@
#details {
    width: 98%;
    height: 95%;
    background-color: rgba(255,255,255,1);
    background-color: #FFF;
    box-shadow: 0px 5px 20px #000;
    border-radius: 15px;
    position: relative;
@@ -90,6 +105,48 @@
    display: none;
    
}
#tips {
    width: 30%;
    height: 20%;
    background-color: #FFF;
    box-shadow: 0px 5px 20px #000;
    border-radius: 15px;
    position: relative;
    top:30%;
    left:35%;
    display: none;
}
#tips h3 {
    text-indent: 1em;
    height: 40px;
    line-height: 40px;
    background-color: #2E4E7E;
    color: #FFFFFF;
}
#text {
    height: 100px;
    width: 576px;
/*     background-color: #016165; */
    font-size: 18px;
    font-weight: 900;
    text-indent: 2em;
    line-height: 100px;
}
#closee {
    display: inline-block;
    color: #FFFFFF;
    height: 30px;
    width: 80px;
    background-color: #354352;
    border: 1px #354352;
    border-radius: 30px;
    position: relative;
    left: 50%;
    top: 5%;
    transform: translate(-50% ,-30%);
}


#details .head {
    width: 100%;
    height: 50px;
@@ -100,33 +157,58 @@
#details h2 {
    display: inline-block;
}
button {
#close {
    display: inline-block;
    color: #FFFFFF;
    height: 30px;
    width: 80px;
    background-color: #009966;
    border: 1px #009966;
    background-color: #354352;
    border: 1px #354352;
    border-radius: 30px;
    margin-top: 10px;
    margin-right: 10px;
}
/* 甘特图 */
#details-tab {
    background-color: #282c35;
    width: 90%;
    height: 90%;
    margin-left: 5%;
	
}
#details-tab th {
    height: 50px;
    width: 50px;
}
#details-tab td {
    height: 50px;
    width: 50px;
    margin-top: 20px;
    margin-right: 50px;
}

/* 甘特图 */
#details-tab {
    background-color: #FFF;
    width: 98%;
    margin-top: 1%;
    margin-left: 1%;
	
}
#details-tab,th,td{
    border: 1px solid #d9dce3;
    cursor: default;

}
#details-tab th {
    height: 35px;
    width: 55px;
}
#details-tab td {
    height: 28px;
    text-align: center;
    position: relative;
}
.loadBox {
    width: 50px;
    height: 50px;
    background-color: #354352;
    color: #FFFFFF;
    font-size: 6px;
}
.gz-color {
    height: 50px;
    border: none;
}

.loadBox-2 {
    width: 50px;
    background-color: #354352;
    color: #FFFFFF;
    font-size: 1px;
}




 src/main/webapp/static/image/logo-bar.png

 src/main/webapp/static/js/clock.js

@@ -1,11 +1,21 @@
  

setInterval(function () {
    let dt = new Date();
setInterval(function(){
    dt = new Date();
    var y = dt.getFullYear();
    var mt = dt.getMonth()+1;
    var day = dt.getDate();
    var h = dt.getHours();
    var m = dt.getMinutes();
    var s = dt.getSeconds();
    document.getElementById('showTime').innerHTML =y+'年'+mt+'月'+day+'日'+h+'时'+m+'分'+s+'秒';
}, 1000);
	
    // document.getElementById('showTime').innerHTML = y+'年'+mt+'月'+day+'日'+h+'时'+m+'分'+s+'秒';
    document.getElementById('showTime').innerHTML =y+'-'+padding1(mt,2)+'-'+padding1(day,2)+' '+padding1(h,2)+':'+padding1(m,2)+':'+padding1(s,2)+'';
	
    function padding1(num, length) {
        for(var len = (num + "").length; len < length; len = num.length) {
            num = "0" + num;
        }
        return num;
    }
},1000)

 src/main/webapp/static/js/projectShow.js

New file
@@ -0,0 +1,533 @@
$(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
                }
				
				
            }
            console.log(show)
            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 day = 86400000
            var allDay = (endTime - startTime + 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)) // 实际结束时间
                var tab2 = 
                        '<tr id="td-node'+i+'-gz">'
                            +'<td rowspan="2" class="loadBox">'+nodeName+'</td>'
                            +'<td rowspan="2" class="loadBox">'+node[i].startTime.substring(0,10)+'</td>'
                            +'<td rowspan="2" class="loadBox">'+node[i].endTime$.substring(0,10)+'</td>'
                            +'<tr id="td-node'+i+'-gz-2">'+'</tr>'
                tab = tab +tab2	
                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">'
                +'<th class="loadBox">'+'任务名称'+'</th>'
                +'<th class="loadBox">'+'开始时间'+'</th>'
                +'<th class="loadBox">'+'结束时间'+'</th>'
                + '</tr>'
                +'</thead>'
                +'<tbody>'
                +'<tr id="tot">'
                +'<td rowspan="2" class="loadBox">'+'任务总时间'+'</td>'
                +'<td  rowspan="2" class="loadBox">'+project.startDay.substring(0,10)+'</td>'
                +'<td  rowspan="2" class="loadBox">'+project.endDay.substring(0,10)+'</td>'
                +'</tr>'
                +'<tr id="tot-2">'+'</tr>'
            var tab3 = tab1+tab+'</tbody>'
            $("#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(3+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)
                    }
            }
            }
            })
			

 src/main/webapp/static/js/tableData.js

@@ -1,17 +1,16 @@
setTimeout(function(){
    getTheaddData()
    getThbodyData()
},0)
setInterval(function(){

    getThbodyData()

},50000)

    setTimeout(function(){
        getTheaddData()
        getThbodyData()
    },0)
    setInterval(function(){
        getThbodyData()
    },5000)
	
	
    var proData = ["项目名称","开始时间","结束时间",]
    var getTheaddData = function(){
        $.ajax({
            url:baseUrl + '/projectPlan/flowStatus',
            url:'http://192.168.4.99:8080/pms/projectPlan/flowStatus',
            type:'GET',
            dataType:'JSON',
            data:{},
@@ -32,19 +31,18 @@
            },
            })
            }



	
/*****************************************************************************************************************************************************************************/
    var getThbodyData = function(){
        $.ajax({
            url:baseUrl+'/projectPlan/toFront',
            url:'http://192.168.4.99:8080/pms/projectPlan/toFront',
            type:'GET',
            dataType:'JSON',
            data:{},
            success:function(res){
                // console.log(JSON.stringify(res.data));
            success:function(res){				
                if(res.code==200){
                    data=res.data
                    console.log(data)
                    // 判断时间是否有null  有null的改为 ""
                    for(var i = 0;i<data.length;i++){
                        var dataNode = data[i].nodes
@@ -86,12 +84,12 @@
                            var realEndTime$ = data[t].nodes[k].realEndTime$.substring(0,10)
                            // 项目节点计划结束时间
                            var endTime$ = data[t].nodes[k].endTime$.substring(0,10)

                            console.log(endTime$)
                            var myDate = new Date()
                            var nowDay = myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate()
                            var eDay = new Date(endTime$)
                            // 判断realEndTime$.substring(0,10) 是否为空

                            console.log(realEndTime$)
                            if(realEndTime$ === ""){
                                // 计划日期与系统日期比较
                                    var ExDay = eDay.getTime()-myDate.getTime()
@@ -118,7 +116,7 @@
                                            
                                    }
                                }
                                tab(endTime$,realEndTime$);
                                tab(endTime$,realEndTime$,);
                            }
                            
                        }
@@ -127,6 +125,8 @@
                
            }
        })
    }
    } 

	
/*****************************************************************************************************************************************************************************/	



 src/main/webapp/views/index_datashow.html

@@ -5,18 +5,20 @@
    <title>项目进度表</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="../static/js/common.js"></script>
<!--    <script src="../static/js/index.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="../static/js/clock.js"></script>
    <script src="../static/js/tableData.js"></script>
<!--    <script src="../static/js/projectShow.js"></script>-->
    <script src="../static/js/projectShow.js"></script>
</head>
<body>
    <div id="root">
        <!-- 标题 -->
        <div id="top-tab">
            <h1>中扬立库 2022年集成项目进度一览表</h1>
            <div id="showTime"></div>
            <h1>项目进度表</h1>
            <div id="logo-bar"></div>
            <img src="../static/image/logo-bar.png" alt="logo">
            <div id="showTime">
				
            </div>
        </div>
        <table id="main-tab" cellspacing="0" cellpadding="0">
            <!-- 表头 -->
@@ -33,24 +35,27 @@
    <div id="details">
        <div class="head">
            <h2></h2>
            <button id="close" type="button" style="float: right;">关闭</button>
            <button id="close" type="button" style="float: right;">关 闭</button>
        </div>
        <table id="details-tab">
        <table id="details-tab" cellspacing="0" cellpadding="0">
            <thead>
                <tr><th>任务名称</th><th>开始时间</th><th>结束时间</th></tr>
            </thead>
            <tbody>
                <tr><td>开始时间</td><td>2022-01-11</td><td></td></tr>
                <tr><td>结束时间</td><td>2022-02-05</td><td></td></tr>
                <tr><td>合约签订</td><td>2022-02-05</td><td></td></tr>
            </tbody>
        </table>
    </div>
    <div id="tips">
        <h3>提示</h3>
        <div id="text">当前项目计划时间不完整；请补充完成后重试!</div>
        <button id="closee" onclick="">确 认</button>
    </div>
</body>
</html>
<script type="text/javascript">
    // 明细关闭
    $("#close").on("click",function(){
        $("#details").attr("style","display:none")
    })
</script>
    $("#closee").on("click",function(){
        $("#tips").attr("style","display:none")
    })
</script>