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

<!-- 收费员业绩统计 -->
<template>
	<view class="container">
		<view class="table">
			<view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
			<view class="table-box">
				<uni-table emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th class="table-box-th" align="center" v-for="(item, index) in tableTh" :key="index" :width="item.width || ''">{{ item.field }}
						</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData.list" :key="index">
						<uni-td class="table-box-td" align="center">{{ item.num }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.name }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.road }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.should }}</uni-td>
						<uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="table-pagination">
				<uni-pagination show-icon="true" :total="tableData.total" :current="tableData.current"></uni-pagination>
			</view>
		</view>
		<view class="total">
			<view>
				应收金额<text>{{ totalData.should }}</text>元，实收金额<text>{{ totalData.really }}</text>元
			</view>
			<view>
				现金收入<text>{{ totalData.cash }}</text>元，非现金收入<text>{{ totalData.noCash }}</text>元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentDate: {
				type: Array,
				default: []
			},
			tableTh: {
				type: Array,
				default: () => {
					return [
						{ field: '工号', width: 80 },
						{ field: '姓名', width: 80 },
						{ field: '所属路段', width: 120 },
						{ field: '应收金额(元)', width: 80 },
						{ field: '实收金额(元)', width: 80 }
					]
				}
			},
			tableData: {
				type: Object,
				default: () => {
					return {
						current: 1,
						total: 30,
						list: [{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							},
							{
								num: 1001,
								name: 'xxx',
								road: '金科路',
								should: 100,
								really: 80
							}
						]
					}
				}
			},
			totalData: {
				type: Object,
				default: () => {
					return {
						should: 100,
						really: 80,
						cash: 500,
						noCash: 200
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './report.scss';
</style>