<template>
|
<div class="page-container page-safety colorfff">
|
<div class="nav">
|
<img
|
class="nav-icon"
|
:src="require('@/assets/safety/location.png')"
|
alt=""
|
/>
|
<div class="nav-content">
|
<span @click="goBack">数据看板 </span>
|
<i class="el-icon el-icon-arrow-right"></i>
|
<span> 线路拥堵列表</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="filter-section">
|
<el-form :inline="true" :model="filterForm" ref="filterForm" class="g-table-filter">
|
<el-form-item label="线路名称">
|
<el-input style="width: 154px" v-model="filterForm.lineName" @keypress.enter.native="searchList"></el-input>
|
</el-form-item>
|
<el-form-item label="时间筛选">
|
<el-date-picker
|
v-model="filterForm.oneDate"
|
type="date"
|
placeholder=""
|
style="width: 154px"
|
:clearable="true"
|
@change="searchList"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="g-table">
|
<el-table
|
stripe
|
style="width: 100%"
|
header-row-class-name="table-header"
|
:height="'calc(100vh - 400px)'"
|
:data="reportList"
|
highlight-current-row
|
v-loading="loading"
|
ref="roadCongestionTable"
|
@sort-change="handleSortChange"
|
>
|
<el-table-column align="center" prop="lineName" label="线路" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="lineType" label="上行/下行" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="lineLength" label="线路长度（km）" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="stationTravelTime" label="行驶时间（分钟）" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="runningSpeed" label="行驶速度（km/h）" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="jamRange" label="拥堵等级" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="status" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="yongdutable(scope.row)">查看地图</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="g-pagination">
|
<el-pagination
|
layout="total, prev, pager, next"
|
:total="total"
|
:page-size="filterForm.pageSize"
|
background
|
@current-change="pageChange"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<linemap ref="linemap" v-show="activedmap" @closelinemap="closelinemap"></linemap>
|
</div>
|
|
</template>
|
|
<script>
|
import linemap from '../map/linemap.vue'
|
import moment from 'moment'
|
export default {
|
name: "safetyAccidentReport",
|
data() {
|
return {
|
activedmap: false,
|
attr: {},
|
filterForm: {
|
lineName: '',
|
oneDate: moment(),
|
pageSize: 20,
|
pageNum: 1,
|
},
|
reportList: [],
|
typeOptions: [],
|
loading: false,
|
total: 0
|
};
|
},
|
mounted() {
|
if(this.$route.query.prop){
|
let {prop, order} = this.$route.query;
|
this.$refs.roadCongestionTable.sort(prop, order);
|
}else {
|
this.getList();
|
}
|
},
|
activated(){
|
if(this.$route.query.status) this.filterForm.status = this.$route.query.status
|
if(this.$route.query.prop){
|
let {prop, order} = this.$route.query;
|
this.$refs.roadCongestionTable.sort(prop, order);
|
}else {
|
this.getList();
|
}
|
this.activedmap = false
|
},
|
components:{ linemap },
|
methods: {
|
handleSortChange(opt){
|
let {prop, order} = opt;
|
this.filterForm.sortWord = prop;
|
switch (order){
|
case 'ascending':
|
this.filterForm.sortFx = 'ASC';
|
break;
|
case 'descending':
|
this.filterForm.sortFx = 'DESC';
|
break;
|
default:
|
this.filterForm.sortFx = '';
|
}
|
this.getList();
|
},
|
goBack(){
|
this.$router.go(-1)
|
},
|
searchList(){
|
this.filterForm.pageNum = 1;
|
this.reportList = [];
|
this.getList();
|
},
|
getList() {
|
this.loading = true;
|
const params = {};
|
if(this.filterForm.sortFx){
|
params.sortFx = this.filterForm.sortFx;
|
params.sortWord = this.filterForm.sortWord;
|
}
|
this.$axios
|
.get(this.$Interface.road.getAllLineJamList, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
oneDate: this.filterForm.oneDate ? moment(this.filterForm.oneDate).format('yyyy-MM-DD') : null,
|
lineName: this.filterForm.lineName,
|
...params
|
},
|
})
|
.then((res) => {
|
this.reportList = res.data.records;
|
this.total = Number(res.data.total);
|
this.loading = false;
|
});
|
},
|
pageChange(page){
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
yongdutable(row){
|
this.activedmap = true
|
let attr = Object.assign({oneDate: "2021-11-07"}, row);
|
this.$refs.linemap.getSelectByLineId(attr);
|
},
|
toRoad(){},
|
closelinemap(){
|
this.activedmap = false
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
.page-container {
|
padding: 20px 30px;
|
padding-bottom: 0;
|
.nav {
|
display: flex;
|
font-size: 14px;
|
width: 100%;
|
height: 20px;
|
align-items: center;
|
.nav-icon {
|
width: 18px;
|
margin-left: 11px;
|
flex-shrink: 0;
|
margin-right: 11px;
|
}
|
.nav-content {
|
flex: 1;
|
}
|
}
|
.content {
|
margin-top: 16px;
|
.filter-section {
|
text-align: center;
|
/deep/input {
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
::placeholder {
|
font-size: 12px;
|
}
|
color: #fff!important;
|
}
|
/deep/.el-icon-arrow-up:before {
|
content: "\e78f";
|
}
|
/deep/.el-form-item__label {
|
color: #fff;
|
}
|
/deep/.el-icon-date::before{
|
content: ''!important;
|
}
|
}
|
.table-container {
|
margin: 0 72px;
|
.pagination-block {
|
text-align: center;
|
margin-top: 20px;
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="less" scoped>
|
// .safety-report-filter {
|
// background: rgba(20, 131, 242, 0.6) !important;
|
// border-radius: 0 !important;
|
// border-color: rgba(20, 131, 242, 0.6) !important;
|
// color: #fff !important;
|
// }
|
// .safety-report-filter .popper__arrow {
|
// border-bottom-color: rgba(0, 131, 250, 0.1) !important;
|
// }
|
// .safety-report-filter .popper__arrow::after {
|
// border-bottom-color: rgba(20, 131, 242, 0.6) !important;
|
// top: 0px !important;
|
// }
|
.page-safety .el-table tr {
|
background: #161e2f !important;
|
// height: 40px;
|
}
|
.page-safety .el-table td.el-table__cell {
|
border-bottom: none !important;
|
padding: 0 !important;
|
}
|
.page-safety
|
.el-table--striped
|
.el-table__body
|
tr.el-table__row--striped
|
td.el-table__cell {
|
background: #182237 !important;
|
}
|
.page-safety .table-header th {
|
height: 54px !important;
|
background: rgba(255, 255, 255, 0.04) !important;
|
color: rgba(255, 255, 255, 0.85);
|
}
|
.page-safety .el-table {
|
background: none !important;
|
}
|
.page-safety .el-table::before {
|
height: 0 !important;
|
}
|
.page-safety .table-header {
|
background: none;
|
}
|
.page-safety .el-table th.el-table__cell.is-leaf {
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
}
|
.page-safety .el-table__empty-block {
|
background: rgba(60, 129, 255, 0.04);
|
}
|
.page-safety .el-table__body tr.current-row > td.el-table__cell {
|
background: rgba(60, 129, 255, 0.1) !important;
|
}
|
.page-safety
|
.el-table--striped
|
.el-table__body
|
tr.current-row.el-table__row--striped
|
td.el-table__cell {
|
background: rgba(60, 129, 255, 0.1) !important;
|
}
|
.page-safety
|
.el-table--enable-row-hover
|
.el-table__body
|
tr:hover
|
> td.el-table__cell {
|
background: rgba(60, 129, 255, 0.1) !important;
|
}
|
.page-safety {
|
.pagination-block {
|
/deep/.el-pagination__total{
|
color: #ffffff;
|
}
|
.el-pagination.is-background .btn-next,
|
.el-pagination.is-background .btn-prev,
|
.el-pagination.is-background .el-pager li {
|
background: none;
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
color: rgba(255, 255, 255, 0.65);
|
}
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
background: #0179d0 !important;
|
}
|
}
|
.el-table--enable-row-hover .el-table__body tr:hover {
|
border: 1px solid rgba(0, 114, 194, 0.5);
|
}
|
.el-table--striped .el-table__body tr.current-row.el-table__row--striped {
|
border: 1px solid rgba(0, 114, 194, 0.5);
|
}
|
}
|
// .safety-report-filter .el-select-dropdown__empty {
|
// color: #fff !important;
|
// }
|
</style>
|
