<template>
	<div
		class="wrap"
		:style="{ backgroundImage: 'url(' + $imghost + bodyBg + ')' }"
	>
		<div
			class="header"
			:style="{ backgroundImage: 'url(' + $imghost + headerBg + ')' }"
		>
			<img v-if="username=='中新云农'" src="@/assets/images/bigdata/qxz/zxyn.png" alt="" />
		</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">
						<ul>
							<li
								:style="{
									background: 'url(' + itemBg + ') no-repeat center/contain'
								}"
								v-for="(item, index) in reaTimeStatusList"
								:key="index"
							>
								<div>{{ item.num }}</div>
								<p>{{ item.name }}</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="lBottom">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						设备状态
					</div>
					<div class="chart01" ref="chart01Ref"></div>
				</div>
			</div>
			<div class="center">
				<div class="info">
					<ul>
						<li>
							<p class="all">
								<countTo :startVal='0' :endVal='all_num' :duration='3000'></countTo>
								<!-- <span>{{ all_num }}</span> -->
								台
							</p>
							<div>总设备</div>
						</li>
						<li>
							<p class="on">
								<countTo :startVal='0' :endVal='on_num' :duration='3000'></countTo>
								<!-- <span>{{ on_num }}</span> -->
								台
							</p>
							<div>在线设备</div>
						</li>
						<li>
							<p class="off">
								<countTo :startVal='0' :endVal='off_num' :duration='3000'></countTo>
								<!-- <span>{{ off_num }}</span> -->
								台
							</p>
							<div>离线设备</div>
						</li>
					</ul>
				</div>
				<div class="chart04" ref="chart04Ref"></div>
				<div
					class="map map1"
					:style="{ backgroundImage: 'url(' + $imghost + map1 + ')' }"
				></div>
				<div
					class="map map2"
					:style="{ backgroundImage: 'url(' + $imghost + map2 + ')' }"
				></div>
				<div
					class="map map3"
					:style="{ backgroundImage: 'url(' + $imghost + map3 + ')' }"
				></div>
			</div>
			<div class="right">
				<div class="rTop">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						要素展示
					</div>
					<div class="chart02" ref="chart02Ref"></div>
				</div>
				<div class="rMiddle">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						数据详情
					</div>
					<div class="swiper-container" ref="charBarRef">
						<div class="swiper-wrapper">
							<div
								class="swiper-slide"
								v-for="(item, index) in qxzData"
								:key="index"
							>
								<div
									class="item"
									:style="{
										backgroundImage:
											qxzCheckNum == index
												? 'url(' + qxzBtnBgOn + ')'
												: 'url(' + qxzBtnBg + ')'
									}"
								>
									{{ item.tex }}
								</div>
							</div>
						</div>
					</div>
					<div class="chart03" ref="chart03Ref"></div>
				</div>
				<div class="rbottom">
					<div class="tit" :style="{ backgroundImage: 'url(' + titBg + ')' }">
						24小时数据
					</div>
					<div class="con">
						<div class="swiper-container" ref="Data24Ref">
							<div class="swiper-wrapper">
								<div
									class="swiper-slide"
									v-for="i in data24List"
									:key="i.eName"
								>
									<p class="e_tit">{{ i.eName }}</p>
									<div class="items">
										<div :style="{ backgroundImage: 'url(' + e_bg + ')' }">
											<div class="val">
												<p class="p1">{{ i.max }}</p>
												<p class="p2">最大值</p>
											</div>
											<div class="time">
												<p class="p3">最大时间</p>
												<p class="p4">{{ (i.maxtime * 1000) | formatTime }}</p>
											</div>
										</div>
										<div :style="{ backgroundImage: 'url(' + e_bg + ')' }">
											<div class="val">
												<p class="p1">{{ i.min }}</p>
												<p class="p2">最小值</p>
											</div>
											<div class="time">
												<p class="p3">最小时间</p>
												<p class="p4">{{ (i.mintime * 1000) | formatTime }}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import countTo from 'vue-count-to'
