bigdata_WX/pages/cb/sy/history.vue

<template>
	<view>
		<view class="">
			<view class="timeandtype">
				<view class="timebox">
					<view class="firsttime" @click="timeshow=true">
						<view class="" v-if="start_time!=''">
							{{(start_time==""?'请选择开始时间':start_time)/1000|timeFormat()}}
						</view>
						<view class="" v-else>
							{{start_time==""?'请选择开始时间':start_time}}
						</view>
					</view>
					<view class="jiange">
						-
					</view>
					<view class="endtime" @click="timeshow=true">
						<view class="" v-if="end_time!=''">
							{{(end_time==""?'请选择结束时间':end_time)/1000|timeFormat()}}
						</view>
						<view class="" v-else>
							{{end_time==""?'请选择结束时间':end_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="refresh" @click="refresh">
				刷 新
			</view>
			<view class="condition">
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
					<table class="table" v-if="$QueryPermission(181)">
						<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.addtime|timeFormat()}}</td>
							<td class="td">{{items.at==""?"--":items.ah/10}}</td>
							<td class="td">{{items.ah==""?"--":items.at/10}}</td>
							<td class="td">{{items.ds==1?"开机":"关机"}}</td>
						</tr>
						<tr class="tr" v-if="forbidden">
							<td class="td" v-for="item in 8">暂无数据</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>
		<u-calendar v-model="timeshow" :mode="mode" @change="timechange"  range-color="#999"
      btn-type="success"
      active-bg-color="#0BBC58"
      range-bg-color="rgba(11,188,88,0.13)"></u-calendar>
	</view>
</template>

<script>
	import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
	var canvaColumnA = null;
	export default {
		data() {
			return {
				styles: {
					// width: "650rpx",
					height: "400rpx"
				},
				d_id: '',
				start_time: "",
				end_time: "",
				historydatas: [],
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				titleidnex: 0,
				device_id: '',
				page: 1,
				historylistdata: [],
				thdata: ["上报时间", "空气湿度(%RH)", "空气温度(°C)", "开机状态"],
				forbidden: false,
				pixelRatio: 1,
				canvastishiTF: false, //暂无数据提示
				dataloadingtf: true, //加载中提示
				pagesum: 1,
				worms: [],
				timeshow:false,
				mode: 'range',
			}
		},
		methods: {
			//forecast.worm_lamp.device_history_data历史数据列表
			async historylist() { //历史数据列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.color_attract_list',
					data: {
						d_id: this.d_id,
						start_time: parseInt(this.start_time / 1000),
						end_time: parseInt(this.end_time / 1000),
            page: this.page,
            page_size: 10
					}
				})
				this.historylistdata = res.data
				console.log(res.data)
				this.pagesum = Math.ceil(res.counts / 10) || 1
				if (res.data.length == 0) {
					this.forbidden = true
				} else {
					this.forbidden = false
				}
				console.log(this.historylistdata)
			},
			// forecast.send_control.get_device_config 获取当前时间的数据
			// async newdata() {
			// 	const res = await this.$myRequest({
			// 		url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_mqtt',
			// 		data: {
			// 			d_id: this.d_id
			// 		}
			// 	})
			// 	if (res) {
			// 		uni.showToast({
			// 			title: '刷新成功',
			// 			duration: 2000,
			// 			icon: "none"
			// 		});
			// 	} else {
			// 		uni.showToast({
			// 			title: '刷新失败',
			// 			duration: 2000,
			// 			icon: "none"
			// 		});
			// 	}
			// },
			refresh() { //获取当前时间的数据
				this.historylist()
			},
			prev() { //上一页
				if (this.page > 1) {
					this.page--
					this.historylist()
				}
			},
			next() { //下一页
				if (this.page < this.pagesum) {
					this.page++
					this.historylist()
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			closetime() {
				this.start_time = ""
				this.end_time = ""
				this.listpage = 1
				this.historylist()
			},
			timechange(e) {
				console.log(e)
				this.start_time = +new Date(e.startDate)
				this.end_time = +new Date(e.endDate)
				this.listpage = 1
				this.historylist()
			},
		},
		onLoad(option) {
			console.log(option)
			this.d_id = option.d_id
			this.device_id = option.device_id
		},
		onShow() {
			this.end_time = +new Date() + 1000
			this.start_time = this.end_time - 24 * 60 * 60 * 1000
			console.log(new Date(this.end_time), new Date(this.start_time))
			this.historylist()
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.historylist()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="less">
	.timeandtype {
		// background-color: #F6F6FB;
		// padding: 20rpx;
		box-sizing: border-box;
		width: 90%;
		margin: 40rpx auto 0;
		.timebox {
			box-shadow: 0 0 10rpx #bcb9ca;
			display: flex;
			background-color: #fff;
			padding: 10px;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;
	
			.jiange {
				width: 5%;
				text-align: center;
			}
	
			.firsttime,
			.endtime {
				width: 45%;
				text-align: center;
			}
		}
	
		.warntypebox {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 10px;
			border-top: 1px solid #F6F6FB;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
		}
	}
	.shuju_one,
	.shuju_two {
		// position: absolute;
		// top: 100px;
		// width: 90%;
		// left: 5%;
		width: 90%;
		margin: 40rpx 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;
				}
			}
		}

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

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

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

	.refresh {
		width: 90%;
		// margin: 40rpx auto;
		margin-left: 5%;
    margin-top: 20rpx;
		width: 160rpx;
		height: 50rpx;
		background-color: #57c878;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

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

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

			.table {
				width: 1070rpx;
			}

			.tr {
				display: flex;
				overflow: hidden;
				.th,
				.td {
					display: inline-block;
					padding: 5rpx;
					width: 240rpx;
					text-align: center;
					height: 52rpx;
					line-height: 52rpx;
				}

				.th:first-child,
				.td:first-child {
					width: 350rpx;
				}
			}

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

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

		.pagenumber {
			display: flex;
			margin: 20rpx auto;
      width: 100%;
      justify-content: space-around;

			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;
			}
		}
	}
	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;
	
		.u-calendar__action__text {
			line-height: 25px;
		}
	}
</style>