<template>
	<div class="da-ping">
		<div class="dp-title">
			<div class="name"></div>
			<div class="tt-info">
				<span id="mainDate"></span>
				<el-select v-model="query.selectVal" clearable placeholder="请选择大棚" class="cus-select filter-item">
					<el-option v-for="(item, index) in units" :label="item.proname" :value="item.id" @click.native ="selectTrigger(item.id, index)"/>
				</el-select>
			</div>
		</div>
		<div class="body">
			<div class="left">
				<div class="echarts_div">
					<div class="panel-liner">
						<div class="panel-title">{{defaultItem.proname}}监测数据</div>
						<div class="myCharts_div panel-main" >
							<div class="scrolling" id="parent1">
								<div class="child1 grid_3 panel-info1">
									<div v-for="(item) in data1"><div>
										<h4>{{item.data + item.attr.unit}}</h4>
										<span>{{item.attr.name}}</span>
									</div></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="echarts_div">
					<div class="panel-liner">
						<div class="panel-title">室外气象站数据</div>
						<div class="myCharts_div panel-info1 grid_3">
							<div v-for="(item) in data2"><div>
								<h4>{{item.data + item.attr.unit}}</h4>
								<span>{{item.attr.name}}</span>
							</div></div>
						</div>
					</div>
				</div>
				<div class="echarts_div">
					<div class="panel-liner">
						<div class="panel-title">{{chartTitle1}}</div>
						<div class="myCharts_div panel-info1" id="chart1"></div>
					</div>
				</div>
			</div>
			<div class="center">
				<div class="center_div_1 large-screen">
					<div class="panel-title">{{defaultItem.proname}}</div>
					<div class="screen-liner">
						<div class="play-menu">
							<a v-for="(item, index) in btns1" :class="btns1Focus === index ? 'active' : ''"  @click="eventSwitch1(index)">{{item.name}}</a>
						</div>
						<div class="panels">
							<div class="panel-1" :class="!btns1Focus && 'show'">
								<!-- <a class="map-btn">more</a> -->
								<div id="mapCtn" class="amap-ctn"></div>
							</div>

							<div class="panel-2" :class="btns1Focus && 'show'">
								<div class="taps-2">
									<i :class="{active: !taps2Index}" @click="taps2Index=0"></i>
									<i :class="{active: taps2Index}" @click="taps2Index=1"></i>
								</div>
								<div class="tap-2-panels">
									<div class="panel-21" :class="{show: !taps2Index}">
										<iframe id="iframe" src="http://upvr.net/index.php/Product/Index/index/id/149252" style="height:100%;width:100%;border:0;"></iframe>
									</div>
									<div class="panel-22" :class="{show: taps2Index}">
										<img src="@/assets/smart/smart_large.png">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="center_div_2">
					<div class="echarts_div">
						<div class="panel-liner">
							<div class="panel-title">{{chartTitle2}}</div>
							<div class="myCharts_div panel-info1" id="chart2"></div>
						</div>
					</div>
					<div class="echarts_div">
						<div class="panel-liner">
							<div class="panel-title">{{chartTitle3}}</div>
							<div class="myCharts_div panel-info1" id="chart3"></div>
						</div>
					</div>
					<div class="echarts_div">
						<div class="panel-liner">
							<div class="panel-title">{{chartTitle4}}</div>
							<div class="myCharts_div panel-info1" id="chart4"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="echarts_div">
					<div class="panel-liner">
						<!-- <div class="panel-title">暖棚/植物工厂概况</div> -->
						<div class="panel-title">天气预报</div>
						<div class="myCharts_div panel-info2">
							<div class="inpn-rt1" id="inpnRt1">
								<div id="weather1" class="weather">
									<div class="rt1-info">
										<p>种植种类：蔬菜、水果</p>
										<p>种植数量：100个</p>
										<p>成熟周期：36</p>
									</div>
								</div>
							</div>
							<div class="inpn-rt2">
								<div class="ict-r">
									<!-- <div>
										<span>风速：10m/s</span>
										<span>温度：17.06°C</span>
									</div>
									<div>
										<span>风力：7级</span>
										<span>湿度：32%</span>
									</div> -->
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="echarts_div">
					<div class="panel-liner">
						<div class="panel-title">控制器柜状态</div>
						<!-- <div class="sub-title">16路智能控制器柜</div> -->
						<div class="myCharts_div panel-info1 grid_4 scrolling">
							<div v-for="(item) in data3"><div style="margin-bottom:5px;">
								<div style="margin-bottom:4px;">
								<el-switch v-model="item.status" @change="changeStatus(item)" :disabled="getStatus(item)" active-value="1" inactive-value="0" 
								active-color="#13ce66"
								inactive-color="#ff4949"
								>
								</el-switch>
								</div>
								<!-- <h3 :class="item.status ? 'on' : 'off'">{{trigure[item.status]}}</h3> -->
								<span>{{item.wayname}}</span>
							</div></div>
						</div>
					</div>
				</div>
				<div class="echarts_div">
					<div class="panel-liner">
						<div class="panel-title">水肥状态</div>
						<div class="myCharts_div panel-info1 panel-block">
							<div class="inline-ct">
								<div class="ict-r">
									<div>
										<h3 class="on">开启</h3>
										<span>水泵电机状态</span>
									</div>
									<div>
										<h3 class="off">停止</h3>
										<span>施肥机状态</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import echarts from 'echarts'
