500 lines
18 KiB
Vue
500 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <chat-box /> -->
|
||
<!-- <div v-show="!minimize" class="reminder-drag">
|
||
<div v-if="userRole != '05' && userRole != ''">
|
||
<div class="tabs-roles">
|
||
<div
|
||
class="roles roles-first"
|
||
:class="activeName == 'first' ? 'roles-active':''"
|
||
@click="clickRoles('first')"
|
||
>角色
|
||
</div>
|
||
<div
|
||
class="roles"
|
||
:class="activeName == 'second' ? 'roles-active':''"
|
||
@click="clickRoles('second')"
|
||
>所有人
|
||
</div>
|
||
<div class="minimality" @click="handleMinimality('min')">
|
||
<i class="el-icon-remove" />
|
||
</div>
|
||
</div>
|
||
<div class="tabs-content">
|
||
<div v-show="activeName == 'first'">
|
||
<chart-view
|
||
ref="chatView"
|
||
:group="group"
|
||
:station-list="stationLists"
|
||
@showChatSpeak="showChatSpeak"
|
||
@showChat="showChat"
|
||
@showChatNone="showChatNone"
|
||
/>
|
||
</div>
|
||
<div style="flex-grow: 1">
|
||
<chart-window
|
||
ref="chat"
|
||
:group="group"
|
||
:chat-show="chatShow"
|
||
:speaking="isSpeaking"
|
||
:is-show-auto="isShowAuto"
|
||
@handleChatShow="handleChatShow"
|
||
@handleChatList="handleChatList"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<el-tabs v-model="activeName2" type="card">
|
||
<el-tab-pane label="所有人" name="second">
|
||
<chart-window :speaking="isSpeaking" :group="group" :is-show-auto="true" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div> -->
|
||
<!-- <div v-show="minimize" class="reminder-drag minimize-box">
|
||
<div class="chat-title">聊天窗口</div>
|
||
<div class="minimality" @click="handleMinimality('max')">
|
||
<i class="el-icon-circle-plus" />
|
||
</div>
|
||
</div> -->
|
||
<div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01'}">
|
||
<el-button-group>
|
||
<el-button v-if="isProject" type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
|
||
<el-button v-if="isDriver" type="jumpjlmap3d" @click="jumpjlmap3d">{{ $t('joinTraining.driverPerspective') }}</el-button>
|
||
<template v-if="isAdmin">
|
||
<el-button type="success" :disabled="isDisable" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
|
||
<el-button type="danger" :disabled="!isDisable" @click="end">{{ $t('joinTraining.exitPlan') }}</el-button>
|
||
</template>
|
||
<el-button type="primary" :loading="backLoading" @click="back">{{ $t('global.back') }}</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<qr-code ref="qrCode" />
|
||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||
<real-device ref="realDevice" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QrCode from '@/components/QrCode';
|
||
// import ChartWindow from './chatWindow';
|
||
// import ChartView from './chartView';
|
||
// import ChatBox from './chatBox';
|
||
import SetTime from '@/views/newMap/displayNew/demon/setTime';
|
||
import { ranAsPlan, exitRunPlan } from '@/api/simulation';
|
||
import { exitFullscreen } from '@/utils/screen';
|
||
import { putJointTrainingSimulationUserNew} from '@/api/jointTraining';
|
||
import { EventBus } from '@/scripts/event-bus';
|
||
import { getSessionStorage } from '@/utils/auth';
|
||
import RealDevice from './menuDraft/realDevice';
|
||
|
||
export default {
|
||
name: 'MenuDemonJoint',
|
||
components: {
|
||
// ChartView,
|
||
// ChartWindow,
|
||
// ChatBox,
|
||
QrCode,
|
||
SetTime,
|
||
RealDevice
|
||
},
|
||
props: {
|
||
group: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
userRole: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
deviceCode: {
|
||
type: String,
|
||
default() {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isDisable: false,
|
||
backLoading:false,
|
||
timeNow: 0,
|
||
remainingTime: 0,
|
||
recordStep: 'BGSetting',
|
||
training: {
|
||
id: '',
|
||
name: '',
|
||
remarks: ''
|
||
},
|
||
chatShow: true,
|
||
isShowAuto: false,
|
||
offset: 10,
|
||
userId: '',
|
||
activeName: 'first',
|
||
activeName2: 'second',
|
||
stationList: [],
|
||
stationLists: [],
|
||
minimize: true
|
||
};
|
||
},
|
||
computed: {
|
||
lineCode() {
|
||
return this.$route.query.lineCode;
|
||
},
|
||
isSpeaking() {
|
||
return this.userRole != 'DRIVER' && this.userRole != '';
|
||
},
|
||
isDriver() {
|
||
return this.userRole == 'DRIVER';
|
||
},
|
||
isAdmin() {
|
||
return this.userRole == 'ADMIN';
|
||
},
|
||
isProject() {
|
||
return getSessionStorage('project').endsWith('gzb') && this.userRole === 'CI';
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.config.menuBarLoadedCount': function (val) {
|
||
this.setPosition();
|
||
},
|
||
'$store.state.map.map.stationList': function (val) { // 执行一次 以后不会有变化
|
||
if (val && val.length) {
|
||
this.stationList = val;
|
||
this.stationLists = val;
|
||
}
|
||
},
|
||
'$store.state.socket.roleList': function (val) {
|
||
if (val && val.length) {
|
||
this.$nextTick(() => {
|
||
this.addrolesList(val);
|
||
this.$store.dispatch('config/updateMenuBar');
|
||
});
|
||
}
|
||
},
|
||
'$store.state.socket.simulationStart': async function (val) {
|
||
if (val) {
|
||
this.$store.dispatch('training/simulationStart', { start: true });
|
||
}
|
||
}
|
||
},
|
||
async mounted() {
|
||
this.userId = this.$store.state.user.id;
|
||
this.backLoading = false;
|
||
await this.initLoadPage();
|
||
},
|
||
beforeDestroy() {
|
||
this.$store.dispatch('training/setGroup', '');
|
||
},
|
||
methods: {
|
||
async initLoadPage() {
|
||
try {
|
||
// const resp = await runDiagramIsStart(this.group);
|
||
// if (resp && resp.data) {
|
||
// this.isDisable = true;
|
||
// this.$store.dispatch('training/simulationStart');
|
||
// } else {
|
||
// this.isDisable = false;
|
||
// this.$store.dispatch('training/over');
|
||
// }
|
||
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
// 切换角色tab
|
||
clickRoles(active) {
|
||
if (active == 'first') {
|
||
this.chatShow = true;
|
||
this.isShowAuto = false;
|
||
this.$refs.chatView.select(); // 清空选中
|
||
this.$refs.chat.clearPlay('', ''); // 清空自动播放 会话id
|
||
|
||
} else {
|
||
this.chatShow = false;
|
||
this.isShowAuto = true;
|
||
this.$refs.chat.getChathistory('', ''); // 获取所有人列表
|
||
}
|
||
this.activeName = active;
|
||
},
|
||
|
||
// handleChatShow(data) {
|
||
// if (!this.minimize) { // 最大化状态
|
||
// if (this.activeName == 'first') {
|
||
// this.$refs.chatView.select(data.id);
|
||
// this.chatShow = false;
|
||
// this.isShowAuto = false;
|
||
// this.$refs.chat.handleTextList(data.conversationId);
|
||
// } else {
|
||
// this.activeName = 'first';
|
||
// this.handleChatShow(data);
|
||
// }
|
||
// } else { // 最小化状态
|
||
// this.minimize = false;
|
||
// this.handleChatShow(data);
|
||
// }
|
||
// },
|
||
// 切到未读消息并说话
|
||
// showChatSpeak(data) {
|
||
// this.chatShow = false;
|
||
// this.isShowAuto = false;
|
||
// this.$refs.chat.handleTextList(data.conversationId);
|
||
// },
|
||
// 获取历史纪录list
|
||
showChat(obj) {
|
||
this.chatShow = false;
|
||
this.$refs.chat.getChathistory(obj.code, obj.id);
|
||
},
|
||
handleChatList(data) {
|
||
this.$refs.chatView.hintInfo(data);
|
||
},
|
||
// 设置不显示
|
||
showChatNone() {
|
||
this.chatShow = true;
|
||
},
|
||
messageInfo(message, type) {
|
||
this.$message({
|
||
showClose: true,
|
||
message: message,
|
||
type: type
|
||
});
|
||
},
|
||
setPosition() {
|
||
this.$nextTick(() => {
|
||
let offset = 10;
|
||
const menuBar = document.getElementById('menuBar');
|
||
const menuTool = document.getElementById('menuTool');
|
||
|
||
if (menuBar) {
|
||
offset += (menuBar.offsetHeight || 0);
|
||
}
|
||
|
||
if (menuTool) {
|
||
offset += (menuTool.offsetHeight || 0);
|
||
}
|
||
|
||
if (this.offset != offset) {
|
||
this.offset = offset;
|
||
}
|
||
});
|
||
},
|
||
// 设置用户角色 Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 MAINTAINER 通号
|
||
addrolesList(list) {
|
||
list.forEach(item => {
|
||
if (this.userId == item.id) {
|
||
switch (item.userRole) {
|
||
case 'INSTRUCTOR':
|
||
this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'INSTRUCTOR');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'DISPATCHER':
|
||
this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'DISPATCHER');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'STATION_SUPERVISOR':
|
||
if (!item['deviceCode']) {
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
|
||
break;
|
||
}
|
||
this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'CI':
|
||
this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'CI');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'DRIVER':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'DRIVER');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'MAINTAINER':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'MAINTAINER');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'IBP':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'IBP');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
case 'BIGSCREEN':
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'BIGSCREEN');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
default:
|
||
this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||
this.$emit('getUserRole');
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
if (this.$refs.chatView) {
|
||
this.$refs.chatView.getUserRole();
|
||
}
|
||
},
|
||
handleClick(tab, event) {
|
||
if (this.activeName == 'second') {
|
||
this.$refs.chat.getChathistory();
|
||
}
|
||
},
|
||
initPlannedDriving(isDisable) {
|
||
this.isDisable = isDisable;
|
||
},
|
||
selectBeginTime() {
|
||
this.$refs.setTime.doShow();
|
||
},
|
||
start(model) {
|
||
this.isDisable = true;
|
||
const data = {
|
||
time: model.initTime
|
||
};
|
||
ranAsPlan(data, this.group).then(res => {
|
||
this.$store.dispatch('training/simulationStart').then(() => {
|
||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
|
||
});
|
||
}).catch((error) => {
|
||
this.isDisable = false;
|
||
if (error.code == '5001') {
|
||
this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5002') {
|
||
this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5003') {
|
||
this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5004') {
|
||
this.$messageBox(this.$t('error.runningDataError') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '5000') {
|
||
this.$messageBox(this.$t('error.systemError') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4000') {
|
||
this.$messageBox(this.$t('error.simulationDoesNotExist') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4001') {
|
||
this.$messageBox(this.$t('error.simulationOperationIsNotDefined') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4002') {
|
||
this.$messageBox(this.$t('error.simulationOperationProcessingMethodNotFound') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4003') {
|
||
this.$messageBox(this.$t('error.simulationOperationFailed') + ',' + this.$t('error.startSimulationFailed'));
|
||
} else if (error.code == '4004') {
|
||
this.$messageBox(this.$t('error.operationConflict') + ',' + this.$t('error.startSimulationFailed'));
|
||
}
|
||
});
|
||
},
|
||
end() {
|
||
this.isDisable = false;
|
||
EventBus.$emit('trainView');
|
||
exitRunPlan(this.group).catch(() => {
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.isDisable = true;
|
||
this.$messageBox(this.$t('error.endSimulationFailed'));
|
||
});
|
||
});
|
||
},
|
||
back() {
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.backLoading = true;
|
||
putJointTrainingSimulationUserNew(this.group).then(() => {
|
||
this.$router.replace({ path: `/trainroom`, query: { lineCode: this.lineCode, group: this.group, drawWay: true } });
|
||
exitFullscreen();
|
||
this.backLoading = false;
|
||
});
|
||
});
|
||
},
|
||
jumpjlmap3d() {
|
||
this.$emit('hidepanel');
|
||
},
|
||
setRelDevice() {
|
||
this.$refs.realDevice.doShow();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import "src/styles/mixin.scss";
|
||
.tabs-roles {
|
||
overflow: hidden;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
|
||
.roles {
|
||
padding: 0 20px;
|
||
height: 41px;
|
||
list-style: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
cursor: pointer;
|
||
border-left: 1px solid #e4e7ed;
|
||
border-right: 1px solid #e4e7ed;
|
||
float: left;
|
||
}
|
||
|
||
.roles-first {
|
||
border-right: none;
|
||
}
|
||
|
||
.roles-active {
|
||
border-bottom-color: #fff;
|
||
color: #409EFF;
|
||
}
|
||
|
||
}
|
||
|
||
.tabs-content {
|
||
height: 300px;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.display-score {
|
||
background-color: black;
|
||
display: -moz-inline-box;
|
||
display: inline-block;
|
||
text-align: left;
|
||
height: 32px;
|
||
line-height: 24px;
|
||
border-radius: 4px;
|
||
padding-left: 2px;
|
||
margin-left: 10px;
|
||
font-family: "Microsoft" !important;
|
||
font-size: 18px !important;
|
||
color: #fff;
|
||
}
|
||
|
||
.reminder-drag {
|
||
position: absolute;
|
||
float: left;
|
||
left: 10px;
|
||
bottom: 10px;
|
||
width: 500px;
|
||
height: 340px;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
font-size: 18px;
|
||
|
||
/deep/ {
|
||
.el-tabs__header {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.title-bar {
|
||
height: 40px;
|
||
}
|
||
|
||
.content {
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
.display-draft {
|
||
position: absolute;
|
||
float: right;
|
||
right: 40px;
|
||
bottom: 28px;
|
||
}
|
||
.display-type-hb{
|
||
bottom: 105px;
|
||
}
|
||
</style>
|