MiniPrograms/pages/grade/grade.vue

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

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

			<view class="mini-chart-item">
				<mainline-mini-chart></mainline-mini-chart>
			</view>

			<view class="mini-chart-item" @click="navLineChart">
				<line-mini-chart></line-mini-chart>
			</view>

			<view class="mini-chart-item" @click="navAreaChart">
				<area-mini-chart></area-mini-chart>
			</view>

			<view class="mini-chart-item" @click="navColumnChart">
				<column-mini-chart></column-mini-chart>
			</view>

			<!-- 按钮区域 -->
			<view class="mini-chart-item">
				<view class="item-i" @click="navRoseChart">
					<view class="item-container">
						<view class="chart-name">
							<view class="t-icon t-icon-xtubiao-"></view>
							<text class="chart-name-text">科目分析</text>
						</view>
					</view>
				</view>

				<view class="item-i" @click="navRadarChart">
					<view class="item-container">
						<view class="chart-name">
							<view class="t-icon t-icon-xtubiao-3"></view>
							<text class="chart-name-text">能力分析</text>
						</view>
					</view>
				</view>

				<view class="item-i" @click="navArcbarChart">
					<view class="item-container">
						<view class="chart-name">
							<view class="t-icon t-icon-xtubiao-6"></view>
							<text class="chart-name-text">排名分析</text>
						</view>
					</view>
				</view>
			</view>


			<view class="mini-chart-item" @click="navMainRadarChart">
				<radar-mini-chart></radar-mini-chart>
			</view>

			<view class="mini-chart-item" @click="navBarChart">
				<bar-mini-chart></bar-mini-chart>
			</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="tableData" :columns="columns" stickSide="true" showBottomSum="true"></z-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [
				{
					'name':'数学',
					'open':83,
					'mid':95,
					'final':96
				},
				{
					'name':'语文',
					'open':93,
					'mid':90,
					'final':96
				},
				{
					'name':'英语',
					'open':99,
					'mid':82,
					'final':96
				},
				{
					'name':'体育',
					'open':99,
					'mid':97,
					'final':96
				},
				{
					'name':'科学',
					'open':99,
					'mid':92,
					'final':96
				},
				{
					'name':'思品',
					'open':99,
					'mid':94,
					'final':96
				}
				],
				columns: [
					{
						'title':'科目',
						'key':'name',
					},
					{
						'title':'开学',
						'key':'open',
					},
					{
						'title':'期中',
						'key':'mid',
					},
					{
						'title':'期末',
						'key':'final',
					}
				]
				
				
			}
		},
		mounted() {

		},
		methods: {
			open(e) {
				console.log(e);
			},
			//导航柱状图页面
			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"
				})
			},
			//导航玫瑰图页面
			navRoseChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/rose-chart/rose-chart"
				})
			},
			//导航雷达图页面
			navRadarChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/radar-chart/radar-chart"
				})
			},
			//导航到进度条页面
			navArcbarChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/arcbar-chart/arcbar-chart"
				})
			},
			//导航到条状图页
			navBarChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/bar-chart/bar-chart"
				})
			},
			//导航到学年雷达图页
			navMainRadarChart(e) {
				console.log(e);
				uni.navigateTo({
					url: "/gradepkg/mainradar-chart/mainradar-chart"
				})
			}

		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.chart-list-container {
		height: 100%;
		overflow-x: hidden;

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

		.mini-chart-list {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin: -100rpx 22rpx 0 22rpx;
			justify-content: space-between;

			.mini-chart-item {
				margin-top: 22rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-i {
					margin: -10rpx 0;

					.item-container {
						border-radius: 20rpx;
						background-color: #FFFFFF;
						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
						width: 340rpx;
						height: auto;

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

							.chart-name-text {
								margin: 26rpx;
								font-size: 30rpx;
								font-weight: bold;
								color: #3B4144;
							}
						}
					}

					.t-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.table-card{
			margin: 40rpx 22rpx;
			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: 90%;
			}
		}
	}
</style>