<template>
|
<div style="margin-right: 30px" class="data-reMechanism">
|
<div style="display: flex; align-items: center">
|
<div style="margin-right:12px;font-size:16px;font-weight:bold">趋势分析</div>
|
<a-radio-group v-model="trendAnalysisType" @change="trendAnalysisTypeChange">
|
<a-radio-button :value="0"> 车流量 </a-radio-button>
|
<a-radio-button :value="1"> 加油数 </a-radio-button>
|
<a-radio-button :value="2"> 油品销量 </a-radio-button>
|
<a-radio-button :value="3"> 通过率 </a-radio-button>
|
<a-radio-button :value="4"> 客户 </a-radio-button>
|
<a-radio-button :value="5"> 流失率 </a-radio-button>
|
</a-radio-group>
|
</div>
|
<div>
|
<div style="display: flex; align-items: flex-end; flex-direction: column">
|
<a-radio-group
|
style="margin: 20px 0"
|
size="small"
|
v-model="trendAnalysisUnit"
|
@change="trendAnalysisTypeChange"
|
>
|
<a-radio-button value="HOURS" :disabled="trendAnalysisType == 4 || trendAnalysisType == 5">
|
小时
|
</a-radio-button>
|
<a-radio-button value="DAYS"> 日期 </a-radio-button>
|
<a-radio-button value="MONTHS"> 月份 </a-radio-button>
|
</a-radio-group>
|
<DataReLineChart
|
domId="trendAnalysisLine"
|
ref="trendAnalysisLineRef"
|
:chartData="trendAnalysisData"
|
style="width: 100%"
|
:showpercent="trendAnalysisChartShowPercent"
|
></DataReLineChart>
|
</div>
|
<div id="trendAnalysisChartID"></div>
|
</div>
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-select style="width: 200px" v-model="searchWay" @change="changeWay" placeholder="请选择">
|
<a-select-option value="1"> 时间 </a-select-option>
|
<a-select-option value="2"> 活动 </a-select-option>
|
</a-select>
|
<a-select
|
v-if="searchWay == 2"
|
style="width: 300px; margin: 0 12px"
|
@change="activeTimeChange"
|
v-model="activeTime"
|
placeholder="请选择"
|
>
|
<a-select-option value=""> 全部 </a-select-option>
|
<a-select-option v-for="item in activeOptions" :key="item.id" :value="item.id">
|
{{ item.name }}
|
</a-select-option>
|
</a-select>
|
<a-range-picker style="width: 300px; margin: 0 12px" v-if="searchWay == 1" @change="timeChange" />
|
<a-button type="primary" @click="searchActive"> 搜索 </a-button>
|
</div>
|
<div class="fueling-overview-ct">
|
<div class="block-title" style="display: flex; align-items: center">
|
<div style="margin-right: 12px">加油概况</div>
|
<a-switch v-model="isContrast" />
|
<div style="font-size: 12px; font-weight: 100; margin-left: 8px; color: #5fa6f0">对照组</div>
|
<a-range-picker style="width: 300px; margin: 0 12px" v-if="isContrast" @change="contrastTimeChange" />
|
</div>
|
<div class="fueling-overview-block">
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">车流量</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.carCount }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.carCount }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">进站数</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.appearCount }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.appearCount }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">加油数</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.oilCount }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.oilCount }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">油品销量</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.oilVolume }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.oilVolume }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">通过率(分)</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.spandAvg }}</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.spandAvg }}</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">拐入率</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.entryRate }}%</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.entryRate }}%</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">加油率</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.oilRate }}%</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.oilRate }}%</span>
|
</div>
|
</div>
|
<div class="fueling-overview-item">
|
<div class="fueling-overview-name">回头率</div>
|
<div class="fueling-overview-num">
|
<span style="margin-right: 24px">{{ statisTotalObj.rebackRate }}%</span>
|
<span style="color: #16b777" v-if="isContrast">{{ contrastObj.rebackRate }}%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="oil-freq-compare-ct">
|
<div class="block-title">活动前后车辆加油频次</div>
|
<div class="oil-freq-compare-operator">
|
<span>活动前时段</span>
|
<a-range-picker
|
style="width: 360px; margin: 0 12px"
|
:value="beforeTimeRange"
|
format="YYYY-MM-DD HH:mm:ss"
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
:show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
|
@change="beforeTimeChange"
|
/>
|
<span>活动后时段</span>
|
<a-range-picker
|
style="width: 360px; margin: 0 12px"
|
:value="afterTimeRange"
|
format="YYYY-MM-DD HH:mm:ss"
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
:show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
|
@change="afterTimeChange"
|
/>
|
<a-button type="primary" @click="getOilFreqCompareData"> 统计频次 </a-button>
|
</div>
|
<a-table
|
class="oil-freq-compare-table"
|
rowKey="licenseNum"
|
size="middle"
|
:columns="oilFreqCompareColumns"
|
:dataSource="oilFreqCompareData"
|
:loading="oilFreqCompareLoading"
|
:scroll="{ y: 420 }"
|
:pagination="{ pageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '50'] }"
|
>
|
</a-table>
|
</div>
|
<div>
|
<div class="block-title">车型分析</div>
|
<div style="display: flex">
|
<DataReLineChart
|
domId="vehicleTypeLine"
|
ref="statModelBarRef"
|
:chartData="vehicleTypeLineData"
|
style="width: 70%"
|
:showpercent="false"
|
></DataReLineChart>
|
<div style="width: 30%">
|
<a-radio-group v-model="vehicleTypeSpecies" size="small" @change="vehicleTypeSpeciesChange">
|
<a-radio-button :value="1"> 加油数 </a-radio-button>
|
<a-radio-button :value="3"> 油品销量 </a-radio-button>
|
</a-radio-group>
|
<DataRePieChart
|
style="width: 100%"
|
domId="vehicleTypePie"
|
ref="vehicleTypePieRef"
|
:chartData="vehicleTypePieData"
|
></DataRePieChart>
|
</div>
|
</div>
|
</div>
|
<div>
|
<div class="block-title">加油位分析</div>
|
<div style="display: flex">
|
<DataReLineChart
|
style="width: 70%"
|
domId="fuelLevelLine"
|
ref="statPositionBarRef"
|
:chartData="fuelLevelLineData"
|
></DataReLineChart>
|
|
<div style="width: 30%">
|
<a-radio-group v-model="fuelingStationSpecies" size="small" @change="fuelingStationSpeciesChange">
|
<a-radio-button :value="2"> 加油数 </a-radio-button>
|
<a-radio-button :value="4"> 油品销量 </a-radio-button>
|
</a-radio-group>
|
<DataRePieChart
|
style="width: 100%"
|
domId="fuelLevelPie"
|
ref="fuelLevelPieRef"
|
:chartData="fuelLevelPieData"
|
></DataRePieChart>
|
</div>
|
</div>
|
</div>
|
<TopTenCustomers
|
:customerData="customerObj"
|
:typeOneTotal="customerOneTotal"
|
:typeTwoTotal="customerTwoTotal"
|
></TopTenCustomers>
|
</div>
|
</template>
|
|
<script>
|
import TopTenCustomers from './TopTenCustomers'
|
import DataReLineChart from './DataReLineChart'
|
import DataRePieChart from './DataRePieChart'
|
import { getAction, postAction } from '@tievd/cube-block/lib/api/manage'
|
import moment from 'moment'
|
export default {
|
name: 'DataReMechanism',
|
components: {
|
TopTenCustomers,
|
DataReLineChart,
|
DataRePieChart,
|
},
|
props: {
|
selectTreeObj: {
|
default: () => {
|
return JSON.parse(localStorage.getItem('userDepartInfo'))
|
},
|
},
|
},
|
watch: {
|
isContrast() {
|
this.contrastObj = {}
|
},
|
},
|
data() {
|
return {
|
trendAnalysisChartShowPercent: true,
|
loading: false,
|
description: '数据报表（加油站）',
|
vehicleTypeSpecies: 1,
|
fuelingStationSpecies: 2,
|
searchWay: '1',
|
isContrast: false,
|
activeTime: '',
|
customerObj: {}, //TOP10客户数据
|
customerOneTotal: 0,
|
customerTwoTotal: 0,
|
statisTotalObj: {},
|
contrastObj: {},
|
startTime: '',
|
endTime: '',
|
activeOptions: [],
|
vehicleTypePieData: {}, //车型分析饼图数据
|
fuelLevelLineData: {}, //加油位分析折线图数据
|
fuelLevelPieData: {}, //加油位分析饼图数据
|
vehicleTypeLineData: {}, //车型分析折线图数据
|
trendAnalysisType: 0, //趋势分析选择类型
|
trendAnalysisUnit: 'DAYS', //趋势分析选择时间
|
trendAnalysisData: {}, //趋势分析数据
|
trendAnalysisChart: null, //趋势分析图表
|
beforeStartTime: '',
|
beforeEndTime: '',
|
afterStartTime: '',
|
afterEndTime: '',
|
beforeTimeRange: [],
|
afterTimeRange: [],
|
oilFreqCompareLoading: false,
|
oilFreqCompareData: [],
|
oilFreqCompareColumns: [
|
{
|
title: '车牌号',
|
align: 'center',
|
dataIndex: 'licenseNum',
|
},
|
{
|
title: '活动前加油次数',
|
align: 'center',
|
dataIndex: 'beforeOilCount',
|
},
|
{
|
title: '活动后加油次数',
|
align: 'center',
|
dataIndex: 'afterOilCount',
|
},
|
{
|
title: '变化值',
|
align: 'center',
|
dataIndex: 'diffOilCount',
|
},
|
{
|
title: '变化率',
|
align: 'center',
|
dataIndex: 'diffRate',
|
customRender: function (t) {
|
if (t === null || t === undefined) {
|
return '--'
|
}
|
return t + '%'
|
},
|
},
|
],
|
}
|
},
|
|
methods: {
|
moment,
|
//获取车型/加油位折线图数据
|
getVehicleTypeLineData() {
|
postAction('/jyz/dataTable/statisMidTable', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
}).then((res) => {
|
console.log(res)
|
this.vehicleTypeLineData = res.result.statModelBar
|
this.fuelLevelLineData = res.result.statPositionBar
|
this.$nextTick(() => {
|
this.$refs.statModelBarRef.setChart()
|
this.$refs.statPositionBarRef.setChart()
|
})
|
})
|
},
|
//获取车型饼图数据
|
getVehicleStationPieData() {
|
postAction('/jyz/dataTable/statFan', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
type: this.vehicleTypeSpecies,
|
}).then((res) => {
|
console.log(res)
|
this.vehicleTypePieData = res.result
|
this.$nextTick(() => {
|
this.$refs.vehicleTypePieRef.setChart()
|
})
|
})
|
},
|
vehicleTypeSpeciesChange(e) {
|
this.vehicleTypeSpecies = e.target.value
|
this.getVehicleStationPieData()
|
},
|
//获取加油位饼图数据
|
getFuelingStationPieData() {
|
postAction('/jyz/dataTable/statFan', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
type: this.fuelingStationSpecies,
|
}).then((res) => {
|
console.log(res)
|
this.fuelLevelPieData = res.result
|
this.$nextTick(() => {
|
this.$refs.fuelLevelPieRef.setChart()
|
})
|
})
|
},
|
fuelingStationSpeciesChange(e, val) {
|
console.log(e, val)
|
this.fuelingStationSpecies = e.target.value
|
this.getFuelingStationPieData()
|
},
|
//趋势分析类型切换
|
trendAnalysisTypeChange(e) {
|
let val = e.target.value
|
if (val == 0 || val == 2 || val == 3 || val == 5) {
|
this.trendAnalysisChartShowPercent = true
|
} else {
|
this.trendAnalysisChartShowPercent = false
|
}
|
if (val == 4 || val == 5) {
|
this.trendAnalysisUnit = 'DAYS'
|
}
|
this.getTrendAnalysis()
|
},
|
//获取趋势分析数据
|
getTrendAnalysis() {
|
postAction('/jyz/dataTable/statTrend', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
trendType: this.trendAnalysisType,
|
timeUnit: this.trendAnalysisUnit,
|
}).then((res) => {
|
console.log(res)
|
this.trendAnalysisData = res.result
|
this.$nextTick(() => {
|
if (this.trendAnalysisType == 4) {
|
this.$refs.trendAnalysisLineRef.setPieUpChart()
|
} else if (this.trendAnalysisType == 5) {
|
this.$refs.trendAnalysisLineRef.setOnlyLineChart()
|
} else {
|
this.$refs.trendAnalysisLineRef.setChart()
|
}
|
})
|
})
|
},
|
changeWay() {
|
this.startTime = ''
|
this.endTime = ''
|
},
|
timeChange(e, t) {
|
console.log(e, t)
|
this.startTime = t[0]
|
this.endTime = t[1]
|
},
|
contrastTimeChange(e, t) {
|
postAction('/jyz/dataTable/statisTotal', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: t[0],
|
endTime: t[1],
|
}).then((res) => {
|
this.contrastObj = res.result
|
})
|
},
|
beforeTimeChange(e, t) {
|
this.beforeTimeRange = t
|
this.beforeStartTime = t && t.length ? t[0] : ''
|
this.beforeEndTime = t && t.length ? t[1] : ''
|
},
|
afterTimeChange(e, t) {
|
this.afterTimeRange = t
|
this.afterStartTime = t && t.length ? t[0] : ''
|
this.afterEndTime = t && t.length ? t[1] : ''
|
},
|
setOilFreqDefaultRangeByActivity(activity) {
|
if (!activity || !activity.startTime || !activity.endTime) {
|
return
|
}
|
this.afterStartTime = activity.startTime
|
this.afterEndTime = activity.endTime
|
this.afterTimeRange = [this.afterStartTime, this.afterEndTime]
|
let startMoment = moment(activity.startTime)
|
let endMoment = moment(activity.endTime)
|
let spanSeconds = endMoment.diff(startMoment, 'seconds')
|
if (spanSeconds <= 0) {
|
return
|
}
|
this.beforeEndTime = startMoment.format('YYYY-MM-DD HH:mm:ss')
|
this.beforeStartTime = startMoment.clone().subtract(spanSeconds, 'seconds').format('YYYY-MM-DD HH:mm:ss')
|
this.beforeTimeRange = [this.beforeStartTime, this.beforeEndTime]
|
},
|
getOilFreqCompareData() {
|
if (!this.beforeStartTime || !this.beforeEndTime || !this.afterStartTime || !this.afterEndTime) {
|
this.oilFreqCompareData = []
|
return
|
}
|
this.oilFreqCompareLoading = true
|
postAction('/jyz/dataTable/statisOilFreqCompare', {
|
orgCode: this.selectTreeObj.orgCode,
|
beforeStartTime: this.beforeStartTime,
|
beforeEndTime: this.beforeEndTime,
|
afterStartTime: this.afterStartTime,
|
afterEndTime: this.afterEndTime,
|
})
|
.then((res) => {
|
this.oilFreqCompareData = res.result || []
|
})
|
.finally(() => {
|
this.oilFreqCompareLoading = false
|
})
|
},
|
activeTimeChange(e) {
|
console.log(e)
|
if (e) {
|
let item = this.activeOptions.find((el) => el.id == e)
|
this.startTime = item.startTime
|
this.endTime = item.endTime
|
this.setOilFreqDefaultRangeByActivity(item)
|
} else {
|
this.startTime = ''
|
this.endTime = ''
|
this.beforeStartTime = ''
|
this.beforeEndTime = ''
|
this.afterStartTime = ''
|
this.afterEndTime = ''
|
this.beforeTimeRange = []
|
this.afterTimeRange = []
|
this.oilFreqCompareData = []
|
}
|
},
|
activeChange() {},
|
//获取统计总数
|
getStatisTotal() {
|
postAction('/jyz/dataTable/statisTotal', {
|
orgCode: this.selectTreeObj.orgCode,
|
startTime: this.startTime,
|
endTime: this.endTime,
|
}).then((res) => {
|
this.statisTotalObj = res.result
|
})
|
},
|
getCustomerData() {
|
getAction('/jyz/dataTable/clientTop', {
|
orgCode: this.selectTreeObj.orgCode,
|
}).then((res) => {
|
this.customerObj = res.result
|
this.customerOneTotal = 0
|
this.customerTwoTotal = 0
|
this.customerObj.type1.map((el) => {
|
this.customerOneTotal += el.oilCount
|
})
|
this.customerObj.type2.map((el) => {
|
this.customerTwoTotal += el.oilCount
|
})
|
})
|
},
|
getActiveListAll() {
|
getAction('/jyz/activity/listAll', {
|
orgCode: this.selectTreeObj.orgCode,
|
}).then((res) => {
|
this.activeOptions = res.result
|
})
|
},
|
searchActive() {
|
this.getStatisTotal()
|
this.getVehicleTypeLineData()
|
this.getVehicleStationPieData()
|
this.getFuelingStationPieData()
|
this.getTrendAnalysis()
|
this.getOilFreqCompareData()
|
},
|
initData() {
|
this.getCustomerData()
|
this.getActiveListAll()
|
this.getStatisTotal()
|
this.getVehicleTypeLineData()
|
this.getVehicleStationPieData()
|
this.getFuelingStationPieData()
|
this.getTrendAnalysis()
|
},
|
},
|
|
created() {
|
this.initData()
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
/deep/ .ant-table-content {
|
height: auto;
|
.ant-table-placeholder {
|
background: none;
|
border: none;
|
}
|
}
|
.ant-switch::after {
|
background: #fff;
|
}
|
.data-reMechanism {
|
.table-operator {
|
margin: 24px 0 0 0;
|
}
|
.block-title {
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.fueling-overview-ct {
|
// margin: 0 12px;
|
.fueling-overview-block {
|
display: flex;
|
.fueling-overview-item {
|
border: 1px solid #343a44;
|
padding: 12px 80px 12px 12px;
|
margin: 12px;
|
white-space: nowrap;
|
.fueling-overview-num {
|
color: #5b81f9;
|
font-size: 16px;
|
}
|
}
|
}
|
}
|
.oil-freq-compare-ct {
|
margin: 8px 12px 24px 12px;
|
.oil-freq-compare-operator {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 8px 0;
|
margin: 12px 0;
|
}
|
.oil-freq-compare-table {
|
/deep/ .ant-table-body {
|
min-height: 240px;
|
}
|
/deep/ .ant-table-pagination.ant-pagination {
|
margin: 12px 0 4px 0;
|
}
|
}
|
}
|
}
|
</style>
|
