feat: 温湿度接口调整

pages/cb/cbd/equip-set/newhistoryfile.vue

@@ -1,29 +1,31 @@
 <template>
 	<view style="background-color: #f7f7f7; height: 100vh;padding-top: 88rpx;">
-			<!-- <view class="status_bar"></view> -->
-			<view>
-				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="历史数据" backgroundColor="#f7f7f7"></uni-nav-bar>
-			</view>
-			<view style="padding: 0 48rpx; background-color: #f7f7f7;">
+		<!-- <view class="status_bar"></view> -->
+		<view>
+			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="历史数据" backgroundColor="#f7f7f7"></uni-nav-bar>
+		</view>
+		<view style="padding: 0 48rpx; background-color: #f7f7f7;">
 			<u-calendar v-model="dataShow" :mode="mode" @change="tiemchange" :maxDate="maxDate"></u-calendar>
 			<view class="date" @click="dataShow = true">
 				<span>选择日期 </span>
 				<span style="color: #cccccc;">
-					{{start_time}} <span style="margin: 0 10rpx;"> /</span> {{end_time}} 
+					{{start_time}} <span style="margin: 0 10rpx;"> /</span> {{end_time}}
 					<u-icon style="margin-left: 20rpx;" name="arrow-right" size="28"></u-icon>
 				</span>
 			</view>
 			<view class="title">温湿度数据</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-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>
+				<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>
 			<!-- <pest-line
 				:device_type_id="device_type"
@@ -32,17 +34,19 @@
 				:end_time="end_time"
 				:notify="notify"
 			></pest-line> -->
-			
-			<view class="title">监测数据 
-			
-				<u-button size="mini" :loading='refreshLoading' class="refresh" throttle-time="500" @click="refresh" :customStyle="customStyle">刷 新</u-button>
+
+			<view class="title">监测数据
+
+				<u-button size="mini" :loading='refreshLoading' class="refresh" throttle-time="500" @click="refresh"
+					:customStyle="customStyle">刷 新</u-button>
 			</view>
-			
+
 			<view class="condition">
-				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">					
+				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
 					<table class="table" :style="tableStyle">
 						<tr class="tr">
-							<th style="background-color: #E6E8EB;" class="th" v-for="(value,key) in thdata" :key="key">{{value}}</th>
+							<th style="background-color: #E6E8EB;" class="th" v-for="(value,key) in thdata" :key="key">
+								{{value}}</th>
 						</tr>
 						<tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
 							<td class="td" v-for="(value,key) in thdata">{{items[key]}}</td>
@@ -51,7 +55,7 @@
 							<td class="td" v-for="item in Object.keys(thdata)">暂无数据</td>
 						</tr>
 					</table>
-			
+
 				</scroll-view>
 				<view class="pagenumber">
 					<button @click="prev">上一页</button>
@@ -65,7 +69,7 @@
 				</view>
 			</view>
 		</view>
-		</view>
+	</view>
 	</view>
 </template>
 
