# dispatch-platform
## 起步
### 安装
```
npm install
```
### 安装解决依赖冲突
```
npm install --legacy-peer-deps
```
**注：本分支不能用 pnpm，一定要用 npm**
### 开发环境启动
```
npm run serve
```
### 测试环境打包
```
npm run build
```
### 正式环境打包
```
npm run build:prod
```
## 环境说明
[参考文档](https://cli.vuejs.org/zh/guide/mode-and-env.html)
| 环境文件 | node: process.env.NODE_ENV / process.env.ENV | 说明 |
| ------------------ | -------------------------------------------- | -------- |
| `.env.development` | `development`/`development` | 开发环境 |
| `.env.staging` | `production`/`staging` | 测试环境 |
| `.env.production` | `production`/`production` | 正式环境 |
## ElementUI
通用组件如：表单、按钮等组件基于 ElementUI 开发
> 参考文档：[element-ui^2.15.13](https://element.eleme.cn/2.15/#/zh-CN/component/installation)
## ~~IM（弃用）~~
## ~~TRTC（弃用）~~
## 野火 IM
> 源码：[野火 IM / vue-chat](https://gitee.com/wfchat/vue-chat)
>
> 文档：[开发文档](https://docs.wildfirechat.cn)
### 组件
- 视觉组件：`src/ui/*`
- 聊天框主体：`src/ui/main/*`
- 音视频视觉组件：`src/ui/voip/*`
- 核心功能：`src/wfc/*`
- 配置文件：`src/config.js`
- 独立状态管理：`src/store.js`
### 配置
修改`src/config.js`
```diff
- static APP_SERVER = 'https://app.wildfirechat.net';
+ static APP_SERVER = "https://testim.baibaodun.com.cn:8888";
```
### 注意事项
- **注意区分 store！！**
- 要用*vuex 的 store*时这么写：`@/store/index`
- 要用*野火的 store*时这么写：`@/store.js`
测试、正式环境上线时候 nginx 要增加/pttApi 代理到http://49.4.21.141:50001/gis
## 高德地图
> 教程：[开发教程](https://lbs.amap.com/api/javascript-api/guide/abc/prepare)
>
> 高德地图 2.0 API：[地图 JSAPI 2.0](https://developer.amap.com/api/jsapi-v2/documentation#%e5%9c%b0%e5%9b%be-jsapi-2-0)
### 高德地图组件
- 组件路径：`src/components/AMap`
- 地图主体：`src/components/AMap/map/index.vue`
- 弹框：`src/components/AMap/infoWindow/index.vue`
### 高德地图开发者 Key
配置地址：`public/config/json`
```json
{
"load": {
"key": "******"
}
}
```
## OpenLayers
> API 文档：[ol: ^7](https://openlayers.org/en/latest/apidoc/)
## PTT 对讲
### sdk 引用
依赖存放路径：`public/GWSD_WebPTT`
> 引用及 eslint 配置
- 在`index.html`中引用相关依赖
```html
```
- sdk 的使用不支持 es 规范，所以需要修改 eslint 配置，在`.eslintrc.js`中添加如下配置
```js
module.exports = {
...,
globals: {
WebPttInit: "readonly",
PttLogin: "readonly",
PttLogout: "readonly",
PttInGroup: "readonly",
PttOutGroup: "readonly",
PttStartCall: "readonly",
PttStopCall: "readonly",
}
}
```
### 流程与使用说明
#### 权限与用户信息
代码路径：`src/api/auth`
> 流程：
>
> 页面加载 -> 获取权限 ->
> 根据用户信息获取 ptt 账号信息 -> 清空组群
关键代码说明：
```js
// 获取ptt账号信息（账号、密码、用户名等）
const pttAccount = await getAdminAccount({
subAccount: response.dispatchNo, // response: /tenant/users/current 返回指
});
// 存放信息
store.commit("SET_PTT_ACCOUNT", pttAccount.data);
// 清空组群 避免没有关闭弹框直接关闭页面或者直接刷新页面没有退出组群下次无法创建组群的情况
await clearAllPTTGroups();
```
#### 组件说明
代码路径：`src/components/pttClient`
##### 核心功能封装 WebPtt.js
> WebPtt 类是基于 GWSD_WebPTT_sdk 的功能封装
参数说明
| 参数名 | 类型 | 说明 | 默认值 |
| ------------ | ---------------------- | ----------------------------- | ------------------------ |
| server | `string` | 服务器地址 | ws://121.36.101.115:9006 |
| speak | `string`/`HTMLElement` | video 元素或 id，用于发送语音 | - |
| listen | `string`/`HTMLElement` | video 元素或 id，用于接收语音 | - |
| account | `string` | PTT 账号 | - |
| password | `string` | PTT 密码 | - |
| onLogin | `Function` | 登录成功回调 | - |
| onLogout | `Function` | 离线回调 | - |
| onJoinGrp | `Function` | 发送语音回调 | - |
| onTempGrp | `Function` | 加入临时组群回调 | - |
| onDuplexCall | `Function` | 全双工回调回调 | - |
| onSpeak | `Function` | 讲话状态回调 | - |
| onAddStream | `Function` | 音频流状态回调 | - |
| onMessage | `Function` | 消息接收回调 | - |
| onError | `Function` | 异常状态回调 | - |
##### 接口 api
> PTT 专用 axois 封装：`src/components/pttClient/api/request.js`
- baseURL pttApi 地址根路径
- 配置在环境变量`VUE_APP_GWSD_API_ROOT`
- 测试环境：.env.development
- 正式环境：.env.production
- 本地环境：.env.development
- request 请求拦截器
- `auth_code` 需要在登录信息中获取，登录成功后保存到`localStorage`中，_目前写死成`37TBSAERG28`_
> 组件会调用到的接口封装：`src/components/pttClient/api/index.js`
- getAdminAccount 查询子组织账号详情
- createGroup 创建群组
- delGroup 删除群组
- addUsers 调度群组加人
- removeUsers 调度群组删人
- dispatchGroupList 调度群组列表
- dispatchUsers 调度群组内成员列表
##### 组件
> 组件主要逻辑托管于状态管理中实现。
- `src/store/modules/ptt.js`: 状态管理
- `src/components/pttClient/index.vue`：PTT 主体弹框
- `src/components/pttClient/pttClientDialog.vue`：选择添加参会人员弹框
###### 组件使用说明
调用方式：
```vue
```
参数说明：
继承`el-dialog`，具体参数参考`element-ui`文档，新增参数如下：
| 参数名 | 类型 | 说明 | 默认值 |
|----------|-----------|--------|-------|
| multiple | `boolean` | 是否多人调度 | false |
###### 组件工作逻辑
1. 业务代码中调用`openPPTCall`方法，传入`multiple`参数，表示是否多人调度。
2. 根据`multiple`参数，获取调度员信息，并构造参会人列表数组。
3. 调用`createPTTGroup`方法，创建组群，并打开`pttClient`组件。
4. `pttClient`组件内部，根据`multiple`参数，决定是否显示选择添加参会人员弹框，判断单人/多人样式。
5. 计算当前页显示的成员
6. 初始化PTTClient
7. 登录`PTTClient.login()`
8. 开始计时
- silenceTime：双方都静默时长
1. 一建立连接就开始且持续计时(setTimingTimer，每秒+1)
2. 有人说话就赋值为0（onSpeak）
3. 一直没人讲话就会再持续累加（注意：就算有人说话也只是赋值把silenceTime赋值为0，setTimingTimer定时器没有结束，一直在更新silenceTime）
4. 直至双方都静默时长到达一分钟(silenceTime>60)触发挂断（watch silenceTime）