486 lines
10 KiB
Vue
486 lines
10 KiB
Vue
<template>
|
|
<view class="TrendPage">
|
|
<!-- 时间选择 -->
|
|
<view class="boxTime">
|
|
<view class="one">
|
|
<picker mode="date" class="f-l" :value="startTime?startTime:startDate" @change="handStartTimeH">
|
|
<view class="uni-input">{{startTime?startTime:startDate}}
|
|
<uni-icons type="down"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<view>~</view>
|
|
<picker mode="date" :end="endDate" class="f-r" :value="endDate" @change="handEndTimeH">
|
|
<view class="uni-input"> {{endTime?endTime:endDate}}
|
|
<uni-icons type="down"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<!-- 曲线图 -->
|
|
<view class="box">
|
|
<view class="listC">
|
|
<view :class="{active:index==active1}" class="name" v-for="(item,index) in weightList" :key="index"
|
|
@click="showbox(index)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
<view class="blockC">
|
|
<view v-if="lineData&&lineData.categories.length&&handTrue">
|
|
<qiunDataCharts type="area" :chartData="lineData" :canvas2d="true" canvasId="charts09"
|
|
:cHeight="480" :cWidth="680" :animation="false"
|
|
:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
|
|
</view>
|
|
<view class="nolist" v-else>
|
|
<uni-icons class="iconfont icon-zanwu"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 目标-->
|
|
<view class="box">
|
|
<view class="info">
|
|
<view class="item" @click="navTo('/pages/history/history?type=w')">
|
|
<text></text>
|
|
<view>历史记录</view>
|
|
</view>
|
|
<view class="item" @click="navTo('/pages/compk/contrast?type=w')">
|
|
<text></text>
|
|
<view>数据对比</view>
|
|
</view>
|
|
</view>
|
|
<view class="data">
|
|
<view class="item" @click="handleClick(0)">
|
|
<view class="val">{{userInfo.targetweight?userInfo.targetweight:0}}<text>kg</text></view>
|
|
<view class="name">目标体重<uni-icons class="iconfont icon-bianji" color="#FEC407"></uni-icons></view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="val">{{userInfo.totalweight?Math.abs(userInfo.totalweight):0}}<text>kg</text>
|
|
</view>
|
|
<view class="name" v-if="Number(userInfo.totalweight)<0">累计增重</view>
|
|
<view class="name" v-else>累计减重</view>
|
|
</view>
|
|
<view class="item" @click="handleClick(1)">
|
|
<view class="val">{{userInfo.firstweight?userInfo.firstweight:0}}<text>kg</text>
|
|
</view>
|
|
<view class="name">初始体重<uni-icons class="iconfont icon-bianji" color="#FEC407"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="val">{{userInfo.day?userInfo.day:0}}<text>天</text></view>
|
|
<view class="name">减重天数</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 初始 -->
|
|
<firstweight></firstweight>
|
|
<!-- 目标 -->
|
|
<targetWeight></targetWeight>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import targetWeight from '@/components/target/targetWeight.vue';
|
|
import firstweight from '@/components/target/firstweight.vue';
|
|
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
|
|
export default {
|
|
components: {
|
|
targetWeight,
|
|
firstweight,
|
|
qiunDataCharts,
|
|
},
|
|
computed: {
|
|
...mapState(["user", "Trend", "appTheme"]),
|
|
userInfo: function() {
|
|
return this.user
|
|
},
|
|
endDate() {
|
|
return this.$tools.getDate("start")
|
|
},
|
|
startDate() {
|
|
return this.$tools.GetDateStr(-90);
|
|
},
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
this.active = 0
|
|
let list = this.$json.TrendList
|
|
let cidata = {
|
|
weight: {
|
|
categories: [],
|
|
series: [{
|
|
color: "#ff9f40",
|
|
name: "体重",
|
|
data: [],
|
|
}]
|
|
},
|
|
bmi: {
|
|
categories: [],
|
|
series: [{
|
|
name: "bmi",
|
|
color: "#5ba7ff",
|
|
data: [],
|
|
}]
|
|
},
|
|
muscle: {
|
|
categories: [],
|
|
series: [{
|
|
color: "#ff7f91",
|
|
name: "肌肉",
|
|
data: [],
|
|
}]
|
|
},
|
|
fat_r: {
|
|
categories: [],
|
|
series: [{
|
|
color: "#3fcba7",
|
|
name: "脂肪",
|
|
data: [],
|
|
}]
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
cidata.weight.categories.push(list[i].time);
|
|
cidata.bmi.categories.push(list[i].time);
|
|
cidata.muscle.categories.push(list[i].time);
|
|
cidata.fat_r.categories.push(list[i].time);
|
|
cidata.weight.series.forEach(item => {
|
|
item.data.push(list[i].weight)
|
|
})
|
|
cidata.bmi.series.forEach(item => {
|
|
item.data.push(list[i].bmi)
|
|
})
|
|
cidata.muscle.series.forEach(item => {
|
|
item.data.push(list[i].muscle)
|
|
})
|
|
cidata.fat_r.series.forEach(item => {
|
|
item.data.push(list[i].fat_r)
|
|
})
|
|
}
|
|
for (var i = 0; i < that.weightList.length; i++) {
|
|
that.weightList[i].Line = cidata[that.weightList[i].key];
|
|
}
|
|
that.showbox(0)
|
|
|
|
console.log("222", cidata, that.weightList)
|
|
// that.getList(this.startDate, this.endDate)
|
|
},
|
|
methods: {
|
|
getList(start, end) {
|
|
console.log("fanhui", start, end)
|
|
let that = this
|
|
that.$model.getTrendList({
|
|
familyid: uni.getStorageSync('familyid'),
|
|
starttime: start,
|
|
endtime: end,
|
|
}).then(res => {
|
|
if (res) {
|
|
for (var i = 0; i < that.weightList.length; i++) {
|
|
that.weightList[i].Line = res[that.weightList[i].key];
|
|
}
|
|
that.showbox(0)
|
|
}
|
|
})
|
|
},
|
|
showbox(index) {
|
|
let that = this
|
|
that.handTrue = false
|
|
this.$nextTick(function() {
|
|
that.handTrue = true
|
|
that.lineData = that.weightList[index].Line
|
|
})
|
|
that.active1 = index
|
|
},
|
|
//开始
|
|
handStartTimeH(e) {
|
|
let that = this
|
|
if (this.endTime) {
|
|
if (Date.parse(e.target.value) > Date.parse(this.endTime)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
} else {
|
|
if (Date.parse(e.target.value) > Date.parse(this.endDate)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
}
|
|
this.startTime = e.target.value
|
|
let endtime = that.endTime ? that.endTime : that.endDate
|
|
this.getList(that.startTime, endtime)
|
|
},
|
|
// 结束
|
|
handEndTimeH(e) {
|
|
let that = this
|
|
if (this.startTime) {
|
|
if (Date.parse(e.target.value) < Date.parse(this.startTime)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
} else {
|
|
if (Date.parse(e.target.value) < Date.parse(this.startDate)) {
|
|
this.$tools.msg("请选择正确的时间")
|
|
return
|
|
}
|
|
}
|
|
this.endTime = e.target.value
|
|
let startTime = that.startTime ? that.startTime : that.startDate
|
|
this.getList(startTime, this.endTime)
|
|
},
|
|
handleClick(ind) {
|
|
if (ind == 0) {
|
|
this.$store.commit("changeTarget", true);
|
|
return
|
|
}
|
|
if (ind == 1) {
|
|
this.$store.commit("changeFirst", true);
|
|
return
|
|
}
|
|
},
|
|
navTo(url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
lineData: null,
|
|
type: null,
|
|
active1: 0,
|
|
weight: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
active: 0,
|
|
token: null,
|
|
handTrue: true,
|
|
TrendList: [],
|
|
weightList: [{
|
|
title: '体重',
|
|
key: 'weight',
|
|
showCon: false,
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#fb7b92",
|
|
"name": "体重",
|
|
"data": []
|
|
}]
|
|
},
|
|
},
|
|
{
|
|
title: 'BMI',
|
|
key: 'bmi',
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#6bb0fe",
|
|
"name": "bmi",
|
|
"data": []
|
|
}]
|
|
},
|
|
}, {
|
|
title: '肌肉',
|
|
key: 'muscle',
|
|
showCon: false,
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#ff9f40",
|
|
"name": "肌肉率",
|
|
"data": []
|
|
}]
|
|
},
|
|
},
|
|
{
|
|
title: '脂肪',
|
|
key: 'fat_r',
|
|
showCon: false,
|
|
Line: {
|
|
"categories": [],
|
|
"series": [{
|
|
"color": "#3fcba7",
|
|
"name": "脂肪率",
|
|
"data": []
|
|
}]
|
|
},
|
|
}
|
|
],
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.TrendPage {
|
|
padding: 10px 0;
|
|
margin-bottom: 15px;
|
|
border-radius: 10px;
|
|
background-color: #f7f7f7;
|
|
|
|
.boxTime {
|
|
width: calc(100% - 20px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
|
|
.one {
|
|
width: 80%;
|
|
display: flex;
|
|
line-height: 25px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tow {
|
|
color: $textcolor;
|
|
padding: 0 5px;
|
|
font-size: 12px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.style {
|
|
background: $maincolor;
|
|
color: #fff;
|
|
}
|
|
|
|
.iconfont {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.listC {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 10px 10px 0 0;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
width: 25%;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.active {
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
background: $maincolor;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-radius: 10px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.blockC {
|
|
clear: both;
|
|
width: 100%;
|
|
height: 250px;
|
|
background-color: #fff;
|
|
border-radius: 0 0 10px 10px;
|
|
}
|
|
|
|
.info {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-top: 20px;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
color: #fff;
|
|
width: 47.5%;
|
|
height: 50px;
|
|
background: $maincolor;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
text {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
display: inline-block;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.data {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #666;
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
|
|
.item {
|
|
width: 47.5%;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
background: #fff;
|
|
padding: 5px 0;
|
|
border-radius: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.val {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
justify-content: center;
|
|
color: #666;
|
|
|
|
text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
display: block;
|
|
margin-top: 3px;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxList {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
|
|
.list {
|
|
margin: 10px;
|
|
}
|
|
}
|
|
</style> |