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="titleName+echartName" 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 + unit }}
			</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>{{ titleName+echartName }}</text>
				</view>
				<view id="echart_p">
					<qiun-data-charts type="area" :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, 35, 0, 15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					legend: {},
					tooltipShow: true,
					xAxis: {
						disableGrid: true,
						// scrollShow: true,
						labelCount: 4,
						// scrollAlign: 'left',
						// scrollColor: '#24B383',
						// scrollBackgroundColor: '#DFE5E4',
						// itemCount: '5',
						boundaryGap: "justify",
						// format: "",

					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						showTitle: true,
						data: [{
							title: '',
							min: 0,
							// max: '',
							titleOffsetY: -5,
						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},

				categoriesList: [],
				valuePH: '',
				valuePHList: [],
				newValuePHList: [],
				unit: '',

				titleName: '',
				echartName: ''
			};
		},
		onReady() {
			// this.getEchartsData()
			// this.getServerData();

		},
		onLoad(option) {
			// console.log(option);
			if (option.id) {
				this.equipmentId = option.id
			}
			if (option.data) {
				this.valuePH = option.data
			}
			if (option.name) {
				this.echartName = option.name
			}
			if (option.unit) {
				this.unit = option.unit
				this.opts.yAxis.data[0].title = option.unit
			}

			this.titleName = this.getStatus(option.equipmentNumber, option.targetValue)
		},
		mounted() {
			this.getEchartsData()
		},
		methods: {
			getServerData() {

				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categoriesList,
						series: [{
							name: this.titleName + this.echartName,
							data: this.newValuePHList
						}, ]
					};
					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)
					})
					this.getServerData();

					this.categoriesList = this.categoriesList.map(item => {
						return item.split(' ')[1]
					})
					// this.opts.xAxis.itemCount = this.categoriesList.length
					// console.log(this.categoriesList,'this.categoriesList');
					// console.log(this.valuePHList,'this.valuePHList');
					this.newValuePHList = this.valuePHList.map((e, index) => {
						return e[this.titleName + this.echartName] == undefined ? '' : e[this.titleName +
							this.echartName]
					})
					// console.log(this.newValuePHList, '121212212121211111111');
				})
			},

			// 判断是否是平均或者目标,或者是1#
			getStatus(equipmentNumber, targetValue) {
				if (targetValue == 1) {
					return '目标'
				} else if (targetValue == 0 && equipmentNumber == 0) {
					return '1#平均'
				} else if (targetValue == 0 && equipmentNumber == 15) {
					return '2#平均'
				} else if (targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15) {
					return equipmentNumber + '#'
				}
			}
		}
	}
</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 0rpx;
				}
			}
		}
	}
</style>