bigDataApp/pages/cb/cbd/equip-set/statistics.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="statistics">
			<view class="top_text">
				<view :class="topindex==index?'title_text_color':'tltle_text'" v-for="(item,index) in toptext" :key="index" @click="changeindex(index)">
					{{item}}
				</view>
			</view>
			<view class="shuju_one">
				<view class="shuju_one_title">
					<p>害虫趋势统计</p>
					<view class="schedule_box">
						<view class="schedule" @click="pickertfone=!pickertfone">
							<p class="schedule_value">{{titletext[indexone]}}</p>
							<p class="schedule_icon">
								<u-icon name="arrow-down"></u-icon>
							</p>
						</view>
						<u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun" :default-selector="[indexone]" :range="titletext"></u-picker>
						<view class="schedule" @click="pickertftwo=!pickertftwo">
							<p class="schedule_value">{{wormdata[indextwo]}}</p>
							<p class="schedule_icon">
								<u-icon name="arrow-down"></u-icon>
							</p>
							<u-picker v-model="pickertftwo" mode="selector" @confirm="confirmFun2" :default-selector="[indextwo]" :range="wormdata"></u-picker>
						</view>
					</view>
				</view>
				<highcharts :chartOptions="options" :styles="styles" ref="simpleChart"></highcharts>
				<p class="tishi" v-if="!tishi">暂无数据</p>
				<highcharts :chartOptions="optiontwos" :styles="styletwos" ref="simpleChart" v-if="tishitf"></highcharts>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.top_text {
		width: 90%;
		position: absolute;
		top: 54px;
		display: flex;
		left: 5%;

		.tltle_text {
			width: 50%;
			border: 2rpx solid #F0F0F0;
			text-align: center;
		}

		.title_text_color {
			width: 50%;
			border: 2rpx solid #64CC82;
			text-align: center;
		}
	}

	.tishi {
		position: absolute;
		top: 250rpx;
		left: 40%;
		font-size: 32rpx;
		color: #7A7373;
	}

	.shuju_one_title {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;


		.schedule_box {
			display: flex;
		}

		.schedule {
			display: flex;
			width: 180rpx;
			height: 50rpx;
			border: 2rpx solid #F0F0F0;
			margin-left: 20rpx;

			.schedule_value {
				width: 70%;
				text-align: center;
				line-height: 50rpx;
			}

			.schedule_icon {
				width: 30%;
				background-color: #F2F2F2;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}
</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"
				},
				styletwos: {
					width: "650rpx",
					height: "600rpx"
				},
				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: [],
				},
				d_id: '',
				start_time: strrttime,
				end_time: newtime,
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				device_id: '',
				pest_name: '',
				wormdata: [],
				pickertfone: false,
				pickertftwo: false,
				indexone: 0,
				indextwo: 0,
				optiontwos: {
					chart: {
						spacing: [40, 0, 40, 0]
					},
					title: {
						floating: true,
						text: ''
					},
					credits: {
						enabled: false
					},
					tooltip: {
						pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					},

					series: [{
						type: 'pie',
						innerSize: '60%',
						name: '占比',
						data: []
					}]
				},
				tishitf: false,
				tishi: false,
				toptext: ["自动统计", "手动统计"],
				topindex: 0
			}
		},
		methods: {
			async historys() { //获取统计虫子 自动统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics',
					data: {
						d_id: this.d_id,
						start_time: parseInt(this.start_time / 1000),
						end_time: parseInt(this.end_time / 1000)
					}
				})
				if (res.percentage.length == 0) {
					this.tishitf = false
				} else {
					this.tishitf = true
					this.wormdata = []
					for (var i = 0; i < res.percentage.length; i++) {
						this.wormdata.unshift(res.percentage[i].name_num)
					}
				}
			},
			async history() { //获取统计虫子 //自动统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics',
					data: {
						pest_name: this.pest_name,
						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)
				// console.log(this.optiontwos.series.data)
				this.options.series = []
				var obj1 = {
					name: "温度(°C)",
					data: [],
					color: "#00E29D"
				}
				var obj2 = {
					name: "湿度(%)",
					data: [],
					color: "#6CBBFF"
				}
				var obj3 = {
					name: "害虫总数",
					data: [],
					color: "#f00000"
				}
				if (res.date.length == 0) {
					this.tishi = false
				} else {
					this.tishi = true
					this.optiontwos.series[0].data = []
					for (var i = 0; i < res.percentage.length; i++) {
						var arr = [res.percentage[i].name_num + ":" + res.percentage[i].sum + "头", res.percentage[i].sum]
						this.optiontwos.series[0].data.push(arr) /*********************************/

					}
					for (var i = 0; i < res.date.length; i++) {
						var arr1 = []
						arr1.push(res.date[i].addtime * 1000 + 8 * 3600000, Number(res.date[i].temperature))
						obj1.data.push(arr1)
						var arr2 = []
						arr2.push(res.date[i].addtime * 1000 + 8 * 3600000, Number(res.date[i].humidity))
						obj2.data.push(arr2)
						var arr3 = []
						arr3.push(res.date[i].addtime * 1000 + 8 * 3600000, Number(res.date[i]._sums))
						obj3.data.push(arr3)
					}
					this.options.series.push(obj1)
					this.options.series.push(obj2)
					this.options.series.push(obj3)
				}
				if (res.percentage.length == 0) {
					this.tishitf = false
					console.log(1)
				} else {
					console.log(2)
					this.tishitf = true
					this.wormdata = []
					for (var i = 0; i < res.percentage.length; i++) {
						this.wormdata.unshift(res.percentage[i].name_num)
					}
				}
			},
			//forecast.worm_lamp.pest_manual_statistics手动统计
			async selfhistorys() { //获取统计虫子 自动统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_manual_statistics',
					data: {
						device_id: this.d_id,
						start_time: parseInt(this.start_time / 1000),
						end_time: parseInt(this.end_time / 1000)
					}
				})
				if (res.dat.length == 0) {
					this.tishitf = false
				} else {
					this.tishitf = true
					this.wormdata = []
					for (var i = 0; i < res.dat.length; i++) {
						this.wormdata.unshift(res.dat[i].pest_name)
					}
				}
			},
			async selfhistory() { //获取统计虫子 //自动统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_manual_statistics',
					data: {
						pest_name: this.pest_name,
						device_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 = []
				var obj = {
					name: "害虫总数",
					data: [],
					color: "#f00000"
				}
				if (res.dat.length == 0) {
					this.tishi = false
				} else {
					this.tishi = true
					this.optiontwos.series[0].data = []
					for (var i = 0; i < res.dat.length; i++) {
						var arr = [res.dat[i].pest_name + ":" + res.dat[i].pest_num + "头", res.dat[i].pest_num]
						this.optiontwos.series[0].data.push(arr) /*********************************/
					}
					for (var i = 0; i < res.date.length; i++) {
						var arr1 = []
						arr1.push(res.date[i].add_time * 1000 + 8 * 3600000, Number(res.date[i].pest_num))
						obj.data.push(arr1)
					}
					this.options.series.push(obj)
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			confirmFun(index) {
				this.indexone = index[0]
				var now = new Date()
				this.$forceUpdate()
				if (index[0] == 0) {
					this.start_time = strrttime
					if (this.topindex == 0) {
						this.history()
						this.historys()
					} else {
						this.selfhistorys()
						this.selfhistory()
					}
				} else if (index[0] == 1) {
					var oldtime = now.setMonth(now.getMonth() - 1)
					this.start_time = parseInt(oldtime)
					if (this.topindex == 0) {
						this.history()
						this.historys()
					} else {
						this.selfhistorys()
						this.selfhistory()
					}
				} else if (index[0] == 2) {
					var oldtime = now.setMonth(now.getMonth() - 6)
					this.start_time = parseInt(oldtime)
					if (this.topindex == 0) {
						this.history()
						this.historys()
					} else {
						this.selfhistorys()
						this.selfhistory()
					}
				} else if (index[0] == 3) {
					var oldtime = now.setFullYear(now.getFullYear() - 1)
					this.start_time = parseInt(oldtime)
					if (this.topindex == 0) {
						this.history()
						this.historys()
					} else {
						this.selfhistorys()
						this.selfhistory()
					}
				}
			},
			confirmFun2(index) {
				this.indextwo = index[0]
				this.pest_name = this.wormdata[this.indextwo]
				this.history()
			},
			changeindex(index) {
				this.topindex = index
				if (this.topindex == 0) {
					this.pest_name = ''
					this.history()
					this.historys()
				} else {
					this.pest_name = ''
					this.selfhistorys()
					this.selfhistory()
				}
			}
		},
		onLoad(option) {
			this.d_id = option.d_id
			this.device_id = option.device_id
			this.history()
			this.historys()

		}
	}
</script>

<style lang="scss">
	.shuju_one,
	.shuju_two {
		position: absolute;
		top: 84px;
		width: 90%;
		left: 5%;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding-top: 20rpx;

	}

	.condition {
		position: absolute;
		top: 600rpx;
		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>