rt-sim-training-client/src/views/newMap/displayNew/menuSchema.vue
2020-07-29 10:27:02 +08:00

275 lines
10 KiB
Vue

<template>
<div>
<div class="schema" :style="{top: offset+'px'}">
<!-- (isScript&&!isScriptCommand) || -->
<el-select v-if="isDesignPlatform" v-model="swch" size="small" :placeholder="$t('display.schema.selectProduct')" @change="switchMode">
<el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
<!-- showSelectStation&&((!isScriptCommand&&swch=='01')||(isScriptCommand && isLocalStation)) -->
<el-select v-if="showSelectStation && isLocalStation && !isScript" v-model="showStationContent" style="width: 100px;" size="small" @change="switchStationModeInfo">
<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="isDemon && isDesignPlatform && !dataError" size="small" :disabled="viewDisabled" type="success" @click="viewScriptRoles">{{ $t('display.schema.selectRoles') }}</el-button>
<!-- 加载剧本 -->
<el-button v-if="isDemon && !isDesignPlatform && !isScheduling && !dataError" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{ $t('display.schema.loadScript') }}</el-button>
<!-- 运行图加载 -->
<el-button v-if="notScript && runing && !dataError" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
<el-button v-if="!runing && notScript && !dataError" size="small" type="warning" @click="loadRunPlan">{{ $t('display.schema.loadRunDiagram') }}</el-button>
<el-button v-if="mode==OperateMode.FAULT && !dataError" size="small" type="danger" @click="setFault">自动故障设置</el-button>
</el-button-group>
<el-radio-group v-if="!isScheduling && !dataError" v-model="mode" size="small" @change="changeOperateMode(mode)">
<el-radio-button class="mode" :label="OperateMode.NORMAL">{{ $t('display.schema.normalOperation') }}</el-radio-button>
<el-radio-button class="mode" :label="OperateMode.FAULT">故障模式</el-radio-button>
</el-radio-group>
</div>
<fault-choose v-if="isDemon || isScript" ref="faultChoose" :group="group" :offset="offset" />
<run-plan-Load ref="runPlanLoad" :group="group" />
<run-plan-view ref="runPlanView" :group="group" />
<!-- 加载剧本列表弹窗 -->
<add-quest ref="addQuest" @selectQuest="selectQuest" />
</div>
</template>
<script>
import RunPlanLoad from './demon/runPlanLoad';
import RunPlanView from './demon/runPlanView';
import FaultChoose from './demon/faultChoose';
import AddQuest from './demon/addQuest';
import { mapGetters } from 'vuex';
import { OperateMode } from '@/scripts/ConstDic';
// import { getStationList } from '@/api/runplan';
import { getByGroupStationList } from '@/api/jmap/map';
import {loadDraftScript, loadDraftScriptNew} from '@/api/designPlatform';
import { getEveryDayRunPlanNew, loadScriptNew } from '@/api/simulation';
import Vue from 'vue';
// 右上角操作
export default {
name: 'MenuSchema',
components: {
RunPlanLoad,
RunPlanView,
FaultChoose,
AddQuest
},
props: {
offset: {
type: Number,
required: true
},
showSelectStation: {
type: Boolean,
default() {
return false;
}
},
stationList: {
type: Array,
default() {
return [];
}
},
showStation: {
type: String,
default() {
return '';
}
},
dataError: {
type: Boolean,
default() {
return false;
}
}
},
data() {
return {
mode: OperateMode.NORMAL,
OperateMode: OperateMode,
viewDisabled: true,
runing: false,
swch: '02',
showStationContent:'',
isScriptCommand:false,
swchList: [
{ value: '01', name: '现地' },
{ value: '02', name: '行调' }
]
};
},
computed: {
...mapGetters('runPlan', [
'stations'
]),
group() {
return this.$route.query.group;
},
notScript() {
return this.$route.params.mode !== 'script';
},
isScript() {
return this.$route.params.mode === 'script';
},
isDemon() {
return this.$route.params.mode === 'demon';
},
isDesignPlatform() { // 是否剧本预览页面
return this.$route.fullPath.includes('design/displayNew/demon');
},
isScheduling() {
return this.$route.query.prdType === '05';
},
isLocalStation() {
return this.$store.state.training.prdType === '01';
},
drawWay() {
const drawWay = this.$route.query.drawWay;
return drawWay && JSON.parse(drawWay);
}
},
watch: {
'$store.state.training.started': function (val) {
this.setRuning(val);
},
'$store.state.training.switchcount': async function () {
if (this.group) {
const started = this.$store.state.training.started;
if (started) {
await this.loadRunData(this.$route.query);
}
}
},
'$store.state.scriptRecord.bgSet':function (val) {
this.isScriptCommand = val;
if (!val) {
this.swch = '01';
}
},
'showStation':function(val) {
this.showStationContent = val;
},
'$store.state.training.prdType':function(val) {
if (val == '01') { this.switchModeInner('01'); } else { this.switchModeInner('02'); }
}
},
async mounted() {
await this.loadRunData(this.$route.query);
},
methods: {
loadRunData(opt) {
this.$store.dispatch('runPlan/clear').then(() => {
if (opt && opt.mapId) {
this.viewDisabled = true;
getByGroupStationList(this.$route.query.group).then(response => {
// getStationList(opt.mapId).then(response => {
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
getEveryDayRunPlanNew(this.group).then(resp => {
this.$store.dispatch('runPlan/setPlanData', resp.data);
this.$store.dispatch('runPlan/setInitialPlanData', resp.data);
this.viewDisabled = false;
}).catch(error => {
this.$store.dispatch('runPlan/setPlanData', []);
if (error.code == 30001) {
this.$messageBox(this.$t('display.schema.todayRunDiagramNoLoad'));
} else {
!this.dataError && this.$messageBox(this.$t('display.schema.getRunDiagramFail'));
}
});
});
}).catch(() => {
this.$messageBox(this.$t('display.schema.getStationListFail'));
});
}
});
},
changeOperateMode(handle) {
this.$store.dispatch('training/changeOperateMode', { mode: handle });
},
setRuning(run) {
this.runing = run;
},
setFault() {
this.$refs.faultChoose.doShow();
},
loadRunPlan() {
this.$refs.runPlanLoad.doShow();
},
viewRunPlan() {
this.$refs.runPlanView.doShow();
},
viewRunQuest() {
this.$refs.addQuest.doShow();
},
viewScriptRoles() {
const row = {id: this.$route.query.scriptId, group:this.$route.query.group, drawWay:this.$route.query.drawWay};
this.$refs.addQuest.handleLoad(1, row);
},
async selectQuest(row, id, mapLocation, roleName) {
try {
let res;
if (this.isDesignPlatform) {
res = this.drawWay ? await loadDraftScriptNew(id, this.group) : await loadDraftScript(row.id, id, this.group);
} else {
res = await loadScriptNew(row.id, id, this.group);
}
if (res && res.code == 200) {
this.questId = parseInt(row.id);
if (mapLocation) {
const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
Vue.prototype.$jlmap.setOptions(newMapLocation);
}
}
this.$emit('selectQuest', {row, roleName, id});
} catch (error) {
this.$messageBox(error.message);
}
},
switchMode(swch) {
this.$emit('switchMode', swch);
this.switchModeInner(swch);
},
switchModeInner(swch) {
let showMode = '03';
if (swch == '01') {
showMode = '03';
} else if (swch == '02') {
showMode = '02';
}
const nameList = Object.keys(this.$store.state.map.map || {});
let list = [];
nameList.forEach(item => {
if (item !== 'skinVO') {
const data = this.$store.state.map.map[item];
if (data && data.constructor === Array) {
list = [...list, ...data];
}
}
});
if (swch == '01') {
this.$emit('switchStationMode', this.showStationContent); // 设置显示集中站元素
} else {
this.$jlmap.updateShowStation(list, ''); // 显示全部元素
}
this.$jlmap.updateShowMode(list, showMode); // 二次过滤
},
switchStationModeInfo(val) {
this.showStationContent = val;
this.$emit('switchStationMode', val);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.schema {
z-index: 9;
display: inline;
position: absolute;
right: 5px;
}
/deep/ .el-button+.el-button {
margin-left: 0px;
}
</style>