From f3a8b27eb23c940dcd67bd459b76b0457fcb8b46 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 13 Jun 2024 13:29:49 +0800
Subject: [PATCH] fix: 样式修改
---
src/components/Wind/Map.vue | 4435 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 2,566 insertions(+), 1,869 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index efe002a..f66f6b1 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -1,1869 +1,2566 @@
-<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>
- </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,currentPage*PageSize)"
- border
- stripe
- :cell-class-name="tableCellClassName"
- height="400"
- >
- <el-table-column property="alarmInfoId" label="������" width="50" align="center" />
- <el-table-column property="alarm_time" label="������������" width="150" />
- <el-table-column property="deviceName" label="������������" width="200" />
- <el-table-column property="index" label="������" width="80" align="center" />
- <el-table-column property="alarm_type" label="������������" width="200" align="center" />
- <el-table-column property="alarm_information" label="������������" align="center" />
- </el-table>
- <el-pagination
- :current-page="currentPage"
- :page-sizes="pageSizes"
- :page-size="PageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="totalCount"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- />
- <div slot="footer" class="dialog-footer">
- <el-button size="mini" @click="alarmTableVisible = false">��� ���</el-button>
- </div>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-velocity/dist/leaflet-velocity.css'
-import L from 'leaflet'
-import '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,
- chooseTimeInfo: false, // ������������������������
- dateInfo: '', // ���������������
- timeInfo: '' // ���������������
- }
- },
- 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) {
- var today = new Date()
- var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
- today.setTime(targetday_milliseconds)
- var tMonth = today.getMonth() + 1
- tMonth = tMonth < 10 ? '0' + tMonth : tMonth
- var tDate = today.getDate()
- tDate = tDate < 10 ? '0' + tDate : tDate
- 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
- ul.onclick = (e) => {
- // ������������li���������������������
- for (let i = 0; i < lis.length; i++) {
- lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
- }
- var target = e.target
- if (target.tagName.toLowerCase() === 'li') {
- // 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.display = 'block'
- var times = (i - 0 + 1) % 24
- times = times > 9 ? times : '0' + times
- inText2.innerHTML = times + ':00'
- this.chooseTimeInfo = true // ���������������
- if (i / 24 < 1) {
- console.log(111)
- } else if (i / 24 <= 2 && i / 24 > 1) {
- console.log(222)
- } else {
- console.log(333)
- }
- break
- }
- }
- }
- }
- // 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.display = 'block'
- var times = i % 24
- times = times > 9 ? times : '0' + times
- inText2.innerHTML = times + ':00'
- break
- }
- }
- if (greenInfo !== 0) {
- 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')
- }
- }
- // ������������������������
- 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.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.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()
- },
- // ���������������
- 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
- this.markDeviceSite(data)
- })
- },
- // ���������������
- markDeviceSite(data) {
- 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 }, (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()
- })
- }
- },
- // ������������������������������������
- // 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) {
- // ���������������������������
- var mouseDiv2 = document.querySelector('.mouseDiv2')
- mouseDiv2.style.display = 'none'
- // 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;
-}
-.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: 73%;
- display: flex;
- position: relative;
-}
-.timeDiv{
- width: 73%;
- 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;
-}
-.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>
+<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">
+ <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"
+ placeholder="������������������"
+ @change="changeData"
+ />
+ </span>
+ <img
+ class="drop-icon"
+ :src="turnImg"
+ alt=""
+ @click="turnState"
+ >
+ </span>
+ </div>
+ <div
+ class="topDate"
+ style="height: 60px"
+ >
+ <div
+ id="eventPro"
+ class="jdt"
+ >
+ <div class="mouseDiv">
+ <span class="inText" />
+ <div class="sjDiv" />
+ </div>
+ <div class="mouseDiv2">
+ <span class="inText2" />
+ <div class="sjDiv2" />
+ </div>
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ </div>
+ <div
+ class="timeDiv"
+ style="position: relative"
+ >
+ <ul id="timeUl">
+ <li style="width: 0.83%" />
+ <li />
+ <li />
+ <li>03</li>
+ <li />
+ <li />
+ <li>06</li>
+ <li />
+ <li />
+ <li>09</li>
+ <li />
+ <li />
+ <li>12</li>
+ <li />
+ <li />
+ <li>15</li>
+ <li />
+ <li />
+ <li>18</li>
+ <li />
+ <li />
+ <li>21</li>
+ <li />
+ <li />
+ <li />
+ <!-- -->
+ <li />
+ <li />
+ <li>03</li>
+ <li />
+ <li />
+ <li>06</li>
+ <li />
+ <li />
+ <li>09</li>
+ <li />
+ <li />
+ <li>12</li>
+ <li />
+ <li />
+ <li>15</li>
+ <li />
+ <li />
+ <li>18</li>
+ <li />
+ <li />
+ <li>21</li>
+ <li />
+ <li />
+ <li />
+ <!-- -->
+ <li />
+ <li />
+ <li>03</li>
+ <li />
+ <li />
+ <li>06</li>
+ <li />
+ <li />
+ <li>09</li>
+ <li />
+ <li />
+ <li>12</li>
+ <li />
+ <li />
+ <li>15</li>
+ <li />
+ <li />
+ <li>18</li>
+ <li />
+ <li />
+ <li>21</li>
+ <li />
+ <li />
+ <li>00</li>
+ </ul>
+ <div
+ style="
+ display: flex;
+ width: 100%;
+ border-top: 1px solid rgba(255, 255, 255, 0.5);
+ "
+ class="dayDiv"
+ >
+ <p class="p1" />
+ <p style="position: relative">
+ <span
+ class="borderLine"
+ style="
+ position: absolute;
+ left: 0;
+ border-left: 1px solid rgba(255, 255, 255, 1);
+ height: 47px;
+ bottom: 0;
+ "
+ />
+ <span class="p2" />
+ <span
+ class="borderLine"
+ style="
+ position: absolute;
+ right: 0;
+ border-right: 1px solid rgba(255, 255, 255, 1);
+ height: 47px;
+ bottom: 0;
+ "
+ />
+ </p>
+ <p class="p3" />
+ </div>
+ </div>
+ </div>
+ <regional-overview
+ :key="timerKey"
+ :map="map"
+ :show-flag="showOrHidden"
+ />
+ <div
+ :style="{ background: 'url(' + bg + ') no-repeat' }"
+ class="buttom-left"
+ />
+ <el-dialog
+ title="������������������"
+ :visible.sync="alarmTableVisible"
+ width="80%"
+ @mouseover.native="mouseOver"
+ @mouseleave.native="mouseLeave"
+ >
+ <div class="topSelect">
+ <div>
+ <el-date-picker
+ v-model="dateValue"
+ style="width: 400px"
+ type="daterange"
+ range-separator="���"
+ start-placeholder="������������"
+ end-placeholder="������������"
+ value-format="yyyy-MM-dd"
+ />
+ <el-select
+ v-model="factorValue"
+ placeholder="������������"
+ >
+ <el-option
+ v-for="item in factorOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-select
+ v-model="alartValue"
+ placeholder="������������������"
+ >
+ <el-option
+ v-for="item in alertOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-button
+ type="primary"
+ @click="alertData(PageSize, currentPage)"
+ >
+ ������
+ </el-button>
+ </div>
+ </div>
+ <el-table
+ :data="
+ gridData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
+ "
+ border
+ stripe
+ :cell-class-name="tableCellClassName"
+ height="400"
+ >
+ <el-table-column
+ property="alarmInfoId"
+ label="������"
+ width="50"
+ align="center"
+ />
+ <el-table-column
+ property="alarm_time"
+ label="������������"
+ width="150"
+ />
+ <el-table-column
+ property="deviceName"
+ label="������������"
+ width="200"
+ />
+ <el-table-column
+ property="index"
+ label="������"
+ width="80"
+ align="center"
+ />
+ <el-table-column
+ property="alarm_type"
+ label="������������"
+ width="200"
+ align="center"
+ />
+ <el-table-column
+ property="alarm_information"
+ label="������������"
+ align="center"
+ />
+ </el-table>
+ <el-pagination
+ :current-page="currentPage"
+ :page-sizes="pageSizes"
+ :page-size="PageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="totalCount"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ <div
+ slot="footer"
+ class="dialog-footer"
+ >
+ <el-button
+ size="mini"
+ @click="alarmTableVisible = false"
+ >
+ ��� ���
+ </el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import 'leaflet/dist/leaflet.css'
+import 'leaflet-velocity/dist/leaflet-velocity.css'
+import L from 'leaflet'
+import _ from 'lodash'
+import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import 'leaflet-velocity/dist/leaflet-velocity'
+import $ from 'jquery'
+import { WWindUtil } from '@/components/Wind/WRatingArr.js'
+import RegionalOverview from '@/components/Wind/RegionalOverview' // ������������������
+import { mapGetters } from 'vuex'
+// import { gcj02towgs84 } from '@/assets/json/transform'
+export default {
+ components: { RegionalOverview },
+ props: {
+ jumpData: Array,
+ weidu: Number,
+ jingdu: Number,
+ monitorPointId: Number,
+ monitorPointIds: Array,
+ defaultData: Array
+ },
+ data () {
+ return {
+ compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
+ compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
+ timerKey: '', // ���������������������������
+ map: null,
+ code: [],
+ latlng: [],
+ noneData: false,
+ params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
+ changeColor: 0,
+ times: 1,
+ sensorKey: 'a34002',
+ keys: [],
+ bg: require('@/assets/images/tl_PM10.png'),
+ windState: 1,
+ windStateText: '���������',
+ keyData: [],
+ lats: [],
+ lngs: [],
+ accountId: this.$store.state.accountId,
+ orgId: this.$store.state.orgId,
+ coordinates: [],
+ markerObject: [],
+ loading: true,
+ ws: null,
+ lockReconnect: false, // ������������������������
+ timeout: 58 * 1000, // 30���������������
+ timeoutObj: null, // ���������������������
+ serverTimeoutObj: null, // ���������������
+ timeoutnum: null, // ������ ���������������,
+ jingduNew: this.jingdu,
+ weiduNew: this.weidu,
+ alartValue: 'all',
+ dateValue: '',
+ factorValue: 'all',
+ // ���������
+ gridData: [],
+ // ���������������������
+ currentPage: 1,
+ // ������������������������������������������(���������������������������)
+ totalCount: 0,
+ // ������������������������������
+ pageSizes: [10, 50, 100, 200],
+ // ������������������������������������������
+ PageSize: 20,
+ factorOptions: [
+ {
+ label: '������������',
+ value: 'all'
+ },
+ {
+ label: 'PM10',
+ value: 'PM10'
+ },
+ {
+ label: 'PM2.5',
+ value: 'PM2.5'
+ },
+ {
+ label: 'SO2',
+ value: 'SO2'
+ },
+ {
+ label: 'NO2',
+ value: 'NO2'
+ },
+ {
+ label: 'CO',
+ value: 'CO'
+ },
+ {
+ label: 'O3',
+ value: 'O3'
+ }
+ ],
+ alertOptions: [
+ {
+ label: '������������������',
+ value: 'all'
+ },
+ {
+ label: '������',
+ value: 'overrun'
+ },
+ {
+ label: '���������',
+ value: 'sudden'
+ },
+ {
+ label: '������������������100%',
+ value: 'state100'
+ },
+ {
+ label: '������������������150%',
+ value: 'state150'
+ },
+ {
+ label: '������������������250%',
+ value: 'state250'
+ },
+ {
+ label: '������������������100%',
+ value: 'city100'
+ },
+ {
+ label: '������������������150%',
+ value: 'city150'
+ },
+ {
+ label: '������������������250%',
+ value: 'city250'
+ }
+ ],
+ currentDate: '',
+ turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
+ showOrHidden: true,
+ dateFormat: '',
+ selectData: new Date(),
+ alarmTableVisible: false,
+ chooseTimeInfo: false, // ������������������������
+ chooseTime: false,
+ dateInfo: '', // ���������������
+ timeInfo: '', // ���������������
+ nyr: '', // ������������������
+ windJsonData: [],
+ clickmac: '',
+ childerItem: {},
+ farterItem: {},
+ indexsLaber: 0
+ }
+ },
+ computed: {
+ ...mapGetters(['regionCode'])
+ },
+ watch: {
+ dateValue (n, o) {
+ // this.newDate()
+ },
+ regionCode (newCode, oldCode) {
+ this.timerKey = newCode // ������������code���������������������������
+ },
+ windJsonData (newCode, oldCode) {
+ this.$nextTick(() => {
+ this.canvasWind(newCode)
+ })
+ }
+ },
+ mounted () {
+ this.currentHour()
+ this.$Bus.$on(
+ 'alarmTableVisible',
+ res => (
+ // eslint-disable-next-line no-sequences
+ (this.alarmTableVisible = res),
+ this.alertData(this.PageSize, this.currentPage)
+ )
+ )
+ // ���������������������
+ this.initMap()
+
+ // ������������
+ this.eventProxy()
+ window.deviceDetail = this.deviceDetail
+ },
+ created () {
+ if (this.$store.state.orgId === 72) {
+ this.changeColor = 1
+ }
+ const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
+ this.jingduNew = newLL[1]
+ this.weiduNew = newLL[0]
+ this.getParamsData(false)
+ // this.windDir()
+ this.newDate()
+ // this.alertData(this.PageSize, this.currentPage)
+ },
+ beforeDestroy () {
+ if (this.timer) {
+ clearInterval(this.timer)
+ }
+ if (this.timer2) {
+ clearInterval(this.timer2)
+ }
+ // ���������������������websocket
+ if (this.ws) {
+ this.ws.close()
+ }
+ },
+ methods: {
+ // ������������������������������
+ getDayXQ (day) {
+ var days = new Date().getDay() // ������
+ var rq = '' // ������
+ if (day === 'today') {
+ rq = this.newData(0)
+ } else if (day === 'yesterday') {
+ days = (days + 7 - 1) % 7
+ rq = this.newData(-1) // ������������
+ } else if (day === 'beforeYea') {
+ days = (days + 7 - 2) % 7
+ rq = this.newData(-2) // ������������
+ }
+ switch (days) {
+ case 1:
+ days = '������'
+ break
+ case 2:
+ days = '������'
+ break
+ case 3:
+ days = '������'
+ break
+ case 4:
+ days = '������'
+ break
+ case 5:
+ days = '������'
+ break
+ case 6:
+ days = '������'
+ break
+ case 0:
+ days = '������'
+ break
+ }
+ return `${rq}(${days})`
+ },
+ // ���������������������������������������
+ newData (day, info) {
+ var today = new Date()
+ var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
+ today.setTime(targetday_milliseconds)
+ var tYear = today.getFullYear()
+ var tMonth = today.getMonth() + 1
+ tMonth = tMonth < 10 ? '0' + tMonth : tMonth
+ var tDate = today.getDate()
+ tDate = tDate < 10 ? '0' + tDate : tDate
+ if (info === 'nyr') {
+ return tYear + '-' + tMonth + '-' + tDate
+ } else {
+ return tMonth + '/' + tDate
+ }
+ },
+ // ������������
+ eventProxy () {
+ // ������������������������������
+ var ul = document.querySelector('#eventPro')
+ var lis = document.querySelectorAll('#eventPro>li')
+ var timeUl = document.querySelector('#timeUl')
+ var timeLis = document.querySelectorAll('#timeUl>li')
+ var mouseDiv = document.querySelector('.mouseDiv')
+ var mouseDiv2 = document.querySelector('.mouseDiv2')
+ var inText = document.querySelector('.inText')
+ var inText2 = document.querySelector('.inText2')
+ var p1 = document.querySelector('.p1')
+ var p2 = document.querySelector('.p2')
+ var p3 = document.querySelector('.p3')
+ p3.innerHTML = this.getDayXQ('today')
+ p2.innerHTML = this.getDayXQ('yesterday')
+ p1.innerHTML = this.getDayXQ('beforeYea')
+ var greenInfo = 0
+ var that = this
+ ul.onclick = e => {
+ var target = e.target
+ if (target.tagName.toLowerCase() === 'li') {
+ // ������������li���������������������
+ for (let i = 0; i < lis.length; i++) {
+ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
+ }
+ // var li = this.querySelectorAll('li')
+ // var index = Array.prototype.indexOf.call(li, target)
+ for (let i = 0; i < lis.length; i++) {
+ lis[i].style.backgroundColor = 'green'
+ if (lis[i] === target) {
+ // mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+ mouseDiv2.style.left = 1.36986 * (i + 1) + '%'
+ mouseDiv2.style.transform = 'translateX(-50%)'
+ mouseDiv2.style.display = 'block'
+ var times = (i - 0 + 1) % 24
+ times = times > 9 ? times : '0' + times
+ inText2.innerHTML = times + ':00'
+ this.chooseTimeInfo = true // ���������������
+ this.chooseTime = true // ���������������
+ if ((i + 1) / 24 < 1) {
+ this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
+ } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
+ this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
+ } else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
+ this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
+ } else {
+ this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
+ }
+ break
+ }
+ }
+ }
+ that.times = 1
+ that.getParamsData(true)
+ }
+ // timeUl������������������
+ timeUl.onclick = e => {
+ // ������������li���������������������
+ var target = e.target
+ if (target.tagName.toLowerCase() === 'li') {
+ for (let i = 0; i < timeLis.length; i++) {
+ if (timeLis[i] === target) {
+ greenInfo = i
+ // mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
+ mouseDiv2.style.left = 1.36986 * i + '%'
+ mouseDiv2.style.transform = 'translateX(-50%)'
+ mouseDiv2.style.display = 'block'
+ var times = i % 24
+ times = times > 9 ? times : '0' + times
+ inText2.innerHTML = times + ':00'
+ this.chooseTimeInfo = true // ���������������
+ this.chooseTime = true // ���������������
+ if (i / 24 < 1) {
+ this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
+ } else if (i / 24 < 2 && i / 24 >= 1) {
+ this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
+ } else if (i / 24 < 3 && i / 24 >= 2) {
+ this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
+ } else {
+ this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
+ }
+ break
+ }
+ }
+ for (let i = 0; i < lis.length; i++) {
+ if (i < greenInfo) {
+ lis[i].style.backgroundColor = 'green'
+ } else {
+ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
+ }
+ }
+ }
+ that.times = 1
+ that.getParamsData(true)
+ }
+ // ������������������������
+ for (let i = 0; i < lis.length; i++) {
+ lis[i].onmouseenter = function () {
+ mouseDiv.style.transform = 'translateX(-50%)'
+ mouseDiv.style.left = 1.36986 * (i + 1) + '%'
+ mouseDiv.style.display = 'block'
+ var times = (i - 0 + 1) % 24
+ times = times > 9 ? times : '0' + times
+ inText.innerHTML = times + ':00'
+ }
+ lis[i].onmouseleave = function () {
+ mouseDiv.style.display = 'none'
+ }
+ }
+ for (let i = 0; i < timeLis.length; i++) {
+ timeLis[i].onmouseenter = function () {
+ mouseDiv.style.left = 1.36986 * i + '%'
+ mouseDiv.style.transform = 'translateX(-50%)'
+ mouseDiv.style.display = 'block'
+ var times = i % 24
+ times = times > 9 ? times : '0' + times
+ inText.innerHTML = times + ':00'
+ }
+ timeLis[i].onmouseleave = function () {
+ mouseDiv.style.display = 'none'
+ }
+ }
+ },
+ // ���������������������
+ currentHour () {
+ // const aData = new Date()
+ // const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
+ // const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
+ // const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
+ // const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
+ // this.dateFormat = currentDate.toString()
+ const aData = new Date()
+ const month =
+ aData.getMonth() < 9
+ ? '0' + (aData.getMonth() + 1)
+ : aData.getMonth() + 1
+ const date =
+ aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
+ const hour = aData.getHours()
+ const currentDate =
+ aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
+ this.dateFormat = currentDate.toString()
+ },
+ // ���������������
+ newDate () {
+ var aData = new Date()
+ var month =
+ aData.getMonth() < 9
+ ? '0' + (aData.getMonth() + 1)
+ : aData.getMonth() + 1
+ var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
+ this.currentDate = aData.getFullYear() + '-' + month + '-' + date
+ this.dateValue = [this.currentDate, this.currentDate]
+ },
+ // ������������������
+ mouseOver () {
+ this.map.scrollWheelZoom.disable()
+ },
+ // ������������������
+ mouseLeave () {
+ this.map.scrollWheelZoom.enable()
+ },
+ // ���������������������������������
+ bd09togcj02 (bd_lon, bd_lat) {
+ var x_pi = (3.14159265358979324 * 3000.0) / 180.0
+ var x = bd_lon - 0.0065
+ var y = bd_lat - 0.006
+ var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
+ var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
+ var gg_lng = z * Math.cos(theta)
+ var gg_lat = z * Math.sin(theta)
+ return [gg_lat, gg_lng]
+ },
+ // ������������������,���������
+ deviceMaker () {
+ if (this.map) {
+ this.map.eachLayer(function (layer) {
+ // ���������������������������
+ if (
+ !layer._container &&
+ ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ 'leaflet-layer'
+ ) {
+ layer.remove()
+ }
+ })
+ }
+ this.$request({
+ url: '/historyFiveMinutely/queryDeviceAndData',
+ method: 'get',
+ params: {
+ sensorCode: this.sensorKey,
+ organizationId: this.$store.state.orgId,
+ regionCode: this.$store.state.regionCode,
+ chooseTime: this.chooseTime,
+ time: this.nyr
+ }
+ }).then(data => {
+ this.markDeviceSite(data)
+ })
+ },
+ // ���������������
+ markDeviceSite (data) {
+ var keyData = data.data.devices
+ this.keyData = data.data.devices
+ // ���������������������
+ // this.stateControlStation()
+ var groupIcon = L.layerGroup().addTo(this.map)
+ var groupText = L.layerGroup().addTo(this.map)
+ this.keys = []
+ for (let i = 0; i < keyData.length; i++) {
+ if (keyData[i].a34002) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
+ } else if (keyData[i].a34004) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
+ } else if (keyData[i].a21026) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
+ } else if (keyData[i].a21004) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
+ } else if (keyData[i].a21005) {
+ this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
+ } else if (keyData[i].a05024) {
+ this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
+ } else if (keyData[i].a99054) {
+ this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
+ } else {
+ // for (let j = 0; j < keyData.length; j++) {
+ this.keys.push(JSON.parse('null'))
+ // }
+ }
+ var lat = keyData[i].latitude
+ this.lats[i] = keyData[i].latitude
+ var lng = keyData[i].longitude
+ this.lngs[i] = keyData[i].longitude
+ // ������������key������������������������������������������������
+ var colorNum = 7
+ if (keyData[i].a34002) {
+ let data = Math.floor(JSON.parse(keyData[i].a34002))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 50: {
+ colorNum = 1
+ break
+ }
+ case data <= 150: {
+ colorNum = 2
+ break
+ }
+ case data <= 250: {
+ colorNum = 3
+ break
+ }
+ case data <= 350: {
+ colorNum = 4
+ break
+ }
+ case data <= 420: {
+ colorNum = 5
+ break
+ }
+ case data > 420: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a34004) {
+ let data = Math.floor(JSON.parse(keyData[i].a34004))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 35: {
+ colorNum = 1
+ break
+ }
+ case data <= 75: {
+ colorNum = 2
+ break
+ }
+ case data <= 115: {
+ colorNum = 3
+ break
+ }
+ case data <= 150: {
+ colorNum = 4
+ break
+ }
+ case data <= 250: {
+ colorNum = 5
+ break
+ }
+ case data > 250: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a21026) {
+ let data = Math.floor(JSON.parse(keyData[i].a21026))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 50: {
+ colorNum = 1
+ break
+ }
+ case data <= 150: {
+ colorNum = 2
+ break
+ }
+ case data <= 475: {
+ colorNum = 3
+ break
+ }
+ case data <= 800: {
+ colorNum = 4
+ break
+ }
+ case data <= 1600: {
+ colorNum = 5
+ break
+ }
+ case data > 1600: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a21004) {
+ let data = Math.floor(
+ Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
+ )
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 40: {
+ colorNum = 1
+ break
+ }
+ case data <= 80: {
+ colorNum = 2
+ break
+ }
+ case data <= 180: {
+ colorNum = 3
+ break
+ }
+ case data <= 280: {
+ colorNum = 4
+ break
+ }
+ case data <= 565: {
+ colorNum = 5
+ break
+ }
+ case data > 565: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a21005) {
+ let data = JSON.parse(keyData[i].a21005).toFixed(3)
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 2: {
+ colorNum = 1
+ break
+ }
+ case data <= 4: {
+ colorNum = 2
+ break
+ }
+ case data <= 14: {
+ colorNum = 3
+ break
+ }
+ case data <= 24: {
+ colorNum = 4
+ break
+ }
+ case data <= 36: {
+ colorNum = 5
+ break
+ }
+ case data > 36: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a05024) {
+ let data = Math.floor(JSON.parse(keyData[i].a05024))
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 160: {
+ colorNum = 1
+ break
+ }
+ case data <= 200: {
+ colorNum = 2
+ break
+ }
+ case data <= 300: {
+ colorNum = 3
+ break
+ }
+ case data <= 400: {
+ colorNum = 4
+ break
+ }
+ case data <= 800: {
+ colorNum = 5
+ break
+ }
+ case data > 800: {
+ colorNum = 6
+ break
+ }
+ default:
+ break
+ }
+ } else if (keyData[i].a99054) {
+ let data = JSON.parse(keyData[i].a99054).toFixed(3)
+ switch (true) {
+ case data < 0: {
+ colorNum = 7
+ break
+ }
+ case data === 0: {
+ colorNum = 0
+ break
+ }
+ case data <= 0.5: {
+ colorNum = 1
+ break
+ }
+ case data <= 1: {
+ colorNum = 2
+ break
+ }
+ case data <= 1.5: {
+ colorNum = 3
+ break
+ }
+ case data <= 2: {
+ colorNum = 4
+ break
+ }
+ case data <= 3: {
+ colorNum = 5
+ break
+ }
+ case data > 3: {
+ colorNum = 6
+ break
+ }
+ // default:
+ // break
+ }
+ }
+
+ var blueIcon = L.icon({
+ iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
+ // iconUrl: require('@/assets/icon/ico2.png'),
+ iconSize: [60, 60],
+ iconAnchor: [30, 48],
+ className: 'my-device'
+ })
+
+ // ���������������������
+ const iconMarker = L.marker([lat, lng], {
+ icon: blueIcon
+ })
+ groupIcon.addLayer(iconMarker)
+ var myIcon = L.divIcon({
+ html: this.keys[i],
+ className: 'my-div-icon',
+ iconSize: [60, 60],
+ iconAnchor: [40, 40]
+ })
+
+ const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+ TexteMarker.inforData = keyData[i]
+ groupText.addLayer(TexteMarker)
+ const _this = this
+ // ������������������������������������mouseover���������������
+ TexteMarker.on('click', function (e) {
+ const MarkerTarget = e.target
+ // _this.getMarkerInfor(keyData[i], MarkerTarget)
+ this.noneData = false
+ // const _this = e.target.vuecontext
+ _this.handleClick(keyData[i], MarkerTarget)
+ })
+ // ������������������������������������
+ // TexteMarker.on('mouseout', function(e) {
+ // this.noneData = false
+ // this.bindPopup().closePopup()
+ // })
+ }
+ },
+ styleBgColor (keyName) {
+ let bgColorList = {
+ pm25colorbg: '',
+ pm10colorbg: '',
+ so2colorbg: '', // ������������
+ no210colorbg: '', // ������������
+ cocolorbg: '', // ������������
+ o3colorbg: '', // ������
+ tvoccolorbg: '' // TVOC
+ }
+
+ let data = ''
+ // eslint-disable-next-line no-unused-vars
+ for (let i in keyName) {
+ if (i === 'a34002') {
+ data = Math.floor(JSON.parse(keyName.a34002) || 0)
+ switch (true) {
+ case data < 0: {
+ bgColorList.pm10colorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.pm10colorbg = '#688fb1'
+ break
+ }
+ case data <= 50: {
+ bgColorList.pm10colorbg = '#00ff01'
+ break
+ }
+ case data <= 150: {
+ bgColorList.pm10colorbg = '#fdfe00'
+ break
+ }
+ case data <= 250: {
+ bgColorList.pm10colorbg = '#fd8102'
+ break
+ }
+ case data <= 350: {
+ bgColorList.pm10colorbg = '#fc0101'
+ break
+ }
+ case data <= 420: {
+ bgColorList.pm10colorbg = '#c00261'
+ break
+ }
+ case data > 420: {
+ bgColorList.pm10colorbg = '#9f012f'
+ break
+ }
+ default:
+ break
+ }
+ } else if (i === 'a34004') {
+ data = Math.floor(JSON.parse(keyName.a34004) || 0)
+ switch (true) {
+ case data < 0: {
+ bgColorList.pm25colorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.pm25colorbg = '#688fb1'
+ break
+ }
+ case data <= 35: {
+ bgColorList.pm25colorbg = '#00ff01'
+ break
+ }
+ case data <= 75: {
+ bgColorList.pm25colorbg = '#fdfe00'
+ break
+ }
+ case data <= 115: {
+ bgColorList.pm25colorbg = '#fd8102'
+ break
+ }
+ case data <= 150: {
+ bgColorList.pm25colorbg = '#fc0101'
+ break
+ }
+ case data <= 250: {
+ bgColorList.pm25colorbg = '#c00261'
+ break
+ }
+ case data > 250: {
+ bgColorList.pm25colorbg = '#9f012f'
+ break
+ }
+ default:
+ break
+ }
+ } else if (i === 'a21026') {
+ data = Math.floor(JSON.parse(keyName.a21026) || 0)
+ switch (true) {
+ case data < 0: {
+ bgColorList.so2colorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.so2colorbg = '#688fb1'
+ break
+ }
+ case data <= 50: {
+ bgColorList.so2colorbg = '#00ff01'
+ break
+ }
+ case data <= 150: {
+ bgColorList.so2colorbg = '#fdfe00'
+ break
+ }
+ case data <= 475: {
+ bgColorList.so2colorbg = '#fd8102'
+ break
+ }
+ case data <= 800: {
+ bgColorList.so2colorbg = '#fc0101'
+ break
+ }
+ case data <= 1600: {
+ bgColorList.so2colorbg = '#c00261'
+ break
+ }
+ case data > 1600: {
+ bgColorList.so2colorbg = '#9f012f'
+ break
+ }
+ default:
+ break
+ }
+ } else if (i === 'a21004') {
+ data = Math.floor(
+ Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))
+ )
+ switch (true) {
+ case data < 0: {
+ bgColorList.no210colorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.no210colorbg = '#688fb1'
+ break
+ }
+ case data <= 40: {
+ bgColorList.no210colorbg = '#00ff01'
+ break
+ }
+ case data <= 80: {
+ bgColorList.no210colorbg = '#fdfe00'
+ break
+ }
+ case data <= 180: {
+ bgColorList.no210colorbg = '#fd8102'
+ break
+ }
+ case data <= 280: {
+ bgColorList.no210colorbg = '#fc0101'
+ break
+ }
+ case data <= 565: {
+ bgColorList.no210colorbg = '#c00261'
+ break
+ }
+ case data > 565: {
+ bgColorList.no210colorbg = '#9f012f'
+ break
+ }
+ default:
+ break
+ }
+ } else if (i === 'a21005') {
+ data = JSON.parse(keyName.a21005 || 0).toFixed(3)
+ switch (true) {
+ case data < 0: {
+ bgColorList.cocolorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.cocolorbg = '#688fb1'
+ break
+ }
+ case data <= 2: {
+ bgColorList.cocolorbg = '#00ff01'
+ break
+ }
+ case data <= 4: {
+ bgColorList.cocolorbg = '#fdfe00'
+ break
+ }
+ case data <= 14: {
+ bgColorList.cocolorbg = '#fd8102'
+ break
+ }
+ case data <= 24: {
+ bgColorList.cocolorbg = '#fc0101'
+ break
+ }
+ case data <= 36: {
+ bgColorList.cocolorbg = '#c00261'
+ break
+ }
+ case data > 36: {
+ bgColorList.cocolorbg = '#9f012f'
+ break
+ }
+ default:
+ break
+ }
+ } else if (i === 'a05024') {
+ data = Math.floor(JSON.parse(keyName.a05024) || 0)
+ switch (true) {
+ case data < 0: {
+ bgColorList.o3colorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.o3colorbg = '#688fb1'
+ break
+ }
+ case data <= 160: {
+ bgColorList.o3colorbg = '#00ff01'
+ break
+ }
+ case data <= 200: {
+ bgColorList.o3colorbg = '#fdfe00'
+ break
+ }
+ case data <= 300: {
+ bgColorList.o3colorbg = '#fd8102'
+ break
+ }
+ case data <= 400: {
+ bgColorList.o3colorbg = '#fc0101'
+ break
+ }
+ case data <= 800: {
+ bgColorList.o3colorbg = '#c00261'
+ break
+ }
+ case data > 800: {
+ bgColorList.o3colorbg = '#9f012f'
+ break
+ }
+ default:
+ break
+ }
+ } else if (i === 'a99054') {
+ data = JSON.parse(keyName.a99054 || 0).toFixed(3)
+ switch (true) {
+ case data < 0: {
+ bgColorList.tvoccolorbg = '#999999'
+ break
+ }
+ case data === 0: {
+ bgColorList.tvoccolorbg = '#688fb1'
+ break
+ }
+ case data <= 0.5: {
+ bgColorList.tvoccolorbg = '#00ff01'
+ break
+ }
+ case data <= 1: {
+ bgColorList.tvoccolorbg = '#fdfe00'
+ break
+ }
+ case data <= 1.5: {
+ bgColorList.tvoccolorbg = '#fd8102'
+ break
+ }
+ case data <= 2: {
+ bgColorList.tvoccolorbg = '#fc0101'
+ break
+ }
+ case data <= 3: {
+ bgColorList.tvoccolorbg = '#c00261'
+ break
+ }
+ case data > 3: {
+ bgColorList.tvoccolorbg = '#9f012f'
+ break
+ }
+ // default:
+ // break
+ }
+ }
+ }
+ return bgColorList
+ },
+ deviceDetail () {
+ console.log('this.farterItem', this.clickmac)
+ console.log('this.childerItem', this.childerItem)
+ this.monitorPointInfo = this.farterItem
+
+ this.$router.push({
+ name: 'deviceDetail',
+ params: {
+ monitorPointInfo: this.farterItem,
+ device: this.childerItem,
+ macName: this.clickmac,
+ indexs: this.indexsLaber,
+ items: [this.childerItem.latitude, this.childerItem.longitude]
+ },
+ query: {
+ monitorPointInfo: JSON.stringify(this.farterItem),
+ device: JSON.stringify(this.childerItem),
+ macName: this.clickmac,
+ indexs: this.indexsLaber,
+ items: [this.childerItem.latitude, this.childerItem.longitude]
+ }
+ })
+ },
+ handleClick (data, marker) {
+ this.clickmac = ''
+ this.childerItem = {}
+ this.farterItem = {}
+ this.indexsLaber = 0
+ this.clickmac = marker.inforData.mac
+ this.childerItem = marker.inforData
+ console.log('this.defaultData', this.defaultData)
+ this.defaultData.forEach(item => {
+ if (item.devices) {
+ item.devices.forEach((dev, index) => {
+ if (dev.mac === marker.inforData.mac) {
+ this.farterItem = item
+ this.indexsLaber = index
+ }
+ })
+ }
+ })
+ this.$request({
+ url: '/historyFiveMinutely/queryFiveDataByMac',
+ method: 'get',
+ params: {
+ mac: data.mac,
+ chooseTime: this.chooseTime,
+ time: this.nyr
+ }
+ })
+ .then(res => {
+ if (res.message === '���������������������') {
+ var datafalse = '���������������������'
+ marker.bindPopup(datafalse).openPopup()
+ return
+ }
+ this.childerItem.name = res.data.name
+ let colorliststyleBgColor = this.styleBgColor(res.data)
+ console.log('colorliststyleBgColor', colorliststyleBgColor)
+ let deviceDetails = _.cloneDeep(res.data)
+ // eslint-disable-next-line no-unused-vars
+ for (let key in deviceDetails) {
+ if (deviceDetails[key] === null) {
+ deviceDetails[key] = '-'
+ }
+ }
+ console.log('deviceDetails', deviceDetails)
+ let windTip = 'inline'
+ let windDeg = 0
+ let windDir = ''
+ let dushu =
+ deviceDetails.a01008 === '-'
+ ? '-'
+ : JSON.parse(deviceDetails.a01008).toFixed(0)
+ let levelNumber =
+ deviceDetails.a01007 === '-'
+ ? '0.0'
+ : Number(deviceDetails.a01007).toFixed(1)
+ let level =
+ deviceDetails.a01007 === '0.0'
+ ? '-'
+ : WWindUtil.WindtoLevel(levelNumber).name
+ console.log('level', level)
+ if (deviceDetails.a01008) {
+ var windDirs = dushu === '-' ? 0 : Number(dushu)
+ WWindUtil.windValueFormat(windDirs)
+ console.log('windDirs', WWindUtil.windValueFormat(windDirs))
+ windDeg = windDirs
+ windTip = 'inline'
+ if (windDirs === 0 || windDirs === '-') {
+ windDir = '-'
+ windTip = 'none'
+ } else {
+ windDir = WWindUtil.windValueFormat(windDirs)
+ windTip = 'inline'
+ }
+ }
+ // ������������������������������
+ let htmlClassName = 'mypopup'
+ let html = ` <div data-reactroot="" class="marker_maptip">
+ <div class="marker_title_1nQ">
+ <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>������������</span>
+ </div>
+ <div class="marker_firstline_2WH">
+ <div class="marker_citypart_keg">
+ <div class="marker_name_small_1VU">${deviceDetails.name}</div>
+ <div class="marker_time_w5m">${deviceDetails.dataTime}</div>
+ </div>
+ <div class="marker_indexpart_2UI">
+ <div
+ class="marker_indexname_3TP"
+ style="color: black;background:${
+ colorliststyleBgColor.tvoccolorbg
+}"
+ >
+ TVOC
+ </div>
+ <div class="marker_indexvalue_1O7">
+ ${this.handleCutZero(deviceDetails.a99054)}
+ </div>
+ </div>
+ </div>
+ <div class="marker_secondline_2Om">
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${
+ colorliststyleBgColor.pm25colorbg
+} "
+ >
+ PM2.5
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a34004)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${
+ colorliststyleBgColor.pm10colorbg
+}"
+ >
+ PM10
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a34002)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${
+ colorliststyleBgColor.so2colorbg
+}"
+ >
+ SO2
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a21026)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${
+ colorliststyleBgColor.no210colorbg
+}"
+ >
+ NO2
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a21004)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${colorliststyleBgColor.cocolorbg}"
+ >
+ CO
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a21005)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black; background:${colorliststyleBgColor.o3colorbg}"
+ >
+ O3
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a05024)}
+ </div>
+ </div>
+ </div>
+ <div class='windBox'>
+ <div style="position: relative;width: 50%;text-align: center;color: #999;border-right: 1px dotted #999;" clss='windIcon'>
+ <img style="width:140px; height:140px" src=${this.compassBg}>
+ <img style="width: 40px;height: 40px;position: absolute;left: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg);display: ${windTip};"
+ src=${this.compassDirection}
+ >
+ </div>
+ <div class='windInfor'>
+ <div v-if="false">������: ${windDir} ( ${dushu} �� )</div>
+ <div>������: ${levelNumber} m/s</div>
+ <div>������: ${level}</div>
+ </div>
+ </div>
+
+ </div>`
+ if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') {
+ htmlClassName = 'mypopupNoWind'
+ html = ` <div data-reactroot="" class="marker_maptip">
+ <div class="marker_title_1nQ">
+ <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>������������</span>
+ </div>
+ <div class="marker_firstline_2WH">
+ <div class="marker_citypart_keg">
+ <div class="marker_name_small_1VU">${deviceDetails.name}</div>
+ <div class="marker_time_w5m">${deviceDetails.dataTime}</div>
+ </div>
+ <div class="marker_indexpart_2UI">
+ <div
+ class="marker_indexname_3TP"
+ style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"
+ >
+ TVOC
+ </div>
+ <div class="marker_indexvalue_1O7">
+ ${this.handleCutZero(deviceDetails.a99054)}
+ </div>
+ </div>
+ </div>
+ <div class="marker_secondline_2Om">
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${colorliststyleBgColor.pm25colorbg} "
+ >
+ PM2.5
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a34004)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${colorliststyleBgColor.pm10colorbg}"
+ >
+ PM10
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a34002)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${colorliststyleBgColor.so2colorbg}"
+ >
+ SO2
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a21026)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${colorliststyleBgColor.no210colorbg}"
+ >
+ NO2
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a21004)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black;background:${colorliststyleBgColor.cocolorbg}"
+ >
+ CO
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a21005)}
+ </div>
+ </div>
+ <div class="marker_item_2Kk">
+ <div
+ class="marker_itemname_Wq5"
+ style="color: black; background:${colorliststyleBgColor.o3colorbg}"
+ >
+ O3
+ </div>
+ <div class="marker_itemvalue_1l1">
+ ${this.handleCutZero(deviceDetails.a05024)}
+ </div>
+ </div>
+ </div>
+ </div>`
+ }
+ marker.bindPopup(html, { className: htmlClassName }).openPopup()
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ },
+ handleCutZero (data) {
+ let num = data.substring(0, data.indexOf('.') + 4)
+ // ������������ ������������������������
+ // let num = Number(data).toFixed(3).toString()
+ let newstr = num
+ // ������������ ������������������
+ let leng = num.length - num.indexOf('.') - 1
+ // ���������������������
+ if (num.indexOf('.') > -1) {
+ // ������������������
+ for (let i = leng; i > 0; i--) {
+ // ������newstr���������0
+ if (
+ newstr.lastIndexOf('0') > -1 &&
+ newstr.substr(newstr.length - 1, 1) === 0
+ ) {
+ let k = newstr.lastIndexOf('0')
+ // ������������������������������0 ���������������
+ if (newstr.charAt(k - 1) === '.') {
+ return newstr.substring(0, k - 1)
+ } else {
+ // ������ ������������0
+ newstr = newstr.substring(0, k)
+ }
+ } else {
+ // ������������������0
+ return newstr
+ }
+ }
+ }
+ return num
+ },
+ getMarkerInfor (data, marker) {
+ this.$request({
+ url: '/historyFiveMinutely/queryPopDataByMac',
+ method: 'get',
+ params: {
+ mac: data.mac,
+ chooseTime: this.chooseTime,
+ time: this.nyr
+ }
+ })
+ .then(res => {
+ if (res.message === '���������������������') {
+ var datafalse = '���������������������'
+ this.bindPopup(datafalse).openPopup()
+ return
+ }
+ // eslint-disable-next-line no-unused-vars
+ for (const key in res.data) {
+ var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
+ if (key !== '������' && key !== '������') {
+ if (Number(tempDecimal) === 0) {
+ res.data[key] =
+ parseInt(res.data[key]) + res.data[key].split(' ')[1]
+ } else {
+ res.data[key] =
+ Number(res.data[key].split(' ')[0]).toFixed(2) +
+ res.data[key].split(' ')[1]
+ }
+ }
+ }
+ var data = JSON.stringify(res.data)
+ .replace(/,/g, `<br>`)
+ .replace(/{|}|"/g, '')
+ console.log(data)
+ marker.bindPopup(data).openPopup()
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ return data
+ },
+ // ���������������
+ windDir () {
+ // console.log('������������')
+ // console.log('���������ws������������')
+ // const that = this
+ // ������������������
+ if (this.map) {
+ this.map.eachLayer(function (layer) {
+ // ���������������������������
+ if (
+ !layer._container &&
+ ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ 'leaflet-layer'
+ ) {
+ layer.remove()
+ }
+ })
+ }
+ // ���������������������������
+ this.deviceMaker()
+ },
+ // ���������������������regionCode���������������api������
+ getRegionApiRequest () {
+ this.getParamsData(true)
+ setTimeout(() => {
+ $.getJSON(
+ 'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
+ { monitorPointId: this.$store.state.monitorPointId },
+ data => {
+ this.map.setView([data[2], data[1]], 12)
+ // console.log('������������')
+ }
+ )
+ }, 1000)
+ },
+ // ���������������������������������������
+ jumpMap (LngLat) {
+ this.map.setView(LngLat, 18)
+ },
+ // ������������������������
+ getParamsData (isFirst = true) {
+ clearInterval(this.timer)
+ this.timer = setInterval(() => {
+ this.currentHour()
+ this.times--
+ if (this.times === 0) {
+ // ���������������������������
+ if (!this.chooseTimeInfo) {
+ var mouseDiv2 = document.querySelector('.mouseDiv2')
+ mouseDiv2.style.display = 'none'
+ var lis = document.querySelectorAll('#eventPro>li')
+ for (let i = 0; i < lis.length; i++) {
+ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
+ }
+ this.chooseTime = false
+ // console.log('rgb000')
+ } else {
+ this.chooseTimeInfo = false
+ // console.log('else')
+ }
+ setTimeout(() => {
+ console.log('change', isFirst)
+ if (isFirst) {
+ this.windData()
+ this.deviceMaker()
+ } else {
+ this.change(this.changeColor)
+ }
+ this.times = 300
+ }, 100)
+ }
+ }, 1000)
+ },
+ findLayer (layerName) {
+ // ������������������������������
+ if (!this.map) {
+ return null
+ }
+ const gisMap_layers = this.map._layers
+ let layer = null
+ // eslint-disable-next-line no-unused-vars
+ for (const i in gisMap_layers) {
+ if (gisMap_layers[i].options.id === layerName) {
+ layer = gisMap_layers[i]
+ }
+ }
+ return layer
+ },
+ // ���������������������
+ initMap () {
+ var map = L.map('mapContent', {
+ inertia: false,
+ minZoom: 2,
+ maxZoom: 18,
+ center: [this.weiduNew, this.jingduNew],
+ zoom: 14,
+ renderer: L.canvas(),
+ zoomControl: false, // ������������
+ attributionControl: false, // ���������������logol
+ crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
+ })
+ // ������������������
+ L.tileLayer(
+ 'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+ ).addTo(map)
+ this.map = map // data���������������
+ // const that = this
+ // this.map.on('mousedown', function(ev) {
+ // const res = that.findLayer('wmsid')
+ // if (res) {
+ // that.map.removeLayer(res)
+ // }
+ // })
+ // this.map.on('mouseup', function(ev) {
+ // console.log('1111111')
+ // that.canvasWind(this.windJsonData)
+ // })
+ window.map = map
+ },
+ changeData (val) {
+ this.nyr = val + ':00'
+ this.chooseTime = true
+ this.initData()
+ },
+ // ������������������������
+ change (index) {
+ this.changeColor = index
+ var pr = ''
+ switch (index) {
+ case 0:
+ pr = 'a34002'
+ this.bg = require('@/assets/images/tl_PM10.png')
+ break
+ case 1:
+ pr = 'a34004'
+ this.bg = require('@/assets/images/tl_PM2.5.png')
+ break
+ case 2:
+ pr = 'a21026'
+ this.bg = require('@/assets/images/tl_SO2.png')
+ break
+ case 3:
+ pr = 'a21004'
+ this.bg = require('@/assets/images/tl_NO2.png')
+ break
+ case 4:
+ pr = 'a21005'
+ this.bg = require('@/assets/images/tl_CO.png')
+ break
+ case 5:
+ pr = 'a05024'
+ this.bg = require('@/assets/images/tl_O3.png')
+ break
+ case 6:
+ pr = 'a99054'
+ this.bg = require('@/assets/images/tl_TVOCNew.png')
+ break
+ }
+ this.sensorKey = pr
+ // ������������������
+ // this.toggleWindState()
+ if (this.windState === 1) {
+ this.deviceMaker()
+ this.windData()
+ } else if (this.windState === 2) {
+ this.windDir()
+ }
+ },
+ // ���������������������
+ initData () {
+ if (this.map) {
+ this.map.eachLayer(function (layer) {
+ // ���������������������������
+ if (
+ !layer._container &&
+ ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ 'leaflet-layer'
+ ) {
+ layer.remove()
+ }
+ })
+ }
+ this.deviceMaker()
+ this.windData()
+ },
+ // ���������������
+ windData () {
+ this.$request({
+ url: '/monitorPoint/getWindData',
+ method: 'get',
+ params: {
+ monitorPointIds: this.monitorPointIds.toString(),
+ chooseTime: this.chooseTime,
+ time: this.nyr
+ }
+ })
+ .then(res => {
+ this.windJsonData = res.data[0]
+ return this.windJsonData
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ },
+ canvasWind (data) {
+ const res = this.findLayer('wmsid')
+ if (res) {
+ this.map.removeLayer(res)
+ }
+ var velocityLayer = L.velocityLayer({
+ displayValues: false, // ���������������������������������������������������
+ id: 'wmsid',
+ displayOptions: {
+ // ������������������
+ // velocityType: 'Global Wind',
+ velocityType: 'GBR Wind',
+ displayPosition: 'bottomleft',
+ displayEmptyString: 'No wind data'
+ },
+ data: data, // ������ ���������������
+ // data: data2,
+ // ������������������������������������������
+ minVelocity: 0, // ��������������������� m/s ���
+ maxVelocity: 8, // ��������������������� m/s ���
+ velocityScale: 0.1, // ��������������� ( ������������������������ )
+ particleAge: 90, // ������������������������������������������
+ lineWidth: 1.5, // ���������������������
+ particleMultiplier: 1 / 300, // ��������������������� ������������ ���
+ frameRate: 15, // ���������������������
+ colorScale: [
+ '#A2D839',
+ '#7EB530',
+ '#6E9F26',
+ '#4E7522',
+ '#345B1B',
+ '#186303',
+ '#175103',
+ '#053F03'
+ ]
+ // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
+ })
+ velocityLayer.addTo(this.map) // ���������������
+ setTimeout(() => {
+ this.loading = false
+ }, 1000)
+ },
+ // ������������������������������������������������������������������
+ alertData (n1, n2) {
+ // ������������axios���������������������������
+ this.$request({
+ url: '/alarmInfo/getDataByConditionWithoutPage',
+ method: 'get',
+ params: {
+ organization_id: this.$store.state.orgId,
+ // ���������������������
+ // size: n1,
+ // ���������������
+ // current: n2,
+ startTime: this.dateValue[0],
+ endTime: this.dateValue[1],
+ index: this.factorValue,
+ alarmType: this.alartValue
+ }
+ }).then(res => {
+ // console.log('������������')
+ // console.log(res)
+ var tempData = res.data
+ // console.log(tempData)
+ for (let i = 0; i < tempData.alarmInfos.length; i++) {
+ tempData.alarmInfos[i].alarmInfoId = i + 1
+ }
+ // ������������������tableData
+ this.gridData = tempData.alarmInfos
+ // ���������������������������totalCount
+ this.totalCount = tempData.alarmInfos.length
+ })
+ },
+ // ������
+ // ���������������������
+ handleSizeChange (val) {
+ // ���������������������������
+ this.PageSize = val
+ // ���������������������������������������������������������������������������
+ this.currentPage = 1
+ },
+ // ���������������
+ handleCurrentChange (val) {
+ // ���������������������
+ this.currentPage = val
+ // console.log(val)
+ },
+ // ���������������
+ tableCellClassName ({ row, column, rowIndex, columnIndex }) {
+ // eslint-disable-next-line no-unused-vars
+ for (const key in row) {
+ if (key === column.property) {
+ const code = column.property
+ if (code === 'alarm_type') {
+ // console.log(row[key])
+ if (row[key] === 0 || row[key] === '' || row[key] === null) {
+ return ''
+ } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) {
+ return 'yellow'
+ } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) {
+ return 'orange'
+ } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) {
+ return 'red'
+ }
+ }
+ }
+ }
+ return ''
+ },
+ turnState () {
+ // console.log(this.showOrHidden)
+ if (this.showOrHidden === true) {
+ this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
+ } else {
+ this.turnImg = require('@/assets/images/regionalOverview/putAway.png')
+ }
+ this.showOrHidden = !this.showOrHidden
+ },
+ // ������������������
+ stateControlStation () {
+ // this.$axios.get('monitorPoint/queryStateControlStation', {
+ this.$request({
+ url: '/govMonitorPoint/queryStateControlStation',
+ method: 'get',
+ params: {
+ regionCode: 130900,
+ sensorCode: 'a34002'
+ }
+ })
+ .then(res => {
+ // console.log('���������������')
+ // console.log(res)
+ var gkData = res.data
+ var group = L.layerGroup().addTo(this.map)
+ for (let i = 0; i < gkData.length; i++) {
+ var glat = gkData[i].latitude
+ var glng = gkData[i].longitude
+ var gIcon = L.icon({
+ iconUrl: require('@/assets/icon/gk.png'),
+ // iconUrl:require('@/assets/images/tl_PM10.png'),
+ iconSize: [55, 55],
+ iconAnchor: [13, 21],
+ className: 'my-device'
+ })
+ // ���������������������
+ L.marker([glat, glng], {
+ icon: gIcon
+ }).addTo(group)
+ var myIcon = L.divIcon({
+ html: gkData[i].data,
+ className: 'my-div-icon-g',
+ iconSize: 30
+ })
+ L.marker([glat, glng], {
+ icon: myIcon
+ }).addTo(group)
+ }
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ },
+ // ������������������������
+ toggleWindState () {
+ if (this.ws) {
+ this.ws.close()
+ }
+ if (this.windState === 2) {
+ this.windState = 1
+ this.windStateText = '���������'
+ this.initData()
+ // console.log(this.windState)
+ } else if (this.windState === 1) {
+ this.windState = 2
+ this.windStateText = '���������'
+ this.windDir()
+ // console.log(this.windState)
+ }
+ },
+ closeAlarmTableVisible () {
+ this.$store.state.alarmTableVisible = false
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+@import './dataModel.css';
+html,
+body,
+#mapContent {
+ width: 100%;
+ height: 100%;
+}
+// .topSelect{
+// display: flex;
+// margin-bottom: 20px;
+// padding: 20px 15px 0 15px;
+// display: flex;
+// justify-content: space-between;
+// span:first-child{
+// flex: 1;
+// }
+// }
+.noneData {
+ position: absolute;
+ color: #000;
+ background: #fff;
+ z-index: 999;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%);
+ padding: 20px 50px;
+ /* opacity: 0.5; */
+ font-size: 28px;
+ /* border-radius: 10px; */
+ border: 2px solid #ff7f50;
+}
+.topDate {
+ position: absolute;
+ top: 50px;
+ width: 100%;
+ padding: 15px 10px 3px 10px;
+ z-index: 999;
+ //background: #ccc;
+ background: rgba(204, 204, 204, 0.8);
+ box-shadow: 1px 1px 5px #666;
+ cursor: pointer;
+}
+.mouseDiv,
+.mouseDiv2 {
+ position: absolute;
+ left: 0;
+ background-color: #009845;
+ width: 36px;
+ height: 22px;
+ border-radius: 5px;
+ top: -34px;
+ display: none;
+ text-align: center;
+ line-height: 22px;
+ padding: 1px;
+ color: white;
+}
+.sjDiv,
+.sjDiv2 {
+ width: 0px;
+ height: 0px;
+ border: 10px solid transparent;
+ border-top-color: #009845;
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin: auto;
+ top: 100%;
+ z-index: -1;
+}
+.mouseDiv2 {
+ background-color: #2b2b2b;
+}
+.sjDiv2 {
+ border-top-color: #2b2b2b;
+}
+.jdt {
+ height: 5px;
+ width: 100%;
+ display: flex;
+ position: relative;
+}
+.timeDiv {
+ width: 100%;
+ float: left;
+}
+.topDate .timeDiv:nth-child(3) {
+ border-left: 1px solid white;
+ border-right: 1px solid white;
+}
+.topDate ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+}
+.topDate li {
+ width: 1.36986%;
+ //padding: 0 2%;
+ box-sizing: border-box;
+ //transform: translateX(50%);
+}
+.topDate p {
+ text-align: center;
+ font-size: 16px;
+ margin: 0;
+ padding: 0;
+}
+.jdt li {
+ //box-sizing: border-box;
+ border-left: 1px solid white;
+ background-color: rgba(0, 0, 0, 0.3);
+ height: 100%;
+ width: 1.36986%;
+ list-style: none;
+ position: relative;
+ left: 0;
+ top: 0;
+}
+.dayDiv p {
+ width: 32.87664%;
+ text-align: center;
+}
+.top {
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ padding: 5px 10px;
+ z-index: 999;
+ /* background: #ccc; */
+ background: rgba(204, 204, 204, 0.5);
+ //box-shadow: 1px 1px 5px #666;
+}
+.top > .left {
+ padding: 5px 10px;
+ border: 1px solid #aaa;
+ border-right: none;
+ background: #fff;
+ /* border-radius: 3px; */
+ cursor: pointer;
+ font-size: 16px;
+ float: left;
+ margin-top: 4px;
+ -webkit-transform-origin-x: 0;
+ /* -webkit-transform: scale(0.90); */
+}
+.top > .left:nth-child(1) {
+ border-radius: 5px 0 0 5px;
+}
+.top > .left:nth-last-child(2) {
+ border-radius: 0 5px 5px 0;
+ border-right: 1px solid #aaa;
+}
+.top > .left:hover {
+ background: #666;
+ color: #fff;
+}
+.click {
+ color: #fff;
+ background-color: #666 !important;
+}
+.top > .right {
+ position: fixed;
+ right: 410px;
+ top: 55px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: green;
+ color: #fff;
+ float: right;
+ line-height: 40px;
+ text-align: center;
+ border: 1px solid #333;
+ opacity: 0.7;
+}
+
+.top > .dropDown {
+ width: 400px;
+ height: 51px;
+ line-height: 51px;
+ text-align: center;
+ color: #fff;
+ font-size: 18px;
+ position: fixed;
+ right: 0;
+ top: 50px;
+ background-color: rgba(15, 69, 103, 0.8);
+}
+.dropDown > .drop-icon {
+ vertical-align: middle;
+ width: 24px;
+ position: relative;
+ left: 14px;
+ top: -2px;
+}
+.realTime_top {
+ width: 120px;
+ float: left;
+ margin-top: 9px;
+ margin-left: 10px;
+}
+.text_Time {
+ float: left;
+ margin-left: 37px;
+ .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;
+ padding-left: 20px;
+ padding-top: 6px;
+ font-family: '������������';
+ z-index: 10003;
+ /* -webkit-transform-origin-x: 0; */
+ /* -webkit-transform: scale(0.90); */
+}
+.my-div-icon-g {
+ font-size: 14px;
+ text-align: center;
+ padding-left: 20px;
+ padding-top: 11px;
+ font-family: '������������';
+ z-index: 10003;
+ /* -webkit-transform-origin-x: 0; */
+ /* -webkit-transform: scale(0.90); */
+}
+.iconWind {
+ z-index: 10002;
+}
+.my-device {
+ z-index: 999;
+}
+.windDir-icon {
+ z-index: 10001;
+ margin-top: 20px;
+ /* padding-left: 10px; */
+ /* padding-top: 30px; */
+}
+
+.buttom-left {
+ /* background-image: url("@/assets/images/tl_PM10.png"); */
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ width: 435px;
+ height: 36px;
+ z-index: 999;
+ border-radius: 3px;
+}
+.middle {
+ padding: 5px 10px;
+ border: 1px solid #aaa;
+ background: #fff;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 16px;
+ float: left;
+ margin-top: 4px;
+ -webkit-transform-origin-x: 0;
+ margin-left: 20px;
+}
+.el-dialog__body {
+ padding: 10px 20px;
+}
+.el-dialog__footer {
+ padding: 0px 20px 15px;
+}
+.yellow {
+ background-color: #ffff00 !important;
+ color: #868600 !important;
+}
+.orange {
+ background-color: #ff7e00 !important;
+ color: #844100 !important;
+}
+.red {
+ background-color: #ff0000 !important;
+ color: #790000 !important;
+}
+.leaflet-marker-icon.leaflet-interactive {
+ pointer-events: auto;
+ margin-left: -45px;
+ margin-top: -40px;
+}
+</style>
--
Gitblit v1.8.0