140 lines
4.8 KiB
Vue
140 lines
4.8 KiB
Vue
<template>
|
|
<div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)" style="width:100%;height:100%;">
|
|
<div class="Substation" :style="{'background':bacground}">
|
|
<div class="Substation_header">{{ title }}</div>
|
|
<div>
|
|
<iscsSystem ref="iscsPlate" />
|
|
</div>
|
|
<!-- <div class="psdSystem_footer">
|
|
<div class="prevButton">{{}}</div>
|
|
<div class="nextButton">{{}}</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import iscsSystem from '../canvas/iscsCanvas';
|
|
import {getIscsData} from '@/api/iscs';
|
|
export default {
|
|
name:'Substation',
|
|
components:{
|
|
iscsSystem
|
|
},
|
|
data() {
|
|
return {
|
|
title:'',
|
|
bacground:'rgba(0,0,0,0)',
|
|
loading:false,
|
|
width:window.innerWidth,
|
|
scaleRate:window.innerWidth / 2200
|
|
};
|
|
},
|
|
computed:{
|
|
stationName() {
|
|
return this.$route.query.stationName;
|
|
},
|
|
stationId() {
|
|
return this.$route.query.stationId;
|
|
},
|
|
height() {
|
|
return 970;
|
|
}
|
|
},
|
|
watch:{
|
|
$route() {
|
|
this.getInitData();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getInitData();
|
|
},
|
|
methods:{
|
|
getInitData() {
|
|
const params = {
|
|
// lineCode: this.$route.query.lineCode,
|
|
mapId: this.$route.query.mapId,
|
|
system: 'powerMonitoring',
|
|
totalSystem :'powerMonitoring02'
|
|
};
|
|
if (this.stationId == 'mainHouseOne' || this.stationId == 'mainHouseTwo') {
|
|
this.bacground = 'rgba(0,0,0,0)';
|
|
this.scaleRate = window.innerWidth / 2200;
|
|
if (this.stationId == 'mainHouseOne') {
|
|
this.title = '黄山主变电所接线图';
|
|
} else {
|
|
this.title = '茶亭主变电所接线图';
|
|
}
|
|
params.userInterface = 'substation';
|
|
// parkingLotName
|
|
// stationDepotName
|
|
} else if (this.stationId == 'controlCenter') {
|
|
this.title = '';
|
|
this.bacground = '#000';
|
|
this.scaleRate = window.innerWidth / 2000;
|
|
params.userInterface = 'hybrid';
|
|
} else if (this.stationId == 'parkingLot') {
|
|
this.title = '清凉山停车场接触网图';
|
|
this.scaleRate = window.innerWidth / 2000;
|
|
this.bacground = 'rgba(0,0,0,0)';
|
|
params.userInterface = 'catenary';
|
|
} else if (this.stationId == 'stationDepot') {
|
|
this.title = '新店车辆段接触网图';
|
|
this.bacground = 'rgba(0,0,0,0)';
|
|
this.scaleRate = window.innerWidth / 2000;
|
|
params.userInterface = 'catenary';
|
|
} else {
|
|
const tractionList = ['象峰站', '罗汉山站', '树兜站', '东街口站', '达道站', '三叉街站', '葫芦阵站', '城门站', '胪雷站', '安平站', '梁厝站', '三江口站'];
|
|
if (tractionList.includes(this.stationName)) {
|
|
this.title = this.stationName + ' 牵引降压混合变电所主接线图';
|
|
if (this.stationName == '象峰站') {
|
|
params.userInterface = 'combined01';
|
|
} else if (this.stationName == '罗汉山站') {
|
|
params.userInterface = 'combined02';
|
|
} else if (this.stationName == '树兜站') {
|
|
params.userInterface = 'combined03';
|
|
} else {
|
|
params.userInterface = 'combined02';
|
|
}
|
|
params.system = 'combined';
|
|
} else {
|
|
this.title = this.stationName + ' 降压变电所主接线图';
|
|
params.userInterface = 'stepDown';
|
|
}
|
|
this.scaleRate = window.innerWidth / 2000;
|
|
this.bacground = 'rgba(0,0,0,0)';
|
|
|
|
}
|
|
this.loading = true;
|
|
this.$refs.iscsPlate.show({}, this.width, this.height, this.scaleRate);
|
|
getIscsData(params).then(resp=>{
|
|
if (resp.data) {
|
|
this.loading = false;
|
|
const data = JSON.parse(resp.data.graphData);
|
|
this.$refs.iscsPlate.show(data, this.width, this.height, this.scaleRate);
|
|
document.querySelector('.Substation').scrollTop = 0;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.Substation_header{
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
color: #d8e9a5;
|
|
font-size: 25px;
|
|
}
|
|
.Substation{
|
|
display: inline-block;
|
|
width:100%;
|
|
height:100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
vertical-align: top;
|
|
}
|
|
.SubstationIn{
|
|
display: inline-block;
|
|
}
|
|
</style>
|