446 lines
16 KiB
Vue
446 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<status-icon v-if="$route.query.lineCode == '11' || $route.query.lineCode == '10'" ref="statusIcon" />
|
|
<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 && !isDrive"
|
|
:jl3dname-show="!isShowScheduling&&!isDrive"
|
|
:cctv-show="!isShowScheduling"
|
|
:trafficplan-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'"
|
|
@runPlanLoadShow="runPlanLoadShow"
|
|
/>
|
|
|
|
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'||$route.query.lineCode == '14'}" :style="{bottom: offsetBottom + 'px'}">
|
|
<el-button-group class="button-group-box">
|
|
<el-button v-if="project !='bjd'" type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
|
|
<template v-if="!dataError&&project != 'bjd'">
|
|
<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>
|
|
|
|
<div v-if="project ==='bjd'" style="position:absolute;right:0;bottom:0"><el-button type="primary" @click="quit">退出</el-button></div>
|
|
|
|
<menu-schema
|
|
ref="menuSchema"
|
|
:offset="offset"
|
|
:data-error="dataError"
|
|
:offset-bottom="offsetBottom"
|
|
@selectQuest="selectQuest"
|
|
/>
|
|
|
|
<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 {getSimulationInfoNew, clearSimulation } from '@/api/simulation';
|
|
import { PermissionType } from '@/scripts/ConstDic';
|
|
import { getCountTime } from '@/utils/index';
|
|
import { TrainingMode } from '@/scripts/ConstDic';
|
|
import { quitScriptNew } from '@/api/simulation';
|
|
import { setGoodsTryUse } from '@/api/management/goods';
|
|
import {loadScriptNew } from '@/api/simulation';
|
|
import StatusIcon from '@/views/components/StatusIcon/statusIcon';
|
|
import Vue from 'vue';
|
|
import { getSessionStorage } from '@/utils/auth';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
|
|
export default {
|
|
name: 'MenuDemon',
|
|
components: {
|
|
SetTime,
|
|
DemonChat,
|
|
MenuSchema,
|
|
DemonMenu,
|
|
StatusIcon
|
|
},
|
|
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 {
|
|
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 :true,
|
|
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;
|
|
},
|
|
projectDevice() {
|
|
return this.$route.query.projectDevice;
|
|
},
|
|
isDisable() {
|
|
return this.$store.state.training.started;
|
|
},
|
|
project() {
|
|
return getSessionStorage('project');
|
|
}
|
|
},
|
|
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);
|
|
this.$store.dispatch('training/simulationStart').then(() => {
|
|
this.$store.dispatch('map/setShowCentralizedStationNum');
|
|
});
|
|
}
|
|
},
|
|
'$store.state.socket.simulationReset':function(val) {
|
|
this.setRuning(false);
|
|
}
|
|
},
|
|
created() {
|
|
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
|
switch (this.$store.state.training.prdType) {
|
|
case '02': { this.userRole = 'DISPATCHER'; break; }
|
|
case '01': { this.userRole = 'STATION_SUPERVISOR'; break; }
|
|
case '04': { this.userRole = 'DRIVER'; break; }
|
|
case '05': { this.userRole = 'DEPOT_DISPATCHER'; break; }
|
|
default: { this.userRole = 'AUDIENCE'; break; }
|
|
}
|
|
},
|
|
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);
|
|
}
|
|
},
|
|
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();
|
|
},
|
|
start(model) { // 开始仿真
|
|
this.$emit('start', model);
|
|
},
|
|
setRuning(run) {
|
|
this.runing = run;
|
|
this.$refs.demonMenu.hideScheduling(run);
|
|
},
|
|
end() {
|
|
this.$emit('end');
|
|
},
|
|
handleQuitQuest() {
|
|
quitScriptNew(this.group).then(resp => {
|
|
getSimulationInfoNew(this.group).then((res)=>{
|
|
EventBus.$emit('clearRunSeries');
|
|
this.quitQuest();
|
|
this.initLoadPage();
|
|
this.clearAllData();
|
|
this.$store.dispatch('scriptRecord/updateBgSet', false);
|
|
});
|
|
}).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.$refs.menuSchema.loadRunData();
|
|
this.userRole = userRole;
|
|
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
|
// 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;
|
|
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.clearAllData();
|
|
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
|
this.$store.dispatch('training/setRoles', userRole);
|
|
this.$store.dispatch('training/setScriptQuit');
|
|
// this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
|
},
|
|
clearAllData() {
|
|
this.$refs.chatbox.clearAllData();
|
|
},
|
|
async back() {
|
|
this.isGoback = true;
|
|
if (this.projectDevice) {
|
|
// || this.project === 'bjd'
|
|
clearSimulation(this.group).then(res=>{
|
|
this.$store.dispatch('training/over').then(() => {
|
|
this.$store.dispatch('LogOut').then(() => {
|
|
// this.$store.dispatch('training/reset');
|
|
// this.$store.dispatch('map/mapClear');
|
|
location.reload();
|
|
});
|
|
});
|
|
});
|
|
} else {
|
|
if (this.project === 'bjd') {
|
|
window.close();
|
|
} else {
|
|
this.$store.dispatch('map/setShowCentralizedStationCode', '');
|
|
history.go(-1);
|
|
Notification.closeAll();
|
|
}
|
|
|
|
}
|
|
},
|
|
setTryTime() {
|
|
if (this.try) {
|
|
const data = { time: this.tryTime, goodsId: this.goodsId };
|
|
if (data.goodsId) {
|
|
setGoodsTryUse(data);
|
|
}
|
|
|
|
}
|
|
},
|
|
runPlanLoadShow() {
|
|
this.$refs.menuSchema.loadRunPlan();
|
|
},
|
|
quit() {
|
|
window.close();
|
|
}
|
|
}
|
|
};
|
|
</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>
|