parking_operation/pages/operationOverview/statisticalReport/statisticalReport.vue

<template>
	<view class="report">
		<view class="report-header">
			<view class="report-header-left">
				收费员业绩统计
			</view>
			<view class="report-header-right">
				<view class="int">
					<u--input placeholder="开始日期" border="surround" v-model="form.startDate" :readonly="true" @focus="startDateShow = true">
					</u--input>
					<u-calendar :show="startDateShow" @confirm="startDateConfirm" @close="startDateShow = false"></u-calendar>
				</view>至
				<view class="int">
					<u--input placeholder="结束日期" border="surround" v-model="form.endDate" :readonly="true" @focus="endDateShow = true"></u--input>
					<u-calendar :show="endDateShow" @confirm="endDateConfirm" @close="endDateShow = false"></u-calendar>
				</view>
			</view>
		</view>
		<view class="report-total">
			<view>应收金额 <text>813013.00</text>元，实收金额 <text>572793.00</text>元，现金收入
				<text>318.00</text>元，非现金收<text>572475.00</text>元
			</view>
		</view>
		<view class="report-table">
			<t-table>
				<t-tr style="width: 1270rpx; background-color: #e6e6e6;">
					<t-th v-for="(item, index) in table.header" :key="index" style="width: 140rpx;">{{ item }}</t-th>
				</t-tr>
				<t-tr style="width: 1270rpx;background-color: #fff;" v-for="(item, index) in table.list" :key="index"
					:class="{'last-child': index === table.list.length - 1}">
					<t-td style="width: 140rpx;">{{ item.workNo }}</t-td>
					<t-td style="width: 140rpx;">{{ item.name }}</t-td>
					<t-td style="width: 140rpx;">{{ item.roadName }}</t-td>
					<t-td style="width: 140rpx;">{{ item.shouldMoney }}</t-td>
					<t-td style="width: 140rpx;">{{ item.realMoney }}</t-td>
					<t-td style="width: 140rpx;">{{ item.arrearsMoney }}</t-td>
					<t-td style="width: 140rpx;">{{ item.h5Money }}</t-td>
					<t-td style="width: 140rpx;">{{ item.pdaMoney }}</t-td>
					<t-td style="width: 140rpx;">{{ item.cashMoney }}</t-td>
				</t-tr>
			</t-table>
		</view>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				form: {
					startDate: '',
					endDate: ''
				},
				startDateShow: false,
				endDateShow: false,
				table: {
					header: ['工号', '姓名', '所属路段', '应收金额(元)', '实收金额(元)', '欠费金额(元)', '移动端支付(元)', 'PDA扫码收入(元)', '现金收入(元)'],
					list: [{
							workNo: '00001',
							name: '张政林',
							roadName: '',
							shouldMoney: '0.00',
							realMoney: '0.00',
							arrearsMoney: '0.00',
							h5Money: '0.00',
							pdaMoney: '0.00',
							cashMoney: '0.00'
						},
						{
							workNo: '00008',
							name: '运维人员',
							roadName: '书香府邸,文明路,桂花路',
							shouldMoney: '0.00',
							realMoney: '0.00',
							arrearsMoney: '0.00',
							h5Money: '0.00',
							pdaMoney: '0.00',
							cashMoney: '0.00'
						},
						{
							workNo: '00012',
							name: '园丁路巡查员',
							roadName: '园丁路',
							shouldMoney: '0.00',
							realMoney: '0.00',
							arrearsMoney: '0.00',
							h5Money: '0.00',
							pdaMoney: '0.00',
							cashMoney: '0.00'
						},
						{
							workNo: '00013',
							name: '物资路巡查员',
							roadName: '物资路',
							shouldMoney: '0.00',
							realMoney: '0.00',
							arrearsMoney: '0.00',
							h5Money: '0.00',
							pdaMoney: '0.00',
							cashMoney: '0.00'
						},
						{
							workNo: '00014',
							name: '丰林路巡查员',
							roadName: '丰林路',
							shouldMoney: '0.00',
							realMoney: '0.00',
							arrearsMoney: '0.00',
							h5Money: '0.00',
							pdaMoney: '0.00',
							cashMoney: '0.00'
						},
						{
							workNo: '00015',
							name: '可处路巡查员',
							roadName: '可处路二段',
							shouldMoney: '3.00',
							realMoney: '0.00',
							arrearsMoney: '0.00',
							h5Money: '0.00',
							pdaMoney: '0.00',
							cashMoney: '3.00'
						}
					]
				}
			}
		},
		methods: {
			startDateConfirm(val) {
				console.log(val)
				this.form.startDate = val[0]
				this.startDateShow = false
			},
			endDateConfirm(val) {
				console.log(val)
				this.form.endDate = val[0]
				this.endDateShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>

	.report {
		padding: 28rpx;
		font-family: PingFangSC-regular;

		&-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left {
				border-left: solid 4px #EC0D0D;
				padding-left: 10rpx;
				color: #101010;
				font-size: 30rpx;
			}

			&-right {
				display: flex;
				align-items: center;
				font-size: 26rpx;

				.int {
					width: 210rpx;
				}
			}
		}

		&-total {
			font-size: 28rpx;
			color: #101010;
			margin: 40rpx 0;
			line-height: 40rpx;

			text {
				color: #FFB253;
			}
		}
	}
</style>