parking_operation/pages/dataOverview/operationalAnalysis/operationalAnalysis.vue

<!-- 运营分析 -->
<template>
	<view class="operation">
		<view class="operation-header">
			<view class="operation-header-left" @click="typePicker = true">
				<u-icon name="arrow-down" color="#000" size="15"></u-icon>
				<text>{{ currentType.text }}</text>
			</view>
			<view class="operation-header-right">
				<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>
		<view class="operation-main">
			<template v-if="currentType.value === 1">
				<line-chart :chartData="currentType.chartData" :title="title" />
			</template>
			<template v-if="currentType.value === 2">
				<column-chart :chartData="currentType.chartData" :title="title" />
			</template>
			<template v-if="currentType.value === 4">
				<line-chart :chartData="currentType.chartData" :title="title" :opts="currentType.opts" />
			</template>
			<template v-if="currentType.value === 6">
				<line-chart :chartData="currentType.chartData" :title="title" :opts="currentType.opts" />
			</template>
			<template v-if="currentType.value === 7">
				<view class="mix-box">
					<view class="mix-box-1">
						<view class="mix-box-1-title">营收趋势分析</view>
						<column-chart :chartData="currentType.chartData1" :title="title"/>
					</view>
					<view class="mix-box-1">
						<view class="mix-box-1-title">车流量统计</view>
						<column-chart :chartData="currentType.chartData2" :title="title" :opts="currentType.opts"/>
					</view>
				</view>
			</template>
			<!-- <column/> -->
		</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 ColumnChart from './components/columnChart.vue'
	import LineChart from './components/lineChart.vue'
	export default {
		components: {
			ColumnChart,
			LineChart
		},
		data() {
			return {
				tabList: [{
						label: '年',
						value: 1
					},
					{
						label: '月',
						value: 2
					},
					{
						label: '日',
						value: 3
					}
				],
				tabCur: 1,
				// 类型
				typePicker: false,
				currentType: {},
				typeList: [
					[{
							text: '营收分析（折线）',
							value: 1,
							type: 'line',
							chartData: {
								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
								series: [{
									name: '',
									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
								}]
							}
						},
						{
							text: '营收分析（柱状）',
							value: 2,
							type: 'bar',
							chartData: {
								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
								series: [{
									name: '',
									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
								}]
							}
						},
						{
							text: '路段/停车场营收排行',
							value: 3,
							type: 'table'
						},
						{
							text: '车流量分析',
							value: 4,
							type: 'line',
							chartData: {
								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
								series: [{
									name: '',
									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
								}]
							},
							opts: {
								xAxis: {
									rotateLabel: false,
									labelCount: 6
								},
								yAxis: {
									showTitle: true,
									splitNumber: 5,
									data: [{
										title: '辆',
										titleOffsetY: -5
									}]
								},
								legend: {
									show: false
								},
								dataLabel: false,
								extra: {
									column: {
										width: 20
									}
								}
							}
						},
						{
							text: '收费员业绩排行',
							value: 5,
							type: 'table'
						},
						{
							text: '收费员业绩分析',
							value: 6,
							type: 'line',
							chartData: {
								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
								series: [{
									name: '',
									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
								}]
							},
							opts: {
								xAxis: {
									rotateLabel: false,
									labelCount: 6
								},
								yAxis: {
									showTitle: true,
									splitNumber: 5,
									data: [{
										title: '元',
										titleOffsetY: -5
									}]
								},
								legend: {
									show: false
								},
								dataLabel: false,
								extra: {
									column: {
										width: 20
									}
								}
							}
						},
						{
							text: '路段分析',
							value: 7,
							type: 'mix',
							chartData1: {
								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
								series: [{
									name: '',
									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
								}]
							},
							chartData2: {
								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
								series: [{
									name: '',
									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
								}]
							},
							opts: {
								xAxis: {
									rotateLabel: false,
									labelCount: 6
								},
								yAxis: {
									showTitle: true,
									splitNumber: 5,
									data: [{
										title: '车辆(辆)',
										titleOffsetY: -5
									}]
								},
								legend: {
									show: false
								},
								dataLabel: false,
								extra: {
									column: {
										width: 20
									}
								}
							}
						},
						{
							text: '欠费分析',
							value: 8,
							type: 'line'
						},
						{
							text: '收入分析',
							value: 9,
							type: 'bar'
						},
						{
							text: '支付方式占比',
							value: 10,
							type: 'pie'
						},
						{
							text: '支付来源分析',
							value: 11,
							type: 'line'
						}
					]
				],
				// 年
				yearPicker: false,
				yearList: this.getYearList(),
				defaultYear: [4],
				title: '2022年',
				// 月
				monthPicker: false,
				monthList: this.getMonthList(),
				defaultMonth: [],
				// 日
				dayPicker: false,
				dayList: this.getDayList(),
				defaultDay: []
			}
		},
		onShow() {
			this.currentType = this.typeList[0][0]
		},
		methods: {
			getYearList() {
				const date = new Date()
				const year = date.getFullYear();
				const list = [
					[]
				]
				for (let i = year - 4; i < year + 1; i++) {
					const obj = {
						text: i + '年',
						value: 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: i + '月',
						value: i
					}
					list[0].push(obj)
				}
				setTimeout(() => {
					this.defaultMonth = [month]
				}, 1000)
				return list
			},
			getDayList() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth()
				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: i + '日',
						value: i
					}
					list[0].push(obj)
				}
				setTimeout(() => {
					this.defaultDay = [day - 1]
				}, 1000)
				return list
			},
			/**
			 * 点击tab
			 * @param {Object} item
			 */
			tabClick(item) {
				this.tabCur = item.value
				switch (item.value) {
					case 1:
						this.yearPicker = true
						break
					case 2:
						this.monthPicker = true
						break
					case 3:
						this.dayPicker = true
						break
				}
			},
			/**
			 * 选择器确认
			 * @param {Object} e
			 */
			typeConfirm(e) {
				this.currentType = e.value[0]
				this.typePicker = false
			},
			yearConfirm(e) {
				this.defaultYear = [e.indexs[0]]
				this.title = e.value[0].text
				this.yearPicker = false
			},
			monthConfirm(e) {
				this.defaultMonth = [e.indexs[0]]
				this.title = e.value[0].text
				this.monthPicker = false
			},
			dayConfirm(e) {
				this.defaultDay = [e.indexs[0]]
				this.title = e.value[0].text
				this.dayPicker = false
			}
		}
	}
</script>

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

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