#

whycq

2022-09-08 fbf44e2ba37f43fabc220964b5acc3603d96faa8

#

 src/main/webapp/static/css/style3.css

New file
@@ -0,0 +1,349 @@
*{
    margin: 0;
    /*overflow: hidden;*/
    font-size: 10px;
}
html{
    height: 100%;
}
body{
    background-color: #2e4e7e;
    height: 1080px;
    width: 100%;
}
/* 画布 */
#root {
    /*height: 100%;*/
    /*width: 100%;*/
    /*margin: 0;*/
    /*background-color: !* #2C3E50 *! #2e4e7e;*/
    position: absolute;
}

#top-tab {
    width: 100%;
    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;
    font-size: 40px;
}
#showTime {
    width: 350px;
    height: 80px;
    position: absolute;
    top: 0;
    right: 0px;
    color:white;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
}

#proType {
    margin-top: 0%;
    width: 50%;
    color: #d9d9d9;
    align: center;
    margin-left: 25%;
    font-size: 10px;
    font-weight: 100;
}


#main-tab {
    margin-top: 1%;
    width: 198%;
    align: center;
    color: #d9d9d9;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 5%;
    /*min-height: 1080px;*/
    /*height: auto !important;*/
    /*height: 1080px;*/
}
#main-tab,th,td{
    border: 1px solid #fff;
    cursor: default;
}
#main-tab th {
    height: 40px;
    width: 25px;
    background-color: /* #223962 */#3a4a5a;
}


#main-tab td {
   width: 50px;
   height: 50px;
   border-collapse: collapse;
   text-align: center;
   cursor: pointer;
}
#main-tab p {
    font-size: 14px;
}
/* .normal {
    background-color: #009966;
} */
.nor-mal {
    background-color: #3a4a5a;
}

.hover{background-color: #016165;cursor:pointer;}
/* 弹出层 */
#details {
    width: 98%;
    height: 90%;
    background-color: #FFF;
    box-shadow: 0px 5px 20px #000;
    border-radius: 15px;
    position: relative;
    top:2.5%;
    left:1%;
    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: 36px;
    line-height: 36px;
    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 {
    position: absolute;
}
#details .head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    /* background-color: #016165; */
}
#details h2 {
    display: inline-block;
}
#close {
    display: inline-block;
    color: #FFFFFF;
    height: 30px;
    width: 80px;
    background-color: #354352;
    border: 1px #354352;
    border-radius: 30px;
    margin-top: 20px;
    margin-right: 50px;
}

/* 甘特图 */
/*左侧项目节点时间*/
#details-tab-left {
    display: inline-block;
    position: absolute;
    float: left;
    width: 16%;
    margin-top: 0.5%;
    margin-left: 1%;
}
/*表头*/
.tab-head {
    background-color: #354352;
    color: #FFFFFF;
    font-size: 6px;
}
.tab-head>th {
    width: 73px;
    height: 25px;
}
.tab-head>th:first-child {
    width: 110px;
}
/*表身*/
.tab-body {
    background-color: #354352;
    color: #FFFFFF;
    font-size: 6px;
}
.tab-body>td {
    width: 73px;
    height: 30px;
    text-align: center;
}
.tab-body>td:first-child {
    width: 55px;
}
/*右侧进度表*/
#details-tab {
    display: inline-block;
    position: absolute;
    clear: both;
    background-color: #FFF;
    width: 80%;
    margin-top: 0.5%;
    margin-left: 16.9%;
    overflow-x: scroll;
}

#details-tab th td{
    border: 1px solid #d9dce3;
    cursor: default;

}
#details-tab th {
    height: 25px;
    width: 55px;
}
#details-tab td {
    height: 16px;
    text-align: center;
    position: relative;

}
#tabBody td {
    border: none;
}

.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;
    border: 1px solid #ffffff;
}




#tot th:hover {
    background-color: #0c64eb;
}

.over-color{
    background-color: #aeafaf;
    opacity: 1;


}







::-webkit-scrollbar {

    height: 10px;

    width: 10px;

    /*color: transparent;*/
    color: #FFFFFF;

}
/*定义滚动条样式（高宽及背景）*/

::-webkit-scrollbar {

    width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/

    background: #007acc;

}

/*定义滚动条轨道（凹槽）样式*/

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */

    border-radius: 3px;

}

/*定义滑块 样式*/

::-webkit-scrollbar-thumb {

    border-radius: 3px;

    height: 100px;    /* 滚动条滑块长度 */

    background-color: #ccc;

}








 src/main/webapp/static/css/style4.css

