parking_operation/pages/dataOverview/statisticalReport copy/statisticalReport.vue

<!-- 统计报表 -->
<template>
	<view class="report">
		<view class="report-header">
			<view class="report-header-left" @click="typePicker = true">
				<u-icon name="arrow-down" color="#000" size="15"></u-icon>
				<text>{{ currentType.text }}</text>
			</view>
			<view class="report-header-right" v-if="currentType.value === 6">
				<view class="tab">
					<view class="tab-item" v-for="(item, index) in tabList" :key="index"
						:class="{'active': tabCur === item.value}" @click="tabClick(item)">{{ item.label }}</view>
				</view>
			</view>
			<view class="report-header-right" v-else>
				<uni-datetime-picker v-model="curDate" type="daterange" @change="dateChange">
					<u--text text="日期查询" color="#1767F2"></u--text>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="report-content">
			<template v-if="currentType.value === 1">
				<TollCollectorPerformance ref="tollCollectorPerformance"/>
			</template>
			<template v-else-if="currentType.value === 2">
				<SectionBerth ref="sectionBerth"/>
			</template>
			<template v-else-if="currentType.value === 3">
				<ParkingReallyIncome ref="parkingReallyIncome"/>
			</template>
			<template v-else-if="currentType.value === 4">
				<ArrearsReport ref="arrearsReport" />
			</template>
			<template v-else-if="currentType.value === 5">
				<RevenueReport ref="revenueReport" />
			</template>
			<template v-else-if="currentType.value === 6">
				<ReallyReceivable ref="reallyReceivable"/>
			</template>
			<template v-else-if="currentType.value === 7">
				<CheckWorkAttendance ref="checkWorkAttendance" />
			</template>
		</view>
		<!-- 报表类型 -->
		<u-picker :show="typePicker" :columns="typeList" @confirm="typeConfirm" @cancel="typePicker = false"></u-picker>
		<!-- 年 -->
		<u-picker :show="yearPicker" :columns="yearList" :defaultIndex="defaultYear" @confirm="yearConfirm"
			@cancel="yearPicker = false"></u-picker>
		<!-- 月 -->
		<u-picker :show="monthPicker" :columns="monthList" :defaultIndex="defaultMonth" @confirm="monthConfirm"
			@cancel="monthPicker = false"></u-picker>
		<!-- 日 -->
		<u-picker :show="dayPicker" :columns="dayList" :defaultIndex="defaultDay" @confirm="dayConfirm"
			@cancel="dayPicker = false"></u-picker>
	</view>
</template>

