MiniPrograms/subpkg/gradelist/single.vue

<template>
	<view class="page_view">
		<top-return color="#FFF" text="单次考试"></top-return>
		<!-- 背景 -->
		<view class="bg_box"></view>
		<!-- 头部学期信息 -->
		<top-semester></top-semester>
		<!-- 分析列表 -->
		<view class="card_view">
			<view class="card_item" v-for="(item,index) in analysisData" :key="index" :style="{background: item.color,height: 200+ 'rpx'}">
				<view class="analysis_box">
					<view class="analysis_text">{{item.title}}</view>
					<view class="flex_baseline">
						<view class="analysis_data">{{item.data/0.01}}%</view>
						<view class="analysis_text" style="margin-left: 20rpx;">的学生</view>
					</view>
				</view>
				<view class="icon_box">
					<view :class="item.data>=0.4?(item.data>=0.7?'t-icon t-icon-a-bianzu6':'t-icon t-icon-a-bianzu7'): 't-icon t-icon-a-bianzu8'"></view>
				</view>
			</view>
			<!-- 图表 -->

			<view class="card_item" style="width: 100%;">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">最近考试单科对比</view>
				</view>
				<view class="chart_box">
					<qiun-data-charts type="column" ontouch="true" :chartData="examChartData.singleChartData[0]"
						tooltipFormat='tooltipScore' />
				</view>
			</view>
			<view class="card_item" style="width: 100%;">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">最近单科平均对比</view>
				</view>
				<view class="chart_box">
					<qiun-data-charts type="column" ontouch="true" :chartData="examChartData.singleChartData[1]"
						tooltipFormat='tooltipScore' />
				</view>
			</view>
			<view class="card_item" style="width: 100%;">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">最近考试单科排行</view>
				</view>
				<view class="chart_box">
					<qiun-data-charts type="column" ontouch="true" :chartData="examChartData.singleChartData[2]"
						tooltipFormat='subjectRankColum' />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_chart', ['examChartData']),
		},
		data() {
			return {
				//分析模块数据
				analysisData: [{
					title: '总成绩超过年级中',
					data: '',
					color: '#4169E1',
				}, {
					title: '总成绩超过班级中',
					data: '',
					color: '#ff8caf',
				}],
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.getAnalysisData()
			},
			getAnalysisData() {
				this.analysisData[0].data = 0.53
				this.analysisData[1].data = 0.72
			}
		}
	}
</script>

<style lang="scss">
	@import 'gradelist_pages.scss';
</style>