# Vuescada

**Repository Path**: sun_gs/scada

## Basic Information

- **Project Name**: Vuescada
- **Description**: 一款轻量级、高性能、高自定义性的组态式低代码平台。
Vite + Vue3 + Typescript
不依赖任何拖拽插件
适合二次开发
组件化拖拽
拖拽搭建
拖拽吸附
网格吸附
标尺
辅助线吸附
...
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-15
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一款基于Vite + Vue3 + TS组态数据大屏低代码平台

## 简介

一款功能强大、轻量级、自定义性高、适合学习、参考、二开的数据大屏低代码平台。

体验地址：[点击访问](http://47.94.175.177/scada/)

- [x] Vite + Vue3 + TS + Pinia + VueJsx + VueRouter + Sass + ECharts
- [x] 功能强大，组件属性与状态双向绑定
- [x] 轻量级，无不必要的插件，不臃肿
- [x] 自定义性高，样式、逻辑底层手动实现，拒绝过度封装，适合二开
- [x] JSON格式驱动，便于存储
- [x] 三大模块：物料区、渲染器、设置器
- [x] 物料拖拽到渲染器，生成组件，支持多物料组合生成
- [x] 组件无限分组嵌套
- [x] 组件图层结构树管理，可拖拽移动层级与父子关系
- [x] 组件式搭建，渲染器任何内容都是组件，包括页面
- [x] 组件拖拽移动、方向键移动、拖拽吸附线、自定义吸附位置、吸附开关、拖拽设置大小
- [x] 组件选中，设置器设置布局、属性、状态、数据、事件、监听
- [x] 组件属性与状态进行JS表达式联动，状态变更自动更新属性
- [x] 组件定义数据请求，支持前后JS处理器
- [x] 组件定义动作，由事件触发多动作，支持并发或顺序执行，支持前后JS处理器
- [x] 组件定义监听，状态变更执行动作
- [x] 支持用户封装组件为模版，方便复用
- [x] 支持脱离于画布的组件（如：对话框）
- [x] 预览，可设置适配方式
- [x] 菜单栏
- [x] 骨架，物料拖入，自动布局
- [x] 操作队列栈，撤销、重做
- [x] 键盘快捷键
- [x] 画布平移
- [x] 画布缩放
- [x] 组件框选，支持正框选全包裹选中，反框选进入选中
- [x] 标尺，开关选项
- [x] 辅助线，开关选项
- [x] 网格线，开关选项
- [x] 控制台日志、命令输入执行，并支持动作触发命令输入执行
- [x] 自定义主色调

### Todos

- [ ] 基本物料完善，如：图片、视频、内嵌网页、按钮、输入框、选择器等（与《文本》类似，没有难度可自行实现）
- [ ] 完全ECharts组件配置项（太多啦，暂实现一部分）
- [ ] 地图组件
- [ ] 3D模型组件

## 系统概念

顶部为菜单栏

最左侧为侧边栏

左侧为物料区

中间为渲染器

右侧为设置器

整个渲染器内容都由一个JSON格式的数据所驱动，该JSON数据称为`schema`。

由于是组件式搭建，任何处于根目录下的组件，会被视为根组件。每点击根组件时，渲染器就只会渲染该组件下的内容。

## 操作说明

### 组件生成

- 侧边栏选择资产。
- 物料区拖拽物料至画布，会生成组件。

### 组件绑定状态

以文本组件为例。

- 拖拽一个文本组件，并在设置器中切换到**状态**
- 添加一个状态`state1: "abc"`
- 设置器中切换到**属性**
- 点击内容输入框右边的图标，键入 `state.state1`
- 此时内容会被覆盖为设置的状态值
- 每个组件的属性与状态都为响应式的，每当状态发生变化，将会自动更新属性
- 每个组件的属性、状态表达式，以及各种处理器函数，都可以访问到自身或根组件或其它组件。

### 组件请求数据

以文本组件为例。

- 拖拽一个文本组件，并在设置器中切换到**数据**
- 添加一个数据，并设置对应的接口参数配置，请求标头、请求参数均支持状态表达式
- 请求前后可进行一些js代码处理，请求前如果返回值为**假**，则会停止请求
- 请求后处理代码用于赋值给某些状态，response为响应体
- 数据源响应体在保存时，会被清空

### 组件添加事件

- 选中组件，并在设置器中切换到**事件**
- 动作栏添加一个动作，选择想要触发的动作类型
- 执行动作前后可进行一些js代码处理，执行动作前如果返回值为**假**，则会停止触发，支持Promise返回值
- 事件栏中可在想要触发的时机下，勾选相应的动作，可以设置并发或顺序执行，顺序执行需要Promise返回值

### 组件封装为模版

将一个组件保存为模版，方便复用。

- 自行拼装想要复用的一个组件
- 设置器中**基础**可以设置**嵌套**属性，修改该组件是否要显示子组件
- 右键，制作模版，就可以在侧边栏的**资产**中看到该模版

#### 高级用法

为了将自己封装的组件就像是一个物料一样，就需要将**嵌套**属性关闭掉。

然后通过自定义属性、自定义事件，来将组件的属性值传递给子组件。

子组件**属性**设置表达式为`parent.props.xxx`，可以将自定义组件的自定义属性传递给子组件。

子组件**事件**的动作栏，处理器中通过`emits("自定义组件的自定义事件key", 传参（payload）)`来触发自定义组件的自定义事件。

### 控制台

该系统会将控制台的打印内容显示在客户端中，可以在控制台中看到当前系统运行的状态，也方便用户调试某些内容，并且暴露了一些方法允许在控制台调用。

键盘按下"`"键呼出控制台。

键盘按下"esc"键关闭控制台。

控制台键入命令可以出触发一些操作，如：`moveUp`将当前选中组件向上移动1px。

## 版权与使用声明

本项目源码采用 **MIT License** 开源，详情请见 LICENSE 文件。

在此基础上，您必须遵守以下条款：

1. **署名要求**：任何使用、复制、转载、分发本项目的全部或部分代码时，**必须**在显著位置保留原作者的版权信息（包括但不限于：原作者姓名、源代码链接）。
2. **学习与非商业使用**：本项目**仅可用于个人学习、研究和非商业目的**。
3. **商业使用授权**：**任何具有盈利性质（包括但不限于商业项目、付费服务、内部分销）的使用场景，必须事先获得作者的明确书面授权**。未经授权，不得将本项目用于任何商业用途。
4. **商业合作**：欢迎进行商业合作、定制开发、技术咨询等，请通过以下方式联系作者：
   - **邮箱**: 1035877660@qq.com
   - **微信**: y13203888838