// var dataUrl ="http://192.168.0.110:8081/rearScreen/"
//平台在线的球机
var onLineBallList = [];
var token1 = localStorage.getItem("video_token1")
layui.use(['form'], function() {
	$('#map').load('../../page/svg/svgMap_3D_index.svg');
	//随机获取一个在线视频播放
	getRandomVideo();
	//获取接口状态数量x
	// interfaceStatus();
	getPortStatusNum();

	//智慧用电表格
	// setTimeout(function(){
	// 	var svg = Snap('#tesr222');
	// 	console.log(svg);
	// 	svg.click(function() {
	// 	  alert('你点击了SVG元素！');
	// 	});
	// },500)
	timeTask();

	timeTaskVideo();
	deviceNum();
	// 空气质量检测
	echartsInstrumentPanel();
	environmentalMonitoring(1);
	// echartsEnvironmentalMonitor();
});

var timeout = false; //启动及关闭按钮
var timeoutVideo = false; //启动及关闭按钮
// 60 *5s 刷新一次
function timeTask() {
	if (!timeout) {
		timeout = true;
	} else {
		getPortStatusNum();
	}
	setTimeout(timeTask, 1000 * 30);
}
function timeTaskVideo() {
	if (!timeoutVideo) {
		timeoutVideo = true;
	} else {
		getRandomVideo();
	}
	setTimeout(timeTask, 1000 * 60 * 10);
}


//根据uuid绑定svg内部的id和每个防区的线条数量
const idMap = new Map([
	["83d8402f147a4752b533253a9b8efdcc",4],
	["693b822a29c6485c89e20bf2f0361e71",8],
	["d9d05050d8c54012b2888eb5c085c63a",4],
	["0244961a68cb402a89081ef73947dc9a",12],
	["399d97e087a84144a1e5cb41ab32e084",4],
	["1de47425c6ff404883ac17b061f4d093",4],
	["1de47425c6ff404883ac17b061f4d027",8]
])

/**
 * 由home.js调用
 * 用于改变 -- 各防区线的颜色
 */
function webscoketIndexSvg(strs){
	var arr = strs.split(",");//uuid-code-status   
	for (var i = 0; i < arr.length; i++) {
		var lineNum = idMap.get(arr[i].split("-")[0]);//防区线数量
		var status = arr[i].split("-")[2];//防区状态
		var lineColor = status == 5 ? "#FF3636" : "#23ee63";
		if(arr[i].split("-")[1] == 2){
			//第七房区
			for (var k = 5; k <= 8; k++) {
				changColor("a_"+arr[i].split("-")[0] +"_"+ k,lineColor);
			}
		}else{
			//1-6防区
			for (var k = 1; k <= lineNum; k++) {
				changColor("a_"+arr[i].split("-")[0] +"_"+ k,lineColor);
			}
		}
	}
}
//修改防区线颜色
function changColor(code,lineColor){
	var svg = Snap(`#${code}`);
	svg.attr({
	    stroke: lineColor,
	});
}

function deviceNum() {
	$.ajax({
		type: 'POST',
		url: dataUrl + 'electronicMap/deviceCount',
		data: "",
		dataType: 'json',
		success: function(res) {
			let deviceCount = res.obj.deviceCount;
			var Monitoring = parseInt(deviceCount[0].camera)-(parseInt(deviceCount[0].camera1) + parseInt(deviceCount[0].camera2) + parseInt(deviceCount[0].camera3) + parseInt(deviceCount[0].camera4));
			$('#map').find('#svg_795').text(parseInt(deviceCount[0].camera1));
			$('#map').find('#svg_793').text(parseInt(deviceCount[0].camera2));
			$('#map').find('#svg_800').text(parseInt(deviceCount[0].camera3));
			$('#map').find('#svg_803').text(Monitoring);
			$('#map').find('#svg_783').text(parseInt(deviceCount[0].camera4));
			$('#map').find('#svg_801').text(parseInt(deviceCount[1].stand));
			$('#map').find('#svg_796').text(parseInt(deviceCount[2].switch));

			$('#map').find('#svg_804').text(parseInt(deviceCount[3].firefight-deviceCount[5].firefight3-deviceCount[4].firefight1));	//监控消防栓
			$('#map').find('#svg_802').text(parseInt(deviceCount[5].firefight3));	//3号消防栓
			$('#map').find('#svg_792').text(parseInt(deviceCount[4].firefight1));	//1号消防栓
		}
	});
}

