企业官网建设流程全解析

在实际的工控项目中，SCADA 监控界面的开发往往是整个实施周期里最耗时的环节之一。工艺画面中的反应釜、离心泵、阀门、管道和电机，每个设备图元都要绘制，测点绑定、量程转换、告警闪烁和趋势曲线又要分别实现。更麻烦的是，这类工作在不同项目里高度重复，组态工程师很难从中积累出高效率的通用方法。Claude Code 这类 AI Agent 工具出现后，这个环节开始有了明显变化：它可以直接读取项目目录、生成 SVG 图元、编写数据绑定逻辑，并按照自然语言描述逐步调整界面。下面用一个完整的中控 SCADA 监控界面案例，演示如何用 Claude Code 从无到有建立图元库、测点服务、页面渲染和告警功能，同时说明哪些代码可以直接复用，哪些地方在实际生产中必须继续加固。

这个案例面向三类读者：正在做 Web 化 SCADA 或物联网监控平台的开发人员，想用 Claude Code 提升组态效率的工控工程师，以及刚开始接触 AI Agent 编程、需要一个完整练习项目的学习者。案例最终产出的不是商业级 SCADA，而是一个能演示完整数据链路的最小监控系统，读者可以在此基础上替换数据源、扩充图元库，逐步变成自己的工程模板。

1. 先理解 SCADA、HMI、PLC 的区别，才知道 AI 该介入哪个环节

1.1 三者的角色和协作关系

SCADA（Supervisory Control and Data Acquisition，监视控制与数据采集系统）、HMI（Human Machine Interface，人机界面）和 PLC（Programmable Logic Controller，可编程序控制器）是工控行业最常一起出现的三个词，但分工完全不同。

PLC 是底层控制设备。它采集现场开关量和模拟量，执行逻辑控制，输出给执行机构。它是“干活”的那一层。HMI 是单机界面，通常挂在控制柜或操作台旁边，与一台或几台 PLC 直接通信，显示局部设备状态，供操作员就地操作。SCADA 是厂级或区域级集中监控系统，它聚合多套 PLC、RTU 或其他采集站的数据，提供统一画面、历史存储、趋势分析、告警管理和报表功能，通常运行在调度中心或工程师站。

SCADA 不等于 HMI。SCADA 通常包含 HMI 的显示能力，但还要承担数据采集、历史存储、告警分析和管理功能。近年越来越多的轻量级 SCADA 采用 Web 架构，浏览器直接打开监控画面，这也是本案例选型的切入点。

1.2 监控界面开发的真实工作量在哪里

做一个监控画面，不只是“画一张流程图”。完整的组态工作包括：梳理工艺流程图（P&ID）和测点清单，绘制反应釜、储罐、泵、阀门、管道、搅拌器、换热器等设备图元，建立测点标签（Tag）与图元的绑定关系，编写量程转换、报警上下限、单位显示规则，实现设备状态颜色、动画和告警闪烁，再补充趋势曲线、历史查询和报表导出，最后接入 OPC UA、Modbus TCP、MQTT 或自定义数据服务。

这几项里，图元绘制、数据绑定、量程转换、告警闪烁在项目里高度重复。每个项目都要重画类似图元，都要重写“数值-图元-颜色”的绑定逻辑。这些恰恰是 AI 生成效率最高的部分。真正需要工程师介入的是工艺理解的确认、测点清单的准确性和数据来源的连通性，而不是反复画同一个离心泵。

1.3 为什么这个场景适合 Claude Code

Claude Code 是 Anthropic 推出的命令行 AI Agent，它可以直接读取项目文件、生成和修改代码、执行命令。与网页端对话不同，它工作在真实的项目目录里，一次对话可以跨多个文件改动。对 SCADA 界面这种“图画 + 数据 + 逻辑”的混合体，它的能力匹配度很高。

图元可以用 SVG 描述，AI 对 SVG 结构处理得比较稳定；数据绑定是标准 JavaScript 逻辑，AI 生成后可以直接运行；工艺画面有明确测点清单，把需求拆成小轮次对话，AI 可以逐步完成。这个案例的核心目标，是用 Claude Code 生成一套完整的 Web 版 SCADA 监控界面：SVG 图元库、测点数据服务、画面渲染、告警闪烁和简单趋势展示，并且全部在本地可运行。

2. 准备 Claude Code 运行环境，先把工具链路跑通

2.1 前置要求与环境确认

使用 Claude Code 生成项目，需要先准备以下环境：

