1587 lines
63 KiB
HTML
1587 lines
63 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: #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-running {
|
|
background-color: #e8f5e9;
|
|
color: #388E3C;
|
|
}
|
|
|
|
.status-warning {
|
|
background-color: #fff3e0;
|
|
color: #FF9800;
|
|
}
|
|
|
|
.status-stopped {
|
|
background-color: #ffebee;
|
|
color: #f44336;
|
|
}
|
|
|
|
.status-maintenance {
|
|
background-color: #e3f2fd;
|
|
color: #1976D2;
|
|
}
|
|
|
|
.status-pending {
|
|
background-color: #f3e5f5;
|
|
color: #9C27B0;
|
|
}
|
|
|
|
.status-draft {
|
|
background-color: #ede7f6;
|
|
color: #512DA8;
|
|
}
|
|
|
|
.status-published {
|
|
background-color: #e8f5e9;
|
|
color: #2E7D32;
|
|
}
|
|
|
|
.status-closed {
|
|
background-color: #f5f5f5;
|
|
color: #616161;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 100%;
|
|
background-color: #1E88E5;
|
|
}
|
|
|
|
/* 设备状态 */
|
|
.device-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.device-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.device-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.device-status {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-green {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
.status-yellow {
|
|
background-color: #FF9800;
|
|
}
|
|
|
|
.status-red {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-blue {
|
|
background-color: #1E88E5;
|
|
}
|
|
|
|
.device-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.device-id {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
.device-metrics {
|
|
text-align: right;
|
|
}
|
|
|
|
.device-status-text {
|
|
font-size: 0.8rem;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
display: inline-block;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
/* 文档列表 */
|
|
.document-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.document-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.document-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.document-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: #1E88E5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
|
|
.document-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.document-type {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
.document-meta {
|
|
text-align: right;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
/* 报表列表 */
|
|
.report-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.report-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.report-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.report-type {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
.report-date {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
/* 公告列表 */
|
|
.announcement-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.announcement-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.announcement-title {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.announcement-date {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@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-900865bb-edef-4f2f-b800-4ba987eb959e" data-mod-id="df12541d-7888-4086-a850-d26bd88b318a" data-url="route/pages/195b9f/list.html"><i class="fa fa-list"></i> 用户管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-6df0b870-d8ac-4c6f-9672-15fc03e9167e" data-mod-id="2200d318-3f25-4167-b553-46f032d02270" data-url="route/pages/984ef4/list.html"><i class="fa fa-list"></i> 角色管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-d5748cc4-73bc-4ce2-9b6c-ffab11fad014" data-mod-id="3e8e4c92-df54-43f9-91ab-4a8380ae2c43" data-url="route/pages/1adc2c/list.html"><i class="fa fa-list"></i> 文档管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-5924f2e2-d57c-4d06-8d9a-4f091021d519" data-mod-id="f91ff968-13c5-4095-8768-b045d2b6fb84" data-url="route/pages/c9a5c4/list.html"><i class="fa fa-list"></i> 信息发布</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-fbdadf23-2b2e-48c1-8960-18ad3fe06afb" data-mod-id="0cfeff00-7a58-42c9-a929-d02c2cb7b732" data-url="route/pages/9129f2/list.html"><i class="fa fa-list"></i> 信息编辑</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-87ee5167-dda3-4d5d-bce4-4a1d4cc79650" data-mod-id="22964eef-82e8-4558-8745-7d236ba4bff8" data-url="route/pages/368627/list.html"><i class="fa fa-list"></i> 信息删除</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-f7908b86-134a-4f85-a55f-58b113ff2e9b" data-mod-id="b488dddd-abfe-443c-85fd-a0b0650e034c" data-url="route/pages/e2a1e9/list.html"><i class="fa fa-list"></i> 信息查询</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-27b17e2c-c3b0-434e-82db-a47da9f1c8b1" data-mod-id="71e4a635-643a-40df-8a23-121387a6270d" data-url="route/pages/217931/list.html"><i class="fa fa-list"></i> 数据导出</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-e14b865a-fa56-44ec-adc3-2f0a32f12312" data-mod-id="f5360a93-1f91-469a-873f-d2a373184e6d" data-url="route/pages/40a4dd/list.html"><i class="fa fa-list"></i> 报表生成</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-c8e9a44c-9055-4a40-b22f-dc51ab1e9809" data-mod-id="5a74cc9a-2c6a-4dfa-b9e4-7f678292ab28" data-url="route/pages/3492b7/list.html"><i class="fa fa-list"></i> API接口</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 layui-hide layui-show-sm-inline-block">
|
|
<a href="javascript:void(0);">管理员</a>
|
|
<dl class="layui-nav-child">
|
|
<dd><a href="javascript:void(0);">退出</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: #4CAF50;">
|
|
<i class="fa fa-desktop"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">128</div>
|
|
<div class="stat-change change-up">
|
|
<i class="fa fa-arrow-up"></i> 5.3% 相比昨日
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文档数量卡片 -->
|
|
<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-file-text-o"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">245</div>
|
|
<div class="stat-change change-up">
|
|
<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: #FF9800;">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">32</div>
|
|
<div class="stat-change change-down">
|
|
<i class="fa fa-arrow-down"></i> 2.1% 相比昨日
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 生产完成率卡片 -->
|
|
<div class="stat-card">
|
|
<div class="stat-header">
|
|
<div class="stat-title">生产完成率</div>
|
|
<div class="stat-icon" style="background-color: #9C27B0;">
|
|
<i class="fa fa-cubes"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">86.7<span style="font-size: 1rem;">%</span></div>
|
|
<div class="stat-change change-up">
|
|
<i class="fa fa-arrow-up"></i> 2.1% 相比昨日
|
|
</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-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="device-status-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-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="document-type-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-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="user-role-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-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="temperature-chart"></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-filter"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="production-order-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="device-list">
|
|
<div class="device-item">
|
|
<div class="device-info">
|
|
<div class="device-status status-green"></div>
|
|
<div>
|
|
<div class="device-name">生产线A-主电机</div>
|
|
<div class="device-id">SB-001</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-metrics">
|
|
<div class="device-status-text status-running">运行中</div>
|
|
<div>温度: 58°C | 功率: 25.6kW</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-info">
|
|
<div class="device-status status-green"></div>
|
|
<div>
|
|
<div class="device-name">生产线B-主电机</div>
|
|
<div class="device-id">SB-002</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-metrics">
|
|
<div class="device-status-text status-running">运行中</div>
|
|
<div>温度: 62°C | 功率: 28.1kW</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-info">
|
|
<div class="device-status status-yellow"></div>
|
|
<div>
|
|
<div class="device-name">生产线C-主电机</div>
|
|
<div class="device-id">SB-003</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-metrics">
|
|
<div class="device-status-text status-warning">警告</div>
|
|
<div>温度: 78°C | 功率: 31.5kW</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-info">
|
|
<div class="device-status status-green"></div>
|
|
<div>
|
|
<div class="device-name">冷却系统-泵1</div>
|
|
<div class="device-id">SB-004</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-metrics">
|
|
<div class="device-status-text status-running">运行中</div>
|
|
<div>温度: 45°C | 功率: 11.2kW</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-item">
|
|
<div class="device-info">
|
|
<div class="device-status status-red"></div>
|
|
<div>
|
|
<div class="device-name">冷却系统-泵2</div>
|
|
<div class="device-id">SB-005</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-metrics">
|
|
<div class="device-status-text status-stopped">已停止</div>
|
|
<div>温度: 25°C | 功率: 0kW</div>
|
|
</div>
|
|
</div>
|
|
</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-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="document-list">
|
|
<div class="document-item">
|
|
<div class="document-info">
|
|
<div class="document-icon"><i class="fa fa-file-text-o"></i></div>
|
|
<div>
|
|
<div class="document-title">设备维护手册 V2.0</div>
|
|
<div class="document-type">PDF文档</div>
|
|
</div>
|
|
</div>
|
|
<div class="document-meta">
|
|
<div>创建人: 技术部</div>
|
|
<div>2023-06-16</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-item">
|
|
<div class="document-info">
|
|
<div class="document-icon"><i class="fa fa-file-excel-o"></i></div>
|
|
<div>
|
|
<div class="document-title">月度生产报表</div>
|
|
<div class="document-type">Excel文档</div>
|
|
</div>
|
|
</div>
|
|
<div class="document-meta">
|
|
<div>创建人: 生产部</div>
|
|
<div>2023-06-15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-item">
|
|
<div class="document-info">
|
|
<div class="document-icon"><i class="fa fa-file-powerpoint-o"></i></div>
|
|
<div>
|
|
<div class="document-title">新产品研发计划</div>
|
|
<div class="document-type">PPT文档</div>
|
|
</div>
|
|
</div>
|
|
<div class="document-meta">
|
|
<div>创建人: 研发部</div>
|
|
<div>2023-06-14</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-item">
|
|
<div class="document-info">
|
|
<div class="document-icon"><i class="fa fa-file-text-o"></i></div>
|
|
<div>
|
|
<div class="document-title">安全操作规范</div>
|
|
<div class="document-type">PDF文档</div>
|
|
</div>
|
|
</div>
|
|
<div class="document-meta">
|
|
<div>创建人: 安全部</div>
|
|
<div>2023-06-12</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-item">
|
|
<div class="document-info">
|
|
<div class="document-icon"><i class="fa fa-file-word-o"></i></div>
|
|
<div>
|
|
<div class="document-title">质量检测标准</div>
|
|
<div class="document-type">Word文档</div>
|
|
</div>
|
|
</div>
|
|
<div class="document-meta">
|
|
<div>创建人: 质检部</div>
|
|
<div>2023-06-10</div>
|
|
</div>
|
|
</div>
|
|
</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-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="order-list">
|
|
<div class="order-item">
|
|
<div>
|
|
<div class="device-name">订单 #ORD-20230601</div>
|
|
<div class="device-id">产品: 智能控制器</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-running">生产中</div>
|
|
<div class="order-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 85%;"></div>
|
|
</div>
|
|
<div class="text-right">85%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-item">
|
|
<div>
|
|
<div class="device-name">订单 #ORD-20230602</div>
|
|
<div class="device-id">产品: 工业传感器</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-running">生产中</div>
|
|
<div class="order-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 62%;"></div>
|
|
</div>
|
|
<div class="text-right">62%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-item">
|
|
<div>
|
|
<div class="device-name">订单 #ORD-20230603</div>
|
|
<div class="device-id">产品: 电源模块</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-pending">计划中</div>
|
|
<div class="order-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 15%;"></div>
|
|
</div>
|
|
<div class="text-right">15%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-item">
|
|
<div>
|
|
<div class="device-name">订单 #ORD-20230604</div>
|
|
<div class="device-id">产品: 控制面板</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-running">生产中</div>
|
|
<div class="order-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 93%;"></div>
|
|
</div>
|
|
<div class="text-right">93%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-item">
|
|
<div>
|
|
<div class="device-name">订单 #ORD-20230605</div>
|
|
<div class="device-id">产品: 驱动器</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-stopped">已暂停</div>
|
|
<div class="order-progress">
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 45%;"></div>
|
|
</div>
|
|
<div class="text-right">45%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="report-list">
|
|
<div class="report-item">
|
|
<div>
|
|
<div class="report-title">设备运行周报</div>
|
|
<div class="report-type">PDF格式</div>
|
|
</div>
|
|
<div>
|
|
<div class="report-date">2023-06-16</div>
|
|
<div class="status-badge status-published">已发布</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-item">
|
|
<div>
|
|
<div class="report-title">能耗分析月报</div>
|
|
<div class="report-type">Excel格式</div>
|
|
</div>
|
|
<div>
|
|
<div class="report-date">2023-06-15</div>
|
|
<div class="status-badge status-published">已发布</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-item">
|
|
<div>
|
|
<div class="report-title">生产效率分析</div>
|
|
<div class="report-type">PPT格式</div>
|
|
</div>
|
|
<div>
|
|
<div class="report-date">2023-06-12</div>
|
|
<div class="status-badge status-published">已发布</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-item">
|
|
<div>
|
|
<div class="report-title">质量检测报告</div>
|
|
<div class="report-type">Word格式</div>
|
|
</div>
|
|
<div>
|
|
<div class="report-date">2023-06-10</div>
|
|
<div class="status-badge status-draft">草稿</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="report-item">
|
|
<div>
|
|
<div class="report-title">安全检查报告</div>
|
|
<div class="report-type">PDF格式</div>
|
|
</div>
|
|
<div>
|
|
<div class="report-date">2023-06-08</div>
|
|
<div class="status-badge status-published">已发布</div>
|
|
</div>
|
|
</div>
|
|
</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-plus"></i>
|
|
<i class="fa fa-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="announcement-list">
|
|
<div class="announcement-item">
|
|
<div>
|
|
<div class="announcement-title">关于系统升级的通知</div>
|
|
<div class="announcement-date">2023-06-16</div>
|
|
</div>
|
|
<div>
|
|
<span class="status-badge status-published">已发布</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="announcement-item">
|
|
<div>
|
|
<div class="announcement-title">设备预防性维护计划</div>
|
|
<div class="announcement-date">2023-06-15</div>
|
|
</div>
|
|
<div>
|
|
<span class="status-badge status-published">已发布</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="announcement-item">
|
|
<div>
|
|
<div class="announcement-title">安全生产月活动安排</div>
|
|
<div class="announcement-date">2023-06-12</div>
|
|
</div>
|
|
<div>
|
|
<span class="status-badge status-published">已发布</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="announcement-item">
|
|
<div>
|
|
<div class="announcement-title">新产品上线通知</div>
|
|
<div class="announcement-date">2023-06-10</div>
|
|
</div>
|
|
<div>
|
|
<span class="status-badge status-published">已发布</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="announcement-item">
|
|
<div>
|
|
<div class="announcement-title">端午节放假安排</div>
|
|
<div class="announcement-date">2023-06-08</div>
|
|
</div>
|
|
<div>
|
|
<span class="status-badge status-published">已发布</span>
|
|
</div>
|
|
</div>
|
|
</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-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>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>admin</td>
|
|
<td>管理员</td>
|
|
<td>系统管理员</td>
|
|
<td><span class="status-badge status-running">在线</span></td>
|
|
<td>2023-06-16 15:30</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tech_zhang</td>
|
|
<td>张三</td>
|
|
<td>技术工程师</td>
|
|
<td><span class="status-badge status-running">在线</span></td>
|
|
<td>2023-06-16 15:20</td>
|
|
</tr>
|
|
<tr>
|
|
<td>prod_li</td>
|
|
<td>李四</td>
|
|
<td>生产主管</td>
|
|
<td><span class="status-badge status-running">在线</span></td>
|
|
<td>2023-06-16 15:15</td>
|
|
</tr>
|
|
<tr>
|
|
<td>maintain_wang</td>
|
|
<td>王五</td>
|
|
<td>维修工程师</td>
|
|
<td><span class="status-badge status-stopped">离线</span></td>
|
|
<td>2023-06-16 12:30</td>
|
|
</tr>
|
|
<tr>
|
|
<td>quality_zhou</td>
|
|
<td>赵六</td>
|
|
<td>质量检测员</td>
|
|
<td><span class="status-badge status-running">在线</span></td>
|
|
<td>2023-06-16 15:00</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();
|
|
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 deviceStatusChart = echarts.init(document.getElementById('device-status-chart'));
|
|
deviceStatusChart.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: 128, name: '运行中'},
|
|
{value: 18, name: '警告'},
|
|
{value: 12, name: '已停止'},
|
|
{value: 6, name: '维护中'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 文档类型分布图表
|
|
const documentTypeChart = echarts.init(document.getElementById('document-type-chart'));
|
|
documentTypeChart.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: 85, name: '技术文档'},
|
|
{value: 60, name: '操作手册'},
|
|
{value: 45, name: '质量报告'},
|
|
{value: 30, name: '生产计划'},
|
|
{value: 25, name: '安全规范'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 用户角色分布图表
|
|
const userRoleChart = echarts.init(document.getElementById('user-role-chart'));
|
|
userRoleChart.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: 5, name: '系统管理员'},
|
|
{value: 12, name: '技术工程师'},
|
|
{value: 8, name: '生产主管'},
|
|
{value: 10, name: '维修工程师'},
|
|
{value: 7, name: '质量检测员'},
|
|
{value: 40, name: '操作员'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 设备温度监控图表
|
|
const temperatureChart = echarts.init(document.getElementById('temperature-chart'));
|
|
temperatureChart.setOption({
|
|
title: {
|
|
text: '设备温度监控',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['生产线A', '生产线B', '生产线C', '冷却系统-泵1', '冷却系统-泵2'],
|
|
top: '10%',
|
|
left: 'center'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '温度 (°C)',
|
|
min: 0,
|
|
max: 100,
|
|
axisLabel: {
|
|
formatter: '{value} °C'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '生产线A',
|
|
type: 'line',
|
|
data: [52, 53, 55, 58, 56, 53]
|
|
},
|
|
{
|
|
name: '生产线B',
|
|
type: 'line',
|
|
data: [55, 56, 59, 62, 60, 57]
|
|
},
|
|
{
|
|
name: '生产线C',
|
|
type: 'line',
|
|
data: [60, 62, 68, 75, 78, 72]
|
|
},
|
|
{
|
|
name: '冷却系统-泵1',
|
|
type: 'line',
|
|
data: [42, 43, 45, 47, 46, 44]
|
|
},
|
|
{
|
|
name: '冷却系统-泵2',
|
|
type: 'line',
|
|
data: [38, 39, 41, 43, 42, 40]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 生产订单进度图表
|
|
const productionOrderChart = echarts.init(document.getElementById('production-order-chart'));
|
|
productionOrderChart.setOption({
|
|
title: {
|
|
text: '生产订单进度',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['计划产量', '实际产量', '完成率'],
|
|
top: '10%',
|
|
left: 'center'
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['订单1', '订单2', '订单3', '订单4', '订单5']
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '数量',
|
|
min: 0
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '完成率(%)',
|
|
min: 0,
|
|
max: 100,
|
|
axisLabel: {
|
|
formatter: '{value}%'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '计划产量',
|
|
type: 'bar',
|
|
data: [1200, 1500, 1800, 2000, 1600]
|
|
},
|
|
{
|
|
name: '实际产量',
|
|
type: 'bar',
|
|
data: [1020, 1425, 1440, 1900, 1360]
|
|
},
|
|
{
|
|
name: '完成率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [85, 95, 80, 95, 85],
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
formatter: '{c}%'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 窗口大小改变时重绘图表
|
|
window.addEventListener('resize', function() {
|
|
deviceStatusChart.resize();
|
|
documentTypeChart.resize();
|
|
userRoleChart.resize();
|
|
temperatureChart.resize();
|
|
productionOrderChart.resize();
|
|
});
|
|
|
|
// 刷新按钮功能
|
|
document.getElementById('refresh-btn').addEventListener('click', function() {
|
|
// 显示加载状态
|
|
this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 刷新中...';
|
|
this.disabled = true;
|
|
|
|
// 模拟数据刷新
|
|
setTimeout(() => {
|
|
// 更新设备状态分布数据
|
|
deviceStatusChart.setOption({
|
|
series: [{
|
|
data: [
|
|
{value: Math.floor(Math.random() * 20) + 120, name: '运行中'},
|
|
{value: Math.floor(Math.random() * 5) + 15, name: '警告'},
|
|
{value: Math.floor(Math.random() * 5) + 10, name: '已停止'},
|
|
{value: Math.floor(Math.random() * 3) + 5, name: '维护中'}
|
|
]
|
|
}]
|
|
});
|
|
|
|
// 更新文档类型分布数据
|
|
documentTypeChart.setOption({
|
|
series: [{
|
|
data: [
|
|
{value: Math.floor(Math.random() * 20) + 80, name: '技术文档'},
|
|
{value: Math.floor(Math.random() * 15) + 55, name: '操作手册'},
|
|
{value: Math.floor(Math.random() * 10) + 40, name: '质量报告'},
|
|
{value: Math.floor(Math.random() * 8) + 25, name: '生产计划'},
|
|
{value: Math.floor(Math.random() * 7) + 20, name: '安全规范'}
|
|
]
|
|
}]
|
|
});
|
|
|
|
// 更新用户角色分布数据
|
|
userRoleChart.setOption({
|
|
series: [{
|
|
data: [
|
|
{value: 5, name: '系统管理员'},
|
|
{value: Math.floor(Math.random() * 5) + 10, name: '技术工程师'},
|
|
{value: Math.floor(Math.random() * 3) + 6, name: '生产主管'},
|
|
{value: Math.floor(Math.random() * 4) + 8, name: '维修工程师'},
|
|
{value: Math.floor(Math.random() * 3) + 5, name: '质量检测员'},
|
|
{value: Math.floor(Math.random() * 10) + 35, name: '操作员'}
|
|
]
|
|
}]
|
|
});
|
|
|
|
// 更新设备温度监控数据
|
|
temperatureChart.setOption({
|
|
series: [
|
|
{data: Array.from({length: 6}, () => Math.floor(Math.random() * 10) + 50)},
|
|
{data: Array.from({length: 6}, () => Math.floor(Math.random() * 10) + 55)},
|
|
{data: Array.from({length: 6}, () => Math.floor(Math.random() * 15) + 60)},
|
|
{data: Array.from({length: 6}, () => Math.floor(Math.random() * 8) + 40)},
|
|
{data: Array.from({length: 6}, () => Math.floor(Math.random() * 8) + 35)}
|
|
]
|
|
});
|
|
|
|
// 更新生产订单进度数据
|
|
productionOrderChart.setOption({
|
|
series: [
|
|
{data: [1200, 1500, 1800, 2000, 1600]},
|
|
{data: Array.from({length: 5}, () => Math.floor(Math.random() * 300) + 1200)},
|
|
{
|
|
data: Array.from({length: 5}, () => Math.floor(Math.random() * 15) + 80),
|
|
label: {formatter: '{c}%'}
|
|
}
|
|
]
|
|
});
|
|
|
|
// 恢复按钮状态
|
|
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>
|