|
@@ -27,7 +27,7 @@
|
|
|
<text class="chart-info-text">近七天学习记录</text>
|
|
|
</view>
|
|
|
<view style=" width:100%; margin-top: -30rpx;">
|
|
|
- <qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4"
|
|
|
+ <qiun-data-charts type="column" :chartData="studyColumn" :loadingType="4"
|
|
|
tooltipFormat='tooltipHour' :canvas2d="true" canvasId="canvasId9839618"/>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -38,7 +38,7 @@
|
|
|
<text class="chart-info-text">近七天运动</text>
|
|
|
</view>
|
|
|
<view class="chart-view">
|
|
|
- <qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4"
|
|
|
+ <qiun-data-charts type="pie" :chartData="exercisePie" :loadingType="4"
|
|
|
tooltipFormat='pieMinute' :canvas2d="true" canvasId="canvasId91234111" />
|
|
|
</view>
|
|
|
</view>
|
|
@@ -49,10 +49,22 @@
|
|
|
<text class="chart-info-text">近七天睡眠</text>
|
|
|
</view>
|
|
|
<view class="chart-view">
|
|
|
- <qiun-data-charts type="pie" :chartData="todayData.sleepRing" :loadingType="4"
|
|
|
+ <qiun-data-charts type="pie" :chartData="sleepRing" :loadingType="4"
|
|
|
tooltipFormat='tooltipHour' :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: 450rpx;">
|
|
|
+ <qiun-data-charts type="area" :chartData="exerciseSleepArea" :loadingType="4"
|
|
|
+ tooltipFormat='tooltipHourCom' :canvas2d="true" canvasId="canvasId983131231"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
<!-- 时间选择器 -->
|
|
|
<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
|
|
@@ -63,30 +75,23 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from 'vuex'
|
|
|
export default {
|
|
|
name: "todaydata-box",
|
|
|
- computed: {
|
|
|
- ...mapState('m_chart', ['todayData']),
|
|
|
- },
|
|
|
- watch: {
|
|
|
- historyData: {
|
|
|
- handler(newValue){
|
|
|
- this.saveToStudyChart()
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- },
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
+ //学习记录表
|
|
|
+ studyColumn: {},
|
|
|
+ //锻炼时间表
|
|
|
+ exercisePie: {},
|
|
|
+ //睡眠时间表
|
|
|
+ sleepRing: {},
|
|
|
+ //运动睡眠比
|
|
|
+ exerciseSleepArea: {},
|
|
|
//模块名
|
|
|
list: [{
|
|
|
- name: '家庭记录'
|
|
|
+ name: '每日记录'
|
|
|
}, {
|
|
|
- name: '历史记录'
|
|
|
+ name: '记录分析'
|
|
|
}],
|
|
|
//当前模块
|
|
|
current: 0,
|
|
@@ -139,7 +144,6 @@
|
|
|
this.saveToStudyChart()
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapMutations('m_chart', ['updateStudyColumn', 'updateExercisePie', 'updateSleepRing']),
|
|
|
//更改模块
|
|
|
changeModule(index) {
|
|
|
this.current = index.index
|
|
@@ -163,8 +167,7 @@
|
|
|
}
|
|
|
//转换为数据记录到图表中
|
|
|
if (this.moduleData[this.cardCurrent].numData.search('小时') == -1) {
|
|
|
- let timeData = parseFloat(parseInt(this.moduleData[this.cardCurrent].numData.replace('分钟', '')) / 60).toFixed(1)
|
|
|
- console.log(timeData)
|
|
|
+ let timeData = parseFloat((parseInt(this.moduleData[this.cardCurrent].numData.replace('分钟', '')) / 60).toFixed(1))
|
|
|
switch (this.cardCurrent) {
|
|
|
case 0:
|
|
|
this.historyData.study.push(timeData)
|
|
@@ -175,18 +178,21 @@
|
|
|
this.historyData.rest.shift()
|
|
|
break
|
|
|
case 2:
|
|
|
- this.historyData.exercise.push(timeData)
|
|
|
+ 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))
|
|
|
- console.log(timeData)
|
|
|
switch (this.cardCurrent) {
|
|
|
case 0:
|
|
|
this.historyData.study.push(timeData)
|
|
@@ -199,12 +205,15 @@
|
|
|
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
|
|
@@ -218,17 +227,12 @@
|
|
|
saveToStudyChart() {
|
|
|
let studyColumn = {
|
|
|
categories: [],
|
|
|
- series: [{
|
|
|
- name: '自主学习',
|
|
|
- data: this.historyData.study
|
|
|
- }, {
|
|
|
- name: '娱乐放松',
|
|
|
- data: this.historyData.rest
|
|
|
- }]
|
|
|
+ series: [{name: '自主学习',data: this.historyData.study},
|
|
|
+ {name: '娱乐放松',data: this.historyData.rest}]
|
|
|
}
|
|
|
//时间
|
|
|
studyColumn.categories = this.$getRecentDateArray(7)
|
|
|
- //数据
|
|
|
+ //学习记录表数据记录
|
|
|
switch (this.cardCurrent) {
|
|
|
case 0:
|
|
|
studyColumn.series[0].data = this.historyData.study
|
|
@@ -237,10 +241,40 @@
|
|
|
studyColumn.series[1].data = this.historyData.rest
|
|
|
break
|
|
|
}
|
|
|
- //解除对象指向同一块内存(深拷贝)
|
|
|
- // let studyColumnTemp = JSON.parse(JSON.stringify(studyColumn))
|
|
|
- //存储
|
|
|
- this.updateStudyColumn(studyColumn)
|
|
|
+ //学习记录表赋值
|
|
|
+ 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 = this.historyData.exercise[index]*60
|
|
|
+ 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: []},
|
|
|
+ {name: "每日睡眠时间",data: []}]
|
|
|
+ }
|
|
|
+ exerciseSleepArea.categories = studyColumn.categories
|
|
|
+ exerciseSleepArea.series[0].data = this.historyData.exercise
|
|
|
+ exerciseSleepArea.series[1].data = this.historyData.sleep
|
|
|
+ this.exerciseSleepArea = exerciseSleepArea
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|
|
@@ -269,12 +303,12 @@
|
|
|
overflow: hidden;
|
|
|
|
|
|
.module-item-box {
|
|
|
- padding: 35rpx;
|
|
|
+ padding: 35rpx 30rpx 20rpx 30rpx;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
- height: 150rpx;
|
|
|
+ height: 170rpx;
|
|
|
|
|
|
.t-icon {
|
|
|
width: 250rpx;
|
|
@@ -329,7 +363,8 @@
|
|
|
}
|
|
|
|
|
|
.chart-view {
|
|
|
- height: 350rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|