修改调度命令界面

This commit is contained in:
强 董 2022-06-29 10:36:57 +08:00
parent a7db35f139
commit 371e090195
2 changed files with 126 additions and 433 deletions

View File

@ -4,7 +4,7 @@
class="dispatcher-cmd chengdou-03__systerm" class="dispatcher-cmd chengdou-03__systerm"
:title="title" :title="title"
:visible.sync="show" :visible.sync="show"
width="960px" width="1300px"
:before-close="doClose" :before-close="doClose"
:z-index="2010" :z-index="2010"
:modal="false" :modal="false"
@ -15,7 +15,7 @@
<el-row style="height: 100%;"> <el-row style="height: 100%;">
<el-col :span="6" style="height: 100%;"> <el-col :span="6" style="height: 100%;">
<div class="left"> <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"> <el-tab-pane label="操作" name="operate">
<div class="operate-box"> <div class="operate-box">
<div>数据库正常</div> <div>数据库正常</div>
@ -35,22 +35,94 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="middle"> <div class="middle">
<el-tabs v-model="cmdTab" type="card"> <el-tabs v-model="cmdTab" type="border-card">
<el-tab-pane label="调度命令" name="cmd"> <el-tab-pane label="调度命令" name="cmd">
<div class="cmd-box"> <el-form ref="form" :model="command" label-width="80px">
<div>命令标题</div> <el-form-item label="命令标题">
</div> <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-tab-pane>
</el-tabs> </el-tabs>
<el-tabs v-model="textTab" type="card"> <el-tabs v-model="textTab" type="border-card">
<el-tab-pane label="命令正文" name="text"> <el-tab-pane label="命令正文" name="text">
<div class="cmd-box"> <div class="cmd-box">
<div>正文字体</div> <div>
<el-input v-model="cmdTextarea" type="textarea" :rows="6" placeholder="请输入内容" />
</div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div> <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>
</div> </div>
</el-col> </el-col>
@ -71,7 +143,25 @@ export default {
dialogShow: false, dialogShow: false,
activeTab: 'operate', activeTab: 'operate',
cmdTab: 'cmd', 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: { computed: {
@ -107,5 +197,31 @@ export default {
.left { .left {
height: 100%; 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> </style>

View File

@ -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>