<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/cbd' }">虫情测报</el-breadcrumb-item>
			<el-breadcrumb-item>害虫统计</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="equipInfo">
			<div class="equipMsg">
				<span>设备ID：{{id}}</span>
				<span>设备名称：{{equipStatus.device_name || '无'}}</span>
				<span>位置：{{equipStatus.address}}</span>
			</div>
			<div class="ctrl-check">
				<div class="time-check">
					<div>
						<el-button
							:type="btnSelected == '1'?'primary':'default'"
							size="mini"
							@click="timeBtnClick(1)"
						>24小时</el-button>
						<el-button
							:type="btnSelected == '2'?'primary':'default'"
							size="mini"
							@click="timeBtnClick(2)"
						>近一月</el-button>
						<el-button
							:type="btnSelected == '3'?'primary':'default'"
							size="mini"
							@click="timeBtnClick(3)"
						>近半年</el-button>
						<el-button
							:type="btnSelected == '4'?'primary':'default'"
							size="mini"
							@click="timeBtnClick(4)"
						>近一年</el-button>
						<el-date-picker
							size="mini"
							v-model="timeRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="DateChange"
						></el-date-picker>
					</div>
					<div class="viewSwitch">
						<el-button type="primary" v-if="viewSwitch" @click="viewSwitchFun(false)" size="mini">手动统计</el-button>
						<el-button type="primary" v-if="!viewSwitch" @click="viewSwitchFun(true)" size="mini">自动统计</el-button>
					</div>
				</div>
			</div>
		</div>
		<!-- 自动统计图 -->
		<div v-if="viewSwitch">
			<div>
				<el-row :gutter="10">
					<el-col :md="24" :lg="15">
						<el-card class="box-card">
							<template>
								<div class="chartsSelect">
									<el-select v-model="viewSwitch2" @change="screenInsect()" size="mini" placeholder="请选择">
										<el-option
											v-for="item in worms"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										></el-option>
									</el-select>
								</div>
							</template>
							<div class="charts">
								<highcharts :options="options" v-if="chartsShow"></highcharts>
								<div class="noDataClass" v-else>暂无数据</div>
							</div>
						</el-card>
					</el-col>
					<el-col :md="24" :lg="9">
						<el-card class="box-card">
							<div class="pie">
								<highcharts :options="options2" v-if="chartsShowA"></highcharts>
								<div class="noDataClass" v-else>暂无数据</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			<div class="dataTableSearch">
				<el-button type="primary" size="mini">导出</el-button>
			</div>
			<el-card class="box-card">
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column
						v-for="(item,index) in tableHeadTxt"
						:key="index"
						:prop="item[1]"
						:label="item[0]"
					>
						<template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
					</el-table-column>
				</el-table>
				<!-- <el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					@current-change="changePage"
				></el-pagination>-->
			</el-card>
		</div>

		<!-- 手动统计 -->
		<div v-if="!viewSwitch">
			<div>
				<el-row :gutter="10">
					<el-col :md="24" :lg="15">
						<el-card class="box-card">
							<template>
								<div class="chartsSelect">
									<el-select v-model="viewSwitch23" @change="screenInsectA()" size="mini" placeholder="请选择">
										<el-option
											v-for="item in dropDown"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										></el-option>
									</el-select>
								</div>
							</template>
							<div class="charts">
								<highcharts :options="options3" v-if="chartsLineShow"></highcharts>
								<div class="noDataClass" v-else>暂无数据</div>
							</div>
						</el-card>
					</el-col>
					<el-col :md="24" :lg="9">
						<el-card class="box-card">
							<div class="pie">
								<highcharts :options="options4" v-if="chartsPieShow"></highcharts>
								<div class="noDataClass" v-else>暂无数据</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			<div class="dataTableSearch">
				<el-button type="primary" size="mini">导出</el-button>
			</div>
			<el-card class="box-card">
				<el-table :data="tableDataA" stripe style="width: 100%">
					<el-table-column
						v-for="(item,index) in tableHeadTxtA"
						:key="index"
						:prop="item[1]"
						:label="item[0]"
					>
						<template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
					</el-table-column>
				</el-table>
				<!-- <el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					@current-change="changePage"
				></el-pagination>-->
			</el-card>
		</div>
	</div>
</template>

