组态大屏

约 12448 字大约 41 分钟

组态大屏数据可视化大屏编辑器IoT大屏

2026-06-25

产品概述

组态大屏是一套基于 Vue 3 + ECharts 的数据可视化设计工具，支持拖拽式组件布局、多数据源接入、实时数据绑定、事件联动以及自定义组件封装。编辑器深度集成 IoT 设备数据，可快速构建面向物联网场景的数据大屏。

核心能力

能力	说明
可视化拖拽编辑	左侧组件面板拖拽到画布，支持框选、多选、对齐吸附
多数据源支持	静态数据 / 动态请求 / 公共接口 / 设备属性直连
实时数据刷新	全局轮询 + 组件级独立轮询
事件与联动	鼠标事件、生命周期事件、组件间数据联动
自定义组件	画布内容封装为可复用组件，带封面截图与暴露属性
模板市场	内置大屏模板，支持一键应用
预览与发布	自适应/全屏/滚动多种预览模式，发布生成公开访问链接

技术栈

Vue 3 + TypeScript + Pinia / Naive UI / ECharts + VChart / 高德地图 + Leaflet / Three.js / Monaco Editor

大屏管理

大屏管理模块集成在 IoT 管理端（/iot/big-bigscreen）。左侧边栏包含以下菜单：

菜单	路径	说明
大屏项目	`/iot/big-bigscreen/screen`	大屏的创建、编辑、发布、归档管理
组件管理	`/iot/big-bigscreen/component`	自定义组件的查看、启用/禁用、复制、删除
模板管理	`/iot/big-bigscreen/template`	模板的创建、导入、上下架（仅平台租户）
数据源管理	`/iot/big-bigscreen/datasource`	外部数据库连接配置
数据集管理	`/iot/big-bigscreen/dataset`	SQL 数据集的创建与编辑
资源库	`/iot/big-bigscreen/asset`	图片、文件等素材的上传与管理

注意：进入大屏项目页时强制选择 IoT 项目。无项目时弹出新建提示。

大屏项目列表

列表展示所有已创建的大屏卡片，每张卡片显示：预览封面、大屏名称、发布状态（已发布/草稿/已归档）、分辨率。

工具栏提供：

新建大屏：打开创建对话框
导入大屏：导入 JSON 或 ZIP 文件
当前项目选择器：切换 IoT 项目

筛选区支持：发布状态、归属状态（当前项目/待处理/全部）、创建人、更新时间范围。

大屏卡片操作

每个大屏卡片提供两层操作入口：

悬浮快捷操作（鼠标悬停封面出现）：

预览按钮（眼睛图标）：直接打开预览
编辑按钮（铅笔图标）：打开编辑器

下拉菜单（点击 ⋮ 图标）：

操作	说明
编辑信息	修改大屏名称、描述等元信息
打开编辑器	在新窗口打开画布编辑器
预览	新窗口预览大屏效果
发布/取消发布	生成或关闭公开访问链接
复制	复制大屏到当前项目下
导出	导出为 JSON 或 ZIP 文件
归档	标记为归档状态（自动取消发布）
删除	永久删除（需二次确认）

双击大屏卡片也可快速打开编辑器。

创建大屏

在「大屏项目」页点击「新建大屏」按钮，弹出创建对话框。对话框分为三个区域：

第一步：选择创建方式

方式	说明
空白创建	从空白画布开始，自定义搭建新的大屏。画布上无任何组件，适合从零设计。
从模板创建	选择一个平台已上架的模板作为基础，创建后可继续在编辑器中修改。

点击对应卡片即可切换模式。选择「从模板创建」后，对话框下方会出现模板选择区域。

第二步：填写基础信息

字段	说明
大屏名称（必填）	输入大屏名称，创建时自动校验重名
模板来源	只读显示。空白创建显示「空白创建」，从模板创建显示所选模板名称
分辨率	下拉选择预设分辨率（1920×1080、2560×1440 等），空白创建可自定义宽高。从模板创建默认「跟随模板」，也可改为独立分辨率
状态	草稿（`2`）可后续发布；或直接设为已发布（`1`）
备注	可选，大屏描述信息

选择「自定义」分辨率时，会出现自定义宽和自定义高两个数字输入框（范围 320~10000）。

第三步（从模板创建）：选择模板

从模板创建时，对话框底部展示模板选择区域。系统自动拉取所有已上架的模板，以卡片网格展示。

每个模板卡片包含：

元素	说明
封面图	模板预览截图，无封面时显示占位图标
模板名称	模板标题
模板描述	模板的简要说明
状态标签	「已上架」绿色标签
来源标签	「公共」（system）或「自定义」（custom）
分辨率标签	模板原始分辨率

点击模板卡片即选中（蓝色高亮边框），顶部「模板来源」字段同步更新为模板名称。

若当前无可用的已上架模板，显示「暂无可用模板」空状态提示。

第四步：提交创建

填写完成后，点击对话框底部「创建并编辑」按钮。系统自动：

校验大屏名称和模板选择
创建大屏记录并绑定到当前 IoT 项目
生成画布初始内容（空白或基于模板）
关闭对话框，在新窗口打开编辑器

创建时自动绑定当前选中的 IoT 项目。一个项目可创建多个大屏。

租户权限

功能	平台租户（platform）	普通租户
大屏项目	✅	✅
组件管理	✅	✅
模板管理	✅ 完全控制	❌ 不可见
数据源管理	✅	✅
数据集管理	✅	✅
资源库	✅	✅

组件管理

组件管理页展示当前租户的自定义组件列表。每个卡片显示封面图、名称和来源标签（公共 / 租户专属）。

列表操作：编辑信息（抽屉表单）、打开编辑器、启用/禁用、复制、删除。预置分类管理需 admin / super / super-admin 角色。