/**
 * 点击首页视频监控的div跳转视频页面
 */
var puid = "";
var videoBtn = document.getElementById('video1')
videoBtn.addEventListener('click', function() { 
	localStorage.setItem("video_puid",puid);
	window.parent.jumpVideo();
});

/**
 * 随机获取一个在线视频播放
 */
function getRandomVideo(){
	$.ajax({
		type: 'POST',
		url: dataUrl + "index/getRandomVideo",
		data: "",
		dataType: 'json',
		// async:false,
		success: function(res) {
			if(res.resMsg = "数据获取成功"){
				puid = res.obj.puid;
				var btn = document.getElementById('videoBtn')
				btn.addEventListener('click', function() { 
					qxPlayVideo(puid,"0");
				});
				document.getElementById('videoBtn').click();
				
			}else{
				layer.msg("当前没有在线球机",{icon:0,time:2000});
			}
		},
	});
}

/**
 *  播放视频
 * @param puId
 * @param idx
 */
function qxPlayVideo(puId, idx) {
	setTimeout(function(){
		readyPlay(puId, idx);
	},500);
}
var myPlayer = null;
//开始播放视频
function readyPlay(puId, idx){
	//若是清晰平台，删除连接对象
	// mySet.delete(selectedScreen);
	 let url = _cf_1.q2http_url + "stream.flv?puid=" + puId + "&idx=0&stream=0&token=" + token1;
	//循环视频播放列表
		try{
			if (myPlayer != null) {
				myPlayer.pause();
				myPlayer.unload();
				myPlayer.detachMediaElement();
				myPlayer.destroy();
				myPlayer = null;
			}
		   myPlayer = flvjs.createPlayer({
			   type: 'flv',
			   url: url,
			   isLive: true,
			   hasAudio: false
		   }, {
			   enableWorker: false,
			   autoCleanupSourceBuffer: true, //清理缓冲区
			   enableStashBuffer: false,
			   stashInitialSize: 128, // 减少首桢显示等待时长
			   statisticsInfoReportInterval: 600
		   });
		  
			myPlayer.attachMediaElement(document.getElementById('video1'));
			myPlayer.load();
			setTimeout(function () {
				myPlayer.play();
			}, 200);	
		   }catch(e){
			alert("该视频不在线。。。");
		   }
	var selectedScreen = 'video1';
	$('#video'+selectedScreen+'_html5_api').css("width", "100%");
	$('#video'+selectedScreen+'_html5_api').css("height", "100%");
	$('#video1').css("width", "85%");
	$('#video1').css("height", "100%");
	$('#video1').css("margin-left", "7%");
	$('#video1').css("margin-top", "2%");
	$('#video'+selectedScreen+'_html5_api').css("background-color","black");
	$('.vjs-text-track-display').hide();
	$('.vjs-loading-spinner').hide();
	$('.vjs-big-play-button').hide();
	$('.vjs-control-bar').hide();
	$('.vjs-error-display').hide();
	$('.vjs-error-display').hide();
	$('.vjs-modal-dialog').hide();
	$('.vjs-poster').removeAttr("class");
	$('.video'+selectedScreen+'-dimensions').css("width", "100%");
	$('.video'+selectedScreen+'-dimensions').css("height", "100%");
}
window.onbeforeunload = function(e) {
	myPlayer.pause();
	myPlayer.unload();
	myPlayer.detachMediaElement();
	myPlayer.destroy();
	myPlayer = null;
}
/**
 * 
 * @param {*} player 播放控件对象
 * @param {*} index  playBallList 下标，第几个
 * @param {*} type 类型 1切换窗口关闭视频，2主动关闭视频
 */
function stopVideo(player,index,type) {
	if(type == 1){
		player.unload();
		player.detachMediaElement();
		player.destroy();
		player = null;
		playBallList.splice(index, 1);
	}else{
		$.each(playBallList, function (index, item) {
		    if (!isEmpty(item)) {
		        if (selectedScreen === item.selectedScreen) {
		           let start = item.start;
				   let player = item.myPlayer;
				   if(start && player !== null){
						player.unload();
						player.detachMediaElement();
						player.destroy();
						player = null;
						playBallList.splice(index, 1);
				   }
		        }
		    }
		});
	}
}


/**
 * 获取接口状态数量
 */
