<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" placeholder="请输入关键字并回车" v-model="filterForm.leaveStationName" @keypress.enter.native="searchList"></el-input>
|
</el-form-item>
|
<el-form-item label="到达站点">
|
<el-input style="width: 154px" placeholder="请输入关键字并回车" v-model="filterForm.arriveStationName" @keypress.enter.native="searchList"></el-input>
|
</el-form-item>
|
<el-form-item label="拥堵等级">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.id"
|
popper-class="safety-report-filter"
|
@change="searchList"
|
>
|
<el-option label="全部" value=""></el-option>
|
<el-option v-for="item in typeOptions" :key="item.id" :label="item.dictLabel" :value="item.id"></el-option>
|
</el-select>
|
</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="list"
|
highlight-current-row
|
v-loading="loading"
|
ref="stationCongestionTable"
|
@sort-change="handleSortChange"
|
>
|
<el-table-column align="center" prop="leaveStationName" label="出发站点" sortable="custom"></el-table-column>
|
<el-table-column align="center" prop="arriveStationName" label="到达站点" 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>
|
<div class="g-pagination">
|
<el-pagination
|
layout="prev, pager, next"
|
:total="total"
|
:page-size="filterForm.pageSize"
|
background
|
@current-change="pageChange"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
export default {
|
name: "safetyAccidentReport",
|
data() {
|
return {
|
loading: false,
|
filterForm: {
|
oneDate: "",
|
pageSize: 20,
|
pageNum: 1,
|
id: '', // 拥堵等级
|
lineName: '',
|
leaveStationName: '',
|
arriveStationName: '',
|
},
|
list: [],
|
typeOptions: [],
|
total: 0
|
};
|
},
|
mounted() {
|
if(this.$route.query.prop){
|
let {prop, order} = this.$route.query;
|
this.$refs.stationCongestionTable.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.stationCongestionTable.sort(prop, order);
|
}else {
|
this.getList();
|
}
|
this.getJamRangeList(); // 获取拥堵等级
|
},
|
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();
|
},
|
searchList(){
|
this.filterForm.pageNum = 1;
|
this.list = [];
|
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.getAllStationJamList, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
lineName: this.filterForm.lineName,
|
leaveStationName: this.filterForm.leaveStationName,
|
arriveStationName: this.filterForm.arriveStationName,
|
id: this.filterForm.id,
|
oneDate: this.filterForm.oneDate ? moment(this.filterForm.oneDate).format('yyyy-MM-DD') : null,
|
...params
|
},
|
})
|
.then((res) => {
|
this.list = res.data.records;
|
this.total = Number(res.data.total);
|
this.loading = false;
|
});
|
},
|
getJamRangeList(){
|
this.$axios.get(this.$Interface.road.getJamRangeList).then(res => {
|
this.typeOptions = res.data;
|
})
|
},
|
|
pageChange(page){
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
goBack(){
|
this.$router.go(-1)
|
}
|
},
|
};
|
</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;
|
}
|
.table-container {
|
margin: 0 72px;
|
.pagination-block {
|
text-align: center;
|
margin-top: 20px;
|
}
|
}
|
}
|
}
|
</style>
|
