业务和功能介绍
本项目是一套面向智慧城市、智慧海洋、智慧交通、智慧文旅及智慧园区等行业的数字孪生低代码可视化大屏开发平台，主要解决传统数据可视化项目开发周期长、组件重复开发率高、交互逻辑复杂、维护成本高以及跨项目复用性不足等问题。
平台采用低代码、组件化和配置化的设计理念，将数据图表、二维地图、三维场景、业务数据接口及交互事件等能力进行统一封装，为开发人员和项目实施人员提供一站式可视化大屏搭建工具。用户通过组件拖拽、属性配置、数据源绑定和交互事件编排，即可快速完成数据可视化页面的设计与开发，减少重复编码工作。
核心功能包括：
1. 可视化画布编辑： 支持组件拖拽、缩放、位置调整、图层排序、画布设置及样式配置，实现所见即所得的大屏设计。
2. 可视化组件管理： 提供柱状图、折线图、饼图、表格、文本、图片、地图及三维场景等组件，支持动态配置与复用。
3. 数据源管理： 支持对接后端 REST API，实现业务数据获取、解析、绑定及可视化展示。
4. 事件交互编排： 提供事件配置和蓝图编辑能力，实现组件点击、数据切换、地图联动及跨组件交互。
5. 数字孪生场景展示： 集成二维地图和三维可视化能力，实现地理空间信息与业务数据的融合展示。
6. 大屏项目管理： 支持项目配置保存、读取、编辑及预览，实现大屏配置的持久化与重复使用。
7. 动态视觉展示： 支持组件动画、背景样式、主题属性及多种可视化效果配置，满足不同业务场景的展示需求。
平台能够应用于城市运行监测、海洋环境监控、旅游数据分析、交通运行监管、园区设备监测及企业运营管理等场景，将分散的业务数据集中展示，为运营监控、业务分析和辅助决策提供直观的数据支持。
平台采用低代码、组件化和配置化的设计理念，将数据图表、二维地图、三维场景、业务数据接口及交互事件等能力进行统一封装，为开发人员和项目实施人员提供一站式可视化大屏搭建工具。用户通过组件拖拽、属性配置、数据源绑定和交互事件编排，即可快速完成数据可视化页面的设计与开发，减少重复编码工作。
核心功能包括：
1. 可视化画布编辑： 支持组件拖拽、缩放、位置调整、图层排序、画布设置及样式配置，实现所见即所得的大屏设计。
2. 可视化组件管理： 提供柱状图、折线图、饼图、表格、文本、图片、地图及三维场景等组件，支持动态配置与复用。
3. 数据源管理： 支持对接后端 REST API，实现业务数据获取、解析、绑定及可视化展示。
4. 事件交互编排： 提供事件配置和蓝图编辑能力，实现组件点击、数据切换、地图联动及跨组件交互。
5. 数字孪生场景展示： 集成二维地图和三维可视化能力，实现地理空间信息与业务数据的融合展示。
6. 大屏项目管理： 支持项目配置保存、读取、编辑及预览，实现大屏配置的持久化与重复使用。
7. 动态视觉展示： 支持组件动画、背景样式、主题属性及多种可视化效果配置，满足不同业务场景的展示需求。
平台能够应用于城市运行监测、海洋环境监控、旅游数据分析、交通运行监管、园区设备监测及企业运营管理等场景，将分散的业务数据集中展示，为运营监控、业务分析和辅助决策提供直观的数据支持。
项目实现
技术栈： Vue 3、TypeScript、Vite、Pinia、Vue Router、Element Plus、Naive UI、ECharts、ECharts GL、Three.js、Axios、VueDraggable、Monaco Editor、GSAP、SCSS。
1. 前端整体架构： 基于 Vue 3 + TypeScript + Vite 搭建项目，采用模块化与组件化架构，将可视化编辑器、组件资源库、属性配置、数据管理、事件交互和预览运行等功能解耦，提高系统可维护性与扩展性。
2. 动态组件渲染： 采用配置驱动的开发模式，通过统一的数据结构管理组件类型、位置、尺寸、样式、数据源及交互事件。根据组件配置动态加载对应组件，并利用 Vue 响应式机制实现属性修改与画布实时更新。
3. 可视化画布交互： 基于拖拽组件和画布交互逻辑，实现组件拖拽、移动、缩放、层级调整及布局管理。通过坐标计算与画布状态管理，保证不同缩放比例下的组件布局及交互准确性。
4. 编辑器状态管理： 使用 Pinia 集中管理画布配置、组件列表、当前选中组件、图层状态及编辑历史，实现属性面板、画布和图层管理模块之间的数据同步，并支持项目配置的保存与恢复。
5. 图表组件封装： 基于 ECharts 和 ECharts GL 封装可复用的二维、三维图表组件，将图表样式、坐标轴、图例、数据系列等属性抽象为动态配置，实现组件数据更新及不同业务场景的快速复用。
6. 三维可视化集成： 基于 Three.js 实现三维图形展示能力，结合地图组件及场景管理模块，将地理空间数据与业务图表融合，实现数字孪生可视化场景的统一展示。
7. 事件交互系统： 通过事件驱动和蓝图编排机制，配置组件的点击、双击、鼠标交互及对应业务动作，实现组件间数据联动、状态切换和交互逻辑执行，降低复杂交互场景的开发成本。
8. 数据接口集成： 基于 Axios 封装统一网络请求，通过接口配置、数据解析和字段映射，将后端业务数据转换为可视化组件所需的数据结构，实现动态数据展示。
9. 项目配置与预览： 将画布布局、组件属性、数据配置及事件信息进行结构化存储，通过配置解析完成大屏加载与渲染，实现编辑模式与运行模式分离。
1. 前端整体架构： 基于 Vue 3 + TypeScript + Vite 搭建项目，采用模块化与组件化架构，将可视化编辑器、组件资源库、属性配置、数据管理、事件交互和预览运行等功能解耦，提高系统可维护性与扩展性。
2. 动态组件渲染： 采用配置驱动的开发模式，通过统一的数据结构管理组件类型、位置、尺寸、样式、数据源及交互事件。根据组件配置动态加载对应组件，并利用 Vue 响应式机制实现属性修改与画布实时更新。
3. 可视化画布交互： 基于拖拽组件和画布交互逻辑，实现组件拖拽、移动、缩放、层级调整及布局管理。通过坐标计算与画布状态管理，保证不同缩放比例下的组件布局及交互准确性。
4. 编辑器状态管理： 使用 Pinia 集中管理画布配置、组件列表、当前选中组件、图层状态及编辑历史，实现属性面板、画布和图层管理模块之间的数据同步，并支持项目配置的保存与恢复。
5. 图表组件封装： 基于 ECharts 和 ECharts GL 封装可复用的二维、三维图表组件，将图表样式、坐标轴、图例、数据系列等属性抽象为动态配置，实现组件数据更新及不同业务场景的快速复用。
6. 三维可视化集成： 基于 Three.js 实现三维图形展示能力，结合地图组件及场景管理模块，将地理空间数据与业务图表融合，实现数字孪生可视化场景的统一展示。
7. 事件交互系统： 通过事件驱动和蓝图编排机制，配置组件的点击、双击、鼠标交互及对应业务动作，实现组件间数据联动、状态切换和交互逻辑执行，降低复杂交互场景的开发成本。
8. 数据接口集成： 基于 Axios 封装统一网络请求，通过接口配置、数据解析和字段映射，将后端业务数据转换为可视化组件所需的数据结构，实现动态数据展示。
9. 项目配置与预览： 将画布布局、组件属性、数据配置及事件信息进行结构化存储，通过配置解析完成大屏加载与渲染，实现编辑模式与运行模式分离。
示例图片视频
相似推荐
json解析转换器
1、背景和目标：一、超级快速、安全对json的解析与对象转换；二、支持分布式超高并发
2、json解析转换器，支持分布式高并发，支持百万级别访问。用于快速进行json的解析与对象转换。原有的开源工具，要么安全性不够，要么性能不够强悍，要么不支持定制，很难满足企业日益严苛的业务需求。开发的这个json解析转换器，可以同时满足以上三种需求。
智能仓储 · 立库调度监控系统（RMS 调度中间件 + 监控管理后台）-RmsCC
【1】立项背景与目标
自动化立体库是新能源锂电、汽车零部件等行业的主流仓储形态，库内由四向车、提升机、输送线、接驳口协同完成托盘出入库。上游 WMS/WES 只下发"某个托盘要入库或出库"，而"分配到哪个货位、走哪条路、派哪台车、每一段由谁执行"全部由中间的调度系统（RMS）计算并驱动——本项目就是一个立库调度中间件 + 配套的调度监控管理后台。目标：把"任务下发→货位分配→路径规划→派车→分段执行→库存过账"做成可跑通、可观测、可人工干预的闭环，并解决现场最头疼的三个问题：调度计划与现场执行脱节、设备与货位状态不可见、故障（走不通、卡住）无日志可查。
【2】核心功能模块
①基础数据：仓库/货区/货位（层-x-y 坐标、深浅位）/设备/物料建模。
②权限体系：JWT + RBAC 用户-角色-菜单三级权限，菜单级与接口级双重校验。
③上游任务管理（内置 WES 模拟器）：批量下发出入库任务，一键生成托盘号。
④任务调度与分段：任务状态机（待下发/执行中/已完成/异常/取消），入库按固定拓扑自动拆 3 段（库外输送线→提升机→目标层接驳口→货位），出库镜像反向。
⑤路径规划：库内 A* 网格寻路（巷道四向可走、货架区仅纵向、有货货位视为障碍），按"空闲且电量>40% + 曼哈顿距离最近"自动派车，支持小车避让、等待点与自动移库（倒库）。
⑥设备仿真引擎：无真实 PLC，用定时任务按可配置节拍推进每段任务并驱动设备沿路径移动。
⑦实时监控：WebSocket 每秒推送设备位置、状态与任务进度，地图大屏显示库位占用与小车轨迹，另配小车/设备监控页。
⑧库存与数据中心：托盘维度库存、分层占用统计、库存流水（任务完成自动过账）。
⑨接口日志中心：按上游/RCS/WCS 三个通道记录每次调用的请求与返回报文、方向、结果、耗时，支持按托盘号/任务号全链路检索与改报文重发。
⑩AI 作业助手：接入大模型，自然语言下发任务、异常诊断与智能问答，SSE 流式输出，模型不可用自动降级为本地规则。
⑪单车手动控制：顶升/放下/移动/充电/恢复/释放任务等指令，应急时人工接管。
【3】业务流程与功能路径
上游下发（托盘号 + 出入库类型）→ RMS 自动分配货位（浅位优先、低层优先）→ 生成分段计划 → A* 计算路径并派最近的空闲车 → 仿真引擎按节拍推进各段 → 全段完成后自动过账（货位占用/释放、绑定或解绑托盘、写库存流水与系统日志）→ 任务归档。
功能路径：登录 → 首页看板（货位占用 + 任务趋势）→ 上游任务管理下发任务 → 资源监控中心地图大屏观察执行 → 立库任务中心（任务视图/任务管理）→ 数据中心查库存与流水 → 报表数据中心查接口日志 → AI 助手用自然语言下单。
多端AI问答系统（SSE流式输出）
立项背景：随着大语言模型的普及，传统企业与用户对智能对话的需求激增。旨在构建一个前后端完全解耦的 AI 问答系统，支持多端接入，提供流畅的流式对话体验。
核心功能：支持 SSE 全链路流式对话（包含start/content/reasoning/done/error五类事件）；多会话管理（新建、切换、重命名、置顶、逻辑删除）；Markdown 渲染、思考过程折叠展示、多模型切换、Token 用量统计与 API 调用日志，以及四维 IP 限流。
业务流程：前端发起对话请求 → 后端校验限流 → 组装历史消息并调用大模型 API → SSE 逐字返回前端实时渲染 → 消息落库并记录 Token 与耗时。
CRM客户管理后台
立项背景：针对中小型企业客户信息分散、销售跟进过程不透明、合同管理混乱等痛点，旨在打造一个轻量级的客户全生命周期管理后台，提升销售团队协作与转化效率。
核心功能：涵盖管理员登录鉴权、客户主表管理、联系人维护、跟进记录追踪、合同管理等六大模块。支持客户信息分页查询、关键字搜索、新增编辑与逻辑删除；客户详情页以名片形式集中展示联系人、跟进记录及关联合同。
业务流程：从潜在客户录入，到日常跟进记录，再到最终合同签订与操作日志审计，覆盖完整的销售业务闭环。
ERP管理系统
本项目面向中小企业的采购、销售、仓储、生产及财务协同场景，目标是将分散的业务记录、审批流程和经营数据整合到统一平台，支持业务过程追踪与数据查询。
系统包含客户与供应商、销售、采购、仓储、生产制造、财务、人力资源、项目合同、资产、质量售后、零售门店、数据报表和系统管理，共13个模块、102个配置驱动页面。核心功能包括客户线索与商机管理、采购与销售订单、库存预留及批次追溯、多级物料清单、生产领料与报工、发票与收付款、会计凭证、薪酬、资产折旧和项目成本分析。
业务流程围绕单据流转展开。例如，销售业务支持“线索→商机→报价→销售订单→发货→发票→收款”；采购业务支持采购申请、采购订单、到货验收、入库及付款。单据通过草稿、提交审批、审批通过和过账等状态进行控制，过账时联动库存台账、资金余额及会计分录，并保留操作历史。
系统提供桌面Web端和移动端入口，共用业务接口与权限规则。管理员可配置用户、角色、菜单、字典和审批权限，员工可按权限处理单据、查看通知和查询报表。经营数据支持按日期汇总及来源下钻，方便追踪库存、应收应付和项目收支。
项目预览
https://tomatoxs.cn:18443
https://tomatoxs.cn:18444
账号：demo
密码：demo123
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服