MiniPrograms/gradepkg/subject-chart/subject-chart.vue

<template>
	<view class="page-box">
		<back text="优劣科目"></back>

		<view class="children-box">
			<image class="children-avatar" :src="childreninfo.avatar"></image>
			<view class="children-msg">
				<view class="children-name">{{childreninfo.name}}</view>
				<view class="children-class">{{childreninfo.class}}</view>
			</view>
		</view>
		<!-- 数据分析模块 -->
		<view class="data-box">
			<view class="data-box-item" v-for="(item,index) in analysisData" :key="index" :style="{background: item.color}">
				<view class="item-text">{{item.title}} {{item.data.name}}</view>
				
					<view style="display: flex;align-items: baseline;">
						<view class="item-text" style="font-size: 50rpx;">{{item.data.value}}%</view>
						<view class="item-text" style="margin-left: 0;">得分率</view>
					</view>
				
				<view class="module-item-box">
					<view :class="item.data.value>=40?(item.data.value>=70?'t-icon t-icon-a-bianzu6':'t-icon t-icon-a-bianzu7'): 't-icon t-icon-a-bianzu8'"></view>
				</view>
			</view>
		</view>

		<!-- 图表列表 -->
		<!-- 单次考试 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="start-tag"></view>
				<text class="chart-name-text">最近考试科目得分率分析</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.recentAdvantage" :loadingType="4"
					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
			</view>
		</view>
		<!-- 学期平均 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="start-tag"></view>
				<text class="chart-name-text">{{semester}} 科目得分率平均值分析</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.semesterAdvantage" :loadingType="4"
					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
			</view>
		</view>
		


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['childreninfo', 'semester']),
			...mapState('m_chart', ['gradeData'])
		},

		data() {
			return {
				//分析模块数据
				analysisData: 
				[{
					title: '学期优势科:',
					data: '',
					color: '#4169E1'
				},{
					title: '学期劣势科:',
					data: '',
					color: '#ff8caf',
				}]
			};
		},
		onLoad() {
			this.getGradeDetail()
		},
		methods: {
			getGradeDetail() {
				//获取成绩最好科目
				this.analysisData[0].data = this.gradeData.advantageRoseChart.semesterAdvantage.series[0].data.reduce((pre, cur) =>
					pre.value > cur.value ? pre :
					cur)
				//劣势科目
				this.analysisData[1].data = this.gradeData.advantageRoseChart.semesterAdvantage.series[0].data.reduce((pre, cur) =>
					pre.value < cur.value ? pre :
					cur)
			}
		}

	}
</script>

<style lang="scss">
	@import '@/gradepkg/common/chartpage.scss';
</style>