469 lines
17 KiB
Vue
469 lines
17 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- <div>
|
||
|
|
<div class="reminder-drag" v-show="!minimize">
|
||
|
|
<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"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tabs-content">
|
||
|
|
<div v-show="activeName == 'first'">
|
||
|
|
<chart-view ref="chatView" @showChatSpeak="showChatSpeak" @showChat="showChat"
|
||
|
|
:group="group" @showChatNone="showChatNone" :stationList="stationLists">
|
||
|
|
</chart-view>
|
||
|
|
</div>
|
||
|
|
<div style="flex-grow: 1">
|
||
|
|
<chart-window ref="chat" @handleChatShow="handleChatShow" @handleChatList="handleChatList"
|
||
|
|
:group="group" :chatShow="chatShow" :speaking="isSpeaking" :isShowAuto="isShowAuto">
|
||
|
|
</chart-window>
|
||
|
|
</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" :isShowAuto="true"></chart-window>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="reminder-drag minimize-box" v-show="minimize">
|
||
|
|
<div class="chat-title">聊天窗口</div>
|
||
|
|
<div class="minimality" @click="handleMinimality('max')">
|
||
|
|
<i class="el-icon-circle-plus"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<div class="display-draft">
|
||
|
|
<el-button-group>
|
||
|
|
<el-button type="jumpjlmap3d" v-if="this.$store.state.map.roles == 'Driver'" @click="jumpjlmap3d">司机视角</el-button>
|
||
|
|
<el-button type="success" v-if="this.$store.state.map.roles == 'Admin'" @click="selectBeginTime"
|
||
|
|
:disabled="isDisable">按计划行车</el-button>
|
||
|
|
<el-button type="danger" v-if="this.$store.state.map.roles == 'Admin'" @click="end" :disabled="!isDisable">
|
||
|
|
退出计划</el-button>
|
||
|
|
<el-button type="primary" @click="back">返回</el-button>
|
||
|
|
</el-button-group>
|
||
|
|
</div>
|
||
|
|
<qr-code ref="qrCode"></qr-code>
|
||
|
|
<set-time ref="setTime" @ConfirmSelectBeginTime="start"></set-time>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ChartView from '@/views/jointTraining/chartView';
|
||
|
|
import QrCode from "@/components/QrCode";
|
||
|
|
import SetTime from '@/views/display/demon/setTime';
|
||
|
|
import ChartWindow from './chatWindow';
|
||
|
|
import { mapGetters } from 'vuex';
|
||
|
|
import { getGoodsTryUse } from '@/api/jmap/mapdraft';
|
||
|
|
import { runDiagramIsStart, runDiagramStart, runDiagramOver, setTrainingCbtcInitTime, runDiagramGetTime } from '@/api/simulation';
|
||
|
|
import { TrainingMode, OperateMode, PermissionType } from '@/scripts/ConstDic';
|
||
|
|
import { exitFullscreen } from '@/utils/screen';
|
||
|
|
import { getCountTime } from '@/utils/index';
|
||
|
|
import { loadMapData } from '@/utils/loaddata';
|
||
|
|
import { putJointTrainingSimulationUser, getUserRoles } from '@/api/chat';
|
||
|
|
import { timeFormat } from '@/utils/date';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MenuDemonJoint',
|
||
|
|
components: {
|
||
|
|
ChartView,
|
||
|
|
ChartWindow,
|
||
|
|
QrCode,
|
||
|
|
SetTime
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
group: {
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
userRole: {
|
||
|
|
type: String,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isDisable: 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: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$store.state.config.menuBarLoadedCount': function (val) {
|
||
|
|
this.setPosition();
|
||
|
|
},
|
||
|
|
'$store.state.map.map.stationList': function (val) { // 执行一次 以后不会有变化
|
||
|
|
if (val.length) {
|
||
|
|
this.stationList = val;
|
||
|
|
this.stationLists = val;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.roleInfo': function (val) {
|
||
|
|
if (val.length) {
|
||
|
|
this.addrolesList(val);
|
||
|
|
this.$store.dispatch('config/updateMenuBar');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.socket.simulationStart': async function (val) {
|
||
|
|
if (val) {
|
||
|
|
await this.loadSystemTime();
|
||
|
|
this.$store.dispatch('training/simulationStart', { start: true });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isSpeaking() {
|
||
|
|
return this.userRole != 'Driver' && this.userRole != '';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
this.userId = this.$store.state.user.id;
|
||
|
|
await this.InitLoadPage();
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
this.$store.dispatch('map/setGroup', '');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async InitLoadPage() {
|
||
|
|
try {
|
||
|
|
let 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');
|
||
|
|
}
|
||
|
|
|
||
|
|
await this.loadSystemTime();
|
||
|
|
} 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;
|
||
|
|
},
|
||
|
|
loadSystemTime() {
|
||
|
|
runDiagramGetTime(this.group).then(response => {
|
||
|
|
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${timeFormat(response.data)}`));
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleMinimality(data) {
|
||
|
|
if (data == 'min') {
|
||
|
|
this.minimize = true;
|
||
|
|
} else {
|
||
|
|
this.minimize = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
let menuBar = document.getElementById('menuBar');
|
||
|
|
let 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 司机 Repair 通号
|
||
|
|
addrolesList(list) {
|
||
|
|
list.forEach(item => {
|
||
|
|
if (this.userId == item.id) {
|
||
|
|
switch (item.userRole) {
|
||
|
|
case 'Instructor': {
|
||
|
|
this.$store.dispatch('map/setPrdType', '02'); this.$store.dispatch('map/setRoles', 'Instructor');
|
||
|
|
this.$emit('getUserRole');
|
||
|
|
} break;
|
||
|
|
case 'Dispatcher': {
|
||
|
|
this.$store.dispatch('map/setPrdType', '02'); this.$store.dispatch('map/setRoles', 'Dispatcher');
|
||
|
|
this.$emit('getUserRole');
|
||
|
|
} break;
|
||
|
|
case 'Attendant': {
|
||
|
|
if (!item['stationCode']) {
|
||
|
|
this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/setRoles', 'Attendant');
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
this.$store.dispatch('map/setPrdType', '01'); this.$store.dispatch('map/setRoles', 'Attendant');
|
||
|
|
this.$emit('getUserRole');
|
||
|
|
} break;
|
||
|
|
case 'Driver': {
|
||
|
|
this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/setRoles', 'Driver');
|
||
|
|
this.$emit('getUserRole');
|
||
|
|
} break;
|
||
|
|
case 'Repair': {
|
||
|
|
this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/setRoles', 'Repair');
|
||
|
|
this.$emit('getUserRole');
|
||
|
|
} break;
|
||
|
|
default: {
|
||
|
|
this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/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();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
selectBeginTime() {
|
||
|
|
this.$refs.setTime.doShow();
|
||
|
|
},
|
||
|
|
start(model) {
|
||
|
|
this.isDisable = true;
|
||
|
|
runDiagramStart(model, 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;
|
||
|
|
this.$messageBox('开始仿真失败，请返回重试');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
end() {
|
||
|
|
this.isDisable = false;
|
||
|
|
eventBus.$emit('trainView');
|
||
|
|
runDiagramOver(this.group).catch(error => {
|
||
|
|
this.$store.dispatch('training/over').then(() => {
|
||
|
|
this.isDisable = true;
|
||
|
|
this.$messageBox('结束仿真失败，请返回');
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
back() {
|
||
|
|
this.$store.dispatch('training/over').then(() => {
|
||
|
|
putJointTrainingSimulationUser(this.group).then(() => {
|
||
|
|
this.$router.push({ path: `/trainroom`, query: { group: this.group } });
|
||
|
|
exitFullscreen();
|
||
|
|
})
|
||
|
|
});
|
||
|
|
},
|
||
|
|
jumpjlmap3d() {
|
||
|
|
this.$emit('hidepanel');
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
|
|
@import "src/styles/mixin.scss";
|
||
|
|
|
||
|
|
.display-card {
|
||
|
|
z-index: 9;
|
||
|
|
display: inline;
|
||
|
|
position: absolute;
|
||
|
|
top: 17px;
|
||
|
|
float: left;
|
||
|
|
left: 160px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.minimality {
|
||
|
|
float: right;
|
||
|
|
line-height: 40px;
|
||
|
|
margin-right: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs-content {
|
||
|
|
height: 300px;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-card .el-row {
|
||
|
|
line-height: 32px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.minimize-box {
|
||
|
|
bottom: 10px;
|
||
|
|
width: 300px;
|
||
|
|
height: 40px;
|
||
|
|
|
||
|
|
.chat-title {
|
||
|
|
float: left;
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 10px;
|
||
|
|
line-height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.minimality {
|
||
|
|
float: right;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
margin-right: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-draft {
|
||
|
|
position: absolute;
|
||
|
|
float: right;
|
||
|
|
right: 40px;
|
||
|
|
bottom: 28px;
|
||
|
|
}
|
||
|
|
</style>
|