wszhyWx/pages/target_water_fertilizer_PH/target_water_fertilizer_PH.vue

<template>
	<view class="target_water_fertilizer_PH">
		<!-- 目标水肥PH -->
		<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false"
			title="目标水肥PH" title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>

		<view class="navbar">
			<image src="../../static/PH_bg.png" mode=""></image>
		</view>

		<view class="content">
			<view class="number">
				{{ valuePH }}
			</view>
			<view class="data_analysis">
				<image src="../../static/data_analysis.png" mode=""></image>
				<text>数据分析</text>
			</view>
			<view class="echart">
				<view class="title">
					<image src="../../static/icon_ph.png" mode=""></image>
					<text>目标水肥PH</text>
				</view>
				<view id="echart_p">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true"
						background="none" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部导航背景
				background: {
					backgroundColor: 'transparent',
				},
				
				equipmentId:'',

				chartData: {},
				opts: {
					color: ["#24B383"],
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						scrollAlign: 'left',
						scrollColor: '#24B383',
						scrollBackgroundColor: '#DFE5E4',
						itemCount: 3,
						boundaryGap: "justify",
						format: "",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							max: 14
						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				
				categoriesList:[],
				valuePH:'',
				valuePHList:[]
			};
		},
		onReady() {
			// this.getEchartsData()
			// this.getServerData();
			
		},
		onLoad(option) {
			if(option.id){
				this.equipmentId = option.id
				console.log(this.equipmentId);
			}
			if(option.data){
				this.valuePH = option.data
				console.log(this.valuePH);
			}
		},
		mounted() {
			  this.getEchartsData()
		},
		methods: {
			getServerData() {
				
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories:  this.categoriesList,
						series: [{
							name: "目标水肥PH",
							data: this.valuePHList
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			
			// 获取折线图数据
			getEchartsData(){
				this.$http({
					url:this.api.chart_fsdata + '?equipmentId=' + this.equipmentId,
					method:'POST'
				}).then(res=>{
					console.log(res,'获取折线图数据');
					res.data.forEach((i,index)=>{
						this.categoriesList.push(i.time);
						this.valuePHList.push(i.value['目标水肥PH'])
					})
					 this.getServerData();
					console.log(this.categoriesList,'this.categoriesList');
					console.log(this.valuePHList,'this.valuePHList');
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.target_water_fertilizer_PH {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		background-color: #F5F6FA;

		.navbar {
			width: 100%;
			height: 100%;

			>image {
				width: 750rpx;
				height: 440rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.content {
			position: absolute;
			z-index: 2;
			box-sizing: border-box;
			padding: 0 30rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.number {
				font-size: 100rpx;
				font-family: Nexa Bold;
				font-weight: 400;
				color: #FFFFFF;
			}

			.data_analysis {
				width: 100%;
				text-align: center;
				margin-bottom: 59rpx;

				>image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				>text {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.echart {
				width: 690rpx;
				height: 1060rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-top: 30rpx;

				.title {
					width: 200rpx;
					height: 44rpx;
					background: #EFFCF7;
					border: 2px solid rgba(58, 187, 144, 0.25);
					border-radius: 22rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;

					>image {
						width: 36rpx;
						height: 10rpx;
						margin-right: 10rpx;
					}

					>text {
						font-size: 20rpx;
						font-family: PingFang-SC-Bold;
						font-weight: bold;
						color: #37BA8E;
					}
				}

				#echart_p {
					width: 100%;
					height: calc(100% - 74rpx);
					box-sizing: border-box;
					padding: 0 20rpx;
				}
			}
		}
	}
</style>