1276 lines
53 KiB
HTML
1276 lines
53 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<base href="/"/>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>企业生产资源计划系统</title>
|
|
<link rel="stylesheet" href="assets/crpm/js/layui/css/layui.css"/>
|
|
<link rel="stylesheet" href="assets/crpm/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/crpm/index/index2/index2.css"/>
|
|
<link rel="stylesheet" href="assets/crpm/index/index.css"/>
|
|
<style>
|
|
/* 主内容区 */
|
|
main {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.date-filter {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.date-filter select, .date-filter input {
|
|
padding: 6px 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #2A3F54;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #1A2935;
|
|
}
|
|
|
|
.btn-default {
|
|
background-color: white;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.btn-default:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.stat-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stat-title {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-change {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.change-up {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.change-down {
|
|
color: #f44336;
|
|
}
|
|
|
|
/* 图表网格 */
|
|
.chart-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.chart-item {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 1rem;
|
|
margin-bottom: 15px;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.chart-title .actions {
|
|
color: #999;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.col-8 {
|
|
grid-column: span 8;
|
|
}
|
|
|
|
.col-4 {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
.col-6 {
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.col-12 {
|
|
grid-column: span 12;
|
|
}
|
|
|
|
/* 表格样式 */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
th, td {
|
|
padding: 12px 10px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
th {
|
|
background-color: #f9f9f9;
|
|
color: #666;
|
|
font-weight: 600;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.status-success {
|
|
background-color: #e8f5e9;
|
|
color: #388E3C;
|
|
}
|
|
|
|
.status-failed {
|
|
background-color: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
.status-pending {
|
|
background-color: #fff3e0;
|
|
color: #FF9800;
|
|
}
|
|
|
|
.status-approved {
|
|
background-color: #e3f2fd;
|
|
color: #1976D2;
|
|
}
|
|
|
|
.status-rejected {
|
|
background-color: #f3e5f5;
|
|
color: #9C27B0;
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: #e8eaf6;
|
|
color: #5C6BC0;
|
|
}
|
|
|
|
.priority-badge {
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.priority-high {
|
|
background-color: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
.priority-medium {
|
|
background-color: #fff3e0;
|
|
color: #FF9800;
|
|
}
|
|
|
|
.priority-low {
|
|
background-color: #e8f5e9;
|
|
color: #388E3C;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 100%;
|
|
background-color: #2A3F54;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 1200px) {
|
|
.col-8 {
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.col-4 {
|
|
grid-column: span 6;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.chart-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.col-8, .col-4, .col-6, .col-12 {
|
|
grid-column: span 1;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.header-actions {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.date-filter {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.action-buttons {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.btn span {
|
|
display: none;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="system">
|
|
<div class="left">
|
|
<div class="title">
|
|
企业生产资源计划系统
|
|
</div>
|
|
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-9ef1e6da-9dcb-46f8-8abf-579a3b51218b"
|
|
data-mod-id="8984a268-e0f6-4c3c-9506-be80b97bcedb" data-url="route/pages/ed5ca5/list.html"><i
|
|
class="fa fa-calculator"></i> 物料需求计划</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-93f27b03-cec8-4966-a297-48deab760da7"
|
|
data-mod-id="3c833efa-4cd1-4301-ae4b-07a781900a26" data-url="route/pages/bf9886/list.html"><i
|
|
class="fa fa-archive"></i> 库存管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-129ccf16-3a45-4974-8279-fea554a381e6"
|
|
data-mod-id="31c5fc45-fb91-48fa-8537-ecb0c2f33379" data-url="route/pages/92933a/list.html"><i
|
|
class="fa fa-calendar-check-o"></i> 生产调度</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-ce0dbe5f-96ad-4463-a8cf-80d03f402cef"
|
|
data-mod-id="41555685-51ec-468e-8900-5116580d7996" data-url="route/pages/ffb5c7/list.html"><i
|
|
class="fa fa-file-text-o"></i> 订单管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-c7c85f11-df60-41b8-a9a7-c9208c8d24bd"
|
|
data-mod-id="c2f7d9da-f907-46f7-970f-96b4ccffd31e" data-url="route/pages/8f2862/list.html"><i
|
|
class="fa fa-certificate"></i> 质量管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-74c066c5-f267-4e12-adbc-f6ee61b5ef54"
|
|
data-mod-id="4e645f2c-412f-41b8-ab3e-4a81d3dc6ed1" data-url="route/pages/1b5858/list.html"><i
|
|
class="fa fa-balance-scale"></i> 能力需求计划</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-a92ff1e2-3589-4168-95d7-d750662c17bd"
|
|
data-mod-id="5d25f209-69d6-4feb-a7df-dc5085941ade" data-url="route/pages/eba64a/list.html"><i
|
|
class="fa fa-money"></i> 成本核算</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-d941febf-71eb-442f-b50c-5d9567b53e15"
|
|
data-mod-id="e78744d0-8240-46be-80fc-d026f80baac4" data-url="route/pages/0a75ce/list.html"><i
|
|
class="fa fa-exchange"></i> 供应链协调</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-a27a2d3d-0ef5-4e45-8c36-681a5b7719f1"
|
|
data-mod-id="80414db8-039e-46a2-af03-a73dbbc33810" data-url="route/pages/d5f5fa/list.html"><i
|
|
class="fa fa-wrench"></i> 设备维护管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-656edeb0-90b1-45db-92b0-71475680392c"
|
|
data-mod-id="b5b10d78-e300-4f41-84c0-f588f5771431" data-url="route/pages/9f3802/list.html"><i
|
|
class="fa fa-pie-chart"></i> 产能规划</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="right">
|
|
|
|
<div class="top">
|
|
|
|
<div class="row2">
|
|
<div class="headline">
|
|
<!-- </h5>欢迎使用企业生产资源计划系统</h5>-->
|
|
</div>
|
|
<ul class="layui-nav layui-layout-right">
|
|
|
|
<li class="layui-nav-item topTitlec">
|
|
<div>
|
|
<div class="topTitle" id="accountManageBtn"><i
|
|
class="layui-icon layui-icon-user topicon"></i>账号管理
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
|
|
<a href="javascript:void(0);">管理员</a>
|
|
<dl class="layui-nav-child">
|
|
<dd><a href="javascript:void(0);" id="signoutBtn">退出</a></dd>
|
|
</dl>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="content">
|
|
<!-- 主内容区 -->
|
|
<main class='homepage' id="homepage">
|
|
<!-- 日期选择和刷新 -->
|
|
<div class="header-actions">
|
|
<div class="date-filter">
|
|
<input type="date" id="date-selector">
|
|
<select id="time-range">
|
|
<option value="today">今日</option>
|
|
<option value="yesterday">昨日</option>
|
|
<option value="week" selected>本周</option>
|
|
<option value="month">本月</option>
|
|
<option value="quarter">本季度</option>
|
|
<option value="year">本年</option>
|
|
</select>
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary" id="refresh-btn">
|
|
<i class="fa fa-refresh"></i>
|
|
<span>刷新数据</span>
|
|
</button>
|
|
<button class="btn btn-default">
|
|
<i class="fa fa-download"></i>
|
|
<span>导出报表</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 状态卡片区域 -->
|
|
<div class="stats-grid">
|
|
<!-- 今日生产总量卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">今日生产总量</div>
|
|
<div class="stat-icon" style="background-color: #1E88E5;">
|
|
<i class="fa fa-cubes"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">12,580</div>
|
|
<div class="stat-change change-up">
|
|
<i class="fa fa-arrow-up"></i> 3.2% 相比昨日
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单完成率卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">订单完成率</div>
|
|
<div class="stat-icon" style="background-color: #4CAF50;">
|
|
<i class="fa fa-check-circle"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">92.5%</div>
|
|
<div class="stat-change change-up">
|
|
<i class="fa fa-arrow-up"></i> 1.8% 相比昨日
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 库存预警数卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">库存预警数</div>
|
|
<div class="stat-icon" style="background-color: #FF9800;">
|
|
<i class="fa fa-exclamation-triangle"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">8</div>
|
|
<div class="stat-change change-down">
|
|
<i class="fa fa-arrow-down"></i> 2.3% 相比昨日
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 设备故障率卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">设备故障率</div>
|
|
<div class="stat-icon" style="background-color: #f44336;">
|
|
<i class="fa fa-wrench"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">1.2%</div>
|
|
<div class="stat-change change-up">
|
|
<i class="fa fa-arrow-up"></i> 0.3% 相比昨日
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第一行图表 -->
|
|
<div class="chart-grid">
|
|
<!-- 生产进度图表 -->
|
|
<div class="chart-item col-8">
|
|
<div class="chart-title">
|
|
<span>生产进度追踪</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="production-progress-chart"></div>
|
|
</div>
|
|
|
|
<!-- 库存水平图表 -->
|
|
<div class="chart-item col-4">
|
|
<div class="chart-title">
|
|
<span>库存水平分布</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="inventory-level-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二行图表 -->
|
|
<div class="chart-grid">
|
|
<!-- 订单交付率图表 -->
|
|
<div class="chart-item col-4">
|
|
<div class="chart-title">
|
|
<span>订单交付率</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="delivery-rate-chart"></div>
|
|
</div>
|
|
|
|
<!-- 质量合格率图表 -->
|
|
<div class="chart-item col-4">
|
|
<div class="chart-title">
|
|
<span>质量合格率</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="quality-rate-chart"></div>
|
|
</div>
|
|
|
|
<!-- 设备状态图表 -->
|
|
<div class="chart-item col-4">
|
|
<div class="chart-title">
|
|
<span>设备状态分布</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="equipment-status-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第三行内容 -->
|
|
<div class="chart-grid">
|
|
<!-- 最近生产订单 -->
|
|
<div class="chart-item col-6">
|
|
<div class="chart-title">
|
|
<span>最近生产订单</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>订单编号</th>
|
|
<th>产品名称</th>
|
|
<th>数量</th>
|
|
<th>开始时间</th>
|
|
<th>状态</th>
|
|
<th>进度</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ORD-20230616001</td>
|
|
<td>产品A</td>
|
|
<td>5,000</td>
|
|
<td>2023-06-16</td>
|
|
<td><span class="status-badge status-processing">进行中</span></td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 75%"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">75%</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ORD-20230615002</td>
|
|
<td>产品B</td>
|
|
<td>3,200</td>
|
|
<td>2023-06-15</td>
|
|
<td><span class="status-badge status-success">已完成</span></td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 100%"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">100%</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ORD-20230615003</td>
|
|
<td>产品C</td>
|
|
<td>2,800</td>
|
|
<td>2023-06-15</td>
|
|
<td><span class="status-badge status-processing">进行中</span></td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 45%"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">45%</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ORD-20230614004</td>
|
|
<td>产品D</td>
|
|
<td>4,500</td>
|
|
<td>2023-06-14</td>
|
|
<td><span class="status-badge status-success">已完成</span></td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 100%"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">100%</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>ORD-20230614005</td>
|
|
<td>产品E</td>
|
|
<td>1,800</td>
|
|
<td>2023-06-14</td>
|
|
<td><span class="status-badge status-success">已完成</span></td>
|
|
<td>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 100%"></div>
|
|
</div>
|
|
<span class="text-xs text-gray-500">100%</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 库存预警列表 -->
|
|
<div class="chart-item col-6">
|
|
<div class="chart-title">
|
|
<span>库存预警列表</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>物料编码</th>
|
|
<th>物料名称</th>
|
|
<th>当前库存</th>
|
|
<th>安全库存</th>
|
|
<th>预警级别</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>MAT-001</td>
|
|
<td>原材料A</td>
|
|
<td>250</td>
|
|
<td>500</td>
|
|
<td><span class="priority-badge priority-high">紧急</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">采购</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MAT-002</td>
|
|
<td>原材料B</td>
|
|
<td>800</td>
|
|
<td>1000</td>
|
|
<td><span class="priority-badge priority-medium">中等</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">采购</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MAT-003</td>
|
|
<td>零部件C</td>
|
|
<td>120</td>
|
|
<td>200</td>
|
|
<td><span class="priority-badge priority-high">紧急</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">采购</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MAT-004</td>
|
|
<td>零部件D</td>
|
|
<td>450</td>
|
|
<td>500</td>
|
|
<td><span class="priority-badge priority-medium">中等</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">采购</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MAT-005</td>
|
|
<td>包装材料E</td>
|
|
<td>1800</td>
|
|
<td>2000</td>
|
|
<td><span class="priority-badge priority-medium">中等</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">采购</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第四行内容 -->
|
|
<div class="chart-grid">
|
|
<!-- 设备维护计划 -->
|
|
<div class="chart-item col-6">
|
|
<div class="chart-title">
|
|
<span>设备维护计划</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>设备编号</th>
|
|
<th>设备名称</th>
|
|
<th>维护周期</th>
|
|
<th>上次维护</th>
|
|
<th>下次维护</th>
|
|
<th>状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>EQU-001</td>
|
|
<td>生产线A</td>
|
|
<td>30天</td>
|
|
<td>2023-06-01</td>
|
|
<td>2023-07-01</td>
|
|
<td><span class="status-badge status-success">正常</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>EQU-002</td>
|
|
<td>包装机B</td>
|
|
<td>15天</td>
|
|
<td>2023-06-10</td>
|
|
<td>2023-06-25</td>
|
|
<td><span class="status-badge status-success">正常</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>EQU-003</td>
|
|
<td>注塑机C</td>
|
|
<td>7天</td>
|
|
<td>2023-06-12</td>
|
|
<td>2023-06-19</td>
|
|
<td><span class="status-badge status-pending">待维护</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>EQU-004</td>
|
|
<td>切割机D</td>
|
|
<td>30天</td>
|
|
<td>2023-05-20</td>
|
|
<td>2023-06-20</td>
|
|
<td><span class="status-badge status-pending">待维护</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>EQU-005</td>
|
|
<td>检测设备E</td>
|
|
<td>90天</td>
|
|
<td>2023-03-15</td>
|
|
<td>2023-06-15</td>
|
|
<td><span class="status-badge status-failed">已逾期</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 质量检测记录 -->
|
|
<div class="chart-item col-6">
|
|
<div class="chart-title">
|
|
<span>最近质量检测记录</span>
|
|
<div class="actions">
|
|
<i class="fa fa-refresh"></i>
|
|
<i class="fa fa-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>检测项目</th>
|
|
<th>批次号</th>
|
|
<th>检测日期</th>
|
|
<th>负责人</th>
|
|
<th>结果</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>外观检测</td>
|
|
<td>BAT-20230616001</td>
|
|
<td>2023-06-16</td>
|
|
<td>李工</td>
|
|
<td><span class="status-badge status-success">合格</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">详情</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>功能检测</td>
|
|
<td>BAT-20230616001</td>
|
|
<td>2023-06-16</td>
|
|
<td>王工</td>
|
|
<td><span class="status-badge status-success">合格</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">详情</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>性能检测</td>
|
|
<td>BAT-20230615002</td>
|
|
<td>2023-06-15</td>
|
|
<td>张工</td>
|
|
<td><span class="status-badge status-failed">不合格</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">详情</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>可靠性检测</td>
|
|
<td>BAT-20230615002</td>
|
|
<td>2023-06-15</td>
|
|
<td>刘工</td>
|
|
<td><span class="status-badge status-success">合格</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">详情</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>包装检测</td>
|
|
<td>BAT-20230614003</td>
|
|
<td>2023-06-14</td>
|
|
<td>赵工</td>
|
|
<td><span class="status-badge status-success">合格</span></td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm">详情</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div class="layui-card layui-panel page-iframe-container">
|
|
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="assets/crpm/js/layui/layui.js"></script>
|
|
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
|
|
|
|
<script>
|
|
layui.use(['element', 'layer', 'util'], function () {
|
|
var element = layui.element;
|
|
var layer = layui.layer;
|
|
var util = layui.util;
|
|
var $ = layui.$;
|
|
var $win = $(window);
|
|
window['layer'] = layer;
|
|
var init = function () {
|
|
var $pageIframe = $('#pageIframe');
|
|
$pageIframe.css({
|
|
height: `${$win.height() - 100}px`
|
|
})
|
|
}
|
|
|
|
init();
|
|
$('#signoutBtn').click(function () {
|
|
window.open('sign/signout', '_self')
|
|
})
|
|
|
|
$('#accountManageBtn').click(function () {
|
|
var pageIframe = $('#pageIframe');
|
|
pageIframe.attr('src', 'route/pages/user/list.html');
|
|
pageIframe.show();
|
|
homepage.style.display = 'none';
|
|
})
|
|
var homepage = document.getElementById('homepage');
|
|
$(document).on('click', '.menu-item', function () {
|
|
var url = this.dataset.url;
|
|
var pageIframe = $('#pageIframe');
|
|
pageIframe.attr('src', url);
|
|
pageIframe.show();
|
|
homepage.style.display = 'none';
|
|
});
|
|
});
|
|
// 初始化图表
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// 生产进度图表
|
|
const productionProgressChart = echarts.init(document.getElementById('production-progress-chart'));
|
|
productionProgressChart.setOption({
|
|
title: {
|
|
text: '生产进度追踪',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['计划产量', '实际产量'],
|
|
top: '10%',
|
|
left: 'center'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['6/1', '6/2', '6/3', '6/4', '6/5', '6/6', '6/7', '6/8', '6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '计划产量',
|
|
type: 'line',
|
|
data: [800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550]
|
|
},
|
|
{
|
|
name: '实际产量',
|
|
type: 'line',
|
|
data: [820, 870, 920, 980, 1030, 1090, 1120, 1180, 1230, 1280, 1320, 1370, 1420, 1470, 1530, 1580]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 库存水平图表
|
|
const inventoryLevelChart = echarts.init(document.getElementById('inventory-level-chart'));
|
|
inventoryLevelChart.setOption({
|
|
title: {
|
|
text: '库存水平分布',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['安全库存', '低库存', '高库存', '缺货']
|
|
},
|
|
series: [
|
|
{
|
|
name: '库存状态',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{value: 65, name: '安全库存'},
|
|
{value: 15, name: '低库存'},
|
|
{value: 12, name: '高库存'},
|
|
{value: 8, name: '缺货'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 订单交付率图表
|
|
const deliveryRateChart = echarts.init(document.getElementById('delivery-rate-chart'));
|
|
deliveryRateChart.setOption({
|
|
title: {
|
|
text: '订单交付率',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 80,
|
|
max: 100
|
|
},
|
|
series: [
|
|
{
|
|
name: '交付率(%)',
|
|
type: 'line',
|
|
data: [85, 87, 89, 91, 93, 92.5]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 质量合格率图表
|
|
const qualityRateChart = echarts.init(document.getElementById('quality-rate-chart'));
|
|
qualityRateChart.setOption({
|
|
title: {
|
|
text: '质量合格率',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 90,
|
|
max: 100
|
|
},
|
|
series: [
|
|
{
|
|
name: '合格率(%)',
|
|
type: 'line',
|
|
data: [94, 95, 96, 97, 98, 98.5]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 设备状态图表
|
|
const equipmentStatusChart = echarts.init(document.getElementById('equipment-status-chart'));
|
|
equipmentStatusChart.setOption({
|
|
title: {
|
|
text: '设备状态分布',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: ['正常运行', '维护中', '故障', '闲置']
|
|
},
|
|
series: [
|
|
{
|
|
name: '设备状态',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: [
|
|
{value: 65, name: '正常运行'},
|
|
{value: 15, name: '维护中'},
|
|
{value: 10, name: '故障'},
|
|
{value: 10, name: '闲置'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 窗口大小改变时重绘图表
|
|
window.addEventListener('resize', function () {
|
|
productionProgressChart.resize();
|
|
inventoryLevelChart.resize();
|
|
deliveryRateChart.resize();
|
|
qualityRateChart.resize();
|
|
equipmentStatusChart.resize();
|
|
});
|
|
|
|
// 刷新按钮功能
|
|
document.getElementById('refresh-btn').addEventListener('click', function () {
|
|
// 显示加载状态
|
|
this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 刷新中...';
|
|
this.disabled = true;
|
|
|
|
// 模拟数据刷新
|
|
setTimeout(() => {
|
|
// 更新生产进度数据
|
|
productionProgressChart.setOption({
|
|
series: [
|
|
{
|
|
data: [800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550]
|
|
},
|
|
{
|
|
data: [820, 870, 920, 980, 1030, 1090, 1120, 1180, 1230, 1280, 1320, 1370, 1420, 1470, 1530, 1580 + Math.floor(Math.random() * 50)]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 更新库存水平数据
|
|
inventoryLevelChart.setOption({
|
|
series: [{
|
|
data: [
|
|
{value: Math.floor(Math.random() * 10) + 60, name: '安全库存'},
|
|
{value: Math.floor(Math.random() * 5) + 12, name: '低库存'},
|
|
{value: Math.floor(Math.random() * 5) + 10, name: '高库存'},
|
|
{value: Math.floor(Math.random() * 5) + 5, name: '缺货'}
|
|
]
|
|
}]
|
|
});
|
|
|
|
// 更新订单交付率数据
|
|
deliveryRateChart.setOption({
|
|
series: [{
|
|
data: [85, 87, 89, 91, 93, 92.5 + Math.random() * 1]
|
|
}]
|
|
});
|
|
|
|
// 更新质量合格率数据
|
|
qualityRateChart.setOption({
|
|
series: [{
|
|
data: [94, 95, 96, 97, 98, 98.5 + Math.random() * 0.5]
|
|
}]
|
|
});
|
|
|
|
// 更新设备状态数据
|
|
equipmentStatusChart.setOption({
|
|
series: [{
|
|
data: [
|
|
{value: Math.floor(Math.random() * 10) + 60, name: '正常运行'},
|
|
{value: Math.floor(Math.random() * 5) + 12, name: '维护中'},
|
|
{value: Math.floor(Math.random() * 5) + 8, name: '故障'},
|
|
{value: Math.floor(Math.random() * 5) + 8, name: '闲置'}
|
|
]
|
|
}]
|
|
});
|
|
|
|
// 恢复按钮状态
|
|
this.innerHTML = '<i class="fa fa-refresh"></i> 刷新数据';
|
|
this.disabled = false;
|
|
|
|
// 显示刷新成功提示
|
|
alert('数据刷新成功！');
|
|
}, 1000);
|
|
});
|
|
|
|
// 设置当前日期
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = String(today.getMonth() + 1).padStart(2, '0');
|
|
const day = String(today.getDate()).padStart(2, '0');
|
|
document.getElementById('date-selector').value = `${year}-${month}-${day}`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|