<script>
import t from '../../../assets/ezuikit'
export default {
	data() {
		return {
			id: this.$route.params.id,
			btnSelected: '2',
			allPest: [],
			options: {},
			options2: {},
			options3: {},
			options4: {},
			equip_name: '',
			worms: [
				// {
				// 	value: 1,
				// 	label: '蛾子'
				// },
				// {
				// 	value: 2,
				// 	label: '蚊子'
				// }
			],
			// 状态信息
			equipStatus: {},
			//总数据条数
			total: 0,
			// 自动统计动态表头
			tableHeadTxt: [
				['害虫名称', 'name'],
				['害虫数量', 'sum']
				// ["统计时间", "upl_time"]
			],
			// 表格数据
			tableData: [],
			tableDataA: [],
			timeRange: '',
			queryInfo: {
				begin: '',
				end: '',
				id: this.$route.params.id,
				page: 1
			},
			viewSwitch: 1,
			viewSwitch2: '',
			viewSwitch23:'',
			// 手动统计表头
			tableHeadTxtA: [
				['害虫名称', 'pest_name'],
				['害虫数量', 'pest_num'],
				['作物种类', 'crop_name'],
				['虫害阶段', 'pest_case'],
				['统计时间', 'add_time']
				// ["统计时间", "upl_time"]
			],
			chartsShow: true, //判断折线图是否为空
			chartsShowA: true, //判断统计图是否为空
			dropDown: [], //手动统计害虫名称下拉数据
			chartsLineShow: true, //判断折线图是否为空
			chartsPieShow: true //判断统计图是否为空
		}
	},
	watch: {
		viewSwitch(val) {
			this.btnSelected = '2'
		}
	},
	created() {},
	mounted() {
		this.timeBtnClick(2)
		// this.getTableList()
		// this.getPestChartLine()
	},
	methods: {
		//获取害虫种类
		getPests() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.worm_list'
			}).then((res) => {
				if (res.data.message == '') {
					this.allPest = res.data.data
					// this.getPestChartPie()
					this.getTableList()
				}
			})
		},
		//获取害虫比例数据
		getPestChartPie() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics_list',
				data: this.qs.stringify({
					device_id: this.queryInfo.id
				})
			}).then((res) => {
				if (res.data.message == '') {
					// var data = res.data.data.data
					// console.log(data)
					// var arr = []
					// if (this.allPest.length > 0) {
					// 	for (let item of data) {
					// 		// console.log(this.allPest);
					// 		// console.log(123);
					// 		this.allPest.forEach(function (m) {
					// 			if (item.name_num == m.num) {

					// 				arr.push([m.name, item.sum])
					// 			}
					// 		})
					// 	}
					// }
					// this.chartPieInit(arr)
					// this.gainInsect(arr) //获取下拉框害虫种类

					if (res.data.data.counts !== 0) {
						var data = res.data.data.data

						var arr = []
						var arrA = []
						for (let i in data) {
							let o = { value: data[i].name_num, label: data[i].name_num }
							arr.push(o)
							arrA.push([data[i].name_num, data[i].sum])
						}
						this.chartPieInit(arrA)
						this.gainInsect(arr) //获取下拉框害虫种类
						this.chartsShowA = true
					} else {
						this.chartsShowA = false
					}

					// var arr = []
					// var arrA = []
					// for (let i in data) {
					// 	let o = { value: data[i].name_num, label: data[i].name_num }
					// 	arr.push(o)
					// 	arrA.push([data[i].name_num, data[i].sum])
					// }
					// this.chartPieInit(arrA)
					// this.gainInsect(arr) //获取下拉框害虫种类
				}
			})
		},
		//筛选时间
		timeBtnClick(i) {
			this.btnSelected = i
			this.timeRange = ''
			if (i == 1) {
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000) / 1000)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			} else if (i == 2) {
				this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000 * 30) / 1000)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			} else if (i == 3) {
				this.queryInfo.begin = parseInt(
					(Date.now() - 24 * 3600000 * 30 * 6) / 1000
				)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			} else if (i == 4) {
				this.queryInfo.begin = parseInt(
					(Date.now() - 24 * 3600000 * 30 * 12) / 1000
				)
				this.queryInfo.end = parseInt(Date.now() / 1000)
			}

			// 判断是自动统计还是手动统计
			if (this.viewSwitch == true) {
				//自动统计
				this.getPestChartLine()
				this.getTableList()
			} else if (this.viewSwitch == false) {
				//手动统计
				this.manualStatistics() //手动统计折线图请求
			}
		},

		//获取折线图数据
		getPestChartLine() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics',
				data: this.qs.stringify({
					device_id: this.queryInfo.id,
					start_time: this.queryInfo.begin,
					end_time: this.queryInfo.end,
					pest_name: ''
				})
			}).then((res) => {
				if (res.data.message == '') {
					var ChartData = [
						{
							name: '温度（°C）',
							dat: []
						},
						{
							name: '湿度（%）',
							dat: []
						},
						{
							name: '害虫总数',
							dat: []
						}
					]
					this.equipStatus = {
						address: res.data.data.address,
						device_name: res.data.data.device_name
					}
					var data = res.data.data.broken_line
					if (data.length > 0) {
						this.chartsShow = true
						for (let item of data) {
							ChartData[0].dat.unshift([
								item.addtime * 1000 + 8 * 3600000,
								Number(item.temperature)
							])
							ChartData[1].dat.unshift([
								item.addtime * 1000 + 8 * 3600000,
								Number(item.humidity)
							])
							ChartData[2].dat.unshift([
								item.addtime * 1000 + 8 * 3600000,
								Number(item._sums)
							])
						}
						this.options = {
							chart: {
								zoomType: 'x'
							},
							title: {
								text: '害虫变化趋势',
								align: 'left'
							},
							subtitle: {
								text: ''
							},
							xAxis: {
								crosshair: true, //十字基准线
								type: 'datetime',
								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: {
									text: ''
								}
							},
							legend: {
								// layout: 'vertical',
								align: 'center',
								verticalAlign: 'top'
							},
							plotOptions: {
								series: {
									label: {
										connectorAllowed: false
									},
									pointStart: 2010
								}
							},
							series: [
								{
									name: ChartData[0].name,
									data: ChartData[0].dat
								},
								{
									name: ChartData[1].name,
									data: ChartData[1].dat
								},
								{
									name: ChartData[2].name,
									data: ChartData[2].dat
								}
							],
							colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
							credits: {
								//去掉默认的highcharts.com
								enabled: false
							},
							tooltip: {
								// crosshairs: true,
								shared: true, //折线共享
								headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
							},
							responsive: {
								rules: [
									{
										condition: {
											maxWidth: 500
										},
										chartOptions: {
											legend: {
												layout: 'horizontal',
												align: 'center',
												verticalAlign: 'bottom'
											}
										}
									}
								]
							}
						}
					} else {
						this.chartsShow = false
					}
				}
			})
		},

		DateChange() {
			console.log(this.timeRange)
			this.btnSelected = null;
			this.queryInfo.page = 1;
			if(this.timeRange){
				this.queryInfo.begin = parseInt(
					new Date(this.timeRange[0]).getTime() / 1000
				)
				this.queryInfo.end = parseInt(
					new Date(this.timeRange[1]).getTime() / 1000
				)
			}else{
				this.queryInfo.begin = '';
				this.queryInfo.end = '';
			}

			// 判断是自动统计还是手动统计
			if (this.viewSwitch == true) {
				//自动统计
				this.getPestChartLine()
				this.getTableList()
			} else if (this.viewSwitch == false) {
				//手动统计
				this.manualStatistics() //手动统计折线图请求
			}
		},
		//饼状图初始化
		chartPieInit(arr) {
			var _this = this
			this.options2 = {
				chart: {
					type: 'pie',
					options3d: {
						enabled: true,
						alpha: 60,
						beta: 0
					}
				},
				credits: {
					enabled: false
				},
				title: {
					text: '害虫比例',
					align: 'left'
				},
				tooltip: {
					headerFormat: '{series.name}<br>',
					pointFormat: '{point.name}: <b>{point.y}头</b>'
				},
				colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							format: '<b>{point.name}</b>: {point.percentage:.1f} %'
						},
						point: {
							events: {
								mouseOver: function (e) {
									// 鼠标滑过时动态更新标题
									// console.log(e)
									// console.log(this.setTitle())
									// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
									// VueHighcharts.setTitle({
									//    text: e.target.name+ '\t'+ e.target.y + ' %'
									// });
								},
								click(e) {
									// 同样的可以在点击事件里处理
									_this.viewSwitch2 = e.point.name;
									_this.screenInsect()
									// console.log(this.options2)
									//       _this.options2.title.text=e.point.name;
								}
							}
						}
					}
				},
				series: [
					{
						type: 'pie',
						innerSize: '80%',
						name: '害虫比例',
						data: arr
					}
				    ]
			    },
				function (c) {
					// 图表初始化完毕后的会掉函数
					// 环形图圆心
					var centerY = c.series[0].center[1],
						titleHeight = parseInt(c.title.styles.fontSize)
					// 动态设置标题位置
					c.setTitle({
						y: centerY + titleHeight / 2
					})
				}
		},
		//获取表格历史数据
		getTableList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics_list',
				data: this.qs.stringify({
					device_id: this.queryInfo.id,
					page: this.queryInfo.page,
					start_time: this.queryInfo.begin,
					end_time: this.queryInfo.end
				})
			}).then((res) => {
				// 饼状图数据
				if (res.data.data.counts !== 0) {
					var data = res.data.data.data

					var arr = []
					var arrA = []
					for (let i in data) {
						let o = { value: data[i].name_num, label: data[i].name_num }
						arr.push(o)
						arrA.push([data[i].name_num, data[i].sum])
					}
					this.chartPieInit(arrA)
					this.gainInsect(arr) //获取下拉框害虫种类
					this.chartsShowA = true
					this.viewSwitch2 = arr[0].label;
					this.viewSwitch23 = arrA[0].label;
				} else {
					this.chartsShowA = false
					this.chartPieInit([])
					this.gainInsect([]) //获取下拉框害虫种类
					this.viewSwitch2 = '';
					this.viewSwitch23 = '';
				}

				if (res.data.message == '') {
					this.total = res.data.data.counts
					var data = res.data.data.data
					this.tableData = []
					for (let i in data) {
						this.tableData.push({ name: data[i].name_num, sum: data[i].sum })
					}
				}
			})
		},
		// 手动自动切换
		viewSwitchFun(params) {
			this.viewSwitch = params
			this.queryInfo.begin = parseInt((Date.now() - 24 * 3600000 * 30) / 1000)
			this.queryInfo.end = parseInt(Date.now() / 1000)
			if (params == true) {
				// console.log('自动统计')
				this.timeBtnClick(2)
			} else if (params == false) {
				// console.log('手动统计')
				
				this.manualStatistics() //手动统计折线图请求
			}
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getHisDataList()
		},

		// 获取下拉框害虫种类-自动统计
		gainInsect(data) {
			this.worms = data
		},

		// 下拉框筛选害虫名称
		screenInsect() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics',
				data: this.qs.stringify({
					device_id: this.queryInfo.id,
					start_time: this.queryInfo.begin,
					end_time: this.queryInfo.end,
					pest_name: this.viewSwitch2
				})
			}).then((res) => {
				if (res.data.message == '') {
					var ChartData = [
						{
							name: '温度（°C）',
							dat: []
						},
						{
							name: '湿度（%）',
							dat: []
						},
						{
							name: '害虫总数',
							dat: []
						}
					]
					this.equipStatus = {
						address: res.data.data.address,
						device_name: res.data.data.device_name
					}
					var data = res.data.data.date
					if (data.length > 0) {
						for (let item of data) {
							ChartData[0].dat.unshift([
								item.addtime * 1000 + 8 * 3600000,
								Number(item.temperature)
							])
							ChartData[1].dat.unshift([
								item.addtime * 1000 + 8 * 3600000,
								Number(item.humidity)
							])
							ChartData[2].dat.unshift([
								item.addtime * 1000 + 8 * 3600000,
								Number(item._sums)
							])
						}
						this.options = {
							title: {
								text: '害虫变化趋势',
								align: 'left'
							},
							subtitle: {
								text: ''
							},
							xAxis: {
								crosshair: true, //十字基准线
								type: 'datetime',
								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: {
									text: ''
								}
							},
							legend: {
								// layout: 'vertical',
								align: 'center',
								verticalAlign: 'top'
							},
							plotOptions: {
								series: {
									label: {
										connectorAllowed: false
									},
									pointStart: 2010
								}
							},
							series: [
								{
									name: ChartData[0].name,
									data: ChartData[0].dat
								},
								{
									name: ChartData[1].name,
									data: ChartData[1].dat
								},
								{
									name: ChartData[2].name,
									data: ChartData[2].dat
								}
							],
							colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
							credits: {
								//去掉默认的highcharts.com
								enabled: false
							},
							tooltip: {
								// crosshairs: true,
								shared: true, //折线共享
								headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
							},
							responsive: {
								rules: [
									{
										condition: {
											maxWidth: 500
										},
										chartOptions: {
											legend: {
												layout: 'horizontal',
												align: 'center',
												verticalAlign: 'bottom'
											}
										}
									}
								]
							}
						}
					}
				}
			})
		},

		// 手动统计-折线图数据请求
		manualStatistics() {
			let that = this
			let postData = that.qs.stringify({
				device_id: this.queryInfo.id, //设备id
				start_time: this.queryInfo.begin, //开始时间
				end_time: this.queryInfo.end, //结束时间
				pest_name: '' //害虫名
			})
			that
				.$axios({
					method: 'post',
					url:
						'/api/api_gateway?method=forecast.worm_lamp.pest_manual_statistics',
					data: postData
				})
				.then((res) => {
					if (res.data.message == '') {
						var ChartData = [
							{
								name: '害虫总数',
								dat: []
							}
						]
						var data = res.data.data.dat
						if (res.data.data.nums !== 0) {
							this.chartsLineShow = true
							var newArr = []
							for (let item of data) {
								var newObj = {}
								ChartData[0].dat.unshift([
									item.add_time * 1000 + 8 * 3600000,
									Number(item.pest_num)
								])
								newObj['value'] = item.pest_name
								newObj['label'] = item.pest_name
								newArr.push(newObj)
							}
							this.dropDown = newArr //害虫名称下拉框数据
							this.viewSwitch23 = newArr[0].value
							this.options3 = {
								title: {
									text: '害虫变化趋势',
									align: 'left'
								},
								subtitle: {
									text: ''
								},
								xAxis: {
									crosshair: true, //十字基准线
									type: 'datetime',
									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: {
										text: ''
									}
								},
								legend: {
									// layout: 'vertical',
									align: 'center',
									verticalAlign: 'top'
								},
								plotOptions: {
									series: {
										label: {
											connectorAllowed: false
										},
										pointStart: 2010
									}
								},
								series: [
									{
										name: ChartData[0].name,
										data: ChartData[0].dat
									}
								],
								colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
								credits: {
									//去掉默认的highcharts.com
									enabled: false
								},
								tooltip: {
									// crosshairs: true,
									shared: true, //折线共享
									headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
								},
								responsive: {
									rules: [
										{
											condition: {
												maxWidth: 500
											},
											chartOptions: {
												legend: {
													layout: 'horizontal',
													align: 'center',
													verticalAlign: 'bottom'
												}
											}
										}
									]
								}
							}
						} else if (res.data.data.nums == 0) {
							this.chartsLineShow = false
							this.viewSwitch23 = ''
						}
					}
					that.manualStatisticsPie(res.data) //请求手动统计饼状图数据
					that.manualStatisticsTab(res.data) //请求手动统计表格数据
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 手动统计-点击下拉框就切换折线图数据
		screenInsectA() {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.worm_lamp.pest_manual_statistics',
				data: this.qs.stringify({
					device_id: this.queryInfo.id,
					start_time: this.queryInfo.begin,
					end_time: this.queryInfo.end,
					pest_name: this.viewSwitch23
				})
			}).then((res) => {
				if (res.data.message == '') {
					var ChartData = [
						{
							name: '害虫总数',
							dat: []
						}
					]
					var data = res.data.data.dat
					if (res.data.data.nums !== 0) {
						this.chartsLineShow = true
						for (let item of data) {
							ChartData[0].dat.unshift([
								item.add_time * 1000 + 8 * 3600000,
								Number(item.pest_num)
							])
						}
						this.options3 = {
							title: {
								text: '害虫变化趋势',
								align: 'left'
							},
							subtitle: {
								text: ''
							},
							xAxis: {
								crosshair: true, //十字基准线
								type: 'datetime',
								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: {
									text: ''
								}
							},
							legend: {
								align: 'center',
								verticalAlign: 'top'
							},
							plotOptions: {
								series: {
									label: {
										connectorAllowed: false
									},
									pointStart: 2010
								}
							},
							series: [
								{
									name: ChartData[0].name,
									data: ChartData[0].dat
								}
							],
							colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
							credits: {
								//去掉默认的highcharts.com
								enabled: false
							},
							tooltip: {
								// crosshairs: true,
								shared: true, //折线共享
								headerFormat: '<b>{point.x:%Y-%m-%e %H:%M:%S}</b><br>'
							},
							responsive: {
								rules: [
									{
										condition: {
											maxWidth: 500
										},
										chartOptions: {
											legend: {
												layout: 'horizontal',
												align: 'center',
												verticalAlign: 'bottom'
											}
										}
									}
								]
							}
						}
					} else if (res.data.data.nums == 0) {
						this.chartsLineShow = false
					}
				}
			})
		},

		//手动统计-饼状图数据
		manualStatisticsPie(data) {
			console.log(data)
			var dat = data.data.dat
			var arr = []
			for (var i = 0; i < dat.length; i++) {
				var a = []
				a.push(dat[i].pest_name)
				a.push(parseInt(dat[i].pest_num))
				arr.push(a)
			}
			//判断当前是否有数据
			if (data.data.nums !== 0) {
				this.chartsPieShow = true
				// console.log('有数据')
				var _this = this;
				this.options4 = {
					chart: {
						type: 'pie',
						options3d: {
							enabled: true,
							alpha: 60,
							beta: 0
						}
					},
					credits: {
						enabled: false
					},
					title: {
						text: '害虫比例',
						align: 'left'
					},
					tooltip: {
						headerFormat: '{series.name}<br>',
						pointFormat: '{point.name}: <b>{point.y}头</b>'
					},
					colors: ['#00e29d', '#6cbbff', '#ff3f3f'],
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}</b>: {point.percentage:.1f} %'
							},
							point: {
								events: {
									mouseOver: function (e) {
										// 鼠标滑过时动态更新标题
										// console.log(e)
										// console.log(this.setTitle())
										// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
										// VueHighcharts.setTitle({
										//    text: e.target.name+ '\t'+ e.target.y + ' %'
										// });
									},
									click(e) {
										// 同样的可以在点击事件里处理
										_this.viewSwitch23 = e.point.name;
										_this.screenInsectA()
									}
								}
							}
						}
					},
					series: [
						{
							type: 'pie',
							innerSize: '80%',
							name: '害虫比例',
							data: arr
						}
					]
				}
			} else if (data.data.nums == 0) {
				this.chartsPieShow = false
			}
		},

		//手动统计-表格数据
		manualStatisticsTab(data) {
			let that = this
			var dat = data.data
			var arr = (that.tableDataA = [])
			for (var i = 0; i < dat.dat.length; i++) {
				var time = dat.dat[i].add_time
				var date = new Date(parseInt(time) * 1000)
					.toLocaleString()
					.replace(/:\d{1,2}$/, ' ')
				var obj = {}
				obj['add_time'] = date
				obj['crop_name'] = dat.dat[i].crop_name
				obj['pest_case'] = dat.dat[i].pest_case
				obj['pest_name'] = dat.dat[i].pest_name
				obj['pest_num'] = dat.dat[i].pest_num
				arr.push(obj)
			}
			that.tableDataA = arr
		}
	}
}
</script>

