# 新版组态

**Repository Path**: tmgb/new-configuration

## Basic Information

- **Project Name**: 新版组态
- **Description**: 一个基于 Vue3 的 web 组态引擎库，主要用于创建交互式的可视化界面和大屏项目。

  核心架构

  主要组件：
  - MtEdit: 编辑器组件，提供拖拽设计界面
  - MtDzr: 拖拽缩放旋转组件，负责元素的交互操作
  - MtPreview: 预览组件，用于展示设计结果

- **Primary Language**: Unknown
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-08-09
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# maotu-webtopo

基于 vue3 的 web 组态引擎库

探索将已有 svg 文件转为自由缩放图形库的解决方案，也可用作低代码大屏项目开发

## 说明

此开源版本的代码源自于 [maotu 插件版](https://www.npmjs.com/package/maotu) 0.3.1 版本，与插件版的差异请查阅插件版的 readme。

## 使用文档

请参考：[http://mt.yaolm.top](http://mt.yaolm.top)


  项目概述

  - 名称: MaoTu (猫图)
  - 版本: 0.3.1
  - 类型: Vue3 组态/可视化编辑器库
  - 用途: Web 组态引擎、低代码大屏项目开发、SVG 图形库

  技术栈

  核心框架:
  - Vue 3.3.4 + TypeScript
  - Pinia (状态管理)
  - Vue Router (路由)
  - Element Plus (UI 组件库)

  可视化相关:
  - ECharts 5.4.3 + Vue-ECharts (图表)
  - HTML2Canvas (截图)
  - Canvg (Canvas SVG 渲染)

  开发工具:
  - Vite 4.4.11 (构建工具)
  - UnoCSS (原子化CSS)
  - Vitest (测试)
  - ACE Editor (代码编辑器)

  项目架构

  核心组件:
  1. mt-edit - 主编辑器组件
    - 拖拽画布 (drag-canvas)
    - 渲染核心 (render-core)
    - 属性面板、数据绑定配置
    - 上下文菜单、工具栏
  2. mt-preview - 预览组件
    - 自适应屏幕显示
    - 水印支持
    - 实时数据渲染
  3. mt-dzr - 拖拽调整器组件
    - 元素大小调整
    - 旋转控制

  功能模块:
  - Custom Components: 30+ 自定义组件 (图表、按钮、表格等)
  - WebSocket: 实时数据通信 (websocket-pool.ts)
  - 性能监控: 性能监控面板
  - 数据绑定: 动态数据绑定系统
  - 导入导出: JSON 配置导入导出

  构建配置

  - 支持库模式打包 (UMD + ES)
  - 外部化 Vue、Pinia 依赖
  - TypeScript 类型定义生成
  - SVG 图标优化

  特色功能

  1. 可视化编辑: 拖拽式组态编辑器
  2. 实时数据: WebSocket 实时数据更新
  3. SVG 支持: 将 SVG 转为可缩放图形库
  4. 组件丰富: 内置 30+ 业务组件
  5. Node-RED 集成: 与 Node-RED 交互的本地组态实现

  这是一个功能完整的工业组态/可视化编辑平台，适合构建监控大屏、数据可视化应用。