zhjwxt/admin/src/app/views/statistics/home.vue

<template>
	<div class="main-container">
		<!-- 实时概况 -->
		<el-card shadow="never" class="!border-none">

			<template #header>
				<span class="text-lg font-extrabold mr-[10px]">统计概括</span>
				<span class="text-sm text-[#a19f98]">查看校区、员工、资源和学员的实时数据</span>
			</template>

			<el-row :gutter="20">
				<el-col :span="6">
					<div class="text-sm text-[#a19f98] leading-8 ">
						<el-statistic :value="info.campus_count">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									<span class="mr-[5px]">校区数量</span>
								</div>
							</template>
						</el-statistic>
						<div class="text-sm text-[#a19f98] leading-8">

						</div>
					</div>
				</el-col>

				<el-col :span="6">
					<div class="text-sm text-[#a19f98] leading-8 ">
						<el-statistic :value="info.personnel_count">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									<span class="mr-[5px]">员工数量</span>
								</div>
							</template>
						</el-statistic>

						<div class="text-sm text-[#a19f98] leading-8">

						</div>
					</div>
				</el-col>

				<el-col :span="6">
					<div class="text-sm text-[#a19f98] leading-8 ">
						<el-statistic :value="info.customerResources_count">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									<span class="mr-[5px]">资源数量</span>
								</div>
							</template>
						</el-statistic>

						<div class="text-sm text-[#a19f98] leading-8">
							<span>昨日新增</span>
							<span>{{info.customerResources_day_count}}</span>
						</div>
					</div>
				</el-col>

				<el-col :span="6">
					<div class="text-sm text-[#a19f98] leading-8 ">
						<el-statistic :value="info.student_count">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									<span class="mr-[5px]">学员数量</span>
								</div>
							</template>
						</el-statistic>
						<div class="text-sm text-[#a19f98] leading-8">
							<span>昨日新增</span>
							<span>{{info.student_day_count}}</span>
						</div>
					</div>
				</el-col>


			</el-row>


		</el-card>
		<!-- 实时概况 end -->


		<el-row :gutter="15" class="mt-[15px]">
			<el-col :span="24">
				<el-card shadow="never" class="!border-none">
					<template #header>
						<span class="text-lg font-extrabold">资源增长趋势</span>
					</template>
					<div >
						<el-button :type="activeRange === 'week' ? 'primary' : 'default'" size="small"
							@click="changeRange('week')">周</el-button>
						<el-button :type="activeRange === 'month' ? 'primary' : 'default'" size="small"
							@click="changeRange('month')">月</el-button>
						<el-button :type="activeRange === 'year' ? 'primary' : 'default'" size="small"
							@click="changeRange('year')">年</el-button>
						
					</div>
					
					<div ref="visitStat" :style="{ width: '100%', height: '300px' }">
						
					</div>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { getHome } from '@/app/api/sys'
	import * as echarts from 'echarts'
	const visitStat = ref<any>(null)
	const activeRange = ref<'week' | 'month' | 'year'>('week')

	const info = reactive({
		campus_count: 0,
		personnel_count: 0,
		customerResources_count: 0,
		customerResources_day_count: 0,
		student_count: 0,
		student_day_count: 0,
		customer: []
	})
	
	const changeRange = (range) => {
	  activeRange.value = range
	  Init(range) // 加载新数据
	}
	
	const Init = (range) => {
	
		getHome({'date':range})
			.then((res) => {
				info.campus_count = res.data.campus_count
				info.personnel_count = res.data.personnel_count
				info.customerResources_count = res.data.customerResources_count
				info.customerResources_day_count = res.data.customerResources_day_count
				info.student_count = res.data.student_count
				info.student_day_count = res.data.student_day_count
				info.customer = res.data.customer
				drawChart('');
			})
			.catch(() => {

			})
	}

	Init();


	const drawChart = (item : any) => {
		let value = info.customer.value
		if (item) value = item
		if (!visitStat.value) return


		const visitStatChart = echarts.init(visitStat.value)
		const visitStatOption = ref({
			// title: {
			//     text: '订单量趋势'
			// },
			legend: {},
			xAxis: {
				data: []
			},
			yAxis: {},
			tooltip: {
				trigger: 'axis'
			},
			series: [
				{
					type: 'line',
					data: []
				}
			]
		})


		visitStatOption.value.xAxis.data = info.customer.time
		visitStatOption.value.series[0].data = value

		visitStatChart.setOption(visitStatOption.value)
	}
</script>

<style lang="scss" scoped></style>