examTeamApp/pages/PublicCards/charts.vue

<template>
	<view class="TrendPage">
		<view class="charts">
			<!-- 时间选择 -->
			<view class="boxTime">
				<view class="one">
					<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>
					<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>
		<!-- 曲线图 -->
		<view class="box">
			<view class="boxLine">
				<view class="line" v-for="(item,index) in weightList">
					<view v-if="item.line.categories.length" class="mt-15 mb-15">
						<qiunDataCharts type="area" :chartData="item.line" :canvas2d="true" :canvasId="'1025'+ index"
							:cHeight="400" :cWidth="720" :animation="false"
							:opts="{enableScroll:true,xAxis:{scrollShow:false,itemCount:3}}" :ontouch="true" />
					</view>
					<view class="nolist" v-else>
						<image src="../../static/none.png"></image>
						<text>暂无数据，请手动添加~</text>
					</view>
					<view class="title">
						<text :style="{'backgroundColor':item.line.series[0].color}"></text>
						{{item.title}}
					</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(["labelList"]),
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		data() {
			return {
				name: "",
				list: [],
				acd_id: 0,
				handTrue: true,
				active: 0,
				startTime: "",
				endTime: "",
				weightList: [],
			};
		},
		onLoad(options) {
			let that = this
			that.active = 0
			that.acd_id = options.acd_id
			that.time = that.startDate
			that.labelList.forEach(ite => {
				if (ite.acd_id == that.acd_id) {
					that.list = ite.list
					that.name = that.list[0]
					return
				}
			})
			that.handlePublicTrendList()
		},
		methods: {
			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
				that.handlePublicTrendList()
			},
			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
				that.handlePublicTrendList()
			},
			handlePublicTrendList() {
				let that = this
				that.$model.getPublicTrendList({
					aud_id: uni.getStorageSync('userid'),
					acd_id: that.acd_id,
					s_time: that.startTime ? that.startTime : that.startDate,
					e_time: that.endTime ? that.endTime : that.endDate
				}).then(res => {
					// 公共曲线
					if (res.code == 0) {
						that.weightList = res.data
					}
					console.log("公共曲线", that.weightList)
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.TrendPage {
		min-height: 100vh;
	}

	.boxTime {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px 10px 0 0;

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

		.center {
			width: 10%;
			margin: 0 15px;
		}

		picker {
			width: 50%;
			border: none;
			display: flex;
			justify-content: center;
		}

		.iconfont {
			color: #333333;
			font-size: 36rpx;
		}

	}

	.line {
		padding-top: 15px;
	}

	.title {
		width: 100%;
		text-align: center;
		color: #999;
		font-size: 14PX;
		margin-top: 15px;

		text {
			width: 15px;
			height: 10px;
			margin-right: 5px;
			display: inline-block;
		}
	}
</style>