@@ -76,7 +80,7 @@
 	export default {
 		data() {
 			return {
-				maxDate:'2050-12-31',
+				maxDate: '2050-12-31',
 				styles: {
 					// width: "650rpx",
 					height: "400rpx"
@@ -91,34 +95,36 @@
 				page: 1,
 				historylistdata: [],
 				thdata: {},
-				
+
 				forbidden: false,
 				cWidth: '400',
 				cHeight: '400',
 				pixelRatio: 1,
-				canvastishiTF: false,//暂无数据提示
-				dataloadingtf:true,//加载中提示
+				canvastishiTF: false, //暂无数据提示
+				dataloadingtf: true, //加载中提示
 				pagesum: 1,
-				device_type:"",
+				device_type: "",
 				dataShow: false,
 				mode: 'range',
-				refreshLoading:false,
-				notify:0
+				refreshLoading: false,
+				notify: 0
 			}
 		},
-		components:{pestLine},
-		computed:{
-			customStyle(){
+		components: {
+			pestLine
+		},
+		computed: {
+			customStyle() {
 				return {
 					background: '#018B3F',
-					fontSize:'12px',
-					border:'none',
-					color:'#fff'
+					fontSize: '12px',
+					border: 'none',
+					color: '#fff'
 				}
 			},
-			tableStyle(){
-				return{
-					width: Object.keys(this.thdata).length*150 + 'px'
+			tableStyle() {
+				return {
+					width: Object.keys(this.thdata).length * 150 + 'px'
 				}
 			}
 		},
@@ -127,12 +133,12 @@
 				console.log(e)
 
 				this.start_time = e.startDate
-				this.end_time = e.endDate 
+				this.end_time = e.endDate
 
 				this.history()
 				this.historylist()
 				this.notify++
-		
+
 			},
 			async history() { //历史数据列表折线图
 				this.dataloadingtf = true
@@ -145,89 +151,87 @@
 						end: +new Date(this.end_time + ' 23:59:59') / 1000
 					}
 				})
+
 				this.dataloadingtf = false
-				this.historydatas = res || []
-				console.log(this.historydatas)
-				if (this.historydatas.length == 0) {
+				let {
+					data,
+					title
+				} = res
+				if (!data) {
 					this.canvastishiTF = false
 				} else {
 					this.canvastishiTF = true
-			
-					let arr1 = []
-					let arr2 = []
-					let arr3 = []
+					if (title.addtime) delete title.addtime
+
 					let xtitle = []
-					for (let i = 0; i < res.length; i++) {
-						// let times = new Date(res[i].addtime * 1000)
-						xtitle.push(res[i].addtime.split(' ')[0])
-						arr1.push(res[i].tem)
-						arr2.push(res[i].hum)
-						if ('lux' in res[i]) {
-							arr3.push(res[i].lux)
-						}
-					}
-					// console.log(arr1)
-					let obj = [{
-			
-						name: '温度',
-						data: arr1,
-						color: '#00E29D'
-					}, {
-						name: '湿度',
-						data: arr2,
-						color: '#6CBBFF'
-					}]
-					if (arr3.length > 0) {
-						obj.push({
-							index: 1,
-							name: '光照',
-							data: arr3,
-							color: '#E67B3E'
+					let chartData = []
+					if (data.length > 0) {
+
+						data.forEach(item => {
+							// 处理时间戳
+							xtitle.push(item.addtime.split(' ')[0])
+						})
+						Object.keys(title).forEach(key => {
+							let obj = {
+								name: title[key],
+								index: key === 'lux' ? 1 : 0,
+								data: []
+							}
+							for (var i = 0; i < data.length; i++) {
+								if (key in data[i]) {
+									// 判断data中是否值
+									obj.data.push(data[i][key])
+								}
+							}
+							chartData.push(obj)
 						})
+
+						console.log('温湿度数据：', chartData)
 					}
+
 					let yAxis = {
 						data: [{
 							position: 'left'
 						}, {
 							position: 'right'
 						}]
-			
+
 					}
 					// console.log('----温度:',obj)
-					this.showColumn("canvasColumnA", xtitle, obj, yAxis)
+					this.showColumn("canvasColumnA", xtitle, chartData, yAxis)
 				}
 			},
-			
+
 			//历史数据列表
-			async historylist() { 
+			async historylist() {
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=new_gateway.data_info.history_data',
 					data: {
 						device_type_id: this.device_type,
 						id: this.d_id,
-						start: +new Date(this.start_time +' 00:00:00') / 1000,
-						end: +new Date(this.end_time +' 23:59:59') / 1000,
+						start: +new Date(this.start_time + ' 00:00:00') / 1000,
+						end: +new Date(this.end_time + ' 23:59:59') / 1000,
 						page: this.page
 					}
 				})
 				this.refreshLoading = false
 				// this.thdata = Object.values(res.title) 
-				Object.keys(res.title).forEach(item=>{
-					this.$set(this.thdata,item,res.title[item])
+				Object.keys(res.title).forEach(item => {
+					this.$set(this.thdata, item, res.title[item])
 				})
-			
+
 				this.historylistdata = res.data
-				
+
 				this.pagesum = Math.ceil(res.total / 10) || 1
 				if (res.data.length == 0) {
 					this.forbidden = true
-					
+
 				} else {
 					this.forbidden = false
-					
+
 				}
 
-				console.log(this.historylistdata,'historylistdata')
+				console.log(this.historylistdata, 'historylistdata')
 			},
 			// forecast.send_control.get_device_config 获取当前时间的数据
 			async newdata() {
@@ -239,15 +243,15 @@
 						control_type: "data"
 					}
 				})
-				if(res){
+				if (res) {
 					uni.showToast({
 						title: '刷新成功',
 						duration: 2000,
 						icon: "none"
 					});
-					
+
 					this.historylist()
-				}else{
+				} else {
 					uni.showToast({
 						title: '刷新失败',
 						duration: 2000,
@@ -259,7 +263,7 @@
 				this.refreshLoading = true
 				this.historylist()
 			},
-	
+
 			prev() { //上一页
 				if (this.page > 1) {
 					this.page--
@@ -267,7 +271,7 @@
 				}
 			},
 			next() { //下一页
-				if(this.page<this.pagesum){
+				if (this.page < this.pagesum) {
 					this.page++
 					this.historylist()
 				}
@@ -337,18 +341,18 @@
 			this.device_type = option.device_type
 			this.cWidth = uni.upx2px(650);
 			this.cHeight = uni.upx2px(500);
-			let endTime = +new Date()/1000
+			let endTime = +new Date() / 1000
 			let startTime = endTime - 60 * 60 * 24
-			
-			this.end_time = this.formatTime(endTime*1000,'yyyy-MM-dd')
+
+			this.end_time = this.formatTime(endTime * 1000, 'yyyy-MM-dd')
 			console.log(this.end_time)
-			this.start_time = this.formatTime(startTime*1000,'yyyy-MM-dd')
-			setTimeout(()=>{
+			this.start_time = this.formatTime(startTime * 1000, 'yyyy-MM-dd')
+			setTimeout(() => {
 				this.history()
 				this.historylist()
-			},1000)
+			}, 1000)
 		},
-		onShow(){
+		onShow() {
 			// this.end_time = +new  Date()/1000
 			// this.start_time = this.end_time - 24 * 60 * 60
 			// // this.formatTime(date, 'yyyy-MM-dd')
@@ -371,19 +375,22 @@
 	/deep/.u-calendar__action {
 		display: flex;
 		justify-content: space-around;
-	
+
 		.u-calendar__action__text {
 			line-height: 25px;
 		}
 	}
-	page{
+
+	page {
 		background: #f7f7f7;
 	}
-	.title{
+
+	.title {
 		color: #999999;
 		margin: 32rpx 0;
 	}
-	.date{
+
+	.date {
 		height: 92rpx;
 		line-height: 92rpx;
 		border-radius: 92rpx;
@@ -393,9 +400,9 @@
 		margin-top: 16rpx;
 		padding: 0 48rpx;
 		position: relative;
-		
+
 	}
-	
+
 	.shuju_one,
 	.shuju_two {
 		// position: absolute;
@@ -407,6 +414,7 @@
 		height: 550rpx;
 		background-color: #fff;
 		border-radius: 24rpx;
+
 		.canvastishi {
 			font-size: 32rpx;
 			position: absolute;
@@ -414,6 +422,7 @@
 			left: 50%;
 			margin-left: -64rpx;
 			margin-top: -21rpx;
+
 			.dataloading:after {
 				overflow: hidden;
 				display: inline-block;
@@ -421,19 +430,19 @@
 				animation: ellipsis 2s infinite;
 				content: "\2026";
 			}
-			
+
 			@keyframes ellipsis {
 				from {
 					width: 2px;
 				}
-			
+
 				to {
 					width: 15px;
 				}
 			}
 		}
 
-		
+
 	}
 
 	.refresh {
@@ -464,9 +473,11 @@
 		.scroll-X {
 			width: 100%;
 			margin: 20rpx auto;
-			.table{
+
+			.table {
 				width: 1620px;
 			}
+
 			.tr {
 				display: flex;
 				overflow: hidden;
@@ -487,10 +498,12 @@
 					width: 300rpx;
 				}
 			}
-			.tr:nth-child(2n-1){
+
+			.tr:nth-child(2n-1) {
 				// background-color: #f5fff8;
 			}
-			.tr:first-child{
+
+			.tr:first-child {
 				// background-color: #E6E8EB;
 				color: #31373D;
 			}
@@ -519,4 +532,4 @@
 			}
 		}
 	}
-</style>
+</style>