MiniPrograms/subpkg/gradelist/total.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">{{analysisData[0].title}}</view>

					<view class="flex_baseline">
						<view class="analysis_data" style="font-size: 44rpx;">{{totalSemAvg}}</view>
						<view class="analysis_text" style="margin-right: 20rpx;font-size: 26rpx;">分</view>
						<view class="analysis_text" style="font-size: 26rpx;" v-if="analysisData[0].data != 'btm'">超过
						</view>
						<view class="analysis_text" style="font-size: 26rpx;" v-if="analysisData[0].data === 'btm'">未超过
						</view>
					</view>

					<view class="flex_baseline">
						<view class="analysis_text">
							{{analysisData[0].data === 'top' ? '班级和年级学期平均':(analysisData[0].data === 'midClass'? '班级学期平均分':(analysisData[0].data === 'midGrade'?'年级学期平均分':'班级和年级学期平均'))}}
						</view>
					</view>
				</view>
				<view class="icon_box">
					<view v-if="analysisData[0].data==='top'" class="t-icon t-icon-a-bianzu6"></view>
					<view v-if="analysisData[0].data==='midGrade'||analysisData[0].data === 'midClass'"
						class="t-icon t-icon-a-bianzu7">
					</view>
					<view v-if="analysisData[0].data==='btm'" class="t-icon t-icon-a-bianzu8"></view>
				</view>
			</view>

			<view class="card_item" style="background-color: #ff8caf;height: 200rpx;">
				<view class="analysis_box">
					<view class="analysis_text">{{analysisData[1].title}}</view>

					<view class="flex_baseline">
						<view class="analysis_data" style="font-size: 44rpx;">{{singleSemAvg}}</view>
						<view class="analysis_text" style="margin-right: 20rpx;font-size: 26rpx;">分</view>
						<view class="analysis_text" style="font-size: 26rpx;" v-if="analysisData[1].data != 'btm'">超过
						</view>
						<view class="analysis_text" style="font-size: 26rpx;" v-if="analysisData[1].data === 'btm'">未超过
						</view>
					</view>

					<view class="flex_baseline">
						<view class="analysis_text">
							{{analysisData[1].data === 'top' ? '班级和年级学期平均':(analysisData[1].data === 'midClass'? '班级学期平均分':(analysisData[1].data === 'midGrade'?'年级学期平均分':'班级和年级学期平均'))}}
						</view>
					</view>
				</view>
				<view class="icon_box">
					<view v-if="analysisData[1].data==='top'" class="t-icon t-icon-a-bianzu6"></view>
					<view v-if="analysisData[1].data==='midGrade'||analysisData[1].data === 'midClass'"
						class="t-icon t-icon-a-bianzu7">
					</view>
					<view v-if="analysisData[1].data==='btm'" class="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 class="t-icon t-icon-tishi2" style="margin-left: auto;" @click="isShowHint = true"></view>
				</view>
				<view class="chart_box">
					<qiun-data-charts type="area" ontouch="true" :chartData="examChartData.totalChartData[0]"
						tooltipFormat='tooltipScore' :canvas2d="true" canvasId="total_chart1" />
				</view>
			</view>
			<!-- 单科与平均对比 -->
			<view class="card_item" style="width: 100%;">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">单科成绩趋势</view>
					<view class="flex_row" style="margin-left: auto;" @click="subjectPicker = true">
						<text class="title" style="color: #4169E1;font-weight: 400;">{{subjectCurrent}}</text>
						<view class="t-icon t-icon-xia"></view>
					</view>
				</view>
				<view class="chart_box">
					<qiun-data-charts type="area" ontouch="true" :chartData="examChartData.totalChartData[1]"
						tooltipFormat='tooltipScore' :canvas2d="true" canvasId="total_chart2" />
				</view>
			</view>
			<!-- 个人单科对比 -->
			<view class="card_item" style="width: 100%;">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">单科对比趋势</view>
					<view class="flex_row" style="margin-left: auto;" @click="scoreTypePicker = true">
						<text class="title" style="color: #4169E1;font-weight: 400;">{{scoreTypeCurrent}}</text>
						<view class="t-icon t-icon-xia"></view>
					</view>
				</view>
				<view class="chart_box" v-if="scoreTypeCurrent === '得分'">
					<qiun-data-charts type="line" ontouch="true" :chartData="examChartData.totalChartData[2]"
						tooltipFormat='tooltipScore' :canvas2d="true" canvasId="total_chart3" />
				</view>
				<view class="chart_box" v-if="scoreTypeCurrent === '得分率'">
					<qiun-data-charts type="line" ontouch="true" :chartData="examChartData.totalChartData[2]"
						tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="total_chart4" />
				</view>
			</view>
		</view>
		<!-- 选择器 -->
		<!-- 科目选择 -->
		<u-picker :show="subjectPicker" :columns="subjectList" @confirm="subjectConfirm" @cancel="cancel" />
		<!-- 模式选择 -->
		<u-picker :show="scoreTypePicker" :columns="scoreTypeList" @confirm="scoreTypeConfirm" @cancel="cancel" />
		<!-- 模态框 -->
		<u-modal :content="content" title="数据图表的基础使用" :show="isShowHint" :zoom="false"
			@confirm="() => isShowHint = false"></u-modal>

	</view>
</template>

