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 | 476 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 245 insertions(+), 231 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 0fb34a3..61678cc 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -327,7 +327,6 @@
import 'leaflet/dist/leaflet.css'
import 'leaflet-velocity/dist/leaflet-velocity.css'
import L from 'leaflet'
-import 'wind-js-leaflet'
import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
import 'leaflet-velocity/dist/leaflet-velocity'
import $ from 'jquery'
@@ -465,7 +464,7 @@
dateInfo: '', // ���������������
timeInfo: '', // ���������������
nyr: '', // ������������������
- windALLData: []
+ windJsonData: []
}
},
computed: {
@@ -478,6 +477,13 @@
},
regionCode(newCode, oldCode) {
this.timerKey = newCode // ������������code���������������������������
+ },
+ windJsonData(newCode, oldCode) {
+ this.$nextTick(() => {
+ console.log('111')
+
+ this.canvasWind(newCode)
+ })
}
},
mounted() {
@@ -499,14 +505,9 @@
const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ���������������������������������
this.jingduNew = newLL[1]
this.weiduNew = newLL[0]
- // ���������������������
- // this.initData()
- // this.change(0)
- this.windData()
- this.getParamsData()
- // this.deviceMaker()
+ this.getParamsData(false)
+ // this.windDir()
this.newDate()
-
// this.alertData(this.PageSize, this.currentPage)
},
beforeDestroy() {
@@ -622,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) => {
@@ -659,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
}
@@ -683,7 +676,7 @@
// console.log('���������������������', greenInfo, 'index')
}
that.times = 1
- that.getParamsData()
+ that.getParamsData(true)
}
// ������������������������
for (let i = 0; i < lis.length; i++) {
@@ -723,6 +716,12 @@
},
// ���������������������
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
@@ -768,12 +767,18 @@
},
// ������������������,���������
deviceMaker() {
- // ������������������
if (this.map) {
- // const res = this.findLayer('wmsid')
- // this.map.removeLayer(res)
+ 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',
@@ -787,7 +792,6 @@
}).then((data) => {
// console.log('���������������������')
console.log(data, 'tata')
- that.loading = false
this.markDeviceSite(data)
})
},
@@ -797,9 +801,9 @@
this.keyData = data.data.devices
// ���������������������
// this.stateControlStation()
-
+ var groupIcon = L.layerGroup().addTo(this.map)
+ var groupText = L.layerGroup().addTo(this.map)
this.keys = []
- var markerList = []
for (let i = 0; i < keyData.length; i++) {
if (keyData[i].a34002) {
this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
@@ -1100,169 +1104,122 @@
iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
// iconUrl: require('@/assets/icon/ico2.png'),
iconSize: [60, 60],
+ iconAnchor: [30, 48],
className: 'my-device'
})
+
// ���������������������
- const a = L.marker([lat, lng], {
+ const iconMarker = L.marker([lat, lng], {
icon: blueIcon
})
- markerList.push(a)
- const bg = `<div style='height:20px;cursor: pointer;'>${this.keys[i]}</div>`
- console.log(JSON.parse(this.keys[i]))
+ groupIcon.addLayer(iconMarker)
+ // console.log(JSON.parse(this.keys[i]))
var myIcon = L.divIcon({
- html: bg,
+ html: this.keys[i],
className: 'my-div-icon',
- iconSize: [50, 20],
- iconAnchor: [26, 30]
+ iconSize: [60, 60],
+ iconAnchor: [40, 40]
})
- var b = L.marker([lat, lng], { icon: myIcon })
+
+ const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+ groupText.addLayer(TexteMarker)
+ const _this = this
// ������������������������������������mouseover���������������
- var _this = this
- b.on('mouseover', function(e) {
- console.log('e', e)
+ TexteMarker.on('click', function(e) {
+ const MarkerTarget = e.target
+ _this.getMarkerInfor(keyData[i], MarkerTarget)
this.noneData = false
- _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).togglePopup()
- })
- .catch((err) => {
- console.log(err)
- })
})
// ������������������������������������
- b.on('mouseout', function(e) {
- this.noneData = false
- this.bindPopup().togglePopup()
- })
- markerList.push(b)
+ // TexteMarker.on('mouseout', function(e) {
+ // this.noneData = false
+ // this.bindPopup().closePopup()
+ // })
}
- L.layerGroup(markerList).addTo(this.map)
},
- // ������������������������������������
- // 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)
})
+ return data
},
- // ������������������������
- // 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()
+ },
// ���������������������regionCode���������������api������
- // getRegionApiRequest() {
- // this.getParamsData()
- // setTimeout(() => {
- // $.getJSON(
- // 'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
- // { monitorPointId: this.$store.state.monitorPointId },
- // (data) => {
- // this.map.setView([data[2], data[1]], 12)
- // }
- // )
- // }, 1000)
- // if (this.windState === 1) {
- // this.initData()
- // } else if (this.windState === 2) {
- // this.windDir()
- // }
- // },
+ 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() {
- console.log('getParamsData', this.windState)
+ getParamsData(isFirst = true) {
clearInterval(this.timer)
this.timer = setInterval(() => {
this.currentHour()
@@ -1283,63 +1240,17 @@
// console.log('else')
}
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)
- },
-
- // ���������������
- // initMap() {
- // var map = new AMap.Map('container', {
- // resizeEnable: true,
- // rotateEnable: true,
- // pitchEnable: true,
- // zoom: 14,
- // pitch: 80,
- // expandZoomRange: true,
- // zooms: [3, 20],
- // center: [120.9781494, 31.4265156]
- // })
- // this.map = map
- // this.map.on('click', () => {
- // if (this.infoWindow !== null) {
- // this.infoWindow.close()
- // }
- // })
- // },
- // ���������������������
- initMap() {
- const 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)
- this.map = map // data���������������
- window.map = map
- const that = this
- this.map.invalidateSize(true)
- this.map.on('movestart', function(ev) {
- that.map.stop()
- console.log('move')
- const res = that.findLayer('wmsid')
- if (that.map.hasLayer(res)) {
- const res = that.findLayer('wmsid')
- that.map.removeLayer(res)
- }
- })
- this.map.on('moveend', function(ev) {
- that.openLayer()
- })
},
findLayer(layerName) { // ������������������������������
if (!this.map) {
@@ -1354,9 +1265,39 @@
}
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
+ },
// ������������������������
change(index) {
- console.log('change', this.windState)
this.changeColor = index
var pr = ''
switch (index) {
@@ -1392,13 +1333,29 @@
this.sensorKey = pr
// ������������������
// this.toggleWindState()
- this.deviceMaker()
- this.openLayer()
+ if (this.windState === 1) {
+ this.deviceMaker()
+ this.windData()
+ } else if (this.windState === 2) {
+ this.windDir()
+ }
},
// ���������������������
initData() {
- this.windData()
+ 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() {
@@ -1412,24 +1369,21 @@
}
})
.then((res) => {
- this.windALLData = []
- this.windALLData = res.data[0]
- this.openLayer()
+ this.windJsonData = res.data[0]
+ return this.windJsonData
})
.catch((err) => {
console.log(err)
})
},
- openLayer() {
+ canvasWind(data) {
const res = this.findLayer('wmsid')
- if (this.map.hasLayer(res)) {
- const res = this.findLayer('wmsid')
+ if (res) {
this.map.removeLayer(res)
}
var velocityLayer = L.velocityLayer({
+ displayValues: false, // ���������������������������������������������������
id: 'wmsid',
- localMode: true,
- displayValues: true, // ���������������������������������������������������
displayOptions: {
// ������������������
// velocityType: 'Global Wind',
@@ -1437,12 +1391,13 @@
displayPosition: 'bottomleft',
displayEmptyString: 'No wind data'
},
- data: this.windALLData, // ������ ���������������
+ data: data, // ������ ���������������
+ // data: data2,
// ������������������������������������������
minVelocity: 0, // ��������������������� m/s ���
maxVelocity: 8, // ��������������������� m/s ���
velocityScale: 0.1, // ��������������� ( ������������������������ )
- particleAge: 50, // ������������������������������������������
+ particleAge: 90, // ������������������������������������������
lineWidth: 1.5, // ���������������������
particleMultiplier: 1 / 300, // ��������������������� ������������ ���
frameRate: 15, // ���������������������
@@ -1457,8 +1412,11 @@
'#053F03'
]
// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
- }, { collapsed: false, hideSingleBase: true })
+ })
velocityLayer.addTo(this.map) // ���������������
+ setTimeout(() => {
+ this.loading = false
+ }, 1000)
},
// ������������������������������������������������������������������
alertData(n1, n2) {
@@ -1534,6 +1492,67 @@
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
@@ -1752,10 +1771,10 @@
.my-div-icon {
font-size: 14px;
text-align: center;
- padding-top: 13px;
+ padding-left: 20px;
+ padding-top: 6px;
font-family: '������������';
z-index: 10003;
- cursor: pointer !important;
/* -webkit-transform-origin-x: 0; */
/* -webkit-transform: scale(0.90); */
}
@@ -1766,8 +1785,6 @@
padding-top: 11px;
font-family: '������������';
z-index: 10003;
- pointer-events: none !important;
- cursor: pointer !important;
/* -webkit-transform-origin-x: 0; */
/* -webkit-transform: scale(0.90); */
}
@@ -1776,8 +1793,6 @@
}
.my-device {
z-index: 999;
- pointer-events: none !important;
- cursor: pointer !important;
}
.windDir-icon {
z-index: 10001;
@@ -1838,5 +1853,4 @@
margin-left: -45px;
margin-top: -40px;
}
-
</style>
--
Gitblit v1.8.0