bigDataApp/pages/environment/history.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;width: 100%;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="历史数据"></uni-nav-bar>
		</view>
		<view class="graph">
			<highcharts :chartOptions="options" :styles="styles" ref="simpleChart"></highcharts>
			<!-- <p class="none_hint">暂无数据</p> -->
			<view class="selecttimes">
				<view class="newtimes">
					<view class="newtimes_state" @click="pickshow = !pickshow">
						<view class="oldtimes_left">
							<image src="../../static/image/prevention/841f87bfd8abb1b09610fa0789f9d8e.png" mode=""></image>
							开始时间：{{this.begintime|timeFormat()}}
						</view>
						<view class="oldtimes_left">
							<u-icon name="arrow-down"></u-icon>
						</view>
						<u-picker mode="time" v-model="pickshow" :params="params" @confirm="pickone"></u-picker>
					</view>
					<view class="newtimes_end" @click="picktwoshow = !picktwoshow">
						<view class="oldtimes_left">
							<image src="../../static/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png" mode=""></image>
							结束时间：{{this.end|timeFormat()}}
						</view>
						<view class="oldtimes_left">
							<u-icon name="arrow-down"></u-icon>
						</view>
						<u-picker mode="time" v-model="picktwoshow" :params="params" @confirm="picktwo"></u-picker>
					</view>
					<p class="tishi" v-if="tishiTF">请选择正确的结束时间</p>
					<view class="btnser" @click="serter">
						搜 索
					</view>
				</view>
			</view>
			<view class="condition">
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
					<!-- @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" -->
					<table class="table">
						<tr class="tr">
							<th class="th">日期</th>
							<th class="th" v-for="key,index in historydatas.conf" :key="'a'+index" v-if="key">{{key.replace("#","(")+")"}}</th>
						</tr>
						<tr class="tr" v-for="(items,index) in historydatas.data" :key="'b'+index" v-if="!forbidden">
							<td class="td">{{items.time|timeFormat()}}</td>
							<td class="td" v-for="keys in items.dat" v-if="keys">{{parseFloat(keys)==-99.99?"N/A":parseFloat(keys)}}</td>
						</tr>
						<tr class="tr" v-if="forbidden">
							<td class="td" v-for="item in 10">暂无数据</td>
						</tr>
					</table>
				</scroll-view>
				<view class="pagenumber">
					<button @click="prev">上一页</button>
					<view class="pagenumber_page">
						第{{page}}页
					</view>
					<button @click="next" :disabled="forbidden">下一页</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import highcharts from "@/components/highcharts/highcharts"
	var presenttime = +new Date();
	export default {
		data() {
			return {
				styles: {
					// width: "650rpx",
					height: "400rpx"
				},
				options: {
					lang:{
						noData:"暂无数据"
					},
					chart: {
						type: 'spline', //指定图表的类型，默认是折线图（line）
						zoomType: 'x',
						panning: true,
						panKey: 'shift'
					},
					title: {
						text: '' // 标题
					},
					credits: {
						enabled: false
					},
					xAxis: {
						type: 'datetime',
						crosshair: true, //十字基准线
						dateTimeLabelFormats: {
							//根据时间间距X轴自动显示哪种格式
							millisecond: "%H:%M:%S.%L",
							second: "%H:%M:%S",
							minute: "%H:%M",
							hour: "%H:%M",
							day: "%m-%d",
							week: "%m-%d",
							month: "%Y-%m",
							year: "%Y",
						},
					},
					yAxis: {
						title: false,
					},
					legend: {
						// layout: 'vertical',
						// align: "center",
						// verticalAlign: "top",
					},
					tooltip: {
						// crosshairs: true,
						shared: true, //折线共享
						headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
					},
					plotOptions: {
						spline: {
							marker: {
								enabled: false
							},
						}
					},
					series: [],
				},
				id: "",
				begintime: '', //开始时间
				end: '', //结束时间
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				titleidnex: 0,
				pickshow: false, //选择时间一
				picktwoshow: false, //选择时间二
				params: { //时间格式
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				tishiTF: false, //提示
				historydatas: [],
				page: 1,
				forbidden: false
			}
		},
		methods: { //weather.weather.qxz_detail
			async listhistorydata(datas) { //上传时间
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=weather.weather.qxz_detail',
					data: {
						device_id: datas,
						begin: parseInt(this.begintime),
						end: parseInt(this.end),
						page: this.page
					}
				})
				this.historydatas = res
				console.log(this.historydatas)
				if (res.data.length == 0) {
					this.forbidden = true
				} else {
					this.forbidden = false
				}
			},
			async historydata(datas) { //上传时间
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=weather.weather.qxz_data_chart',
					data: {
						device_id: datas,
						begin: parseInt(this.begintime),
						end: parseInt(this.end)
					}
				})
				// this.options.series[0].name = res.conf.e1.replace("#","(") + ")"
				console.log(res)
				for (var Key in res.conf) {
					let obj = {}
					if (res.conf[Key] != '') {
						obj.name = res.conf[Key].replace("#", "(") + ")"
						obj.data = []
						obj.color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() *
							256) + ")"
						this.options.series.push(obj)
					}
				}
				for (var i = 0; i < res.data.length; i++) {
					for (var key in res.data[i].dat) {
						if (res.data[i].dat[key] != "") {
							let arr = []
							if (parseFloat(res.data[i].dat[key]) != -99.99) {
								arr.push(res.data[i].time * 1000 + 8 * 3600000, parseFloat(res.data[i].dat[key]))
								for (var j = 0; j < this.options.series.length; j++) {
									if (this.options.series[j].name.indexOf(key) != -1) {
										this.options.series[j].data.push(arr)
									}
								}

							}

						}
					}
				}
				this.$forceUpdate()
			},
			pickone(e) { //开始时间
				this.begintime = +new Date(e.year, e.month - 1, e.day, e.hour, e.minute) / 1000
				if (this.newtime < this.oldtime) {
					this.tishiTF = true
				} else {
					this.tishiTF = false
				}
			},
			picktwo(e) { //结束时间
				this.end = +new Date(e.year, e.month - 1, e.day, e.hour, e.minute) / 1000
				if (this.newtime < this.oldtime) {
					this.tishiTF = true
				} else {
					this.tishiTF = false
				}
			},
			serter() {
				if (this.tishiTF == false) {
					this.historydata(this.id)
					this.listhistorydata(this.id)
				}
			},
			prev() { //上一页
				if (this.page > 1) {
					this.page--
					this.listhistorydata(this.id)
				}
			},
			next() { //下一页
				this.page++
				this.listhistorydata(this.id)
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad(option) {
			this.id = option.device_id
			this.end = presenttime / 1000
			this.begintime = presenttime / 1000 - 24 * 60 * 60
			this.historydata(option.device_id)
			this.listhistorydata(option.device_id)
		}
	}