//import 'video.js/dist/video-js.css'
import { Dates } from '@/utils/tools';
//import { loadNowDataByUserid, sItem, sWarnmsgByUserid, sDeviceByUseridNotdevType, sDeviceByUseridAnddevType, getData, getWarnmsgCountByUserid } from '@/api/home'
import { getByUserid, getByProjectId, getDeviceDataById, sAllItem, get24HoursData, getContrlorList, queryAllByUseridNoPage, getData2, getDeviceIdByProName, controlWay } from '@/api/smartLargeScreen';
//import { loadNowDataByDeviceid } from '@/api/sData'
import { getWeather } from '@/api/sDevice';
import { scrollingAuto} from '@/utils/common.js';

export default {
	components: {  },
	data() {
		return {
			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,
				},
			},

			btns1:[{name:'地图'}, {name:'实景'}],
			btns1Focus:0,
			taps2Index:0,
			units:[],
			query:{selectVal:0, index:0},
			defaultItem:{},
			unitSimbol:{},
			windUnit:{
				0:'北风',
				1:'东北风',
				2:'东风',
				3:'东南风',
				4:'南风',
				5:'西南风',
				6:'西风',
				7:'西北风',
				0:'北风',
				0:'北风',
				0:'北风',
			},
			data1:{},
			data2:[],
			data3:[],
			trigure:['关闭', '打开'],

			chartTitle1:'',
			chartTitle2:'',
			chartTitle3:'',
			chartTitle4:'',
		}
	},

	mounted() {
		this.initMap();

		this.$nextTick(() => {
			// 获取单位符号
			sAllItem().then(res => {
				var arr = res || [];
				for(var obj of arr){
					obj.code && (this.unitSimbol[obj.code] = {name:obj.subject, unit:obj.unit});
				};

				// 获取 室外气象站数据
				this.getWeatherStation("430632513336484D0667FF36");

				// start
				this.reqGetByUserid();
			});

			// 实时数据
			var parent1 = document.getElementById('parent1');
			scrollingAuto({el:parent1, id:'parent1'});
		});

		var mainDate = this.$el.querySelector("#mainDate");
		setInterval(function(){
			mainDate.innerText = Dates.format('yyyy-MM-dd EE HH:mm:ss');
		}, 1000);

		window.onresize = () => {
			this.myEchart1 && this.myEchart1.myChart.resize();
			this.myEchart2 && this.myEchart2.myChart.resize();
			this.myEchart3 && this.myEchart3.myChart.resize();
			this.myEchart4 && this.myEchart4.myChart.resize();
		};

		// 加载天气
		var weather = this.$el.querySelector("#weather1");
		getWeather({c:'code', a:'getcode', id:48, icon:1, py:'huangdao'}).then(res => {
			var body = document.createElement("div");
			setTimeout(function(){
				body.innerHTML = res;
				var styles = body.querySelectorAll("link");
				for(var style of styles){
					body.removeChild(style)
				};
				var scripts = body.querySelectorAll("script");
				for(var script of scripts){
					script.parentNode.removeChild(script)
				};

				// 查看图片
				var img = body.querySelector("#day_1 .img").firstElementChild;
				img.src = 'http://plugin.tianqistatic.com/static/' + img.src.split('static/')[1];

				// 修剪dom
				var mobile05 = body.querySelector("#mobile05");
				mobile05.removeChild(mobile05.firstElementChild);
				mobile05.removeChild(mobile05.lastElementChild);
				var childs = mobile05.children;
				for(var child of childs){
					child.innerHTML = child.firstElementChild.innerHTML;
				}

				weather.innerHTML = body.innerHTML;
			}, 300);
		});

	},
	methods: {
		reqGetByUserid(){
			getByUserid({page:0, size:1000}).then(res => {
				this.units = res.content || [];
				this.defaultItem = this.units[9] || {};
				this.query.selectVal = this.defaultItem.id;
				this.reqGetByProjectId(this.defaultItem.id, arr => {
					this.AMapTool.appendMarker(arr);
				});
			})
		},
		reqGetByProjectId(id, fn){
			// 所有单位
			getByProjectId(id).then(res => {
				fn && fn(res);

				// 单元数据
				var arr = res || [];
				if(arr[0]){
					var deviceid = arr[0].deviceid;
					getDeviceDataById(deviceid).then(res => {
						this.data1 = (res || []).slice(0, 9);
						//this.data1 = this.data1.concat(res);
						for(var obj of this.data1){
							obj.attr = this.unitSimbol[obj.item];
							/* if(obj.item === 'TMP'){
								// 24小时数据
								this.get24HoursData(obj.deviceid, obj.attr);
							}; */
						};

						this.get24HoursData(deviceid)
					});
				}else{
					clearTimeout(this.timeoutFalg);
					this.data3 = [];
					this.data1 = [];

					// 清空图表
					this.myEchart1 && this.myEchart1.myChart.clear();
					this.myEchart2 && this.myEchart2.myChart.clear();
					this.myEchart3 && this.myEchart3.myChart.clear();
					this.myEchart4 && this.myEchart4.myChart.clear();
				}
			});

			getDeviceIdByProName({proId:id}).then(res => {
				var ctrlId = res.deviceId;
				// 控制器状态
				this.reqContrlorList(ctrlId);
			});
		},
		
		// 室外气象站
		getWeatherStation(deviceid){
			var keys = ["FL", "TMP", "HR", "FX", "FS", "PM25", "PM10", "NOZ"];
			getData2({"items":keys.join(), deviceid:deviceid}).then(res => {
				var data = res || {}, list = [];
				for(var key in data){
					var item = data[key];
					if(item.id){
						item.attr = this.unitSimbol[item.item];
						if(item.item === "FX"){
							item.data = this.windUnit[~~item.data];
						};
						list.push(item)
					};
				};
				this.data2 = list;
			});
			/* for(var key of keys){
				getData2({"item":key, deviceid:deviceid}).then(res => {
					var data = res.data || {};
					data.item && data2.push(data);
				});
			};
			setTimeout(() => {
				for(var obj of data2){
					console.log('data2 ________________ ', obj);
					obj.attr = this.unitSimbol[obj.item];
				};
				this.data2 = data2;
				console.log('this.data2 ________________ ', this.data2);
			}, 2000) */
		},

		reqContrlorList(deviceid){
			var that = this, tempTimer = 5000;
			(function reqData(){
				clearTimeout(that.timeoutFalg);
				getContrlorList(deviceid).then(res => {
					//var list = (res || []).splice(0, 16);
					var list = res || [];
					that.data3 = list;
					that.timeoutFalg = setTimeout(reqData, tempTimer);
				});
			})();
		},

		initMap(){
			var m = this;
			var AMapTool = new AMap.Map('mapCtn', {
                mapStyle: 'amap://styles/e1a69a1f5c54d96190413cf349fa8c1d',
                resizeEnable: true, // 是否监控地图容器尺寸变化
                zoom: 19, // 初始化地图层级
                center: [119.765299, 35.789809] // 初始化地图中心点
            });

			AMapTool.appendMarker = function(arr){
				var len = arr.length;
				for(var i=0; i<len; i++){
					var obj = arr[i];
					var imgName = obj.name.indexOf('大棚') > -1 ? 'pointe_1' : 'pointe_2';
					var icon = '/static/smartDaping/'+imgName+'.png';
					var devX = obj.name.indexOf('大棚') > -1 ? -17.5 : -23.5;

					AMapTool.marker && AMapTool.remove(AMapTool.marker);
					AMapTool.infoWindow && AMapTool.infoWindow.close();
					//经度范围[121.138398, 121.728226]
					var lng = obj.jd;
					//纬度范围[30.972688, 31.487611]
					var lat = obj.wd;
					AMapTool.setCenter([lng, lat]);
					AMapTool.marker = new AMap.Marker({
						map: AMapTool,
						icon,
						position: [obj.jd, obj.wd],
						offset: new AMap.Pixel(devX, devX),
						title: obj.name,
						label: {
							deviceid: obj.deviceid,
							name: obj.name,
							online: obj.online
						}
					});

					AMapTool.marker.on('click', e => {
						var tag = e.target || e.srcElement;
						var info = '<div class="pop-info1"><div class="dis"><span>'+obj.name+"</span></div><div class='dis'><span>"+obj.deviceid+"</span></div><div class='dis'><strong>设备状态:</strong>"+`<span style='color: #999' >${obj.online}</span>`+'</div></div>';

						AMapTool.infoWindow = new AMap.InfoWindow({
							offset: new AMap.Pixel(0, -30),
							content: info // 使用默认信息窗体框样式，显示信息内容
						});
						AMapTool.infoWindow.open(AMapTool, [obj.jd, obj.wd])
					});
				};
			};

			m.AMapTool = AMapTool;
		},

		eventSwitch1(index){
			this.btns1Focus = index;
			//this.playVideo(this.playIndex)
		},
		taps2Event(index){

		},
		selectTrigger(id, index){
			var that = this;
			this.defaultItem = this.units[index] || {};
			this.reqGetByProjectId(id, function(arr){
				that.AMapTool.appendMarker(arr);
			});
		},

		get24HoursData(id){
			//# id = '67165221505067710675FF54';
			//id = '67235431485383720673FF49';

			// 温度
			var el1 = this.$el.querySelector("#chart1");
			this.myEchart1 = this.myEchart1 || this.createPanelEcharts(el1);

			// 土壤温湿度
			var el2 = this.$el.querySelector("#chart2");
			this.myEchart2 = this.myEchart2 || this.createPanelEcharts(el2);

			// 空气温湿度
			var el3 = this.$el.querySelector("#chart3");
			this.myEchart3 = this.myEchart3 || this.createPanelEcharts(el3);

			// 光照监测
			var el4 = this.$el.querySelector("#chart4");
			this.myEchart4 = this.myEchart4 || this.createPanelEcharts(el4);

			get24HoursData(id).then(res => {
				var dataMap = res.dataMap || {}, simbol = this.unitSimbol, itemData;

				// 清空图表
				this.myEchart1.myChart.clear();
				this.myEchart2.myChart.clear();
				this.myEchart3.myChart.clear();
				this.myEchart4.myChart.clear();

				// 温度数据 (210918添加植物工厂判断)
				var plant = (id === '00240037303436380E473033' || id === '003D0029303436380D473033');
				var keys = Object.keys(dataMap);

				//var key1 = plant ? 'KK' : 'TMP';
				var key1 = keys[0] || 'TMP';
				if(dataMap['TMP']){
					itemData = dataMap['TMP'];
					key1 = 'TMP';
				}else{
					itemData = dataMap[key1];
				};
				this.chartTitle1 = simbol[key1].name + '监测';
				//var itemData = dataMap['TMP'] || dataMap[key1];
				if(itemData && itemData[0]){
					var tempData1 = this.formatEchartData([itemData], [simbol[key1]]);
					this.myEchart1.setData(tempData1);

					//this.chartTitle1 = 
				};

				// 土壤温湿度数据
				var key21 = keys[1] || 'sTMP';
				//var key2 = plant ? 'sPH' : 'sHR';
				//var key2 = keys[0] || 'sHR';
				if(dataMap['HR']){
					itemData = dataMap['HR'];
					key21 = 'HR';
				}else{
					itemData = dataMap[key21];
				};
				this.chartTitle2 = simbol[key21].name + '监测';
				//itemData = dataMap['HR'] || dataMap[key21];
				if(itemData && itemData[0]){
					//var tempData2 = this.formatEchartData([itemData, dataMap[key2]], [simbol[key21], simbol[key2]]);
					var tempData2 = this.formatEchartData([itemData], [simbol[key21]]);
					this.myEchart2.setData(tempData2);
				};


				// 空气温湿度数据
				//var key3 = plant ? 'sEC' : 'HR';
				var key3 = keys[2] || 'HR';
				if(dataMap['ILL']){
					itemData = dataMap['ILL'];
					key3 = 'ILL';
				}else{
					itemData = dataMap[key3];
				};
				this.chartTitle3 = simbol[key3].name + '监测';
				//itemData = dataMap['ILL'] || dataMap[key3];
				if(itemData && itemData[0]){
					var tempData3 = this.formatEchartData([itemData], [simbol[key3]]);
					this.myEchart3.setData(tempData3);
				};

				// 光照监测
				//var key4 = plant ? 'PP' : 'ILL';
				var key4 = keys[3] || 'ILL';
				if(dataMap['CO2']){
					itemData = dataMap['CO2'];
					key4 = 'CO2';
				}else{
					itemData = dataMap[key4];
				};
				this.chartTitle4 = simbol[key4].name + '监测';
				//itemData = dataMap['CO2'] || dataMap[key4];
				if(itemData && itemData[0]){
					var grid = {top:40, right:5, bottom:20, left:42};
					var tempData4 = this.formatEchartData([itemData], [simbol[key4]]);
					this.myEchart4.setData(tempData4, grid);
				};
			});
		},
		createPanelEcharts(el){
			var myChart = echarts.init(el),
				lineColor = 'red';
			var option = {
				title: {
					//text: data.title,
					fontStyle:14,
				},
				//color: '#fccb07',
				backgroundColor:'transparent',
				tooltip: {	// pop
					trigger: 'axis',
					axisPointer: {
						type: 'line',        // 'line' | 'shadow'
					},
					textStyle: {
						fontSize: 12,
					},
					//formatter: this.echartTooltipFormat
				},
				xAxis: [
					{
						name: '',
						type: 'category',
						//data: data.xData,
						axisTick: {
							alignWithLabel: true
						},
						axisLabel:{
							fontSize: 11,			// x轴字体大小
						},
						axisLine: {
							lineStyle: {
								color: '#888',
							}
						},

						axisPointer: {
							type: "shadow"
						},

						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						}
					}
				],
				yAxis: [
					{
						//name : '温度()',
						type: "value",
						nameTextStyle: {
							color: '#d0d2ff',
							fontSize: 11
						},
						label: {
							show: true,
							position: 'top',
							fontSize: 12,			// 刻度线数值字体大小
						},
						axisLabel: {
							formatter: "{value}",
							textStyle: {
								color: '#d0d2ff',
								fontSize: 11
							}
						},
						axisLine: {
							lineStyle: {
								//color: 'red'
							}
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false,
							lineStyle: {
								type: "dashed",
								color: 'red'
							}
						}
					},
					{
						//name: data.unit ? data.name+'('+data.unit+')' : data.name+'()',
						type: 'value',
						//data: data.yData,
						//max: data.maxVal + 0.02,
						//min: data.minVal - 0.02,
						boundaryGap: [50, '100%'],
						nameTextStyle:{
							verticalAlign:'center',
							textShadowOffsetY:100,
							color: '#fff',
							fontSize:11,
						},
						axisLabel:{
							fontSize: 11,
						},
						axisLine: {
							lineStyle: {
								//color: '#ccc'
							}
						},
					}
				],
				grid:{
					top:40,
					right:5,
					bottom:20,
					left:32,
				},
				series: [		// 数值设置
					{
						name:'温度',
						type:'line',
						//itemStyle: {normal: {areaStyle: {type: 'default', color:'red'}, color:'red'}, color:'red'},
						//color:'red',
						data:[
						]
					},
					{
						type: 'line',
						name: '',
						barWidth: '160%',
						/* label: {
							show: true,
							position: 'top',
							fontSize: 30,			// 刻度线数值字体大小
						}, */
						//data: data.yData,
					}
				],
			};

			myChart.setOption(option);

			var setData = function(data, grid){

				myChart.hideLoading();

				var yLen = data.yData.length;
				if(data.xData.length || yLen){
					var yAxis = option.yAxis, series = option.series, legend = {data:[]};

					yAxis[0].name = data.series[0].name + '('+data.series[0].unit+')';
					yAxis[0].max = ~~((data.maxVal + data.maxVal*.02) * 10)/10;
					yAxis[0].min = ~~((data.minVal - data.minVal*.02) * 10)/10;
					for(var i=0; i<yLen; i++){
						var yItem = data.yData[i];
						!series[i] && (series[i] = {});

						series[i].data = yItem;
						series[i].name = data.series[i].name;
						series[i].color = data.series[i].color;

						legend.data.push(data.series[i].name);
					};

					myChart.setOption({
						color:data.color,
						tooltip: {	// pop
							trigger: 'axis',
							axisPointer: {
								type: 'line',        // 'line' | 'shadow'
							},
							textStyle: {
								fontSize: 12,
							},
							//formatter: this.echartTooltipFormat
						},
						xAxis:[{
							data: data.xData,
							axisLine: {
								lineStyle: {
									color: '#888',
								}
							},
						}],
						yAxis:yAxis,
						series:series,
						grid: grid || option.grid,
					})
				}else{
					myChart.setOption({
						title: {
							show: true,
							extStyle: {
								color: "grey",
								fontSize: 20
							},
							text: "暂无数据",
							left: "center",
							top: "center"
						}
					})
				}
			};
			return {setData:setData, myChart:myChart}
		},

		formatEchartData(arrs, attrs){
			var xData = [];
			var cache = {
				title:'',
				//names:[],
				maxVal:0,
				minVal:Infinity,
				collectTime:0,		// 设备采集时间
				unit:'',
				//list:[],
				xData:[],
				yData:[],
				now:0,
				series:[],
				color:'#fccb07',
			};

			// 封装 echar 展示数据
			var len = arrs.length;
			for(var i=0; i<len; i++){
				var arr = arrs[i], yData = [];
				cache.series[i] = {unit:attrs[i].unit, name:attrs[i].name};
				for(var item of arr){
					var val = item.data*1;
					if(i === 0){
						var time = item.dtime.indexOf(' ') > -1 ? item.dtime.split(' ')[1] : item.dtime;
						cache.xData.push(time);
						yData.push(val);
					}else{
						yData.push(val);
						cache.series[i].color = '#04e3ff';
					};

					val > cache.maxVal && (cache.maxVal = val);
					~~val < cache.minVal && (cache.minVal = val);
				}

				/* if(attrs[0].name === '土壤磷'){
					console.log('formatEchartData ________________ ', item.data, cache.maxVal, cache.minVal, val);
				} */
				cache.maxVal = cache.maxVal + (cache.maxVal * 1);
				cache.minVal = cache.minVal - (cache.minVal * 1);

				cache.yData.push(yData);

				// 设置 echar 标题
				/* if(i === 0 && pageNo === 0){
					cache.name = senseDevice.channel.name;
					cache.unit = senseData.FN || '';
				} */
			};
			
			//cache.xData = cache.xData.concat(xData);
			//cache.yData = cache.yData.concat(yData);
			return cache
		},

		echartTooltipFormat(params, a, b){
			var param = params[0];
		},

		getStatus(item) {
			// deviceStatus==='在线' ? false:true
			// workmode 工作模式 0远程 1本地
			/* if (this.online === '在线') {
				if (this.workmode === '0') {
					return false
				} else {
					return true
				}
			} else {
				return true
			} */

			return false
		},
		changeStatus(data) {
			controlWay(data).then(response => {
				if(response === 'success') {
					//this.initdeviceWay()
					this.$notify({
						title: '操作成功',
						type: 'success',
						duration: 2500
					})
				}
			}).catch(err => {
				data.status = !data.status;
				console.log(err.response.data.message)
			})
		},
	},
}
</script>

