Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
zyy
commit
e9713fc471
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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{
|
||||
|
||||
@ -1,78 +1,91 @@
|
||||
<template>
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<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>
|
||||
<el-col :span="8" style="text-align: center;color: #FFF;">时间表</el-col>
|
||||
<el-col :span="8" style="text-align: center;color: #FFF;">版本</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8" style="padding: 10px;">
|
||||
<el-select v-model="station" size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in stations"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding: 10px;">
|
||||
<div style="width: 100%;height: 28px;background: #FFF" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding: 10px;">
|
||||
<div style="width: 100%;height: 28px;background: #FFF" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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>
|
||||
<el-col :span="8" style="text-align: center;color: #FFF;">时间表</el-col>
|
||||
<el-col :span="8" style="text-align: center;color: #FFF;">版本</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8" style="padding: 10px;">
|
||||
<el-select v-model="station" size="mini" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in stations"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding: 10px;">
|
||||
<div style="width: 100%;height: 28px;background: #FFF" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding: 10px;">
|
||||
<div style="width: 100%;height: 28px;background: #FFF" />
|
||||
</el-col>
|
||||
</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: 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>
|
||||
<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>
|
||||
<el-col :span="8" style="text-align: center;color: #FFF;border-right: 1px solid #000;border-bottom: 1px solid #000;">系统</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="top-box" style="border: 0; display: flex;justify-content: space-between;">
|
||||
<div class="button-box">上一页</div>
|
||||
<div class="button-box">更新时间表</div>
|
||||
<div class="button-box">下一页</div>
|
||||
</div>
|
||||
</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;">
|
||||
<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>
|
||||
<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>
|
||||
<el-col :span="8" style="text-align: center;color: #FFF;border-right: 1px solid #000;border-bottom: 1px solid #000;">系统</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="top-box" style="border: 0; display: flex;justify-content: space-between;">
|
||||
<div class="button-box">上一页</div>
|
||||
<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);">
|
||||
<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-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-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-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-row>
|
||||
</div>
|
||||
<div style="position: absolute;left: calc(25% + 600px);font-size: 12px;top: calc(100% - 150px);display: flex;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;" @click="changeShowMode('stationRunningSchedule')">全线运行<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 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" 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" 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" 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" 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="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('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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user