<template>
	<div
		class="wrap"
		:style="{ backgroundImage: 'url(' + $imghost + bodyBg + ')' }"
	>
		<div
			class="header"
			:style="{ backgroundImage: 'url(' + $imghost + headerBg + ')' }"
		></div>
		<div class="content" style="cursor: default">
			<div class="left">
				<div class="lTop">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						设备信息
					</div>
					<div class="con">
						<ul>
							<li>
								<span
									class="name"
									:style="{
										background:
											'url(' + icons['id'] + ') no-repeat left center/15px'
									}"
									>设备ID :</span
								>
								<span class="val">
									<select
										id="checkQxz"
										@change="selId()"
										v-model="e_id"
										:style="{
											background:
												'url(' + selectBg + ') no-repeat right center / 10px'
										}"
									>
										<option :value="item" v-for="item in ids" :key="item">
											{{ item }}
										</option>
									</select>
								</span>
							</li>
							<li v-for="(item, key) in equipInfo" :key="key">
								<span
									class="name"
									:style="{
										background:
											'url(' + icons[key] + ') no-repeat left center/15px'
									}"
									>{{ key }} :</span
								>
								<span class="val">{{ item || '无' }}</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="lMiddle">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						设备状态
					</div>
					<div class="con">
						<div class="chart03" ref="chart03Ref"></div>
						<div class="chart04" ref="chart04Ref"></div>
					</div>
				</div>
				<div class="lBottom">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						状态信息
					</div>
					<div class="con">
						<div
							class="item"
							v-for="(item, index) in bzyStatusFormat"
							:key="index"
						>
							<p class="hd">{{ item.name }}</p>
							<p
								class="status"
								:style="{ backgroundImage: 'url(' + bzyStatusBg + ')' }"
							>
								{{ item.state }}
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="center">
				<div class="chart05" ref="chart05Ref"></div>
				<div class="cBottom">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						孢子图片
					</div>
					<div class="swiper-container" ref="swiperRef">
						<div class="swiper-wrapper">
							<div
								class="swiper-slide"
								v-for="item in imgs"
								:key="item.addtime"
							>
								<div>
									<img :src="item.addr" />
								</div>
							</div>
						</div>
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="rTop">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						环境温湿度
					</div>
					<div class="chart01" ref="chart01Ref"></div>
				</div>
				<div class="rMiddle">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						设备数据
					</div>
					<div class="con">
						<div class="item" v-for="(item, index) in bzyState" :key="index">
							<div
								class="item-con"
								:style="{ backgroundImage: 'url(' + bzyBg + ')' }"
							>
								<p class="state-val">
									<span>{{ item.state }}</span>
									{{ item.unit }}
								</p>
								<p class="state-tit">{{ item.name }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="rBottom">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						保温仓温度
					</div>
					<div class="chart02" ref="chart02Ref"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts'
import '@/plugin/flexible.js'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { chartLine, chartBar, gauge } from './chart.js'
export default {
	data() {
		return {
			e_id: '',
			d_id: '',
			bodyBg: '/images/bigdata/bzy/bg.jpg',
			headerBg: '/images/bigdata/bzy/1.png',
			titBg: require('@/assets/images/bigdata/bzy/tit_bg.png'),
			titBg2: require('@/assets/images/bigdata/bzy/tit_bg2.png'),
			selectBg: require('@/assets/images/bigdata/bzy/sanjiao.png'),
			bzyStatusBg: require('@/assets/images/bigdata/bzy/state_bg.png'),
			bzyBg: require('@/assets/images/bigdata/bzy/bzyBg.png'),
			onIcon: 'image://' + require('@/assets/images/bigdata/qxz/on.png'),
			offIcon: 'image://' + require('@/assets/images/bigdata/qxz/off.png'),
			ids: [],
			d_ids: [],
			equipInfo: {
				设备名称: '',
				设备定位: '',
				最新上报时间: ''
			},
			isOnline: '',
			icons: {
				id: require('@/assets/images/bigdata/bzy/4.png'),
				设备名称: require('@/assets/images/bigdata/bzy/6.png'),
				设备定位: require('@/assets/images/bigdata/bzy/5.png'),
				最新上报时间: require('@/assets/images/bigdata/bzy/7.png')
			},
			bzyStatusFormat: [],
			bzyState: [],
			imgs: [],
			bzy_on: [],
			bzy_off: [],
			onLine: null,
			offLine: null,
			bzyData: {},
			myChart01: '',
			myChart02: '',
			myChart03: '',
			myChart04: ''
		}
	},
	mounted() {
		this.getEquipList()
	},
	computed: {
		onLinePer() {
			return (this.onLine / (this.onLine + this.offLine)).toFixed(2)
		},
		offLinePer() {
			return (this.offLine / (this.onLine + this.offLine)).toFixed(2)
		}
	},
	watch: {
		e_id: function (newVal) {
			var index = this.ids.indexOf(newVal)
			this.d_id = this.d_ids[index] //获取选中设备的d_id
			this.getChartData(this.d_id)
		}
	},
	methods: {
		getEquipList() {
			//获取孢子仪设备ID集合
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
				data: this.qs.stringify({
					device_type_id: 7,
					page_size: 9999
				})
			})
				.then((res) => {
					// console.log(res.data.data.data)
					if (res.data) {
						let data = res.data.data.data
						data.forEach((item) => {
							// this.ids.push(item.device_id)
							this.ids.push(item.imei)
							this.d_ids.push(item.d_id)
							if (item.is_online == 1) {
								this.bzy_on.push({ value: [item.lng, item.lat] })
							} else {
								this.bzy_off.push({ value: [item.lng, item.lat] })
							}
						})
						this.onLine = this.bzy_on.length
						this.offLine = this.bzy_off.length
						//在线设备离线设备台数
						this.chartsInit()
						//地图
						this.mapChart()
						// this.e_id = this.ids[0] //页面初始化的设备id
						this.e_id = this.ids[29] //页面初始化的设备id
						// this.d_id = this.d_ids[0] //页面初始化的设备id
						this.d_id = this.d_ids[29] //页面初始化的设备id
						this.getEquipInfo(this.e_id)
						// this.getChartData(this.d_id)
						this.getDetailData(this.e_id)
						this.getPhoto(this.e_id)
					}
				})
				.catch(() => {
					this.$message.error('获取数据失败！')
				})
		},
		getEquipInfo(id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
				data: this.qs.stringify({
					device_type_id: 7,
					device_id: id
				})
			}).then((res) => {
				let data = res.data.data.data[0]
				this.equipInfo['设备名称'] = data.device_name
				this.equipInfo['设备定位'] = data.address
				// this.equipInfo['最新上报时间'] = this.formatTime(data.status_time)
				this.equipInfo['最新上报时间'] = this.formatTime(data.addtime * 1000)
				this.isOnline = data.device_status
			})
		},
		getPhoto(id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
				data: this.qs.stringify({
					device_id: id,
					ret: 'screen'
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.imgs = res.data.data.data
					this.$nextTick(() => {
						this.swiperInit()
					})
				}
			})
		},
		selId() {
			//切换设备ID
			this.getEquipInfo(this.e_id)
			this.getDetailData(this.e_id)
			this.getPhoto(this.e_id)
		},
		chartsInit() {
			this.myChart01 = echarts.init(this.$refs.chart01Ref)
			this.myChart02 = echarts.init(this.$refs.chart02Ref)
			this.myChart03 = echarts.init(this.$refs.chart03Ref)
			this.myChart03.setOption(
				gauge(this.onLine, this.onLinePer, '#1E85E6', '#38F0C8', '在线设备')
			)
			this.myChart04 = echarts.init(this.$refs.chart04Ref)
			this.myChart04.setOption(
				gauge(this.offLine, this.offLinePer, '#ffa813', '#ffd825', '离线设备')
			)
			window.addEventListener('resize', () => {
				this.myChart01.resize()
				this.myChart02.resize()
				this.myChart03.resize()
				this.myChart04.resize()
			})
		},
		getChartData(d_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: d_id
				})
			}).then((res) => {
				let data = res.data.data
				let obj = {
					time: [],
					temperature: [],
					humidity: [],
					set_temp: [],
					pre_temp: []
				}
				data.forEach((item) => {
					obj.time.push(this.formatTime(item.addtime * 1000))
					obj.temperature.push(item.temperature)
					obj.humidity.push(item.humidity)
					obj.set_temp.push(item.set_temp)
					obj.pre_temp.push(item.others)
				})
				this.myChart01.setOption(chartLine(obj))
				this.myChart02.setOption(chartBar(obj))
			})
		},
		getDetailData(id) {
			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: id,
					page_size: 1
				})
			}).then((res) => {
				console.log(res.data)
				console.log(res.data.data.data[0].d_h_t)
				let data = res.data.data.data[0].d_h_t
				this.bzyStatusFormat = []
				this.bzyState = []
				this.bzyStatusFormat.push(
					{ name: '在线状态', state: this.isOnline == 1 ? '在线' : '离线' },
					{ name: '设备开关', state: data.on_off == 1 ? '开启' : '关闭' },
					{ name: '电池状态', state: data.batStatus == 1 ? '电量过低' : '正常' },
					{ name: '摄像头状态', state: data.usb_sta == 1 ? '异常' : '正常' },
					{ name: '雨控状态', state: data.rps == 1 ? '雨控' : '正常' }
				)
				this.bzyState.push(
					{ name: '环境温度', state: data.at, unit: '℃' },
					{ name: '环境湿度', state: data.ah, unit: '%' },
					{ name: '保温仓设定温度', state: data.set_temp, unit: '℃' },
					{ name: '保温仓当前温度', state: data.pre_temp, unit: '℃' },
					{ name: '电压', state: data.v_bat, unit: 'V' },
					{ name: '海拔高度', state: data.alti, unit: '' },
					{ name: '信号强度', state: data.csq, unit: '' },
					{ name: '设备版本', state: data.dver },
					{ name: '已培养时间', state: data.staytime, unit: 'min' }
				)
			})
		},
		swiperInit() {
			var mySwiper = new Swiper('.swiper-container', {
				slidesPerView: 3,
				spaceBetween: 30,
				aotoplay: true,
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev'
			})
		},
		mapChart() {
			this.$axios({
				method: 'GET',
				url: `${this.jsonUrl}/static/map/100000.json`
			}).then((res) => {
				let geoJson = res.data
				this.countryAddressNum(geoJson) //显示全国地图
			})
		},
		countryAddressNum(geoJson) {
			let myChart05 = echarts.init(this.$refs.chart05Ref)
			window.addEventListener('resize', function () {
				myChart05.resize()
			})
			echarts.registerMap('china', geoJson)
			myChart05.setOption(
				{
					grid: {
						left: '0',
						right: '0',
						top: '0%',
						bottom: '0%',
						containLabel: true,
						show: false
					},
					legend: {
						orient: 'horizontal',
						id: 1,
						align: 'auto',
						itemWidth: 16,
						itemHeight: 20,
						data: [
							{
								name: '在线设备',
								icon: this.onIcon
							},
							{
								name: '离线设备',
								icon: this.offIcon
							}
						],
						textStyle: {
							color: '#fff'
						}
					},
					geo: {
						map: 'china', //对应registerMap注册名字
						label: {
							show: false,
							color: '#fff'
						},
						roam: true, //是否开启鼠标缩放和平移漫游,设置成 'scale' 或者 'move',设置成 true 为都开启
						zlevel: 0,
						zoom: 1, // 当前视角的缩放比例
						scaleLimit: {
							min: 0.5,
							max: 2
						},
						layoutCenter: ['50%', '50%'],
						layoutSize: '100%',
						itemStyle: {
							normal: {
								areaColor: 'rgba(43, 196, 243, 0)',
								borderColor: 'rgba(43, 196, 243, 1)',
								borderWidth: 1
							}
						},
						emphasis: {
							//高亮状态下的多边形和标签样式。
							label: {
								show: true, //高亮状态下字体是否显示
								color: '#AAE0FC' //高亮状态下字体颜色
							},
							itemStyle: {
								areaColor: '#2B91B7'
							}
						}
					},
					series: [
						{
							name: '在线设备',
							type: 'scatter',
							coordinateSystem: 'geo',
							data: this.bzy_on,
							symbol: this.onIcon,
							symbolSize: [20, 23]
						},
						{
							name: '离线设备',
							type: 'scatter',
							coordinateSystem: 'geo',
							data: this.bzy_off,
							symbol: this.offIcon,
							symbolSize: [20, 23]
						}
					]
				},
				true
			)
		}
	}
}
</script>

