MiniPrograms/pages/tab_exam/tab_exam.vue

<template>
	<view class="page_view">
		<!-- 统计 -->
		<view class="bg1">
			<view class="circle_line1"></view>
			<view class="circle_line2"></view>
			<view class="circle_line3"></view>
			<top-info :timeStamp="timeStamp"></top-info>
			<scroll-view class="scroll_view" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
				<view class="view_box">
					<view class="scroll_view_item" v-for="(item,index) in cardList" :key="index"
						@click="navGradeList(index)">
						<view class="card_info">
							<view :class="item.icon"></view>
							<view class="title">{{item.title}}</view>
						</view>
						<view class="chart_box">
							<qiun-data-charts :type="item.type" :chartData="item.data" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 统计卡片 -->
		<view class="card_view">
			<view class="total_card">
				<view class="flex_cloumn" style="justify-content: space-around;margin: 20rpx 0 20rpx 20rpx;">
					<view class="flex_baseline">
						<text class="_title">今日评测</text>
						<text class="_title" style="margin-left: 20rpx;">{{examData.length}}</text>
						<text class="_unit">例</text>
					</view>
					<view class="flex_baseline">
						<text class="_subtitle">已完成</text>
						<text class="_subtitle" style="margin-left: 20rpx;">{{finishData.length}}</text>
						<text class="_unit">例</text>
					</view>
					<view class="flex_baseline">
						<text class="_subtitle">完成情况</text>
						<text class="_subtitle" style="margin-left: 20rpx;font-weight: bold;">{{performance}}</text>
					</view>
				</view>
				<view class="image" :style="{backgroundImage:`url(${image})`}"></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: 0 0 0 auto;" @click="navExamList">
						<view class="t-icon t-icon-fenlei"></view>
						<view class="title" style="color: #4169E1;margin-left: 10rpx;">评测列表</view>
					</view>
				</view>
				<view class="class_list">
					<view class="class_item" :style="{borderImage: item.examInfo.progress === 'finish'?none:'linear-gradient(to right, #ff8caf, #FFF) 1'}" v-for="(item,index) in examData" :key="index" @click="navExamData(index)">
						<view class="flex_row" style="margin: 0 20rpx;">
							<view class="t-icon t-icon-examicon" style="width: 60rpx; height: 60rpx;"></view>
							<view class="flex_cloumn" style="height:92rpx;justify-content: space-between;">
								<view class="flex_row" style="margin-left: 20rpx;">
									<view class="class_item_title">{{item.examInfo.name}}</view>
								</view>
								<view class="flex_row">
									<view class="tag_fill">
										<view class="tag_text">{{item.examInfo.subjects[0].name}}</view>
									</view>
									<view class="tag_fill">
										<view class="tag_text">{{item.examInfo.examType.name}}</view>
									</view>
									<view class="tag_fill"
										:style="{backgroundColor: item.examInfo.progress === 'finish'? '#23b46c':'#ff5959'}">
										<view class="tag_text">{{item.examInfo.progress === 'finish' ? '已完成' : '进行中'}}
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flex_cloumn" style="margin: 15rpx 0 10rpx 20rpx;">
				<view class="title" style="font-size: 32rpx;">评测练习</view>
				<view class="bottom_tag"></view>
			</view>
			
			<view class="flex_row" style="width: 70%;"></view>
		</view>
		<scroll-view class="scroll_view_bottom" scroll-x="true" :scroll-with-animation="true" scroll-left="0">
			<view class="_item"></view>
			<view class="_item"></view>
			<view class="_item"></view>
			<view class="_item"></view>
			<view class="_item"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_chart', ['examChartData']),
			...mapState('m_children', ['examData'])
		},
		data() {
			return {
				cardList: [{
					icon: 't-icon t-icon-zoushi',
					title: '总成绩走势',
					type: 'mini-area',
					data: ''
				}, {
					icon: 't-icon t-icon-shuju',
					title: '单次考试分析',
					type: 'mini-column',
					data: ''
				}, {
					icon: 't-icon t-icon-jiangzhang',
					title: '排行占比分析',
					type: 'mini-area',
					data: ''
				}, {
					icon: 't-icon t-icon-yingyong',
					title: '优劣科目分析',
					type: 'mini-rose',
					data: ''
				}, {
					icon: 't-icon t-icon-yunwei',
					title: '考试能力分析',
					type: 'mini-column',
					data: ''
				}],
				image: 'https://ouch-cdn2.icons8.com/yFl5NWU3aVehLBlQf9ctvnZPqtm5U0hqM3IzWvFDCaQ/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNzY5/LzY1ZTQxZmZjLTg1/YWQtNDYyMi1hYzU0/LWQ3NDEzZmY2NGI1/YS5wbmc.png',
				//完成情况
				performance: '',
				//完成数据
				finishData: '',
				timeStamp: ''
			};
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//初始化
			init() {
				this.timeStamp = (new Date()).format("hh:mm")
				this.$initExam()
				this.getChartData()
				this.getPerformance()
			},
			//初始化cardList数据
			getChartData() {
				this.cardList[0].data = this.examChartData.totalChartData[0]
				this.cardList[1].data = this.examChartData.singleChartData[0]
				this.cardList[2].data = this.examChartData.rankingChartData[0]
				this.cardList[3].data = this.examChartData.subjectChartData[0]
				this.cardList[4].data = this.examChartData.levelChartData[0]
			},
			//获得评判信息
			getPerformance() {
				if(this.examData.length != 0){
					this.finishData = this.examData.filter(x => x.examInfo.progress === 'finish')
					this.performance = this.finishData.length / this.examData.length >= 0.4 ?
						(this.finishData.length / this.examData.length >= 0.7 ? '优秀' : '良好') : '较差'
				}else{
					this.finishData = []
					this.performance = '无评测'
				}

			},
			//导航
			navGradeList(index) {
				if (index === 0) {
					uni.navigateTo({
						url: '/subpkg/gradelist/total'
					})
				}
				if (index === 1) {
					uni.navigateTo({
						url: '/subpkg/gradelist/single'
					})
				}
				if (index === 2) {
					uni.navigateTo({
						url: '/subpkg/gradelist/ranking'
					})
				}
				if (index === 3) {
					uni.navigateTo({
						url: '/subpkg/gradelist/subject'
					})
				}
				if (index === 4) {
					uni.navigateTo({
						url: '/subpkg/gradelist/level'
					})
				}
			},
			navExamList() {
				let value = this.performance
				uni.navigateTo({
					url: `/subpkg/datalist/examlist?value=${value}`
				})
			},
			navExamData(index){
				uni.navigateTo({
					url: `/subpkg/datalist/examdata?index=${index}`
				})
			}
		}
	}
</script>

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

	.bg1 {
		background-color: $color-pink;
	}

	.tag_fill {
		background-color: $color-pink;
		margin-left: 20rpx;
	}
	.circle_line1 {
		background-image: linear-gradient(to right, #ff8caf, #ff8caf), linear-gradient(90deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}
	.circle_line2 {
		background-image: linear-gradient(to right, #ff8caf, #ff8caf), linear-gradient(180deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}
	.circle_line3 {
		background-image: linear-gradient(to right, #ff8caf, #ff8caf), linear-gradient(0deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}
</style>