<style lang='less' scoped>
.box-card {
	position: relative;
}
.equipInfo {
	.equipMsg {
		font-size: 14px;
		color: #3d3d3d;
		i {
			font-size: 16px;
			color: #14a478;
		}
		span {
			margin-left: 5px;
		}
	}
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.time-check {
	display: flex;
	justify-content: space-between;
	.el-input__inner {
		margin-left: 10px;
		width: 222px;
	}
	.viewSwitch {
		margin-left: 10px;
	}
}

.chartsSelect {
	text-align: right;
	position: absolute;
	z-index: 31;
	left: 0;
	right: 21px;
}
.charts,
.pie {
	height: 423px;
}
.equipStatus {
	display: flex;
	justify-content: center;
	margin: 10px 0;
	.equipIcon {
		margin-right: 14%;
	}
	.equipParams {
		min-width: 80px;
		line-height: 27px;
		p {
			color: #a6a6a6;
		}
	}
}

.dataTableSearch {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
	.el-input__inner {
		width: 222px;
	}
}

// .check-btns{display:flex;justify-content: space-between;margin-bottom:20px}
.echarts {
	width: 100%;
	height: 300px;
}

// 暂无数据
.noDataClass {
	text-align: center;
	font-size: 25px;
	line-height: 450px;
	color: rgb(122, 115, 115);
}
</style>