MiniPrograms/subpkg/statslist/swapstats.vue

<template>
	<view class="page_view">
		<top-return color="#FFF" text="日常记录"></top-return>
		<!-- 背景 -->
		<view class="bg_box"></view>
		<!-- 页面标题内容 -->
		<view class="flex_cloumn">
			<view class="flex_baseline">
				<view class="content_title" style="font-size: 60rpx;">{{dayTime.split('月')[0]}}</view>
				<view class="content_title" style="margin-left: 10rpx;">月</view>
				<view class="content_title" style="font-size: 60rpx; margin-left: 10rpx;">{{dayTime.split('月')[1]}}
				</view>
				<view class="content_title" style="margin-left: 10rpx;">日</view>
				<view class="content_title" style="font-size: 60rpx;margin-left: 20rpx;">{{weekTime}}</view>
			</view>
			<view class="flex_baseline">
				<view class="content_subtitle" style="opacity: 0.8;">记录今日孩子表现吧</view>
			</view>
		</view>
		<!-- 记录模块 -->
		<view class="module_box" style="margin-top: 20rpx;">
			<view class="_item" v-for="(item,index) in moduleData" :key="index" :style="item.color"
				@click="setTime(index)">
				<view class="_item_subtext" style="margin-left: 30rpx;">{{item.text}}</view>

				<view class="flex_baseline" style="margin-left: 30rpx;" v-if="item.numData === ''">
					<text class="_item_text" style="transform: skew(-15deg);">记录</text>
					<text class="_item_subtext" style="margin-left: 10rpx;opacity:0.8;">今日时长</text>
				</view>
				<view class="flex_baseline" style="margin-left: 30rpx;"
					v-if="item.numData.includes('小时') && item.numData != ''">
					<text class="_item_text" style="transform: skew(-15deg);">{{item.numData.split('小时')[0]}}</text>
					<text class="_item_subtext" style="margin-left: 10rpx;opacity:0.8;">小时</text>
					<text class="_item_text"
						style="margin-left: 10rpx;transform: skew(-15deg);">{{item.numData.split('小时')[1].replace('分','')}}</text>
					<text class="_item_subtext" style="margin-left: 10rpx;opacity:0.8;">分钟</text>
				</view>
				<view class="flex_baseline" style="margin-left: 30rpx;"
					v-if="item.numData.includes('小时') === false && item.numData != ''">
					<text class="_item_text"
						style="margin-left: 10rpx;transform: skew(-15deg);">{{item.numData.replace('分','')}}</text>
					<text class="_item_subtext" style="margin-left: 10rpx;opacity:0.8;">分钟</text>
				</view>
				<view :class="item.icon"></view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-picker :show="setTimePicker" :columns="pickerList" @confirm="pickerConfirm" @cancel="cancel">
		</u-picker>
		<!-- 统计列表 -->
		<view class="card_view" style="margin-top: 0;">
			<!-- 统计列表 -->
			<view class="flex_cloumn_box" style="margin-left: 20rpx;">
				<view class="title" style="font-size: 32rpx;">近期统计</view>
				<view class="bottom_tag"
					style="background-image: linear-gradient(to right, #4169E1, rgba(255, 255, 255, 0.01));"></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="swapChartData[0]"
						tooltipFormat='tooltipHourColum' :canvas2d="true" canvasId="swap_chart1" />
				</view>
			</view>
			<!-- 单科与平均对比 -->
			<view class="card_item">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">近期运动记录</view>
				</view>
				<view class="chart_box" style="height: 350rpx;">
					<qiun-data-charts type="pie" :chartData="swapChartData[1]" tooltipFormat='pieMinute'
						:canvas2d="true" canvasId="swap_chart2" />
				</view>
			</view>
			<view class="card_item">
				<view class="card_title">
					<view class="front_tag"></view>
					<view class="title">近期睡眠记录</view>
				</view>
				<view class="chart_box" style="height: 350rpx;">
					<qiun-data-charts type="ring" :chartData="swapChartData[2]" tooltipFormat='pieHour' :canvas2d="true"
						canvasId="swap_chart3" :opts="ringOpts" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_chart', ['swapChartData'])
		},
		data() {
			return {
				//记录卡片
				moduleData: [{
						text: '学习时长',
						color: 'background-color: #4169E1;',
						icon: 't-icon t-icon-bianjibi',
						numData: '',
					},
					{
						text: '娱乐时长',
						color: 'background-color: #ff5959;',
						icon: 't-icon t-icon-leimucuyule',
						numData: '',
					},
					{
						text: '运动时长',
						color: 'background-color: #ff8caf;',
						icon: 't-icon t-icon-yundong',
						numData: '',
					},
					{
						text: '睡眠时长',
						color: 'background-color: #f9c752;',
						icon: 't-icon t-icon-a-icon_wananyueliangshuimian',
						numData: '',
					}
				],
				//标题配置
				ringOpts: {},
				//当前记录卡片
				cardCurrent: 5,
				//选择器
				setTimePicker: false,
				//时间表
				pickerList: [
					['0小时', '1小时', '2小时', '3小时', '4小时', '5小时', '6小时', '7小时', '8小时', '9小时', '10小时'],
					['5分', '10分', '15分', '20分', '25分', '30分', '35分', '40分', '45分', '50分', '55分']
				],
				//历史数据
				dayTime: '',
				weekTime: '',
				//是否重新记录
				setTimeRecord: false
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			...mapMutations('m_chart', ['updateSwapChartData']),
			init() {
				this.getToday()
				this.getData()
				this.getRingOpts()
			},
			getToday() {
				this.dayTime = (new Date()).format('M-d').replace('-', '月')
				this.weekTime = "星期" + "日一二三四五六".charAt(new Date().getDay());
			},
			//记录信息初始化
			getData() {
				if (uni.getStorageSync('moduleData'))
					this.moduleData = JSON.parse(uni.getStorageSync('moduleData'));
				if (uni.getStorageSync('historyData')) {
					this.historyData = JSON.parse(uni.getStorageSync('historyData'));
					this.saveToStudyChart()
				}
			},
			getRingOpts() {
				let sleepData = ''
				if (uni.getStorageSync('historyData')) {
					sleepData = JSON.parse(uni.getStorageSync('historyData')).sleep;
					let sum = 0
					for (let i = 0; i < sleepData.length; i++) {
						sum += sleepData[i]
					}
					let sleepAvg = (sum/sleepData.length).toFixed(1)
					let opt = {
						title: {
							name: '平均睡眠',
							color: '#909399'
						},
						subtitle: {
							name: sleepAvg + ' 小时',
							color: '#4169E1'
						},
					}
					this.ringOpts = opt
				}
			},
			//点击卡片唤起picker
			setTime(index) {
				if (this.moduleData[index].numData === '') {
					this.cardCurrent = index
					this.setTimePicker = true
				}
				if (this.moduleData[index].numData != '') {
					let that = this;
					uni.showModal({
						title: `今日${that.moduleData[index].text}已记录`,
						content: '需要重新记录吗?',
						success: function(res) {
							if (res.confirm) {
								that.cardCurrent = index
								that.setTimePicker = true
								that.setTimeRecord = true
							} else if (res.cancel) {
								console.log('取消记录');
							}
						}
					})
				}
			},
			//记录数据
			pickerConfirm(e) {
				if (this.setTimeRecord) {
					if (e.value[0] === '0小时') {
						this.moduleData[this.cardCurrent].numData = e.value[1]
					} else {
						this.moduleData[this.cardCurrent].numData = e.value[0] + e.value[1]
					}
					//转换为数据记录到图表中
					if (this.moduleData[this.cardCurrent].numData.includes('小时') === false) {
						let timeData = parseFloat((parseInt(this.moduleData[this.cardCurrent].numData.replace('分', '')) /
								60)
							.toFixed(1))
						switch (this.cardCurrent) {
							case 0:
								this.historyData.study[6] = timeData
								break
							case 1:
								this.historyData.rest[6] = timeData
								break
							case 2:
								let numExercise = parseInt(this.moduleData[this.cardCurrent].numData.replace('分', ''))
								this.historyData.exercise[6] = numExercise
								break
							case 3:
								this.historyData.sleep[6] = timeData
								break
						}
						uni.setStorageSync('moduleData', JSON.stringify(this.moduleData))
						uni.setStorageSync('historyData', JSON.stringify(this.historyData))
						this.saveToStudyChart()
					} else {
						let timeTemp = this.moduleData[this.cardCurrent].numData.replace('小时', '.').replace('分', '').split(
							'.')
						let timeData = parseInt(timeTemp[0]) + parseFloat((timeTemp[1] / 60).toFixed(1))
						switch (this.cardCurrent) {
							case 0:
								this.historyData.study[6] = timeData
								break
							case 1:
								this.historyData.rest[6] = timeData
								break
							case 2:
								let numExerciseData = parseInt(timeTemp[0] * 60) + parseFloat((timeTemp[1]))
								this.historyData.exercise[6] = numExerciseData
								break
							case 3:
								this.historyData.sleep[6] = timeData
								break
						}
						uni.setStorageSync('moduleData', JSON.stringify(this.moduleData))
						uni.setStorageSync('historyData', JSON.stringify(this.historyData))
						// 记录到图表
						this.saveToStudyChart()
					}
					this.setTimePicker = false
					this.setTimeRecord = false
				} else {
					if (e.value[0] === '0小时') {
						this.moduleData[this.cardCurrent].numData = e.value[1]
					} else {
						this.moduleData[this.cardCurrent].numData = e.value[0] + e.value[1]
					}
					//转换为数据记录到图表中
					if (this.moduleData[this.cardCurrent].numData.includes('小时') === false) {
						let timeData = parseFloat((parseInt(this.moduleData[this.cardCurrent].numData.replace('分', '')) /
								60)
							.toFixed(1))
						switch (this.cardCurrent) {
							case 0:
								this.historyData.study.push(timeData)
								this.historyData.study.shift()
								break
							case 1:
								this.historyData.rest.push(timeData)
								this.historyData.rest.shift()
								break
							case 2:
								let numExercise = parseInt(this.moduleData[this.cardCurrent].numData.replace('分', ''))
								this.historyData.exercise.push(numExercise)
								this.historyData.exercise.shift()
								break
							case 3:
								this.historyData.sleep.push(timeData)
								this.historyData.sleep.shift()
								break
						}
						uni.setStorageSync('moduleData', JSON.stringify(this.moduleData))
						uni.setStorageSync('historyData', JSON.stringify(this.historyData))
						this.saveToStudyChart()
					} else {
						let timeTemp = this.moduleData[this.cardCurrent].numData.replace('小时', '.').replace('分', '').split(
							'.')
						let timeData = parseInt(timeTemp[0]) + parseFloat((timeTemp[1] / 60).toFixed(1))
						switch (this.cardCurrent) {
							case 0:
								this.historyData.study.push(timeData)
								this.historyData.study.shift()
								break
							case 1:
								this.historyData.rest.push(timeData)
								this.historyData.rest.shift()
								break
							case 2:
								let numExerciseData = parseInt(timeTemp[0] * 60) + parseFloat((timeTemp[1]))
								this.historyData.exercise.push(numExerciseData)
								this.historyData.exercise.shift()
								break
							case 3:
								this.historyData.sleep.push(timeData)
								this.historyData.sleep.shift()
								break
						}
						uni.setStorageSync('moduleData', JSON.stringify(this.moduleData))
						uni.setStorageSync('historyData', JSON.stringify(this.historyData))
						// 记录到图表
						this.saveToStudyChart()
					}
					this.setTimePicker = false
				}
			},
			//取消
			cancel() {
				this.setTimePicker = false
			},
			//存储到图表
			saveToStudyChart() {
				let swapChartData = []
				let studyColumn = {
					categories: [],
					series: [{
							name: '自主学习',
							data: this.historyData.study
						},
						{
							name: '娱乐放松',
							data: this.historyData.rest
						}
					]
				}
				//时间
				studyColumn.categories = this.$getRecentDateArray(this.historyData.study.length)
				//学习记录表数据记录
				switch (this.cardCurrent) {
					case 0:
						studyColumn.series[0].data = this.historyData.study
						break
					case 1:
						studyColumn.series[1].data = this.historyData.rest
						break
				}
				//运动记录表
				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.historyData.exercise[index])
						.toFixed(1))
					sleepRing.series[0].data[index].name = value
					sleepRing.series[0].data[index].value = this.historyData.sleep[index]
				})
				swapChartData.push(studyColumn)
				swapChartData.push(exercisePie)
				swapChartData.push(sleepRing)
				this.updateSwapChartData(swapChartData)
				this.getRingOpts()
			},
		}
	}
