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 'master'
${ noResults }
MaritimeExpo/OceanMonitNew/indexWindPower.html

3260 lines
135 KiB
HTML
Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>
Reference in New Issue View Git Blame Copy Permalink