OnlineEducation-teacher-front/src/views/statisticalAnalysis/platformStatusOverview/index.vue

<template>
	<div class="platform-status">
		<div class="header">
			<h1>平台运行状态总览</h1>
			<p>实时掌握全院课程与人员信息、热门课程、开课动态与访问分析</p>
		</div>

		<!-- 统计卡片 -->
		<div class="stats-grid">
			<div class="stat-card">
				<div class="stat-title">当前创建课程总数</div>
				<div class="stat-value">{{ platformStats.totalCourses }}</div>
			</div>
			<div class="stat-card">
				<div class="stat-title">开课总数</div>
				<div class="stat-value">{{ platformStats.openedCourses }}</div>
			</div>
			<div class="stat-card">
				<div class="stat-title">教员总数</div>
				<div class="stat-value">{{ platformStats.totalTeachers }}</div>
			</div>
			<div class="stat-card">
				<div class="stat-title">学员总数</div>
				<div class="stat-value">{{ platformStats.totalStudents.toLocaleString() }}</div>
			</div>
		</div>

		<!-- 热门课程分析 -->
		<div class="section">
			<h2>受欢迎课程 & 引用最受欢迎的课程统计</h2>
			<a-table :columns="hotCoursesColumns" :data-source="hotCoursesData" :pagination="false" row-key="id" />
		</div>

		<!-- 开课信息列表 -->
		<div class="section">
			<h2>全院开课信息</h2>
			<a-table
				:columns="courseInfoColumns"
				:data-source="courseInfoData"
				:pagination="{
					current: courseInfoPagination.current,
					pageSize: courseInfoPagination.pageSize,
					total: courseInfoPagination.total,
					showSizeChanger: true,
					showQuickJumper: true,
					showTotal: (total) => `共 ${total} 条记录`,
					onChange: handlePageChange,
					onShowSizeChange: handlePageChange
				}"
				row-key="id"
			/>
		</div>

		<!-- 访问统计弹窗 -->
		<a-modal
			v-model:visible="visitModalVisible"
			:title="modalTitle"
			width="500px"
			:footer="null"
			@cancel="closeVisitModal"
		>
			<p style="color: #7f8c8d; margin: 10px 0; text-align: center">显示近7天的访问数据趋势</p>
			<div ref="visitChart" style="width: 100%; height: 320px; margin-top: 20px"></div>
		</a-modal>
	</div>
</template>

