rt-sim-training-client/src/views/newMap/displayNew/menuDemon.vue

475 lines
18 KiB
Vue
Raw Normal View History

2019-12-30 09:00:16 +08:00
<template>
<div>
2020-08-20 20:27:19 +08:00
<demon-chat ref="chatbox" :group="group" :user-role="userRole" :offset="offset" />
2020-07-13 13:01:28 +08:00
<div class="display-card" :style="{top: offset+'px'}">
2019-12-30 09:00:16 +08:00
<el-row>
<span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span>
</el-row>
</div>
2020-08-27 17:03:10 +08:00
2020-08-20 20:27:19 +08:00
<demon-menu
ref="demonMenu"
:is-all-show="!dataError"
2020-08-31 13:27:27 +08:00
:jl3dmodel-show="isShow3dmodel && !isShowScheduling && !isDrive"
2020-08-20 20:27:19 +08:00
:jl3dname-show="!isShowScheduling&&!isDrive"
:cctv-show="!isShowScheduling"
:schedule-load-show="isShowScheduling && !runing"
:schedule-preview-show="isShowScheduling && runing"
:jlmap3d-fault-show="false"
:driver-show="isDrive"
:all-style="'top:'+(offset+textStatusHeight)+'px'"
/>
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'}" :style="{bottom: offsetBottom + 'px'}">
2020-07-29 13:52:34 +08:00
<el-button-group class="button-group-box">
2020-07-29 14:40:16 +08:00
<el-button type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
2020-07-30 15:32:39 +08:00
<template v-if="!dataError">
2020-08-20 20:27:19 +08:00
<template v-if="isScriptRun">
<el-button type="danger" size="small" @click="handleQuitQuest">退出剧本</el-button>
2020-07-30 15:32:39 +08:00
</template>
<template v-else-if="!projectDevice">
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
2020-07-31 15:24:44 +08:00
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
2020-07-30 15:32:39 +08:00
</template>
2019-12-30 09:00:16 +08:00
</template>
</el-button-group>
</div>
2020-08-20 20:27:19 +08:00
<menu-schema
ref="menuSchema"
:offset="offset"
:data-error="dataError"
:offset-bottom="offsetBottom"
@selectQuest="selectQuest"
/>
2019-12-30 09:00:16 +08:00
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
</div>
</template>
<!-- 单人仿真 -->
<script>
import SetTime from './demon/setTime';
2020-08-20 20:27:19 +08:00
import DemonMenu from './demonMenu';
2020-07-23 17:51:37 +08:00
import DemonChat from './demonChat';
2019-12-30 09:00:16 +08:00
import { Notification } from 'element-ui';
2020-08-20 20:27:19 +08:00
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
2019-12-30 09:00:16 +08:00
import { getGoodsTryUse } from '@/api/management/goods';
2020-05-15 20:45:59 +08:00
import { ranAsPlan, exitRunPlan, clearSimulation, getSimulationInfoNew } from '@/api/simulation';
2019-12-30 09:00:16 +08:00
import { PermissionType } from '@/scripts/ConstDic';
import { getCountTime } from '@/utils/index';
2020-08-20 20:27:19 +08:00
import { TrainingMode } from '@/scripts/ConstDic';
2020-07-10 14:46:18 +08:00
import { quitScriptNew } from '@/api/simulation';
2020-06-29 15:55:31 +08:00
import { setGoodsTryUse } from '@/api/management/goods';
2020-08-20 20:27:19 +08:00
import {loadScriptNew } from '@/api/simulation';
import Vue from 'vue';
2020-08-28 11:30:55 +08:00
import { EventBus } from '@/scripts/event-bus';
2019-12-30 09:00:16 +08:00
export default {
name: 'MenuDemon',
components: {
SetTime,
2020-08-20 20:27:19 +08:00
DemonChat,
MenuSchema,
DemonMenu
2019-12-30 09:00:16 +08:00
},
props: {
offset: {
type: Number,
required: true
},
offsetBottom: {
type: Number,
required: true
},
2020-05-09 20:24:59 +08:00
dataError: {
type: Boolean,
default() {
return false;
}
},
textStatusHeight: {
type: Number,
default() {
return 0;
}
2019-12-30 09:00:16 +08:00
}
},
data() {
return {
isDisable: false,
tryTime: 0, // 进入页面多少秒
timeNow: 0, // 进入页面 相对时间
time: null, // 定时器
countTime: 0, // 显示 倒计时
2020-07-28 16:28:55 +08:00
remainingTime: 0,
2020-08-20 20:27:19 +08:00
userRole:'AUDIENCE',
2019-12-30 09:00:16 +08:00
goodsId: this.$route.query.goodsId,
try: this.$route.query.try, // 是否是试用权限
training: {
id: '',
name: '',
remarks: ''
},
2020-08-20 20:27:19 +08:00
isScriptRun:false,
jl3dpassflow:this.$t('display.demon.passengerflow'),
2019-12-30 09:00:16 +08:00
jl3dname: this.$t('display.demon.threeDimensionalView'),
jl3dstation: this.$t('display.demon.threeDimensionalStation'),
2019-12-30 09:00:16 +08:00
jl3dmodel: this.$t('display.demon.deviceView'),
2020-08-31 13:27:27 +08:00
isShow3dmodel :true,
2020-07-31 18:49:35 +08:00
isGoback: false,
2020-08-20 20:27:19 +08:00
runing:false,
prdTypeMap: {
'01': '01', // 现地 => 现地
'02': '02', // 行调 => 行调
'04': '02', // 司机 => 行调
'05': '' // 派班 => null
}
2019-12-30 09:00:16 +08:00
};
},
computed: {
isShowScheduling() {
return this.$route.query.prdType == '05';
},
2020-08-20 20:27:19 +08:00
isDrive() {
return this.$route.query.prdType == '04';
},
2020-06-29 15:55:31 +08:00
group() {
return this.$route.query.group;
},
2020-07-08 15:40:55 +08:00
projectDevice() {
return this.$route.query.projectDevice;
2019-12-30 09:00:16 +08:00
}
},
watch: {
'$store.state.training.subscribeCount': function () {
this.group && this.initLoadPage();
},
2020-07-08 17:36:32 +08:00
'$store.state.socket.simulationRoleList':function(val) {
(val || []).forEach(item => {
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
2020-07-13 13:01:28 +08:00
!this.isGoback && this.back();
2020-07-08 17:36:32 +08:00
}
});
},
'$store.state.socket.simulationOver':function(val) {
2020-07-13 13:01:28 +08:00
!this.isGoback && this.back();
},
2020-08-04 16:27:23 +08:00
// '$store.state.training.started': function (val) {
// this.setRuning(val);
// },
'$store.state.socket.simulationStart':function(val) {
if (val) {
this.setRuning(true);
2020-11-04 18:09:04 +08:00
this.$store.dispatch('training/simulationStart').then(() => {
this.$store.dispatch('map/setShowCentralizedStationNum');
});
}
},
'$store.state.socket.simulationReset':function(val) {
this.setRuning(false);
2019-12-30 09:00:16 +08:00
}
},
2020-08-20 20:27:19 +08:00
created() {
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
if (this.$store.state.training.prdType == '02') {
this.userRole = 'DISPATCHER';
} else if (this.$store.state.training.prdType == '01') {
this.userRole = 'STATION_SUPERVISOR';
} else if (this.$store.state.training.prdType == '04') {
this.userRole = 'DRIVER';
} else if (this.$store.state.training.prdType == '05') {
this.userRole = 'DEPOT_DISPATCHER';
} else {
this.userRole = 'AUDIENCE';
}
},
2019-12-30 09:00:16 +08:00
beforeDestroy() {
if (this.time) {
this.setTryTime();
clearTimeout(this.time);
}
2020-08-13 18:31:23 +08:00
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
2020-08-17 13:21:27 +08:00
this.$store.dispatch('map/resetActiveTrainList', true);
2019-12-30 09:00:16 +08:00
},
2020-07-31 18:49:35 +08:00
mounted() {
2020-08-20 20:27:19 +08:00
this.$store.dispatch('training/end', TrainingMode.NORMAL);
this.$store.dispatch('training/setPrdType', this.prdTypeMap[this.$route.query.prdType]);
2020-07-31 18:49:35 +08:00
this.$nextTick(() => {
2020-08-20 20:27:19 +08:00
this.$refs.demonMenu.menuClick();
2020-07-31 18:49:35 +08:00
});
},
2019-12-30 09:00:16 +08:00
methods: {
async initLoadPage() {
try {
if (this.try != '0') {
this.loadInitData();
}
} catch (error) {
console.log(error);
}
},
initPlannedDriving(isDisable) {
this.isDisable = isDisable;
},
2019-12-30 09:00:16 +08:00
loadInitData() {
const data = {
mapId: this.$route.query.mapId,
prdType: this.$route.query.prdType,
2019-12-30 09:00:16 +08:00
permissionType: PermissionType.SIMULATION
};
getGoodsTryUse(data).then(res => {
this.remainingTime = res.data.tryTime;
this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
if (this.try) {
this.time = setInterval(() => {
this.tryTime += 1;
this.countTime = getCountTime(this.timeNow);
if (this.countTime == -1) {
this.back();
}
}, 1000);
}
}).catch(() => {
this.$messageBox(this.$t('display.demon.getTimeFail'));
});
},
selectBeginTime() {
this.$refs.setTime.doShow();
},
2020-07-31 15:24:44 +08:00
start(model) { // 开始仿真
2019-12-30 09:00:16 +08:00
this.isDisable = true;
2020-01-17 11:31:53 +08:00
const data = {
2020-02-24 17:04:39 +08:00
time: model.initTime
2020-01-17 11:31:53 +08:00
};
2020-02-24 17:04:39 +08:00
if (this.$route.query.prdType === '04') {
data.loadNumber = model.loadNum;
}
2020-01-17 11:31:53 +08:00
ranAsPlan(data, this.group).then(res => {
2020-11-04 18:09:04 +08:00
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
2019-12-30 09:00:16 +08:00
}).catch(error => {
this.isDisable = false;
2020-01-17 13:17:12 +08:00
if (error.code == '5001') {
2020-10-28 16:14:57 +08:00
this.$messageBox(this.$t('error.mapDataError') + ',' + this.$t('error.startSimulationFailed'));
2020-01-17 13:17:12 +08:00
} 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'));
2020-08-07 18:28:40 +08:00
} else {
this.$messageBox('按计划行车异常,请退出重试!');
2020-01-17 13:17:12 +08:00
}
2019-12-30 09:00:16 +08:00
});
},
setRuning(run) {
this.runing = run;
2020-08-20 20:27:19 +08:00
this.$refs.demonMenu.hideScheduling(run);
},
2019-12-30 09:00:16 +08:00
end() {
this.isDisable = false;
2020-02-24 17:04:39 +08:00
exitRunPlan(this.group).then(() => {
2019-12-30 09:00:16 +08:00
this.$store.dispatch('training/over').then(() => {
this.$store.dispatch('training/setMapDefaultState').then(() => {
2020-08-17 13:21:27 +08:00
this.$store.dispatch('map/resetActiveTrainList', false);
2019-12-30 09:00:16 +08:00
this.$store.dispatch('map/clearJlmapTrainView');
this.$store.dispatch('map/setTrainWindowShow', false);
});
});
}).catch(() => {
this.isDisable = true;
this.$messageBox(this.$t('display.demon.endSimulationFail'));
});
2020-07-28 16:28:55 +08:00
},
2019-12-30 09:00:16 +08:00
handleQuitQuest() {
2020-07-10 14:46:18 +08:00
quitScriptNew(this.group).then(resp => {
2020-07-31 15:24:44 +08:00
getSimulationInfoNew(this.group).then((res)=>{
2020-08-28 11:30:55 +08:00
this.isDisable = false;
EventBus.$emit('clearRunSeries');
2020-07-10 14:46:18 +08:00
this.quitQuest();
this.initLoadPage();
this.clearAllData();
2020-08-13 18:30:03 +08:00
this.$store.dispatch('scriptRecord/updateBgSet', false);
2020-05-11 16:27:58 +08:00
});
2020-07-10 14:46:18 +08:00
}).catch(() => {
this.$messageBox(this.$t('display.demon.exitTaskFail'));
});
2019-12-30 09:00:16 +08:00
},
2020-08-20 20:27:19 +08:00
// 选择脚本
async selectQuest({row, id, mapLocation, roleName}) {
try {
let userRole = 'AUDIENCE';
if (id) {
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
if (this.$route.query.prdType) {
if (this.$route.query.prdType == '02') {
userRole = 'DISPATCHER';
} else if (this.$route.query.prdType == '01') {
userRole = 'STATION_SUPERVISOR';
} else if (this.$route.query.prdType == '04') {
userRole = 'DRIVER';
} else if (this.$route.query.prdType == '05') {
userRole = 'DEPOT_DISPATCHER';
} else {
userRole = 'AUDIENCE';
}
}
this.$store.dispatch('training/setRoles', userRole);
} else {
this.$store.dispatch('training/setRoles', 'AUDIENCE');
this.$store.dispatch('training/setPrdType', '');
}
2020-09-16 10:49:16 +08:00
// this.$refs.menuSchema.loadRunData();
2020-08-20 20:27:19 +08:00
this.userRole = userRole;
this.$store.dispatch('scriptRecord/updateBgSet', true);
2020-09-11 09:26:51 +08:00
// this.$refs.chatbox.setMembers(id);
(this.$store.state.training.memberData[id] || {}).userId = this.$store.state.user.id;
(this.$store.state.training.memberData[id] || {}).disabled = true;
2020-08-20 20:27:19 +08:00
const res = await loadScriptNew(row.id, id, this.group);
if (res && res.code == 200) {
if (mapLocation) {
const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
Vue.prototype.$jlmap.setOptions(newMapLocation);
}
this.isScriptRun = true;
// this.initLoadPage();
}
} catch (error) {
this.$messageBox(error.message);
}
// if (this.isScript) {
// this.$refs.menuScript.initLoadPage();
// }
},
2020-06-29 15:55:31 +08:00
quitQuest() {
2020-08-20 20:27:19 +08:00
this.isScriptRun = false;
let userRole = '';
if (this.$route.query.prdType) {
if (this.$route.query.prdType == '02') {
userRole = 'DISPATCHER';
} else if (this.$route.query.prdType == '01') {
userRole = 'STATION_SUPERVISOR';
} else if (this.$route.query.prdType == '04') {
userRole = 'DRIVER';
} else if (this.$route.query.prdType == '05') {
userRole = 'DEPOT_DISPATCHER';
} else {
userRole = 'AUDIENCE';
}
}
this.userRole = userRole;
this.$refs.chatbox.clearAllData();
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
this.$store.dispatch('training/setRoles', userRole);
2020-09-11 09:26:51 +08:00
this.$store.dispatch('training/setScriptQuit');
2020-08-25 14:17:04 +08:00
// this.$store.dispatch('scriptRecord/updateSimulationPause', false);
2020-06-29 15:55:31 +08:00
},
2020-05-15 20:45:59 +08:00
clearAllData() {
this.$refs.chatbox.clearAllData();
},
2020-01-03 15:50:26 +08:00
async back() {
2020-07-13 13:01:28 +08:00
this.isGoback = true;
2020-07-08 15:40:55 +08:00
if (this.projectDevice) {
this.$store.dispatch('training/over').then(() => {
this.$store.dispatch('LogOut').then(() => {
location.reload();
});
});
} else {
await clearSimulation(this.group);
this.$store.dispatch('training/over').then(() => {
2020-07-28 16:28:55 +08:00
this.$store.dispatch('map/setShowCentralizedStationCode', '');
2020-07-08 15:40:55 +08:00
history.go(-1);
Notification.closeAll();
});
}
2019-12-30 09:00:16 +08:00
},
setTryTime() {
if (this.try) {
2020-06-29 15:55:31 +08:00
const data = { time: this.tryTime, goodsId: this.goodsId };
if (data.goodsId) {
setGoodsTryUse(data);
}
2019-12-30 09:00:16 +08:00
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.display-card {
z-index: 9;
display: inline-block;
position: absolute;
top: 17px;
left: 160px;
height: 32px;
}
.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;
}
.haerbin_btn_box{
2020-07-29 10:27:02 +08:00
width: 450px;
bottom: 15px!important;
}
2020-05-19 09:45:15 +08:00
</style>
<style lang="scss">
.display-draft {
position: absolute;
2020-07-29 13:52:34 +08:00
right: 10px;
2020-05-19 09:45:15 +08:00
bottom: 15px;
button {
2020-07-29 13:52:34 +08:00
float: right!important;
}
.button-group-box{
float: right;
}
2020-07-29 14:40:16 +08:00
/deep/ .el-button-group>.el-button:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/deep/ .el-button-group>.el-button:first-child{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
2020-07-29 17:41:19 +08:00
border-right-color: transparent;
2020-07-29 14:40:16 +08:00
}
2020-05-19 09:45:15 +08:00
}
2019-12-30 09:00:16 +08:00
</style>