注意：自定义组件不在管理页创建，而是在编辑器中通过右键菜单封装。创建后自动出现在此列表中。

新建自定义组件（在编辑器中操作）

在编辑器的画布上选中要封装的组件（单个组件或分组均可）
右键点击组件 → 在弹出的菜单中选择「保存为我的组件」
若组件来源于已有自定义模板，系统会弹出选择对话框：
- 覆盖更新：更新原有模板
- 另存为新组件：创建独立的新组件
在封装对话框中填写信息：

字段	说明
组件名称	自动填入组件原标题，可修改
组件分类	普通用户仅「自定义组件」；管理员可见预设分类（指标/状态/对比/通用/容器）
适配器类型	默认自动匹配图表类型，可手动指定
暴露属性	勾选后该配置区块在实例化时可见：标题/名称、尺寸、样式/滤镜、图表配置
封面图	系统自动截取画布快照，点击可手动上传替换（≤2MB）

点击「确定」后，系统自动封装组件、上传封面、保存到后端。组件即刻出现在左侧面板的「自定义」分类中，并在管理页列表中可见。

封装分组组件时，适配器选项包含「组合适配器（自动分发）」和「IoT 设备数据源」等组合数据源选项。

数据源管理

数据源管理用于配置外部数据库连接，供 SQL 数据集查询使用。VxeGrid 表格展示所有已配置的数据源。

表格列：名称、类型（HTTP / WebSocket / Mock / MySQL / PostgreSQL）、连接目标、状态（正常/异常/未检测）、描述、更新时间。

行操作：编辑、测试连接、删除。

新建数据源

点击「新建」按钮，弹出抽屉式表单。按所选类型显示不同的配置字段：

第一步：选择类型并填写基本信息

字段	说明
数据源名称（必填）	数据源标识名称
类型（必填）	HTTP / WebSocket / Mock / MySQL / PostgreSQL

第二步：填写连接配置（根据所选类型动态显隐）

类型	配置字段
HTTP / WebSocket	基础地址（必填，如 `http://example.com:7777`）
Mock	Mock 数据（必填，JSON 格式文本）
MySQL / PostgreSQL	主机地址、端口号、数据库名、用户名、密码、字符集

第三步：测试并保存

填写完成后，可点击底部「测试连接」按钮验证连通性（Mock 和 HTTP 类型不支持测试）。确认无误后点击「确认」保存。

密码安全：编辑数据源时密码类字段以 *** 脱敏回显。保存时若未修改密码字段，后端自动保留原始值。

数据集管理

数据集管理用于创建和配置各类数据查询。VxeGrid 表格展示所有数据集，支持按分组筛选。

表格列：名称、类型、状态、标签、数据源、描述、更新时间。

行操作：编辑、预览数据、删除。

新建数据集

点击「新建」按钮，跳转到数据集编辑页（/dataset/edit）。页面分为左侧配置区和右侧预览区：

第一步：填写基本信息

字段	说明
名称（必填）	数据集标识名称
类型（必填）	HTTP / IoT / SQL / JSON / JS / 原始数据 / 存储过程 / 脚本
所属分组	下拉选择已有分组
标签	自由填写标签文本
备注	描述信息

第二步：配置数据源（根据所选类型）

类型	配置面板	说明
HTTP	ConfigHttp	配置 URL、请求方法、Headers、Body
IoT	ConfigIot	配置设备属性查询参数（产品、设备、属性、聚合）
SQL	ConfigSql	编写 SQL 查询语句，仅允许 SELECT/WITH/EXPLAIN
JSON	ConfigJson	直接粘贴 JSON 示例数据
JS	ConfigJs	编写 JavaScript 脚本动态生成数据
原始数据	ConfigRaw	配置原始数据源
存储过程	ConfigProcedure	配置数据库存储过程调用
脚本	ConfigScript	编写自定义脚本

第三步：预览与保存

填写完成后，可点击「预览数据」按钮查看查询结果。确认无误后点击「保存」。

创建完成后，在编辑器的「动态数据 → 从公共数据池」中即可引用该数据集。详见第五章数据绑定。

资源库

资源库用于管理大屏设计中使用的图片、音频、视频等素材文件。卡片视图展示所有素材。

素材卡片：缩略图 + 文件名 + 类型标签。

工具栏：上传按钮、分组筛选下拉、类型筛选（图片/视频/音频/其他）。

卡片操作：预览、下载、复制链接、删除。

上传素材

方式一：点击上传

点击「上传」按钮 → 弹出文件选择对话框 → 选择文件（支持图片、视频、音频、其他格式）→ 自动上传。

方式二：拖拽上传

直接从本地文件夹拖拽文件到资源库页面区域，自动触发上传。

上传前可在顶部选择目标分组，新上传的素材自动归入所选分组。

模板管理（仅平台租户）

模板管理提供大屏模板的全生命周期管理。模板卡片显示封面、名称、来源标签（系统/自定义）、状态（已上架/草稿）、分辨率。

筛选：按来源、状态、创建人、时间范围筛选。

卡片操作：编辑信息、打开编辑器、上架/下架、删除。

新建模板

方式一：空白新建

点击「新建模板」按钮 → 弹出抽屉表单 → 填写模板信息和分辨率 → 点击确认 → 进入模板编辑器（空白画布）。

字段	说明
模板名称（必填）	模板标识名称
来源	系统（system）/ 自定义（custom），新建默认为自定义
分辨率（必填）	下拉选择预设分辨率
描述	模板说明文字

方式二：导入模板

点击「导入模板」按钮 → 选择本地 JSON 或 ZIP 文件 → 自动解析并导入。

导入 ZIP 文件时，系统自动解压素材并还原引用路径，文件限制 ≤50MB。