New file
@@ -0,0 +1,61 @@
*{
    margin: 0;
}
#root {

}
body {
    background-color: #2e4e7e;
    width: 100%;
    /*min-height: 1080px;*/
    /*height: auto !important;*/
    height: 1080px;
}
.header {
    height: 8rem;
    width: 100%;
    background-color: #3F3F3F
}
.main {
    width: 100%;
    overflow: scroll;
    background-color: #7a8191;

}
.kuai {
    height: 100%;
    width: 20%;
    display: inline-block;
    background-color: #2D93CA;
}
.zuo {
    float: left;
}
.you {
    float: right;
}
.th  {
    height: 6rem;
    width: 100px;
    border: 1px solid #000000;
}
.td {
    height: 8rem;
    width: 15rem;
    border: 1px solid #000000;
}



.float {
    left: 0;
    top: 50px;
    position: absolute;
    /*background-color: #fff;*/
    width: 92%;
    margin-left: 4%;
    min-height: 300px;
    height: auto !important;
    height: 300px;
    box-shadow: 0px 0px 20px #888888;
}

 src/main/webapp/static/js/tableData3.js

New file
@@ -0,0 +1,197 @@
setTimeout(function () {
    getTheaddData()
    getThbodyData()
    getType()
}, 0)
setInterval(function () {
    getThbodyData()
}, 5000)

//表头小进度表
var getType = function () {
    $.ajax({
        url: baseurl + '/pms/projectPlan/dataSummary',
        type: 'GET',
        data: {},
        success: function (res) {
            if (res.code === 200) {
                var str = '<tr>'
                    + '<th>' + '项目总数' + '</th>' + '<th>' + res.data.totalQuantity + '</th>'
                    + '<th>' + '集成项目' + '</th>' + '<th>' + res.data.intoSum + '</th>'
                    + '<th>' + '非集成项目数' + '</th>' + '<th>' + res.data.wrongInto + '</th>'
                    + '<th>' + '已验收项目数' + '</th>' + '<th>' + res.data.inspected + '</th>'
                    + '<th>' + '未验收项目数' + '</th>' + '<th>' + res.data.wrongInspected + '</th>'
                    + '<th>' + '已完工未验收数' + '</th>' + '<th>' + res.data.finished + '</th>'
                $("#type-header").append(str)
            }
        }
    })
}


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

// 表头
var proData = ["项目名称", "项目类型", "开始时间", "结束时间"]
var getTheaddData = function () {
    //$.ajax({
    //    url: baseurl + '/pms/flowStatus/list/auth',
    //    type: 'GET',
    //    data: {},
    //    success: function (res) {
    //
    //    }
    //})
    //for (var i = 0; i < proData.length; i++) {
    //    var str = "<th class='xiangmu'>" + proData[i] + "</th>"
    //    $("#tab-header").append(str)
    //}

     $.ajax({
         url:baseurl+'/pms/projectPlan/flowStatus',
         type:'GET',
         dataType:'JSON',
         data:{},
         success:function(res){
            console.log(res)
             if(res.code==200){
                 data=res.data
                 var headStr = []
                 for(var i = 0;i<data.length;i++){
                     if (data[i].isAsrs == 1) {
                        headStr.push(data[i].name)
                    }
                 }
                 proData = proData.concat(headStr)
                 // 表头
                 for(var i = 0;i<proData.length;i++){
                     var str = "<th class='xiangmu'>"+proData[i]+"</th>"
                     $("#tab-header").append(str)
                 }
             }
         },
         })
}

