MiniPrograms/components/interactive-box/interactive-box.vue

<template>
	<!-- 今日记录模块 -->
	<view class="module-container">
		<u-tabs :list="list" :current="current" @change="changeModule"
			:activeStyle="{color: '#4169E1',fontWeight: 'bold',transform: 'scale(1.08)',}"
			:inactiveStyle="{fontWeight: 'bold',transform: 'scale(1)'}" lineColor="#4169E1" lineWidth="60"></u-tabs>

		<!-- 记录模块 -->
		<view class="module-box" v-if="current == 0">
			<view class="module-item" v-for="(item,index) in moduleData" :key="index" :style="item.color"
				@click="setTime(index)">
				<view class="module-item-box">
					<text class="module-item-text">{{item.text}}</text>
					<view class="num-box">
						
						<view style="display: flex;align-items: baseline;" v-if="item.numData === '记录一下'">
							<text class="module-item-num">记录</text>
							<text class="module-item-num" style="font-size: 30rpx;opacity:0.8;margin-left: 6rpx">今日时长</text>
						</view>
						<view style="display: flex;align-items: baseline;" v-else>
							<text class="module-item-num">{{item.numData.split('小时')[0]}}</text>
							<text class="module-item-num" style="font-size: 30rpx;opacity:0.8;margin-left: 6rpx">小时</text>
							<text class="module-item-num" style="margin-left: 6rpx">{{item.numData.split('小时')[1].replace('分','')}}</text>
							<text class="module-item-num" style="font-size: 30rpx;opacity:0.8;margin-left: 6rpx">分钟</text>
						</view>
					</view>
					<view :class="item.icon"></view>
				</view>
			</view>
		</view>

		<!-- 记录表 -->
		<view class="module-box" v-if="current == 1">
			<view class="chart-item" style="width: 100%;">
				<view class="chart-info">
					<view class="t-icon t-icon-shuju1"></view>
					<text class="chart-info-text">近七天学习记录</text>
				</view>
				<view style=" width:100%; margin-top: -30rpx;">
					<qiun-data-charts type="column" :chartData="studyColumn" :loadingType="4"
						tooltipFormat='tooltipHourColum' :canvas2d="true" canvasId="canvasId9839618" />
				</view>
			</view>

			<view class="chart-item">
				<view class="chart-info">
					<view class="t-icon t-icon-tiyu"></view>
					<text class="chart-info-text">近七天运动</text>
				</view>
				<view class="chart-view">
					<qiun-data-charts type="pie" :chartData="exercisePie" :loadingType="4" tooltipFormat='pieMinute'
						:canvas2d="true" canvasId="canvasId91234111" />
				</view>
			</view>

			<view class="chart-item">
				<view class="chart-info">
					<view class="t-icon t-icon-yejian"></view>
					<text class="chart-info-text">近七天睡眠</text>
				</view>
				<view class="chart-view">
					<qiun-data-charts type="pie" :chartData="sleepRing" :loadingType="4" tooltipFormat='pieHour' :canvas2d="true" canvasId="canvasId6312231" />
				</view>
			</view>

			<view class="chart-item" style="width: 100%;">
				<view class="chart-info">
					<view class="t-icon t-icon-qingjiashenqing"></view>
					<text class="chart-info-text">运动睡眠对比</text>
				</view>
				<view style=" width:100%;margin-top: -30rpx;height: 420rpx;">
					<qiun-data-charts type="area" :chartData="exerciseSleepArea" :loadingType="4"
						tooltipFormat='sleepExerciseCom' :canvas2d="true" canvasId="canvasId983131231" />
				</view>
			</view>

		</view>
		<!-- 时间选择器 -->
		<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
			@cancel="pickerCancel" :closeOnClickOverlay="true" :immediateChange="true">
		</u-picker>
	</view>

</template>

