rt-sim-training-client/src/views/bigTrainRunplanManage/addRunplan.vue
joylink_cuiweidong 5fd48d092e 代码调整
2022-08-29 14:08:14 +08:00

539 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-dialog
v-dialogDrag
class="datie-02__systerm"
:title="title"
:visible.sync="show"
width="500px"
:before-close="doClose"
:z-index="2000"
:modal="false"
:close-on-click-modal="false"
>
<div class="DpRunplanPane">
<el-form ref="form" :model="addModel" label-width="80px" :rules="rules">
<el-form-item label="车站:" prop="stationCode">
<el-select v-model="addModel.stationCode" placeholder="" style="width:145px" disabled>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="股道:" prop="masterCode">
<el-select v-model="addModel.masterCode" placeholder="" style="width:145px">
<el-option
v-for="item in filterSectionList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="到达车次:" prop="arriveTipNum">
<el-input v-model="addModel.arriveTipNum" style="width:145px" />
</el-form-item>
<el-form-item label="到达时间:" prop="arriveTime">
<el-time-picker v-model="addModel.arriveTime" value-format="HH:mm" format="HH:mm" style="width:145px" />
</el-form-item>
<el-form-item label="出发车次:" prop="leaveTipNum">
<el-input v-model="addModel.leaveTipNum" style="width:145px" />
</el-form-item>
<el-form-item label="出发时间:" prop="leaveTime">
<el-time-picker v-model="addModel.leaveTime" value-format="HH:mm" format="HH:mm" style="width:145px" />
</el-form-item>
<el-form-item label="入口:" prop="enterDirCode">
<el-select v-model="addModel.enterDirCode" placeholder="" style="width:145px" @change="changeEnterDirCode">
<el-option
v-for="item in enterDirList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="后方车站:" prop="backStationCode">
<el-select v-model="addModel.backStationCode" placeholder="" style="width:145px" disabled>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="出口:" prop="outDirCode">
<el-select v-model="addModel.outDirCode" placeholder="" style="width:145px" @change="changeOutDirCode">
<el-option
v-for="item in outDirList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="前方车站:" prop="fontStationCode">
<el-select v-model="addModel.fontStationCode" placeholder="" style="width:145px" disabled>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="appendData" style="width:100%">
<el-checkbox v-model="addModel.appendData.JISHU_STOP" class="eachAppendData" style="margin-right:34px">技术停点</el-checkbox>
<el-checkbox v-model="addModel.appendData.JIAO_LING" class="eachAppendData" style="margin-right:35px">交令</el-checkbox>
<el-checkbox v-model="addModel.appendData.JICHE" class="eachAppendData" style="margin-right:3px">机车</el-checkbox>
<el-checkbox v-model="addModel.appendData.HUOJIAN" class="eachAppendData" style="margin-right:3px">货检</el-checkbox>
<el-checkbox v-model="addModel.appendData.CHENGJIANG" class="eachAppendData">乘降</el-checkbox>
<el-checkbox v-model="addModel.appendData.ZHAIGUA" class="eachAppendData" style="margin-right:3px">摘挂</el-checkbox>
<el-checkbox v-model="addModel.appendData.HUANCHENG" class="eachAppendData" style="margin-right:3px">换乘</el-checkbox>
<el-checkbox v-model="addModel.appendData.ZHUANGXIE" class="eachAppendData" style="margin-right: 35px;">装卸</el-checkbox>
<el-checkbox v-model="addModel.appendData.XIWU" class="eachAppendData" style="margin-right:3px">吸污</el-checkbox>
<el-checkbox v-model="addModel.appendData.DAOKOU" class="eachAppendData" style="margin-right:3px">道口</el-checkbox>
<el-checkbox v-model="addModel.appendData.CHEHAO" class="eachAppendData">车号</el-checkbox>
<el-checkbox v-model="addModel.appendData.SHANGSHUI" class="eachAppendData" style="margin-right:3px">上水</el-checkbox>
<el-checkbox v-model="addModel.appendData.LIEJIAN" class="eachAppendData" style="margin-right:3px">列检</el-checkbox>
<el-checkbox v-model="addModel.appendData.ZONGKONG" class="eachAppendData" style="margin-right: 35px;">综控</el-checkbox>
<el-checkbox v-model="addModel.appendData.ZHANWU" class="eachAppendData" style="margin-right:3px">站务</el-checkbox>
<el-checkbox v-model="addModel.appendData.JIAOPIAO" class="eachAppendData" style="margin-right:3px">交票</el-checkbox>
<el-checkbox v-model="addModel.appendData.LIEWEI" class="eachAppendData">列尾</el-checkbox>
</el-form-item>
</el-form>
</div>
<el-row justify="center" class="button-group">
<el-col :span="6" :offset="7">
<el-button :id="domIdCancel" @click="cancel">取消</el-button>
</el-col>
<el-col :span="8" :offset="0">
<el-button :id="domIdConfirm " type="primary" :loading="loading" @click="commit">确定 </el-button>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import {menuOperate, commitOperate} from '@/jmapNew/theme/components/utils/menuOperate';
export default {
name: 'AddRunPlan',
data() {
var validateTripNumber = (rule, value, callback) => {
if (value) {
const judge = /^[a-zA-Z0-9]*[\d]$/.test(value);
if (judge) {
if (value.toString().length > 6 || value.toString().length < 2) {
callback('车次长度2-6位');
} else {
callback();
}
} else {
callback('字母+数字,最后一位数字');
}
} else {
// callback('请输入车次');
callback();
}
};
return {
dialogShow: false,
loading: false,
title:'',
// mapStationDirectionList:[],
isAdd:false,
mapStationDirectionMap:{},
enterDirList:[], // 入口列表
outDirList:[],
filterSectionList:[],
addModel:{
code:'', // 只有修改的时候需要添加此参数
stationCode:'', // 车站编码code
masterCode:'', // 股道code
arriveTipNum:'', // 到达车次
leaveTipNum:'', // 出发车次
arriveTime:'', // 到达时间
leaveTime:'', // 出发时间
enterDirCode:'', // 入口
outDirCode:'', // 出口
fontStationCode:'', // 前方车站
backStationCode:'', // 后方车站
appendData:{ // 附加数据
ZHUANGXIE:false, // 装卸
LIEJIAN:false, // 列检
JIAO_LING:false, // 交令
ZONGKONG:false, // 综控
XIWU:false, // 吸污
HUOJIAN:false, // 货检
CHENGJIANG:false, // 乘降
JISHU_STOP:false, // 技术停点
JIAOPIAO:false, // 交票
HUANCHENG:false, // 换乘
SHANGSHUI:false, // 上水
ZHANWU:false, // 站务
ZHAIGUA:false, // 摘挂
LIEWEI:false, // 列尾
DAOKOU:false, // 道口
JICHE:false, // 机车
CHEHAO:false // 车号
}
},
rules: {
// trackSectionCode: [
// { required: true, message: '请选择股道', trigger: 'blur' },
// { required: true, message: '请选择股道', trigger: 'change' }
// ],
arriveTipNum:[
{ required: true, validator: validateTripNumber, trigger: 'blur' }
// message: '请输入到达车次'
],
leaveTipNum:[
{ required: true, validator: validateTripNumber, trigger: 'blur' }
]
// message: '请输入出发车次'
// arriveTime: [
// { required: true, message: '请选择到达时间', trigger: 'blur' },
// { required: true, message: '请选择到达时间', trigger: 'change' }
// ],
// departTime: [
// { required: true, message: '请选择出发时间', trigger: 'blur' },
// { required: true, message: '请选择出发时间', trigger: 'change' }
// ],
// arriveDirectionCode: [
// { required: true, message: '请选择入口', trigger: 'blur' },
// { required: true, message: '请选择入口', trigger: 'change' }
// ],
// departDirectionCode: [
// { required: true, message: '请选择出口', trigger: 'blur' },
// { required: true, message: '请选择出口', trigger: 'change' }
// ],
// arriveStationCode: [
// { required: true, message: '请选择后方车站', trigger: 'blur' },
// { required: true, message: '请选择后方车站', trigger: 'change' }
// ],
// departStationCode: [
// { required: true, message: '请选择前方车站', trigger: 'blur' },
// { required: true, message: '请选择前方车站', trigger: 'change' }
// ]
}
};
},
computed: {
...mapGetters('map', [
'stationList'
]),
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
},
domIdCancel() {
return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
},
domIdConfirm() {
return this.dialogShow
? (this.isAdd ? OperationEvent.CTCCommand.addTrainFixedPath.menu.domId : OperationEvent.CTCCommand.modifyTrainFixedPath.menu.domId)
: '';
}
},
methods:{
doShow({stationCode, filterSectionMap, mapStationDirectionMap, row}) {
this.mapStationDirectionMap = mapStationDirectionMap;
const mapStationDirectionList = Object.values(mapStationDirectionMap);
this.enterDirList = mapStationDirectionList.filter(stationDirection=>{
return stationDirection.stationCode == stationCode && (
stationDirection.ioDirection == 'DOWN_IN_STATION' ||
stationDirection.ioDirection == 'UP_IN_STATION' ||
stationDirection.ioDirection == 'BOTH_WAY_STATION'
);
});
this.outDirList = mapStationDirectionList.filter(stationDirection=>{
return stationDirection.stationCode == stationCode && (
stationDirection.ioDirection == 'DOWN_OUT_STATION' ||
stationDirection.ioDirection == 'UP_OUT_STATION' ||
stationDirection.ioDirection == 'BOTH_WAY_STATION'
);
});
if (row) {
this.addModel = Object.assign({}, row);
this.title = '修改列车固定径路';
this.isAdd = false;
} else {
this.title = '增加列车固定径路';
this.isAdd = true;
this.addModel.stationCode = stationCode;
}
this.filterSectionList = Object.values(filterSectionMap);
this.dialogShow = true;
this.$nextTick(function () {
this.$store.dispatch('training/emitTipFresh');
});
},
changeEnterDirCode(code) {
const mapStationDirection = this.mapStationDirectionMap[code];
this.addModel.backStationCode = mapStationDirection.relativeStationCode;
},
changeOutDirCode(code) {
const mapStationDirection = this.mapStationDirectionMap[code];
this.addModel.fontStationCode = mapStationDirection.relativeStationCode;
},
doClose() {
this.loading = false;
this.dialogShow = false;
this.addModel = {
code:'', // 只有修改的时候需要添加此参数
stationCode:'', // 车站编码code
masterCode:'', // 股道code
arriveTipNum:'', // 到达车次
leaveTipNum:'', // 出发车次
arriveTime:'', // 到达时间
leaveTime:'', // 出发时间
enterDirCode:'', // 车站入口
outDirCode:'', // 出口
fontStationCode:'', // 前方车站
backStationCode:'', // 后方车站
// 以下参数使用前端自己的缓存数据取logicDataNew下面的DraftMapStationDirectionList的参数
// 1.runStatus接发口类型 R=接车D=发车,NO=无2.relativeStationCode
// 相对车站code接车时此code指的是后方车站发车时此code指的是前方车站
appendData:{ // 附加数据
ZHUANGXIE:false, // 装卸
LIEJIAN:false, // 列检
JIAO_LING:false, // 交令
ZONGKONG:false, // 综控
XIWU:false, // 吸污
HUOJIAN:false, // 货检
CHENGJIANG:false, // 乘降
JISHU_STOP:false, // 技术停点
JIAOPIAO:false, // 交票
HUANCHENG:false, // 换乘
SHANGSHUI:false, // 上水
ZHANWU:false, // 站务
ZHAIGUA:false, // 摘挂
LIEWEI:false, // 列尾
DAOKOU:false, // 道口
JICHE:false, // 机车
CHEHAO:false // 车号
}
};
this.$refs.form && this.$refs.form.resetFields();
this.$store.dispatch('training/emitTipFresh');
},
commit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.loading = true;
const param = Object.assign({}, this.addModel);
if (this.isAdd) {
delete param.code;
commitOperate(menuOperate.CTC.addTrainFixedPath, param, 3).then(({valid})=>{
if (valid) {
this.doClose();
this.$emit('refresh');
}
}).catch(() => {
this.doClose();
this.$emit('noticeInfo');
});
} else {
commitOperate(menuOperate.CTC.modifyTrainFixedPath, param, 3).then(({valid})=>{
if (valid) {
this.doClose();
this.$emit('refresh');
}
}).catch(() => {
this.doClose();
this.$emit('noticeInfo');
});
}
}
});
},
cancel() {
const operate = {
operation: OperationEvent.Command.cancel.menu.operation
};
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
if (valid) {
this.doClose();
}
}).catch(() => { this.doClose(); });
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<style lang="scss">
.DpRunplanPane{margin-bottom: 15px;}
.DpRunplanPane .el-form-item{
display:inline-block;
// width:210px;
margin-bottom:20px;
}
.DpRunplanPane .el-form-item__content{
line-height:30px;
}
// .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-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;
// }
.datie-02__systerm .el-dialog .el-checkbox__inner {
border: 1px inset #dcdfe6 !important;
}
.datie-02__systerm .el-dialog .el-checkbox__label {
color: #000 !important;
padding-left: 5px;
vertical-align: top;
line-height: 23px;
}
.datie-02__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
background: #E6E6E6 !important;
}
.datie-02__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
color: #C5C9CC !important;
}
.datie-02__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
background: #fff !important;
border: 1px inset #dcdfe6 !important;
}
.datie-02__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;
}
.eachAppendData{
display:inline-block;
}
// .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 .notice {
// margin-left: 62px;
// line-height: 30px;
// }
// .chengdou-03__systerm .el-dialog .button-group {
// margin-top: 20px;
// }
</style>