先检查 Node 版本：

node -v npm -v

两条命令都正常输出版本号后，再继续安装。版本过旧时，建议先升级 Node 到 LTS 版本，否则 Claude Code 可能出现运行时异常。

2.2 安装 Claude Code

使用 npm 全局安装：

npm install -g @anthropic-ai/claude-code

安装结束后验证版本：

claude --version

首次运行：

claude

终端进入交互模式，首次启动会引导完成登录或配置 API Key。登录成功后，可以在任意项目目录运行claude开始对话。如果是自动化脚本，可以用非交互模式：

claude -p "列出当前目录下的所有文件，并说明用途"

-p表示非交互式输出模式，适合在脚本或 CI 中调用。日常开发建议使用交互模式，因为 Claude Code 会请求文件修改权限，交互模式下可以直接确认允许或拒绝。

注意：Claude Code 操作文件前会请求权限。第一次使用时，遇到工具调用提示可以逐个确认，熟悉后再用--allowedTools或权限模式统一授权，避免每次都在终端反复按确认键。

2.3 建立项目目录和 CLAUDE.md

先在本地创建项目目录：

mkdir scada-demo cd scada-demo npm init -y

然后创建CLAUDE.md。这个文件会被 Claude Code 自动读取，作为项目的长期记忆。内容写得越清楚，AI 生成的代码越符合项目约定：

# SCADA Demo 项目说明 ## 项目目标 用纯 HTML/CSS/JavaScript 实现一个轻量级 Web SCADA 监控界面。 ## 技术约定 - 页面使用原生 JavaScript，不引入前端框架。 - 所有设备图元使用 SVG 绘制，保留元素 id 用于数据绑定。 - 测点数据统一格式：{ tagId, name, value, unit, quality, alarmHigh, alarmLow, timestamp }。 - 数值显示保留一位小数，单位显示在数值右侧。 - 告警状态使用 CSS 类 .alarm-blink 触发闪烁。 ## 常用命令 - 启动 mock 数据服务：node mock/server.js - 页面通过浏览器打开 index.html ## 目录结构 - svg/：图元源文件 - js/tags.js：测点定义 - js/devices.js：设备与图元映射 - js/render.js：SVG 渲染 - js/data-service.js：数据刷新 - js/alarm.js：告警判定 - mock/server.js：模拟数据接口

CLAUDE.md 不需要写得长，关键是让每次会话开始时不重复解释项目背景。后续项目约定有变化，记得同步更新这个文件，否则 AI 会一直按旧约定生成代码。

2.4 先做一个最小验证

在开始写监控界面之前，先验证 Claude Code 是否真的能读写项目文件。在项目目录里运行：

claude -p "创建 index.html 文件，内容为一个空白的 HTML 页面，通过 css/style.css 和 js/app.js 引入样式与脚本，并创建这两个文件。"

命令结束后检查目录：

ls -l index.html css js

能正常生成文件，说明安装、登录、权限链路都没有问题。这一步的价值是提前暴露环境问题，而不是等到生成大量代码之后才发现工具不可用。

3. 先定数据模型，再让 AI 画界面

SCADA 界面看起来是“画”，本质是“数据绑定”。如果测点结构、设备 ID、渲染规则没有统一，AI 生成的每一轮代码都可能互相冲突。因此，进入 Claude Code 之前，先把数据模型写清楚。

3.1 测点（Tag）数据结构

单个测点定义：

{ "tagId": "T-1001", "name": "1号反应釜温度", "description": "反应釜内介质温度", "device": "R-1001", "unit": "℃", "value": 86.5, "quality": "GOOD", "alarmHigh": 95, "alarmLow": 10, "alarmState": "NORMAL", "timestamp": "2025-01-15T14:30:00+08:00" }

字段含义如下：

alarmState可以前端根据 value 与 alarmHigh/alarmLow 计算，也可以在服务端算好后下发。演示项目放在前端计算简单直观；生产风格建议服务端计算并下发，这样权限判断、历史记录和画面端展示共用同一套告警结果，避免前端逻辑被绕过导致显示不一致。

3.2 设备与图元映射

SCADA 画面里，一个设备可能包含多个测点。例如一台离心泵，有运行状态、出口压力、电机电流、轴承温度四个测点。在代码里用一个设备对象统一描述：

