497 lines
19 KiB
Vue
497 lines
19 KiB
Vue
<template>
|
||
<div>
|
||
<demon-chat ref="chatbox" :group="group" :user-role="userRole" :offset="offset" />
|
||
<div class="display-card" :style="{top: offset+'px'}">
|
||
<el-row>
|
||
<span v-if="countTime" class="display-score">{{ $t('display.demon.trialTime') }} {{ countTime }}</span>
|
||
</el-row>
|
||
</div>
|
||
<demon-menu
|
||
ref="demonMenu"
|
||
:is-all-show="!dataError"
|
||
:jl3dmodel-show="isShow3dmodel && !isShowScheduling"
|
||
: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'}">
|
||
<el-button-group class="button-group-box">
|
||
<el-button type="primary" size="small" @click="back">退出</el-button>
|
||
<template v-if="!dataError">
|
||
<template v-if="isScriptRun">
|
||
<el-button type="danger" size="small" @click="handleQuitQuest">退出剧本</el-button>
|
||
</template>
|
||
<template v-else-if="!projectDevice">
|
||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||
<el-button type="success" :disabled="isDisable" size="small" @click="selectBeginTime">{{ $t('display.demon.drivingByPlan') }}</el-button>
|
||
</template>
|
||
</template>
|
||
</el-button-group>
|
||
</div>
|
||
|
||
<menu-schema
|
||
ref="menuSchema"
|
||
:offset="offset"
|
||
:data-error="dataError"
|
||
:offset-bottom="offsetBottom"
|
||
@selectQuest="selectQuest"
|
||
@changeMap="changeMap"
|
||
/>
|
||
|
||
<!-- :station-list="stationListMode"
|
||
:show-select-station="showSelectStation"
|
||
@selectQuest="selectQuest"
|
||
@switchStationMode="switchStationMode"
|
||
@switchMode="switchMode" -->
|
||
|
||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- 单人仿真 -->
|
||
<script>
|
||
import SetTime from './demon/setTime';
|
||
import DemonMenu from './demonMenu';
|
||
import DemonChat from './demonChat';
|
||
import { Notification } from 'element-ui';
|
||
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
|
||
import { getGoodsTryUse } from '@/api/management/goods';
|
||
import { ranAsPlan, exitRunPlan, clearSimulation, getSimulationInfoNew } from '@/api/simulation';
|
||
import { PermissionType } from '@/scripts/ConstDic';
|
||
import { getCountTime } from '@/utils/index';
|
||
import { prefixIntrger } from '@/utils/date';
|
||
import { TrainingMode } from '@/scripts/ConstDic';
|
||
import { quitScriptNew } from '@/api/simulation';
|
||
import { setGoodsTryUse } from '@/api/management/goods';
|
||
import {loadScriptNew } from '@/api/simulation';
|
||
import { launchFullscreen } from '@/utils/screen';
|
||
import { createSimulationNew } from '@/api/simulation';
|
||
import Vue from 'vue';
|
||
|
||
export default {
|
||
name: 'MenuDemon',
|
||
components: {
|
||
SetTime,
|
||
DemonChat,
|
||
MenuSchema,
|
||
DemonMenu
|
||
},
|
||
props: {
|
||
offset: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
offsetBottom: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
dataError: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
textStatusHeight: {
|
||
type: Number,
|
||
default() {
|
||
return 0;
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isDisable: false,
|
||
tryTime: 0, // 进入页面多少秒
|
||
timeNow: 0, // 进入页面 相对时间
|
||
time: null, // 定时器
|
||
countTime: 0, // 显示 倒计时
|
||
remainingTime: 0,
|
||
userRole:'AUDIENCE',
|
||
goodsId: this.$route.query.goodsId,
|
||
try: this.$route.query.try, // 是否是试用权限
|
||
training: {
|
||
id: '',
|
||
name: '',
|
||
remarks: ''
|
||
},
|
||
isScriptRun:false,
|
||
jl3dpassflow:this.$t('display.demon.passengerflow'),
|
||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||
jl3dstation: this.$t('display.demon.threeDimensionalStation'),
|
||
jl3dmodel: this.$t('display.demon.deviceView'),
|
||
isShow3dmodel :false,
|
||
isGoback: false,
|
||
runing:false,
|
||
prdTypeMap: {
|
||
'01': '01', // 现地 => 现地
|
||
'02': '02', // 行调 => 行调
|
||
'04': '02', // 司机 => 行调
|
||
'05': '' // 派班 => null
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
isShowScheduling() {
|
||
return this.$route.query.prdType == '05';
|
||
},
|
||
isDrive() {
|
||
return this.$route.query.prdType == '04';
|
||
},
|
||
group() {
|
||
return this.$route.query.group;
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.training.subscribeCount': function () {
|
||
this.group && this.initLoadPage();
|
||
},
|
||
'$store.state.socket.simulationRoleList':function(val) {
|
||
(val || []).forEach(item => {
|
||
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
|
||
!this.isGoback && this.back();
|
||
}
|
||
});
|
||
},
|
||
'$store.state.socket.simulationOver':function(val) {
|
||
!this.isGoback && this.back();
|
||
},
|
||
// '$store.state.training.started': function (val) {
|
||
// this.setRuning(val);
|
||
// },
|
||
'$store.state.socket.simulationStart':function(val) {
|
||
if (val) {
|
||
this.setRuning(true);
|
||
}
|
||
},
|
||
'$store.state.socket.simulationReset':function(val) {
|
||
this.setRuning(false);
|
||
},
|
||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||
const initTime = new Date(this.$store.state.training.initTime || null);
|
||
const model = {initTime:this.formatTime(initTime)};
|
||
this.start(model);
|
||
}
|
||
},
|
||
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';
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (this.time) {
|
||
this.setTryTime();
|
||
clearTimeout(this.time);
|
||
}
|
||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||
},
|
||
mounted() {
|
||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||
this.$store.dispatch('training/setPrdType', this.prdTypeMap[this.$route.query.prdType]);
|
||
this.$nextTick(() => {
|
||
this.$refs.demonMenu.menuClick();
|
||
});
|
||
},
|
||
methods: {
|
||
async initLoadPage() {
|
||
try {
|
||
if (this.try != '0') {
|
||
this.loadInitData();
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
formatTime(initTime) {
|
||
const hh = prefixIntrger(initTime.getHours(), 2);
|
||
const mm = prefixIntrger(initTime.getMinutes(), 2);
|
||
const ss = prefixIntrger(initTime.getSeconds(), 2);
|
||
return `${hh}:${mm}:${ss}`;
|
||
},
|
||
initPlannedDriving(isDisable) {
|
||
this.isDisable = isDisable;
|
||
},
|
||
loadInitData() {
|
||
const data = {
|
||
mapId: this.$route.query.mapId,
|
||
prdType: this.$route.query.prdType,
|
||
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();
|
||
},
|
||
changeMap(query) {
|
||
clearSimulation(this.group).then(res=>{
|
||
const data = { mapId: query.mapId, prdType: query.prdType };
|
||
createSimulationNew(data).then(resp => {
|
||
this.$store.dispatch('training/over');
|
||
this.$store.dispatch('training/reset');
|
||
this.$store.dispatch('map/mapClear');
|
||
this.$store.dispatch('training/setPrdType', this.currentPrdType); // 改变prdType
|
||
query.group = resp.data;
|
||
this.$router.replace({query: query});
|
||
launchFullscreen();
|
||
}).catch(error => {
|
||
this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
|
||
this.disabled = false;
|
||
});
|
||
});
|
||
},
|
||
start(model) { // 开始仿真
|
||
this.isDisable = true;
|
||
const data = {
|
||
time: model.initTime
|
||
};
|
||
if (this.$route.query.prdType === '04') {
|
||
data.loadNumber = model.loadNum;
|
||
}
|
||
ranAsPlan(data, this.group).then(res => {
|
||
this.$store.dispatch('training/simulationStart').then(() => {
|
||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
|
||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||
});
|
||
}).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'));
|
||
} else {
|
||
this.$messageBox('按计划行车异常,请退出重试!');
|
||
}
|
||
});
|
||
},
|
||
setRuning(run) {
|
||
this.runing = run;
|
||
this.$refs.demonMenu.hideScheduling(run);
|
||
},
|
||
end() {
|
||
this.isDisable = false;
|
||
exitRunPlan(this.group).then(() => {
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||
this.$store.dispatch('map/clearJlmapTrainView');
|
||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||
});
|
||
});
|
||
}).catch(() => {
|
||
this.isDisable = true;
|
||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||
});
|
||
},
|
||
handleQuitQuest() {
|
||
quitScriptNew(this.group).then(resp => {
|
||
getSimulationInfoNew(this.group).then((res)=>{
|
||
this.quitQuest();
|
||
this.initLoadPage();
|
||
this.clearAllData();
|
||
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
||
}).catch(()=>{
|
||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||
});
|
||
}).catch(() => {
|
||
this.$messageBox(this.$t('display.demon.exitTaskFail'));
|
||
});
|
||
},
|
||
// 选择脚本
|
||
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', '');
|
||
}
|
||
this.userRole = userRole;
|
||
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||
this.$refs.chatbox.setMembers(id);
|
||
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();
|
||
// }
|
||
},
|
||
quitQuest() {
|
||
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.setMembers(this.$store.state.training.orignalUserRoleId);
|
||
this.$refs.chatbox.clearAllData();
|
||
console.log(this.userRole, '11111111');
|
||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||
this.$store.dispatch('training/setRoles', userRole);
|
||
// this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||
},
|
||
clearAllData() {
|
||
this.$refs.chatbox.clearAllData();
|
||
},
|
||
async back() {
|
||
this.isGoback = true;
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.$store.dispatch('LogOut').then(() => {
|
||
location.reload();
|
||
});
|
||
});
|
||
|
||
},
|
||
setTryTime() {
|
||
if (this.try) {
|
||
const data = { time: this.tryTime, goodsId: this.goodsId };
|
||
if (data.goodsId) {
|
||
setGoodsTryUse(data);
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</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{
|
||
width: 450px;
|
||
bottom: 15px!important;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.display-draft {
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 15px;
|
||
button {
|
||
float: right!important;
|
||
}
|
||
.button-group-box{
|
||
float: right;
|
||
}
|
||
/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;
|
||
border-right-color: transparent;
|
||
}
|
||
|
||
}
|
||
</style>
|