<template>
	<div class="innerHtml">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>基地展示</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="mapCover">
			<baidu-map
				class="bm-view"
				:center="center"
				@ready="handler"
				mapType="BMAP_NORMAL_MAP"
				:zoom="zoom"
				:scroll-wheel-zoom="true"
			>
				<!-- 缩放 -->
				<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
				<!-- 地图类型 -->
				<bm-map-type
					:map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
					anchor="BMAP_ANCHOR_TOP_RIGHT"
				></bm-map-type>
				<!-- 基地标注点 -->
				<div v-for="item in baseList" :key="item.id">
					<bm-marker
						:position="{ lng: item.lng, lat: item.lat }"
						@click="baseMarkerClick(item)"
						:icon="{ url: markerIcon, size: { width: 35, height: 49 } }"
						:offset="{ width: 8, height: -5 }"
					>
						<bm-label
							:content="item.base_name"
							:offset="{ width: 11, height: 50 }"
							:position="{ lng: item.lng, lat: item.lat }"
							:labelStyle="{
								border: 'none',
								padding: '2px 4px',
								fontWeight: '600',
								fontSize: '12px',
								cursor: 'pointer'
							}"
							:title="item.base_name"
						/>
					</bm-marker>
				</div>
				<!-- 基地窗体信息 -->
				<bm-info-window
					:position="currBase.position"
					autoPan
					:show="show"
					@close="infoWindowClose"
					@open="infoWindowOpen"
				>
					<div class="baseWrap">
						<img class="baseImg" :src="$host + currBase.imgSrc" />
						<div class="baseInfo">
							<div class="iconimg">
								<img src="@/assets/images/fourMoodBase/icon.png" />
							</div>
							<div class="baseCon">
								<div class="baseName">
									<strong>{{ currBase.name }}</strong>
									<span class="lookBaseBtn" @click="lookBase(currBase.id)"
										>查看基地</span
									>
								</div>
								<div class="baseInfoMsg">
									<div>负 责 人 ：</div>
									<span>{{ currBase.principal }}</span>
								</div>
								<div class="baseInfoMsg">
									<div>联系电话 ：</div>
									<span>{{ currBase.phone }}</span>
								</div>
								<div class="baseInfoMsg">
									<div>基地面积 ：</div>
									<span>{{ currBase.area }}亩</span>
								</div>
								<div class="baseInfoMsg">
									<div>基地地址 ：</div>
									<span>{{ currBase.address }}</span>
								</div>
							</div>
						</div>
					</div>
				</bm-info-window>
				<!-- 设备标注 -->
				<div v-for="equipItem in equipList" :key="equipItem.d_id">
					<bm-marker
						:position="{ lng: equipItem.lng, lat: equipItem.lat }"
						@click="equipMarkerClick(equipItem)"
						:icon="{ url: equipItem.icon, size: { width: 33, height: 40 } }"
					>
						<bm-label
							:content="equipItem.type_name"
							:offset="{ width: -20, height: 35 }"
							:position="{ lng: equipItem.lng, lat: equipItem.lat }"
							:labelStyle="{
								border: '1px solid #6ea4cd',
								padding: '4px 8px',
								fontWeight: '600',
								fontSize: '14px',
								cursor: 'pointer'
							}"
							:title="equipItem.type_name"
						/>
					</bm-marker>
				</div>
				<!-- 设备窗体信息 -->
				<bm-info-window
					:position="currEquip.position"
					autoPan
					:show="equipShow"
					@close="equipShowWindowClose"
					@open="equipShowWindowOpen"
				>
					<div class="equipInfoWindowTitle">
						{{ (currEquip.type + '') | equipType }}
					</div>
					<div class="equipInfoWindow">
						<span>设备ID：</span>
						{{ currEquip.id }}
					</div>
					<div class="equipInfoWindow">
						<span>设备名称：</span>
						{{ currEquip.name }}
					</div>
					<div class="equipInfoWindow">
						<span>设备位置：</span>
						{{ currEquip.address }}
					</div>
					<div class="equipInfoWindow">
						<span>上报时间：</span>
						{{ (currEquip.uptime * 1000) | formatTime }}
					</div>
				</bm-info-window>
			</baidu-map>
		</div>
		<div class="equipBox" v-if="equipsVisible">
			<!-- 基地名称 -->

			<div v-if="baseList2.length > 0">
				<div class="baseSearch">
					<i class="iconfont icon-loufang"></i>
					<el-select size="small" v-model="selectBaseId" placeholder="请选择">
						<el-option
							v-for="item in baseList2"
							:key="item.id"
							:label="item.base_name"
							:value="item.id"
						></el-option>
					</el-select>
					<div @click="changeBase()" class="searchBaseBtn">详情</div>
				</div>
			</div>
			<!-- 基地详情 -->
			<el-card class="box-card" v-if="detailsShow == 1">
				<div class="caption">基地详情</div>
				<div>
					<img :src="$host + currBase.imgSrc" width="290px" alt />
				</div>
				<div class="BaseInfoMsg">
					<div class="BaseInfoMsgItem">
						<i class="iconfont icon-yonghu11"></i>
						<div>
							<div class="BaseInfoMsgItemRight">
								<span>负责人：</span>
								<div>{{ currBase.principal }}</div>
							</div>
						</div>
					</div>
					<div class="BaseInfoMsgItem">
						<i class="iconfont icon-dianhua2"></i>
						<div>
							<div class="BaseInfoMsgItemRight">
								<span>联系电话：</span>
								<div>{{ currBase.phone }}</div>
							</div>
						</div>
					</div>
					<div class="BaseInfoMsgItem">
						<i class="iconfont icon-mianji"></i>
						<div>
							<div class="BaseInfoMsgItemRight">
								<span>基地面积：</span>
								<div>{{ currBase.area }}亩</div>
							</div>
						</div>
					</div>
					<div class="BaseInfoMsgItem">
						<i class="iconfont icon-dingwei"></i>
						<div>
							<div class="BaseInfoMsgItemRight">
								<span>基地地址：</span>
								<div>{{ currBase.address }}</div>
							</div>
						</div>
					</div>
					<div class="BaseInfoMsgItem">
						<i class="iconfont icon-xiangqing-"></i>
						<div>
							<div class="BaseInfoMsgItemRight">
								<span>基地介绍：</span>
								<div>{{ currBase.desc }}</div>
							</div>
						</div>
					</div>
					<div class="bottomBox">
						<el-button type="success" @click="gotoBasePage" size="mini"
							>返回上一级</el-button
						>
					</div>
				</div>
			</el-card>
			<!-- 杀虫灯详情 -->
			<el-card class="box-card detial" v-if="detailsShow == 2">
				<div class="caption">杀虫灯</div>
				<div>
					<div class="chart">
						<highcharts
							:options="scdoptions"
							style="height: 280px"
						></highcharts>
					</div>
				</div>
				<div class="detialCaption">
					<i class="iconfont icon-zhuti_tiaosepan_o"></i>
					<span>设备状态</span>
				</div>
				<table class="state">
					<tr>
						<td>
							<div class="statusVal">{{ scd_state.ws }}</div>
							<div class="status">工作状态</div>
						</td>
						<td>
							<div class="statusVal">{{ scd_state.tbs }}</div>
							<div class="status">灯管状态</div>
						</td>
						<td>
							<div class="statusVal">{{ scd_state.rps }}</div>
							<div class="status">雨控状态</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="statusVal">{{ scd_state.tps }}</div>
							<div class="status">温控状态</div>
						</td>
						<td>
							<div class="statusVal">{{ scd_state.dps }}</div>
							<div class="status">倾倒状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ scd_state.tt == 0 ? '常亮' : scd_state.tt }}
							</div>
							<div class="status">定时(h)</div>
						</td>
					</tr>
				</table>
				<div class="bottomBox">
					<el-button
						type="success"
						@click="goEquipDetail('scdDetail', scdId)"
						size="mini"
						>查看详情</el-button
					>
				</div>
			</el-card>
			<!-- 测报灯详情 -->
			<el-card class="box-card detial cbd" v-if="detailsShow == 3">
				<div class="caption">虫情测报</div>
				<div class="detialCaption">
					<i class="iconfont icon-diannao1"></i>
					<span>设备状态</span>
				</div>
				<table class="state">
					<tr>
						<td>
							<div class="statusVal">
								{{ cbdState.device_status == '0' ? '离线' : '在线' }}
							</div>
							<div class="status">在线状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ cbdState.ts == '0' ? '光控' : '时控' }}
							</div>
							<div class="status">定时模式</div>
						</td>
						<td>
							<div class="statusVal">
								{{ cbdState.rps == '0' ? '正常' : '雨控' }}
							</div>
							<div class="status">雨控状态</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="statusVal">
								{{ cbdState.lps == '0' ? '正常' : '光控' }}
							</div>
							<div class="status">光控状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ cbdState.tps == '0' ? '正常' : '温控' }}
							</div>
							<div class="status">温控状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ cbdState.hs == '0' ? '正常' : '加热' }}
							</div>
							<div class="status">加热状态</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="statusVal">{{ cbdState.tph }}</div>
							<div class="status">高温限制</div>
						</td>
						<td>
							<div class="statusVal">{{ cbdState.tpl }}</div>
							<div class="status">低温限制</div>
						</td>
						<td>
							<div class="statusVal">{{ cbdState.csq }}</div>
							<div class="status">信号强度</div>
						</td>
					</tr>
				</table>
				<div class="detialCaption">
					<i class="iconfont icon-tupian-xianxing"></i>
					<span>害虫图片</span>
				</div>
				<table class="img" v-viewer>
					<tr v-for="(activity, index) in equipPhotos" :key="index">
						<td v-for="(item, ind) in activity" :key="ind">
							<div>
								<img :src="$host + equipImgs[0].addr" width="130px" alt />
							</div>
						</td>
					</tr>
					<tr v-if="equipPhotos.length <= 0">
						<td>暂无图片</td>
					</tr>
				</table>
				<div class="bottomBox">
					<el-button
						type="success"
						@click="goEquipDetail('cbdDataDetails')"
						size="mini"
						>查看详情</el-button
					>
				</div>
			</el-card>
			<!-- 性诱测报详情 -->
			<el-card class="box-card detial" v-if="detailsShow == 4">
				<div class="caption">性诱测报</div>
				<div>
					<div class="chart">
						<highcharts
							:options="znxyoptions"
							style="height: 230px"
						></highcharts>
					</div>
				</div>
				<div class="detialCaption">
					<i class="iconfont icon-diannao1"></i>
					<span>设备状态</span>
				</div>
				<table class="state">
					<tr>
						<td>
							<div class="statusVal">{{ znxyState.proj }}</div>
							<div class="status">设备型号</div>
						</td>
						<td>
							<div class="statusVal">
								{{ znxyState.ds == 1 ? '开启' : '关闭' }}
							</div>
							<div class="status">设备开关</div>
						</td>
						<td>
							<div class="statusVal">
								{{ znxyState.ws == 1 ? '在线' : '离线' }}
							</div>
							<div class="status">工作状态</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="statusVal">{{ znxyState.bv }}</div>
							<div class="status">电池电压</div>
						</td>
						<td>
							<div class="statusVal">{{ znxyState.csq }}</div>
							<div class="status">信号强度</div>
						</td>
						<td>
							<div class="statusVal">{{ znxyState.dver }}</div>
							<div class="status">设备版本</div>
						</td>
					</tr>
				</table>
				<div class="bottomBox">
					<el-button
						type="success"
						@click="goEquipDetail('xycbDataDetail')"
						size="mini"
						>查看详情</el-button
					>
				</div>
			</el-card>
			<!-- 环境监测详情 -->
			<el-card class="box-card detial" v-if="detailsShow == 5">
				<div class="caption">环境监测</div>
				<div class="chart">
					<highcharts :options="qxzoptions" style="height: 400px"></highcharts>
				</div>
				<div class="bottomBox">
					<el-button
						type="success"
						@click="goEquipDetail('historyData')"
						size="mini"
						>查看详情</el-button
					>
				</div>
			</el-card>
			<!-- 孢子仪详情 -->
			<el-card class="box-card detial" v-if="detailsShow == 7">
				<div class="caption">孢子仪</div>
				<div>
					<div class="chart">
						<highcharts
							:options="bzyoptions"
							style="height: 230px"
						></highcharts>
					</div>
				</div>
				<div class="detialCaption">
					<i class="iconfont icon-diannao1"></i>
					<span>设备状态</span>
				</div>
				<table class="state">
					<tr>
						<td>
							<div class="statusVal">
								{{ bzyState.bat_sta == 1 ? '电量过低' : '正常' }}
							</div>
							<div class="status">电池状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ bzyState.usb_sta == 1 ? '异常' : '正常' }}
							</div>
							<div class="status">摄像头状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ bzyState.on_off == 1 ? '开启' : '关闭' }}
							</div>
							<div class="status">设备开关</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="statusVal">
								{{ bzyState.isOnline == 1 ? '在线' : '离线' }}
							</div>
							<div class="status">在线状态</div>
						</td>
						<td>
							<div class="statusVal">
								{{ bzyState.rps == 1 ? '雨控' : '正常' }}
							</div>
							<div class="status">雨控状态</div>
						</td>
						<td>
							<div class="statusVal">{{ bzyState.dver }}</div>
							<div class="status">设备版本</div>
						</td>
					</tr>
				</table>
				<div class="detialCaption">
					<i class="iconfont icon-tupian-xianxing"></i>
					<span>孢子图片</span>
				</div>
				<table class="img" v-viewer>
					<tr v-for="(activity, index) in equipPhotos" :key="index">
						<td v-for="(item, ind) in activity" :key="ind">
							<div>
								<img :src="$host + equipImgs[0].addr" width="130px" alt />
							</div>
						</td>
					</tr>
					<tr v-if="equipPhotos.length <= 0">
						<td>暂无图片</td>
					</tr>
				</table>
				<div class="bottomBox">
					<el-button
						type="success"
						@click="goEquipDetail('dataDetail')"
						size="mini"
						>查看详情</el-button
					>
				</div>
			</el-card>
		</div>
		<!-- 监控 -->
		<el-dialog
			title="监控"
			:visible.sync="jkdetailsShow"
			:close-on-click-modal="false"
			width="700px"
		>
			<div>
				<video
					id="myPlayer"
					class="video-js vjs-default-skin"
					controls
					autoplay
					style="width: 100%; height: 300px"
				>
					<!-- <source :src="jkSrc" type="application/x-mpegURL" /> -->
				</video>
				<div style="text-align: center; margin: 10px">
					<el-button
						type="primary"
						@click="goEquipDetail('monitor')"
						size="small"
						>进入监控详情</el-button
					>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { qxz } from 'static/js/qxz.js'
