103 lines
3.6 KiB
Vue
103 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<el-select v-if="showSelectStation" v-model="showStation" :style="styleCss" size="small" @change="switchStationMode">
|
||
|
|
<el-option v-for="item in stationListMode" :key="item.value" :label="item.name" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from 'vuex';
|
||
|
|
export default {
|
||
|
|
name:'SelectStation',
|
||
|
|
props:{
|
||
|
|
styleCss: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
stationListMode: [], // 设备集中站列表
|
||
|
|
showStation: '', // 展示的设备集中站
|
||
|
|
showSelectStation: false // 是否展示现地选择设备集中站select
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
...mapGetters('map', [
|
||
|
|
'map',
|
||
|
|
'stationList'
|
||
|
|
])
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
'stationList': function () {
|
||
|
|
this.setStationList();
|
||
|
|
},
|
||
|
|
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||
|
|
this.setMode();
|
||
|
|
this.setStationList();
|
||
|
|
this.switchStationMode(this.showStation);
|
||
|
|
},
|
||
|
|
'$store.state.training.centerStationCode': function(code) {
|
||
|
|
if (code) {
|
||
|
|
this.showStation = code;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'$store.state.training.prdType': function (val) { // 根据权限类型计算高度
|
||
|
|
this.setMode();
|
||
|
|
},
|
||
|
|
'$store.state.socket.simulationStart':function(val) {
|
||
|
|
if (val) {
|
||
|
|
if (this.$route.query.lineCode == '06') {
|
||
|
|
this.switchStationMode(this.showStation);// 宁波线 过滤列车显示
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
setMode() {
|
||
|
|
if (this.map) {
|
||
|
|
this.showSelectStation = this.map.skinVO.code === '06' && this.$store.state.training.prdType === '01';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
switchStationMode(val) {
|
||
|
|
if (this.stationListMode.length > 0) {
|
||
|
|
if (val == null) {
|
||
|
|
this.showStation = this.stationListMode[0].value;
|
||
|
|
} else {
|
||
|
|
this.showStation = val;
|
||
|
|
}
|
||
|
|
const nameList = Object.keys(this.$store.state.map.map);
|
||
|
|
let list = [];
|
||
|
|
nameList.forEach(item => {
|
||
|
|
if (this.$store.state.map.map[item] && this.$store.state.map.map[item].constructor === Array) {
|
||
|
|
if (item === 'trainList') {
|
||
|
|
this.$store.state.map.map[item].forEach(elem => {
|
||
|
|
elem && list.push(elem);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
list = [...list, ...this.$store.state.map.map[item]];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.$jlmap.updateShowStation(list, this.showStation);
|
||
|
|
this.setCenter(this.showStation);
|
||
|
|
// this.$store.dispatch('map/setShowCentralizedStationCode', this.showStation);
|
||
|
|
// this.$store.dispatch('map/setShowCentralizedStationNum');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setCenter(code) {
|
||
|
|
this.$jlmap.setCenter(code);
|
||
|
|
},
|
||
|
|
setStationList() {
|
||
|
|
this.stationListMode = [];
|
||
|
|
(this.stationList || []).forEach(item => {
|
||
|
|
if (item.centralized) {
|
||
|
|
this.stationListMode.push({value: item.code, name: item.name});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (this.stationListMode.length && this.showSelectStation) {
|
||
|
|
this.showStation = this.stationListMode[0].value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|