joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://git.qcloud.com/joylink/jl-nclient into dev

Browse Source
This commit is contained in:
zyy 2019-08-16 16:19:14 +08:00
commit 7b22ab377e
11 changed files with 532 additions and 505 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/jmap/config/skinCode/bejing_01.js
View File

@ -457,7 +457,6 @@ class SkinCode extends defaultStyle {
haveTextHSDA: true, // 是否需创建textHSDA对象
haveArrowText: true, // 是否需创建arrowText对象
haveTrainBorder: false, // 是否需创建trainBorder对象
aspectRatio: 7/5, // 字体宽高比例（用以拼接text是计算位置）
textOffset: 4, // 字体偏移（用以控制字体据车头的距离）
trainWidthMoreText: 8, // 计算列车长度时--列车长比text多出尺寸
useSelfFormat: true, // 使用配置项的nameFormat

1
src/jmap/config/skinCode/chengdu_03.js
View File

@ -423,7 +423,6 @@ class SkinCode extends defaultStyle {
haveTextHSDA: true, // 是否需创建textHSDA对象
haveArrowText: true, // 是否需创建arrowText对象
haveTrainBorder: false, // 是否需创建trainBorder对象
aspectRatio: 7/5, // 字体宽高比例（用以拼接text是计算位置）
textOffset: 4, // 字体偏移（用以控制字体据车头的距离）
trainWidthMoreText: 8, // 计算列车长度时--列车长比text多出尺寸
useSelfFormat: true, // 使用配置项的nameFormat

1
src/jmap/config/skinCode/fuzhou_01.js
View File

@ -371,7 +371,6 @@ class SkinCode extends defaultStyle {
haveTextHSDA: false, // 是否需创建textHSDA对象
haveArrowText: true, // 是否需创建arrowText对象
haveTrainBorder: false, // 是否需创建trainBorder对象
aspectRatio: 8/15, // 字体宽高比例（用以拼接text是计算位置）
textOffset: 1, // 字体偏移（用以控制字体据车头的距离）
trainWidthMoreText: 2 // 计算列车长度时--列车长比text多出尺寸
},

18
src/jmap/shape/Train/TrainBody.js
View File

@ -217,23 +217,23 @@ export default class TrainBody extends Group {
formatChangePosition(model, style) {
if (this.nameFormat) {
const arr = this.nameFormat.split(':');
let fontNumber = 0;
let widthText = 0;
arr.forEach(ele => {
if (ele == 'targetCode') {
this.textTrainNumber.setStyle('x', parseInt(model.point.x + fontNumber * model.fontSize * style.Train.common.aspectRatio + style.Train.common.textOffset) );
fontNumber += (style.Train.trainNumber.targetCodePrefix || '').length;
this.textTrainNumber.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset) );
widthText += this.textTrainNumber.getBoundingRect().width;
this.add(this.textTrainNumber);
} else if (ele == 'serviceNumber') {
this.textTrainServer.setStyle('x', parseInt(model.point.x + fontNumber * model.fontSize * style.Train.common.aspectRatio + style.Train.common.textOffset));
fontNumber += (style.Train.trainServer.serviceNumberPrefix || '').length;
this.textTrainServer.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset));
widthText += this.textTrainServer.getBoundingRect().width;
this.add(this.textTrainServer);
} else if (ele == 'tripNumber') {
this.textTrainTarget.setStyle('x', parseInt(model.point.x + fontNumber * model.fontSize * style.Train.common.aspectRatio + style.Train.common.textOffset));
fontNumber += (style.Train.trainTarget.tripNumberPrefix || '').length;
this.textTrainTarget.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset));
widthText += this.textTrainTarget.getBoundingRect().width;
this.add(this.textTrainTarget);
} else if (ele == 'groupNumber') {
this.textTrainTargetNumber.setStyle('x', parseInt(model.point.x + fontNumber * model.fontSize * style.Train.common.aspectRatio + style.Train.common.textOffset));
fontNumber += (style.Train.trainTargetNumber.groupNumberPrefix || '').length;
this.textTrainTargetNumber.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset));
widthText += this.textTrainTargetNumber.getBoundingRect().width;
this.add(this.textTrainTargetNumber);
}
});

4
src/utils/baseUrl.js
View File

