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

<template>
	<view>
		<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>
			<highcharts :chartOptions="options" :styles="styles" ref="simpleChart"></highcharts>
		</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>
				<button @click="next" :disabled="forbidden">下一页</button>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	
</style>
<script>
	import highcharts from "@/components/highcharts/highcharts"
	var newtime = +new Date()
	var strrttime = newtime - 24*60*60*1000
	export default {
		data() {
			return {
				styles: {
					// width: "650rpx",
					height: "400rpx"
				},
				options: {
					lang:{
						noData:"暂无数据"
					},
					chart: {
						type: 'spline', //指定图表的类型，默认是折线图（line）
						zoomType: 'x',
						panning: true,
						panKey: 'shift'
					},
					title: {
						text: '' // 标题
					},
					credits: {
						enabled: false
					},
					xAxis: {
						type: 'datetime',
						crosshair: true, //十字基准线
						dateTimeLabelFormats: {
							//根据时间间距X轴自动显示哪种格式
							millisecond: "%H:%M:%S.%L",
							second: "%H:%M:%S",
							minute: "%H:%M",
							hour: "%H:%M",
							day: "%m-%d",
							week: "%m-%d",
							month: "%Y-%m",
							year: "%Y",
						},
					},
					yAxis: {
						title: false,
					},
					legend: {
						// layout: 'vertical',
						align: "center",
						verticalAlign: "top",
					},
					tooltip: {
						// crosshairs: true,
						shared: true, //折线共享
						headerFormat: "<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>",
					},
					plotOptions: {
						spline: {
							marker: {
								enabled: false
							},
						}
					},
					series: [
						{
							name: "温度(°C)",
							data: [],
							color: "#00E29D"
						},
						{
							name: "湿度(%)",
							data: [],
							color: "#6CBBFF"
						}
					],
				},
				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:''
			}
		},
		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)
				this.options.series[0].data = []
				this.options.series[1].data = []
				if(res.length==0){
					this.wind_sped = "--"
					this.wind_drec = "--"
				}else{
					this.wind_sped = res[0].others.wind_sped
					console.log(res[0].others.wind_drec)
					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 = "北"
					}
				}
				for(var i=0;i<res.length;i++){
					var arr1 = []
					arr1.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].temperature))
					this.options.series[0].data.push(arr1)
					var arr2 = []
					arr2.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].humidity))
					this.options.series[1].data.push(arr2)
				}
			 },
			 //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
				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
				 })
			 }
		},
		onLoad(option){
			this.d_id = option.d_id
			this.device_id = option.device_id
			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;

		.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: 600rpx;
		width: 90%;
		left: 5%;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding: 20rpx;
		.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: 900rpx;
		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: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
</style>