<script>
	export default {
		name: "interactive-box",
		data() {
			return {
				//学习记录表
				studyColumn: {},
				//锻炼时间表
				exercisePie: {},
				//睡眠时间表
				sleepRing: {},
				//运动睡眠比
				exerciseSleepArea: {},
				//模块名
				list: [{
					name: '每日记录'
				}, {
					name: '记录分析'
				}],
				//当前模块
				current: 0,
				//记录卡片
				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: '记录一下',
					}
				],
				//当前记录卡片
				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分']
				],
				//历史数据
				historyData: {
					study: [2, 3, 2.5, 3, 2, 1, 3],
					rest: [1, 2, 0.5, 3, 0.5, 3.5, 2],
					exercise: [0.1, 0.2, 0.5, 0.3, 0.5, 1.5, 0.2],
					sleep: [8, 9, 8, 8.5, 7.8, 8, 7.6]
				},

			};
		},
		created() {
			this.saveToStudyChart()
		},
		methods: {
			//更改模块
			changeModule(index) {
				this.current = index.index
			},
			//点击卡片唤起picker
			setTime(index) {
				if (this.moduleData[index].numData === '记录一下') {
					this.cardCurrent = index
					this.setTimePicker = true
				} else {
					uni.$showMsg('今日已记录，明日再来吧')
				}

			},
			//记录数据
			pickerConfirm(e) {
				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.search('小时') == -1) {
					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('分', '')) / 60
							this.historyData.exercise.push(numExercise)
							this.historyData.exercise.shift()
							console.log(this.historyData.exercise);
							break
						case 3:
							this.historyData.sleep.push(timeData)
							this.historyData.sleep.shift()
							console.log(this.historyData.sleep);
							break
					}
					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:
							this.historyData.exercise.push(timeData)
							this.historyData.exercise.shift()
							console.log(this.historyData.exercise);
							break
						case 3:
							this.historyData.sleep.push(timeData)
							this.historyData.sleep.shift()
							console.log(this.historyData.sleep);
							break
					}
					this.saveToStudyChart()
				}
				uni.$showMsg('记录完成', 1000)
				this.setTimePicker = false
			},
			//取消
			pickerCancel() {
				uni.$showMsg('取消选择', 1000)
				this.setTimePicker = false
			},
			//记录到图表
			saveToStudyChart() {
				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
				}
				//学习记录表赋值
				this.studyColumn = studyColumn
				//运动记录表
				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] * 60)
						.toFixed(1))
					sleepRing.series[0].data[index].name = value
					sleepRing.series[0].data[index].value = this.historyData.sleep[index]
				})
				this.exercisePie = exercisePie
				this.sleepRing = sleepRing

				let exerciseSleepArea = {
					categories: [],
					series: [{
						name: "运动睡眠时间比",
						data: []
					}]
				}
				exerciseSleepArea.categories = this.$getRecentDateArray(this.historyData.sleep.length)
				let tempArr = []
				for (let i = 0; i < this.historyData.sleep.length; i++) {
					let num = parseFloat(((this.historyData.exercise[i] / this.historyData.sleep[i]) * 100).toFixed(1))
					tempArr.push(num)
				}
				console.log(tempArr);
				exerciseSleepArea.series[0].data = tempArr
				this.exerciseSleepArea = exerciseSleepArea
			}

		}
	}
</script>

<style lang="scss">
	.module-container {
		margin: -70rpx 20rpx 0 20rpx;
	}

	.module-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.module-item {
			margin: 2% 0;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: $card-border-radius;
			width: 48%;
			height: auto;
			overflow: hidden;

			.module-item-box {
				padding: 35rpx 30rpx 20rpx 30rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 160rpx;

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

	.module-item-text {
		color: #FFF;
		font-size: 30rpx;
		font-weight: bold;
		z-index: 5;
	}

	.num-box {
		margin-top: 20rpx;
		z-index: 5;

		.module-item-num {
			color: #FFF;
			font-size: 50rpx;
			font-weight: bold;
		}
	}

	.chart-item {
		margin: 2% 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #FFF;
		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		border-radius: $card-border-radius;
		width: 48%;
		height: auto;

		.chart-info {
			display: flex;
			align-items: center;
			padding: 20rpx;

			.chart-info-text {
				font-size: 30rpx;
				font-weight: bold;
				color: $color-title;
				margin-left: 10rpx;
			}
		}

		.chart-view {
			height: 320rpx;
			width: 100%;
		}
	}
</style>