<template>
|
<div class="c-asseaa-report-pdf-content colorfff appPlas" v-if="pageShow">
|
<div>
|
<div class="_title">
|
<div class="flex ju-c">
|
<div>{{upInfo.lineName}}运营评估报告</div>
|
<div class="_cycle">
|
{{ moment(upInfo.startDate).format("yyyy年MM月DD日") }}
|
{{ upInfo.endDate && !isOne ? '~ ' + moment(upInfo.endDate).format("yyyy年MM月DD日") : '' }}
|
</div>
|
</div>
|
|
<div class="_create-time">报告时间：{{ moment(upInfo.createDateTime).format("yyyy-MM-DD HH:mm:ss") }}</div>
|
</div>
|
<div class="pl20">
|
<v-title-home
|
class="mt5"
|
content="线路基本信息"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
/>
|
<div class="flex pl20 pr20 pt24">
|
<div class="flex-1 pr28">
|
<v-title-home
|
:content="upStationName"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="subImg"
|
:width="subWidth"
|
/>
|
<LineDetail :info="upInfo.basic" flag="1"></LineDetail>
|
</div>
|
<div class="flex-1">
|
<v-title-home
|
:content="downStationName"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="subImg"
|
:width="subWidth"
|
/>
|
<LineDetail :info="downInfo.basic" flag="2"></LineDetail>
|
</div>
|
</div>
|
<v-title-home
|
class="mt20"
|
content="线路运营信息"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
/>
|
<div class="flex pl20 pr20 pt24">
|
<div class="flex-1 pr28">
|
<v-title-home
|
:content="upStationName"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="subImg"
|
:width="subWidth"
|
/>
|
<LineOperate :info="upInfo.operate" flag="1" />
|
</div>
|
<div class="flex-1">
|
<v-title-home
|
:content="downStationName"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="subImg"
|
:width="subWidth"
|
/>
|
<LineOperate :info="downInfo.operate" flag="2" />
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="html2pdf__page-break"/>
|
<div class="pl20 pr20">
|
<v-title-home
|
class="mt20"
|
content="线路客运信息"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
/>
|
<div class="flex pl20 pr20 pt24">
|
<div class="flex-1 pr28">
|
<v-title-home
|
:content="upStationName"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="subImg"
|
:width="subWidth"
|
/>
|
<PassengerDetail :info="upInfo.passenger" flag="1" />
|
<PeakDetail :info="upInfo.passenger" type="1" />
|
<PeakDetail :info="upInfo.passenger" type="2"/>
|
</div>
|
<div class="flex-1">
|
<v-title-home
|
:content="downStationName"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="subImg"
|
:width="subWidth"
|
/>
|
<PassengerDetail :info="downInfo.passenger" flag="2" />
|
<PeakDetail :info="upInfo.passenger" type="1" />
|
<PeakDetail :info="upInfo.passenger" type="2" />
|
</div>
|
</div>
|
<div class="html2pdf__page-break"/>
|
<div class="flex pl20 pr20">
|
<div class="flex-1 pr28">
|
<PeakDetail :info="upInfo.passenger" type="3" />
|
</div>
|
<div class="flex-1">
|
<PeakDetail :info="upInfo.passenger" type="3" />
|
</div>
|
</div>
|
<div>
|
<v-title-home
|
class="mt20 _change-title"
|
content="线路客流量"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
>
|
<div class="_subTitle" style="left: 100px;">（总客流：{{upInfo.passenger.picSumPeople || 0}}人）</div>
|
</v-title-home>
|
<PassengerEcharts id="line" :info="PassengerEcharts" />
|
</div>
|
<div class="html2pdf__page-break"/>
|
<div class="mt20">
|
<v-title-home
|
content="线路上行客流量"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
class="_change-title"
|
:color="color"
|
>
|
<div class="_subTitle">（{{isOne ? '' : '日均'}}总客流：{{upInfo.passenger.sumVolumePeople || 0}}人）</div>
|
</v-title-home>
|
<div v-for="item in upInfo.showBar" :key="item" >
|
<PassengerEcharts
|
:id="`upBar${item}`"
|
type="bar"
|
:info="handleBar(upInfo.upDownBusPic, item)"
|
/>
|
<div v-if="item != 1 && item%2 == 0" class="html2pdf__page-break"/>
|
</div>
|
|
</div>
|
<div class="mt20">
|
<v-title-home
|
content="线路上行客流量与班次匹配"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
/>
|
<PassengerEcharts :info="upInfo.passengerArrangePic" id="line1" type="line" />
|
</div>
|
<div class="html2pdf__page-break"/>
|
<div class="mt20">
|
<v-title-home
|
content="线路下行客流量"
|
:showDateFlag="false"
|
class="_change-title"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
>
|
<div class="_subTitle">（{{isOne ? '' : '日均'}}总客流：{{downInfo.passenger.sumVolumePeople || 0}}人）</div>
|
</v-title-home>
|
<div v-for="item in downInfo.showBar" :key="item" >
|
<PassengerEcharts :id="`downBar${item}`" type="bar" :info="handleBar(downInfo.upDownBusPic, item)" />
|
<div v-if="item != 1 && item%2 == 0" class="html2pdf__page-break"/>
|
</div>
|
</div>
|
<div class="mt20">
|
<v-title-home
|
content="线路下行客流量与班次匹配"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
/>
|
<PassengerEcharts id="line2" :info="downInfo.passengerArrangePic" type="line" />
|
</div>
|
<div class="html2pdf__page-break" />
|
<div class="mt20">
|
<v-title-home
|
class="pt5"
|
content="收入核算"
|
:showDateFlag="false"
|
:moreShow="false"
|
:img="img"
|
:width="width"
|
:color="color"
|
/>
|
<IncomeDetail :info="upInfo.income" />
|
</div>
|
</div>
|
</div>
|
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import moment from "moment";
|
import LineDetail from '@/components/assessReport/lineDetail'
|
import LineOperate from '@/components/assessReport/lineOperate'
|
import PassengerDetail from '@/components/assessReport/passengerDetail'
|
import PeakDetail from '@/components/assessReport/peakDetail'
|
import PassengerEcharts from '@/components/assessReport/passengerEcharts'
|
import IncomeDetail from '@/components/assessReport/incomeDetail'
|
export default {
|
name: "driverappraise",
|
components: { LineDetail, LineOperate, PassengerDetail, PeakDetail, PassengerEcharts, IncomeDetail },
|
data() {
|
return {
|
color: '#38BBFF',
|
width: '1080px',
|
img: require('../../assets/assess/bg1.png'),
|
subImg: require('../../assets/assess/title_bg2.png'),
|
smallImg: require('../../assets/assess/bg1_8.png'),
|
subWidth: '510px',
|
smallWidth: '530px',
|
pageShow: false,
|
reRender: false,
|
showLength: 20,
|
isOne: false,
|
PassengerEcharts: {
|
xData: [],
|
passenger: [],
|
arrange: [],
|
legendData: ['上行', '下行']
|
},
|
upInfo: {
|
passenger: {},
|
passengerArrangePic: {
|
xData: [],
|
passenger: [],
|
arrange: []
|
}, // 上或下行客流+班次 图
|
upDownBusPic: {
|
xData: [],
|
series: []
|
|
},
|
showBar: 1,
|
},
|
downInfo: {
|
passenger: {},
|
passengerArrangePic: {
|
xData: [],
|
passenger: [],
|
arrange: []
|
}, // 上或下行客流+班次 图
|
upDownBusPic: {
|
xData: [],
|
series: []
|
|
},
|
showBar: 1,
|
},
|
moment,
|
|
|
};
|
},
|
created() {
|
if(this.reRender) {
|
this.getData();
|
}
|
|
},
|
computed: {
|
upStationName() {
|
let info = this.upInfo.passenger || {}
|
return `${info.upStationName || ''}~${info.downStationName || ''}`
|
},
|
downStationName() {
|
let info= this.downInfo.passenger || {}
|
return `${info.upStationName || ''}~${info.downStationName || ''}`
|
|
},
|
upPassenger() {
|
return this.upInfo.passenger || {}
|
}
|
},
|
activated() {
|
if(!this.reRender) {
|
this.getData();
|
}
|
},
|
mounted() {
|
},
|
methods: {
|
generateReport () {
|
this.$refs.html2Pdf.generatePdf()
|
},
|
handleBar(option, index) {
|
console.log(index, 'index', option);
|
|
if(option.xData.length > this.showLength) {
|
let obj = {};
|
console.log(option, 'obj');
|
|
obj.xData = option.xData.slice((index - 1)*this.showLength, this.showLength*index);
|
console.log(obj.xData, 'obj.xData', option.xData.slice((index - 1)*this.showLength, this.showLength*index));
|
|
obj.series = option.series.map(i => {
|
return i.slice((index - 1)*this.showLength, this.showLength*index);
|
})
|
console.log(obj, 'xData');
|
|
return obj
|
} else {
|
return option
|
}
|
},
|
getData() {
|
const { id } = this.$route.query;
|
let url = '';
|
let params = {};
|
if(id) {
|
url = 'getOneReport';
|
params = {reportId: id,}
|
} else {
|
url = 'createReport';
|
params = {...this.$route.query, logo: 0}
|
|
}
|
this.$axios
|
.get(this.$Interface.assess[url], {
|
params,
|
})
|
.then((res) => {
|
this.upInfo = {};
|
this.downInfo = {};
|
this.PassengerEcharts = {
|
xData: [],
|
series: [[], []],
|
legendData: ['上行', '下行'],
|
yIndex: 1
|
};
|
res.data.forEach(e => {
|
e.passengerArrangePic = {
|
xData: [],
|
series: [[], []],
|
legendData: ['客流', '班次']
|
}
|
e.upDownBusPic = {
|
xData: [],
|
series: [[], [], []],
|
|
}
|
if(Number(e.flag) == 1) {
|
e.passenger.passengerPic && e.passenger.passengerPic.forEach(i => { // 线路客流量
|
this.PassengerEcharts.xData.push(i.times);
|
this.PassengerEcharts.series[0].push(i.upFlat || 0);
|
this.PassengerEcharts.series[1].push(i.downFlat || 0);
|
})
|
}
|
|
e.passenger.passengerArrangePic && e.passenger.passengerArrangePic.forEach(i => { // 线路上/下行客流量与班次匹配
|
let passenger = Number(e.flag) == 2 ? i.downFlat : i.upFlat;
|
e.passengerArrangePic.xData.push(i.times);
|
e.passengerArrangePic.series[0].push(passenger || 0);
|
e.passengerArrangePic.series[1].push(i.arrange || 0);
|
})
|
e.passenger.upDownBusPic && e.passenger.upDownBusPic.forEach(i => { // 线路上/下行客流量
|
e.upDownBusPic.xData.push(i.stationName);
|
e.upDownBusPic.series[0].push(i.upVolume);
|
e.upDownBusPic.series[1].push(i.downVolume);
|
e.upDownBusPic.series[2].push(i.currentVolume);
|
|
})
|
e.showBar = e.passenger.upDownBusPic ? Math.ceil(e.passenger.upDownBusPic.length / this.showLength) : 0;
|
if(Number(e.flag) == 2) {
|
this.downInfo = {...e};
|
|
} else {
|
this.upInfo = {...e};
|
this.isOne = e.startDate == e.endDate ? true : false;
|
}
|
});
|
this.pageShow = true;
|
|
|
});
|
|
}
|
|
},
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../assets/css/comment.less";
|
.c-asseaa-report-pdf-content {
|
background: #0A101C;
|
width: 1124px;
|
._create-content {
|
position: relative;
|
._export-btn {
|
position: absolute;
|
right: -150px;
|
}
|
|
}
|
.pb16 {
|
padding-bottom: 16px
|
}
|
.pl10 {
|
padding-left: 10px;
|
}
|
.pl20 {
|
padding-left: 20px;
|
}
|
.pt5 {
|
padding-top: 5px;
|
}
|
.pt24 {
|
padding-top: 24px;
|
}
|
.pr20 {
|
padding-right: 20px;
|
}
|
.pr28 {
|
padding-right: 28px;
|
}
|
.pb20 {
|
padding-bottom: 20px;
|
}
|
.pl24 {
|
padding-left: 24px;
|
}
|
._color-yellow {
|
color: #FAB71E;
|
font-family: 'Digital';
|
}
|
._color-green {
|
color: #00E9E8;
|
font-family: 'Digital';
|
}
|
._color-blue {
|
color: #38BBFF;
|
font-family: 'Digital';
|
}
|
._main-color {
|
color: #8D9DBC
|
}
|
.flex-1 {
|
flex: 1
|
}
|
._title {
|
background: url('../../assets/assess/title_bg.png');
|
background-size: cover;
|
width: 100%;
|
height: 54px;
|
text-align: center;
|
line-height: 44px;
|
font-family: 'YouSheBiaoTiHeiT';
|
font-size: 24px;
|
position: relative;
|
._cycle {
|
font-family: 'PingFangSC';
|
padding-left: 20px;
|
font-size: 14px;
|
position: relative;
|
&::before {
|
content: '';
|
display: inline-block;
|
background: #38BBFF;
|
position: absolute;
|
top: 14px;
|
left: 10px;
|
width: 3px;
|
height: 16px;
|
}
|
}
|
._create-time {
|
color: #8D9DBC;
|
font-family: 'PingFangSC';
|
font-size: 14px;
|
position: absolute;
|
right: 10px;
|
top: 0px;
|
}
|
}
|
._line-box {
|
width: 190px;
|
height: 32px;
|
display: flex;
|
padding: 6px 10px 0 25px;
|
background: url('../../assets/assess/bg_xianluchangdu.png') no-repeat left/cover;
|
._title-color {
|
color: #8D9DBC
|
}
|
}
|
._change-title {
|
position: relative;
|
._subTitle {
|
position: absolute;
|
left: 130px;
|
font-weight: 600
|
}
|
}
|
._color-yellow {
|
color: #FAB71E;
|
font-family: 'Digital';
|
}
|
._color-green {
|
color: #00E9E8;
|
font-family: 'Digital';
|
}
|
._color-blue {
|
color: #38BBFF;
|
font-family: 'Digital';
|
}
|
._main-color {
|
color: #8D9DBC
|
}
|
.flex-1 {
|
flex: 1
|
}
|
._change-title {
|
position: relative;
|
._subTitle {
|
position: absolute;
|
left: 130px;
|
font-weight: 600
|
}
|
}
|
._flex-box {
|
width: 190px;
|
display: inline-block;
|
|
}
|
.__img {
|
width: 116px;
|
height: 116px;
|
}
|
._car-box {
|
width: 510px;
|
height: 36px;
|
background: linear-gradient(180deg,rgba(20,28,36,0.6), rgba(16,34,54,0.6));
|
position: relative;
|
line-height: 36px;
|
&::before {
|
content: '';
|
display: inline-block;
|
background: #253559;
|
width: 6px;
|
height: 26px;
|
top: 0;
|
position: absolute;
|
top: 5px;
|
}
|
|
}
|
|
}
|
|
</style>
|
