bigDataApp/pages/cb/xy/equip-set/xyhistoryile.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="历史数据"></uni-nav-bar>
			</view>
			<view class="shuju_one">
				<view class="shuju_one_title">
					<view :class="titleidnex==index?'title_text_color':'tltle_text'" v-for="(item,index) in titletext" :key="index"
					 @click="changeindex(index)">
						{{item}}
					</view>
				</view>
				<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="wind">
				<p class="wind_titie">风速、风向</p>
				<view class="wind_text">
					<view class="wind_speed">
						<image src="../../../../static/image/cb/xy/1c24243bb184e84ffd13540367569ba.png" mode=""></image>
						<p>风速：{{wind_sped}}(m/s)</p>
					</view>
					<view class="wind_direction">
						<image src="../../../../static/image/cb/xy/c44ae038324e1040a1eaa702e6d71a5.png" mode=""></image>
						<p>风速：{{wind_drec}}</p>
					</view>
				</view>
			</view>
			<view class="condition">
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
					<!-- @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" -->
					<table class="table">
						<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.d_h_t.proj}}</td>
							<td class="td">{{items.d_h_t.ds==0?"关":"开"}}</td>
							<td class="td">{{items.d_h_t.ws==0?"待机":"工作"}}</td>
							<td class="td">{{items.d_h_t.at}}</td>
							<td class="td">{{items.d_h_t.ah}}</td>
							<td class="td">{{items.d_h_t.cv}}</td>
							<td class="td">{{items.d_h_t.bv}}</td>
							<td class="td">{{items.d_h_t.bs}}</td>
							<td class="td">{{items.d_h_t.cs?"正常":"充电"}}</td>
							<td class="td">{{items.d_h_t.infr_ct}}</td>
							<td class="td">{{items.d_h_t.csq}}</td>
							<td class="td">{{items.d_h_t.dver}}</td>
							<td class="td">{{items.d_h_t.addtime|timeFormat()}}</td>
						</tr>
						<tr class="tr" v-if="forbidden">
							<td class="td" v-for="item in 13">暂无数据</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>
</template>
<style lang="scss">

