1159 lines
44 KiB
HTML
1159 lines
44 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/index5/index5.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: #1E88E5;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #1976D2;
|
||
}
|
||
|
||
.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-processing {
|
||
background-color: #e3f2fd;
|
||
color: #1976D2;
|
||
}
|
||
|
||
.status-completed {
|
||
background-color: #e8f5e9;
|
||
color: #388E3C;
|
||
}
|
||
|
||
.status-warning {
|
||
background-color: #fff3e0;
|
||
color: #FF9800;
|
||
}
|
||
|
||
.status-error {
|
||
background-color: #ffebee;
|
||
color: #f44336;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 6px;
|
||
background-color: #eee;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress {
|
||
height: 100%;
|
||
background-color: #1E88E5;
|
||
}
|
||
|
||
/* 库存状态 */
|
||
.inventory-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.inventory-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.inventory-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.inventory-status {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.status-healthy {
|
||
background-color: #4CAF50;
|
||
}
|
||
|
||
.status-warning {
|
||
background-color: #FF9800;
|
||
}
|
||
|
||
.status-critical {
|
||
background-color: #f44336;
|
||
}
|
||
|
||
.inventory-name {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.inventory-id {
|
||
font-size: 0.8rem;
|
||
color: #666;
|
||
}
|
||
|
||
.inventory-metrics {
|
||
text-align: right;
|
||
}
|
||
|
||
.inventory-status-text {
|
||
font-size: 0.8rem;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
display: inline-block;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@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;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="system">
|
||
<div class="top">
|
||
<div class="title">
|
||
<h3>工厂计划与排程系统</h3>
|
||
</div>
|
||
<ul class="layui-nav layui-layout-right">
|
||
<!-- <li class="layui-nav-item ">-->
|
||
<!-- <div>-->
|
||
<!-- <div class="topTitle"><i class="layui-icon layui-icon-set-fill topicon"></i>资源配置</div>-->
|
||
|
||
<!-- </div>-->
|
||
<!-- </li>-->
|
||
<li class="layui-nav-item topTitlec" id="accountManageBtn">
|
||
<div>
|
||
<div class="topTitle "><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 class="bottom">
|
||
<div class="left">
|
||
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
|
||
<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-71258579-bc48-4160-a828-4fcfc4e2c520"
|
||
data-mod-id="085bf879-d349-4cd5-9b93-bdbe78a5d0de" data-url="route/pages/888158/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-e2aeee01-bdb8-4858-83c0-82a0c23057a8"
|
||
data-mod-id="8eb6a834-6798-4932-bfa3-3bf256390339" data-url="route/pages/0ca304/list.html"><i
|
||
class="fa fa-shopping-cart"></i> 订单管理</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-5d313505-c45c-4d87-8486-82ef3f544839"
|
||
data-mod-id="c753448d-9ac1-4ef6-9472-c967dc6e984f" data-url="route/pages/67a64f/list.html"><i
|
||
class="fa fa-line-chart"></i> 需求预测</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-9e413446-8c9c-482e-ac74-62aaef1fe53f"
|
||
data-mod-id="9cf0c913-51ac-4340-b4b3-c13daea6f632" data-url="route/pages/6b8802/list.html"><i
|
||
class="fa fa-cogs"></i> 物料需求计划</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-b279ed58-f80c-43d2-89fc-0afcb1376ca7"
|
||
data-mod-id="beb7e844-dc03-40f2-ab08-84762ec5eb54" data-url="route/pages/cea335/list.html"><i
|
||
class="fa fa-industry"></i> 生产能力规划</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-5271289b-3018-42f6-b0a9-8674ddc1aedf"
|
||
data-mod-id="b4c66335-522d-4ac2-b4e4-eacb5e5bd77d" data-url="route/pages/524b06/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-de17568c-a098-49e7-8d8a-203b9c97514b"
|
||
data-mod-id="5fc3be03-15d2-49dc-9114-25b8bfb0c738" data-url="route/pages/e819b9/list.html"><i
|
||
class="fa fa-sitemap"></i> 多工厂协同</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-74ab1f43-8e53-45cf-9434-8c402f470dd2"
|
||
data-mod-id="36ab0300-9b15-4992-b771-9cf0b816ff51" data-url="route/pages/506488/list.html"><i
|
||
class="fa fa-truck"></i> 订单追踪</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-250ee74d-8729-4de1-871c-f92f23b6b5b7"
|
||
data-mod-id="8815d2e1-edee-428b-a583-19aac45fd67d" data-url="route/pages/e014b2/list.html"><i
|
||
class="fa fa-eye"></i> 实时监控</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-e847509e-6636-4b23-b387-48e2c339b50c"
|
||
data-mod-id="334d7f6b-b48e-4455-b69f-6e596ac5cd66" data-url="route/pages/1af868/list.html"><i
|
||
class="fa fa-check-square-o"></i> 合规性检查</a>
|
||
</li>
|
||
<li class="layui-nav-item layui-nav-itemed">
|
||
<a href="javascript:void(0);" class="menu-item" id="menu-79f60e32-6e10-409e-b571-b33a0bba24e1"
|
||
data-mod-id="a792be85-54bb-4bdb-84ab-22d095f19398" data-url="route/pages/66b923/list.html"><i
|
||
class="fa fa-exclamation-triangle"></i> 异常处理</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="right">
|
||
<div class="headline">
|
||
<h5>欢迎使用工厂计划与排程系统</h5>
|
||
</div>
|
||
|
||
<div class="layui-card layui-panel page-iframe-container">
|
||
<!-- 主内容区 -->
|
||
<main 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-shopping-cart"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-value">¥286,540</div>
|
||
<div class="stat-change change-down">
|
||
<i class="fa fa-arrow-up"></i> 8.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-industry"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-value">92.7<span style="font-size: 1rem;">%</span></div>
|
||
<div class="stat-change change-down">
|
||
<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: #03A9F4;">
|
||
<i class="fa fa-archive"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-value">3.8<span style="font-size: 1rem;">次/月</span></div>
|
||
<div class="stat-change change-up">
|
||
<i class="fa fa-arrow-down"></i> 0.5 相比上月
|
||
</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-truck"></i>
|
||
</div>
|
||
</div>
|
||
<div class="stat-value">95.6<span style="font-size: 1rem;">%</span></div>
|
||
<div class="stat-change change-down">
|
||
<i class="fa fa-arrow-up"></i> 1.8% 相比上月
|
||
</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-ellipsis-v" style="margin-left: 10px;"></i>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container" id="purchase-trend"></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-ellipsis-v" style="margin-left: 10px;"></i>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container" id="inventory-status"></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-ellipsis-v" style="margin-left: 10px;"></i>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container" id="production-progress"></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-ellipsis-v" style="margin-left: 10px;"></i>
|
||
</div>
|
||
</div>
|
||
<div class="chart-container" id="supplier-rating"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最近采购订单表格 -->
|
||
<div class="chart-item col-12">
|
||
<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="table-container">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>订单号</th>
|
||
<th>供应商</th>
|
||
<th>商品名称</th>
|
||
<th>数量</th>
|
||
<th>单价</th>
|
||
<th>总金额</th>
|
||
<th>采购人</th>
|
||
<th>日期</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>PO20230601</td>
|
||
<td>电子元件有限公司</td>
|
||
<td>CPU-A123</td>
|
||
<td>500</td>
|
||
<td>¥350.00</td>
|
||
<td>¥175,000.00</td>
|
||
<td>张三</td>
|
||
<td>2023-06-15</td>
|
||
<td><span class="status-badge status-completed">已完成</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>PO20230602</td>
|
||
<td>塑料模具厂</td>
|
||
<td>外壳-B456</td>
|
||
<td>1000</td>
|
||
<td>¥45.00</td>
|
||
<td>¥45,000.00</td>
|
||
<td>李四</td>
|
||
<td>2023-06-15</td>
|
||
<td><span class="status-badge status-completed">已完成</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>PO20230603</td>
|
||
<td>电路板科技公司</td>
|
||
<td>PCB-C789</td>
|
||
<td>800</td>
|
||
<td>¥85.00</td>
|
||
<td>¥68,000.00</td>
|
||
<td>王五</td>
|
||
<td>2023-06-14</td>
|
||
<td><span class="status-badge status-processing">进行中</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>PO20230604</td>
|
||
<td>显示屏供应商</td>
|
||
<td>屏幕-D234</td>
|
||
<td>300</td>
|
||
<td>¥120.00</td>
|
||
<td>¥36,000.00</td>
|
||
<td>赵六</td>
|
||
<td>2023-06-14</td>
|
||
<td><span class="status-badge status-processing">进行中</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>PO20230605</td>
|
||
<td>电池供应商</td>
|
||
<td>电池-E567</td>
|
||
<td>1200</td>
|
||
<td>¥22.00</td>
|
||
<td>¥26,400.00</td>
|
||
<td>钱七</td>
|
||
<td>2023-06-13</td>
|
||
<td><span class="status-badge status-warning">待付款</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 库存状态列表 -->
|
||
<div class="chart-item col-12">
|
||
<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="inventory-list">
|
||
<div class="inventory-item">
|
||
<div class="inventory-info">
|
||
<div class="inventory-status status-healthy"></div>
|
||
<div>
|
||
<div class="inventory-name">CPU-A123</div>
|
||
<div class="inventory-id">ID: SP-001</div>
|
||
</div>
|
||
</div>
|
||
<div class="inventory-metrics">
|
||
<div class="inventory-status-text status-completed">充足</div>
|
||
<div>当前库存: 1250 / 安全库存: 500</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="inventory-item">
|
||
<div class="inventory-info">
|
||
<div class="inventory-status status-warning"></div>
|
||
<div>
|
||
<div class="inventory-name">外壳-B456</div>
|
||
<div class="inventory-id">ID: SP-002</div>
|
||
</div>
|
||
</div>
|
||
<div class="inventory-metrics">
|
||
<div class="inventory-status-text status-warning">低库存</div>
|
||
<div>当前库存: 320 / 安全库存: 500</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="inventory-item">
|
||
<div class="inventory-info">
|
||
<div class="inventory-status status-critical"></div>
|
||
<div>
|
||
<div class="inventory-name">PCB-C789</div>
|
||
<div class="inventory-id">ID: SP-003</div>
|
||
</div>
|
||
</div>
|
||
<div class="inventory-metrics">
|
||
<div class="inventory-status-text status-error">紧急补货</div>
|
||
<div>当前库存: 180 / 安全库存: 400</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="inventory-item">
|
||
<div class="inventory-info">
|
||
<div class="inventory-status status-healthy"></div>
|
||
<div>
|
||
<div class="inventory-name">屏幕-D234</div>
|
||
<div class="inventory-id">ID: SP-004</div>
|
||
</div>
|
||
</div>
|
||
<div class="inventory-metrics">
|
||
<div class="inventory-status-text status-completed">充足</div>
|
||
<div>当前库存: 850 / 安全库存: 300</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="inventory-item">
|
||
<div class="inventory-info">
|
||
<div class="inventory-status status-warning"></div>
|
||
<div>
|
||
<div class="inventory-name">电池-E567</div>
|
||
<div class="inventory-id">ID: SP-005</div>
|
||
</div>
|
||
</div>
|
||
<div class="inventory-metrics">
|
||
<div class="inventory-status-text status-warning">低库存</div>
|
||
<div>当前库存: 420 / 安全库存: 500</div>
|
||
</div>
|
||
</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>
|
||
<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;
|
||
$('#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 init = function () {
|
||
var $pageIframe = $('#pageIframe');
|
||
$pageIframe.css({
|
||
height: `${$win.height() - 150}px`
|
||
})
|
||
}
|
||
|
||
init();
|
||
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 purchaseChart = echarts.init(document.getElementById('purchase-trend'));
|
||
purchaseChart.setOption({
|
||
title: {
|
||
text: '近30天采购金额趋势',
|
||
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',
|
||
boundaryGap: false,
|
||
data: Array.from({length: 30}, (_, i) => `${i + 1}日`)
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '金额(元)',
|
||
min: 0,
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '订单数',
|
||
min: 0,
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '采购金额',
|
||
type: 'line',
|
||
data: Array.from({length: 30}, () => Math.floor(Math.random() * 100000) + 50000)
|
||
},
|
||
{
|
||
name: '订单数量',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 10)
|
||
}
|
||
]
|
||
});
|
||
|
||
// 库存状态饼图
|
||
const inventoryChart = echarts.init(document.getElementById('inventory-status'));
|
||
inventoryChart.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: 45, name: '充足'},
|
||
{value: 30, name: '低库存'},
|
||
{value: 15, name: '紧急补货'},
|
||
{value: 10, name: '超量库存'}
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
// 生产进度图表
|
||
const productionChart = echarts.init(document.getElementById('production-progress'));
|
||
productionChart.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: ['生产线A', '生产线B', '生产线C', '生产线D', '生产线E']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '数量',
|
||
min: 0
|
||
},
|
||
series: [
|
||
{
|
||
name: '计划产量',
|
||
type: 'bar',
|
||
data: [1200, 1500, 800, 1000, 900]
|
||
},
|
||
{
|
||
name: '实际产量',
|
||
type: 'bar',
|
||
data: [1150, 1420, 780, 980, 850]
|
||
}
|
||
]
|
||
});
|
||
|
||
// 供应商评分图表
|
||
const supplierChart = echarts.init(document.getElementById('supplier-rating'));
|
||
supplierChart.setOption({
|
||
title: {
|
||
text: '供应商评分',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#333',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: 10,
|
||
interval: 1
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['电子元件有限公司', '塑料模具厂', '电路板科技公司', '显示屏供应商', '电池供应商']
|
||
},
|
||
series: [
|
||
{
|
||
name: '质量评分',
|
||
type: 'bar',
|
||
data: [9.2, 8.7, 8.5, 9.0, 8.3]
|
||
},
|
||
{
|
||
name: '交货准时率',
|
||
type: 'bar',
|
||
data: [9.5, 8.9, 8.2, 8.8, 8.6]
|
||
},
|
||
{
|
||
name: '价格竞争力',
|
||
type: 'bar',
|
||
data: [8.7, 9.1, 8.9, 8.5, 9.0]
|
||
}
|
||
]
|
||
});
|
||
|
||
// 监听窗口大小变化，调整图表
|
||
window.addEventListener('resize', function () {
|
||
purchaseChart.resize();
|
||
inventoryChart.resize();
|
||
productionChart.resize();
|
||
supplierChart.resize();
|
||
});
|
||
|
||
// 刷新按钮事件
|
||
document.getElementById('refresh-btn').addEventListener('click', function () {
|
||
// 显示加载状态
|
||
this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 刷新中...';
|
||
this.disabled = true;
|
||
|
||
// 模拟数据刷新
|
||
setTimeout(() => {
|
||
// 更新采购趋势图
|
||
purchaseChart.setOption({
|
||
series: [
|
||
{
|
||
data: Array.from({length: 30}, () => Math.floor(Math.random() * 100000) + 50000)
|
||
},
|
||
{
|
||
data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 10)
|
||
}
|
||
]
|
||
});
|
||
|
||
// 更新库存状态饼图
|
||
inventoryChart.setOption({
|
||
series: [
|
||
{
|
||
data: [
|
||
{value: Math.floor(Math.random() * 20) + 40, name: '充足'},
|
||
{value: Math.floor(Math.random() * 20) + 25, name: '低库存'},
|
||
{value: Math.floor(Math.random() * 15) + 10, name: '紧急补货'},
|
||
{value: Math.floor(Math.random() * 15) + 5, name: '超量库存'}
|
||
]
|
||
}
|
||
]
|
||
});
|
||
|
||
// 更新生产进度图
|
||
productionChart.setOption({
|
||
series: [
|
||
{
|
||
data: [
|
||
Math.floor(Math.random() * 300) + 1000,
|
||
Math.floor(Math.random() * 300) + 1300,
|
||
Math.floor(Math.random() * 300) + 700,
|
||
Math.floor(Math.random() * 300) + 900,
|
||
Math.floor(Math.random() * 300) + 800
|
||
]
|
||
},
|
||
{
|
||
data: [
|
||
Math.floor(Math.random() * 300) + 900,
|
||
Math.floor(Math.random() * 300) + 1200,
|
||
Math.floor(Math.random() * 300) + 600,
|
||
Math.floor(Math.random() * 300) + 800,
|
||
Math.floor(Math.random() * 300) + 700
|
||
]
|
||
}
|
||
]
|
||
});
|
||
|
||
// 更新供应商评分图
|
||
supplierChart.setOption({
|
||
series: [
|
||
{
|
||
data: [
|
||
(Math.random() * 0.5 + 8.5).toFixed(1),
|
||
(Math.random() * 0.5 + 8.2).toFixed(1),
|
||
(Math.random() * 0.5 + 8.0).toFixed(1),
|
||
(Math.random() * 0.5 + 8.5).toFixed(1),
|
||
(Math.random() * 0.5 + 8.0).toFixed(1)
|
||
]
|
||
},
|
||
{
|
||
data: [
|
||
(Math.random() * 0.5 + 9.0).toFixed(1),
|
||
(Math.random() * 0.5 + 8.5).toFixed(1),
|
||
(Math.random() * 0.5 + 7.7).toFixed(1),
|
||
(Math.random() * 0.5 + 8.3).toFixed(1),
|
||
(Math.random() * 0.5 + 8.1).toFixed(1)
|
||
]
|
||
},
|
||
{
|
||
data: [
|
||
(Math.random() * 0.5 + 8.2).toFixed(1),
|
||
(Math.random() * 0.5 + 8.6).toFixed(1),
|
||
(Math.random() * 0.5 + 8.4).toFixed(1),
|
||
(Math.random() * 0.5 + 8.0).toFixed(1),
|
||
(Math.random() * 0.5 + 8.5).toFixed(1)
|
||
]
|
||
}
|
||
]
|
||
});
|
||
|
||
// 恢复按钮状态
|
||
this.innerHTML = '<i class="fa fa-refresh"></i> 刷新数据';
|
||
this.disabled = false;
|
||
|
||
// 显示刷新成功提示
|
||
const notification = document.createElement('div');
|
||
notification.className = 'notification';
|
||
notification.style.cssText = 'position: fixed; bottom: 20px; right: 20px; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000;';
|
||
notification.innerHTML = '<i class="fa fa-check-circle"></i> 数据刷新成功';
|
||
document.body.appendChild(notification);
|
||
|
||
// 3秒后移除提示
|
||
setTimeout(() => {
|
||
notification.style.opacity = '0';
|
||
notification.style.transition = 'opacity 0.5s';
|
||
setTimeout(() => {
|
||
document.body.removeChild(notification);
|
||
}, 500);
|
||
}, 3000);
|
||
}, 1000);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|