编辑器界面

编辑器是系统的核心工作区。系统中共有三种编辑器入口，界面和行为有细微差异。

编辑器类型

系统中有三种编辑器模式，界面和功能各有差异：

差异点	大屏编辑器	模板编辑器	组件编辑器
入口	大屏卡片 →「打开编辑器」	模板卡片 →「打开编辑器」	组件卡片 →「打开编辑器」（或在画布右键→「保存为我的组件」后进入组件编辑态）
组件面板	全部 8 类组件	全部 8 类组件	仅「基础」分类（Charts / Informations / Tables / Decorates / Photos / Icons），无模板和自定义分类
图层面板	✅ 可见	✅ 可见	❌ 隐藏
事件配置	完整（基础事件 + 生命周期 + 组件交互联动）	完整	❌ 隐藏（事件 Tab 不显示）
顶部返回按钮	返回大屏项目列表	返回模板列表	显示「返回组件管理」按钮
保存行为	`Ctrl+S` 保存大屏画布内容	`Ctrl+S` 保存模板内容	顶部右侧显示「组件模式保存」按钮，点击后提交到组件库（生成模板 + 上传封面）
标题	大屏名称	模板名称	组件名称
数据面板	简化面板 / 标准面板（按组件类型）	同大屏	仅简化面板

大屏编辑器（默认）

功能最完整的模式。顶部工具栏包含返回、撤销/重做、标题编辑、保存、预览、导入/导出、发布按钮。支持多页大屏，通过底部页码切换。

编辑器采用经典三栏式布局：

┌─────────────────────────────────────────────────────────────┐
│  [顶部工具栏] 返回｜撤销/重做｜大屏名称｜保存｜预览｜发布     │
├──────────────┬──────────────────────┬───────────────────────┤
│              │                      │                       │
│  左侧面板    │     画布编辑区        │     右侧配置面板       │
│  · 组件列表  │  （标尺+网格+组件）    │  · 页面配置/组件属性   │
│  · 图层列表  │                      │  · 动画/数据/事件      │
│              │                      │                       │
├──────────────┴──────────────────────┴───────────────────────┤
│  [底部状态栏]  缩放比例｜页码导航｜历史记录｜快捷键提示        │
└─────────────────────────────────────────────────────────────┘

模板编辑器

入口：模板管理页 → 模板卡片「打开编辑器」。与大屏编辑器的核心区别：

入口上下文：从模板管理进入，返回按钮回模板列表
保存目标：Ctrl+S 将画布内容保存到当前模板，同步更新模板封面截图
发布行为：无发布概念（模板需手动上架/下架），顶部无「发布」按钮

下文各功能区描述以大屏编辑器为准（功能最完整）。

组件编辑器

入口：组件管理页 → 组件卡片「打开编辑器」，或在画布上右键 →「保存为我的组件」后进入组件编辑态。

与大屏编辑器的核心区别：

左侧面板：仅显示「基础」分类组件（Charts / Informations / Tables / Decorates / Photos / Icons），不显示模板和自定义分类
右侧面板：无页面配置 Tab（无画布尺寸/背景/主题设置）；选中组件时仅显示「定制」和「数据」两个 Tab（无动画和事件）
图层面板：完全隐藏
顶部工具栏：左侧显示「返回组件管理」按钮；右侧「保存」替换为「组件模式保存」按钮
无选中组件时：右侧面板显示「组件信息」区域（组件名称、ID、版本、类型、分类可编辑）
保存行为：点击「组件模式保存」→ 自动截图 → 上传封面 → 更新组件库，不关闭编辑器

组件编辑器下受限的功能在 3.2~3.7 各节中均有注明。

顶部工具栏

工具栏分为左、中、右三个区域：

左侧按钮区

按钮	功能	说明
返回箭头	返回管理页面	组件编辑模式下显示「返回组件管理」
撤销 ↶	`Ctrl+Z`	撤销上一步操作，支持多步撤销
重做 ↷	`Ctrl+Shift+Z`	恢复被撤销的操作
面板切换	显隐控制	控制左侧面板/图层面板/右侧配置面板的显隐

中间区域

元素	功能
大屏名称	点击进入编辑态，失焦或回车自动保存
连线工具	激活连线绘制模式，支持折线/圆角折线/直线三种路径类型
页码显示	当前页 / 总页数（如 "6/16"），支持多页大屏

右侧按钮区

按钮	功能	快捷键
保存	保存画布数据到服务器，成功后自动生成封面截图	`Ctrl+S`
同步内容	将画布数据同步到后端	—
预览	在新窗口预览大屏效果	—
导入	导入 JSON 或 ZIP 文件覆盖当前画布	—
导出	导出为 JSON / PNG / ZIP	—
发布	发布大屏生成公开访问链接，支持一键复制	—
组件模式保存	组件编辑模式下保存到组件库（生成模板+上传封面）	—

模板编辑器：右侧无「发布」按钮，保存行为为保存模板内容。组件编辑器：右侧无「预览」「发布」按钮，「保存」替换为「组件模式保存」。

左侧组件面板

左侧面板展示可用组件，采用三级分类结构：

一级分类	二级分类	包含内容
通用	Charts（图表）	柱状图、折线图、饼图、散点图、雷达图、漏斗图、热力图、地图等
通用	Informations（信息）	文字、时间选择器、下拉选择器、图片、轮播图、视频、词云等
通用	Tables（表格）	滚动排名列表、轮播列表、基础分页表格
通用	Decorates（装饰）	13 种边框、6 种装饰动画、三维地球、数字翻牌、时钟等
通用	Photos（图片）	本地上传图片、共享图库
通用	Icons（图标）	通用图标 70+、Material Line 25+、天气图标 39+
通用	Presets（预置）	IoT 业务组件：设备状态、指标翻牌器、设备对比分析等
模板	大屏模板	系统/自定义大屏模板，拖拽即用
自定义	用户组件	用户封装的自定义组件

操作方式：

点击：在面板中点击组件将其添加到画布
拖拽：从面板拖拽组件到画布生成实例
搜索：顶部搜索框按名称筛选组件
外部拖放：将本地图片文件拖入画布自动生成 Image 组件

组件编辑器：仅显示「基础」分类（通用大类下的 6 个子类），隐藏「模板」和「自定义」分类。

右侧配置面板

右侧面板根据当前选中目标动态切换内容。

未选中组件时 —— 页面配置

显示画布全局设置：

配置项	说明
画布尺寸	宽度 × 高度（设计稿尺寸）
背景设置	背景颜色、背景图片（支持上传）、滤镜效果
主题	预设主题色彩（明亮/暗淡/马卡龙/蓝绿等 10+ 种）
适配方式	预览缩放模式：自适应(fit)/全屏铺满(full)/纵/横向滚动
全局请求	全局轮询间隔、请求头、请求参数

组件编辑器：无页面配置 Tab。未选中组件时右侧显示「组件信息」（名称、ID、版本、类型、分类可编辑），而非画布全局设置。

选中组件时

根据组件类型显示不同 Tab：

「定制」Tab —— 组件专属配置：

尺寸（宽度 × 高度）和位置（X / Y 坐标）
图表样式配置（颜色、字体、图例、坐标轴等）
边框、圆角、透明度等样式属性

「动画」Tab —— 入场动画效果：

动画类型选择（淡入、滑入、缩放、旋转等）
动画时长和延迟时间设置

「事件」Tab —— 交互事件绑定：

基础事件：click、dblclick、mouseenter、mouseleave
生命周期事件：vnodeBeforeMount、vnodeMounted
交互联动：配置组件间数据联动关系

「数据」Tab（图表组件专属）：

数据源类型选择：静态数据 / 动态请求 / 公共接口 / 设备属性
请求参数配置：URL、Headers、Params、Body
字段映射：X 轴字段、Y 轴字段（或 name/value 模式）
数据过滤脚本：支持 JS 脚本动态转换数据

组件编辑器：仅显示「定制」和「数据」两个 Tab（无「动画」和「事件」），数据面板固定使用简化数据面板。

画布编辑区

画布是组件的放置和编辑区域，支持标尺和网格辅助对齐。

操作	方式
选中组件	单击选中，`Ctrl+单击`多选
移动组件	拖拽移动，自动限制边界，支持吸附对齐
缩放组件	拖拽组件四角或边缘的缩放手柄
框选	空白处拖拽框选多个组件
缩放画布	底部缩放滑块或 `Ctrl+滚轮`，范围 10%~200%
右键菜单	右键组件唤出操作菜单（见下方）
创建分组	多选组件后 `Ctrl+G`，或右键→「创建分组」
解除分组	选中分组后 `Ctrl+Shift+G`，或右键→「解除分组」
隔离编辑	双击分组进入隔离模式，仅显示组内组件；拖拽分组边框可联动缩放子组件；`ESC` 退出
连线绘制	顶部连线工具激活后，在组件间拖拽绘制折线/圆角折线/直线，右键结束

右键菜单

右键菜单根据选中组件数量显示不同选项：

选中单个组件时（从上到下）：

分组	菜单项	说明
状态操作	锁定 / 解锁	锁定后组件不可选中和移动
状态操作	隐藏 / 显示	隐藏后组件在画布上不可见
剪贴板	复制 / 剪切 / 粘贴	跨页面组件的复制粘贴，粘贴位置为右键点击处
层级调整	置顶 / 置底 / 上移 / 下移	调整组件 zIndex 层级
清除	清空剪贴板	清除当前剪贴板中暂存的组件数据
删除	删除	从画布移除组件（可用 `Ctrl+Z` 撤销）
封装	保存为我的组件	将当前组件封装为自定义组件，存入组件库（详见 2.5 节）

选中多个组件时：

菜单项	说明
创建分组	将选中的多个组件合并为一个分组
解除分组	将已选中的分组拆分为独立组件

图层管理面板

展开图层面板后显示所有组件的层级列表：

功能	说明
列表顺序	逆序展示（越新越靠上，对应 zIndex 越高）
视图切换	缩略图模式 / 文本列表模式
悬停高亮	鼠标悬停时画布对应组件高亮
拖拽排序	拖拽调整组件层级
右键菜单	同画布右键菜单

组件编辑器：图层面板不可见，「图层」切换按钮从左侧工具栏移除。

底部状态栏

元素	功能
缩放控制	滑块调节画布显示比例（10% ~ 200%），支持自适应
页码指示	当前页码，支持多页大屏间切换
历史记录	操作历史面板入口
快捷键提示	显示常用快捷键参考

组件库

系统内置八大类可视化组件，按功能组织：

图表组件（Charts）

柱状图、横向柱状图、柱状图&折线图、胶囊柱图、折线图、单折线渐变图、单折线渐变面积图、双折线渐变面积图、饼图、饼图-环形、进度图、水球图、散点图、对数回归散点图、地图(可选省份)、高德地图、雷达图、漏斗图、热力图、树形分布、表盘、关系图、桑基图。

装饰组件（Decorates）

边框-01~13（13 种预设边框）、装饰-01~06（动态装饰动画）、流程线、动画连线、三维地球（Three.js）、数字计数、数字翻牌、通用时间、倒计时、时钟、全屏按钮、管道、圆点光环。

信息展示（Informations）

文字、渐变文字、弹幕文字、时间选择器、下拉选择器、标签选择器、分页组件、输入框、图片、轮播图、视频、远程网页(Iframe)、词云。

表格组件（Tables）

滚动排名列表、轮播列表、基础分页表格。

图标组件（Icons）

通用图标 70+（uim: 前缀）、Material Line 25+（line-md: 前缀）、天气图标 39+（wi: 前缀）。

图片素材（Photos）

本地上传图片（存储于 localStorage）、共享图库（系统示例图片）。

预置组件（Presets）

IoT 业务组件：累计运行时间、指标翻牌器、设备状态（在线/离线/未激活）、设备对比分析、通用图表（带边框）、空白边框容器。

组合组件（Groups）

增强组合容器：嵌套多个子组件，可统一配置数据源并通过组合适配器将数据分发到子组件。

数据绑定

编辑器有两套数据配置面板，根据组件类型自动切换。所有数据绑定均在右侧面板的「数据」Tab 中完成。

数据面板类型

编辑器根据组件类型自动选择数据面板：

面板	适用组件
简化数据面板（SimplifiedDataPanel）	基本图表（柱状图、折线图、饼图、散点图、表格类等）、自定义组件（form / table / composite 模式）、单值组件（文字、翻牌器、进度图、水球图、表盘、雷达图等）、组件编辑模式、分组隔离编辑下的子图表
标准数据面板（ChartData）	预置 IoT 组件（Presets，`chartFrame=composite`）、增强组合容器、其他未匹配组件

装饰组件、图标组件无「数据」Tab。标准分组组件的数据由子组件各自管理。

进入方式：画布上选中组件 → 右侧面板点击「数据」标签页。

简化数据面板（主要）

简化数据面板覆盖大多数图表和自定义组件，是主力数据配置面板。提供三种数据源：

静态

直接编辑组件的内嵌数据，与标准面板的「静态数据」使用相同的 JSON 编辑器（详见 5.3.1）。格式随组件类型匹配：

表单模式（form）：字段-值对编辑
表格模式（table）：行列表格编辑器，支持增删行列
复合模式（composite）：组合适配器配置

IoT 设备（推荐）

连接物联网平台设备数据，是自定义组件和预置 IoT 组件推荐的业务数据源。

查询类型

面板顶部「查询类型」下拉选择：

类型	说明	支持图表
属性数据（property）	查询设备物模型属性值，支持最新值和历史时序	全部图表
设备状态统计（deviceStatus）	统计在线 / 离线 / 未激活设备数及比率	指标卡、表格
设备信息（deviceInfo）	获取设备元数据（信号强度、网络类型等）	设备详情、对比视图

数据模式（传统设备模式）

属性数据支持两种数据模式，通过「数据模式」切换：

模式	说明	典型场景
最新值（轮询）	读取设备属性 Shadow 缓存，返回当前最新值，支持轮询刷新	实时仪表盘、设备状态卡片
历史时序	按时间范围查询属性历史记录，支持后端/前端分桶聚合	趋势折线图、柱状对比图

最新值模式返回 [{ name, value }] 格式，历史时序返回 [{ time, prop1, prop2 }] 格式。

历史时序聚合粒度（仅限 log 模式）：

粒度	示例	说明
分时	`10m`、`1h`	短时间范围推荐
按天	按天聚合	7~30 天趋势
按周	按周聚合	长期趋势
按月	按月聚合	年度对比

时间范围快捷选项：1 小时 / 6 小时 / 24 小时 / 7 天 / 30 天 / 自定义。自定义模式下支持日期时间选择器。

聚合函数（历史时序）：最新值（last）/ 平均值（avg）/ 最大值（max）/ 最小值（min）/ 累计（sum）。

统计范围与设备选择

区域过滤：下拉选择区域（支持多选），设备列表按区域精确过滤。选择「按区域」时系统自动展开子区域设备。

产品：下拉选择已创建的产品。若当前区域无产品则回退到全量产品列表。

设备：支持按名称或别名搜索（远程搜索），单选或多选取决于图表类型。

属性字段选择

选择产品后自动加载该产品物模型的属性列表，按标识符（identifier）展示：

勾选需要查询的属性（支持多选）
系统自动提取属性单位，填充图表坐标轴标签和后缀
部分图表类型（饼图最新值、胶囊图、单系列折线图）仅支持单选

属性选择后自动触发静默预览，右侧图表实时渲染。

模板聚合模式（高级）

当「数据模式」选择非「传统设备模式」时，支持以下聚合模式：

模式	说明	配置项
单值统计卡（singleStat）	单一指标数值展示	属性字段 + 时间范围 + 聚合函数
趋势图（trend）	时间序列趋势	属性字段 + 时间范围 + 聚合粒度 + 分组维度
聚合统计（aggregate）	排行/占比	属性字段 + 时间范围 + 分组维度（区域/设备）+ 排序（升/降）+ TopN

字段来源可选「按产品」（从具体产品的物模型属性中选）或「通用物模型字段」（跨产品通用属性，推荐用于多产品聚合场景）。

限制：历史时序最大 300 个时间桶，超限自动校正聚合粒度或时间范围。最大数据获取量 1000 条。

数据视图

系统根据查询条件自动推导输出视图，无需手动选择：

查询条件	输出视图	列结构
1 个设备 + N 个属性	单设备多属性	宽表，列为属性名
N 个设备 + 1 个属性	多设备同属性	宽表，列为设备名

输出字段（设备状态 / 设备信息）

设备状态统计可选择以下指标：总设备数、在线/离线/未激活设备数、在线率/离线率/未激活率、系统运行天数/小时、系统启动时间。

设备信息查询选择产品 → 选择设备 → 自动加载该设备的信号强度、网络类型等字段，勾选后渲染。

图表兼容矩阵

不同图表类型对 IoT 查询类型的支持不同，系统会自动灰选不兼容的选项：

