代码调整
This commit is contained in:
joylink_cuiweidong
parent
8b6349ce26
commit
14293f28f1
202
src/views/iscs/iscsSystemNew/stationConfig/environment.vue
Normal file
202
src/views/iscs/iscsSystemNew/stationConfig/environment.vue
Normal file
@ -0,0 +1,202 @@
|
||||
<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 v-if="mode.includes('environmentFive')" class="environmentFive-box">
|
||||
<div class="button_box" :class="{'active': mode == 'environmentFive01'}" @click="handleButton('01', mode == 'environmentFive01')">小系统1模式</div>
|
||||
<div class="button_box" :class="{'active': mode == 'environmentFive02'}" @click="handleButton('02', mode == 'environmentFive02')">小系统2模式</div>
|
||||
<div class="button_box" :class="{'active': mode == 'environmentFive03'}" @click="handleButton('03', mode == 'environmentFive03')">小系统3模式</div>
|
||||
</div>
|
||||
<div v-if="mode.includes('environmentNine')" class="environmentFive-box">
|
||||
<div class="button_box" :class="{'active': mode == 'environmentNine01'}" @click="handleIllumination('01', mode == 'environmentNine01')">照明系统</div>
|
||||
<div class="button_box" :class="{'active': mode == 'environmentNine02'}" @click="handleIllumination('02', mode == 'environmentNine02')">照明系统监测</div>
|
||||
</div>
|
||||
<div v-if="mode.includes('environmentEleven') || mode.includes('environmentTwelve')" class="environmentFive-box">
|
||||
<div class="button_box" :class="{'active': mode == 'environmentEleven'}" @click="handleEnvironment('environmentEleven', mode == 'environmentEleven', '人防门')">人防门</div>
|
||||
<div class="button_box" :class="{'active': mode == 'environmentTwelve'}" @click="handleEnvironment('environmentTwelve', mode == 'environmentTwelve', '防淹门系统')">防淹门</div>
|
||||
</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 './iscsCanvas';
|
||||
import {getIscsData} from '@/api/iscs';
|
||||
export default {
|
||||
name:'Environment',
|
||||
components:{
|
||||
iscsSystem
|
||||
},
|
||||
props: {
|
||||
stationName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
stationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
bacground: 'rgba(0,0,0,0)',
|
||||
loading: false,
|
||||
width: window.innerWidth,
|
||||
scaleRate: window.innerWidth / 1920,
|
||||
height: 1000,
|
||||
system: ''
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
'mode':function() {
|
||||
this.getInitData();
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleButton(type, judge) {
|
||||
if (!judge) {
|
||||
this.mode = `environmentFive${type}`;
|
||||
this.system = 'environmentFive';
|
||||
this.title = `${this.stationName} 小系统${Number(type)}原理图`;
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
handleIllumination(type, judge) {
|
||||
if (!judge) {
|
||||
this.mode = `environmentNine${type}`;
|
||||
this.system = 'environmentNine';
|
||||
this.title = `${this.stationName} 照明系统`;
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
handleEnvironment(type, judge, name) {
|
||||
if (!judge) {
|
||||
this.mode = type;
|
||||
this.title = `${this.stationName} ${name}`;
|
||||
this.getDetail();
|
||||
}
|
||||
},
|
||||
getInitData() {
|
||||
this.system = 'environment';
|
||||
if (this.mode == 'environmentThree') {
|
||||
this.title = this.stationName + ' 隧道通风系统';
|
||||
this.scaleRate = window.innerWidth / 2000;
|
||||
this.height = 1000;
|
||||
} else if (this.mode == 'environmentFour') {
|
||||
this.title = this.stationName + ' 大系统';
|
||||
this.scaleRate = window.innerWidth / 2000;
|
||||
this.height = 900;
|
||||
} else if (this.mode == 'environmentFive') {
|
||||
this.mode = 'environmentFive01';
|
||||
this.system = 'environmentFive';
|
||||
this.title = this.stationName + ' 小系统1原理图';
|
||||
this.scaleRate = window.innerWidth / 2000;
|
||||
this.height = 800;
|
||||
} else if (this.mode == 'environmentSix') {
|
||||
this.title = this.stationName + ' 冷水系统 原理图';
|
||||
this.scaleRate = window.innerWidth / 2000;
|
||||
this.height = 900;
|
||||
} else if (this.mode == 'environmentSeven') {
|
||||
this.title = this.stationName + ' 多联空调 原理图';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 900;
|
||||
} else if (this.mode == 'environmentEight') {
|
||||
this.title = this.stationName + ' A端 给排水系统';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 900;
|
||||
} else if (this.mode == 'environmentNine') {
|
||||
this.system = 'environmentNine';
|
||||
this.mode = 'environmentNine01';
|
||||
this.title = this.stationName + ' 照明系统';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 800;
|
||||
} else if (this.mode == 'environmentTen') {
|
||||
this.title = this.stationName + ' 自动扶梯系统';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 900;
|
||||
} else if (this.mode == 'environmentThirteen') {
|
||||
this.title = this.stationName + ' 传感器';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 1000;
|
||||
} else if (this.mode == 'environmentEleven') {
|
||||
this.title = this.stationName + ' 人防门';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 900;
|
||||
} else if (this.mode == 'environmentTwelve') {
|
||||
this.title = this.stationName + ' 防淹门系统';
|
||||
this.scaleRate = window.innerWidth / 1920;
|
||||
this.height = 900;
|
||||
}
|
||||
this.getDetail();
|
||||
},
|
||||
getDetail() {
|
||||
const params = {
|
||||
// lineCode: this.$route.query.lineCode,
|
||||
mapId: this.$route.query.mapId,
|
||||
system: this.system,
|
||||
totalSystem :'environment02',
|
||||
userInterface : this.mode
|
||||
};
|
||||
this.loading = true;
|
||||
this.$refs.iscsPlate.show({}, this.width, this.height, this.scaleRate);
|
||||
getIscsData(params).then(resp=>{
|
||||
this.loading = false;
|
||||
if (resp.data) {
|
||||
const data = JSON.parse(resp.data.graphData);
|
||||
this.$refs.iscsPlate.show(data, this.width, this.height, this.scaleRate);
|
||||
document.querySelector('.Substation').scrollTop = 0;
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.environmentFive-box{
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
top: 68px;
|
||||
z-index: 100;
|
||||
.button_box{
|
||||
background: #D1C1C4;
|
||||
border: 1px solid #fff;
|
||||
float: left;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
&.active{
|
||||
color: #939393;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/views/iscs/iscsSystemNew/stationConfig/fas.vue
Normal file
0
src/views/iscs/iscsSystemNew/stationConfig/fas.vue
Normal file
@ -2,21 +2,41 @@
|
||||
<div style="height: 100%; width: 100%;overflow-y:hidden;overflow-x:hidden;position: relative;">
|
||||
<psd-system v-if="mode=='psdSystem'" :station-name="stationName" />
|
||||
<substation v-else-if="mode=='substation'" :station-id="stationId" :station-name="stationName" />
|
||||
|
||||
<environment v-else-if="mode.includes('environment')" :station-id="stationId" :station-name="stationName" :mode="mode" />
|
||||
<fas v-else-if="fasList.includes(mode)" />
|
||||
<signal-system v-else-if="mode === 'signal'" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PsdSystem from './psdSystem.vue';
|
||||
import Substation from './substation.vue';
|
||||
import Environment from './environment.vue';
|
||||
import Fas from './fas.vue';
|
||||
import SignalSystem from './signalSystem.vue';
|
||||
|
||||
export default {
|
||||
name:'StationConfig',
|
||||
components: {
|
||||
PsdSystem,
|
||||
Substation
|
||||
Substation,
|
||||
Environment,
|
||||
Fas,
|
||||
SignalSystem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: '',
|
||||
stationName:''
|
||||
stationName:'',
|
||||
fasList:[
|
||||
'sensing',
|
||||
'gas',
|
||||
'section',
|
||||
'linkage',
|
||||
'stationHall',
|
||||
'platform'
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user