纯AI搓出来的大屏看板后台是PHP写的，前端是HTML5写的，后台只有管理员账号可以登陆，每条产线登录自己的账号后在前端显示自己产线的数据，
数据都在后台添加，没有绑定数据源，感兴趣的可以二开一下互相交流
管理员账号：admin 管理员密码：admin123456
前端账号：lineA 前端密码：123456
前端账号：lineB 前端密码：123456
前端账号：lineC 前端密码：123456
[PHP] 纯文本查看 复制代码 <?php
/** 前台 - BI 驾驶舱看板 (日报表 / 月报表) */
require_once __DIR__ . '/includes/auth.php';
require_once __DIR__ . '/includes/functions.php';
$u = require_login_page();
// 管理员请从后台进入(前台数据接口按线别隔离, 管理员无绑定线别)
if (($u['role'] ?? '') === 'admin') {
header('Location: admin/index.php');
exit;
}
$lineName = $u['line_name'] ?? '';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产线BI驾驶舱 - <?= e($lineName) ?></title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/echarts.min.js"></script>
<script>window.echarts || document.write('<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"><\/script>');</script>
</head>
<body>
<header class="topbar">
<div class="brand">产线BI驾驶舱<span class="line-badge"><?= e($lineName ?: '全线') ?></span></div>
<nav class="tabs">
<button class="tab active" data-page="daily">日报表</button>
<button class="tab" data-page="monthly">月报表</button>
</nav>
<div class="user-box">
<span class="uname">👤 <?= e($u['username']) ?></span>
<button class="btn-link" id="btnLogout">退出登录</button>
</div>
</header>
<main>
<!-- ============ 日报表 ============ -->
<section id="page-daily" class="page active">
<div class="toolbar">
<label>日期：</label>
<input type="date" id="dailyDate">
<span class="status" id="dailyStatus">加载中...</span>
</div>
<div class="kpi-grid">
<div class="kpi-card">
<div class="chart" id="chAttendance"></div>
<div class="kpi-foot" id="footAttendance">—</div>
</div>
<div class="kpi-card">
<div class="chart" id="chProduction"></div>
<div class="kpi-foot" id="footProduction">—</div>
</div>
<div class="kpi-card">
<div class="chart" id="chShip"></div>
<div class="kpi-foot" id="footShip">—</div>
</div>
<div class="kpi-card">
<div class="chart" id="chDefect"></div>
<div class="kpi-foot" id="footDefect">—</div>
</div>
</div>
<div class="card">
<h3 class="card-title">生产数据明细（<?= e($lineName) ?>）</h3>
<div class="table-wrap">
<table class="tbl">
<thead><tr>
<th>日期</th><th>线别</th><th>标准人数</th><th>实际人数</th>
<th>生产计划量</th><th>实际完成量</th><th>出货计划量</th><th>实际出货量</th>
<th>全检数量</th><th>不良数量</th>
</tr></thead>
<tbody id="dailyTableBody"><tr><td colspan="10" class="empty">加载中...</td></tr></tbody>
</table>
</div>
</div>
<div class="card">
<h3 class="card-title">员工技能矩阵（<?= e($lineName) ?>）</h3>
<div class="table-wrap">
<table class="tbl">
<thead><tr>
<th>员工姓名</th><th>岗位</th><th>首件制作</th><th>产品知识</th><th>检验知识</th>
<th>不合格处理</th><th>关键尺寸测量</th>
</tr></thead>
<tbody id="empTableBody"><tr><td colspan="7" class="empty">加载中...</td></tr></tbody>
</table>
</div>
</div>
</section>
<!-- ============ 月报表 ============ -->
<section id="page-monthly" class="page">
<div class="toolbar">
<label>统计区间：</label>
<select id="monthRange">
<option value="3">近3个月</option>
<option value="6" selected>近6个月</option>
<option value="12">近12个月</option>
</select>
<span class="status" id="monthlyStatus">加载中...</span>
</div>
<div class="kpi-strip" id="monthlyKpis">
<div class="card"><div class="k">区间出勤率</div><div class="v" style="color:#2563eb;">—</div><div class="sub">实际人数/标准人数</div></div>
<div class="card"><div class="k">区间生产完工率</div><div class="v" style="color:#16a34a;">—</div><div class="sub">实际完成/计划量</div></div>
<div class="card"><div class="k">区间出货率</div><div class="v" style="color:#f59e0b;">—</div><div class="sub">实际出货/计划出货</div></div>
<div class="card"><div class="k">区间不良率</div><div class="v" style="color:#ef4444;">—</div><div class="sub">不良/全检数量</div></div>
</div>
<div class="card">
<h3 class="card-title">月度综合对比（柱状图 + 曲线图）</h3>
<div class="chart-overview" id="chOverview"></div>
</div>
<div class="chart-grid2">
<div class="card">
<h3 class="card-title">月出勤率</h3>
<div class="chart" id="chMAttendance"></div>
</div>
<div class="card">
<h3 class="card-title">月生产完工率</h3>
<div class="chart" id="chMProduction"></div>
</div>
<div class="card">
<h3 class="card-title">月出货率</h3>
<div class="chart" id="chMShip"></div>
</div>
<div class="card">
<h3 class="card-title">月不良率</h3>
<div class="chart" id="chMDefect"></div>
</div>
</div>
<div class="card">
<h3 class="card-title">月度汇总明细</h3>
<div class="table-wrap">
<table class="tbl">
<thead><tr>
<th>月份</th><th>出勤率</th><th>生产完工率</th><th>出货率</th><th>不良率</th>
<th>标准人数</th><th>实际人数</th><th>计划量</th><th>实际完成</th>
<th>出货计划</th><th>实际出货</th><th>全检数量</th><th>不良数量</th>
</tr></thead>
<tbody id="monthlyTableBody"><tr><td colspan="13" class="empty">加载中...</td></tr></tbody>
</table>
</div>
</div>
</section>
</main>
<script>
const USER = <?= json_encode(['username' => $u['username'], 'line_name' => $lineName]) ?>;
</script>
<script src="assets/js/dashboard.js"></script>
</body>
</html>
完整代码下载地址：https://wwawu.lanzouu.com/iyoEF483qs5a 密码:52pj
| 
发表于 2026-9-12 14:13
|
发表于 2026-9-16 09:40
