bigDataApp/pages/prevention/ucharts.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;width: 100%;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" 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="shuju_two">
			<highcharts :chartOptions="optionstwo" :styles="styles" ref="simpleChart"></highcharts>
		</view>
		<view class="selecttimes">
			<view class="newtimes">
				<view class="newtimes_state" @click="pickshow = !pickshow">
					<view class="oldtimes_left">
						<image src="../../static/image/prevention/841f87bfd8abb1b09610fa0789f9d8e.png" mode=""></image>
						开始时间：{{this.oldtime|timeFormat()}}
					</view>
					<view class="oldtimes_left">
						<u-icon name="arrow-down"></u-icon>
					</view>
					<u-picker mode="time" v-model="pickshow" :params="params" @confirm="pickone"></u-picker>
				</view>
				<view class="newtimes_end" @click="picktwoshow = !picktwoshow">
					<view class="oldtimes_left">
						<image src="../../static/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png" mode=""></image>
						结束时间：{{this.newtime|timeFormat()}}
					</view>
					<view class="oldtimes_left">
						<u-icon name="arrow-down"></u-icon>
					</view>
					<u-picker mode="time" v-model="picktwoshow" :params="params" @confirm="picktwo"></u-picker>
				</view>
				<p class="tishi" v-if="tishiTF">请选择正确的结束时间</p>
				<view class="btnser" @click="serter">
					搜 索
				</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 eqlistdata" :key="'b'+indexs" v-if="forbidden">
						<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.lamp==0?"灭":"亮"}}</td>
						<td class="td">{{items.d_h_t.rps==0?"正常":"保护"}}</td>
						<td class="td">{{items.d_h_t.tps==0?"正常":"保护"}}</td>
						<td class="td">{{items.d_h_t.dps==0?"正常":"保护"}}</td>
						<td class="td">{{items.d_h_t.tt}}</td>
						<td class="td">{{items.d_h_t.ct}}</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.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"
	// import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	// var _self;
	// var canvaLineA = null;
	var presenttime = +new Date();
	// var oldpresenttime = presenttime - 24*60*60*1000
	export default {
		data() {
			return {
				thdata: ["设备开关", "工作状态", "灯管状态", "雨控状态", "温控状态", "倾倒状态", "定时(h)", "电击次数", "温度(℃)", "湿度(%)", "充电电压(v)", "电池电压(v)",
					"上报时间"
				],
				eqlistdata: [],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				titleidnex: 0,
				chartsdata: [],
				oldtime: '',
				newtime: '',
				page: 1,
				forbidden: false, //暂无数据
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				pickshow: false,
				picktwoshow: false,
				tishiTF: false,
				times: {
					d_id: null,
					start_time: null,
					end_time: null,
					device_id: null
				},
				styles: {
					// width: "650rpx",
					height: "400rpx"
				},
				options: {
					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: "温度",
							data: [],
							color: "#F97000"
						},
						{
							name: "湿度",
							data: [],
							color: "#00E29D"
						},
						{
							name: "充电电压",
							data: [],
							color: "#6CBBFF"
						},
						{
							name: "电池电压",
							data: [],
							color: "#f00000"
						}
					],
				},
				optionstwo: {
					chart: {
						type: 'spline', //指定图表的类型，默认是折线图（line）
						zoomType: 'x',
						panning: true,
						panKey: 'shift'
					},
					title: {
						text: '击虫次数', // 标题
						style: {
							"font-size": "16px",
							color: "#00E29D"
						}
					},
					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: "击虫次数",
						data: [],
						color: "#00E29D"
					}, ],
				}
			}

		},
		// 页面加载执行的函数
		onLoad(option) {
			this.times.d_id = option.d_id
			this.times.device_id = option.device_id
			this.getServerData(parseInt(presenttime / 1000), parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000))
			this.historydata(parseInt(presenttime / 1000), parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000))
			this.oldtime = parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
			this.newtime = parseInt(presenttime / 1000)
		},
		methods: { // 
			//forecast.worm_lamp.device_polyline_data
			// 获取数据，发请求
			async getServerData(newtime, oldtimes) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
					data: {
						device_type_id: 2,
						d_id: this.times.d_id,
						end_time: newtime,
						start_time: oldtimes
					}
				})
				this.options.series[0].data = []
				this.options.series[1].data = []
				this.options.series[2].data = []
				this.options.series[3].data = []
				this.optionstwo.series[0].data = []
				for (var i = 0; i < res.length; i++) {
					// this.chartsdata.unshift(res[i].humidity)
					let arr0 = []
					arr0.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].humidity))
					this.options.series[0].data.unshift(arr0)
					let arr1 = []
					arr1.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].temperature))
					this.options.series[1].data.unshift(arr1)
					let arr2 = []
					arr2.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].others.cv / 1000))
					this.options.series[2].data.unshift(arr2)
					let arr3 = []
					arr3.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].others.bv / 1000))
					this.options.series[3].data.unshift(arr3)
					let arr4 = []
					arr4.push(res[i].addtime * 1000 + 8 * 3600000, Number(res[i].others.ct / 1000))
					this.optionstwo.series[0].data.unshift(arr4)
				}
				console.log(this.optionstwo.series[0].data)
			},
			changeindex(index) { //选择日期
				this.titleidnex = index
				var now = new Date();
				if (index == 0) {
					this.newtime = parseInt(+new Date(now) / 1000)
					this.oldtime = parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000)
					this.getServerData(parseInt(presenttime / 1000), parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000))
					this.historydata(parseInt(presenttime / 1000), parseInt((presenttime - 24 * 60 * 60 * 1000) / 1000))
				} else if (index == 1) {
					this.newtime = parseInt(+new Date(now) / 1000)
					var oldtime = now.setMonth(now.getMonth() - 1) / 1000
					this.oldtime = parseInt(oldtime)
					this.getServerData(parseInt(presenttime / 1000), parseInt(oldtime))
					this.historydata(parseInt(presenttime / 1000), parseInt(oldtime))
				} else if (index == 2) {
					this.newtime = parseInt(+new Date(now) / 1000)
					var oldtime = now.setMonth(now.getMonth() - 6) / 1000
					this.oldtime = parseInt(oldtime)
					this.getServerData(parseInt(presenttime / 1000), parseInt(oldtime))
					this.historydata(parseInt(presenttime / 1000), parseInt(oldtime))
				} else if (index == 3) {
					this.newtime = parseInt(+new Date(now) / 1000)
					var oldtime = now.setFullYear(now.getFullYear() - 1) / 1000
					this.oldtime = parseInt(oldtime)
					this.getServerData(parseInt(presenttime / 1000), parseInt(oldtime))
					this.historydata(parseInt(presenttime / 1000), parseInt(oldtime))
				}
				if (this.newtime < this.oldtime) {
					this.tishiTF = true
				} else {
					this.tishiTF = false
				}
			},
			async historydata(newtime, oldtimes) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
					data: {
						device_type_id: 2,
						device_id: this.times.device_id,
						page: this.page,
						page_size: 10,
						start_time: oldtimes,
						end_time: newtime
					}
				})
				this.eqlistdata = res.data
				if (this.eqlistdata.length == 0) {
					this.forbidden = false
				} else {
					this.forbidden = true
				}
			},
			prev() { //上一页
				if (this.page != 1) {
					this.page--
				}
				this.historydata(this.newtime, this.oldtime)
			},
			next() { //下一页
				this.page++
				this.historydata(this.newtime, this.oldtime)
			},
			pickone(e) {
				this.oldtime = +new Date(e.year, e.month - 1, e.day, e.hour, e.minute) / 1000
				if (this.newtime < this.oldtime) {
					this.tishiTF = true
				} else {
					this.tishiTF = false
				}
			},
			picktwo(e) {
				this.newtime = +new Date(e.year, e.month - 1, e.day, e.hour, e.minute) / 1000
				if (this.newtime < this.oldtime) {
					this.tishiTF = true
				} else {
					this.tishiTF = false
				}
			},
			serter() {
				if (this.tishiTF == false) {
					this.getServerData(parseInt(presenttime / 1000), parseInt(this.oldtime))
					this.historydata(this.newtime, this.oldtime)
				}
			},
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style lang="scss">
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.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;
			}
		}

		.qiun-columns {
			.qiun-charts {
				width: 650upx;
				height: 400upx;
				background-color: #FFFFFF;
			}

			.charts {
				width: 650upx;
				height: 400upx;
				background-color: #FFFFFF;
			}
		}
	}

	.shuju_two {
		top: 598rpx;
	}

	.selecttimes {
		position: absolute;
		top: 1040rpx;
		width: 90%;
		box-shadow: 0 0 10rpx #bcb9ca;
		left: 5%;

		.tishi {
			width: 90%;
			margin: 0 auto;
			color: #f00000;
			text-align: center;
			font-size: 24rpx;
		}

		.btnser {
			width: 90%;
			margin: 10rpx auto;
			color: #FFFFFF;
			text-align: center;
			font-size: 28rpx;
			background-color: #58BD4D;
			border-radius: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
		}

		.newtimes {
			width: 100%;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			.newtimes_state,
			.newtimes_end {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.oldtimes_left {
					position: relative;
					padding-left: 36rpx;
					font-size: 28rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: top;
						position: absolute;
						top: 7rpx;
						left: 0;
					}
				}
			}
		}
	}

	.condition {
		position: absolute;
		top: 1280rpx;
		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: 140rpx;
					text-align: center;
					height: 52rpx;
					line-height: 52rpx;
					border: 2rpx solid #F1F1F1;
				}

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

				.th:nth-last-child(2),
				.th:nth-last-child(3),
				.td:nth-last-child(2),
				.td:nth-last-child(3) {
					width: 200rpx;
				}
			}
		}

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