From dc3dfdd4b6d9634f49a2ef4e501dc0f9885f6fbe Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 12 Oct 2023 13:26:50 +0800 Subject: [PATCH] Merge branch 'feature_1.0' --- src/components/Wind/Map.vue | 1214 ++++++++++++++++++++++++++++++++------------------------- 1 files changed, 674 insertions(+), 540 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index 96f5bdc..1f75648 100644 --- a/src/components/Wind/Map.vue +++ b/src/components/Wind/Map.vue @@ -17,185 +17,218 @@ <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> --> <span class="right">{{ times }}���</span> <span class="dropDown"> - <img class="realTime_top" :src="require('@/assets/images/regionalOverview/realTimeImg.png')" alt="" @click="turnState"> + <img + class="realTime_top" + :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"> </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 style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv"> - <p class="p1"></p> + <div + style=" + display: flex; + width: 100%; + border-top: 1px solid rgba(255, 255, 255, 0.5); + " + class="dayDiv" + > + <p class="p1" /> <p style="position: relative"> - <span class="borderLine" style="position: absolute; left: 0; border-left: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span> - <span class="p2"></span> - <span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span> + <span + class="borderLine" + style=" + position: absolute; + left: 0; + border-left: 1px solid rgba(255, 255, 255, 1); + height: 47px; + bottom: 0; + " + /> + <span class="p2" /> + <span + class="borderLine" + style=" + position: absolute; + right: 0; + border-right: 1px solid rgba(255, 255, 255, 1); + height: 47px; + bottom: 0; + " + /> </p> - <p class="p3"></p> + <p class="p3" /> </div> </div> </div> <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" /> - <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" /> + <div + :style="{ background: 'url(' + bg + ') no-repeat' }" + class="buttom-left" + /> <el-dialog title="������������������" :visible.sync="alarmTableVisible" @@ -207,7 +240,7 @@ <div> <el-date-picker v-model="dateValue" - style="width:400px" + style="width: 400px" type="daterange" range-separator="���" start-placeholder="������������" @@ -230,22 +263,46 @@ :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 - :data="gridData.slice((currentPage-1)*PageSize,currentPage*PageSize)" + :data=" + gridData.slice((currentPage - 1) * PageSize, currentPage * PageSize) + " border stripe :cell-class-name="tableCellClassName" height="400" > - <el-table-column property="alarmInfoId" label="������" width="50" align="center" /> + <el-table-column + property="alarmInfoId" + label="������" + 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="index" label="������" width="80" align="center" /> - <el-table-column property="alarm_type" label="������������" width="200" align="center" /> - <el-table-column property="alarm_information" label="������������" align="center" /> + <el-table-column + property="index" + label="������" + width="80" + align="center" + /> + <el-table-column + property="alarm_type" + label="������������" + width="200" + align="center" + /> + <el-table-column + property="alarm_information" + label="������������" + align="center" + /> </el-table> <el-pagination :current-page="currentPage" @@ -257,7 +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> @@ -289,15 +349,7 @@ code: [], latlng: [], noneData: false, - params: [ - 'PM10', - 'PM2.5', - 'SO2', - 'NO2', - 'CO', - 'O3', - 'TVOC' - ], + params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'], changeColor: 0, times: 1, sensorKey: 'a34002', @@ -411,7 +463,7 @@ chooseTime: false, dateInfo: '', // ��������������� timeInfo: '', // ��������������� - nyr: '', // ������������������ + nyr: '' // ������������������ } }, computed: { @@ -428,7 +480,13 @@ }, 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() @@ -440,12 +498,12 @@ this.jingduNew = newLL[1] this.weiduNew = newLL[0] // ��������������������� - this.windData() - this.change(0) + // this.windData() + // this.change(0) this.getParamsData() this.windDir() this.newDate() - this.alertData(this.PageSize, this.currentPage) + // this.alertData(this.PageSize, this.currentPage) }, beforeDestroy() { if (this.timer) { @@ -471,10 +529,10 @@ if (day === 'today') { rq = this.newData(0) } else if (day === 'yesterday') { - days = ((days + 7) - 1) % 7 + days = (days + 7 - 1) % 7 rq = this.newData(-1) // ������������ } else if (day === 'beforeYea') { - days = ((days + 7) - 2) % 7 + days = (days + 7 - 2) % 7 rq = this.newData(-2) // ������������ } switch (days) { @@ -550,7 +608,7 @@ lis[i].style.backgroundColor = 'green' if (lis[i] === target) { // mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%' - mouseDiv2.style.left = (1.36986 * (i + 1)) + '%' + mouseDiv2.style.left = 1.36986 * (i + 1) + '%' mouseDiv2.style.transform = 'translateX(-50%)' mouseDiv2.style.display = 'block' var times = (i - 0 + 1) % 24 @@ -579,7 +637,7 @@ that.getParamsData() } // timeUl������������������ - timeUl.onclick = e => { + timeUl.onclick = (e) => { // ������������li��������������������� var target = e.target if (target.tagName.toLowerCase() === 'li') { @@ -587,7 +645,7 @@ if (timeLis[i] === target) { greenInfo = i // mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%' - mouseDiv2.style.left = (1.36986 * i) + '%' + mouseDiv2.style.left = 1.36986 * i + '%' mouseDiv2.style.transform = 'translateX(-50%)' mouseDiv2.style.display = 'block' var times = i % 24 @@ -629,7 +687,7 @@ // console.log('mouseenter', i) // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%' mouseDiv.style.transform = 'translateX(-50%)' - mouseDiv.style.left = (1.36986 * (i + 1)) + '%' + mouseDiv.style.left = 1.36986 * (i + 1) + '%' mouseDiv.style.display = 'block' var times = (i - 0 + 1) % 24 times = times > 9 ? times : '0' + times @@ -645,7 +703,7 @@ timeLis[i].onmouseenter = function() { // console.log('mouseenter', i) // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%' - mouseDiv.style.left = (1.36986 * i) + '%' + mouseDiv.style.left = 1.36986 * i + '%' mouseDiv.style.transform = 'translateX(-50%)' mouseDiv.style.display = 'block' var times = i % 24 @@ -668,16 +726,24 @@ // const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00' // this.dateFormat = currentDate.toString() const aData = new Date() - const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1 - const date = aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate() - const hour = aData.getHours() - const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00' + const month = + aData.getMonth() < 9 + ? '0' + (aData.getMonth() + 1) + : aData.getMonth() + 1 + const date = + aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate() + const hour = aData.getHours() + const currentDate = + aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00' this.dateFormat = currentDate.toString() }, // ��������������� newDate() { var aData = new Date() - var month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1 + var month = + aData.getMonth() < 9 + ? '0' + (aData.getMonth() + 1) + : aData.getMonth() + 1 var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate() this.currentDate = aData.getFullYear() + '-' + month + '-' + date // console.log(this.currentDate) @@ -691,186 +757,186 @@ 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() - }, + // 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������������') + // 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) - } - } - } - } - } - } - } - } - }, + // 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 + var x_pi = (3.14159265358979324 * 3000.0) / 180.0 var x = bd_lon - 0.0065 var y = bd_lat - 0.006 var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi) @@ -932,7 +998,11 @@ if (this.map) { this.map.eachLayer(function(layer) { // ��������������������������� - if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') { + if ( + !layer._container && + ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== + 'leaflet-layer' + ) { layer.remove() } }) @@ -950,7 +1020,7 @@ } }).then((data) => { // console.log('���������������������') - // console.log(data) + console.log(data, 'tata') that.loading = false this.markDeviceSite(data) }) @@ -986,6 +1056,11 @@ // } } // 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 @@ -995,35 +1070,35 @@ if (keyData[i].a34002) { var data = Math.floor(JSON.parse(keyData[i].a34002)) switch (true) { - case (data < 0): { + case data < 0: { colorNum = 7 break } - case (data === 0): { + case data === 0: { colorNum = 0 break } - case (data <= 50): { + case data <= 50: { colorNum = 1 break } - case (data <= 150): { + case data <= 150: { colorNum = 2 break } - case (data <= 250): { + case data <= 250: { colorNum = 3 break } - case (data <= 350): { + case data <= 350: { colorNum = 4 break } - case (data <= 420): { + case data <= 420: { colorNum = 5 break } - case (data > 420): { + case data > 420: { colorNum = 6 break } @@ -1107,7 +1182,9 @@ break } } else if (keyData[i].a21004) { - var data = Math.floor(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))) + var data = Math.floor( + Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)) + ) switch (true) { case data < 0: { colorNum = 7 @@ -1255,8 +1332,8 @@ colorNum = 6 break } - // default: - // break + // default: + // break } } @@ -1264,7 +1341,7 @@ iconUrl: require('@/assets/icon/ico' + colorNum + '.png'), // iconUrl: require('@/assets/icon/ico2.png'), iconSize: [60, 60], - iconAnchor: [13, 21], + iconAnchor: [30, 48], className: 'my-device' }) // ��������������������� @@ -1275,7 +1352,8 @@ 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) // ������������������������������������mouseover��������������� @@ -1287,32 +1365,47 @@ // // 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) => { - 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) + _this + .$request({ + url: '/historyFiveMinutely/queryPopDataByMac', + method: 'get', + params: { + mac: keyData[i].mac, + chooseTime: _this.chooseTime, + time: _this.nyr } - } - var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '') - this.bindPopup(data).openPopup() - }).catch((err) => { - console.log(err) - }) + }) + .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) { @@ -1335,37 +1428,39 @@ 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) }) + .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() { @@ -1393,7 +1488,11 @@ if (this.map) { this.map.eachLayer(function(layer) { // ��������������������������� - if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') { + if ( + !layer._container && + ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== + 'leaflet-layer' + ) { layer.remove() } }) @@ -1402,7 +1501,7 @@ this.deviceMaker() // ������ws������ // this.wsStart() - this.initWebpack() + // this.initWebpack() // console.log('������ws���������������������') // console.log(this.accountId, this.orgId, this.regionCode) // this.timer2 = setInterval(() => { @@ -1423,28 +1522,32 @@ // ������������������������ this.getParamsData() setTimeout(() => { - $.getJSON('http://47.99.64.149:8080/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('������������') - }) + $.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() + // } + // }) + 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('���������������') - } + // if (this.windState === 1) { + // console.log('getRegionApiRequest') + // this.initData() + // console.log('���������������') + // } else if (this.windState === 2) { + // this.windDir() + // console.log('���������������') + // } // ������������������ // this.deviceMaker() // this.getParamsData() @@ -1460,6 +1563,7 @@ getParamsData() { clearInterval(this.timer) this.timer = setInterval(() => { + this.currentHour() this.times-- if (this.times === 0) { // ��������������������������� @@ -1478,14 +1582,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 @@ -1508,7 +1612,9 @@ 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( + '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) @@ -1520,25 +1626,32 @@ this.changeColor = index var pr = '' switch (index) { - case 0: pr = 'a34002' + case 0: + pr = 'a34002' this.bg = require('@/assets/images/tl_PM10.png') break - case 1: pr = 'a34004' + case 1: + pr = 'a34004' this.bg = require('@/assets/images/tl_PM2.5.png') break - case 2: pr = 'a21026' + case 2: + pr = 'a21026' this.bg = require('@/assets/images/tl_SO2.png') break - case 3: pr = 'a21004' + case 3: + pr = 'a21004' this.bg = require('@/assets/images/tl_NO2.png') break - case 4: pr = 'a21005' + case 4: + pr = 'a21005' this.bg = require('@/assets/images/tl_CO.png') break - case 5: pr = 'a05024' + case 5: + pr = 'a05024' this.bg = require('@/assets/images/tl_O3.png') break - case 6: pr = 'a99054' + case 6: + pr = 'a99054' this.bg = require('@/assets/images/tl_TVOCNew.png') break } @@ -1561,7 +1674,11 @@ if (this.map) { this.map.eachLayer(function(layer) { // ��������������������������� - if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') { + if ( + !layer._container && + ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== + 'leaflet-layer' + ) { layer.remove() } }) @@ -1583,49 +1700,61 @@ chooseTime: this.chooseTime, 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]) - }).catch(err => { - console.log(err) }) + .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]) + }) + .catch((err) => { + console.log(err) + }) }, // ������������������������������������������������������������������ alertData(n1, n2) { @@ -1644,20 +1773,19 @@ index: this.factorValue, alarmType: this.alartValue } + }).then((res) => { + // console.log('������������') + // console.log(res) + var tempData = res.data + // console.log(tempData) + for (let i = 0; i < tempData.alarmInfos.length; i++) { + tempData.alarmInfos[i].alarmInfoId = i + 1 + } + // ������������������tableData + this.gridData = tempData.alarmInfos + // ���������������������������totalCount + this.totalCount = tempData.alarmInfos.length }) - .then(res => { - // console.log('������������') - // console.log(res) - var tempData = res.data - // console.log(tempData) - for (let i = 0; i < tempData.alarmInfos.length; i++) { - tempData.alarmInfos[i].alarmInfoId = i + 1 - } - // ������������������tableData - this.gridData = tempData.alarmInfos - // ���������������������������totalCount - this.totalCount = tempData.alarmInfos.length - }) }, // ������ // ��������������������� @@ -1682,11 +1810,11 @@ // console.log(row[key]) if (row[key] === 0 || row[key] === '' || row[key] === null) { return '' - } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 100) { + } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) { return 'yellow' - } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 150) { + } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) { return 'orange' - } else if (Number(row[key].replace(/[^0-9]/ig, '')) === 250) { + } else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) { return 'red' } } @@ -1706,7 +1834,6 @@ closeAlarmTableVisible() { this.$store.state.alarmTableVisible = false } - } } </script> @@ -1753,7 +1880,8 @@ box-shadow: 1px 1px 5px #666; cursor: pointer; } -.mouseDiv, .mouseDiv2{ +.mouseDiv, +.mouseDiv2 { position: absolute; left: 0; background-color: #009845; @@ -1767,7 +1895,8 @@ padding: 1px; color: white; } -.sjDiv, .sjDiv2{ +.sjDiv, +.sjDiv2 { width: 0px; height: 0px; border: 10px solid transparent; @@ -1779,48 +1908,48 @@ top: 100%; z-index: -1; } -.mouseDiv2{ +.mouseDiv2 { background-color: #2b2b2b; } -.sjDiv2{ +.sjDiv2 { border-top-color: #2b2b2b; } -.jdt{ +.jdt { height: 5px; width: 100%; display: flex; position: relative; } -.timeDiv{ +.timeDiv { width: 100%; float: left; } -.topDate .timeDiv:nth-child(3){ +.topDate .timeDiv:nth-child(3) { border-left: 1px solid white; border-right: 1px solid white; } -.topDate ul{ +.topDate ul { margin: 0; padding: 0; list-style: none; display: flex; } -.topDate li{ +.topDate li { width: 1.36986%; //padding: 0 2%; box-sizing: border-box; //transform: translateX(50%); } -.topDate p{ +.topDate p { text-align: center; font-size: 16px; margin: 0; padding: 0; } -.jdt li{ +.jdt li { //box-sizing: border-box; border-left: 1px solid white; - background-color: rgba(0,0,0,0.3); + background-color: rgba(0, 0, 0, 0.3); height: 100%; width: 1.36986%; list-style: none; @@ -1828,7 +1957,7 @@ left: 0; top: 0; } -.dayDiv p{ +.dayDiv p { width: 32.87664%; text-align: center; } @@ -1896,7 +2025,7 @@ position: fixed; right: 0; top: 50px; - background-color: rgba(15, 69, 103, 0.8); + background-color: rgba(15, 69, 103, 0.8); } .dropDown > .drop-icon { vertical-align: middle; @@ -1978,22 +2107,27 @@ -webkit-transform-origin-x: 0; margin-left: 20px; } -.el-dialog__body{ +.el-dialog__body { padding: 10px 20px; } -.el-dialog__footer{ +.el-dialog__footer { padding: 0px 20px 15px; } -.yellow{ - background-color: #ffff00!important; - color: #868600!important; +.yellow { + background-color: #ffff00 !important; + color: #868600 !important; } -.orange{ - background-color: #ff7e00!important; - color: #844100!important; +.orange { + background-color: #ff7e00 !important; + color: #844100 !important; } -.red{ - background-color: #ff0000!important; - color: #790000!important; +.red { + 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