/*****************************************************************************************************************************************************************************/
var getThbodyData = function () {
    $.ajax({
        url: baseurl + '/pms/projectPlan/toFront/common',
        type: 'GET',
        dataType: 'JSON',
        data: {},
        success: function (res) {
            if (res.code == 200) {
                console.log(res)
                data = res.data
                // 判断时间是否有null  有null的改为 ""
                for (var i = 0; i < data.length; i++) {
                    var dataNode = data[i].projectPlans
                    for (var j = 0; j < dataNode.length; j++) {
                        var dataNull = dataNode[j]
                        for (var k in dataNull) {
                            dataNull[k] = dataNull[k] === null ? "" : dataNull[k]
                        }
                    }
                    data[i].presaleAmt = data[i].presaleAmt === null ? "" : data[i].presaleAmt;
                    data[i].plandeAmt = data[i].plandeAmt === null ? "" : data[i].plandeAmt;
                    data[i].planinAmt = data[i].planinAmt === null ? "" : data[i].planinAmt;
                    data[i].realdeAmt = data[i].realdeAmt === null ? "" : data[i].realdeAmt;
                    data[i].realinAmt = data[i].realinAmt === null ? "" : data[i].realinAmt;
                }
                // 表身填充
                $('#tab-body').empty()
                for (var i = 0; i < data.length; i++) {
                    var node = data[i].projectPlans
                    for (var j = 0; j < node.length; j++) {
                        var dataNull = node[j]
                        for (var k in dataNull) {
                            dataNull[k] = dataNull[k] === null ? "" : dataNull[k]
                        }
                    }
                    str = ''
                    for (var j = 0; j < node.length; j++) {
                        var nodeName = node[j].flowId$ // 节点名称
                        var nodeEndTime = node[j].endTime$.substring(0, 10)
                        var nodeRealStartTime = node[j].realEndTime$.substring(0, 10)
                        str1 = '<td class="normal">' + '<p>' + nodeEndTime + '</p>' + '<p>' + nodeRealStartTime + '</p>' + '</td>'
                        str = str + str1
                    }
                    var str2 = '<tr id="row' + i + '" class="row">'
                        + '<th class="projects">' + data[i].projectName + '</th>'
                        + '<th class="projects">' + data[i].projectType + '</th>'
                        //+ '<td class="nor-mal">' + data[i].presaleAmt + '</td>'
                        + '<td class="nor-mal">' + '<p>' + data[i].projectStartTime.substring(0, 10) + '</p>' + '</td>'
                        + '<td class="nor-mal">' + '<p>' + data[i].projectEndTime.substring(0, 10) + '</p>' + '</td>'
                    var str9 = '<td class="normal">' + '<p>' + data[i].plandeAmt + '</p>' + '<p>' + data[i].realdeAmt + '</p>' + '</td>'
                        + '<td class="normal">' + '<p>' + data[i].planinAmt + '</p>' + '<p>' + data[i].realinAmt + '</p>' + '</td>'
                    str9 = ''
                    var str3 = str2 + str + str9 + '</tr>'
                    $('#tab-body').append(str3)
                    //var deAmt = data[i].plandeAmt - data[i].realdeAmt
                    //if (deAmt < 0) {
                    //    $("#tab-body").find('tr').eq(i).find("td").eq(14).attr("style", "background:#CC3333");
                    //} else {
                    //    $("#tab-body").find('tr').eq(i).find("td").eq(14).attr("style", "background:#009966");
                    //}
                    //var inAmt = data[i].planinAmt - data[i].realinAmt
                    //if (inAmt < 0) {
                    //    $("#tab-body").find('tr').eq(i).find("td").eq(15).attr("style", "background:#CC3333 ");
                    //} else {
                    //    $("#tab-body").find('tr').eq(i).find("td").eq(15).attr("style", "background:#009966");
                    //}
                }
                var dataLen = data.length
                for (var t = 0; t < dataLen; t++) {
                    var nodes = data[t].projectPlans
                    for (var k in data[t].projectPlans) {
                        var k = parseInt(k)
                        // 项目节点实际结束时间
                        var realEndTime$ = data[t].projectPlans[k].realEndTime$.substring(0, 10)
                        // 项目节点计划结束时间
                        var endTime$ = data[t].projectPlans[k].endTime$.substring(0, 10)
                        var myDate = new Date()
                        var nowDay = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate()
                        var eDay = new Date(endTime$)
                        // 判断realEndTime$.substring(0,10) 是否为空
                        if (realEndTime$ === "") {
                            // 计划日期与系统日期比较
                            var ExDay = eDay.getTime() - myDate.getTime()

                            if (ExDay > -86400000 && ExDay < 86400000) {
                                // 三天内
                                $("#tab-body").find('tr').eq(t).find("td").eq(k + 2).attr("style", "background:#CC9933");

                            } else if (ExDay < -86400000) {
                                // 超过三天
                                $("#tab-body").find('tr').eq(t).find("td").eq(k + 2).attr("style", "background:#CC3333");

                            } else if (ExDay > 86400000) {
                                // 不到三天
                                $("#tab-body").find('tr').eq(t).find("td").eq(k + 2).attr("style", "background:#2e4e7e")
                            }
                        } else {
                            function tab(date1, date2) {
                                var oDate1 = new Date(date1);
                                var oDate2 = new Date(date2);
                                var x = oDate1.getTime() - oDate2.getTime()
                                if (x >= 0) {
                                    $("#tab-body").find('tr').eq(t).find("td").eq(k + 2).attr("style", "background:#009966")
                                } else {
                                    $("#tab-body").find('tr').eq(t).find("td").eq(k + 2).attr("style", "background:#CC3333");
                                }
                            }

                            tab(endTime$, realEndTime$,);
                        }
                    }
                }
            }
        }
    })
}

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




 src/main/webapp/views/index_datashow3.html

