moral_fronted.git

			@@ -1,1166 +1,2523 @@
			<template>
			<div
			id="mapContent"
			v-loading="loading"
			element-loading-text="请稍等"
			element-loading-background="rgba(0, 0, 0, 0.6)"
			>
			<div v-if="noneData" class="noneData">当前区域设备没有风场</div>
			<div class="top">
			<span
			v-for="(item, index) in params"
			:key="index"
			class="left"
			:class="{ click: changeColor == index }"
			@click="change(index)"
			>{{ item }}</span>
			<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
			<span class="right">{{ times }}秒</span>
			<span class="dropDown">
			<img class="realTime_top" :src="require('@/assets/images/regionalOverview/realTimeImg.png')" alt="" @click="turnState">
			<span class="text_Time">{{ dateFormat }}</span>
			<img class="drop-icon" :src="turnImg" alt="" @click="turnState">
			</span>
			</div>
			<regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
			<div :style="{ background: 'url(' + bg + ')' }" class="buttom-left" />
			<el-dialog
			title="污染报警查询"
			:visible.sync="alarmTableVisible"
			width="80%"
			@mouseover.native="mouseOver"
			@mouseleave.native="mouseLeave"
			>
			<div class="topSelect">
			<div>
			<el-date-picker
			v-model="dateValue"
			style="width:400px"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			value-format="yyyy-MM-dd"
			/>
			<el-select v-model="factorValue" placeholder="选择因子">
			<el-option
			v-for="item in factorOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
			</el-select>
			<el-select v-model="alartValue" placeholder="选择报警类型">
			<el-option
			v-for="item in alertOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
			</el-select>
			<el-button type="primary" @click="alertData(PageSize, currentPage)">查询</el-button>
			</div>
			</div>
			<el-table
			:data="gridData.slice((currentPage-1)PageSize,currentPagePageSize)"
			border
			stripe
			:cell-class-name="tableCellClassName"
			height="400"
			>
			<el-table-column property="alarmInfoId" label="序号" width="50" align="center" />
			<el-table-column property="alarm_time" label="报警时间" width="150" />
			<el-table-column property="deviceName" label="站点名称" width="200" />
			<el-table-column property="index" label="因子" width="80" align="center" />
			<el-table-column property="alarm_type" label="报警类型" width="200" align="center" />
			<el-table-column property="alarm_information" label="报警信息" align="center" />
			</el-table>
			<el-pagination
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="PageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="totalCount"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			/>
			<div slot="footer" class="dialog-footer">
			<el-button size="mini" @click="alarmTableVisible = false">关闭</el-button>
			</div>
			</el-dialog>
			</div>
			</template>

			<script>
			import 'leaflet/dist/leaflet.css'
			import 'leaflet-velocity/dist/leaflet-velocity.css'
			import L from 'leaflet'
			import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
			import 'leaflet-velocity/dist/leaflet-velocity'
			import $ from 'jquery'
			import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件
			import { mapGetters } from 'vuex'
			export default {
			components: { RegionalOverview },
			props: {
			jumpData: Array,
			weidu: Number,
			jingdu: Number,
			monitorPointId: Number,
			monitorPointIds: Array
			},
			data() {
			return {
			timerKey: '', // 用于重新渲染子组件
			map: null,
			code: [],
			latlng: [],
			noneData: false,
			params: [
			'PM10',
			'PM2.5',
			'SO2',
			'NO2',
			'CO',
			'O3',
			'TVOC'
			],
			changeColor: 0,
			times: 1,
			sensorKey: 'a34002',
			keys: [],
			bg: require('@/assets/images/tl_PM10.png'),
			windState: 1,
			windStateText: '风场图',
			keyData: [],
			lats: [],
			lngs: [],
			accountId: this.$store.state.accountId,
			orgId: this.$store.state.orgId,
			coordinates: [],
			markerObject: [],
			loading: true,
			ws: null,
			lockReconnect: false, // 是否真正建立连接
			timeout: 58 * 1000, // 30秒一次心跳
			timeoutObj: null, // 心跳心跳倒计时
			serverTimeoutObj: null, // 心跳倒计时
			timeoutnum: null, // 断开重连倒计时,
			jingduNew: this.jingdu,
			weiduNew: this.weidu,
			alartValue: 'all',
			dateValue: '',
			factorValue: 'all',
			// 总数据
			gridData: [],
			// 默认显示第几页
			currentPage: 1,
			// 总条数，根据接口获取数据长度(注意：这里不能为空)
			totalCount: 0,
			// 个数选择器（可修改）
			pageSizes: [10, 20, 30, 40],
			// 默认每页显示的条数（可修改）
			PageSize: 20,
			factorOptions: [
			{
			label: '全部因子',
			value: 'all'
			},
			{
			label: 'PM10',
			value: 'PM10'
			},
			{
			label: 'PM2.5',
			value: 'PM2.5'
			},
			{
			label: 'SO2',
			value: 'SO2'
			},
			{
			label: 'NO2',
			value: 'NO2'
			},
			{
			label: 'CO',
			value: 'CO'
			},
			{
			label: 'O3',
			value: 'O3'
			}
			],
			alertOptions: [
			{
			label: '全部报警类型',
			value: 'all'
			},
			{
			label: '超限',
			value: 'overrun'
			},
			{
			label: '突然高',
			value: 'sudden'
			},
			{
			label: '超过国控站点100%',
			value: 'state100'
			},
			{
			label: '超过国控站点150%',
			value: 'state150'
			},
			{
			label: '超过国控站点250%',
			value: 'state250'
			},
			{
			label: '超过市区均值100%',
			value: 'city100'
			},
			{
			label: '超过市区均值150%',
			value: 'city150'
			},
			{
			label: '超过市区均值250%',
			value: 'city250'
			}
			],
			currentDate: '',
			turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
			showOrHidden: true,
			dateFormat: '',
			alarmTableVisible: false
			}
			},
			computed: {
			...mapGetters(['regionCode'])
			},
			watch: {
			dateValue(n, o) {
			// console.log(n)
			// this.newDate()
			},
			regionCode(newCode, oldCode) {
			this.timerKey = newCode // 用于监听code变化重新渲染子组件
			}
			},
			mounted() {
			this.currentHour()
			this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)
			// 初始化地图容器
			this.initMap()
			},
			created() {
			const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
			this.jingduNew = newLL[1]
			this.weiduNew = newLL[0]
			// 初始化风场数据
			this.windData()
			this.change(0)
			this.getParamsData()
			this.windDir()
			this.newDate()
			this.alertData(this.PageSize, this.currentPage)
			},
			beforeDestroy() {
			if (this.timer) {
			clearInterval(this.timer)
			// console.log('timer定时器销毁成功')
			}
			if (this.timer2) {
			// console.log(this.timer2)
			clearInterval(this.timer2)
			// console.log('timer2定时器销毁成功')
			}
			// 离开页面时关闭websocket
			if (this.ws) {
			// console.log('WS关闭')
			this.ws.close()
			}
			},
			methods: {
			// 当前小时默认值
			currentHour() {
			const aData = new Date()
			const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
			const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
			const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
			const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
			this.dateFormat = currentDate.toString()
			},
			// 日期格式化
			newDate() {
			var aData = new Date()
			var month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
			var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
			this.currentDate = aData.getFullYear() + '-' + month + '-' + date
			// console.log(this.currentDate)
			this.dateValue = [this.currentDate, this.currentDate]
			},
			// 报警弹窗移入
			mouseOver() {
			this.map.scrollWheelZoom.disable()
			},
			// 报警弹窗移出
			mouseLeave() {
			this.map.scrollWheelZoom.enable()
			},
			initWebpack() {
			// 拼写参数
			var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
			// 拼写URL
			var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
			socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
			this.ws = new WebSocket(socketUrl)
			this.ws.onopen = this.onopen
			this.ws.onmessage = this.onmessage
			this.ws.onclose = this.onclose
			this.ws.onerror = this.onerror
			},
			reconnect() { // 重新连接
			var that = this
			if (that.lockReconnect) {
			return
			}
			that.lockReconnect = true
			// 没连接上会一直重连，设置延迟避免请求过多
			that.timeoutnum && clearTimeout(that.timeoutnum)
			that.timeoutnum = setTimeout(function() {
			// 新连接
			that.initWebpack()
			that.lockReconnect = false
			}, 5000)
			},
			reset() { // 重置心跳
			var that = this
			// 清除时间
			clearTimeout(that.timeoutObj)
			clearTimeout(that.serverTimeoutObj)
			// 重启心跳
			that.start()
			},
			start() { // 开启心跳
			// console.log('开启心跳')
			var self = this
			self.timeoutObj && clearTimeout(self.timeoutObj)
			self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
			self.timeoutObj = setTimeout(function() {
			// 这里发送一个心跳，后端收到后，返回一个心跳消息，
			if (self.ws.readyState === 1) { // 如果连接正常
			self.ws.send('heartCheck')
			} else { // 否则重连
			self.reconnect()
			}
			self.serverTimeoutObj = setTimeout(function() {
			// 超时关闭
			self.ws.close()
			}, self.timeout)
			}, self.timeout)
			},
			onopen() {
			// console.log('连接开启')
			// 开启心跳
			this.start()
			},
			onmessage(msg) {
			var that = this
			if (JSON.parse(msg.data).名称) {
			that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{\|}\|"/g, '')
			} else {
			that.wsData1 = msg.data
			if (that.windState === 2) {
			for (let i = 0; i < that.keyData.length; i++) {
			// 更新风向标
			// 遍历出(通过mac匹配)要更新的风向标
			if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
			var blueIcon1 = L.icon({ // 设置图标样式
			iconUrl: require('@/assets/images/icoWind03.png'),
			iconSize: [30, 30],
			iconAnchor: [15, 25],
			className: 'iconWind'
			})
			// L.marker用来在地图中放置注记
			that.marker = L.marker([that.lats[i], that.lngs[i]], {
			icon: blueIcon1,
			rotationAngle: Number(JSON.parse(that.wsData1).风向)
			})
			if (i === 0) {
			that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
			that.map.addLayer(that.marker)
			} else {
			that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
			for (let j = 0; j < that.markerObject.length; j++) {
			if (that.coordinates[0] === that.markerObject[j].mac1) {
			that.map.removeLayer(that.markerObject[j].marker)
			that.map.addLayer(that.marker)
			} else if (that.coordinates[i] === that.markerObject[j].mac1) {
			that.map.removeLayer(that.markerObject[j].marker)
			that.map.addLayer(that.marker)
			}
			}
			}
			}
			}
			}
			}
			// 收到服务器信息，心跳重置
			this.reset()
			},
			onclose(e) {
			// console.log('连接关闭')
			// console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
			// 重连
			this.reconnect()
			},
			onerror(e) {
			console.log('出现错误')
			// 重连
			this.reconnect()
			},
			// ws方法
			wsStart() {
			var that = this
			// 拼写参数
			var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
			// 拼写URL
			var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
			// 替换http为WS
			// console.log(socketUrl)
			socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
			this.ws = new WebSocket(socketUrl)
			// if (this.ws) {
			// this.ws.close()
			// console.log('ws心跳关闭')
			// }
			// this.ws = new WebSocket(socketUrl)
			// console.log('ws心跳开启')

			this.ws.onopen = function() {
			// console.log('websocket开启成功')
			}
			// 获得消息事件
			this.ws.onmessage = function(msg) {
			if (JSON.parse(msg.data).名称) {
			that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{\|}\|"/g, '')
			// console.log(that.wsData2)
			} else {
			that.wsData1 = msg.data
			// console.log(that.wsData1)
			if (that.windState === 2) {
			for (let i = 0; i < that.keyData.length; i++) {
			// 更新风向标
			// 遍历出(通过mac匹配)要更新的风向标
			if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
			var blueIcon1 = L.icon({
			iconUrl: require('@/assets/images/icoWind03.png'),
			iconSize: [30, 30],
			iconAnchor: [15, 25],
			className: 'iconWind'
			})
			that.marker = L.marker([that.lats[i], that.lngs[i]], {
			icon: blueIcon1,
			rotationAngle: Number(JSON.parse(that.wsData1).风向)
			})
			if (i === 0) {
			that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
			that.map.addLayer(that.marker)
			} else {
			that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
			for (let j = 0; j < that.markerObject.length; j++) {
			if (that.coordinates[0] === that.markerObject[j].mac1) {
			that.map.removeLayer(that.markerObject[j].marker)
			that.map.addLayer(that.marker)
			} else if (that.coordinates[i] === that.markerObject[j].mac1) {
			that.map.removeLayer(that.markerObject[j].marker)
			that.map.addLayer(that.marker)
			}
			}
			}
			}
			}
			}
			}
			}
			},
			// 百度经纬度转高德经纬度
			bd09togcj02(bd_lon, bd_lat) {
			var x_pi = 3.14159265358979324 * 3000.0 / 180.0
			var x = bd_lon - 0.0065
			var y = bd_lat - 0.006
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
			var gg_lng = z * Math.cos(theta)
			var gg_lat = z * Math.sin(theta)
			return [gg_lat, gg_lng]
			},
			// 请求设备坐标
			deviceMaker() {
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function(layer) {
			// 卸载之前的风场图层
			if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
			layer.remove()
			}
			})
			}
			const that = this
			this.$request({
			url: '/historyFiveMinutely/queryDeviceAndData',
			method: 'get',
			params: {
			sensorCode: this.sensorKey,
			organizationId: this.$store.state.orgId,
			regionCode: this.$store.state.regionCode
			}
			}).then((data) => {
			// console.log('五分钟设备数据')
			// console.log(data)
			that.loading = false
			var keyData = data.data.devices
			this.keyData = data.data.devices
			// 遍历国控站位置
			this.stateControlStation()
			var group = L.layerGroup().addTo(this.map)
			this.keys = []
			for (let i = 0; i < keyData.length; i++) {
			if (keyData[i].a34002) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
			} else if (keyData[i].a34004) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
			} else if (keyData[i].a21026) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
			} else if (keyData[i].a21004) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a21004)))
			} else if (keyData[i].a21005) {
			this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
			} else if (keyData[i].a05024) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
			} else if (keyData[i].a99054) {
			this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
			} else {
			// for (let j = 0; j < keyData.length; j++) {
			this.keys.push(JSON.parse('null'))
			// }
			}
			// console.log(this.keys)
			var lat = keyData[i].latitude
			this.lats[i] = keyData[i].latitude
			var lng = keyData[i].longitude
			this.lngs[i] = keyData[i].longitude

			var blueIcon = L.icon({
			iconUrl: require('@/assets/icon/ico' + keyData[i].state + '.png'),
			iconSize: [60, 60],
			iconAnchor: [13, 21],
			className: 'my-device'
			})
			// 添加标记到地图
			L.marker([lat, lng], {
			icon: blueIcon
			}).addTo(group)
			// console.log(JSON.parse(this.keys[i]))
			var myIcon = L.divIcon({
			html: this.keys[i],
			className: 'my-div-icon',
			iconSize: 30
			})
			var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
			// 给标记添加鼠标移入事件，mouseover事件会冒泡
			var _this = this
			marker.on('mouseover', function(e) {
			this.noneData = false
			// $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac }, (res) => {
			// var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{\|}\|"/g, '')
			// // console.log(data)
			// this.bindPopup(data).openPopup()
			// })
			_this.$request({
			url: '/historyFiveMinutely/queryPopDataByMac',
			method: 'get',
			params: {
			mac: keyData[i].mac
			}
			}).then((res) => {
			for (const key in res.data) {
			var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
			if (key !== '名称' && key !== '时间') {
			// if (Number(tempDecimal) === 0) {
			// res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]
			// } else {
			// res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]
			// }
			var num = res.data[key].split(' ')[0]
			res.data[key] = (num - 0).toFixed(3)
			}
			}
			var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{\|}\|"/g, '')
			this.bindPopup(data).openPopup()
			}).catch((err) => {
			console.log(err)
			})
			})
			// 给标记点添加鼠标移出事件
			marker.on('mouseout', function(e) {
			this.noneData = false
			this.bindPopup().closePopup()
			})
			}
			})
			},
			// 国控站经纬度
			stateControlStation() {
			// this.$axios.get('monitorPoint/queryStateControlStation', {
			this.$request({
			url: '/govMonitorPoint/queryStateControlStation',
			method: 'get',
			params: {
			regionCode: 130900,
			sensorCode: 'a34002'
			}
			}).then(res => {
			// console.log('国控站信息')
			// console.log(res)
			var gkData = res.data
			var group = L.layerGroup().addTo(this.map)
			for (let i = 0; i < gkData.length; i++) {
			var glat = gkData[i].latitude
			var glng = gkData[i].longitude
			var gIcon = L.icon({
			iconUrl: require('@/assets/icon/gk.png'),
			// iconUrl:require('@/assets/images/tl_PM10.png'),
			iconSize: [55, 55],
			iconAnchor: [13, 21],
			className: 'my-device'
			})
			// 添加标记到地图
			L.marker([glat, glng], {
			icon: gIcon
			}).addTo(group)
			var myIcon = L.divIcon({
			html: gkData[i].data,
			className: 'my-div-icon-g',
			iconSize: 30
			})
			L.marker([glat, glng], {
			icon: myIcon
			}).addTo(group)
			}
			}).catch(err => {
			console.log(err)
			})
			},
			// 切换风场风向状态
			toggleWindState() {
			if (this.ws) {
			this.ws.close()
			}
			if (this.windState === 2) {
			this.windState = 1
			this.windStateText = '风场图'
			this.initData()
			// console.log(this.windState)
			} else if (this.windState === 1) {
			this.windState = 2
			this.windStateText = '风向标'
			this.windDir()
			// console.log(this.windState)
			}
			},
			// 请求风向标
			windDir() {
			// console.log('加载风向')
			// console.log('风向标ws请求开始')
			// const that = this
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function(layer) {
			// 卸载之前的风场图层
			if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
			layer.remove()
			}
			})
			}
			// 执行生成设备点方法
			this.deviceMaker()
			// 执行ws方法
			// this.wsStart()
			this.initWebpack()
			// console.log('这是ws需要的三个参数')
			// console.log(this.accountId, this.orgId, this.regionCode)
			// this.timer2 = setInterval(() => {
			// if (this.ws) {
			// this.ws.close()
			// console.log('ws心跳关闭')
			// }
			// // 执行ws方法
			// this.wsStart()
			// console.log('ws心跳开启')
			// }, 60000)
			},
			// 获得父组件改变regionCode子组件请求api功能
			getRegionApiRequest() {
			// console.log(this.$store.state.regionCode)
			// this.ws.close()
			// console.log('ws关闭')
			// 请求更新风场数据
			this.getParamsData()
			setTimeout(() => {
			$.getJSON('http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea', { 'monitorPointId': this.$store.state.monitorPointId }, (data) => {
			// 遍历所有图层
			// console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
			// console.log(data)
			// this.map.eachLayer(function(layer) {
			// // 卸载之前的风场图层
			// if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
			// layer.remove()
			// }
			// })
			this.map.setView([data[2], data[1]], 12)
			// console.log('跳转成功')
			})
			}, 1000)
			if (this.windState === 1) {
			// this.ws.close()
			this.initData()
			// console.log('请求风场图')
			} else if (this.windState === 2) {
			this.windDir()
			// console.log('请求风向标')
			}
			// 请求设备坐标
			// this.deviceMaker()
			// this.getParamsData()
			},
			// 子组件地图的跳转中心点方法
			jumpMap(LngLat) {
			// console.log('我是子组件方法')
			// console.log(this.jumpData)
			// console.log(LngLat)
			this.map.setView(LngLat, 18)
			},
			// 请求更新风场数据
			getParamsData() {
			clearInterval(this.timer)
			this.timer = setInterval(() => {
			this.times--
			if (this.times === 0) {
			// clearInterval(this.timer)
			if (this.windState === 1) {
			// this.ws.close()
			this.initData()
			// console.log('请求风场图')
			} else if (this.windState === 2) {
			this.windDir()
			// console.log('请求风向标')
			}
			setTimeout(() => {
			this.change(this.changeColor)
			this.times = 300
			}, 100)
			}
			}, 1000)
			},
			// 初始化地图容器
			initMap() {
			// console.log('这是index传到map的经纬度')
			// console.log(this.weidu)
			// console.log(this.jingdu)
			var map = L.map('mapContent', {
			minZoom: 2,
			maxZoom: 18,
			center: [this.weiduNew, this.jingduNew],
			zoom: 14,
			zoomControl: false, // 缩放组件
			attributionControl: false, // 去掉右下角logol
			crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
			})
			// 定义图层样式
			L.tileLayer('https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}').addTo(map)
			// L.tileLayer(
			// 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
			// ).addTo(map)
			this.map = map // data上需要挂载
			window.map = map
			},
			change(index) {
			this.changeColor = index
			var pr = ''
			switch (index) {
			case 0: pr = 'a34002'
			this.bg = require('@/assets/images/tl_PM10.png')
			break
			case 1: pr = 'a34004'
			this.bg = require('@/assets/images/tl_PM2.5.png')
			break
			case 2: pr = 'a21026'
			this.bg = require('@/assets/images/tl_SO2.png')
			break
			case 3: pr = 'a21004'
			this.bg = require('@/assets/images/tl_NO2.png')
			break
			case 4: pr = 'a21005'
			this.bg = require('@/assets/images/tl_CO.png')
			break
			case 5: pr = 'a05024'
			this.bg = require('@/assets/images/tl_O3.png')
			break
			case 6: pr = 'a99054'
			this.bg = require('@/assets/images/tl_TVOCNew.png')
			break
			}
			this.sensorKey = pr
			// 请求设备坐标
			// this.toggleWindState()
			if (this.windState === 1) {
			this.initData()
			} else if (this.windState === 2) {
			this.windDir()
			}
			},
			// 请求风场图接口
			initData() {
			// console.log('加载风场')
			// const that = this
			// 请求更新风场数据
			// console.log(this.monitorPointId)
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function(layer) {
			// 卸载之前的风场图层
			if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
			layer.remove()
			}
			})
			}
			this.deviceMaker()
			// console.log('请求风场之前')
			// $.ajaxSettings.async = false
			// for (let i = 0; i < this.monitorPointIds.length; i++) {
			this.windData()
			// }
			},
			// 风场图数据
			windData() {
			this.$request({
			url: '/monitorPoint/getWindData',
			method: 'get',
			params: {
			monitorPointIds: JSON.stringify(this.monitorPointIds[0])
			}
			}).then(res => {
			// console.log('新风场数据')
			// console.log(res)
			// if (res.data[0][0].data.length === 0) {
			// this.noneData = true
			// }
			// 生成风场实例
			var velocityLayer = L.velocityLayer({
			displayValues: false, // 是否显示当前鼠标移动位置，风场信息
			displayOptions: {// 显示信息配置
			velocityType: 'Global Wind',
			displayPosition: 'bottomleft',
			displayEmptyString: 'No wind data'
			},
			data: res.data[0], // 数据格式可参照
			// 以下为控制参数，后面为默认值
			minVelocity: 0, // 粒子最小速度（ m/s ）
			maxVelocity: 8, // 粒子最大速度（ m/s ）
			velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
			particleAge: 90, // 粒子在再生之前绘制的最大帧数
			lineWidth: 1.5, // 绘制粒子的线宽
			particleMultiplier: 1 / 300, // 粒子计数标量（粒子密度）
			frameRate: 15, // 每秒所需的帧数
			colorScale: ['#A2D839', '#7EB530', '#6E9F26', '#4E7522', '#345B1B', '#186303', '#175103', '#053F03']
			})
			velocityLayer.addTo(this.map)// 添加到图上
			// console.log('风场数据')
			// console.log(res.data[0])
			}).catch(err => {
			console.log(err)
			})
			},
			// 将页码，及每页显示的条数以参数传递提交给后台
			alertData(n1, n2) {
			// 这里使用axios，使用时请提前引入
			this.$request({
			url: '/alarmInfo/getDataByConditionWithoutPage',
			method: 'get',
			params: {
			organization_id: this.$store.state.orgId,
			// 每页显示的条数
			// size: n1,
			// 显示第几页
			// current: n2,
			startTime: this.dateValue[0],
			endTime: this.dateValue[1],
			index: this.factorValue,
			alarmType: this.alartValue
			}
			})
			.then(res => {
			// console.log('分页数据')
			// console.log(res)
			var tempData = res.data
			// console.log(tempData)
			for (let i = 0; i < tempData.alarmInfos.length; i++) {
			tempData.alarmInfos[i].alarmInfoId = i + 1
			}
			// 将数据赋值给tableData
			this.gridData = tempData.alarmInfos
			// 将数据的长度赋值给totalCount
			this.totalCount = tempData.alarmInfos.length
			})
			},
			// 分页
			// 每页显示的条数
			handleSizeChange(val) {
			// 改变每页显示的条数
			this.PageSize = val
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1
			},
			// 显示第几页
			handleCurrentChange(val) {
			// 改变默认的页数
			this.currentPage = val
			// console.log(val)
			},
			// 单元格样式
			tableCellClassName({ row, column, rowIndex, columnIndex }) {
			for (const key in row) {
			if (key === column.property) {
			const code = column.property
			if (code === 'alarm_type') {
			// console.log(row[key])
			if (row[key] === 0 \|\| row[key] === '' \|\| row[key] === null) {
			return ''
			} else if (Number(row[key].replace(/[^0-9]/ig, '')) === 100) {
			return 'yellow'
			} else if (Number(row[key].replace(/[^0-9]/ig, '')) === 150) {
			return 'orange'
			} else if (Number(row[key].replace(/[^0-9]/ig, '')) === 250) {
			return 'red'
			}
			}
			}
			}
			return ''
			},
			turnState() {
			// console.log(this.showOrHidden)
			if (this.showOrHidden === true) {
			this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
			} else {
			this.turnImg = require('@/assets/images/regionalOverview/putAway.png')
			}
			this.showOrHidden = !this.showOrHidden
			},
			closeAlarmTableVisible() {
			this.$store.state.alarmTableVisible = false
			}

			}
			}
			</script>

			<style lang="scss">
			html,
			body,
			#mapContent {
			width: 100%;
			height: 100%;
			}
			// .topSelect{
			// display: flex;
			// margin-bottom: 20px;
			// padding: 20px 15px 0 15px;
			// display: flex;
			// justify-content: space-between;
			// span:first-child{
			// flex: 1;
			// }
			// }
			.noneData {
			position: absolute;
			color: #000;
			background: #fff;
			z-index: 999;
			left: 50%;
			top: 50%;
			transform: translate(-50%);
			padding: 20px 50px;
			/* opacity: 0.5; */
			font-size: 28px;
			/* border-radius: 10px; */
			border: 2px solid #ff7f50;
			}
			.top {
			position: absolute;
			top: 0;
			width: 100%;
			padding: 5px 10px;
			z-index: 999;
			/* background: #ccc; */
			background: rgba(204, 204, 204, 0.5);
			box-shadow: 1px 1px 5px #666;
			}
			.top > .left {
			padding: 5px 10px;
			border: 1px solid #aaa;
			border-right: none;
			background: #fff;
			/* border-radius: 3px; */
			cursor: pointer;
			font-size: 16px;
			float: left;
			margin-top: 4px;
			-webkit-transform-origin-x: 0;
			/* -webkit-transform: scale(0.90); */
			}
			.top > .left:nth-child(1) {
			border-radius: 5px 0 0 5px;
			}
			.top > .left:nth-last-child(2) {
			border-radius: 0 5px 5px 0;
			border-right: 1px solid #aaa;
			}
			.top > .left:hover {
			background: #666;
			color: #fff;
			}
			.click {
			color: #fff;
			background-color: #666 !important;
			}
			.top > .right {
			position: fixed;
			right: 410px;
			top: 55px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: green;
			color: #fff;
			float: right;
			line-height: 40px;
			text-align: center;
			border: 1px solid #333;
			opacity: 0.7;
			}

			.top > .dropDown {
			width: 400px;
			height: 51px;
			line-height: 51px;
			text-align: center;
			color: #fff;
			font-size: 18px;
			position: fixed;
			right: 0;
			top: 50px;
			background-color: rgba(15, 69, 103, 0.8);
			}
			.dropDown > .drop-icon {
			vertical-align: middle;
			width: 24px;
			position: relative;
			left: 14px;
			top: -2px;
			}
			.realTime_top {
			width: 120px;
			float: left;
			margin-top: 9px;
			margin-left: 10px;
			}

			.text_Time {
			float: left;
			margin-left: 37px;
			}
			.my-div-icon {
			font-size: 14px;
			text-align: center;
			padding-left: 20px;
			padding-top: 6px;
			font-family: '微软雅黑';
			z-index: 10003;
			/* -webkit-transform-origin-x: 0; */
			/* -webkit-transform: scale(0.90); */
			}
			.my-div-icon-g {
			font-size: 14px;
			text-align: center;
			padding-left: 20px;
			padding-top: 11px;
			font-family: '微软雅黑';
			z-index: 10003;
			/* -webkit-transform-origin-x: 0; */
			/* -webkit-transform: scale(0.90); */
			}
			.iconWind {
			z-index: 10002;
			}
			.my-device {
			z-index: 999;
			}
			.windDir-icon {
			z-index: 10001;
			margin-top: 20px;
			/* padding-left: 10px; */
			/* padding-top: 30px; */
			}
			.leaflet-popup-content {
			width: 235px !important;
			font-size: 12px;
			-webkit-transform-origin-x: 0;
			z-index: 1000;
			/* -webkit-transform: scale(0.90); */
			/* font-family: ui-serif; */
			}
			.buttom-left {
			/* background-image: url("@/assets/images/tl_PM10.png"); */
			position: absolute;
			bottom: 10px;
			left: 10px;
			width: 435px;
			height: 50px;
			z-index: 999;
			border-radius: 3px;
			}
			.middle {
			padding: 5px 10px;
			border: 1px solid #aaa;
			background: #fff;
			border-radius: 3px;
			cursor: pointer;
			font-size: 16px;
			float: left;
			margin-top: 4px;
			-webkit-transform-origin-x: 0;
			margin-left: 20px;
			}
			.el-dialog__body{
			padding: 10px 20px;
			}
			.el-dialog__footer{
			padding: 0px 20px 15px;
			}
			.yellow{
			background-color: #ffff00!important;
			color: #868600!important;
			}
			.orange{
			background-color: #ff7e00!important;
			color: #844100!important;
			}
			.red{
			background-color: #ff0000!important;
			color: #790000!important;
			}
			</style>
			<template>
			<div
			id="mapContent"
			v-loading="loading"
			element-loading-text="请稍等"
			element-loading-background="rgba(0, 0, 0, 0.6)"
			>
			<div
			v-if="noneData"
			class="noneData"
			>
			当前区域设备没有风场
			</div>
			<div class="top">
			<span
			v-for="(item, index) in params"
			:key="index"
			class="left"
			:class="{ click: changeColor === index }"
			@click="change(index)"
			>{{ item }}</span>
			<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
			<span class="right">{{ times }}秒</span>
			<span class="dropDown">
			<img
			class="realTime_top"
			:src="require('@/assets/images/regionalOverview/realTimeImg.png')"
			alt=""
			@click="turnState"
			>
			<span class="text_Time">{{ dateFormat }}</span>
			<img
			class="drop-icon"
			:src="turnImg"
			alt=""
			@click="turnState"
			>
			</span>
			</div>
			<div
			class="topDate"
			style="height: 60px"
			>
			<div
			id="eventPro"
			class="jdt"
			>
			<div class="mouseDiv">
			<span class="inText" />
			<div class="sjDiv" />
			</div>
			<div class="mouseDiv2">
			<span class="inText2" />
			<div class="sjDiv2" />
			</div>
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			<li />
			</div>
			<div
			class="timeDiv"
			style="position: relative"
			>
			<ul id="timeUl">
			<li style="width: 0.83%" />
			<li />
			<li />
			<li>03</li>
			<li />
			<li />
			<li>06</li>
			<li />
			<li />
			<li>09</li>
			<li />
			<li />
			<li>12</li>
			<li />
			<li />
			<li>15</li>
			<li />
			<li />
			<li>18</li>
			<li />
			<li />
			<li>21</li>
			<li />
			<li />
			<li />
			<!-- -->
			<li />
			<li />
			<li>03</li>
			<li />
			<li />
			<li>06</li>
			<li />
			<li />
			<li>09</li>
			<li />
			<li />
			<li>12</li>
			<li />
			<li />
			<li>15</li>
			<li />
			<li />
			<li>18</li>
			<li />
			<li />
			<li>21</li>
			<li />
			<li />
			<li />
			<!-- -->
			<li />
			<li />
			<li>03</li>
			<li />
			<li />
			<li>06</li>
			<li />
			<li />
			<li>09</li>
			<li />
			<li />
			<li>12</li>
			<li />
			<li />
			<li>15</li>
			<li />
			<li />
			<li>18</li>
			<li />
			<li />
			<li>21</li>
			<li />
			<li />
			<li>00</li>
			</ul>
			<div
			style="
			display: flex;
			width: 100%;
			border-top: 1px solid rgba(255, 255, 255, 0.5);
			"
			class="dayDiv"
			>
			<p class="p1" />
			<p style="position: relative">
			<span
			class="borderLine"
			style="
			position: absolute;
			left: 0;
			border-left: 1px solid rgba(255, 255, 255, 1);
			height: 47px;
			bottom: 0;
			"
			/>
			<span class="p2" />
			<span
			class="borderLine"
			style="
			position: absolute;
			right: 0;
			border-right: 1px solid rgba(255, 255, 255, 1);
			height: 47px;
			bottom: 0;
			"
			/>
			</p>
			<p class="p3" />
			</div>
			</div>
			</div>
			<regional-overview
			:key="timerKey"
			:map="map"
			:show-flag="showOrHidden"
			/>
			<div
			:style="{ background: 'url(' + bg + ') no-repeat' }"
			class="buttom-left"
			/>
			<el-dialog
			title="污染报警查询"
			:visible.sync="alarmTableVisible"
			width="80%"
			@mouseover.native="mouseOver"
			@mouseleave.native="mouseLeave"
			>
			<div class="topSelect">
			<div>
			<el-date-picker
			v-model="dateValue"
			style="width: 400px"
			type="daterange"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			value-format="yyyy-MM-dd"
			/>
			<el-select
			v-model="factorValue"
			placeholder="选择因子"
			>
			<el-option
			v-for="item in factorOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
			</el-select>
			<el-select
			v-model="alartValue"
			placeholder="选择报警类型"
			>
			<el-option
			v-for="item in alertOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			/>
			</el-select>
			<el-button
			type="primary"
			@click="alertData(PageSize, currentPage)"
			>
			查询
			</el-button>
			</div>
			</div>
			<el-table
			:data="
			gridData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
			"
			border
			stripe
			:cell-class-name="tableCellClassName"
			height="400"
			>
			<el-table-column
			property="alarmInfoId"
			label="序号"
			width="50"
			align="center"
			/>
			<el-table-column
			property="alarm_time"
			label="报警时间"
			width="150"
			/>
			<el-table-column
			property="deviceName"
			label="站点名称"
			width="200"
			/>
			<el-table-column
			property="index"
			label="因子"
			width="80"
			align="center"
			/>
			<el-table-column
			property="alarm_type"
			label="报警类型"
			width="200"
			align="center"
			/>
			<el-table-column
			property="alarm_information"
			label="报警信息"
			align="center"
			/>
			</el-table>
			<el-pagination
			:current-page="currentPage"
			:page-sizes="pageSizes"
			:page-size="PageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="totalCount"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			/>
			<div
			slot="footer"
			class="dialog-footer"
			>
			<el-button
			size="mini"
			@click="alarmTableVisible = false"
			>
			关闭
			</el-button>
			</div>
			</el-dialog>
			</div>
			</template>

			<script>
			import 'leaflet/dist/leaflet.css'
			import 'leaflet-velocity/dist/leaflet-velocity.css'
			import L from 'leaflet'
			import _ from 'lodash'
			import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
			import 'leaflet-velocity/dist/leaflet-velocity'
			import $ from 'jquery'
			import { WWindUtil } from '@/components/Wind/WRatingArr.js'
			import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件
			import { mapGetters } from 'vuex'
			// import { gcj02towgs84 } from '@/assets/json/transform'
			export default {
			components: { RegionalOverview },
			props: {
			jumpData: Array,
			weidu: Number,
			jingdu: Number,
			monitorPointId: Number,
			monitorPointIds: Array,
			defaultData: Array
			},
			data () {
			return {
			compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
			compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
			timerKey: '', // 用于重新渲染子组件
			map: null,
			code: [],
			latlng: [],
			noneData: false,
			params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
			changeColor: 0,
			times: 1,
			sensorKey: 'a34002',
			keys: [],
			bg: require('@/assets/images/tl_PM10.png'),
			windState: 1,
			windStateText: '风场图',
			keyData: [],
			lats: [],
			lngs: [],
			accountId: this.$store.state.accountId,
			orgId: this.$store.state.orgId,
			coordinates: [],
			markerObject: [],
			loading: true,
			ws: null,
			lockReconnect: false, // 是否真正建立连接
			timeout: 58 * 1000, // 30秒一次心跳
			timeoutObj: null, // 心跳心跳倒计时
			serverTimeoutObj: null, // 心跳倒计时
			timeoutnum: null, // 断开重连倒计时,
			jingduNew: this.jingdu,
			weiduNew: this.weidu,
			alartValue: 'all',
			dateValue: '',
			factorValue: 'all',
			// 总数据
			gridData: [],
			// 默认显示第几页
			currentPage: 1,
			// 总条数，根据接口获取数据长度(注意：这里不能为空)
			totalCount: 0,
			// 个数选择器（可修改）
			pageSizes: [10, 50, 100, 200],
			// 默认每页显示的条数（可修改）
			PageSize: 20,
			factorOptions: [
			{
			label: '全部因子',
			value: 'all'
			},
			{
			label: 'PM10',
			value: 'PM10'
			},
			{
			label: 'PM2.5',
			value: 'PM2.5'
			},
			{
			label: 'SO2',
			value: 'SO2'
			},
			{
			label: 'NO2',
			value: 'NO2'
			},
			{
			label: 'CO',
			value: 'CO'
			},
			{
			label: 'O3',
			value: 'O3'
			}
			],
			alertOptions: [
			{
			label: '全部报警类型',
			value: 'all'
			},
			{
			label: '超限',
			value: 'overrun'
			},
			{
			label: '突然高',
			value: 'sudden'
			},
			{
			label: '超过国控站点100%',
			value: 'state100'
			},
			{
			label: '超过国控站点150%',
			value: 'state150'
			},
			{
			label: '超过国控站点250%',
			value: 'state250'
			},
			{
			label: '超过市区均值100%',
			value: 'city100'
			},
			{
			label: '超过市区均值150%',
			value: 'city150'
			},
			{
			label: '超过市区均值250%',
			value: 'city250'
			}
			],
			currentDate: '',
			turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
			showOrHidden: true,
			dateFormat: '',
			alarmTableVisible: false,
			chooseTimeInfo: false, // 是否选择了时间点
			chooseTime: false,
			dateInfo: '', // 选择的日期
			timeInfo: '', // 选择的时间
			nyr: '', // 选择的年月日
			windJsonData: [],
			clickmac: '',
			childerItem: {},
			farterItem: {},
			indexsLaber: 0
			}
			},
			computed: {
			...mapGetters(['regionCode'])
			},
			watch: {
			dateValue (n, o) {
			// this.newDate()
			},
			regionCode (newCode, oldCode) {
			this.timerKey = newCode // 用于监听code变化重新渲染子组件
			},
			windJsonData (newCode, oldCode) {
			this.$nextTick(() => {
			this.canvasWind(newCode)
			})
			}
			},
			mounted () {
			this.currentHour()
			this.$Bus.$on(
			'alarmTableVisible',
			res => (
			// eslint-disable-next-line no-sequences
			(this.alarmTableVisible = res),
			this.alertData(this.PageSize, this.currentPage)
			)
			)
			// 初始化地图容器
			this.initMap()

			// 事件代理
			this.eventProxy()
			window.deviceDetail = this.deviceDetail
			},
			created () {
			if (this.$store.state.orgId === 72) {
			this.changeColor = 1
			}
			const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
			this.jingduNew = newLL[1]
			this.weiduNew = newLL[0]
			this.getParamsData(false)
			// this.windDir()
			this.newDate()
			// this.alertData(this.PageSize, this.currentPage)
			},
			beforeDestroy () {
			if (this.timer) {
			clearInterval(this.timer)
			}
			if (this.timer2) {
			clearInterval(this.timer2)
			}
			// 离开页面时关闭websocket
			if (this.ws) {
			this.ws.close()
			}
			},
			methods: {
			// 拿到某天的日期和星期
			getDayXQ (day) {
			var days = new Date().getDay() // 星期
			var rq = '' // 日期
			if (day === 'today') {
			rq = this.newData(0)
			} else if (day === 'yesterday') {
			days = (days + 7 - 1) % 7
			rq = this.newData(-1) // 昨天日期
			} else if (day === 'beforeYea') {
			days = (days + 7 - 2) % 7
			rq = this.newData(-2) // 前天日期
			}
			switch (days) {
			case 1:
			days = '周一'
			break
			case 2:
			days = '周二'
			break
			case 3:
			days = '周三'
			break
			case 4:
			days = '周四'
			break
			case 5:
			days = '周五'
			break
			case 6:
			days = '周六'
			break
			case 0:
			days = '周日'
			break
			}
			return `${rq}(${days})`
			},
			// 计算当天之前或者之后的日期
			newData (day, info) {
			var today = new Date()
			var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
			today.setTime(targetday_milliseconds)
			var tYear = today.getFullYear()
			var tMonth = today.getMonth() + 1
			tMonth = tMonth < 10 ? '0' + tMonth : tMonth
			var tDate = today.getDate()
			tDate = tDate < 10 ? '0' + tDate : tDate
			if (info === 'nyr') {
			return tYear + '-' + tMonth + '-' + tDate
			} else {
			return tMonth + '/' + tDate
			}
			},
			// 事件代理
			eventProxy () {
			// 拿到今天的日期和星期
			var ul = document.querySelector('#eventPro')
			var lis = document.querySelectorAll('#eventPro>li')
			var timeUl = document.querySelector('#timeUl')
			var timeLis = document.querySelectorAll('#timeUl>li')
			var mouseDiv = document.querySelector('.mouseDiv')
			var mouseDiv2 = document.querySelector('.mouseDiv2')
			var inText = document.querySelector('.inText')
			var inText2 = document.querySelector('.inText2')
			var p1 = document.querySelector('.p1')
			var p2 = document.querySelector('.p2')
			var p3 = document.querySelector('.p3')
			p3.innerHTML = this.getDayXQ('today')
			p2.innerHTML = this.getDayXQ('yesterday')
			p1.innerHTML = this.getDayXQ('beforeYea')
			var greenInfo = 0
			var that = this
			ul.onclick = e => {
			var target = e.target
			if (target.tagName.toLowerCase() === 'li') {
			// 给所有的li颜色设为初始值
			for (let i = 0; i < lis.length; i++) {
			lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
			}
			// var li = this.querySelectorAll('li')
			// var index = Array.prototype.indexOf.call(li, target)
			for (let i = 0; i < lis.length; i++) {
			lis[i].style.backgroundColor = 'green'
			if (lis[i] === target) {
			// mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
			mouseDiv2.style.left = 1.36986 * (i + 1) + '%'
			mouseDiv2.style.transform = 'translateX(-50%)'
			mouseDiv2.style.display = 'block'
			var times = (i - 0 + 1) % 24
			times = times > 9 ? times : '0' + times
			inText2.innerHTML = times + ':00'
			this.chooseTimeInfo = true // 选择时间点
			this.chooseTime = true // 选择时间点
			if ((i + 1) / 24 < 1) {
			this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
			} else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
			this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
			} else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
			this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
			} else {
			this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
			}
			break
			}
			}
			}
			that.times = 1
			that.getParamsData(true)
			}
			// timeUl绑定点击事件
			timeUl.onclick = e => {
			// 给所有的li颜色设为初始值
			var target = e.target
			if (target.tagName.toLowerCase() === 'li') {
			for (let i = 0; i < timeLis.length; i++) {
			if (timeLis[i] === target) {
			greenInfo = i
			// mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
			mouseDiv2.style.left = 1.36986 * i + '%'
			mouseDiv2.style.transform = 'translateX(-50%)'
			mouseDiv2.style.display = 'block'
			var times = i % 24
			times = times > 9 ? times : '0' + times
			inText2.innerHTML = times + ':00'
			this.chooseTimeInfo = true // 选择时间点
			this.chooseTime = true // 选择时间点
			if (i / 24 < 1) {
			this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
			} else if (i / 24 < 2 && i / 24 >= 1) {
			this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
			} else if (i / 24 < 3 && i / 24 >= 2) {
			this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
			} else {
			this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
			}
			break
			}
			}
			for (let i = 0; i < lis.length; i++) {
			if (i < greenInfo) {
			lis[i].style.backgroundColor = 'green'
			} else {
			lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
			}
			}
			}
			that.times = 1
			that.getParamsData(true)
			}
			// 鼠标移入移出事件
			for (let i = 0; i < lis.length; i++) {
			lis[i].onmouseenter = function () {
			mouseDiv.style.transform = 'translateX(-50%)'
			mouseDiv.style.left = 1.36986 * (i + 1) + '%'
			mouseDiv.style.display = 'block'
			var times = (i - 0 + 1) % 24
			times = times > 9 ? times : '0' + times
			inText.innerHTML = times + ':00'
			}
			lis[i].onmouseleave = function () {
			mouseDiv.style.display = 'none'
			}
			}
			for (let i = 0; i < timeLis.length; i++) {
			timeLis[i].onmouseenter = function () {
			mouseDiv.style.left = 1.36986 * i + '%'
			mouseDiv.style.transform = 'translateX(-50%)'
			mouseDiv.style.display = 'block'
			var times = i % 24
			times = times > 9 ? times : '0' + times
			inText.innerHTML = times + ':00'
			}
			timeLis[i].onmouseleave = function () {
			mouseDiv.style.display = 'none'
			}
			}
			},
			// 当前小时默认值
			currentHour () {
			// const aData = new Date()
			// const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
			// const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
			// const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
			// const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
			// this.dateFormat = currentDate.toString()
			const aData = new Date()
			const month =
			aData.getMonth() < 9
			? '0' + (aData.getMonth() + 1)
			: aData.getMonth() + 1
			const date =
			aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
			const hour = aData.getHours()
			const currentDate =
			aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
			this.dateFormat = currentDate.toString()
			},
			// 日期格式化
			newDate () {
			var aData = new Date()
			var month =
			aData.getMonth() < 9
			? '0' + (aData.getMonth() + 1)
			: aData.getMonth() + 1
			var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
			this.currentDate = aData.getFullYear() + '-' + month + '-' + date
			this.dateValue = [this.currentDate, this.currentDate]
			},
			// 报警弹窗移入
			mouseOver () {
			this.map.scrollWheelZoom.disable()
			},
			// 报警弹窗移出
			mouseLeave () {
			this.map.scrollWheelZoom.enable()
			},
			// 百度经纬度转高德经纬度
			bd09togcj02 (bd_lon, bd_lat) {
			var x_pi = (3.14159265358979324 * 3000.0) / 180.0
			var x = bd_lon - 0.0065
			var y = bd_lat - 0.006
			var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
			var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
			var gg_lng = z * Math.cos(theta)
			var gg_lat = z * Math.sin(theta)
			return [gg_lat, gg_lng]
			},
			// 请求设备坐标,当前的
			deviceMaker () {
			if (this.map) {
			this.map.eachLayer(function (layer) {
			// 卸载之前的风场图层
			if (
			!layer._container &&
			('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
			'leaflet-layer'
			) {
			layer.remove()
			}
			})
			}
			this.$request({
			url: '/historyFiveMinutely/queryDeviceAndData',
			method: 'get',
			params: {
			sensorCode: this.sensorKey,
			organizationId: this.$store.state.orgId,
			regionCode: this.$store.state.regionCode,
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			}).then(data => {
			this.markDeviceSite(data)
			})
			},
			// 标记设备点
			markDeviceSite (data) {
			var keyData = data.data.devices
			this.keyData = data.data.devices
			// 遍历国控站位置
			// this.stateControlStation()
			var groupIcon = L.layerGroup().addTo(this.map)
			var groupText = L.layerGroup().addTo(this.map)
			this.keys = []
			for (let i = 0; i < keyData.length; i++) {
			if (keyData[i].a34002) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
			} else if (keyData[i].a34004) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
			} else if (keyData[i].a21026) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
			} else if (keyData[i].a21004) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
			} else if (keyData[i].a21005) {
			this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
			} else if (keyData[i].a05024) {
			this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
			} else if (keyData[i].a99054) {
			this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
			} else {
			// for (let j = 0; j < keyData.length; j++) {
			this.keys.push(JSON.parse('null'))
			// }
			}
			var lat = keyData[i].latitude
			this.lats[i] = keyData[i].latitude
			var lng = keyData[i].longitude
			this.lngs[i] = keyData[i].longitude
			// 对比各个key中的标准数据，标记展示不同的颜色
			var colorNum = 7
			if (keyData[i].a34002) {
			let data = Math.floor(JSON.parse(keyData[i].a34002))
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 50: {
			colorNum = 1
			break
			}
			case data <= 150: {
			colorNum = 2
			break
			}
			case data <= 250: {
			colorNum = 3
			break
			}
			case data <= 350: {
			colorNum = 4
			break
			}
			case data <= 420: {
			colorNum = 5
			break
			}
			case data > 420: {
			colorNum = 6
			break
			}
			default:
			break
			}
			} else if (keyData[i].a34004) {
			let data = Math.floor(JSON.parse(keyData[i].a34004))
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 35: {
			colorNum = 1
			break
			}
			case data <= 75: {
			colorNum = 2
			break
			}
			case data <= 115: {
			colorNum = 3
			break
			}
			case data <= 150: {
			colorNum = 4
			break
			}
			case data <= 250: {
			colorNum = 5
			break
			}
			case data > 250: {
			colorNum = 6
			break
			}
			default:
			break
			}
			} else if (keyData[i].a21026) {
			let data = Math.floor(JSON.parse(keyData[i].a21026))
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 50: {
			colorNum = 1
			break
			}
			case data <= 150: {
			colorNum = 2
			break
			}
			case data <= 475: {
			colorNum = 3
			break
			}
			case data <= 800: {
			colorNum = 4
			break
			}
			case data <= 1600: {
			colorNum = 5
			break
			}
			case data > 1600: {
			colorNum = 6
			break
			}
			default:
			break
			}
			} else if (keyData[i].a21004) {
			let data = Math.floor(
			Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
			)
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 40: {
			colorNum = 1
			break
			}
			case data <= 80: {
			colorNum = 2
			break
			}
			case data <= 180: {
			colorNum = 3
			break
			}
			case data <= 280: {
			colorNum = 4
			break
			}
			case data <= 565: {
			colorNum = 5
			break
			}
			case data > 565: {
			colorNum = 6
			break
			}
			default:
			break
			}
			} else if (keyData[i].a21005) {
			let data = JSON.parse(keyData[i].a21005).toFixed(3)
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 2: {
			colorNum = 1
			break
			}
			case data <= 4: {
			colorNum = 2
			break
			}
			case data <= 14: {
			colorNum = 3
			break
			}
			case data <= 24: {
			colorNum = 4
			break
			}
			case data <= 36: {
			colorNum = 5
			break
			}
			case data > 36: {
			colorNum = 6
			break
			}
			default:
			break
			}
			} else if (keyData[i].a05024) {
			let data = Math.floor(JSON.parse(keyData[i].a05024))
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 160: {
			colorNum = 1
			break
			}
			case data <= 200: {
			colorNum = 2
			break
			}
			case data <= 300: {
			colorNum = 3
			break
			}
			case data <= 400: {
			colorNum = 4
			break
			}
			case data <= 800: {
			colorNum = 5
			break
			}
			case data > 800: {
			colorNum = 6
			break
			}
			default:
			break
			}
			} else if (keyData[i].a99054) {
			let data = JSON.parse(keyData[i].a99054).toFixed(3)
			switch (true) {
			case data < 0: {
			colorNum = 7
			break
			}
			case data === 0: {
			colorNum = 0
			break
			}
			case data <= 0.5: {
			colorNum = 1
			break
			}
			case data <= 1: {
			colorNum = 2
			break
			}
			case data <= 1.5: {
			colorNum = 3
			break
			}
			case data <= 2: {
			colorNum = 4
			break
			}
			case data <= 3: {
			colorNum = 5
			break
			}
			case data > 3: {
			colorNum = 6
			break
			}
			// default:
			// break
			}
			}

			var blueIcon = L.icon({
			iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
			// iconUrl: require('@/assets/icon/ico2.png'),
			iconSize: [60, 60],
			iconAnchor: [30, 48],
			className: 'my-device'
			})

			// 添加标记到地图
			const iconMarker = L.marker([lat, lng], {
			icon: blueIcon
			})
			groupIcon.addLayer(iconMarker)
			var myIcon = L.divIcon({
			html: this.keys[i],
			className: 'my-div-icon',
			iconSize: [60, 60],
			iconAnchor: [40, 40]
			})

			const TexteMarker = L.marker([lat, lng], { icon: myIcon })
			TexteMarker.inforData = keyData[i]
			groupText.addLayer(TexteMarker)
			const _this = this
			// 给标记添加鼠标移入事件，mouseover事件会冒泡
			TexteMarker.on('click', function (e) {
			const MarkerTarget = e.target
			// _this.getMarkerInfor(keyData[i], MarkerTarget)
			this.noneData = false
			// const _this = e.target.vuecontext
			_this.handleClick(keyData[i], MarkerTarget)
			})
			// 给标记点添加鼠标移出事件
			// TexteMarker.on('mouseout', function(e) {
			// this.noneData = false
			// this.bindPopup().closePopup()
			// })
			}
			},
			styleBgColor (keyName) {
			let bgColorList = {
			pm25colorbg: '',
			pm10colorbg: '',
			so2colorbg: '', // 二氧化硫
			no210colorbg: '', // 二氧化氮
			cocolorbg: '', // 一氧化碳
			o3colorbg: '', // 臭氧
			tvoccolorbg: '' // TVOC
			}

			let data = ''
			// eslint-disable-next-line no-unused-vars
			for (let i in keyName) {
			if (i === 'a34002') {
			data = Math.floor(JSON.parse(keyName.a34002) \|\| 0)
			switch (true) {
			case data < 0: {
			bgColorList.pm10colorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.pm10colorbg = '#688fb1'
			break
			}
			case data <= 50: {
			bgColorList.pm10colorbg = '#00ff01'
			break
			}
			case data <= 150: {
			bgColorList.pm10colorbg = '#fdfe00'
			break
			}
			case data <= 250: {
			bgColorList.pm10colorbg = '#fd8102'
			break
			}
			case data <= 350: {
			bgColorList.pm10colorbg = '#fc0101'
			break
			}
			case data <= 420: {
			bgColorList.pm10colorbg = '#c00261'
			break
			}
			case data > 420: {
			bgColorList.pm10colorbg = '#9f012f'
			break
			}
			default:
			break
			}
			} else if (i === 'a34004') {
			data = Math.floor(JSON.parse(keyName.a34004) \|\| 0)
			switch (true) {
			case data < 0: {
			bgColorList.pm25colorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.pm25colorbg = '#688fb1'
			break
			}
			case data <= 35: {
			bgColorList.pm25colorbg = '#00ff01'
			break
			}
			case data <= 75: {
			bgColorList.pm25colorbg = '#fdfe00'
			break
			}
			case data <= 115: {
			bgColorList.pm25colorbg = '#fd8102'
			break
			}
			case data <= 150: {
			bgColorList.pm25colorbg = '#fc0101'
			break
			}
			case data <= 250: {
			bgColorList.pm25colorbg = '#c00261'
			break
			}
			case data > 250: {
			bgColorList.pm25colorbg = '#9f012f'
			break
			}
			default:
			break
			}
			} else if (i === 'a21026') {
			data = Math.floor(JSON.parse(keyName.a21026) \|\| 0)
			switch (true) {
			case data < 0: {
			bgColorList.so2colorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.so2colorbg = '#688fb1'
			break
			}
			case data <= 50: {
			bgColorList.so2colorbg = '#00ff01'
			break
			}
			case data <= 150: {
			bgColorList.so2colorbg = '#fdfe00'
			break
			}
			case data <= 475: {
			bgColorList.so2colorbg = '#fd8102'
			break
			}
			case data <= 800: {
			bgColorList.so2colorbg = '#fc0101'
			break
			}
			case data <= 1600: {
			bgColorList.so2colorbg = '#c00261'
			break
			}
			case data > 1600: {
			bgColorList.so2colorbg = '#9f012f'
			break
			}
			default:
			break
			}
			} else if (i === 'a21004') {
			data = Math.floor(
			Math.floor(JSON.parse(keyName.a21004 \|\| 0).toFixed(0))
			)
			switch (true) {
			case data < 0: {
			bgColorList.no210colorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.no210colorbg = '#688fb1'
			break
			}
			case data <= 40: {
			bgColorList.no210colorbg = '#00ff01'
			break
			}
			case data <= 80: {
			bgColorList.no210colorbg = '#fdfe00'
			break
			}
			case data <= 180: {
			bgColorList.no210colorbg = '#fd8102'
			break
			}
			case data <= 280: {
			bgColorList.no210colorbg = '#fc0101'
			break
			}
			case data <= 565: {
			bgColorList.no210colorbg = '#c00261'
			break
			}
			case data > 565: {
			bgColorList.no210colorbg = '#9f012f'
			break
			}
			default:
			break
			}
			} else if (i === 'a21005') {
			data = JSON.parse(keyName.a21005 \|\| 0).toFixed(3)
			switch (true) {
			case data < 0: {
			bgColorList.cocolorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.cocolorbg = '#688fb1'
			break
			}
			case data <= 2: {
			bgColorList.cocolorbg = '#00ff01'
			break
			}
			case data <= 4: {
			bgColorList.cocolorbg = '#fdfe00'
			break
			}
			case data <= 14: {
			bgColorList.cocolorbg = '#fd8102'
			break
			}
			case data <= 24: {
			bgColorList.cocolorbg = '#fc0101'
			break
			}
			case data <= 36: {
			bgColorList.cocolorbg = '#c00261'
			break
			}
			case data > 36: {
			bgColorList.cocolorbg = '#9f012f'
			break
			}
			default:
			break
			}
			} else if (i === 'a05024') {
			data = Math.floor(JSON.parse(keyName.a05024) \|\| 0)
			switch (true) {
			case data < 0: {
			bgColorList.o3colorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.o3colorbg = '#688fb1'
			break
			}
			case data <= 160: {
			bgColorList.o3colorbg = '#00ff01'
			break
			}
			case data <= 200: {
			bgColorList.o3colorbg = '#fdfe00'
			break
			}
			case data <= 300: {
			bgColorList.o3colorbg = '#fd8102'
			break
			}
			case data <= 400: {
			bgColorList.o3colorbg = '#fc0101'
			break
			}
			case data <= 800: {
			bgColorList.o3colorbg = '#c00261'
			break
			}
			case data > 800: {
			bgColorList.o3colorbg = '#9f012f'
			break
			}
			default:
			break
			}
			} else if (i === 'a99054') {
			data = JSON.parse(keyName.a99054 \|\| 0).toFixed(3)
			switch (true) {
			case data < 0: {
			bgColorList.tvoccolorbg = '#999999'
			break
			}
			case data === 0: {
			bgColorList.tvoccolorbg = '#688fb1'
			break
			}
			case data <= 0.5: {
			bgColorList.tvoccolorbg = '#00ff01'
			break
			}
			case data <= 1: {
			bgColorList.tvoccolorbg = '#fdfe00'
			break
			}
			case data <= 1.5: {
			bgColorList.tvoccolorbg = '#fd8102'
			break
			}
			case data <= 2: {
			bgColorList.tvoccolorbg = '#fc0101'
			break
			}
			case data <= 3: {
			bgColorList.tvoccolorbg = '#c00261'
			break
			}
			case data > 3: {
			bgColorList.tvoccolorbg = '#9f012f'
			break
			}
			// default:
			// break
			}
			}
			}
			return bgColorList
			},
			deviceDetail () {
			console.log('this.farterItem', this.clickmac)
			console.log('this.childerItem', this.childerItem)
			this.monitorPointInfo = this.farterItem

			this.$router.push({
			name: 'deviceDetail',
			params: {
			monitorPointInfo: this.farterItem,
			device: this.childerItem,
			macName: this.clickmac,
			indexs: this.indexsLaber,
			items: [this.childerItem.latitude, this.childerItem.longitude]
			},
			query: {
			monitorPointInfo: JSON.stringify(this.farterItem),
			device: JSON.stringify(this.childerItem),
			macName: this.clickmac,
			indexs: this.indexsLaber,
			items: [this.childerItem.latitude, this.childerItem.longitude]
			}
			})
			},
			handleClick (data, marker) {
			this.clickmac = ''
			this.childerItem = {}
			this.farterItem = {}
			this.indexsLaber = 0
			this.clickmac = marker.inforData.mac
			this.childerItem = marker.inforData
			console.log('this.defaultData', this.defaultData)
			this.defaultData.forEach(item => {
			if (item.devices) {
			item.devices.forEach((dev, index) => {
			if (dev.mac === marker.inforData.mac) {
			this.farterItem = item
			this.indexsLaber = index
			}
			})
			}
			})
			this.$request({
			url: '/historyFiveMinutely/queryFiveDataByMac',
			method: 'get',
			params: {
			mac: data.mac,
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			})
			.then(res => {
			if (res.message === '操作目标不存在') {
			var datafalse = '暂无五分钟数据'
			marker.bindPopup(datafalse).openPopup()
			return
			}
			this.childerItem.name = res.data.name
			let colorliststyleBgColor = this.styleBgColor(res.data)
			console.log('colorliststyleBgColor', colorliststyleBgColor)
			let deviceDetails = _.cloneDeep(res.data)
			// eslint-disable-next-line no-unused-vars
			for (let key in deviceDetails) {
			if (deviceDetails[key] === null) {
			deviceDetails[key] = '-'
			}
			}
			console.log('deviceDetails', deviceDetails)
			let windTip = 'inline'
			let windDeg = 0
			let windDir = ''
			let dushu =
			deviceDetails.a01008 === '-'
			? '-'
			: JSON.parse(deviceDetails.a01008).toFixed(0)
			let levelNumber =
			deviceDetails.a01007 === '-'
			? '0.0'
			: Number(deviceDetails.a01007).toFixed(1)
			let level =
			deviceDetails.a01007 === '0.0'
			? '-'
			: WWindUtil.WindtoLevel(levelNumber).name
			console.log('level', level)
			if (deviceDetails.a01008) {
			var windDirs = dushu === '-' ? 0 : Number(dushu)
			WWindUtil.windValueFormat(windDirs)
			console.log('windDirs', WWindUtil.windValueFormat(windDirs))
			windDeg = windDirs
			windTip = 'inline'
			if (windDirs === 0 \|\| windDirs === '-') {
			windDir = '-'
			windTip = 'none'
			} else {
			windDir = WWindUtil.windValueFormat(windDirs)
			windTip = 'inline'
			}
			}
			// 请求数据更新弹框内容
			let htmlClassName = 'mypopup'
			let html = ` <div data-reactroot="" class="marker_maptip">
			<div class="marker_title_1nQ">
			<span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>
			</div>
			<div class="marker_firstline_2WH">
			<div class="marker_citypart_keg">
			<div class="marker_name_small_1VU">${deviceDetails.name}</div>
			<div class="marker_time_w5m">${deviceDetails.dataTime}</div>
			</div>
			<div class="marker_indexpart_2UI">
			<div
			class="marker_indexname_3TP"
			style="color: black;background:${
			colorliststyleBgColor.tvoccolorbg
			}"
			>
			TVOC
			</div>
			<div class="marker_indexvalue_1O7">
			${this.handleCutZero(deviceDetails.a99054)}
			</div>
			</div>
			</div>
			<div class="marker_secondline_2Om">
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${
			colorliststyleBgColor.pm25colorbg
			} "
			>
			PM2.5
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a34004)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${
			colorliststyleBgColor.pm10colorbg
			}"
			>
			PM10
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a34002)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${
			colorliststyleBgColor.so2colorbg
			}"
			>
			SO2
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a21026)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${
			colorliststyleBgColor.no210colorbg
			}"
			>
			NO2
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a21004)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${colorliststyleBgColor.cocolorbg}"
			>
			CO
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a21005)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black; background:${colorliststyleBgColor.o3colorbg}"
			>
			O3
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a05024)}
			</div>
			</div>
			</div>
			<div class='windBox'>
			<div style="position: relative;width: 50%;text-align: center;color: #999;border-right: 1px dotted #999;" clss='windIcon'>
			<img style="width:140px; height:140px" src=${this.compassBg}>
			<img style="width: 40px;height: 40px;position: absolute;left: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg);display: ${windTip};"
			src=${this.compassDirection}
			>
			</div>
			<div class='windInfor'>
			<div v-if="false">风向: ${windDir} ( ${dushu} ° )</div>
			<div>风速: ${levelNumber} m/s</div>
			<div>等级: ${level}</div>
			</div>
			</div>

			</div>`
			if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') {
			htmlClassName = 'mypopupNoWind'
			html = ` <div data-reactroot="" class="marker_maptip">
			<div class="marker_title_1nQ">
			<span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>
			</div>
			<div class="marker_firstline_2WH">
			<div class="marker_citypart_keg">
			<div class="marker_name_small_1VU">${deviceDetails.name}</div>
			<div class="marker_time_w5m">${deviceDetails.dataTime}</div>
			</div>
			<div class="marker_indexpart_2UI">
			<div
			class="marker_indexname_3TP"
			style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"
			>
			TVOC
			</div>
			<div class="marker_indexvalue_1O7">
			${this.handleCutZero(deviceDetails.a99054)}
			</div>
			</div>
			</div>
			<div class="marker_secondline_2Om">
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${colorliststyleBgColor.pm25colorbg} "
			>
			PM2.5
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a34004)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${colorliststyleBgColor.pm10colorbg}"
			>
			PM10
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a34002)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${colorliststyleBgColor.so2colorbg}"
			>
			SO2
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a21026)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${colorliststyleBgColor.no210colorbg}"
			>
			NO2
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a21004)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black;background:${colorliststyleBgColor.cocolorbg}"
			>
			CO
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a21005)}
			</div>
			</div>
			<div class="marker_item_2Kk">
			<div
			class="marker_itemname_Wq5"
			style="color: black; background:${colorliststyleBgColor.o3colorbg}"
			>
			O3
			</div>
			<div class="marker_itemvalue_1l1">
			${this.handleCutZero(deviceDetails.a05024)}
			</div>
			</div>
			</div>
			</div>`
			}
			marker.bindPopup(html, { className: htmlClassName }).openPopup()
			})
			.catch(err => {
			console.log(err)
			})
			},
			handleCutZero (data) {
			let num = data.substring(0, data.indexOf('.') + 4)
			// 拷贝一份返回去掉零的新串
			// let num = Number(data).toFixed(3).toString()
			let newstr = num
			// 循环变量小数部分长度
			let leng = num.length - num.indexOf('.') - 1
			// 判断是否有效数
			if (num.indexOf('.') > -1) {
			// 循环小数部分
			for (let i = leng; i > 0; i--) {
			// 如果newstr末尾有0
			if (
			newstr.lastIndexOf('0') > -1 &&
			newstr.substr(newstr.length - 1, 1) === 0
			) {
			let k = newstr.lastIndexOf('0')
			// 如果小数点后只有一个0 去掉小数点
			if (newstr.charAt(k - 1) === '.') {
			return newstr.substring(0, k - 1)
			} else {
			// 否则去掉一个0
			newstr = newstr.substring(0, k)
			}
			} else {
			// 如果末尾没有0
			return newstr
			}
			}
			}
			return num
			},
			getMarkerInfor (data, marker) {
			this.$request({
			url: '/historyFiveMinutely/queryPopDataByMac',
			method: 'get',
			params: {
			mac: data.mac,
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			})
			.then(res => {
			if (res.message === '操作目标不存在') {
			var datafalse = '暂无五分钟数据'
			this.bindPopup(datafalse).openPopup()
			return
			}
			// eslint-disable-next-line no-unused-vars
			for (const key in res.data) {
			var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
			if (key !== '名称' && key !== '时间') {
			if (Number(tempDecimal) === 0) {
			res.data[key] =
			parseInt(res.data[key]) + res.data[key].split(' ')[1]
			} else {
			res.data[key] =
			Number(res.data[key].split(' ')[0]).toFixed(2) +
			res.data[key].split(' ')[1]
			}
			}
			}
			var data = JSON.stringify(res.data)
			.replace(/,/g, `<br>`)
			.replace(/{\|}\|"/g, '')
			console.log(data)
			marker.bindPopup(data).openPopup()
			})
			.catch(err => {
			console.log(err)
			})
			return data
			},
			// 请求风向标
			windDir () {
			// console.log('加载风向')
			// console.log('风向标ws请求开始')
			// const that = this
			// 遍历所有图层
			if (this.map) {
			this.map.eachLayer(function (layer) {
			// 卸载之前的风场图层
			if (
			!layer._container &&
			('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
			'leaflet-layer'
			) {
			layer.remove()
			}
			})
			}
			// 执行生成设备点方法
			this.deviceMaker()
			},
			// 获得父组件改变regionCode子组件请求api功能
			getRegionApiRequest () {
			this.getParamsData(true)
			setTimeout(() => {
			$.getJSON(
			'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
			{ monitorPointId: this.$store.state.monitorPointId },
			data => {
			this.map.setView([data[2], data[1]], 12)
			// console.log('跳转成功')
			}
			)
			}, 1000)
			},
			// 子组件地图的跳转中心点方法
			jumpMap (LngLat) {
			this.map.setView(LngLat, 18)
			},
			// 请求更新风场数据
			getParamsData (isFirst = true) {
			clearInterval(this.timer)
			this.timer = setInterval(() => {
			this.currentHour()
			this.times--
			if (this.times === 0) {
			// 时间点选择标记消失
			if (!this.chooseTimeInfo) {
			var mouseDiv2 = document.querySelector('.mouseDiv2')
			mouseDiv2.style.display = 'none'
			var lis = document.querySelectorAll('#eventPro>li')
			for (let i = 0; i < lis.length; i++) {
			lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
			}
			this.chooseTime = false
			// console.log('rgb000')
			} else {
			this.chooseTimeInfo = false
			// console.log('else')
			}
			setTimeout(() => {
			console.log('change', isFirst)
			if (isFirst) {
			this.windData()
			this.deviceMaker()
			} else {
			this.change(this.changeColor)
			}
			this.times = 300
			}, 100)
			}
			}, 1000)
			},
			findLayer (layerName) {
			// 根据图层名称查找图层
			if (!this.map) {
			return null
			}
			const gisMap_layers = this.map._layers
			let layer = null
			// eslint-disable-next-line no-unused-vars
			for (const i in gisMap_layers) {
			if (gisMap_layers[i].options.id === layerName) {
			layer = gisMap_layers[i]
			}
			}
			return layer
			},
			// 初始化地图容器
			initMap () {
			var map = L.map('mapContent', {
			inertia: false,
			minZoom: 2,
			maxZoom: 18,
			center: [this.weiduNew, this.jingduNew],
			zoom: 14,
			renderer: L.canvas(),
			zoomControl: false, // 缩放组件
			attributionControl: false, // 去掉右下角logol
			crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
			})
			// 定义图层样式
			L.tileLayer(
			'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
			).addTo(map)
			this.map = map // data上需要挂载
			// const that = this
			// this.map.on('mousedown', function(ev) {
			// const res = that.findLayer('wmsid')
			// if (res) {
			// that.map.removeLayer(res)
			// }
			// })
			// this.map.on('mouseup', function(ev) {
			// console.log('1111111')
			// that.canvasWind(this.windJsonData)
			// })
			window.map = map
			},
			// 更改不同的值区间
			change (index) {
			this.changeColor = index
			var pr = ''
			switch (index) {
			case 0:
			pr = 'a34002'
			this.bg = require('@/assets/images/tl_PM10.png')
			break
			case 1:
			pr = 'a34004'
			this.bg = require('@/assets/images/tl_PM2.5.png')
			break
			case 2:
			pr = 'a21026'
			this.bg = require('@/assets/images/tl_SO2.png')
			break
			case 3:
			pr = 'a21004'
			this.bg = require('@/assets/images/tl_NO2.png')
			break
			case 4:
			pr = 'a21005'
			this.bg = require('@/assets/images/tl_CO.png')
			break
			case 5:
			pr = 'a05024'
			this.bg = require('@/assets/images/tl_O3.png')
			break
			case 6:
			pr = 'a99054'
			this.bg = require('@/assets/images/tl_TVOCNew.png')
			break
			}
			this.sensorKey = pr
			// 请求设备坐标
			// this.toggleWindState()
			if (this.windState === 1) {
			this.deviceMaker()
			this.windData()
			} else if (this.windState === 2) {
			this.windDir()
			}
			},
			// 请求风场图接口
			initData () {
			if (this.map) {
			this.map.eachLayer(function (layer) {
			// 卸载之前的风场图层
			if (
			!layer._container &&
			('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
			'leaflet-layer'
			) {
			layer.remove()
			}
			})
			}
			this.deviceMaker()
			this.windData()
			},
			// 风场图数据
			windData () {
			this.$request({
			url: '/monitorPoint/getWindData',
			method: 'get',
			params: {
			monitorPointIds: this.monitorPointIds.toString(),
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			})
			.then(res => {
			this.windJsonData = res.data[0]
			return this.windJsonData
			})
			.catch(err => {
			console.log(err)
			})
			},
			canvasWind (data) {
			const res = this.findLayer('wmsid')
			if (res) {
			this.map.removeLayer(res)
			}
			var velocityLayer = L.velocityLayer({
			displayValues: false, // 是否显示当前鼠标移动位置，风场信息
			id: 'wmsid',
			displayOptions: {
			// 显示信息配置
			// velocityType: 'Global Wind',
			velocityType: 'GBR Wind',
			displayPosition: 'bottomleft',
			displayEmptyString: 'No wind data'
			},
			data: data, // 数据格式可参照
			// data: data2,
			// 以下为控制参数，后面为默认值
			minVelocity: 0, // 粒子最小速度（ m/s ）
			maxVelocity: 8, // 粒子最大速度（ m/s ）
			velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
			particleAge: 90, // 粒子在再生之前绘制的最大帧数
			lineWidth: 1.5, // 绘制粒子的线宽
			particleMultiplier: 1 / 300, // 粒子计数标量（粒子密度）
			frameRate: 15, // 每秒所需的帧数
			colorScale: [
			'#A2D839',
			'#7EB530',
			'#6E9F26',
			'#4E7522',
			'#345B1B',
			'#186303',
			'#175103',
			'#053F03'
			]
			// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
			})
			velocityLayer.addTo(this.map) // 添加到图上
			setTimeout(() => {
			this.loading = false
			}, 1000)
			},
			// 将页码，及每页显示的条数以参数传递提交给后台
			alertData (n1, n2) {
			// 这里使用axios，使用时请提前引入
			this.$request({
			url: '/alarmInfo/getDataByConditionWithoutPage',
			method: 'get',
			params: {
			organization_id: this.$store.state.orgId,
			// 每页显示的条数
			// size: n1,
			// 显示第几页
			// current: n2,
			startTime: this.dateValue[0],
			endTime: this.dateValue[1],
			index: this.factorValue,
			alarmType: this.alartValue
			}
			}).then(res => {
			// console.log('分页数据')
			// console.log(res)
			var tempData = res.data
			// console.log(tempData)
			for (let i = 0; i < tempData.alarmInfos.length; i++) {
			tempData.alarmInfos[i].alarmInfoId = i + 1
			}
			// 将数据赋值给tableData
			this.gridData = tempData.alarmInfos
			// 将数据的长度赋值给totalCount
			this.totalCount = tempData.alarmInfos.length
			})
			},
			// 分页
			// 每页显示的条数
			handleSizeChange (val) {
			// 改变每页显示的条数
			this.PageSize = val
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1
			},
			// 显示第几页
			handleCurrentChange (val) {
			// 改变默认的页数
			this.currentPage = val
			// console.log(val)
			},
			// 单元格样式
			tableCellClassName ({ row, column, rowIndex, columnIndex }) {
			// eslint-disable-next-line no-unused-vars
			for (const key in row) {
			if (key === column.property) {
			const code = column.property
			if (code === 'alarm_type') {
			// console.log(row[key])
			if (row[key] === 0 \|\| row[key] === '' \|\| row[key] === null) {
			return ''
			} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) {
			return 'yellow'
			} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) {
			return 'orange'
			} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) {
			return 'red'
			}
			}
			}
			}
			return ''
			},
			turnState () {
			// console.log(this.showOrHidden)
			if (this.showOrHidden === true) {
			this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
			} else {
			this.turnImg = require('@/assets/images/regionalOverview/putAway.png')
			}
			this.showOrHidden = !this.showOrHidden
			},
			// 国控站经纬度
			stateControlStation () {
			// this.$axios.get('monitorPoint/queryStateControlStation', {
			this.$request({
			url: '/govMonitorPoint/queryStateControlStation',
			method: 'get',
			params: {
			regionCode: 130900,
			sensorCode: 'a34002'
			}
			})
			.then(res => {
			// console.log('国控站信息')
			// console.log(res)
			var gkData = res.data
			var group = L.layerGroup().addTo(this.map)
			for (let i = 0; i < gkData.length; i++) {
			var glat = gkData[i].latitude
			var glng = gkData[i].longitude
			var gIcon = L.icon({
			iconUrl: require('@/assets/icon/gk.png'),
			// iconUrl:require('@/assets/images/tl_PM10.png'),
			iconSize: [55, 55],
			iconAnchor: [13, 21],
			className: 'my-device'
			})
			// 添加标记到地图
			L.marker([glat, glng], {
			icon: gIcon
			}).addTo(group)
			var myIcon = L.divIcon({
			html: gkData[i].data,
			className: 'my-div-icon-g',
			iconSize: 30
			})
			L.marker([glat, glng], {
			icon: myIcon
			}).addTo(group)
			}
			})
			.catch(err => {
			console.log(err)
			})
			},
			// 切换风场风向状态
			toggleWindState () {
			if (this.ws) {
			this.ws.close()
			}
			if (this.windState === 2) {
			this.windState = 1
			this.windStateText = '风场图'
			this.initData()
			// console.log(this.windState)
			} else if (this.windState === 1) {
			this.windState = 2
			this.windStateText = '风向标'
			this.windDir()
			// console.log(this.windState)
			}
			},
			closeAlarmTableVisible () {
			this.$store.state.alarmTableVisible = false
			}
			}
			}
			</script>

			<style lang="scss">
			@import './dataModel.css';
			html,
			body,
			#mapContent {
			width: 100%;
			height: 100%;
			}
			// .topSelect{
			// display: flex;
			// margin-bottom: 20px;
			// padding: 20px 15px 0 15px;
			// display: flex;
			// justify-content: space-between;
			// span:first-child{
			// flex: 1;
			// }
			// }
			.noneData {
			position: absolute;
			color: #000;
			background: #fff;
			z-index: 999;
			left: 50%;
			top: 50%;
			transform: translate(-50%);
			padding: 20px 50px;
			/* opacity: 0.5; */
			font-size: 28px;
			/* border-radius: 10px; */
			border: 2px solid #ff7f50;
			}
			.topDate {
			position: absolute;
			top: 50px;
			width: 100%;
			padding: 15px 10px 3px 10px;
			z-index: 999;
			//background: #ccc;
			background: rgba(204, 204, 204, 0.8);
			box-shadow: 1px 1px 5px #666;
			cursor: pointer;
			}
			.mouseDiv,
			.mouseDiv2 {
			position: absolute;
			left: 0;
			background-color: #009845;
			width: 36px;
			height: 22px;
			border-radius: 5px;
			top: -34px;
			display: none;
			text-align: center;
			line-height: 22px;
			padding: 1px;
			color: white;
			}
			.sjDiv,
			.sjDiv2 {
			width: 0px;
			height: 0px;
			border: 10px solid transparent;
			border-top-color: #009845;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			top: 100%;
			z-index: -1;
			}
			.mouseDiv2 {
			background-color: #2b2b2b;
			}
			.sjDiv2 {
			border-top-color: #2b2b2b;
			}
			.jdt {
			height: 5px;
			width: 100%;
			display: flex;
			position: relative;
			}
			.timeDiv {
			width: 100%;
			float: left;
			}
			.topDate .timeDiv:nth-child(3) {
			border-left: 1px solid white;
			border-right: 1px solid white;
			}
			.topDate ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			}
			.topDate li {
			width: 1.36986%;
			//padding: 0 2%;
			box-sizing: border-box;
			//transform: translateX(50%);
			}
			.topDate p {
			text-align: center;
			font-size: 16px;
			margin: 0;
			padding: 0;
			}
			.jdt li {
			//box-sizing: border-box;
			border-left: 1px solid white;
			background-color: rgba(0, 0, 0, 0.3);
			height: 100%;
			width: 1.36986%;
			list-style: none;
			position: relative;
			left: 0;
			top: 0;
			}
			.dayDiv p {
			width: 32.87664%;
			text-align: center;
			}
			.top {
			position: absolute;
			top: 0px;
			width: 100%;
			padding: 5px 10px;
			z-index: 999;
			/* background: #ccc; */
			background: rgba(204, 204, 204, 0.5);
			//box-shadow: 1px 1px 5px #666;
			}
			.top > .left {
			padding: 5px 10px;
			border: 1px solid #aaa;
			border-right: none;
			background: #fff;
			/* border-radius: 3px; */
			cursor: pointer;
			font-size: 16px;
			float: left;
			margin-top: 4px;
			-webkit-transform-origin-x: 0;
			/* -webkit-transform: scale(0.90); */
			}
			.top > .left:nth-child(1) {
			border-radius: 5px 0 0 5px;
			}
			.top > .left:nth-last-child(2) {
			border-radius: 0 5px 5px 0;
			border-right: 1px solid #aaa;
			}
			.top > .left:hover {
			background: #666;
			color: #fff;
			}
			.click {
			color: #fff;
			background-color: #666 !important;
			}
			.top > .right {
			position: fixed;
			right: 410px;
			top: 55px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: green;
			color: #fff;
			float: right;
			line-height: 40px;
			text-align: center;
			border: 1px solid #333;
			opacity: 0.7;
			}

			.top > .dropDown {
			width: 400px;
			height: 51px;
			line-height: 51px;
			text-align: center;
			color: #fff;
			font-size: 18px;
			position: fixed;
			right: 0;
			top: 50px;
			background-color: rgba(15, 69, 103, 0.8);
			}
			.dropDown > .drop-icon {
			vertical-align: middle;
			width: 24px;
			position: relative;
			left: 14px;
			top: -2px;
			}
			.realTime_top {
			width: 120px;
			float: left;
			margin-top: 9px;
			margin-left: 10px;
			}

			.text_Time {
			float: left;
			margin-left: 37px;
			}
			.my-div-icon {
			font-size: 14px;
			text-align: center;
			padding-left: 20px;
			padding-top: 6px;
			font-family: '微软雅黑';
			z-index: 10003;
			/* -webkit-transform-origin-x: 0; */
			/* -webkit-transform: scale(0.90); */
			}
			.my-div-icon-g {
			font-size: 14px;
			text-align: center;
			padding-left: 20px;
			padding-top: 11px;
			font-family: '微软雅黑';
			z-index: 10003;
			/* -webkit-transform-origin-x: 0; */
			/* -webkit-transform: scale(0.90); */
			}
			.iconWind {
			z-index: 10002;
			}
			.my-device {
			z-index: 999;
			}
			.windDir-icon {
			z-index: 10001;
			margin-top: 20px;
			/* padding-left: 10px; */
			/* padding-top: 30px; */
			}

			.buttom-left {
			/* background-image: url("@/assets/images/tl_PM10.png"); */
			position: absolute;
			bottom: 10px;
			left: 10px;
			width: 435px;
			height: 36px;
			z-index: 999;
			border-radius: 3px;
			}
			.middle {
			padding: 5px 10px;
			border: 1px solid #aaa;
			background: #fff;
			border-radius: 3px;
			cursor: pointer;
			font-size: 16px;
			float: left;
			margin-top: 4px;
			-webkit-transform-origin-x: 0;
			margin-left: 20px;
			}
			.el-dialog__body {
			padding: 10px 20px;
			}
			.el-dialog__footer {
			padding: 0px 20px 15px;
			}
			.yellow {
			background-color: #ffff00 !important;
			color: #868600 !important;
			}
			.orange {
			background-color: #ff7e00 !important;
			color: #844100 !important;
			}
			.red {
			background-color: #ff0000 !important;
			color: #790000 !important;
			}
			.leaflet-marker-icon.leaflet-interactive {
			pointer-events: auto;
			margin-left: -45px;
			margin-top: -40px;
			}
			</style>