examTeamApp/pages/body/components/charts.vue

<template>
	<view>
		<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 class="iconfont icon-arrow-down-bold"></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 class="iconfont icon-arrow-down-bold"></uni-icons>
						</view>
					</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>
</template>
<script>
	import {
		mapState
	} from "vuex";
	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: {
			firstweight,
			qiunDataCharts,
		},
		props: {
			acd_id: ""
		},
		computed: {
			...mapState(["user", "Trend"]),
			weightList() {
				return this.Trend
			},
			userInfo() {
				return this.user
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		mounted() {
			let that = this
			that.showbox(0)
		},
		methods: {
			showbox(index) {
				let that = this
				that.handTrue = false
				this.$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.target.value) > Date.parse(that.endTime)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.target.value) > Date.parse(that.endDate)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				}
				that.startTime = e.target.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.target.value) < Date.parse(that.startTime)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				} else {
					if (Date.parse(e.target.value) < Date.parse(that.startDate)) {
						that.$tools.msg("请选择正确的时间")
						return
					}
				}
				that.endTime = e.target.value
				let startTime = that.startTime ? that.startTime : that.startDate
				that.$store.dispatch("GetBodyTrendList", {
					aud_id: that.user.id,
					s_time: startTime,
					e_time: that.endTime
				})
				that.showbox(0)
			},
			handleClick(ind) {
				this.ind = ind
				this.$store.commit("changeFirst", true);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		data() {
			return {
				ind: 0,
				active1: 0,
				startTime: "",
				endTime: "",
				lineData: {},
				handTrue: true,
			};
		}
	}
</script>

<style lang="scss" scoped>
	.boxTime {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px 10px 0 0;

		.one {
			width: 80%;
			display: flex;
			line-height: 25px;
			justify-content: space-between;
			align-items: center;
		}
	}

	.box {
		width: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		border-radius: 0 0 10px 10px;
		justify-content: space-between;

		.listC {
			background-color: #fff;

			.name {
				width: 20%;
				padding: 0 15px;
				font-size: 14px;
				text-align: center;
				border-radius: 5px;
				height: 30px;
				line-height: 30px;
			}

			.active2 {
				color: #fff;
				background: $maincolor;
			}

		}

		.blockC {
			clear: both;
			width: 100%;
			height: 250px;
			background-color: #fff;
			border-radius: 0 0 10px 10px;
			padding-bottom: 15px;
		}
	}

	.gridList {
		margin: 0px !important;
		width: 100% !important;

		.data {
			.item {
				display: block !important
			}
		}

	}
</style>