function interfaceStatus() {
	$.ajax({
		type: 'POST',
		url: dataUrl + 'electricity/interfaceStatus',
		data: {
			type: ""
		},
		dataType: 'json',
		success: function(res) {
			let interface = res.obj.electricityBean;
			document.getElementById('requestNum').innerText = parseInt(interface.requestNum);
			document.getElementById('successNum').innerText = parseInt(interface.successNum);
			document.getElementById('errorNum').innerText = parseInt(interface.errorNum);
		}
	});
}

function getPortStatusNum() {
	$.ajax({
		type: 'POST',
		async: false, // 默认异步true,false表示同步
		url: dataUrl + 'index/getPortStatusNum', // 请求地址
		dataType: 'json', // 服务器返回数据类型
		data: {}, //获取提交的表单字段
		success: function(data) {
			var resMsg = data.resMsg;
			if ("数据获取成功" == resMsg) {
				// let portInfo = data.obj.portStatusBean;
				let fireBeanInfo = data.obj.fireBean;
				let safeBeanInfo = data.obj.safeBean;
				// document.getElementById('requestNum').innerText = portInfo.requestNum;
				// document.getElementById('successNum').innerText = portInfo.successNum;
				// document.getElementById('errorNum').innerText = portInfo.errorNum;

				document.getElementById('fire_totalNum').innerText = parseInt(fireBeanInfo.warnNum);
				document.getElementById('fire_warnNum').innerText = parseInt(fireBeanInfo.totalNum)

				document.getElementById('safe_totalNum').innerText = parseInt(safeBeanInfo.totalNum);
				document.getElementById('safe_warnNum').innerText = parseInt(safeBeanInfo.warnNum)

				setTimeout(function () {
					//用电统计
					powerStatChart(data.obj);
					//设备信息表格
					deviceInfoList(data.obj);
					//每月预警
					earlyWarnChart(data.obj);

					wisdomList(data.obj);

				},200)

			}
		},
		error: function(XMLHttpRequest, textStatus, e) {
			// layer.close(loadingMsg);
			layer.msg('数据请求发生异常,请稍后重试', {
				icon: 16,
				scrollbar: false
			});
		}
	});
}

//用电统计获取数据
// function powerStatChartData() {
// // 	$.ajax({
// // 		type: 'POST',
// // 		url: dataUrl + "index/getElectricityConsumption",
// // 		data: "",
// // 		dataType: 'json',
// // 		// async:false,
// // 		success: function(res) {
// // 			powerStatChart(res.obj);
// // 		},
// // 	});
// // }
//用电统计ECharts
function powerStatChart(data) {
	echarts.init(document.getElementById('chart')).dispose(); // 销毁实例
	const myChart = echarts.init(document.getElementById('chart'));

	const powerList = data.electricityList.map(function (date, index) {
		return {date: date, value: data.electricityConsumptionList[index]};
	}).sort(function (a, b) {
		// 将日期转换为时间戳进行比较
		const dateE = new Date("20" + a.date.replace("-", "/")).getTime();
		const dateF = new Date("20" + b.date.replace("-", "/")).getTime();
		return dateE - dateF;
	});
	let month = powerList.map(function(pair) {
		return pair.date;
	});

	let value = powerList.map(function(pair) {
		return pair.value;
	});
	console.log(month)
	console.log(value)
	let color = ['#CC1CAA', '#8D67FF', '#00FFFF', '#48DE13', '#FFC516', '#DC3E14', '#8E16F8'];
	dom = 800;
	barWidth = dom / 60;
	let colors = []
	for (let i = 0; i < 12; i++) {
		colors.push({
			type: 'linear',
			x: 0,
			x2: 1,
			y: 0,
			y2: 0,
			colorStops: [{
				offset: 0,
				color: 'rgba(19,130,188,0.8)' // 最左边
			}, {
				offset: 0.5,
				color: 'rgba(19,130,188,0.8)' // 左边的右边 颜色
			}, {
				offset: 0.5,
				color: 'rgba(23,208,249,0.8)' // 右边的左边 颜色
			}, {
				offset: 1,
				color: 'rgba(23,208,249,0.8)'
			}]
		})
	}
	option = {
		//提示框
		title:{
			left: '80%',
			top: '-6%',
			subtext: '用电统计:kw/h',
			subtextStyle: {
				fontSize: 12,
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			formatter: "{b} : {c}",
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		/**区域位置*/
		grid: {
			left: '6%',
			right: '0',
			top: '10%',
			bottom: '15%',
		},
		//X轴
		xAxis: {
			data: month,
			type: 'category',
			axisLine: {
				show: true,
				lineStyle: {
					color: 'rgba(255,255,255,0.6)',
					shadowColor: 'rgba(255,255,255,0.6)',
					shadowOffsetX: '20',
				},
				symbol: ['none', 'arrow'],
				symbolOffset: [0, 25]
			},
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				margin: 10,
				fontSize: 10,
				rotate: 45,
			},
		},
		yAxis: {
			show: true,
			splitNumber: 4,
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dashed',
					color: '#075858'
				},
			},
			axisLabel: {
				color: 'rgba(255,255,255,0.6)',
				margin: 10,
				fontSize: 12,
				inside: true,
				margin: -26
			},
		},
		series: [{
				type: 'bar',
				barWidth: barWidth,
				itemStyle: {
					normal: {
						color: function(params) {
							return colors[params.dataIndex % 7];
						}
					}
				},
				label: {
					show: false,
					position: [barWidth / 2, -(barWidth + 20)],
					color: '#ffffff',
					fontSize: 12,
					fontStyle: 'bold',
					align: 'center',
				},
				data: value
			},
			{
				z: 2,
				type: 'pictorialBar',
				data: value,
				symbol: 'diamond',
				symbolOffset: [0, '50%'],
				symbolSize: [barWidth, barWidth * 0.5],
				itemStyle: {
					normal: {
						color: function(params) {
							return colors[params.dataIndex % 7];
						},
					}
				},
			},
			{
				z: 3,
				type: 'pictorialBar',
				symbolPosition: 'end',
				data: value,
				symbol: 'diamond',
				symbolOffset: [0, '-50%'],
				symbolSize: [barWidth, barWidth * 0.5],
				itemStyle: {
					normal: {
						borderWidth: 0,
						color: function(params) {
							return colors[params.dataIndex % 7].colorStops[0].color;
						},

					}
				},
			},
		],
	};
	myChart.setOption(option);
}

