|
|
@@ -4,188 +4,51 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
- <title>MES工位加工记录统计大屏</title>
|
|
|
- <link rel="stylesheet" href="${ctxStatic}/screen/oprno-record-screen.css?v=202506244">
|
|
|
- <style>
|
|
|
- .screen-header .header-left-tools {
|
|
|
- justify-self: start;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .scope-tab-group {
|
|
|
- display: inline-flex;
|
|
|
- padding: 4px;
|
|
|
- border: 1px solid rgba(0, 143, 253, 0.34);
|
|
|
- border-radius: 6px;
|
|
|
- background: rgba(4, 20, 45, 0.78);
|
|
|
- box-shadow: inset 0 0 24px rgba(0, 143, 253, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .scope-tab {
|
|
|
- min-width: 112px;
|
|
|
- height: 40px;
|
|
|
- padding: 0 16px;
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- background: transparent;
|
|
|
- color: #9ad8ff;
|
|
|
- font-size: 18px;
|
|
|
- font-family: inherit;
|
|
|
- cursor: pointer;
|
|
|
- transition: color 0.2s, background 0.2s, box-shadow 0.2s;
|
|
|
- }
|
|
|
-
|
|
|
- .scope-tab.is-active {
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(180deg, rgba(64, 222, 120, 0.32), rgba(0, 143, 253, 0.24));
|
|
|
- box-shadow: 0 0 14px rgba(64, 222, 120, 0.22);
|
|
|
- }
|
|
|
-
|
|
|
- .scope-tab:not(.is-active):hover {
|
|
|
- color: #d8f4ff;
|
|
|
- background: rgba(0, 143, 253, 0.16);
|
|
|
- }
|
|
|
-
|
|
|
- .main-grid-wrap {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: stretch;
|
|
|
- height: 770px;
|
|
|
- margin-top: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .main-grid-wrap .side-config-panel {
|
|
|
- width: 470px;
|
|
|
- flex-shrink: 0;
|
|
|
- overflow: hidden;
|
|
|
- transition: width 0.28s ease, opacity 0.28s ease, margin 0.28s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .main-grid-wrap.is-folded .side-config-panel {
|
|
|
- width: 0;
|
|
|
- opacity: 0;
|
|
|
- margin-right: 0;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
-
|
|
|
- .config-fold-trigger {
|
|
|
- position: relative;
|
|
|
- z-index: 6;
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 24px;
|
|
|
- margin: 0 10px 0 0;
|
|
|
- align-self: center;
|
|
|
- height: 136px;
|
|
|
- padding: 0;
|
|
|
- border: 1px solid rgba(0, 246, 255, 0.38);
|
|
|
- border-radius: 0 6px 6px 0;
|
|
|
- background: linear-gradient(180deg, rgba(5, 37, 78, 0.96), rgba(5, 25, 54, 0.92));
|
|
|
- box-shadow: inset 0 0 20px rgba(0, 143, 253, 0.14), 0 0 16px rgba(0, 143, 253, 0.18);
|
|
|
- cursor: pointer;
|
|
|
- color: #00f6ff;
|
|
|
- font-size: 22px;
|
|
|
- font-family: inherit;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .config-fold-trigger:hover {
|
|
|
- border-color: rgba(64, 222, 120, 0.55);
|
|
|
- color: #40de78;
|
|
|
- box-shadow: inset 0 0 24px rgba(64, 222, 120, 0.12), 0 0 18px rgba(64, 222, 120, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .config-fold-trigger .fold-icon {
|
|
|
- display: block;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 1;
|
|
|
- transition: transform 0.28s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .config-fold-trigger .fold-label {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- writing-mode: vertical-rl;
|
|
|
- text-orientation: mixed;
|
|
|
- letter-spacing: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .main-grid-wrap.is-folded .config-fold-trigger .fold-icon {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
-
|
|
|
- .main-grid-wrap .data-panel-main {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <title>GP12不良问题点看板</title>
|
|
|
+ <link rel="stylesheet" href="${ctxStatic}/screen/gp12-issue-screen.css?v=202607154">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="screen-page">
|
|
|
<img class="bg" src="${ctxStatic}/screen/imgs/bg3.png" alt="">
|
|
|
<div class="screen-content">
|
|
|
<div class="screen-header">
|
|
|
- <div class="header-left-tools">
|
|
|
- <div class="scope-tab-group" id="scopeSwitch">
|
|
|
- <button type="button" class="scope-tab is-active" data-scope="all">全部产量</button>
|
|
|
- <button type="button" class="scope-tab" data-scope="today">今日产量</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="screen-title-new" id="screenTitle"></div>
|
|
|
+ <div></div>
|
|
|
+ <div class="screen-title-new" id="screenTitle">GP12不良问题点看板</div>
|
|
|
<div class="screen-time" id="screenTime"></div>
|
|
|
</div>
|
|
|
- <div class="summary-row">
|
|
|
- <div class="summary-item"><div class="summary-label">工位数量</div><div class="summary-value" id="oprnoTotal">0</div></div>
|
|
|
- <div class="summary-item"><div class="summary-label" id="recordTotalLabel">全部生产数量</div><div class="summary-value" id="recordTotal">0</div></div>
|
|
|
- <div class="summary-item"><div class="summary-label">最高工位</div><div class="summary-value" id="maxOprno">--</div></div>
|
|
|
- </div>
|
|
|
- <div class="main-grid-wrap" id="mainGrid">
|
|
|
- <div class="side-config-panel" id="sideConfigPanel">
|
|
|
- <div class="panel control-panel">
|
|
|
- <div class="panel-title">工位号</div>
|
|
|
- <textarea class="oprno-input" id="oprnoInput"></textarea>
|
|
|
- <div class="input-row">
|
|
|
- <input class="add-input" id="addOprno" type="text" placeholder="新增工位号">
|
|
|
- <button type="button" class="screen-btn primary" id="addBtn">添加</button>
|
|
|
- </div>
|
|
|
- <div class="action-row">
|
|
|
- <button type="button" class="screen-btn primary" id="queryBtn">查询</button>
|
|
|
- <button type="button" class="screen-btn" id="clearBtn">清空</button>
|
|
|
- </div>
|
|
|
- <div class="tag-list" id="tagList"></div>
|
|
|
- <div class="hint">支持逗号、空格、换行分隔工位号。</div>
|
|
|
- </div>
|
|
|
+ <div class="main-panel">
|
|
|
+ <div class="panel-title">
|
|
|
+ 不良问题点清单
|
|
|
+ <span class="page-indicator" id="pageIndicator">第 1 / 1 页</span>
|
|
|
</div>
|
|
|
- <button type="button" class="config-fold-trigger" id="panelCollapseBtn" aria-expanded="true" title="收起工位配置">
|
|
|
- <span class="fold-icon">‹</span>
|
|
|
- <span class="fold-label">收起</span>
|
|
|
- </button>
|
|
|
- <div class="panel data-panel data-panel-main">
|
|
|
- <div class="panel-title" id="dataPanelTitle">各工位全部生产数量</div>
|
|
|
- <div class="chart-box" id="recordChart"></div>
|
|
|
- <div class="table-wrap">
|
|
|
- <table class="record-table">
|
|
|
- <thead><tr><th>序号</th><th>工位</th><th id="recordCountHeader">全部生产数量</th></tr></thead>
|
|
|
- <tbody id="recordBody"></tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
+ <div class="table-wrap">
|
|
|
+ <table class="issue-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th class="col-seq">序号</th>
|
|
|
+ <th class="col-item">检验项目</th>
|
|
|
+ <th class="col-standard">判定标准</th>
|
|
|
+ <th class="col-method">检验方法</th>
|
|
|
+ <th class="col-ng">NG图示</th>
|
|
|
+ <th class="col-ok">OK图示</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="issueBody" class="is-visible"></tbody>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
|
|
|
-<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
|
|
|
<script>
|
|
|
- window.screenOprnoConfig = {
|
|
|
- title: "华为项目加工记录统计大屏",
|
|
|
- defaultOprnos: ["OP320", "OP330", "OP340", "OP350", "OP360", "OP370", "OP380", "OP390", "OP400", "OP410"]
|
|
|
+ window.gp12IssueConfig = {
|
|
|
+ title: "GP12不良问题点看板",
|
|
|
+ pageSize: 4,
|
|
|
+ carouselInterval: 8000,
|
|
|
+ refreshInterval: 60000,
|
|
|
+ apiUrl: "${ctx}/mes/mesProduct/screenGp12IssueList"
|
|
|
};
|
|
|
</script>
|
|
|
-<script src="${ctxStatic}/screen/oprno-record-screen.js?v=202506244"></script>
|
|
|
+<script src="${ctxStatic}/screen/gp12-issue-screen.js?v=202607153"></script>
|
|
|
</body>
|
|
|
</html>
|