iscs代码调整

src/views/iscs/iscsSystemNew/index.vue

@@ -1,20 +1,22 @@
 <template>
-  <div>
+  <div style="height:100%">
-    <station-nav v-if="$route.query.group" />
+    <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>

src/views/iscs/iscsSystemNew/stationConfig/index.vue

@@ -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>
+

src/views/iscs/iscsSystemNew/stationConfig/psdSystem.vue

@@ -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>

src/views/iscs/iscsSystemNew/stationNav.vue

@@ -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);
-        //     this.selectChildren(this.buttonId, true);
-        // }
     },
     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>