From afb9e7c8c9865be6a73d19e35819b5aa6b8afbdd Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 17 Jun 2024 15:05:29 +0800
Subject: [PATCH] fix: bug修改
---
src/components/Wind/Map.vue | 1569 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 992 insertions(+), 577 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 5414cfd..c2dc060 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -5,7 +5,12 @@
element-loading-text="���������"
element-loading-background="rgba(0, 0, 0, 0.6)"
>
- <div v-if="noneData" class="noneData">������������������������������</div>
+ <div
+ v-if="noneData"
+ class="noneData"
+ >
+ ������������������������������
+ </div>
<div class="top">
<span
v-for="(item, index) in params"
@@ -23,12 +28,36 @@
alt=""
@click="turnState"
>
- <span class="text_Time">{{ dateFormat }}</span>
- <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
+ <span class="text_Time">
+ <el-date-picker
+ v-model="selectData"
+ popper-class="tpc"
+ value-format="yyyy-MM-dd HH"
+ format="yyyy-MM-dd HH"
+ :clearable="false"
+ :editable="false"
+ type="datetime"
+ :picker-options="pickerOptions"
+ placeholder="������������������"
+ @change="changeData"
+ />
+ </span>
+ <img
+ class="drop-icon"
+ :src="turnImg"
+ alt=""
+ @click="turnState"
+ >
</span>
</div>
- <div class="topDate" style="height: 60px">
- <div id="eventPro" class="jdt">
+ <div
+ class="topDate"
+ style="height: 60px"
+ >
+ <div
+ id="eventPro"
+ class="jdt"
+ >
<div class="mouseDiv">
<span class="inText" />
<div class="sjDiv" />
@@ -110,7 +139,10 @@
<li />
<li />
</div>
- <div class="timeDiv" style="position: relative">
+ <div
+ class="timeDiv"
+ style="position: relative"
+ >
<ul id="timeUl">
<li style="width: 0.83%" />
<li />
@@ -224,7 +256,11 @@
</div>
</div>
</div>
- <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
+ <regional-overview
+ :key="timerKey"
+ :map="map"
+ :show-flag="showOrHidden"
+ />
<div
:style="{ background: 'url(' + bg + ') no-repeat' }"
class="buttom-left"
@@ -247,7 +283,10 @@
end-placeholder="������������"
value-format="yyyy-MM-dd"
/>
- <el-select v-model="factorValue" placeholder="������������">
+ <el-select
+ v-model="factorValue"
+ placeholder="������������"
+ >
<el-option
v-for="item in factorOptions"
:key="item.value"
@@ -255,7 +294,10 @@
:value="item.value"
/>
</el-select>
- <el-select v-model="alartValue" placeholder="������������������">
+ <el-select
+ v-model="alartValue"
+ placeholder="������������������"
+ >
<el-option
v-for="item in alertOptions"
:key="item.value"
@@ -266,7 +308,9 @@
<el-button
type="primary"
@click="alertData(PageSize, currentPage)"
- >������</el-button>
+ >
+ ������
+ </el-button>
</div>
</div>
<el-table
@@ -284,8 +328,16 @@
width="50"
align="center"
/>
- <el-table-column property="alarm_time" label="������������" width="150" />
- <el-table-column property="deviceName" label="������������" width="200" />
+ <el-table-column
+ property="alarm_time"
+ label="������������"
+ width="150"
+ />
+ <el-table-column
+ property="deviceName"
+ label="������������"
+ width="200"
+ />
<el-table-column
property="index"
label="������"
@@ -313,11 +365,16 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
- <div slot="footer" class="dialog-footer">
+ <div
+ slot="footer"
+ class="dialog-footer"
+ >
<el-button
size="mini"
@click="alarmTableVisible = false"
- >��� ���</el-button>
+ >
+ ��� ���
+ </el-button>
</div>
</el-dialog>
</div>
@@ -327,12 +384,14 @@
import 'leaflet/dist/leaflet.css'
import 'leaflet-velocity/dist/leaflet-velocity.css'
import L from 'leaflet'
+import _ from 'lodash'
import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
import 'leaflet-velocity/dist/leaflet-velocity'
import $ from 'jquery'
+import { WWindUtil } from '@/components/Wind/WRatingArr.js'
import RegionalOverview from '@/components/Wind/RegionalOverview' // ������������������
import { mapGetters } from 'vuex'
-import { gcj02towgs84 } from '@/assets/json/transform'
+// import { gcj02towgs84 } from '@/assets/json/transform'
export default {
components: { RegionalOverview },
props: {
@@ -340,13 +399,21 @@
weidu: Number,
jingdu: Number,
monitorPointId: Number,
- monitorPointIds: Array
+ monitorPointIds: Array,
+ defaultData: Array
},
- data() {
+ data () {
return {
+ compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
+ compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
timerKey: '', // ���������������������������
map: null,
code: [],
+ pickerOptions: {
+ disabledDate: (time) => {
+ return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000
+ },
+ },
latlng: [],
noneData: false,
params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
@@ -383,7 +450,7 @@
// ������������������������������������������(���������������������������)
totalCount: 0,
// ������������������������������
- pageSizes: [10, 20, 30, 40],
+ pageSizes: [10, 50, 100, 200],
// ������������������������������������������
PageSize: 20,
factorOptions: [
@@ -458,35 +525,43 @@
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
showOrHidden: true,
dateFormat: '',
+ selectData: new Date(),
alarmTableVisible: false,
chooseTimeInfo: false, // ������������������������
chooseTime: false,
dateInfo: '', // ���������������
timeInfo: '', // ���������������
nyr: '', // ������������������
- windAllDate: []
+ windJsonData: [],
+ clickmac: '',
+ childerItem: {},
+ farterItem: {},
+ indexsLaber: 0,
+ time: new Date()
}
},
computed: {
...mapGetters(['regionCode'])
},
watch: {
- dateValue(n, o) {
- // console.log(n)
+ dateValue (n, o) {
// this.newDate()
},
- regionCode(newCode, oldCode) {
+ regionCode (newCode, oldCode) {
this.timerKey = newCode // ������������code���������������������������
+ },
+ windJsonData (newCode, oldCode) {
+ this.$nextTick(() => {
+ this.canvasWind(newCode)
+ })
}
},
- mounted() {
- this.$nextTick(() => {
- this.getParamsData()
- })
+ mounted () {
this.currentHour()
this.$Bus.$on(
'alarmTableVisible',
- (res) => (
+ res => (
+ // eslint-disable-next-line no-sequences
(this.alarmTableVisible = res),
this.alertData(this.PageSize, this.currentPage)
)
@@ -496,42 +571,39 @@
// ������������
this.eventProxy()
+ window.deviceDetail = this.deviceDetail
},
- created() {
+ created () {
+ if (this.$store.state.orgId === 72) {
+ this.changeColor = 1
+ }
const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
this.jingduNew = newLL[1]
this.weiduNew = newLL[0]
- // ���������������������
- // this.windData()
- // this.change(0)
-
- this.windDir()
+ this.getParamsData(false)
+ // this.windDir()
this.newDate()
// this.alertData(this.PageSize, this.currentPage)
},
- beforeDestroy() {
+ beforeDestroy () {
if (this.timer) {
clearInterval(this.timer)
- // console.log('timer���������������������')
}
if (this.timer2) {
- // console.log(this.timer2)
clearInterval(this.timer2)
- // console.log('timer2���������������������')
}
// ���������������������websocket
if (this.ws) {
- // console.log('WS������')
this.ws.close()
}
},
methods: {
// ������������������������������
- getDayXQ(day) {
- var days = new Date().getDay() // ������
+ getDayXQ (day) {
+ var days = new Date().getDay() // ������ // ������
var rq = '' // ������
if (day === 'today') {
- rq = this.newData(0)
+ rq = this.newData(0) // ������������
} else if (day === 'yesterday') {
days = (days + 7 - 1) % 7
rq = this.newData(-1) // ������������
@@ -565,7 +637,7 @@
return `${rq}(${days})`
},
// ���������������������������������������
- newData(day, info) {
+ newData (day, info) {
var today = new Date()
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
today.setTime(targetday_milliseconds)
@@ -581,7 +653,7 @@
}
},
// ������������
- eventProxy() {
+ eventProxy () {
// ������������������������������
var ul = document.querySelector('#eventPro')
var lis = document.querySelectorAll('#eventPro>li')
@@ -599,7 +671,7 @@
p1.innerHTML = this.getDayXQ('beforeYea')
var greenInfo = 0
var that = this
- ul.onclick = (e) => {
+ ul.onclick = e => {
var target = e.target
if (target.tagName.toLowerCase() === 'li') {
// ������������li���������������������
@@ -620,28 +692,25 @@
inText2.innerHTML = times + ':00'
this.chooseTimeInfo = true // ���������������
this.chooseTime = true // ���������������
+ console.log('times', times)
if ((i + 1) / 24 < 1) {
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
- console.log(111, this.nyr)
} else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
- console.log(222, this.nyr)
} else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
- console.log(333, this.nyr)
} else {
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
- console.log(444, this.nyr)
}
break
}
}
}
that.times = 1
- that.getParamsData()
+ that.getParamsData(true)
}
// timeUl������������������
- timeUl.onclick = (e) => {
+ timeUl.onclick = e => {
// ������������li���������������������
var target = e.target
if (target.tagName.toLowerCase() === 'li') {
@@ -657,18 +726,15 @@
inText2.innerHTML = times + ':00'
this.chooseTimeInfo = true // ���������������
this.chooseTime = true // ���������������
+ console.log('times', times)
if (i / 24 < 1) {
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
- console.log(111, this.nyr)
} else if (i / 24 < 2 && i / 24 >= 1) {
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
- console.log(222, this.nyr)
} else if (i / 24 < 3 && i / 24 >= 2) {
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
- console.log(333, this.nyr)
} else {
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
- console.log(444, this.nyr)
}
break
}
@@ -680,49 +746,40 @@
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
}
}
- // console.log('���������������������', greenInfo, 'index')
}
that.times = 1
- that.getParamsData()
+ that.getParamsData(true)
}
// ������������������������
for (let i = 0; i < lis.length; i++) {
- lis[i].onmouseenter = function() {
- // console.log('mouseenter', i)
- // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
+ 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'
- // console.log(mouseDiv)
}
- lis[i].onmouseleave = function() {
+ 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) + '%'
+ 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'
- // console.log(mouseDiv)
}
- timeLis[i].onmouseleave = function() {
+ timeLis[i].onmouseleave = function () {
mouseDiv.style.display = 'none'
- // console.log('������������', i)
}
}
},
// ���������������������
- currentHour() {
+ currentHour () {
// const aData = new Date()
// const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
// const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
@@ -742,7 +799,7 @@
this.dateFormat = currentDate.toString()
},
// ���������������
- newDate() {
+ newDate () {
var aData = new Date()
var month =
aData.getMonth() < 9
@@ -750,196 +807,18 @@
: aData.getMonth() + 1
var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
this.currentDate = aData.getFullYear() + '-' + month + '-' + date
- // console.log(this.currentDate)
this.dateValue = [this.currentDate, this.currentDate]
},
// ������������������
- mouseOver() {
+ mouseOver () {
this.map.scrollWheelZoom.disable()
},
// ������������������
- mouseLeave() {
+ mouseLeave () {
this.map.scrollWheelZoom.enable()
},
- // initWebpack() {
- // // ������������
- // var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
- // // ������URL
- // var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
- // socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
- // this.ws = new WebSocket(socketUrl)
- // this.ws.onopen = this.onopen
- // this.ws.onmessage = this.onmessage
- // this.ws.onclose = this.onclose
- // this.ws.onerror = this.onerror
- // },
- // reconnect() { // ������������
- // var that = this
- // if (that.lockReconnect) {
- // return
- // }
- // that.lockReconnect = true
- // // ������������������������������������������������������������
- // that.timeoutnum && clearTimeout(that.timeoutnum)
- // that.timeoutnum = setTimeout(function() {
- // // ���������
- // that.initWebpack()
- // that.lockReconnect = false
- // }, 5000)
- // },
- // reset() { // ������������
- // var that = this
- // // ������������
- // clearTimeout(that.timeoutObj)
- // clearTimeout(that.serverTimeoutObj)
- // // ������������
- // that.start()
- // },
- // start() { // ������������
- // // console.log('������������')
- // var self = this
- // self.timeoutObj && clearTimeout(self.timeoutObj)
- // self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
- // self.timeoutObj = setTimeout(function() {
- // // ������������������������������������������������������������������������
- // if (self.ws.readyState === 1) { // ������������������
- // self.ws.send('heartCheck')
- // } else { // ������������
- // self.reconnect()
- // }
- // self.serverTimeoutObj = setTimeout(function() {
- // // ������������
- // self.ws.close()
- // }, self.timeout)
- // }, self.timeout)
- // },
- // onopen() {
- // // console.log('������������')
- // // ������������
- // this.start()
- // },
- // onmessage(msg) {
- // var that = this
- // if (JSON.parse(msg.data).������) {
- // that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
- // } else {
- // that.wsData1 = msg.data
- // if (that.windState === 2) {
- // for (let i = 0; i < that.keyData.length; i++) {
- // // ���������������
- // // ���������(������mac������)���������������������
- // if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
- // var blueIcon1 = L.icon({ // ������������������
- // iconUrl: require('@/assets/images/icoWind03.png'),
- // iconSize: [30, 30],
- // iconAnchor: [15, 25],
- // className: 'iconWind'
- // })
- // // L.marker������������������������������
- // that.marker = L.marker([that.lats[i], that.lngs[i]], {
- // icon: blueIcon1,
- // rotationAngle: Number(JSON.parse(that.wsData1).������)
- // })
- // if (i === 0) {
- // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
- // that.map.addLayer(that.marker)
- // } else {
- // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
- // for (let j = 0; j < that.markerObject.length; j++) {
- // if (that.coordinates[0] === that.markerObject[j].mac1) {
- // that.map.removeLayer(that.markerObject[j].marker)
- // that.map.addLayer(that.marker)
- // } else if (that.coordinates[i] === that.markerObject[j].mac1) {
- // that.map.removeLayer(that.markerObject[j].marker)
- // that.map.addLayer(that.marker)
- // }
- // }
- // }
- // }
- // }
- // }
- // }
- // // ������������������������������������
- // this.reset()
- // },
- // onclose(e) {
- // // console.log('������������')
- // // console.log('websocket ������: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
- // // ������
- // this.reconnect()
- // },
- // onerror(e) {
- // console.log('������������')
- // // ������
- // this.reconnect()
- // },
- // ws������
- // wsStart() {
- // var that = this
- // // ������������
- // var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
- // // ������URL
- // var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
- // // ������http���WS
- // // console.log(socketUrl)
- // socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
- // this.ws = new WebSocket(socketUrl)
- // // if (this.ws) {
- // // this.ws.close()
- // // console.log('ws������������')
- // // }
- // // this.ws = new WebSocket(socketUrl)
- // // console.log('ws������������')
-
- // this.ws.onopen = function() {
- // // console.log('websocket������������')
- // }
- // ������������������
- // this.ws.onmessage = function(msg) {
- // if (JSON.parse(msg.data).������) {
- // that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
- // // console.log(that.wsData2)
- // } else {
- // that.wsData1 = msg.data
- // // console.log(that.wsData1)
- // if (that.windState === 2) {
- // for (let i = 0; i < that.keyData.length; i++) {
- // // ���������������
- // // ���������(������mac������)���������������������
- // if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
- // var blueIcon1 = L.icon({
- // iconUrl: require('@/assets/images/icoWind03.png'),
- // iconSize: [30, 30],
- // iconAnchor: [15, 25],
- // className: 'iconWind'
- // })
- // that.marker = L.marker([that.lats[i], that.lngs[i]], {
- // icon: blueIcon1,
- // rotationAngle: Number(JSON.parse(that.wsData1).������)
- // })
- // if (i === 0) {
- // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
- // that.map.addLayer(that.marker)
- // } else {
- // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
- // for (let j = 0; j < that.markerObject.length; j++) {
- // if (that.coordinates[0] === that.markerObject[j].mac1) {
- // that.map.removeLayer(that.markerObject[j].marker)
- // that.map.addLayer(that.marker)
- // } else if (that.coordinates[i] === that.markerObject[j].mac1) {
- // that.map.removeLayer(that.markerObject[j].marker)
- // that.map.addLayer(that.marker)
- // }
- // }
- // }
- // }
- // }
- // }
- // }
- // }
- // },
// ���������������������������������
- bd09togcj02(bd_lon, bd_lat) {
+ bd09togcj02 (bd_lon, bd_lat) {
var x_pi = (3.14159265358979324 * 3000.0) / 180.0
var x = bd_lon - 0.0065
var y = bd_lat - 0.006
@@ -949,58 +828,10 @@
var gg_lat = z * Math.sin(theta)
return [gg_lat, gg_lng]
},
- // /**
- // * GCJ02 ��������� WGS84
- // * @param lng
- // * @param lat
- // * @returns {*[]}
- // */
- // gcj02towgs84(lng, lat) {
- // if (this.out_of_china(lng, lat)) {
- // return [lat,lng]
- // } else {
- // var dlat = this.transformlat(lng - 105.0, lat - 35.0);
- // var dlng = this.transformlng(lng - 105.0, lat - 35.0);
- // var radlat = lat / 180.0 * PI;
- // var magic = Math.sin(radlat);
- // magic = 1 - ee * magic * magic;
- // var sqrtmagic = Math.sqrt(magic);
- // dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
- // dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
- // var mglat = lat + dlat;
- // var mglng = lng + dlng;
- // return [ lat * 2 - mglat,lng * 2 - mglng]
- // }
- // },
- //
- // transformlat(lng, lat) {
- // var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
- // ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
- // ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
- // ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
- // return ret
- // },
- // transformlng(lng, lat) {
- // var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
- // ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
- // ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
- // ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
- // return ret
- // },
- // /**
- // * ���������������������������������������������������
- // * @param lng
- // * @param lat
- // * @returns {boolean}
- // */
- // out_of_china(lng, lat) {
- // return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
- // },
// ������������������,���������
- deviceMaker() {
- // ������������������
+ deviceMaker () {
if (this.map) {
- this.map.eachLayer(function(layer) {
+ this.map.eachLayer(function (layer) {
// ���������������������������
if (
!layer._container &&
@@ -1011,7 +842,6 @@
}
})
}
- const that = this
this.$request({
url: '/historyFiveMinutely/queryDeviceAndData',
method: 'get',
@@ -1022,22 +852,18 @@
chooseTime: this.chooseTime,
time: this.nyr
}
- }).then((data) => {
- // console.log('���������������������')
- console.log(data, 'tata')
- that.loading = false
+ }).then(data => {
this.markDeviceSite(data)
})
},
// ���������������
- markDeviceSite(data) {
- // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]
- // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]
+ markDeviceSite (data) {
var keyData = data.data.devices
this.keyData = data.data.devices
// ���������������������
- this.stateControlStation()
- var group = L.layerGroup().addTo(this.map)
+ // this.stateControlStation()
+ var groupIcon = L.layerGroup().addTo(this.map)
+ var groupText = L.layerGroup().addTo(this.map)
this.keys = []
for (let i = 0; i < keyData.length; i++) {
if (keyData[i].a34002) {
@@ -1059,12 +885,6 @@
this.keys.push(JSON.parse('null'))
// }
}
- // console.log(this.keys)
- // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)
- // var lat = newL[0]
- // this.lats[i] = newL[0]
- // var lng = newL[1]
- // this.lngs[i] = newL[1]
var lat = keyData[i].latitude
this.lats[i] = keyData[i].latitude
var lng = keyData[i].longitude
@@ -1072,7 +892,7 @@
// ������������key������������������������������������������������
var colorNum = 7
if (keyData[i].a34002) {
- var data = Math.floor(JSON.parse(keyData[i].a34002))
+ let data = Math.floor(JSON.parse(keyData[i].a34002))
switch (true) {
case data < 0: {
colorNum = 7
@@ -1110,7 +930,7 @@
break
}
} else if (keyData[i].a34004) {
- var data = Math.floor(JSON.parse(keyData[i].a34004))
+ let data = Math.floor(JSON.parse(keyData[i].a34004))
switch (true) {
case data < 0: {
colorNum = 7
@@ -1148,7 +968,7 @@
break
}
} else if (keyData[i].a21026) {
- var data = Math.floor(JSON.parse(keyData[i].a21026))
+ let data = Math.floor(JSON.parse(keyData[i].a21026))
switch (true) {
case data < 0: {
colorNum = 7
@@ -1186,7 +1006,7 @@
break
}
} else if (keyData[i].a21004) {
- var data = Math.floor(
+ let data = Math.floor(
Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
)
switch (true) {
@@ -1226,7 +1046,7 @@
break
}
} else if (keyData[i].a21005) {
- var data = JSON.parse(keyData[i].a21005).toFixed(3)
+ let data = JSON.parse(keyData[i].a21005).toFixed(3)
switch (true) {
case data < 0: {
colorNum = 7
@@ -1264,7 +1084,7 @@
break
}
} else if (keyData[i].a05024) {
- var data = Math.floor(JSON.parse(keyData[i].a05024))
+ let data = Math.floor(JSON.parse(keyData[i].a05024))
switch (true) {
case data < 0: {
colorNum = 7
@@ -1302,7 +1122,7 @@
break
}
} else if (keyData[i].a99054) {
- var data = JSON.parse(keyData[i].a99054).toFixed(3)
+ let data = JSON.parse(keyData[i].a99054).toFixed(3)
switch (true) {
case data < 0: {
colorNum = 7
@@ -1348,149 +1168,717 @@
iconAnchor: [30, 48],
className: 'my-device'
})
+
// ���������������������
- L.marker([lat, lng], {
+ const iconMarker = L.marker([lat, lng], {
icon: blueIcon
- }).addTo(group)
- // console.log(JSON.parse(this.keys[i]))
+ })
+ groupIcon.addLayer(iconMarker)
var myIcon = L.divIcon({
html: this.keys[i],
className: 'my-div-icon',
iconSize: [60, 60],
iconAnchor: [40, 40]
})
- var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
+
+ const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+ TexteMarker.inforData = keyData[i]
+ groupText.addLayer(TexteMarker)
+ const _this = this
// ������������������������������������mouseover���������������
- var _this = this
- marker.on('mouseover', function(e) {
+ TexteMarker.on('click', function (e) {
+ const MarkerTarget = e.target
+ // _this.getMarkerInfor(keyData[i], MarkerTarget)
this.noneData = false
- // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {
- // var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
- // // console.log(data)
- // this.bindPopup(data).openPopup()
- // })
- _this
- .$request({
- url: '/historyFiveMinutely/queryPopDataByMac',
- method: 'get',
- params: {
- mac: keyData[i].mac,
- chooseTime: _this.chooseTime,
- time: _this.nyr
- }
- })
- .then((res) => {
- if (res.message == '���������������������') {
- var datafalse = '���������������������'
- this.bindPopup(datafalse).openPopup()
- return
- }
- for (const key in res.data) {
- var tempDecimal = res.data[key]
- .replace(/[^\d.]/g, '')
- .split('.')[1]
- if (key !== '������' && key !== '������') {
- if (Number(tempDecimal) === 0) {
- res.data[key] =
- parseInt(res.data[key]) + res.data[key].split(' ')[1]
- } else {
- res.data[key] =
- Number(res.data[key].split(' ')[0]).toFixed(2) +
- res.data[key].split(' ')[1]
- }
- // var num = res.data[key].split(' ')[0]
- // res.data[key] = (num - 0).toFixed(3)
- }
- }
- var data = JSON.stringify(res.data)
- .replace(/,/g, `<br>`)
- .replace(/{|}|"/g, '')
- this.bindPopup(data).openPopup()
- })
- .catch((err) => {
- console.log(err)
- })
+ // const _this = e.target.vuecontext
+ _this.handleClick(keyData[i], MarkerTarget)
})
// ������������������������������������
- marker.on('mouseout', function(e) {
- this.noneData = false
- this.bindPopup().closePopup()
- })
+ // TexteMarker.on('mouseout', function(e) {
+ // this.noneData = false
+ // this.bindPopup().closePopup()
+ // })
}
},
- // ������������������������������������
- // moveInAndOut() {
- //
- // },
- // ������������������
- stateControlStation() {
- // this.$axios.get('monitorPoint/queryStateControlStation', {
- this.$request({
- url: '/govMonitorPoint/queryStateControlStation',
- method: 'get',
+ 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: {
- regionCode: 130900,
- sensorCode: 'a34002'
+ 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]
}
})
- .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)
+ },
+ 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) => {
+ .catch(err => {
console.log(err)
})
},
- // ������������������������
- toggleWindState() {
- if (this.ws) {
- this.ws.close()
+ handleCutZero (data) {
+ let num = data.substring(0, data.indexOf('.') + 4)
+ // ������������ ������������������������
+ // let num = Number(data).toFixed(3).toString()
+ let newstr = num
+ // ������������ ������������������
+ let leng = num.length - num.indexOf('.') - 1
+ // ���������������������
+ if (num.indexOf('.') > -1) {
+ // ������������������
+ for (let i = leng; i > 0; i--) {
+ // ������newstr���������0
+ if (
+ newstr.lastIndexOf('0') > -1 &&
+ newstr.substr(newstr.length - 1, 1) === 0
+ ) {
+ let k = newstr.lastIndexOf('0')
+ // ������������������������������0 ���������������
+ if (newstr.charAt(k - 1) === '.') {
+ return newstr.substring(0, k - 1)
+ } else {
+ // ������ ������������0
+ newstr = newstr.substring(0, k)
+ }
+ } else {
+ // ������������������0
+ return newstr
+ }
+ }
}
- if (this.windState === 2) {
- this.windState = 1
- this.windStateText = '���������'
- this.initData()
- // console.log(this.windState)
- } else if (this.windState === 1) {
- this.windState = 2
- this.windStateText = '���������'
- this.windDir()
- // console.log(this.windState)
- }
+ return num
+ },
+ getMarkerInfor (data, marker) {
+ this.$request({
+ url: '/historyFiveMinutely/queryPopDataByMac',
+ method: 'get',
+ params: {
+ mac: data.mac,
+ chooseTime: this.chooseTime,
+ time: this.nyr
+ }
+ })
+ .then(res => {
+ if (res.message === '���������������������') {
+ var datafalse = '���������������������'
+ this.bindPopup(datafalse).openPopup()
+ return
+ }
+ // eslint-disable-next-line no-unused-vars
+ for (const key in res.data) {
+ var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
+ if (key !== '������' && key !== '������') {
+ if (Number(tempDecimal) === 0) {
+ res.data[key] =
+ parseInt(res.data[key]) + res.data[key].split(' ')[1]
+ } else {
+ res.data[key] =
+ Number(res.data[key].split(' ')[0]).toFixed(2) +
+ res.data[key].split(' ')[1]
+ }
+ }
+ }
+ var data = JSON.stringify(res.data)
+ .replace(/,/g, `<br>`)
+ .replace(/{|}|"/g, '')
+ console.log(data)
+ marker.bindPopup(data).openPopup()
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ return data
},
// ���������������
- windDir() {
+ windDir () {
// console.log('������������')
// console.log('���������ws������������')
// const that = this
// ������������������
if (this.map) {
- this.map.eachLayer(function(layer) {
+ this.map.eachLayer(function (layer) {
// ���������������������������
if (
!layer._container &&
@@ -1503,68 +1891,27 @@
}
// ���������������������������
this.deviceMaker()
- // ������ws������
- // this.wsStart()
- // this.initWebpack()
- // console.log('������ws���������������������')
- // console.log(this.accountId, this.orgId, this.regionCode)
- // this.timer2 = setInterval(() => {
- // if (this.ws) {
- // this.ws.close()
- // console.log('ws������������')
- // }
- // // ������ws������
- // this.wsStart()
- // console.log('ws������������')
- // }, 60000)
},
// ���������������������regionCode���������������api������
- getRegionApiRequest() {
- // console.log(this.$store.state.regionCode)
- // this.ws.close()
- // console.log('ws������')
- // ������������������������
- this.getParamsData()
+ getRegionApiRequest () {
+ this.getParamsData(true)
setTimeout(() => {
$.getJSON(
'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
{ monitorPointId: this.$store.state.monitorPointId },
- (data) => {
- // ������������������
- // console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
- // console.log(data)
- // this.map.eachLayer(function(layer) {
- // // ���������������������������
- // if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
- // layer.remove()
- // }
- // })
+ data => {
this.map.setView([data[2], data[1]], 12)
// console.log('������������')
}
)
}, 1000)
- // if (this.windState === 1) {
- // console.log('getRegionApiRequest')
- // this.initData()
- // console.log('���������������')
- // } else if (this.windState === 2) {
- // this.windDir()
- // console.log('���������������')
- // }
- // ������������������
- // this.deviceMaker()
- // this.getParamsData()
},
// ���������������������������������������
- jumpMap(LngLat) {
- // console.log('���������������������')
- // console.log(this.jumpData)
- // console.log(LngLat)
+ jumpMap (LngLat) {
this.map.setView(LngLat, 18)
},
// ������������������������
- getParamsData() {
+ getParamsData (isFirst = true) {
clearInterval(this.timer)
this.timer = setInterval(() => {
this.currentHour()
@@ -1584,30 +1931,27 @@
this.chooseTimeInfo = false
// console.log('else')
}
- // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
- // clearInterval(this.timer)
- // if (this.windState === 1) {
- // this.ws.close()
- // this.initData()
- // console.log('���������������')
- // } else if (this.windState === 2) {
- // this.windDir()
- // console.log('���������������')
- // }
setTimeout(() => {
- this.change(this.changeColor)
+ console.log('change', isFirst)
+ if (isFirst) {
+ this.windData()
+ this.deviceMaker()
+ } else {
+ this.change(this.changeColor)
+ }
this.times = 300
}, 100)
}
}, 1000)
},
-
- findLayer(layerName) { // ������������������������������
+ 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]
@@ -1615,52 +1959,55 @@
}
return layer
},
-
// ���������������������
- initMap() {
- // console.log('������index������map������������')
- // console.log(this.weidu)
- // console.log(this.jingdu)
+ initMap () {
var map = L.map('mapContent', {
+ inertia: false,
minZoom: 2,
maxZoom: 18,
center: [this.weiduNew, this.jingduNew],
zoom: 14,
+ renderer: L.canvas(),
zoomControl: false, // ������������
- trackResize: true,
- worldCopyJump: true,
- dragging: true,
- inertia: true,
- attributionControl: true, // ���������������logol
+ 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)
- const that = this
this.map = map // data���������������
-
- this.map.on('moveend', function(ev) {
- const res = that.findLayer('wmsid')
- that.map.removeLayer(res)
- that.openWindCanves()
- })
- // this.map.on('viewreset', function() {
- // console.log('--->viewreset ���������������������')
+ // const that = this
+ // this.map.on('mousedown', function(ev) {
+ // const res = that.findLayer('wmsid')
+ // if (res) {
+ // that.map.removeLayer(res)
+ // }
+ // })
+ // this.map.on('mouseup', function(ev) {
+ // console.log('1111111')
+ // that.canvasWind(this.windJsonData)
// })
window.map = map
},
+ changeData (val) {
+ console.log(val)
+ this.nyr = val + ':00'
+ const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00'))
+
+ console.log(date)
+ this.chooseTime = true
+ // var p1 = document.querySelector('.p1')
+ // var p2 = document.querySelector('.p2')
+ // var p3 = document.querySelector('.p3')
+ // this.time = date
+ // p3.innerHTML = this.getDayXQ('today')
+ // p2.innerHTML = this.getDayXQ('yesterday')
+ // p1.innerHTML = this.getDayXQ('beforeYea')
+ this.initData()
+ },
// ������������������������
- change(index) {
- if (this.windState === 1) {
- this.initData()
- } else if (this.windState === 2) {
- this.windDir()
- }
+ change (index) {
this.changeColor = index
var pr = ''
switch (index) {
@@ -1696,16 +2043,17 @@
this.sensorKey = pr
// ������������������
// this.toggleWindState()
+ if (this.windState === 1) {
+ this.deviceMaker()
+ this.windData()
+ } else if (this.windState === 2) {
+ this.windDir()
+ }
},
// ���������������������
- initData() {
- // console.log('������������')
- // const that = this
- // ������������������������
- // console.log(this.monitorPointId)
- // ������������������
+ initData () {
if (this.map) {
- this.map.eachLayer(function(layer) {
+ this.map.eachLayer(function (layer) {
// ���������������������������
if (
!layer._container &&
@@ -1716,15 +2064,11 @@
}
})
}
- this.windData()
this.deviceMaker()
- // console.log('������������������')
- // $.ajaxSettings.async = false
- // for (let i = 0; i < this.monitorPointIds.length; i++) {
- // }
+ this.windData()
},
// ���������������
- windData() {
+ windData () {
this.$request({
url: '/monitorPoint/getWindData',
method: 'get',
@@ -1734,34 +2078,21 @@
time: this.nyr
}
})
- .then((res) => {
- this.windAllDate = res.data[0]
- this.openWindCanves()
- // console.log('���������������')
- // console.log(res)
- // if (res.data[0][0].data.length === 0) {
- // this.noneData = true
- // }
- // ������������������
- // var data2 = res.data[0]
- // data2[1].header.parameterNumberName = 'northward_wind'
- // data2[0].header.parameterUnit = 'm.s-1'
- // data2[1].header.parameterUnit = 'm.s-1'
- // data2[0].header.dx = 0.00234842479
- // data2[1].header.dx = 0.00234842479
- // data2[0].header.dy = 0.0018464922
- // data2[1].header.dy = 0.0018464922
- // console.log(data2, 'data2')
- // console.log('������������')
- // console.log(res.data[0])
+ .then(res => {
+ this.windJsonData = res.data[0]
+ return this.windJsonData
})
- .catch((err) => {
+ .catch(err => {
console.log(err)
})
},
- openWindCanves() {
+ canvasWind (data) {
+ const res = this.findLayer('wmsid')
+ if (res) {
+ this.map.removeLayer(res)
+ }
var velocityLayer = L.velocityLayer({
- displayValues: true, // ���������������������������������������������������
+ displayValues: false, // ���������������������������������������������������
id: 'wmsid',
displayOptions: {
// ������������������
@@ -1770,7 +2101,7 @@
displayPosition: 'bottomleft',
displayEmptyString: 'No wind data'
},
- data: this.windAllDate, // ������ ���������������
+ data: data, // ������ ���������������
// data: data2,
// ������������������������������������������
minVelocity: 0, // ��������������������� m/s ���
@@ -1793,9 +2124,12 @@
// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
})
velocityLayer.addTo(this.map) // ���������������
+ setTimeout(() => {
+ this.loading = false
+ }, 1000)
},
// ������������������������������������������������������������������
- alertData(n1, n2) {
+ alertData (n1, n2) {
// ������������axios���������������������������
this.$request({
url: '/alarmInfo/getDataByConditionWithoutPage',
@@ -1811,7 +2145,7 @@
index: this.factorValue,
alarmType: this.alartValue
}
- }).then((res) => {
+ }).then(res => {
// console.log('������������')
// console.log(res)
var tempData = res.data
@@ -1827,20 +2161,21 @@
},
// ������
// ���������������������
- handleSizeChange(val) {
+ handleSizeChange (val) {
// ���������������������������
this.PageSize = val
// ���������������������������������������������������������������������������
this.currentPage = 1
},
// ���������������
- handleCurrentChange(val) {
+ handleCurrentChange (val) {
// ���������������������
this.currentPage = val
// console.log(val)
},
// ���������������
- tableCellClassName({ row, column, rowIndex, columnIndex }) {
+ tableCellClassName ({ row, column, rowIndex, columnIndex }) {
+ // eslint-disable-next-line no-unused-vars
for (const key in row) {
if (key === column.property) {
const code = column.property
@@ -1860,7 +2195,7 @@
}
return ''
},
- turnState() {
+ turnState () {
// console.log(this.showOrHidden)
if (this.showOrHidden === true) {
this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
@@ -1869,7 +2204,68 @@
}
this.showOrHidden = !this.showOrHidden
},
- closeAlarmTableVisible() {
+ // ������������������
+ 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
}
}
@@ -1877,6 +2273,7 @@
</script>
<style lang="scss">
+@import './dataModel.css';
html,
body,
#mapContent {
@@ -2078,11 +2475,36 @@
margin-top: 9px;
margin-left: 10px;
}
-
.text_Time {
float: left;
margin-left: 37px;
+ .el-date-editor{
+ width: 145px!important;
+ .el-input__prefix{
+ display: none!important;
+ }
+ .el-input__inner{
+ cursor: pointer;
+ font-size: 18px;
+ color: #fff;
+ padding: 0px!important;
+ border: none;
+ background: inherit;
+
+ }
+ }
}
+.tpc{
+ left: unset!important;
+ right: 60px;
+}
+.tpc .el-time-spinner__wrapper {
+ width:100% !important;
+}
+.tpc .el-scrollbar:nth-of-type(2) {
+ display: none !important;
+}
+
.my-div-icon {
font-size: 14px;
text-align: center;
@@ -2115,14 +2537,7 @@
/* padding-left: 10px; */
/* padding-top: 30px; */
}
-.leaflet-popup-content {
- width: 235px !important;
- font-size: 12px;
- -webkit-transform-origin-x: 0;
- z-index: 1000;
- /* -webkit-transform: scale(0.90); */
- /* font-family: ui-serif; */
-}
+
.buttom-left {
/* background-image: url("@/assets/images/tl_PM10.png"); */
position: absolute;
--
Gitblit v1.8.0