parking_operation/pages/dataOverview/operationalAnalysis/components/revenueAnalysis.vue

<!-- 营收分析 -->
<template>
	<view class="revenue">
		<template v-if="type === 'line'">
			<view class="revenue-line">
				<LineChart v-if="chartData.series[0].data.length || chartData.series[1].data.length"
					:chartData="chartData" :title="title" :opts="opts" />
				<view class="empty" v-else>
					<u-empty></u-empty>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="revenue-line">
				<ColumnChart v-if="chartData.series[0].data.length || chartData.series[1].data.length"
					:chartData="chartData" :title="title" :opts="opts" />
				<view class="empty" v-else>
					<u-empty></u-empty>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import LineChart from '@/components/lineChart.vue'
	import ColumnChart from '@/components/columnChart.vue'
	export default {
		components: {
			LineChart,
			ColumnChart
		},
		props: {
			type: {
				type: String,
				default: 'line'
			},
			title: {
				type: String,
				default: ''
			},
			params: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				chartData: {
					categories: [],
					series: [{
						name: '路段',
						data: []
					}, {
						name: '停车场',
						data: []
					}]
				},
				loading: false,
				opts: {
					xAxis: {
						rotateLabel: false,
						labelCount: 6
					},
					yAxis: {
						showTitle: true,
						splitNumber: 5,
						data: [{
							title: '收益(元)',
							titleOffsetY: -5
						}]
					},
					legend: {
						show: true
					},
					dataLabel: false,
					extra: {
						column: {
							width: 20
						}
					}
				}
			}
		},
		methods: {
			/**
			 * 获取数据
			 */
			getData({
				reportType,
				queryDate
			}) {
				this.loading = true
				this.chartData.categories = []
				this.chartData.series[0].data = []
				this.chartData.series[1].data = []
				// 路段数据
				uni.$u.api.operationalAnalysisApi.getRevenueDataApi({
					reportType,
					queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.chartData.categories = res.data.itemList.map(item => {
								return item.statisTime
							})
							this.chartData.series[0].data = res.data.itemList.map(item => {
								return item.amt
							})
						}
					}
					this.loading = false
				})
				// 停车场数据
				uni.$u.api.operationalAnalysisApi.getParkingRevenueDataApi({
					reportType,
					queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.chartData.categories = res.data.itemList.map(item => {
								return item.statisTime
							})
							this.chartData.series[1].data = res.data.itemList.map(item => {
								return item.amt
							})
						}
					}
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.revenue {
		background-color: #fff;
		border-radius: 5px;

		.empty {
			padding: 15px;
		}
	}
</style>