安东尼奥发货看板显示数据定时刷新，列字段间距修改、每页显示15条数据

yxj

2023-12-27 81805eb1249693619efc9fa4a3efcea26444f8cb

 GlobalSituation2.html

@@ -19,22 +19,26 @@
    <script src="js/jquery.qrcode.min.js"></script>
    <script src="js/webConfig.js"></script>
    <style>
        /*body {
      /*  body {
            padding-left: 50px;
            padding-right: 50px;
            font-family: KaiTi;*/
        /*background-color: #031f52;*/
        /*}*/

        body {
            font-family: KaiTi;
            background-image: url(../KanBanUI/img/bj2.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /*background-attachment: fixed;*/
            height: 50%;
            background-color: #031f52;
        }
*/
        body {
            padding :0px;
            font-family: KaiTi;
            height: 100%;
            width: 100%;
        }
        .bj {
            background: url(../KanBanUI/img/bj2.jpg) no-repeat center center; /*加载背景图：图片地址 不平铺 */
            background-size: cover; /*让背景图基于容器大小伸缩 */
            background-attachment: fixed;
            height: 100%;
            width: 100%;
            position: absolute;
        }

        /*.box:after {
@@ -43,17 +47,18 @@
            position: fixed;
            top: 0;
            left: 0;
            background: url(../KanBanUI/img/bj2.jpg);*/ /*加载背景图：图片地址 不平铺 */
        /*background-size: cover;*/ /* 让背景图基于容器大小伸缩 */
        /*background-attachment: fixed;*/ /* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
                    scroll 背景图片随着页面的滚动而滚动，这是默认的。
            background: url(../KanBanUI/img/bj2.jpg) no-repeat;*/ /*加载背景图：图片地址 不平铺 */
            /*background-size: cover;*/ /*让背景图基于容器大小伸缩 */
            /*background-attachment: fixed;
            background-attachment;*/ /*设置背景图像是否固定或者随着页面的其余部分滚动。*/
            /*     scroll 背景图片随着页面的滚动而滚动，这是默认的。
                    fixed 背景图片不会随着页面的滚动而滚动。
                    local 背景图片会随着元素内容的滚动而滚动。*/

        /*width: 100%;
            /*width: 100%;
            height: 100%;*/
        /*opacity: 0.1;*/
        /*z-index: -1;
            /*opacity: 0.1;*/
            /*z-index: -1;
        }*/

        .tr0 {
@@ -63,29 +68,31 @@
        }

        .tr1 {
            height: 600px;
            height: 700px;
            /*background-color: aquamarine;*/
            width: 100%
        }

        .col1 {
            width: 13%;
            width: 20%;
            /*background-color: #808080;*/
            /*background: rgb(0 104 255 / 23%);*/
            height: 100%;
            float: left;
            margin-right: 2%;
            /*margin-right: 2%;*/
            /*border: solid 1px #93c1de;*/
        }

        .col1-1 {
            width: 100%;
            height: 7%;
            /*background-color:#808080;*/
            /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/
            line-height: 300%;
        }

            .col1-1 p {
                font-size: 20PX;
                font-size: 30PX;
                text-align: center;
                height: 100%;
                /*padding-left: 5%;*/
@@ -94,8 +101,9 @@
        .col1-2 {
            width: 100%;
            height: 93%;
            font-size: 20px;
            font-size:30px;
            /*background-color: #865454;*/

        }

            .col1-2 p {
@@ -131,28 +139,24 @@
        }

        .col2 {
            width: 70%;
            /*background: rgb(0 104 255 / 23%);*/
            width: 60%;
            /*background-color: #c3c4c9;*/
            /*background: rgb(4 70 111 / 82%);*/
            height: 100%;
            float: left;
            margin-right: 2%;
        }

        .col2-1 {
            width: 100%;
            height: 100%;
            /*background-color: #865454;*/
            /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25 125 239 / 64%)), color-stop(100%,rgba(125,185,232,0)));*/
            /*border:solid 1px #0ddae8*/
        }

        .col2-1-p {
            width: 50%;
            height: 100%;
            /*background-color: #0d5974;*/
            margin: 0 auto;
            line-height: 100%;
            padding: 1% 10%;
            /*padding:1% 10%;*/
        }

            .col2-1-p p {
@@ -181,69 +185,74 @@
            width: 100%;
            height: 30%;
        }

        .col2-2-in-1-l {
            width: 17%;
        .col2-2-in-1-l-k {
            width: 19%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 6.5%;
            float: left;
        }
        .col2-2-in-1-l {
            width: 14%;
            height: 100%;
            /*background-color: #edc4c45e;*/
            padding-top: 10%;
            float: left;
        }

            .col2-2-in-1-l p {
                text-align: right;
                text-align: left;
                height: 10px;
            }

        .col2-2-in-1-c {
            width: 20%;
            width: 15.1%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 6.5%;
            /*background-color: #ede6c45e;*/
            padding-top: 10%;
            float: left;
        }

            .col2-2-in-1-c p {
                text-align: right;
                text-align: left;
                height: 10px;
            }

        .col2-2-in-1-r {
            width: 17%;
            width: 15.3%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 6.5%;
            /*background-color: #93a6b79c;*/
            padding-top: 10%;
            float: left;
        }

            .col2-2-in-1-r p {
                text-align: right;
                text-align: left;
                height: 10px;
            }

        .col2-2-in-1-r2 {
            width: 17%;
            width: 15.3%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 6.5%;
            /*background-color: #3d84c3a8;*/
            padding-top: 10%;
            float: left;
        }

            .col2-2-in-1-r2 p {
                text-align: right;
                text-align: left;
                height: 10px;
            }

        .col2-2-in-1-r3 {
            width: 18%;
            width: 21.3%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 6.5%;
            /*background-color: #75afe39c;*/
            padding-top: 10%;
            float: left;
        }

            .col2-2-in-1-r3 p {
                text-align: right;
                text-align: left;
                height: 10px;
            }

@@ -252,60 +261,65 @@
            height: 10%;
            /*background-color: #93a6b7;*/
        }

        .col2-2-in-2-l {
            width: 12%;
        .col2-2-in-2-l-k {
            width: 14.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            float: left;
        }
        .col2-2-in-2-l {
            width: 14.5%;
            height: 100%;
            /*background-color: #a6b6c496;*/
            float: left;
        }

            .col2-2-in-2-l p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-2-c {
            width: 20%;
            width: 13.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*background-color: #6aa0d08c;*/
            /*text-align:right*/
            float: left;
        }

            .col2-2-in-2-c p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-2-r {
            width: 18%;
            width: 15%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*background-color: #8393a159;*/
            /*text-align:right*/
            float: left;
        }

            .col2-2-in-2-r p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-2-r2 {
            width: 17%;
            width: 15.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*background-color: #a4cef3a1;*/
            /*text-align:right*/
            float: left;
        }

            .col2-2-in-2-r2 p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-2-r3 {
            width: 19%;
            width: 27%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*text-align:right*/
@@ -313,110 +327,169 @@
        }

            .col2-2-in-2-r3 p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-3 {
            width: 100%;
            height: 29%;
            height: 23%;
            /*background-color: #93a6b7;*/
            padding-top: 10%;
        }

        .col2-2-in-3-l {
            width: 31%;
        .col2-2-in-3-l-k {
            width: 33%;
            height: 100%;
            /*background-color: #93a6b7;*/
            float: left;
        }
        .col2-2-in-3-l {
            width: 20.5%;
            height: 100%;
            /*background-color: #8ba7c036;*/
            float: left;
        }

            .col2-2-in-3-l p {
                text-align: right;
                text-align: left;
                height: 10px;
                /*font-size: 20px;*/
            }

        .col2-2-in-3-r {
            width: 26%;
            width: 20%;
            height: 100%;
            /*background-color: #93a6b7;*/
            float: left;
        }

            .col2-2-in-3-r p {
                text-align: right;
                text-align: left;
                height: 10px;
                /*font-size: 20px;*/
            }

        .col2-2-in-3-r2 {
            width: 23%;
            width: 26.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            float: left;
        }

            .col2-2-in-3-r2 p {
                text-align: right;
                text-align: left;
                height: 10px;
                /*font-size: 20px;*/
            }

        .col2-2-in-4 {
            width: 100%;
            height: 5%;
            height: 6%;
            /*background-color: #93a6b7;*/
        }

        .col2-2-in-4-l {
            width: 15%;
        .col2-2-in-4-l-k {
            width: 17.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            float: left;
        }
        .col2-2-in-4-l {
            width: 21.5%;
            height: 100%;
            /*background-color: #93a6b75c;*/
            float: left;
        }

            .col2-2-in-4-l p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-4-c {
            width: 25%;
            width: 20%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*background-color: #8ec2f1a8;*/
            /*text-align:right*/
            float: left;
        }

            .col2-2-in-4-c p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-4-r {
            width: 24%;
            width: 19%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*background-color: #3174af5c;*/
            /*text-align:right*/
            float: left;
        }

            .col2-2-in-4-r p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }

        .col2-2-in-4-r2 {
            width: 23%;
            width: 22%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*background-color: #93a6b780;*/
            /*text-align:right*/
            float: left;
        }

            .col2-2-in-4-r2 p {
                text-align: right;
                text-align: left;
                font-size: 20px;
            }
        .col2-2-in-56-k {
            width: 100%;
            height: 5%;
            /*background-color: #73978c94;*/
        }
        .col2-2-in-56-kk {
            width: 27.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            float: left;
        }
        .col2-2-in-5-lc {
            width: 21.5%;
            height: 100%;
            /*background-color: #7ebef875;*/
            /*padding-top: 2%;*/
            float: left;
        }

            .col2-2-in-5-lc p {
                text-align: left;
                height: 10px;
                font-size: 20px;
            }
        .col2-2-in-5-cr {
            width: 19.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*padding-top: 2%;*/
            float: left;
        }

            .col2-2-in-5-cr p {
                text-align: left;
                font-size: 20px;
            }
        .col2-2-in-5-rr2 {
            width: 31.5%;
            height: 100%;
            /*background-color: #93a6b7;*/  
            /*padding-top: 2%;*/
            float: left;
        }

            .col2-2-in-5-rr2 p {
                text-align: left;
                font-size: 20px;
            }

@@ -426,104 +499,73 @@
            /*background-color: #93a6b7;*/
            /*padding-bottom:2%;*/
        }

        .col2-2-in-5-l {
            width: 17%;
        .col2-2-in-5-l-k {
            width: 9%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 5%;
            /*background-color: #72aad64a;*/
            float: left;
        }
      
        .col2-2-in-5-l {
            width: 20.5%;
            height: 100%;
            /*background-color: #2b353d4a;*/
            padding-top: 2%;
            float: left;
        }

            .col2-2-in-5-l p {
                text-align: right;
                text-align: left;
                height: 10px;
                /*font-size: 20px;*/
            }

        .col2-2-in-5-lc {
            width: 10%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*padding-top: 2%;*/
            float: left;
        }

            .col2-2-in-5-lc p {
                text-align: right;
                height: 10px;
                font-size: 20px;
            }

        .col2-2-in-5-c {
            width: 16%;
            width: 19.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 5%;
            /*background-color: #72aad64a;*/
            padding-top: 2%;
            float: left;
        }

            .col2-2-in-5-c p {
                text-align: right;
                text-align: left;
                height: 10px;
            }

        .col2-2-in-5-cr {
            width: 9%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*padding-top: 2%;*/
            float: left;
        }

            .col2-2-in-5-cr p {
                text-align: right;
                font-size: 20px;
            }

        .col2-2-in-5-rr2 {
            width: 9%;
            height: 100%;
            /*background-color: #93a6b7;*/
            /*padding-top: 2%;*/
            float: left;
        }

            .col2-2-in-5-rr2 p {
                text-align: right;
                font-size: 20px;
            }

        .col2-2-in-5-r {
            width: 15%;
            width: 19.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 5%;
            /*background-color: #2b353d4a;*/
            padding-top: 2%;
            float: left;
        }

            .col2-2-in-5-r p {
                text-align: right;
                text-align: left;
                height: 10px;
                /*font-size: 20px;*/
            }

        .col2-2-in-5-r2 {
            width: 14%;
            width: 31.5%;
            height: 100%;
            /*background-color: #93a6b7;*/
            padding-top: 5%;
            /*background-color: #72aad64a;*/
            padding-top: 2%;
            float: left;
        }

            .col2-2-in-5-r2 p {
                text-align: right;
                text-align: left;
                height: 10px;
                /*background-color: #93a6b7;*/
            }

        .col3 {
            width: 13%;
            width: 20%;
            /*background: rgb(0 104 255 / 23%);*/
            height: 100%;
            float: left;
@@ -538,7 +580,7 @@
        }

            .col3-1 p {
                font-size: 20PX;
                font-size: 30px;
                text-align: center;
                height: 100%;
                /*padding-left: 5%;*/
@@ -547,7 +589,7 @@
        .col3-2 {
            width: 100%;
            height: 93%;
            font-size: 20px;
            font-size:20px;
            /*background-color: #865454;*/
        }

@@ -595,9 +637,14 @@
            width: 100%;
            padding-top: 1%;
        }
        .tr2-1-k {
            width: 1%;
            height: 100%;
            float: left;
        }

        .tr2-1 {
            width: 24%;
            width: 23%;
            height: 100%;
            /*background: rgb(0 104 255 / 23%);*/
            float: left;
@@ -606,42 +653,43 @@

        .tr2-1-on {
            width: 100%;
            height: 10%;
            height: 15%;
            /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/
        }

            .tr2-1-on p {
                line-height:250%;
                text-align: left;
                padding-left: 2%;
                padding-left: 9%;
                font-size: 20px;
            }

        .tr2-1-in {
            width: 100%;
            height: 90%;
            height: 85%;
            /*background-color: #c7c5db;*/
        }

        .tr2-2 {
            width: 24%;
            width: 23%;
            height: 100%;
            /*background: rgb(0 104 255 / 23%);*/
            float: left;
            margin-left: 1%;
            margin-left: 2%;
            /*border: solid 1px #93c1de;*/
        }

        .tr2-3 {
            width: 24%;
            width: 23%;
            height: 100%;
            /*background: rgb(0 104 255 / 23%);*/
            float: left;
            margin-left: 1%;
            margin-left: 2.5%;
            /*border: solid 1px #93c1de;*/
        }

        .tr2-4 {
            width: 24%;
            width: 23%;
            height: 100%;
            /*background: rgb(0 104 255 / 23%);*/
            float: left;
@@ -1321,7 +1369,7 @@
    </script>
</head>
<body class="box">
    <div>
    <div class="bj">
        <div class="tr0">
            <div class="col2-1">
                <div class="col2-1-p">
@@ -1371,6 +1419,8 @@
                    </div>
                    <div class="col2-2-in">
                        <div class="col2-2-in-1">
                            <div class="col2-2-in-1-l-k">
                            </div>
                            <div class="col2-2-in-1-l">
                                <p id="zzp1_1">在制品:0</p>
                                <p id="cps_1">产品数:0</p>
@@ -1393,6 +1443,8 @@
                            </div>
                        </div>
                        <div class="col2-2-in-2">
                            <div class="col2-2-in-2-l-k">
                            </div>
                            <div class="col2-2-in-2-l">
                                <p>织造</p>
                            </div>
@@ -1416,6 +1468,8 @@
                            </div>
                        </div>
                        <div class="col2-2-in-3">
                            <div class="col2-2-in-3-l-k">
                            </div>
                            <div class="col2-2-in-3-l">
                                <p id="zzp1_6">在制品:0</p>
                                <p id="cps_6">产品数:0</p>
@@ -1430,6 +1484,8 @@
                            </div>
                        </div>
                        <div class="col2-2-in-4">
                            <div class="col2-2-in-4-l-k">
                            </div>
                            <div class="col2-2-in-4-l">
                                <p>
                                    拉幅定型
@@ -1451,32 +1507,43 @@
                                </p>
                            </div>
                        </div>
                        <div class="col2-2-in-5">
                            <div class="col2-2-in-5-l">
                                <p id="zzp1_9">在制品:0</p>
                                <p id="cps_9">产品数:0</p>
                        <div class="col2-2-in-56-k">
                            <div class="col2-2-in-56-kk">
                            </div>
                            <div class="col2-2-in-5-lc">
                                <p>
                                    预烫剪
                                </p>
                            </div>
                            <div class="col2-2-in-5-c">
                                <p id="zzp1_10">在制品:0</p>
                                <p id="cps_10">产品数:0</p>
                            </div>
                          
                            <div class="col2-2-in-5-cr">
                                <p>补刷</p>
                            </div>
                            <div class="col2-2-in-5-r">
                                <p id="zzp1_11">在制品:0</p>
                                <p id="cps_11">产品数:0</p>
                            </div>
                          
                            <div class="col2-2-in-5-rr2">
                                <p>
                                    印毛尖
                                </p>
                            </div>
                        </div>
                        <div class="col2-2-in-5">
                            <div class="col2-2-in-5-l-k">
                            </div>
                            <div class="col2-2-in-5-l">
                                <p id="zzp1_9">在制品:0</p>
                                <p id="cps_9">产品数:0</p>
                            </div>
                          
                            <div class="col2-2-in-5-c">
                                <p id="zzp1_10">在制品:0</p>
                                <p id="cps_10">产品数:0</p>
                            </div>
                           
                            <div class="col2-2-in-5-r">
                                <p id="zzp1_11">在制品:0</p>
                                <p id="cps_11">产品数:0</p>
                            </div>
                           
                            <div class="col2-2-in-5-r2">
                                <p id="zzp1_12">在制品:0</p>
                                <p id="cps_12">产品数:0</p>
@@ -1514,6 +1581,9 @@
            </div>
        </div>
        <div class="tr2">
            <div class="tr2-1-k">
              
            </div>
            <div class="tr2-1">
                <div class="tr2-1-on">
                    <p>生产负荷(km)</p>