256 lines
9.2 KiB
Vue
256 lines
9.2 KiB
Vue
<template>
|
||
<div>
|
||
<div class="display-draft">
|
||
<!-- :style="{bottom: offsetBottom + 'px'}" -->
|
||
<el-button-group>
|
||
<el-button v-if="!isScriptCommand" type="success" :disabled="isDisable || dataError" @click="selectBeginTime">{{ $t('scriptRecord.drivingByPlan') }}</el-button>
|
||
<el-button v-if="!isScriptCommand" type="danger" :disabled="dataError" @click="end">初始化</el-button>
|
||
<el-button type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<div v-if="!dataError" class="display_top_draft" :style="{top: offset+textStatusHeight+'px'}">
|
||
<div class="btn_hover" @click="menuClick">菜单</div>
|
||
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
|
||
<!-- 地图错误判断 -->
|
||
<!-- 设备视图 -->
|
||
<!-- <el-button v-if="isShow3dmodel && !isShowScheduling" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button> -->
|
||
<!-- 三维视图 -->
|
||
<el-button v-if="!isShowScheduling&&!isDriver" size="small" @click="jumpjlmap3d">{{ $t('display.demon.threeDimensionalView') }}</el-button>
|
||
<!-- cctv视图 -->
|
||
<!-- <el-button v-if="!isShowScheduling" size="small" @click="jumpjl3dpassflow">{{ jl3dpassflow }}</el-button> -->
|
||
<!-- 司机视角 -->
|
||
<el-button v-if="isDriver" size="small" type="jumpjlmap3d" @click="jumpjlmap3dDriver">{{ $t('joinTraining.driverPerspective') }}</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<script-chat ref="chatbox" :group="group" :user-role="userRole" />
|
||
<set-time ref="setTime" @ConfirmSelectBeginTime="start" />
|
||
<tip-script-record-new ref="tipTaskRecordNew" :group="group" :offset-bottom="offsetBottom" :offset="offset" />
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 单人仿真 -->
|
||
<script>
|
||
import { getToken } from '@/utils/auth';
|
||
import ScriptChat from './scriptChat';
|
||
import TipScriptRecordNew from '@/views/scriptManage/tipScriptRecord';
|
||
import SetTime from './demon/setTime';
|
||
import { Notification } from 'element-ui';
|
||
import { ranAsPlan, exitRunPlan } from '@/api/simulation';
|
||
import { mapGetters } from 'vuex';
|
||
|
||
export default {
|
||
name: 'MenuTask',
|
||
components: {
|
||
SetTime,
|
||
ScriptChat,
|
||
TipScriptRecordNew
|
||
},
|
||
props: {
|
||
offsetBottom: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
dataError: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
offset: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
textStatusHeight: {
|
||
type: Number,
|
||
default() {
|
||
return 0;
|
||
}
|
||
},
|
||
project:{
|
||
type: String,
|
||
default() {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isDisable: false,
|
||
isScriptCommand:false,
|
||
hoverBtn: false,
|
||
btnWidth: 0
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
scriptId() {
|
||
return this.$route.query.scriptId;
|
||
},
|
||
...mapGetters('map', [
|
||
'trainList'
|
||
]),
|
||
group() {
|
||
return this.$route.query.group;
|
||
},
|
||
userRole() {
|
||
return this.$store.state.scriptRecord.userRole ? this.$store.state.scriptRecord.userRole : 'ADMIN';
|
||
},
|
||
isDriver() {
|
||
return this.$store.state.scriptRecord.userRole == 'DRIVER';
|
||
},
|
||
isShowScheduling() {
|
||
return this.$store.state.training.prdType == '05';
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.scriptRecord.bgSet':function (val) {
|
||
this.isScriptCommand = val;
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
},
|
||
mounted() {
|
||
// this.$store.state.training.prdType
|
||
this.isScriptCommand = this.$store.state.scriptRecord.bgSet;
|
||
if (!this.isScriptCommand) {
|
||
this.$store.dispatch('training/setPrdType', '01');
|
||
}
|
||
this.$nextTick(() => {
|
||
this.menuClick();
|
||
});
|
||
},
|
||
methods: {
|
||
initPlannedDriving(isDisable) {
|
||
this.isDisable = isDisable;
|
||
},
|
||
selectBeginTime() {
|
||
this.$refs.setTime.doShow();
|
||
},
|
||
resetBeginTime() {
|
||
this.isDisable = false;
|
||
},
|
||
menuClick() {
|
||
this.hoverBtn = !this.hoverBtn;
|
||
if (this.hoverBtn) {
|
||
// this.$refs.button_group_box.$el.clientWidth ||
|
||
this.btnWidth = 500; // 默认宽度
|
||
} else {
|
||
// button_group_box
|
||
this.btnWidth = 0;
|
||
}
|
||
},
|
||
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().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'));
|
||
}
|
||
});
|
||
},
|
||
end() {
|
||
this.isDisable = false;
|
||
exitRunPlan(this.group).then(() => {
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||
this.$store.dispatch('map/clearJlmapTrainView');
|
||
this.$store.dispatch('map/resetActiveTrainList');
|
||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||
});
|
||
});
|
||
}).catch(() => {
|
||
this.isDisable = true;
|
||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||
});
|
||
},
|
||
back() {
|
||
this.$store.dispatch('training/over').then(() => {
|
||
this.$store.dispatch('map/resetActiveTrainList');
|
||
history.go(-1);
|
||
Notification.closeAll();
|
||
});
|
||
},
|
||
jumpjlmap3dDriver() {
|
||
this.$emit('script3ddriveshow');
|
||
},
|
||
jumpjlmap3d() {
|
||
const routeData = this.$router.resolve({
|
||
path:'/jlmap3d/sandbox',
|
||
query:{
|
||
mapid:this.$route.query.mapId,
|
||
group:this.group,
|
||
token:getToken(),
|
||
project: this.project,
|
||
noPreLogout: true
|
||
}
|
||
});
|
||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||
}
|
||
}
|
||
};
|
||
</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;
|
||
}
|
||
|
||
.display-draft {
|
||
position: absolute;
|
||
float: right;
|
||
right: 15px;
|
||
bottom: 15px;
|
||
}
|
||
</style>
|