You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
930 lines
33 KiB
HTML
930 lines
33 KiB
HTML
1 month ago
|
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
|
<link rel="stylesheet" href="all.min.css">
|
||
|
|
<script src="chart.js"></script>
|
||
|
|
<style>
|
||
|
|
/* 滚动条美化 */
|
||
|
|
html {
|
||
|
|
scrollbar-color: rgba(42, 125, 225, 0.5) rgba(209, 224, 245, 0.3);
|
||
|
|
scrollbar-width: thin;
|
||
|
|
}
|
||
|
|
/* Webkit 浏览器滚动条样式 */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
background: rgba(209, 224, 245, 0.3);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: rgba(42, 125, 225, 0.5);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #f5f9ff;
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
color: #1a4b8c;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.dashboard {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: 20px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 20px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 75, 150, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
border-bottom: 1px solid #e1e9f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
color: #1a4b8c;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stats-overview {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(6, 1fr);
|
||
|
|
gap: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-card {
|
||
|
|
background: #f5f9ff;
|
||
|
|
border: 1px solid #d1e0f5;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
text-align: center;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-card:hover {
|
||
|
|
transform: translateY(-3px);
|
||
|
|
box-shadow: 0 4px 12px rgba(42, 125, 225, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-number {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #2a7de1;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #4a6fa5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-change {
|
||
|
|
font-size: 12px;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.change-up {
|
||
|
|
color: #28a745;
|
||
|
|
}
|
||
|
|
|
||
|
|
.change-down {
|
||
|
|
color: #dc3545;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-section {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn {
|
||
|
|
background: #f5f9ff;
|
||
|
|
border: 1px solid #d1e0f5;
|
||
|
|
color: #2a7de1;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn:hover,
|
||
|
|
.filter-btn.active {
|
||
|
|
background: rgba(42, 125, 225, 0.1);
|
||
|
|
border-color: rgba(42, 125, 225, 0.3);
|
||
|
|
color: #1a4b8c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charts-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr;
|
||
|
|
gap: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-charts {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.side-charts {
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: 1fr 1fr;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-container {
|
||
|
|
background: #ffffff;
|
||
|
|
border: 1px solid #e1e9f5;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 75, 150, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-title {
|
||
|
|
color: #1a4b8c;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #e1e9f5;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-canvas {
|
||
|
|
height: 250px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.large-chart {
|
||
|
|
grid-column: 1 / -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.large-chart .chart-canvas {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-section {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr 1fr;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-table {
|
||
|
|
background: #ffffff;
|
||
|
|
border: 1px solid #e1e9f5;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 75, 150, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-title {
|
||
|
|
color: #1a4b8c;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #e1e9f5;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-list {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 8px 0;
|
||
|
|
border-bottom: 1px solid #e1e9f5;
|
||
|
|
color: #4a6fa5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-value {
|
||
|
|
color: #2a7de1;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-bar {
|
||
|
|
width: 100%;
|
||
|
|
height: 8px;
|
||
|
|
background: #e1e9f5;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-top: 5px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-fill {
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, #2a7de1, #1a4b8c);
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: width 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-item {
|
||
|
|
background: #f5f9ff;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 30px;
|
||
|
|
text-align: center;
|
||
|
|
border: 1px solid #e1e9f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-value {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #2a7de1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #4a6fa5;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-info {
|
||
|
|
display: flex;
|
||
|
|
gap: 30px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
color: #4a6fa5;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-button {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-left: 20px;
|
||
|
|
transition: transform 0.3s;
|
||
|
|
color: #4a6fa5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-button:hover {
|
||
|
|
transform: scale(1.1);
|
||
|
|
color: #2a7de1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 响应式调整 */
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.stats-overview {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-section {
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.stats-overview {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.charts-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-charts {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-section {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.header-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn {
|
||
|
|
background: linear-gradient(135deg, #2a7de1, #1a4b8c);
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-size: 14px;
|
||
|
|
box-shadow: 0 2px 8px rgba(42, 125, 225, 0.2);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action-btn:hover {
|
||
|
|
background: linear-gradient(135deg, #1a4b8c, #2a7de1);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(42, 125, 225, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="dashboard">
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="header">
|
||
|
|
<h1><i class="fas fa-chart-bar"></i> 数据统计分析</h1>
|
||
|
|
<div class="header-actions">
|
||
|
|
<button class="action-btn" onclick="location.href='index.html'">
|
||
|
|
<i class="fas fa-home-alt" style="color: orange;"></i> 回到首页
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stats-overview">
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-number" id="totalCleanup">1,245</div>
|
||
|
|
<div class="stat-label">总清理次数</div>
|
||
|
|
<div class="stat-change change-up">↗ +8.5%</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-number" id="waterQualityIndex">85.6</div>
|
||
|
|
<div class="stat-label">水质指数</div>
|
||
|
|
<div class="stat-change change-up">↗ +2.3%</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-number" id="deviceEfficiency">92.1%</div>
|
||
|
|
<div class="stat-label">设备效率</div>
|
||
|
|
<div class="stat-change change-down">↘ -1.2%</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-number" id="energyConsumption">2,156</div>
|
||
|
|
<div class="stat-label">能耗(kWh)</div>
|
||
|
|
<div class="stat-change change-down">↘ -5.8%</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-number" id="costSaving">¥18.5万</div>
|
||
|
|
<div class="stat-label">成本节约</div>
|
||
|
|
<div class="stat-change change-up">↗ +12.4%</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-number" id="responseTime">4.2分</div>
|
||
|
|
<div class="stat-label">平均响应</div>
|
||
|
|
<div class="stat-change change-down">↘ -15.6%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-section">
|
||
|
|
<button class="filter-btn active" data-period="today">今日</button>
|
||
|
|
<button class="filter-btn" data-period="week">本周</button>
|
||
|
|
<button class="filter-btn" data-period="month">本月</button>
|
||
|
|
<button class="filter-btn" data-period="quarter">本季度</button>
|
||
|
|
<button class="filter-btn" data-period="year">本年</button>
|
||
|
|
<button class="filter-btn" onclick="exportData()"><i class="fas fa-download"></i> 导出数据</button>
|
||
|
|
<button class="filter-btn" onclick="generateReport()"><i class="fas fa-file-alt"></i> 生成报告</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="charts-grid">
|
||
|
|
<div class="main-charts">
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="chart-title">水质趋势分析</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="waterQualityChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="chart-title">清理效率统计</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="cleanupEfficiencyChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="chart-title">设备运行状态</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="deviceStatusChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="chart-title">成本效益分析</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="costBenefitChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="side-charts">
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="chart-title">区域分布</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="areaDistributionChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chart-container">
|
||
|
|
<div class="chart-title">工作负载</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="workloadChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="chart-container large-chart">
|
||
|
|
<div class="chart-title">综合性能仪表板</div>
|
||
|
|
<div class="chart-canvas">
|
||
|
|
<canvas id="performanceDashboard"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bottom-section">
|
||
|
|
<div class="data-table">
|
||
|
|
<div class="table-title">热点区域排行</div>
|
||
|
|
<ul class="data-list" id="hotspotList">
|
||
|
|
<li class="data-item">
|
||
|
|
<span>湘江大桥段</span>
|
||
|
|
<span class="data-value">156次</span>
|
||
|
|
</li>
|
||
|
|
<li class="data-item">
|
||
|
|
<span>橘子洲头</span>
|
||
|
|
<span class="data-value">142次</span>
|
||
|
|
</li>
|
||
|
|
<li class="data-item">
|
||
|
|
<span>猴子石大桥</span>
|
||
|
|
<span class="data-value">128次</span>
|
||
|
|
</li>
|
||
|
|
<li class="data-item">
|
||
|
|
<span>银盆岭大桥</span>
|
||
|
|
<span class="data-value">115次</span>
|
||
|
|
</li>
|
||
|
|
<li class="data-item">
|
||
|
|
<span>湘江中路段</span>
|
||
|
|
<span class="data-value">98次</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="data-table">
|
||
|
|
<div class="table-title">设备使用率</div>
|
||
|
|
<div class="data-list">
|
||
|
|
<div class="data-item">
|
||
|
|
<span>清理船A号</span>
|
||
|
|
<span class="data-value">95.2%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" style="width: 95.2%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="data-item">
|
||
|
|
<span>清理船B号</span>
|
||
|
|
<span class="data-value">87.8%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" style="width: 87.8%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="data-item">
|
||
|
|
<span>监测设备</span>
|
||
|
|
<span class="data-value">92.5%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" style="width: 92.5%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="data-item">
|
||
|
|
<span>传感器网络</span>
|
||
|
|
<span class="data-value">98.1%</span>
|
||
|
|
</div>
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" style="width: 98.1%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="data-table">
|
||
|
|
<div class="table-title">关键指标</div>
|
||
|
|
<div class="kpi-grid">
|
||
|
|
<div class="kpi-item">
|
||
|
|
<div class="kpi-value" id="avgResponseTime">4.2分</div>
|
||
|
|
<div class="kpi-label">平均响应时间</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-item">
|
||
|
|
<div class="kpi-value" id="completionRate">96.8%</div>
|
||
|
|
<div class="kpi-label">任务完成率</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-item">
|
||
|
|
<div class="kpi-value" id="customerSatisfaction">4.7/5</div>
|
||
|
|
<div class="kpi-label">满意度评分</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-item">
|
||
|
|
<div class="kpi-value" id="costPerCleanup">¥285</div>
|
||
|
|
<div class="kpi-label">单次清理成本</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="script.js"></script>
|
||
|
|
<script>
|
||
|
|
// 更新时间
|
||
|
|
function updateDateTime() {
|
||
|
|
const now = new Date();
|
||
|
|
const dateStr = now.getFullYear() + '-' +
|
||
|
|
String(now.getMonth() + 1).padStart(2, '0') + '-' +
|
||
|
|
String(now.getDate()).padStart(2, '0');
|
||
|
|
const timeStr = String(now.getHours()).padStart(2, '0') + ':' +
|
||
|
|
String(now.getMinutes()).padStart(2, '0') + ':' +
|
||
|
|
String(now.getSeconds()).padStart(2, '0');
|
||
|
|
document.getElementById('datetime').textContent = dateStr + ' | ' + timeStr;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化所有图表
|
||
|
|
function initializeCharts() {
|
||
|
|
// 水质趋势分析
|
||
|
|
const ctx1 = document.getElementById('waterQualityChart').getContext('2d');
|
||
|
|
new Chart(ctx1, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
|
|
datasets: [{
|
||
|
|
label: 'pH值',
|
||
|
|
data: [7.2, 7.1, 7.3, 7.0, 7.2, 7.1],
|
||
|
|
borderColor: '#2a7de1',
|
||
|
|
backgroundColor: 'rgba(42, 125, 225, 0.1)',
|
||
|
|
tension: 0.4,
|
||
|
|
borderWidth: 2
|
||
|
|
}, {
|
||
|
|
label: '溶解氧',
|
||
|
|
data: [8.5, 8.2, 8.7, 8.1, 8.4, 8.3],
|
||
|
|
borderColor: '#1a4b8c',
|
||
|
|
backgroundColor: 'rgba(26, 75, 140, 0.1)',
|
||
|
|
tension: 0.4,
|
||
|
|
borderWidth: 2
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 清理效率统计
|
||
|
|
const ctx2 = document.getElementById('cleanupEfficiencyChart').getContext('2d');
|
||
|
|
new Chart(ctx2, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
|
|
datasets: [{
|
||
|
|
label: '清理次数',
|
||
|
|
data: [25, 32, 28, 35, 30, 20, 15],
|
||
|
|
backgroundColor: 'rgba(42, 125, 225, 0.6)',
|
||
|
|
borderColor: '#2a7de1',
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 设备运行状态
|
||
|
|
const ctx3 = document.getElementById('deviceStatusChart').getContext('2d');
|
||
|
|
new Chart(ctx3, {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: {
|
||
|
|
labels: ['正常运行', '维护中', '故障', '离线'],
|
||
|
|
datasets: [{
|
||
|
|
data: [85, 8, 4, 3],
|
||
|
|
backgroundColor: ['#28a745', '#ffc107', '#dc3545', '#6c757d'],
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 成本效益分析
|
||
|
|
const ctx4 = document.getElementById('costBenefitChart').getContext('2d');
|
||
|
|
new Chart(ctx4, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
|
|
datasets: [{
|
||
|
|
label: '成本(万元)',
|
||
|
|
data: [45, 42, 48, 40, 44, 41],
|
||
|
|
borderColor: '#dc3545',
|
||
|
|
backgroundColor: 'rgba(220, 53, 69, 0.1)',
|
||
|
|
yAxisID: 'y',
|
||
|
|
borderWidth: 2
|
||
|
|
}, {
|
||
|
|
label: '收益(万元)',
|
||
|
|
data: [65, 68, 72, 70, 75, 78],
|
||
|
|
borderColor: '#28a745',
|
||
|
|
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
||
|
|
yAxisID: 'y1',
|
||
|
|
borderWidth: 2
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
type: 'linear',
|
||
|
|
display: true,
|
||
|
|
position: 'left',
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
},
|
||
|
|
y1: {
|
||
|
|
type: 'linear',
|
||
|
|
display: true,
|
||
|
|
position: 'right',
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { drawOnChartArea: false }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 区域分布
|
||
|
|
const ctx5 = document.getElementById('areaDistributionChart').getContext('2d');
|
||
|
|
new Chart(ctx5, {
|
||
|
|
type: 'pie',
|
||
|
|
data: {
|
||
|
|
labels: ['湘江大桥段', '橘子洲头', '猴子石大桥', '银盆岭大桥', '其他'],
|
||
|
|
datasets: [{
|
||
|
|
data: [25, 22, 20, 18, 15],
|
||
|
|
backgroundColor: ['#2a7de1', '#1a4b8c', '#28a745', '#ffc107', '#6c757d'],
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 工作负载
|
||
|
|
const ctx6 = document.getElementById('workloadChart').getContext('2d');
|
||
|
|
new Chart(ctx6, {
|
||
|
|
type: 'radar',
|
||
|
|
data: {
|
||
|
|
labels: ['清理任务', '监测任务', '维护任务', '巡查任务', '应急任务'],
|
||
|
|
datasets: [{
|
||
|
|
label: '当前负载',
|
||
|
|
data: [85, 70, 60, 90, 45],
|
||
|
|
borderColor: '#2a7de1',
|
||
|
|
backgroundColor: 'rgba(42, 125, 225, 0.2)',
|
||
|
|
pointBackgroundColor: '#2a7de1',
|
||
|
|
borderWidth: 2
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
r: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' },
|
||
|
|
pointLabels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 综合性能仪表板
|
||
|
|
const ctx7 = document.getElementById('performanceDashboard').getContext('2d');
|
||
|
|
new Chart(ctx7, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
|
||
|
|
datasets: [{
|
||
|
|
label: '系统负载(%)',
|
||
|
|
data: [45, 35, 65, 85, 75, 55, 40],
|
||
|
|
borderColor: '#2a7de1',
|
||
|
|
backgroundColor: 'rgba(42, 125, 225, 0.1)',
|
||
|
|
tension: 0.4,
|
||
|
|
borderWidth: 2
|
||
|
|
}, {
|
||
|
|
label: '处理效率(%)',
|
||
|
|
data: [88, 92, 85, 78, 82, 90, 95],
|
||
|
|
borderColor: '#28a745',
|
||
|
|
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
||
|
|
tension: 0.4,
|
||
|
|
borderWidth: 2
|
||
|
|
}, {
|
||
|
|
label: '响应时间(分钟)',
|
||
|
|
data: [5.2, 4.8, 6.1, 7.5, 6.8, 4.9, 4.2],
|
||
|
|
borderColor: '#ffc107',
|
||
|
|
backgroundColor: 'rgba(255, 193, 7, 0.1)',
|
||
|
|
tension: 0.4,
|
||
|
|
borderWidth: 2
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
labels: {
|
||
|
|
color: '#1a4b8c',
|
||
|
|
font: {
|
||
|
|
weight: 'bold'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
ticks: { color: '#4a6fa5' },
|
||
|
|
grid: { color: 'rgba(209, 224, 245, 0.5)' }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 时间筛选功能
|
||
|
|
document.querySelectorAll('.filter-btn[data-period]').forEach(btn => {
|
||
|
|
btn.addEventListener('click', function() {
|
||
|
|
document.querySelectorAll('.filter-btn[data-period]').forEach(b => b.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
|
||
|
|
const period = this.dataset.period;
|
||
|
|
updateChartsForPeriod(period);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateChartsForPeriod(period) {
|
||
|
|
// 根据时间段更新图表数据
|
||
|
|
console.log('更新图表数据，时间段:', period);
|
||
|
|
// 这里可以添加实际的数据更新逻辑
|
||
|
|
}
|
||
|
|
|
||
|
|
function exportData() {
|
||
|
|
alert('导出统计数据功能');
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateReport() {
|
||
|
|
alert('生成分析报告功能');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 实时数据更新
|
||
|
|
function updateRealTimeStats() {
|
||
|
|
// 模拟实时数据变化
|
||
|
|
const stats = {
|
||
|
|
totalCleanup: Math.floor(1200 + Math.random() * 100),
|
||
|
|
waterQualityIndex: (80 + Math.random() * 10).toFixed(1),
|
||
|
|
deviceEfficiency: (90 + Math.random() * 8).toFixed(1) + '%',
|
||
|
|
energyConsumption: Math.floor(2000 + Math.random() * 300),
|
||
|
|
costSaving: (15 + Math.random() * 8).toFixed(1) + '万',
|
||
|
|
responseTime: (3 + Math.random() * 3).toFixed(1) + '分'
|
||
|
|
};
|
||
|
|
|
||
|
|
Object.keys(stats).forEach(key => {
|
||
|
|
const element = document.getElementById(key);
|
||
|
|
if (element) {
|
||
|
|
element.textContent = stats[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
// updateDateTime();
|
||
|
|
// setInterval(updateDateTime, 1000);
|
||
|
|
initializeCharts();
|
||
|
|
updateRealTimeStats();
|
||
|
|
setInterval(updateRealTimeStats, 10000); // 每10秒更新统计数据
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|