nlu_App/pages/environment/history.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 class="graph">
				<view class="canvasbox">
					<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 && !dataloadingtf">
						暂无数据
					</view>
					<view class="canvastishi" v-if="dataloadingtf">
						<p class="dataloading">加载中</p>
					</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 v-if="canvastishiTF" class="charts-box">


						<qiun-data-charts type="line" :chartData="chartData" :ontouch="true" />
					</view>
				</view>
				<view class="selecttimes" @click="tiemshow = !tiemshow">
					<view class="timesbox">
						<image :src="
                $imageURL+ '/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="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-show="key">
									{{ key.replace('#', '(') + ')' }}
								</th>
							</tr>
							<tr :class="`tr ${
                  items.is_history && myuser_type == 1 ? 'redText' : ''
                }`" 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';
	// let canvasColumnA = null;
	var presenttime = +new Date();
	export default {
		data() {
			return {
				myuser_type: null,
				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				canvastishiTF: false, //暂无数据提示
				dataloadingtf: true, //加载中提示
				id: '',
				begintime: '', //开始时间
				end: '', //结束时间
				titletext: [], //折线图数据切换列表数据
				titleidnex: 0,
				historydatas: [],
				page: 1,
				forbidden: false,
				pagesum: 1,
				datalength: 0,
				scrollTF: true,
				indexone: 0, //折线图数据切换列表下标
				pickertfone: false, //折线图数据切换列表
				chartdata: {}, //折线图数据
				tiemshow: 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,
						start_time: parseInt(this.begintime),
						end_time: parseInt(this.end),
						page: this.page,
					},
				});
				this.historydatas = res;
				console.log(res);
				this.datalength = 0;
				for (var key in res.conf) {
					if (key && 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) {
				//上传时间 //折线图
				this.dataloadingtf = true;
				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.dataloadingtf = false;
				console.log(res);
				this.chartdata = res;
				this.titletext = [];
				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');
				}
				console.log(this.titletext);
			},
			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[0][eindex].split('#')[0]) != -99.99) {
						arr.unshift(parseFloat(res.data[i].dat[0][eindex].split('#')[0]));
					}
				}
				obj.data = arr;
				if (obj.name) {
					linearr.push(obj);
				}
				this.canvastishiTF = linearr.some((item) => {
					return item.data.length != 0;
				});
				console.log(xtitle, linearr);
				setTimeout(() => {
					let res = {
						categories: xtitle,
						series: linearr
					};
					this.chartData = JSON.parse(JSON.stringify(res));

				}, 100)
			},
			confirmFun(index) {
				console.log(index);
				this.indexone = index[0];
				var str = 'e' + (index[0] + 1);
				console.log(str);
				this.conflist(this.chartdata, str);
			},
			tiemchange(e) {
				console.log(e);
				this.begintime = +new Date(e.startDate) / 1000;
				this.end = +new Date(e.endDate) / 1000 + 16 * 60 * 60;
				this.historydata(this.id);
				this.listhistorydata(this.id);
			},
			prev() {
				//上一页
				if (this.page > 1) {
					this.page--;
					this.listhistorydata(this.id);
				}
			},
			next() {
				//下一页
				if (this.page < this.pagesum) {
					this.page++;
					this.listhistorydata(this.id);
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1,
				});
			},

			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;
			},
		},
		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);
			this.myuser_type = uni.getStorageSync('myuser_type');
		},
	};
</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: 32rpx;

			.charts-box {
				height: 480rpx;
			}

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

			.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: #57c878;
			text-align: center;
			font-size: 24rpx;
			height: 50rpx;
			line-height: 50rpx;
		}

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

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

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

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

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

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

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

			.redText {
				.td {
					color: #dc143c;
				}
			}

			.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: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

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

		.u-calendar__action__text {
			line-height: 25px;
		}
	}
</style>