From 64b642cfbe4f34706ed40af77e51079ddf919d54 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 13 Oct 2023 16:52:43 +0800
Subject: [PATCH] fix:查询修改和表格添加
---
src/components/Wind/Map.vue | 1068 ++++++++++++++++++++++-------------------------------------
1 files changed, 402 insertions(+), 666 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 6e7ac77..61678cc 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -13,8 +13,7 @@
class="left"
:class="{ click: changeColor === index }"
@click="change(index)"
- >{{ item }}</span
- >
+ >{{ item }}</span>
<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
<span class="right">{{ times }}���</span>
<span class="dropDown">
@@ -23,170 +22,170 @@
: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" />
+ <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
</span>
</div>
<div class="topDate" style="height: 60px">
- <div class="jdt" id="eventPro">
+ <div id="eventPro" class="jdt">
<div class="mouseDiv">
- <span class="inText"></span>
- <div class="sjDiv"></div>
+ <span class="inText" />
+ <div class="sjDiv" />
</div>
<div class="mouseDiv2">
- <span class="inText2"></span>
- <div class="sjDiv2"></div>
+ <span class="inText2" />
+ <div class="sjDiv2" />
</div>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
+ <li />
</div>
<div class="timeDiv" style="position: relative">
<ul id="timeUl">
- <li style="width: 0.83%"></li>
- <li></li>
- <li></li>
+ <li style="width: 0.83%" />
+ <li />
+ <li />
<li>03</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>06</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>09</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>12</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>15</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>18</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>21</li>
- <li></li>
- <li></li>
- <li></li>
+ <li />
+ <li />
+ <li />
<!-- -->
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>03</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>06</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>09</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>12</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>15</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>18</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>21</li>
- <li></li>
- <li></li>
- <li></li>
+ <li />
+ <li />
+ <li />
<!-- -->
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>03</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>06</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>09</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>12</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>15</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>18</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>21</li>
- <li></li>
- <li></li>
+ <li />
+ <li />
<li>00</li>
</ul>
<div
@@ -197,7 +196,7 @@
"
class="dayDiv"
>
- <p class="p1"></p>
+ <p class="p1" />
<p style="position: relative">
<span
class="borderLine"
@@ -208,8 +207,8 @@
height: 47px;
bottom: 0;
"
- ></span>
- <span class="p2"></span>
+ />
+ <span class="p2" />
<span
class="borderLine"
style="
@@ -219,9 +218,9 @@
height: 47px;
bottom: 0;
"
- ></span>
+ />
</p>
- <p class="p3"></p>
+ <p class="p3" />
</div>
</div>
</div>
@@ -264,9 +263,10 @@
:value="item.value"
/>
</el-select>
- <el-button type="primary" @click="alertData(PageSize, currentPage)"
- >������</el-button
- >
+ <el-button
+ type="primary"
+ @click="alertData(PageSize, currentPage)"
+ >������</el-button>
</div>
</div>
<el-table
@@ -314,9 +314,10 @@
@current-change="handleCurrentChange"
/>
<div slot="footer" class="dialog-footer">
- <el-button size="mini" @click="alarmTableVisible = false"
- >��� ���</el-button
- >
+ <el-button
+ size="mini"
+ @click="alarmTableVisible = false"
+ >��� ���</el-button>
</div>
</el-dialog>
</div>
@@ -339,7 +340,7 @@
weidu: Number,
jingdu: Number,
monitorPointId: Number,
- monitorPointIds: Array,
+ monitorPointIds: Array
},
data() {
return {
@@ -388,70 +389,70 @@
factorOptions: [
{
label: '������������',
- value: 'all',
+ value: 'all'
},
{
label: 'PM10',
- value: 'PM10',
+ value: 'PM10'
},
{
label: 'PM2.5',
- value: 'PM2.5',
+ value: 'PM2.5'
},
{
label: 'SO2',
- value: 'SO2',
+ value: 'SO2'
},
{
label: 'NO2',
- value: 'NO2',
+ value: 'NO2'
},
{
label: 'CO',
- value: 'CO',
+ value: 'CO'
},
{
label: 'O3',
- value: 'O3',
- },
+ value: 'O3'
+ }
],
alertOptions: [
{
label: '������������������',
- value: 'all',
+ value: 'all'
},
{
label: '������',
- value: 'overrun',
+ value: 'overrun'
},
{
label: '���������',
- value: 'sudden',
+ value: 'sudden'
},
{
label: '������������������100%',
- value: 'state100',
+ value: 'state100'
},
{
label: '������������������150%',
- value: 'state150',
+ value: 'state150'
},
{
label: '������������������250%',
- value: 'state250',
+ value: 'state250'
},
{
label: '������������������100%',
- value: 'city100',
+ value: 'city100'
},
{
label: '������������������150%',
- value: 'city150',
+ value: 'city150'
},
{
label: '������������������250%',
- value: 'city250',
- },
+ value: 'city250'
+ }
],
currentDate: '',
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
@@ -463,10 +464,11 @@
dateInfo: '', // ���������������
timeInfo: '', // ���������������
nyr: '', // ������������������
+ windJsonData: []
}
},
computed: {
- ...mapGetters(['regionCode']),
+ ...mapGetters(['regionCode'])
},
watch: {
dateValue(n, o) {
@@ -476,10 +478,23 @@
regionCode(newCode, oldCode) {
this.timerKey = newCode // ������������code���������������������������
},
+ windJsonData(newCode, oldCode) {
+ this.$nextTick(() => {
+ console.log('111')
+
+ this.canvasWind(newCode)
+ })
+ }
},
mounted() {
this.currentHour()
- this.$Bus.$on('alarmTableVisible', (res) => (this.alarmTableVisible = res))
+ this.$Bus.$on(
+ 'alarmTableVisible',
+ (res) => (
+ (this.alarmTableVisible = res),
+ this.alertData(this.PageSize, this.currentPage)
+ )
+ )
// ���������������������
this.initMap()
@@ -490,13 +505,10 @@
const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
this.jingduNew = newLL[1]
this.weiduNew = newLL[0]
- // ���������������������
- this.windData()
- this.change(0)
- this.getParamsData()
- this.windDir()
+ this.getParamsData(false)
+ // this.windDir()
this.newDate()
- this.alertData(this.PageSize, this.currentPage)
+ // this.alertData(this.PageSize, this.currentPage)
},
beforeDestroy() {
if (this.timer) {
@@ -611,23 +623,19 @@
this.chooseTime = true // ���������������
if ((i + 1) / 24 < 1) {
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
- console.log(111, this.nyr)
} else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
- console.log(222, this.nyr)
} else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
- console.log(333, this.nyr)
} else {
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
- console.log(444, this.nyr)
}
break
}
}
}
that.times = 1
- that.getParamsData()
+ that.getParamsData(true)
}
// timeUl������������������
timeUl.onclick = (e) => {
@@ -648,16 +656,12 @@
this.chooseTime = true // ���������������
if (i / 24 < 1) {
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
- console.log(111, this.nyr)
} else if (i / 24 < 2 && i / 24 >= 1) {
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
- console.log(222, this.nyr)
} else if (i / 24 < 3 && i / 24 >= 2) {
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
- console.log(333, this.nyr)
} else {
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
- console.log(444, this.nyr)
}
break
}
@@ -672,11 +676,11 @@
// console.log('���������������������', greenInfo, 'index')
}
that.times = 1
- that.getParamsData()
+ that.getParamsData(true)
}
// ������������������������
for (let i = 0; i < lis.length; i++) {
- lis[i].onmouseenter = function () {
+ lis[i].onmouseenter = function() {
// console.log('mouseenter', i)
// mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
mouseDiv.style.transform = 'translateX(-50%)'
@@ -687,13 +691,13 @@
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 () {
+ timeLis[i].onmouseenter = function() {
// console.log('mouseenter', i)
// mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
mouseDiv.style.left = 1.36986 * i + '%'
@@ -704,7 +708,7 @@
inText.innerHTML = times + ':00'
// console.log(mouseDiv)
}
- timeLis[i].onmouseleave = function () {
+ timeLis[i].onmouseleave = function() {
mouseDiv.style.display = 'none'
// console.log('������������', i)
}
@@ -750,183 +754,6 @@
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
@@ -938,58 +765,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() {
- // ������������������
if (this.map) {
- this.map.eachLayer(function (layer) {
+ this.map.eachLayer(function(layer) {
// ���������������������������
if (
!layer._container &&
@@ -1000,7 +779,6 @@
}
})
}
- const that = this
this.$request({
url: '/historyFiveMinutely/queryDeviceAndData',
method: 'get',
@@ -1009,24 +787,22 @@
organizationId: this.$store.state.orgId,
regionCode: this.$store.state.regionCode,
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
}).then((data) => {
// console.log('���������������������')
console.log(data, 'tata')
- that.loading = false
this.markDeviceSite(data)
})
},
// ���������������
markDeviceSite(data) {
- // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]
- // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]
var keyData = data.data.devices
this.keyData = data.data.devices
// ���������������������
- this.stateControlStation()
- var group = L.layerGroup().addTo(this.map)
+ // this.stateControlStation()
+ var groupIcon = L.layerGroup().addTo(this.map)
+ var groupText = L.layerGroup().addTo(this.map)
this.keys = []
for (let i = 0; i < keyData.length; i++) {
if (keyData[i].a34002) {
@@ -1048,12 +824,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
@@ -1334,142 +1104,80 @@
iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
// iconUrl: require('@/assets/icon/ico2.png'),
iconSize: [60, 60],
- iconAnchor: [13, 21],
- className: 'my-device',
+ iconAnchor: [30, 48],
+ className: 'my-device'
})
+
// ���������������������
- L.marker([lat, lng], {
- icon: blueIcon,
- }).addTo(group)
+ const iconMarker = L.marker([lat, lng], {
+ icon: blueIcon
+ })
+ groupIcon.addLayer(iconMarker)
// console.log(JSON.parse(this.keys[i]))
var myIcon = L.divIcon({
html: this.keys[i],
className: 'my-div-icon',
- iconSize: 30,
+ iconSize: [60, 60],
+ iconAnchor: [40, 40]
})
- var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
+
+ const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+ 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)
- })
})
// ������������������������������������
- 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', {
+ getMarkerInfor(data, marker) {
this.$request({
- url: '/govMonitorPoint/queryStateControlStation',
+ url: '/historyFiveMinutely/queryPopDataByMac',
method: 'get',
params: {
- regionCode: 130900,
- sensorCode: 'a34002',
- },
+ mac: data.mac,
+ chooseTime: this.chooseTime,
+ time: this.nyr
+ }
})
.then((res) => {
- // console.log('���������������')
- // console.log(res)
- var gkData = res.data
- var group = L.layerGroup().addTo(this.map)
- for (let i = 0; i < gkData.length; i++) {
- var glat = gkData[i].latitude
- var glng = gkData[i].longitude
- var gIcon = L.icon({
- iconUrl: require('@/assets/icon/gk.png'),
- // iconUrl:require('@/assets/images/tl_PM10.png'),
- iconSize: [55, 55],
- iconAnchor: [13, 21],
- className: 'my-device',
- })
- // ���������������������
- L.marker([glat, glng], {
- icon: gIcon,
- }).addTo(group)
- var myIcon = L.divIcon({
- html: gkData[i].data,
- className: 'my-div-icon-g',
- iconSize: 30,
- })
- L.marker([glat, glng], {
- icon: myIcon,
- }).addTo(group)
+ 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 data = JSON.stringify(res.data)
+ .replace(/,/g, `<br>`)
+ .replace(/{|}|"/g, '')
+ console.log(data)
+ marker.bindPopup(data).openPopup()
})
.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)
- }
+ return data
},
// ���������������
windDir() {
@@ -1478,7 +1186,7 @@
// const that = this
// ������������������
if (this.map) {
- this.map.eachLayer(function (layer) {
+ this.map.eachLayer(function(layer) {
// ���������������������������
if (
!layer._container &&
@@ -1491,68 +1199,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()
+ this.getParamsData(true)
setTimeout(() => {
$.getJSON(
- 'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
+ 'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
{ monitorPointId: this.$store.state.monitorPointId },
(data) => {
- // ������������������
- // console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
- // console.log(data)
- // this.map.eachLayer(function(layer) {
- // // ���������������������������
- // if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
- // layer.remove()
- // }
- // })
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() {
+ getParamsData(isFirst = true) {
clearInterval(this.timer)
this.timer = setInterval(() => {
this.currentHour()
@@ -1572,45 +1239,61 @@
this.chooseTimeInfo = false
// console.log('else')
}
- // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
- // clearInterval(this.timer)
- if (this.windState === 1) {
- // this.ws.close()
- this.initData()
- // console.log('���������������')
- } else if (this.windState === 2) {
- this.windDir()
- // console.log('���������������')
- }
setTimeout(() => {
- this.change(this.changeColor)
+ console.log('change', isFirst)
+ if (isFirst) {
+ this.windData()
+ this.deviceMaker()
+ } else {
+ this.change(this.changeColor)
+ }
this.times = 300
}, 100)
}
}, 1000)
},
+ findLayer(layerName) { // ������������������������������
+ if (!this.map) {
+ return null
+ }
+ const gisMap_layers = this.map._layers
+ let layer = null
+ for (const i in gisMap_layers) {
+ if (gisMap_layers[i].options.id === layerName) {
+ layer = gisMap_layers[i]
+ }
+ }
+ return layer
+ },
// ���������������������
initMap() {
- // console.log('������index������map������������')
- // console.log(this.weidu)
- // console.log(this.jingdu)
var map = L.map('mapContent', {
+ inertia: false,
minZoom: 2,
maxZoom: 18,
center: [this.weiduNew, this.jingduNew],
zoom: 14,
+ renderer: L.canvas(),
zoomControl: false, // ������������
attributionControl: false, // ���������������logol
- crs: L.CRS.EPSG3857, // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
+ crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
})
// ������������������
L.tileLayer(
'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
).addTo(map)
- // L.tileLayer(
- // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
- // ).addTo(map)
this.map = map // data���������������
+ // const that = this
+ // this.map.on('mousedown', function(ev) {
+ // const res = that.findLayer('wmsid')
+ // if (res) {
+ // that.map.removeLayer(res)
+ // }
+ // })
+ // this.map.on('mouseup', function(ev) {
+ // console.log('1111111')
+ // that.canvasWind(this.windJsonData)
+ // })
window.map = map
},
// ������������������������
@@ -1651,20 +1334,16 @@
// ������������������
// this.toggleWindState()
if (this.windState === 1) {
- this.initData()
+ this.deviceMaker()
+ this.windData()
} else if (this.windState === 2) {
this.windDir()
}
},
// ���������������������
initData() {
- // console.log('������������')
- // const that = this
- // ������������������������
- // console.log(this.monitorPointId)
- // ������������������
if (this.map) {
- this.map.eachLayer(function (layer) {
+ this.map.eachLayer(function(layer) {
// ���������������������������
if (
!layer._container &&
@@ -1676,11 +1355,7 @@
})
}
this.deviceMaker()
- // console.log('������������������')
- // $.ajaxSettings.async = false
- // for (let i = 0; i < this.monitorPointIds.length; i++) {
this.windData()
- // }
},
// ���������������
windData() {
@@ -1690,63 +1365,58 @@
params: {
monitorPointIds: this.monitorPointIds.toString(),
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
})
.then((res) => {
- // console.log('���������������')
- // console.log(res)
- // if (res.data[0][0].data.length === 0) {
- // this.noneData = true
- // }
- // ������������������
- // var data2 = res.data[0]
- // data2[1].header.parameterNumberName = 'northward_wind'
- // data2[0].header.parameterUnit = 'm.s-1'
- // data2[1].header.parameterUnit = 'm.s-1'
- // data2[0].header.dx = 0.00234842479
- // data2[1].header.dx = 0.00234842479
- // data2[0].header.dy = 0.0018464922
- // data2[1].header.dy = 0.0018464922
- // console.log(data2, 'data2')
- var velocityLayer = L.velocityLayer({
- displayValues: false, // ���������������������������������������������������
- displayOptions: {
- // ������������������
- // velocityType: 'Global Wind',
- velocityType: 'GBR Wind',
- displayPosition: 'bottomleft',
- displayEmptyString: 'No wind data',
- },
- data: res.data[0], // ������ ���������������
- // data: data2,
- // ������������������������������������������
- minVelocity: 0, // ��������������������� m/s ���
- maxVelocity: 8, // ��������������������� m/s ���
- velocityScale: 0.1, // ��������������� ( ������������������������ )
- particleAge: 90, // ������������������������������������������
- lineWidth: 1.5, // ���������������������
- particleMultiplier: 1 / 300, // ��������������������� ������������ ���
- frameRate: 15, // ���������������������
- colorScale: [
- '#A2D839',
- '#7EB530',
- '#6E9F26',
- '#4E7522',
- '#345B1B',
- '#186303',
- '#175103',
- '#053F03',
- ],
- // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
- })
- velocityLayer.addTo(this.map) // ���������������
- // console.log('������������')
- // console.log(res.data[0])
+ 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) {
@@ -1763,8 +1433,8 @@
startTime: this.dateValue[0],
endTime: this.dateValue[1],
index: this.factorValue,
- alarmType: this.alartValue,
- },
+ alarmType: this.alartValue
+ }
}).then((res) => {
// console.log('������������')
// console.log(res)
@@ -1823,10 +1493,71 @@
}
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>
@@ -2117,4 +1848,9 @@
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