ReedawFoodApp/pageTwo/charts/charts.vue

<template>
	<view class="content">
		<view class="tagList">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<text class="scroll-view-item_H" v-for="(ite,ind) in publicRecordInfo"
					@click="handlePageScrollTo(ite.id,ind)" :class="[ind == index?'active':'']">
					{{ite.name}}
				</text>
			</scroll-view>
		</view>
		<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"
								:Width="340" :Height="250" :animation="false"
								:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
						</view>
						<view class="line" v-else>
							<view class="nolist  mb-15">
								<image src="../../static/none.png"></image>
								<text>暂无数据，请手动添加~</text>
							</view>
						</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 {
		data() {
			return {
				weightList: [],
				handTrue: true,
				active: 1,
				index: 0,
				time: "",
			}
		},
		components: {
			qiunDataCharts,
		},
		computed: {
			...mapState(["user", "PublicRecord"]),
			userInfo() {
				return this.user
			},
			publicRecordInfo() {
				let that = this
				return that.PublicRecord
			},
			startDate() {
				return this.$tools.getDate("start")
			}
		},
		onLoad() {
			let that = this
			that.active = 1
			that.index = 0
			that.time = that.startDate
			that.getList()
		},
		methods: {
			handlePageScrollTo(id, ind) {
				let that = this
				that.index = ind
				that.active = 1
				that.time = that.startDate
				that.getList()
			},
			getList() {
				let list = []
				let that = this
				that.$model.getPublicTrendList({
					aud_id: that.user.aud_id,
					time: that.time,
					type: that.publicRecordInfo[that.index].key_word,
				}).then(res => {
					if (res.code == 0) {
						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()
			},
		}
	}
</script>

<style scoped lang="scss">
	.tagList {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background: #fff;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
		position: fixed;
		top: 0;
		z-index: 999;

		.active {
			color: $maincolor;
			font-weight: bold;
			font-size: 16px;
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;

			.scroll-view-item_H {
				display: inline-block;
				height: 45rpx;
				line-height: 45rpx;
				text-align: center;
			}
		}

		text {
			color: #666;
			padding: 0 15px;
		}
	}
	.TrendPage{
		margin-top: 50px;
		width: calc(1005 - 30px);
	}
</style>