修改代码
This commit is contained in:
ival
parent
559a765d27
commit
0c3a91319d
@ -441,7 +441,7 @@ class SkinCode extends defaultStyle {
|
||||
haveTextHSDA: true, // 是否需创建textHSDA对象
|
||||
haveArrowText: true, // 是否需创建arrowText对象
|
||||
haveTrainBorder: false, // 是否需创建trainBorder对象
|
||||
aspectRatio: 7/5, // 字体宽高比例（用以拼接text是计算位置）
|
||||
aspectRatio: 7 / 5, // 字体宽高比例（用以拼接text是计算位置）
|
||||
textOffset: 4, // 字体偏移（用以控制字体据车头的距离）
|
||||
trainWidthMoreText: 8, // 计算列车长度时--列车长比text多出尺寸
|
||||
useSelfFormat: true, // 使用配置项的nameFormat
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
loading: true,
|
||||
runPlanId: 'run-plan-view',
|
||||
myChart: null,
|
||||
PlanConvert: {},
|
||||
@ -163,16 +163,16 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.runPlan.planLoadedCount': function () {
|
||||
'$store.state.runPlan.planLoadedCount': async function () {
|
||||
try {
|
||||
this.loadChartPage();
|
||||
await this.loadChartPage();
|
||||
if (this.dialogShow) {
|
||||
this.loadInitData(this.series);
|
||||
await this.loadInitData(this.series);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loading = true;
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
'$store.state.runPlan.planUpdateCount': function () {
|
||||
|
||||
@ -29,7 +29,6 @@ import { Notification } from 'element-ui';
|
||||
import { startTraining, endTraining } from '@/api/jmap/training';
|
||||
import { trainingNotify } from '@/api/simulation';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import { exitFullscreen } from '@/utils/screen';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
|
||||
|
||||
@ -1,490 +0,0 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="relation" :style="{ width: widthLeft +'px' }">
|
||||
<drap-left :width-left="widthLeft" :max="300" :min="180" :width="6" :is-save="false" @drapWidth="drapWidth" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: '290px' }">
|
||||
<el-tree
|
||||
ref="personTree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
node-key="nodeId"
|
||||
:default-expanded-keys="keyIdList"
|
||||
@node-click="chatClick"
|
||||
@node-contextmenu="showContextMenu"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<operate-menu
|
||||
ref="operateMenu"
|
||||
:group="group"
|
||||
:point="point"
|
||||
:selected="selected"
|
||||
:driver-list="driverList"
|
||||
:driver-map-dict="driverMapDict"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DrapLeft from '@/views/components/drapLeft/index';
|
||||
import OperateMenu from './menuDraft/operateMenu';
|
||||
import ModelType from '@/jmap/constant/deviceType';
|
||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||
import { getJointTrainRoomUserList, getUserRoles } from '@/api/chat';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'ChartView',
|
||||
components: {
|
||||
DrapLeft,
|
||||
OperateMenu
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
stationList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
widthLeft: 180,
|
||||
userId: '',
|
||||
code: '',
|
||||
label: '',
|
||||
selected: {},
|
||||
message: {},
|
||||
data: {}, // 数据内容
|
||||
userRole: '', // 个人权限
|
||||
userList: [], // 观众列表
|
||||
driverList: [], // 司机列表
|
||||
treeData: [ // 角色列表 顺序定死
|
||||
{
|
||||
children: [],
|
||||
name: this.$t('joinTraining.admin'),
|
||||
nodeId: 'admin01',
|
||||
type: 'select',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
name: this.$t('joinTraining.teacher'),
|
||||
nodeId: 'admin02',
|
||||
type: 'select',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
name: this.$t('joinTraining.dispatcher'),
|
||||
nodeId: 'admin03',
|
||||
type: 'select',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
name: this.$t('joinTraining.stationAttendant'),
|
||||
nodeId: 'admin04',
|
||||
type: 'select',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
name: this.$t('joinTraining.driver'),
|
||||
nodeId: 'admin05',
|
||||
type: 'select',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
children: [],
|
||||
name: this.$t('joinTraining.universalAccount'),
|
||||
nodeId: 'admin06',
|
||||
type: 'select',
|
||||
show: false
|
||||
}
|
||||
],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: this.formatName
|
||||
},
|
||||
driverMapDict: {},
|
||||
keyIdList: [],
|
||||
messageList: [],
|
||||
point: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'stationList': async function (val) { // 执行一次 以后不会有变化
|
||||
if (val) {
|
||||
await this.getUserList();
|
||||
this.initMenu(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.roleList': function (val) { // 仿真聊天
|
||||
val.forEach(item => {
|
||||
this.treeData[4].children.forEach(elem => {
|
||||
if (elem.driver && item.userRole == 'Driver' && elem.driver.id == item.id) {
|
||||
this.selected = elem;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
'$store.state.training.simulationGroupCount': async function () {
|
||||
await this.loadRunData();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
EventBus.$on('trainView', this.updateTrainList);
|
||||
},
|
||||
beforeDestroy() {
|
||||
EventBus.$off('trainView');
|
||||
},
|
||||
methods: {
|
||||
async loadRunData() {
|
||||
await this.getUserList();
|
||||
|
||||
EventBus.$on('trainView', this.updateTrainList);
|
||||
|
||||
this.getUserRole();
|
||||
},
|
||||
formatName(data, node) {
|
||||
let name = data.name ? data.name : data.groupNumber;
|
||||
if (data.driver) {
|
||||
name = `${name}(${data.driver.nickName})`;
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
drapWidth(width) {
|
||||
this.widthLeft = Number(width);
|
||||
},
|
||||
// 获取设备集中站
|
||||
initMenu(list) {
|
||||
this.treeData[3].children = [];
|
||||
list.forEach(station => {
|
||||
if (station.centralized) {
|
||||
const param = {
|
||||
name: station.name,
|
||||
code: station.code,
|
||||
id: '',
|
||||
nodeId: station.code,
|
||||
children: null,
|
||||
show: false,
|
||||
index: 3
|
||||
};
|
||||
this.treeData[3].children.push(param);
|
||||
}
|
||||
});
|
||||
|
||||
this.userList.forEach(item => {
|
||||
if (item.userRole == 'Attendant') {
|
||||
this.treeData[3].children.forEach(nor => {
|
||||
if (nor.code == item.stationCode) {
|
||||
nor.name = `${nor.name}【${item.nickName}】`;
|
||||
nor.id = item.id;
|
||||
nor.nodeId = item.id;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取人成员列表
|
||||
async getUserList() {
|
||||
const rest = await getJointTrainRoomUserList(this.group);
|
||||
this.userList = rest.data;
|
||||
this.treeData[0].children = [];
|
||||
this.treeData[1].children = [];
|
||||
this.treeData[2].children = [];
|
||||
this.treeData[5].children = [];
|
||||
this.driverMapDict = {};
|
||||
this.driverList = [];
|
||||
|
||||
this.userList.forEach(item => {
|
||||
const param = {
|
||||
name: item.nickName,
|
||||
id: item.id,
|
||||
nodeId: item.id,
|
||||
children: null,
|
||||
show: false,
|
||||
index: ''
|
||||
};
|
||||
|
||||
if (item.userRole == 'Admin') {
|
||||
param.index = 0;
|
||||
this.treeData[0].children.push(param);
|
||||
} else if (item.userRole == 'Instructor') {
|
||||
param.index = 1;
|
||||
this.treeData[1].children.push(param);
|
||||
} else if (item.userRole == 'Dispatcher') {
|
||||
param.index = 2;
|
||||
this.treeData[2].children.push(param);
|
||||
} else if (item.userRole == 'Driver') {
|
||||
param.index = 4;
|
||||
this.driverList.push(param);
|
||||
} else if (item.userRole == 'Repair') {
|
||||
param.index = 5;
|
||||
this.treeData[5].children.push(param);
|
||||
}
|
||||
});
|
||||
|
||||
this.updateDriverInfo(this.userList);
|
||||
},
|
||||
// 点击左侧人员并选择
|
||||
async chatClick(obj) {
|
||||
if (obj.type && obj.type == 'select') {
|
||||
obj.show = false;
|
||||
this.$emit('showChatNone');
|
||||
} else {
|
||||
if (obj.show) {
|
||||
let data = {};
|
||||
this.messageList.forEach((item, index) => {
|
||||
if (item.member.id == obj.id) {
|
||||
data = item;
|
||||
this.messageList.splice(index, 1);
|
||||
}
|
||||
});
|
||||
|
||||
this.$emit('showChatSpeak', data);
|
||||
this.treeData[obj.index].show = false;
|
||||
obj.show = false;
|
||||
} else {
|
||||
this.updateConversationId(obj);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取个人权限
|
||||
async getUserRole() {
|
||||
const res = await getUserRoles(this.group);
|
||||
this.userRole = res.data.userRole;
|
||||
if (this.userRole != 'Audience' && this.userRole != '') {
|
||||
await this.getUserList();
|
||||
this.initMenu(this.stationList);
|
||||
}
|
||||
},
|
||||
// 更新聊天的回话Id
|
||||
updateConversationId(obj) {
|
||||
let id = obj.id;
|
||||
const code = obj.code || obj._code;
|
||||
if (obj.driver) {
|
||||
id = obj.driver.id;
|
||||
}
|
||||
|
||||
if (code || id) {
|
||||
this.$emit('showChat', { code: code, id: id });
|
||||
}
|
||||
},
|
||||
// 更新列车列表
|
||||
updateTrainList() {
|
||||
const list = this.$store.getters['training/viewTrainList']();
|
||||
if (this.treeData[4].children.length != list.length) {
|
||||
this.treeData[4].children = [];
|
||||
if (list && list.length) {
|
||||
list.sort((a, b) => {
|
||||
return Number(a.groupNumber) - Number(b.groupNumber);
|
||||
});
|
||||
|
||||
list.forEach(item => {
|
||||
item.driver = this.driverMapDict[item._code];
|
||||
item.nodeId = item._code;
|
||||
item.show = false;
|
||||
item.index = 4;
|
||||
this.treeData[4].children.push(item);
|
||||
});
|
||||
|
||||
this.$refs.personTree.updateKeyChildren('admin05', this.treeData[4].children.slice());
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新司机信息
|
||||
updateDriverInfo(list) {
|
||||
this.updateConversationId(this.selected);
|
||||
list.forEach(item => {
|
||||
if (item.userRole == 'Driver') {
|
||||
if (item.trainCode) {
|
||||
// 添加司机
|
||||
this.driverMapDict[item.trainCode] = item;
|
||||
} else {
|
||||
// 取消司机
|
||||
Object.keys(this.driverMapDict).forEach(key => {
|
||||
const oDriver = this.driverMapDict[key];
|
||||
const nDriver = this.selected.driver;
|
||||
if (oDriver && nDriver && oDriver.id == nDriver.id) {
|
||||
delete this.driverMapDict[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.treeData[4].children = [];
|
||||
this.updateTrainList();
|
||||
},
|
||||
// 右键显示设置司机菜单
|
||||
showContextMenu(e, obj, node, vueElem) {
|
||||
if (this.$store.state.map.roles == 'Admin') {
|
||||
e.preventDefault();
|
||||
this.point = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
};
|
||||
|
||||
if (obj._type == ModelType.Train) {
|
||||
this.selected = obj;
|
||||
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: DeviceMenu.SetDriver });
|
||||
}
|
||||
}
|
||||
},
|
||||
select(id) {
|
||||
this.keyIdList = [];
|
||||
this.$refs.personTree.setCurrentKey(null);
|
||||
if (id) {
|
||||
this.keyIdList = [id];
|
||||
this.$refs.personTree.setCurrentKey(id);
|
||||
const node = this.$refs.personTree.getCurrentNode();
|
||||
if (node) {
|
||||
node.show = false;
|
||||
this.treeData[node.index].show = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
hintInfo(data) {
|
||||
switch (data.member.role) {
|
||||
case '01':
|
||||
this.treeData[0].show = true;
|
||||
this.treeData[0].children.forEach(nor => {
|
||||
if (nor.id == data.member.id) {
|
||||
nor.show = true;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '02':
|
||||
this.treeData[1].show = true;
|
||||
this.treeData[1].children.forEach(nor => {
|
||||
if (nor.id == data.member.id) {
|
||||
nor.show = true;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '03':
|
||||
this.treeData[2].show = true;
|
||||
this.treeData[2].children.forEach(nor => {
|
||||
if (nor.id == data.member.id) {
|
||||
nor.show = true;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '04':
|
||||
this.treeData[3].show = true;
|
||||
this.treeData[3].children.forEach(nor => {
|
||||
if (nor.id == data.member.id) {
|
||||
nor.show = true;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '05':
|
||||
this.treeData[4].show = true;
|
||||
break;
|
||||
case '06':
|
||||
this.treeData[4].show = true;
|
||||
this.treeData[4].children.forEach(nor => {
|
||||
if (nor.driver && nor.driver.id == data.member.id) {
|
||||
nor.show = true;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '07':
|
||||
this.treeData[5].show = true;
|
||||
this.treeData[5].children.forEach(nor => {
|
||||
if (nor.id == data.member.id) {
|
||||
nor.show = true;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
this.messageList.push(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.el-tree {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ {
|
||||
.el-tabs__nav {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #b9f1f1 !important;
|
||||
}
|
||||
|
||||
.el-tree-node:focus>.el-tree-node__content {
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.item-point {
|
||||
.el-badge__content {
|
||||
right: -5px;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #c7c7c7;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.relation {
|
||||
width: 180px;
|
||||
float: left;
|
||||
height: 300px;
|
||||
|
||||
.personnel {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
padding: 3px 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,670 +0,0 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<!-- 点击播放audio -->
|
||||
<audio ref="audio" style="display: none;" />
|
||||
<!-- 单人自动播放 audio -->
|
||||
<audio ref="audioAuto" style="display: none;" />
|
||||
<div v-show="!chatShow" class="hello content">
|
||||
<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;">
|
||||
{{ `${ChatFomat.formatTime(nor.chatTime)} ${ChatFomat.formatName(nor.member)}` }}
|
||||
</div>
|
||||
<div class="news">
|
||||
<span>{{ ChatFomat.formatSay(nor) }}</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;">
|
||||
{{ `${ChatFomat.formatName(nor.member)} ${ChatFomat.formatTime(nor.chatTime)}` }}
|
||||
</div>
|
||||
<div class="answers">
|
||||
<span>{{ ChatFomat.formatSay(nor) }}</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.simulationTip }}</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footChat">
|
||||
<div class="inputBox">
|
||||
<div class="sendBtn zIndex1" :style="{background: background, color: color}" :disabled="true" @mousedown="startRecording()" @mouseup="stopRecording()">{{ speak }}</div>
|
||||
<div v-show="sending" class="sendBtn zIndex2" :style="{background: background}">{{ $t('joinTraining.sending') }}</div>
|
||||
</div>
|
||||
<div v-if="isShowAuto" class="switch-box">
|
||||
<span style="font-size: 12px;">{{ $t('joinTraining.autoplay') }}</span>
|
||||
<el-switch v-model="isAutoPlay" active-color="#13ce66" inactive-color="#d6d6d6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 待播放列表 audio list-->
|
||||
<audio ref="autoPlay" src="" />
|
||||
<!-- 遮罩空白 -->
|
||||
<div v-show="chatShow" class="hello content" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HZRecorder from '@/utils/HZRecorder';
|
||||
import ChatFomat from '@/utils/chatFomat';
|
||||
import { postDataBd, getConversation } from '@/api/chat';
|
||||
import { displayTopic, clearSubscribe } from '@/utils/stomp';
|
||||
import { sendCommand } from '@/api/jmap/training';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'ChartWindow',
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
chatShow: {
|
||||
type: Boolean
|
||||
},
|
||||
speaking: {
|
||||
type: Boolean
|
||||
},
|
||||
isShowAuto: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userId: '',
|
||||
topic: '/user/topic/simulation/chat',
|
||||
recorders: null,
|
||||
textList: [],
|
||||
background: '#edf2fc',
|
||||
color: '#c6c6c6',
|
||||
label: '',
|
||||
message: {},
|
||||
sending: false,
|
||||
speak: this.$t('joinTraining.holdAndTalk'),
|
||||
targetId: '',
|
||||
conversationId: '',
|
||||
allConversationId: '', // 所有人会话id
|
||||
isAutoPlay: false, // 是否自动播放
|
||||
audioList: [],
|
||||
playIndex: 0,
|
||||
playAudioSet: null,
|
||||
speakOf: false, // 说话中 true 不说话状态 false
|
||||
isAllSpeakOf: false, // 群聊标志,
|
||||
ChatFomat: ChatFomat
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
speaking: function (val) {
|
||||
if (!val) {
|
||||
this.background = '#edf2fc';
|
||||
this.color = '#c6c6c6';
|
||||
} else {
|
||||
this.background = '';
|
||||
this.color = '';
|
||||
}
|
||||
},
|
||||
conversationId(val) {
|
||||
this.refreshList(val);
|
||||
},
|
||||
'$store.state.socket.simulationText': function (val) { // 仿真聊天
|
||||
if (val.conversationId) {
|
||||
this.handleSimulationText(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.jointRoomInfo': function (val) { // 综合演练房间信息
|
||||
if (val.creatorId) {
|
||||
this.handleRoomInfo(val);
|
||||
}
|
||||
},
|
||||
'$store.state.socket.chatContentSimuList': function (val) { // 进入、离开仿真信息
|
||||
if (val.id) {
|
||||
this.handelTextList(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.userId = this.$store.state.user.id;
|
||||
if (this.speaking) {
|
||||
this.background = '';
|
||||
this.color = '';
|
||||
}
|
||||
this.allConversationId = await this.getChathistory('', '');
|
||||
EventBus.$on('chatSubscribeStop', () => {
|
||||
this.clearSubscribe();
|
||||
});
|
||||
this.playSetInterval();
|
||||
},
|
||||
beforeDestroy() {
|
||||
EventBus.$off('chatSubscribeStop');
|
||||
clearInterval(this.playAudioSet);
|
||||
this.playAudioSet = null;
|
||||
},
|
||||
methods: {
|
||||
clearSubscribe() {
|
||||
clearSubscribe(displayTopic);
|
||||
},
|
||||
// 人员状态 设置到对话框内容
|
||||
handelTextList(params) {
|
||||
if (params.inRoom) {
|
||||
if (this.conversationId) {
|
||||
const paramState = {
|
||||
key: this.conversationIde,
|
||||
value: params
|
||||
};
|
||||
this.$store.dispatch('socket/setMessage', paramState);
|
||||
}
|
||||
if (params.session == 'session') {
|
||||
this.textList.push(params);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 语音录制开始
|
||||
startRecording() {
|
||||
if (this.speaking && this.conversationId) {
|
||||
this.background = '#ccc';
|
||||
this.speak = this.$t('joinTraining.recording');
|
||||
this.sending = false;
|
||||
this.speakOf = true;
|
||||
HZRecorder.init.get(rec => {
|
||||
if (typeof rec == 'object') {
|
||||
this.recorders = rec;
|
||||
this.recorders.start();
|
||||
} else {
|
||||
this.background = '';
|
||||
this.speak = this.$t('joinTraining.holdAndTalk');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 停止录制
|
||||
async stopRecording() {
|
||||
if (this.speaking && this.conversationId) {
|
||||
this.background = '';
|
||||
this.speak = this.$t('joinTraining.holdAndTalk');
|
||||
this.sending = true;
|
||||
if (this.recorders) {
|
||||
this.recorders.stop();
|
||||
var fd = new FormData();
|
||||
fd.append('file', this.recorders.getBlob());
|
||||
const param = {
|
||||
file: fd,
|
||||
group: this.group,
|
||||
conversationId: this.conversationId
|
||||
};
|
||||
|
||||
postDataBd(param).catch(error => {
|
||||
this.sending = false;
|
||||
this.speakOf = false;
|
||||
const message = JSON.parse(error.message);
|
||||
if (message.err_no == 3301) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('error.problemWithAudioQuality'),
|
||||
type: 'error'
|
||||
});
|
||||
} else if (message.err_no == 3308) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('error.audioIsTooLong'),
|
||||
type: 'error'
|
||||
});
|
||||
} else if (message.err_no == 3314) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('error.audioIsTooShort'),
|
||||
type: 'error'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('error.networkProblem'),
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
this.recorders = null;
|
||||
} else {
|
||||
this.sending = false;
|
||||
this.speakOf = false;
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('error.audioIsTooShort'),
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
playAudio(nor) {
|
||||
this.$refs.audio.src = nor.src;
|
||||
this.$refs.audio.play();
|
||||
},
|
||||
handleRoomInfo(data) {
|
||||
if (data.state == '03') { // 退出房间
|
||||
this.$router.push({ path: `/` });
|
||||
this.clearSubscribe();
|
||||
} else if (data.state == '01') { // 进入准备中
|
||||
const query = { group: this.group };
|
||||
this.$router.push({ path: `/trainroom`, query: query });
|
||||
this.clearSubscribe();
|
||||
}
|
||||
this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
|
||||
},
|
||||
// 获取历史记录list
|
||||
async getChathistory(code, userId) {
|
||||
this.targetId = userId;
|
||||
this.conversationId = '';
|
||||
this.textList = [];
|
||||
this.$store.dispatch('socket/setSimulationTextList');
|
||||
try {
|
||||
// 获取历史记录
|
||||
const params = {
|
||||
code: code || '',
|
||||
userId: this.targetId || '',
|
||||
group: this.group
|
||||
};
|
||||
|
||||
const res = await getConversation(params);
|
||||
this.conversationId = res.data.id;
|
||||
this.isAllSpeakOf = false;
|
||||
if (res.data.group) {
|
||||
this.isAllSpeakOf = true;
|
||||
}
|
||||
|
||||
// 临时历史记录表
|
||||
const list = this.$store.state.socket.message[this.conversationId];
|
||||
if (list && list.length) {
|
||||
this.textList = list.slice();
|
||||
this.textList.sort((a, b) => {
|
||||
return a.date - b.date;
|
||||
});
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.content) {
|
||||
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
return res.data;
|
||||
} catch (error) {
|
||||
this.conversationId = '';
|
||||
}
|
||||
},
|
||||
handleSimulationText(data) {
|
||||
if (data.conversationId == this.conversationId && data.date) {
|
||||
this.textList.push(data);
|
||||
this.textList.sort((a, b) => {
|
||||
return a.date - b.date;
|
||||
});
|
||||
}
|
||||
if (data.conversationId && data.date) { // 保存历史记录表
|
||||
const paramState = {
|
||||
key: data.conversationId,
|
||||
value: data
|
||||
};
|
||||
this.$store.dispatch('socket/setMessage', paramState);
|
||||
}
|
||||
// 对用户说话 有返回 判断
|
||||
if (data.targetMember && data.targetMember.userId && data.member && data.member.userId == this.userId && !data.group && this.speakOf && !this.$refs.audioAuto.currentTime) {
|
||||
// 判断自身对用户说话收到自己信息的时候
|
||||
this.speakOf = false;
|
||||
}
|
||||
// 当在所有人是自动跳转 说完话 有自己信息返回时 可自动跳转
|
||||
if (this.isAllSpeakOf && data.member && data.member.userId == this.userId) {
|
||||
this.speakOf = false;
|
||||
}
|
||||
if (data.targetMember && data.targetMember.userId == this.userId && data.member && data.member.userId == this.targetId && !data.group && this.speakOf && !this.$refs.audioAuto.currentTime) {
|
||||
// 判断自己与用户对话 且 用户先返回内容时
|
||||
this.speakOf = false;
|
||||
}
|
||||
if (data.targetMember && data.targetMember.userId == this.userId && !data.group && data.id && !this.speakOf) {
|
||||
// 他人定位到对自己说话判断
|
||||
this.$emit('handleChatShow', data);
|
||||
} else if (data.targetMember && data.targetMember.userId == this.userId && !data.group && data.id && this.speakOf) {
|
||||
// 他人对自己说话 并且 自己在语音中 判断
|
||||
this.$emit('handleChatList', data);
|
||||
}
|
||||
|
||||
let operate = {};
|
||||
if (data.changeVO && data.changeVO.code) {
|
||||
operate = {
|
||||
val: data.changeVO.val || '',
|
||||
code: data.changeVO.code,
|
||||
type: data.changeVO.type,
|
||||
operation: data.changeVO.operation
|
||||
};
|
||||
}
|
||||
|
||||
this.sending = false;
|
||||
this.$store.dispatch('socket/setSimulationTextList');
|
||||
this.$nextTick(() => {
|
||||
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
||||
if (data.id != this.userId && data.conversationId == this.conversationId && !data.group && data.targetMember && data.targetMember.userId == this.userId) {
|
||||
// 自己与机器对话机器返回 并播放且单对单语音
|
||||
this.$refs.audioAuto.src = '';
|
||||
this.$refs.audioAuto.src = data.src;
|
||||
this.$refs.audioAuto.load();
|
||||
this.$refs.audioAuto.play();
|
||||
const that = this;
|
||||
this.$refs.audioAuto.onended = function () {
|
||||
that.speakOf = false;
|
||||
that.$refs.audioAuto.currentTime = null;
|
||||
if (data.changeVO && data.changeVO.code) {
|
||||
sendCommand(that.$route.query.group, operate);
|
||||
}
|
||||
};
|
||||
}
|
||||
if (this.isAutoPlay && data.id != this.userId && data.group && this.isShowAuto &&
|
||||
(!data.targetMember || data.targetMember.userId != this.userId)) {
|
||||
this.autoPlay(data.src, data.value);
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshList(conversationId) {
|
||||
this.textList = [];
|
||||
this.conversationId = conversationId;
|
||||
const list = this.$store.state.socket.message[conversationId];
|
||||
if (list && list.length) {
|
||||
this.textList = list.slice();
|
||||
this.textList.sort((a, b) => {
|
||||
return a.date - b.date;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 未读消息并说话
|
||||
handleTextList(conversationId) {
|
||||
this.refreshList(conversationId);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
|
||||
if (this.textList.length && this.textList[this.textList.length - 1].userId != this.userId) {
|
||||
this.$refs.audioAuto.src = this.textList[this.textList.length - 1].src;
|
||||
this.$refs.audioAuto.play();
|
||||
}
|
||||
});
|
||||
},
|
||||
autoPlay(src, name) {
|
||||
const param = {
|
||||
src: src,
|
||||
name: name
|
||||
};
|
||||
this.audioList.push(param);
|
||||
},
|
||||
playSetInterval() {
|
||||
const that = this;
|
||||
this.playAudioSet = setInterval(() => {
|
||||
if (this.isAutoPlay && this.audioList && this.audioList.length && !this.$refs.autoPlay.currentTime) {
|
||||
const data = this.audioList.shift();
|
||||
if (data) {
|
||||
this.$refs.autoPlay.src = data.src;
|
||||
this.$refs.autoPlay.play();
|
||||
}
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.autoPlay) {
|
||||
this.$refs.autoPlay.onended = function () {
|
||||
const data = that.audioList.shift();
|
||||
if (data) {
|
||||
if (that.isAutoPlay) {
|
||||
that.$refs.autoPlay.src = data.src;
|
||||
that.$refs.autoPlay.play();
|
||||
} else {
|
||||
that.audioList = [];
|
||||
that.$refs.autoPlay.currentTime = null;
|
||||
}
|
||||
} else {
|
||||
that.$refs.autoPlay.currentTime = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
},
|
||||
clearPlay() {
|
||||
this.conversationId = ''; // 会话id
|
||||
this.audioList = []; // 播放列表
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.el-tree {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node.is-current>.el-tree-node__content {
|
||||
background-color: #e4e3e3 !important;
|
||||
}
|
||||
</style>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
/deep/ {
|
||||
.el-tabs__nav {
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #c7c7c7;
|
||||
}
|
||||
|
||||
.box {
|
||||
/* display: flex; */
|
||||
/* justify-content: center; */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.audio-boxs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
-webkit-box-orient: vertical;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
|
||||
.chatContent {
|
||||
-webkit-box-flex: 1;
|
||||
overflow-y: scroll;
|
||||
padding-right: 8px;
|
||||
height: 268px;
|
||||
|
||||
.newsList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.yuyin {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 21px;
|
||||
margin-right: 3px;
|
||||
float: right;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.yuyin1 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 21px;
|
||||
margin-left: 3px;
|
||||
float: left;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nesHead {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
margin-left: 15px;
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news {
|
||||
max-width: 55%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: #2683f5;
|
||||
padding: 6px 10px;
|
||||
margin-top: 15px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
float: right;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
|
||||
.jiao {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nesHead img {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.answerHead img {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.answerHead {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
margin-left: 15px;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.answers {
|
||||
max-width: 55%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: #eee;
|
||||
padding: 5px 10px;
|
||||
margin-top: 15px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
float: left;
|
||||
text-align: left;
|
||||
|
||||
.jiao {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footChat {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
position: relative;
|
||||
|
||||
.inputBox {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
||||
textarea {
|
||||
width: 99%;
|
||||
height: 75px;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.sendBtn {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
/* background: #0188fb; */
|
||||
border: 0;
|
||||
/* position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px; */
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.zIndex1 {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.zIndex2 {
|
||||
z-index: 2;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user