1244 lines
45 KiB
HTML
1244 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>工地整体效能分析系统</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--primary: #1a3a5f;
|
||
--secondary: #2c5c8c;
|
||
--accent: #4caf50;
|
||
--warning: #ff9800;
|
||
--danger: #f44336;
|
||
--light: #f5f7fa;
|
||
--dark: #333;
|
||
--gray: #e4e7eb;
|
||
--card-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Noto Sans SC', sans-serif;
|
||
}
|
||
|
||
body {
|
||
/* background: linear-gradient(135deg, #f0f4f8 0%, #dfe7ee 100%); */
|
||
color: var(--dark);
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 简化后的顶部控制栏 */
|
||
.control-bar {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.date-selector {
|
||
background: #c2c2c2;
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
box-shadow: var(--card-shadow);
|
||
}
|
||
|
||
.date-selector select {
|
||
background: transparent;
|
||
border: 1px solid var(--gray);
|
||
color: var(--dark);
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
}
|
||
|
||
/* 仪表盘样式 */
|
||
.dashboard {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.kpi-card {
|
||
background: #c2c2c2;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
box-shadow: var(--card-shadow);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.3s;
|
||
cursor: pointer;
|
||
border-top: 4px solid var(--primary);
|
||
}
|
||
|
||
.kpi-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.kpi-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 15px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.kpi-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.kpi-icon.blue {
|
||
background: rgba(26, 58, 95, 0.1);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.kpi-icon.green {
|
||
background: rgba(76, 175, 80, 0.1);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.kpi-icon.orange {
|
||
background: rgba(255, 152, 0, 0.1);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.kpi-icon.red {
|
||
background: rgba(244, 67, 54, 0.1);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.kpi-title {
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
color: #666;
|
||
}
|
||
|
||
.kpi-value {
|
||
font-size: 2.2rem;
|
||
font-weight: 700;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.kpi-trend {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.9rem;
|
||
gap: 5px;
|
||
}
|
||
|
||
.trend-up {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.trend-down {
|
||
color: var(--danger);
|
||
}
|
||
|
||
/* 图表容器 */
|
||
.charts-container {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 20px;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.charts-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.chart-card {
|
||
background: #c2c2c2;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: var(--card-shadow);
|
||
}
|
||
|
||
.chart-header {
|
||
margin-bottom: 15px;
|
||
font-weight: 500;
|
||
color: var(--primary);
|
||
font-size: 1.1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.chart-container {
|
||
height: 300px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 分析部分 */
|
||
.analysis-section {
|
||
background: #c2c2c2;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
box-shadow: var(--card-shadow);
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.3rem;
|
||
color: var(--primary);
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--gray);
|
||
}
|
||
|
||
.bottleneck-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.bottleneck-card {
|
||
border-left: 4px solid var(--warning);
|
||
padding: 15px;
|
||
background: #fff9e6;
|
||
border-radius: 0 8px 8px 0;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bottleneck-card:hover {
|
||
transform: translateX(5px);
|
||
background: #fff1cc;
|
||
}
|
||
|
||
.bottleneck-title {
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.bottleneck-desc {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.optimization-card {
|
||
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.suggestion-item {
|
||
display: flex;
|
||
gap: 15px;
|
||
padding: 15px 0;
|
||
border-bottom: 1px dashed #ddd;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.suggestion-item:hover {
|
||
background: rgba(255,255,255,0.5);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.suggestion-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.suggestion-icon {
|
||
background: var(--accent);
|
||
color: #c2c2c2;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.suggestion-content h4 {
|
||
margin-bottom: 5px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.suggestion-content p {
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.priority-high {
|
||
color: var(--danger);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.priority-medium {
|
||
color: var(--warning);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.action-btn {
|
||
background: var(--secondary);
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 15px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: var(--primary);
|
||
}
|
||
|
||
/* 二级页面样式 */
|
||
.secondary-page {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0,0,0,0.8);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.secondary-page.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.page-content {
|
||
background: white;
|
||
width: 90%;
|
||
max-width: 1000px;
|
||
max-height: 90vh;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transform: translateY(20px);
|
||
transition: transform 0.4s;
|
||
}
|
||
|
||
.secondary-page.active .page-content {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.page-header {
|
||
padding: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.page-header h3 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.close-btn {
|
||
background: rgba(255,255,255,0.2);
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
|
||
.page-body {
|
||
padding: 30px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.detail-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.detail-card {
|
||
background: var(--light);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
box-shadow: var(--card-shadow);
|
||
}
|
||
|
||
.detail-card h4 {
|
||
color: var(--primary);
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--gray);
|
||
}
|
||
|
||
.data-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 8px 0;
|
||
border-bottom: 1px dashed #ddd;
|
||
}
|
||
|
||
.data-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.progress-container {
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.progress-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 10px;
|
||
background: #e0e0e0;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.detail-chart {
|
||
height: 300px;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
/* 页脚 */
|
||
footer {
|
||
text-align: center;
|
||
color: #666;
|
||
padding: 20px;
|
||
font-size: 0.9rem;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.stat-badge {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.badge-green {
|
||
background: rgba(76, 175, 80, 0.2);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.badge-orange {
|
||
background: rgba(255, 152, 0, 0.2);
|
||
color: var(--warning);
|
||
}
|
||
|
||
.badge-red {
|
||
background: rgba(244, 67, 54, 0.2);
|
||
color: var(--danger);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<!-- 主仪表盘 -->
|
||
<div class="dashboard">
|
||
<div class="kpi-card" onclick="openPage('personnel')">
|
||
<div class="kpi-header">
|
||
<div>
|
||
<div class="kpi-title">人员利用率</div>
|
||
<div class="kpi-value">78.3%</div>
|
||
</div>
|
||
<div class="kpi-icon blue">
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-trend trend-up">
|
||
<i class="fas fa-arrow-up"></i> 较上周提高 5.2%
|
||
</div>
|
||
<div class="kpi-trend">
|
||
平均闲置时间 1.2 小时/天
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-card" onclick="openPage('equipment')">
|
||
<div class="kpi-header">
|
||
<div>
|
||
<div class="kpi-title">设备使用率</div>
|
||
<div class="kpi-value">64.8%</div>
|
||
</div>
|
||
<div class="kpi-icon orange">
|
||
<i class="fas fa-tools"></i>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-trend trend-down">
|
||
<i class="fas fa-arrow-down"></i> 下降 2.1%
|
||
</div>
|
||
<div class="kpi-trend">
|
||
主要设备故障率 3.7%
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-card" onclick="openPage('progress')">
|
||
<div class="kpi-header">
|
||
<div>
|
||
<div class="kpi-title">工程进度</div>
|
||
<div class="kpi-value">72.5%</div>
|
||
</div>
|
||
<div class="kpi-icon green">
|
||
<i class="fas fa-tasks"></i>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-trend trend-up">
|
||
<i class="fas fa-arrow-up"></i> 较计划超前 2 天
|
||
</div>
|
||
<div class="kpi-trend">
|
||
本周完成进度 8.3%
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-card" onclick="openPage('safety')">
|
||
<div class="kpi-header">
|
||
<div>
|
||
<div class="kpi-title">安全合规率</div>
|
||
<div class="kpi-value">94.6%</div>
|
||
</div>
|
||
<div class="kpi-icon red">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-trend trend-up">
|
||
<i class="fas fa-arrow-up"></i> 提高 3.4%
|
||
</div>
|
||
<div class="kpi-trend">
|
||
本周安全事件 2 起
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="charts-container">
|
||
<div class="chart-card">
|
||
<div class="chart-header">
|
||
<span>多源数据综合分析</span>
|
||
</div>
|
||
<div class="chart-container" id="radarChart"></div>
|
||
</div>
|
||
|
||
<div class="chart-card">
|
||
<div class="chart-header">
|
||
<span>效能瓶颈分布</span>
|
||
</div>
|
||
<div class="chart-container" id="bottleneckChart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analysis-section">
|
||
<div class="section-title">瓶颈识别与分析</div>
|
||
<div class="bottleneck-container">
|
||
<div class="bottleneck-card" onclick="openPage('bottleneck')">
|
||
<div class="bottleneck-title">
|
||
<span><i class="fas fa-cogs"></i> 设备调度瓶颈</span>
|
||
</div>
|
||
<div class="bottleneck-desc">
|
||
混凝土搅拌机使用率高达92%，等待时间过长，影响3个作业面进度
|
||
</div>
|
||
<div class="kpi-trend">
|
||
<span class="badge-red">高影响</span> 预计延误: 3天
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottleneck-card" onclick="openPage('bottleneck')">
|
||
<div class="bottleneck-title">
|
||
<span><i class="fas fa-user-graduate"></i> 人员技能瓶颈</span>
|
||
</div>
|
||
<div class="bottleneck-desc">
|
||
高级焊工短缺，导致钢结构安装进度滞后15%
|
||
</div>
|
||
<div class="kpi-trend">
|
||
<span class="badge-orange">中影响</span> 影响范围: 2号楼
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottleneck-card" onclick="openPage('bottleneck')">
|
||
<div class="bottleneck-title">
|
||
<span><i class="fas fa-pallet"></i> 物料供应瓶颈</span>
|
||
</div>
|
||
<div class="bottleneck-desc">
|
||
钢筋供应延迟，影响2号楼主体施工进度
|
||
</div>
|
||
<div class="kpi-trend">
|
||
<span class="badge-red">高影响</span> 延误天数: 5天
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analysis-section">
|
||
<div class="section-title">优化建议与措施</div>
|
||
<div class="optimization-card">
|
||
<div class="suggestion-item" onclick="openPage('suggestion1')">
|
||
<div class="suggestion-icon">1</div>
|
||
<div class="suggestion-content">
|
||
<h4>设备调度优化 <span class="priority-high">(高优先级)</span></h4>
|
||
<p>调整混凝土搅拌机使用时段，增加夜间预制工作，预计可提升设备利用率15%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="suggestion-item" onclick="openPage('suggestion2')">
|
||
<div class="suggestion-icon">2</div>
|
||
<div class="suggestion-content">
|
||
<h4>技能培训计划 <span class="priority-medium">(中优先级)</span></h4>
|
||
<p>开展焊工技能提升培训，同时外聘2名高级焊工，预计可缩短工期5天</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="suggestion-item" onclick="openPage('suggestion3')">
|
||
<div class="suggestion-icon">3</div>
|
||
<div class="suggestion-content">
|
||
<h4>供应链优化 <span class="priority-high">(高优先级)</span></h4>
|
||
<p>建立备用供应商机制，增加钢筋库存缓冲，确保施工连续性</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>工地整体效能分析系统 © 2023 | 数据更新时间: 2023-11-15 14:30</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 二级页面：人员效能分析 -->
|
||
<div class="secondary-page" id="personnel-page">
|
||
<div class="page-content">
|
||
<div class="page-header">
|
||
<h3><i class="fas fa-users"></i> 人员效能分析</h3>
|
||
<div class="close-btn" onclick="closePage('personnel')">
|
||
<i class="fas fa-times"></i>
|
||
</div>
|
||
</div>
|
||
<div class="page-body">
|
||
<div class="detail-grid">
|
||
<div class="detail-card">
|
||
<h4>核心指标</h4>
|
||
<div class="data-row">
|
||
<span>总工人数</span>
|
||
<span>186人</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>人员利用率</span>
|
||
<span>78.3%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>平均出勤率</span>
|
||
<span>95.2%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>加班工时</span>
|
||
<span>342小时/周</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>技能分布</h4>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>高级技工</span>
|
||
<span>32%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 32%; background: var(--primary);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>中级技工</span>
|
||
<span>45%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 45%; background: var(--secondary);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>普通工人</span>
|
||
<span>23%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 23%; background: var(--accent);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>效能趋势</h4>
|
||
<div class="data-row">
|
||
<span>本周变化</span>
|
||
<span class="trend-up">+5.2%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>上月同期</span>
|
||
<span>73.5%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>目标值</span>
|
||
<span>85.0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-chart" id="personnel-chart"></div>
|
||
|
||
<h4>优化建议</h4>
|
||
<p>1. 调整班组结构，平衡各工种人员分配，减少待工时间</p>
|
||
<p>2. 加强新工人培训，提高工作效率</p>
|
||
<p>3. 优化排班计划，减少不必要的加班</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设备分析页面 -->
|
||
<div class="secondary-page" id="equipment-page">
|
||
<div class="page-content">
|
||
<div class="page-header">
|
||
<h3><i class="fas fa-tools"></i> 设备使用分析</h3>
|
||
<div class="close-btn" onclick="closePage('equipment')">
|
||
<i class="fas fa-times"></i>
|
||
</div>
|
||
</div>
|
||
<div class="page-body">
|
||
<div class="detail-grid">
|
||
<div class="detail-card">
|
||
<h4>设备概况</h4>
|
||
<div class="data-row">
|
||
<span>设备总数</span>
|
||
<span>42台</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>设备使用率</span>
|
||
<span>64.8%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>平均故障率</span>
|
||
<span>3.7%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>待机设备数</span>
|
||
<span>15台</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>关键设备状态</h4>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>混凝土搅拌机</span>
|
||
<span>92%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 92%; background: var(--danger);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>塔式起重机</span>
|
||
<span>78%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 78%; background: var(--warning);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>挖掘机</span>
|
||
<span>65%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 65%; background: var(--accent);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>维护情况</h4>
|
||
<div class="data-row">
|
||
<span>本周维护次数</span>
|
||
<span>18次</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>待处理故障</span>
|
||
<span>3项</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>平均响应时间</span>
|
||
<span>2.5小时</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-chart" id="equipment-chart"></div>
|
||
|
||
<h4>优化建议</h4>
|
||
<p>1. 优化混凝土搅拌机调度计划，增加使用时段</p>
|
||
<p>2. 对塔式起重机进行预防性维护，减少故障率</p>
|
||
<p>3. 重新分配闲置设备，提高整体利用率</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 进度分析页面 -->
|
||
<div class="secondary-page" id="progress-page">
|
||
<div class="page-content">
|
||
<div class="page-header">
|
||
<h3><i class="fas fa-tasks"></i> 工程进度分析</h3>
|
||
<div class="close-btn" onclick="closePage('progress')">
|
||
<i class="fas fa-times"></i>
|
||
</div>
|
||
</div>
|
||
<div class="page-body">
|
||
<div class="detail-grid">
|
||
<div class="detail-card">
|
||
<h4>总体进度</h4>
|
||
<div class="data-row">
|
||
<span>项目完成率</span>
|
||
<span>72.5%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>计划进度</span>
|
||
<span>70.3%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>超前/滞后</span>
|
||
<span class="trend-up">+2.2% (超前2天)</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>关键路径进度</span>
|
||
<span>68.7%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>各区域进度</h4>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>1号楼</span>
|
||
<span>85%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 85%; background: var(--accent);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>2号楼</span>
|
||
<span>65%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 65%; background: var(--warning);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>3号楼</span>
|
||
<span>78%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 78%; background: var(--accent);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>本周进展</h4>
|
||
<div class="data-row">
|
||
<span>完成工作量</span>
|
||
<span>8.3%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>计划工作量</span>
|
||
<span>7.5%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>差异</span>
|
||
<span class="trend-up">+0.8%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-chart" id="progress-chart"></div>
|
||
|
||
<h4>优化建议</h4>
|
||
<p>1. 重点监控2号楼进度，增加施工资源投入</p>
|
||
<p>2. 优化关键路径任务分配，减少依赖等待时间</p>
|
||
<p>3. 提前准备下阶段所需材料，避免进度延误</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全分析页面 -->
|
||
<div class="secondary-page" id="safety-page">
|
||
<div class="page-content">
|
||
<div class="page-header">
|
||
<h3><i class="fas fa-shield-alt"></i> 安全合规分析</h3>
|
||
<div class="close-btn" onclick="closePage('safety')">
|
||
<i class="fas fa-times"></i>
|
||
</div>
|
||
</div>
|
||
<div class="page-body">
|
||
<div class="detail-grid">
|
||
<div class="detail-card">
|
||
<h4>安全指标</h4>
|
||
<div class="data-row">
|
||
<span>安全合规率</span>
|
||
<span>94.6%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>安全检查合格率</span>
|
||
<span>92.3%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>本周安全事件</span>
|
||
<span>2起</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>整改完成率</span>
|
||
<span>87.5%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>事件类型分布</h4>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>高空作业违规</span>
|
||
<span>45%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 45%; background: var(--danger);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>设备操作不当</span>
|
||
<span>30%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 30%; background: var(--warning);"></div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-container">
|
||
<div class="progress-label">
|
||
<span>现场管理疏漏</span>
|
||
<span>25%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 25%; background: var(--accent);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-card">
|
||
<h4>安全趋势</h4>
|
||
<div class="data-row">
|
||
<span>本周变化</span>
|
||
<span class="trend-up">+3.4%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>上月同期</span>
|
||
<span>91.2%</span>
|
||
</div>
|
||
<div class="data-row">
|
||
<span>目标值</span>
|
||
<span>95.0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-chart" id="safety-chart"></div>
|
||
|
||
<h4>优化建议</h4>
|
||
<p>1. 加强高空作业安全培训与监督</p>
|
||
<p>2. 完善设备操作规范，实施持证上岗制度</p>
|
||
<p>3. 强化现场安全管理，增加巡查频次</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化雷达图 - 多源数据分析
|
||
const radarChart = echarts.init(document.getElementById('radarChart'));
|
||
const radarOption = {
|
||
tooltip: { trigger: 'item' },
|
||
radar: {
|
||
indicator: [
|
||
{ name: '人员利用率', max: 100 },
|
||
{ name: '设备使用率', max: 100 },
|
||
{ name: '工程进度率', max: 100 },
|
||
{ name: '安全合规率', max: 100 },
|
||
{ name: '物料周转率', max: 100 },
|
||
{ name: '能源效率', max: 100 }
|
||
],
|
||
shape: 'circle',
|
||
radius: '65%'
|
||
},
|
||
series: [{
|
||
type: 'radar',
|
||
data: [
|
||
{
|
||
value: [78, 65, 72, 94, 68, 75],
|
||
name: '当前效能',
|
||
areaStyle: { color: 'rgba(44, 92, 140, 0.5)' },
|
||
lineStyle: { color: '#2c5c8c', width: 2 },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
},
|
||
{
|
||
value: [85, 80, 90, 95, 85, 88],
|
||
name: '目标效能',
|
||
areaStyle: { color: 'rgba(76, 175, 80, 0.3)' },
|
||
lineStyle: { color: '#4caf50', type: 'dashed', width: 2 },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
radarChart.setOption(radarOption);
|
||
|
||
// 初始化饼图 - 瓶颈分布
|
||
const pieChart = echarts.init(document.getElementById('bottleneckChart'));
|
||
const pieOption = {
|
||
tooltip: { trigger: 'item' },
|
||
legend: { bottom: 10, left: 'center' },
|
||
series: [
|
||
{
|
||
name: '瓶颈分布',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: { show: false },
|
||
emphasis: {
|
||
label: { show: true, fontSize: '16', fontWeight: 'bold' }
|
||
},
|
||
data: [
|
||
{ value: 38, name: '设备瓶颈', itemStyle: { color: '#f44336' } },
|
||
{ value: 25, name: '人员瓶颈', itemStyle: { color: '#ff9800' } },
|
||
{ value: 20, name: '物料瓶颈', itemStyle: { color: '#2196f3' } },
|
||
{ value: 12, name: '工艺瓶颈', itemStyle: { color: '#9c27b0' } },
|
||
{ value: 5, name: '其他瓶颈', itemStyle: { color: '#607d8b' } }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
pieChart.setOption(pieOption);
|
||
|
||
// 初始化人员效能图表
|
||
const personnelChart = echarts.init(document.getElementById('personnel-chart'));
|
||
const personnelOption = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['人员利用率', '出勤率'], bottom: 10 },
|
||
grid: { left: '3%', right: '4%', bottom: '15%', top: '5%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['10月15日', '10月22日', '10月29日', '11月5日', '11月12日']
|
||
},
|
||
yAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } },
|
||
series: [
|
||
{
|
||
name: '人员利用率',
|
||
type: 'line',
|
||
data: [70.3, 72.5, 74.8, 76.2, 78.3],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#2c5c8c' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
},
|
||
{
|
||
name: '出勤率',
|
||
type: 'line',
|
||
data: [92.5, 93.1, 94.2, 94.8, 95.2],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#4caf50' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
}
|
||
]
|
||
};
|
||
|
||
// 设备分析图表
|
||
const equipmentChart = echarts.init(document.getElementById('equipment-chart'));
|
||
const equipmentOption = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['设备使用率', '故障率'], bottom: 10 },
|
||
grid: { left: '3%', right: '4%', bottom: '15%', top: '5%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['10月15日', '10月22日', '10月29日', '11月5日', '11月12日']
|
||
},
|
||
yAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } },
|
||
series: [
|
||
{
|
||
name: '设备使用率',
|
||
type: 'line',
|
||
data: [68.2, 67.5, 66.8, 65.3, 64.8],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#2c5c8c' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
},
|
||
{
|
||
name: '故障率',
|
||
type: 'line',
|
||
data: [2.8, 3.2, 3.5, 3.6, 3.7],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#f44336' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
}
|
||
]
|
||
};
|
||
|
||
// 进度分析图表
|
||
const progressChart = echarts.init(document.getElementById('progress-chart'));
|
||
const progressOption = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['实际进度', '计划进度'], bottom: 10 },
|
||
grid: { left: '3%', right: '4%', bottom: '15%', top: '5%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['10月15日', '10月22日', '10月29日', '11月5日', '11月12日']
|
||
},
|
||
yAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } },
|
||
series: [
|
||
{
|
||
name: '实际进度',
|
||
type: 'line',
|
||
data: [58.2, 60.5, 64.8, 68.3, 72.5],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#2c5c8c' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
},
|
||
{
|
||
name: '计划进度',
|
||
type: 'line',
|
||
data: [60.0, 62.5, 65.8, 69.0, 72.0],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#4caf50', type: 'dashed' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
}
|
||
]
|
||
};
|
||
|
||
// 安全分析图表
|
||
const safetyChart = echarts.init(document.getElementById('safety-chart'));
|
||
const safetyOption = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: { data: ['安全合规率'], bottom: 10 },
|
||
grid: { left: '3%', right: '4%', bottom: '15%', top: '5%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['10月15日', '10月22日', '10月29日', '11月5日', '11月12日']
|
||
},
|
||
yAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } },
|
||
series: [
|
||
{
|
||
name: '安全合规率',
|
||
type: 'line',
|
||
data: [88.5, 90.2, 91.7, 92.8, 94.6],
|
||
smooth: true,
|
||
lineStyle: { width: 3, color: '#4caf50' },
|
||
symbol: 'circle',
|
||
symbolSize: 8
|
||
}
|
||
]
|
||
};
|
||
|
||
// 设置所有图表
|
||
personnelChart.setOption(personnelOption);
|
||
equipmentChart.setOption(equipmentOption);
|
||
progressChart.setOption(progressOption);
|
||
safetyChart.setOption(safetyOption);
|
||
|
||
// 响应窗口大小变化
|
||
window.addEventListener('resize', function() {
|
||
radarChart.resize();
|
||
pieChart.resize();
|
||
personnelChart.resize();
|
||
equipmentChart.resize();
|
||
progressChart.resize();
|
||
safetyChart.resize();
|
||
});
|
||
|
||
// 二级页面控制函数
|
||
function openPage(pageId) {
|
||
document.getElementById(pageId + '-page').classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closePage(pageId) {
|
||
document.getElementById(pageId + '-page').classList.remove('active');
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
// 点击页面外部关闭弹窗
|
||
document.querySelectorAll('.secondary-page').forEach(page => {
|
||
page.addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
this.classList.remove('active');
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |