基于 Vue 2 与 AntV X6 实现的 SVG 可视化组态编辑器，支持以组件形式嵌入自有系统。开发者只需按照规范对接数据接口，即可获得完整的组态编辑与运行时渲染能力，显著降低二次开发成本。
在线预览
预览部署于 GitHub Pages，未使用代理可能加载较慢，请耐心等待。
项目核心优势
功能完整
覆盖组态软件核心需求，包括图元编辑、数据绑定、事件响应、动画控制、告警提示、图表集成等。
开箱即用
在 Vue 项目中引入组件并实现标准 API 后即可直接使用，无需从零开发编辑器核心功能。
学习成本低
自定义图元即为标准的 SVG 文件，放置于指定目录后编辑器会自动加载，无需额外配置。
易于集成
- 已发布至 NPM 仓库，支持
npm install big-webtopo 安装。
- 提供
<Webtopo>（编辑模式）和 <Preview>（运行时渲染模式）两个独立组件。
- 支持传入自定义业务组件、订阅内部事件。
高度可扩展
- 自定义图元：将 SVG 或图片放入
public/webtopo/custom/ 目录即可自动加载。
- 自定义样式：可为不同图元类型追加专属的样式属性。
- 图元上传：若实现
uploadFile 接口，用户可直接拖拽本地文件上传至服务器。
功能特性详解
图元与装饰
内置超过 100 种基础图元与装饰元素（部分素材来源于网络，如有版权问题请联系移除）。支持通过拖拽上传自定义 SVG/IMG 图元，并通过 API 自动保存至服务器。
布局与操作
- 工具栏提供对齐、分布、图层顺序调整、撤销重做、锁定隐藏等基础操作。
- 内置高级布局工具：水平并列、垂直并列、田字格（可用于快速构建简易表格）。
- 右键菜单集成了管道绘制、节点操作、模式切换等便捷功能。
操作模式：
- 严格框选：仅完全包含在图元内的元素才会被选中。
- 自由模式（空格键）：临时关闭磁力吸附与对齐参考线，便于进行精细调整。
- 画布拖拽模式（Alt 键）：按住 Alt 键可快速拖拽平移整个画布视图。
数据绑定
- 文本框支持绑定实时数据，并可指定数据写入的目标位置、保留小数位数、设置单位缩放系数（例如将 1000000 显示为 1MW）。
- 支持绑定系统当前时间，并自定义日期时间显示格式。
动画与状态控制
- 样式绑定：基于布尔表达式动态切换图元的预设样式快照。
- 动画效果：支持闪烁、旋转等基础动画，并可叠加多个动画效果。
- 进度效果：通过公式返回 0~1 的值，控制进度条在上下左右任意方向的填充。
- 位移动画：根据实际位移比例驱动图元位置变化。
- 组合动画：支持如旋转与位移同步执行的复杂动画组合。
事件系统
所有图元均支持绑定左键单击、右键单击、鼠标悬浮事件，可触发以下行为：
- 设置或显示数据（支持通过按钮或输入框进行交互）
- 内部图纸跳转（钻取）
- 打开外部链接
显示内容可以是静态文本、动态变量值或状态映射（例如将数值 0 映射为文本“关闭”）。
告警机制
- 支持为数据点配置上限、下限，触发越限告警。
- 告警信息以底部滚动横幅、声音提示、侧边折叠面板的形式自动展示，无需额外开发告警展示组件。
- 用户可单独关闭某条告警的声音提示或滚动显示。
图表与历史数据
- 内置折线图等常用图表组件，支持自定义配色、标题、坐标轴样式。
- 右键点击已绑定数据点的图元，可查看该点的历史数据曲线与详细数值，便于进行故障排查与趋势分析。
管道与连线
支持绘制电线、管道、自由线条等连接线，并可快速拖拽图元使其自动与已有管道进行关联。
快速接入指南
安装
通过 NPM 安装核心组件包：
npm install big-webtopo
引入编辑器组件
在 Vue 组件中引入并使用编辑器：
<template>
<div id="app">
<Webtopo :webtopoAPI="webAPI" />
</div>
</template>
<script>
import * as webAPI from './api/index.js';
export default {
name: 'App',
data() {
return { webAPI };
}
};
</script>
API 接口说明
组件依赖以下接口实现与后端的数据交互，需要开发者按规范实现：
webtopoAPI: {
getCaptcha: ({ mps, startTime, endTime }) => {}, // 查询历史数据
getPoints: ({ page, limit }) => {}, // 获取点位列表
getAttrs: ({ mpId, consId, readAndWriteVar }) => {}, // 获取遥信/遥测属性
saveOrUpdate: ({ cells, points, graph }) => {}, // 保存图纸
getJSONById: (id) => {}, // 根据 ID 加载图纸
getImages: () => {}, // 获取已上传图元
uploadFile: (file) => {}, // 上传图元
listNotPage: ({ consId, notSearchId }) => {}, // 获取图纸列表（用于跳转）
getMpAndMstypeNames: (mpAttrs) => {}, // 获取点位最新名称
setData: (id, mpId, attrId, value) => {} // 向设备写入数据
}
运行时渲染（Preview 模式）
<Preview> 组件用于在生产环境展示已保存的图纸，支持 WebSocket 或轮询等多种数据推送方式。
<template>
<preview
:svgId="id"
:webtopoAPI="webtopoAPI"
:isConnect="isConnect"
ref="preview"
@register="register"
/>
</template>
<script>
import * as webtopoAPI from '@/api/webtopo/index';
import { getToken } from '@/utils/token-util';
export default {
data() {
return {
id: this.$route.query.id,
webtopoAPI,
isConnect: false
};
},
created() {
this.$socket.connect();
},
methods: {
register(pointList) {
this.$socket.emit('register', {
code: getToken(),
points: pointList
});
}
},
sockets: {
connect() {
this.isConnect = true;
this.$socket.emit('register', {
code: getToken(),
points: this.$refs.preview.getPointList()
});
},
disconnect() {
this.isConnect = false;
},
data(data) {
this.$refs.preview.changeData(data);
}
},
beforeDestroy() {
this.$socket.disconnect();
}
};
</script>
关键方法：
getPointList(): 获取当前图纸所需订阅的所有数据点列表。changeData(data): 接收并更新实时推送的数据。
权限控制
在保存图纸时，可以附加权限标识（例如 role:admin）。后端可通过 Shiro、Spring Security 等权限框架或自定义过滤器校验当前用户是否具备访问该图纸的权限。
项目源码
项目已开源，可通过 Gitee 获取：https://gitee.com/huohuo0408/webtopo
发表于 5 小时前
|
查看: 1|
回复: 0
