业务和功能介绍
1. 立项背景：为科技公司打造酷炫、现代化的品牌形象首页，突出科技感与创新性。2. 核心功能模块：动态粒子背景增强沉浸感；全屏Hero区域展示企业口号；服务卡片展示核心业务；关于与统计数据展示实力；团队成员展示；联系CTA和页脚。3. 业务流程/功能路径：用户滚动页面触发滚动视差和入场动画，点击导航平滑定位至各模块，移动端适配菜单，通过交互提升品牌信任度。
项目实现
1. 整体架构和设计思路，不同模块使用的技术栈
整体采用“单页滚动 + 视觉沉浸”架构：HTML5 搭建语义化骨架，CSS3 负责毛玻璃、渐变文字、Flex/Grid 响应式布局，JavaScript 驱动交互与 Canvas 粒子背景。设计思路以“科技蓝紫渐变 + 动态粒子网络”为视觉基调，利用 backdrop-filter 营造层次感，通过 ScrollReveal 库实现滚动渐现动画，增强浏览节奏。技术栈区分：全局粒子系统（原生 Canvas）、导航滚动高亮（JS + getBoundingClientRect）、服务/团队卡片（CSS 悬停过渡）、移动端菜单（JS 切换 class）。
2. “我”的负责模块和结果（尽可能量化）
我独立完成了全部模块的开发与调试。
- 粒子背景系统：实现 140 个动态粒子，鼠标跟随影响半径 150px，粒子连线距离阈值 130px，帧率稳定 60fps。
- 响应式导航栏：支持 PC/平板/手机，移动端菜单点击展开/收起，滚动超过 50px 时改变样式。
- 内容动画集成：配置 ScrollReveal 对 12 个核心元素（Hero、服务卡×3、关于文本、团队卡×4、CTA）设置入场效果，延迟阶梯 120-200ms。
- 最终成果：页面首屏加载时间 <1.2s（未压缩），Chrome 性能评分 95+，兼容主流浏览器及移动设备。
3. “我”遇到的难点、坑，和解决方案
- 难点 1：Canvas 粒子在窗口 resize 时位置错乱、连线断裂。
解决：监听 resize 事件重设画布宽高，重新调用 initParticles() 生成粒子并保留随机分布。
- 难点 2：移动端菜单点击链接后侧边栏未自动关闭，且点击外部无法收起。
解决：为每个导航链接添加 click 事件移除 active 类；全局监听点击，若菜单展开且目标不是菜单区域和按钮，则关闭。
- 难点 3：滚动高亮导航时，由于 Hero 区块高度小导致“首页”高亮不准确。
解决：调整滚动偏移阈值（scrollY + 100），并使用 offsetTop 与 offsetHeight 精确判断当前可视区块。
整体采用“单页滚动 + 视觉沉浸”架构：HTML5 搭建语义化骨架，CSS3 负责毛玻璃、渐变文字、Flex/Grid 响应式布局，JavaScript 驱动交互与 Canvas 粒子背景。设计思路以“科技蓝紫渐变 + 动态粒子网络”为视觉基调，利用 backdrop-filter 营造层次感，通过 ScrollReveal 库实现滚动渐现动画，增强浏览节奏。技术栈区分：全局粒子系统（原生 Canvas）、导航滚动高亮（JS + getBoundingClientRect）、服务/团队卡片（CSS 悬停过渡）、移动端菜单（JS 切换 class）。
2. “我”的负责模块和结果（尽可能量化）
我独立完成了全部模块的开发与调试。
- 粒子背景系统：实现 140 个动态粒子，鼠标跟随影响半径 150px，粒子连线距离阈值 130px，帧率稳定 60fps。
- 响应式导航栏：支持 PC/平板/手机，移动端菜单点击展开/收起，滚动超过 50px 时改变样式。
- 内容动画集成：配置 ScrollReveal 对 12 个核心元素（Hero、服务卡×3、关于文本、团队卡×4、CTA）设置入场效果，延迟阶梯 120-200ms。
- 最终成果：页面首屏加载时间 <1.2s（未压缩），Chrome 性能评分 95+，兼容主流浏览器及移动设备。
3. “我”遇到的难点、坑，和解决方案
- 难点 1：Canvas 粒子在窗口 resize 时位置错乱、连线断裂。
解决：监听 resize 事件重设画布宽高，重新调用 initParticles() 生成粒子并保留随机分布。
- 难点 2：移动端菜单点击链接后侧边栏未自动关闭，且点击外部无法收起。
解决：为每个导航链接添加 click 事件移除 active 类；全局监听点击，若菜单展开且目标不是菜单区域和按钮，则关闭。
- 难点 3：滚动高亮导航时，由于 Hero 区块高度小导致“首页”高亮不准确。
解决：调整滚动偏移阈值（scrollY + 100），并使用 offsetTop 与 offsetHeight 精确判断当前可视区块。
示例图片视频
相似推荐
可视化建模平台-可视化建模平台
一、项目背景
面向市大数据局、公安、市监局等政务部门开展项目，各部门已完成数据治理工作，但数据加工需开发人员手写代码实现，存在需求响应慢、业务人员无法自主操作、数据处理效率低等痛点，亟需搭建低门槛数据处理平台。
二、项目目标
1. 采集政务数据元数据信息，实现库表、字段及业务含义统一管理
2. 搭建拖拽式可视化建模平台，通过算子实现数据自助加工，降低使用门槛
3. 新增定时任务调度功能，实现建模任务自动化执行
4. 对接BI报表模块，实现加工数据可视化展示
5. 提升数据处理与需求交付效率，支撑政务业务自助数据分析
三、项目概述
搭建政务低代码可视化数据建模平台，自动采集治理后数据的元数据信息，提供过滤、排重、聚合、拆分等拖拽式算子，实现业务人员自主数据加工。支持建模任务定时调度、结果数据异构系统同步与级联分析，同时打通BI报表模块，可自主生成柱状图、折线图、甘特图等图表，完成数据加工到可视化全流程自助化。
物联网实时大数据清洗BI报表-实时报表
一、项目背景
工厂内机床、设备通过PLC采集温湿度、压力、电量、加工计数等实时物联网数据，经Modbus 等协议接入Kafka。原始数据存在大量重复、异常、乱序、跳变问题，无法直接用于MES系统与生产大屏；设备运行状态（绿/黄/红/灰）无统一规则，加工计数易重复统计，亟需一套从0到1的实时数据清洗与治理体系。
二、项目目标
1. 建立设备状态标准化规则，自动识别正常、告警、故障、停机状态并统计各状态持续时长；
2. 构建生产加工计数清洗规则，过滤重复上报数据，处理人工重置等异常场景，保证计数准确；
3. 输出标准结构化数据，支撑MES系统、生产可视化大屏分钟/小时/日报表展示。
三、项目概述
该项目为工业物联网数据治理从0到1建设，采用Flink +Doris 技术架构。从Kafka消费设备实时采集数据，通过自定义清洗规工重置场景处理。清洗后数据写入聚合表，为下游MES系统、可视化大屏提供分钟级至日报级的标准化数据，支撑生产监控、趋势分析与产能统计。
项目职责：
1. 独立负责工业物联网数据治理项目从0到1设计与落地，参与整体架构方案讨论，最终确定并实现Flink +Doris 实时数仓架构；
2. 全程负责从Kafka消费设备实时数据，完成数据清洗、去重、异常过滤、乱序处理、状态计算、指标聚合等全流程开发；
3. 设计并实现设备运行状态（正常/告警/故障/停机）规则引擎，自动统计各状态持续时长并结构化落表；
4. 开发生产加工计数精准清洗逻辑，处理重复上报、人工重置等复杂业务场景，确保计数准确；
5. 构建标准聚合层数据模型，对外提供数据接口，支撑下游MES系统、生产可视化大屏实时展示与报表统计；
6. 负责需求变更、接口迭代及历史数据重刷、补算等运维工作，保障数据一致性。
7、使用AI工具(WorkBuddy后者TRAE CN)辅助提高开发效率
技术栈：Kafka+Flink+Doris+SpringBoot+Redis+Minio+Python
商用车系统数据采集
1、主要用来采集用户输入车架号vin17/后8位 进行指定品牌数据采集整理并完成自动化清洗入库。
2、使用web 页面进行每日数据采集的走势，可以监控每日数据采集量
3、提供API 接口可供其他前后端调用
4、自动登录，验证码识别，动态js 指纹解密，自动整理数据脚本，自动化入库处理
5、使用到使用是python +flask+js+mysql 处理、隐藏navigator.webdriver爬虫标识等等
基于KVM+Druid的分布式爬虫集群与工业时序数据存储系统
1、立项背景和目标：制造工厂数字化转型，需要自动化采集产线设备运行指标、行业资讯数据，项目旨在搭建分布式爬虫+时序存储一体化平台，解决多源工业数据零散、人工采集效率低下的痛点。
2、软件核心模块：分为分布式爬虫采集模块、Redis任务缓存模块、Druid时序存储模块、异常重试管控模块四大模块。
3、业务流程：依托KVM云集群部署程序→定向抓取工业站点/API数据→数据清洗过滤→缓存临时落库→海量时序数据存入Druid，配套断点续爬、故障重跑能力。
SIS系统
SIS系统作为面向生产过程的信息系统，实现单元机组DCS、ECS、化水、输煤、除灰、数字煤场等系统联网，完成全厂生产实时数据的采集和历史数据存储，支持群集或热备工作方式进行故障切换。
可对接opcda，opcua、modbus、scada等多种工业物联网数据采集协议。系统稳定运行5年确保24*7数据采集不间断。
提供的SIS系统应包含厂级监控应用软件，实时数据采集和历史数据存储功能、厂级生产过程监视和管理功能、性能计算、耗差分析、测点查看、趋势查看、过程回放，机组性能指标分析，优化运行曲线和设备操作指导，设备状态监测，机组在线性能试验、数据报表统计和分析。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服