</style>
<script>
	import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
	var canvaColumnA = null;
	var newtime = +new Date()
	var strrttime = newtime - 24 * 60 * 60 * 1000
	export default {
		data() {
			return {
				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				canvastishiTF:false,
				d_id: '',
				start_time: strrttime,
				end_time: newtime,
				historydatas: [],
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				titleidnex: 0,
				device_id: '',
				page: 1,
				historylistdata: [],
				thdata: ["型号", "设备开关", "工作状态", "环境温度(°C)", "环境湿度(%)", "充电电压(V)", "电池电压(V)", "电池状态", "充电状态", "红外计数值", "信号强度", "版本号",
					"上报时间"
				],
				forbidden: false,
				wind_sped: '', //风速
				wind_drec: '',
				pagesum:null
			}
		},
		methods: {
			//forecast.worm_lamp.device_polyline_data 历史数据折线图
			// device_type_id          必传（string）                  设备类型  3虫情测报灯 7孢子仪 4智能性诱 2杀虫灯  9糖醋测报灯  10测报灯rtu
			//    d_id                    必传                            设备id
			//    start_time              非必传(string 时间戳)           开始时间    (用于时间搜索)
			//    end_time
			async history() { //历史数据折线图
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
					data: {
						device_type_id: 4,
						d_id: this.d_id,
						start_time: parseInt(this.start_time / 1000),
						end_time: parseInt(this.end_time / 1000)
					}
				})
				this.historydatas = res
				console.log(this.historydatas)
				if (res.length == 0) {
					this.wind_sped = "--"
					this.wind_drec = "--"
				} else {
					this.wind_sped = res[0].others.wind_sped
					if (22 < res[0].others.wind_drec && 67 < res[0].others.wind_drec) {
						this.wind_drec = "东北"
					} else if (67 < res[0].others.wind_drec && 112 > res[0].others.wind_drec) {
						this.wind_drec = "东"
					} else if (112 < res[0].others.wind_drec && 157 > res[0].others.wind_drec) {
						this.wind_drec = "东南"
					} else if (157 < res[0].others.wind_drec && 202 > res[0].others.wind_drec) {
						this.wind_drec = "南"
					} else if (202 < res[0].others.wind_drec && 247 > res[0].others.wind_drec) {
						this.wind_drec = "西南"
					} else if (247 < res[0].others.wind_drec && 292 > res[0].others.wind_drec) {
						this.wind_drec = "西"
					} else if (292 < res[0].others.wind_drec && 337 > res[0].others.wind_drec) {
						this.wind_drec = "西北"
					} else {
						this.wind_drec = "北"
					}
				}
				if (this.historydatas.length == 0) {
					this.canvastishiTF = false
				} else {
					this.canvastishiTF = true
				
					var arr1 = []
					var arr2 = []
					var xtitle = []
					for (var i = 0; i < res.length; i++) {
						var times = new Date(res[i].addtime * 1000)
						xtitle.unshift(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times.getSeconds())
						arr1.unshift(res[i].new_tem==""?"0":res[i].new_tem)
						arr2.unshift(res[i].new_hum==""?"0":res[i].new_hum)
					}
					var obj = [{
						name: '温度',
						data: arr1,
						color: '#00E29D'
					}, {
						name: '湿度',
						data: arr2,
						color: '#6CBBFF'
					}]
					this.showColumn("canvasColumnA", xtitle, obj)
				}
			},
			//forecast.worm_lamp.device_history_data历史数据列表
			async historylist() { //历史数据列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
					data: {
						device_type_id: 4,
						device_id: this.device_id,
						start_time: parseInt(this.start_time / 1000),
						end_time: parseInt(this.end_time / 1000),
						page: this.page
					}
				})
				this.historylistdata = res.data
				this.pagesum =Math.ceil(res.counts/10)+1
				if (res.data.length == 0) {
					this.forbidden = true
				} else {
					this.forbidden = false
				}
				for (var i = 0; i < this.historylistdata.length; i++) {
					if (res.data[i].d_h_t.bs == 0) {
						this.historylistdata[i].d_h_t.bs = "正常"
					} else if (res.data[i].d_h_t.bs == 1) {
						this.historylistdata[i].d_h_t.bs = "欠压"
					} else if (res.data[i].d_h_t.bs == 2) {
						this.historylistdata[i].d_h_t.bs = "超压"
					}
				}
				console.log(this.historylistdata)
			},
			changeindex(index) {
				this.titleidnex = index
				var now = new Date()
				this.$forceUpdate()
				if (index == 0) {
					this.start_time = strrttime
					this.history()
					this.historylist()
				} else if (index == 1) {
					var oldtime = now.setMonth(now.getMonth() - 1)
					this.start_time = parseInt(oldtime)
					this.history()
					this.historylist()
				} else if (index == 2) {
					var oldtime = now.setMonth(now.getMonth() - 6)
					this.start_time = parseInt(oldtime)
					this.history()
					this.historylist()
				} else if (index == 3) {
					var oldtime = now.setFullYear(now.getFullYear() - 1)
					this.start_time = parseInt(oldtime)
					this.history()
					this.historylist()
				}
			},
			prev() { //上一页
				if (this.page > 1) {
					this.page--
					this.historylist()
				}
			},
			next() { //下一页
				this.page++
				this.historylist()
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			showColumn(id, xtitle, xinfo) {
				var _self = this
				canvaColumnA = 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: 5, //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) {
				console.log(e)
				canvaColumnA.scrollStart(e);
			},
			moveLineA(e) {
				canvaColumnA.scroll(e);
			},
			touchEndLineA(e) {
				canvaColumnA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumnA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		},
		onLoad(option) {
			this.d_id = option.d_id
			this.device_id = option.device_id
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			this.history()
			this.historylist()
		}
	}
</script>

<style lang="scss">
	.shuju_one,
	.shuju_two {
		position: absolute;
		top: 54px;
		width: 90%;
		left: 5%;
		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;
		}
		.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;
			}
		}
	}

	.wind {
		position: absolute;
		top: 700rpx;
		width: 90%;
		left: 5%;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding: 20rpx;
		box-sizing: border-box;
		.wind_titie {
			border-left: 6rpx solid #26D696;
			height: 34rpx;
			padding-left: 20rpx;
		}

		.wind_text {
			display: flex;

			.wind_speed,
			.wind_direction {
				width: 50%;
				text-align: center;
				margin-top: 30rpx;

				image {
					width: 160rpx;
					height: 130rpx;
				}
			}
		}
	}

	.condition {
		position: absolute;
		top: 1000rpx;
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		left: 5%;
		box-shadow: 0 0 10rpx #bcb9ca;
		margin-bottom: 30rpx;

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

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

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