yanzhiAPP/pages/profile/index.vue

<template>
	<view class="" style="padding: 30rpx;">
		<view class="" style="padding: 20rpx;box-sizing: border-box;">
			<view class="head">
				<view class="subsection">
					<view class="subsection-li" @click="changeDate('day')">
						天
					</view>
					<view class="subsection-li" @click="changeDate('month')">
						月
					</view>
					<view class="act" :style="{left:leftNum+'rpx'}">

					</view>
				</view>
				<view class="set">
					<view class="" style="margin: 0 10rpx;" @tap='choseDateFn'>
						<u-icon name="setting" color="white" size="15"></u-icon>
					</view> 自定义
				</view>
			</view>
			<view class="">
				<view class="tit">
					土地检测数据
				</view>
				<view class="charts-box" v-for="(item,index) in baseData " :key="index">
					<qiun-data-charts type="line" :opts="opts[index]" :chartData="chartData[index]" />
				</view>

			</view>


		</view>
	</view>

	<uni-calendar :insert="false" ref="calendar" :range='true' :lunar="true" @confirm="confirm" />
</template>

<script>
	import {
		landEnvDataChartAPI
	} from "@/api/plant.js"
	export default {
		data() {
			return {
				type: false,
				showPicker: false,
				leftNum: 10,
				baseData: [],
				xInfo: [{
						name: "土壤温度(℃)",

						data: 'soil_temp'
					}, {
						name: "土壤湿度(%RH)",

						data: 'soil_mois'
					}, {
						name: "磷含量%)",

						data: 'p_content'
					}, {
						name: "氮含量(mg/l)",

						data: 'n_content'
					}, {
						name: "钾含量(%)",

						data: 'k_content'
					},

				],
				chartData: [],
				opts: []
			};
		},
		onReady() {
			// console.log(this.getFiveDay())
			this.initCharts(this.getFiveDay()[4], this.getFiveDay()[0])
		},
		methods: {
			getOptFn() {
				return {
					dataLabel: false,
					color: ["#1890FF"],
					padding: [15, 15, 0, 15],
					yAxis: {
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						data: [{
								position: "left",
								title: "",
								min: 0,
								max: 100,
							},
							{
								position: "right",
								min: 0,
								max: 110,
								title: "",
								textAlign: "left"
							},

						]
					},
					xAxis: {
						disabled: false
					},
					extra: {
						line: {
							type: "curve",
							animation: "horizontal"
						}
					}

				}
			},
			getFiveDay() {
				const today = new Date();
				const lastFiveDays = [];

				for (let i = 0; i < 5; i++) {
					const date = new Date(today.getTime() - (i + 1) * 24 * 60 * 60 * 1000);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					lastFiveDays.push(`${year}-${month}-${day}`);
				}

				return lastFiveDays;
			},
			choseDateFn() {
				// console.log()
				this.$refs.calendar.open()
			},
			confirm(e) {
				// console.log(e)
				this.opts.forEach(item => {
					console.log(item)
					item.xAxis.disabled = true
				})
				this.initCharts(e.range.before, e.range.after)
			},
			changeDate(type) {
				if (type == 'day') {
					this.opts.forEach(item => {
						console.log(item)
						item.xAxis.disabled = false
					})
					this.opts.xAxis.disabled = false
					this.leftNum = 10
					this.initCharts(this.getFiveDay()[4], this.getFiveDay()[0])
				} else {
					this.leftNum = 160
					let date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-'
					this.initCharts(date + '01', date + '30')
					// this.opts.xAxis.disabled = true
					this.opts.forEach(item => {
						console.log(item)
						item.xAxis.disabled = true
					})
				}

				// this.initCharts('2023-10-23', '2023-10-27')
			},
			navgo() {
				uni.navigateTo({
					url: '/pages/index3/index'
				})
			},
			backFn() {
				uni.navigateBack()
			},
			initCharts(start_time, end_time) {
				landEnvDataChartAPI({
					user_id: 307,
					start_time,
					end_time
				}).then(res => {
					res.data.forEach((item, index) => {
						this.opts.push(this.getOptFn())
						// console.log()
						this.opts[index].yAxis.data[0].max = item.max
						this.opts[index].yAxis.data[1].max = item.max
					})
					// console.log(res.data[0].max)
					this.baseData = res.data
					let datas = this.baseData
					this.baseData.forEach((item, index) => {
						this.getServerData(item, index)
					})
				})

			},

			getServerData(datas, index) {
				setTimeout(() => {
					let res = {
						categories: datas['create_time'],
						series: [{
							name: this.xInfo[index].name,
							index: 1,
							type: "lines",
							data: datas[this.xInfo[index].data]
						}]
					};
					this.chartData[index] = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style lang="less" scoped>
	.head {
		// height: 10vh;
		display: flex;
		justify-content: space-between;
		align-items: center;

		// background-color: red;
		.subsection {
			display: flex;
			width: 300.12rpx;
			height: 98.13rpx;
			background-color: #F4F4F4;
			border-radius: 50.82rpx 50.82rpx 50.82rpx 50.82rpx;
			line-height: 5vh;
			position: relative;

			.subsection-li {
				width: 150.7rpx;
				height: 84.11rpx;
				border-radius: 50.82rpx 50.82rpx 50.82rpx 50.82rpx;
				text-align: center;
				line-height: 94rpx;
				z-index: 8;
				// margin-top: 10rpx;

			}

			.act {
				position: absolute;
				width: 130.7rpx;
				height: 84.11rpx;
				border-radius: 50.82rpx 50.82rpx 50.82rpx 50.82rpx;
				background-color: #fff;
				top: 50%;
				transform: translateY(-50%);
				transition: .5s;

			}
		}

		.set {
			width: 159.46rpx;

			height: 63.08rpx;
			font-size: 29.79rpx;
			background-color: #0BC677;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			color: white;
			text-align: center;
			line-height: 63rpx;
			display: flex;
			align-items: center;
		}
	}

	.tit {
		text-align: center;
		margin: 30rpx 0;
		font-size: 36.8rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;
		border: 1px solid black;
		margin-bottom: 40rpx;
	}

	.detect {
		.line {
			width: 7.01rpx;
			height: 31.54rpx;
			background-color: #4CC593;
			display: inline-block;
			margin-right: 10rpx;
		}

		.detecttit {
			font-size: 31.54rpx;
			display: flex;
			align-items: center;
		}

		.content {
			padding-top: 20rpx;
		}


	}
</style>