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

<!-- 支付来源分析 -->
<template>
	<view class="revenue">
		<view class="revenue-line">
			<LineChart v-if="hasData" :chartData="chartData" :title="title" :opts="opts" />
			<view class="empty" v-else>
				<u-empty></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import LineChart from '@/components/lineChart.vue'
	export default {
		components: {
			LineChart
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			opts: {
				type: Object,
				default: () => {
					return {
						xAxis: {
							rotateLabel: true
						},
						yAxis: {
							showTitle: true,
							splitNumber: 5,
							data: [{
								title: '元',
								titleOffsetY: -5
							}]
						},
						legend: {
							show: true
						},
						dataLabel: false,
						extra: {
							column: {
								width: 20
							}
						}
					}
				}
			}
		},
		data() {
			return {
				paySourceList: [],
				chartData: {
					categories: [],
					series: []
				},
				hasData: false
			}
		},
		created() {
			this.getDict()
		},
		methods: {
			getData({
				reportType,
				queryDate
			}) {
				this.hasData = false
				this.chartData.categories = []
				this.chartData.series = []
				this.getPaySourceData({
					reportType,
					queryDate
				})
			},
			getDict() {
				uni.$u.api.getDictApi({
					type: 'pay_platform'
				}).then(res => {
					if (res.code === 200) {
						this.paySourceList = res.data
					}
				})
			},
			getPaySourceData({
				reportType,
				queryDate
			}) {
				uni.$u.api.operationalAnalysisApi.getPaySourceDataApi({
					reportType,
					queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.chartData.series[0] = {
								name: '路段',
								data: []
							}
							let cateList = []
							res.data.itemList.forEach(item => {
								cateList.push(this.getDictLabel(item.payPlatform))
							})
							this.chartData.categories = cateList
							this.chartData.series[0].data = res.data.itemList.map(item => {
								return item.amt
							})
						}
						this.getParkingData({ reportType, queryDate })
					}
				})
			},
			getParkingData({
				reportType,
				queryDate
			}) {
				uni.$u.api.operationalAnalysisApi.getParkingPaySourceDataApi({
					reportType,
					queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							if (this.chartData.series.length) {
								this.chartData.series[1] = {
									name: '停车场',
									data: []
								}
								this.chartData.series[1].data = res.data.itemList.map(item => {
									return item.amt
								})
							} else {
								this.chartData.series[0] = {
									name: '停车场',
									data: []
								}
								this.chartData.series[0].data = res.data.itemList.map(item => {
									return item.amt
								})
							}
							if (!this.chartData.categories.length) {
								let cateList = []
								res.data.itemList.forEach(item => {
									cateList.push(this.getDictLabel(item.payPlatform))
								})
								this.chartData.categories = cateList
							}
							this.hasData = true
						} else if (this.chartData.series.length === 1) {
							this.hasData = true
						} else if (!this.chartData.series.length) {
							this.hasData = false
						}
					}
				})
			},
			getDictLabel(value) {
				let name
				this.paySourceList.forEach(item => {
					if (item.dictValue == value) {
						name = item.dictLabel
					}
				})
				if (!name) name = '其他'
				return name
			}
		}
	}
</script>

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

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