|
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>MES 凹面車削系統 最終完整版</title>
|
|
<style>
|
|
:root {
|
|
--primary-blue: #1a73e8;
|
|
--success-green: #1e8e3e;
|
|
--danger-red: #d93025;
|
|
--warning-orange: #f9ab00;
|
|
--bg-gray: #f1f3f4;
|
|
--text-dark: #202124;
|
|
--border-color: #dadce0;
|
|
--header-gray: #9aa0a6;
|
|
}
|
|
|
|
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
|
body { font-family: -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif; background: #2c3e50; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; }
|
|
|
|
.device { width: 360px; height: 740px; background: #000; border-radius: 45px; padding: 12px; border: 4px solid #444; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
|
|
.screen { width: 100%; height: 100%; background: var(--bg-gray); border-radius: 35px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
|
|
|
|
/* AppBar */
|
|
.app-bar { background: var(--header-gray); padding: 22px 15px 12px; text-align: center; color: white; flex-shrink: 0; }
|
|
.app-bar h2 { margin: 0; font-size: 17px; font-weight: bold; }
|
|
|
|
.content { padding: 15px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
/* 01-1 機台列表 */
|
|
.card-machine { background: var(--success-green); color: white; padding: 16px; border-radius: 8px; text-align: center; cursor: pointer; font-size: 18px; font-weight: bold; margin-bottom: 8px; border: none; width: 100%; }
|
|
|
|
/* 01-3 掃描框 */
|
|
.scan-box { border: 2px dashed #70757a; border-radius: 8px; padding: 35px 10px; text-align: center; color: #70757a; font-size: 20px; cursor: pointer; background: white; margin-top: 10px; flex-shrink: 0; }
|
|
|
|
/* 01-4 & 01-9 資訊列表 */
|
|
.info-list { background: white; border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; }
|
|
.info-item { display: flex; flex-direction: column; padding: 10px 15px; border-bottom: 1px solid #eee; }
|
|
.info-item:last-child { border-bottom: none; }
|
|
.label { color: #70757a; font-size: 13px; margin-bottom: 2px; }
|
|
.value { color: var(--text-dark); font-size: 16px; font-weight: 600; }
|
|
.val-red { color: var(--danger-red); }
|
|
.val-purple { color: #af52de; }
|
|
|
|
/* 主按鈕區域 */
|
|
.action-area { padding: 10px 15px; background: white; border-top: 1px solid #eee; }
|
|
.btn-large { width: 100%; height: 65px; color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; letter-spacing: 4px; cursor: pointer; border: none; }
|
|
.btn-large.disabled { background: #ccc !important; opacity: 0.5; pointer-events: none; box-shadow: none !important; }
|
|
|
|
.btn-green { background: var(--success-green); box-shadow: 0 4px 10px rgba(30,142,62,0.3); }
|
|
.btn-orange { background: var(--warning-orange); box-shadow: 0 4px 10px rgba(249,171,0,0.3); }
|
|
|
|
/* 底部導覽按鈕 (五顆) */
|
|
.footer { display: flex; height: 60px; flex-shrink: 0; border-top: 1px solid #ddd; background: white; }
|
|
.btn-f { flex: 1; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; cursor: pointer; border: none; text-align: center; line-height: 1.2; padding: 5px; border-left: 1px solid rgba(255,255,255,0.2); }
|
|
.f-orange { background: var(--warning-orange); }
|
|
.f-red { background: var(--danger-red); }
|
|
.f-purple { background: #b39ddb; }
|
|
.f-blue { background: #4285f4; }
|
|
.f-gray { background: #bdc3c7; color: #fff; cursor: default; }
|
|
|
|
/* 彈窗 */
|
|
.overlay { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
|
|
.overlay.active { display: flex; }
|
|
.dialog { background: white; width: 100%; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; max-height: 85%; }
|
|
|
|
.page { display: none; flex-direction: column; height: 100%; }
|
|
.page.active { display: flex; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="device">
|
|
<div class="screen">
|
|
|
|
<div id="page-01-1" class="page active">
|
|
<div class="app-bar"><h2>凹面車削-選擇機台</h2></div>
|
|
<div class="content">
|
|
<button onclick="selectMachine('08')" class="card-machine">車削機台 08</button>
|
|
<button onclick="selectMachine('01')" class="card-machine">車削機台 01</button>
|
|
<button onclick="selectMachine('02')" class="card-machine">車削機台 02</button>
|
|
<button onclick="selectMachine('03')" class="card-machine">車削機台 03</button>
|
|
<button onclick="selectMachine('04')" class="card-machine">車削機台 04</button>
|
|
</div>
|
|
<div class="footer"><div class="btn-f f-blue" style="width:100%; font-size: 16px;">取消</div></div>
|
|
</div>
|
|
|
|
<div id="page-scan" class="page">
|
|
<div class="app-bar"><h2>凹面車削-掃描工單</h2></div>
|
|
<div class="content">
|
|
<div style="text-align:center; padding: 5px; font-weight: bold; font-size: 18px; color: var(--primary-blue);" id="m-disp">AAT/機台08</div>
|
|
<div class="scan-box" onclick="triggerScan()">請掃描工單</div>
|
|
<div id="wo-result" style="display:none; text-align:center; font-size: 26px; font-weight: 900; margin-top: 15px; color: var(--danger-red); cursor:pointer;" onclick="toPage('page-01-4')">
|
|
A511-0123456789
|
|
</div>
|
|
</div>
|
|
<div class="action-area">
|
|
<button id="main-btn" class="btn-large disabled btn-green" onclick="handleMainAction()">開 工</button>
|
|
</div>
|
|
<div class="footer">
|
|
<div onclick="toPage('page-01-1')" class="btn-f f-orange">更換機台</div>
|
|
<div class="btn-f f-red">HOLD</div>
|
|
<div class="btn-f f-purple">換人</div>
|
|
<div class="btn-f f-gray">取消</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-01-4" class="page">
|
|
<div class="app-bar"><h2>工單詳情</h2></div>
|
|
<div class="content">
|
|
<div style="color:var(--danger-red); font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 5px;">A511-0123456789</div>
|
|
<div class="info-list">
|
|
<div class="info-item"><span class="label">工作狀態</span><span id="det-status" class="value val-red">未開工</span></div>
|
|
<div class="info-item" onclick="openProg()" style="cursor:pointer; background:#f9f9f9;"><span class="label">凹面車削 (點擊查看目前站點)</span><span id="det-step" class="value val-red">未開工 ></span></div>
|
|
<div class="info-item"><span class="label">客戶</span><span class="value">元新-民族</span></div>
|
|
<div class="info-item"><span class="label">料號 / 顏色</span><span class="value">FKMK5440041 / <span class="val-purple">紫色(Violet)</span></span></div>
|
|
<div class="info-item"><span class="label">電漿加水</span><span class="value">電漿</span></div>
|
|
<div class="info-item"><span class="label">鏡片規格 BC/CT/DIA/Power</span><span class="value">2.00 / 0.00 / 11.00 / 0.50</span></div>
|
|
<div class="info-item"><span class="label">備註欄位</span><span class="value">OZ6.0</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div onclick="resetSystem(); toPage('page-scan');" class="btn-f f-red" style="width:50%">刪除</div>
|
|
<div onclick="toPage('page-scan')" class="btn-f f-blue" style="width:50%">返回</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-01-6" class="page">
|
|
<div class="app-bar"><h2>凹面車削-開工確認</h2></div>
|
|
<div class="content" style="justify-content: center;">
|
|
<div style="color:var(--danger-red); font-size: 26px; font-weight: bold; text-align: center; margin-bottom: 25px;">A511-0123456789</div>
|
|
<div style="background: var(--success-green); padding: 45px 20px; border-radius: 12px; color: white; text-align: center;">
|
|
<div style="font-size: 18px; margin-bottom: 5px;">AAT</div>
|
|
<div id="start-time-ui" style="font-size: 13px; margin-bottom: 15px; opacity: 0.8;"></div>
|
|
<div style="font-size: 48px; font-weight: 900;">開工</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div onclick="confirmStart()" class="btn-f f-blue" style="background:var(--success-green); width:100%; font-size: 18px;">確 認 開 工</div>
|
|
<div onclick="toPage('page-scan')" class="btn-f f-blue">取 消</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page-01-10" class="page">
|
|
<div class="app-bar"><h2>凹面車削-系統回報</h2></div>
|
|
<div class="content" style="justify-content: center;">
|
|
<div style="color:var(--danger-red); font-size: 26px; font-weight: bold; text-align: center; margin-bottom: 25px;">A511-0123456789</div>
|
|
<div style="background: var(--warning-orange); padding: 45px 20px; border-radius: 12px; color: white; text-align: center;">
|
|
<div style="font-size: 18px; margin-bottom: 5px;">AAT</div>
|
|
<div id="report-time-ui" style="font-size: 13px; margin-bottom: 15px; opacity: 0.8;"></div>
|
|
<div style="font-size: 48px; font-weight: 900;">報工完工</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div onclick="resetSystem(); toPage('page-scan');" class="btn-f f-blue" style="background:var(--success-green); width:100%; font-size: 18px;">確 認 完 工</div>
|
|
<div onclick="toPage('page-scan')" class="btn-f f-blue">取 消</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dlg-info" class="overlay">
|
|
<div class="dialog">
|
|
<div style="background: var(--success-green); color: white; padding: 15px; text-align: center; font-weight: bold;">工單資訊</div>
|
|
<div class="info-list" style="border:none;">
|
|
<div class="info-item"><span class="label">工單號碼</span><span class="value">A511-0123456789</span></div>
|
|
<div class="info-item"><span class="label">客戶</span><span class="value">元新-民族</span></div>
|
|
<div class="info-item"><span class="label">顏色</span><span class="value val-purple">紫色(Violet)</span></div>
|
|
<div class="info-item"><span class="label">規格</span><span class="value">2.00 / 0.00 / 11.00 / 0.50</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dlg-prog" class="overlay">
|
|
<div class="dialog">
|
|
<div class="app-bar" style="background: var(--primary-blue);"><h2>目前製程進度</h2></div>
|
|
<div style="flex: 1; overflow-y: auto; padding: 10px;">
|
|
<div class="info-list" id="prog-list">
|
|
</div>
|
|
</div>
|
|
<div onclick="closeProg()" style="padding: 15px; text-align: right; color: var(--primary-blue); font-weight: bold; cursor: pointer; border-top: 1px solid #eee;">返回</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let isStarted = false; // 關鍵：標記是否已執行過「確認開工」
|
|
|
|
function toPage(id) {
|
|
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
|
document.getElementById(id).classList.add('active');
|
|
const now = new Date().toLocaleString('zh-TW', {hour12:false});
|
|
if(id === 'page-01-6') document.getElementById('start-time-ui').innerText = now;
|
|
if(id === 'page-01-10') document.getElementById('report-time-ui').innerText = now;
|
|
}
|
|
|
|
function selectMachine(num) {
|
|
document.getElementById('m-disp').innerText = `AAT/機台${num}`;
|
|
resetSystem();
|
|
toPage('page-scan');
|
|
}
|
|
|
|
function triggerScan() {
|
|
// 1. 顯示 01-2 彈窗
|
|
document.getElementById('dlg-info').classList.add('active');
|
|
|
|
setTimeout(() => {
|
|
// 2. 關閉彈窗
|
|
document.getElementById('dlg-info').classList.remove('active');
|
|
|
|
// 3. 顯示單號
|
|
document.getElementById('wo-result').style.display = 'block';
|
|
|
|
// 4. 判斷狀態，改變按鈕文字與顏色
|
|
const mainBtn = document.getElementById('main-btn');
|
|
mainBtn.classList.remove('disabled');
|
|
|
|
if (!isStarted) {
|
|
// 第一次刷單 -> 準備開工
|
|
mainBtn.innerText = "開 工";
|
|
mainBtn.className = "btn-large btn-green";
|
|
} else {
|
|
// 第二次刷單 -> 準備完工
|
|
mainBtn.innerText = "完 工";
|
|
mainBtn.className = "btn-large btn-orange";
|
|
}
|
|
}, 800);
|
|
}
|
|
|
|
function handleMainAction() {
|
|
if (!isStarted) {
|
|
toPage('page-01-6'); // 前往開工確認頁
|
|
} else {
|
|
toPage('page-01-10'); // 前往完工報工頁
|
|
}
|
|
}
|
|
|
|
function confirmStart() {
|
|
isStarted = true;
|
|
// 更新工單詳情頁面 (01-4 變成加工中)
|
|
document.getElementById('det-status').innerText = "加工中 (AAT)";
|
|
document.getElementById('det-status').className = "value val-purple";
|
|
document.getElementById('det-step').innerText = "加工中 >";
|
|
document.getElementById('det-step').className = "value val-purple";
|
|
|
|
// 重要：確認後回到首頁，必須清除當前刷單結果，並將按鈕回歸禁用
|
|
document.getElementById('wo-result').style.display = 'none';
|
|
const mainBtn = document.getElementById('main-btn');
|
|
mainBtn.innerText = "開 工";
|
|
mainBtn.className = "btn-large btn-green disabled";
|
|
|
|
toPage('page-scan');
|
|
}
|
|
|
|
function resetSystem() {
|
|
isStarted = false;
|
|
document.getElementById('wo-result').style.display = 'none';
|
|
const mainBtn = document.getElementById('main-btn');
|
|
mainBtn.innerText = "開 工";
|
|
mainBtn.className = "btn-large btn-green disabled";
|
|
|
|
document.getElementById('det-status').innerText = "未開工";
|
|
document.getElementById('det-status').className = "value val-red";
|
|
document.getElementById('det-step').innerText = "未開工 >";
|
|
document.getElementById('det-step').className = "value val-red";
|
|
}
|
|
|
|
function openProg() {
|
|
const list = document.getElementById('prog-list');
|
|
const statusText = isStarted ? "加工中" : "未開工";
|
|
const statusClass = isStarted ? "val-purple" : "val-red";
|
|
|
|
const steps = ["凹面車削", "半成品BC檢驗", "黏著膠片", "凸面車削", "凸面拋光", "脫膠清洗", "Edge研磨", "研磨後檢驗", "BC成品檢驗"];
|
|
list.innerHTML = steps.map((s, i) => `
|
|
<div class="info-item">
|
|
<span class="value">${s}</span>
|
|
<span class="${i===0 ? statusClass : 'val-red'}" style="font-size:12px;">${i===0 ? statusText : '未開工'}</span>
|
|
</div>
|
|
`).join('');
|
|
|
|
document.getElementById('dlg-prog').classList.add('active');
|
|
}
|
|
|
|
function closeProg() { document.getElementById('dlg-prog').classList.remove('active'); }
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|