MiniPrograms/subpkg/gradelist/level.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" style="background-color: #4169E1;height: 200rpx;">
				<view class="analysis_box">
					<view class="analysis_text">成绩波动对比</view>
					<view class="flex_baseline">
						<view class="analysis_data">{{mainExamUndulate>=quizExamUndulate?'小考':'大考'}}</view>
						<view class="analysis_text" style="margin-left: 20rpx;">发挥稳定</view>
					</view>
				</view>
				<view class="icon_box">
					<view v-if="mainExamUndulate>=quizExamUndulate" class="t-icon t-icon-a-bianzu7"></view>
					<view v-if="mainExamUndulate<quizExamUndulate" class="t-icon t-icon-a-bianzu6"></view>
				</view>
			</view>
			<view class="card_item" style="background-color: #ff8caf;height: 200rpx;">
				<view class="analysis_box">
					<view class="analysis_text">得分能力对比</view>
					<view class="flex_baseline">
						<view class="analysis_data">{{avgMain>=avgquiz?'大考':'小考'}}</view>
						<view class="analysis_text" style="margin-left: 20rpx;">得分能力强</view>
					</view>
				</view>
				<view class="icon_box">
					<view v-if="avgMain<avgquiz" class="t-icon t-icon-a-bianzu7"></view>
					<view v-if="avgMain>=avgquiz" class="t-icon t-icon-a-bianzu6"></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.levelChartData[0]"
						tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="level_chart1" />
				</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.levelChartData[1]"
						tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="level_chart2" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	
	export default {
		computed: {
			...mapState('m_chart', ['examChartData']),
		},
		data() {
			return {
				//成绩波动参数(标准差)
				mainExamUndulate: 0,
				quizExamUndulate: 0,
				//大小考每次考试平均成绩
				avgMain: 0,
				avgquiz: 0,
			}
		},
		onLoad() {
			this.getExamUndulate()
		},
		methods: {
			//成绩波动数据(标准差)
			getExamUndulate(){
				function arrSum(array) {
					let cont = 0
					for (let i = 0; i < array.length; i++) {
						cont += array[i]
					}
					return cont;
				}
				const mainArr = []
				const quizArr = []
				//统计每次考试总成绩并存为数组
				for (let item of this.examChartData.levelChartData[0].series) {
					mainArr.push(arrSum(item.data))
				}
				for (let item of this.examChartData.levelChartData[1].series) {
					quizArr.push(arrSum(item.data))
				}
				//大小考试平均成绩
				this.avgMain = arrSum(mainArr) / mainArr.length
				this.avgquiz = arrSum(quizArr) / quizArr.length
				//标准差函数
				function standardDeviation(arr) {
					let length = arr.length;
					let sum = arrSum(arr);
					let avg = sum / length;
					let temp = [];
					for (let i = 0; i < length; i++) {
				
						let dev = (arr[i]) - avg; //计算数组元素与平均值的差
				
						temp[i] = Math.pow(dev, 2); //计算差的平方
					}
					let powSum = arrSum(temp); //差的平方和
					let standardDeviation = parseFloat(Math.sqrt(powSum / length).toFixed(2)); //标准差
					return standardDeviation
				}
				this.mainExamUndulate = standardDeviation(mainArr)
				this.quizExamUndulate = standardDeviation(quizArr)
			},
			
		}
	}
</script>

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