This commit is contained in:
zyy 2020-01-20 18:29:12 +08:00
commit f2cc16c03f
2 changed files with 200 additions and 28 deletions

View File

@ -1,21 +1,49 @@
<template>
<div>
<div class="main_screen_header">乘客信息</div>
<div class="main_screen">
<div class="main_screen_header">
<div class="screen_header_text">乘客信息</div>
</div>
<div class="main_screen_content">
<div class="screen_left">
<div class="screen_left_tab" />
<div class="sceen_left_content" />
</div>
<div class="screen_main_content">
<div class="screen_main_content_inner">
<div class="screen_left_text_group">
<div class="each_data_info">车站</div>
<div class="each_data_info">站厅LCD</div>
<div class="each_data_info">上行站台</div>
<div class="each_data_info">下行站台</div>
<div class="each_data_info">出站口</div>
<div class="each_data_info">天桥1</div>
<div class="each_data_info">天桥2</div>
<div class="each_data_info">物业</div>
<div class="each_data_info">LED</div>
</div>
<div class="screen_right_group" >
<div class="each_station_info">
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
<div class="each_data_info"></div>
</div>
</div>
</div>
</div>
<div class="screen_right">
<div id="screen_right_group">
<div class="each_operate">
<div class="each_operate_text">操作</div>
<div class="each_operate_button">信息发布窗口</div>
</div>
<div class="each_operate">
<div class="each_operate_text">信息清楚</div>
<div class="each_operate_button">清除普通信息</div>
</div>
<div class="each_operate">
<div class="each_operate_text">操作</div>
<div class="each_operate_button">信息发布<br>窗口</div>
</div>
<div class="each_operate">
<div class="each_operate_text">信息清除</div>
<div class="each_operate_button">清除<br>普通信息</div>
</div>
</div>
</div>
@ -23,19 +51,19 @@
<textarea id="screen_footer_text" name="" cols="30" rows="10" />
<div class="footer_button_group">
<div class="each_footer_button">
<div class="each_footer_button_icon" />
<div class="each_footer_button_icon screen_status_green" />
<div class="each_footer_button_text">正常</div>
</div>
<div class="each_footer_button">
<div class="each_footer_button_icon" />
<div class="each_footer_button_icon screen_status_red" />
<div class="each_footer_button_text">故障</div>
</div>
<div class="each_footer_button">
<div class="each_footer_button_icon" />
<div class="each_footer_button_icon screen_status_blue" />
<div class="each_footer_button_text">通信故障</div>
</div>
<div class="each_footer_button">
<div class="each_footer_button_icon" />
<div class="each_footer_button_icon screen_status_active" />
<div class="each_footer_button_text">选定</div>
</div>
</div>
@ -48,20 +76,163 @@ export default {
};
</script>
<style lang="scss" scoped>
.screen_header_text{
margin-top: 20px;
text-align: center;
color: #9af1ec;
font-size: 18px;
padding-right: 100px;
padding-bottom: 10px;
}
.main_screen{
padding-left: 50px;
width: 100%;
}
.main_screen_header{}
.main_screen_content{}
.screen_left{}
.screen_main_content_inner{
width: 100%;
height: 500px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.main_screen_content{
display:inline-block;
width: 100%;
padding-left:100px;
padding-right:200px;
position: relative;
height:500px;
}
.screen_left{
display: inline-block;
width: 100px;
border: 2px #ccc solid;
height: 200px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
position:absolute;
left:0;
}
.screen_left_tab{}
.sceen_left_content{}
.screen_right{}
#screen_right_group{}
.each_operate{}
.each_operate_text{}
.each_operate_button{}
.footer_button_group{}
.main_screen_footer{}
#screen_footer_text{}
.each_footer_button{}
.each_footer_button_icon{}
.each_footer_button_text{}
.screen_right{
display: inline-block;
position:absolute;
right:0;
top:0;
width: 200px;
}
.each_operate{
width: 92px;
padding: 10px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
margin-top: 30px;
margin-left: 30px;
}
.each_operate_text{
text-align: center;
font-size: 12px;
color: #a9f4f6;
}
.each_operate_button{
text-align: center;
font-size: 12px;
margin-top: 5px;
background: #CCCCCC;
display: inline-block;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
padding: 2px 8px;
line-height: 140%;
}
.footer_button_group{
position: absolute;
right: 0;
top: 0;
width: 160px;
}
.main_screen_footer{
margin-left: 120px;
padding-right:160px;
position: relative;
margin-top:10px;
}
#screen_footer_text{
width:100%;
resize:none;
height: 190px;
border-top: 2px solid #8c8a89;
border-left: 2px solid #8c8a89;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.each_footer_button{
margin-left:20px;
margin-top: 10px;
}
.each_footer_button_icon{
width: 14px;
height: 14px;
display: inline-block;
}
.each_footer_button_text{
font-size: 13px;
color: #fff;
margin-left: 5px;
display: inline-block;
vertical-align: top;
margin-top: 1px;
}
.screen_main_content{
padding-left: 20px;
padding-right: 20px;
}
.screen_status_red{
background:#ff0000;
}
.screen_status_green{
background:#00ff00;
}
.screen_status_blue{
background:#00aaff
}
.screen_status_active{
border-top: 2px solid #f1f1f1;
border-left: 2px solid #d0d8dd;
border-right: 2px solid #959da0;
border-bottom: 2px solid #90999d;
}
.screen_status_active:after{
content:'';
border-top: 2px solid #a6a2a6;
border-left: 2px solid #a5aca5;
border-right: 2px solid #ececec;
border-bottom: 2px solid #e4e4e4;
background: #00ff00;
min-width: 10px;
height: 10px;
display: inline-block;
vertical-align: top;
}
.screen_status_active::after{
content:'';
border-top: 2px solid #a6a2a6;
border-left: 2px solid #a5aca5;
border-right: 2px solid #ececec;
border-bottom: 2px solid #e4e4e4;
background: #00ff00;
min-width: 10px;
height: 10px;
display: inline-block;
vertical-align: top;
}
</style>

View File

@ -304,6 +304,7 @@ export default {
return;
}
this.tableToExcel(res.data);
this.$messageBox(this.$t('tip.dataValidationFailed'));
},
tableToExcel(data) {
const filterVal = ['index'];