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

<!-- 路段/停车场营收排行 -->
<template>
	<view class="ranking">
		<TableRanking :loading="loading" :title="title" :tableTh="tableTh" :tableData="tableData" @pageChange="pageChange"/>
	</view>
</template>

<script>
	import TableRanking from '@/components/tableRanking.vue'
	export default {
		components: {
			TableRanking
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			tableTh: {
				type: Array,
				default: () => [
					{ width: 100, field: '路段编号', key: 'roadNo' },
					{ width: 100, field: '路段名称', key: 'roadName' },
					{ width: 100, field: '收益(元)', key: 'amt' }
				]
			}
		},
		data() {
			return {
				tableData: {
					current: 1,
					total: 0,
					list: []
				},
				reportType: '',
				queryDate: '',
				loading: false
			}
		},
		methods: {
			getData({ reportType, queryDate }) {
				this.reportType = reportType
				this.queryDate = queryDate
				this.tableData.current = 1
				this.getList()
			},
			getList() {
				this.loading = true
				uni.$u.api.operationalAnalysisApi.getParkingLotRevenueDataApi({
					pageNum: this.tableData.current,
					pageSize: 10,
					reportType: this.reportType,
					queryDate: this.queryDate
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.tableData.list = res.rows
						this.tableData.total = res.total
					}
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			pageChange(current) {
				this.tableData.current = current
				this.getList()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.ranking-title {
		text-align: center;
		margin-bottom: 10px;
	}
</style>