简柏林 / thingskit-front · Commits

Commit a00fc81c452b3ec042a892f3c8e14ad9ffe8c25a

Authored by fengwotao
2 parents fca9671b 4636dcb9

Merge branch 'main' into local_dev_ft

Inline Side-by-side
Showing 1 changed file with 366 additions and 0 deletions
  1 +## 准备
  2 +
  3 +- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
  4 +- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
  5 +- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
  6 +- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
  7 +- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
  8 +- [Vue-Router](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
  9 +- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - ui 基本使用
  10 +
  11 +## 目录结构及重要文件说明
  12 +
  13 +### 目录结构
  14 +
  15 +此项目大致结构如下
  16 +
  17 +```txt
  18 +.
  19 +├── build # 打包脚本相关
  20 +│ ├── config # 配置文件
  21 +│ ├── generate # 生成器
  22 +│ ├── script # 脚本
  23 +│ └── vite # vite配置
  24 +├── mock # mock文件夹
  25 +├── public # 公共静态资源目录
  26 +├── src # 主目录
  27 +│ ├── api # 接口文件
  28 +│ ├── assets # 资源文件
  29 +│ │ ├── icons # icon sprite 图标文件夹
  30 +│ │ ├── images # 项目存放图片的文件夹
  31 +│ │ └── svg # 项目存放svg图片的文件夹
  32 +│ ├── components # 公共组件
  33 +│ ├── design # 样式文件
  34 +│ ├── directives # 指令
  35 +│ ├── enums # 枚举/常量
  36 +│ ├── hooks # hook
  37 +│ │ ├── component # 组件相关hook
  38 +│ │ ├── core # 基础hook
  39 +│ │ ├── event # 事件相关hook
  40 +│ │ ├── setting # 配置相关hook
  41 +│ │ └── web # web相关hook
  42 +│ ├── layouts # 布局文件
  43 +│ │ ├── default # 默认布局
  44 +│ │ ├── iframe # iframe布局
  45 +│ │ └── page # 页面布局
  46 +│ ├── locales # 多语言
  47 +│ ├── logics # 逻辑
  48 +│ ├── main.ts # 主入口
  49 +│ ├── router # 路由配置
  50 +│ ├── settings # 项目配置
  51 +│ │ ├── componentSetting.ts # 组件配置
  52 +│ │ ├── designSetting.ts # 样式配置
  53 +│ │ ├── encryptionSetting.ts # 加密配置
  54 +│ │ ├── localeSetting.ts # 多语言配置
  55 +│ │ ├── projectSetting.ts # 项目配置
  56 +│ │ └── siteSetting.ts # 站点配置
  57 +│ ├── store # 数据仓库
  58 +│ ├── utils # 工具类
  59 +│ └── views # 页面
  60 +├── test # 测试
  61 +│ └── server # 测试用到的服务
  62 +│ ├── api # 测试服务器
  63 +│ ├── upload # 测试上传服务器
  64 +│ └── websocket # 测试ws服务器
  65 +├── types # 类型文件
  66 +├── vite.config.ts # vite配置文件
  67 +└── windi.config.ts # windcss配置文件
  68 +```
  69 +
  70 +### 配置文件
  71 +
  72 +#### 项目页面目录说明
  73 +
  74 +```
  75 +.
  76 +├── src
  77 +│   └── views
  78 +│   ├── alarm // 告警管理
  79 +│   │   ├── config // 告警配置
  80 +│   │   ├── contacts // 告警联系人
  81 +│   │   └── log // 告警记录
  82 +│   ├── camera // 视频管理
  83 +│   │   ├── manage // 视频配置
  84 +│   │   └── streaming // 流媒体配置
  85 +│   ├── common // 公共
  86 +│   │   └── organizationIdTree // 组织树
  87 +│   ├── configuration // 组态
  88 +│   │   └── center // 组态中心
  89 +│   ├── dashboard // 仪表盘
  90 +│   │   └── workbench // 首页
  91 +│   ├── device // 设备管理
  92 +│   │   ├── list // 设备列表
  93 +│   │   ├── localtion // 地理位置
  94 +│   │   └── profiles // 产品
  95 +│   ├── message // 消息管理
  96 +│   │   ├── config // 消息配置
  97 +│   │   ├── log // 消息记录
  98 +│   │   └── template // 消息模版
  99 +│   ├── notice // 平台通知
  100 +│   │   ├── manager // 通知管理
  101 +│   │   └── myNotices // 我的通知
  102 +│   ├── operation // 运维管理
  103 +│   │   ├── onlinerecord // 上下线记录
  104 +│   │   └── ota // OTA升级
  105 +│   ├── report // 报表管理
  106 +│   │   ├── config // 报表配置
  107 +│   │   └── export // 报表导出
  108 +│   ├── rule // 规则引擎
  109 +│   │   ├── dataFlow // 数据流转
  110 +│   │   ├── linkedge // 场景联动
  111 +│   │   └── script // 转换脚本
  112 +│   ├── scriptmanage // 脚本管理
  113 +│   │   └── converscript // 转换函数
  114 +│   ├── sys // 系统
  115 +│   │   ├── error-log // 错误页面
  116 +│   │   ├── exception // 异常页面
  117 +│   │   ├── iframe // iframe页面
  118 +│   │   ├── lock // 锁屏页面
  119 +│   │   ├── login // 登录页面
  120 +│   │   └── redirect // 重定向页面
  121 +│   ├── system // 系统管理
  122 +│   │   ├── account // 账号管理
  123 +│   │   ├── changePassword // 修改密码
  124 +│   │   ├── customize // 平台定制
  125 +│   │   ├── dict // 字典管理
  126 +│   │   ├── feedback // 意见反馈
  127 +│   │   ├── log // 日志管理
  128 +│   │   ├── menu // 菜单管理
  129 +│   │   ├── organization // 组织管理
  130 +│   │   ├── role // 角色管理
  131 +│   │   └── scheduled // 定时任务
  132 +│   ├── tenant // 租户管理
  133 +│   │   ├── config // 租户配置
  134 +│   │   ├── list // 租户列表
  135 +│   │   └── role // 租户角色
  136 +│   └── visual // 可视化管理
  137 +│   └── board // 看板管理
  138 +```
  139 +
  140 +#### 页面目录创建示例
  141 +
  142 +##### 项目文件创建
  143 +
  144 +```
  145 +.
  146 +├── src
  147 +│ └── api
  148 +| | └── 菜单目录
  149 +│ | │ ├── 菜单一
  150 +│ | │ ├── model // 数据模型 typescript 类型
  151 +│ | │ | └── index.ts // 类型文件
  152 +│ | │ └── index.ts // http请求
  153 +│ | │ ├── 菜单二
  154 +│ | │ └── 菜单三
  155 +│ └── views
  156 +│ ├── 菜单目录
  157 +│ │ ├── 菜单一
  158 +| | | ├── config.ts // 配置文件
  159 +| | | ├── cpns // 菜单组件
  160 +| | | | └── xxx.vue // 组件
  161 +| | | └── index.vue // 菜单页面入口
  162 +│ │ ├── 菜单二
  163 +│ │ └── 菜单三
  164 +```
  165 +
  166 +##### 菜单创建
  167 +
  168 +![image-20230109171858911](https://oss.yuntengcloud.com//iotdocs/img/image-20230109171858911.png)
  169 +
  170 +> 注意: 登录系统管理员，进入菜单管理 新增对应目录及菜单
  171 +
  172 +#### 基础配置
  173 +
  174 +##### 文件位置
  175 +
  176 +```
  177 +.
  178 +├── .env
  179 +```
  180 +
  181 +![image-20230109172351782](https://oss.yuntengcloud.com//iotdocs/img/image-20230109172351782.png)
  182 +
  183 +##### 项目启动端口配置示例
  184 +
  185 +```yaml
  186 +# port
  187 +VITE_PORT = 8083
  188 +```
  189 +
  190 +> 注意：这里可以修改为其他端口，8083 并不是固定不变的
  191 +
  192 +##### 项目标题配置示例
  193 +
  194 +```yaml
  195 +# spa-title
  196 +VITE_GLOB_APP_TITLE = xxxxxxxx
  197 +```
  198 +
  199 +#### 开发/生产环境配置
  200 +
  201 +> 开发/生产环境配置文件:
  202 +>
  203 +> 开发环境 **.env.devlopment**
  204 +>
  205 +> 生产环境 **.env.production**
  206 +
  207 +##### 文件位置
  208 +
  209 +```
  210 +.
  211 +├── .env.devlopment
  212 +├── .env.procution
  213 +```
  214 +
  215 +<img src="https://oss.yuntengcloud.com//iotdocs/img/image-20230109172030928.png"/>
  216 +
  217 +```yaml
  218 +# Whether to open mock
  219 +# VITE_GLOB_USE_MOCK = true
  220 +
  221 +# public path
  222 +VITE_GLOB_PUBLIC_PATH = /
  223 +
  224 +# Cross-domain proxy, you can configure multiple
  225 +# Please note that no line breaks
  226 +
  227 +# 本地
  228 +# VITE_PROXY = [["/api","http://localhost:8080/api"]]
  229 +
  230 +# 线上测试环境
  231 +VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","http://localhost:63942/"]]
  232 +
  233 +# 实时数据的ws地址
  234 +VITE_GLOB_WEB_SOCKET = ws://222.180.200.114:48080/api/ws/plugins/telemetry?token=
  235 +
  236 +# Delete console
  237 +VITE_GLOB_DROP_CONSOLE = true
  238 +
  239 +# Basic interface address SPA
  240 +VITE_GLOB_API_URL=/api
  241 +
  242 +# File upload address， optional
  243 +VITE_GLOB_UPLOAD_URL=/api/yt/oss/upload
  244 +
  245 +# Interface prefix
  246 +VITE_GLOB_API_URL_PREFIX=/yt
  247 +
  248 +#configuration
  249 +VITE_GLOB_CONFIGURATION = /thingskit-drawio
  250 +
  251 +# Content Security Policy
  252 +VITE_GLOB_CONTENT_SECURITY_POLICY = false
  253 +
  254 +# Alarm Notify Polling Interval Time
  255 +VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
  256 +
  257 +# Alarm Notify Auto Close Time Unit is Second
  258 +VITE_GLOB_ALARM_NOTIFY_DURATION = 5
  259 +
  260 +```
  261 +
  262 +##### 代理服务器配置示例
  263 +
  264 +```json
  265 +# 代理服务器配置
  266 +VITE_PROXY = [["/api","http://xxx.xxx.xxx.xxx:xxxxx/api"],["/thingskit-drawio","http://localhost:3000/"]]
  267 +
  268 +```
  269 +
  270 +> 注意：协议属于 http/https
  271 +
  272 +##### Socket 配置
  273 +
  274 +```json
  275 +# 实时数据的ws地址
  276 +VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
  277 +```
  278 +
  279 +> 注意: 协议属于 ws/wss
  280 +
  281 +##### 附件上传 URL
  282 +
  283 +```json
  284 +# 附件
  285 +VITE_GLOB_UPLOAD_URL=/api/yt/oss/upload
  286 +```
  287 +
  288 +##### 组态配置示例
  289 +
  290 +```json
  291 +#configuration 组态地址
  292 +VITE_GLOB_CONFIGURATION = /thingskit-drawio
  293 +```
  294 +
  295 +##### 内容安全策略配置示例
  296 +
  297 +```json
  298 +# 内容安全策略配置
  299 +VITE_GLOB_CONTENT_SECURITY_POLICY = false
  300 +
  301 +```
  302 +
  303 +> 注意：设置为 false，则是 http，设置为 true，则是 https
  304 +
  305 +##### 告警弹窗请求配置示例
  306 +
  307 +```json
  308 +# Alarm Notify Polling Interval Time
  309 +VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000 //定时请求告警轮询时间
  310 +
  311 +# Alarm Notify Auto Close Time Unit is Second
  312 +VITE_GLOB_ALARM_NOTIFY_DURATION = 5 //告警弹窗自动关闭时间
  313 +
  314 +```
  315 +
  316 +##### 公共路径配置示例
  317 +
  318 +```json
  319 +# public path
  320 +VITE_GLOB_PUBLIC_PATH = /
  321 +
  322 +```
  323 +
  324 +> 注意：公共路径也是可以修改的，不是固定不变的，根据您公司项目具体来修改即可
  325 +
  326 +## 开发环境搭建及源码运行
  327 +
  328 +### 开发环境搭建
  329 +
  330 +- [Node.js]([Node.js (nodejs.org)](https://nodejs.org/en/))安装
  331 +- [yarn]([首页 | Yarn - JavaScript 软件包管理器 | Yarn 中文文档 - Yarn 中文网 (yarnpkg.cn)](https://www.yarnpkg.cn/))安装(完成 Node.js 安装后使用终端命令: npm install -g yarn 进行全局安装)
  332 +
  333 +> 注意：
  334 +>
  335 +> 建议 node 版本 16+，项目中使用版本为 16.15.0
  336 +
  337 +### 源码运行
  338 +
  339 +```sh
  340 +# 安装yarn 包管理工具
  341 +npm install -g yarn
  342 +
  343 +# 安装依赖
  344 +yarn install
  345 +
  346 +# 运行开发环境
  347 +yarn dev
  348 +
  349 +```
  350 +
  351 +## 打包部署
  352 +
  353 +### 打包配置
  354 +
  355 +根据需求修改环境变量
  356 +
  357 +### 打包命令
  358 +
  359 +```sh
  360 +# 打开终端 输入打包命令
  361 +yarn build
  362 +```
  363 +
  364 +### 打包位置
  365 +
  366 +![微信截图_20230106174046](https://oss.yuntengcloud.com/iotdocs/img/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230106174046.png)
... ...