DK-MES-2.0
/
HEGII.gt.mes.dashboard


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/img/logo.png" />
    <link rel="bookmark" href="/img/logo.png" />
    <link rel="stylesheet" href="/plugins/bootstrap-4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="/Plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../DashBoard.css?v3" />
    <script src="/Plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/Plugins/xrequest/xrequest.min.js"></script>
    <title>东科软件</title>
</head>
<body class="bg-white p-0 dk-report">

    <!--实时缺陷记录-->
    <div class="container-fluid pt-1 p-0 box_1920_1080">
        <div class="position-absolute">
            <span id="实时缺陷加载" class="dk-report-loading" style="padding-left: 290px; font-size: 15px; color: #38dcff; font-weight: 700; float: left; padding-top: 40px;"></span>
            <!--<span id="页面跳转" class="dk-report-loading" style="padding-left: 1080px; font-size: 15px; color: #38dcff; font-weight: 700; float: left; margin-top: 40px; ">页面跳转倒计时</span>-->
        </div>
        <h4 class="text-center pb-2 dk-report-title" style="font-size: 60px; font-weight: bolder;color: #f8f9fa;">包装产品信息流看板</h4>
        <table class="table-hover  table-striped" style="font-size: 14px; width: 1866px; margin-left: 27px; margin-top: -10px;">
            <thead style="border: 1px solid #38dcff ">
                <tr style="height: 47px; width: 1866px;"> 
                    <td scope="col" class="text-right" id="sj" style="width: 130px; font-size: 25px; color: #f8f9fa;  ">2026/04/08 09:56</td>
                </tr>
            </thead>
        </table>
        <div class="box_body" style="display: flex; flex-direction: column;">

            <!--表格-->
            <div style="width:1850px;height:950px;display:flex;flex-direction:row;">
                <div style="width: 50%;height:950px;padding-right:20px;">
                    <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                        <thead>
                            <tr>
                                <td scope="col" class="text-center" style="font-size: 40px; color: #f8f9fa; ">产品型号</td>
                                <td scope="col" class="text-center" style="font-size: 40px; color: #f8f9fa; ">数量</td>
                            </tr>
                        </thead>
                        <tbody id="leftTableBody">
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div style="width: 50%; height: 950px; padding-right: 20px;">
                    <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                        <thead>
                            <tr>
                                <td scope="col" class="text-center" style="font-size: 40px; color: #f8f9fa; ">产品型号</td>
                                <td scope="col" class="text-center" style="font-size: 40px; color: #f8f9fa; ">数量</td>
                            </tr>
                        </thead>
                        <tbody id="rightTableBody">
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                            <tr class="tr_bg_light_warning" style="height:61px;">
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                                <td style="font-size: 30px; width: 11% ;font-weight:bold;"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="/Plugins/bootstrap-4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/Plugins/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
    <script src="/Plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/utils.js"></script>

    <script>
        $(document).ready(function () {
            // 页面加载后自动请求后台数据
            initData();
            doGetData = setInterval(function () { initData(); }, 5000);
            //刷新时间
            loadServerTime();
            doGetTime = setInterval(function () { loadServerTime(); }, 60000);
        });

        //取服务器时间
        function loadServerTime() {
            $.get('PackingData.ashx?m=fwq', function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    $('#sj').html(json["sj"]);
                }
            });
        }

        function initData() { 
            $.get('PackingData.ashx?m=s', function (data) {
                var json = JSON.parse(data);
                if (json["success"] == true) {
                    renderTable(json["rows"]);
                }
            }); 
        }
        // 渲染表格（极简版，左满右补）
        function renderTable(data) {
            if (!data) data = [];

            // 拿到所有行
            let leftRows = $("#leftTableBody tr");   // 左边
            let rightRows = $("#rightTableBody tr"); // 右边

            // 清空所有内容
            $("#leftTableBody td, #rightTableBody td").text("");

            // 循环数据，挨个赋值
            for (let i = 0; i < data.length; i++) {
                let item = data[i];
                let model = item.GOODSCODE || "";
                let qty = item.QTY || ""; 
                // 前12条 → 左边表格
                if (i < 12) {
                    leftRows.eq(i).find("td").eq(0).text(model);
                    leftRows.eq(i).find("td").eq(1).text(qty);
                }
                // 12条及以后 → 右边表格
                else {
                    let rightIndex = i - 12;
                    if (rightIndex < 12) { // 最多显示到右边第12行
                        rightRows.eq(rightIndex).find("td").eq(0).text(model);
                        rightRows.eq(rightIndex).find("td").eq(1).text(qty);
                    }
                }
            }
        }  
    </script>

    <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
    <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
    <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
</body>
</html>