MiniPrograms/pages/grade/grade.vue

<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<top-box v-bind:timeStamp="timeStamp"></top-box>
		<!-- 活动内容 -->
		<task-box :current="0">
			<!-- 记录模块 -->
			<template #center-slot>
				<!-- 缩略图区域 -->
				<view class="mini-chart-list">
					<!-- 成绩走势 -->
					<view class="mini-chart-item" style="width: 100%;">
						<view class="chart-container" @click="navGeneral">
							<view class="chart-name">
								<view :class="icon.General"></view>
								<text class="chart-name-text">成绩走势</text>
							</view>
							<view class="charts-box">
								<qiun-data-charts class="chart" :canvas2d='true' canvasId='canvans1' type="mainline"
									:chartData="gradeData.semesterLineChart.generalComparison" :loadingType="4"
									tooltipFormat='tooltipScore' />
							</view>
						</view>
					</view>
					<!-- 单次考试 -->
					<view class="mini-chart-item">
						<view class="chart-container" @click="navSingle">
							<view class="chart-name">
								<view :class="icon.RecentTest"></view>
								<text class="chart-name-text">单次考试分析</text>
							</view>
							<view class="charts-box">
								<qiun-data-charts type="mini-column" :chartData="gradeData.recentTestChart.recentComparison"
									:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans2' />
							</view>
						</view>
					</view>
					<!-- 成绩占比 -->
					<view class="mini-chart-item">
						<view class="chart-container" @click="navRank">
							<view class="chart-name">
								<view :class="icon.Rank"></view>
								<text class="chart-name-text">排行占比分析</text>
							</view>
							<view class="charts-box">
								<qiun-data-charts type="mini-area" :chartData="gradeData.rankChart.semesterRank"
									:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans3' />
							</view>
						</view>
					</view>
					<!-- 优劣科目分析 -->
					<view class="mini-chart-item">
						<view class="chart-container" @click="navSubject">
							<view class="chart-name">
								<view :class="icon.Advantage"></view>
								<text class="chart-name-text">优劣科目分析</text>
							</view>
							<view class="charts-box">
								<qiun-data-charts type="mini-rose" :chartData="gradeData.advantageRoseChart.recentAdvantage"
									:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans4' />
							</view>
						</view>
					</view>
					<!-- 考试能力分析 -->
					<view class="mini-chart-item">
						<view class="chart-container" @click="navAbility">
							<view class="chart-name">
								<view :class="icon.Ability"></view>
								<text class="chart-name-text">考试能力分析</text>
							</view>
							<view class="charts-box">
								<qiun-data-charts type="mini-column" :chartData="gradeData.abilityChart.importantAnalyse"
									:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans5' />
							</view>
						</view>
					</view>
				</view>
			</template>
		</task-box>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['childreninfo', 'semester']),
			...mapState('m_chart', ['gradeData'])
		},
		data() {
			return {
				//图标
				icon: {
					General: 't-icon t-icon-pingjia',
					RecentTest: 't-icon t-icon-zhishi',
					Rank: 't-icon t-icon-fengxianpinggu',
					Advantage: 't-icon t-icon-gaishuai',
					Ability: 't-icon t-icon-tongji',
				},
				//时间戳
				timeStamp: '',

			}
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			setTimeout(function() {
				this.init()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			init() {
				//获取当前时间
				this.timeStamp = (new Date()).format("hh:mm")
				//获取成绩数据
				this.$initGrade()
			},
			//导航成绩走势
			navGeneral(e) {
				uni.navigateTo({
					url: "/gradepkg/general-chart/general-chart"
				})
			},
			//导航单次考试
			navSingle(e) {
				uni.navigateTo({
					url: "/gradepkg/single-chart/single-chart"
				})
			},
			//导航排行占比
			navRank(e) {
				uni.navigateTo({
					url: "/gradepkg/rank-chart/rank-chart"
				})
			},
			//导航优劣科目
			navSubject(e) {
				uni.navigateTo({
					url: "/gradepkg/subject-chart/subject-chart"
				})
			},
			//导航考试能力
			navAbility(e) {
				uni.navigateTo({
					url: "/gradepkg/ability-chart/ability-chart"
				})
			},

		},

	}
</script>

<style lang="scss">
	.home-container {
		width: 100%;
		height: 100%;
		overflow-x: hidden; //隐藏多余的页面

		.home-topinfo {
			background: linear-gradient($color-pink, $page-background-color);
		}

		//缩略图列表
		.mini-chart-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: -10rpx 20rpx -20rpx 20rpx;
			justify-content: space-between;

			.mini-chart-item {
				margin: 2% 0;
				width: 48%;
				display: flex;
				flex-direction: column;
			}
		}
	}

	//图表卡片
	.chart-container {
		border-radius: $card-border-radius;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #FFFFFF;
		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		width: 100%;
		height: 345rpx;

		.chart-name {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			margin: 20rpx 0 20rpx 40rpx;

			.chart-name-text {
				margin-left: 15rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: $color-title;
			}
		}

		.charts-box {
			width: 100%;
			height: 265rpx;
		}
	}

	.table {
		margin-bottom: 20rpx;
		width: 93%;
		height: 100%;
	}

	.t-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>