From fcf1ab7acf2517d4a9884bc785430769b099b064 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Tue, 10 Oct 2023 10:29:30 +0800 Subject: [PATCH] fix:风场粒子修改 --- src/components/Wind/Map.vue | 553 +++++++++++++++++++++++++++++------------------------- 1 files changed, 299 insertions(+), 254 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index d6f260c..5414cfd 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: '', // ������������������ + windAllDate: [] } }, computed: { - ...mapGetters(['regionCode']), + ...mapGetters(['regionCode']) }, watch: { dateValue(n, o) { @@ -475,11 +477,20 @@ }, regionCode(newCode, oldCode) { this.timerKey = newCode // ������������code��������������������������� - }, + } }, mounted() { + this.$nextTick(() => { + this.getParamsData() + }) 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() @@ -491,12 +502,12 @@ this.jingduNew = newLL[1] this.weiduNew = newLL[0] // ��������������������� - this.windData() - this.change(0) - this.getParamsData() + // this.windData() + // this.change(0) + this.windDir() this.newDate() - this.alertData(this.PageSize, this.currentPage) + // this.alertData(this.PageSize, this.currentPage) }, beforeDestroy() { if (this.timer) { @@ -676,7 +687,7 @@ } // ������������������������ 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 +698,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 +715,7 @@ inText.innerHTML = times + ':00' // console.log(mouseDiv) } - timeLis[i].onmouseleave = function () { + timeLis[i].onmouseleave = function() { mouseDiv.style.display = 'none' // console.log('������������', i) } @@ -989,7 +1000,7 @@ deviceMaker() { // ������������������ if (this.map) { - this.map.eachLayer(function (layer) { + this.map.eachLayer(function(layer) { // ��������������������������� if ( !layer._container && @@ -1009,8 +1020,8 @@ 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') @@ -1335,23 +1346,23 @@ // iconUrl: require('@/assets/icon/ico2.png'), iconSize: [60, 60], iconAnchor: [30, 48], - className: 'my-device', + className: 'my-device' }) // ��������������������� L.marker([lat, lng], { - icon: blueIcon, + icon: blueIcon }).addTo(group) // console.log(JSON.parse(this.keys[i])) var myIcon = L.divIcon({ html: this.keys[i], className: 'my-div-icon', iconSize: [60, 60], - iconAnchor: [40, 40], + iconAnchor: [40, 40] }) var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group) // ������������������������������������mouseover��������������� var _this = this - marker.on('mouseover', function (e) { + marker.on('mouseover', function(e) { 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, '') @@ -1365,8 +1376,8 @@ params: { mac: keyData[i].mac, chooseTime: _this.chooseTime, - time: _this.nyr, - }, + time: _this.nyr + } }) .then((res) => { if (res.message == '���������������������') { @@ -1401,7 +1412,7 @@ }) }) // ������������������������������������ - marker.on('mouseout', function (e) { + marker.on('mouseout', function(e) { this.noneData = false this.bindPopup().closePopup() }) @@ -1419,8 +1430,8 @@ method: 'get', params: { regionCode: 130900, - sensorCode: 'a34002', - }, + sensorCode: 'a34002' + } }) .then((res) => { // console.log('���������������') @@ -1435,19 +1446,19 @@ // iconUrl:require('@/assets/images/tl_PM10.png'), iconSize: [55, 55], iconAnchor: [13, 21], - className: 'my-device', + className: 'my-device' }) // ��������������������� L.marker([glat, glng], { - icon: gIcon, + icon: gIcon }).addTo(group) var myIcon = L.divIcon({ html: gkData[i].data, className: 'my-div-icon-g', - iconSize: 30, + iconSize: 30 }) L.marker([glat, glng], { - icon: myIcon, + icon: myIcon }).addTo(group) } }) @@ -1479,7 +1490,7 @@ // const that = this // ������������������ if (this.map) { - this.map.eachLayer(function (layer) { + this.map.eachLayer(function(layer) { // ��������������������������� if ( !layer._container && @@ -1516,7 +1527,7 @@ this.getParamsData() 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) => { // ������������������ @@ -1533,14 +1544,14 @@ } ) }, 1000) - if (this.windState === 1) { - // this.ws.close() - this.initData() - // console.log('���������������') - } else if (this.windState === 2) { - this.windDir() - // console.log('���������������') - } + // if (this.windState === 1) { + // console.log('getRegionApiRequest') + // this.initData() + // console.log('���������������') + // } else if (this.windState === 2) { + // this.windDir() + // console.log('���������������') + // } // ������������������ // this.deviceMaker() // this.getParamsData() @@ -1575,14 +1586,14 @@ } // 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('���������������') - } + // if (this.windState === 1) { + // this.ws.close() + // this.initData() + // console.log('���������������') + // } else if (this.windState === 2) { + // this.windDir() + // console.log('���������������') + // } setTimeout(() => { this.change(this.changeColor) this.times = 300 @@ -1590,6 +1601,21 @@ } }, 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������������') @@ -1601,8 +1627,12 @@ center: [this.weiduNew, this.jingduNew], zoom: 14, zoomControl: false, // ������������ - attributionControl: false, // ���������������logol - crs: L.CRS.EPSG3857, // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84 + trackResize: true, + worldCopyJump: true, + dragging: true, + inertia: true, + attributionControl: true, // ���������������logol + crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84 }) // ������������������ L.tileLayer( @@ -1611,11 +1641,26 @@ // 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 ���������������������') + // }) window.map = map }, // ������������������������ change(index) { + if (this.windState === 1) { + this.initData() + } else if (this.windState === 2) { + this.windDir() + } this.changeColor = index var pr = '' switch (index) { @@ -1651,11 +1696,6 @@ this.sensorKey = pr // ������������������ // this.toggleWindState() - if (this.windState === 1) { - this.initData() - } else if (this.windState === 2) { - this.windDir() - } }, // ��������������������� initData() { @@ -1665,7 +1705,7 @@ // console.log(this.monitorPointId) // ������������������ if (this.map) { - this.map.eachLayer(function (layer) { + this.map.eachLayer(function(layer) { // ��������������������������� if ( !layer._container && @@ -1676,11 +1716,11 @@ } }) } + this.windData() this.deviceMaker() // console.log('������������������') // $.ajaxSettings.async = false // for (let i = 0; i < this.monitorPointIds.length; i++) { - this.windData() // } }, // ��������������� @@ -1691,10 +1731,12 @@ params: { monitorPointIds: this.monitorPointIds.toString(), chooseTime: this.chooseTime, - time: this.nyr, - }, + 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) { @@ -1710,44 +1752,47 @@ // 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]) }) .catch((err) => { console.log(err) }) + }, + openWindCanves() { + var velocityLayer = L.velocityLayer({ + displayValues: true, // ��������������������������������������������������� + id: 'wmsid', + displayOptions: { + // ������������������ + // velocityType: 'Global Wind', + velocityType: 'GBR Wind', + displayPosition: 'bottomleft', + displayEmptyString: 'No wind data' + }, + data: this.windAllDate, // ������ ��������������� + // 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) // ��������������� }, // ������������������������������������������������������������������ alertData(n1, n2) { @@ -1764,8 +1809,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) @@ -1826,8 +1871,8 @@ }, closeAlarmTableVisible() { this.$store.state.alarmTableVisible = false - }, - }, + } + } } </script> -- Gitblit v1.8.0