320 lines
12 KiB
PHP
320 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>前台工位看板 - <?php echo htmlspecialchars($sysConfig['company_name'] ?? 'MES'); ?></title>
|
|
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/static/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/static/css/font-awesome.min.css">
|
|
<style>
|
|
:root {
|
|
--bg: #0f1923;
|
|
--card-bg: #1a2736;
|
|
--text: #c8d6e5;
|
|
--text-light: #8395a7;
|
|
--primary: #0abde3;
|
|
--success: #10ac84;
|
|
--warning: #feca57;
|
|
--danger: #ee5253;
|
|
--border: #2d3a4a;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 顶部导航栏 */
|
|
.topbar {
|
|
background: var(--card-bg);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.topbar .logo {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
.topbar .logo i { margin-right: 8px; }
|
|
.topbar .user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.topbar .user-info .clock {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: var(--text);
|
|
}
|
|
.topbar .user-info .user-name {
|
|
color: var(--primary);
|
|
}
|
|
.topbar .btn-back {
|
|
color: var(--text-light);
|
|
text-decoration: none;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
.topbar .btn-back:hover {
|
|
color: var(--primary);
|
|
border-color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 内容区 */
|
|
.content {
|
|
padding: 20px 24px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 概览卡片 */
|
|
.overview-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.overview-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
transition: transform 0.2s;
|
|
}
|
|
.overview-card:hover { transform: translateY(-2px); }
|
|
.overview-card .card-icon {
|
|
font-size: 32px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.overview-card .card-value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
.overview-card .card-label {
|
|
font-size: 13px;
|
|
color: var(--text-light);
|
|
}
|
|
.overview-card.total .card-value { color: var(--primary); }
|
|
.overview-card.total .card-icon { color: var(--primary); }
|
|
|
|
/* 工位网格 */
|
|
.station-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.station-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.station-card:hover {
|
|
border-color: var(--primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 20px rgba(10, 189, 227, 0.15);
|
|
}
|
|
.station-card.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.station-card .station-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
}
|
|
.station-card .station-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
.station-card .station-code {
|
|
font-size: 11px;
|
|
color: var(--text-light);
|
|
background: rgba(255,255,255,0.05);
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
}
|
|
.station-card .station-count {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
.station-card .station-label {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
}
|
|
.station-card .status-badge {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
.status-active { background: rgba(16, 172, 132, 0.2); color: var(--success); }
|
|
.status-inactive { background: rgba(238, 82, 83, 0.2); color: var(--danger); }
|
|
|
|
/* 底部 */
|
|
.footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: var(--text-light);
|
|
font-size: 12px;
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.overview-cards { grid-template-columns: repeat(2, 1fr); }
|
|
.station-grid { grid-template-columns: 1fr; }
|
|
.topbar { flex-direction: column; gap: 8px; }
|
|
}
|
|
|
|
/* 刷新动画 */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
.refreshing { animation: pulse 0.6s ease-in-out; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 顶部导航 -->
|
|
<div class="topbar">
|
|
<div>
|
|
<span class="logo">
|
|
<i class="fa fa-industry"></i>
|
|
<?php echo htmlspecialchars($sysConfig['company_name'] ?? 'MES'); ?> - 前台工位看板
|
|
</span>
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="clock" id="liveClock"><?php echo date('Y-m-d H:i:s'); ?></span>
|
|
<span><i class="fa fa-user"></i> <span class="user-name"><?php echo htmlspecialchars($user['emp_name']); ?></span></span>
|
|
<a href="<?php echo BASE_URL; ?>/Front/index" class="btn-back"><i class="fa fa-th"></i> 进入工位</a>
|
|
<a href="<?php echo BASE_URL; ?>/Admin/index" class="btn-back"><i class="fa fa-cog"></i> 后台管理</a>
|
|
<a href="<?php echo BASE_URL; ?>/Login/logout" class="btn-back confirm-link" data-confirm="确定退出？"><i class="fa fa-sign-out"></i> 退出</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- 概览卡片 -->
|
|
<div class="overview-cards">
|
|
<div class="overview-card total">
|
|
<div class="card-icon"><i class="fa fa-list-alt"></i></div>
|
|
<div class="card-value"><?php echo $totalRecords; ?></div>
|
|
<div class="card-label">今日总记录</div>
|
|
</div>
|
|
<div class="overview-card total">
|
|
<div class="card-icon"><i class="fa fa-calendar"></i></div>
|
|
<div class="card-value" id="todayDisplay"><?php echo $today; ?></div>
|
|
<div class="card-label">当前日期</div>
|
|
</div>
|
|
<div class="overview-card total">
|
|
<div class="card-icon"><i class="fa fa-th-large"></i></div>
|
|
<div class="card-value"><?php echo count($stations); ?></div>
|
|
<div class="card-label">工位总数</div>
|
|
</div>
|
|
<div class="overview-card total">
|
|
<div class="card-icon"><i class="fa fa-check-circle"></i></div>
|
|
<?php
|
|
$activeCount = 0;
|
|
foreach ($stations as $s) { if ($s['status'] == 1) $activeCount++; }
|
|
?>
|
|
<div class="card-value"><?php echo $activeCount; ?></div>
|
|
<div class="card-label">启用工位</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 工位网格 -->
|
|
<div class="station-grid">
|
|
<?php
|
|
$icons = [
|
|
'inbound' => 'fa-sign-in',
|
|
'pcb_test' => 'fa-microchip',
|
|
'battery' => 'fa-battery-full',
|
|
'assembly' => 'fa-cogs',
|
|
'finished_test' => 'fa-check-circle',
|
|
'warehouse' => 'fa-warehouse',
|
|
'delivery' => 'fa-truck',
|
|
];
|
|
foreach ($stations as $station):
|
|
$type = $station['station_type'];
|
|
$icon = $icons[$type] ?? 'fa-circle-o';
|
|
$stat = $stats[$type] ?? ['count' => 0, 'name' => $station['station_name']];
|
|
?>
|
|
<div class="station-card <?php echo $station['status'] == 0 ? 'disabled' : ''; ?>"
|
|
<?php echo $station['status'] == 1 ? 'data-href="' . BASE_URL . '/Front/' . $type . '"' : ''; ?>>
|
|
<div class="station-header">
|
|
<span class="station-name">
|
|
<i class="fa <?php echo $icon; ?>"></i> <?php echo htmlspecialchars($stat['name']); ?>
|
|
</span>
|
|
<span class="station-code"><?php echo htmlspecialchars($station['station_code']); ?></span>
|
|
</div>
|
|
<div class="station-count"><?php echo $stat['count']; ?></div>
|
|
<div class="station-label">今日处理量</div>
|
|
<div style="margin-top: 12px;">
|
|
<span class="status-badge <?php echo $station['status'] == 1 ? 'status-active' : 'status-inactive'; ?>">
|
|
<?php echo $station['status'] == 1 ? '● 启用' : '● 禁用'; ?>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
©2026深圳市云创芯电子有限公司版权所有
|
|
<br><span class="beian">备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">粤ICP备16118477号-1</a></span>
|
|
<br><span class="beian">公安网备：<a href="https://beian.mps.gov.cn/#/query/webSearch?code=44030002015390" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:4px;"><img src="<?php echo BASE_URL; ?>/static/images/gongan_badge.png" width="16" height="17" alt="公安网备" loading="lazy" style="vertical-align:middle;" onerror="this.onerror=null;this.outerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 24 24"><path d="M12 2l8 3v6c0 5-4 9-8 11-4-2-8-6-8-11V5l8-3z" fill="#1a3a8f" stroke="#d4af37" stroke-width="1"/><polygon points="12,7 13.5,10.5 17,10.5 14,12.8 15,16.5 12,14.5 9,16.5 10,12.8 7,10.5 10.5,10.5" fill="#ffffff"/></svg>'">粤公网安备44030002015390号</a></span>
|
|
</div>
|
|
|
|
<script src="<?php echo BASE_URL; ?>/static/js/jquery-3.7.1.min.js"></script>
|
|
<?php // v3-P2 CSP：全局事件委托（替代内联 onclick 等） ?>
|
|
<script src="<?php echo BASE_URL; ?>/static/js/csp_global.js" nonce="<?php echo csp_nonce(); ?>"></script>
|
|
<script nonce="<?php echo csp_nonce(); ?>">
|
|
// 实时时钟
|
|
function updateClock() {
|
|
var now = new Date();
|
|
var str = now.getFullYear() + '-' +
|
|
String(now.getMonth() + 1).padStart(2, '0') + '-' +
|
|
String(now.getDate()).padStart(2, '0') + ' ' +
|
|
String(now.getHours()).padStart(2, '0') + ':' +
|
|
String(now.getMinutes()).padStart(2, '0') + ':' +
|
|
String(now.getSeconds()).padStart(2, '0');
|
|
document.getElementById('liveClock').textContent = str;
|
|
}
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
|
|
// 自动刷新（每30秒）
|
|
setTimeout(function() {
|
|
location.reload();
|
|
}, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|