@ -3,8 +3,8 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'https://test.joylink.club/jlcloud';
BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.4:9000' // 琰培
} else {

67
src/views/dashboard/echarts/permission.vue
View File

@ -45,20 +45,19 @@ export default {
left: 10,
containLabel: true
}],
xAxis: [{
type: 'value'
}],
yAxis: [{
xAxis: {
type: 'value',
show: false
},
yAxis: {
type: 'category',
data: [],
show: false,
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}],
data: []
},
series: [{
type: 'bar',
stack: 'chart',
@ -69,6 +68,7 @@ export default {
position: 'right'
}
},
barWidth: 30,
tooltip: {
formatter: params => { return `${params.marker} ${params.name}: ${params.value}个`; }
},
@ -83,7 +83,7 @@ export default {
data: []
}]
},
mapName: '',
mapName: null,
mapNameList: [],
permissionList: [],
chart: null
@ -110,32 +110,41 @@ export default {
methods: {
initChart() {
listUserPermision({pageSize: 9000, pageNum: 1}).then(resp => {
this.permissionList = resp.data.list;
this.mapNameList = [...new Set(this.permissionList.map(elem => { return elem.mapName; }))];
this.permissionList = resp.data.list.filter(elem => { return parseInt(elem.status) > 0; });
this.mapNameList = [...new Set(this.permissionList.map(elem => { return elem.mapName; })), ''];
this.$nextTick(() => { this.mapName = this.mapNameList[0] || ''; });
});
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option);
},
async loadExamData(mapName) {
var data = {};
var list = this.permissionList.filter(elem => { return elem.mapName == mapName; });
list.forEach(elem => {
if (!data[elem.mapProductName]) {
data[elem.mapProductName] = elem.remains;
} else {
data[elem.mapProductName] += elem.remains;
}
});
const keys = Object.keys(data);
const values = Object.values(data);
const sum = values.reduce((total, num) => total + num);
this.option.title.text = '所属用户剩余权限分布图';
this.option.title.subtext = `权限总计${sum}个`;
this.option.yAxis[0].data = keys;
this.option.series[0].data = values;
this.option.series[1].data = keys.map(name => { return {name, value: data[name]}; });
if (mapName) {
var data = {};
var list = this.permissionList.filter(elem => { return elem.mapName == mapName; });
list.forEach(elem => {
if (!data[elem.mapProductName]) {
data[elem.mapProductName] = elem.remains;
} else {
data[elem.mapProductName] += elem.remains;
}
});
const keys = Object.keys(data);
const values = Object.values(data);
const sum = keys.length > 0? values.reduce((total, num) => total + num) : 0;
this.option.title.subtext = `权限总计${sum}个`;
this.option.xAxis.show = true;
this.option.yAxis.show = true;
this.option.yAxis.data = keys;
this.option.series[0].data = values;
this.option.series[1].data = keys.map(name => { return {name, value: data[name]}; });
} else {
this.option.xAxis.show = false;
this.option.yAxis.show = false;
this.option.title.subtext = `暂无数据`;
}
this.chart.setOption(this.option);
}
}

120
src/views/jointTraining/menuDraft/chooseRole.vue
View File