图表	属性数据	属性最新值	属性历史时序	设备状态统计	设备信息
折线图（LineCommon / LineGradients / LineGradientSingle / LineLinearSingle）	✅	❌	✅	❌	❌
柱状图（BarCommon / BarCrossrange / BarLine）	✅	✅	✅	✅	❌
饼图（PieCircle / PieCommon）	✅	✅	❌	✅	❌
胶囊柱图（CapsuleChart / CapsuleCommon）	✅	✅	❌	✅	✅
表格（TablesBasic / TableScrollBoard）	✅	✅	✅	✅	✅
滚动列表（TableList）	✅	✅	✅	❌	✅
文字组件（TextCommon） / 翻牌器（FlipperNumber）	✅	✅	✅	✅	✅
雷达图（Radar）	✅	✅	✅	✅	❌
进度图（Process） / 水球图（WaterPolo）	✅	✅	✅	✅	❌
数字/表盘/倒计时（Number / Dial / CountDown）	✅	✅	✅	✅	✅

选中不兼容组合时，查询类型下拉和模式单选会自动灰选禁用项，并显示提示文字。

动态数据（高级/通用 API）

适用于通用 HTTP 接口、公共数据池或非 IoT 场景的数据。选中后首先选择「获取途径」：

获取途径	说明	配置项
从公共数据池	引用已创建的数据集，分组过滤	选择分组 → 选择数据集 → 动态参数（API 传参） → 预览返回数据
自定义专属请求	临时 HTTP 请求，仅对当前组件生效	请求类型（GET/POST/PUT/PATCH/DELETE） → 接口地址

两种途径共用的后续配置：

配置区	说明
启用轮询	开关 + 间隔数值 + 单位（秒 / 分钟）
数据提取与过滤	可视化条件过滤（字段选择 + 匹配规则 + 目标值）+ JS 高级脚本过滤
字段绑定映射	维度（X 轴/分类）下拉 + 指标（Y 轴/数值）多选下拉
执行请求并渲染图表	手动触发数据拉取和图表刷新按钮

面板顶部有警告提示：「动态数据适用于通用 HTTP 接口、公共数据池或非 IoT 场景的系统级指标。强业务语义场景建议优先使用『IoT 设备』。」

标准数据面板

预置 IoT 组件和增强组合容器使用标准数据面板（ChartData），提供三种数据源类型：

类型	适用场景
静态数据	固定 Mock 数据，JSON 编辑器直接编辑
动态请求	对接外部 HTTP API，支持 GET/POST/PUT/PATCH
公共接口	全局共享数据源，一处配置多处复用

IoT 设备数据绑定仅在简化数据面板中可用（见 5.2.2）。

静态数据

直接编辑 ECharts dataset 格式的 JSON 数据：{ dimensions: string[], source: any[][] }。

动态请求

配置项	说明
请求地址	完整的 API URL
请求方法	GET / POST / PUT / PATCH
请求头（Headers）	自定义 HTTP Header
请求参数（Params）	URL 查询参数
请求体（Body）	POST 请求体 JSON
轮询间隔	组件级刷新间隔（秒）

公共接口

添加方式：页面配置 → 全局请求配置 → 新建条目。引用时在「公共接口」类型下拉选择。一处修改、全局生效。

字段映射

适用面板：简化面板（动态数据模式） / 标准面板（动态请求、设备属性模式）

数据加载后，配置字段映射告知图表如何读取数据。简化面板在「数据提取与过滤」下方展示「维度」和「指标」两个下拉选择器：

映射模式	适用图表	配置
XY 模式	折线图、柱状图、散点图	X 轴字段（维度）+ Y 轴字段（指标，可多选）
nameValue 模式	饼图、漏斗图	名称字段 + 值字段（单选）

系统根据图表类型智能推导默认映射，IoT 数据自动附带元数据填充坐标轴标签。部分图表仅支持单指标（最多选 1 个），面板会给出提示。

适配器系统

适用面板：全部（所有图表组件自动匹配）

数据加载后，系统按图表类型自动匹配专用适配器，将原始数据转换为 ECharts 可用的配置。自定义组件封装时可指定适配器类型，实例化时自动绑定：

适配器	适用图表
柱状图适配器	柱状图、柱状图&折线图
横向柱适配器	横向柱状图
折线图适配器	折线图、面积图、散点图
饼图适配器	饼图、环形图、漏斗图
雷达图适配器	雷达图
默认适配器	未注册图表兜底

自动刷新机制

适用面板：全部（动态数据源模式）。静态数据无需刷新。

层级	位置	说明
全局	页面配置 → 全局请求配置	所有动态数据源组件默认生效
组件	组件「数据」Tab → 启用轮询	优先级高于全局，可设为 0 不刷新。简化面板为开关 + 间隔（秒/分钟），标准面板为间隔下拉

保护机制：配置变更递增版本号，过期响应自动丢弃；编辑模式下预览开关开启时跳过真实请求。

JS 过滤脚本

适用面板：简化面板（动态数据模式 →「选项2：JS 高级脚本过滤」）/ 标准面板（动态请求模式）

支持自定义 JavaScript 脚本在数据返回后、渲染前动态转换数据格式。

简化面板中位于「数据提取与过滤」区域内，提供开关 + 代码编辑区（textarea），预设默认过滤函数骨架。首选 Worker 线程池执行（超时 3s），降级至白名单 Proxy 沙箱（40 个安全全局对象）。执行前需通过安全策略检查。

组合组件数据绑定

适用组件：增强组合容器（Groups），使用 SimplifiedDataPanel 的 CompositeAdapterEditor。

增强组合容器使用组合适配器：

