moral_fronted.git

			@@ -1,1166 +1,1999 @@
			<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 class="jdt" id="eventPro">
			<div class="mouseDiv">
			<span class="inText"></span>
			<div class="sjDiv"></div>
			</div>
			<div class="mouseDiv2">
			<span class="inText2"></span>
			<div class="sjDiv2"></div>
			</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>
			<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>
			<li></li>
			<li>03</li>
			<li></li>
			<li></li>
			<li>06</li>
			<li></li>
			<li></li>
			<li>09</li>
			<li></li>
			<li></li>
			<li>12</li>
			<li></li>
			<li></li>
			<li>15</li>
			<li></li>
			<li></li>
			<li>18</li>
			<li></li>
			<li></li>
			<li>21</li>
			<li></li>
			<li></li>
			<li></li>
			<!-- -->
			<li></li>
			<li></li>
			<li>03</li>
			<li></li>
			<li></li>
			<li>06</li>
			<li></li>
			<li></li>
			<li>09</li>
			<li></li>
			<li></li>
			<li>12</li>
			<li></li>
			<li></li>
			<li>15</li>
			<li></li>
			<li></li>
			<li>18</li>
			<li></li>
			<li></li>
			<li>21</li>
			<li></li>
			<li></li>
			<li></li>
			<!-- -->
			<li></li>
			<li></li>
			<li>03</li>
			<li></li>
			<li></li>
			<li>06</li>
			<li></li>
			<li></li>
			<li>09</li>
			<li></li>
			<li></li>
			<li>12</li>
			<li></li>
			<li></li>
			<li>15</li>
			<li></li>
			<li></li>
			<li>18</li>
			<li></li>
			<li></li>
			<li>21</li>
			<li></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>
			<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>
			<span class="p2"></span>
			<span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
			</p>
			<p class="p3"></p>
			</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,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'
			import { gcj02towgs84 } from '@/assets/json/transform'
			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,
			chooseTimeInfo: false, // 是否选择了时间点
			chooseTime: false,
			dateInfo: '', // 选择的日期
			timeInfo: '', // 选择的时间
			nyr: '', // 选择的年月日
			}
			},
			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()

			// 事件代理
			this.eventProxy()
			},
			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: {
			// 拿到某天的日期和星期
			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'
			console.log(111, this.nyr)
			} else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
			this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
			console.log(222, this.nyr)
			} else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
			this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
			console.log(333, this.nyr)
			} else {
			this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
			console.log(444, this.nyr)
			}
			break
			}
			}
			}
			that.times = 1
			that.getParamsData()
			}
			// 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'
			console.log(111, this.nyr)
			} else if (i / 24 < 2 && i / 24 >= 1) {
			this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
			console.log(222, this.nyr)
			} else if (i / 24 < 3 && i / 24 >= 2) {
			this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
			console.log(333, this.nyr)
			} else {
			this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
			console.log(444, this.nyr)
			}
			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)'
			}
			}
			// console.log('下边点击进来了', greenInfo, 'index')
			}
			that.times = 1
			that.getParamsData()
			}
			// 鼠标移入移出事件
			for (let i = 0; i < lis.length; i++) {
			lis[i].onmouseenter = function() {
			// console.log('mouseenter', i)
			// mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
			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'
			// console.log(mouseDiv)
			}
			lis[i].onmouseleave = function() {
			mouseDiv.style.display = 'none'
			// console.log('移出事件', i)
			}
			}
			for (let i = 0; i < timeLis.length; i++) {
			timeLis[i].onmouseenter = function() {
			// console.log('mouseenter', i)
			// mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
			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'
			// console.log(mouseDiv)
			}
			timeLis[i].onmouseleave = function() {
			mouseDiv.style.display = 'none'
			// console.log('移出事件', i)
			}
			}
			},
			// 当前小时默认值
			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
			// 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]
			},
			// /**
			// * GCJ02 转换为 WGS84
			// * @param lng
			// * @param lat
			// * @returns {*[]}
			// */
			// gcj02towgs84(lng, lat) {
			// if (this.out_of_china(lng, lat)) {
			// return [lat,lng]
			// } else {
			// var dlat = this.transformlat(lng - 105.0, lat - 35.0);
			// var dlng = this.transformlng(lng - 105.0, lat - 35.0);
			// var radlat = lat / 180.0 * PI;
			// var magic = Math.sin(radlat);
			// magic = 1 - ee * magic * magic;
			// var sqrtmagic = Math.sqrt(magic);
			// dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
			// dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
			// var mglat = lat + dlat;
			// var mglng = lng + dlng;
			// return [ lat * 2 - mglat,lng * 2 - mglng]
			// }
			// },
			//
			// transformlat(lng, lat) {
			// var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
			// ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
			// ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
			// ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
			// return ret
			// },
			// transformlng(lng, lat) {
			// var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
			// ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
			// ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
			// ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
			// return ret
			// },
			// /**
			// * 判断是否在国内，不在国内则不做偏移
			// * @param lng
			// * @param lat
			// * @returns {boolean}
			// */
			// out_of_china(lng, lat) {
			// return (lng < 72.004 \|\| lng > 137.8347) \|\| ((lat < 0.8293 \|\| lat > 55.8271) \|\| false);
			// },
			// 请求设备坐标,当前的
			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,
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			}).then((data) => {
			// console.log('五分钟设备数据')
			// console.log(data)
			that.loading = false
			this.markDeviceSite(data)
			})
			},
			// 标记设备点
			markDeviceSite(data) {
			// data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]
			// data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]
			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).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'))
			// }
			}
			// 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
			// 对比各个key中的标准数据，标记展示不同的颜色
			var colorNum = 7
			if (keyData[i].a34002) {
			var 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) {
			var 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) {
			var 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) {
			var 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) {
			var 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) {
			var 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) {
			var 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: [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, chooseTime: this.chooseTime, time: this.nyr }, (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,
			chooseTime: _this.chooseTime,
			time: _this.nyr
			}
			}).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()
			})
			}
			},
			// 给标记点添加移入移出事件
			// moveInAndOut() {
			//
			// },
			// 国控站经纬度
			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) {
			// 时间点选择标记消失
			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')
			}
			// console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
			// 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: this.monitorPointIds.toString(),
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			}).then(res => {
			// console.log('新风场数据')
			// console.log(res)
			// if (res.data[0][0].data.length === 0) {
			// this.noneData = true
			// }
			// 生成风场实例
			// var data2 = res.data[0]
			// data2[1].header.parameterNumberName = 'northward_wind'
			// data2[0].header.parameterUnit = 'm.s-1'
			// data2[1].header.parameterUnit = 'm.s-1'
			// data2[0].header.dx = 0.00234842479
			// data2[1].header.dx = 0.00234842479
			// data2[0].header.dy = 0.0018464922
			// data2[1].header.dy = 0.0018464922
			// console.log(data2, 'data2')
			var velocityLayer = L.velocityLayer({
			displayValues: false, // 是否显示当前鼠标移动位置，风场信息
			displayOptions: {// 显示信息配置
			// velocityType: 'Global Wind',
			velocityType: 'GBR Wind',
			displayPosition: 'bottomleft',
			displayEmptyString: 'No wind data'
			},
			data: res.data[0], // 数据格式可参照
			// 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)// 添加到图上
			// 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;
			}
			.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; */
			}
			.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: 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;
			}
			</style>