# dataBigScreen

**Repository Path**: timothy8/data-big-screen

## Basic Information

- **Project Name**: dataBigScreen
- **Description**: 可视化拖拽组装大屏
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-07-05
- **Last Updated**: 2022-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 初始化项目
```
npm install
```

### 运行开发环境
```
npm run dev
```

### 运行打包环境
```
npm run build
```
#### 命令行创建模板文件
```
npm run temp

```
### 组件开发说明
#### 目录结构
```
|-- CommonRegionMap  // 组件名称
    |-- README.md // 说明文件
    |-- ComponentConfig // 组件相关配置文件
        |   |-- componentData.json // 组件数据格式需求文件，
        |   |-- componentDesc.json // 组件具体配置信息；例：组件大小样式信息，组件相关事件信息
    |-- ComponentContent // 组件页面前台呈现
        |-- index.js  // 自定义方法
        |-- index.scss // 自定义样式文件
        |-- index.vue  // 主页面
```
#### 交互说明
- `componentDesc.json` 文件说明
    - ```
        {
            "componentName": "CommonRegionMap", // 组件名称
            "htmlDom": {                        // 预留组件可能需要的样式及DOM结构数据
                "width": 0,
                "height": 0,
                "top": 0,
                "left": 0,                  // 组件相关样式（预留）
                "backgroundColor": "",
                "textColor": "",
                "textFontSize": ""
            },
                                                // 当前组件所拥有的功能，例：放大、移动事件
                                                // 事件编码（编码规则依据丁昱添文档拟定）
            "ResponseAction": [
                {
                    "actionId": 100,                // 初始化数据
                    "actionName": "初始化数据",      // 事件描述（当前事件是什么功能）
                    "data": "object"                // 当前事件所需要的参数
                },
                {
                    "actionId": 200,                  // 修改更新页面DOM
                    "actionName": "修改当前组件DOM",
                    "data": "object"
                },
                {
                    "actionId": 300,                    // 自定义事件
                    "actionName": "自定义事件（地图移动）",
                    "data": "object"
                },
                {
                    "actionId": 301,
                    "actionName": "自定义事件（地图放大缩小）",
                    "data": "object"
                }  
            ]     
        }   
      ```
- 组件与系统交互
    - 接收事件
        - 通过`receive(val)`函数接收参数 `val`返回的是接收到的参数
            ```
             receive(val) {
                switch (val.actionId) {
                    case 100:                     // 通过系统返回的 actionId 来判断执行对应的函数（componentDesc.json）已经提前拟定系统已知对应编码对应的功能
                        this.mapMove(val)
                    break;
                    case 101:
                        this.mapZoom(val)
                    break;
                }
            },

            /**
              * 地图移动事件
              */
            mapMove(val) {
                console.log('地图移动', val);
                this.map.panBy(...val.data)
            }
            ```
    - 发送事件
        - 主要通过 `this.$emit('Send', params);` // ` Send ` 为关键字必填