时间表管理&添加通用配置项
This commit is contained in:
fan
parent
3352b94149
commit
7d7583a7e2
@ -1,33 +1,119 @@
|
||||
<template>
|
||||
<div style="width: 100%;display: flex;justify-content: center;">
|
||||
<div>
|
||||
<div class="top-content-box">
|
||||
<div class="content-box">
|
||||
<div style="width: 950px;font-size: 18px;color: #56E5DE;margin: 10px;">全线车站时间表</div>
|
||||
<div style="width: 100%;display: flex;justify-content: center;">
|
||||
<div style="width: 240px;height: 300px;background: #FFF;">
|
||||
<div style="width: 240px;height: 280px;background: #FFF;">
|
||||
<el-row>
|
||||
<div style="background: #43388A;font-size: 14px;height: 30px;line-height: 30px;color: #FFF;text-align: center;">公用时间列表</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="width: 120px;margin-left: 10px;">
|
||||
<div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;margin: 85px 0;">增加时间表名</div>
|
||||
<div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;margin: 75px 0;">增加时间表名</div>
|
||||
<el-input v-model="tableName" size="mini" />
|
||||
<div class="button-box" style="text-align: center;padding: 5px 0;margin: 10px 0;">增加</div>
|
||||
<div class="button-box" style="text-align: center;padding: 5px 0">删除</div>
|
||||
</div>
|
||||
<div style="width: 110px;height: 300px;padding: 0 15px;border-right: 2px solid #2B5932;margin-left: 40px;">
|
||||
<div style="width: 110px;height: 280px;padding: 0 15px;border-right: 2px solid #2B5932;margin-left: 40px;">
|
||||
<div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;">下载选择</div>
|
||||
<div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 256px;">立即下发</div>
|
||||
<div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 236px;">立即下发</div>
|
||||
</div>
|
||||
<div style="width: 110px;height: 300px;margin-left: 15px;">
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期一</div>
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期二</div>
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期三</div>
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期四</div>
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期五</div>
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期六</div>
|
||||
<div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期日</div>
|
||||
<div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 100px;">排定下发</div>
|
||||
<div style="width: 70px;height: 280px;margin-left: 15px;">
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Mon')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Mon')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期一</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Tues')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Tues')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期二</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Wed')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Wed')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期三</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Thurs')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Thurs')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期四</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Fri')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Fri')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期五</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Sta')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Sta')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期六</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Sun')">
|
||||
<div class="check-box" :style="{background: allStationDate.includes('Sun')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期日</div>
|
||||
</div>
|
||||
<div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 80px;">排定下发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<div style="width: 950px;font-size: 18px;color: #56E5DE;margin: 10px;">车站时间表</div>
|
||||
<div style="width: 100%;display: flex;justify-content: center;">
|
||||
<div style="width: 180px;height: 280px;background: #FFF;">
|
||||
<el-row>
|
||||
<div style="background: #43388A;font-size: 14px;height: 30px;line-height: 30px;color: #FFF;text-align: center;">车站选择</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="border-box" style="width: 380px;height: 280px;display: flex;justify-content: center;padding: 10px;margin-left: 20px;">
|
||||
<div style="width: 240px;height: 260px;background: #FFF;">
|
||||
<el-row>
|
||||
<div style="background: #43388A;font-size: 14px;height: 30px;line-height: 30px;color: #FFF;text-align: center;">车站时间列表</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="width: 110px;height: 260px;margin-left: 10px;">
|
||||
<div style="width: 100%;font-size: 18px;color: #56E5DE;">新时间表名</div>
|
||||
<el-input v-model="newTableName" size="mini" style="margin: 10px 0;" />
|
||||
<div class="button-box" style="padding: 5px 10px;width: 50px;text-align: center;font-size: 12px;">改名</div>
|
||||
<div style="padding: 10px 0; border-top: 2px solid #2B5932;margin-top: 10px;display: flex;justify-content: center;">
|
||||
<div class="button-box" style="width: 45px;font-size: 12px;height: 65px;text-align: center;line-height: 65px;margin-right: 10px;">删除</div>
|
||||
<div class="button-box" style="width: 55px;font-size: 12px;height: 65px;text-align: center;padding-top: 18px;">增到共用时间表列</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<div class="button-box" style="width: 45px;font-size: 12px;height: 65px;text-align: center;margin-right: 10px;padding-top: 18px;">编辑时间表</div>
|
||||
<div class="button-box" style="width: 55px;font-size: 12px;height: 65px;line-height: 65px;text-align: center;">查看</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 110px;height: 280px;padding: 0 15px;border-right: 2px solid #2B5932;margin-left: 40px;">
|
||||
<div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;">下载选择</div>
|
||||
<div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 236px;">立即下发</div>
|
||||
</div>
|
||||
<div style="width: 70px;height: 280px;margin-left: 15px;">
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Mon')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Mon')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期一</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Tues')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Tues')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期二</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Wed')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Wed')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期三</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Thurs')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Thurs')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期四</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Fri')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Fri')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期五</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Sta')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Sta')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期六</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Sun')">
|
||||
<div class="check-box" :style="{background: stationDate.includes('Sun')?'#0F0':'#BFC1C1'}" />
|
||||
<div class="check-text">星期日</div>
|
||||
</div>
|
||||
<div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 80px;">排定下发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,14 +126,35 @@ export default {
|
||||
name: 'SchedulesManage',
|
||||
data() {
|
||||
return {
|
||||
tableName: ''
|
||||
tableName: '',
|
||||
newTableName: '',
|
||||
stationDate: [],
|
||||
allStationDate: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectedStationDate(day) {
|
||||
const index = this.stationDate.indexOf(day);
|
||||
if (index < 0) {
|
||||
this.stationDate.push(day);
|
||||
} else {
|
||||
this.stationDate.splice(index, 1);
|
||||
}
|
||||
},
|
||||
selectedAllStationDate(day) {
|
||||
const index = this.allStationDate.indexOf(day);
|
||||
if (index < 0) {
|
||||
this.allStationDate.push(day);
|
||||
} else {
|
||||
this.allStationDate.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.top-content-box {
|
||||
.content-box {
|
||||
width: 950px;
|
||||
margin-top: 10px;
|
||||
border-top: 2px solid #A4A3A0;
|
||||
@ -56,10 +163,24 @@ export default {
|
||||
border-right: 2px solid #E5F1FE;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.border-box{
|
||||
border-top: 2px solid #FFFFFE;
|
||||
border-right: 2px solid #797977;
|
||||
border-bottom: 2px solid #797977;
|
||||
border-left: 2px solid #FFFFFE;
|
||||
}
|
||||
.check-text {
|
||||
display: inline-block;
|
||||
color: #56E5DE;
|
||||
font-size: 13px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.check-box {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background: #BFC1C1;
|
||||
border-top: 2px solid #FFFFFE;
|
||||
border-right: 2px solid #797977;
|
||||
|
||||
@ -71,9 +71,9 @@ export default {
|
||||
height: 800,
|
||||
roadData: [],
|
||||
focus: false,
|
||||
booleanList: ['lockFirst', 'switchSingleHandle', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute'],
|
||||
booleanList: ['lockFirst', 'switchSingleHandle', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute', 'initSingleLockSwitch'],
|
||||
selectList: ['upDirection', 'runMode'],
|
||||
generalConfig: ['lockFirst', 'switchSingleHandle', 'upDirection', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute', 'runMode'],
|
||||
generalConfig: ['lockFirst', 'switchSingleHandle', 'upDirection', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute', 'runMode', 'initSingleLockSwitch'],
|
||||
numberList: [],
|
||||
optionsMap: {
|
||||
upDirection: [{label: 'right', value: 'right'}, {label: 'left', value: 'left'}],
|
||||
@ -86,7 +86,8 @@ export default {
|
||||
switchNRTurnChain:'道岔正/反操是否联动',
|
||||
switchSingleLockChain:'道岔单解/锁是否联动',
|
||||
signalForceCancelRoute:'是否强制取消进路/在接近区段占用时是否依旧强制执行取消进路',
|
||||
runMode:'列车控制模式/级别'
|
||||
runMode:'列车控制模式/级别',
|
||||
initSingleLockSwitch: '初始加载设备时是否默认单锁正线道岔'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user