<template>
	<div class="da-ping">
		<div class="top-wrapper">{{dapingtitle}}</div>
		<div class="bot-wrapper">
			<div class="left">
				<div class="echarts_div">
					<div class="_div_title">设备概况</div>
					<div ref="myCharts" class="myCharts_div"></div>
				</div>
				<div class="echarts_div">
					<div class="_div_title">报警统计</div>
					<div ref="myCharts2" class="myCharts_div charts-box"></div>
					<div style="font-size: .6vh;color: #2BFAFF;display: flex;justify-content: space-around;">
						<div>今日报警总数 <span style="font-size: 2vh">0</span></div>
						<div>今日未处理总数 <span style="font-size: 2vh">0</span></div>
						<div>今日已处理总数<span style="font-size: 2vh">0</span></div>
					</div>
				</div>
				<div class="echarts_div">
					<div class="_div_title">报警信息</div>
					<div class="myCharts_div" id="parent">
						<div id="child1">
							<div class="div_line" v-for="(item, index) in wranListData" :key="index">
								<div>设备：{{ item.deviName }}</div>
								<div>内容：{{ item.message }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="center">
				<div class="center_div_1">
					<EZUIKitJs ref="EZUIKit" selectSeat="right" autoPlayer="true"/>
				</div>
				<div class="center_div_2">
					<div class="_div_title _div_title_center">监测项数据分析</div>
					<swiper ref="mySwiper" :options="swiperOptions" style="width: 55vw;height: 85%;">
						<swiper-slide v-for="item in len" :key="item">
							<div class="myCharts_div" style="width: 100%;height: 100%; overflow: hidden;"></div>
						</swiper-slide>
					</swiper>
				</div>
			</div>
			<div class="right">
				<div class="echarts_div echarts_div_right_1">
					<div class="_div_title right-title" style="height: 7%">实时数据监测</div>
					<div class="myCharts_div" id="parent2" style="height: 93%;padding: 1.5vh .5vw; 0">
						<div id="child2">
							<div class="div_block" v-for="(item, index) in baseData" :key="index">
								<div v-for="i in devices" :key="i.deviceid">
									<div v-if="i.deviceid === item.deviceid">{{ i.name }}</div>
								</div>
								{{ item.itemName }}：<span>{{ item.data }}</span
								>{{ item.unit }}
							</div>
						</div>
					</div>
				</div>
				<div class="echarts_div echarts_div_right_2">
					<div class="_div_title right-title">设备在线离线</div>
					<div class="myCharts_div">
						<div class="div_line" style="padding-left: .5vw;padding-top: .5vh;padding-bottom: 1.2vh;" :class="{ isOffline: item.online == '离线' }" v-for="(item, index) in facilityList" :key="index">
							<span class="div_line__tag" v-if="item.online == '在线'">{{ item.online }}</span>
							<span class="div_line__tag2" v-if="item.online == '离线'">{{ item.online }}</span>
							<span v-for="i in devices" :key="i.deviceid">
								<span v-if="i.deviceid === item.deviceid">{{ i.name }}</span>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts'
import 'video.js/dist/video-js.css'
import { debounce, randNum, timeParse } from '@/utils'
import { loadNowDataByUserid, sItem, sWarnmsgByUserid, sDeviceByUseridNotdevType, sDeviceByUseridAnddevType, getData, getWarnmsgCountByUserid } from '@/api/home'
import { queryAllByUseridNoPage } from '@/api/sDevice'
import EZUIKitJs from '@/components/EZUIKitJs'
import { getTitle } from '@/api/title'

export default {
	components: {
		EZUIKitJs
	},
	data() {
		return {
			dapingtitle: '智慧农业可视化平台',
			wranListData: [], // 报警信息
			baseData: [], // 实时数据监测
			devices: [], // 设备名称

			facility: 0, //设备总数
			facilityList: [], // 设备列表
			facility_onLine: 0, //在线
			facility_offLine: 0, //离线

			controller: 0, //控制器总数
			controller_onLine: 0, //在线
			controller_offLine: 0, //离线

			starttime: '', //开始时间
			endtime: '', //结束时间
			len: 1,

			series: [],

			swiperOptions: {
				slidesPerView: 3,
				spaceBetween: 0,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false,
				},
			},

			playerOptions: {
				playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
				autoplay: true, // 如果为true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 是否视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
						type: 'video/mp4', // 类型
						src: 'http://smartagro.jingkongyun.com/01.mp4', // url地址
					},
				],
				poster: '', // 封面地址
				notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true, // 当前时间和持续时间的分隔符
					durationDisplay: true, // 显示持续时间
					remainingTimeDisplay: false, // 是否显示剩余时间功能
					fullscreenToggle: true, // 是否显示全屏按钮
				},
			},
		}
	},

	mounted() {
		getTitle().then(res => {
			this.dapingtitle = res.name
		})
		const params = {
			page: 0,
			size: 1000,
			sort: 'id,desc',
		}

		// 获取报警 总数
		sWarnmsgByUserid(params).then(res => {
			queryAllByUseridNoPage().then(resDive => {
				this.devices = resDive
				res.content.map(item => {
					for (let i of resDive) {
						if (item.deviceid == i.deviceid) {
							item.deviName = i.name
						}
					}
				})
				this.wranListData = res.content
			})
		})

		// 实时数据
		loadNowDataByUserid().then(res => {
			sItem({
				page: 0,
				size: 1000,
				sort: 'id,desc',
			}).then(resItem => {
				res.map((item, index) => {
					for (let i of resItem.content) {
						if (i.code == item.item) {
							if (i.subject == '风向') {
								if (i.unit == 0) {
									i.unit = '北风'
								}

								if (i.unit == 1) {
									i.unit = '东北风'
								}

								if (i.unit == 2) {
									i.unit = '东风'
								}

								if (i.unit == 3) {
									i.unit = '东南风'
								}

								if (i.unit == 4) {
									i.unit = '南风'
								}

								if (i.unit == 5) {
									i.unit = '西南风'
								}

								if (i.unit == 6) {
									i.unit = '西风'
								}

								if (i.unit == 7) {
									i.unit = '西北风'
								}
							}
							item.itemName = i.subject
							item.unit = i.unit
						}
					}
					return item
				})
				this.baseData = res
				this.getDataChart(this.baseData)
			})
		})

		// 设备
		sDeviceByUseridNotdevType(params).then(res => {
			this.facility = res.totalElements
			let onLine = 0 // 在线
			let offLine = 0 // 离线
			res.content.map(item => {
				if (item.online == '在线') {
					onLine++
				}

				if (item.online == '离线') {
					offLine++
				}
			})
			this.facilityList = res.content
			this.facility_onLine = onLine
			this.facility_offLine = offLine
		})

		// 控制器
		sDeviceByUseridAnddevType(params).then(res => {
			this.controller = res.totalElements
			let onLine = 0 // 在线
			let offLine = 0 // 离线
			res.content.map(item => {
				if (item.online == '在线') {
					onLine++
				}

				if (item.online == '离线') {
					offLine++
				}
			})

			this.controller_onLine = onLine
			this.controller_offLine = offLine

			this.init()
		})

		this.init2()

		setTimeout(() => {
			var parent = document.getElementById('parent')
			var child1 = document.getElementById('child1')
			setInterval(function() {
				if (parent.scrollTop >= child1.scrollHeight - 300) {
					parent.scrollTop = 0
				} else {
					parent.scrollTop++
				}
			}, 100)

			var parent2 = document.getElementById('parent2')
			var child2 = document.getElementById('child2')
			setInterval(function() {
				if (parent2.scrollTop >= child2.scrollHeight) {
					parent2.scrollTop = 0
				} else {
					parent2.scrollTop++
				}
			}, 100)
		}, 1000)
	},

	methods: {
		getDataChart(e) {
			const params = {
				page: 1,
				size: 300,
				sort: 'dtime,desc',
			}
			let len = e.length
			this.len = len
			let day = 20 * 86400 * 1000
			let dateCur = Date.parse(new Date())
			this.starttime = timeParse(dateCur - day) // 开始时间
			this.endtime = timeParse() // 结束时间

			let index = 0
			let indexSwiper = 0
			let indexCopy = 1

			let tiemr = setInterval(() => {
				if (index === len - 1) {
					clearInterval(tiemr)
				}

				var dataX = []
				var unit = ''
				var name = ''

				getData(e[index].deviceid, e[index].item, this.starttime, this.endtime, params).then(res => {
					let dataY = []
					dataX = []
					// this.series = []
					res.data.map(item => {
						dataX.push(item.dtime)
						dataY.push(item.data)
					})

					for (let i of this.devices) {
						if (i.deviceid === e[index].deviceid) {
							name = i.name
						}
					}
					this.series.push({
						name: e[index].itemName,
						type: 'line',
						smooth: true,
						symbol: 'none',
						data: dataY,
					})

					unit = e[index].unit

					// let slide = document.getElementsByClassName('swiper-slide')[index]
					// let echartsPart1 = slide.getElementsByClassName('myCharts_div')[0]
					// this.init3(name, dataX, echartsPart1, this.series, e[index].unit)

					index++
					indexCopy++
				})

				if (indexCopy == 2) {
					setTimeout(() => {
						let slide = document.getElementsByClassName('swiper-slide')[indexSwiper]
						let echartsPart1 = slide.getElementsByClassName('myCharts_div')[0]
						this.init3(name, dataX, echartsPart1, this.series, unit)

						setTimeout(() => {
							this.series = []
						}, 100)
						indexSwiper++
						indexCopy = 1
					}, 1000)
				}
			}, 2000)
		},

		init() {
			const myChart = echarts.init(this.$refs.myCharts)
			let option = {
				color: ['#00BD7D', '#01C4E2', '#1654F5', '#FFA254'],
				title: {
					text: '总数70',
					left: 'center',
					top: '40%',
					textStyle: {
						fontSize: 18,
						color: '#fff',
						fontWeight: 'normal',
					},
				},
				tooltip: {
					trigger: 'item',
				},
				legend: {
					bottom: 10,
					icon: 'square',
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
				},
				series: [
					{
						type: 'pie',
						radius: ['35%', '60%'],
						center: ['50%', '45%'],
						data: [
							{
								value: this.facility_onLine,
								name: '在线设备',
							},
							{
								value: this.facility_offLine,
								name: '设备离线',
							},
							{
								value: this.controller_onLine,
								name: '控制器在线',
							},
							{
								value: this.controller_offLine,
								name: '控制器离线',
							},
						],
						label: {
							normal: {
								formatter: '{font|{c}}台',
								rich: {
									font: {
										fontSize: 12,
										padding: [0, 0],
										// color: '#fff',
									},
								},
							},
						},
					},
				],
			}
			myChart.setOption(option, true)
		},

		init2() {
			getWarnmsgCountByUserid().then(res => {
				let dataY = []
				let dataX = []
				res.map(item => {
					dataY.push(item.count)
					dataX.push(item.rq)
				})

				const myChart = echarts.init(this.$refs.myCharts2)
				const axisLine = {
					show: false,
					lineStyle: {
						color: '#65ABE7',
					},
				}
				const option = {
					title: {
						textStyle: {
							color: '#000',
							fontSize: 16,
							fontWeight: 800,
						},
						top: 10,
						left: 10,
					},

					tooltip: {
						trigger: 'axis',
					},

					grid: {
						left: '4%',
						right: '6%',
						top: '20%',
						bottom: '5%',
						containLabel: true,
					},

					xAxis: {
						type: 'category',
						boundaryGap: false,
						axisLine,
						axisTick: {
							show: false,
						},
						data: dataX,
					},
					yAxis: {
						type: 'value',
						axisLine,
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#ffffff33',
							},
						},
					},
					series: [
						{
							type: 'line',
							smooth: true,
							symbol: 'circle',
							symbolSize: 5,

							itemStyle: {
								color: '#00b3f4',
								borderColor: '#fff',
								borderWidth: 3,
								shadowColor: '#04CDF4',
								shadowBlur: 0,
								shadowOffsetY: 2,
								shadowOffsetX: 2,
							},
							// symbol: 'none',
							itemStyle: {
								normal: {
									color: '#10B1FD',
									lineStyle: {
										color: new echarts.graphic.LinearGradient(
											0,
											0,
											0,
											1,
											[
												{
													offset: 0,
													color: '#4390FA',
												},
												{
													offset: 1,
													color: '#0954FD',
												},
											],
											false
										),
									},
								},
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[
											{
												offset: 0,
												color: '#10b1fd4d',
											},
											{
												offset: 1,
												color: '#2bbffd00',
											},
										],
										false
									),
									shadowColor: '#2BBFFD',
									shadowBlur: 20,
								},
							},
							data: dataY,
						},
					],
				}
				myChart.setOption(option, true)
			})
		},

		init3(deviceid, dataX, echartsPart1, series, unit) {
			const axisLine = {
				show: false,
				lineStyle: {
					color: '#fff',
				},
			}

			const myChart = echarts.init(echartsPart1)
			const option = {
				color: ['#00FFFF', '#1CD15C'],
				title: {
					text: deviceid,
					textStyle: {
						color: '#01D1FE',
						fontSize: 14,
						fontWeight: 800,
					},
					top: 0,
					left: 0,
				},

				tooltip: {
					trigger: 'axis',
					formatter: function(e) {
						return e[0].axisValue + '<br/>' + e[0].data + unit
					},
				},

				legend: {
					orient: 'horizontal',
					icon: 'rect',
					show: true,
					right: 0,
					top: 0,
					textStyle: {
						fontSize: 14,
						color: '#fff',
					},
				},

				grid: {
					left: '5%',
					right: '6%',
					top: '15%',
					bottom: '3%',
					containLabel: true,
				},

				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine,
					axisTick: {
						show: false,
					},
					data: dataX,
					axisLabel: {
						color: this.$store.state.theme_color,
						formatter: function(params) {
							return params.split(' ')[0] + '\n' + params.split(' ')[1]
						},
					},
				},
				yAxis: {
					type: 'value',
					axisLine,
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#ffffff33',
						},
					},
				},
				series,
			}
			myChart.setOption(option, true)
		},
	},
}
</script>