<script setup>
	import { ref, reactive, nextTick, onMounted } from 'vue'
	import * as echarts from 'echarts'
	import {
		getPlatformStats,
		getHotCourses,
		getCourseInfo,
		getCourseVisitStats
	} from '@/api/statisticalAnalysis/platformStatusOverview'

	// 平台统计数据
	const platformStats = reactive({
		totalCourses: 0,
		openedCourses: 0,
		totalTeachers: 0,
		totalStudents: 0
	})

	// 热门课程表格列定义
	const hotCoursesColumns = [
		{
			title: '排名',
			dataIndex: 'rank',
			key: 'rank',
			width: 80,
			align: 'center'
		},
		{
			title: '课程名称',
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: '主讲教员',
			dataIndex: 'teacher',
			key: 'teacher'
		},
		{
			title: '访问量',
			dataIndex: 'visits',
			key: 'visits',
			align: 'center'
		},
		{
			title: '被引用次数',
			dataIndex: 'references',
			key: 'references',
			align: 'center'
		}
	]

	// 热门课程数据
	const hotCoursesData = ref([])

	// 开课信息表格列定义
	const courseInfoColumns = [
		{
			title: '课程名称',
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: '主讲教员',
			dataIndex: 'teacher',
			key: 'teacher'
		},
		{
			title: '开课时间',
			dataIndex: 'startDate',
			key: 'startDate'
		},
		{
			title: '学员数',
			dataIndex: 'studentCount',
			key: 'studentCount',
			align: 'center'
		},
		{
			title: '访问量',
			dataIndex: 'visits',
			key: 'visits',
			align: 'center'
		},
		{
			title: '统计分析',
			key: 'action',
			align: 'center',
			customRender: ({ record }) => {
				console.log("分析呢",record)
				return h('button', { class: 'btn-view', onClick: () => showVisitModal(record.id,record.name) }, '查看')
			}
		}
	]

	// 开课信息数据
	const courseInfoData = ref([])
	const courseInfoPagination = reactive({
		current: 1,
		pageSize: 10,
		total: 0
	})

	// 弹窗相关
	const visitModalVisible = ref(false)
	const modalTitle = ref('')
	const visitChart = ref(null)
	let chartInstance = null

	// 加载数据的方法
	const loadPlatformStats = async () => {
		try {
			const response = await getPlatformStats()
			Object.assign(platformStats, response.data)
		} catch (error) {
			console.error('获取平台统计数据失败:', error)
		}
	}

	const loadHotCourses = async () => {
		try {
			const response = await getHotCourses()
			hotCoursesData.value = response.data
		} catch (error) {
			console.error('获取热门课程数据失败:', error)
		}
	}

	const loadCourseInfo = async (params = {}) => {
		try {
			const response = await getCourseInfo(params)
			console.log("888",response)
			courseInfoData.value = response.data.records
			courseInfoPagination.total = response.data.total
			courseInfoPagination.current = response.data.current
		} catch (error) {
			console.error('获取开课信息失败:', error)
		}
	}

	// 分页变化处理
	const handlePageChange = (page, pageSize) => {
		courseInfoPagination.current = page
		courseInfoPagination.pageSize = pageSize
		loadCourseInfo({
			current: page,
			size: pageSize
		})
	}

	// 显示访问统计弹窗
	const showVisitModal = async (courseId,name) => {
		modalTitle.value = `${name} - 近7天访问统计`
		visitModalVisible.value = true

		try {
			const response = await getCourseVisitStats({ courseId })
			console.log('如家七天',response)
			nextTick(() => {
				initVisitChart(response.data)
			})
		} catch (error) {
			console.error('获取课程访问统计失败:', error)
		}
	}

	// 初始化访问统计图表
	const initVisitChart = (data) => {
		if (!visitChart.value) return

		if (chartInstance) {
			chartInstance.dispose()
		}

		chartInstance = echarts.init(visitChart.value)

		const { visitData, dateRange } = data

		const option = {
			title: {
				text: '近7天访问趋势',
				left: 'center',
				textStyle: {
					fontSize: 14,
					color: '#2c3e50'
				}
			},
			tooltip: {
				trigger: 'axis',
				formatter: function (params) {
					return params[0].name + '<br/>' + params[0].marker + '访问量: ' + params[0].value + ' 次'
				}
			},
			xAxis: {
				type: 'category',
				data: dateRange,
				axisLabel: {
					color: '#2c3e50'
				}
			},
			yAxis: {
				type: 'value',
				name: '访问量',
				nameTextStyle: {
					color: '#2c3e50'
				},
				axisLabel: {
					color: '#2c3e50'
				}
			},
			series: [
				{
					name: '访问量',
					type: 'line',
					data: visitData,
					smooth: true,
					itemStyle: { color: '#3498db' },
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{ offset: 0, color: 'rgba(52,152,219,0.3)' },
								{ offset: 1, color: 'rgba(52,152,219,0.1)' }
							]
						}
					},
					lineStyle: {
						width: 3
					},
					symbol: 'circle',
					symbolSize: 8
				}
			]
		}

		chartInstance.setOption(option)

		// 响应式处理
		window.addEventListener('resize', () => {
			chartInstance?.resize()
		})
	}

	// 关闭访问统计弹窗
	const closeVisitModal = () => {
		visitModalVisible.value = false
		if (chartInstance) {
			chartInstance.dispose()
			chartInstance = null
		}
	}

	// 初始化数据
	const initData = async () => {
		await Promise.all([loadPlatformStats(), loadHotCourses(), loadCourseInfo()])
	}

	// 组件挂载时加载数据
	onMounted(() => {
		initData()
	})

	// 将showVisitModal方法暴露到全局，供表格按钮调用
	window.showVisitModal = showVisitModal
</script>

<style scoped>
	.platform-status {
		background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
		min-height: 100vh;
		padding: 30px 20px;
	}

	.header {
		background: #fff;
		border-radius: 16px;
		padding: 30px 0 20px 0;
		margin-bottom: 30px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}

	.header h1 {
		font-size: 2.2em;
		color: #2c3e50;
		margin-bottom: 10px;
	}

	.header p {
		color: #7f8c8d;
		font-size: 1.1em;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 25px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}

	.stat-card {
		background: #fff;
		border-radius: 14px;
		padding: 28px 20px;
		box-shadow: 0 4px 16px rgba(44, 62, 80, 0.07);
		text-align: center;
		transition: box-shadow 0.2s;
	}

	.stat-card:hover {
		box-shadow: 0 8px 32px rgba(44, 62, 80, 0.13);
	}

	.stat-title {
		color: #7f8c8d;
		font-size: 1em;
		margin-bottom: 10px;
	}

	.stat-value {
		font-size: 2.3em;
		font-weight: bold;
		color: #3498db;
		margin-bottom: 5px;
	}

	.section {
		background: #fff;
		border-radius: 14px;
		padding: 25px 20px;
		margin-bottom: 30px;
		box-shadow: 0 4px 16px rgba(44, 62, 80, 0.07);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}

	.section h2 {
		font-size: 1.3em;
		color: #2c3e50;
		margin-bottom: 18px;
	}

	:deep(.ant-table-thead > tr > th) {
		background: #3498db;
		color: #fff;
		font-weight: 600;
	}

	:deep(.ant-table-tbody > tr:hover > td) {
		background: #f6faff;
	}

	:deep(.btn-view) {
		background: linear-gradient(135deg, #27ae60, #229954);
		color: #fff;
		border: none;
		border-radius: 8px;
		padding: 7px 18px;
		cursor: pointer;
		font-size: 0.95em;
		transition: background 0.2s;
	}

	:deep(.btn-view:hover) {
		background: linear-gradient(135deg, #229954, #27ae60);
	}

	@media (max-width: 900px) {
		.stats-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (max-width: 600px) {
		.stats-grid {
			grid-template-columns: 1fr;
		}
		.platform-status {
			padding: 10px;
		}
	}
</style>