thingskit-front-web

准备

• node 和 git -项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• Vue-Router - 熟悉 vue-router 基本使用
• Ant-Design-Vue - ui 基本使用

目录结构及重要文件说明

目录结构

此项目大致结构如下

.
├── 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    // 菜单页面入口
│       │   ├── 菜单二
│       │   └── 菜单三

菜单创建

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

基础配置

文件位置

.
├── .env

项目启动端口配置示例

# port
VITE_PORT = 8083

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

项目标题配置示例

# spa-title
VITE_GLOB_APP_TITLE = xxxxxxxx

开发/生产环境配置

开发/生产环境配置文件:

开发环境 .env.devlopment

生产环境 .env.production

文件位置

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

# 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

代理服务器配置示例

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

注意：协议属于 http/https

Socket 配置

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

注意: 协议属于 ws/wss

附件上传 URL

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

组态配置示例

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

内容安全策略配置示例

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

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

告警弹窗请求配置示例

# 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 //告警弹窗自动关闭时间

公共路径配置示例

# public path
VITE_GLOB_PUBLIC_PATH = /

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

开发环境搭建及源码运行

开发环境搭建

• Node.js安装
• yarn安装(完成 Node.js 安装后使用终端命令: npm install -g yarn 进行全局安装)

注意：

建议 node 版本 16+，项目中使用版本为 16.15.0

源码运行

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

# 安装依赖
yarn install

# 运行开发环境
yarn dev

打包部署

打包配置

根据需求修改环境变量

打包命令

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

打包位置