<style lang="scss">
$height: 89vh;

// 滚动条
@mixin scrollbar {
	cursor: pointer;

	&::-webkit-scrollbar {
		width: 0.3vw;
		height: 5px;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: #02defa;
		margin-right: 10px;

		&:hover {
			background-color: #02defa;
		}
	}

	&::-webkit-scrollbar-track {
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.1);
		margin-right: 10px;
	}
}

.vjs_video_1-dimensions.vjs-fluid {
	padding-top: 51%;
}
.top-wrapper {
	height:10vh;
	background-size: 100% 100%;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color:#00D6E7;padding:7px 0 0 2.5vw;
}
.bot-wrapper {
	display: flex;
}
.da-ping {
	height: 100vh;
	overflow: hidden;
	background-image: url('~@/assets/title2.png');
	background-size: 100% 100%;
	/* display: flex; */
	/* padding-top: 10vh; */
	padding: {
		left: 1vw;
		right: 1vw;
	}
	.left,
	.right {
		width: 20%;
		height: $height;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.echarts_div {
			height: 32.5%;
			background-image: url('~@/assets/报警信息.png');
			background-size: 100% 100%;
		}
	}

	.right {
		.echarts_div_right_1 {
			height: 65%;
			background-image: url('~@/assets/监测实时数据.png');
			background-size: 100% 100%;
		}

		.echarts_div_right_2 {
			height: 33%;
			background-image: url('~@/assets/设备在线离线情况.png');
			background-size: 100% 100%;
		}
	}

	.center {
		width: 58%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1 0 auto;
		margin: 0 0.6vw;
		height: $height;

		.center_div_1 {
			height: 66%;
			overflow: hidden;
		}

		.center_div_2 {
			height: 32.5%;
			background-image: url('~@/assets/曲线列表.png');
			background-size: 100% 100%;
		}
	}

	._div_title {
		position: relative;
		padding-left: 2.5vw;
		padding-top: 1.5vh;
		font-weight: 600;
		height: 15%;
		color: #02e8fb;

		&::before {
			content: '';
			position: absolute;
			left: 1.7vw;
			display: inline-block;
			width: 2px;
			height: 1.8vh;
			background-color: #52ffff;
		}
	}
	._div_title_2 {
		padding-left: 13vw;
		&::before {
			content: '';
			left: 12.3vw;
		}
	}

	._div_title_center {
		padding-left: 1vw;
		&::before {
			content: '';
			left: 0.5vw;
		}
	}

	.myCharts_div {
		height: 85%;
		overflow-y: auto;
		overflow-x: hidden;
		@include scrollbar;

		.div_line {
			font-size: 1.4vh;
			padding-bottom: 2vh;
			padding-left: 1.5vw;
			color: #b7c8e3;
			line-height: 1.6;
			background-image: url('~@/assets/线.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-position-y: 5vh;

			&__tag {
				background-color: #40f14966;
				padding: 0.3vh;
				font-size: 1.2vh;
				color: #40f149;
				border-radius: 3px;
			}

			&__tag2 {
				background-color: #f1405d4d;
				padding: 0.3vh;
				font-size: 1.2vh;
				color: #f1405d;
				border-radius: 3px;
			}
		}

		.isOffline {
			color: #f1405d;
		}

		.div_block {
			margin-bottom: 1.3vh;
			border-radius: 3px;
			font-size: 1.5vh;
			float: left;
			display: flex;
			padding-left: 0.3vw;
			align-items: center;
			color: #01d6f6;
			width: 100%;
			height: 5vh;
			border: 1px solid #00f6ff;
			span {
				font-size: 2vh;
				color: #52ffff;
			}
		}
	}

	div.charts-box{
		height:21vh;
		padding:0 .8vh 0 1.5vh;
		>div{
			height:200px;
		}
	}

	.right-title{
		margin:0 1vw 0 9.5vw;
		&::before {
			content: '';
			position:absolute;
			top:12px;
			left: 0;
			height:16px;
		}
	}
	.right-title._div_title{
		padding:12px 0 0 .5vw;
	}

	.cv-inbox{
		position:relative;height:100%;width:100%;display:flex;flex-direction:column;border:1px solid #00ADBB;
	}
}
</style>
