TraceabilityAPP/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(10)">
						天
					</view>
					<view class="subsection-li" @click="changeDate(160.7)">
						月
					</view>
					<view class="act" :style="{left:leftNum+'rpx'}">

					</view>
				</view>
				<view class="set" @tap="navgo">
					<view class="" style="margin: 0 10rpx;">
						<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" :chartData="chartData[index]" />
				</view>

			</view>


		</view>
	</view>

</template>

<script>
	import {
		landEnvDataChartAPI
	} from "@/api/plant.js"
	export default {
		data() {
			return {
				aaa: [{
					"soil_temp": [
						10, 9, 9, 8, 7, 6, 5, 4, 5, 7, 5, 8, 9, 6, 8, 4, 8
					],
					"create_time": [
						"10-1",
						"",
						"",
						"", "",
						"",
						"",
						"", "",
						"",
						"",
						"", "",
						"",
						"",
						"", "",
						"",
						"",
						"", "",
						"",
						"10-25",
						"", "",
						"",
						"",
						"", "",
						"",
						"",
						"", "",
						"",
						"",
						"", "",
						"",
						"",
						"10-30",
					]
				}, ],

				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: [],

				//您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					legend: {
						show: false,
						fontSize: 0
					},

					color: ["#1890FF"],
					padding: [15, 15, 0, 15],
					yAxis: {
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						data: [{
								position: "left",
								title: "",
								min: 0,
								max: 10,
							},
							{
								position: "right",
								min: 0,
								max: 10,
								title: "",
								textAlign: "left"
							},

						]
					},

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

				},
			};
		},
		onReady() {
			this.initCharts('2023-10-20', '2023-10-27')
		},
		methods: {
			changeDate(num) {
				// 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 => {
					// this.baseData = res.data
					this.baseData = this.aaa
					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>