@ -1,63 +1,69 @@
<template>
<el-dialog :title="title" :visible.sync="show" width="400px" :before-close="doClose" :zIndex="2000" :modal="false"
:close-on-click-modal="false" append-to-body v-dialogDrag>
<el-input placeholder="输入名称进行过滤" v-model="filterText" clearable> </el-input>
<ul class="listBox" v-if="filterList.length">
<li class="listLi" v-for="item in filterList">
<el-radio v-model="selected" :label="item"><span>{{item.name}}</span></el-radio>
</li>
</ul>
<span class="tipLable" v-else> 暂无数据 </span>
<span slot="footer" class="dialog-footer">
<el-button @click="doClose">取 消</el-button>
<el-button type="primary" :loading="loading" @click="commit">确 定</el-button>
</span>
</el-dialog>
<el-dialog
v-dialogDrag
:title="title"
:visible.sync="show"
width="400px"
:before-close="doClose"
:z-index="2000"
:modal="false"
:close-on-click-modal="false"
append-to-body
>
<el-input v-model="filterText" placeholder="输入名称进行过滤" clearable />
<ul v-if="filterList.length" class="listBox">
<li v-for="item in filterList" :key="item" class="listLi">
<el-radio v-model="selected" :label="item"><span>{{ item.name }}</span></el-radio>
</li>
</ul>
<span v-else class="tipLable"> 暂无数据 </span>
<span slot="footer" class="dialog-footer">
<el-button @click="doClose">取 消</el-button>
<el-button type="primary" :loading="loading" @click="commit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { MapDeviceType, OperationEvent } from '@/scripts/ConstDic';
export default {
name: 'CmdNotice',
data() {
return {
dialogShow: false,
title: '',
props: {
label: 'name'
},
sourceList: [],
filterText: '',
selected: '',
loading: false,
}
},
computed: {
show() {
return this.dialogShow;
},
filterList() {
return this.sourceList.filter(p => p.name.indexOf(this.filterText) !== -1);
},
},
methods: {
doShow(obj) {
this.dialogShow = true;
this.title = obj.title;
this.sourceList = obj.list;
this.selected = '';
},
doClose() {
this.dialogShow = false;
},
commit() {
this.$emit('setDriver', this.selected);
this.doClose();
}
}
}
export default {
name: 'CmdNotice',
data() {
return {
dialogShow: false,
title: '',
props: {
label: 'name'
},
sourceList: [],
filterText: '',
selected: '',
loading: false
};
},
computed: {
show() {
return this.dialogShow;
},
filterList() {
return this.sourceList.filter(p => p.name.indexOf(this.filterText) !== -1);
}
},
methods: {
doShow(obj) {
this.dialogShow = true;
this.title = obj.title;
this.sourceList = obj.list;
this.selected = '';
},
doClose() {
this.dialogShow = false;
},
commit() {
this.$emit('setDriver', this.selected);
this.doClose();
}
}
};
</script>
@ -85,4 +91,4 @@
.tipLable {
line-height: 33px;
}
</style>
</style>

252
src/views/jointTraining/menuDraft/operateMenu.vue
View File

@ -1,135 +1,135 @@
<template>
<div>
<pop-menu ref="popMenu" :menu="menu"></pop-menu>
<choose-role ref="chooseRole" @setDriver="setDriver"></choose-role>
</div>
<div>
<pop-menu ref="popMenu" :menu="menu" />
<choose-role ref="chooseRole" @setDriver="setDriver" />
</div>
</template>
<script>
import PopMenu from '@/components/PopMenu';
import ChooseRole from './chooseRole';
import { putUserRoles } from '@/api/chat';
import { DeviceMenu } from '@/scripts/ConstDic';
import { UrlConfig } from '@/router/index';
import PopMenu from '@/components/PopMenu';
import ChooseRole from './chooseRole';
import { putUserRoles } from '@/api/chat';
import { DeviceMenu } from '@/scripts/ConstDic';
export default {
name: 'operateMenu',
components: {
PopMenu,
ChooseRole
},
props: {
group: {
type: String
},
point: {
type: Object,
required: true
},
selected: {
type: Object,
required: true
},
driverList: {
type: Array,
required: true
},
driverMapDict: {
type: Object,
required: true
},
},
data() {
return {
menuShow: false,
menu: [
{
label: '设置司机',
handler: this.chooseDriver
},
{
label: '取消司机',
handler: this.cancelDriver
}
]
}
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.SetDriver)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
}
}
},
mounted() {
this.closeEvent();
},
methods: {
closeEvent() {
let self = this;
window.onclick = function (e) {
self.doClose();
}
},
doShow(point) {
this.closeEvent();
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.resetShowPosition(point);
}
this.menuShow = true;
},
doClose() {
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.close();
}
this.menuShow = false;
},
chooseDriver() {
let arrs = Object.values(this.driverMapDict);
let list = this.driverList.filter(elem => {
let ret = true;
arrs.forEach(item => {
if (item.id == elem.id) {
ret = false;
}
});
return ret;
});
export default {
name: 'OperateMenu',
components: {
PopMenu,
ChooseRole
},
props: {
group: {
type: String,
required: true
},
point: {
type: Object,
required: true
},
selected: {
type: Object,
required: true
},
driverList: {
type: Array,
required: true
},
driverMapDict: {
type: Object,
required: true
}
},
data() {
return {
menuShow: false,
menu: [
{
label: '设置司机',
handler: this.chooseDriver
},
{
label: '取消司机',
handler: this.cancelDriver
}
]
};
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.SetDriver)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
}
}
},
mounted() {
this.closeEvent();
},
methods: {
closeEvent() {
const self = this;
window.onclick = function (e) {
self.doClose();
};
},
doShow(point) {
this.closeEvent();
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.resetShowPosition(point);
}
this.menuShow = true;
},
doClose() {
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.close();
}
this.menuShow = false;
},
chooseDriver() {
const arrs = Object.values(this.driverMapDict);
const list = this.driverList.filter(elem => {
let ret = true;
arrs.forEach(item => {
if (item.id == elem.id) {
ret = false;
}
});
return ret;
});
this.$refs.chooseRole.doShow({ title: '设置列车', list: list });
},
async setDriver(obj) {
if (obj && this.selected) {
let params = [{
id: obj.id,
nickName: obj.name,
userRole: 'Driver',
stationCode: '',
trainCode: this.selected._code
}];
this.$refs.chooseRole.doShow({ title: '设置列车', list: list });
},
async setDriver(obj) {
if (obj && this.selected) {
const params = [{
id: obj.id,
nickName: obj.name,
userRole: 'Driver',
stationCode: '',
trainCode: this.selected._code
}];
await putUserRoles(params, this.group);
}
},
async cancelDriver() {
let data = this.driverMapDict[this.selected._code];
if (data) {
let params = [{
id: data.id,
nickName: data.name,
userRole: 'Driver',
stationCode: '',
trainCode: ''
}];
await putUserRoles(params, this.group);
}
},
async cancelDriver() {
const data = this.driverMapDict[this.selected._code];
if (data) {
const params = [{
id: data.id,
nickName: data.name,
userRole: 'Driver',
stationCode: '',
trainCode: ''
}];
await putUserRoles(params, this.group);
}
},
refresh() {
this.$emit('refresh');
}
}
}
await putUserRoles(params, this.group);
}
},
refresh() {
this.$emit('refresh');
}
}
};
</script>