import echarts from 'echarts'
import { funPie, hisLine, hisBar } from './charts'
import '@/plugin/flexible.js'
import { qxz } from 'static/js/qxz.js'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
	data() {
		return {
			bodyBg: '/images/bigdata/qxz/bg.jpg',
			headerBg: '/images/bigdata/qxz/1.png',
			titBg: require('@/assets/images/bigdata/qxz/tit_bg.png'),
			selectBg: require('@/assets/images/bigdata/qxz/sanjiao.png'),
			itemBg: require('@/assets/images/bigdata/qxz/3.png'),
			qxzBtnBg: require('@/assets/images/bigdata/qxz/btn_bg.png'),
			qxzBtnBgOn: require('@/assets/images/bigdata/qxz/btn_active_bg.png'),
			e_bg: require('@/assets/images/bigdata/qxz/e_bg.png'),
			onIcon: 'image://' + require('@/assets/images/bigdata/qxz/on.png'),
			offIcon: 'image://' + require('@/assets/images/bigdata/qxz/off.png'),
			map1: '/images/bigdata/qxz/map1.png',
			map2: '/images/bigdata/qxz/map2.png',
			map3: '/images/bigdata/qxz/map3.png',
			e_id: '',
			ids: [],
			equipInfo: {
				设备名称: '',
				设备定位: '河南省 郑州市 金水区',
				最新上报时间: '2020-05-06 12:00:00'
			},
			reaTimeStatusList: [], //实时数据
			icons: {
				id: require('@/assets/images/bigdata/qxz/4.png'),
				设备名称: require('@/assets/images/bigdata/qxz/6.png'),
				设备定位: require('@/assets/images/bigdata/qxz/5.png'),
				最新上报时间: require('@/assets/images/bigdata/qxz/7.png')
			},
			qxz_on: [],
			qxz_off: [],
			on_num: 0,
			off_num: 0,
			all_num: 0,
			qxzCheckNum: 0,
			qxzBtn: ['风速', '风向', '大气温度', '大气湿度'],
			qxzData: [],
			myChart01: '',
			myChart02: '',
			myChart03: '',
			data24List: [],
			username: '' //当前登录用户
		}
	},
	created() {
		this.username = localStorage.getItem('username')
	},
	mounted() {
		this.chartInit()
		this.getEquipList()
		this.swiper24Data()
	},
	methods: {
		chartInit() {
			this.myChart01 = echarts.init(this.$refs.chart01Ref)
			this.myChart02 = echarts.init(this.$refs.chart02Ref)
			this.myChart03 = echarts.init(this.$refs.chart03Ref)
			this.myChart04 = echarts.init(this.$refs.chart04Ref)
			window.addEventListener('resize', () => {
				this.myChart01.resize()
				this.myChart02.resize()
				this.myChart03.resize()
				this.myChart04.resize()
			})
		},
		mapChart() {
			this.$axios({
				method: 'GET',
				url: `${this.jsonUrl}/static/map/100000.json`
			}).then((res) => {
				let geoJson = res.data
				this.countryAddressNum(geoJson) //显示全国地图
			})
		},
		countryAddressNum(geoJson) {
			echarts.registerMap('china', geoJson)
			this.myChart04.setOption(
				{
					grid: {
						left: '0',
						right: '0',
						top: '0%',
						bottom: '0%',
						containLabel: true,
						show: false
					},
					legend: {
						orient: 'vertical',
						id: 1,
						y: 'bottom',
						x: 'right',
						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: false, //是否开启鼠标缩放和平移漫游,设置成 '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.42)',
								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.qxz_on,
							symbol: this.onIcon,
							symbolSize: [16, 20]
						},
						{
							name: '离线设备',
							type: 'scatter',
							coordinateSystem: 'geo',
							data: this.qxz_off,
							symbol: this.offIcon,
							symbolSize: [16, 20]
						}
					]
				},
				true
			)
		},
		getEquipList() {
			//获取气象站设备ID集合
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=weather.weather.qxz_page'
			})
				.then((res) => {
					if (res.data) {
						let data = res.data.data.ids
						data.forEach((item) => {
							this.ids.push(item.equip_id)
							if (item.is_online == 1) {
								this.qxz_on.push({ value: [item.lng, item.lat] })
							} else {
								this.qxz_off.push({ value: [item.lng, item.lat] })
							}
						})
						this.mapChart()
						// this.e_id = this.ids[0] //页面初始化的设备id
						this.e_id = this.ids[7] //页面初始化的设备id
						this.getEquipInfo(this.e_id) //获取气象站信息
						this.data24(this.e_id) //获取24小时数据
					}
				})
				.catch(() => {
					this.$message.error('获取数据失败！')
				})
		},
		getEquipInfo(id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=weather.weather.qxz_display',
				data: this.qs.stringify({
					device_id: id
				})
			}).then((res) => {
				if (res.data.message == '') {
					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 i in conf) {
						if (conf[i]) {
							//判断有值
							let arr = conf[i].split('#')
							let obj = {
								e: i,
								tex: arr[0],
								unit: arr[1],
								val: [],
								time: []
							}
							charArr.push(obj)
						}
					}
					// console.log(charArr)
					for (let m of charArr) {
						for (let item of hisData) {
							for (let item2 in item.dat) {
								if (m.e == item2) {
									let arr = item.dat[item2].split('#')
									if (arr[0] != -99.99) {
										m.val.push(arr[0])
										m.time.push(
											this.formatTime(item.time * 1000, 'yyyy-MM-dd hh:mm')
										)
									}
								}
							}
						}
					}
					this.qxzData = charArr //用于环境要素和数据详情
					this.$nextTick(() => {
						console.log(this.qxzData)
						if (this.qxzData[0].time.length > 0) {
							this.myChart03.setOption(hisBar([this.qxzData[0]])) //默认显示第一条数据
						}
						this.swiperInit() //数据详情折线图
						//环境温湿度折线图
						this.myChart02.setOption(hisLine(this.qxzData.slice(0, 2))) //一打开页面就显示
						this.chartLine() //循环展示
					})

					//设备信息
					this.equipInfo['设备名称'] = e_info.equip_name
					this.equipInfo['最新上报时间'] = this.formatTime(e_info.uptime * 1000)
					let lat = e_info.lat
					let lng = e_info.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) {
							this.equipInfo['设备定位'] =
								addressComponent.province +
								addressComponent.city +
								addressComponent.district
						}
					})
					//设备状态饼状图
					this.myChart01.setOption(funPie(this.on_num, this.off_num)) //饼状图
					//实时状态
					for (let i1 in conf) {
						if (conf[i1]) {
							let arr2 = conf[i1].split('#')
							let obj = {}
							obj.name = `${arr2[0]}(${arr2[1]})`
							for (let i2 in dat) {
								if (i1 == i2) {
									let arr3 = dat[i2].split('#')
									obj.num = arr3[0] == '-99.99' ? 'N/A' : arr3[0]
									arr.push(obj)
								}
							}
						}
					}
					this.reaTimeStatusList = arr
				} else {
					this.$message.error(res.data.message)
				}
			})
		},
		selId() {
			//切换设备ID
			this.getEquipInfo(this.e_id)
			//24小时数据
			this.data24(this.e_id)
		},
		swiperInit() {
			let _this = this
			var mySwiper = new Swiper(this.$refs.charBarRef, {
				direction: 'horizontal',
				slidesPerView: 5,
				speed: 3000,
				autoplay: true,
				onClick: function (swiper) {
					_this.qxzCheckNum = swiper.clickedIndex
					_this.myChart03.setOption(hisBar(_this.qxzData[swiper.clickedIndex]))
				},
				onSlideChangeStart: function (swiper) {
					// console.log(swiper)
					_this.qxzCheckNum = swiper.activeIndex
					_this.myChart03.setOption(hisBar(_this.qxzData[swiper.activeIndex]))
				}
			})
			this.$refs.charBarRef.onmouseover = function () {
				mySwiper.stopAutoplay()
			}
			this.$refs.charBarRef.onmouseout = function () {
				mySwiper.startAutoplay()
			}
			this.$refs.chart03Ref.onmouseover = function () {
				mySwiper.stopAutoplay()
			}
			this.$refs.chart03Ref.onmouseout = function () {
				mySwiper.startAutoplay()
			}
		},
		chartLine() {
			var i = 0
			setInterval(() => {
				if (i + 2 < this.qxzData.length) {
					this.qxzData.slice(i, i + 2)
					this.myChart02.setOption(hisLine(this.qxzData.slice(i, i + 2)))
					i++
				} else {
					i = 0
				}
			}, 3000)
		},
		data24(id) {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=weather.weather.qxz_day_data',
				data: this.qs.stringify({
					device_id: id
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					let arr = []
					for (let item of data) {
						let obj = {
							max: item.max,
							min: item.min,
							maxtime: item.maxtime,
							mintime: item.mintime,
							eName: `${item.enum[1]}(${item.enum[2]})`
						}
						arr.push(obj)
					}
					this.data24List = arr
					this.$nextTick(() => {
						this.swiper24Data()
					})
				} else {
					this.$message.error(res.data.message)
				}
			})
		},
		swiper24Data() {
			var mySwiper = new Swiper(this.$refs.Data24Ref, {
				direction: 'vertical',
				slidesPerView: 2,
				speed: 3000,
				autoplay: true,
				loop: true
			})
			this.$refs.Data24Ref.onmouseover = function () {
				mySwiper.stopAutoplay()
			}
			this.$refs.Data24Ref.onmouseout = function () {
				mySwiper.startAutoplay()
			}
		}
	},
	components: { countTo }
}
</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;
		img {
			width: 130px;
			height: auto;
			margin-top: 20px;
			margin-left: 20px;
		}
	}
	.content {
		position: relative;
		height: 86vh;
		.tit {
			font-size: 0.2rem;
			font-weight: 700;
			letter-spacing: 0.05rem;
			padding-left: 10px;
			color: #fff;
			line-height: 2.8vh;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		> div {
			position: absolute;
		}
		.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: 150px;
								/*很关键：将默认的select选择框样式清除*/
								appearance: none;
								-moz-appearance: none;
								-webkit-appearance: none;
								option {
									background: #000;
									border: none;
									outline: none;
								}
							}
						}
					}
				}
			}
			.lMiddle {
				::-webkit-scrollbar {
					width: 4px;
					height: 10px;
				}
				/*滑动轨道*/
				::-webkit-scrollbar-track {
					border-radius: 0px;
					background: none;
				}
				/*滑块*/
				::-webkit-scrollbar-thumb {
					border-radius: 5px;
					-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
					background-color: #2b8099;
				}
				/*滑块效果*/
				::-webkit-scrollbar-thumb:hover {
					border-radius: 5px;
					-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
					background-color: rgba(85, 85, 85, 0.4);
				}
				width: 100%;
				height: 37vh;
				margin-top: 2vh;
				.con {
					height: calc(100% - 2.8vh);
					overflow: auto;

					padding-top: 10px;
					box-sizing: border-box;
					ul {
						height: 100%;
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						align-content: flex-start;
						li {
							width: 25%;
							margin-bottom: 0.1rem;
							text-align: center;
							div {
								font-size: 0.25rem;
								color: #01ffff;
								line-height: 0.7rem;
							}
							p {
								color: #fff;
								font-size: 0.15rem;
								padding: 0.1rem 0;
							}
						}
					}
				}
			}
			.lBottom {
				width: 100%;
				height: 28vh;
				margin-top: 2vh;
				.chart01 {
					height: calc(100% - 2.8vh);
				}
			}
		}
		.center {
			width: 52vw;
			left: 24vw;
			height: 100%;
			.info {
				width: 50%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				ul {
					display: flex;
					text-align: center;
					justify-content: space-between;
					color: #fff;
					li p {
						font-size: 0.25rem;
					}
					li div {
						font-size: 0.24rem;
					}
					li p span {
						font-size: 0.5rem;
						padding: 05px;
						font-weight: 800;
					}
					.all {
						color: #ff9c58;
					}
					.on {
						color: #00dc73;
					}
					.off {
						color: #ff5656;
					}
				}
			}
			.chart04 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 5;
			}
			.map {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-repeat: no-repeat;
				background-position: center;
			}
			.map1 {
				opacity: 0.3;
				width: 40vw;
				height: 40vw;
			}
			.map2 {
				opacity: 0.6;
				width: 45vw;
				height: 45vw;
				animation: rotate 15s linear infinite;
				z-index: 2;
			}
			@keyframes rotate {
				from {
					transform: translate(-50%, -50%) rotate(0deg);
				}
				to {
					transform: translate(-50%, -50%) rotate(360deg);
				}
			}
			.map3 {
				opacity: 0.3;
				width: 42vw;
				height: 42vw;
				animation: rotate1 15s linear infinite;
			}
			@keyframes rotate1 {
				from {
					transform: translate(-50%, -50%) rotate(0deg);
				}
				to {
					transform: translate(-50%, -50%) rotate(-360deg);
				}
			}
		}
		.right {
			width: 22vw;
			right: 1vw;
			height: 100%;
			.rTop {
				width: 100%;
				height: 25vh;
				.chart02 {
					height: calc(100% - 2.8vh);
				}
			}
			.rMiddle {
				width: 100%;
				height: 30vh;
				.swiper-container {
					width: 100%;
					padding: 2vh 0;
				}
				.swiper-container .swiper-slide {
					color: #fff;
				}
				.swiper-container .swiper-slide .item {
					background-repeat: no-repeat;
					background-size: 100% 100%;
					font-size: 0.16rem;
					line-height: 2.3vh;
					text-align: center;
					color: #fff;
					cursor: pointer;
					margin: 0 2px;
				}

				.chart03 {
					height: calc(100% - 8.1vh);
				}
			}
			.rbottom {
				margin-top: 2vh;
				width: 100%;
				height: 29vh;
				.con {
					height: calc(100% - 2.8vh);
					.swiper-container {
						height: 100%;
					}
					.e_tit {
						font-size: 0.221rem;
						color: #01fffd;
						line-height: 0.5rem;
					}
					.items {
						height: 9vh;
						display: flex;
						> div {
							flex: 1;
							background-repeat: no-repeat;
							background-position: center;
							background-size: auto 100%;
							position: relative;
							color: #fff;
							text-align: center;
							.val {
								position: absolute;
								left: 50%;
								transform: translateX(-50%);
								margin-left: -0.08rem;
								top: 0.35rem;
								.p1 {
									font-size: 0.3rem;
								}
								.p2 {
									font-size: 0.1rem;
									color: #01ffff;
								}
							}
							.time {
								position: absolute;
								right: -0.2rem;
								top: -0.1rem;
								.p3 {
									color: #01fffd;
								}
								.p4 {
									width: 1rem;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>