rt-sim-training-client/src/views/iscs/iscsSystem/stationNav.vue

<template>
  <div class="station-nav">
    <div class="station-line" />
    <div v-for="(item, index) in stationList" :key="index" class="station-box-out">
      <div class="station-box">
        <div class="leftRect" />
        <div class="rightRect" />
        <div class="nav-list-box station-list-box" :class="{'active': selectStationIndex == index}" @click="selectStation(item, index)" />
      </div>
      <div class="station-name" :class="index==0?'station-name-first':index%2==1?'station-name-up':'station-name-down'">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
import { getByGroupStationList } from '@/api/jmap/map';
import { getToken } from '@/utils/auth';
import { getSessionStorage } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
import { clearSimulation } from '@/api/simulation';
export default {
    name:'StationNav',
    data() {
        return {
            selectStationIndex: 0,
            stationList:[]
        };
    },
    async created () {
        // 请求当前线路车站列表
        const res = await getByGroupStationList(this.$route.query.group);
        if (res.code == 200) {
            this.stationList = [];
            res.data.forEach(station => {
                if (!station.depot && station.visible) {
                    const param = {
                        name: station.runPlanName + '站',
                        id: station.code
                    };
                    this.stationList.push(param);
                }
            });
        }
        // if (!this.$route.params.mode) {
        //     this.selectChildren(this.navList[0].children[0], 0, true);
        // }
    },
    mounted() {
        this.subscribe();
    },
    beforeDestroy() {
        this.clearSubscribe();
    },
    methods:{
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.group || '', 'X-Token': getToken() };
            creatSubscribe(`${displayTopic}\/${this.group}`, header);

            await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(`${displayTopic}\/${this.group}`);
        }
    }
};
</script>
<style lang="scss" scoped>
.station-nav{
    width: 100%;
    height: 65px;
    background-color: #ACACAC;
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 5px;
}
.station-line{
    height: 12px;
    width: 80%;
    position: absolute;
    background-image: linear-gradient(to bottom , #9c9c9c, #F0F0F0,#9c9c9c);
    left: 10px;
    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-top: 1px #fdfdfd solid;
    border-right: 1px #262626 solid;
    border-bottom: 1px #262626 solid;
    transform: translateY(-50%);
}
.station-list-box.active::before{
    content: '';
    width: 128%;
    height: 128%;
    border: 1px #10ff00 solid;
    position: absolute;
    left: -16%;
    top: -15%;
    border-radius: 130%;
}
.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%);
    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;
}
.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;
}
</style>