618 lines
16 KiB
HTML
618 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../../css/font.css">
|
|
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
|
<link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css">
|
|
<link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
|
|
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
|
<link rel="stylesheet" href="../../css/coreTable.css"/>
|
|
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
|
|
<!-- Font Awesome 图标库 -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<!-- Animate.css 动画库 -->
|
|
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> -->
|
|
<!-- Particles.js 粒子特效库 -->
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> -->
|
|
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
|
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
|
<script src="../../js/publics/public.js"></script>
|
|
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
|
<script src="../../js/publics/echarts.js"></script>
|
|
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
|
<script src="../../js/publics/aescbc.js"></script>
|
|
<script src="../../js/publics/sm3.js"></script>
|
|
<script src="../../api/commonRequest.js"></script>
|
|
<script src="../../plugin/watermark.js"></script>
|
|
<script src="../../js/pages/newDataAnalysis/resourceApiService.js"></script>
|
|
<title>资源利用率分析</title>
|
|
</head>
|
|
|
|
<style>
|
|
body{
|
|
height: 96%;
|
|
margin: 2% 0;
|
|
}
|
|
.resource-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* background: linear-gradient(135deg, #0a1e2b 0%, #1a2f3a 50%, #0a1e2b 100%); */
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#particles-js {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.resource-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.resource-header {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 加载动画 */
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* background: rgba(10, 30, 43, 0.9); */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 4px solid rgba(22, 186, 170, 0.3);
|
|
border-top: 4px solid #16baaa;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.loading-text {
|
|
margin-top: 20px;
|
|
color: #16baaa;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.resource-header {
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(90deg, rgba(22, 186, 170, 0.3) 0%, rgba(22, 186, 170, 0.1) 100%);
|
|
border: 1px solid #16baaa;
|
|
border-radius: 8px;
|
|
padding: 0 30px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 0 20px rgba(22, 186, 170, 0.3);
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #16baaa;
|
|
text-shadow: 0 0 10px rgba(22, 186, 170, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.header-icon {
|
|
font-size: 32px;
|
|
animation: headerPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes headerPulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
.header-stats {
|
|
display: flex;
|
|
gap: 30px;
|
|
width: 35%;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 8px 16px;
|
|
background: rgba(22, 186, 170, 0.2);
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(22, 186, 170, 0.5);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.stat-item:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.stat-item:hover {
|
|
background: rgba(22, 186, 170, 0.3);
|
|
border-color: rgba(22, 186, 170, 0.8);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(22, 186, 170, 0.4);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #8cc8c1;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #16baaa;
|
|
}
|
|
|
|
.resource-content {
|
|
width: 100%;
|
|
height: calc(100% - 100px);
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.resource-left {
|
|
width: 60%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.resource-right {
|
|
width: 40%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.resource-panel {
|
|
background: linear-gradient(135deg, rgba(22, 186, 170, 0.1) 0%, rgba(22, 186, 170, 0.05) 100%);
|
|
border: 1px solid rgba(22, 186, 170, 0.3);
|
|
border-radius: 12px;
|
|
/* padding: 20px; */
|
|
padding: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.resource-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #16baaa 0%, #20d3c2 50%, #16baaa 100%);
|
|
animation: glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from { box-shadow: 0 0 5px rgba(22, 186, 170, 0.5); }
|
|
to { box-shadow: 0 0 15px rgba(22, 186, 170, 0.8); }
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #16baaa;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.panel-title::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 20px;
|
|
background: linear-gradient(180deg, #16baaa 0%, #20d3c2 100%);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.panel-icon {
|
|
margin-right: 8px;
|
|
color: #20d3c2;
|
|
animation: iconGlow 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes iconGlow {
|
|
0%, 100% { text-shadow: 0 0 5px rgba(32, 211, 194, 0.5); }
|
|
50% { text-shadow: 0 0 15px rgba(32, 211, 194, 0.8); }
|
|
}
|
|
|
|
.overview-grid {
|
|
height: 240px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.overview-item {
|
|
background: rgba(22, 186, 170, 0.1);
|
|
border: 1px solid rgba(22, 186, 170, 0.3);
|
|
border-radius: 8px;
|
|
/* padding: 20px; */
|
|
padding: 8px 10px 0 10px;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.overview-item:hover {
|
|
background: rgba(22, 186, 170, 0.2);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(22, 186, 170, 0.3);
|
|
}
|
|
|
|
.overview-icon-container {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.overview-icon {
|
|
font-size: 36px;
|
|
color: #16baaa;
|
|
filter: drop-shadow(0 0 8px rgba(22, 186, 170, 0.6));
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.overview-item:hover .overview-icon {
|
|
transform: scale(1.2);
|
|
color: #20d3c2;
|
|
filter: drop-shadow(0 0 15px rgba(32, 211, 194, 0.8));
|
|
}
|
|
|
|
/* 不同图标的动画效果 */
|
|
.rotating-icon {
|
|
animation: rotate 4s linear infinite;
|
|
}
|
|
|
|
.pulse-icon {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.bounce-icon {
|
|
animation: bounce 3s ease-in-out infinite;
|
|
}
|
|
|
|
.flash-icon {
|
|
animation: flash 1.5s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.1); opacity: 0.8; }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-8px); }
|
|
60% { transform: translateY(-4px); }
|
|
}
|
|
|
|
@keyframes flash {
|
|
0%, 50%, 100% { opacity: 1; }
|
|
25%, 75% { opacity: 0.3; }
|
|
}
|
|
|
|
.overview-title {
|
|
font-size: 14px;
|
|
color: #8cc8c1;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.overview-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #16baaa;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.overview-rate {
|
|
font-size: 12px;
|
|
color: #20d3c2;
|
|
}
|
|
|
|
.chart-container {
|
|
height: 280px;
|
|
}
|
|
|
|
.chart-panel {
|
|
height: 100%;
|
|
}
|
|
|
|
.table-panel {
|
|
height: 400px;
|
|
}
|
|
|
|
.resource-table {
|
|
height: calc(100% - 50px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.resource-table::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.resource-table::-webkit-scrollbar-track {
|
|
background: rgba(22, 186, 170, 0.1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.resource-table::-webkit-scrollbar-thumb {
|
|
background: rgba(22, 186, 170, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.resource-table::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(22, 186, 170, 0.7);
|
|
}
|
|
|
|
.trends-panel {
|
|
height: 320px;
|
|
}
|
|
|
|
.optimization-panel {
|
|
height: calc(100% - 360px);
|
|
min-height: 200px;
|
|
}
|
|
|
|
.optimization-list {
|
|
max-height: calc(100% - 50px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.optimization-item {
|
|
background: rgba(22, 186, 170, 0.08);
|
|
border: 1px solid rgba(22, 186, 170, 0.2);
|
|
border-radius: 6px;
|
|
padding: 12px;
|
|
margin-bottom: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.optimization-item:hover {
|
|
background: rgba(22, 186, 170, 0.15);
|
|
border-color: rgba(22, 186, 170, 0.4);
|
|
transform: translateX(5px);
|
|
box-shadow: -2px 0 10px rgba(22, 186, 170, 0.3);
|
|
}
|
|
|
|
.optimization-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #16baaa;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.optimization-desc {
|
|
font-size: 12px;
|
|
color: #8cc8c1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.optimization-priority {
|
|
font-size: 11px;
|
|
color: #20d3c2;
|
|
float: right;
|
|
}
|
|
|
|
.layui-table {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.layui-table th {
|
|
background: rgba(22, 186, 170, 0.2) !important;
|
|
color: #16baaa !important;
|
|
border: 1px solid rgba(22, 186, 170, 0.3) !important;
|
|
}
|
|
|
|
.layui-table td {
|
|
background: rgba(22, 186, 170, 0.05) !important;
|
|
color: #fff !important;
|
|
border: 1px solid rgba(22, 186, 170, 0.2) !important;
|
|
}
|
|
|
|
.layui-table tr:hover {
|
|
background: rgba(22, 186, 170, 0.1) !important;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- 加载动画 -->
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div>
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">正在加载资源数据...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="resource-container">
|
|
<!-- 粒子背景 -->
|
|
<div id="particles-js"></div>
|
|
<!-- 头部统计区域 -->
|
|
<div class="resource-header animate__animated animate__fadeInDown">
|
|
<div class="header-title">
|
|
<i class="fas fa-chart-line header-icon"></i>
|
|
资源利用率分析
|
|
</div>
|
|
<div class="header-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-label">总体利用率</div>
|
|
<div class="stat-value" id="totalRate">85.2%</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">人员利用率</div>
|
|
<div class="stat-value" id="personnelRate">88.5%</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">设备利用率</div>
|
|
<div class="stat-value" id="equipmentRate">82.3%</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-label">材料利用率</div>
|
|
<div class="stat-value" id="materialRate">84.8%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主体内容区域 -->
|
|
<div class="resource-content">
|
|
<!-- 左侧区域 -->
|
|
<div class="resource-left">
|
|
<!-- 资源概览 -->
|
|
<div class="resource-panel animate__animated animate__fadeInLeft">
|
|
<div class="panel-title">
|
|
<i class="fas fa-cubes panel-icon"></i>
|
|
资源利用概览
|
|
</div>
|
|
<div class="overview-grid">
|
|
<div class="overview-item animate__animated animate__zoomIn" style="animation-delay: 0.1s;">
|
|
<div class="overview-icon-container">
|
|
<i class="fas fa-users overview-icon rotating-icon"></i>
|
|
</div>
|
|
<div class="overview-title">在岗人员</div>
|
|
<div class="overview-value" id="personnelCount">126</div>
|
|
<div class="overview-rate">利用率: 88.5%</div>
|
|
</div>
|
|
<div class="overview-item animate__animated animate__zoomIn" style="animation-delay: 0.2s;">
|
|
<div class="overview-icon-container">
|
|
<i class="fas fa-cogs overview-icon pulse-icon"></i>
|
|
</div>
|
|
<div class="overview-title">运行设备</div>
|
|
<div class="overview-value" id="equipmentCount">42</div>
|
|
<div class="overview-rate">利用率: 82.3%</div>
|
|
</div>
|
|
<div class="overview-item animate__animated animate__zoomIn" style="animation-delay: 0.3s;">
|
|
<div class="overview-icon-container">
|
|
<i class="fas fa-boxes overview-icon bounce-icon"></i>
|
|
</div>
|
|
<div class="overview-title">材料储备</div>
|
|
<div class="overview-value" id="materialCount">89</div>
|
|
<div class="overview-rate">利用率: 84.8%</div>
|
|
</div>
|
|
<div class="overview-item animate__animated animate__zoomIn" style="animation-delay: 0.4s;">
|
|
<div class="overview-icon-container">
|
|
<i class="fas fa-bolt overview-icon flash-icon"></i>
|
|
</div>
|
|
<div class="overview-title">能源消耗</div>
|
|
<div class="overview-value" id="energyCount">76%</div>
|
|
<div class="overview-rate">效率评估: 91.2%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 利用率分布图表 -->
|
|
<div class="resource-panel chart-container animate__animated animate__fadeInUp" style="animation-delay: 0.3s;">
|
|
<div class="panel-title">
|
|
<i class="fas fa-chart-pie panel-icon"></i>
|
|
资源利用率分布
|
|
</div>
|
|
<div id="utilizationChart" class="chart-panel"></div>
|
|
</div>
|
|
|
|
<!-- 详细数据表格 -->
|
|
<div class="resource-panel table-panel animate__animated animate__fadeInUp" style="animation-delay: 0.5s;">
|
|
<div class="panel-title">
|
|
<i class="fas fa-table panel-icon"></i>
|
|
资源详细信息
|
|
</div>
|
|
<div class="resource-table">
|
|
<table class="layui-table" lay-size="sm">
|
|
<thead>
|
|
<tr>
|
|
<th>资源类型</th>
|
|
<th>资源名称</th>
|
|
<th>当前状态</th>
|
|
<th>利用率</th>
|
|
<th>效率评估</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="resourceTableBody">
|
|
<!-- 数据将通过JavaScript动态插入 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧区域 -->
|
|
<div class="resource-right">
|
|
<!-- 趋势分析 -->
|
|
<div class="resource-panel trends-panel animate__animated animate__fadeInRight" style="animation-delay: 0.4s;">
|
|
<div class="panel-title">
|
|
<i class="fas fa-chart-line panel-icon"></i>
|
|
利用率趋势
|
|
</div>
|
|
<div id="trendsChart" class="chart-panel"></div>
|
|
</div>
|
|
|
|
<!-- 优化建议 -->
|
|
<div class="resource-panel optimization-panel animate__animated animate__fadeInRight" style="animation-delay: 0.6s;">
|
|
<div class="panel-title">
|
|
<i class="fas fa-lightbulb panel-icon"></i>
|
|
利用效率评估
|
|
</div>
|
|
<div class="optimization-list" id="optimizationList">
|
|
<!-- 优化建议将通过JavaScript动态插入 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <script src="../../js/pages/newDataAnalysis/resourceRateAnalysis.js"></script> -->
|
|
<script src="../../js/pages/newDataAnalysis/resourceRateAnalysis_api.js"></script>
|
|
</body>
|
|
</html> |