264 lines
9.6 KiB
Vue
264 lines
9.6 KiB
Vue
<template>
|
||
<div style="height:100%">
|
||
<div class="schema" :style="{top: offset+'px'}">
|
||
<el-select v-if="showSelectStation" v-model="chiShowStation" style="width: 100px;" size="small" @change="switchStationMode">
|
||
<el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />
|
||
</el-select>
|
||
<el-button-group>
|
||
<el-button v-if="userRole=== 'STATION_SUPERVISOR' && !$route.query.projectDevice" size="small" @click="goIbp">IBP盘</el-button>
|
||
<el-button v-if="userRole=== 'DISPATCHER' && !$route.query.projectDevice" size="small" @click="goBigScreen">大屏</el-button>
|
||
<el-button v-if="running && !dataError && $route.query.type !== 'ILW'" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
|
||
<template v-if="isAdmin">
|
||
<el-button v-if="!running && !dataError && $route.query.type !== 'ILW'" size="small" type="warning" @click="loadRunPlan">
|
||
{{ $t('joinTraining.runGraphLoading') }}</el-button><!-- 运行图加载 -->
|
||
</template>
|
||
</el-button-group>
|
||
<el-button v-if="(isAdmin || $route.query.type === 'ILW') && !dataError && !isScreen" size="small" :type="faultMode ? '' : 'primary' " @click="changeOperateMode()">{{ faultMode?' 切换到普通模式':'切换到故障模式' }}</el-button>
|
||
<!-- isCenter && !dataError && !isAdmin 此判断用于以后(目前 暂时不用) -->
|
||
<el-button v-if="isShowDirective" size="small" :type="directiveMode ? 'primary' : ''" @click="changeDirectiveMode()">{{ directiveMode? '切换到普通模式':'切换到指令模式' }}</el-button>
|
||
</div>
|
||
<join-run-plan-view v-if="running && !dataError" ref="runPlanView" :group="group" />
|
||
<select-ibp ref="selectIbp" />
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import { mapGetters } from 'vuex';
|
||
import { OperateMode } from '@/scripts/ConstDic';
|
||
import { getByGroupStationList } from '@/api/jmap/map';
|
||
import { getEveryDayRunPlanNew } from '@/api/simulation';
|
||
import { getSessionStorage } from '@/utils/auth';
|
||
import JoinRunPlanView from '@/views/newMap/displayNew/demon/runPlanView';
|
||
import SelectIbp from '@/views/newMap/displayNew/demon/selectIbp';
|
||
import { getIbpInfoByStation } from '@/api/ibp';
|
||
export default {
|
||
name: 'MenuDemonSchema',
|
||
components:{
|
||
JoinRunPlanView,
|
||
SelectIbp
|
||
},
|
||
props: {
|
||
group: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
offset: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
userRole: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
showSelectStation: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
stationList: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
dataError: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
isAdmin: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
deviceCode: {
|
||
type: String,
|
||
default() {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mode: OperateMode.NORMAL,
|
||
OperateMode: OperateMode,
|
||
viewDisabled: true,
|
||
realData: {},
|
||
series: [],
|
||
chiShowStation: '',
|
||
kmRangeCoordMap: {},
|
||
runPlanData: {},
|
||
userId: '',
|
||
faultMode: false,
|
||
directiveMode: false,
|
||
firstLoad: true
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters('runPlan', [
|
||
'stations'
|
||
]),
|
||
running() {
|
||
return this.$store.state.training.started;
|
||
},
|
||
isScreen() {
|
||
return this.$store.state.training.prdType === '07';
|
||
},
|
||
project() {
|
||
return getSessionStorage('project');
|
||
},
|
||
isShowDirective() { // 哈尔滨项目 行调设备显示
|
||
return this.$route.query.type == 'CW' && this.project == 'heb';
|
||
}
|
||
},
|
||
watch: {
|
||
// '$store.state.training.switchcount': async function () {
|
||
// if (this.group) {
|
||
// const started = this.$store.state.training.started;
|
||
// if (started && !this.firstLoad) {
|
||
// await this.loadRunData(this.$route.query);
|
||
// } else if (this.firstLoad) {
|
||
// await this.loadRunData(this.$route.query);
|
||
// }
|
||
// }
|
||
// }
|
||
'$store.state.map.mapDataLoadedCount': function () {
|
||
this.loadRunData(this.$route.query);
|
||
},
|
||
'$store.state.training.triggerFaultCount': function () {
|
||
this.setFault();
|
||
}
|
||
},
|
||
async mounted() {
|
||
this.userId = this.$store.state.user.id;
|
||
},
|
||
methods: {
|
||
loadRunData(opt) {
|
||
this.$store.dispatch('runPlan/clear').then(resp => {
|
||
if (opt && opt.mapId) {
|
||
this.viewDisabled = true;
|
||
getByGroupStationList(this.$route.query.group).then(response => {
|
||
const stations = response.data;
|
||
this.$store.dispatch('runPlan/setStations', stations).then(() => {
|
||
getEveryDayRunPlanNew(this.group).then(resp => {
|
||
this.$store.dispatch('runPlan/setPlanData', resp.data);
|
||
this.$store.dispatch('runPlan/setInitialPlanData', resp.data);
|
||
this.viewDisabled = false;
|
||
this.firstLoad = false;
|
||
}).catch(error => {
|
||
this.$store.dispatch('runPlan/setPlanData', []);
|
||
if (error.code == 30001) {
|
||
this.$messageBox(this.$t('error.runGraphIsNotLoaded'));
|
||
} else {
|
||
!this.dataError && this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
|
||
}
|
||
});
|
||
});
|
||
}).catch(() => {
|
||
this.$messageBox(this.$t('error.obtainStationListFailed'));
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// initPlannedDriving(isDisable) {
|
||
// this.isDisable = isDisable;
|
||
// },
|
||
changeOperateMode() {
|
||
this.faultMode = !this.faultMode;
|
||
let mode = OperateMode.NORMAL;
|
||
if (this.faultMode) {
|
||
mode = OperateMode.FAULT;
|
||
}
|
||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||
},
|
||
changeDirectiveMode() { // 调整指令模式
|
||
this.directiveMode = !this.directiveMode;
|
||
let mode = OperateMode.NORMAL;
|
||
if (this.directiveMode) {
|
||
mode = OperateMode.DIRECTIVE;
|
||
}
|
||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||
},
|
||
setFault() {
|
||
this.$emit('faultChooseShow');
|
||
},
|
||
loadRunPlan() {
|
||
this.$emit('runPlanLoadShow');
|
||
},
|
||
viewRunPlan() {
|
||
this.$refs.runPlanView.doShow();
|
||
},
|
||
// 选择车站
|
||
switchStationMode(stationCode) {
|
||
this.$emit('switchStationMode', stationCode);
|
||
},
|
||
// 点击大屏预览
|
||
goBigScreen() {
|
||
const routeData = this.$router.resolve({
|
||
path:`/displayBigScreen/${this.$route.query.mapId}`,
|
||
query:{
|
||
lineCode: this.$route.query.lineCode,
|
||
mapId:this.$route.query.mapId,
|
||
group:this.$route.query.group,
|
||
prdType: '07',
|
||
try:0,
|
||
noPreLogout: true
|
||
}
|
||
});
|
||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||
},
|
||
// 点击ibp预览
|
||
goIbp() {
|
||
// this.$refs.selectIbp.doShow();
|
||
getIbpInfoByStation(this.$route.query.mapId, this.deviceCode).then(resp => {
|
||
if (resp.data) {
|
||
const routeData = this.$router.resolve({
|
||
path:`/ibpShow`,
|
||
query:{
|
||
lineCode: this.$route.query.lineCode,
|
||
mapId: this.$route.query.mapId,
|
||
group: this.$route.query.group,
|
||
stationCode: this.deviceCode,
|
||
loadAll: true,
|
||
noPreLogout: true
|
||
}
|
||
});
|
||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||
} else {
|
||
this.$messageBox('本车站暂无IBP盘数据！');
|
||
}
|
||
}).catch((error) => {
|
||
if (error.code == '30001') {
|
||
this.$messageBox('本车站暂无IBP盘数据！');
|
||
} else {
|
||
this.$message.error('获取IBP盘数据异常');
|
||
}
|
||
});
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.schema {
|
||
z-index: 34;
|
||
display: inline;
|
||
position: absolute;
|
||
right: 5px;
|
||
}
|
||
|
||
.schema .el-radio-group .el-radio-button__inner {
|
||
padding: 0px 15px 0px 15px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* /deep/ .el-button+ .el-button {
|
||
margin-left: 0px;
|
||
} */
|
||
</style>
|