<style lang='less' scoped>
body {
	overflow: hidden;
}
.wrap {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	overflow: hidden;
	.header {
		width: 100vw;
		height: 12vh;
		background-size: 100% auto;
		background-position: center top;
		background-repeat: no-repeat;
		position: relative;
	}
	.content {
		position: relative;
		height: 86vh;
		.tit {
			font-size: 0.2rem;
			font-weight: 700;
			letter-spacing: 0.05rem;
			padding-left: 15px;
			color: #01e2ff;
			line-height: 4.2vh;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
		}
		> div {
			position: absolute;
		}
		.con {
			width: 100%;
			margin-top: 0.2vh;
			height: calc(100% - 4vh);
		}
		.left {
			width: 22vw;
			left: 1vw;
			height: 100%;
			.lTop {
				width: 100%;
				height: 17vh;
				color: #fff;
				.con {
					padding: 0.11rem 0;
					font-size: 0.19rem;
					li {
						line-height: 0.4rem;
						.name {
							padding-left: 30px;
						}
						.val {
							color: #f7b72f;
							/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
							select::-ms-expand {
								display: none;
							}
							select {
								background: none;
								color: #f7b72f;
								border: none;
								font-size: 0.19rem;
								outline: none;
								width: 180px;
								/*很关键：将默认的select选择框样式清除*/
								appearance: none;
								-moz-appearance: none;
								-webkit-appearance: none;
								option {
									background: #000;
									border: none;
									outline: none;
								}
							}
						}
					}
				}
			}
			.lMiddle {
				width: 100%;
				height: 30vh;
				margin-top: 2vh;
				.con {
					display: flex;
					> div {
						flex: 1;
						& /deep/div {
							width: 100% !important;
						}
					}
				}
			}
			.lBottom {
				width: 100%;
				height: 35vh;
				margin-top: 2vh;
				.con {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-left;
					color: #9bdaf9;
					.item {
						width: 33%;
						padding: 0.4rem 0.2rem 0;
						box-sizing: border-box;
						text-align: center;
						.hd {
							font-size: 0.18rem;
							padding-bottom: 0.05rem;
						}
						.status {
							height: 0.86rem;
							line-height: 0.5rem;
							background-size: 100% 100%;
							background-position: center top;
							background-repeat: no-repeat;
							font-size: 0.15rem;
							color: #39ffe4;
						}
					}
				}
			}
		}
		.center {
			width: 52vw;
			right: 24vw;
			height: 100%;
			.chart05 {
				width: 100%;
				height: 66vh;
			}
			.cBottom {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 0;
				width: 80%;
				height: 20vh;
				color: #fff;
				.swiper-container {
					height: calc(100% - 6.2vh);
					margin-top: 2vh;
					.swiper-slide {
						div {
							border: 2px solid #2e97f3;
							height: 100%;
							box-sizing: border-box;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
		.right {
			width: 22vw;
			right: 1vw;
			height: 100%;
			.rTop {
				width: 100%;
				height: 25vh;
				.chart01 {
					width: 100%;
					height: calc(100% - 4vh);
				}
			}
			.rMiddle {
				width: 100%;
				height: 32vh;
				.con {
					display: flex;
					color: #fff;
					flex-wrap: wrap;
					justify-content: space-around;
					.item {
						width: 33.3%;
						padding: 0 1vw;
						box-sizing: border-box;
						padding-bottom: 2.1vh;
						.item-con {
							position: relative;
							background-size: 100% 100%;
							background-position: center top;
							background-repeat: no-repeat;
							height: 7.4vh;
							.state-val {
								font-size: 0.13rem;
								position: absolute;
								top: 3vh;
								left: 50%;
								transform: translateX(-50%);
								display: flex;
								align-items: flex-end;
								span {
									font-size: 0.25rem;
									margin: 0 2px;
								}
							}
							.state-tit {
								font-size: 0.1rem;
								text-align: center;
								position: relative;
								top: 90%;
							}
						}
					}
				}
			}
			.rBottom {
				width: 100%;
				height: 27vh;
				margin-top: 2vh;
				.chart02 {
					width: 100%;
					height: calc(100% - 4.2vh);
				}
			}
		}
	}
}
</style>