//设备信息表格
function deviceInfoData() {
	$.ajax({
		type: 'POST',
		url: dataUrl + "index/getEquipInfo",
		data: "",
		dataType: 'json',
		// async:false,
		success: function(res) {
			deviceInfoList(res.obj);
		},
	});
}

function deviceInfoList(data) {
	let equipNum = 6;
	if(data.equipList.length < equipNum){
		equipNum = data.equipList.length;
	}
	var html = ""
	for (var i = 0; i < equipNum; i++) {
		html += "<div style='font-size: 16px;font-weight: 600'>"
		html += "<span title="+data.equipList[i].equipName+">" + (data.equipList[i].equipName.length > 10 ? data.equipList[i].equipName.substring(0,10) + ".." : data.equipList[i].equipName)  + "</span>"
		html += "<span>" + data.equipList[i].equipType+ "</span>"
		html += "<span>" + data.equipList[i].equipAddress + "</span>"
		html += "</div>"
	}
	$(".wisdom>.table").append(html)
}

//每月预警获取数据
function earlyWarnChartData() {
	$.ajax({
		type: 'POST',
		url: dataUrl + "index/getMonthlyEarlyWarning",
		data: "",
		dataType: 'json',
		// async:false,
		success: function(res) {
			earlyWarnChart(res.obj);
		},
	});
}
//每周月预警ECharts
function earlyWarnChart(data) {
	echarts.init(document.getElementById('earlyWarnContent')).dispose(); // 销毁实例
	var myChart = echarts.init(document.getElementById('earlyWarnContent'));

	// 将 monthList 和 securityList 配对，并根据日期排序
	var pairList = data.monthList.map(function(date, index) {
		return { date: date, value: data.securityList[index] };
	}).sort(function(a, b) {
		// 将日期转换为时间戳进行比较
		var dateA = new Date("20" + a.date.replace("-", "/")).getTime();
		var dateB = new Date("20" + b.date.replace("-", "/")).getTime();
		return dateA - dateB;
	});
	var pairFileList = data.monthFireList.map(function(date, index) {
		return { date: date, value: data.finalFireList[index] };
	}).sort(function(a, b) {
		// 将日期转换为时间戳进行比较
		var dateC = new Date("20" + a.date.replace("-", "/")).getTime();
		var dateD = new Date("20" + b.date.replace("-", "/")).getTime();
		return dateC - dateD;
	});
	var months = pairList.map(function(pair) {
		return pair.date;
	});

	var values2 = pairList.map(function(pair) {
		return pair.value;
	});

	var values1 = pairFileList.map(function(pair) {
		return pair.value;
	});
	option = {
		grid: {
			left: '0',
			right: '2%',
			top: '15%',
			bottom: '0%',
			containLabel: true
		},
		tooltip: {
			show: true,
			trigger: 'item'
		},
		legend: {
			show: true,
			x: '75%',
			y: '0%',
			icon: 'circle',
			textStyle: {
				color: '#ffffff'
			},
			data: ['火灾', '安防']
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			axisLabel: {
				color: '#ffffff'
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#ffffff'
				}
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false,
			},
			data: months
		}],
		yAxis: [{
				show: true,
				splitNumber: 4,
				// axisLabel: {
				// 	color: '#ffffff',
				// },
				axisLabel: {
					color: 'rgba(255,255,255,0.6)',
					margin: 10,
					fontSize: 12,
				},
				axisLine: {

					lineStyle: {
						color: '#27b4c2'
					}
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: '#075858'
					},
				},
			},

		],
		series: [
			{
				name: '火灾',
				type: 'line',
				stack: '总量',
				symbol: 'circle',
				symbolSize: 12,

				itemStyle: {
					normal: {
						color: '#FFE369',
						lineStyle: {
							color: "#FFE369",
							width: 2
						},
					}
				},
				data: values1
			},
			{
				name: '安防',
				type: 'line',
				stack: '总量',
				symbol: 'circle',
				symbolSize: 12,
				itemStyle: {
					normal: {
						color: '#1892FF',
						lineStyle: {
							color: "#1892FF",
							width: 2
						},
					}
				},
				data: values2
			},
		]
	};
	myChart.setOption(option);
}

