<template>
	<view class="" style="padding: 30rpx;">
		<view style="height: var(--status-bar-height)"></view>
		<view class="" style="display: flex;align-items: center;font-size: 33.29rpx;margin-bottom: 20rpx;">
			<u--image @tap="backFn" src="/static/img/FH.png" width="50.82rpx" height="50.82rpx" alt=""></u--image>
			<text>生态概况</text>
		</view>
		<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="subsection-li sct" @click="changeDate(311.4)">
						月
					</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">

					<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" />
				</view>
				<view class="charts-box">
					<qiun-data-charts type="mix" :opts="opts2" :chartData="chartData2" />
				</view>
			</view>
			<view class="detect">
				<view class="detecttit">
					<text class="line"></text> 种植监测
				</view>
				<view class="content" style=" text-indent: 2em;">
					<view class="">
						监测植物的水分含量，确保植物不会因缺水而枯萎或者过度浇水而导致根部窒息。监测植物所需的养分含量，确保植物能够获得足够的养分来支持其生长和发育。监测植物所接受的光照强度和光谱，确保植物能够获得足够的光照来支持其光合作用。监测植物周围的温度，确保植物不会因温度过高或过低而受到影响。监测植物周围的空气质量，确保植物不会受到有害气体的影响。
					</view>
					<view class="">

						通过这些监测，种植者可以更好地了解植物的生长状况，并根据需要进行调整，确保植物能够健康生长。同时，这些监测也可以用于预测植物的收获时间和收获量，从而帮助更好的规划种植计划
					</view>

				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		companyMine
	} from "@/api/test.js"
	export default {
		data() {
			return {
				leftNum: 10,
				chartData: {},
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,

					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: ""
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "",
								textAlign: "left"
							},

						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,

					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: ""
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "",
								textAlign: "left"
							},

						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				}


			};
		},
		onReady() {
			let datas = [
				[30, 32, 32, 38, 36, 30],
				[29, 26, 27, 25, 26, 21],
				[42, 41, 36, 30, 35, 36],
				[189, 98, 88, 55, 131, 195],
				[98, 99, 92, 93, 99, 90],
				[16, 19, 23, 16, 24, 27],
				["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
				["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
			]

			this.getServerData(datas)
		},
		onShow() {
			companyMine({
				id: 1,
				flag: 1
			}).then(res => {
				console.log(res.data)
			})
		},
		methods: {
			changeDate(num) {
				let datas = []
				this.leftNum = num
				if (num == 10) {
					datas = [
						[30, 32, 32, 38, 36, 30],
						[29, 26, 27, 25, 26, 21],
						[42, 41, 36, 30, 35, 36],
						[189, 98, 88, 55, 131, 195],
						[98, 99, 92, 93, 99, 90],
						[16, 19, 23, 16, 24, 27],
						["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
						["12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
					]
				} else if (num == 160.7) {
					datas = [
						[36, 33, 24, 28, 26, 32],
						[26, 29, 26, 30, 31, 28],
						[46, 40, 45, 43, 40, 46],
						[93, 47, 63, 167, 181, 114],
						[88, 97, 89, 92, 95, 96],
						[17, 18, 19, 18, 16, 17],
						["10-12", "10-13", "10-14", "10-15", "10-16", "10-17"],
						["10-12", "10-13", "10-14", "10-15", "10-16", "10-17"],
					]
				} else if (num == 311.4) {
					datas = [
						[35, 32, 36, 38, 33, 37],
						[22, 27, 28, 23, 25, 24],
						[40, 43, 41, 46, 42, 46],
						[106, 13, 155, 18, 114, 194],
						[94, 89, 87, 86, 85, 87],
						[16, 17, 18, 20, 21, 19],
						["5月", "6月", "7月", "8月", "9月", "10月"],
						["5月", "6月", "7月", "8月", "9月", "10月"],
					]
				}
				this.getServerData(datas)
			},


			navgo() {
				uni.navigateTo({
					url: '/pages/index3/index'
				})
			},
			backFn() {
				uni.navigateBack()
			},
			getServerData(datas) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: datas[6],
						series: [{
								name: "土壤温度(℃)",
								index: 1,
								type: "column",
								data: datas[0]
							},

							{
								name: "降雨量(mm)",
								type: "line",
								color: "#2fc25b",
								data: datas[1]
							},
							{
								name: "湿度(wc)",
								type: "line",
								color: "pink",
								data: datas[2]
							},

						]
					};
					let res2 = {
						categories: datas[7],

						series: [

							{
								name: "光照(lux)",
								type: "line",
								color: "#2fc25b",
								data: datas[4]
							},
							{
								name: "风速(m/h)",
								type: "line",
								color: "blue",
								data: datas[5]
							},

						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					this.chartData2 = JSON.parse(JSON.stringify(res2));
				}, 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: 466.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: 131.43rpx;
			height: 63rpx;
			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>