<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数智化综合能源管理云平台 功能蓝图</title>
<!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- 全局样式 --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
color: #333;
font-size: 16px;
}
.container {
max-width: 1920px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
}
/* --- 头部标题 --- */
header {
text-align: center;
margin-bottom: 50px;
}
header h1 {
font-size: 2.5rem;
color: #1e3a8a; /* 深蓝色 */
font-weight: 700;
letter-spacing: 2px;
display: inline-flex;
align-items: center;
gap: 15px;
}
/* --- 分类区域样式 --- */
.category-section {
margin-bottom: 50px;
}
.category-section h2 {
font-size: 1.8rem;
font-weight: 500;
color: #1e3a8a;
border-bottom: 3px solid #60a5fa; /* 浅蓝色 */
padding-bottom: 10px;
margin-bottom: 30px;
display: inline-flex;
align-items: center;
gap: 12px;
}
/* --- 卡片容器 --- */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
}
/* --- 卡片样式 --- */
.card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 25px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 5px solid #60a5fa;
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e5e7eb;
}
.card-header .icon {
font-size: 1.8rem;
color: #1e3a8a;
}
.card-header h3 {
margin: 0;
font-size: 1.3rem;
font-weight: 500;
color: #1f2937;
}
.card ul {
list-style: none;
padding-left: 0;
margin: 0;
flex-grow: 1;
}
.card li {
padding: 8px 0 8px 30px;
position: relative;
font-size: 0.95rem;
color: #4b5563;
line-height: 1.6;
}
.card li::before {
content: '\f058'; /* Font Awesome check-circle icon */
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 5px;
top: 10px;
color: #3b82f6; /* 蓝色 */
font-size: 1rem;
}
.card .sub-list {
padding-left: 20px;
margin-top: 5px;
}
.card .sub-list li::before {
content: '\f105'; /* Font Awesome chevron-right icon */
font-weight: 900;
}
/* --- 脚注 --- */
footer {
text-align: center;
margin-top: 50px;
padding: 20px;
background-color: #e0e7ff;
border-radius: 8px;
color: #374151;
font-size: 1rem;
border: 1px solid #c7d2fe;
}
footer i {
margin: 0 5px;
color: #4338ca;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fa-solid fa-cubes"></i>数智化综合能源管理云平台 功能蓝图</h1>
</header>
<main>
<!-- ======================= 通用能力平台 ======================= -->
<section class="category-section">
<h2><i class="fa-solid fa-layer-group"></i>通用能力平台 (Foundation & Capabilities)</h2>
<div class="card-container">
<!-- 统一GIS地图底座 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-map-marked-alt icon"></i>
<h3>统一GIS地图底座</h3>
</div>
<ul>
<li>多校区地图切换与展示</li>
<li>地图基础操作（缩放、平移、测距、测面）</li>
<li>图层控制（建筑、管网、设备、监控、告警）</li>
<li>空间搜索与定位</li>
<li>2.5D/3D场景展示与漫游</li>
</ul>
</div>
<!-- 设备运维管理平台 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-tools icon"></i>
<h3>设备运维管理平台 (O&M)</h3>
</div>
<ul>
<li>设备资产管理（电子台账、全生命周期档案）</li>
<li>工单管理（创建、派发、处理、验收闭环）</li>
<li>计划性维保（计划制定、到期提醒）</li>
<li>备品备件管理（库存预警、出入库关联）</li>
<li>设备健康度评估（三色状态标识、故障知识库）</li>
</ul>
</div>
<!-- 智能巡检管理平台 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-clipboard-check icon"></i>
<h3>智能巡检管理平台</h3>
</div>
<ul>
<li>巡检任务与路线管理（GIS规划）</li>
<li>巡检执行与上报（移动端App、扫码打卡）</li>
<li>无人机巡检集成（航线任务、影像回传）</li>
<li>AI智能分析（人流分析、安全事件）</li>
<li>巡检看板与报告（轨迹回放、统计分析）</li>
</ul>
</div>
<!-- 统一预警管理中心 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-bell icon"></i>
<h3>统一预警管理中心</h3>
</div>
<ul>
<li>告警仪表盘与GIS联动展示</li>
<li>告警规则灵活配置</li>
<li>告警等级与多渠道通知</li>
<li>告警处理流程闭环（确认、派发、关闭）</li>
<li>告警记录查询与统计分析</li>
</ul>
</div>
</div>
</section>
<!-- ======================= 核心业务应用 ======================= -->
<section class="category-section">
<h2><i class="fa-solid fa-briefcase"></i>核心业务应用 (Core Business Applications)</h2>
<div class="card-container">
<!-- 能源消耗管控平台 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-tachometer-alt icon"></i>
<h3>能源消耗管控平台</h3>
</div>
<ul>
<li>能耗总览驾驶舱（GIS热力图、成本分析）</li>
<li>用电管理（分项计量、趋势分析、能耗排名）</li>
<li>用水管理（管网拓扑、泵房监测、水质安全）</li>
<li>报表与分析（同比环比、用能定额、自动报表）</li>
</ul>
</div>
<!-- 配电站智慧管理平台 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-charging-station icon"></i>
<h3>配电站智慧管理平台</h3>
</div>
<ul>
<li>配电站2.5D/3D虚拟仿真</li>
<li>实时运行监测（变压器参数、开关柜状态）</li>
<li>动环监控（环境、视频、安消防集成）</li>
<li>运行管理（安全天数、值班信息、电子票）</li>
</ul>
</div>
<!-- 新能源（光伏）管理平台 -->
<div class="card">
<div class="card-header">
<i class="fa-solid fa-solar-panel icon"></i>
<h3>新能源（光伏）管理平台</h3>
</div>
<ul>
<li>光伏电站GIS分布与信息概览</li>
<li>运行监控（实时功率、发电量、新能源占比）</li>
<li>效益分析（发电收益、CO2减排量换算）</li>
<li>运维分析（发电效率、故障诊断、组件衰减）</li>
</ul>
</div>
</div>
</section>
<!-- ======================= 智能决策大脑 ======================= -->
<section class="category-section">
<h2><i class="fa-solid fa-brain"></i>智能决策大脑 (Intelligent Decision Brain)</h2>
<div class="card-container">
<!-- 节能降碳与决策分析平台 -->
<div class="card" style="grid-column: 1 / -1;"> <!-- This card spans all columns -->
<div class="card-header">
<i class="fa-solid fa-leaf icon"></i>
<h3>节能降碳与决策分析平台</h3>
</div>
<ul>
<li>
节能分析与策略
<ul class="sub-list">
<li>异常用能诊断模型（宿舍、食堂等场景）</li>
<li>楼宇人流趋势分析与智能用能控制策略</li>
</ul>
</li>
<li>
碳排放管理
<ul class="sub-list">
<li>全校区碳排放实时计算与历史追溯</li>
<li>碳减排成果量化（光伏+节能）</li>
<li>碳中和路径模拟与目标管理</li>
</ul>
</li>
<li>
综合决策驾驶舱
<ul class="sub-list">
<li>能源成本分析与节能效益评估</li>
<li>碳排放趋势与目标达成度展示</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<p><strong>平台架构关系：</strong><i class="fas fa-layer-group"></i><strong>通用能力平台</strong>为<i class="fas fa-briefcase"></i><strong>核心业务应用</strong>提供基础支撑，所有应用数据最终汇集至<i class="fas fa-brain"></i><strong>智能决策大脑</strong>，进行深度分析与价值挖掘，驱动校园智慧节能。</p>
</footer>
</div>
</body>
</html>
index.html
style.css
index.js
index.html