function wisdomList(data) {
	$(".barrierGate>.table").empty();
	var html = ""
		html +=  "<div class='tableList' style='font-size: 16px;font-weight: 600'> "
		html += "<span>人员/车辆</span>"
		html += "<span>时间</span>"
		html += "<span>进出方向</span>"
		html += "</div>"
	for (let i = 0; i < 3; i++) {
		html += "<div style='font-size: 16px;font-weight: 600'>"
		html += `<span>${data.enterExitList[i].anyIndex}</span>`
		html +=`<span>${data.enterExitList[i].entryExitTime}</span>`
		html += `<span>${data.enterExitList[i].type}</span>`
		html += "</div>"
	}
	$(".barrierGate>.table").append(html)
}


//接口状态点击
function interfaceStateClick() {
	var index = layer.open({
		title: ['接口状态', 'color: #fff'],
		type: 2,
		closeBtn: 2,
		content: '../../page/index/child/interfaceState.html',
		area: ["70%", "90%"],
		maxmin: false
		/*btn: ['确定', '关闭'],
        success: function (layero, index) {
//	        	localStorage.setItem("subName",params.name);
            //var myIframe = window[layero.find('iframe')[0]['name']];
            //var fnc = myIframe.setData(params.name); //aaa()为子页面的方法
        },
        yes: function (index, layero) {
            // 获取弹出层中的form表单元素
//          var formSubmit = layer.getChildFrame('form', index);
//          var submited = formSubmit.find('button')[0];
//          // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
//          submited.click();
        },*/
	});
}

//道闸管理
function gateManagementDataClick(){
	var index = layer.open({
		title: ['道闸管理','color: #fff'],
		type: 2,
		closeBtn: 2,
		content: '../../page/index/child/gateManagementDataList.html',
		area: ["70%", "97%"],
		maxmin: false,
	});
}

