examTeamApp/pages/vitalcapacity/charts.vue

<template>
	<view class="TrendPage">
		<view class="listC">
			<view @click="handleActive(1)" :class="[active==1?'active':'']">当天</view>
			<view @click="handleActive(2)" :class="[active==2?'active':'']">月度</view>
			<view @click="handleActive(3)" :class="[active==3?'active':'']">年度</view>
		</view>
		<view class="box">
			<!-- 时间选择 -->
			<view class="boxTime">
				<picker mode="date" class="f-l" :value="startDate" @change="handStartTimeH"
					:fields="active==1?'day':active==2?'month':'year'">
					<view class="uni-input">{{time}}<uni-icons type="bottom"></uni-icons></view>
				</picker>
			</view>
			<!-- 曲线图 -->
			<view class="boxLine">
				<view class="line" v-for="(item,index) in weightList">
					<view v-if="item.line.categories.length">
						<qiunDataCharts type="column" :chartData="item.line" :canvas2d="true" :canvasId="item.id"
							:cHeight="480" :cWidth="680" :animation="false"
							:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
					</view>
					<view class="line" v-else>
						<view class="nolist">
							<image src="@/static/none.png"></image>
							<text>暂无数据，请手动添加~</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			qiunDataCharts,
		},
		computed: {
			...mapState(["user"]),
			userInfo: function() {
				return this.user
			},
			startDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad() {
			let that = this
			this.active = 1
			this.time = this.startDate
			that.getList()
		},
		methods: {
			getList() {
				let that = this
				that.$model.getLungTrendList({
					aud_id: uni.getStorageSync('userid'),
					time: that.time,
				}).then(res => {
					console.log("肺活量曲线", res.data)
					that.weightList = res.data
				})
			},
			handleActive(ite) {
				let that = this
				that.handTrue = false
				that.time = ite == 1 ? this.startDate : ite == 2 ? this.$tools.getDate("month") : this.$tools.getDate("year")
				that.getList()
				that.$nextTick(function() {
					that.handTrue = true
				})
				that.active = ite
			},
			handStartTimeH(e) {
				let that = this
				that.time = e.target.value
				that.getList()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		data() {
			return {
				weightList: [],
				handTrue: true,
				active: 1,
				time: "",
			};
		}
	}
</script>

<style lang="scss" scoped>
</style>