bigDataApp/pages/environment/gshistory.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative; top: 44px">
			<view style="
          position: fixed;
          z-index: 10000000;
          width: 100%;
          background-color: #000000;
        ">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="历史数据"></uni-nav-bar>
			</view>
		</view>
		<view class="his_box">
			<view class="selecttimes" @click="tiemshow = !tiemshow">
				<view class="timesbox">
					<image
						:src="'http://www.hnyfwlw.com:8006/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
						mode=""></image>
					<p>{{ timetab(begintime) }}</p>
					<p class="or">~</p>
					<p>{{ timetab(end) }}</p>
					<u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
				</view>
				<u-calendar v-model="tiemshow" mode="range" @change="tiemchange"></u-calendar>
			</view>
			<view class="shuju_one">
				<view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
					暂无数据
				</view>
				<view class="canvastishi" v-if="dataloadingtf">
					<p class="dataloading">加载中</p>
				</view>
				<canvas v-show="!tiemshow" canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
					@touchstart="touchLineA($event)" @touchmove="moveLineA($event)" @touchend="touchEndLineA($event)"
					disable-scroll="true" :style="{
            width: cWidth * pixelRatio + 'px',
            height: cHeight * pixelRatio + 'px',
            transform: 'scale(' + 1 / pixelRatio + ')',
            'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
            'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
          }"></canvas>
			</view>
			<view class="condition">
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
					<table class="table">
						<tr class="tr">
							<th class="th" v-for="(item, index) in thdata" :key="'a' + index">
								{{ item }}
							</th>
						</tr>
						<tr class="tr" v-for="(items, indexs) in historylistdata" :key="'b' + indexs" v-if="!forbidden">
							<td class="td">{{ items.uptime | timeFormat() }}</td>
							<!-- <td class="td">{{ items.ats }}</td>
              <td class="td">{{ items.at }}</td> -->
							<td class="td" v-for="(item, index) in items.temp" :key="'c' + index">
								{{ item }}
							</td>
							<td class="td" v-for="(item, index) in items.swc" :key="'d' + index">
								{{ item }}
							</td>
							<!-- <td class="td">{{ items.atm }}</td> -->
						</tr>
						<tr class="tr" v-if="forbidden">
							<td class="td" v-for="item in 13">暂无数据</td>
						</tr>
					</table>
				</scroll-view>
				<view class="pagenumber">
					<button @click="prev">上一页</button>
					<view class="pagenumber_page"> 第 {{ page }} 页 </view>
					<view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
					<button @click="next">下一页</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from "../../components/js_sdk/u-charts/u-charts/u-charts.js";
	var canvaColumnA = null;
	export default {
		data() {
			return {
				tiemshow: false, //时间筛选弹框
				begintime: "", //开始时间
				end: "", //结束时间
				dataloadingtf: true,
				canvastishiTF: false,
				device_id: "", //设备ID
				thdata: [
					"上传时间",
					// "空气湿度(%RH)",
					// "空气温度(℃)",
					// "10cm土壤温度(%RH)",
					// "20cm土壤温度(%RH)",
					// "30cm土壤温度(%RH)",
					// "10cm土壤湿度(%RH)",
					// "20cm土壤湿度(%RH)",
					// "30cm土壤湿度(%RH)",
					// "大气压强(Pa)",
				], //表格抬头
				forbidden: false,
				historylistdata: [], //历史数据
				pagesum: 1,
				page: 1,
				cWidth: "",
				cHeight: "",
				pixelRatio: 1,
				inidepth: "",
			};
		},
		methods: {
			tiemchange(e) {
				//切换时间
				this.begintime = parseInt(+new Date(e.startDate) / 1000);
				this.end = parseInt(+new Date(e.endDate) / 1000);
				this.histprydatas();
			},
			timetab(e) {
				//时间转换
				e = new Date(e * 1000);
				var year = e.getFullYear();
				var month =
					e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1;
				var day = e.getDate() < 10 ? "0" + e.getDate() : e.getDate();
				var time = year + "/" + month + "/" + day;
				return time;
			},
			async histprydatas() {
				//历史数据
				this.dataloadingtf = true;
				const res = await this.$myRequest({
					url: "/api/api_gateway?method=weather.weather.nd_data",
					data: {
						device_id: this.device_id,
						page: this.page,
						begin: this.begintime,
						end: this.end,
					},
				});
				this.dataloadingtf = false;
				console.log(res.nums, res, 'gs history');
				this.pagesum = Math.ceil(res.nums / 10) || 1;
				this.historylistdata = res.dat_list;
				// ============ 摘抄自pc端 start
				let titleList = ['上传时间'];
				var reddata = [];
				var reddata2 = [];
				var reddata3 = [];
				var ats = 0; //湿度
				var at = 0; //温度
				var atm = 0; //大气压强
				this.inidepth = res.depth.split(",");
				reddata.forEach((val) => {
					if (!val[1]) {
						ats++;
					}
				});
				if (ats == reddata.length) {
					this.skysd = false;
				} else {
					this.skysd = true;
					titleList.push("空气湿度(%RH)");
				}
				// 温度
				reddata2.forEach((val2) => {
					if (!val2[1]) {
						at++;
					}
				});
				if (at == reddata2.length) {
					this.skywd = false;
				} else {
					this.skywd = true;
					titleList.push("空气温度(°C)");
				}
				// 大气压强
				reddata3.forEach((val) => {
					if (!val[1]) {
						atm++;
					}
				});
				if (atm == reddata3.length) {
					this.skyyq = false;
				} else {
					this.skyyq = true;
					titleList.push("大气压强(Pa)");
				}
				this.thdata = titleList;
				
				

				// --------------------------------- 摘抄end
				for (var i = 0; i < this.historylistdata.length; i++) {
					this.historylistdata[i].temp = this.historylistdata[i].temp.split(",");
					this.historylistdata[i].swc = this.historylistdata[i].swc.split(",");
				}
				var arr1 = [];
				var arr2 = [];
				var xtitle = [];
				var obj = [{
						name: "空气温度",
						data: [],
						color: "#00E29D",
					},
					{
						name: "空气湿度",
						data: [],
						color: "#6CBBFF",
					},
				];
				var arr3 = [];
				var k = 0;
				for (var i = 0; i < res.dat_char.length; i++) {
					var times = new Date(res.dat_char[i].uptime * 1000);
					xtitle.unshift(
						times.getMonth() +
						1 +
						"/" +
						times.getDate() +
						"-" +
						times.getHours() +
						":" +
						times.getMinutes()
					);
					arr1.unshift(res.dat_char[i].at == "" ? "0" : res.dat_char[i].at); //空气温度
					arr2.unshift(res.dat_char[i].ats == "" ? "0" : res.dat_char[i].ats); //空气湿度
					res.dat_char[i].temp = res.dat_char[i].temp.split(",");
					res.dat_char[i].swc = res.dat_char[i].swc.split(",");
					for (var j = 0; j < res.dat_char[i].temp.length; j++) {
						arr3.unshift(
							res.dat_char[i].temp[j] == "" ? "0" : res.dat_char[i].temp[j]
						); //10cm土壤温度
					}
					res.dat_char[i].temp.forEach((items, indexs) => {
						var tempdata = [];
						var tempdatas = [];
						tempdata.push(Number(items));
						tempdatas.push(Number(res.dat_char[i].swc[indexs]));
						var temparrs = {
							name: 10 + indexs * res.topic + "cm土壤温度",
							data: tempdata,
						};
						var temparr = {
							name: 10 + indexs * res.topic + "cm土壤湿度",
							data: tempdatas,
						};
						obj.push(temparr);
						obj.push(temparrs);
					});
				}
				obj[0].data = arr1;
				obj[1].data = arr2;
				var listArr = [];
				obj.forEach(function(el, index) {
					for (var i = 0; i < listArr.length; i++) {
						// 对比相同的字段key，相同放入对应的数组中
						if (listArr[i].name == el.name && el.data !== undefined) {
							listArr[i].data.unshift(el.data[0]);
							return;
						}
					}
					// 第一次对比没有参照，放入参照
					listArr.push({
						name: el.name,
						data: el.data,
					});
				});
				console.log(listArr);
				if (listArr.length == 0) {
					this.canvastishiTF = false;
				} else {
					this.canvastishiTF = true;
				}
				// ------------ 摘抄自PC start
				if (this.historylistdata[0]) {
				  for (let i = 0; i < this.historylistdata[0].temp.length; i++) {
					var num = this.inidepth[i];
					this.thdata.push(num + "cm土壤温度(℃)");
				  }
				  for (let i = 0; i < this.historylistdata[0].temp.length; i++) {
					var num = this.inidepth[i];
					this.thdata.push(num + "cm土壤湿度(%RH)");
				  }
				}
				// ----------------- 摘抄end
				this.showColumn("canvasColumnA", xtitle, listArr);
				// console.log(this.historylistdata)
			},
			prev() {
				//上一页
				if (this.page > 1) {
					this.page--;
					this.histprydatas();
				}
			},
			next() {
				//下一页
				if (this.page < this.pagesum) {
					this.page++;
					this.histprydatas();
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1,
				});
			},
			showColumn(id, xtitle, xinfo) {
				var _self = this;
				canvaColumnA = new uCharts({
					canvasId: id,
					type: "line",
					legend: {
						position: "top",
					},
					fontSize: 11,
					background: "#FFFFFF",
					pixelRatio: 1,
					animation: true,
					dataLabel: false,
					categories: xtitle,
					series: xinfo,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: "grid",
						gridType: "dash",
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						// scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: "#F7F7FF", //默认为 #EFEBEF
						scrollColor: "#DEE7F7", //默认为 #A6A6A6
					},
					yAxis: {},
					width: _self.cWidth * 1,
					height: _self.cHeight * 1,
					extra: {
						line: {
							type: "curve",
						},
					},
				});
			},
			touchLineA(e) {
				console.log(e);
				canvaColumnA.scrollStart(e);
			},
			moveLineA(e) {
				canvaColumnA.scroll(e);
			},
			touchEndLineA(e) {
				canvaColumnA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumnA.showToolTip(e, {
					format: function(item, category) {
						return category + " " + item.name + ":" + item.data;
					},
				});
			},
		},
		onLoad(option) {
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			this.device_id = option.id;
			this.end = parseInt(+new Date() / 1000);
			this.begintime = parseInt(this.end - 24 * 60 * 60);
			this.histprydatas();
		},
	};
