examTeamApp/pages/body/body.vue

<template>
	<view class="content">
		<!-- tabbar -->
		<view class="tabbar">
			<view @click="active=1" :class="[active==1?'active':'']">报告</view>
			<view @click="active=2" :class="[active==2?'active':'']">曲线</view>
		</view>
		<!--报告  -->
		<view v-if="active==1" class="report">
			<view class="box" v-if="info&&info.top_list.length">
				<view class="time">{{info?info.record_time:''}}</view>
				<view class="item2">
					<view class="item2_data" v-for="(item,index) in info.top_list" @click="handleToggleTop(item)">
						<view class="data ">
							<view class="c666 mb-5">{{item.name}}</view>
							<view><text>{{item.value}}</text>{{item.unit}}</view>
						</view>
					</view>
					<view class="myinfoPage" v-if="infoListTop">
						<view class="desc">
							<view v-if="infoListTop.desc" class="ming">{{infoListTop.desc}}</view>
							<view :class="[infoListTop.list.length?'statuevue':'']" v-if="infoListTop.list">
								<view class="bi">
									<view :style="'left:'+infoListTop.offset+'%'" class="peobox">
										<view class="xx"></view>
									</view>
									<view class="item" v-for="(ite , ind) in infoListTop.list" :key="ind"
										:style="{backgroundColor:ite.color}">
										<view class="span1">{{ite.text}}</view>
										<view class="span" v-if="ind<infoListTop.list.length-1">{{ite.max_val}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nolist" v-if="!info">
				<image src="../../static/none.png"></image>
				<text>暂无数据，请手动添加~</text>
			</view>
			<!--  -->
			<view class="box2" v-if="info">
				<view>身体得分：{{info?info.score_value:0}}分</view>
				<view>身体类型：{{info?info.body_type_value:'无'}}</view>
			</view>
			<!--  -->
			<view class="info">
				<view class="item" @click="handlerRecord">
					<text class="t-icon-jilu1 t-icon"></text>
					<view>手动记录</view>
				</view>
				<view class="item" @click="handleisSdevice()">
					<text class="t-icon-wulianjie t-icon"></text>
					<view>连接设备</view>
				</view>
			</view>
			<!--  -->
			<view class="bold mt-10" v-if="info&&info.bottom_list">其他数据</view>
			<view class="myinfoPage" v-if="info&&info.bottom_list">
				<view class="box1">
					<uni-collapse accordion>
						<uni-collapse-item class="list" v-for="(item,index) in info.bottom_list" :key="index">
							<template v-slot:title>
								<uni-list-item class="block">
									<view class="name">
										<icon class="t-icon iconfont" :class="'t-icon-'+item.key_name"></icon>
										{{item.name}}
									</view>
									<view class="val" v-if="item.title=='肥胖等级'||item.title=='体型'"> - </view>
									<view class="val" v-else>{{item.value?item.value:'0'}}{{item.unit}}</view>
									<view class="level">
										<view class="btnf"
											:style="{backgroundColor:(item.standard=='异常'?'#FFF':item.color)}"
											:class="[item.standard=='异常'?'btnC':'']">
											{{item.standard=='异常'?'-':item.standard}}
										</view>
									</view>
								</uni-list-item>
							</template>
							<view class="desc">
								<view v-if="item.desc" class="ming">{{item.desc}}</view>
								<view :class="[item.list.length?'statuevue':'']" v-if="item.list">
									<view class="bi" v-if="item.title!='基础代谢'">
										<view :style="'left:'+item.offset+'%'" class="peobox">
											<view class="xx"></view>
										</view>
										<view class="item" v-for="(ite , ind) in item.list" :key="ind"
											:style="{backgroundColor:ite.color}">
											<view class="span1">{{ite.text}}</view>
											<view class="span" v-if="ind<item.list.length-1">{{ite.max_val}}</view>
										</view>
									</view>
									<view v-else>
										<view class="kcalClass" v-if="item.list&&item.list.length">
											标准值:{{item.list[0].max_val}}kcal
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="tips c999 ml-15">
					<text>*数据参考：</text>
					<text v-for="(item,index) in info.literature" :key="index">
						{{item}}
					</text>
				</view>
			</view>
			<view class="tips2" v-if="info&&info.bottom_list">
				<uni-icons type="info-filled" color="red"></uni-icons>
				此测量数据仅供参考，不可代替医学专业测试！
			</view>
			<!-- 成长建议 -->
			<view class="bold mt-10" v-if="info">成长建议</view>
			<view class="jianyi_box" v-if="info">
				<view class="jianyi">
					<view @click="proposalnd=1" :class="{active:proposalnd==1}">
						<image src="../../static/icon4.png"></image>
						<text>营养</text>
					</view>
					<view @click="proposalnd=2" :class="{active:proposalnd==2}">
						<image src="../../static/icon1.png"></image>
						<text>睡眠</text>
					</view>
					<view @click="proposalnd=3" :class="{active:proposalnd==3}">
						<image src="../../static/icon3.png"></image>
						<text>运动</text>
					</view>
					<view @click="proposalnd=4" :class="{active:proposalnd==4}">
						<image src="../../static/icon2.png"></image>
						<text>情绪</text>
					</view>
				</view>
				<view>
					<view v-if="proposalnd==1&&cplist.nutritionlist.length" class="jianyi-con">
						<text v-for="(item,index) in cplist.nutritionlist" :key="index">{{item}}</text>
					</view>
					<view v-if="proposalnd==2&&cplist.sleeplist.length" class="jianyi-con">
						<text v-for="(item,index) in cplist.sleeplist" :key="index">{{item}}</text>
					</view>
					<view v-if="proposalnd==3&&cplist.sportlist.length" class="jianyi-con">
						<text v-for="(item,index) in cplist.sportlist" :key="index">{{item}}</text>
					</view>
					<view v-if="proposalnd==4&&cplist.moodlist.length" class="jianyi-con">
						<text v-for="(item,index) in cplist.moodlist" :key="index">{{item}}</text>
					</view>
				</view>
			</view>

			<!-- 手动记录 -->
			<record :rtype="acd_id"></record>
		</view>
		<!-- 曲线 -->
		<view v-if="active==2" class="charts">
			<view class="TrendPage">
				<!-- 时间选择 -->
				<view class="boxTime">
					<view class="one">
						<!-- <uni-datetime-picker type="date" :end="startDate" :clear-icon="false"
							:value="startTime?startTime:startDate" @change="handStartTimeH" :border="false" /> -->
						<picker mode="date" :end="endDate" @change="handStartTimeH" fields="time"
							:value="startTime?startTime:startDate">
							<view class="uni-input mr-10">{{startTime?startTime:startDate}}</view>
							<icon class="iconfont icon-arrow-down-bold"></icon>
						</picker>
						<view class="center">~</view>
						<!-- <uni-datetime-picker type="date" :end="endDate" :clear-icon="false"
							:value="endTime?endTime:endDate" @change="handEndTimeH" :border="false" /> -->
						<picker mode="date" :end="endDate" @change="handEndTimeH" fields="time"
							:value="endTime?endTime:endDate">
							<view class="uni-input mr-10">{{endTime?endTime:endDate}}</view>
							<icon class="iconfont icon-arrow-down-bold"></icon>
						</picker>
					</view>
				</view>
				<!-- 曲线图 -->
				<view class="box" v-if="weightList.length">
					<view class="listC">
						<view :class="{active2: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="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>
				</view>
				<view class="box" v-else>
					<view class="nolist">
						<image src="../../static/none.png"></image>
						<text>暂无数据，请手动添加~</text>
					</view>
				</view>
			</view>
			<!--  目标-->
			<view class="gridList">
				<view class="info">
					<view class="item" @click="navTo('/pages/history/history?acd_id='+ acd_id)">
						<text class="t-icon-lishi t-icon"></text>
						<view>历史记录</view>
					</view>
					<view class="item" @click="navTo('/pages/compk/contrast?acd_id='+ acd_id)">
						<text class="t-icon-renshiduibifenxi t-icon"></text>
						<view>数据对比</view>
					</view>
				</view>
				<view class="data">
					<view class="item" @click="handleClick(1)">
						<view class="val">
							{{userInfo.target_current?userInfo.target_current.target_weight: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.target_current?Math.abs(userInfo.target_current.cumulative_weight):0}}<text>kg</text>
						</view>
						<view class="name" v-if="Number(userInfo.target_current.cumulative_weight)>0">累计增重</view>
						<view class="name" v-else>累计减重</view>
					</view>
					<view class="item" @click="handleClick(2)">
						<view class="val">
							{{userInfo.target_current?userInfo.target_current.initial_weight: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.target_current?userInfo.target_current.cumulative_day:0}}<text>天</text>
						</view>
						<view class="name">减重天数</view>
					</view>
				</view>
			</view>
			<!-- 初始 -->
			<firstweight :type="ind"></firstweight>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import record from '@/element/manuallyAdd/record.vue';
	import firstweight from '@/element/target/firstweight.vue';
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		data() {
			return {
				active: 1,
				acd_id: 2,
				isDevice: 0,
				infoList: [],
				infoListTop: {},
				ind: 0,
				active1: 0,
				startTime: "",
				endTime: "",
				lineData: {},
				handTrue: true,
				proposalnd: 1,
				cplist: {
					moodlist: [],
					nutritionlist: [],
					sleeplist: [],
					sportlist: []
				}
			}
		},
		computed: {
			...mapState(['user', "MeasureResult", "Trend"]),
			weightList() {
				let that = this
				that.showbox(0)
				return that.Trend
			},
			userInfo() {
				return this.user
			},
			info() {
				let that = this
				that.cplist = that.MeasureResult ? that.MeasureResult.cplist : {}
				that.infoListTop = that.MeasureResult ? that.MeasureResult.top_list[0] : {}
				return that.MeasureResult
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		components: {
			record,
			firstweight,
			qiunDataCharts,
		},
		onLoad(options) {
			let that = this
			that.acd_id = options.acd_id
			that.isDevice = options.device
			that.$store.dispatch("getResult", {
				aud_id: uni.getStorageSync('userid')
			})
			that.$store.dispatch("GetBodyTrendList", {
				aud_id: uni.getStorageSync('userid'),
				s_time: that.startDate,
				e_time: that.endDate
			})
			console.log("11111", options)
		},
		onBackPress(options) {
			let that = this
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}, 300)
			console.log("返回首页")
			return true
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			that.$store.dispatch("getResult", {
				aud_id: uni.getStorageSync('userid')
			})
			that.$store.dispatch("GetBodyTrendList", {
				aud_id: uni.getStorageSync('userid'),
				s_time: that.startDate,
				e_time: that.endDate
			})
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000);
		},
		methods: {
			handleisSdevice() {
				let that = this
				console.log("isDevice", that.isDevice, typeof that.isDevice)
				if (Number(that.isDevice) != 0) {
					uni.openBluetoothAdapter({
						success: e => {
							that.$store.commit("changeBluetooth", true);
							uni.navigateTo({
								url: "/pages/devices/search?id=" + that.acd_id
							})
							console.log('初始化蓝牙成功:' + e.errMsg);
						},
						fail: err => {
							console.log('初始化蓝牙失败:' + err.errMsg);
							return that.$Bluetooth.getBluetoothAdapter(err)
						}
					});
				} else {
					that.$tools.msg("请先添加设备！")
					setTimeout(function() {
						uni.switchTab({
							url: "/pages/business/business"
						})
					}, 500)
				}
			},
			// 历史数据删除时重新加载接口
			reload() {
				let that = this
				console.log('重新加载');
				this.$nextTick(() => {
					that.$store.dispatch("getResult", {
						aud_id: uni.getStorageSync('userid')
					})
					that.$store.dispatch("GetBodyTrendList", {
						aud_id: uni.getStorageSync('userid'),
						s_time: that.startDate,
						e_time: that.endDate
					})
				})
			},
			showbox(index) {
				let that = this
				that.handTrue = false
				that.$nextTick(function() {
					that.handTrue = true
					that.lineData = that.weightList.length ? that.weightList[index].line : {}
				})
				that.active1 = index
			},
			//开始
			handStartTimeH(e) {
				let that = this
				if (that.endTime) {
					if (Date.parse(e.detail.value) > Date.parse(that.endTime)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.detail.value) > Date.parse(that.endDate)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				}
				that.startTime = e.detail.value
				let endtime = that.endTime ? that.endTime : that.endDate
				that.$store.dispatch("GetBodyTrendList", {
					aud_id: that.user.id,
					s_time: that.startTime,
					e_time: that.endTime ? that.endTime : that.endDate
				})
				that.showbox(0)
			},
			// 结束
			handEndTimeH(e) {
				let that = this
				if (that.startTime) {
					if (Date.parse(e.detail.value) < Date.parse(that.startTime)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.detail.value) < Date.parse(that.startDate)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				}
				that.endTime = e.detail.value
				let startTime = that.startTime ? that.startTime : that.startDate
				that.$store.dispatch("GetBodyTrendList", {
					aud_id: uni.getStorageSync('userid'),
					s_time: startTime,
					e_time: that.endTime
				})
				that.showbox(0)
			},
			handleClick(ind) {
				this.ind = ind
				this.$store.commit("changeFirst", true);
			},
			// 报告
			handlerRecord() {
				this.$store.commit('changeRecord', true)
			},
			handleToggleTop(item) {
				this.infoListTop = item
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/scss/body.scss";

	.content {
		padding: 15px;
		font-size: 32rpx;
		background-color: #F5F6FA;
		min-height: 100vh;
	}
</style>