front-end/hdApp/src/admin/stat/index.vue

<template>
	<div class="app-content" @click="dropdownShow = false">
		<!-- sel -wrap -->
		<div class="sel-wrap">
			<dropdown-list :show="dropdownShow" :top="80" :width="750" :height="400">
				<template v-slot:selectionbox>
					<div class="sel-open-btn" @click.stop="dropdownShow = dropdownShow ? false : true">
						<span>{{ typeName }}</span>
						<i class="iconfont iconsanjiao_xia"></i>
					</div>
				</template>
				<template v-slot:dropdownbox>
					<div class="sel-list-wrap">
						<scroll-view scroll-y class="tui-dropdown-scroll">
							<div class="sel-list" v-for="(item, index) in typeData" :key="index" @click.stop="selCategory(item)">{{ item.name }}</div>
						</scroll-view>
					</div>
				</template>
			</dropdown-list>
		</div>
		<!-- 收入统计 -->
		<div class="module-com">
			<div class="module-tit"></div>
			<div class="module-det">
				<echart-trend ref="echartIncome" :chartData="incomeStat" color="#FC243A" yName="金额(¥)" serviceName="收入统计"></echart-trend>
			</div>
		</div>
		<!-- 访问统计 -->
		<div class="module-com">
			<div class="module-tit"></div>
			<div class="module-det">
				<echart-trend ref="echartVisit" :chartData="visitStat" color="#3385FF" yName="数量(人)" serviceName="访问统计"></echart-trend>
			</div>
		</div>
		<!-- 客户数统计 -->
		<div class="module-com">
			<div class="module-tit"></div>
			<div class="module-det">
				<echart-trend ref="echartUser" :chartData="userStat" color="#28C57D" yName="数量(人)" serviceName="客户数统计"></echart-trend>
			</div>
		</div>
		<!-- 收入来源统计 -->
		<div class="module-com">
			<div class="module-tit">收入来源统计</div>
			<div class="module-det">
				<echart-circle ref="echartCircle" :chartData="incomeSourceStat"></echart-circle>
			</div>
		</div>
		<!-- 分类统计 -->
		<div class="module-com">
			<div class="module-tit">分类统计</div>
			<div class="module-det">
				<div class="category-list-wrap">
					<div class="category-list" v-for="(item, index) in categoryStat.list" :key="index">
						<div class="list-tit">{{ `${index + 1} ${item.name}` }}</div>
						<div class="list-det">
							<div class="progress-wrap">
								<div class="progress" :style="{ width: item.percentage + '%' }"></div>
							</div>
							<div class="progress-num">{{ item.num }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 用途统计 -->
		<div class="module-com">
			<div class="module-tit">用途统计</div>
			<div class="module-det">
				<echart-columnar ref="echartColumnar" :chartData="useStat"></echart-columnar>
			</div>
		</div>
	</div>
</template>

<script>
import EchartTrend from './components/echart-trend'
import EchartCircle from './components/echart-circle'
import EchartColumnar from './components/echart-columnar'
import DropdownList from '@/components/plugin/dropdown-list'
// api
import { getStatList } from '@/api/stat'
export default {
	name: 'statistics',
	components: {
		EchartTrend,
		EchartCircle,
		EchartColumnar,
		DropdownList
	},
	data() {
		return {
			dropdownShow: false,
			typeData: [
				{
					name: '最近7天',
					value: 1
				},
				{
					name: '最近30天',
					value: 2
				},
				{
					name: '本月',
					value: 3
				},
				{
					name: '上月',
					value: 4
				},
				{
					name: '最近3月',
					value: 30
				},
				{
					name: '最近半年',
					value: 31
				},
				{
					name: '最近一年',
					value: 32
				},
				{
					name: '今年',
					value: 33
				}
			],
			typeName: '最近7天',
			type: 1,
			// 收入统计
			incomeStat: {},
			// 访问量统计
			visitStat: {},
			// 客户数统计
			userStat: {},
			// 粉丝数统计
			fansStat: {},
			// 收入来源统计
			incomeSourceStat: {},
			// 分类统计
			categoryStat: {},
			// 用途统计
			useStat: {}
		}
	},
	onLoad() {},
	mounted() {
		this.mInit()
	},
	methods: {
		mInit() {
			this._getData()
		},
		_getData() {
			getStatList({ type: this.type }).then(res => {
				if (!this.$util.isEmpty(res.data)) {
					let data = res.data
					data.categoryStat.list = data.categoryStat.list.map(e => {
						e.percentage = ((e.num / data.categoryStat.total) * 100).toFixed(2)
						return e
					})

					data.incomeSourceStat.list = data.incomeSourceStat.list.map(e => {
						e.name = `${e.name} ${((e.num / data.incomeSourceStat.total) * 100).toFixed(2)}% ${e.num}`
						e.value = e.num
						return e
					})

					Object.keys(data).forEach((i, index) => {
						if (i != 'categoryStat') {
							data[i].nameArr = data[i].list.map(e => e.name)
							data[i].numArr = data[i].list.map(e => e.num)
						}
					})

					this.incomeStat = data.incomeStat
					this.visitStat = data.visitStat
					this.userStat = data.userStat
					this.fansStat = data.fansStat
					this.incomeSourceStat = data.incomeSourceStat
					this.categoryStat = data.categoryStat
					this.useStat = data.useStat

					console.log(data)

					setTimeout(() => {
						this.initChart()
					}, 100)
				}
			})
		},
		initChart() {
			this.$refs.echartIncome.initChart()
			this.$refs.echartVisit.initChart()
			this.$refs.echartUser.initChart()
			this.$refs.echartCircle.initChart()
			this.$refs.echartColumnar.initChart()
		},
		selCategory(item) {
			this.typeName = item.name
			this.type = item.value
			this.dropdownShow = false
			this._getData()
		}
	}
}
</script>

<style lang="scss" scoped>
	.sel-wrap {
		width: 100%;
		height: 80upx;
		// background-color: ;
		// 下拉框
		.sel-open-btn {
			width: 30%;
			height: 80upx;
			line-height: 80upx;
			padding-left: 30upx;
		}
		.iconfont {
			color: $fontColor2;
		}
		.iconsanjiao_xia {
			font-size: 24upx;
			margin-left: 10upx;
		}
		.sel-list-wrap {
			background-color: #fff;
			box-shadow: 6upx 6upx 10upx #cccccc;
			.sel-list {
				padding: 20upx 30upx;
				// border-top: 1px solid $borderColor;
			}
		}
		.tui-dropdown-scroll {
			height: 400upx;
		}
	}
	.module-com {
		background-color: #fff;
		padding: 20upx 16upx 20upx 14upx;
		margin-bottom: 20upx;
		.module-tit {
			font-size: 28upx;
			margin-bottom: 26upx;
			padding-left: 16upx;
		}
	}
	.category-list-wrap {
		padding: 0 20upx;
		.category-list {
			margin-bottom: 20upx;
			.list-tit {
				color: $fontColor2;
				margin-bottom: 10upx;
			}
			.list-det {
				height: 30upx;
				@include disFlex(center, space-between);
				.progress-wrap {
					width: 84%;
					height: 100%;
					background-color: #f0f2f6;
					border-radius: 6upx;
					.progress {
						height: 100%;
						background-color: $mainColor;
						border-radius: 6upx;
					}
					.progress-num {
						color: $fontColor2;
					}
				}
			}
		}
	}
</style>