parking_operation/pages/operationalAnalysis/roadModel/components/paymentMethod.vue

<!-- 支付占比分析分析 -->
<template>
	<view class="revenue-box">
		<view class="revenue-line revenue">
			<PieChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="`路段`"/>
			<view class="empty" v-else>
				<u-empty></u-empty>
			</view>
		</view>
		<u-loading-page :loading="loading" loading-text="loading..."></u-loading-page>
	</view>
</template>

<script>
	import PieChart from '@/components/pieChart.vue'
	export default {
		components: {
			PieChart
		},
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				reportType: '',
				queryDate: '',
				loading: false,
				paySourceList: [],
				chartData: {
					series: [{
						data: []
					}]
				}
			}
		},
		created() {
			this.getDict()
		},
		methods: {
			getData({ reportType, queryDate }) {
				this.reportType = reportType
				this.queryDate = queryDate
				this.getPaymentWaysData()
			},
			getDict() {
				uni.$u.api.getDictApi({  type: 'pay_source'}).then(res => {
					if (res.code === 200) {
						this.paySourceList = res.data
					}
				})
			},
			getPaymentWaysData() {
				this.loading = true
				uni.$u.api.operationalAnalysisApi.getPaymentWaysDataApi({
					reportType: this.reportType,
					queryDate: this.queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							let list = res.data.itemList.map(item => {
								return {
									name: this.getDictLabel(item.paySource),
									value: item.amt
								}
							})
							this.chartData.series[0].data = list
						} else {
							this.chartData.series[0].data = []
						}
						this.loading = 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;
		margin-bottom: 10px;
		.empty {
			padding: 15px;
		}
	}
</style>