MiniPrograms/pages/grade/grade.vue

<template>
	<view class="home-container">
		<!-- 头部区域 -->
		<top-box v-bind:timeStamp="timeStamp"></top-box>

		<!-- 缩略图区域 -->
		<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 class="mini-chart-item" style="width: 100%; height: auto;">
				<view class="chart-container" style="height: 100%">
					<view class="chart-name">
						<view :class="icon.table"></view>
						<text class="chart-name-text">成绩表单</text>
					</view>
					<z-table class="table" :tableData="tableData" :columns="columns"
						showBottomSum="true">
					</z-table>
				</view>
			</view>
			
		</view>
	</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',
					table: 't-icon t-icon-baike'
				},
				//时间戳
				timeStamp: '',
				//成绩表
				columns: [{
						'title': '考试',
						'key': '考试',
						'width': 220,
					},
					{
						'title': '语文',
						'key': '语文',
					},
					{
						'title': '数学',
						'key': '数学',
					},
					{
						'title': '英语',
						'key': '英语',
					},
					{
						'title': '体育',
						'key': '体育',
					},
					{
						'title': '思品',
						'key': '思品',
					},
					{
						'title': '科学',
						'key': '科学',
					}
				],
				//表格数据
				tableData: [{
						'考试': '开学',
						'语文': 83,
						'数学': 95,
						'英语': 95,
						'体育': 92,
						'思品': 88,
						'科学': 90,
					},
					{
						'考试': '四月月考',
						'语文': 93,
						'数学': 92,
						'英语': 90,
						'体育': 82,
						'思品': 90,
						'科学': 99,
					},
					{
						'考试': '期中',
						'语文': 99,
						'数学': 91,
						'英语': 82,
						'体育': 94,
						'思品': 85,
						'科学': 100,
					},
					{
						'考试': '五月月考',
						'语文': 99,
						'数学': 92,
						'英语': 97,
						'体育': 92,
						'思品': 98,
						'科学': 88,
					},
					{
						'考试': '六月月考',
						'语文': 99,
						'数学': 90,
						'英语': 92,
						'体育': 92,
						'思品': 80,
						'科学': 90,
					},
					{
						'考试': '期末',
						'语文': 99,
						'数学': 85,
						'英语': 92,
						'体育': 95,
						'思品': 91,
						'科学': 99,
					}
				],
					
			}
		},
		onLoad() {
			this.$getTimeStamp()
			//获取成绩数据
			this.$initGrade()
		},
		//刷新页面
		onPullDownRefresh() {
			this.$getTimeStamp()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//导航成绩走势
			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: -50rpx 20rpx 10rpx 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 35rpx 40rpx;

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

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

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

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