const DEVICES = { 'PUMP-01': { name: '冷却水泵A', type: 'centrifugal-pump', svgId: 'dev-pump-01', position: { x: 320, y: 180 }, tags: { status: 'PUMP-01.RUN', pressure: 'PUMP-01.OUT_PRESS', current: 'PUMP-01.MOTOR_CURRENT', bearingTemp: 'PUMP-01.BEARING_TEMP' } } };

这种结构做好后，Claude Code 只需要按相同结构扩展新设备，不需要每次重新设计设备模型。设备 ID、SVG 元素 ID、测点 ID 形成三层映射：画面层找 svgId 定位图元，数据层找 tagId 关联测点，设备层把二者串起来。

3.3 先搭一个 Node Mock 数据服务

页面需要一个数据来源。真实项目会接 OPC UA 或 Modbus，但演示阶段用 Mock 服务可以快速把画面和数据链路串起来。在mock/server.js中：

const http = require('http'); const tags = { 'PUMP-01.OUT_PRESS': { value: 0.42, unit: 'MPa', alarmHigh: 0.6, alarmLow: 0.1 }, 'PUMP-01.MOTOR_CURRENT': { value: 38.2, unit: 'A', alarmHigh: 45, alarmLow: 5 }, 'PUMP-01.BEARING_TEMP': { value: 61.3, unit: '℃', alarmHigh: 75, alarmLow: 0 }, 'T-1001': { value: 86.5, unit: '℃', alarmHigh: 95, alarmLow: 10 } }; const server = http.createServer((req, res) => { if (req.url === '/api/tags/latest') { res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify(tags)); return; } res.statusCode = 404; res.end('Not Found'); }); server.listen(3100, () => { console.log('mock data server running at http://localhost:3100'); });

这里故意使用 Node 原生 http 模块，不引入 Express，减少依赖。启动命令：

node mock/server.js

接口返回 JSON，前端按 tagId 更新对应页面元素。生产环境替换这个接口时，只需要保持响应格式不变，画面层无需改动。

4. 用 Claude Code 生成监控界面的三轮迭代过程

数据模型准备完成后，进入核心环节：让 Claude Code 生成界面。建议分三轮对话，每轮聚焦一个目标，避免一次生成过多文件导致结构混乱。每轮结束后都实际运行一遍，确认没有错误再进入下一轮。

4.1 第一轮：生成页面骨架和 SVG 图元库

在项目目录运行交互模式：

claude

输入第一条需求：

在项目中创建一套工业监控页面。 1. 新建 index.html、css/style.css、js/app.js。 2. 页面左侧是设备列表，中间是工艺流程画面，顶部显示系统标题和当前时间。 3. 在 svg/ 目录下创建离心泵、闸阀、储罐、电机四个 SVG 图元文件。 4. 图元要元素化：每个图元保留 id（如 pump-body、pump-impeller），便于 JavaScript 控制颜色和动画。

Claude Code 会读取 CLAUDE.md，然后创建文件。生成的离心泵图元大致如下：

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle id="pump-body" cx="60" cy="60" r="42" fill="#e2e8f0" stroke="#334155" stroke-width="3"/> <circle id="pump-inlet" cx="18" cy="60" r="10" fill="#94a3b8"/> <circle id="pump-outlet" cx="102" cy="60" r="10" fill="#94a3b8"/> <path id="pump-impeller" d="M60 60 L75 45 A25 25 0 0 1 75 75 Z" fill="#64748b"/> </svg>

这里的关键不是图元画得多精细，而是每个关键部位都有 id。后续数据绑定时，JavaScript 通过这些 id 改变填充颜色、旋转角度或显示文本。可以在 SVG 外层包一个<g id="pump-symbol">，方便外部用<use>引用。

4.2 第二轮：绑定测点数据和运行状态

页面骨架就绪后，继续对话：

把 mock/server.js 的测点数据显示到页面上。 1. 读取 js/tags.js 中的测点定义。 2. 按设备位置把数值显示在对应图元下方。 3. 泵运行时，泵体显示为绿色；停止时显示为灰色；告警时显示为红色。 4. 增加一个 2 秒一次的轮询，调用 /api/tags/latest 更新数值。

Claude Code 会生成render.js和>async function refreshTags() { const res = await fetch('http://localhost:3100/api/tags/latest'); const data = await res.json(); for (const [tagId, tag] of Object.entries(data)) { updateDeviceView(tagId, tag); } } function updateDeviceView(tagId, tag) { const device = findDeviceByTag(tagId); if (!device) return; const valueEl = document.getElementById(`value-${tagId}`); if (valueEl) { valueEl.textContent = `${tag.value.toFixed(1)} ${tag.unit}`; } const body = document.getElementById(device.svgId); if (body) { body.classList.toggle('run', tag.value > 0); body.classList.toggle('alarm', tag.value >= tag.alarmHigh || tag.value <= tag.alarmLow); } } setInterval(refreshTags, 2000); refreshTags();

