# vue-svgEditor

**Repository Path**: wusyJava/vue-svg-editor

## Basic Information

- **Project Name**: vue-svgEditor
- **Description**: 一个功能强大的 SVG 可视化编辑器，支持拖拽式创建组态图、实时数据绑定、MQTT 协议集成等功能，适用于工业监控、物联网可视化、电力系统、水务系统等多种场景。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-10
- **Last Updated**: 2025-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Web SVG 组态编辑器

> 基于 Vue 3 + TypeScript 的企业级 SVG 组态可视化编辑器

一个功能强大的 SVG 可视化编辑器，支持拖拽式创建组态图、实时数据绑定、MQTT 协议集成等功能，适用于工业监控、物联网可视化、电力系统、水务系统等多种场景。

## ✨ 核心特性

### 🎨 丰富的组件支持
- **SVG 矢量组件** - 支持任意 SVG 图标和矢量图形
- **图片组件** - 支持 PNG、JPG、GIF 等格式
- **视频组件** - 支持 MP4 等视频格式
- **文本组件** - 支持富文本和多行文本
- **图表组件** - 支持折线图、柱状图、饼图等 ECharts 图表
- **绘制组件** - 支持直线、矩形、圆形等基础图形绘制
- **表格组件** - 支持数据表格展示

### 🖱️ 便捷的操作功能
- **拖拽式编辑** - 组件库拖拽即可添加
- **框选功能** - 支持框选多个组件，统一移动、删除等操作
- **多种选择模式** - 点击单个选择、框选批量选择
- **键盘快捷键** - 支持 Ctrl+C 复制、Delete 删除、方向键移动
- **右键菜单** - 支持复制、删除、图层调整等操作

### 🔌 实时数据集成
- **MQTT 协议支持** - 支持 MQTT 实时数据订阅和推送
- **数据驱动更新** - 组件属性可绑定动态数据
- **多点数据绑定** - 单个组件可绑定多个数据源
- **表达式支持** - 支持 JavaScript 表达式计算

### 🎯 专业的编辑功能
- **属性面板** - 可视化修改组件所有属性
- **画布配置** - 支持自定义画布大小、背景色
- **图层管理** - 支持组件置于顶层/底层、上移/下移
- **撤销重做** - 支持操作历史记录（规划中）
- **保存/加载** - 支持本地保存 JSON 配置和 SVG 导出

### 💻 技术栈
- **前端框架**：Vue 3.2+ (Composition API)
- **类型系统**：TypeScript
- **UI 框架**：Element Plus + Naive UI
- **构建工具**：Vite
- **样式预处理**：SCSS / Less
- **实时通信**：MQTT.js
- **图表库**：ECharts (vue-echarts)
- **状态管理**：Vue Reactivity
- **HTTP 客户端**：Axios
- **路由管理**：Vue Router 4

## 🚀 快速开始

### 环境要求
- Node.js >= 14.0
- npm >= 6.0 或 pnpm

### 安装依赖

```bash
# 克隆项目
git clone [repository-url]

# 进入项目目录
cd vue-web-svgeditor

# 安装依赖
npm install
# 或
pnpm install
```

### 启动开发服务器

```bash
npm run dev
# 或
pnpm dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
# 或
pnpm build
```

## 📖 使用指南

### 组件分类

编辑器提供了以下组件分类：

1. **📝 文本组件** - 文字、标签、标题等文本组件
2. **📦 常规组件** - 通用 SVG 图标和图形组件
3. **⚡ 电力组件** - 电力系统专用组件（变压器、开关、继电器等）
4. **✏️ 绘制组件** - 直线、矩形、圆形等绘制工具
5. **📊 图表组件** - ECharts 图表组件
6. **💧 水务组件** - 水务系统专用组件
7. **⛏️ 煤炭组件** - 煤炭工业专用组件

### 如何添加自定义组件

组件定义在 `public/json/InterfaceReturn.json` 文件中，添加新组件只需在该文件中新增一个对象。

#### 基础组件格式

```json
{
  "type": "CustomComponent",        // 组件唯一标识
  "title": "自定义组件",            // 组件显示名称
  "panel_class": "common",          // 左侧工具栏分类：common/text/power/draw/chart/water/coal
  "template": "<svg>...</svg>",     // SVG 模板代码
  "props": ["prop_data"],           // 组件属性
  "extend_attr": {                  // 扩展属性（右侧面板可编辑）
    "color": {
      "title": "颜色",
      "val": "#FF0000",
      "type": "colorinputbox"
    }
  },
  "create_type": "draggable",       // 创建方式：draggable（拖拽）或 draw（绘制）
  "priview_img": "/path/to/img.png" // 左侧工具栏预览图
}
```

#### SVG 模板示例

```vue
<!-- 简单 SVG 组件 -->
<path 
  :fill="prop_data.extend_attr.color.val" 
  d="M0,0 L100,100" 
/>

<!-- 图片组件 -->
<image 
  x="-33" 
  y="-33" 
  width="66" 
  height="66" 
  xlink:href="path/to/image.png" 
/>

<!-- 视频组件 -->
<foreignObject x="0" y="0" width="200" height="200">
  <video 
    x="0" 
    y="0" 
    width="200" 
    height="200" 
    :src="prop_data.extend_attr.videoSrc.val"
    controls
  ></video>
</foreignObject>
```

#### 扩展属性类型

