bigdata_WX/pages/environment/history.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<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 class="graph">
				<view class="canvasbox" v-show="!pickshow&&!picktwoshow">
					<view class="" style="display: flex;justify-content: flex-end;">
						<view class="schedule" @click="pickertfone=!pickertfone">
							<p class="schedule_value">{{titletext[indexone]}}</p>
							<p class="schedule_icon">
								<u-icon name="arrow-down"></u-icon>
							</p>
						</view>
					</view>
					<u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun" :default-selector="[indexone]" :range="titletext"></u-picker>
					<view class="canvastishi" v-if="!canvastishiTF">
						暂无数据
					</view>
					<canvas v-if="canvastishiTF" 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="selecttimes">
					<view class="newtimes">
						<view class="newtimes_state" @click="pickshow = !pickshow">
							<view class="oldtimes_left">
								<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/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="'http://www.hnyfwlw.com:8006/bigdata_app'+'/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" v-if="scrollTF">
					<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
						<!-- @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" -->
						<table class="table" :style="{width:300+240*datalength+'rpx'}">
							<tr class="tr">
								<th class="th">日期</th>
								<th class="th" v-for="key,index in historydatas.conf" :key="index" v-if="key">{{key.replace("#","(")+")"}}</th>
							</tr>
							<tr class="tr" v-for="(items,index) in historydatas.data" :key="index" v-if="!forbidden">
								<td class="td">{{items.time|timeFormat()}}</td>
								<td class="td" v-for="item,indexss in datalength" :key="indexss">{{parseFloat(items.dat["e"+(indexss+1)])==-99.99?"N/A":parseFloat(items.dat["e"+(indexss+1)])}}</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>
						<view class="pagenumber_page">
							共 {{pagesum}} 页
						</view>
						<button @click="next" :disabled="forbidden">下一页</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/js_sdk/u-charts/u-charts/u-charts.js';
	var canvasColumnA = null;
	var presenttime = +new Date();
	export default {
		data() {
			return {
				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				canvastishiTF: false,
				id: "",
				begintime: '', //开始时间
				end: '', //结束时间
				titletext: [],//折线图数据切换列表数据
				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,
				pagesum: 1,
				datalength:0,
				scrollTF:true,
				indexone:0,//折线图数据切换列表下标
				pickertfone:false,//折线图数据切换列表
				chartdata:{}//折线图数据
			}
		},
		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(res)
				this.datalength=0
				for(var key in res.conf){
					if(res.conf[key]!=""){
						this.datalength++
					}
				}
				console.log(this.datalength)
				if(this.datalength==0){
					this.scrollTF = false
				}else{
					this.scrollTF = true
				}
				this.pagesum = Math.ceil(res.nums / 10) + 1
				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)
					}
				})
				console.log(res)
				this.chartdata = res
				if (res.data.length == 0) {
					this.canvastishiTF = false
				} else {
					this.canvastishiTF = true
					for (var key in res.conf) {
						if(res.conf[key]!=""){
							this.titletext.push(res.conf[key])
						}
					}
					this.conflist(res,"e1")
				}
			},
			conflist(res,eindex){
				var xtitle = []
				var linearr = []
				for (var i = 0; i < res.data.length; i++) {
					var times = new Date(res.data[i].time * 1000)
					xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getMinutes())
				}
				var obj = {}
				obj.name = res.conf[eindex]
				var arr = []
					for (var i = 0; i < res.data.length; i++) {
						if (parseFloat(res.data[i].dat[eindex]) != -99.99) {
							arr.push(parseFloat(res.data[0].dat[eindex]))
						}
					}
				obj.data = arr
				if (obj.name) {
						linearr.push(obj)
					}
				this.canvastishiTF = linearr.some((item) => {
					return item.data.length != 0;
				})
				console.log(this.canvastishiTF)
				this.showColumn("canvasColumnA", xtitle, linearr)
			},
			confirmFun(index){
				console.log(index)
				this.indexone = index[0]
				var str = 'e'+(index[0]+1)
				console.log(str)
				this.conflist(this.chartdata,str)
			},
			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)
					uni.showToast({
						title: '搜索成功',
						duration: 2000
					});
				}
				
			},
			prev() { //上一页
				if (this.page > 1) {
					this.page--
					this.listhistorydata(this.id)
				}
			},
			next() { //下一页
				this.page++
				this.listhistorydata(this.id)
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			showColumn(id, xtitle, xinfo) {
				var _self = this
				canvasColumnA = 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) {
				canvasColumnA.scrollStart(e);
			},
			moveLineA(e) {
				canvasColumnA.scroll(e);
			},
			touchEndLineA(e) {
				canvasColumnA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasColumnA.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.id = option.device_id
			this.end = presenttime / 1000
			this.begintime = presenttime / 1000 - 24 * 60 * 60
			console.log(new Date(1616145097 * 1000), new Date(1616231497 * 1000))
			this.historydata(option.device_id)
			this.listhistorydata(option.device_id)
		}
	}
</script>

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

		.canvasbox {
			width: 100%;
			height: 550rpx;
			position: relative;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding-top: 20px;
			.charts{
			}
			.canvastishi {
				font-size: 32rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -64rpx;
				margin-top: -21rpx;
			}
			.schedule {
				display: flex;
				width: 280rpx;
				height: 50rpx;
				border: 2rpx solid #F0F0F0;
				margin-right: 40rpx;
				.schedule_value {
					width: 70%;
					text-align: center;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			
				.schedule_icon {
					width: 30%;
					background-color: #F2F2F2;
					text-align: center;
					line-height: 50rpx;
				}
			}
		}

		.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;
			.table{
				// width: 10420px;
			}
			.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:first-child,
				.td:first-child {
					width: 300rpx;
				}
			}
		}

		.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>