16
src/views/trainRoom/index.vue
View File

@ -46,7 +46,7 @@
/>
<div style="float: right; margin-right: 15px;">
<el-select
v-model="nor.stationCode"
v-model="nor.deviceCode"
placeholder="请选择"
size="mini"
:disabled="userId != roomInfo.creatorId"
@ -396,7 +396,7 @@ export default {
this.messageInfo('您被管理员踢出房间。', 'warning');
} else {
param.userRole = '';
param['stationCode'] = '';
param['deviceCode'] = '';
const arr = [];
arr.push(param);
this.addrolesList(arr); // 删除角色信息
@ -490,7 +490,7 @@ export default {
this.stationList.forEach(item => {
item.disabled = false;
this.equipmentList.forEach(nor => {
if (item.code == nor.stationCode) {
if (item.code == nor.deviceCode) {
item.disabled = true;
}
});
@ -549,7 +549,7 @@ export default {
async start() {
let flag = true;
this.equipmentList.forEach(item => {
if (!item.stationCode) {
if (!item.deviceCode) {
flag = false;
}
});
@ -600,13 +600,13 @@ export default {
id: val.id,
nickName: val.nickName,
userRole: 'Attendant',
stationCode: val.stationCode
deviceCode: val.deviceCode
}];
putUserRoles(params, this.$route.query.group);
this.stationList.forEach(item => {
item.disabled = false;
this.equipmentList.forEach(nor => {
if (item.code == nor.stationCode) {
if (item.code == nor.deviceCode) {
item.disabled = true;
}
});
@ -693,7 +693,7 @@ export default {
this.stationList.forEach(item => {
item.disabled = false;
this.equipmentList.forEach(nor => {
if (item.code == nor.stationCode) {
if (item.code == nor.deviceCode) {
item.disabled = true;
}
});
@ -723,7 +723,7 @@ export default {
id: item.id,
nickName: item.nickName,
userRole: 'Audience',
stationCode: ''
deviceCode: ''
}];
putUserRoles(params, this.$route.query.group);
},

156
src/views/trainRoom/operateMenu.vue
View File

@ -1,83 +1,85 @@
<template>
<div class="jointRoomMenu">
<pop-menu ref="popMenu" :menu="menu"></pop-menu>
</div>
<div class="jointRoomMenu">
<pop-menu ref="popMenu" :menu="menu" />
</div>
</template>
<script>
import PopMenu from '@/components/PopMenu';
import { DeviceMenu } from '@/scripts/ConstDic';
import { putJointTrainingUserkicked } from '@/api/chat';
import PopMenu from '@/components/PopMenu';
import { DeviceMenu } from '@/scripts/ConstDic';
import { putJointTrainingUserkicked } from '@/api/chat';
export default {
name: 'TrainingOperateMenu',
components: {
PopMenu,
},
props: {
point: {
type: Object,
required: true
},
clickUserId: {
type: String,
required: true
}
},
data() {
return {
menu: [],
menuShow: [
{
label: '踢出房间',
handler: this.kicked
},
],
userId: '',
}
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.JointRoom)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
}
}
},
mounted() {
this.userId = this.$store.state.user.id;
this.closeEvent();
},
methods: {
closeEvent() {
let self = this;
window.onclick = function (e) {
self.doClose();
}
},
doShow(point) {
this.closeEvent();
if (this.userId != this.clickUserId) {
this.menu = this.menuShow;
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.resetShowPosition(point);
}
} else {
this.menu = [];
}
export default {
name: 'TrainingOperateMenu',
components: {
PopMenu
},
props: {
point: {
type: Object,
required: true
},
clickUserId: {
type: String,
required: true
}
},
data() {
return {
menu: [],
menuShow: [
{
label: '踢出房间',
handler: this.kicked
}
],
userId: ''
};
},
watch: {
'$store.state.menuOperation.menuCount': function (val) {
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.JointRoom)) {
this.doShow(this.$store.state.menuOperation.menuPosition);
} else {
this.doClose();
}
}
},
mounted() {
this.userId = this.$store.state.user.id;
this.closeEvent();
},
methods: {
closeEvent() {
const self = this;
window.onclick = function (e) {
self.doClose();
};
},
doShow(point) {
this.closeEvent();
if (this.userId != this.clickUserId) {
this.menu = this.menuShow;
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.resetShowPosition(point);
}
} else {
this.menu = [];
}
},
doClose() {
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.close();
}
},
async kicked() {
try {
let res = await putJointTrainingUserkicked(this.clickUserId, this.$route.query.group);
} catch (error) { }
}
}
}
</script>
},
doClose() {
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.close();
}
},
async kicked() {
try {
await putJointTrainingUserkicked(this.clickUserId, this.$route.query.group);
} catch (error) {
console.error(error);
}
}
}
};
</script>

401
src/views/trainRoom/trainChat.vue
View File

@ -1,204 +1,217 @@
<template>
<!-- 聊天窗口 -->
<div class="train-chat">
<audio ref="audio" style="display: none;"></audio>
<div class="chatContent" ref="content">
<ul class="newsList">
<div v-for="(nor, index) in textList" :key="index" style="margin-top: 5px;">
<li v-if="nor.self" style="position: relative">
<div class="userName" style="position: absolute; right: 4px; top: 4px; font-size: 14px;">
{{nor.chatTime}} {{nor.userName}}</div>
<div class="news">
<span>{{nor.value}}</span>
</div>
<div class="yuyin" v-if="nor.voice" @click="playAudio(nor)">
<i class="el-icon-caret-right"></i>
</div>
</li>
<li v-if="nor.other" style="position: relative">
<div class="userName" style="position: absolute; left: 12px; top: 4px; font-size: 14px;">
{{nor.userName}} {{nor.chatTime}}</div>
<div class="answers">
<span>{{nor.value}}</span>
</div>
<div class="yuyin1" v-if="nor.voice" @click="playAudio(nor)">
<i class="el-icon-caret-right"></i>
</div>
</li>
<li v-if="nor.join" style="font-size: 12px; text-align: center;">{{nor.roomTip}}</li>
</div>
</ul>
</div>
<div class="footChat">
<div class="inputBox">
<textarea id="dope" v-model="text" style="width: 99%;height: 47px; border: none;outline: none;" name=""
rows="" cols=""></textarea>
<button class="sendBtn" @click="sendText()">发送文字</button>
<div class="sendBtn yuyin_start zIndex1" :style="{background: background}" @mousedown="startRecording()"
@mouseup="stopRecording()">{{speak}}</div>
<div class="sendBtn yuyin_start zIndex2" :style="{background: background}" v-show="sending">
发送中...</div>
<!-- 聊天窗口 -->
<div class="train-chat">
<audio ref="audio" style="display: none;" />
<div ref="content" class="chatContent">
<ul class="newsList">
<div v-for="(nor, index) in textList" :key="index" style="margin-top: 5px;">
<li v-if="nor.self" style="position: relative">
<div class="userName" style="position: absolute; right: 4px; top: 4px; font-size: 14px;">
{{ nor.chatTime }} {{ nor.userName }}</div>
<div class="news">
<span>{{ nor.value }}</span>
</div>
<div v-if="nor.voice" class="yuyin" @click="playAudio(nor)">
<i class="el-icon-caret-right" />
</div>
</li>
<li v-if="nor.other" style="position: relative">
<div class="userName" style="position: absolute; left: 12px; top: 4px; font-size: 14px;">
{{ nor.userName }} {{ nor.chatTime }}</div>
<div class="answers">
<span>{{ nor.value }}</span>
</div>
<div v-if="nor.voice" class="yuyin1" @click="playAudio(nor)">
<i class="el-icon-caret-right" />
</div>
</li>
<li v-if="nor.join" style="font-size: 12px; text-align: center;">{{ nor.roomTip }}</li>
</div>
</ul>
</div>
<div class="footChat">
<div class="inputBox">
<textarea
id="dope"
v-model="text"
style="width: 99%;height: 47px; border: none;outline: none;"
name=""
rows=""
cols=""
/>
<button class="sendBtn" @click="sendText()">发送文字</button>
<div
class="sendBtn yuyin_start zIndex1"
:style="{background: background}"
@mousedown="startRecording()"
@mouseup="stopRecording()"
>{{ speak }}</div>
<div v-show="sending" class="sendBtn yuyin_start zIndex2" :style="{background: background}">
发送中...</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import HZRecorder from '@/utils/HZRecorder';
import { postDataBd, postDataXf, getHistoryVoice, chatWithText, chatWithAudio, putJointTrainingSimulationEntrance } from '@/api/chat';
import StompClient from '@/utils/sock';
import HZRecorder from '@/utils/HZRecorder';
import { getHistoryVoice, chatWithText, chatWithAudio } from '@/api/chat';
export default {
name: 'trainChat',
props: {
groupRoom: {
type: String,
}
},
data() {
return {
textList: [],
topic: '/user/topic/chatroom',
text: '',
recorders: null,
stomp: null,
speak: '按住说话',
sending: false,
background: '',
userId: '',
}
},
watch: {
'$store.state.socket.chatContentList': function (val) { // 房间内语音聊天
if (val.chatInfo) {
this.handelTextList(val);
}
},
},
async mounted() {
this.userId = this.$store.state.user.id;
// this.getHistory(); // 获取历史记录
},
methods: {
// 发送文字
async sendText() {
if (!this.text.trim()) {
alert('内容为空，不可发送！')
this.text = '';
} else {
try {
let res = await chatWithText(this.text, this.groupRoom);
this.text = '';
} catch (error) { }
}
},
// 语音录制开始
startRecording() {
this.background = '#ccc';
this.speak = '录音中...';
this.sending = false;
HZRecorder.init.get(rec => {
if (typeof rec == 'object') {
this.recorders = rec;
this.recorders.start();
}
});
},
// 停止录制
async stopRecording() {
this.background = '';
this.speak = '按住说话';
this.sending = true;
if (this.recorders) {
this.recorders.stop();
var fd = new FormData();
fd.append("file", this.recorders.getBlob());
let res = await chatWithAudio(fd, this.$route.query.group).catch(error => {
this.sending = false;
let message = JSON.parse(error.message);
if (message.err_no == 3301) {
this.$message({
showClose: true,
message: '音频质量有问题',
type: 'error'
});
} else if (message.err_no == 3308) {
this.$message({
showClose: true,
message: '音频过长,建议60s以下',
type: 'error'
});
} else if (message.err_no == 3314) {
this.$message({
showClose: true,
message: '音频太短,建议重录',
type: 'error'
});
} else {
this.$message({
showClose: true,
message: '网络问题，请重试',
type: 'error'
});
}
});
this.recorders = null;
} else {
this.sending = false;
this.$message({
showClose: true,
message: '音频太短,建议重录',
type: 'error'
});
}
},
playAudio(nor) {
this.$refs.audio.src = nor.src;
this.$refs.audio.play();
},
// 获取历史记录
async getHistory(obj, node, data) {
this.textList = [];
try {
let res = await getHistoryVoice(this.code);
res.data.forEach(item => {
let isSelf = false;
if (item.userId == this.userId) {
isSelf = true;
}
let param = {
join: false,
value: item.message,
self: isSelf,
voice: item.isAudio,
src: item.isAudio ? `${process.env.VOICE_API}/jlcloud/audio/${item.audioPath}` : '',
other: !isSelf,
userName: item.nickName,
chatTime: item.chatTime,
}
this.handelTextList(param);
})
} catch (error) { }
},
// 操作聊天内容list
handelTextList(params) {
if (!params.inSimulation) {
this.textList.push(params);
this.textList.sort((a, b) => {
return a.date - b.date
})
}
this.sending = false;
this.$store.dispatch('socket/setChatContentList', {})
this.$nextTick(() => {
if (this.$refs.content) {
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
}
})
},
}
}
export default {
name: 'TrainChat',
props: {
groupRoom: {
type: String,
required: true
}
},
data() {
return {
textList: [],
topic: '/user/topic/chatroom',
text: '',
recorders: null,
stomp: null,
speak: '按住说话',
sending: false,
background: '',
userId: ''
};
},
watch: {
'$store.state.socket.chatContentList': function (val) { // 房间内语音聊天
if (val.chatInfo) {
this.handelTextList(val);
}
}
},
async mounted() {
this.userId = this.$store.state.user.id;
// this.getHistory(); // 获取历史记录
},
methods: {
// 发送文字
async sendText() {
if (!this.text.trim()) {
alert('内容为空，不可发送！');
this.text = '';
} else {
try {
await chatWithText(this.text, this.groupRoom);
this.text = '';
} catch (error) {
console.error(error);
}
}
},
// 语音录制开始
startRecording() {
this.background = '#ccc';
this.speak = '录音中...';
this.sending = false;
HZRecorder.init.get(rec => {
if (typeof rec == 'object') {
this.recorders = rec;
this.recorders.start();
}
});
},
// 停止录制
async stopRecording() {
this.background = '';
this.speak = '按住说话';
this.sending = true;
if (this.recorders) {
this.recorders.stop();
var fd = new FormData();
fd.append('file', this.recorders.getBlob());
await chatWithAudio(fd, this.$route.query.group).catch(error => {
this.sending = false;
const message = JSON.parse(error.message);
if (message.err_no == 3301) {
this.$message({
showClose: true,
message: '音频质量有问题',
type: 'error'
});
} else if (message.err_no == 3308) {
this.$message({
showClose: true,
message: '音频过长,建议60s以下',
type: 'error'
});
} else if (message.err_no == 3314) {
this.$message({
showClose: true,
message: '音频太短,建议重录',
type: 'error'
});
} else {
this.$message({
showClose: true,
message: '网络问题，请重试',
type: 'error'
});
}
});
this.recorders = null;
} else {
this.sending = false;
this.$message({
showClose: true,
message: '音频太短,建议重录',
type: 'error'
});
}
},
playAudio(nor) {
this.$refs.audio.src = nor.src;
this.$refs.audio.play();
},
// 获取历史记录
async getHistory(obj, node, data) {
this.textList = [];
try {
const res = await getHistoryVoice(this.code);
res.data.forEach(item => {
let isSelf = false;
if (item.userId == this.userId) {
isSelf = true;
}
const param = {
join: false,
value: item.message,
self: isSelf,
voice: item.isAudio,
src: item.isAudio ? `${process.env.VOICE_API}/jlcloud/audio/${item.audioPath}` : '',
other: !isSelf,
userName: item.nickName,
chatTime: item.chatTime
};
this.handelTextList(param);
});
} catch (error) {
console.error(error);
}
},
// 操作聊天内容list
handelTextList(params) {
if (!params.inSimulation) {
this.textList.push(params);
this.textList.sort((a, b) => {
return a.date - b.date;
});
}
this.sending = false;
this.$store.dispatch('socket/setChatContentList', {});
this.$nextTick(() => {
if (this.$refs.content) {
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
}
});
}
}
};
</script>
<style scoped lang="scss">
@ -348,4 +361,4 @@
}
}
}
</style>
</style>