import videojs from 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
videojs.options.flash.swf = '/js/video-js.swf'
export default {
	data() {
		return {
			markerIcon: require('@/assets/images/fourMoodBase/baseIcon2.png'),
			markerIcon2: require('@/assets/images/fourMoodBase/jkIcon.png'),
			equipList: [],
			baseList: [],
			baseList2: [],
			equipsVisible: false,
			center: { lng: 0, lat: 0 },
			zoom: null,
			currBase: {
				name: '',
				id: '',
				position: {},
				address: '',
				phone: '',
				area: '',
				imgSrc: '',
				principal: '',
				desc: '',
				d_id: ''
			},
			show: false,
			equipShow: false,
			currEquip: {
				name: '',
				type: '',
				id: '',
				uptime: '',
				address: '',

				position: {}
			},
			equipImgs: [],
			detailsShow: 1,
			jkdetailsShow: false,
			selectBaseId: null,
			scd_state: {},
			bzyState: {},
			znxyState: {},
			jkSrc: '',
			cbdState: {},
			scdoptions: {},
			bzyoptions: {},
			qxzoptions: {},
			znxyoptions: {},
			player: {} //监控实例化对象
		}
	},
	computed: {
		// 计算属性的 getter
		equipPhotos: function () {
			var len = this.equipImgs.length
			var n = 2 //每行个数
			var lineNum = len % n === 0 ? len / n : Math.ceil(len / n)
			var res = []
			for (let i = 0; i < lineNum; i++) {
				// slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
				let temp = this.equipImgs.slice(i * n, i * n + n)
				res.push(temp)
			}
			// console.log(res)
			return res
		}
	},
	methods: {
		getBaseList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=base.bases.base_list',
				data: this.qs.stringify({
					ret: 'list',
					page_size: 9999
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					let view = this.map.getViewport(data)
					this.zoom = view.zoom
					this.center = view.center
					this.baseList = []
					let arr = []
					data.map((item, index) => {
						let lat = item.lat
						let lng = item.lng
						this.$jsonp(
							`http://api.map.baidu.com/reverse_geocoding/v3/?renderReverse&output=json&coordtype=wgs84ll`,
							{
								ak: 'nroAiX0Lf6ppNEGt2dBLtDkOldGCPFwF',
								location: `${lat},${lng}`
							}
						).then((res) => {
							let addressComponent = res.result && res.result.addressComponent
							if (addressComponent) {
								item.address =
									addressComponent.province +
									addressComponent.city +
									addressComponent.district
							} else {
								item.address = ''
							}
							arr.push(item)
							this.baseList2 = arr
							this.baseList = arr
							if (index==data.length-1&&this.$route.query.id) {
								//判断是否是最后一次循环且是从管理页面跳转过来
								this.getBaseInfo(this.baseList, this.$route.query.id)
							}
						})
					})
				}
			})
		},
		getBaseInfo(baseList, id) {
			let item2 = baseList.filter((item) => {
				return item.id == id
			})[0]
			this.currBase = {}
			this.currBase.id = item2.id
			this.currBase.name = item2.base_name
			this.currBase.position = {
				lat: item2.lat,
				lng: item2.lng
			}
			this.currBase.address = item2.address
			this.currBase.phone = item2.base_phone
			this.currBase.area = item2.base_area
			this.currBase.desc = item2.base_describe
			this.currBase.imgSrc = item2.base_img
			this.currBase.principal = item2.base_charge
			this.lookBase(id)
		},
		scdOption(data) {
			this.scdoptions = {
				chart: {
					type: 'line'
				},
				title: {
					text: '击虫次数'
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					categories: data.time
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							// 开启数据标签
							enabled: true
						},
						// 关闭鼠标跟踪，对应的提示框、点击事件会失效
						enableMouseTracking: true
					}
				},
				series: [
					{
						name: '击虫次数',
						data: data.ct
					}
				]
			}
		},
		bzyOption(data) {
			this.bzyoptions = {
				chart: {
					type: 'line'
				},
				title: {
					text: ''
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					categories: data.time
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							// 开启数据标签
							enabled: true
						},
						// 关闭鼠标跟踪，对应的提示框、点击事件会失效
						enableMouseTracking: true
					}
				},
				series: [
					{
						name: '环境温度',
						data: data.temperature
					},
					{
						name: '环境湿度',
						data: data.humidity
					}
				]
			}
		},
		qxzOption(data) {
			console.log(data)
			this.qxzoptions = {
				chart: {
					type: 'line'
				},
				title: {
					text: ''
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					categories: data[0].time
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							// 开启数据标签
							enabled: true
						},
						// 关闭鼠标跟踪，对应的提示框、点击事件会失效
						enableMouseTracking: true
					}
				},
				series: [
					{
						name: data[0].tex,
						data: data[0].val
					},
					{
						name: data[1].tex,
						data: data[1].val
					},
					{
						name: data[3].tex,
						data: data[3].val
					},
					{
						name: data[4].tex,
						data: data[4].val
					},
					{
						name: data[5].tex,
						data: data[5].val
					},
					{
						name: data[6].tex,
						data: data[6].val
					}
				]
			}
		},
		znxyOption(data) {
			console.log(data)
			this.znxyoptions = {
				chart: {
					type: 'line'
				},
				title: {
					text: ''
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					categories: data.time
				},
				yAxis: {
					title: {
						text: ''
					}
				},
				plotOptions: {
					line: {
						dataLabels: {
							// 开启数据标签
							enabled: true
						},
						// 关闭鼠标跟踪，对应的提示框、点击事件会失效
						enableMouseTracking: true
					}
				},
				series: [
					{
						name: '环境温度',
						data: data.temperature
					},
					{
						name: '环境湿度',
						data: data.humidity
					}
				]
			}
		},
		handler({ BMap, map }) {
			this.BMap = BMap
			this.map = map
			this.getBaseList()
		},
		baseMarkerClick(item) {
			//点击显示信息窗体
			this.currBase.id = item.id
			this.currBase.name = item.base_name
			this.currBase.position = {
				lat: item.lat,
				lng: item.lng
			}
			this.currBase.address = item.address
			this.currBase.phone = item.base_phone
			this.currBase.area = item.base_area
			this.currBase.desc = item.base_describe
			this.currBase.imgSrc = item.base_img
			this.currBase.principal = item.base_charge
			this.show = true //基地信息窗体显示
		},
		infoWindowOpen() {
			this.show = true
		},
		infoWindowClose() {
			this.show = false
		},
		lookBase(id) {
			this.selectBaseId = Number(id)
			this.show = false //隐藏基地弹框
			this.baseList = [] //清空地图基地坐标
			this.equipsVisible = true //右侧弹框设备/基地详情
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=base.bases.base_map_list',
				data: this.qs.stringify({
					base_id: id
				})
			}).then((res) => {
				let data = res.data.data
				let view = this.map.getViewport(data)
				this.zoom = view.zoom
				this.center = view.center
				this.equipList = data.map((item) => {
					//地图上渲染设备坐标
					this.iconFormat(item.equip_type, item)
					return item
				})
				// console.log(this.equipList)
			})
		},
		iconFormat(equip_ip, item) {
			switch (equip_ip + '') {
				case '2':
					item.icon = require('@/assets/images/home/mapView/scd.png')
					break
				case '3':
					item.icon = require('@/assets/images/home/mapView/cbd.png')
					break
				case '4':
					item.icon = require('@/assets/images/home/mapView/xyq.png')
					break
				case '5':
					item.icon = require('@/assets/images/home/mapView/qxz.png')
					break
				case '6':
					item.icon = require('@/assets/images/home/mapView/jk.png')
					break
				case '7':
					item.icon = require('@/assets/images/home/mapView/bzy.png')
					break
				case '9':
					item.icon = require('@/assets/images/home/mapView/tccb.png')
					break
			}
		},
		//请求设备图片
		getPhoto(device_id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
				data: this.qs.stringify({
					device_id,
					ret: 'screen',
					page_number: 4
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.equipImgs = res.data.data.data
				}
			})
		},
		equipMarkerClick(item) {
			this.currEquip.type = item.equip_type
			this.currEquip.name = item.type_name
			this.currEquip.position = {
				lat: item.lat,
				lng: item.lng
			}
			this.currEquip.id = item.device_id
			this.currEquip.jktype = item.jktype
			this.currEquip.d_id = item.d_id
			this.currEquip.uptime = item.uptime
			this.detailsShow = item.equip_type
			this.equipShow = true //设备信息框
			this.$jsonp(
				`http://api.map.baidu.com/reverse_geocoding/v3/?renderReverse&output=json&coordtype=wgs84ll`,
				{
					ak: 'nroAiX0Lf6ppNEGt2dBLtDkOldGCPFwF',
					location: `${item.lat},${item.lng}`
				}
			).then((res) => {
				let addressComponent = res.result && res.result.addressComponent
				if (addressComponent) {
					this.currEquip.address =
						addressComponent.province +
						addressComponent.city +
						addressComponent.district
				} else {
					this.currEquip.address = ''
				}
			})
			//设备信息折线图
			if (item.equip_type == 2) {
				//杀虫灯
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=base.bases.base_map_equip',
					data: this.qs.stringify({
						equip_id: item.device_id,
						equip_type: 2
					})
				}).then((res) => {
					if (res.data.message == '') {
						let ct_data = res.data.data.ct_data
						let status = res.data.data.data[0]
						this.scd_state = status
						let ct_option = {
							time: [],
							ct: []
						}
						for (let item of ct_data) {
							ct_option.time.push(this.formatTime(item.addtime * 1000, 'MM-dd'))
							ct_option.ct.push(item.ct)
						}
						this.scdOption(ct_option)
					} else {
						this.$message.error(res.data.message)
					}
				})
			} else if (item.equip_type == 3) {
				//测报灯
				this.getPhoto(item.device_id)
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=forecast.worm_lamp.device_status_data',
					data: this.qs.stringify({
						device_id: item.device_id
					})
				})
					.then((res) => {
						var data = res.data.data
						this.cbdState = data
					})
					.catch((err) => {
						console.log(err)
					})
			} else if (item.equip_type == 4) {
				//性诱测报
				this.$axios({
					method: 'POST',
					url:
						'/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
					data: this.qs.stringify({
						device_type_id: 4,
						d_id: item.d_id
					})
				}).then((res) => {
					if (res.data.message == '') {
						let data = res.data.data
						let obj = {
							time: [],
							temperature: [],
							humidity: []
						}
						data.forEach((item) => {
							obj.time.push(this.formatTime(item.addtime * 1000, 'MM-dd'))
							obj.temperature.push(item.temperature)
							obj.humidity.push(item.humidity)
						})
						this.znxyOption(obj)
					}
				})
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
					data: this.qs.stringify({
						device_type_id: 4,
						device_id: '86626204545021997',
						page_size: 1
					})
				}).then((res) => {
					let dht = res.data.data.data[0].d_h_t
					this.znxyState = dht
				})
			} else if (item.equip_type == 5) {
				//环境监测
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=weather.weather.qxz_display',
					data: this.qs.stringify({
						device_id: 16066009
					})
				}).then((res) => {
					let arr = new Array()
					let conf = res.data.data.conf
					let dat = res.data.data.dat
					let e_info = res.data.data.sta
					let hisData = res.data.data.data2
					this.on_num = res.data.data.on
					this.off_num = res.data.data.off
					this.all_num = res.data.data.all
					//历史数据
					let charArr = []
					let category = []
					for (let item of hisData) {
						for (let item2 in item.dat) {
							if (item.dat[item2]) {
								let arr = item.dat[item2].split('#')
								if (category.indexOf(item2) == -1) {
									category.push(item2)
									let obj = {
										tex: qxz[arr[1]][1],
										unit: qxz[arr[1]][2],
										val: [Number(arr[0])],
										time: [this.formatTime(item.time * 1000, 'MM-dd')]
									}
									charArr.push(obj)
								} else {
									charArr[category.indexOf(item2)].val.push(Number(arr[0]))
									charArr[category.indexOf(item2)].time.push(
										this.formatTime(item.time * 1000, 'MM-dd')
									)
								}
							}
						}
					}
					this.qxzOption(charArr)
				})
			} else if (item.equip_type == 7) {
				//孢子仪
				this.getPhoto(item.device_id)
				this.$axios({
					method: 'POST',
					url:
						'/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
					data: this.qs.stringify({
						device_type_id: 7,
						d_id: item.d_id
					})
				}).then((res) => {
					let data = res.data.data
					let obj = {
						time: [],
						temperature: [],
						humidity: []
					}
					data.forEach((item) => {
						obj.time.unshift(this.formatTime(item.addtime * 1000, 'MM-dd'))
						obj.temperature.unshift(item.temperature)
						obj.humidity.unshift(item.humidity)
					})
					this.bzyOption(obj)
				})
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
					data: this.qs.stringify({
						device_type_id: 7,
						device_id: item.device_id,
						page_size: 1
					})
				}).then((res) => {
					let data = res.data.data.data[0].d_h_t
					this.bzyState = data
				})
			}
			if (item.equip_type == 6) {
				//监控
				this.$axios({
					url: '/api/api_gateway?method=camera.camera_manage.addr_camera',
					method: 'POST',
					data: this.qs.stringify({ device_id: item.device_id })
				}).then((res) => {
					if (res.data.message == '') {
						let data = eval('(' + res.data.data + ')')
						let hlsHd = data.hlsHd
						// console.log(hlsHd)
						this.$nextTick(() => {
							this.player = videojs('myPlayer')
							this.player.reset()
							this.player.src({
								src: hlsHd,
								type: 'application/x-mpegURL'
							})
							this.player.load(hlsHd)
							this.player.on('loadeddata', () => {
								//数据加载完调用，防治快速切换报错
								console.log('loadeddata---渲染播放画面----')
								this.player.play()
							})
						})
					}
				})
				this.jkdetailsShow = true
			} else {
				this.jkdetailsShow = false
			}
		},
		goEquipDetail(url) {
			if (url == 'monitor') {
				this.$router.push({
					path: `/index/${url}/`,
					query: {
						id: '235185770',
						jktype: this.currEquip.jktype
					}
				})
			} else if (url == 'historyData') {
				this.$router.push(`/index/${url}/${this.currEquip.id}`)
			} else {
				this.$router.push(
					`/index/${url}/${this.currEquip.id}/${this.currEquip.d_id}`
				)
			}
		},
		equipShowWindowOpen() {
			this.equipShow = true
		},
		equipShowWindowClose() {
			this.equipShow = false
		},
		gotoBasePage() {
			this.equipsVisible = false
			this.baseList = this.baseList2
			this.equipList = []
			var view = this.map.getViewport(eval(this.baseList))
			this.zoom = view.zoom
			this.center = view.center
		},
		changeBase() {
			let id = this.selectBaseId
			this.equipShow = false
			this.detailsShow = 1
			this.getBaseInfo(this.baseList2, id)
		}
	}
}
</script>
<style lang="less" scoped>
.innerHtml {
	width: 100%;
	height: 100%;
	position: relative;
	.mapCover {
		width: 100%;
		position: absolute;
		top: 60px;
		bottom: 20px;
		.bm-view {
			width: 100%;
			height: 100%;
			min-height: 600px;
		}
	}
	.equipBox {
		position: absolute;
		right: 53px;
		top: 12%;
		.baseSearch {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 8px;
			overflow: hidden;
			margin-bottom: 10px;
			> i {
				width: 30px;
				text-align: center;
				font-size: 14px;
				color: #35a478;
			}
			/deep/.el-select {
				width: 230px;
				.el-input__inner {
					border: none;
					padding-left: 4px;
				}
			}
			.searchBaseBtn {
				padding: 0 20px;
				background: #35a478;
				line-height: 36px;
				color: #fff;
				cursor: pointer;
			}
		}
		.caption {
			text-align: center;
			margin-bottom: 15px;
		}
		// 基地信息
		.BaseInfoMsgItem {
			display: flex;
			width: 290px;
			margin-bottom: 3px;
			line-height: 24px;
			> i {
				font-size: 15px;
				color: #35a478;
			}
			> div {
				flex: 1;
				.BaseInfoMsgItemRight {
					display: flex;
					font-size: 14px;
					> span {
						width: 76px;
						text-align: right;
						color: #000;
					}
					> div {
						flex: 1;
					}
				}
			}
		}
	}
}
.bottomBox {
	text-align: center;
	button {
		background-color: #35a478;
		border-color: #35a478;
	}
}
// 基地信息弹窗
.baseWrap {
	background: #fff;
	.baseImg {
		border-radius: 4px;
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
	.baseInfo {
		margin-top: 5px;
		display: flex;
		.iconimg {
			width: 25px;
			img {
				width: auto;
			}
		}
		.baseCon {
			flex: 1;
			min-height: 110px;
			.baseName {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				.lookBaseBtn {
					font-size: 12px;
					color: #fff;
					background: #35a478;
					padding: 2px 8px;
					border-radius: 20px;
					flex-shrink: 0;
					flex-grow: 0;
					height: 20px;
					line-height: 20px;
					cursor: pointer;
				}
			}
			.baseInfoMsg {
				display: flex;
				font-size: 12px;
				line-height: 22px;
				color: #333;
				> div {
					width: 68px;
					text-align: left;
					color: #000;
				}
			}
		}
	}
}

// 测报灯信息弹窗
.detial {
	table {
		width: 100%;
		text-align: center;
	}
	.detialCaption {
		font-weight: 600;
		margin-bottom: 5px;
		i {
			color: #35a478;
		}
	}
	.state {
		td {
			padding: 10px 0;
			font-size: 14px;
			line-height: 22px;
			.statusVal {
				color: #35a478;
				font-size: 16px;
			}
		}
	}
	.img {
		td {
			padding: 10px 0;
		}
	}
}
// 设备窗体标题
.equipInfoWindowTitle {
	border-bottom: 2px solid #35a478;
	line-height: 33px;
	margin-bottom: 5px;
}
.equipInfoWindow {
	color: #585858;
	font-size: 14px;
	line-height: 22px;
	span {
		color: #333;
	}
}
#myPlayer {
	height: 300px;
}
</style>