<script>
	import MockData from '@/common/global_js/MockData.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_chart', ['examChartData', 'subjectExamData']),
		},
		watch: {
			subjectCurrent: {
				handler(newValue) {
					let subjectChartData = this.mockData.find(x => x.series[0].name.includes(newValue))
					let temp = this.examChartData
					temp.totalChartData[1] = subjectChartData
					this.updateExamChartData(temp)
					this.chooseAnalysisSubject()
				},
				immediate: false
			},
		},
		data() {
			return {
				mockData: MockData.subjectData,
				//选择器显示
				subjectPicker: false,
				scoreTypePicker: false,
				//选择器内容
				subjectList: '',
				scoreTypeList: [
					['得分', '得分率']
				],
				//当前选中
				subjectCurrent: '',
				scoreTypeCurrent: '',
				//分析模块数据
				analysisData: [{
					title: '学期平均总得分',
					data: '',
					color: '#4169E1',
				}, {
					title: '学期平均分',
					data: '',
					color: '#ff8caf',
				}],
				//学期平均总得分
				totalSemAvg: '',
				//单科学期平均得分
				singleSemAvg: '',
				isShowHint: false,
				content: '点击图表展示详细内容\n点击上方数据名可以隐藏或显示数据\n信息过多可以试试左右滑动查看'
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			...mapMutations('m_chart', ['updateExamChartData']),
			init() {
				this.setChartOptions()
				this.getAnalysisData()
			},
			//获得分析数据
			getAnalysisData() {
				function arrSum(array) {
					let cont = 0
					for (let i = 0; i < array.length; i++) {
						cont += array[i]
					}
					return cont;
				}
				let totalSemAvg = parseInt((arrSum(this.examChartData.totalChartData[0].series[0].data) / this
					.examChartData.totalChartData[0].series[0].data.length).toFixed(0))
				this.totalSemAvg = totalSemAvg
				let classSemAvg = parseInt((arrSum(this.examChartData.totalChartData[0].series[1].data) / this
					.examChartData.totalChartData[0].series[1].data.length).toFixed(0))
				console.log('班级平均总分', classSemAvg);
				let gradeSemAvg = parseInt((arrSum(this.examChartData.totalChartData[0].series[2].data) / this
					.examChartData.totalChartData[0].series[2].data.length).toFixed(0))
				console.log('年级平均总分', gradeSemAvg);
				if (totalSemAvg > classSemAvg && totalSemAvg > gradeSemAvg) {
					this.analysisData[0].data = 'top'
				} else if (totalSemAvg > classSemAvg && totalSemAvg >= gradeSemAvg) {
					this.analysisData[0].data = 'midClass'
				} else if (totalSemAvg > gradeSemAvg && totalSemAvg >= classSemAvg) {
					this.analysisData[0].data = 'midGrade'
				} else {
					this.analysisData[0].data = 'btm'
				}
			},
			chooseAnalysisSubject() {
				function arrSum(array) {
					let cont = 0
					for (let i = 0; i < array.length; i++) {
						cont += array[i]
					}
					return cont;
				}
				this.analysisData[1].title = this.subjectCurrent + '学期平均分'
				console.log(this.examChartData.totalChartData[1]);
				let singleSemAvg = parseInt((arrSum(this.examChartData.totalChartData[1].series[0].data) / this
					.examChartData.totalChartData[1].series[0].data.length).toFixed(0))
				this.singleSemAvg = singleSemAvg
				let classSemSinAvg = parseInt((arrSum(this.examChartData.totalChartData[1].series[1].data) / this
					.examChartData.totalChartData[1].series[1].data.length).toFixed(0))
				console.log('班级平均单科总分', classSemSinAvg);
				let gradeSemSinAvg = parseInt((arrSum(this.examChartData.totalChartData[1].series[2].data) / this
					.examChartData.totalChartData[1].series[2].data.length).toFixed(0))
				console.log('年级平均单科总分', gradeSemSinAvg);
				if (singleSemAvg > classSemSinAvg && singleSemAvg > gradeSemSinAvg) {
					this.analysisData[1].data = 'top'
				} else if (singleSemAvg > classSemSinAvg && singleSemAvg >= gradeSemSinAvg) {
					this.analysisData[1].data = 'midClass'
				} else if (singleSemAvg > gradeSemSinAvg && singleSemAvg >= classSemSinAvg) {
					this.analysisData[1].data = 'midGrade'
				} else {
					this.analysisData[1].data = 'btm'
				}
			},
			//初始化选择器内容(图表配置)
			setChartOptions() {
				if (this.scoreTypeCurrent === '')
					this.scoreTypeCurrent = this.scoreTypeList[0][0]
				if (this.subjectList === '') {
					let arr = []
					arr.push(this.subjectExamData.subjectList)
					this.subjectList = arr
					this.subjectCurrent = this.subjectList[0][0]
				} else {
					this.subjectCurrent = this.subjectList[0][0]
				}
			},
			//切换科目
			subjectConfirm(e) {
				this.subjectCurrent = e.value[0]
				this.subjectPicker = false
			},
			//切换模式
			scoreTypeConfirm(e) {
				this.scoreTypeCurrent = e.value[0]
				this.scoreTypePicker = false
			},
			cancel() {
				this.subjectPicker = false
				this.scoreTypePicker = false
			}
		}
	}
</script>

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