<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能安全环保评级系统架构图</title>
</head>
<body style="margin: 0; padding: 40px 20px; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background-color: #f4f6f9; display: flex; justify-content: center; align-items: flex-start;">
<div id="diagram-container" style="width: 1500px; display: flex; flex-direction: column; gap: 15px;">
<!-- 标题 -->
<div style="text-align: center; margin-bottom: 20px;">
<h1 style="font-size: 28px; color: #1f2937; margin: 0;">智能安全环保评级系统架构图</h1>
<p style="font-size: 14px; color: #6b7280; margin-top: 5px;">基于“智能模型 + 数据支撑 + 闭环流程”的核心设计理念</p>
</div>
<!-- 第一层：体系功能门户 -->
<div id="presentation-layer" style="display: flex; background-color: #e6f7ff; border-radius: 8px; padding: 25px; border: 1px solid #bae7ff;">
<div class="layer-title" style="flex-shrink: 0; writing-mode: vertical-lr; text-orientation: mixed; font-size: 18px; font-weight: bold; color: #0050b3; display: flex; align-items: center; justify-content: center; padding-right: 25px; border-right: 1px solid #91d5ff;">
功 能 入 口<br>
</div>
<div class="layer-content" style="flex-grow: 1; display: flex; gap: 20px; padding-left: 20px;">
<div class="module-group" style="flex: 3; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">多层级可视化驾驶舱</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">管控总览</strong>
<span style="font-size: 12px; color: #595959;">指标排名 | 年度评价</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">厂级管控</strong>
<span style="font-size: 12px; color: #595959;">绩效详情 | 任务指派</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">部门视图</strong>
<span style="font-size: 12px; color: #595959;">落实到位 | 提醒跟踪</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">智能评价管理</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">在线填报</strong>
<span style="font-size: 12px; color: #595959;">数据同步 | 手动修正</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">评审管理</strong>
<span style="font-size: 12px; color: #595959;">自动评分 | 人工复核</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">报表与分析中心</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">报告生成</strong>
<span style="font-size: 12px; color: #595959;">任务指标分析</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #096dd9; font-size: 15px; margin-bottom: 5px;">逐级下钻</strong>
<span style="font-size: 12px; color: #595959;">落实情况分析</span>
</div>
</div>
</div>
</div>
</div>
<!-- 第二层：核心功能与流程 -->
<div id="application-layer" style="display: flex; background-color: #f6ffed; border-radius: 8px; padding: 25px; border: 1px solid #d9f7be;">
<div class="layer-title" style="flex-shrink: 0; writing-mode: vertical-lr; text-orientation: mixed; font-size: 18px; font-weight: bold; color: #389e0d; display: flex; align-items: center; justify-content: center; padding-right: 25px; border-right: 1px solid #b7eb8f;">
系 统 流 程<br>
</div>
<div class="layer-content" style="flex-grow: 1; display: flex; gap: 20px; padding-left: 20px;">
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">评价模型与指标库</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">指标体系建立</strong>
<span style="font-size: 12px; color: #595959;">多维指标 | 灵活配置</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">权重科学配置</strong>
<span style="font-size: 12px; color: #595959;">分层分级 | 动态调整</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">任务生命周期管理</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">任务生成与分配</strong>
<span style="font-size: 12px; color: #595959;">自动创建 | 精准推送</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">过程管控提醒</strong>
<span style="font-size: 12px; color: #595959;">节点监控 | 自动预警</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">智能评审与赋分引擎</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">自动化评审</strong>
<span style="font-size: 12px; color: #595959;">规则驱动 | 自动赋分</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">数据自动校验</strong>
<span style="font-size: 12px; color: #595959;">逻辑/完整/时效性</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 1; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">流程闭环引擎</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #52c41a; font-size: 15px; margin-bottom: 5px;">工作流管理</strong>
<span style="font-size: 12px; color: #595959;">反馈 | 整改 | 调优</span>
</div>
</div>
</div>
</div>
</div>
<!-- 第三层：数据及技术支撑 (已修改) -->
<div id="data-tech-layer" style="display: flex; background-color: #fffbe6; border-radius: 8px; padding: 25px; border: 1px solid #ffe58f;">
<div class="layer-title" style="flex-shrink: 0; writing-mode: vertical-lr; text-orientation: mixed; font-size: 18px; font-weight: bold; color: #d46b08; display: flex; align-items: center; justify-content: center; padding-right: 25px; border-right: 1px solid #ffd666;">
数 据 与 技 术 支 撑<br>
</div>
<div class="layer-content" style="flex-grow: 1; display: flex; gap: 20px; padding-left: 20px;">
<div class="module-group" style="flex: 3; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">数据服务平台</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">数据集成</strong>
<span style="font-size: 12px; color: #595959;">多源数据接入与同步</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">数据治理</strong>
<span style="font-size: 12px; color: #595959;">清洗/转换/质量保障</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">数据资产</strong>
<span style="font-size: 12px; color: #595959;">统一存储与管理</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">AI辅助能力</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">合规风险校验</strong>
<span style="font-size: 12px; color: #595959;">智能识别违规风险</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">智能推荐</strong>
<span style="font-size: 12px; color: #595959;">提供整改建议</span>
</div>
</div>
</div>
<div class="module-group" style="flex: 2; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #d9d9d9; border-radius: 6px; padding: 15px; display: flex; flex-direction: column;">
<h3 style="margin: 0 0 15px 0; text-align: center; font-size: 16px; color: #333;">关键技术组件</h3>
<div style="display: flex; gap: 10px; flex-grow: 1;">
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">可视化引擎</strong>
<span style="font-size: 12px; color: #595959;">驾驶舱图表渲染</span>
</div>
<div style="flex: 1; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 15px; text-align: center; font-size: 14px; display: flex; flex-direction: column; justify-content: center;">
<strong style="color: #fa8c16; font-size: 15px; margin-bottom: 5px;">流程引擎</strong>
<span style="font-size: 12px; color: #595959;">驱动业务流转</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
style.css
index.js
index.html