</script>

<style lang="scss">
	.his_box {
		width: 100%;
		top: 200rpx;
		position: relative;
	}

	.selecttimes {
		width: 90%;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		font-size: 28rpx;

		.timesbox {
			display: flex;
			justify-content: space-around;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 6rpx;
			}

			.icon {
				color: #949494;
				text-align: right;
				margin-left: 30rpx;
			}
		}

		/deep/.u-calendar__action {
			display: flex;
			justify-content: space-around;

			.u-calendar__action__text {
				line-height: 25px;
			}
		}
	}

	.shuju_one {
		width: 90%;
		margin: 20px auto;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding-top: 20rpx;
		height: 550rpx;

		.canvastishi {
			font-size: 32rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -64rpx;
			margin-top: -21rpx;

			.dataloading:after {
				overflow: hidden;
				display: inline-block;
				vertical-align: bottom;
				animation: ellipsis 2s infinite;
				content: "\2026";
			}

			@keyframes ellipsis {
				from {
					width: 2px;
				}

				to {
					width: 15px;
				}
			}
		}
	}

	.condition {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		box-shadow: 0 0 10rpx #bcb9ca;
		margin: 0 auto 30rpx;

		.scroll-X {
			width: 95%;
			margin: 20rpx auto;

			.tr {
				display: flex;
				overflow: hidden;

				.th,
				.td {
					display: inline-block;
					padding: 5rpx;
					width: 300rpx;
					text-align: center;
					height: 52rpx;
					line-height: 52rpx;
					border: 2rpx solid #f1f1f1;
				}
			}

			.tr:nth-child(2n-1) {
				background-color: #f5fff8;
			}

			.tr:first-child {
				background-color: #57c878;
				color: #fff;
			}
		}

		.pagenumber {
			display: flex;
			margin: 20rpx auto;

			button {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
				background-color: #57c878;
				color: #ffffff;
			}

			.pagenumber_page {
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
</style>