// 空气质量检测
function echartsInstrumentPanel() {
	echarts.init(document.getElementById('instrumentPanel')).dispose(); // 销毁实例
	const myChart = echarts.init(document.getElementById('instrumentPanel'));
	const dataArr = 61;
	const dataX = 200;
	const height1 = { value: 800 };
	option = {
		backgroundColor: 'transparent',
		/** 标题*/
		title: [
			{
				text: '{val|' + 61 + '}',
				bottom: '12%',
				left: 'center',
				textStyle: {
					rich: {
						val: {
							fontSize: 24,
							color: '#E5E5E5',
							padding: [10, 0],
						}
					},
				},
				triggerEvent: true,
			},
		],

		/** 关闭必图例*/
		legend: {
			show: false,
		},
		series: [
			{
				name: '最外部进度条',
				type: 'gauge',
				radius: '95%',
				// splitNumber: 15,
				axisLine: {
					lineStyle: {
						color: [
							[
								1,
								{
									type: 'linear',
									x: 0,
									y: 1,
									x2: 0,
									y2: 0,
									colorStops: [
										{
											offset: 0,
											color: '#032347', // 0% 处的颜色
										},
										{
											offset: 0.5,
											color: '#0B8BAA', // 100% 处的颜色
										},
										{
											offset: 1,
											color: '#03FCF3', // 100% 处的颜色
										},
									],
									global: false, // 缺省为 false
								},
							],
						],
						width: 10,
					},
				},
				axisLabel: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					length: 20,
					lineStyle: {
						color: '#031f45',
						width: 2,
					},
				},
				itemStyle: {
					show: false,
				},
				detail: {
					show: false,
				},
				title: {
					// 标题
					show: false,
				},
				data: [
					{
						name: 'title',
						value: dataArr,
					},
				],
				pointer: {
					show: false,
				},
				animationDuration: 4000,
			},
			{
				name: '外二红线',
				type: 'gauge',
				radius: '88%',
				axisLine: {
					lineStyle: {
						color: [
							[dataArr / dataX, '#031f45'],
							[1, '#B74443'],
						],
						width: 3,
					},
				},
				axisLabel: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				itemStyle: {
					show: false,
				},
				detail: {
					show: false,
				},
				title: {
					// 标题
					show: false,
				},
				data: [
					{
						name: 'title',
						value: dataArr,
					},
				],
				pointer: {
					show: false,
				},
				animationDuration: 4000,
			},
			{
				name: '刻度尺',
				type: 'gauge',
				radius: '85%',
				splitNumber: 10, // 刻度数量
				min: 0, // 最小刻度
				max: dataX, // 最大刻度
				// 仪表盘轴线相关配置
				axisLine: {
					lineStyle: {
						color: [
							[
								1,
								{
									type: 'radial',
									x: 0.5,
									y: 0.6,
									r: 0.6,
									colorStops: [
										{
											offset: 0.85,
											color: '#031F46', // 0% 处的颜色
										},
										{
											offset: 0.93,
											color: '#086989', // 100% 处的颜色
										},
										{
											offset: 1,
											color: '#12D7EF', // 100% 处的颜色
										},
									],
								},
							],
						],
						width: 10,
					},
				},
				/** 分隔线样式*/
				splitLine: {
					show: true,
					length: 12,
					lineStyle: {
						width: 2,
						color: '#12E5FE', // 用颜色渐变函数不起作用
					},
				},
				/** 刻度线*/
				axisTick: {
					show: true,
					splitNumber: 10,
					lineStyle: {
						color: '#12E5FE', // 用颜色渐变函数不起作用
						width: 1,
					},
					length: 5,
				},
				/** 刻度标签*/
				axisLabel: {
					distance: 2,
					color: '#CEF3FE',
					fontSize: 10,
				},
				detail: {
					show: false,
				},
				animationDuration: 4000,
			},
			{
				name: '渐变进度',
				type: 'gauge',
				radius: '70%',
				splitNumber: 15,
				axisLine: {
					lineStyle: {
						color: [
							[
								dataArr / dataX,
								{
									type: 'linear',
									x: 0,
									y: 1,
									x2: 0,
									y2: 0,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(60,207,223,0)', // 0% 处的颜色
										},
										{
											offset: 0.9,
											color: 'rgba(60,207,223,0.5)', // 100% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(60,207,223,0.9)', // 100% 处的颜色
										},
									],
									global: false, // 缺省为 false
								},
							],
						],
						width: 20,
					},
				},
				axisLabel: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				itemStyle: {
					show: false,
				},
				detail: {
					show: false,
				},
				title: {
					// 标题
					show: false,
				},
				data: [
					{
						name: 'title',
						value: dataArr,
					},
				],
				pointer: {
					show: false,
				},
				animationDuration: 4000,
			},
			{
				name: '内层带指针',
				type: 'gauge',
				radius: '35%',
				splitNumber: 10, // 刻度数量
				min: 0, // 最小刻度
				max: dataX, // 最大刻度
				// 仪表盘轴线相关配置
				axisLine: {
					lineStyle: {
						color: [
							[
								1,
								{
									type: 'radial',
									x: 0.5,
									y: 0.59,
									r: 0.6,
									colorStops: [
										{
											offset: 0.72,
											color: '#032046',
										},
										{
											offset: 0.94,
											color: '#086989',
										},
										{
											offset: 0.98,
											color: '#0FAFCB',
										},
										{
											offset: 1,
											color: '#0EA4C1',
										},
									],
								},
							],
						],
						width: 50,
					},
				},
				/** 分隔线样式*/
				splitLine: {
					show: false,
				},
				/** 刻度线*/
				axisTick: {
					show: false,
				},
				/** 刻度标签*/
				axisLabel: {
					show: false,
				},
				/** 仪表盘指针*/
				pointer: {
					show: true,
					length: '95%',
					width: 2, // 指针粗细
				},
				/** 仪表盘指针样式*/
				itemStyle: {
					color: '#12E5FF',
				},
				data: [
					{
						value: dataArr,
					},
				],
				detail: {
					show: false,
				},
			},
		],
		graphic: {
			elements: [
			],
		},
	};

	myChart.setOption(option);

}
//处理环境检测格式问题
function ProcessFormat(data){
	let teamFormat =[];
	teamFormat.push(data.temps)
	teamFormat.push(data.humidty)
	teamFormat.push(data.pm10)
	teamFormat.push(data.pm25)
	teamFormat.push(data.noise)
	return teamFormat;
}
function environmentalMonitoring(data) {
	let salvProValue = [];
	//从后台动态获取数据
	$.ajax({
		type: 'POST',
		url: dataUrl + 'index/getSensorInfo',
		data: {"type":data},
		async:false,
		dataType: 'json',
		success: function(res) {
			 // 使用find方法找到第一个非空对象
		 const validData = res.obj.find(item => item && typeof item === 'object');
		 if(validData) {
			 salvProValue = ProcessFormat(validData);
		 }
			
		}
	});
	switch (data) {
		case 1:
			//salvProValue = [50, 40, 0.5, 0.3, 25, 30];
			echartsEnvironmentalMonitor(salvProValue);
			break;
		case 2:
			//salvProValue = [45, 35, 0.4, 0.25, 20, 25];
			echartsEnvironmentalMonitor(salvProValue);
			break;
		case 3:
			//salvProValue = [40, 30, 0.35, 0.2, 18, 22];
			echartsEnvironmentalMonitor(salvProValue);
			break;
		case 4:
			//salvProValue = [35, 25, 0.3, 0.15, 15, 20];
			echartsEnvironmentalMonitor(salvProValue);
			break;
		default:
			break;
	}
}

