Tpri-Datavue 软件架构与功能文档

TpriDatavue 软件架构与功能文档

一、软件架构概述

TpriDatavue 是一款功能丰富的数据可视化软件，其架构围绕界面设计、资产管理、插件管理、数据流程、菜单管理和场景预览等核心模块构建，各模块相互协作，为用户提供全面的数据可视化解决方案。

二、核心功能模块

（一）界面设计

界面设计是 TpriDatavue 的基础，用于搭建场景界面，每个界面可包含多个组件。界面可按组（group）和模板（template）进行保存，影响实际保存位置，且界面名称可使用“——”进行抽象分组。组件会根据场景内的单元格布局进行渲染，场景支持宽高自适应和固定布局两种形式，文字样式根据 CSS 设置，大屏需额外设置固定尺寸。组件中的数据{data}可触发内部生命周期，如数据更新、组件渲染和销毁等。

1. 图表组件

基于 Echarts 实现，支持折线图、柱状图、散点图、饼图、仪表盘、雷达图、水球图、箱型图、甘特图和自定义图表。自定义图表允许用户根据需求自定义样式和数据，且支持数据驱动更新。

2. 多媒体组件

支持图片、视频、音频、二维码、文本处理、办公文件预览、iframe，具备单个渲染、界面嵌套和循环渲染功能。

3. 文字组件

• 文字标题：包含基本标题、复杂标题、滚动标题、数字时钟、进度、数字和复合标题组件。
• 文字列表：有表格、词云、多指标轮播、多行文本、阵列渲染指标等组件。

4. 地图组件

基于 Cesium 和 Amap 提供三维地球、平面 GeoJSON、三维 GeoJSON、地图标注、地图交互等组件。地表图元需外网环境或内网配置，GeoJSON 来源于资产 - 地图中的 .json 文件。

5. 关系图组件

基于 relation - graph - vue2 实现，包括数据流向图、拓扑图、树形图和通用图谱。整体风格可通过组件 form 配置，节点可选择预设样式、嵌入其他界面或用 Vue2 代码自定义样式。可通过生命周期编辑脚本嵌入自定义代码，通过 .graphInstance 访问关系图实例。

6. 交互组件

• 导航：有常规导航栏和车站导航栏，导航栏节点可嵌入场景。
• 其他：包含页签、热区、触发器、WebSocket、右键菜单、文件上传。编辑态有红色区域提示，运行态不可见，以热区形式触发事件执行操作，可使用嵌入组件完成复杂任务。

7. 布局组件

• 弹出：包括弹出框、提示框、抽屉，用于在指定区域弹出额外界面。
• 布局：如左侧菜单、左右分隔、圣杯布局、折叠布局，可将场景镶嵌到指定位置完成快速布局。

8. 表单组件

• 文本：有文本框、文本域、输入建议文本框、代码框。
• 数字：包括数字框、范围选择器、滑动选择器、进度条、评分器。
• 选择：涵盖单选框、复选框、下拉选择框、级联选择器、树选择器、日期选择器、时间选择器、日期时间选择器。
• 数据：支持数据阵列渲染，包括列表、宫格、树，数据可嵌入组件。

9. 装饰组件

• 动态背景：有各种动态 GIF 背景和基于 WebGL 的 shader 背景，如圆环背景、粒子、轨迹、动态文字等。
• 形状：包括块、直线、弯曲、自定义线、自定义闭合图像、连接线、矩形、圆形、SVG、遮罩、毛玻璃、六边形、管道，管道支持动画自定义。
• 标题：各种标题边框切图。
• 组件：各种块状组件背景贴图。
• KPI：各种指标装饰背景贴图。
• 主体：各种主体组件背景贴图。
• Logo：包括公司 logo、应用 logo 等。
• 其他：一个模拟时钟。

10. 工具组件

• 表单业务：可根据数据库、JSON 等数据来源快速创建表单，支持表单验证、提交、重置等功能，支持自定义逻辑，包括表单创建、验证、提交、重置和自定义逻辑。
• 二次开发：基于 Vue2 语法，支持自定义组件、事件、方法、样式和逻辑，用于复杂页面、项目移植和兼容性处理。
• 关系库业务：与表单类似，可根据数据来源快速创建关系库，支持验证、提交、重置等功能和自定义逻辑。
• BI 业务：通过拖拉拽实现 BI 数据分析报表，支持多种图表类型。
• 3D 标注工具：用于浏览和标注三维模型，标注与 mesh 关联，可实现数据看板效果，支持自定义模型、标注、场景风格、地形、天空球和交互事件。
• 数据表格业务：基于数据库、JSON 生成表格，支持查看、编辑、导出等功能和开发者自定义交互，包括 CURD、数据更新、分页、弹窗等。
• 报表工具：类似 Excel 的在线报表，可将数据和组件挂载到单元格，支持单元格与整体样式调整、批量操作、编辑态预览。
• 三维场景：升级版 3D 标注工具，以组件形式嵌入各种组件，数据驱动和渲染风格切换功能强大，添加了材质系统，支持自定义动画帧和生命周期函数，有全面的编辑 UI 和统一渲染管线，可自定义画质、渲染效果和交互事件。

（二）资产管理

对模型资产、贴图资产、视频资产、文档资产、GeoJSON 资产等较大文件、需要缓存的文件和静态资源进行预览管理，支持 CURD 操作和拖拽添加。

（三）插件管理

将复用率高的功能块固定为插件，基于 Vue2 语法，将页面和逻辑保存在服务器。

• 页面插件：在界面编辑中直接拖拉拽使用。
• 编程插件：在各种二开场景中以标签形式引入使用。

（四）数据流程

工作流组件用于在场景中创建、管理、执行工作流，支持多级分组。业务流组件涵盖变量声明、管理缓存、数据处理、数据库操作、请求、条件判断、循环、分支、调试、日志、LLM、文件生成、修改等功能。准备好的工作流可挂在到页面使用、在服务端定时执行或开放为 API。

（五）菜单管理

创建不同角色，每个角色对应一个树形的多层彩带，每个节点可设置权限，关联场景组（group） - 场景模板（template）或 URL，用户可切换不同菜单。

（六）Playground

用于查看现有场景，模拟生产环境，方便用户预览和测试。

三、各模块关联

界面设计模块是软件的核心，提供丰富的组件用于构建场景界面。资产管理模块为界面设计提供所需的各类资产支持。插件管理模块通过提供页面插件和编程插件，增强了软件的复用性和扩展性。数据流程模块为场景中的数据处理和业务逻辑提供支持。菜单管理模块用于控制不同用户角色的访问权限和界面导航。Playground 模块则用于对设计好的场景进行预览和模拟生产环境测试，确保最终效果符合预期。各模块相互配合，形成一个完整的数据可视化解决方案。