第一版可能把逻辑都写在 app.js 里，不用急着拆分。跑通后再让 Claude Code 按 CLAUDE.md 的目录约定拆文件。如果接口地址因前端打开方式不同出现跨域问题，需要在 mock 服务里加跨域响应头，或者让前端也通过同源静态服务器访问。

4.3 第三轮：加入告警闪烁、趋势曲线和设备操作

数据绑定跑通后，继续叠加功能：

增加三个功能： 1. 告警闪烁：处于告警状态的测点，数值文字和对应图元周期闪烁。 2. 趋势曲线：点击测点后，弹出一个显示最近 10 分钟近似实时曲线的窗口。 3. 点击泵图元弹出操作确认框，显示“启动/停止”按钮，按钮点击后向 mock 接口 POST /api/devices/PUMP-01/command。

告警闪烁的实现：

.alarm-blink { animation: alarmBlink 1s steps(2, start) infinite; } @keyframes alarmBlink { 0% { opacity: 1; } 50% { opacity: 0.15; } 100% { opacity: 1; } }

这里使用steps(2, start)制造顿挫感，比线性淡入淡出更符合工业告警的视觉习惯。实际项目中，操作员点“确认”后，通常要求闪烁停止但告警色保留，这需要在 alarm.js 里增加acknowledged状态字段。

4.4 让 Claude Code 按反馈迭代

如果生成的界面不符合预期，直接用自然语言提修改意见：

设备列表里的“冷却水泵A”点开没有反应，检查一下 DEVICES 配置和点击事件是否注册成功。修复后把原因写进 CLAUDE.md 的问题记录里。

这种“现象 + 期望 + 自查方向”的反馈方式，比直接说“不对”有效得多。Claude Code 会定位到对应文件，修改后通常会说明它认为的根因。一轮对话解决一个问题，避免一次反馈五六个问题导致改动互相干扰。

注意：AI 生成的代码不是一次到位。每一轮功能合并后，都要实际跑一遍，把错误信息和界面现象带进下一轮对话，它才能准确修复。只口头描述“界面不对”容易让 AI 猜测，越具体越好。

5. 关键代码和参数怎么理解，才能自己改得动

5.1 SVG 图元：坐标系、锚点和缩放

SCADA 图元最容易踩的坑是坐标错位。SVG 的viewBox决定坐标系，图元文件内部使用相对坐标，放进工艺流程画布时，要通过x、y或transform定位。推荐每个图元文件独立使用viewBox="0 0 120 120"，外部使用时用<use>引用：

<svg class="device" x="320" y="180" width="80" height="80"> <use href="svg/pump.svg#pump-symbol"/> </svg>

如果直接把所有设备画在一个大 SVG 里，图元之间坐标会互相影响，AI 后续增删设备时容易改乱。按设备拆分成独立符号，再用<use>复用，是更稳妥的结构。另一个注意点是：使用时给容器设置了width和height后，SVG 内部会按viewBox等比缩放，不要把外部宽高和内部坐标混在一起计算。

5.2 数据刷新：轮询与 WebSocket 的选择

演示项目用 2 秒轮询最简单。但生产环境要按实时性和并发数选择：

真实 SCADA 系统测点可能上万，轮询会放大数据库和网络压力。建议初期用轮询跑通链路，接入生产数据后改为 WebSocket 按订阅推送，或通过中间数据网关统一做状态更新广播。

5.3 告警判定：死区、延时和确认位

简单比较value >= alarmHigh会产生边界抖动。生产环境的告警判定至少包括三部分：死区、延时和确认位。死区示例：

function isAlarm(tag) { const high = tag.alarmHigh; const low = tag.alarmLow; const deadband = tag.deadband || 0.5; if (tag.alarmState === 'NORMAL') { if (tag.value >= high) return 'HIGH'; if (tag.value <= low) return 'LOW'; } else { if (tag.alarmState === 'HIGH' && tag.value < high - deadband) return 'NORMAL'; if (tag.alarmState === 'LOW' && tag.value > low + deadband) return 'NORMAL'; } return tag.alarmState; }

