## 准备

- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
- [Vue-Router](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用

## 目录结构及重要文件说明

### 目录结构

此项目大致结构如下

```txt
.
├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── logics # 逻辑
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   └── views # 页面
├── test # 测试
│   └── server # 测试用到的服务
│       ├── api # 测试服务器
│       ├── upload # 测试上传服务器
│       └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
```

### 配置文件

#### 项目页面目录说明

```
.
├── src
│   └── views
│       ├── alarm                         // 告警管理
│       │   ├── config                    // 告警配置
│       │   ├── contacts                  // 告警联系人
│       │   └── log                       // 告警记录
│       ├── camera                        // 视频管理
│       │   ├── manage                    // 视频配置
│       │   └── streaming                 // 流媒体配置
│       ├── common                        // 公共
│       │   └── organizationIdTree        // 组织树
│       ├── configuration                 // 组态
│       │   └── center                    // 组态中心
│       ├── dashboard                     // 仪表盘
│       │   └── workbench                 // 首页
│       ├── device                        // 设备管理
│       │   ├── list                      // 设备列表
│       │   ├── localtion                 // 地理位置
│       │   └── profiles                  // 产品
│       ├── message                       // 消息管理
│       │   ├── config                    // 消息配置
│       │   ├── log                       // 消息记录
│       │   └── template                  // 消息模版
│       ├── notice                        // 平台通知
│       │   ├── manager                   // 通知管理
│       │   └── myNotices                 // 我的通知
│       ├── operation 					  				// 运维管理
│       │   ├── onlinerecord 							// 上下线记录
│       │   └── ota												// OTA升级
│       ├── report 											  // 报表管理
│       │   ├── config 										// 报表配置
│       │   └── export 										// 报表导出
│       ├── rule 													// 规则引擎
│       │   ├── dataFlow 									// 数据流转
│       │   ├── linkedge									// 场景联动
│       │   └── script										// 转换脚本
│       ├── scriptmanage									// 脚本管理
│       │   └── converscript							// 转换函数
│       ├── sys														// 系统
│       │   ├── error-log									// 错误页面
│       │   ├── exception									// 异常页面
│       │   ├── iframe										// iframe页面
│       │   ├── lock											// 锁屏页面
│       │   ├── login											// 登录页面
│       │   └── redirect									// 重定向页面
│       ├── system												// 系统管理
│       │   ├── account										// 账号管理
│       │   ├── changePassword						// 修改密码
│       │   ├── customize									// 平台定制
│       │   ├── dict											// 字典管理
│       │   ├── feedback									// 意见反馈
│       │   ├── log												// 日志管理
│       │   ├── menu											// 菜单管理
│       │   ├── organization							// 组织管理
│       │   ├── role											// 角色管理
│       │   └── scheduled									// 定时任务
│       ├── tenant												// 租户管理
│       │   ├── config										// 租户配置
│       │   ├── list											// 租户列表
│       │   └── role											// 租户角色
│       └── visual												// 可视化管理
│           └── board											// 看板管理
```

#### 页面目录创建示例

##### 项目文件创建

```
.
├── src
│   └── api
|   |   └── 菜单目录
│   |   │   ├── 菜单一
│   |   │      ├── model        // 数据模型 typescript 类型
│   |   │      |  └── index.ts     // 类型文件
│   |   │      └── index.ts      // http请求
│   |   │   ├── 菜单二
│   |   │   └── 菜单三
│   └── views
│       ├── 菜单目录
│       │   ├── 菜单一
|       |   |    ├── config.ts    // 配置文件
|       |   |    ├── cpns       // 菜单组件
|       |   |    |   └── xxx.vue   // 组件
|       |   |    └── index.vue    // 菜单页面入口
│       │   ├── 菜单二
│       │   └── 菜单三
```

##### 菜单创建

![image-20230109171858911](https://oss.yuntengcloud.com//iotdocs/img/image-20230109171858911.png)

> 注意: 登录系统管理员，进入菜单管理 新增对应目录及菜单

#### 基础配置

##### 文件位置

```
.
├── .env
```

![image-20230109172351782](https://oss.yuntengcloud.com//iotdocs/img/image-20230109172351782.png)

##### 项目启动端口配置示例

```yaml
# port
VITE_PORT = 8083
```

> 注意：这里可以修改为其他端口，8083 并不是固定不变的

##### 项目标题配置示例

```yaml
# spa-title
VITE_GLOB_APP_TITLE = xxxxxxxx
```

#### 开发/生产环境配置

> 开发/生产环境配置文件:
>
> 开发环境 **.env.devlopment**
>
> 生产环境 **.env.production**

##### 文件位置

```
.
├── .env.devlopment
├── .env.procution
```

<img src="https://oss.yuntengcloud.com//iotdocs/img/image-20230109172030928.png"/>

```yaml
# Whether to open mock
# VITE_GLOB_USE_MOCK = true

# public path
VITE_GLOB_PUBLIC_PATH = /

# Cross-domain proxy, you can configure multiple
# Please note that no line breaks

# 本地
# VITE_PROXY = [["/api","http://localhost:8080/api"]]

# 线上测试环境
VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","http://localhost:63942/"]]

# 实时数据的ws地址
VITE_GLOB_WEB_SOCKET = ws://222.180.200.114:48080/api/ws/plugins/telemetry?token=

# Delete console
VITE_GLOB_DROP_CONSOLE = true

# Basic interface address SPA
VITE_GLOB_API_URL=/api

# File upload address， optional
VITE_GLOB_UPLOAD_URL=/api/yt/oss/upload

# Interface prefix
VITE_GLOB_API_URL_PREFIX=/yt

#configuration
VITE_GLOB_CONFIGURATION = /thingskit-drawio

# Content Security Policy
VITE_GLOB_CONTENT_SECURITY_POLICY = false

# Alarm Notify Polling Interval Time
VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000

# Alarm Notify Auto Close Time Unit is Second
VITE_GLOB_ALARM_NOTIFY_DURATION = 5

```

##### 代理服务器配置示例

```json
# 代理服务器配置
VITE_PROXY = [["/api","http://xxx.xxx.xxx.xxx:xxxxx/api"],["/thingskit-drawio","http://localhost:3000/"]]

```

> 注意：协议属于 http/https

##### Socket 配置

```json
# 实时数据的ws地址
VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
```

> 注意: 协议属于 ws/wss

##### 附件上传 URL

```json
# 附件
VITE_GLOB_UPLOAD_URL=/api/yt/oss/upload
```

##### 组态配置示例

```json
#configuration 组态地址
VITE_GLOB_CONFIGURATION = /thingskit-drawio
```

##### 内容安全策略配置示例

```json
# 内容安全策略配置
VITE_GLOB_CONTENT_SECURITY_POLICY = false

```

> 注意：设置为 false，则是 http，设置为 true，则是 https

##### 告警弹窗请求配置示例

```json
# Alarm Notify Polling Interval Time
VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000   //定时请求告警轮询时间

# Alarm Notify Auto Close Time Unit is Second
VITE_GLOB_ALARM_NOTIFY_DURATION = 5 //告警弹窗自动关闭时间

```

##### 公共路径配置示例

```json
# public path
VITE_GLOB_PUBLIC_PATH = /

```

> 注意：公共路径也是可以修改的，不是固定不变的，根据您公司项目具体来修改即可

## 开发环境搭建及源码运行

### 开发环境搭建

- [Node.js]([Node.js (nodejs.org)](https://nodejs.org/en/))安装
- [yarn]([首页 | Yarn - JavaScript 软件包管理器 | Yarn 中文文档 - Yarn 中文网 (yarnpkg.cn)](https://www.yarnpkg.cn/))安装(完成 Node.js 安装后使用终端命令: npm install -g yarn 进行全局安装)

> 注意：
>
> 建议 node 版本 16+，项目中使用版本为 16.15.0

### 源码运行

```sh
# 安装yarn 包管理工具
npm install -g yarn

# 安装依赖
yarn install

# 运行开发环境
yarn dev

```

## 打包部署

### 打包配置

根据需求修改环境变量

### 打包命令

```sh
# 打开终端 输入打包命令
yarn build
```

### 打包位置

![微信截图_20230106174046](https://oss.yuntengcloud.com/iotdocs/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230106174046.png)
