|
@@ -1,10 +1,22 @@
|
|
|
<template>
|
|
|
<div class="statstics-wrapper">
|
|
|
- <div ref="headerWrapper" class="statstics-header">
|
|
|
- <StatisticsHeader :title="`${chartsTitle}统计`" :custom-items="customFormItems" @getFormData="getFormData" @export="exportHandler" />
|
|
|
+ <div
|
|
|
+ ref="headerWrapper"
|
|
|
+ class="statstics-header"
|
|
|
+ >
|
|
|
+ <StatisticsHeader
|
|
|
+ :title="`${chartsTitle}统计`"
|
|
|
+ :custom-items="customFormItems"
|
|
|
+ @getFormData="getFormData"
|
|
|
+ @export="exportHandler"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="statstics-content">
|
|
|
- <div id="chart" class="statistics-chart" :style="{ height: chartHeight }" />
|
|
|
+ <div
|
|
|
+ id="chart"
|
|
|
+ class="statistics-chart"
|
|
|
+ :style="{ height: chartHeight }"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -34,7 +46,7 @@ export default {
|
|
|
default: () => []
|
|
|
}
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
myChart: null,
|
|
|
debounceTime: 300,
|
|
@@ -204,17 +216,17 @@ export default {
|
|
|
watch: {
|
|
|
// 监听数据变化 重绘图形
|
|
|
options: {
|
|
|
- handler (obj) {
|
|
|
+ handler(obj) {
|
|
|
this.myChart.setOption(obj)
|
|
|
this.resizeHandler()
|
|
|
},
|
|
|
deep: true
|
|
|
},
|
|
|
- 'sidebar.expand' () {
|
|
|
+ 'sidebar.expand'() {
|
|
|
this.setChartHeight()
|
|
|
},
|
|
|
querySettings: {
|
|
|
- handler ({ seriesKey, filters }) {
|
|
|
+ handler({ seriesKey, filters }) {
|
|
|
if (seriesKey) {
|
|
|
this.seriesKey = seriesKey
|
|
|
}
|
|
@@ -226,7 +238,7 @@ export default {
|
|
|
immediate: true
|
|
|
}
|
|
|
},
|
|
|
- mounted () {
|
|
|
+ mounted() {
|
|
|
this.setChartHeight()
|
|
|
this.myChart = this.$echarts.init(document.getElementById('chart'))
|
|
|
this.myChart.setOption(this.options)
|
|
@@ -234,7 +246,7 @@ export default {
|
|
|
this.debouncedChartHeightSetter = this._.debounce(this.setChartHeight, this.debounceTime)
|
|
|
window.addEventListener('resize', this.debouncedChartHeightSetter)
|
|
|
},
|
|
|
- beforeDestroy () {
|
|
|
+ beforeDestroy() {
|
|
|
// 销毁实例和移除监听
|
|
|
window.removeEventListener('resize', this.debouncedChartHeightSetter)
|
|
|
if (this.myChart) {
|
|
@@ -243,7 +255,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- resetDatas () {
|
|
|
+ resetDatas() {
|
|
|
this.hasChartData = false
|
|
|
this.options.yAxis[0].max = 60000
|
|
|
this.options.xAxis.data = []
|
|
@@ -252,7 +264,7 @@ export default {
|
|
|
this.options.yAxis[1].min = -0.3
|
|
|
this.options.yAxis[1].max = 0.5
|
|
|
},
|
|
|
- getFormData (formData) {
|
|
|
+ getFormData(formData) {
|
|
|
this.resetDatas()
|
|
|
|
|
|
let id
|
|
@@ -268,7 +280,7 @@ export default {
|
|
|
id = this.querySettings.byArea
|
|
|
}
|
|
|
params = [formData.interval, formData.area, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
|
|
|
- } else if (formData.range !== '') {
|
|
|
+ } else {
|
|
|
if (formData.flightType === '有行李') {
|
|
|
id = this.querySettings.withBaggageByOther
|
|
|
} else if (formData.baggageType === '不包含DEL') {
|
|
@@ -279,17 +291,14 @@ export default {
|
|
|
id = this.querySettings.byOther
|
|
|
}
|
|
|
params = [formData.interval, formData.range, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
|
|
|
- if (formData.airline === '' && formData.airport === '' && formData.terminal === '') {
|
|
|
- params.splice(2, 0, '全部')
|
|
|
- }
|
|
|
- if (formData.airline !== '') {
|
|
|
+ if (formData.airline.length) {
|
|
|
params.splice(2, 0, formData.airline)
|
|
|
- }
|
|
|
- if (formData.airport !== '') {
|
|
|
+ } else if (formData.airport.length) {
|
|
|
params.splice(2, 0, formData.airport)
|
|
|
- }
|
|
|
- if (formData.terminal !== '') {
|
|
|
+ } else if (formData.terminal !== '') {
|
|
|
params.splice(2, 0, formData.terminal)
|
|
|
+ } else {
|
|
|
+ params.splice(2, 0, '全部')
|
|
|
}
|
|
|
}
|
|
|
if (formData.passengerType.length) {
|
|
@@ -301,9 +310,44 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
this.params = [...params, ...this.filters.map(({ value }) => value)]
|
|
|
- this.getChartsData(id, params)
|
|
|
+ if (params[2] instanceof Array) {
|
|
|
+ const paramsList = params[2].map(param => [...params.slice(0, 2), param, ...params.slice(3)])
|
|
|
+ this.getMultipleChartsData(id, paramsList)
|
|
|
+ } else {
|
|
|
+ this.getSingleChartsData(id, params)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getMultipleChartsData(id, paramsList) {
|
|
|
+ try {
|
|
|
+ const listValuesArray = await Promise.all(paramsList.map(params => this.getChartsData(id, params)))
|
|
|
+ const listValues = listValuesArray.reduce((preValues, currentValues) => {
|
|
|
+ currentValues.forEach(value => {
|
|
|
+ const preValue = preValues.find(preValue => preValue.A === value.A)
|
|
|
+ if (preValue) {
|
|
|
+ preValue[this.seriesKey] += value[this.seriesKey]
|
|
|
+ } else {
|
|
|
+ preValues.push({
|
|
|
+ A: value.A,
|
|
|
+ [this.seriesKey]: value[this.seriesKey]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return preValues
|
|
|
+ }, [])
|
|
|
+ this.setChartsData(this._.sortBy(listValues, 'A'))
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ }
|
|
|
},
|
|
|
- async getChartsData (id, params) {
|
|
|
+ async getSingleChartsData(id, params) {
|
|
|
+ try {
|
|
|
+ const listValues = await this.getChartsData(id, params)
|
|
|
+ this.setChartsData(listValues)
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error(error.message)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getChartsData(id, params) {
|
|
|
try {
|
|
|
const {
|
|
|
code,
|
|
@@ -314,71 +358,75 @@ export default {
|
|
|
dataContent: params
|
|
|
})
|
|
|
if (Number(code) === 0) {
|
|
|
- const xAxisData = []
|
|
|
- const yAxisData = [0]
|
|
|
- const seriesDatas = []
|
|
|
- const filteredList = listValues.filter(element =>
|
|
|
- this.filters.every((key, value) => {
|
|
|
- if (key && value && element[key] !== value) {
|
|
|
- return false
|
|
|
- } else {
|
|
|
- return true
|
|
|
- }
|
|
|
- })
|
|
|
- )
|
|
|
- if (filteredList.length === 0) {
|
|
|
- this.$message.info('未查询到对应数据')
|
|
|
- return
|
|
|
- }
|
|
|
- for (let i = 0; i < filteredList.length; i++) {
|
|
|
- xAxisData.push(filteredList[i].A)
|
|
|
- seriesDatas.push(filteredList[i][this.seriesKey])
|
|
|
- if (i > 0) {
|
|
|
- if (filteredList[i - 1][this.seriesKey] > 0) {
|
|
|
- yAxisData.push(
|
|
|
- (filteredList[i][this.seriesKey] - filteredList[i - 1][this.seriesKey]) /
|
|
|
- filteredList[i - 1][this.seriesKey]
|
|
|
- )
|
|
|
- } else {
|
|
|
- yAxisData.push(0)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- let max = Math.max(...seriesDatas)
|
|
|
- max = Math.ceil(max / 10) * 10
|
|
|
- this.options.yAxis[0].max = max
|
|
|
- this.options.xAxis.data = xAxisData
|
|
|
- this.options.series[0].data = seriesDatas
|
|
|
- this.options.series[2].data = yAxisData
|
|
|
- this.options.yAxis[1].min = (Math.min(...yAxisData) - 0.1).toFixed(2)
|
|
|
- this.options.yAxis[1].max = (Math.max(...yAxisData) + 0.1).toFixed(2)
|
|
|
- this.tableData = [xAxisData, seriesDatas, yAxisData]
|
|
|
- this.hasChartData = true
|
|
|
+ return listValues
|
|
|
} else {
|
|
|
- this.$message.error(message || '失败')
|
|
|
+ return Promise.reject(message || '失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
-this.$message.error("失败");
|
|
|
+ return Promise.reject(message || '失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setChartsData(listValues) {
|
|
|
+ const xAxisData = []
|
|
|
+ const yAxisData = [0]
|
|
|
+ const seriesDatas = []
|
|
|
+ const filteredList = listValues.filter(element =>
|
|
|
+ this.filters.every((key, value) => {
|
|
|
+ if (key && value && element[key] !== value) {
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ )
|
|
|
+ if (filteredList.length === 0) {
|
|
|
+ this.$message.info('未查询到对应数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ for (let i = 0; i < filteredList.length; i++) {
|
|
|
+ xAxisData.push(filteredList[i].A)
|
|
|
+ seriesDatas.push(filteredList[i][this.seriesKey])
|
|
|
+ if (i > 0) {
|
|
|
+ if (filteredList[i - 1][this.seriesKey] > 0) {
|
|
|
+ yAxisData.push(
|
|
|
+ (filteredList[i][this.seriesKey] - filteredList[i - 1][this.seriesKey]) /
|
|
|
+ filteredList[i - 1][this.seriesKey]
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ yAxisData.push(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ let max = Math.max(...seriesDatas)
|
|
|
+ max = Math.ceil(max / 10) * 10
|
|
|
+ this.options.yAxis[0].max = max
|
|
|
+ this.options.xAxis.data = xAxisData
|
|
|
+ this.options.series[0].data = seriesDatas
|
|
|
+ this.options.series[2].data = yAxisData
|
|
|
+ this.options.yAxis[1].min = (Math.min(...yAxisData) - 0.1).toFixed(2)
|
|
|
+ this.options.yAxis[1].max = (Math.max(...yAxisData) + 0.1).toFixed(2)
|
|
|
+ this.tableData = [xAxisData, seriesDatas, yAxisData]
|
|
|
+ this.hasChartData = true
|
|
|
},
|
|
|
- setChartHeight () {
|
|
|
+ setChartHeight() {
|
|
|
const topBarHeight = 80
|
|
|
const headerBlankHeight = 24
|
|
|
const tabsWrapperHeight = 62
|
|
|
const headerHeight = this.$refs['headerWrapper'].offsetHeight
|
|
|
const footerBlankHeight = 24
|
|
|
- this.chartHeight = `calc(100vh - ${topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
|
|
|
- }px)`
|
|
|
+ this.chartHeight = `calc(100vh - ${
|
|
|
+ topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
|
|
|
+ }px)`
|
|
|
this.$nextTick(() => {
|
|
|
this.resizeHandler()
|
|
|
})
|
|
|
},
|
|
|
- resizeHandler () {
|
|
|
+ resizeHandler() {
|
|
|
if (this.myChart) {
|
|
|
this.myChart.resize()
|
|
|
}
|
|
|
},
|
|
|
- exportHandler () {
|
|
|
+ exportHandler() {
|
|
|
if (!this.hasChartData) {
|
|
|
this.$message.warning('请查询后再进行导出')
|
|
|
return
|