</script>

<style lang="scss">
	.graph {
		position: absolute;
		top: 74px;
		width: 90%;
		left: 5%;

		.none_hint {
			font-size: 32rpx;
			font-weight: 700;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -64rpx;
		}
	}

	.shuju_one_title {
		width: 70%;
		margin: 0 auto;
		display: flex;

		.tltle_text {
			width: 25%;
			border: 2rpx solid #B2B2B2;
			color: #B2B2B2;
			text-align: center;
			font-size: 24rpx;
			height: 50rpx;
			line-height: 50rpx;
		}

		.title_text_color {
			width: 25%;
			border: 2rpx solid #28AE4F;
			color: #28AE4F;
			text-align: center;
			font-size: 24rpx;
			height: 50rpx;
			line-height: 50rpx;
		}
	}

	.selecttimes {
		width: 100%;
		box-shadow: 0 0 10rpx #bcb9ca;
		margin-top: 20rpx;

		.tishi {
			width: 90%;
			margin: 0 auto;
			color: #f00000;
			text-align: center;
			font-size: 24rpx;
		}

		.btnser {
			width: 90%;
			margin: 10rpx auto;
			color: #FFFFFF;
			text-align: center;
			font-size: 28rpx;
			background-color: #58BD4D;
			border-radius: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
		}

		.newtimes {
			width: 100%;
			padding: 20rpx 20rpx;
			box-sizing: border-box;

			.newtimes_state,
			.newtimes_end {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.oldtimes_left {
					position: relative;
					padding-left: 36rpx;
					font-size: 28rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: top;
						position: absolute;
						top: 7rpx;
						left: 0;
					}
				}
			}
		}
	}

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

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

			.tr {
				display: flex;
				overflow: hidden;

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

				// 			.th:last-child,
				// 			.td:last-child {
				// 				width: 300rpx;
				// 			}

				// 			.th:nth-last-child(2),
				// 			.th:nth-last-child(3),
				// 			.td:nth-last-child(2),
				// 			.td:nth-last-child(3) {
				// 				width: 200rpx;
				// 			}
			}
		}

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

			button {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
				background-color: #17BB89;
				color: #FFFFFF;
			}

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