iscs代码调整
This commit is contained in:
joylink_cuiweidong
parent
1a0653c93a
commit
379510017e
@ -1,20 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<station-nav v-if="$route.query.group" />
|
||||
<div style="height:100%">
|
||||
<station-nav v-if="$route.query.group" @selectIscsPane="selectIscsPane" />
|
||||
<div class="content-box-station iscs_content_box" :class="{'displayStationIscs': $route.query.group}">
|
||||
<router-view />
|
||||
<station-config ref="stationConfig" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StationNav from './stationNav.vue';
|
||||
import StationConfig from './stationConfig/index.vue';
|
||||
export default {
|
||||
name:'IscsSystem',
|
||||
components: {
|
||||
// TopNav,
|
||||
// GroupNav,
|
||||
// MenuBar,
|
||||
StationNav
|
||||
StationNav,
|
||||
StationConfig
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -25,7 +27,18 @@ export default {
|
||||
|
||||
},
|
||||
methods:{
|
||||
selectIscsPane(param) {
|
||||
this.$refs.stationConfig.showPane(param);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content-box-station{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 65px 0 50px 0;
|
||||
background: #45607B;
|
||||
}
|
||||
</style>
|
||||
|
||||
27
src/views/iscs/iscsSystemNew/stationConfig/index.vue
Normal file
27
src/views/iscs/iscsSystemNew/stationConfig/index.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%;overflow-y:hidden;overflow-x:hidden;position: relative;">
|
||||
<psd-system v-if="mode=='psdSystem'" :station-name="stationName" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PsdSystem from './psdSystem.vue';
|
||||
export default {
|
||||
name:'StationConfig',
|
||||
components: {
|
||||
PsdSystem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: '',
|
||||
stationName:''
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
showPane(param) {
|
||||
this.mode = param.type;
|
||||
this.stationName = param.stationName;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
40
src/views/iscs/iscsSystemNew/stationConfig/psdSystem.vue
Normal file
40
src/views/iscs/iscsSystemNew/stationConfig/psdSystem.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="psdSystem">
|
||||
<div class="psdSystem_header">{{ stationName+' 屏蔽门系统' }}</div>
|
||||
<div>
|
||||
<!-- <iscsSystem ref="iscsPlate" @viewLoaded="viewLoaded" /> -->
|
||||
<!-- :width-canvas="width" :canvas-height="height" -->
|
||||
</div>
|
||||
<!-- <div class="psdSystem_footer">
|
||||
<div class="prevButton">{{}}</div>
|
||||
<div class="nextButton">{{}}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'PsdSystem',
|
||||
props: {
|
||||
stationName: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.psdSystem_header{
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
color: #d8e9a5;
|
||||
font-size: 25px;
|
||||
}
|
||||
.psdSystem{
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -13,6 +13,32 @@
|
||||
<div class="station-name" :class="index==0?'station-name-first':index%2==1?'station-name-up':'station-name-down'">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightButtonGroup">
|
||||
<div class="rightButtonGroupL">
|
||||
<div class="controlCenter">
|
||||
<div class="station-list-button" :class="{'active': selectStation == 'controlCenter'}" @click="changeStation('controlCenter')" />
|
||||
</div>
|
||||
<div class="stationDepot">
|
||||
<div class="station-list-button" :class="{'active': selectStation == 'stationDepot'}" @click="changeStation('stationDepot')" />
|
||||
</div>
|
||||
<div class="parkingLot">
|
||||
<div class="station-list-button" :class="{'active': selectStation == 'parkingLot'}" @click="changeStation('parkingLot')" />
|
||||
</div>
|
||||
<div class="controlCenterName">控制中心</div>
|
||||
<div class="parkingLotName">停车场</div>
|
||||
<div class="stationDepotName">车辆段</div>
|
||||
</div>
|
||||
<div class="rightButtonGroupR">
|
||||
<div class="mainHouseOne">
|
||||
<div class="station-list-button" :class="{'active': selectStation == 'mainHouseOne'}" @click="changeStation('mainHouseOne')" />
|
||||
</div>
|
||||
<div class="mainHouseTwo">
|
||||
<div class="station-list-button" :class="{'active': selectStation == 'mainHouseTwo'}" @click="changeStation('mainHouseTwo')" />
|
||||
</div>
|
||||
<div class="mainHouseOneName">主所1</div>
|
||||
<div class="mainHouseTwoName">主所2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,6 +48,7 @@ import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import iscs_icon1 from '@/assets/iscs_system/iscs_icon1.png';
|
||||
import iscs_icon2 from '@/assets/iscs_system/iscs_icon2.png';
|
||||
import iscs_icon3 from '@/assets/iscs_system/iscs_icon3.png';
|
||||
import iscs_icon4 from '@/assets/iscs_system/iscs_icon4.png';
|
||||
import iscs_icon5 from '@/assets/iscs_system/iscs_icon5.png';
|
||||
import iscs_icon6 from '@/assets/iscs_system/iscs_icon6.png';
|
||||
import iscs_icon7 from '@/assets/iscs_system/iscs_icon7.png';
|
||||
@ -31,7 +58,9 @@ export default {
|
||||
return {
|
||||
selectStation: 'mainHouseOne',
|
||||
stationList:[],
|
||||
buttonId:'substation',
|
||||
tractionList:[],
|
||||
// buttonId:'substation',
|
||||
buttonId:'psdSystem',
|
||||
buttonList:{
|
||||
stationDescription:{name:'车站概要', type:'totalSystem', id: 'stationDescription', active:false, icon:iscs_icon1 },
|
||||
electric: {name:'电力监控系统', type:'totalSystem', id: 'powerMonitoring', active:false, icon:iscs_icon2,
|
||||
@ -275,18 +304,14 @@ export default {
|
||||
name: station.runPlanName.includes('站') ? station.runPlanName : `${station.runPlanName}站`,
|
||||
id: station.code
|
||||
};
|
||||
|
||||
if (station.centralized) {
|
||||
this.tractionList.push(param.name);
|
||||
}
|
||||
|
||||
this.stationList.push(param);
|
||||
}
|
||||
});
|
||||
}
|
||||
// if (!this.$route.params.mode) {
|
||||
// this.selectChildren(this.buttonId, true);
|
||||
// }
|
||||
this.selectChildren(this.buttonId);
|
||||
},
|
||||
methods:{
|
||||
changeStation(item) {
|
||||
@ -294,8 +319,223 @@ export default {
|
||||
this.selectChildren(this.buttonId);
|
||||
},
|
||||
selectChildren(type) { // 选择菜单
|
||||
let stationName = '';
|
||||
const station = this.stationList.find(each=>{ return each.id == this.selectStation; });
|
||||
if (station) {
|
||||
stationName = station.name;
|
||||
}
|
||||
const param = {
|
||||
stationName: stationName,
|
||||
stationId: this.selectStation,
|
||||
type:type
|
||||
};
|
||||
this.$emit('selectIscsPane', param);
|
||||
// const query = {
|
||||
// stationName: stationName,
|
||||
// stationId: this.selectStation,
|
||||
// group: this.group,
|
||||
// mapId: this.$route.query.mapId,
|
||||
// lineCode:'02',
|
||||
// noPreLogout:this.$route.query.noPreLogout
|
||||
// };
|
||||
// if (isReplace) {
|
||||
// this.$router.replace({ path: `/displayIscs/system/stationConfig/${type}`, query: query });
|
||||
// } else {
|
||||
// this.$router.push({ path: `/displayIscs/system/stationConfig/${type}`, query: query });
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.station-nav-out{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.station-nav{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
background-color: #ACACAC;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.station-line{
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(to bottom , #9c9c9c, #F0F0F0,#9c9c9c);
|
||||
top: 25px;
|
||||
border: 1px #505050 solid;
|
||||
}
|
||||
.station-list-box{
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
border-radius: 1vw;
|
||||
background: #ccc;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
border-left: 1px #fdfdfd solid;
|
||||
border-right: 1px #262626 solid;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.station-list-box.currentStation::before{
|
||||
content: '';
|
||||
width: 128%;
|
||||
height: 124%;
|
||||
border: 1px #10ff00 solid;
|
||||
position: absolute;
|
||||
left: -16%;
|
||||
top: -10%;
|
||||
border-radius: 130%;
|
||||
}
|
||||
.station-list-box.active,.station-list-button.active{
|
||||
background:#cdcd37;
|
||||
}
|
||||
.station-name{
|
||||
font-size:12px;
|
||||
position:absolute;
|
||||
}
|
||||
.station-name-first{
|
||||
transform: translateX(0%);
|
||||
top: 45px;
|
||||
white-space: nowrap;
|
||||
left: 0%;
|
||||
}
|
||||
.station-name-up{
|
||||
top: 5px;
|
||||
transform: translateX(-50%);
|
||||
left: 25%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.station-name-down{
|
||||
top: 45px;
|
||||
// transform: translateX(-25%);
|
||||
transform: translateX(-38%);
|
||||
white-space: nowrap;
|
||||
left: 0%;
|
||||
}
|
||||
.station-box-out{
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.station-box{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
// margin-right: 1.8vw;
|
||||
width: 1.5vw;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.leftRect{
|
||||
width: 6px;
|
||||
height: 19px;
|
||||
background-image: linear-gradient(to bottom, #686868, #e9e9e9, #686868);
|
||||
border: 1px #585858 solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.rightRect{
|
||||
width: 6px;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
margin-left: 0.8vw;
|
||||
background-image: linear-gradient(to bottom, #686868, #e9e9e9, #686868);
|
||||
border: 1px #585858 solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.stationList{
|
||||
// display: inline-block;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 82%;
|
||||
}
|
||||
.rightButtonGroup{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 17vw;
|
||||
height: 100%;
|
||||
}
|
||||
.rightButtonGroupL{
|
||||
width: 10vw;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
position: relative;
|
||||
border-left: 1px #000 solid;
|
||||
border-right: 1px #000 solid;
|
||||
}
|
||||
.rightButtonGroupR{
|
||||
width: 7vw;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.controlCenter,.stationDepot,.parkingLot{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
float: left;
|
||||
}
|
||||
.controlCenterName{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0.3vw;
|
||||
}
|
||||
.stationDepotName{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 38%;
|
||||
}
|
||||
.parkingLotName{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 11%;
|
||||
}
|
||||
.station-list-button{
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
border-radius: 1vw;
|
||||
background: #ccc;
|
||||
position: absolute;
|
||||
border-left: 1px #fdfdfd solid;
|
||||
border-right: 1px #262626 solid;
|
||||
left: 50%;
|
||||
top: 21px;
|
||||
transform: translateX(-47%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.mainHouseOne,.mainHouseTwo{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
float: left;
|
||||
}
|
||||
.mainHouseOneName{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0.3vw;
|
||||
}
|
||||
.mainHouseTwoName{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 8%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user