MiniPrograms/pages/grade/grade.vue

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

		<!-- 缩略图区域 -->
		<view class="mini-chart-list">

			<view class="mini-chart-item">
				<view class="mainchart-container">
					<view class="mainchart-name">
						<view class="t-icon t-icon-xtubiao-4"></view>
						<text class="mainchart-text">学期成绩走势</text>
					</view>

					<view class="mainchart-box">
						<qiun-data-charts class="chart" :canvas2d='true' canvasId='canvans5' type="mainline"
							:chartData="gradeData.mainLineChart" :loadingType="4" />
					</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>
		<!-- 成绩表单 -->
		<view class="table-card">
			<view class="table-name">
				<view class="t-icon t-icon-xtubiao-5"></view>
				<text class="table-name-text">成绩概览</text>
			</view>
			<z-table class="table" :tableData="gradeData.tableData" :columns="gradeData.columns" stickSide="true">
			</z-table>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['childreninfo', 'semester']),
			...mapState('m_chart', ['gradeData'])
		},
		data() {
			return {
				//时间戳
				timeStamp: '',
			}
		},
		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"
				})
			},
			//更新时间戳
			getTimeStamp() {
				var date = new Date(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				this.timeStamp = (hour + ':' + minute).toString();
			}
		},
		onLoad() {
			this.getTimeStamp()
		},
		//刷新页面
		onPullDownRefresh() {
			this.getTimeStamp()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

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

		.home-topinfo {
			background: linear-gradient(#ff8caf, #f1f3f5);
		}

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

			.mini-chart-item {
				margin: 10rpx 0;
				display: flex;
				flex-direction: column;
			}
		}
	}

	//总成绩折线图
	.mainchart-container {
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		width: 100%;

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

			.mainchart-text {
				margin-left: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #3B4144;
			}
		}

		.mainchart-box {
			width: 710rpx;
			height: 300rpx;
		}
	}

	//缩略图
	.chart-container {
		border-radius: 16rpx;
		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: 347rpx;
		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-card {
		margin: 10rpx 20rpx;
		border-radius: 16rpx;
		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);

		.table-name {
			width: 100%;
			text-align: left;
			margin: 20rpx 0 0 50rpx;
			display: flex;
			align-items: center;
			font-weight: bold;
			color: #3B4144;

			.table-name-text {
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}

		.table {
			margin: 20rpx;
			width: 92%;
		}
	}

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