<template>
|
<div class="blackNameForm-wrap">
|
<el-dialog
|
title="黑名单重点车辆记录"
|
:visible.sync="dialogVisible"
|
width="60%">
|
<div class="daibanForm-main">
|
<el-table
|
:data="pageData.rows"
|
style="width: 100%"
|
max-height="550">
|
<el-table-column
|
align="center"
|
fixed
|
type="index"
|
label="序号"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="carNo"
|
label="车牌号"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="color"
|
label="车辆颜色"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="carType"
|
label="车辆类型"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="violationCount"
|
label="违章次数"
|
width="120">
|
</el-table-column>
|
</el-table>
|
<div class="black-footer-box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageData.currentPage"
|
:page-sizes="[10, 20, 30, 40, 50, 100, 200]"
|
:page-size="pageData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pageData.total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "blackNameForm",
|
data() {
|
return {
|
pageConfig: {
|
pageDataUrl: this.$systemconfig.basePath + '/statistic/getBlackRecord',
|
},
|
pageData: this.$byutil.defaultPageData(),
|
dialogVisible:false,
|
}
|
},
|
methods: {
|
initData() {
|
this.dialogVisible = true
|
this.$byutil.initTableMaxHeight(this);
|
this.loadData();
|
},
|
//加载数据
|
loadData() {
|
this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,this.pageData);
|
},
|
handleSizeChange(val) {
|
this.pageData.pageSize = val;
|
this.loadData();
|
},
|
handleCurrentChange(val) {
|
this.pageData.page = val;
|
this.loadData();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.blackNameForm-wrap{
|
.el-dialog__title{
|
color: #fff;
|
}
|
.el-dialog, .el-pager li{
|
background:rgba(0,0,0,0.9);
|
}
|
.el-form-item__label{
|
color: #00fff6;
|
}
|
.el-table th{
|
background:rgba(4,40,70,0.7);
|
}
|
.el-table tr{
|
background:transparent;
|
}
|
.el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
|
background:rgba(4,40,70,0.7);
|
}
|
.el-table__row:nth-child(even){
|
background:rgba(4,40,70,0.7);
|
}
|
.el-table, .el-table__expanded-cell{
|
background:transparent;
|
}
|
.el-table td, .el-table th.is-leaf{
|
border:none;
|
}
|
.el-table__body,.el-table__header{
|
width: 100% !important;
|
}
|
.el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
|
background-color: transparent;
|
}
|
.el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
|
background-color: #374f65;
|
}
|
.el-table--enable-row-hover .el-table__body tr:hover>td{
|
background-color: #374f65;
|
}
|
.el-table thead{
|
color: #fff;
|
}
|
.el-table{
|
color:#00fff6;
|
}
|
.el-dialog__header{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
.black-footer-box{
|
.el-pagination__total{
|
color:#fff;
|
}
|
.el-pager li{
|
color:#fff;
|
}
|
.el-pagination__jump{
|
color:#fff;
|
}
|
.el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
|
background-color: transparent;
|
}
|
.el-pager li.active{
|
color: #409EFF;
|
}
|
.el-input__inner{
|
color:#fff;
|
border:1px solid #409EFF;
|
}
|
.el-pagination .btn-next, .el-pagination .btn-prev{
|
color:#fff;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.black-footer-box{
|
display: flex;
|
flex-direction: row-reverse;
|
margin-top: 0.1042rem /* 20/192 */;
|
}
|
</style>
|