New file
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目进度表</title>
    <link rel="stylesheet" href="../static/css/style3.css">
    <script src="../static/js/config.js"></script>
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="../static/js/clock.js"></script>
<!--    <script src="../static/js/tableData.js"></script>-->
<!--    <script src="../static/js/tableData2.js"></script>-->
    <script src="../static/js/tableData3.js"></script>
    <script src="../static/js/projectShow2.js"></script>
    <script src="../static/js/cols.js"></script>
</head>
<body>
    <div id="root">
        <!-- 标题 -->
        <div id="top-tab">
            <h1>集成项目进度表</h1>

            <img src="../static/image/logo-bar.png" alt="logo">
            <div id="showTime">
				
            </div>
        </div>
        <table id="proType" cellspacing="0" cellpadding="0">
            <thead id="type-header"></thead>
        </table>
        <div style="overflow-x: scroll">
            <table id="main-tab" cellspacing="0" cellpadding="0">
                <!-- 表头 -->
                <thead id="tab-header"></thead>
                <!-- 表身体 -->
                <tbody id="tab-body"></tbody>
                <!-- 注意事项 -->
                <tr><th>注意事项</th></tr>
            </table>
        </div>
    </div>
    <div id="details">
        <div class="head">
            <h2></h2>
            <button id="close" type="button" style="float: right;">关 闭</button>
        </div>
        <table id="details-tab-left" cellspacing="0" cellpadding="0"></table>
        <table id="details-tab" cellspacing="0" cellpadding="0">
            <thead>
            </thead>
            <tbody>
            </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")
    })
    $("#closee").on("click",function(){
        $("#tips").attr("style","display:none")
    })
</script>

 src/main/webapp/views/testview/testview.html

@@ -2,77 +2,18 @@
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            /*overflow: hidden;*/
        }
        body {
            background-color: #fcc499;
            width: 100%;
            min-height: 300px;
            height: auto !important;
            height: 300px
        }
        .header {
            height: 8rem;
            width: 100%;
            background-color: #3F3F3F
        }
        .main {
            width: 100%;
            overflow: scroll;
            background-color: #7a8191;

        }
        .kuai {
            height: 100%;
            width: 20%;
            display: inline-block;
            background-color: #2D93CA;
        }
        .zuo {
            float: left;
        }
        .you {
            float: right;
        }
        .th  {
            height: 6rem;
            width: 100px;
            border: 1px solid #000000;
        }
        .td {
            height: 8rem;
            width: 15rem;
            border: 1px solid #000000;
        }



        .float {
            left: 0;
            top: 50px;
            position: absolute;
            background-color: #fff;
            width: 92%;
            margin-left: 4%;
            min-height: 300px;
            height: auto !important;
            height: 300px;
            box-shadow: 0px 0px 20px #888888;
        }
    </style>
    <title>项目进度表</title>
    <link rel="stylesheet" href="../../static/css/style4.css">
</head>
<body>
    <div class="header">
        <div class="kuai zuo">left</div>
        <div class="kuai you">right</div>
    </div>
    <div class="main">
        <table border="1" rules="all" style="width: 300%;height:200px; text-align:center">
            <thead>
    <div id="root">
        <div class="header">
            <div class="kuai zuo">left</div>
            <div class="kuai you">right</div>
        </div>
        <div class="main">
            <table border="1" rules="all" style="width: 300%;height:200px; text-align:center">
                <thead>
                <tr>
                    <th class="th">一</th>
                    <th class="th">二</th>
@@ -85,8 +26,8 @@
                    <th class="th">九</th>
                    <th class="th">十</th>
                </tr>
            </thead>
            <tbody>
                </thead>
                <tbody>
                <tr>
                    <td class="td">1</td>
                    <td class="td">2</td>
@@ -208,11 +149,27 @@
                <!--    <td class="td">10</td>-->
                <!--</tr>-->

            </tbody>
                </tbody>

        </table>
            </table>
        </div>
        <div class="float">
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191">1</li>
            <li style="height: 100px;background-color: #7a8191;margin-bottom: 100px">1</li>
        </div>
    </div>
    <div class="float"></div>


</body>
</html>