<template>
|
<div class="vc-basic-passenger-flow-date-bar">
|
<div class="_title-box title-box1">
|
<div class="title-name ml20 mr20">{{ $route.query.name }}{{ $route.query.typeName }}客流统计</div>
|
<el-date-picker
|
v-model="timeRange"
|
type="daterange"
|
style="width: 204px"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:clearable="false"
|
@change="handleTimeChange"
|
>
|
</el-date-picker>
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="exportData">
|
数据导出
|
</div>
|
</div>
|
</div>
|
<div style="height: 80vh" class="g-table mt10">
|
<el-table
|
:data="list"
|
height="calc(100vh - 320px)"
|
stripe
|
v-loading="false"
|
header-row-class-name="table-header"
|
highlight-current-row
|
style="width: 100%">
|
<el-table-column
|
prop="lineName"
|
label="线路"
|
width="120">
|
<template slot="header">
|
<div class="_table-header">
|
<div class="__icon"></div>
|
<div class="__title">时段</div>
|
<div>客流</div>
|
</div>
|
</template>
|
<!-- <template #default="{row, index}">{{ index }}</template> -->
|
</el-table-column>
|
<el-table-column
|
prop="passengerFlow_1_2"
|
v-for="(item, index) in dataList"
|
label="1-2"
|
min-width="60">
|
<template slot="header">
|
<div>{{item}}</div>
|
</template>
|
<template slot-scope="scope">{{
|
scope.row.lineName == '合计' ? scope.row.childList[item.split('-')[0]] : scope.row.childList[item.split('-')[0]].sumVolumePeople
|
}}</template>
|
</el-table-column>
|
<el-table-column
|
prop="合计"
|
min-width="80">
|
<template slot="header">
|
<div>合计</div>
|
</template>
|
<template slot-scope="scope">{{ lineTotal[scope.row.lineName] }}</template>
|
</el-table-column>
|
</el-table>
|
<!-- <barTop10 v-if="isShow" height="28vh" :option="optiontop_kl" width="100%" id="bar" /> -->
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import moment from "moment";
|
import barTop10 from '../../echart/barTop10';
|
import qs from "qs";
|
export default {
|
name: 'dateBar',
|
components: { barTop10 },
|
data () {
|
return {
|
isShow: false,
|
list: [],
|
lineObject: {},
|
lineTotal: {
|
|
},
|
timeRange: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
filterInfo: {
|
startDate: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
endDate: moment().subtract(1, 'day').format("yyyy-MM-DD")
|
},
|
dataList: ['0-1', '1-2', '2-3', '3-4', '4-5', '5-6', '6-7', '7-8','8-9','9-10','10-11','11-12','12-13','13-14','14-15','15-16','16-17','17-18','18-19','19-20','20-21','21-22','22-23','23-24']
|
}
|
},
|
computed: {
|
},
|
created() {
|
|
},
|
activated() {
|
this.loadData()
|
},
|
methods: {
|
loadData() {
|
const { id, typeName, name } = this.$route.query;
|
this.$axios.get(this.$Interface.basicResource.getLinePassFlowDetail, {
|
params: {
|
lineName: name,
|
...this.filterInfo,
|
},
|
}).then((res) => {
|
this.isShow = true;
|
this.list = [];
|
this.lineTotal = [];
|
let timeTotal = [];
|
let moreNum = 0;
|
|
console.log(res.data, 'res.data');
|
|
for (let index in res.data){
|
let stationName = res.data[index].stationName;
|
let item = {
|
lineName: stationName,
|
childList: res.data[index].list
|
}
|
this.list.push(item);
|
let total = 0;
|
for(let i in res.data[index].list) {
|
let child_list = res.data[index].list
|
let num = child_list[i].sumVolumePeople;
|
total += num;
|
timeTotal[i] = timeTotal[i] ? num + timeTotal[i] : num;
|
}
|
this.lineTotal[stationName] = total; // 线路合计
|
moreNum += total;
|
|
|
}
|
this.list.push({
|
lineName: '合计',
|
childList: timeTotal
|
|
});
|
this.lineTotal['合计'] = 0;
|
this.lineTotal['合计'] += moreNum;
|
console.log(this.list, 'this.list', this.lineTotal, timeTotal);
|
|
});
|
},
|
handleTimeChange(e) {
|
if(e[0]) {
|
this.filterInfo.startDate = moment(e[0]).format("yyyy-MM-DD");
|
this.filterInfo.endDate = moment(e[1]).format("yyyy-MM-DD");
|
this.loadData();
|
}
|
|
},
|
exportData() {
|
const { id, typeName, name } = this.$route.query;
|
let token = localStorage.getItem("mtoken");
|
let _params = qs.stringify({
|
token,
|
lineName: name,
|
...this.filterInfo,
|
});
|
let a = document.createElement("a");
|
a.href = `${
|
this.$exportBase + this.$Interface.basicResource.exportLinePassFlowDetail
|
}?${_params}`;
|
a.click();
|
a = null;
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.vc-basic-passenger-flow-date-bar {
|
margin: 0 72px;
|
.action-bar {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-left: 50px;
|
cursor: pointer;
|
.action-item:first-child {
|
margin-right: 20px;
|
}
|
.action-item {
|
padding: 4px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
.orange {
|
border-color: #1cd1d3;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
.blue {
|
border-color: #3e89d3;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
}
|
|
</style>
|
