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">
					<view class="chart-name">
						<view class="t-icon t-icon-xtubiao-4"></view>
						<text class="chart-name-text">成绩走势</text>
					</view>

					<view class="charts-box">
						<qiun-data-charts class="chart" :canvas2d='true' canvasId='canvans5' type="mainline"
							:chartData="gradeData.mainLineChart" :loadingType="4" tooltipFormat='tooltipScore' />
					</view>
				</view>
			</view>

			<view class="mini-chart-item">
				<view class="chart-container" @click="navLineChart">
					<view class="chart-name">
						<view class="t-icon t-icon-xtubiao-4"></view>
						<text class="chart-name-text">学期走势</text>
					</view>

					<view class="charts-box">
						<qiun-data-charts type="mini-line" :chartData="gradeData.semesterLineChart.lineComparison"
							:loadingType="4" background="none" :tapLegend="false" :canvas2d='true'
							canvasId='canvans3' />
					</view>
				</view>
			</view>

			<view class="mini-chart-item">
				<view class="chart-container" @click="navAreaChart">
					<view class="chart-name">
						<view class="t-icon t-icon-xtubiao-4"></view>
						<text class="chart-name-text">单科走势</text>
					</view>

					<view class="charts-box">
						<qiun-data-charts type="mini-area" :chartData="gradeData.subjectAreaChart.areaComparison"
							:loadingType="4" background="none" :tapLegend="false" :canvas2d='true'
							canvasId='canvans1' />
					</view>
				</view>
			</view>

			<view class="mini-chart-item">
				<view class="chart-container" @click="navColumnChart">
					<view class="chart-name">
						<view class="t-icon t-icon-xtubiao-2"></view>
						<text class="chart-name-text">最近成绩</text>
					</view>

					<view class="charts-box">
						<qiun-data-charts type="mini-column" :chartData="gradeData.recentColumnChart.columnComparison"
							:loadingType="4" background="none" :tapLegend="false" :canvas2d='true'
							canvasId='canvans2' />
					</view>
				</view>
			</view>
			<!-- 分析模块 -->
			<view class="mini-chart-item">
				<analysis-box></analysis-box>
			</view>

			<!-- 成绩表单 -->
			<view class="mini-chart-item" style="width: 100%; height: 650rpx;">
				<view class="chart-container" style="height: 100%">
					<view class="chart-name">
						<view class="t-icon t-icon-xtubiao-5"></view>
						<text class="chart-name-text">成绩概览</text>
					</view>
					<z-table class="table" :tableData="gradeData.tableData" :columns="gradeData.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 {
				//时间戳
				timeStamp: '',
			}
		},
		onLoad() {
			this.$getTimeStamp()
		},
		//刷新页面
		onPullDownRefresh() {
			this.$getTimeStamp()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//导航柱状图页面
			navColumnChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/column-chart/column-chart"
				})
			},
			//导航面积折线图页面
			navAreaChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/area-chart/area-chart"
				})
			},
			//导航折线图页面
			navLineChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/line-chart/line-chart"
				})
			},
		},
		
	}
</script>

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

		.home-topinfo {
			background: linear-gradient(#ff8caf, $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: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #3B4144;
			}
		}

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

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

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