</script>

<style lang="scss">
	.chart_box {
		width: 100%;
		height: 500rpx;
	}

	.flex_cloumn_box {
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		z-index: 55;
	}

	.flex_cloumn {
		margin: 140rpx 0 0 50rpx;
		height: 170rpx;
		justify-content: space-around;

		.content_title {
			font-size: 35rpx;
			font-weight: bold;
			transform: skew(-15deg);
			color: #FFF;
			z-index: 2;
		}

		.content_subtitle {
			font-size: 35rpx;
			color: #FFF;
			z-index: 2;
		}
	}

	.module_box {
		display: flex;
		flex-flow: row wrap;
		margin: 0 20rpx;
		justify-content: space-between;

		._item {
			margin: 2% 0;
			width: 48%;
			height: auto;
			display: flex;
			flex-direction: column;
			padding: 24rpx 0 20rpx 0;
			background-color: #FFF;
			border-radius: 20rpx;
			justify-content: space-between;
			overflow: hidden;
			z-index: 3;

			&_text {
				line-height: 80rpx;
				color: #FFF;
				font-size: 50rpx;
				font-weight: bold;
				z-index: 5;
			}

			&_subtext {
				line-height: 80rpx;
				color: #FFF;
				font-size: 30rpx;
				font-weight: bold;
				z-index: 5;
			}
		}

		.t-icon {
			width: 250rpx;
			height: 250rpx;
			margin: -250rpx 0 0 160rpx;
			z-index: 1;
		}
	}
</style>