rt-sim-training-client/src/views/bigTrainRunplanManage/index.vue

<template>
  <div class="BTRp">
    <div class="BTRpMenuBarOut">
      <div class="BTRpMenuBar">
        <div class="eachBTRpMenuBar" @click="addTab('StationTrack')">车站股道</div>
        <div class="eachBTRpMenuBar">车站出入口</div>
        <div class="eachBTRpMenuBar" @click="addTab('TrainFixedPath')">列车固定路径</div>
        <div class="eachBTRpMenuBar">车站用户管理</div>
        <div class="eachBTRpMenuBar">备份区名称</div>
        <div class="eachBTRpMenuBar">工作区选择</div>
        <div class="eachBTRpMenuBar">帮助</div>
      </div>
      <div class="BTRunplanClose" @click="quit">
        <i class="el-icon-close" />
      </div>
    </div>
    <div class="BTRpTabs">
      <el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item) in currentTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <component
            :is="item.component"
            :ref="item.name"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import StationTrack from './stationTrack';
import TrainFixedPath from './trainFixedPath';
import { loadMapDataById } from '@/utils/loaddata';
import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp';
export default {
    name:'BigTrainRunplanManage',
    data() {
        return {
            activeTab:'StationTrack',
            stationCode:'',
            groupModel: '',
            currentTabs: [
                // {
                //     title: '车站股道',
                //     name: 'StationTrack',
                //     component:StationTrack
                // },
                // {
                //     title: '列车固定径路',
                //     name: 'TrainFixedPath',
                //     component:TrainFixedPath
                // }
            ]
        };
    },
    watch: {
        '$store.state.map.mapDataLoadedCount': function (val) { // 地图数据加载完成
            this.subscribe();
        }
    },
    beforeDestroy() {
        this.clearSubscribe();
    },
    async mounted() {
        this.groupModel = this.$route.query.group;
        this.stationCode = this.$route.query.stationCode;
        this.initLoadData();
    },
    methods:{
        removeTab(targetName) {
            const tabs = this.currentTabs;
            let activeName = this.activeTab;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                        const nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.name;
                        }
                    }
                });
            }
            this.activeTab = activeName;
            this.currentTabs = tabs.filter(tab => tab.name !== targetName);
        },
        addTab(name) {
            const nameMap = {'StationTrack':{title:'车站股道', component:StationTrack }, 'TrainFixedPath':{title:'列车固定路径', component:TrainFixedPath}};
            const findTab = this.currentTabs.find(tab=>{
                return tab.name == name;
            });
            if (!findTab) {
                this.currentTabs.push(Object.assign( {name:name}, nameMap[name]));
            }
            this.activeTab = name;
            this.$nextTick(()=>{
                this.$refs[this.activeTab][0].loadStation();
            });
        },
        quit() {
            window.close();
        },
        initLoadData() {
            loadMapDataById(this.$route.query.mapId, 'parse');
        },
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
            // creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
            creatSubscribe(getTopic('CTC_MANAGE', this.$route.query.group), header);
            // await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(getTopic('CTC_MANAGE', this.groupModel));
        }
        // '车站股道'
        // 列车固定路径
    }

};
</script>
<style lang="scss" scoped>
.BTRp{height:100%;width:100%;padding-top:30px}
.BTRpMenuBarOut{
    position: absolute;
    width: 100%;
    left:0;
    top:0;
    background: #bad8fb;
    border-bottom: 1px #8fb2dd solid;
    height: 29px;
}
.BTRpTabs{height:100%;background: #cccccd;}
.BTRpMenuBar{
    display: inline-block;
    background: #d2e0f3;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right: 10px;
    border-right: 1px #93a3b4 solid;
    border-bottom: 1px #cadaef solid;
    position: absolute;
    height: 29px;
}
.eachBTRpMenuBar{
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    cursor: pointer;
    height: 29px;
}
.eachBTRpMenuBar:hover{
    background: #a6cdfb;
}
.BTRunplanClose{
    display: inline-block;
    float: right;
    margin-right: 10px;
    padding: 4px 8px;
    cursor: pointer;
}
</style>
<style lang="scss">
.BTRpTabs .el-tabs--card>.el-tabs__header{background: #c5dffd;font-size: 13px;color: #1f4678;border-bottom: 2px #84827f solid;margin-bottom:0px;}
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-top.is-active{background:#fafbfa;}
.BTRpTabs .el-tabs__item.is-active{color: #003589;font-weight: bold;}
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__item.is-top{font-size:13px;border-top-right-radius: 40px;height: 30px;
line-height: 30px;padding: 0 15px 0px 10px;background: #b9d2f1;vertical-align: text-bottom;border-top: 1px #5e6a79 solid;
border-left: 1px #94b6f0 solid;border-right: 1px #c9d3e0 solid;}
.BTRpTabs .el-tabs--card>.el-tabs__header .el-tabs__nav{border:none}
</style>