This commit is contained in:
zyy 2020-06-11 17:07:14 +08:00
commit e9713fc471
6 changed files with 385 additions and 90 deletions

View File

@ -1,9 +1,11 @@
<template>
<div class="schedules-box">
<div class="title-name">车站运行时间表</div>
<div class="title-name">{{ modeName }}</div>
<station-running-schedule v-if="showMode === 'stationRunningSchedule'" @changeShowMode="changeShowMode" />
<weekly-status v-else-if="showMode==='weeklyStatus'" @changeShowMode="changeShowMode" />
<schedules-manage v-else-if="showMode === 'schedulesManage'" @changeShowMode="changeShowMode" />
<broad-overview v-else-if="showMode === 'broadOverview'" @changeShowMode="changeShowMode" />
<save-schedule-view v-else-if="showMode === 'saveScheduleView'" @changeShowMode="changeShowMode" />
</div>
</template>
@ -11,23 +13,47 @@
import StationRunningSchedule from './schedulesChild/stationRunningSchedule';
import WeeklyStatus from './schedulesChild/weeklyStatus';
import SchedulesManage from './schedulesChild/schedulesManage';
import BroadOverview from './schedulesChild/broadOverview';
import SaveScheduleView from './schedulesChild/saveScheduleView';
export default {
name: 'Schedules',
components: {
StationRunningSchedule,
WeeklyStatus,
SchedulesManage
SchedulesManage,
BroadOverview,
SaveScheduleView
},
data() {
return {
station: '',
stations: [],
showMode: 'stationRunningSchedule'
showMode: 'stationRunningSchedule',
modeName: '车站运行时间表'
};
},
computed: {
},
methods: {
changeShowMode(mode) {
this.showMode = mode;
switch (this.showMode) {
case 'stationRunningSchedule':
this.modeName = '车站运行时间表';
break;
case 'weeklyStatus':
this.modeName = '一周车站时间表定期下载';
break;
case 'broadOverview':
this.modeName = '';
break;
case 'schedulesManage':
this.modeName = '控制时间表管理';
break;
case 'saveScheduleView':
this.modeName = '车站保存时间表查看';
break;
}
}
}
};
@ -41,7 +67,7 @@ export default {
.title-name{
width: 100%;
text-align: center;
font-size: 26px;
font-size: 20px;
margin-top: 30px;
color: #56E5DE;
}

View File

@ -0,0 +1,112 @@
<template>
<div style="width: 100%;height: calc(100% - 50px);display: flex;justify-content: center">
<div style="width: 25px;font-size: 18px;color: #56E5DE;margin: auto 3px;">主线运行时间表总览</div>
<div class="table-box" style="font-size: 13px">
<div style="display: flex;justify-content: left">
<div class="table-head" style="width: 95px;">车站</div>
<div class="table-head" style="width: 95px;" />
<div class="table-head" style="width: 95px;">版本</div>
<div class="table-head" style="width: 95px;" />
<div class="table-head" style="width: 140px;">空调大系统</div>
<div class="table-head" style="width: 140px;">空调小系统</div>
<div class="table-head" style="width: 140px;">隧道通风系统</div>
<div class="table-head" style="width: 140px;">照明系统</div>
</div>
<template v-for="(item, index) in tableData">
<div :key="index" style="display: flex;justify-content: left">
<div style="height: 30px;line-height: 30px;width: 95px;color: #56E5DE;border-bottom: 1px solid #3E5770">{{ item.stationName }}</div>
<div style="height: 30px;width: 95px;background: #FFF;border-bottom: 1px solid #3E5770;" />
<div style="height: 30px;width: 95px;border-bottom: 1px solid #3E5770;" />
<div class="button-box" style="height: 30px;width: 95px;line-height: 30px;text-align: center;">内容</div>
<div style="width: 140px;border-bottom: 1px solid #3E5770;">
<div style="display: inline-block;height: 28px;line-height: 28px;width: 60px;text-align: center;" :style="{color: item.largeAirConditioning?'#0F0':'#F00'}">{{ item.largeAirConditioning?'允许': '禁止' }}</div>
<div class="button-box" style="display: inline-block;height: 28px;width: 60px;line-height: 28px;text-align: center;" @click="changeSystemMode(item, 'largeAirConditioning')">允许/禁止</div>
</div>
<div style="width: 140px;border-bottom: 1px solid #3E5770;">
<div style="display: inline-block;height: 28px;line-height: 28px;width: 60px;text-align: center;" :style="{color: item.smallAirConditioning?'#0F0':'#F00'}">{{ item.smallAirConditioning?'允许': '禁止' }}</div>
<div class="button-box" style="display: inline-block;height: 28px;width: 60px;line-height: 28px;text-align: center;" @click="changeSystemMode(item, 'smallAirConditioning')">允许/禁止</div>
</div>
<div style="width: 140px;border-bottom: 1px solid #3E5770;">
<div style="display: inline-block;height: 28px;line-height: 28px;width: 60px;text-align: center;" :style="{color: item.tunnelVentilation?'#0F0':'#F00'}">{{ item.tunnelVentilation?'允许': '禁止' }}</div>
<div class="button-box" style="display: inline-block;height: 28px;width: 60px;line-height: 28px;text-align: center;" @click="changeSystemMode(item, 'tunnelVentilation')">允许/禁止</div>
</div>
<div style="width: 140px;border-bottom: 1px solid #3E5770;">
<div style="display: inline-block;height: 28px;line-height: 28px;width: 60px;text-align: center;" :style="{color: item.lighting?'#0F0':'#F00'}">{{ item.lighting?'允许': '禁止' }}</div>
<div class="button-box" style="display: inline-block;height: 28px;width: 60px;line-height: 28px;text-align: center;" @click="changeSystemMode(item, 'lighting')">允许/禁止</div>
</div>
</div>
</template>
</div>
<div style="font-size: 13px;text-align: center;margin-left: 10px;display: flex;flex-direction: column-reverse;">
<div class="button-box" style="height: 35px;padding-top: 2px;margin-bottom: 60px;" @click="changeShowMode('saveScheduleView')">车站保存<br>时间表查看</div>
<div class="button-box" style="height: 35px;padding-top: 2px;margin-bottom: 10px;" @click="changeShowMode('weeklyStatus')">每周<br>下发一览</div>
<div class="button-box" style="height: 35px;line-height: 35px;margin-bottom: 10px;" @click="changeShowMode('schedulesManage')">时间表管理</div>
</div>
</div>
</template>
<script>
export default {
name: 'BroadOverview',
data() {
return {
tableData: [
{stationName:'会展中心站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'世纪大道站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'交通大学站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'市图书馆站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'中心医院站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'未来路站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'火车站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'人民广场站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true},
{stationName:'体育中心站', largeAirConditioning: true, smallAirConditioning: true, tunnelVentilation: true, lighting: true}
]
};
},
methods: {
changeSystemMode(item, system) {
item[system] = !item[system];
},
changeShowMode(mode) {
this.$emit('changeShowMode', mode);
}
}
};
</script>
<style scoped>
.table-head{
background: #43388A;
border-right: 1px solid #001528;
border-bottom: 1px solid #001528;
height: 25px;
color: #FFF;
text-align: center;
line-height: 25px;
}
.table-box {
width: 85%;
height: 90%;
margin-top: 10px;
border-top: 2px solid #5B6163;
border-right: 1px solid #64758A;
border-left: 1px solid #64758A;
border-bottom: 1px solid #64758A;
}
.button-box {
background: #BABABB;
border-top: 2px solid #FFFFFE;
border-right: 2px solid #797977;
border-bottom: 2px solid #797977;
border-left: 2px solid #FFFFFE;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
</style>

View File

@ -0,0 +1,120 @@
<template>
<div style="width: 100%;margin-top: 10px;">
<div class="border-box" style="width: 840px;margin: auto">
<el-row>
<el-col class="table-header" :span="8">车站</el-col>
<el-col class="table-header" :span="8">时间表</el-col>
<el-col class="table-header" :span="8">版本</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-select v-model="station" size="mini" placeholder="请选择" style="width: 250px;margin: 5px 15px">
<el-option
v-for="item in stations"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="8">
<el-select v-model="schedule" size="mini" placeholder="请选择" style="width: 250px;margin: 5px 15px">
<el-option
v-for="item in schedules"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="8">
<div style="width: 250px;background: #FFF;height: 28px;margin: 5px 15px" />
</el-col>
</el-row>
</div>
<div style="display: flex;justify-content: center;">
<div style="display: flex; flex-wrap: wrap;width: 950px;margin-top: 10px;margin-left: 90px;">
<div style="width: 460px;height: 280px;background: #FFF;margin: 5px;">
<el-row>
<el-col class="table-header" style="text-align: left;" :span="6">时间</el-col>
<el-col class="table-header" style="text-align: left;" :span="18">空调大系统</el-col>
</el-row>
</div>
<div style="width: 460px;height: 280px;background: #FFF;margin: 5px;">
<el-row>
<el-col class="table-header" style="text-align: left;" :span="6">时间</el-col>
<el-col class="table-header" style="text-align: left;" :span="18">空调小系统</el-col>
</el-row>
</div>
<div style="width: 460px;height: 280px;background: #FFF;margin: 5px;">
<el-row>
<el-col class="table-header" style="text-align: left;" :span="6">时间</el-col>
<el-col class="table-header" style="text-align: left;" :span="18">照明系统</el-col>
</el-row>
</div>
<div style="width: 460px;height: 280px;background: #FFF;margin: 5px;">
<el-row>
<el-col class="table-header" style="text-align: left;" :span="6">时间</el-col>
<el-col class="table-header" style="text-align: left;" :span="18">隧道通风系统</el-col>
</el-row>
</div>
</div>
<div style="position: relative;top: 50px;font-size: 12px;text-align: center;margin-top: 355px;">
<div class="button-box" style="height: 35px;width:70px;margin: 10px;padding: 0;line-height: 30px;" @click="changeShowMode('schedulesManage')">时间表管理</div>
<div class="button-box" style="height: 35px;width:70px;margin: 10px;padding: 3px 0;" @click="changeShowMode('broadOverview')">全线运行<br>时间表总览</div>
<div class="button-box" style="height: 35px;width:70px;margin: 10px;padding: 3px 0;" @click="changeShowMode('stationRunningSchedule')">车站运行<br>时间表查看</div>
<div class="button-box" style="height: 35px;width:70px;margin: 10px;padding: 3px 0;" @click="changeShowMode('weeklyStatus')">每周<br>下发一览</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SaveScheduleView',
data() {
return {
station: '',
stations: [],
schedule: '',
schedules: []
};
},
methods: {
changeShowMode(mode) {
this.$emit('changeShowMode', mode);
}
}
};
</script>
<style scoped>
.border-box{
border-top: 2px solid #FFFFFE;
border-right: 2px solid #797977;
border-bottom: 2px solid #797977;
border-left: 2px solid #FFFFFE;
}
.table-header{
background: #43388A;
text-align: center;
color: #FFF;
}
.button-box {
background: #BABABB;
border-top: 2px solid #FFFFFE;
border-right: 2px solid #797977;
border-bottom: 2px solid #797977;
border-left: 2px solid #FFFFFE;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div style="width: 100%;display: flex;justify-content: center;">
<div style="width: 100%;display: flex;justify-content: center;height: 600px;">
<div>
<div class="content-box">
<div style="width: 950px;font-size: 18px;color: #56E5DE;margin: 10px;">全线车站时间表</div>
@ -117,6 +117,12 @@
</div>
</div>
</div>
<div style="position: relative;left: calc(50% + 470px);bottom: calc(100% - 280px);font-size: 12px;text-align: center;">
<div class="button-box" style="height: 70px;width:70px;margin: 10px;padding: 21px 0;" @click="changeShowMode('broadOverview')">全线运行<br>时间表总览</div>
<div class="button-box" style="height: 70px;width:70px;margin: 10px;padding: 21px 0;" @click="changeShowMode('stationRunningSchedule')">车站运行<br>时间表查看</div>
<div class="button-box" style="height: 70px;width:70px;margin: 10px;padding: 21px 0;" @click="changeShowMode('weeklyStatus')">每周<br>下发一览</div>
<div class="button-box" style="height: 70px;width:70px;margin: 10px;padding: 21px 0;" @click="changeShowMode('saveScheduleView')">车站保存<br>时间表查看</div>
</div>
</div>
</div>
</template>
@ -148,6 +154,9 @@ export default {
} else {
this.allStationDate.splice(index, 1);
}
},
changeShowMode(mode) {
this.$emit('changeShowMode', mode);
}
}
};
@ -200,8 +209,8 @@ export default {
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/deep/
.el-input__inner{

View File

@ -1,5 +1,6 @@
<template>
<div style="width: 100%;height: 100%;">
<div style="width: 100%;height: 600px;display: flex;justify-content: center">
<div style="width: 550px;">
<div class="top-box">
<el-row style="background: #43388A;font-size: 12px;height: 20px;line-height: 20px;">
<el-col :span="8" style="text-align: center;color: #FFF;">车站</el-col>
@ -26,7 +27,7 @@
</el-row>
</div>
<div style="width: 100px;height: 20px;background: #FFF;position: relative;left: calc(25% + 450px);margin-top: 20px;" />
<div class="top-box" style="border: 0; height: 50%;background: #FFF;">
<div class="top-box" style="border: 0; height: 400px;background: #FFF;">
<el-row style="background: #43388A;font-size: 12px;height: 20px;line-height: 20px;">
<el-col :span="4" style="text-align: center;color: #FFF;border-right: 1px solid #000;border-bottom: 1px solid #000;">时间表</el-col>
<el-col :span="4" style="text-align: center;color: #FFF;border-right: 1px solid #000;border-bottom: 1px solid #000;">时间</el-col>
@ -40,40 +41,52 @@
<div class="button-box">更新时间表</div>
<div class="button-box">下一页</div>
</div>
<div style="width: 240px;position: absolute;left: calc(25% + 650px);font-size: 12px;top: calc(100% - 300px);">
</div>
<div style="margin-left: 180px;">
<div style="width: 280px;font-size: 12px;margin-top: 350px;margin-left: 65px;">
<el-row style="background: #43388A;height: 25px;line-height: 25px;">
<el-col :span="9" style="text-align: center;color: #FFF;border: 1px solid #000;">系统</el-col>
<el-col :span="9" style="text-align: center;color: #FFF;border-top: 1px solid #000;border-bottom: 1px solid #000;">允许/禁止操作</el-col>
<el-col :span="6" style="text-align: center;color: #FFF;border: 1px solid #000;">状态</el-col>
</el-row>
<el-row style="height: 25px;line-height: 25px;">
<el-col :span="9" style="text-align: center;background: #FFF;border: 1px solid #D2D2D2;border-top: 0;">空调大系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;"><div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;">允许/禁止</div></el-col>
<el-col :span="6" style="background: #0F0;text-align: center;border: 1px solid #D2D2D2;border-top: 0;">允许</el-col>
<el-col :span="9" class="table-system">空调大系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;">
<div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;" @click="changeSystemMode('largeAirConditioning')">允许/禁止</div>
</el-col>
<el-col :span="6" class="table-system" :style="{background:systemStatus.largeAirConditioning?'#0F0':'#F00'}">{{ systemStatus.largeAirConditioning?'允许':'禁止' }}</el-col>
</el-row>
<el-row style="height: 25px;line-height: 25px;">
<el-col :span="9" style="text-align: center;background: #FFF;border: 1px solid #D2D2D2;border-top: 0;">隧道通风系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;"><div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;">允许/禁止</div></el-col>
<el-col :span="6" style="background: #0F0;text-align: center;border: 1px solid #D2D2D2;border-top: 0;">允许</el-col>
<el-col :span="9" class="table-system">隧道通风系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;">
<div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;" @click="changeSystemMode('tunnelVentilation')">允许/禁止</div>
</el-col>
<el-col :span="6" class="table-system" :style="{background:systemStatus.tunnelVentilation?'#0F0':'#F00'}">{{ systemStatus.tunnelVentilation?'允许':'禁止' }}</el-col>
</el-row>
<el-row style="height: 25px;line-height: 25px;">
<el-col :span="9" style="text-align: center;background: #FFF;border: 1px solid #D2D2D2;border-top: 0;">空调小系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;"><div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;">允许/禁止</div></el-col>
<el-col :span="6" style="background: #0F0;text-align: center;border: 1px solid #D2D2D2;border-top: 0;">允许</el-col>
<el-col :span="9" class="table-system">空调小系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;">
<div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;" @click="changeSystemMode('smallAirConditioning')">允许/禁止</div>
</el-col>
<el-col :span="6" class="table-system" :style="{background:systemStatus.smallAirConditioning?'#0F0':'#F00'}">{{ systemStatus.smallAirConditioning?'允许':'禁止' }}</el-col>
</el-row>
<el-row style="height: 25px;line-height: 25px;">
<el-col :span="9" style="text-align: center;background: #FFF;border: 1px solid #D2D2D2;border-top: 0;">照明系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;"><div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;">允许/禁止</div></el-col>
<el-col :span="6" style="background: #0F0;text-align: center;border: 1px solid #D2D2D2;border-top: 0;">允许</el-col>
<el-col :span="9" class="table-system">照明系统</el-col>
<el-col :span="9" style="text-align: center;background: #FFF;">
<div class="button-box" style="padding: 3px 10px;height: 25px;line-height: 19px;" @click="changeSystemMode('lighting')">允许/禁止</div>
</el-col>
<el-col :span="6" class="table-system" :style="{background:systemStatus.lighting?'#0F0':'#F00'}">{{ systemStatus.lighting?'允许':'禁止' }}</el-col>
</el-row>
</div>
<div style="position: absolute;left: calc(25% + 600px);font-size: 12px;top: calc(100% - 150px);display: flex;text-align: center;">
<div style="font-size: 12px;display: flex;text-align: center;margin-top: 25px;width: 410px;">
<div class="button-box" style="height: 40px;line-height: 40px;margin: 10px;padding: 0 5px;" @click="changeShowMode('schedulesManage')">时间表管理</div>
<div class="button-box" style="height: 40px;margin: 10px;" @click="changeShowMode('stationRunningSchedule')">全线运行<br>时间表总览</div>
<div class="button-box" style="height: 40px;margin: 10px;" @click="changeShowMode('broadOverview')">全线运行<br>时间表总览</div>
<div class="button-box" style="height: 40px;line-height: 40px;margin: 10px;padding: 0 5px;" @click="changeShowMode('weeklyStatus')">每周下发一览</div>
<div class="button-box" style="height: 40px;margin: 10px;" @click="changeShowMode('saveScheduleView')">车站保存<br>时间表查看</div>
</div>
</div>
</div>
</template>
<script>
@ -82,12 +95,21 @@ export default {
data() {
return {
station: '',
stations: []
stations: [],
systemStatus: {
largeAirConditioning: true,
tunnelVentilation: true,
smallAirConditioning: true,
lighting:true
}
};
},
methods: {
changeShowMode(mode) {
this.$emit('changeShowMode', mode);
},
changeSystemMode(system) {
this.systemStatus[system] = !this.systemStatus[system];
}
}
};
@ -118,7 +140,13 @@ export default {
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.table-system{
text-align: center;
background: #FFF;
border: 1px solid #D2D2D2;
border-top: 0;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div style="width: 100%;display: flex;justify-content: center;">
<div style="width: 100%;height: 600px;display: flex;justify-content: center;">
<div>
<el-row style="margin-top: 120px;width: 560px;height: 28px;line-height: 28px;margin-bottom: 5px;">
<el-col :span="2" style="color: #56E5DE;">车站:</el-col>
@ -79,11 +79,11 @@
<el-col :span="4"><div class="button-box" style="text-align: center;padding: 5px 0;margin-top: 4px;">查看</div></el-col>
</el-row>
</div>
<div style="position: absolute;left: calc(50% + 320px);bottom: calc(100% - 735px);font-size: 12px;text-align: center;">
<div class="button-box" style="height: 40px;line-height: 40px;margin: 10px;padding: 0 5px;" @click="changeShowMode('schedulesManage')">时间表管理</div>
<div class="button-box" style="height: 40px;margin: 10px;padding: 5px 10px;" @click="changeShowMode('')">全线运行<br>时间表管理</div>
<div class="button-box" style="height: 40px;margin: 10px;padding: 5px 10px;" @click="changeShowMode('')">车站运行<br>时间表查看</div>
<div class="button-box" style="height: 40px;margin: 10px;padding: 5px 10px;" @click="changeShowMode('saveScheduleView')">车站保存<br>时间表查看</div>
<div style="position: relative;left: calc(50% + 320px);bottom: calc(100% - 400px);font-size: 12px;text-align: center;width: 90px;">
<div class="button-box" style="height: 40px;line-height: 40px;margin: 10px;" @click="changeShowMode('schedulesManage')">时间表管理</div>
<div class="button-box" style="height: 40px;margin: 10px;padding: 5px 0;" @click="changeShowMode('broadOverview')">全线运行<br>时间表管理</div>
<div class="button-box" style="height: 40px;margin: 10px;padding: 5px 0;" @click="changeShowMode('')">车站运行<br>时间表查看</div>
<div class="button-box" style="height: 40px;margin: 10px;padding: 5px 0;" @click="changeShowMode('saveScheduleView')">车站保存<br>时间表查看</div>
</div>
</div>
</div>
@ -129,8 +129,8 @@ export default {
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.white-block{
width: 100%;