1386 lines
54 KiB
HTML
1386 lines
54 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/index7/index7.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 备件库存 */
|
|
.spare-parts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.spare-part-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.part-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.part-quantity {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.quantity-low {
|
|
color: #f44336;
|
|
}
|
|
|
|
.quantity-medium {
|
|
color: #FF9800;
|
|
}
|
|
|
|
.quantity-high {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
/* 预测维护 */
|
|
.maintenance-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.maintenance-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.maintenance-date {
|
|
font-size: 0.9rem;
|
|
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 class="system">
|
|
<div class="left">
|
|
<div class="head">
|
|
<div class='photo'>头像</div>
|
|
<h5>账号名称</h5>
|
|
<ul class="layui-nav layui-layout-right">
|
|
<!-- <li class="layui-nav-item ">-->
|
|
<!-- <div class="top-title-box">-->
|
|
<!-- <div class="layui-icon layui-icon-set-fill" style="font-size: 20px;margin-right: 10px;"></div>-->
|
|
<!-- <div class="topTitle">资源配置-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </li>-->
|
|
<li class="layui-nav-item topTitlec" style="margin-right: 20px;margin-left: 20px;" id="accountManageBtn">
|
|
<div class="top-title-box">
|
|
<div class="layui-icon layui-icon-template-1" style="font-size: 20px;margin-right: 10px;"></div>
|
|
<div class="topTitle">账号管理</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>
|
|
<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-0875e1ab-364c-4d02-b3c2-33ce45e012f7"
|
|
data-mod-id="d0fe5d5a-f43c-45e3-85d1-7b29ff3fb4d7" data-url="route/pages/578bcf/list.html"><i
|
|
class="fa fa-desktop"></i> 设备状态监控</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-a9e7bf33-7b0c-495c-b80e-fc0ab8b7ef5f"
|
|
data-mod-id="e8eb8214-3620-404a-9990-ce2491588bec" data-url="route/pages/6a4b12/list.html"><i
|
|
class="fa fa-bolt"></i> 能耗监测</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-8652e631-9d59-476e-805c-5f1f38ac0282"
|
|
data-mod-id="b4aa06e5-0a3d-4f0d-ab81-4cfd776393c7" data-url="route/pages/6d8bdd/list.html"><i
|
|
class="fa fa-database"></i> 生产数据收集</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-c60947e7-c5de-4761-8076-25c15e00e055"
|
|
data-mod-id="7c22c709-6224-440a-b05e-ffbf7aec7e16" data-url="route/pages/f57994/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-50213659-2ce6-4451-99f3-78b547021664"
|
|
data-mod-id="bf8aaf44-5e24-4055-b17b-ec636d743b69" data-url="route/pages/abeecd/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-6970dfeb-551f-4cb8-8398-b74b7fc810b5"
|
|
data-mod-id="aa7b4ca4-781d-4eba-97cb-9b37ac06f8cd" data-url="route/pages/411ed1/list.html"><i
|
|
class="fa fa-tachometer"></i> 设备效率评估</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-db9f248c-53dc-4e0d-a0ed-ba3944e54d4f"
|
|
data-mod-id="4d10e07b-82c9-4948-b61e-65e2911019b9" data-url="route/pages/73cbcb/list.html"><i
|
|
class="fa fa-shield"></i> 安全监测</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-978c40b4-8f3e-4a2d-9eb7-800ef24c79eb"
|
|
data-mod-id="cfa8ee6c-d967-4e41-adbb-4a71c268d376" data-url="route/pages/730fc4/list.html"><i
|
|
class="fa fa-cubes"></i> 备件管理</a>
|
|
</li>
|
|
<li class="layui-nav-item layui-nav-itemed">
|
|
<a href="javascript:void(0);" class="menu-item" id="menu-6ce26b20-0b3c-4894-9d68-24d660fe0a39"
|
|
data-mod-id="df465f2b-d7ee-439e-be69-e99623ec8273" data-url="route/pages/b3688f/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-3b54387f-2c81-453f-aca0-a48603c86c12"
|
|
data-mod-id="ac5ff21c-7f40-48a1-85d3-33a53986ec5d" data-url="route/pages/5502ad/list.html"><i
|
|
class="fa fa-user-secret"></i> 用户访问控制</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">
|
|
<div class="row1">
|
|
<h4>工厂设备运行监控管理系统</h4>
|
|
</div>
|
|
<div class="row2">
|
|
<div class="headline">
|
|
|
|
<h5>欢迎使用工厂设备运行监控管理系统</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="content">
|
|
<!-- 主内容区 -->
|
|
<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: #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: #f44336;">
|
|
<i class="fa fa-exclamation-triangle"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">2.7<span style="font-size: 1rem;">%</span></div>
|
|
<div class="stat-change change-down">
|
|
<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-bolt"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">12,540<span style="font-size: 1rem;">kWh</span></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: #1E88E5;">
|
|
<i class="fa fa-cubes"></i>
|
|
</div>
|
|
</div>
|
|
<div class="stat-value">328</div>
|
|
<div class="stat-change change-up">
|
|
<i class="fa fa-arrow-up"></i> 8 相比上周
|
|
</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-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="energy-trend-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-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-ellipsis-v" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container" id="fault-type-chart"></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>温度(°C)</th>
|
|
<th>电流(A)</th>
|
|
<th>电压(V)</th>
|
|
<th>功率(kW)</th>
|
|
<th>故障次数</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>生产线A-主电机</td>
|
|
<td>SB-001</td>
|
|
<td><span class="status-badge status-running">运行中</span></td>
|
|
<td>18.5</td>
|
|
<td>58</td>
|
|
<td>42.5</td>
|
|
<td>380</td>
|
|
<td>25.6</td>
|
|
<td>0</td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm"><i class="fa fa-eye"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>生产线B-主电机</td>
|
|
<td>SB-002</td>
|
|
<td><span class="status-badge status-running">运行中</span></td>
|
|
<td>16.2</td>
|
|
<td>62</td>
|
|
<td>45.8</td>
|
|
<td>380</td>
|
|
<td>28.1</td>
|
|
<td>1</td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm"><i class="fa fa-eye"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>生产线C-主电机</td>
|
|
<td>SB-003</td>
|
|
<td><span class="status-badge status-warning">警告</span></td>
|
|
<td>14.8</td>
|
|
<td>78</td>
|
|
<td>52.3</td>
|
|
<td>378</td>
|
|
<td>31.5</td>
|
|
<td>2</td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm"><i class="fa fa-eye"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>冷却系统-泵1</td>
|
|
<td>SB-004</td>
|
|
<td><span class="status-badge status-running">运行中</span></td>
|
|
<td>20.0</td>
|
|
<td>45</td>
|
|
<td>18.7</td>
|
|
<td>380</td>
|
|
<td>11.2</td>
|
|
<td>0</td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm"><i class="fa fa-eye"></i></button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>冷却系统-泵2</td>
|
|
<td>SB-005</td>
|
|
<td><span class="status-badge status-stopped">已停止</span></td>
|
|
<td>0</td>
|
|
<td>25</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>0</td>
|
|
<td>3</td>
|
|
<td>
|
|
<button class="btn btn-default btn-sm"><i class="fa fa-eye"></i></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</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="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-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="spare-parts-list">
|
|
<div class="spare-part-item">
|
|
<div>
|
|
<div class="part-name">电机轴承 6208</div>
|
|
<div class="part-id">BJ-001</div>
|
|
</div>
|
|
<div>
|
|
<div class="part-quantity quantity-high">库存: 35</div>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 87%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spare-part-item">
|
|
<div>
|
|
<div class="part-name">皮带 1000L</div>
|
|
<div class="part-id">BJ-002</div>
|
|
</div>
|
|
<div>
|
|
<div class="part-quantity quantity-medium">库存: 18</div>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 45%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spare-part-item">
|
|
<div>
|
|
<div class="part-name">接触器 CJX2-6511</div>
|
|
<div class="part-id">BJ-003</div>
|
|
</div>
|
|
<div>
|
|
<div class="part-quantity quantity-high">库存: 27</div>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 68%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spare-part-item">
|
|
<div>
|
|
<div class="part-name">熔断器 RT18-32</div>
|
|
<div class="part-id">BJ-004</div>
|
|
</div>
|
|
<div>
|
|
<div class="part-quantity quantity-low">库存: 7</div>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 17%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="spare-part-item">
|
|
<div>
|
|
<div class="part-name">PLC模块 EM231</div>
|
|
<div class="part-id">BJ-005</div>
|
|
</div>
|
|
<div>
|
|
<div class="part-quantity quantity-medium">库存: 12</div>
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 30%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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="maintenance-list">
|
|
<div class="maintenance-item">
|
|
<div>
|
|
<div class="device-name">生产线A-主电机</div>
|
|
<div class="maintenance-date">预计维护时间: 2023-06-20</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-maintenance">计划维护</div>
|
|
<div>维护内容: 定期检查和润滑</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="maintenance-item">
|
|
<div>
|
|
<div class="device-name">生产线C-主电机</div>
|
|
<div class="maintenance-date">预计维护时间: 2023-06-18</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-warning">紧急维护</div>
|
|
<div>维护内容: 温度过高检查</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="maintenance-item">
|
|
<div>
|
|
<div class="device-name">冷却系统-泵2</div>
|
|
<div class="maintenance-date">预计维护时间: 2023-06-17</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-stopped">故障维修</div>
|
|
<div>维护内容: 电机故障修复</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="maintenance-item">
|
|
<div>
|
|
<div class="device-name">生产线B-主电机</div>
|
|
<div class="maintenance-date">预计维护时间: 2023-06-25</div>
|
|
</div>
|
|
<div>
|
|
<div class="device-status-text status-maintenance">计划维护</div>
|
|
<div>维护内容: 定期检查和清洁</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() - 165}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 energyTrendChart = echarts.init(document.getElementById('energy-trend-chart'));
|
|
energyTrendChart.setOption({
|
|
title: {
|
|
text: '近30天能耗趋势',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['总能耗(kWh)', '平均功率(kW)'],
|
|
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: '能耗(kWh)',
|
|
min: 0,
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '功率(kW)',
|
|
min: 0,
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '总能耗(kWh)',
|
|
type: 'line',
|
|
data: Array.from({length: 30}, () => Math.floor(Math.random() * 5000) + 10000)
|
|
},
|
|
{
|
|
name: '平均功率(kW)',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 40)
|
|
}
|
|
]
|
|
});
|
|
|
|
// 设备温度监控图表
|
|
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',
|
|
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '温度(°C)',
|
|
min: 0,
|
|
max: 100
|
|
},
|
|
series: [
|
|
{
|
|
name: '生产线A-主电机',
|
|
type: 'line',
|
|
data: [45, 48, 55, 58, 56, 50]
|
|
},
|
|
{
|
|
name: '生产线B-主电机',
|
|
type: 'line',
|
|
data: [47, 50, 59, 62, 60, 53]
|
|
},
|
|
{
|
|
name: '生产线C-主电机',
|
|
type: 'line',
|
|
data: [50, 55, 70, 78, 75, 65]
|
|
},
|
|
{
|
|
name: '冷却系统-泵1',
|
|
type: 'line',
|
|
data: [38, 40, 42, 45, 43, 39]
|
|
},
|
|
{
|
|
name: '冷却系统-泵2',
|
|
type: 'line',
|
|
data: [25, 25, 25, 25, 25, 25]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 设备故障类型图表
|
|
const faultTypeChart = echarts.init(document.getElementById('fault-type-chart'));
|
|
faultTypeChart.setOption({
|
|
title: {
|
|
text: '设备故障类型分布',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#333',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
min: 0
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['电气故障', '机械故障', '传感器故障', '控制系统故障', '其他故障']
|
|
},
|
|
series: [
|
|
{
|
|
name: '故障次数',
|
|
type: 'bar',
|
|
data: [28, 22, 15, 10, 5]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 监听窗口大小变化，调整图表
|
|
window.addEventListener('resize', function () {
|
|
deviceStatusChart.resize();
|
|
energyTrendChart.resize();
|
|
temperatureChart.resize();
|
|
faultTypeChart.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() * 10) + 10, name: '警告'},
|
|
{value: Math.floor(Math.random() * 5) + 5, name: '已停止'},
|
|
{value: Math.floor(Math.random() * 5) + 3, name: '维护中'}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 更新能耗趋势图表
|
|
energyTrendChart.setOption({
|
|
series: [
|
|
{
|
|
data: Array.from({length: 30}, () => Math.floor(Math.random() * 5000) + 10000)
|
|
},
|
|
{
|
|
data: Array.from({length: 30}, () => Math.floor(Math.random() * 20) + 40)
|
|
}
|
|
]
|
|
});
|
|
|
|
// 更新温度监控图表
|
|
temperatureChart.setOption({
|
|
series: [
|
|
{
|
|
data: [
|
|
Math.floor(Math.random() * 10) + 40,
|
|
Math.floor(Math.random() * 10) + 45,
|
|
Math.floor(Math.random() * 10) + 50,
|
|
Math.floor(Math.random() * 10) + 55,
|
|
Math.floor(Math.random() * 10) + 50,
|
|
Math.floor(Math.random() * 10) + 45
|
|
]
|
|
},
|
|
{
|
|
data: [
|
|
Math.floor(Math.random() * 10) + 45,
|
|
Math.floor(Math.random() * 10) + 50,
|
|
Math.floor(Math.random() * 10) + 55,
|
|
Math.floor(Math.random() * 10) + 60,
|
|
Math.floor(Math.random() * 10) + 55,
|
|
Math.floor(Math.random() * 10) + 50
|
|
]
|
|
},
|
|
{
|
|
data: [
|
|
Math.floor(Math.random() * 15) + 50,
|
|
Math.floor(Math.random() * 15) + 55,
|
|
Math.floor(Math.random() * 15) + 65,
|
|
Math.floor(Math.random() * 15) + 75,
|
|
Math.floor(Math.random() * 15) + 70,
|
|
Math.floor(Math.random() * 15) + 60
|
|
]
|
|
},
|
|
{
|
|
data: [
|
|
Math.floor(Math.random() * 8) + 35,
|
|
Math.floor(Math.random() * 8) + 38,
|
|
Math.floor(Math.random() * 8) + 40,
|
|
Math.floor(Math.random() * 8) + 45,
|
|
Math.floor(Math.random() * 8) + 42,
|
|
Math.floor(Math.random() * 8) + 38
|
|
]
|
|
},
|
|
{
|
|
data: [25, 25, 25, 25, 25, 25]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 更新故障类型图表
|
|
faultTypeChart.setOption({
|
|
series: [
|
|
{
|
|
data: [
|
|
Math.floor(Math.random() * 10) + 20,
|
|
Math.floor(Math.random() * 10) + 15,
|
|
Math.floor(Math.random() * 8) + 10,
|
|
Math.floor(Math.random() * 5) + 5,
|
|
Math.floor(Math.random() * 3) + 2
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
// 恢复按钮状态
|
|
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>
|