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 | 475 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 245 insertions(+), 230 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index a17e694..61678cc 100644 --- a/src/components/Wind/Map.vue +++ b/src/components/Wind/Map.vue @@ -464,7 +464,7 @@ dateInfo: '', // ��������������� timeInfo: '', // ��������������� nyr: '', // ������������������ - windALLData: [] + windJsonData: [] } }, computed: { @@ -477,6 +477,13 @@ }, regionCode(newCode, oldCode) { this.timerKey = newCode // ������������code��������������������������� + }, + windJsonData(newCode, oldCode) { + this.$nextTick(() => { + console.log('111') + + this.canvasWind(newCode) + }) } }, mounted() { @@ -498,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() { @@ -621,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) => { @@ -658,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 } @@ -682,7 +676,7 @@ // console.log('���������������������', greenInfo, 'index') } that.times = 1 - that.getParamsData() + that.getParamsData(true) } // ������������������������ for (let i = 0; i < lis.length; i++) { @@ -722,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 @@ -767,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', @@ -786,7 +792,6 @@ }).then((data) => { // console.log('���������������������') console.log(data, 'tata') - that.loading = false this.markDeviceSite(data) }) }, @@ -796,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))) @@ -1099,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() @@ -1282,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) { @@ -1353,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) { @@ -1391,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() { @@ -1411,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', @@ -1436,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, // ��������������������� @@ -1456,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) { @@ -1533,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 @@ -1751,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); */ } @@ -1765,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); */ } @@ -1775,8 +1793,6 @@ } .my-device { z-index: 999; - pointer-events: none !important; - cursor: pointer !important; } .windDir-icon { z-index: 10001; @@ -1837,5 +1853,4 @@ margin-left: -45px; margin-top: -40px; } - </style> -- Gitblit v1.8.0