- `colorinputbox` - 颜色选择器
- `textinputbox` - 文本输入框
- `textareainputbox` - 多行文本域
- `numberinputbox` - 数字输入框
- `select` - 下拉选择框
- `radiogroup` - 单选按钮组

### 如何操作

#### 基础操作
- **添加组件**：从左侧工具栏拖拽组件到画布
- **选择组件**：点击组件选中，选中后右侧显示属性面板
- **移动组件**：拖拽选中的组件
- **框选多个**：按住鼠标左键拖拽框选
- **复制组件**：选中组件后按 `Ctrl+C`
- **删除组件**：选中组件后按 `Delete`
- **移动组件**：选中组件后使用方向键 `↑↓←→`

#### 快捷键
- `Ctrl + C` - 复制组件
- `Delete` - 删除组件
- `Ctrl + →` - 置于顶层
- `Ctrl + ←` - 置于底层
- `Ctrl + ↑` - 上移一层
- `Ctrl + ↓` - 下移一层
- `↑↓←→` - 移动选中的组件

### MQTT 数据绑定

#### 配置 MQTT 主题

在组件属性中配置 `nodeKey`，该 key 将作为 MQTT 订阅的主题：

```javascript
// 组件数据示例
{
  nodeKey: "temperature001",  // MQTT 主题
  active: {
    active_color: {
      alarm: [{
        expression: { val: "value>50" },
        color: { val: "#FF0000" }
      }]
    }
  }
}
```

#### MQTT 消息格式

```json
{
  "temperature001": 25.5,
  "pressure001": 1013.2
}
```

编辑器会自动订阅配置的主题并更新组件状态。

## 🏗️ 项目结构

```
vue-web-svgeditor/
├── public/                 # 静态资源
│   ├── json/              # 组件配置文件
│   └── images/            # 图片资源
├── src/
│   ├── api/               # API 接口
│   ├── assets/            # 资源文件
│   ├── components/        # 组件
│   │   ├── LeftToolBar.vue      # 左侧工具栏
│   │   ├── RightToolBar.vue     # 右侧属性面板
│   │   ├── SvgEditor.vue        # SVG 编辑器
│   │   ├── SvgPrview.vue        # 预览组件
│   │   └── SvgDb/               # 数据库相关组件
│   ├── view/              # 页面
│   │   └── main.vue       # 主页面
│   ├── router/            # 路由配置
│   ├── utils/             # 工具函数
│   └── main.ts            # 入口文件
├── package.json
└── vite.config.ts         # Vite 配置
```



## 🎯 主要功能

### 组件管理
- 支持多种组件类型：SVG、图片、视频、图表、文本、表格等
- 组件可拖拽、缩放、旋转
- 支持组件分组和批量操作
- 图层管理（置于顶层/底层、上移/下移）

### 数据绑定
- 支持 MQTT 实时数据绑定
- 多点数据绑定
- 支持 JavaScript 表达式
- 数据驱动组件状态变化

### 编辑器功能
- 框选多个组件统一操作
- 属性面板可视化编辑
- 快捷键操作
- 右键菜单
- 复制粘贴
- 撤销重做（规划中）

### 保存与导出
- JSON 配置保存
- SVG 导出
- 数据库持久化
- 本地文件下载

## 📝 开发者文档

### 添加新组件类型

1. 在 `public/json/InterfaceReturn.json` 中添加组件定义
2. 根据组件类型，在对应的分类中添加
3. 配置 `panel_class` 指定左侧工具栏分类
4. 配置 `extend_attr` 定义可编辑属性

### 自定义属性编辑器

组件扩展属性支持以下类型：
- `colorinputbox` - 颜色选择器
- `textinputbox` - 文本输入框
- `textareainputbox` - 多行文本域
- `numberinputbox` - 数字输入框
- `select` - 下拉选择
- `radiogroup` - 单选按钮

### 集成后端

项目已集成基础 API，修改 `src/api/business.js` 中的接口地址即可连接后端。

### 自定义主题

修改 `src/components/SvgEditor.vue` 中的样式部分，可自定义编辑器外观。

## 🐛 常见问题

### Q: 如何添加自定义组件？
A: 在 `public/json/InterfaceReturn.json` 中添加组件定义，配置模板和属性即可。

### Q: 组件不显示怎么办？
A: 检查 SVG 代码是否正确转义了双引号，template 中的双引号需要用 `\"` 表示。

### Q: 如何调整 SVG 组件的中心点？
A: 在 template 中添加 `transform="translate(-x, -y)"` 调整，x 和 y 为组件宽度和高度的一半。

### Q: 支持哪些浏览器？
A: 支持 Chrome、Firefox、Edge 等现代浏览器，建议使用最新版本。



## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

### 如何贡献
1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 License

本项目采用 [MIT License](http://opensource.org/licenses/MIT) 开源协议。

## 🙏 致谢

- [vue-webtopo-svgeditor](https://github.com/yaolunmao/vue-webtopo-svgeditor) - 原始项目参考
- [Element Plus](https://element-plus.org/) - UI 组件库
- [Naive UI](https://www.naiveui.com/) - 辅助 UI 组件
- [ECharts](https://echarts.apache.org/) - 图表库
- [MQTT.js](https://github.com/mqttjs/MQTT.js) - MQTT 客户端

## 📞 联系方式

如有问题或建议，欢迎提交 Issue 或联系维护团队。