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

<!-- 路段分析 -->
<template>
	<view class="section">
		<!-- 营收趋势分析 -->
		<view class="section-part">
			<view class="section-part-title"><text>|</text>营收趋势分析</view>
			<view class="section-part-content">
				<ColumnChart v-if="revenueTrendsData.series[0].data.length" :chartData="revenueTrendsData" :title="title" :opts="opts1"/>
				<view class="empty" v-else>
					<u-empty></u-empty>
				</view>
			</view>
		</view>
		<view class="section-part">
			<view class="section-part-title"><text>|</text>车流量统计</view>
			<view class="section-part-content">
				<ColumnChart v-if="trafficFlowData.series[0].data.length" :chartData="trafficFlowData" :title="title" :opts="opts2"/>
				<view class="empty" v-else>
					<u-empty></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ColumnChart from '@/components/columnChart.vue'
	export default {
		components: {
			ColumnChart
		},
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				opts1: {
					enableScroll: true,
					xAxis: {
						rotateLabel: true,
						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
						}
					}
				},
				opts2: {
					enableScroll: true,
					xAxis: {
						rotateLabel: true,
						scrollShow: true,
						itemCount: 8
					},
					yAxis: {
						showTitle: true,
						splitNumber: 5,
						data: [{
							title: '车辆(辆)',
							titleOffsetY: 0,
							titleOffsetX: 10
						}]
					},
					legend: {
						show: false
					},
					dataLabel: false,
					padding: [10, 0, 10, 0],
					extra: {
						column: {
							width: 20
						}
					}
				},
				revenueTrendsData: {
					categories: [],
					series: [{
						name: '',
						data: []
					}]
				},
				trafficFlowData: {
					categories: [],
					series: [{
						name: '',
						data: []
					}]
				}
			}
		},
		methods: {
			getData({ reportType, queryDate }) {
				this.reportType = reportType
				this.queryDate = queryDate
				this.getRevenueTrendsData()
				this.getRoadTrafficFlowData()
			},
			getRevenueTrendsData() {
				uni.$u.api.operationalAnalysisApi.getRevenueTrendsDataApi({
					reportType: this.reportType,
					queryDate: this.queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.revenueTrendsData.categories = res.data.itemList.map(item => {
								return item.roadName
							})
							this.revenueTrendsData.series[0].data = res.data.itemList.map(item => {
								return item.amt
							})
						} else {
							this.revenueTrendsData.categories = []
							this.revenueTrendsData.series[0].data = []
						}
					}
				})
			},
			getRoadTrafficFlowData() {
				uni.$u.api.operationalAnalysisApi.getRoadTrafficFlowDataApi({
					reportType: this.reportType,
					queryDate: this.queryDate
				}).then(res => {
					if (res.code === 200) {
						if (res.data.itemList && res.data.itemList.length) {
							this.trafficFlowData.categories = res.data.itemList.map(item => {
								return item.roadName
							})
							this.trafficFlowData.series[0].data = res.data.itemList.map(item => {
								return item.vehicleCount
							})
						} else {
							this.trafficFlowData.categories = []
							this.trafficFlowData.series[0].data = []
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.section {
		&-part {
			background-color: #fff;
			border-radius: 5px;
			margin-bottom: 10px;

			&-title {
				padding: 15px;

				text {
					color: #f00;
					margin-right: 5px;
				}
			}
		}
		.empty {
			padding: 15px;
		}
	}
</style>