309 lines
9.5 KiB
Vue
309 lines
9.5 KiB
Vue
<template>
|
|
<div class="BTRp">
|
|
<div class="BTRpMenuBarOut">
|
|
<div class="BTRpMenuBar">
|
|
<div class="eachBTRpMenuBar" @click="addTab('StationTrack')">车站股道</div>
|
|
<div class="eachBTRpMenuBar" @click="addTab('StationDirection')">车站出入口</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 StationDirection from './stationDirection';
|
|
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.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}, 'StationDirection':{title:'出入口', component:StationDirection}};
|
|
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;overflow: hidden;}
|
|
.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>
|