function echartsEnvironmentalMonitor(salvProValue) {
	echarts.init(document.getElementById('environmentalMonitor')).dispose(); // 销毁实例
	const myChart = echarts.init(document.getElementById('environmentalMonitor'));
	const salvProName = ["湿度", "温度", "PM10", "PM20", "噪音"];
	const salvProMax = [];//背景按最大值
	for (let i = 0; i < salvProValue.length; i++) {
		salvProMax.push(salvProValue[0])
	}
	let option = {
		backgroundColor: "transparent",
		grid: {
			left: '2%',
			right: '2%',
			bottom: '0',
			top: '2%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'none'
			},
			formatter: function (params) {
				return params[0].name + ' : ' + params[0].value
			}
		},
		xAxis: {
			show: false,
			type: 'value'
		},
		yAxis: [{
			type: 'category',
			inverse: true,
			axisLabel: {
				show: true,
				textStyle: {
					color: '#34a0b4'
				},
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: salvProName
		}, {
			type: 'category',
			inverse: true,
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
				textStyle: {
					color: '#ffffff',
					fontSize: '10'
				},
			},
			data: salvProValue
		}],
		series: [{
			name: '值',
			type: 'bar',
			zlevel: 1,
			itemStyle: {
				normal: {
					barBorderRadius: 30,
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: '#3df0f1'
					}, {
						offset: 1,
						color: '#67b1f5'
					}]),
				},
			},
			barWidth: 10,
			data: salvProValue
		},
			{
				name: '背景',
				type: 'bar',
				barWidth: 10,
				barGap: '-100%',
				data: salvProMax,
				itemStyle: {
					normal: {
						color: '#1a3236',
						barBorderRadius: 30,
					}
				},
			},
		],
	};
	myChart.setOption(option);
}