修改代码
This commit is contained in:
ival
parent
559a765d27
commit
0c3a91319d
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -31,7 +31,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dialogShow: false,
|
dialogShow: false,
|
||||||
loading: false,
|
loading: true,
|
||||||
runPlanId: 'run-plan-view',
|
runPlanId: 'run-plan-view',
|
||||||
myChart: null,
|
myChart: null,
|
||||||
PlanConvert: {},
|
PlanConvert: {},
|
||||||
@ -163,16 +163,16 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$store.state.runPlan.planLoadedCount': function () {
|
'$store.state.runPlan.planLoadedCount': async function () {
|
||||||
try {
|
try {
|
||||||
this.loadChartPage();
|
await this.loadChartPage();
|
||||||
if (this.dialogShow) {
|
if (this.dialogShow) {
|
||||||
this.loadInitData(this.series);
|
await this.loadInitData(this.series);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = true;
|
this.loading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'$store.state.runPlan.planUpdateCount': function () {
|
'$store.state.runPlan.planUpdateCount': function () {
|
||||||
|
|||||||
@ -29,7 +29,6 @@ import { Notification } from 'element-ui';
|
|||||||
import { startTraining, endTraining } from '@/api/jmap/training';
|
import { startTraining, endTraining } from '@/api/jmap/training';
|
||||||
import { trainingNotify } from '@/api/simulation';
|
import { trainingNotify } from '@/api/simulation';
|
||||||
import { TrainingMode } from '@/scripts/ConstDic';
|
import { TrainingMode } from '@/scripts/ConstDic';
|
||||||
import { exitFullscreen } from '@/utils/screen';
|
|
||||||
import { timeFormat } from '@/utils/date';
|
import { timeFormat } from '@/utils/date';
|
||||||
import { UrlConfig } from '@/router/index';
|
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>
|
|
||||||
@ -12,124 +12,124 @@ import { putUserRoles } from '@/api/chat';
|
|||||||
import { DeviceMenu } from '@/scripts/ConstDic';
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'OperateMenu',
|
name: 'OperateMenu',
|
||||||
components: {
|
components: {
|
||||||
PopMenu,
|
PopMenu,
|
||||||
ChooseRole
|
ChooseRole
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
group: {
|
group: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
point: {
|
point: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
selected: {
|
selected: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
driverList: {
|
driverList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
driverMapDict: {
|
driverMapDict: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menuShow: false,
|
menuShow: false,
|
||||||
menu: [
|
menu: [
|
||||||
{
|
{
|
||||||
label: this.$t('joinTraining.chooseDriver'),
|
label: this.$t('joinTraining.chooseDriver'),
|
||||||
handler: this.chooseDriver
|
handler: this.chooseDriver
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.$t('joinTraining.cancelDriver'),
|
label: this.$t('joinTraining.cancelDriver'),
|
||||||
handler: this.cancelDriver
|
handler: this.cancelDriver
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$store.state.menuOperation.menuCount': function (val) {
|
'$store.state.menuOperation.menuCount': function (val) {
|
||||||
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.SetDriver)) {
|
if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.SetDriver)) {
|
||||||
this.doShow(this.$store.state.menuOperation.menuPosition);
|
this.doShow(this.$store.state.menuOperation.menuPosition);
|
||||||
} else {
|
} else {
|
||||||
this.doClose();
|
this.doClose();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.closeEvent();
|
this.closeEvent();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
closeEvent() {
|
closeEvent() {
|
||||||
const self = this;
|
const self = this;
|
||||||
window.onclick = function (e) {
|
window.onclick = function (e) {
|
||||||
self.doClose();
|
self.doClose();
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
doShow(point) {
|
doShow(point) {
|
||||||
this.closeEvent();
|
this.closeEvent();
|
||||||
if (this.$refs && this.$refs.popMenu) {
|
if (this.$refs && this.$refs.popMenu) {
|
||||||
this.$refs.popMenu.resetShowPosition(point);
|
this.$refs.popMenu.resetShowPosition(point);
|
||||||
}
|
}
|
||||||
this.menuShow = true;
|
this.menuShow = true;
|
||||||
},
|
},
|
||||||
doClose() {
|
doClose() {
|
||||||
if (this.$refs && this.$refs.popMenu) {
|
if (this.$refs && this.$refs.popMenu) {
|
||||||
this.$refs.popMenu.close();
|
this.$refs.popMenu.close();
|
||||||
}
|
}
|
||||||
this.menuShow = false;
|
this.menuShow = false;
|
||||||
},
|
},
|
||||||
chooseDriver() {
|
chooseDriver() {
|
||||||
const arrs = Object.values(this.driverMapDict);
|
const arrs = Object.values(this.driverMapDict);
|
||||||
const list = this.driverList.filter(elem => {
|
const list = this.driverList.filter(elem => {
|
||||||
let ret = true;
|
let ret = true;
|
||||||
arrs.forEach(item => {
|
arrs.forEach(item => {
|
||||||
if (item.id == elem.id) {
|
if (item.id == elem.id) {
|
||||||
ret = false;
|
ret = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return ret;
|
return ret;
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$refs.chooseRole.doShow({ title: this.$t('joinTraining.chooseDriver'), list: list });
|
this.$refs.chooseRole.doShow({ title: this.$t('joinTraining.chooseDriver'), list: list });
|
||||||
},
|
},
|
||||||
async setDriver(obj) {
|
async setDriver(obj) {
|
||||||
if (obj && this.selected) {
|
if (obj && this.selected) {
|
||||||
const params = [{
|
const params = [{
|
||||||
id: obj.id,
|
id: obj.id,
|
||||||
nickName: obj.name,
|
nickName: obj.name,
|
||||||
userRole: 'Driver',
|
userRole: 'Driver',
|
||||||
stationCode: '',
|
stationCode: '',
|
||||||
trainCode: this.selected._code
|
trainCode: this.selected._code
|
||||||
}];
|
}];
|
||||||
|
|
||||||
await putUserRoles(params, this.group);
|
await putUserRoles(params, this.group);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async cancelDriver() {
|
async cancelDriver() {
|
||||||
const data = this.driverMapDict[this.selected._code];
|
const data = this.driverMapDict[this.selected._code];
|
||||||
if (data) {
|
if (data) {
|
||||||
const params = [{
|
const params = [{
|
||||||
id: data.id,
|
id: data.id,
|
||||||
nickName: data.name,
|
nickName: data.name,
|
||||||
userRole: 'Driver',
|
userRole: 'Driver',
|
||||||
stationCode: '',
|
stationCode: '',
|
||||||
trainCode: ''
|
trainCode: ''
|
||||||
}];
|
}];
|
||||||
|
|
||||||
await putUserRoles(params, this.group);
|
await putUserRoles(params, this.group);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
refresh() {
|
refresh() {
|
||||||
this.$emit('refresh');
|
this.$emit('refresh');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user