<style lang="scss">

	// 滚动条
	.scrolling{}
	.scrolling::-webkit-scrollbar{width:0.3vw;height:5px;cursor:pointer;}
	.scrolling::-webkit-scrollbar-thumb{border-radius: 10px;background:#1674ee;margin-right: 10px;cursor:pointer;}
	.scrolling::-webkit-scrollbar-thumb:hover{background-color:#1854e8;}
	.scrolling::-webkit-scrollbar-track{border-radius: 10px;background:rgba(255, 255, 255, 0.1);margin-right: 10px;}
	/* 滚动条-火狐 */
	.scrolling{scrollbar-width:thin;scrollbar-color:#1674ee rgba(255, 255, 255, 0.1);}

	.vjs_video_1-dimensions.vjs-fluid {
		padding-top: 51%;
	}

	.da-ping {
		min-width:1024px;
		position:relative;
		height: 100vh;
		flex-direction: column;
		background-image: url('~@/assets/smart/backgound.png');
		background-size: 100% 100%;
		user-select:none;

		.dp-title{
			position:relative;
			margin:0 .9vw;
			height: 7.4vh;
			background:no-repeat top center url('~@/assets/smart/title.png');
			background-size:100% auto;

			.name{position:absolute;top:1.111vh;left:0;height:3.24vh;width:100%;
				background:no-repeat top center url('~@/assets/smart/title_text.png');
				background-size:auto 100%;
			}

			.tt-info{
				position:absolute;bottom:1.75vh;right:2px;height:auto;
				color:#d0d2ff;
				font-size:11px;
			}
			.cus-select{
				input{display:inline-block;width:120px;border:1px solid #d0d2ff;background-color:#014468;
					color:#d0d2ff;font-size:12px;
				}
				.el-input{

				}
				.el-input__inner{
					height:20px;line-height:20px

				}
				.el-input__suffix-inner{
					.el-select__caret{line-height:20px}
				}
			}
		}
		.body{
			height:91.48vh;
			display:flex;
			margin:0 .9vw;
		}

		.body>div{
			/* overflow: hidden; */
		}

		.left,
		.right {
			width: 21.7vw;
			flex-direction: column;
			justify-content: space-between;
			.echarts_div {
				background:no-repeat center center url('~@/assets/smart/area_0.png');
				background-size:100% 100%;
			}
		}

		.center {
			width: 56vw;
			display:flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1 0 auto;

			.echarts_div {
				background:no-repeat center center url('~@/assets/smart/area_1.png');
				background-size: 100% 100%;
			}
			.center_div_2 {
				display:flex;
				height:29.8vh;
				margin:1vh .5vw 0;
				.echarts_div{
					flex:1;
					margin-right:.6vw;
				}
				.echarts_div:last-child{
					margin-right:0
				}
			}

			.panel-liner{margin:10px 4px;}
		}

		.echarts_div {
			display:flex;
			height:29.9vh;
			margin-bottom:.87vh;
		}

		.panel-title {
			position: relative;
			padding:1.1vh 0 0 1.14vw;
			height:4.155vh;
			font-size:16px;
			overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;

			&::before {content:'';display:inline-block;width:1.71vw;height:1.29vh;margin-right:0.91vw;
				background:no-repeat center center url('~@/assets/smart/title_sign.png');
				background-size:100% 100%;
			}
		}
		._div_title_2 {
			padding-left: 13vw;
			&::before {
				content: '';
				left: 12.3vw;
			}
		}

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

		.myCharts_div {
			.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;
			}
		}

		.large-screen{
			display:flex;flex-direction:column;
			height:60.54vh;
			overflow:hidden;
			background:no-repeat center center url('~@/assets/smart/area_2.png');
			background-size: 100% 100%;
			margin:.1vh .5vw 0;
			padding:10px;

			.panel-title{
				height:auto;padding:.3vh 0 .4vh;color: #d0d2ff;font-size:14px;
			}

			.screen-liner{
				display:flex;
				position:relative;
				width:100%;height:100%;
			}

			.play-menu{
				display:flex;
				position:absolute;top:0;left:5px;width:80px;height:22px;line-height:22px;z-index:20;background:rgba(0,0,0,.6);border-radius:0 0 6px 6px;font-size:14px;overflow:hidden;


				a{cursor:pointer;color:#D5D5D5;flex:1;text-align:center;}
				a:first-child{border-right:1px solid #01D1FD}
				a.active{color:#01D1FD;background:rgba(0,0,0,.8);}
			}

			.panels{
				flex:1;
				position:relative;
				.show{display:block;}

				.map-btn{position:absolute;top:0;left:130px;height:20px;width:20px;border:1px solid green;z-index:2;color:#fff;font-size:11px;}
				.amap-ctn{width:100%;height:100%;}


				.panel-2{
					.taps-2{
						position:absolute;bottom:4px;right:20px;z-index:2;font-size:0;
						i{display:inline-block;width:50px;height:50px;margin-right:8px;
							background-repeat:no-repeat;
							background-position:center center;
							background-size:auto 100%;
							cursor:pointer;border-radius:15px;
						}
						i.active{background:rgba(0,0,0,.6);}
						i:first-child{background-image:url('~@/assets/smart/taps-2_01.png');background-size:auto 100%;}
						i:first-child.active{background-image:url('~@/assets/smart/taps-2_02.png');}
						i:last-child{background-image:url('~@/assets/smart/taps-2_11.png');background-size:auto 100%;}
						i:last-child.active{background-image:url('~@/assets/smart/taps-2_12.png');}
					}

					.tap-2-panels{
						height:100%;width:100%;
						.show{display:block;}

						img{display:block;border:0;width:100%;height:100%;}
					}
					.tap-2-panels>div{
						display:none;height:100%;width:100%;
					}
				}
			}
			.panels>div{
				position:absolute;top:0;left:0;
				width:100%;
				height:100%;
				z-index:1;
				display:none;
			}
		}

		.left {
			.panel-info1>div{position:relative;display:flex;
				align-items:center;justify-content:center;text-align:center;
			}
		}
		.right{
			.panel-info1>div{position:relative;display:flex;
				align-items:center;justify-content:center;text-align:center;
			}
			.panel-block{display:block;}
		}
		.panel-liner{display:flex;position:relative;flex:1;margin:10px;color:#d0d2ff;flex-direction:column;}

		.panel-main{
			position:relative;flex:1;
			font-size:13px;
			border:1px solid #333;

			.panel-info1>div{
				height:7.584vh;
			}
		}

		.grid{
			display:grid;
			grid-auto-flow:row dense;
		}

		.panel-info1{
			flex:1;
			font-size:13px;
			border:1px solid #333;
			display:grid;
			grid-auto-flow:row dense;

			h4{margin:0 0 .6vh 0;padding:0;font-size:17px;color:#03d3fe;}
			h3{margin:0 0 5px;padding:0;font-size:22px;}
			h3.on{color:#03d3fe;}
			h3.off{color:#fcea06;}

			.inline-ct{
				position:relative;height:15.277vh;margin-top:4.833vh;
				background:no-repeat .468vw 0 url('~@/assets/smart/panel_7.png');
				background-size:11.927vw 100%;

				.ict-r{
					display:flex;position:absolute;top:0;right:0;height:100%;width:7.552vw;
					flex-direction:column;
				}
				.ict-r>div{
					flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;
				}
			}
		}

		.panel-info2{
			color:#03d3fe;
			.inpn-rt1{
				display:block;height:12.87vh;font-size:14px;
				.rt1-info{
					padding:2.592vh 0 0 1.875vw;color:#03d3fe;
				}
				p{margin:0 0 1.759vh 0;padding:0;line-height:1;}
			}
			.inpn-rt2{
				height:7.777vh;
				background:no-repeat .5729vw 0 url('~@/assets/smart/panel_9.png');
				background-size:auto 100%;
			}
			.ict-r{
				margin-left:9.218vw;height:100%;font-size:0;padding-top:2.777vh;
				div{margin-bottom:1.666vh;}
				span{display:inline-block;font-size:12px;margin-left:.364vw;}
			}

			.weather{
				font-size:11px;
				.mleft{display:none;}
				.wtpath{display:none;}
				.mright{flex:1;text-align:center;}
				img{display:block;width:2vw !important;height:auto !important;margin:0 auto;}
				ul{margin:5px 0;color:#d0d2ff;}
				#mobile05{
					display:flex;position:relative;padding-top:5vh !important;
				}
				#mobile05>div:last-child{display:none;}
				#mright_1{
					position:absolute;top:0;left:0;height:auto;width:100%;
					ul{margin:0;color:#03d3fe;}
					.wt{display:flex;align-items:center;margin-left:140px;}
					.day{display:none;}
					span:last-child{display:block;
						position:absolute;top:4px;left:0px;height:auto;
						font-size:26px;
					}
				}
			}
		}

		div.grid_3{
			grid-template-rows:1fr 1fr 1fr;
			grid-template-columns:1fr 1fr 1fr;
		}
		div.grid_4{
			//grid-template-rows:1fr 1fr 1fr 1fr;
			grid-template-columns:1fr 1fr 1fr 1fr;
			position:relative;

			h3{font-size:21px;}
		}

		

		.scrolling {
			position:absolute;top:0;left:0;height:100%;width:100%;overflow-y: auto;
		}
	}

	.el-select-dropdown{top:45px !important;border:1px solid #0b2133;
		ul{background-color:#014468;
			li{height:25px;line-height:25px;color:#d0d2ff;}
			li.hover, li:hover{background-color:#0b2133;}
		}
		div.popper__arrow:after{border-bottom-color:#014468 !important;}
	}


	.amap-ctn{
		.amap-info-content{background-color:rgba(0,0,0,.7);border-radius:10px;}
		.amap-info-sharp{border-top-color:#000}
		.pop-info1{color:#fff;font-size:12px;padding:10px 0}
	}
</style>