<script>
	import TollCollectorPerformance from './components/tollCollectorPerformance.vue'
	import SectionBerth from './components/sectionBerth.vue'
	import ParkingReallyIncome from './components/parkingReallyIncome.vue'
	import ArrearsReport from './components/arrearsReport.vue'
	import RevenueReport from './components/revenueReport.vue'
	import ReallyReceivable from './components/reallyReceivable.vue'
	import CheckWorkAttendance from './components/checkWorkAttendance.vue'
	export default {
		components: {
			TollCollectorPerformance,
			SectionBerth,
			ParkingReallyIncome,
			ArrearsReport,
			RevenueReport,
			ReallyReceivable,
			CheckWorkAttendance
		},
		data() {
			return {
				tabList: [{
						label: '年',
						value: 2
					},
					{
						label: '月',
						value: 1
					},
					{
						label: '日',
						value: 0
					}
				],
				currentType: {},
				tabCur: 2,
				typePicker: false,
				typeList: [[
					// {
					// 	text: '收费员业绩统计',
					// 	value: 1,
					// 	key: 'tollCollectorPerformance'
					// },
					{
						text: '路段泊位统计',
						value: 2,
						key: 'sectionBerth'
					},
					{
						text: '停车场实收统计',
						value: 3,
						key: 'parkingReallyIncome'
					},
					{
						text: '欠费统计',
						value: 4,
						key: 'arrearsReport'
					},
					{
						text: '营收统计',
						value: 5,
						key: 'revenueReport'
					},
					{
						text: '应收实收分析',
						value: 6,
						key: 'reallyReceivable'
					},
					{
						text: '考勤统计',
						value: 7,
						key: 'checkWorkAttendance'
					}
				]],
				// 日期
				curDate: [],
				// 参数
				params: {
					reportType: 2,
					queryDate: '',
					title: ''
				},
				// 年
				yearPicker: false,
				yearList: this.getYearList(),
				defaultYear: [4],
				currentYear: '',
				yearObj: {},
				// 月
				monthPicker: false,
				monthList: this.getMonthList(),
				defaultMonth: [],
				currentMonth: '01',
				monthObj: {},
				// 日
				dayPicker: false,
				dayList: this.getDayList(),
				defaultDay: [],
				currentDay: '01',
				dayObj: {}
			}
		},
		onShow() {
			this.currentType = this.typeList[0][0]
			if (this.currentType.value === 5 || this.currentType.value === 7) {
				let today = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
				this.curDate = [today, today]
			} else {
				this.curDate = []
			}
			setTimeout(() => {
				if (this.currentType.value === 6) {
					this.currentYear = this.yearList[0][4].value
					this.yearObj = this.yearList[0][4]
					this.params.title = this.yearList[0][4].text
					this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
					this.$refs[this.currentType.key].getData(this.params)
				} else {
					this.$refs[this.currentType.key].getData(this.curDate)
				}
			}, 500)
		},
		methods: {
			getYearList() {
				const date = new Date()
				const year = date.getFullYear();
				const list = [
					[]
				]
				for (let i = year - 4; i < year + 1; i++) {
					const obj = {
						text: String(i),
						value: String(i)
					}
					list[0].push(obj)
				}
				return list
			},
			getMonthList() {
				const date = new Date()
				const month = date.getMonth()
				const list = [
					[]
				]
				for (let i = 1; i < 13; i++) {
					const obj = {
						text: String(i),
						value: String(i)
					}
					if (i < 10) {
						obj.text = '0' + i
						obj.value = '0' + i
					}
					list[0].push(obj)
				}
				setTimeout(() => {
					this.defaultMonth = [0]
				}, 1000)
				return list
			},
			getDayList() {
				const date = new Date()
				const year = date.getFullYear()
				let month = date.getMonth()
				if (this.monthObj) {
					month = parseInt(this.monthObj.value)
					month = String(month)
				}
				const day = date.getDate()
				const dayLen = (new Date(year, month, 0)).getDate()
				const list = [
					[]
				]
				for (let i = 1; i < dayLen + 1; i++) {
					const obj = {
						text: String(i),
						value: String(i)
					}
					if (i < 10) {
						obj.text = '0' + i
						obj.value = '0' + i
					}
					list[0].push(obj)
				}
				setTimeout(() => {
					this.defaultDay = [0]
				}, 1000)
				return list
			},
			tabClick(item) {
				this.tabCur = item.value
				switch (item.value) {
					case 2:
						this.yearPicker = true
						break
					case 1:
						this.monthPicker = true
						break
					case 0:
						this.dayPicker = true
						break
				}
				this.params.reportType = this.tabCur
			},
			typeConfirm(e) {
				this.currentType = e.value[0]
				this.typePicker = false
				if (this.currentType.value === 5 || this.currentType.value === 7) {
					let today = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
					this.curDate = [today, today]
				} else {
					this.curDate = []
				}
				setTimeout(() => {
					if (this.currentType.value === 6) {
						this.currentYear = this.yearList[0][4].value
						this.yearObj = this.yearList[0][4]
						this.params.title = this.yearList[0][4].text
						this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
						this.$refs[this.currentType.key].getData(this.params)
					} else {
						this.$refs[this.currentType.key].getData(this.curDate)
					}
				}, 500)
			},
			dateChange(e) {
				this.curDate = e
				this.$refs[this.currentType.key].getData(this.curDate)
			},
			yearConfirm(e) {
				this.defaultYear = [e.indexs[0]]
				this.currentYear = e.value[0].value
				this.params.title = e.value[0].text
				this.yearObj = e.value[0]
				this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
				this.$refs[this.currentType.key].getData(this.params)
				this.yearPicker = false
			},
			monthConfirm(e) {
				this.defaultMonth = [e.indexs[0]]
				this.currentMonth = e.value[0].value
				this.monthObj = e.value[0]
				this.params.title = `${this.yearObj.text}-${this.monthObj.text}`
				this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
				this.$refs[this.currentType.key].getData(this.params)
				this.monthPicker = false
				this.dayList = this.getDayList()
			},
			dayConfirm(e) {
				this.defaultDay = [e.indexs[0]]
				this.title = e.value[0].text
				this.currentDay = e.value[0].value
				this.dayObj = e.value[0]
				this.params.title = `${this.yearObj.text}-${this.monthObj.text}-${this.dayObj.text}`
				this.params.queryDate = `${this.currentYear}-${this.currentMonth}-${this.currentDay}`
				this.$refs[this.currentType.key].getData(this.params)
				this.dayPicker = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #1767F2;
		min-height: calc(100vh - 44px);
	}
</style>

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