moral_fronted.git

			@@ -5,7 +5,12 @@
			element-loading-text="请稍等"
			element-loading-background="rgba(0, 0, 0, 0.6)"
			>
			<div v-if="noneData" class="noneData">当前区域设备没有风场</div>
			<div
			v-if="noneData"
			class="noneData"
			>
			当前区域设备没有风场
			</div>
			<div class="top">
			<span
			v-for="(item, index) in params"
			@@ -13,8 +18,7 @@
			class="left"
			:class="{ click: changeColor === index }"
			@click="change(index)"
			>{{ item }}</span
			>
			>{{ item }}</span>
			<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
			<span class="right">{{ times }}秒</span>
			<span class="dropDown">
			@@ -23,170 +27,197 @@
			: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 class="text_Time">
			<el-date-picker
			v-model="selectData"
			popper-class="tpc"
			value-format="yyyy-MM-dd HH"
			format="yyyy-MM-dd HH"
			:clearable="false"
			:editable="false"
			type="datetime"
			:picker-options="pickerOptions"
			placeholder="选择日期时间"
			@change="changeData"
			/>
			</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="topDate"
			style="height: 60px"
			>
			<div
			id="eventPro"
			class="jdt"
			>
			<div class="mouseDiv">
			<span class="inText"></span>
			<div class="sjDiv"></div>
			<span class="inText" />
			<div class="sjDiv" />
			</div>
			<div class="mouseDiv2">
			<span class="inText2"></span>
			<div class="sjDiv2"></div>
			<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>
			<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">
			<div
			class="timeDiv"
			style="position: relative"
			>
			<ul id="timeUl">
			<li style="width: 0.83%"></li>
			<li></li>
			<li></li>
			<li style="width: 0.83%" />
			<li />
			<li />
			<li>03</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>06</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>09</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>12</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>15</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>18</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>21</li>
			<li></li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li />
			<!-- -->
			<li></li>
			<li></li>
			<li />
			<li />
			<li>03</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>06</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>09</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>12</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>15</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>18</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>21</li>
			<li></li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li />
			<!-- -->
			<li></li>
			<li></li>
			<li />
			<li />
			<li>03</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>06</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>09</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>12</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>15</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>18</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>21</li>
			<li></li>
			<li></li>
			<li />
			<li />
			<li>00</li>
			</ul>
			<div
			@@ -197,7 +228,7 @@
			"
			class="dayDiv"
			>
			<p class="p1"></p>
			<p class="p1" />
			<p style="position: relative">
			<span
			class="borderLine"
			@@ -208,8 +239,8 @@
			height: 47px;
			bottom: 0;
			"
			></span>
			<span class="p2"></span>
			/>
			<span class="p2" />
			<span
			class="borderLine"
			style="
			@@ -219,13 +250,17 @@
			height: 47px;
			bottom: 0;
			"
			></span>
			/>
			</p>
			<p class="p3"></p>
			<p class="p3" />
			</div>
			</div>
			</div>
			<regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
			<regional-overview
			:key="timerKey"
			:map="map"
			:show-flag="showOrHidden"
			/>
			<div
			:style="{ background: 'url(' + bg + ') no-repeat' }"
			class="buttom-left"
			@@ -248,7 +283,10 @@
			end-placeholder="结束日期"
			value-format="yyyy-MM-dd"
			/>
			<el-select v-model="factorValue" placeholder="选择因子">
			<el-select
			v-model="factorValue"
			placeholder="选择因子"
			>
			<el-option
			v-for="item in factorOptions"
			:key="item.value"
			@@ -256,7 +294,10 @@
			:value="item.value"
			/>
			</el-select>
			<el-select v-model="alartValue" placeholder="选择报警类型">
			<el-select
			v-model="alartValue"
			placeholder="选择报警类型"
			>
			<el-option
			v-for="item in alertOptions"
			:key="item.value"
			@@ -264,9 +305,12 @@
			:value="item.value"
			/>
			</el-select>
			<el-button type="primary" @click="alertData(PageSize, currentPage)"
			>查询</el-button
			<el-button
			type="primary"
			@click="alertData(PageSize, currentPage)"
			>
			查询
			</el-button>
			</div>
			</div>
			<el-table
			@@ -284,8 +328,16 @@
			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="alarm_time"
			label="报警时间"
			width="150"
			/>
			<el-table-column
			property="deviceName"
			label="站点名称"
			width="200"
			/>
			<el-table-column
			property="index"
			label="因子"
			@@ -313,10 +365,16 @@
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			/>
			<div slot="footer" class="dialog-footer">
			<el-button size="mini" @click="alarmTableVisible = false"
			>关闭</el-button
			<div
			slot="footer"
			class="dialog-footer"
			>
			<el-button
			size="mini"
			@click="alarmTableVisible = false"
			>
			关闭
			</el-button>
			</div>
			</el-dialog>
			</div>
			@@ -326,12 +384,14 @@
			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'
			// import { gcj02towgs84 } from '@/assets/json/transform'
			export default {
			components: { RegionalOverview },
			props: {
			@@ -340,12 +400,20 @@
			jingdu: Number,
			monitorPointId: Number,
			monitorPointIds: Array,
			defaultData: Array
			},
			data() {
			data () {
			return {
			compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
			compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
			timerKey: '', // 用于重新渲染子组件
			map: null,
			code: [],
			pickerOptions: {
			disabledDate: (time) => {
			return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000
			},
			},
			latlng: [],
			noneData: false,
			params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
			@@ -382,145 +450,160 @@
			// 总条数，根据接口获取数据长度(注意：这里不能为空)
			totalCount: 0,
			// 个数选择器（可修改）
			pageSizes: [10, 20, 30, 40],
			pageSizes: [10, 50, 100, 200],
			// 默认每页显示的条数（可修改）
			PageSize: 20,
			factorOptions: [
			{
			label: '全部因子',
			value: 'all',
			value: 'all'
			},
			{
			label: 'PM10',
			value: 'PM10',
			value: 'PM10'
			},
			{
			label: 'PM2.5',
			value: 'PM2.5',
			value: 'PM2.5'
			},
			{
			label: 'SO2',
			value: 'SO2',
			value: 'SO2'
			},
			{
			label: 'NO2',
			value: 'NO2',
			value: 'NO2'
			},
			{
			label: 'CO',
			value: 'CO',
			value: 'CO'
			},
			{
			label: 'O3',
			value: 'O3',
			},
			value: 'O3'
			}
			],
			alertOptions: [
			{
			label: '全部报警类型',
			value: 'all',
			value: 'all'
			},
			{
			label: '超限',
			value: 'overrun',
			value: 'overrun'
			},
			{
			label: '突然高',
			value: 'sudden',
			value: 'sudden'
			},
			{
			label: '超过国控站点100%',
			value: 'state100',
			value: 'state100'
			},
			{
			label: '超过国控站点150%',
			value: 'state150',
			value: 'state150'
			},
			{
			label: '超过国控站点250%',
			value: 'state250',
			value: 'state250'
			},
			{
			label: '超过市区均值100%',
			value: 'city100',
			value: 'city100'
			},
			{
			label: '超过市区均值150%',
			value: 'city150',
			value: 'city150'
			},
			{
			label: '超过市区均值250%',
			value: 'city250',
			},
			value: 'city250'
			}
			],
			currentDate: '',
			turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
			showOrHidden: true,
			dateFormat: '',
			selectData: new Date(),
			alarmTableVisible: false,
			chooseTimeInfo: false, // 是否选择了时间点
			chooseTime: false,
			dateInfo: '', // 选择的日期
			timeInfo: '', // 选择的时间
			nyr: '', // 选择的年月日
			windJsonData: [],
			clickmac: '',
			childerItem: {},
			farterItem: {},
			indexsLaber: 0,
			time: new Date()
			}
			},
			computed: {
			...mapGetters(['regionCode']),
			...mapGetters(['regionCode'])
			},
			watch: {
			dateValue(n, o) {
			// console.log(n)
			dateValue (n, o) {
			// this.newDate()
			},
			regionCode(newCode, oldCode) {
			regionCode (newCode, oldCode) {
			this.timerKey = newCode // 用于监听code变化重新渲染子组件
			},
			windJsonData (newCode, oldCode) {
			this.$nextTick(() => {
			this.canvasWind(newCode)
			})
			}
			},
			mounted() {
			mounted () {
			this.currentHour()
			this.$Bus.$on('alarmTableVisible', (res) => (this.alarmTableVisible = res))
			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() {
			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.windData()
			this.change(0)
			this.getParamsData()
			this.windDir()
			this.getParamsData(false)
			// this.windDir()
			this.newDate()
			this.alertData(this.PageSize, this.currentPage)
			// this.alertData(this.PageSize, this.currentPage)
			},
			beforeDestroy() {
			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() // 星期
			getDayXQ (day) {
			var days = new Date().getDay() // 星期 // 星期
			var rq = '' // 日期
			if (day === 'today') {
			rq = this.newData(0)
			rq = this.newData(0) // 今天日期
			} else if (day === 'yesterday') {
			days = (days + 7 - 1) % 7
			rq = this.newData(-1) // 昨天日期
			@@ -554,7 +637,7 @@
			return `${rq}(${days})`
			},
			// 计算当天之前或者之后的日期
			newData(day, info) {
			newData (day, info) {
			var today = new Date()
			var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
			today.setTime(targetday_milliseconds)
			@@ -570,7 +653,7 @@
			}
			},
			// 事件代理
			eventProxy() {
			eventProxy () {
			// 拿到今天的日期和星期
			var ul = document.querySelector('#eventPro')
			var lis = document.querySelectorAll('#eventPro>li')
			@@ -588,7 +671,7 @@
			p1.innerHTML = this.getDayXQ('beforeYea')
			var greenInfo = 0
			var that = this
			ul.onclick = (e) => {
			ul.onclick = e => {
			var target = e.target
			if (target.tagName.toLowerCase() === 'li') {
			// 给所有的li颜色设为初始值
			@@ -609,28 +692,25 @@
			inText2.innerHTML = times + ':00'
			this.chooseTimeInfo = true // 选择时间点
			this.chooseTime = true // 选择时间点
			console.log('times', times)
			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()
			that.getParamsData(true)
			}
			// timeUl绑定点击事件
			timeUl.onclick = (e) => {
			timeUl.onclick = e => {
			// 给所有的li颜色设为初始值
			var target = e.target
			if (target.tagName.toLowerCase() === 'li') {
			@@ -646,18 +726,15 @@
			inText2.innerHTML = times + ':00'
			this.chooseTimeInfo = true // 选择时间点
			this.chooseTime = true // 选择时间点
			console.log('times', times)
			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
			}
			@@ -669,49 +746,40 @@
			lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
			}
			}
			// console.log('下边点击进来了', greenInfo, 'index')
			}
			that.times = 1
			that.getParamsData()
			that.getParamsData(true)
			}
			// 鼠标移入移出事件
			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() {
			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()
			@@ -731,7 +799,7 @@
			this.dateFormat = currentDate.toString()
			},
			// 日期格式化
			newDate() {
			newDate () {
			var aData = new Date()
			var month =
			aData.getMonth() < 9
			@@ -739,196 +807,18 @@
			: 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() {
			mouseOver () {
			this.map.scrollWheelZoom.disable()
			},
			// 报警弹窗移出
			mouseLeave() {
			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) {
			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
			@@ -938,56 +828,8 @@
			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() {
			// 遍历所有图层
			deviceMaker () {
			if (this.map) {
			this.map.eachLayer(function (layer) {
			// 卸载之前的风场图层
			@@ -1000,7 +842,6 @@
			}
			})
			}
			const that = this
			this.$request({
			url: '/historyFiveMinutely/queryDeviceAndData',
			method: 'get',
			@@ -1009,24 +850,20 @@
			organizationId: this.$store.state.orgId,
			regionCode: this.$store.state.regionCode,
			chooseTime: this.chooseTime,
			time: this.nyr,
			},
			}).then((data) => {
			// console.log('五分钟设备数据')
			console.log(data, 'tata')
			that.loading = false
			time: this.nyr
			}
			}).then(data => {
			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]
			markDeviceSite (data) {
			var keyData = data.data.devices
			this.keyData = data.data.devices
			// 遍历国控站位置
			this.stateControlStation()
			var group = L.layerGroup().addTo(this.map)
			// 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) {
			@@ -1048,12 +885,6 @@
			this.keys.push(JSON.parse('null'))
			// }
			}
			// console.log(this.keys)
			// const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)
			// var lat = newL[0]
			// this.lats[i] = newL[0]
			// var lng = newL[1]
			// this.lngs[i] = newL[1]
			var lat = keyData[i].latitude
			this.lats[i] = keyData[i].latitude
			var lng = keyData[i].longitude
			@@ -1061,7 +892,7 @@
			// 对比各个key中的标准数据，标记展示不同的颜色
			var colorNum = 7
			if (keyData[i].a34002) {
			var data = Math.floor(JSON.parse(keyData[i].a34002))
			let data = Math.floor(JSON.parse(keyData[i].a34002))
			switch (true) {
			case data < 0: {
			colorNum = 7
			@@ -1099,7 +930,7 @@
			break
			}
			} else if (keyData[i].a34004) {
			var data = Math.floor(JSON.parse(keyData[i].a34004))
			let data = Math.floor(JSON.parse(keyData[i].a34004))
			switch (true) {
			case data < 0: {
			colorNum = 7
			@@ -1137,7 +968,7 @@
			break
			}
			} else if (keyData[i].a21026) {
			var data = Math.floor(JSON.parse(keyData[i].a21026))
			let data = Math.floor(JSON.parse(keyData[i].a21026))
			switch (true) {
			case data < 0: {
			colorNum = 7
			@@ -1175,7 +1006,7 @@
			break
			}
			} else if (keyData[i].a21004) {
			var data = Math.floor(
			let data = Math.floor(
			Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
			)
			switch (true) {
			@@ -1215,7 +1046,7 @@
			break
			}
			} else if (keyData[i].a21005) {
			var data = JSON.parse(keyData[i].a21005).toFixed(3)
			let data = JSON.parse(keyData[i].a21005).toFixed(3)
			switch (true) {
			case data < 0: {
			colorNum = 7
			@@ -1253,7 +1084,7 @@
			break
			}
			} else if (keyData[i].a05024) {
			var data = Math.floor(JSON.parse(keyData[i].a05024))
			let data = Math.floor(JSON.parse(keyData[i].a05024))
			switch (true) {
			case data < 0: {
			colorNum = 7
			@@ -1291,7 +1122,7 @@
			break
			}
			} else if (keyData[i].a99054) {
			var data = JSON.parse(keyData[i].a99054).toFixed(3)
			let data = JSON.parse(keyData[i].a99054).toFixed(3)
			switch (true) {
			case data < 0: {
			colorNum = 7
			@@ -1335,145 +1166,713 @@
			// iconUrl: require('@/assets/icon/ico2.png'),
			iconSize: [60, 60],
			iconAnchor: [30, 48],
			className: 'my-device',
			className: 'my-device'
			})

			// 添加标记到地图
			L.marker([lat, lng], {
			icon: blueIcon,
			}).addTo(group)
			// console.log(JSON.parse(this.keys[i]))
			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],
			iconAnchor: [40, 40]
			})
			var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)

			const TexteMarker = L.marker([lat, lng], { icon: myIcon })
			TexteMarker.inforData = keyData[i]
			groupText.addLayer(TexteMarker)
			const _this = this
			// 给标记添加鼠标移入事件，mouseover事件会冒泡
			var _this = this
			marker.on('mouseover', function (e) {
			TexteMarker.on('click', function (e) {
			const MarkerTarget = e.target
			// _this.getMarkerInfor(keyData[i], MarkerTarget)
			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) => {
			if (res.message == '操作目标不存在') {
			var datafalse = '暂无五分钟数据'
			this.bindPopup(datafalse).openPopup()
			return
			}
			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)
			})
			// const _this = e.target.vuecontext
			_this.handleClick(keyData[i], MarkerTarget)
			})
			// 给标记点添加鼠标移出事件
			marker.on('mouseout', function (e) {
			this.noneData = false
			this.bindPopup().closePopup()
			})
			// TexteMarker.on('mouseout', function(e) {
			// this.noneData = false
			// this.bindPopup().closePopup()
			// })
			}
			},
			// 给标记点添加移入移出事件
			// moveInAndOut() {
			//
			// },
			// 国控站经纬度
			stateControlStation() {
			// this.$axios.get('monitorPoint/queryStateControlStation', {
			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: '/govMonitorPoint/queryStateControlStation',
			url: '/historyFiveMinutely/queryFiveDataByMac',
			method: 'get',
			params: {
			regionCode: 130900,
			sensorCode: 'a34002',
			},
			mac: data.mac,
			chooseTime: this.chooseTime,
			time: this.nyr
			}
			})
			.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)
			.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) => {
			.catch(err => {
			console.log(err)
			})
			},
			// 切换风场风向状态
			toggleWindState() {
			if (this.ws) {
			this.ws.close()
			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
			}
			}
			}
			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)
			}
			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() {
			windDir () {
			// console.log('加载风向')
			// console.log('风向标ws请求开始')
			// const that = this
			@@ -1492,68 +1891,27 @@
			}
			// 执行生成设备点方法
			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()
			getRegionApiRequest () {
			this.getParamsData(true)
			setTimeout(() => {
			$.getJSON(
			'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
			'http://47.99.64.149:8080/api/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()
			// }
			// })
			data => {
			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)
			jumpMap (LngLat) {
			this.map.setView(LngLat, 18)
			},
			// 请求更新风场数据
			getParamsData() {
			getParamsData (isFirst = true) {
			clearInterval(this.timer)
			this.timer = setInterval(() => {
			this.currentHour()
			@@ -1573,49 +1931,83 @@
			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)
			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() {
			// console.log('这是index传到map的经纬度')
			// console.log(this.weidu)
			// console.log(this.jingdu)
			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
			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上需要挂载
			// 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
			},
			changeData (val) {
			console.log(val)
			this.nyr = val + ':00'
			const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00'))

			console.log(date)
			this.chooseTime = true
			// var p1 = document.querySelector('.p1')
			// var p2 = document.querySelector('.p2')
			// var p3 = document.querySelector('.p3')
			// this.time = date
			// p3.innerHTML = this.getDayXQ('today')
			// p2.innerHTML = this.getDayXQ('yesterday')
			// p1.innerHTML = this.getDayXQ('beforeYea')
			this.initData()
			},
			// 更改不同的值区间
			change(index) {
			change (index) {
			this.changeColor = index
			var pr = ''
			switch (index) {
			@@ -1652,18 +2044,14 @@
			// 请求设备坐标
			// this.toggleWindState()
			if (this.windState === 1) {
			this.initData()
			this.deviceMaker()
			this.windData()
			} else if (this.windState === 2) {
			this.windDir()
			}
			},
			// 请求风场图接口
			initData() {
			// console.log('加载风场')
			// const that = this
			// 请求更新风场数据
			// console.log(this.monitorPointId)
			// 遍历所有图层
			initData () {
			if (this.map) {
			this.map.eachLayer(function (layer) {
			// 卸载之前的风场图层
			@@ -1677,80 +2065,71 @@
			})
			}
			this.deviceMaker()
			// console.log('请求风场之前')
			// $.ajaxSettings.async = false
			// for (let i = 0; i < this.monitorPointIds.length; i++) {
			this.windData()
			// }
			},
			// 风场图数据
			windData() {
			windData () {
			this.$request({
			url: '/monitorPoint/getWindData',
			method: 'get',
			params: {
			monitorPointIds: this.monitorPointIds.toString(),
			chooseTime: this.chooseTime,
			time: this.nyr,
			},
			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])
			.then(res => {
			this.windJsonData = res.data[0]
			return this.windJsonData
			})
			.catch((err) => {
			.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) {
			alertData (n1, n2) {
			// 这里使用axios，使用时请提前引入
			this.$request({
			url: '/alarmInfo/getDataByConditionWithoutPage',
			@@ -1764,9 +2143,9 @@
			startTime: this.dateValue[0],
			endTime: this.dateValue[1],
			index: this.factorValue,
			alarmType: this.alartValue,
			},
			}).then((res) => {
			alarmType: this.alartValue
			}
			}).then(res => {
			// console.log('分页数据')
			// console.log(res)
			var tempData = res.data
			@@ -1782,20 +2161,21 @@
			},
			// 分页
			// 每页显示的条数
			handleSizeChange(val) {
			handleSizeChange (val) {
			// 改变每页显示的条数
			this.PageSize = val
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1
			},
			// 显示第几页
			handleCurrentChange(val) {
			handleCurrentChange (val) {
			// 改变默认的页数
			this.currentPage = val
			// console.log(val)
			},
			// 单元格样式
			tableCellClassName({ row, column, rowIndex, columnIndex }) {
			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
			@@ -1815,7 +2195,7 @@
			}
			return ''
			},
			turnState() {
			turnState () {
			// console.log(this.showOrHidden)
			if (this.showOrHidden === true) {
			this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
			@@ -1824,14 +2204,76 @@
			}
			this.showOrHidden = !this.showOrHidden
			},
			closeAlarmTableVisible() {
			this.$store.state.alarmTableVisible = false
			// 国控站经纬度
			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 {
			@@ -2033,11 +2475,36 @@
			margin-top: 9px;
			margin-left: 10px;
			}

			.text_Time {
			float: left;
			margin-left: 37px;
			.el-date-editor{
			width: 145px!important;
			.el-input__prefix{
			display: none!important;
			}
			.el-input__inner{
			cursor: pointer;
			font-size: 18px;
			color: #fff;
			padding: 0px!important;
			border: none;
			background: inherit;

			}
			}
			}
			.tpc{
			left: unset!important;
			right: 60px;
			}
			.tpc .el-time-spinner__wrapper {
			width:100% !important;
			}
			.tpc .el-scrollbar:nth-of-type(2) {
			display: none !important;
			}

			.my-div-icon {
			font-size: 14px;
			text-align: center;
			@@ -2070,14 +2537,7 @@
			/* 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;