死区的作用是防止数值在上限附近反复越过阈值，造成告警抖动。不同测点的死区不一样，压力测点可能 0.05，温度测点可能 1。延时是指持续超限一定时间才触发告警，避免瞬时扰动误报；确认位是操作员处理告警后置位的标记。这些规则在最初向 Claude Code 提需求时就应该包含，否则后面加会改动多处逻辑。

5.4 数值格式化：单位、量程、精度

SCADA 界面最常见的显示错误是数值格式不统一。推荐在前端统一格式化函数：

function formatTagValue(value, unit, decimals = 1) { if (value === null || value === undefined) return '--'; return `${Number(value).toFixed(decimals)} ${unit}`; }

量程转换要在数据进入画面之前完成。例如 4-20mA 信号转换成工程值：

function scaleRawToEng(raw, rawMin, rawMax, engMin, engMax) { return engMin + ((raw - rawMin) / (rawMax - rawMin)) * (engMax - engMin); }

这些函数让 Claude Code 直接复用，能减少大量“数字对不上”的返工。精度也要按测点类型区分：温度一位小数，流量两位小数，压力可能三位。可以在测点定义里增加decimals字段，格式化函数按字段取值，而不是全局写死。

6. 运行验证和常见问题排查

6.1 本地启动步骤

完整启动流程：

cd scada-demo node mock/server.js

然后另开一个终端，用静态服务器打开页面：

npx serve .

浏览器访问http://localhost:3000或npx serve输出的地址。如果页面能显示设备图元、数值每 2 秒刷新、模拟告警时能闪烁，说明主链路已经跑通。

6.2 验证清单

把下面的检查项过一遍，能避免大多数“看起来能用但实际有问题”的情况：

6.3 常见问题排查

结合这个项目的实际运行，常见问题如下：

排查顺序建议：先看 Console，再看 Network，最后看 Elements。Console 报错优先修复，因为它通常阻断后续脚本执行。Network 面板能区分是接口没返回、返回格式不对还是前端渲染失败，这一步比盲目改代码更有效率。

7. 从 AI 生成到生产环境落地

7.1 AI 生成的代码要先过这几关

Claude Code 生成的监控界面可以快速演示，但不能直接部署到生产控制网络。落地前至少要补齐以下内容：

学习环境跑通后，至少要按这个清单逐项确认生产差异。特别是操作审计和外层认证，ACADA 系统处在工控网络核心位置，权限薄弱比界面卡顿问题严重得多。

7.2 对接真实数据采集

演示项目的 Mock 接口要替换为真实数据服务。常见接入方式有三种：

• OPC UA：西门子、罗克韦尔等 PLC 生态常用，服务端暴露节点，前端或中间层通过 OPC UA 客户端订阅。
• Modbus TCP：老设备常见，通常写一个网关服务把 Modbus 寄存器映射成 JSON 接口。
• MQTT：设备或采集网关向 Broker 上报数据，前端通过 WebSocket 订阅。

无论哪种方式，建议中间加一层数据网关，对外统一输出本案例的测点 JSON 格式。这样画面层不需要因为更换数据源而重写。网关内先做量程转换、单位统一、质量戳标记和数据缓存，画面只消费标准测点结构。

7.3 沉淀可复用资产

如果团队要长期用 Claude Code 做 SCADA 界面，可以把这次生成的内容沉淀成专用资产：

• SVG 图元库：泵、阀、罐、电机、管道、仪表，按设备类型整理，后续项目直接复用。
• CLAUDE.md 模板：把测点格式、图元 id 规则、告警样式约定写成通用模板。
• 提示词模板：把“生成页面骨架”“绑定测点”“加告警”写成标准化 Prompt。
• 代码评审清单：AI 每完成一轮，用固定清单检查坐标、单位、告警和错误处理。

沉淀之后，下一个新项目可以在更短时间内跑出完整原型，工程师把时间花在工艺确认和数据接入上，而不是反复画图元、反复调绑定。

对于新人，建议从一个小型水处理或泵站画面开始练：三个罐、两个泵、六条管道、十来个测点，跑通后再扩展到多画面切换、历史趋势、权限管理。这个案例本身也可以继续加画面导航、报表导出和设备联锁提示，逐步接近完整 SCADA 的功能边界。使用 AI Agent 做组态的核心价值，不是让 AI 替代工程师，而是把重复劳动压缩到最低，让工程师把精力放到真正需要工艺判断和数据理解的部分。