yanyl
/
MaritimeExpo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1e8690123f'
${ noResults }
MaritimeExpo/OceanMonitNew/indexWindPower.html

3260 lines
135 KiB
HTML
Raw Normal View History Unescape Escape

海洋科考、无人机、生态、采矿等其他页面
2 weeks 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>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<!-- 替换原有的font-awesome引用 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
<!-- 引入Chart.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script> -->
<script src="./model/chart.umd.min.js"></script>
<!-- 配置Tailwind -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#0F3460',
success: '#00B42A',
warning: '#FF7D00',
danger: '#F53F3F',
info: '#86909C',
dark: '#1D2129',
light: '#F2F3F5'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.card-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.hover-scale {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(245, 63, 63, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(245, 63, 63, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(245, 63, 63, 0);
}
}
.slide-in {
animation: slideIn 0.5s ease forwards;
}
@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.progress-bar {
transition: width 1s ease-in-out;
}
}
</style>
<style>
/* 航空系统风格样式 */
body {
background: url('/assets/img/bg.png') no-repeat;
background-size: 100% 100%;
color: #e0f0ff;
background-color: #0a1a2a;
overflow-x: hidden;
overflow-y: auto;
}
header {
background: rgba(12, 42, 73, 0.1);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.topDiv {
width: 100%;
height: 8vh;
background: url('/assets/img/topBg.png') top no-repeat;
background-size: 100% 115%;
display: flex;
justify-content: center;
z-index: 990;
position: relative;
}
.card-shadow-hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card-shadow-hover:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
border-color: rgba(64, 156, 255, 0.5) !important;
}
.white1 {
background: rgba(255, 255, 255, 0.85);
}
.rounded-lg {
border-radius: 8px !important;
}
.hover\:bg-gray-50:hover {
background: rgba(40, 80, 130, 0.7) !important;
}
.hover\:bg-gray-100:hover {
background: rgba(40, 80, 130, 0.7) !important;
}
.notification-button::after {
content: '';
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
background: #f44336;
border-radius: 50%;
box-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
}
.sidebar-item-active {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid #3B82F6;
}
/* 侧边栏 */
aside {
background: rgba(12, 42, 73, 0.1);
backdrop-filter: blur(10px);
border-right: 1px solid rgba(64, 156, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* 卡片样式 */
.bg-white {
background: rgba(12, 42, 73, 0.1) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(64, 156, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: #e0f0ff;
border-radius: 8px;
}
/* 卡片样式 */
.bg-white1 {
background: rgba(12, 42, 73, 0.1) !important;
backdrop-filter: blur(1px);
border: 1px solid rgba(64, 156, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: #e0f0ff;
border-radius: 8px;
}
.card-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.card-shadow-hover:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
border: 1px solid #4fc3f7;
}
/* 文字颜色 */
.text-gray-500 {
color: #a0d2ff !important;
}
.text-gray-600 {
color: #c2e0ff !important;
}
.text-green-600 {
color: #66bb6a !important;
text-shadow: 0 0 8px rgba(102, 187, 106, 0.7);
}
.text-red-500,
.text-red-600 {
color: #f44336 !important;
text-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
}
.text-yellow-600 {
color: #ff9800 !important;
text-shadow: 0 0 8px rgba(255, 152, 0, 0.7);
}
.text-teal-500 {
color: #26c6da !important;
text-shadow: 0 0 8px rgba(38, 198, 218, 0.7);
}
/* 表格样式 */
.bg-gray-50 {
background: rgba(25, 55, 95, 0.6) !important;
}
.data-grid-row:hover {
background: rgba(40, 80, 130, 0.7) !important;
transform: translateY(-1px);
}
.data-grid-cell {
color: #e0f0ff;
}
table th {
color: #4fc3f7;
font-weight: normal;
text-shadow: 0 0 8px rgba(79, 195, 247, 0.7);
}
table td {
border-bottom: 1px solid rgba(64, 156, 255, 0.3);
}
/* 隐藏导航链接的焦点样式和访问后的样式 */
</style>
</head>
<body class="font-sans text-gray-800">
<div class="flex h-screen">
<!-- 顶部标题栏 -->
<div class="topDiv w-full fixed top-0 left-0 z-50">
<div class="flex items-center justify-between w-full px-6 py-2">
<div class="flex items-center space-x-3" style="margin-top: -20px;">
<img src="/common/images/logo_gt.png" alt="Logo" />
</div>
<div class="text-white text-center">
<h1 class="text-xl font-bold text-white" style="font-size: 2rem; margin-top: -30px;">海上风电场智能监测平台</h1>
</div>
<div class="flex items-center space-x-5">
<!-- <div class="relative group">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<i class="fa fa-search text-gray-400"></i>
</span>
<input type="text" placeholder="搜索..."
class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500/50 w-64 transition-all duration-200 group-hover:border-blue-300 bg-white/90">
</div> -->
<div class="relative notification-button">
<button class="text-white hover:text-blue-300 transition-colors relative">
<i class="fa fa-bell text-xl"></i>
<span
class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center pulse-animation">2</span>
</button>
</div>
<div class="flex items-center space-x-3">
<!-- <img src="https://picsum.photos/id/1005/40/40" alt="用户头像"
class="rounded-full w-10 h-10 object-cover border-2 border-blue-500"> -->
<div class="text-white">
<div id="current-date" class="text-sm"></div>
<div id="current-time" class="text-sm"></div>
<!-- <p class="text-sm font-medium">运维管理员</p>
<p class="text-xs flex items-center">
<span class="w-2 h-2 bg-success rounded-full mr-1"></span>在线
</p> -->
</div>
</div>
</div>
</div>
</div>
<!-- 侧边导航栏 -->
<aside id="sidebar"
class="w-64 bg-white shadow-lg h-full fixed left-0 top-0 mt-8vh z-40 transition-all duration-300 mobile-hidden">
<nav class="py-6 px-3 mt-8">
<p class="text-xs uppercase text-gray-400 px-3 mb-2">监测概览</p>
<ul>
<li class="mb-1">
<button
class="flex items-center space-x-3 px-3 py-3 rounded-lg text-white border-l-4 border-transparent transition-all duration-200 sidebar-item w-full text-left"
data-target="dashboard">
<i class="fa fa-dashboard w-5 text-center"></i>
<span>总览</span>
</button>
</li>
<li class="mb-1">
<button
class="flex items-center space-x-3 px-3 py-3 rounded-lg text-gray-300 hover:bg-blue-500/20 hover:text-white border-l-4 border-transparent transition-all duration-200 sidebar-item w-full text-left"
data-target="power-stats">
<i class="fa fa-line-chart w-5 text-center"></i>
<span>发电统计</span>
</button>
</li>
<li class="mb-1">
<button
class="flex items-center space-x-3 px-3 py-3 rounded-lg text-gray-300 hover:bg-blue-500/20 hover:text-white border-l-4 border-transparent transition-all duration-200 sidebar-item w-full text-left"
data-target="unit-status">
<i class="fa fa-cogs w-5 text-center"></i>
<span>机组状态</span>
</button>
</li>
<li class="mb-1">
<button
class="flex items-center space-x-3 px-3 py-3 rounded-lg text-gray-300 hover:bg-blue-500/20 hover:text-white border-l-4 border-transparent transition-all duration-200 sidebar-item w-full text-left"
data-target="environment">
<i class="fa fa-cloud w-5 text-center"></i>
<span>环境参数</span>
</button>
</li>
<li class="mb-1">
<button
class="flex items-center space-x-3 px-3 py-3 rounded-lg text-gray-300 hover:bg-blue-500/20 hover:text-white border-l-4 border-transparent transition-all duration-200 sidebar-item w-full text-left"
data-target="inspection">
<i class="fa fa-search w-5 text-center"></i>
<span>智能巡检</span>
</button>
</li>
<li class="mb-1">
<button
class="flex items-center space-x-3 px-3 py-3 rounded-lg text-gray-300 hover:bg-blue-500/20 hover:text-white border-l-4 border-transparent transition-all duration-200 sidebar-item w-full text-left"
data-target="alerts">
<i class="fa fa-exclamation-triangle w-5 text-center"></i>
<span>预警中心</span>
<span
class="ml-auto bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center pulse-animation">2</span>
</button>
</li>
</ul>
</nav>
<div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="rounded-full w-10 h-10 object-cover">
<div>
<p class="text-sm font-medium">运维管理员</p>
<p class="text-xs text-gray-500 flex items-center">
<span class="w-2 h-2 bg-success rounded-full mr-1"></span>在线
</p>
</div>
</div>
</div>
</aside>
<!-- 主内容区 -->
<main class="flex-1 flex flex-col overflow-hidden ml-64 mt-8vh">
<!-- 内容滚动区 -->
<div class="flex-1 overflow-y-auto p-6 scrollbar-hide" id="content-area">
<!-- 系统概览 -->
<section id="dashboard" class="mb-8 slide-in" style="margin-top: 30px;">
<h3 class="text-2xl font-bold mb-6 text-white">系统概览</h3>
<!-- 系统概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 card-shadow hover-scale" data-card="capacity">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">总装机容量</p>
<h3 class="text-3xl font-bold mt-2">5,000 KW</h3>
<p class="text-success text-sm mt-2 flex items-center">
<i class="fa fa-check-circle mr-1"></i> 10台 × 50kW
</p>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-bolt text-primary text-xl"></i>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 card-details">
<div class="flex justify-between text-sm">
<span class="text-gray-500">风机类型</span>
<span>ZF-DK-500KW </span>
</div>
<div class="flex justify-between text-sm mt-2">
<span class="text-gray-500">安装年份</span>
<span>2023年</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale" data-card="operating">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">当前运行机组</p>
<h3 class="text-3xl font-bold mt-2">10 台</h3>
<p class="text-success text-sm mt-2 flex items-center">
<i class="fa fa-check-circle mr-1"></i> 90% 运行率
</p>
</div>
<div class="bg-success/10 p-3 rounded-lg">
<i class="fa fa-play-circle text-success text-xl"></i>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 card-details">
<div class="flex justify-between text-sm">
<span class="text-gray-500">维护中</span>
<span>1台 (GT007)</span>
</div>
<div class="flex justify-between text-sm mt-2">
<span class="text-gray-500">故障中</span>
<span>1台 (GT010)</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale" data-card="daily-power">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">今日发电量</p>
<h3 class="text-3xl font-bold mt-2">32,000 KWh</h3>
<p class="text-success text-sm mt-2 flex items-center">
<i class="fa fa-arrow-up mr-1"></i> 较昨日 +5.2%
</p>
</div>
<div class="bg-warning/10 p-3 rounded-lg">
<i class="fa fa-sun-o text-warning text-xl"></i>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 card-details">
<div class="flex justify-between text-sm">
<span class="text-gray-500">昨日发电量</span>
<span>1664 KWh</span>
</div>
<div class="flex justify-between text-sm mt-2">
<span class="text-gray-500">预计今日总量</span>
<span>32,000 KWh</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale" data-card="alerts">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-500 text-sm">当前预警数</p>
<h3 class="text-3xl font-bold mt-2">1 项</h3>
<p class="text-danger text-sm mt-2 flex items-center">
<i class="fa fa-exclamation-circle mr-1"></i> 需要处理
</p>
</div>
<div class="bg-danger/10 p-3 rounded-lg">
<i class="fa fa-exclamation-triangle text-danger text-xl"></i>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 card-details">
<div class="flex justify-between text-sm">
<span class="text-gray-500">故障预警</span>
<span class="text-danger">1项</span>
</div>
<!-- <div class="flex justify-between text-sm mt-2">
<span class="text-gray-500">警告预警</span>
<span class="text-warning">1项</span>
</div> -->
</div>
</div>
</div>
<!-- 关键指标快速查看 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- <div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">实时功率</h4>
<div class="h-60 relative">
<canvas id="realtimePowerChart"></canvas>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-500">
<span>当前功率: <span id="current-power-value">178</span> MW</span>
<span>更新时间: <span id="power-update-time">11:00:00</span></span>
</div>
</div> -->
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">机组状态分布</h4>
<div class="h-60 relative">
<canvas id="statusPieChart"></canvas>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">最新预警</h4>
<div class="space-y-4">
<div
class="border border-danger/20 bg-danger/5 rounded-lg p-4 hover:bg-danger/10 transition-colors cursor-pointer">
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium text-danger">GT010 变桨系统故障</h5>
<p class="text-sm text-gray-500 mt-1">发生时间: 08:23:15</p>
</div>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger">未处理</span>
</div>
</div>
<div
class="border border-warning/20 bg-warning/5 rounded-lg p-4 hover:bg-warning/10 transition-colors cursor-pointer">
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium text-warning">A区段海缆存在裸露风险</h5>
<p class="text-sm text-gray-500 mt-1">发生时间: 09:12:45</p>
</div>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">未处理</span>
</div>
</div>
<div
class="border border-warning/20 bg-warning/5 rounded-lg p-4 hover:bg-warning/10 transition-colors cursor-pointer">
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium text-warning">GT007 齿轮箱温度偏高</h5>
<p class="text-sm text-gray-500 mt-1">发生时间: 07:15:32</p>
</div>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">处理中</span>
</div>
</div>
</div>
<div class="mt-4 text-center">
<a href="#alerts" class="text-primary text-sm hover:underline transition-all">查看全部预警</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-1 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">实时功率</h4>
<div class="h-60 relative">
<canvas id="realtimePowerChart"></canvas>
</div>
<div class="mt-4 flex justify-between text-sm text-gray-500">
<span>当前功率: <span id="current-power-value">430</span> kW</span>
<span>更新时间: <span id="power-update-time">11:00:00</span></span>
</div>
<div class="mt-2 flex justify-between text-sm text-gray-500">
<span>发电效率: <span id="power-efficiency">84.2</span>%</span>
<span>海浪高度: <span id="wave-height">2.1</span> m</span>
</div>
</div>
</div>
</section>
<!-- 发电统计模块 -->
<section id="power-stats" class="mb-8 slide-in hidden" style="margin-top: 30px;">
<h3 class="text-2xl font-bold mb-6 text-white">发电统计</h3>
<!-- 关键指标卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">今日发电量</p>
<h3 class="text-3xl font-bold mt-2">32,000 KWh</h3>
<p class="text-success text-sm mt-2 flex items-center">
<i class="fa fa-arrow-up mr-1"></i> 较昨日 +5.2%
</p>
</div>
<div class="bg-warning/10 p-3 rounded-lg">
<i class="fa fa-sun-o text-warning text-xl"></i>
</div>
</div>
<div class="pt-4 border-t border-gray-100">
<div class="flex justify-between text-sm">
<span class="text-gray-500">昨日发电量</span>
<span>1664 KWh</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">本月发电量</p>
<h3 class="text-3xl font-bold mt-2">305,600 KWh</h3>
<p class="text-success text-sm mt-2 flex items-center">
<i class="fa fa-arrow-up mr-1"></i> 较上月 +8.7%
</p>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-calendar-check-o text-primary text-xl"></i>
</div>
</div>
<div class="pt-4 border-t border-gray-100">
<div class="flex justify-between text-sm">
<span class="text-gray-500">上月发电量</span>
<span>97,1200 KWh</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">累计发电量</p>
<h3 class="text-3xl font-bold mt-2">1.25 GWh</h3>
<p class="text-gray-500 text-sm mt-2">本年度</p>
</div>
<div class="bg-success/10 p-3 rounded-lg">
<i class="fa fa-line-chart text-success text-xl"></i>
</div>
</div>
<div class="pt-4 border-t border-gray-100">
<div class="flex justify-between text-sm">
<span class="text-gray-500">年计划</span>
<span>2.50 GWh</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">平均功率</p>
<h3 class="text-3xl font-bold mt-2">300 KW</h3>
<p class="text-success text-sm mt-2 flex items-center">
<i class="fa fa-bolt mr-1"></i> 利用率 89%
</p>
</div>
<div class="bg-info/10 p-3 rounded-lg">
<i class="fa fa-dashboard text-info text-xl"></i>
</div>
</div>
<div class="pt-4 border-t border-gray-100">
<div class="flex justify-between text-sm">
<span class="text-gray-500">峰值功率</span>
<span>192 MW</span>
</div>
</div>
</div>
</div>
<!-- 发电量趋势图表 -->
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
<h4 class="text-xl font-semibold">发电量趋势</h4>
<div class="flex space-x-2">
<button
class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors power-chart-filter active"
data-filter="day">日</button>
<button
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors power-chart-filter"
data-filter="month">月</button>
<button
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors power-chart-filter"
data-filter="cumulative">累计</button>
</div>
</div>
<div class="h-80 relative">
<div class="absolute inset-0 flex items-center justify-center bg-gray-50/50 z-10 chart-loading hidden">
<div class="text-center">
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
<p class="mt-2 text-sm text-gray-500">加载数据中...</p>
</div>
</div>
<canvas id="powerChart"></canvas>
</div>
</div>
<!-- 发电统计详情 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- 发电效率分析 -->
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">发电效率分析</h4>
<div class="h-64 relative" style="height: 24rem;">
<canvas id="efficiencyChart"></canvas>
</div>
<div class="mt-4 grid grid-cols-3 gap-4 text-center">
<div>
<p class="text-2xl font-bold text-success">89%</p>
<p class="text-sm text-gray-500">平均效率</p>
</div>
<div>
<p class="text-2xl font-bold text-primary">94%</p>
<p class="text-sm text-gray-500">峰值效率</p>
</div>
<div>
<p class="text-2xl font-bold text-warning">82%</p>
<p class="text-sm text-gray-500">最低效率</p>
</div>
</div>
</div>
<!-- 机组发电贡献 -->
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">机组发电贡献</h4>
<div class="h-64 relative">
<canvas id="unitContributionChart"></canvas>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm mb-1">
<span>GT001-GT002</span>
<span>25.6%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 25.6%"></div>
</div>
<div class="flex justify-between text-sm mb-1 mt-3">
<span>GT003-GT004</span>
<span>23.8%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-success h-2 rounded-full" style="width: 23.8%"></div>
</div>
<div class="flex justify-between text-sm mb-1 mt-3">
<span>GT005-GT006</span>
<span>26.2%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-warning h-2 rounded-full" style="width: 26.2%"></div>
</div>
<div class="flex justify-between text-sm mb-1 mt-3">
<span>GT007-GT008</span>
<span>24.4%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 24.4%"></div>
</div>
<div class="flex justify-between text-sm mb-1 mt-3">
<span>GT009-GT010</span>
<span>20.2%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-info h-2 rounded-full" style="width: 20.2%"></div>
</div>
</div>
</div>
</div>
<!-- 发电预测 -->
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<div class="flex justify-between items-center mb-6">
<h4 class="text-xl font-semibold">发电预测</h4>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">24小时</button>
<button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">7天</button>
<button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">30天</button>
</div>
</div>
<div class="h-72 relative">
<canvas id="forecastChart"></canvas>
</div>
</div>
</section>
<!-- 机组状态统计模块 -->
<section id="unit-status" class="mb-8 slide-in hidden" style="margin-top: 30px;">
<h3 class="text-2xl font-bold mb-6 text-white">机组状态</h3>
<!-- 机组状态概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">运行中机组</p>
<h3 class="text-3xl font-bold mt-2 text-success">10</h3>
</div>
<div class="bg-success/10 p-3 rounded-lg">
<i class="fa fa-play-circle text-success text-xl"></i>
</div>
</div>
<p class="text-sm text-gray-500">占总机组数的 90%</p>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">待机机组</p>
<h3 class="text-3xl font-bold mt-2 text-gray-500">0</h3>
</div>
<div class="bg-gray-100 p-3 rounded-lg">
<i class="fa fa-pause-circle text-gray-500 text-xl"></i>
</div>
</div>
<p class="text-sm text-gray-500">占总机组数的 0%</p>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">维护中机组</p>
<h3 class="text-3xl font-bold mt-2 text-warning">1</h3>
</div>
<div class="bg-warning/10 p-3 rounded-lg">
<i class="fa fa-wrench text-warning text-xl"></i>
</div>
</div>
<p class="text-sm text-gray-500">占总机组数的 5%</p>
</div>
<div class="bg-white rounded-xl p-6 card-shadow hover-scale">
<div class="flex justify-between items-start mb-4">
<div>
<p class="text-gray-500 text-sm">故障机组</p>
<h3 class="text-3xl font-bold mt-2 text-danger">1</h3>
</div>
<div class="bg-danger/10 p-3 rounded-lg">
<i class="fa fa-exclamation-triangle text-danger text-xl"></i>
</div>
</div>
<p class="text-sm text-gray-500">占总机组数的 5%</p>
</div>
</div>
<!-- 机组状态图表 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- 机组状态分布饼图 -->
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">机组状态分布</h4>
<div class="h-72 relative">
<canvas id="unitStatusChart"></canvas>
</div>
</div>
<!-- 机组功率输出柱状图 -->
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="font-semibold mb-4">机组功率输出 (KW)</h4>
<div class="h-72 relative">
<canvas id="unitPowerChart"></canvas>
</div>
</div>
</div>
<!-- 机组效率趋势图 -->
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<div class="flex justify-between items-center mb-6">
<h4 class="text-xl font-semibold">机组效率趋势</h4>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">24小时</button>
<button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">7天</button>
<button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">30天</button>
</div>
</div>
<div class="h-80 relative">
<canvas id="unitEfficiencyChart"></canvas>
</div>
</div>
<!-- 机组运行状态表格 -->
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
<div class="p-5 border-b border-gray-200 flex flex-wrap justify-between items-center gap-3">
<h4 class="text-xl font-semibold">机组运行状态</h4>
<div class="flex items-center space-x-3">
<div class="relative">
<input type="text" placeholder="搜索机组编号..."
class="pl-9 pr-3 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-sm w-full sm:w-48 transition-all hover:border-blue-300 bg-white/90">
<i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm"></i>
</div>
<div class="relative">
<select
class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all hover:border-blue-300 unit-status-filter">
<option value="all">全部状态</option>
<option value="operating">并网</option>
<option value="standby">待机</option>
<option value="maintenance">维护</option>
<option value="fault">故障</option>
</select>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-50">
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
机组编号</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
状态</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
当前功率</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
今日发电量</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
运行时长</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
负责人</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
状态</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<!-- 正常运行的机组 -->
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT001</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">并网</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">45 kW</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">3200 kWh</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">236 小时</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
张工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">历史</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT002</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">并网</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">50 kW</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">3500 kWh</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">312 小时</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
李工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">历史</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT003</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">并网</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">48 kW</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">3300 kWh</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">189 小时</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
王工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">运行中</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">历史</button>
</td>
</tr>
<!-- 维护中的机组 -->
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT015</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">维护</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">0 kW</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">0 kWh</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">维护中</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
赵工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">维护中</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">维护记录</button>
</td>
</tr>
<!-- 故障的机组 -->
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT018</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger">故障</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">0 kW</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">0 kWh</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">已停机</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
孙工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">故障</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">故障记录</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
<p class="text-sm text-gray-500">显示 5/10 台机组</p>
<div class="flex space-x-1">
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
disabled>
<i class="fa fa-chevron-left text-xs"></i>
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
<i class="fa fa-chevron-right text-xs"></i>
</button>
</div>
<!-- <button class="text-primary text-sm hover:underline transition-all">查看全部</button> -->
</div>
</div>
</section>
<!-- 环境参数模块 -->
<section id="environment" class="mb-8 slide-in hidden" style="margin-top: 30px;">
<h3 class="text-2xl font-bold mb-6 text-white">环境参数监测</h3>
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<div class="flex justify-between items-center mb-6">
<h4 class="text-xl font-semibold">实时环境参数</h4>
<div class="text-sm text-gray-500">
最后更新: <span id="env-update-time">10:35:22</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white bg-gray-50 p-5 rounded-lg hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-3">
<div>
<p class="text-gray-500 text-sm">风速</p>
<h4 class="text-3xl font-bold mt-1">8.0 <span class="text-lg font-normal text-gray-500">m/s</span>
</h4>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-location-arrow text-primary"></i>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-primary h-2.5 rounded-full progress-bar" style="width: 0%" data-target="65%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">良好 - 适合发电</p>
</div>
<div class="bg-white bg-gray-50 p-5 rounded-lg hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-3">
<div>
<p class="text-gray-500 text-sm">风向</p>
<h4 class="text-3xl font-bold mt-1">东北 <span class="text-lg font-normal text-gray-500">45°</span>
</h4>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-compass text-primary"></i>
</div>
</div>
<div class="flex justify-center">
<div class="relative w-16 h-16">
<svg class="w-full h-full" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="2" />
<line x1="50" y1="50" x2="50" y2="15" stroke="#3B82F6" stroke-width="3"
transform="rotate(45 50 50)" id="wind-direction-indicator" />
</svg>
</div>
</div>
</div>
<div class="bg-white bg-gray-50 p-5 rounded-lg hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-3">
<div>
<p class="text-gray-500 text-sm">温度</p>
<h4 class="text-3xl font-bold mt-1">16.5 <span class="text-lg font-normal text-gray-500">°C</span>
</h4>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-thermometer-half text-primary"></i>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-primary h-2.5 rounded-full progress-bar" style="width: 0%" data-target="45%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">适宜运行温度</p>
</div>
<div class="bg-white bg-gray-50 p-5 rounded-lg hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-3">
<div>
<p class="text-gray-500 text-sm">湿度</p>
<h4 class="text-3xl font-bold mt-1">72 <span class="text-lg font-normal text-gray-500">%</span></h4>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-tint text-primary"></i>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-primary h-2.5 rounded-full progress-bar" style="width: 0%" data-target="72%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">湿度略高</p>
</div>
<div class="bg-white bg-gray-50 p-5 rounded-lg hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-3">
<div>
<p class="text-gray-500 text-sm">波浪高度</p>
<h4 class="text-3xl font-bold mt-1">2.1 <span class="text-lg font-normal text-gray-500">m</span>
</h4>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-area-chart text-primary"></i>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-primary h-2.5 rounded-full progress-bar" style="width: 0%" data-target="30%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">浪高正常</p>
</div>
<div class="bg-white bg-gray-50 p-5 rounded-lg hover:shadow-md transition-shadow">
<div class="flex justify-between items-start mb-3">
<div>
<p class="text-gray-500 text-sm">海流速度</p>
<h4 class="text-3xl font-bold mt-1">12.8 <span class="text-lg font-normal text-gray-500">m/s</span>
</h4>
</div>
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-random text-primary"></i>
</div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-primary h-2.5 rounded-full progress-bar" style="width: 0%" data-target="25%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">海流平缓</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 card-shadow">
<h4 class="text-xl font-semibold mb-6">环境参数趋势</h4>
<div class="h-80 relative">
<div class="absolute inset-0 flex items-center justify-center bg-gray-50/50 z-10 chart-loading">
<div class="text-center">
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
<p class="mt-2 text-sm text-gray-500">加载数据中...</p>
</div>
</div>
<canvas id="environmentChart"></canvas>
</div>
</div>
</section>
<!-- 智能巡检模块 -->
<section id="inspection" class="mb-8 slide-in hidden" style="margin-top: 30px;">
<h3 class="text-2xl font-bold mb-6 text-white">智能巡检</h3>
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
<h4 class="text-xl font-semibold">当前巡检任务</h4>
<div class="flex space-x-2">
<button
class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">实时监测</button>
<button
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">历史记录</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 无人机巡检 -->
<div class="bg-white bg-gray-50 rounded-lg p-5 hover:shadow-md transition-shadow">
<div class="flex items-center mb-4">
<div class="bg-primary/10 p-3 rounded-lg mr-3">
<i class="fa fa-plane text-primary text-xl"></i>
</div>
<h4 class="font-semibold text-lg">无人机巡检</h4>
</div>
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">当前任务：GT005 叶片检查</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-success h-2.5 rounded-full progress-bar" style="width: 0%" data-target="65%"></div>
</div>
<p class="text-xs text-gray-500 mt-1">预计剩余时间：15分钟</p>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm">叶片状态</span>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">正常</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">筒塔状态</span>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">正常</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">巡检进度</span>
<span class="text-sm">65%</span>
</div>
</div>
<div class="mt-4">
<img src="/img/无人机2.png" alt="无人机巡检实时画面"
class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity cursor-pointer"
data-image-modal>
</div>
</div>
<!-- 无人船巡检 -->
<div class="bg-white bg-gray-50 rounded-lg p-5 hover:shadow-md transition-shadow">
<div class="flex items-center mb-4">
<div class="bg-primary/10 p-3 rounded-lg mr-3">
<i class="fa fa-ship text-primary text-xl"></i>
</div>
<h4 class="font-semibold text-lg">无人船巡检</h4>
</div>
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">当前任务：桩基与海缆区域巡查</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-success h-2.5 rounded-full progress-bar" style="width: 0%" data-target="30%"></div>
</div>
<p class="text-xs text-gray-500 mt-1">预计剩余时间：45分钟</p>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm">桩基状态</span>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">正常</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">电缆区域</span>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">需关注</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">巡检进度</span>
<span class="text-sm">30%</span>
</div>
</div>
<div class="mt-4">
<img src="/img/无人船.png" alt="无人船巡检实时画面"
class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity cursor-pointer"
data-image-modal>
</div>
</div>
<!-- ROV巡检 -->
<div class="bg-white bg-gray-50 rounded-lg p-5 hover:shadow-md transition-shadow">
<div class="flex items-center mb-4">
<div class="bg-primary/10 p-3 rounded-lg mr-3">
<i class="fa fa-subway text-primary text-xl"></i>
</div>
<h4 class="font-semibold text-lg">ROV水下巡检</h4>
</div>
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">当前任务：GT008 桩基检查</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-success h-2.5 rounded-full progress-bar" style="width: 0%" data-target="80%"></div>
</div>
<p class="text-xs text-gray-500 mt-1">预计剩余时间：8分钟</p>
</div>
<div class="space-y-3">
<div class="flex justify-between items-center">
<span class="text-sm">桩基状态</span>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">正常</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">浮生物附着</span>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">少量</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">巡检进度</span>
<span class="text-sm">80%</span>
</div>
</div>
<div class="mt-4">
<img src="/img/rov.jpg" alt="ROV水下巡检实时画面"
class="w-full h-40 object-cover rounded-lg hover:opacity-90 transition-opacity cursor-pointer"
data-image-modal>
</div>
</div>
</div>
</div>
<!-- 巡检任务计划 -->
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
<h4 class="text-xl font-semibold mb-6 p-5 border-b border-gray-200">巡检任务计划</h4>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-50">
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
任务ID</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
巡检对象</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
巡检方式</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
计划时间</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
负责人</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
状态</th>
<th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">INS-2023-056</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT001-GT005 叶片</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">无人机</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">今日 14:00</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
张工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">待执行</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">编辑</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">INS-2023-057</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">海缆区域 A1-A3</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">无人船</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">今日 16:30</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
李工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">待执行</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">编辑</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">INS-2023-058</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT008 桩基</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">ROV</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">明日 09:00</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
王工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">待执行</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
<p class="text-sm text-gray-500">显示 3/15 条巡检任务</p>
<div class="flex space-x-1">
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
disabled>
<i class="fa fa-chevron-left text-xs"></i>
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
<i class="fa fa-chevron-right text-xs"></i>
</button>
</div>
</div>
</div>
</section>
<!-- 预警中心模块 -->
<section id="alerts" class="mb-8 slide-in hidden" style="margin-top: 30px;">
<h3 class="text-2xl font-bold mb-6 text-white">预警中心</h3>
<div class="bg-white rounded-xl p-6 card-shadow mb-6">
<div class="flex flex-wrap justify-between items-center mb-6 gap-4">
<h4 class="text-xl font-semibold">预警统计</h4>
<div class="flex space-x-2">
<button
class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">全部预警</button>
<button
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">已处理</button>
<button
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">未处理</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-danger/10 rounded-lg p-5 border-l-4 border-danger hover:shadow-md transition-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-700 font-medium">故障预警</p>
<h4 class="text-3xl font-bold mt-2">1 <span class="text-lg font-normal text-gray-500">项</span></h4>
</div>
<div class="bg-danger/20 p-3 rounded-lg">
<i class="fa fa-exclamation-circle text-danger text-xl"></i>
</div>
</div>
<div class="mt-4">
<button class="text-danger text-sm flex items-center hover:underline transition-all">
查看详情 <i class="fa fa-angle-right ml-1"></i>
</button>
</div>
</div>
<div class="bg-warning/10 rounded-lg p-5 border-l-4 border-warning hover:shadow-md transition-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-700 font-medium">警告预警</p>
<h4 class="text-3xl font-bold mt-2">3 <span class="text-lg font-normal text-gray-500">项</span></h4>
</div>
<div class="bg-warning/20 p-3 rounded-lg">
<i class="fa fa-exclamation-triangle text-warning text-xl"></i>
</div>
</div>
<div class="mt-4">
<button class="text-warning text-sm flex items-center hover:underline transition-all">
查看详情 <i class="fa fa-angle-right ml-1"></i>
</button>
</div>
</div>
<div class="bg-primary/10 rounded-lg p-5 border-l-4 border-primary hover:shadow-md transition-shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-gray-700 font-medium">提示信息</p>
<h4 class="text-3xl font-bold mt-2">8 <span class="text-lg font-normal text-gray-500">项</span></h4>
</div>
<div class="bg-primary/20 p-3 rounded-lg">
<i class="fa fa-info-circle text-primary text-xl"></i>
</div>
</div>
<div class="mt-4">
<button class="text-primary text-sm flex items-center hover:underline transition-all">
查看详情 <i class="fa fa-angle-right ml-1"></i>
</button>
</div>
</div>
</div>
<div class="bg-white1 bg-gray-50 p-5 rounded-lg mb-6 hover:shadow-md transition-shadow">
<h4 class="font-semibold mb-4 flex items-center">
<i class="fa fa-exclamation-circle text-danger mr-2"></i> 主要故障预警详情
</h4>
<div class="border border-danger/20 bg-white rounded-lg p-4">
<div class="flex flex-wrap justify-between items-start mb-4 gap-2">
<div>
<h5 class="font-medium">GT010 变桨系统故障</h5>
<p class="text-sm text-gray-500">发生时间: 2023-06-15 08:23:15</p>
</div>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger">未处理</span>
</div>
<div class="mb-4">
<p class="text-sm mb-2"><span class="font-medium">故障描述:</span> 变桨电机过载保护触发，叶片角度无法调节，已自动停机</p>
<p class="text-sm mb-2"><span class="font-medium">故障等级:</span> 严重 (P1)</p>
<p class="text-sm"><span class="font-medium">可能原因:</span> 电机故障、传动系统卡涩、传感器异常</p>
</div>
<div class="flex flex-wrap justify-end gap-3">
<button
class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
查看历史
</button>
<button
class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">
派单处理
</button>
</div>
</div>
</div>
<div class="bg-white1 bg-gray-50 p-5 rounded-lg mb-6 hover:shadow-md transition-shadow">
<h4 class="font-semibold mb-4 flex items-center">
<i class="fa fa-exclamation-triangle text-warning mr-2"></i> 海缆安全预警
</h4>
<div class="border border-warning/20 bg-white rounded-lg p-4">
<div class="flex flex-wrap justify-between items-start mb-4 gap-2">
<div>
<h5 class="font-medium">A区段海缆存在裸露风险</h5>
<p class="text-sm text-gray-500">发生时间: 2023-06-15 09:12:45</p>
</div>
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">未处理</span>
</div>
<div class="mb-4">
<p class="text-sm mb-2"><span class="font-medium">预警描述:</span> 海底地形监测显示A2区段海床高度异常变化，可能导致海缆裸露</p>
<p class="text-sm mb-2"><span class="font-medium">风险等级:</span> 中等 (W2)</p>
<p class="text-sm"><span class="font-medium">建议措施:</span> 安排无人船和ROV进行详细勘察，评估裸露程度和风险</p>
</div>
<div class="flex flex-wrap justify-end gap-3">
<button
class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
查看海缆分布图
</button>
<button
class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">
安排巡检
</button>
</div>
</div>
</div>
<!-- 近期预警记录 -->
<div class="bg-white1 rounded-xl card-shadow overflow-hidden">
<h4 class="text-xl font-semibold mb-6 p-5 border-b border-gray-200">近期预警记录</h4>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-50">
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
预警ID</th>
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
设备/区域</th>
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
预警类型</th>
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
发生时间</th>
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
负责人</th>
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
状态</th>
<th
class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">AL-2023-156</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT018</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">变桨系统故障</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">08:23:15</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
张工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-danger/10 text-danger">未处理</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">处理</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">详情</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">AL-2023-155</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">A2 区段</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">海缆裸露风险</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">09:12:45</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
李工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-warning/10 text-warning">未处理</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">处理</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">详情</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">AL-2023-154</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT007</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">齿轮箱温度偏高</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">07:15:32</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
王工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-warning/10 text-warning">处理中</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">查看</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">详情</button>
</td>
</tr>
<tr class="data-grid-row hover:bg-gray-50 transition-colors">
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">AL-2023-153</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">GT002</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">液压系统压力低</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">06:42:18</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<div class="flex items-center">
<div
class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-2">
<i class="fa fa-user text-xs"></i>
</div>
赵工
</div>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<span class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">已处理</span>
</td>
<td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm data-grid-cell">
<button class="text-blue-600 hover:text-blue-800 mr-3 transition-colors">详情</button>
<button class="text-blue-600 hover:text-blue-800 transition-colors">历史</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-200 flex flex-wrap justify-between items-center gap-4">
<p class="text-sm text-gray-500">显示 4/25 条预警记录</p>
<div class="flex space-x-1">
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50 transition-colors"
disabled>
<i class="fa fa-chevron-left text-xs"></i>
</button>
<button
class="w-8 h-8 flex items-center justify-center rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">1</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">2</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-100 transition-colors">3</button>
<button
class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-100 transition-colors">
<i class="fa fa-chevron-right text-xs"></i>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
<!-- 图片查看模态框 -->
<div id="image-modal" class="fixed inset-0 bg-black/70 z-50 hidden items-center justify-center fade-in">
<div class="relative max-w-4xl w-full mx-4">
<button id="close-modal"
class="absolute -top-12 right-0 text-white text-2xl hover:text-gray-300 transition-colors">
<i class="fa fa-times"></i>
</button>
<img id="modal-image" src="" alt="大图查看" class="max-h-[80vh] w-full object-contain rounded-lg">
<p id="modal-caption" class="text-white text-center mt-4"></p>
</div>
</div>
<!-- JavaScript -->
<script>
// 设置当前日期和时间
function updateDateTime() {
const now = new Date();
const dateStr = now.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
const timeStr = now.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('current-date').textContent = dateStr;
document.getElementById('current-time').textContent = timeStr;
}
updateDateTime();
setInterval(updateDateTime, 1000);
// 修复后的导航菜单切换代码
document.querySelectorAll('nav button').forEach(button => {
button.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
// 更新导航高亮
document.querySelectorAll('nav button').forEach(item => {
item.classList.remove('bg-blue-500/20', 'text-white', 'border-l-4', 'border-blue-500');
item.classList.add('text-gray-300');
});
this.classList.add('bg-blue-500/20', 'text-white', 'border-l-4', 'border-blue-500');
this.classList.remove('text-gray-300');
// 隐藏所有内容区域
document.querySelectorAll('section').forEach(section => {
section.classList.add('hidden');
});
// 显示对应的内容区域
const targetId = this.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.classList.remove('hidden');
}
// 在移动设备上点击导航后关闭侧边栏
if (window.innerWidth < 768) {
document.getElementById('sidebar').classList.add('hidden');
}
});
});
// // 卡片详情展开/折叠
// document.querySelectorAll('[data-card]').forEach(card => {
// card.addEventListener('click', function () {
// const details = this.querySelector('.card-details');
// details.classList.toggle('hidden');
// // 添加动画效果
// if (!details.classList.contains('hidden')) {
// details.style.maxHeight = '0';
// setTimeout(() => {
// details.style.maxHeight = details.scrollHeight + 'px';
// details.style.overflow = 'hidden';
// details.style.transition = 'max-height 0.3s ease';
// }, 10);
// } else {
// details.style.maxHeight = '0';
// setTimeout(() => {
// details.style.transition = 'none';
// }, 300);
// }
// });
// });
// // 侧边栏切换（移动端）
// document.getElementById('sidebar-toggle').addEventListener('click', function () {
// const sidebar = document.getElementById('sidebar');
// sidebar.classList.toggle('hidden');
// });
// // 卡片详情展开/折叠
// document.querySelectorAll('[data-card]').forEach(card => {
// card.addEventListener('click', function () {
// const details = this.querySelector('.card-details');
// details.classList.toggle('hidden');
// // 添加动画效果
// if (!details.classList.contains('hidden')) {
// details.style.maxHeight = '0';
// setTimeout(() => {
// details.style.maxHeight = details.scrollHeight + 'px';
// details.style.overflow = 'hidden';
// details.style.transition = 'max-height 0.3s ease';
// }, 10);
// } else {
// details.style.maxHeight = '0';
// setTimeout(() => {
// details.style.transition = 'none';
// }, 300);
// }
// });
// });
// 初始化图表
function initCharts() {
// 实时功率图表
try {
//if (typeof realtimePowerChart === 'undefined' || !realtimePowerChart) {
const realtimeCtx = document.getElementById('realtimePowerChart');
if (realtimeCtx && realtimeCtx.getContext) {
const ctx = realtimeCtx.getContext('2d');
if (ctx) {
// 修改实时功率图表配置
window.realtimePowerChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
datasets: [{
label: '实时功率 (kW)',
data: [150, 180, 320, 430, 460, 420, 380, 280], // 根据风机特性调整的数据
borderColor: '#40a9ff',
backgroundColor: 'rgba(64, 169, 255, 0.1)',
borderWidth: 2,
pointRadius: 3,
pointBackgroundColor: '#40a9ff',
pointBorderColor: '#ffffff',
pointBorderWidth: 1,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
labels: {
color: '#ffffff'
}
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
titleFont: {
size: 14
},
bodyFont: {
size: 13
},
callbacks: {
label: function (context) {
return `功率: ${context.parsed.y} kW`;
}
}
}
},
scales: {
y: {
beginAtZero: false,
min: 0,
max: 500, // 与风机额定功率500kW匹配
grid: {
drawBorder: false,
},
ticks: {
stepSize: 100,
callback: function (value) {
return value + ' kW';
},
color: '#fff'
},
title: {
display: true,
text: '功率 (kW)',
font: {
size: 12
},
color: '#fff'
}
},
x: {
grid: {
display: false
},
ticks: {
maxRotation: 0,
autoSkip: false,
color: '#fff'
}
}
},
animation: {
duration: 500,
easing: 'easeOutQuart'
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
// 隐藏加载状态
const loadingElement = document.getElementById('realtime-power-loading');
if (loadingElement) {
loadingElement.style.display = 'none';
}
}
}
//}
} catch (error) {
console.error('初始化实时功率图表时出错:', error);
// 即使出错也隐藏加载状态
const loadingElement = document.getElementById('realtime-power-loading');
if (loadingElement) {
loadingElement.style.display = 'none';
}
}
// 机组状态饼图
if (typeof statusChart === 'undefined') {
const statusCtx = document.getElementById('statusPieChart').getContext('2d');
window.statusChart = new Chart(statusCtx, {
type: 'doughnut',
data: {
labels: ['并网', '待机', '维护', '故障'],
datasets: [{
data: [18, 0, 1, 1],
backgroundColor: [
'#00B42A',
'#86909C',
'#FF7D00',
'#F53F3F'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#ffffff' // 图例文字颜色设置为白色
}
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.label || '';
const value = context.raw || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / total) * 100);
return `${label}: ${value}台 (${percentage}%)`;
}
}
}
},
cutout: '70%',
animation: {
animateRotate: true,
animateScale: true,
duration: 1500,
easing: 'easeOutQuart'
}
}
});
// 隐藏加载状态
//document.querySelectorAll('#dashboard .chart-loading')[1].style.display = 'none';
}
// 发电统计图表
//if (typeof powerChart === 'undefined') {
// const powerCtx = document.getElementById('powerChart').getContext('2d');
// window.powerChart = new Chart(powerCtx, {
// type: 'line',
// data: {
// labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
// datasets: [{
// label: '实时功率 (MW)',
// data: [120, 110, 95, 80, 130, 180, 190, 185, 170, 150, 130, 110],
// borderColor: '#165DFF',
// backgroundColor: 'rgba(22, 93, 255, 0.1)',
// tension: 0.4,
// fill: true
// }]
// },
// options: {
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// legend: {
// position: 'top',
// labels: {
// color: '#ffffff' // 图例文字颜色设置为白色
// }
// },
// tooltip: {
// mode: 'index',
// intersect: false,
// callbacks: {
// label: function (context) {
// return `功率: ${context.raw} MW`;
// }
// }
// }
// },
// interaction: {
// mode: 'nearest',
// axis: 'x',
// intersect: false
// },
// scales: {
// y: {
// beginAtZero: true,
// grid: {
// drawBorder: false
// },
// ticks: {
// color: '#ffffff' // Y轴刻度文字颜色设置为白色
// },
// title: {
// color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
// }
// },
// x: {
// grid: {
// display: false
// },
// ticks: {
// color: '#ffffff' // Y轴刻度文字颜色设置为白色
// },
// title: {
// color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
// }
// }
// },
// animation: {
// duration: 1500,
// easing: 'easeOutQuart'
// }
// }
// });
// 隐藏加载状态
//document.querySelector('#power-stats .chart-loading').style.display = 'none';
//}
// 环境参数趋势图
if (typeof envChart === 'undefined') {
const envCtx = document.getElementById('environmentChart').getContext('2d');
window.envChart = new Chart(envCtx, {
type: 'line',
data: {
labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00'],
datasets: [
{
label: '风速 (m/s)',
data: [6.2, 5.8, 5.1, 7.3, 8.1, 8.6],
borderColor: '#165DFF',
tension: 0.4,
yAxisID: 'y'
},
{
label: '温度 (°C)',
data: [16.2, 15.8, 15.5, 16.3, 17.5, 18.5],
borderColor: '#F53F3F',
tension: 0.4,
yAxisID: 'y1'
},
{
label: '湿度 (%)',
data: [78, 79, 80, 76, 74, 72],
borderColor: '#0FC6C2',
tension: 0.4,
yAxisID: 'y2'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#ffffff' // 图例文字颜色设置为白色
}
},
tooltip: {
mode: 'index',
intersect: false
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: '风速 (m/s)',
color: '#ffffff'
},
grid: {
drawBorder: false
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: '温度 (°C)',
color: '#ffffff'
},
grid: {
drawOnChartArea: false
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
},
y2: {
type: 'linear',
display: false,
position: 'right',
title: {
display: true,
text: '湿度 (%)',
color: '#ffffff'
},
min: 0,
max: 100
},
x: {
grid: {
display: false
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
title: {
color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
}
}
},
animation: {
duration: 1500,
easing: 'easeOutQuart'
}
}
});
// 隐藏加载状态
document.querySelector('#environment .chart-loading').style.display = 'none';
}
}
// 进度条动画
function animateProgressBars() {
const progressBars = document.querySelectorAll('.progress-bar');
progressBars.forEach(bar => {
const target = bar.getAttribute('data-target');
// 重置动画
bar.style.width = '0%';
// 触发重绘
bar.offsetHeight;
// 设置目标宽度以触发动画
bar.style.width = target;
});
}
// 模拟风向变化
function simulateWindDirection() {
const indicator = document.getElementById('wind-direction-indicator');
if (indicator) {
let currentAngle = 45;
setInterval(() => {
// 小幅度随机变化风向
const change = (Math.random() - 0.5) * 10;
currentAngle = (currentAngle + change) % 360;
indicator.style.transform = `rotate(${currentAngle}deg)`;
// 更新风向文本 - 修复错误的选择器
const directionElements = document.querySelectorAll('h4');
let directionText = null;
for (let el of directionElements) {
if (el.textContent.includes('东北')) {
directionText = el;
break;
}
}
if (directionText) {
let direction = '';
if (currentAngle >= 337.5 || currentAngle < 22.5) direction = '北';
else if (currentAngle < 67.5) direction = '东北';
else if (currentAngle < 112.5) direction = '东';
else if (currentAngle < 157.5) direction = '东南';
else if (currentAngle < 202.5) direction = '南';
else if (currentAngle < 247.5) direction = '西南';
else if (currentAngle < 292.5) direction = '西';
else direction = '西北';
directionText.innerHTML = `${direction} <span class="text-lg font-normal text-gray-500">${Math.round(currentAngle)}°</span>`;
}
}, 5000);
}
}
// 模拟环境数据更新
function simulateEnvUpdates() {
const updateTimeEl = document.getElementById('env-update-time');
if (updateTimeEl) {
setInterval(() => {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
updateTimeEl.textContent = `${hours}:${minutes}:${seconds}`;
}, 1000);
}
}
// 图片模态框功能
document.querySelectorAll('[data-image-modal]').forEach(img => {
img.addEventListener('click', function () {
const modal = document.getElementById('image-modal');
const modalImg = document.getElementById('modal-image');
const modalCaption = document.getElementById('modal-caption');
modalImg.src = this.src;
modalCaption.textContent = this.alt;
modal.classList.remove('hidden');
modal.classList.add('flex');
document.body.style.overflow = 'hidden'; // 防止背景滚动
});
});
// 关闭模态框
document.getElementById('close-modal').addEventListener('click', function () {
const modal = document.getElementById('image-modal');
modal.classList.add('hidden');
modal.classList.remove('flex');
document.body.style.overflow = 'auto'; // 恢复滚动
});
// 点击模态框外部关闭
document.getElementById('image-modal').addEventListener('click', function (e) {
if (e.target === this) {
this.classList.add('hidden');
this.classList.remove('flex');
document.body.style.overflow = 'auto';
}
});
// 页面滚动时为区域添加动画
function handleScrollAnimations() {
const sections = document.querySelectorAll('section');
const contentArea = document.getElementById('content-area');
const scrollTop = contentArea.scrollTop;
const viewportHeight = contentArea.clientHeight;
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
// 检查元素是否在视口中
if (scrollTop + viewportHeight > sectionTop + 100 &&
scrollTop < sectionTop + sectionHeight - 100) {
section.classList.add('slide-in');
}
});
}
// 页面加载完成后初始化
window.addEventListener('load', function () {
// 设置默认选中项为总览
const dashboardItem = document.querySelector('.sidebar-item[data-target="dashboard"]');
if (dashboardItem) {
dashboardItem.classList.add('bg-blue-500/20', 'text-white', 'border-l-4', 'border-blue-500');
dashboardItem.classList.remove('text-gray-300');
}
// 默认只显示总览内容，隐藏其他内容区域
document.querySelectorAll('section').forEach((section, index) => {
if (index !== 0) { // 除了第一个section（dashboard），其他都隐藏
section.classList.add('hidden');
}
});
// 初始化所有图表
initCharts();
// 触发初始进度条动画
setTimeout(() => {
animateProgressBars();
}, 500);
// 启动模拟数据更新
simulateWindDirection();
simulateEnvUpdates();
// 启动实时功率数据更新
updateRealtimePowerData();
// // 添加滚动动画监听
// document.getElementById('content-area').addEventListener('scroll', handleScrollAnimations);
// // 初始触发一次滚动动画检查
// handleScrollAnimations();
});
// 更新实时功率数据更新函数
function updateRealtimePowerData() {
// 模拟实时功率数据更新
setInterval(() => {
// 获取当前时间
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
// 更新时间显示
const timeElement = document.getElementById('power-update-time');
if (timeElement) {
timeElement.textContent = `${hours}:${minutes}:${seconds}`;
}
// 模拟功率数据在380-460kW之间波动（接近430kW平均值）
const currentPower = 430 + (Math.random() - 0.5) * 160;
const powerElement = document.getElementById('current-power-value');
if (powerElement) {
powerElement.textContent = Math.round(currentPower);
}
// 更新效率显示（80-88%之间波动）
const efficiency = 84.2 + (Math.random() - 0.5) * 8;
const efficiencyElement = document.getElementById('power-efficiency');
if (efficiencyElement) {
efficiencyElement.textContent = efficiency.toFixed(1);
}
// 如果图表已初始化，则更新数据
if (typeof realtimePowerChart !== 'undefined' &&
realtimePowerChart &&
realtimePowerChart.data &&
realtimePowerChart.data.datasets &&
realtimePowerChart.data.datasets.length > 0) {
try {
// 生成新的功率值（在380-460kW范围内波动，符合风机特性）
const lastValue = realtimePowerChart.data.datasets[0].data[realtimePowerChart.data.datasets[0].data.length - 1];
const newValue = Math.max(150, Math.min(480, lastValue + (Math.random() - 0.5) * 50));
// 更新当前功率显示
const powerValueElement = document.getElementById('current-power-value');
if (powerValueElement) {
powerValueElement.textContent = Math.round(newValue);
}
// 移除第一个数据点，添加新数据点
realtimePowerChart.data.datasets[0].data.shift();
realtimePowerChart.data.datasets[0].data.push(Math.round(newValue));
// 更新时间标签
const newTime = new Date();
const newHours = String(newTime.getHours()).padStart(2, '0');
const newMinutes = String(newTime.getMinutes()).padStart(2, '0');
realtimePowerChart.data.labels.shift();
realtimePowerChart.data.labels.push(`${newHours}:${newMinutes}`);
// 更新图表
realtimePowerChart.update();
} catch (error) {
console.warn('图表更新出错:', error);
}
}
}, 5000); // 每5秒更新一次
}
// 侧边栏导航选中状态管理
document.addEventListener('DOMContentLoaded', function () {
// 获取所有侧边栏项
const sidebarItems = document.querySelectorAll('.sidebar-item');
// 设置默认选中项为总览
const dashboardItem = document.querySelector('.sidebar-item[data-target="dashboard"]');
if (dashboardItem) {
dashboardItem.classList.add('bg-blue-500/20', 'text-white', 'border-l-4', 'border-blue-500');
dashboardItem.classList.remove('text-gray-300');
}
// 为每个侧边栏项添加点击事件
sidebarItems.forEach(item => {
item.addEventListener('click', function (e) {
// 阻止默认行为
e.preventDefault();
// 移除所有项的选中样式
sidebarItems.forEach(el => {
el.classList.remove('bg-blue-500/20', 'text-white', 'border-l-4', 'border-blue-500');
el.classList.add('text-gray-300');
});
// 为当前点击项添加选中样式
this.classList.add('bg-blue-500/20', 'text-white', 'border-l-4', 'border-blue-500');
this.classList.remove('text-gray-300');
// 获取目标内容区域
const targetId = this.getAttribute('data-target');
const targetElement = document.getElementById(targetId);
// 隐藏所有内容区域
document.querySelectorAll('section').forEach(section => {
section.classList.add('hidden');
});
// 显示对应的内容区域
if (targetElement) {
targetElement.classList.remove('hidden');
}
});
});
});
// 在文件顶部添加全局变量声明
let powerChartInstance = null;
// 修改发电量趋势图表数据
const powerChartData = {
day: {
labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
datasets: [{
label: '实时功率 (MW)',
data: [120, 110, 95, 80, 130, 180, 190, 185, 170, 150, 130, 110],
borderColor: '#165DFF',
backgroundColor: 'rgba(22, 93, 255, 0.1)',
tension: 0.4,
fill: true
}]
},
month: {
labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
datasets: [{
label: '日发电量 (MWh)',
data: [3200, 3600, 3800, 3400, 3700, 3900, 3680],
borderColor: '#165DFF',
backgroundColor: 'rgba(22, 93, 255, 0.1)',
tension: 0.4,
fill: true
}]
},
cumulative: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
datasets: [{
label: '月发电量 (GWh)',
data: [105, 98, 112, 108, 120, 125, 130, 128, 115, 110, 105, 95],
borderColor: '#165DFF',
backgroundColor: 'rgba(22, 93, 255, 0.1)',
tension: 0.4,
fill: true
}]
}
};
// 修改初始化图表函数
function initPowerChart(filter = 'day') {
// 修改发电量趋势图表配置
const powerCtx = document.getElementById('powerChart').getContext('2d');
window.powerChart = new Chart(powerCtx, {
type: 'line',
data: {
labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
datasets: [{
label: '实时功率 (kW)',
data: [150, 180, 220, 320, 430, 460, 420, 380, 350, 300, 250, 200],
borderColor: '#165DFF',
backgroundColor: 'rgba(22, 93, 255, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#ffffff'
}
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function (context) {
return `功率: ${context.raw} kW`;
}
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
scales: {
y: {
beginAtZero: true,
min: 0,
max: 500,
grid: {
drawBorder: false
},
ticks: {
stepSize: 100,
callback: function (value) {
return value + ' kW';
},
color: '#ffffff'
},
title: {
display: true,
text: '功率 (kW)',
color: '#ffffff'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#ffffff'
},
title: {
color: '#ffffff'
}
}
},
animation: {
duration: 1500,
easing: 'easeOutQuart'
}
}
});
// 如果已有实例，先销毁
if (powerChartInstance) {
powerChartInstance.destroy();
}
// 创建新图表实例
powerChartInstance = new Chart(powerCtx, {
type: 'line',
data: powerChartData[filter],
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#ffffff'
}
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y;
if (filter === 'day') {
label += ' MW';
} else if (filter === 'month') {
label += ' MWh';
} else {
label += ' GWh';
}
}
return label;
}
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false,
color: 'rgba(255, 255, 255, 0.1)'
},
ticks: {
color: '#a0d2ff',
callback: function (value) {
if (filter === 'day') {
return value + ' MW';
} else if (filter === 'month') {
return value + ' MWh';
} else {
return value + ' GWh';
}
}
},
title: {
display: true,
text: filter === 'day' ? '功率 (MW)' : (filter === 'month' ? '发电量 (MWh)' : '发电量 (GWh)'),
color: '#a0d2ff'
}
},
x: {
grid: {
display: false,
drawBorder: false
},
ticks: {
color: '#a0d2ff'
}
}
},
animation: {
duration: 1500,
easing: 'easeOutQuart'
}
}
});
// 隐藏加载状态
document.querySelector('#power-stats .chart-loading').classList.add('hidden');
}
// 更新发电量趋势图表数据
function updatePowerChart(filter) {
// 显示加载状态
const loadingElement = document.querySelector('#power-stats .chart-loading');
if (loadingElement) {
loadingElement.classList.remove('hidden');
}
// 模拟数据加载延迟
setTimeout(() => {
if (powerChartInstance) {
// 根据筛选器更新数据
powerChartInstance.data.labels = powerChartData[filter].labels;
powerChartInstance.data.datasets[0].data = powerChartData[filter].data;
// 更新Y轴单位
if (filter === 'day') {
powerChartInstance.options.scales.y.ticks.callback = function (value) {
return value + ' MWh';
};
powerChartInstance.options.scales.y.title.text = '发电量 (MWh)';
powerChartInstance.data.datasets[0].label = '发电量 (MWh)';
} else if (filter === 'month') {
powerChartInstance.options.scales.y.ticks.callback = function (value) {
return value / 1000 + ' GWh';
};
powerChartInstance.options.scales.y.title.text = '发电量 (GWh)';
powerChartInstance.data.datasets[0].label = '发电量 (GWh)';
} else {
powerChartInstance.options.scales.y.ticks.callback = function (value) {
return value / 10000 + ' TWh';
};
powerChartInstance.options.scales.y.title.text = '发电量 (TWh)';
powerChartInstance.data.datasets[0].label = '发电量 (TWh)';
}
// 更新图表
powerChartInstance.update();
// 隐藏加载状态
if (loadingElement) {
loadingElement.classList.add('hidden');
}
}
}, 300);
}
// 实时更新发电量趋势图表数据
function startPowerChartRealtimeUpdate() {
setInterval(() => {
if (powerChartInstance) {
// 获取当前激活的筛选器
const activeFilter = document.querySelector('.power-chart-filter.active')?.getAttribute('data-filter') || 'day';
// 生成新的随机数据点
const newData = [...powerChartInstance.data.datasets[0].data];
const randomIndex = Math.floor(Math.random() * newData.length);
if (activeFilter === 'day') {
// 对于日数据，调整10%范围内的波动
const currentValue = newData[randomIndex];
const change = (Math.random() - 0.5) * currentValue * 0.2;
newData[randomIndex] = Math.max(0, currentValue + change);
} else if (activeFilter === 'month') {
// 对于月数据，调整5%范围内的波动
const currentValue = newData[randomIndex];
const change = (Math.random() - 0.5) * currentValue * 0.1;
newData[randomIndex] = Math.max(0, currentValue + change);
}
// 更新图表数据
powerChartInstance.data.datasets[0].data = newData;
powerChartInstance.update();
}
}, 10000); // 每10秒更新一次数据
}
// 添加发电量趋势筛选功能
document.addEventListener('DOMContentLoaded', function () {
// 为发电量趋势筛选按钮添加事件监听器
document.querySelectorAll('.power-chart-filter').forEach(button => {
button.addEventListener('click', function () {
// 更新按钮样式
document.querySelectorAll('.power-chart-filter').forEach(btn => {
btn.classList.remove('bg-primary', 'text-white', 'hover:bg-primary/90');
btn.classList.add('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
});
this.classList.remove('bg-gray-200', 'text-gray-700', 'hover:bg-gray-300');
this.classList.add('bg-primary', 'text-white', 'hover:bg-primary/90');
// 获取筛选器类型
const filter = this.getAttribute('data-filter');
// 显示加载状态
document.querySelector('#power-stats .chart-loading').classList.remove('hidden');
// 模拟数据加载延迟
setTimeout(() => {
// 更新图表数据
initPowerChart(filter);
}, 300);
});
});
// 初始化发电量趋势图表
initPowerChart();
startPowerChartRealtimeUpdate();
});
// 在页面加载完成后初始化机组状态相关图表
document.addEventListener('DOMContentLoaded', function () {
// 初始化机组状态分布饼图
initUnitStatusChart();
// 初始化机组功率输出柱状图
initUnitPowerChart();
// 初始化机组效率趋势图
initUnitEfficiencyChart();
});
// 初始化机组状态分布饼图
function initUnitStatusChart() {
const ctx = document.getElementById('unitStatusChart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['运行中', '待机', '维护中', '故障'],
datasets: [{
data: [18, 0, 1, 1],
backgroundColor: [
'#10B981', // 运行中 - 绿色
'#6B7280', // 待机 - 灰色
'#F59E0B', // 维护中 - 黄色
'#EF4444' // 故障 - 红色
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
color: '#ffffff',
font: {
size: 12
}
}
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.label || '';
const value = context.raw || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / total) * 100);
return `${label}: ${value}台 (${percentage}%)`;
}
}
}
}
}
});
}
// 初始化机组功率输出柱状图
function initUnitPowerChart() {
const ctx = document.getElementById('unitPowerChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['GT001', 'GT002', 'GT003', 'GT004', 'GT005', 'GT006', 'GT007', 'GT008'],
datasets: [{
label: '当前功率 (MW)',
data: [9.8, 10.0, 9.7, 9.9, 9.6, 10.1, 9.5, 9.8],
backgroundColor: '#3B82F6',
borderColor: '#1D4ED8',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
labels: {
color: '#ffffff' // 图例文字颜色设置为白色
}
},
tooltip: {
callbacks: {
label: function (context) {
return `功率: ${context.raw} KW`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: '功率 (MW)',
color: "#ffffff"
},
grid: {
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
},
x: {
grid: {
display: false
},
ticks: {
color: '#ffffff' // X轴刻度文字颜色设置为白色
},
title: {
color: '#ffffff' // X轴标题颜色设置为白色（如果有标题的话）
}
}
}
}
});
}
// 初始化机组效率趋势图
function initUnitEfficiencyChart() {
const ctx = document.getElementById('unitEfficiencyChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
datasets: [
{
label: '平均效率 (%)',
data: [85, 87, 92, 94, 91, 88, 86],
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.4,
fill: true
},
{
label: '最高效率 (%)',
data: [92, 94, 96, 98, 95, 93, 91],
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.4,
fill: true
},
{
label: '最低效率 (%)',
data: [78, 80, 85, 88, 84, 82, 79],
borderColor: '#F59E0B',
backgroundColor: 'rgba(245, 158, 11, 0.1)',
tension: 0.4,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#ffffff' // 图例文字颜色设置为白色
}
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
beginAtZero: true,
max: 100,
title: {
display: true,
text: '效率 (%)',
color: "#ffffff"
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
},
x: {
grid: {
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
title: {
color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
}
}
},
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false
}
}
});
}
// 在页面加载完成后初始化发电统计相关图表
document.addEventListener('DOMContentLoaded', function () {
// 初始化发电效率分析图表
initEfficiencyChart();
// 初始化机组发电贡献图表
initUnitContributionChart();
// 初始化发电预测图表
initForecastChart();
});
// 初始化发电效率分析图表
function initEfficiencyChart() {
const ctx = document.getElementById('efficiencyChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
datasets: [
{
label: '实际效率 (%)',
data: [78, 82, 88, 92, 90, 85, 80],
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.4,
fill: true
},
{
label: '理论效率 (%)',
data: [85, 88, 94, 96, 94, 90, 85],
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderDash: [5, 5],
tension: 0.4,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
boxWidth: 10,
boxHeight: 10,
color: '#ffffff'
}
}
},
scales: {
y: {
beginAtZero: true,
max: 100,
title: {
display: true,
text: '效率 (%)',
color: '#ffffff'
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
},
x: {
grid: {
display: false
},
title: {
color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
}
}
}
});
}
// 初始化机组发电贡献图表
function initUnitContributionChart() {
const ctx = document.getElementById('unitContributionChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['GT001-GT002', 'GT003-GT004', 'GT005-GT006', 'GT007-GT008', 'GT009-GT010'],
datasets: [{
label: '发电贡献 (%)',
data: [25.6, 23.8, 26.2, 24.4, 20.2],
backgroundColor: [
'#3B82F6',
'#10B981',
'#F59E0B',
'#8B5CF6',
'#EF4444'
]
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
title: {
color: '#ffffff' // Y轴标题颜色设置为白色（如果有标题的话）
}
},
x: {
beginAtZero: true,
max: 30,
title: {
display: true,
text: '贡献率 (%)',
color: '#ffffff'
},
ticks: {
color: '#ffffff' // Y轴刻度文字颜色设置为白色
},
}
}
}
});
}
// 初始化发电预测图表
function initForecastChart() {
// 修改发电预测图表配置
const forecastCtx = document.getElementById('forecastChart').getContext('2d');
window.forecastChart = new Chart(forecastCtx, {
type: 'line',
data: {
labels: ['现在', '+2h', '+4h', '+6h', '+8h', '+10h', '+12h', '+14h', '+16h', '+18h', '+20h', '+22h', '+24h'],
datasets: [
{
label: '实际发电 (kW)',
data: [430, 440, 450, 460, 455, 450, 440, 430, 420, 410, 400, 390, 380],
borderColor: '#10B981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.4,
fill: true
},
{
label: '预测发电 (kW)',
data: [430, 450, 460, 465, 460, 455, 450, 440, 430, 420, 410, 400, 390],
borderColor: '#3B82F6',
borderDash: [5, 5],
tension: 0.4,
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#ffffff'
}
}
},
scales: {
y: {
beginAtZero: true,
min: 0,
max: 500,
title: {
display: true,
text: '功率 (kW)',
color: '#ffffff'
},
ticks: {
stepSize: 100,
callback: function (value) {
return value + ' kW';
},
color: '#ffffff'
},
},
x: {
grid: {
display: false
},
ticks: {
color: '#ffffff'
}
}
}
}
});
}
</script>
</body>
</html>