修改调度命令界面
This commit is contained in:
强 董
parent
a7db35f139
commit
371e090195
@ -4,7 +4,7 @@
|
||||
class="dispatcher-cmd chengdou-03__systerm"
|
||||
:title="title"
|
||||
:visible.sync="show"
|
||||
width="960px"
|
||||
width="1300px"
|
||||
:before-close="doClose"
|
||||
:z-index="2010"
|
||||
:modal="false"
|
||||
@ -15,7 +15,7 @@
|
||||
<el-row style="height: 100%;">
|
||||
<el-col :span="6" style="height: 100%;">
|
||||
<div class="left">
|
||||
<el-tabs v-model="activeTab" type="card" @tab-click="tabClick">
|
||||
<el-tabs v-model="activeTab" type="border-card" @tab-click="tabClick">
|
||||
<el-tab-pane label="操作" name="operate">
|
||||
<div class="operate-box">
|
||||
<div>数据库正常</div>
|
||||
@ -35,22 +35,94 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="middle">
|
||||
<el-tabs v-model="cmdTab" type="card">
|
||||
<el-tabs v-model="cmdTab" type="border-card">
|
||||
<el-tab-pane label="调度命令" name="cmd">
|
||||
<div class="cmd-box">
|
||||
<div>命令标题</div>
|
||||
</div>
|
||||
<el-form ref="form" :model="command" label-width="80px">
|
||||
<el-form-item label="命令标题">
|
||||
<el-input v-model="command.title" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="命令号">
|
||||
<el-input v-model="command.number" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发令时间">
|
||||
<el-date-picker v-model="command.sendTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发令人">
|
||||
<el-input v-model="command.senderId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发令单位">
|
||||
<el-input v-model="command.companyOfSender" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="授权时间">
|
||||
<el-date-picker v-model="command.authorizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="授权状态">
|
||||
<el-input v-model="command.authorizationStatus" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="定稿时间">
|
||||
<el-date-picker v-model="command.finalizationTime" type="datetime" placeholder="选择日期时间" style="width: 100%;" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="审核人">
|
||||
<el-input v-model="command.reviewerId" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="拟令人">
|
||||
<el-input v-model="command.author" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="命令分类">
|
||||
<el-input v-model="command.type" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-tabs v-model="textTab" type="card">
|
||||
<el-tabs v-model="textTab" type="border-card">
|
||||
<el-tab-pane label="命令正文" name="text">
|
||||
<div class="cmd-box">
|
||||
<div>正文字体</div>
|
||||
<div>
|
||||
<el-input v-model="cmdTextarea" type="textarea" :rows="6" placeholder="请输入内容" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div>
|
||||
<div>受令列表</div>
|
||||
<div class="title">
|
||||
<span>受令列表</span>
|
||||
<el-checkbox v-model="tableChecked">全选</el-checkbox>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table :data="tableData" style="width: 100%" height="200">
|
||||
<el-table-column type="selection" width="50" />
|
||||
<el-table-column prop="date" label="受令单位" width="180" />
|
||||
<el-table-column prop="name" label="抄送" width="180" />
|
||||
<el-table-column prop="address" label="签收状态" />
|
||||
<el-table-column prop="address" label="签收人" />
|
||||
<el-table-column prop="address" label="签收时间" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="midle-bottom">
|
||||
<el-button type="primary">下达</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -71,7 +143,25 @@ export default {
|
||||
dialogShow: false,
|
||||
activeTab: 'operate',
|
||||
cmdTab: 'cmd',
|
||||
textTab: 'text'
|
||||
textTab: 'text',
|
||||
command: {
|
||||
title: '',
|
||||
number: '',
|
||||
sendTime: '',
|
||||
senderId: '',
|
||||
companyOfSender: '',
|
||||
authorizationTime: '',
|
||||
authorizationStatus: '',
|
||||
finalizationTime: '',
|
||||
reviewerId: '',
|
||||
author: '',
|
||||
receiverIds: '',
|
||||
type: '',
|
||||
allSigned: ''
|
||||
},
|
||||
cmdTextarea: '',
|
||||
tableChecked: false,
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -107,5 +197,31 @@ export default {
|
||||
.left {
|
||||
height: 100%;
|
||||
}
|
||||
/deep/ .el-tabs__item {
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
.middle {
|
||||
/deep/ .el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
/deep/ .el-input__icon {
|
||||
line-height: 22px;
|
||||
}
|
||||
.midle-bottom {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.dispatcher-cmd .el-dialog .el-dialog__body {
|
||||
padding: 5px !important;
|
||||
}
|
||||
.dispatcher-cmd .el-dialog {
|
||||
margin-top: 8vh !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,423 +0,0 @@
|
||||
<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" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ZhanchangIcon from '@/assets/dispatcherStation/zhanchang.png';
|
||||
import YunxingIcon from '@/assets/dispatcherStation/yunxing.png';
|
||||
import CmdIcon from '@/assets/dispatcherStation/cmd.png';
|
||||
import DispatchCmd from './dispatchCmd.vue';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { creatSubscribe, clearSubscribe, getTopic, displayTopic } from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
export default {
|
||||
name:'DispatcherStationManage',
|
||||
components: {
|
||||
DispatchCmd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stationCode:'',
|
||||
groupModel: '',
|
||||
buttonList: [
|
||||
{
|
||||
label: '运行图',
|
||||
refPath: '',
|
||||
imgUrl: YunxingIcon
|
||||
},
|
||||
{
|
||||
label: '调度命令',
|
||||
refPath: 'dispatch-cmd',
|
||||
imgUrl: CmdIcon
|
||||
},
|
||||
{
|
||||
label: '站场图',
|
||||
refPath: '',
|
||||
imgUrl: ZhanchangIcon
|
||||
},
|
||||
{
|
||||
label: '数据更新',
|
||||
refPath: '',
|
||||
imgUrl: CmdIcon
|
||||
},
|
||||
{
|
||||
label: '时间同步',
|
||||
refPath: '',
|
||||
imgUrl: CmdIcon
|
||||
}
|
||||
],
|
||||
menuList: [
|
||||
{
|
||||
label: '登录(L)',
|
||||
refPath: ''
|
||||
},
|
||||
{
|
||||
label: '应用程序(T)',
|
||||
refPath: ''
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.mapDataLoadedCount': function (val) { // 地图数据加载完成
|
||||
this.$store.commit('training/notifyGetCommandDefinition', this.$route.query.lineCode);
|
||||
this.subscribe();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearSubscribe();
|
||||
},
|
||||
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:{
|
||||
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));
|
||||
},
|
||||
clickMenu(refPath) {
|
||||
this.$alert('实现中......', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
}
|
||||
});
|
||||
},
|
||||
doShow(refPath) {
|
||||
if (!refPath) {
|
||||
this.$alert('实现中......', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$refs[refPath].doShow();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</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%;
|
||||
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: 70px;
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user