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

<!-- 收费员业绩 -->
<template>
	<view class="performance">
		<template v-if="type === 'table'">
			<TableRanking :loading="loading" :title="title" :tableTh="tableTh" :tableData="tableData"  @pageChange="pageChange"/>
		</template>
		<template v-else>
			<LineChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title" :opts="opts"/>
			<view class="empty" v-else>
				<u-empty></u-empty>
			</view>
		</template>
	</view>
</template>

<script>
	import TableRanking from '@/components/tableRanking.vue'
	import LineChart from '@/components/lineChart.vue'
	export default {
		components: {
			TableRanking,
			LineChart
		},
		props: {
			type: {
				type: String,
				default: 'table'
			},
			title: {
				type: String,
				default: ''
			},
			tableTh: {
				type: Array,
				default: () => [
					{ width: 100, field: '工号', key: 'payeeNo' },
					{ width: 100, field: '姓名', key: 'payeeName' },
					{ width: 100, field: '收益(元)', key: 'amt' }
				]
			},
		},
		data() {
			return {
				chartData: {
					categories: [],
					series: [{
						name: '',
						data: []
					}]
				},
				tableData: {
					current: 1,
					total: 0,
					list: []
				},
				reportType: '',
				queryDate: '',
				loading: false,
				opts: {
					enableScroll: true,
					xAxis: {
						rotateLabel: true,
						scrollShow: true,
						itemCount: 8
					},
					yAxis: {
						showTitle: true,
						splitNumber: 5,
						data: [{
							title: '元',
							titleOffsetY: -3
						}]
					},
					legend: {
						show: false
					},
					dataLabel: false,
					padding: [10, 0, 10, 0],
					extra: {
						column: {
							width: 20
						}
					}
				}
			}
		},
		methods: {
			getData({ reportType, queryDate }) {
				this.reportType = reportType
				this.queryDate = queryDate
				if (this.type === 'table') {
					this.tableData.current = 1
					this.getTableData()
				} else {
					this.getChartData()
				}
			},
			getTableData() {
				this.loading = true
				uni.$u.api.operationalAnalysisApi.getTollCollectorPerformanceApi({
					pageNum: this.tableData.current,
					pageSize: 10,
					reportType: this.reportType,
					queryDate: this.queryDate
				}).then(res => {
					if (res.code === 200) {
						this.tableData.list = res.rows
						this.tableData.total = res.total
					}
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			getChartData() {
				uni.$u.api.operationalAnalysisApi.getTollCollectorPerformanceApi({
					reportType: this.reportType,
					queryDate: this.queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.rows && res.rows.length) {
							this.chartData.categories = res.rows.map(item => {
								return item.payeeName
							})
							this.chartData.series[0].data = res.rows.map(item => {
								return item.amt
							})
						} else {
							this.chartData.categories = []
							this.chartData.series[0].data = []
						}
					}
				})
			},
			pageChange(current) {
				this.tableData.current = current
				this.getTableData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.performance {
		background-color: #fff;
		border-radius: 5px;
		.empty {
			padding: 15px;
		}
	}
</style>