MiniPrograms/components/todaydata-box/todaydata-box.vue

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

		<!-- 记录模块 -->
		<view class="module-box" v-if="current == 0">
			<view class="module-item" style="background-color: #5b7cff;" @click="studyTimePicker = true">
				<view class="module-item-box">
					<text class="module-item-text">自主学习记录</text>
					<view class="num-box">
						<text class="module-item-num">{{studyTime[6]}}</text>
						<text class="unit">小时</text>
					</view>
					<view class="t-icon t-icon-bianjibi"></view>
				</view>
			</view>

			<view class="module-item" style="background-color: #00cca3;" @click="restTimePicker = true">
				<view class="module-item-box">
					<text class="module-item-text">娱乐放松记录</text>
					<view class="num-box">
						<text class="module-item-num">{{restTime}}</text>
						<text class="unit">小时</text>
					</view>
					<view class="t-icon t-icon-leimucuyule"></view>
				</view>
			</view>

			<view class="module-item" style="background-color: #ff9db2;">
				<view class="module-item-box">
					<text class="module-item-text">运动锻炼记录</text>
					<view class="num-box">
						<text class="module-item-num">5</text>
						<text class="unit">分钟</text>
					</view>
					<view class="t-icon t-icon-yundong"></view>
				</view>
			</view>

			<view class="module-item" style="background-color: #f9c752;" @click="sleepTimePicker = true">
				<view class="module-item-box">
					<text class="module-item-text">睡眠记录</text>
					<view class="num-box">
						<text class="module-item-num">{{sleepTime}}</text>
						<text class="unit">小时</text>
					</view>
					<view class="t-icon t-icon-a-icon_wananyueliangshuimian"></view>
				</view>
			</view>
		</view>
		<!-- 时间选择器 -->
		<u-picker :show="studyTimePicker" :columns="pickerHour" title="单位(小时)" ref="uPickerStudy" @confirm="hourStudy"
			@cancel="studyCancel" :closeOnClickOverlay="true" @change="changeTime"></u-picker>
		<u-picker :show="restTimePicker" :columns="pickerHour" title="单位(小时)" ref="uPickerRest" @confirm="hourRest"
			@cancel="restCancel" :closeOnClickOverlay="true"></u-picker>
		<u-picker :show="sleepTimePicker" :columns="pickerHour" title="单位(小时)" ref="uPickerSleep" @confirm="hourSleep"
			@cancel="sleepCancel" :closeOnClickOverlay="true"></u-picker>

		<!-- 记录表 -->
		<view class="module-box" v-if="current == 1">
			<view class="card-item" style="width: 710rpx;">
				<view class="card-info">
					<view class="t-icon t-icon-jiaoshidaka"></view>
					<text class="info-text">近七天学习记录</text>
				</view>
				<view style=" width:100%; 500rpx; margin-top: -30rpx;">
					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4" :canvas2d='true'
						canvasId='canvans912' :opts="{dataLabel:false, extra:{column: {barBorderCircle:true}}}" />
				</view>
			</view>

			<view class="card-item">
				<view class="card-info">
					<view class="t-icon t-icon-jiankangshangbao"></view>
					<text class="info-text">近七天运动</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4" :canvas2d='true'
						canvasId='canvans8121' />
				</view>
			</view>

			<view class="card-item">
				<view class="card-info">
					<view class="t-icon t-icon-jiankangshangbao"></view>
					<text class="info-text">近七天睡眠</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4" :canvas2d='true'
						canvasId='canvans9122' :tooltipFormat='yAxisDemo1' />
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "todaydata-box",
		computed: {
			...mapState('m_chart', ['todayData']),
		},
		data() {
			return {
				//选择器
				studyTimePicker: false,
				restTimePicker: false,
				sleepTimePicker: false,

				//模块名
				list: [{
					name: '今日记录'
				}, {
					name: '历史记录'
				}],
				//当前模块
				current: 0,

				pickerHour: [
					['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5',
						'5.5', '6', '6.5', '7', '7.5', '8', '8.5', '9', '9.5', '10'],
				],

				//选择数据暂存
				changeValue: 0,
				//今日数据记录
				studyTime: [2, 4, 3, 3.5, 5, 4, 0],
				restTime: 0,
				exerciseTime: 0,
				sleepTime: 0,

			};
		},
		methods: {
			//更改模块
			change(index) {
				console.log(index)
				this.current = index.index
			},
			changeTime(e) {
				console.log('change事件', e)
				if (e.value[0]) {
					//将用户的选择的值抛出去
					this.changeValue = e.value[0]
				}else{
					//默认值
					this.changeValue = 1
				}
			},
			//自主学习
			hourStudy() {
				let arr = this.studyTime
				let num = parseFloat(this.changeValue)
				arr.push(num)
				if (arr.length > 7) {
					arr.shift()
				}
				console.log(arr)
				this.studyTime = arr
				this.studyTimePicker = false
			},
			studyCancel() {
				uni.$showMsg('取消选择')
				this.studyTimePicker = false
			},
			//娱乐放松
			hourRest(e) {
				this.restTime = e.value[0]
				this.restTimePicker = false
			},
			restCancel() {
				uni.$showMsg('取消选择')
				this.restTimePicker = false
			},
			//睡眠记录
			hourSleep(e) {
				this.sleepTime = e.value[0]
				this.sleepTimePicker = false
			},
			sleepCancel() {
				uni.$showMsg('取消选择')
				this.sleepTimePicker = false
			},

		}
	}
</script>

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

	.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: 30rpx;
				width: 100%;
				display: flex;
				flex-direction: column;

				.t-icon {
					width: 250rpx;
					height: 250rpx;
					margin: -250rpx 0 0 150rpx;
				}
			}

		}
	}


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

	.num-box {
		margin: 30rpx 0 0 20rpx;
		display: flex;
		align-items: flex-end;

		.module-item-num {
			color: #FFF;
			font-size: 70rpx;
			font-weight: bold;
			z-index: 1;
		}

		.unit {
			margin-bottom: 15rpx;
			margin-left: 20rpx;
			color: #FFF;
			font-size: 35rpx;
			font-weight: bold;
			z-index: 1;
		}
	}
</style>