概念	说明
数据源（DataSource）	顶层统一数据源（dynamic / iot / static）
输出口（DataOutput）	identity / pick / aggregate / toDataset / script
子组件绑定（ChildBinding）	输出映射到子组件属性路径

数据源密码安全

不属于数据绑定面板，在「数据源管理」中生效（详见 2.6 节）。

编辑数据源连接信息时，密码类字段以 *** 脱敏回显。未修改时后端自动保留原始值。

事件与交互

适用组件：图表组件、信息展示组件（标准面板）。组件编辑器下「事件」Tab 隐藏。分组组件的「事件」Tab 不包含数据联动。

事件配置位于右侧面板的「事件」标签页，面板顶部显示当前组件 ID。按功能分为三个可折叠区域：

组件交互

适用组件：具有交互事件能力的输入组件（Tab 切换、Select、DatePicker、Input 等），选中该类组件后「事件」Tab 中出现「组件交互」折叠区。非交互组件不显示此项。

可视化配置组件间的数据联动关系，无需编写代码。点击「新增」按钮添加一条联动规则，每条规则对应一个目标组件：

配置字段：

字段	说明
触发事件	下拉选择源组件的交互事件类型（组件自身定义的 change / click 等）
绑定（目标组件）	下拉选择画布上符合条件的组件（排除自身、静态组件、分组组件），仅列出具有动态请求和数据池的组件。已被其他规则绑定的目标灰度不可再选
查询结果	参考表，展示触发事件后源组件输出的数据字段及说明
关联目标请求参数	将目标组件的请求 Params 和 Header 字段映射到源组件的输出字段，下拉选择对应关系

联动执行流程：源组件值变化 → 匹配 interactEvents → 修改目标组件 requestParams 中的 Params / Header → 自动触发目标组件数据拉取。

基础事件配置

适用面板：标准面板 →「事件」Tab →「基础事件配置」折叠区。

为组件的鼠标交互编写 JavaScript 响应函数。点击「编辑」按钮打开 Monaco 编辑器弹窗（1200×700），按事件类型分 Tab 编辑：

事件	函数签名	触发时机
`click`	`async function click(mouseEvent, components) { }`	鼠标单击组件
`dblclick`	`async function dblclick(mouseEvent, components) { }`	鼠标双击组件
`mouseenter`	`async function mouseenter(mouseEvent, components) { }`	鼠标移入组件区域
`mouseleave`	`async function mouseleave(mouseEvent, components) { }`	鼠标移出组件区域

参数说明：

参数	说明
`mouseEvent`	原生鼠标事件对象
`components`	画布上所有组件的集合对象，通过 `components[id]` 访问任意组件实例

编辑器功能：

Monaco Editor 代码编辑，支持 JavaScript 语法高亮
右侧面板：验证结果（语法校验错误信息、错误函数名、堆栈）+ 变量说明（参数文档）
保存前自动进行语法校验（使用 AsyncFunction 构造器），语法错误时拒绝保存并提示

提示：ECharts 图表组件会拦截部分鼠标事件，若基础事件无响应请检查图表配置。

高级事件配置

适用面板：标准面板 →「事件」Tab →「高级事件配置」折叠区。

为 Vue 组件生命周期编写响应函数，弹窗标题为「高级事件编辑器（配合源码使用）」：

事件	函数签名	触发时机
`vnodeBeforeMount`	`async function vnodeBeforeMount(e, components, echarts, node_modules) { }`	组件渲染前
`vnodeMounted`	`async function vnodeMounted(e, components, echarts, node_modules) { }`	组件渲染后

参数说明：

参数	说明
`e`	生命周期事件上下文
`components`	画布组件集合
`echarts`	ECharts 库实例，可直接调用其 API
`node_modules`	内置第三方模块集合

编辑器功能：

Monaco Editor + 分 Tab 编辑 + 语法校验（同基础事件）
内置案例模板：自定义 tooltip、地图自动轮播等（通过 importTemplate 注入）
各 Tab 顶部提示该事件的使用要点

事件安全策略

组件编辑模式下事件配置不可见。

所有事件代码在白名单 Proxy 沙箱中执行：

允许：JSON、Math、Date、Promise、console、Array、Object、String、Number、Boolean 等 40 个安全全局对象
禁止访问：window、document、eval、fetch、localStorage、XMLHttpRequest、WebSocket、setTimeout、setInterval 等浏览器 API
执行前通过动态 JS 安全策略检查，被禁用时打印警告并跳过

自定义组件

编辑器支持将画布上的单个组件或多个组件组成的分组封装为可复用的自定义组件，保存后在左侧面板「自定义」分类中管理和拖拽使用。

单组件封装

适用场景：直接封装画布上已配置好样式、数据、事件的单个图表或装饰组件。

操作步骤：

画布上选中单个组件
右键 → 选择「保存为我的组件」
弹出「封装为自定义组件」对话框

字段	说明
组件名称	自动填入组件原标题，可修改
组件分类	普通用户仅「自定义组件」；管理员可见预设分类（指标/状态/对比/通用/容器等）
适配器类型	默认「自动匹配」，可手动指定（柱状图/折线图/饼图/雷达图/默认等）
暴露属性	勾选哪些配置区块对使用者开放：标题/名称、尺寸、样式/滤镜、图表配置（仅单组件）
封面图	系统自动截取画布快照，点击可手动上传替换（≤2MB）

点击「确定」→ 系统自动脱敏实例、上传封面、保存到后端 → 组件出现在左侧「自定义」列表

覆盖更新：若组件来源于已有自定义模板（带 templateId），右键时会先弹出选择框——「覆盖更新」替换原模板，或「另存为新组件」创建独立副本。

分组组件封装

适用场景：将多个组件先组合为分组，整体作为一个可复用的组件块（如「标题+图表+装饰边框」的组合面板）。

操作步骤：

