447 lines
11 KiB
Vue
447 lines
11 KiB
Vue
<template>
|
|
<div class="dispatcher-station">
|
|
<div class="station-title">上海局CTC系统-行调台-控制工具条</div>
|
|
<div class="main">
|
|
<div class="menu-list">
|
|
<el-button v-for="(item, index) in menuList" :key="index" class="btn" type="text" @click="clickMenu(item.refPath)">{{ item.label }}</el-button>
|
|
</div>
|
|
<div class="btn-box">
|
|
<div v-for="(item, index) in buttonList" :key="index" class="btn-div" @click="doShow(item.refPath)">
|
|
<div class="img">
|
|
<el-image
|
|
style="width: 83px; height: 83px"
|
|
:src="item.imgUrl"
|
|
/>
|
|
</div>
|
|
<div class="text">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DispatchCmd ref="dispatch-cmd" />
|
|
<DispatcherLoger ref="dispatcherLoger" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import DispatchCmd from '@/views/dispatcherStationManage/dispatchCmd';
|
|
import DispatcherLoger from '@/views/dispatcherLoger/index';
|
|
// import DispatcherLoger from '@/jmapNew/theme/datie_02/menus/dispatcherLoger';
|
|
import ZhanchangIcon from '@/assets/dispatcherStation/zhanchang.png';
|
|
import YunxingIcon from '@/assets/dispatcherStation/yunxing.png';
|
|
import CmdIcon from '@/assets/dispatcherStation/cmd.png';
|
|
import { getToken } from '@/utils/auth';
|
|
import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp';
|
|
export default {
|
|
name: 'DispatcherStation',
|
|
components: {
|
|
DispatchCmd,
|
|
DispatcherLoger
|
|
},
|
|
data() {
|
|
return {
|
|
stationCode:'',
|
|
groupModel: '',
|
|
hasUnsubscribe:false,
|
|
buttonList: [
|
|
{
|
|
label: '运行图',
|
|
refPath: 'dispatcherLoger',
|
|
imgUrl: YunxingIcon
|
|
},
|
|
{
|
|
label: '调度命令',
|
|
refPath: 'dispatch-cmd',
|
|
imgUrl: CmdIcon
|
|
},
|
|
{
|
|
label: '站场图',
|
|
refPath: 'station-map',
|
|
imgUrl: ZhanchangIcon
|
|
},
|
|
{
|
|
label: '数据更新',
|
|
refPath: '',
|
|
imgUrl: CmdIcon
|
|
},
|
|
{
|
|
label: '时间同步',
|
|
refPath: '',
|
|
imgUrl: CmdIcon
|
|
}
|
|
],
|
|
menuList: [
|
|
{
|
|
label: '登录(L)',
|
|
refPath: ''
|
|
},
|
|
{
|
|
label: '应用程序(T)',
|
|
refPath: ''
|
|
}
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
'$store.state.training.prdType': function(prdType, oldPrdType) {
|
|
this.changePrdType(prdType, oldPrdType);
|
|
}
|
|
},
|
|
mounted() {
|
|
// const _that = this;
|
|
// window.onbeforeunload = () => { _that.clearSubscribe(); };
|
|
this.groupModel = this.$route.query.group;
|
|
// this.subscribe();
|
|
},
|
|
// beforeDestroy() {
|
|
// this.clearSubscribe();
|
|
// },
|
|
methods: {
|
|
doShow(refPath) {
|
|
if (!refPath) {
|
|
this.$alert('实现中......', '提示', {
|
|
confirmButtonText: '确定',
|
|
callback: action => {
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
if (refPath === 'station-map') {
|
|
this.$emit('changeShowMap', true);
|
|
} else {
|
|
this.$refs[refPath].doShow();
|
|
}
|
|
},
|
|
clickMenu(refPath) {
|
|
this.$alert('实现中......', '提示', {
|
|
confirmButtonText: '确定',
|
|
callback: action => {
|
|
}
|
|
});
|
|
},
|
|
changePrdType(prdType, oldPrdType) {
|
|
// if (prdType) {
|
|
// this.subscribe(prdType);
|
|
// }
|
|
// if (oldPrdType) {
|
|
// this.clearSubscribe(oldPrdType);
|
|
// }
|
|
if (prdType == '01') {
|
|
this.clearSubscribe();
|
|
this.hasUnsubscribe = true;
|
|
} else if (prdType == '02' && this.hasUnsubscribe) {
|
|
this.subscribe();
|
|
}
|
|
},
|
|
async subscribe(prdType) {
|
|
const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
|
|
creatSubscribe(getTopic('CTC', this.$route.query.group), header);
|
|
// if (prdType == '02') {
|
|
// // creatSubscribe(getTopic('CTC_RAILWAY', this.$route.query.group), header);
|
|
|
|
// } else if (prdType == '01') {
|
|
// // creatSubscribe(getTopic('CTC', this.$route.query.group), header);
|
|
// }
|
|
|
|
},
|
|
clearSubscribe(prdType) {
|
|
// if (prdType == '02') {
|
|
// // clearSubscribe(getTopic('CTC_RAILWAY', this.groupModel));
|
|
// } else if (prdType == '01') {
|
|
clearSubscribe(getTopic('CTC', this.groupModel));
|
|
// }
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dispatcher-station{
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: #E1EDF9;
|
|
.station-title {
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
line-height: 30px;
|
|
width: 100%;
|
|
}
|
|
.main {
|
|
margin: 5px;
|
|
height: calc(100% - 40px);
|
|
border: 1px solid #000;
|
|
background: #C0C0C0;
|
|
.menu-list {
|
|
width: 100%;
|
|
padding-left: 50px;
|
|
background: #D9DFF0;
|
|
.el-button {
|
|
padding: 5px;
|
|
}
|
|
}
|
|
.btn-box {
|
|
height: 100%;
|
|
border-top: 2px solid #808080;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 20px 10px;
|
|
.btn-div {
|
|
width: 120px;
|
|
height: 100px;
|
|
text-align: center;
|
|
.text {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.chengdou-03__systerm {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog {
|
|
background: #0055E8;
|
|
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
|
|
border: 1px solid rgb(69, 134, 247);
|
|
border-radius: 6px;
|
|
font-size: 13px !important;
|
|
color: #000;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog span {
|
|
font-size: 13px !important;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog span .el-icon-arrow-up{
|
|
line-height: 18px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-dialog__footer {
|
|
background: #ECE9D8;
|
|
opacity: 1;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-dialog__body {
|
|
padding: 20px;
|
|
margin: 0px 3px 3px;
|
|
border: 2px solid rgba(120, 121, 123, 0.5);
|
|
box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
|
|
background: #ECE9D8;
|
|
opacity: 1;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-dialog__title {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 7px;
|
|
}
|
|
|
|
.chengdou-03__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;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-dialog__headerbtn .el-icon-close:before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close {
|
|
color: #fff;
|
|
}
|
|
|
|
.chengdou-03__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: #F0F0F0;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .expand {
|
|
width: 120px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-button:focus span {
|
|
border: 1px dashed gray;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-button:active {
|
|
border: 2px inset #E2E2E2;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-button:disabled {
|
|
border: 2px inset #E2E2E2;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-button:disabled span {
|
|
border: 0px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-input {
|
|
border: 2px inset #E9E9E9;
|
|
height: 22px !important;
|
|
line-height: 22px !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-input__inner {
|
|
color: #000;
|
|
background: #fff !important;
|
|
border: 0px;
|
|
border-radius: 0px !important;
|
|
box-sizing: border-box;
|
|
height: 22px !important;
|
|
line-height: 22px !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-input.is-disabled .el-input__inner {
|
|
background: #F0F0F0 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-textarea {
|
|
border: 2px inset #E9E9E9;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-textarea .el-textarea__inner {
|
|
color: #000;
|
|
background: #fff !important;
|
|
border: 0px;
|
|
border-radius: 0px !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-textarea.is-disabled .el-textarea__inner {
|
|
background: #F0F0F0 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-table--border th.gutter {
|
|
background: #EBEADB !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-table {
|
|
border: 2px inset #E9E9E9;
|
|
color: #000 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-table .cell {
|
|
height: 22px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-table th.is-leaf {
|
|
background: #F0F0F0 !important;
|
|
border-right: 1px solid #BDBDBD !important;
|
|
border-bottom: 1px solid #BDBDBD !important;
|
|
color: #000 !important;
|
|
height: 20px !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-table tr td {
|
|
height: 20px !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-table .el-table__empty-text {
|
|
top: 15px !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .current-row>td {
|
|
background: #3399FF !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-checkbox__inner {
|
|
border: 1px inset #dcdfe6 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-checkbox__label {
|
|
color: #000 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
|
|
background: #E6E6E6 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
|
|
color: #C5C9CC !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background: #fff !important;
|
|
border: 1px inset #dcdfe6 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
|
position: absolute;
|
|
-webkit-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
content: "";
|
|
border: 1px solid #000;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
height: 7px;
|
|
left: 4px;
|
|
top: 1px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-radio__inner {
|
|
border: 1px inset #dcdfe6 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-radio__label {
|
|
color: #000 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner {
|
|
background: #fff !important;
|
|
border: 1px inset #dcdfe6 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 100%;
|
|
background-color: #000 !important;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__inner {
|
|
background: #E6E6E6 !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__label {
|
|
color: #C5C9CC !important;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .base-label {
|
|
background: rgba(0, 0, 0, x);
|
|
position: relative;
|
|
left: -15px;
|
|
top: -18px;
|
|
}
|
|
|
|
.chengdou-03__systerm .el-dialog .el-form-item label {
|
|
font-weight: normal !important;
|
|
color: #000 !important;
|
|
}
|
|
</style>
|