feat: 温湿度接口调整

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

@@ -4,7 +4,7 @@
 		<view>
 			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="历史数据" backgroundColor="#f7f7f7"></uni-nav-bar>
 		</view>
-		<view style="padding: 0 48rpx;">
+		<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>
@@ -22,20 +22,18 @@
 				<view class="canvastishi" v-if="dataloadingtf">
 					<p class="dataloading">加载中</p>
 				</view>
-				<canvas v-show="canvastishiTF" canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
+				<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' 
+			<!-- 	<pest-line
+			:device_type_id="device_type"
 			:d_id="d_id"
 			:start_time="start_time"
 			:end_time="end_time"
 			:notify="notify"
-			>
-				
-			</pest-line> -->
+			></pest-line> -->
 			<view class="title">监测数据
 
 				<u-button size="mini" :loading='refreshLoading' class="refresh" throttle-time="500" @click="refresh"
@@ -44,17 +42,18 @@
 
 			<view class="condition">
 				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
-					<u-table class="table">
-						<u-tr>
-							<u-th class="th" v-for="(value,key) in thdata" :key="key">{{value}}</u-th>
-						</u-tr>
+					<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>
+						</tr>
 						<tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
-							<u-td class="td" v-for="(value,key) in thdata">{{items[key]}}</u-td>
+							<td class="td" v-for="(value,key) in thdata">{{items[key]}}</td>
 						</tr>
 						<tr class="tr" v-if="forbidden">
-							<u-td class="td" v-for="item in Object.keys(thdata)">暂无数据</u-td>
+							<td class="td" v-for="item in Object.keys(thdata)">暂无数据</td>
 						</tr>
-					</u-table>
+					</table>
 
 				</scroll-view>
 				<view class="pagenumber">
@@ -76,7 +75,7 @@
 <script>
 	import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
 	import pestLine from './pestLine.vue';
-	let canvaColumnA = null;
+	var canvaColumnA = null;
 	export default {
 		data() {
 			return {
@@ -107,9 +106,12 @@
 				dataShow: false,
 				mode: 'range',
 				refreshLoading: false,
-				notify:0
+				notify: 0
 			}
 		},
+		components: {
+			pestLine
+		},
 		computed: {
 			customStyle() {
 				return {
@@ -119,8 +121,12 @@
 					color: '#fff'
 				}
 			},
+			tableStyle() {
+				return {
+					width: Object.keys(this.thdata).length * 150 + 'px'
+				}
+			}
 		},
-		components:{pestLine},
 		methods: {
 			tiemchange(e) {
 				console.log(e)
@@ -145,45 +151,42 @@
 					}
 				})
 				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
+					if (title.addtime) delete title.addtime
 
-					let arr1 = []
-					let arr2 = []
-					let arr3 = []
 					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'
@@ -192,10 +195,12 @@
 						}]
 
 					}
-					console.log('----温度:',obj)
-					this.showColumn("canvasColumnA", xtitle, obj, yAxis)
+					// console.log('----温度:',obj)
+					this.showColumn("canvasColumnA", xtitle, chartData, yAxis)
 				}
+			
 			},
+
 			//历史数据列表
 			async historylist() {
 				const res = await this.$myRequest({
@@ -215,16 +220,17 @@
 				})
 
 				this.historylistdata = res.data
+
 				this.pagesum = Math.ceil(res.total / 10) || 1
 				if (res.data.length == 0) {
 					this.forbidden = true
-					console.log(res.data.length)
+
 				} else {
 					this.forbidden = false
-					console.log(res.data.length)
+
 				}
 
-				console.log(this.historylistdata)
+				console.log(this.historylistdata, 'historylistdata')
 			},
 			// forecast.send_control.get_device_config 获取当前时间的数据
 			async newdata() {
@@ -276,10 +282,6 @@
 			},
 			showColumn(id, xtitle, xinfo, yAxis) {
 				let _self = this
-				// const canvas = this.$refs[id];
-				// const canvas = document.getElementById(id);
-				// console.log(canvas,'pppppp')
-				// const ctx = canvas.getContext("2d");
 				const ctx = uni.createCanvasContext(id, this);
 				canvaColumnA = new uCharts({
 					context: ctx,
@@ -372,11 +374,12 @@
 	/deep/.u-calendar__action {
 		display: flex;
 		justify-content: space-around;
-	
+
 		.u-calendar__action__text {
 			line-height: 25px;
 		}
 	}
+
 	page {
 		background: #f7f7f7;
 	}
@@ -397,7 +400,6 @@
 		padding: 0 48rpx;
 		position: relative;
 
-		
 	}
 
 	.shuju_one,
@@ -448,13 +450,13 @@
 		// left: 5%;
 		font-size: 12px;
 		float: right;
-		padding: 0 10rpx;
-		height: 40rpx;
-		border-radius: 8rpx;
-		background-color: #018B3F;
-		color: #FFFFFF;
-		line-height: 40rpx;
-		text-align: center;
+		// padding: 0 10rpx;
+		// height: 40rpx;
+		// border-radius: 8rpx;
+		// background-color: #018B3F;
+		// color: #FFFFFF;
+		// line-height: 40rpx;
+		// text-align: center;
 	}
 
 	.condition {
@@ -472,7 +474,7 @@
 			margin: 20rpx auto;
 
 			.table {
-				width: 1672px;
+				width: 1620px;
 			}
 
 			.tr {
@@ -497,12 +499,12 @@
 			}
 
 			.tr:nth-child(2n-1) {
-				background-color: #f5fff8;
+				// background-color: #f5fff8;
 			}
 
 			.tr:first-child {
-				background-color: #57c878;
-				color: #fff;
+				// background-color: #E6E8EB;
+				color: #31373D;
 			}
 		}