第一步：创建分组

多选组件后，有两种方式创建分组：

方式	操作
键盘	`Ctrl+G`
右键	多选组件 → 右键 →「创建分组」

分组创建后，画布上显示为一个整体容器，子组件在容器内保持相对位置。

第二步：封装分组

选中整个分组
右键 → 选择「保存为我的组件」
弹出「封装为自定义组件」对话框

分组封装与单组件封装的差异：

差异项	单组件	分组组件
对话框标题	封装为自定义组件	封装为自定义组件
暴露属性选项	标题/名称、尺寸、样式/滤镜、图表配置	标题/名称、尺寸、样式/滤镜（无图表配置）
适配器类型	图表适配器列表	组合适配器（自动分发）、IoT 设备数据源、HTTP API 数据源
模板类型	`single_template`	`group_template`
脱敏方式	清空 id + 重置坐标	容器坐标重置为 0 + 递归脱敏子组件（保留组内相对坐标）

分组组件封装时自动注入组合适配器，实例化后在简化数据面板中使用 CompositeAdapterEditor 配置数据分发。

封装内部流程

每次封装，系统自动执行以下处理：

实例脱敏：清空 id（实例化时重新生成 UUID）、重置坐标为 0、数据源重置为静态、清除事件绑定、解锁并显示
注入元数据：标记 sourceType='custom' + templateId，推断简化数据模式（editMode），写入暴露属性白名单（exposedProps）和适配器类型
生成模板：生成 single_template 或 group_template 的模板 JSON
封面截图：调用 html2canvas 自动截取组件/分组快照并上传为封面

使用自定义组件

组件创建后，在左侧面板「自定义」分类中可看到个人组件库列表。

方式	操作
点击添加	单击组件项，自动添加到画布
拖拽添加	拖拽到画布指定位置

实例化时自动生成新 UUID，子组件 ID 同步更新。组件持有溯源标记 sourceType='custom' + templateId，后续可覆盖更新。

简化数据模式

根据组件类型自动决定数据配置面板的形态：

模式	`editMode`	适用类型
`none`	装饰、图标	无数据配置入口
`form`	信息、文本	表单字段编辑（SimplifiedDataPanel → FormEditor）
`table`	图表、表格	表格行列编辑器（SimplifiedDataPanel → TableEditor）
`composite`	分组组件	组合适配器配置（SimplifiedDataPanel → CompositeAdapterEditor）

自定义组件的数据绑定全部使用简化数据面板（详见 5.2 节）。

预览与发布

预览模式

模式	说明
`fit`（自适应）	等比例缩放，完整显示在视口内，保留黑边
`full`（全屏铺满）	等比例缩放铺满视口，可能裁剪
`scrollY`（纵向滚动）	宽度适配，超出高度纵向滚动
`scrollX`（横向滚动）	高度适配，超出宽度横向滚动

发布大屏

管理页面发布：大屏卡片 → 下拉菜单 →「发布」→ 生成公开链接。

编辑器内发布：顶部「发布」按钮 → 自动同步内容 → 发布 → 弹出链接窗。

未归属大屏（原关联项目已删除）无法发布，需先重新绑定项目。

取消发布

管理页面或编辑器内点击「取消发布」，关闭公开访问链接。

导入/导出

编辑器内导出

编辑器顶部「导出」按钮弹出导出对话框，提供三种格式：

JSON 导出

导出为 .goview.json 文件，包含画布全部组件数据和配置。支持两种背景图模式：

模式	说明	适用场景
URL 模式	背景图保留原始 URL 引用	在线环境，素材 URL 长期有效
Base64 模式	背景图内嵌为 Base64，自动压缩（≤300px，质量 40%）	离线迁移、分发，确保背景图不丢失

限制	说明
文件大小	≤ 50MB，超限界面提示
Schema 校验	同 JSON 导入
数据升级	导入时自动合并组件数据、升级版本补丁（旧版事件字段迁移、简化数据模式推断）

管理页面导入/导出

入口	操作
「导入大屏」按钮	选择 JSON 或 ZIP，系统自动检测重名并追加序号（如 `大屏 (1)`）
卡片下拉菜单 →「导出」	导出为 JSON 或 ZIP

模板管理页面（仅平台租户）同样支持以上操作。

快捷键参考

编辑操作

功能	Windows	Mac
保存	`Ctrl+S`	`⌘+S`
撤销	`Ctrl+Z`	`⌘+Z`
重做	`Ctrl+Shift+Z`	`⌘+Shift+Z`
复制	`Ctrl+C`	`⌘+C`
剪切	`Ctrl+X`	`⌘+X`
粘贴	`Ctrl+V`	`⌘+V`
删除	`Delete`	`⌘+Backspace`

组件操作

功能	快捷键
移动	`Ctrl+↑↓←→`
创建分组	`Ctrl+G`
解除分组	`Ctrl+Shift+G`
锁定	`Ctrl+L`
解除锁定	`Ctrl+Shift+L`
隐藏	`Ctrl+H`
显示	`Ctrl+Shift+H`
退出隔离编辑	`ESC`
防滚动	`空格键`（修饰）

注意事项

请勿刷新编辑器页面：状态在内存中，刷新丢失未保存改动
组件模式限制：仅显示「基础」分类组件，隐藏图层面板
IoT 数据限制：历史时序最大 300 个时间桶
SQL 只读：仅允许 SELECT/WITH/EXPLAIN
ZIP 导入 ≤50MB：超限提示减小体积
密码脱敏：数据源编辑时敏感字段 *** 回显
保存前同步远端：避免覆盖他人提交

更新日志

2026/6/25 17:06

查看所有更新日志

1a093-docs(快速开始): 新增组态大屏章节于 2026/6/25

物模型

AI交互

组态大屏