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

<!-- 收入分析 -->
<template>
	<view class="revenue">
		<view class="revenue-search">
			<view class="revenue-search-item" @click="incomeTypePicker = true">
				<u--input
					placeholder="请输入内容"
					v-model="searchContent.text"
					suffixIcon="arrow-down"
					:readonly="true"
				></u--input>
			</view>
			<view class="revenue-search-item">
				<!-- <u-button text="搜索" type="primary" class="revenue-search-item-btn" @click="searchClick"></u-button> -->
			</view>
		</view>
		<view class="revenue-line">
			<ColumnChart v-if="chartData.series[0].data.length || chartData.series[1].data.length" :chartData="chartData" :title="title" :opts="opts"/>
			<view class="empty" v-else>
				<u-empty></u-empty>
			</view>
		</view>
		<u-picker
			:show="incomeTypePicker"
			:columns="dictList"
			@confirm="incomeTypeConfirm"
			@cancel="incomeTypePicker = false"
		></u-picker>
	</view>
</template>

<script>
	import ColumnChart from '@/components/columnChart.vue'
	export default {
		components: {
			ColumnChart
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			opts: {
				type: Object,
				default: () => {
					return {
						enableScroll: true,
						xAxis: {
							rotateLabel: false,
							scrollShow: true,
							itemCount: 8
						},
						yAxis: {
							showTitle: true,
							splitNumber: 5,
							data: [{
								title: '元',
								titleOffsetY: -3
							}]
						},
						legend: {
							show: false
						},
						dataLabel: false,
						padding: [20, 0, 10, 0],
						extra: {
							column: {
								width: 20
							}
						}
					}
				}
			}
		},
		data() {
			return {
				chartData: {
					categories: [],
					series: [
						{
							name: '路段',
							data: []
						}, {
							name: '停车场',
							data: []
						}]
				},
				searchContent: {
					text: '',
					value: ''
				},
				dictList: [[]],
				incomeTypePicker: false,
				reportType: '',
				queryDate: ''
			}
		},
		// created() {
		// 	this.getDict();
		// },
		methods: {
			getData({ reportType, queryDate }) {
				this.reportType = reportType
				this.queryDate = queryDate
				this.getDict();
			},
			getDict() {
				uni.$u.api.getDictApi({  type: 'income_type'}).then(res => {
					if (res.code === 200) {
						let list = res.data.map((item => {
							return {
								text: item.dictLabel,
								value: item.dictValue
							}
						}))
						this.dictList = [list]
						if (!this.searchContent.value) {
							this.searchContent = this.dictList[0][0]
						}
						this.getIncomeData()
					}
				})
			},
			getIncomeData() {
				this.chartData.categories = []
				this.chartData.series[0].data = []
				this.chartData.series[1].data = []
				uni.$u.api.operationalAnalysisApi.getIncomeDataApi({
					reportType: this.reportType,
					queryDate: this.queryDate,
					incomeType: this.searchContent.value
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.chartData.categories = res.data.itemList.map(item => {
								return item.statisTime
							})
							this.chartData.series[0].data = res.data.itemList.map(item => {
								return item.amt
							})
						}
					}
				})
				uni.$u.api.operationalAnalysisApi.getParkingIncomeDataApi({
					reportType: this.reportType,
					queryDate: this.queryDate,
					incomeType: this.searchContent.value
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.chartData.categories = res.data.itemList.map(item => {
								return item.statisTime
							})
							this.chartData.series[1].data = res.data.itemList.map(item => {
								return item.amt
							})
						}
					}
				})
			},
			incomeTypeConfirm(e) {
				this.searchContent = e.value[0]
				this.getIncomeData()
				this.incomeTypePicker = false
			},
			searchClick() {
				// this.getIncomeData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.revenue {
		background-color: #fff;
		border-radius: 5px;
		&-search {
			margin-bottom: 12px;
			padding: 19px 15px 0 15px;
			display: flex;
			&-item {
				width: 48%;
				margin-right: 2%;
				&-btn {
					width: 50%;
					height: 38px;
				}
			}
		}
	}
	.empty {
		padding: 15px;
	}
</style>