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"
            @noticeInfo="noticeInfo"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <notice-info ref="noticeInfo" pop-class="datie-02__systerm" />
  </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, displayTopic } from '@/utils/stomp';
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
export default {
    name:'BigTrainRunplanManage',
    components: {
        NoticeInfo
    },
    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.$store.commit('training/notifyGetCommandDefinition', this.$route.query.lineCode);
            this.subscribe();
        }
    },
    beforeDestroy() {
        this.clearSubscribe();
    },
    async mounted() {
        this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
        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.$nextTick(()=>{
                    this.$refs[this.activeTab][0].loadStation();
                });
            }
            this.activeTab = name;
        },
        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', this.$route.query.group), header);
            creatSubscribe(getTopic('CTC_MANAGE', this.$route.query.group), header);
            // await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            // clearSubscribe(`${displayTopic}\/${this.groupModel}`);
            // clearSubscribe(getTopic('CTC', this.groupModel));
            clearSubscribe(getTopic('CTC_MANAGE', this.groupModel));
        },
        noticeInfo() {
            this.$refs.noticeInfo.doShow();
        }
        // '车站股道'
        // 列车固定路径
    }

};
</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}

.datie-02__systerm {
    overflow: hidden !important;
}
.datie-02__systerm .el-dialog {
    background-image: linear-gradient(#9ab6ce, #b3cce8);
    box-shadow: 1px 1px 2px #65666c;
    border: 1px solid #326b7f;
    border-radius: 6px;
    font-size: 13px !important;
    color: #000;
}

.datie-02__systerm .el-dialog span {
    font-size: 13px !important;
    line-height: 22px;
}

.datie-02__systerm .el-dialog span .el-icon-arrow-up{
    line-height: 21px;
}

.datie-02__systerm .el-dialog .el-dialog__footer {
    background: #ECE9D8;
    opacity: 1;
}

.datie-02__systerm .el-dialog .el-dialog__body {
    padding: 15px 5px;
    margin: 0px 0px 1px 1px;
    border: 1px solid rgba(120, 121, 123, 0.5);
    box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
    background: #eeeeee;
    opacity: 1;
}

.datie-02__systerm .el-dialog .el-dialog__title {
    font-size: 16px;
    color: #000;
    position: absolute;
    top: 4px;
    left: 7px;
}

.datie-02__systerm .el-dialog .el-dialog__headerbtn {
    background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
    border: 1px solid #fff;
    border-radius: 4px;
    top: 6px;
    right: 3px;
    line-height: 16px;
}

.datie-02__systerm .el-dialog .el-dialog__headerbtn .el-icon-close:before {
    font-size: 16px;
}

.datie-02__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.datie-02__systerm .el-dialog .el-input {
    // border: 2px inset #E9E9E9;
    height: 24px !important;
    line-height: 22px !important;
    border: 1px #8bacba solid;
    border-radius: 5px;
}

.datie-02__systerm .el-dialog .el-input__inner {
    color: #000;
    background: #fff !important;
    border: 0px;
    // border-radius: 3px !important;
    box-sizing: border-box;
    height: 22px !important;
    line-height: 22px !important;
    // border: 1px #8bacba solid;
}
.datie-02__systerm .el-dialog .el-input.is-disabled{
    border: 1px solid #c1c1c1;
}
.datie-02__systerm .el-dialog .el-input.is-disabled .el-input__inner {
    background: #f3f3f3 !important;
}

.datie-02__systerm .el-dialog .el-button {
    height: 24px;
    line-height: 22px;
    padding: 0px;
    width: 80px;
    // border: 2px outset #E2E2E2;
    // border-radius: 4px !important;
    color: #000;
    background-image: linear-gradient(#fff, #d8d8d8);
}
.datie-02__systerm .el-dialog .el-button:hover{
    background-image: linear-gradient(#efffff, #a8daf3);
}
.datie-02__systerm .el-dialog .el-form-item label {
    font-weight: normal !important;
    color: #000 !important;
    padding-right: 5px;
    font-size:13px;
    line-height:30px;
}

.datie-02__systerm .el-dialog span.el-input__prefix .el-input__icon{
    line-height:22px;
}
.datie-02__systerm .el-dialog span.el-input__suffix .el-input__icon{
    line-height:22px;
}
.datie-02__systerm .el-dialog .context {
    height: 100px;
    border: 2px inset #E2E2E2;
    overflow-y: scroll;
    margin-bottom: 10px;
}
</style>