MiniPrograms/pages/tab_swap/tab_swap.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="navSwapStats">
						<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" :opts="{legend:{show: false}}" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 统计卡片 -->
		<view class="card_view">
			<view class="total_card" style="background-color:#FF6D31">
				<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;">{{swapData.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;">{{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="navSwapList" v-if="swapData.length != 0">
						<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: none}" v-for="(item,index) in swapData" :key="index" @click="navSwapData(index)" v-if="swapData.length != 0">
						<view class="flex_row" style="margin: 0 20rpx;">
							<view class="t-icon t-icon-swapfont" style="width: 60rpx; height: 60rpx;"></view>
							<view class="flex_cloumn">
								<view class="flex_row">
									<view class="class_item_title">{{item.survey.name || item.vote.name}}</view>
									<view class="tag_fill" style="background-color: #FF6D31;">
										<view class="tag_text">
											{{item.survey.scope === 'private' ? '个人':'学校' || item.vote.scope === 'private' ? '个人':'学校'}}
										</view>
									</view>
									<view class="tag_fill"
										:style="{backgroundColor: item.survey.progress === 'finish' || item.vote.progress === 'finish'? '#23b46c':'#ff5959'}">
										<view class="tag_text">
											{{item.survey.progress === 'finish' || item.vote.progress === 'finish' ? '已完成' : '进行中'}}
										</view>
									</view>
								</view>
								<view class="flex_row"
									style="width:510rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">
									<view class="class_item_subtitle" style="font-size: 26rpx;font-weight: 400;">
										{{item.vote.description || item.survey.description}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="image_box" v-if="swapData.length === 0">
						<view class="detail_image_none" :style="{backgroundImage:`url(${image1})`}"></view>
						<view class="subtitle">今日暂无投票问卷活动</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 class="_item_inner"></view>
			</view>
			<view class="_item"></view>
			<view class="_item"></view>
			<view class="_item"></view>
			<view class="_item"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_children', ['swapData']),
			...mapState('m_parent', ['childDailyData'])
		},
		data() {
			return {
				//图表卡片列表
				cardList: [{
					icon: 't-icon t-icon-zoushi1',
					title: '近期学习对比',
					type: 'mini-column',
					data: '',
				}, {
					icon: 't-icon t-icon-lishijilu',
					title: '近期运动记录',
					type: 'pie',
					data: '',
				}, {
					icon: 't-icon t-icon-naozhong',
					title: '近期睡眠记录',
					type: 'ring',
					data: '',
				}],
				image: 'https://ouch-cdn2.icons8.com/LW70TMgW1cGfYeGNSTEp7__kiKVgIhwdZwUmykdLYMY/rs:fit:912:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvOTI0/LzU3MWU4ZDZkLTg0/NzEtNGM5YS04MDJk/LTEzNTM5YmZmZTM2/YS5wbmc.png',
				//完成情况
				performance: '',
				//完成数据
				finishData: '',
				finishRate: '',
				timeStamp: '',
				image1: 'https://image.meiye.art/pic_1631411820764Vm5iw82gnV2lVKWRokFmU'
			};
		},
		onLoad() {
			this.init()
		},
		//刷新页面
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			...mapMutations('m_chart', ['updateSwapChartData']),
			//初始化
			init() {
				this.timeStamp = (new Date()).format("hh:mm")
				this.getPerformance()
				this.$initSwap()
				this.getSwapChartData()
			},
			//获得统计图表信息
			getSwapChartData() {
				let recentDate = this.$getRecentDateArray(this.childDailyData.study.length);
				let swapChartData = [];
				let studyColumn = {
					categories: recentDate,
					series: [{
							name: '自主学习',
							data: this.childDailyData.study
						},
						{
							name: '娱乐放松',
							data: this.childDailyData.rest
						}
					]
				};
				//运动记录表
				let exercisePie = {
					series: [{
						data: [{}, {}, {}, {}, {}, {}, {}]
					}]
				};
				//睡眠记录表
				let sleepRing = {
					series: [{
						data: [{}, {}, {}, {}, {}, {}, {}]
					}]
				};
				studyColumn.categories.forEach((value, index) => {
					exercisePie.series[0].data[index].name = value;
					exercisePie.series[0].data[index].value = parseFloat((this.childDailyData.exercise[index]));
					sleepRing.series[0].data[index].name = value;
					sleepRing.series[0].data[index].value = this.childDailyData.sleep[index];
				});
				swapChartData.push(studyColumn);
				swapChartData.push(exercisePie);
				swapChartData.push(sleepRing);
				this.updateSwapChartData(swapChartData)
				this.cardList[0].data = studyColumn
				this.cardList[1].data = exercisePie
				this.cardList[2].data = sleepRing
			},
			//获得评判信息
			getPerformance() {
				if (this.swapData.length != 0) {
					this.finishData = this.swapData.filter(x => x.vote && x.vote.progress === 'finish')
					this.finishData.push(...this.swapData.filter(x => x.survey && x.survey.progress === 'finish'))
					this.finishRate = (this.finishData.length * 100 / this.swapData.length).toFixed(0)
					this.performance = this.finishData.length / this.swapData.length >= 0.4 ?
						(this.finishData.length / this.swapData.length >= 0.7 ? '优秀' : '良好') : '较差'
				} else {
					this.finishData = []
					this.finishRate = 0
					this.performance = '无活动'
				}
			},
			navSwapStats() {
				uni.navigateTo({
					url: '/subpkg/swap/swapstats'
				})
			},
			navSwapList() {
				let value = this.finishRate
				uni.navigateTo({
					url: `/subpkg/datalist/swaplist?value=${value}`
				})
			},
			navSwapData(index) {
				uni.navigateTo({
					url: `/subpkg/datalist/swapdata?index=${index}`
				})
			}
		}
	}
</script>

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

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

	.flex_row {
		margin: 5rpx 20rpx;
	}

	.tag_fill {
		background-color: $color-orange;
		margin-left: 20rpx;
	}
	.circle_line1 {
		background-image: linear-gradient(to right, #FF6D31, #FF6D31), linear-gradient(90deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}
	.circle_line2 {
		background-image: linear-gradient(to right, #FF6D31, #FF6D31), linear-gradient(180deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}
	.circle_line3 {
		background-image: linear-gradient(to right, #FF6D31, #FF6D31), linear-gradient(0deg, #FFF -50%, rgba(255, 255, 255, 0.0));
	}
	._item{
		background-color: #ccc;
		background-image: radial-gradient(#fff 50%, transparent 50%);
		background-position: -5px -5px;
		background-repeat: repeat;
		background-size: 10px 10px;
		padding: 5px;
		._item_inner{
			background-color: #ccc;
		}
	}
</style>