优化固定第二列

VisualInspection/fwq/js/statistics/dept_check_statistics.js

@@ -63,31 +63,49 @@ function getdeptscore(starttime, endtime) {
     post_common_service(url, data_p, function(data) {
 
         //     var table = '';
+        if( (time_m + 1) * 4 * 60 < 1170 ) {
+            $('.datatable').css('width', (time_m + 1) * 4 * 60+125+11+'px' )
+            $('.datatable').css('margin-left', (1170 - (time_m + 1) * 4 * 60-125)/2 + 'px' )
 
+            $('.tb').eq(0).css('left', 247 + (1170 - (time_m + 1) * 4 * 60-125)/2+'px')
+        }
+        else {
+            $('.datatable').css('width', 1170+'px' )
+            $('.datatable').css('margin-left', 0 )
+            $('.tb').eq(0).css('left', 247+'px')
+        }
         //先确定表格标题
         var h_html = "<tr><th rowspan=2 style='width:30px'>序号</th><th rowspan=2 style='width:95px'>站名</th>";
         var h_html_t = "<tr>"
+        var h_html_end = '</tr>'
+        $("#table_h_left").html(h_html + h_html_end)
+        var h_html_r = '<tr>';
         for (var i = 0; i <= time_m; i++) {
-            h_html += "<th colspan=4 style='width:240px'>" + (moment(starttime).add(i, "month").format("MM月")) + "</th>";
+            h_html_r += "<th colspan=4 style='width:240px'>" + (moment(starttime).add(i, "month").format("MM月")) + "</th>";
             h_html_t += "<th style='width:60px'>考核分</th><th style='width:60px'>积分</th><th style='width:60px'>累计积分</th><th style='width:60px'>排名</th>"
         }
-        h_html += "</tr>";
+        h_html_r += "</tr>";
         h_html_t += "</tr>";
-        h_html += h_html_t;
+        // h_html += h_html_t;
+        $("#table_h_right").html(h_html_r + h_html_t)
+        $(".tb").eq(1).css("width", (time_m + 1) * 4 * 60)
 
-        $("#table_h").html(h_html)
-        $(".tb").css("width", (time_m + 1) * 4 * 60 + 125)
+        // $("#table_h").html(h_html)
+        // $("#table_h2").html(h_html2)
+        // $(".tb").css("width", (time_m + 1) * 4 * 60 + 125)
             // $("#table").css("width",time_m*4*30+80)
 
+        var lb_html = ""
         var b_html = ""
-
+        
 
         //再确定表格列
         if (Object.keys(data).length > 0) {
             var cc = 0;
             for (var i in data) {
                 var dd = data[i];
-                b_html += "<tr><td style='width:30px'>" + (++cc) + "</td><td style='width:95px'>" + dd[0].dept_name + "</td>"
+                lb_html += "<tr><td style='width:30px'>" + (++cc) + "</td><td style='width:95px'>" + dd[0].dept_name + "</td></tr>"
+                b_html += "<tr>"
                 var tt = moment(dd[0].time).diff(moment(starttime), 'month')
                 for (var op = 0; op < tt; op++) {
                     b_html += "<td style='width:60px'>-</td>"
@@ -110,12 +128,16 @@ function getdeptscore(starttime, endtime) {
                     b_html += "<td style='width:60px'>-</td>"
                     b_html += "<td style='width:60px'>-</td>"
                 }
+                b_html += "</tr>"
             }
-            b_html += "</tr>"
+            // b_html += "</tr>"
 
         }
 
-        $("#table").html(b_html);
+        $("#table_l_body").html(lb_html);
+        $("#table_r_body").html(b_html);
+        // $("#table").html(b_html);
+        $(".tb").eq(3).css("width", (time_m + 1) * 4 * 60)
 
     });
 

VisualInspection/fwq/view/statistics/dept_check_statistics.html

@@ -45,6 +45,9 @@
         margin-left: auto;
         margin-right: auto;
     }
+    #main_panel_body {
+        overflow: hidden;
+    }
 </style>
 
 <div class="container-fluid ">
@@ -73,15 +76,35 @@
 
 <div class="row">
 
-    <div class="datatable" data-checkable="false" style="margin-bottom: 0px; overflow-x: scroll;overflow-y: hidden; background: #ffffff00;" data-sortable="false">
+    <div class="datatable" data-checkable="false" style="margin-bottom: 0px;overflow-x: scroll;overflow-y: scroll;background: #ffffff00;position: relative;width: 1170px;float: left;" data-sortable="false">
 
-        <div class="tb" style="padding-right: 10px;">
-            <table border="0" class="table-head" width="100%" align="center" id="table_h">
+        <!-- <div class="tb" style="width: 125px;left: 247px;z-index: 102;height: 83px;top: 208px;position: fixed;">
+            <table border="0" class="table-head" width="125" align="center" id="table_h" style="height: inherit;">
             </table>
         </div>
-        <div class="tb" style="overflow-y: auto;height:500px;overflow-x: hidden;background:#fff">
+        <div class="tb" style="padding-right: 10px;width: 1440px;position: sticky;margin-left: 125px;z-index: 101;top: 0;margin-top: 0;">
+                <table border="0" class="table-head" width="100%" align="center" id="table_h2">
+                </table>
+            </div>
+        <div class="tb" style="height: 500px;background: rgb(255, 255, 255);width: 125px;position: sticky;left: 0;width: 125px;margin-left: 0;z-index: 101;">
             <table border="0" width="100%" align="center" id="table"></table>
-
+        </div>
+        <div class="tb" style="height: 500px;background: rgb(255, 255, 255);width: 1565px;position: absolute;left: 0;width: 1440px;margin-left: 125px;top: 83px;z-index: 100;">
+                <table border="0" width="100%" align="center" id="table2"></table>
+        </div> -->
+        <div class="tb" style="position: fixed;left:247px;top:208px;height: 83px;z-index: 102;width: 125px;">
+            <table border="0" class="table-head" width="100%" height="100%" align="center" id="table_h_left">
+            </table>
+        </div>
+        <div class="tb" style="position: sticky;top:0;z-index: 101;margin-left:125px;">
+            <table border="0" class="table-head" width="100%" align="center" id="table_h_right">
+            </table>
+        </div>
+        <div class="tb" style="max-height:500px;background:#fff;position: sticky;left: 0;z-index: 101;width: 125px;margin-left: 0;">
+            <table border="0" width="100%" align="center" id="table_l_body"></table>
+        </div>
+        <div class="tb" style="max-height:500px;background:#fff;position: absolute;left: 0;top:83px;z-index: 100;margin-left:125px;">
+            <table border="0" width="100%" align="center" id="table_r_body"></table>
         </div>
         <!-- 使用一个div来显示数据表格   -->
         <!-- <div id="scrollTable" style="height:500px;overflow:scroll;    margin-right: -10px;">