rt-sim-training-client/src/views/newMap/jointTrainingNew/dispatcherStation.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 '@/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: '',
            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);
        //     }
        // },
        // async subscribe(prdType) {
        //     const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
        //     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>