|
|
@@ -0,0 +1,232 @@
|
|
|
+<!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>
|
