## 准备 - [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 ``` ```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)