TraceabilityAPP/pages/profile/index.vue

<template>
	<view class="" style="padding: 30rpx;">

		<!-- <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>
	</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 = [
				[20, 23, 25, 19, 23, 24],
				[30, 25, 27, 28, 24, 25],
				[40, 41, 32, 30, 32, 30],
				[20, 23, 25, 19, 23, 24],
				[100, 79, 89, 93, 98, 82],
				[18, 20, 25, 26, 30, 31],
				["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 = [
						[20, 23, 25, 19, 23, 24],
						[30, 25, 27, 28, 24, 25],
						[40, 41, 32, 30, 32, 30],
						[20, 23, 25, 19, 23, 24],
						[100, 79, 89, 93, 98, 82],
						[18, 20, 25, 26, 30, 31],
						["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 = [
						[25, 22, 24, 19, 21, 22],
						[38, 27, 21, 30, 32, 24],
						[45, 43, 35, 33, 38, 40],
						[27, 23, 25, 27, 30, 34],
						[102, 107, 96, 95, 82, 83],
						[19, 21, 26, 25, 22, 19],
						["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 = [
						[29, 32, 38, 31, 23, 24],
						[36, 34, 30, 29, 27, 27],
						[41, 40, 36, 32, 29, 24],
						[29, 23, 25, 30, 34, 36],
						[94, 109, 120, 116, 110, 113],
						[18, 20, 25, 26, 30, 31],
						["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: 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>