变电站远程智能巡视系统
前端开发服务报价单
前端工程源代码 + 完整技术文档交付,源代码所有权 100% 归甲方所有
CH.01
项目概述
Project Overview
1.1 项目背景
变电站远程智能巡视系统是一套面向电网变电站的智能化巡视管理平台,通过接入高清视频、机器人、无人机等智能巡视设备,结合 AI 图像算法,实现远程巡视、自动识别、缺陷告警、报告生成的完整作业链条。
甲方目前已建立对该系统的业务理解和功能参考,现需进行前端部分的开发实施。我方承担前端开发、UI 设计、需求理解分析三个角色的工作,以"前端工程源代码 + 完整技术文档"的形式交付。
1.2 合作定位
| 角色 | 承担方 | 主要职责 |
|---|---|---|
| 前端服务方(我方) | 本次报价方 | 前端开发 + UI 设计 + 需求理解分析 |
1.3 本次交付性质
本次交付为前端工程源代码 + 技术文档。全部源代码所有权归甲方所有,甲方享有完整的使用、修改、二次开发、部署、商业化权利,无任何限制。
独立交付能力:我方独立承担前端开发全流程,与项目其他参与方并行推进,确保前端交付进度不受其他环节影响。这种独立交付能力,是甲方规避项目整体进度风险的重要保障。
CH.02
交付物
Deliverables
2.1 交付物清单
| # | 交付物 | 形式 |
|---|---|---|
| 1 | 前端工程源代码 | React + TypeScript 完整项目,可独立编译运行 |
| 2 | 模拟数据集 | JSON 文件,覆盖全部页面 |
| 3 | 接口契约文档 | Markdown,描述前端所需接口的请求/响应结构 |
| 4 | UI 设计文档 | Markdown,含视觉规范、布局说明、组件规范 |
| 5 | 需求理解文档 | Markdown,含业务流程、字段定义、字典表映射 |
| 6 | 项目说明文档 | README + 部署说明 |
2.2 源代码所有权说明(甲方权益保障)
本次交付的前端工程源代码 100% 归甲方所有,具体权益包括:
- ✓ 所有权 源代码、设计文档、相关技术资料的完整所有权归甲方
- ✓ 使用权 甲方有权在内部任意使用、部署、运行
- ✓ 修改权 甲方有权自行或委托第三方修改、二次开发
- ✓ 商业权 甲方有权将基于本源代码的产品用于商业目的
- ✓ 知识产权 相关知识产权归甲方所有(我方仅对通用技术框架保留复用权)
我方义务
- 交付完整源代码(不保留任何核心模块、不设加密、不设授权校验)
- 交付接口契约文档,便于后续后端对接
- 提供必要的代码结构说明和启动文档
2.3 我方工作内容
我方按以下三个角色承担前端开发服务工作:
①
需求理解分析
- 通读操作手册(9 个模块)、详细功能点、字典表、菜单目录
- 与甲方对接,确认需求细节和优先级
- 梳理 35 个二级菜单页面的业务流程和字段定义
- 输出需求理解文档,作为开发依据
- 与项目相关方协作,共同确认接口契约
②
UI 设计
- 基于操作手册截图,还原工业级监控系统的视觉风格
- 输出 UI 设计文档(Markdown 形式,含视觉规范、布局、组件规范、交互说明)
- 配置 Ant Design 主题(暗色主题 + 自定义色彩 token)
- UI 设计稿以 Markdown 文档形式交付
③
前端开发
- 搭建项目脚手架(路由、布局、状态管理、HTTP 客户端)
- 实现全部 35 个二级菜单页面
- 实现通用组件库(筛选条、设备树、状态标签等可复用组件)
- 实现模拟数据层,并预留标准化的真接口切换通道
- 编写接口契约文档,作为后端实现依据
CH.03
技术方案
Technical Solution
3.1 技术选型
| 类别 | 选型 |
|---|---|
| 前端框架 | React 18 + TypeScript |
| UI 组件库 | Ant Design 5 |
| 中后台脚手架 | Ant Design Pro |
| 构建工具 | Vite |
| 状态管理 | Zustand |
| 路由 | React Router v6 |
| HTTP 客户端 | axios(支持模拟/真接口无缝切换) |
| 图表库 | ECharts |
| 视频播放器 | flv.js + Video.js(支持国标 HLS/FLV 流) |
| 样式方案 | AntD token + Tailwind CSS + CSS Modules |
3.2 视觉方案
基于操作手册截图还原工业级监控系统深色主题:
- 主色调:深蓝(#0a192f / #1E3A8A)
- 强调色:亮蓝(#1890ff / #3B82F6)
- 状态色:绿色(在线)/ 红色(离线、危急)/ 橙色(严重)/ 黄色(预警)
- 目标分辨率:1920×1080 及以上
3.3 数据层架构(关键设计)
React 组件层
↓
业务 Service 层
↓
axios 实例 + 请求/响应拦截器
↓
模拟数据适配器
(本次交付)
(本次交付)
真实后端 REST API
(后续真接口接入)
(后续真接口接入)
核心价值:Service 层接口签名固定,业务代码与数据源完全解耦。后续接入真接口时,只需切换环境变量,业务代码无需改动。
同步开发价值(关键):基于该架构,我方前端开发完全独立于后端接口进度。即便接口尚未就绪或发生变更,我方仍可按既定计划推进 UI 与交互开发、阶段性演示与验收。这种独立交付能力,有助于甲方更好地统筹项目整体进度与风险。
3.4 项目目录结构
gov-substation/web/
├── src/
│ ├── api/ # 接口契约 + Service 层
│ ├── components/ # 通用组件
│ ├── layouts/ # 主布局
│ ├── mock/ # 模拟数据
│ ├── pages/ # 35 个二级菜单页面
│ │ ├── dashboard/ # 信息总览
│ │ ├── video/ # 视频监控
│ │ ├── inspection/ # 智能巡视
│ │ ├── alarm/ # 缺陷告警
│ │ ├── statistics/ # 统计分析
│ │ ├── ledger/ # 台账管理
│ │ ├── device/ # 设备管理
│ │ ├── algorithm/ # 算法管理
│ │ └── system/ # 基础管理
│ ├── routes/ # 路由配置
│ ├── stores/ # 状态管理
│ ├── theme/ # AntD 主题配置
│ └── utils/ # 工具函数
├── docs/
│ ├── ui-design.md # UI 设计文档
│ ├── requirements.md # 需求理解文档
│ └── api-contracts.md # 接口契约文档
├── README.md
└── 配置文件
CH.04
页面清单
Page Inventory · 35 个二级菜单
4.1 页面深度分档
| 档位 | 范围 |
|---|---|
| 简单 | 纯列表/配置页(筛选 + 表格 + 表单弹窗) |
| 中等 | 列表 + 多字段表单 + 详情 + 树形/Tab 切换 |
| 复杂 | 视频播放、识别框叠加、多宫格、画布标注、日历视图等 |
4.2 全部页面清单(35 个二级菜单)
12
简单页面
15
中等页面
8
复杂页面
35
合计
视频监控模块
| 页面 | 档位 |
|---|---|
| 实时视频监控(多宫格 + 云台控制 + 预置位) | 复杂 |
| 视频录像回放(时间轴 + 播放控制) | 中等 |
智能巡视模块
| 页面 | 档位 |
|---|---|
| 云眼 | 中等 |
| 巡视计划管理(列表 + 新增 + 编辑 + 立即执行) | 复杂 |
| 巡视任务日历(月历 + 年历) | 复杂 |
| 巡视任务监视 | 中等 |
| 巡视任务结果(列表 + 详情 + 审核) | 复杂 |
| 巡视结果分析 | 中等 |
| 巡视任务统计 | 简单 |
| 智能纠偏记录 | 简单 |
| 点位识别统计 | 简单 |
缺陷告警模块
| 页面 | 档位 |
|---|---|
| 缺陷隐患管理(列表 + 统计图表) | 中等 |
| 设备告警管理 | 中等 |
| 系统告警管理 | 简单 |
统计分析模块
| 页面 | 档位 |
|---|---|
| 点位覆盖统计 | 中等 |
| 算法识别分析 | 简单 |
| 算法识别统计 | 简单 |
| 智巡应用成效 | 简单 |
台账管理模块
| 页面 | 档位 |
|---|---|
| 变电站管理(列表 + 间隔分布图) | 中等 |
| 设备台账管理(多级树 + CRUD) | 中等 |
| 巡视标准导入 | 简单 |
| 设备巡视标准 | 中等 |
| 巡视点位管理(列表 + 新建 + 识别配置) | 复杂 |
| 点位告警配置(多 Tab) | 复杂 |
| 智巡文档管理 | 简单 |
设备管理模块
| 页面 | 档位 |
|---|---|
| 录像机管理 | 简单 |
| 摄像机管理 | 中等 |
| 机器人管理 | 简单 |
| 点云模型接入 | 简单 |
| 机器狗航线规划 | 简单 |
| 机器狗控制 | 简单 |
| 无人机管理 | 简单 |
| 声纹设备管理 | 简单 |
算法管理模块
| 页面 | 档位 |
|---|---|
| 负向算法管理 | 中等 |
| 正向样本管理(标注画布) | 复杂 |
基础管理 + 其他
| 页面 | 档位 |
|---|---|
| 信息总览(仪表板) | 中等 |
| 消息通知配置 | 简单 |
| 系统配置管理 | 简单 |
| 消息列表 | 简单 |
| 用户管理 | 简单 |
| 登录页 | 简单 |
页面合计:简单 12 个 / 中等 15 个 / 复杂 8 个,共 35 个二级菜单。
4.3 复杂页面子功能说明
本节列出复杂页面的关键子功能,作为开发范围的明确依据。简单 / 中等页面按通用列表 + 表单 + 详情模式实现,不单独展开。
实时视频监控
- 多宫格切换(1/4/9/16 宫格 + 全屏)
- 云台控制(8 方向 + 变焦/变倍/光圈/3D 聚焦 + 转速调节)
- 预置位调用 / 设置 / 删除
- 抓图、手动录像(本地存档)
- 设备树(变电站 → 录像机 → 摄像机)
- 点位视频调阅(关联巡视点位 + 历史图片)
- 场景视频(保存当前布局为场景)
- 缺陷视频调阅
巡视计划管理
- 列表查询(变电站 / 计划名称 / 巡视类型 / 执行类型 / 排序规则)
- 新增计划(基础信息 + 巡视类型 + 执行类型[手动 / 周期 / 间隔 / 定期] + 点位选择)
- 编辑 / 删除 / 立即执行
- 启用 / 停用开关
巡视任务日历
- 月历视图(按日显示任务数 + 状态高亮)
- 年历视图(按月显示任务数 + 状态高亮)
- 日期 / 月份点击查看任务详情列表
- 跳转(到计划管理 / 新增任务 / 任务详情)
巡视任务结果
- 任务列表(支持已完成 / 已终止 / 已逾期筛选)
- 任务详情(基础信息 + 报告审核状态 + 巡视结论)
- 巡视结果审核(采集文件预览 + 实时视频 + 历史曲线 + 样本标注 + 新增缺陷)
- 导出报告(docx / Excel)
- 完成审核(填写审核信息)
巡视点位管理
- 列表查询(变电站 / 区域 / 间隔 / 设备 / 点位 / 识别类型 / 重要等级)
- 新建巡视点(变电站 / 设备 / 部件 + 关联预置位)
- 编辑 / 删除
- 批量识别配置
- 更新基准图
- 导入 / 导出点表
- 复制巡视点位
正向样本管理
- 列表查询(变电站 / 区域 / 间隔 / 识别类型 / 设备 / 点位 / 重要等级)
- 点击图片弹出编辑窗口
- 标注画布(框选 / 绘制识别区域)
- 更新基准图
点位告警配置
- 基础告警配置
- 巡视分析告警配置(非同源告警)
- 其他告警配置(录像完整率 / 环境温度)
- 静默监视告警配置
- 声纹告警配置(基带主频 / 频带能量比 / 声音分贝)
CH.05
工期与里程碑
Schedule & Milestones
5.1 总工期
项目总工期
2个月
自合同签订且预付款到账之日起算
5.2 项目组配置
| 角色 | 投入周期 |
|---|---|
| 项目负责人 / 需求分析 | 全周期,主要在前 6 周 |
| UI 设计师 | 全周期 |
| 前端开发工程师 | 全周期 |
5.3 里程碑划分
| 阶段 | 工期 | 主要交付 | 验收方式 |
|---|---|---|---|
| M1 需求与设计 | 第 1-2 周 | 需求理解文档 + UI 设计文档 + 项目脚手架 + 1 个示范页面 | 文档评审 + 在线预览 |
| M2 核心模块开发 | 第 3-5 周 | 视频监控 + 智能巡视 + 缺陷告警 + 台账管理 共 4 个核心模块 | 阶段性演示 |
| M3 全部模块开发 | 第 6-7 周 | 设备管理 + 算法管理 + 统计分析 + 基础管理 + 全部剩余页面 | 完整功能演示 |
| M4 验收与交接 | 第 8 周 | 35 个菜单全部可演示 + 接口契约文档 + 源码 + 培训交接 | 源码签收 |
5.4 工期说明
- 工期基于上述项目组配置估算,按月历周计算
- 每个里程碑节点(M1/M2/M3/M4),我方提供阶段性演示 URL,便于甲方跟进项目进度与阶段性成果预览
- 如甲方需求变更累计超过 3 次 或新增页面超过 3 个,工期顺延,具体另议
- 如接口契约确认延误或频繁变更,工期顺延,累计上限不超过 15 天
- 开发周期内,我方与项目其他参与方保持紧密沟通协作,共同推进前端交付与整体项目节奏对齐
- 不可抗力因素导致的延误,双方协商解决
CH.06
价格构成
Pricing
6.1 总报价
| 项 | 金额(人民币) |
|---|---|
| 前端开发服务综合费(含需求分析 + UI 设计 + 前端开发 + 项目管理 + 文档 + 测试) | ¥120,000 |
| 总价 | ¥120,000 |
| 大写 | 人民币壹拾贰万元整 |
总价:¥120,000 · 人民币壹拾贰万元整。价格透明,无隐藏费用。
6.2 价格说明
- 本次报价为综合服务费,含三个角色的全部工作及项目管理、文档、测试、培训交接等全部成本
- 本报价对应工作量预估约 150 人日综合工时(详细拆解见附录 A,仅作参考,不作为工期或单价承诺)
- 价格透明,无隐藏费用。本报价已含项目执行过程中的全部成本,如无需求变更或范围扩展,不会有额外费用产生
6.3 不含费用
- 服务器、域名、SSL 证书等基础设施费用
- 商业软件授权费(如商业视频播放器、商业 UI 库)
- 现场差旅费(本次范围不含现场工作)
- 后续维护与对接联调费用(详见第十章)
CH.07
付款节点
Payment Schedule
| 节点 | 比例 | 金额 | 触发条件 |
|---|---|---|---|
| 预付款 | 30% | ¥36,000 | 合同签订后 5 个工作日内 |
| 中期款 | 40% | ¥48,000 | M2 阶段验收通过(核心模块演示) |
| 验收款 | 30% | ¥36,000 | M4 阶段源码签收 |
| 合计 | 100% | ¥120,000 |
付款方式:银行转账,收款方为合同指定账户。
CH.08
需求变更与验收
Change Management & Acceptance
8.1 需求变更管理
- 报价基于本报价单第二章"交付物"和第四章"页面清单"
- 页面常规微调(如字段调整、文案修改、样式优化等小范围优化)不单独计费
- 3 个以内新增页面或功能扩展免费
- 涉及交互流程重构、新增功能模块、较大改动的工作,按 ¥2,000 / 人日 另行计费
- 重大需求变更(如新增整个模块、改变核心交互模式)双方协商签订补充协议
8.2 验收标准
- 全部 35 个二级菜单可访问、可演示
- 复杂页面(视频监控、巡视审核、点位配置等)按本报价单描述的深度完整实现
- 模拟数据可正常运行,符合接口契约文档
- 源码可在本地部署启动
- 接口契约文档完整,可指导后端实现
8.3 项目开展前提
- 甲方需在合同签订后 3 个工作日内 提供完整操作手册和参考资料(已基本具备)
- 甲方需指派项目对接人,负责需求确认、阶段验收、变更沟通
- 甲方需协调项目相关方,共同确认接口契约文档
CH.09
责任边界与不在范围的工作
Scope & Exclusions
本章用于明确工作量边界,避免后续争议。如需扩展范围,可另行协商。
9.1 我方工作范围
| 工作项 | 我方承担 |
|---|---|
| 前端 UI 与交互 | ✓ 全部完成 |
| 模拟数据 | ✓ 全部完成 |
| 接口契约文档 | ✓ 主导输出 |
| 真实数据接入前端 | 协助 代码已预留标准化对接通道 |
| 视频真实信号接入前端播放器 | 协助 播放器组件已就绪 |
| 算法真实结果接入前端展示 | 协助 展示组件已就绪 |
说明:前端默认通过 HTTP REST 接入真接口。其他通信协议(如需要)可在对接阶段协商实现方式。
9.2 不在我方范围的工作
- 后端开发(任何服务端代码)
- 算法相关(模型训练、推理服务、数据集构建)
- 视频流后端转换服务
- 硬件协议对接(摄像机/NVR/机器人/无人机 SDK 接入)
- 主站/PMS 系统对接
- 服务器部署、容器化、生产环境上线
- 现场联调、变电站真机验证
- 数据迁移(现有系统数据导入)
- 长期运维(超过 30 天免费支持期外)
CH.10
后续服务
Post-delivery Services
10.1 免费支持期
源码签收后 30 天内,我方免费修复本次交付的前端代码缺陷(以下简称"我方代码缺陷")。
判定原则:仅当问题可在我方交付的源码 + 模拟数据环境下复现,且根因在我方代码时,方为我方代码缺陷。
不属于免费修复范围的事项
- 后端接口未实现、不符合契约或变更导致的前端适配问题
- 真视频信号接入时的协议适配问题
- 真算法结果接入时的数据格式适配问题
- 服务器部署环境、容器、反向代理等导致的问题
- 浏览器兼容性问题(目标:Chrome / Edge 最新版)
- 第三方修改我方源码后引入的问题
- 甲方硬件设备、网络环境导致的问题
10.2 开发周期协作
开发周期内,我方与项目其他参与方保持紧密沟通协作,共同推进项目顺利交付:
- 接口契约协作:与项目其他参与方共同确认接口契约文档,答疑对接相关问题
- 阶段性进度同步:每个里程碑节点同步前端开发进度,便于各方协调后续工作
- 沟通响应:邮件、即时消息、视频会议等,响应时间不超过 1 个工作日
- 配合原则:在合理范围内,我方积极配合项目其他参与方的技术沟通需求
正式的接口联调、真视频信号接入、真算法结果接入等工作,在源码签收后根据后端就绪情况开展。如需我方深度参与,由双方协商开展方式与节奏。
CH.11
可选附加服务
Optional Add-on Services
以下服务不在本次报价范围内,如甲方需要,可另行协商。
| 服务类型 | 单价 | 备注 |
|---|---|---|
| 加急交付(工期从 2 个月压缩到 1.5 个月) | 总价 +20% | 需在合同签订时确认 |
| 培训与知识转移(给项目相关方做代码交接培训) | ¥2,000 / 人日 | 含代码结构、Mock 切换、主题定制、组件复用等 |
| 文档扩展(超出本次交付的基础文档) | ¥1,500 / 人日 | 如详细 API 文档、用户操作手册、运维手册等 |
| 长期维护年单(签订 1 年期维护合同) | ¥1.5-2 万 / 年 | 含每月不超过 5 人日的常规维护和缺陷修复 |
| 现场支持(变电站现场联调) | ¥2,500 / 人日 + 差旅实报 | 按需启用 |
后续如需启用,双方签订补充协议后开展。我方承诺在收到甲方附加服务请求后 3 个工作日内 响应。
CH.12
报价说明
Quotation Notes
本报价单所述工作范围、价格、工期、责任边界经甲方确认后,作为双方后续签订正式合同的依据。正式合同条款以双方签订的合同文本为准,本报价单可作为合同附件。
我方期待与甲方就本项目进一步沟通。如需调整报价范围、工期或商务条款,欢迎随时协商。
APP.A
附录 A:工作量参考
仅作内部参考
本附录的工作量拆解仅作为报价依据,不构成工期承诺或单价承诺。工期承诺以第五章为准。
本项目工作量预估约 150 人日综合工时(含需求分析 / UI 设计 / 前端开发 / 项目管理 / 文档 / 测试 等多角色综合投入,非单人累计工时,实际投入约 1.5-2 人月),按角色拆解参考:
| 角色 | 工作量预估 |
|---|---|
| 需求理解分析 | 约 30 人日 |
| UI 设计 | 约 40 人日 |
| 前端开发 | 约 80 人日 |
| 合计 | 约 150 人日综合工时 |
工时含以下内容
- 35 个页面开发(简单 12 + 中等 15 + 复杂 8)
- 项目脚手架、通用组件库、AntD 主题定制、模拟数据层
- 接口契约文档、UI 设计文档、需求理解文档、项目说明文档
- 项目对接、需求确认、阶段验收、测试、培训交接
三角色配比为参考值,我方在实际执行中可能根据情况灵活调配,不影响交付时间和交付质量。
APP.B
附录 B:项目告知事项
Project Disclosures
为便于双方对齐预期,我方就以下事项提前告知甲方:
- 真接口接入节奏:本次交付物已预留标准化对接通道。后续真接口接入由后端实现方主导实施,接入节奏受其接口进度影响。
- 真信号接入:本次交付的视频播放器基于开源方案(flv.js + Video.js),后续真视频信号接入时,可能需要根据流媒体服务协议做适配,该适配不在本次范围。
- UI 设计稿形式:本次以 Markdown 文档形式交付 UI 设计稿。
- 浏览器兼容:目标为 Chrome / Edge 最新版,不保证兼容 IE 及其他旧版浏览器。