From f752f50a484f63fc3786ab1c7ad563f3b17cce77 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 15 Nov 2024 15:58:32 +0800 Subject: [PATCH] fix: 国控站 --- src/components/Wind/Map.vue | 901 +++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 625 insertions(+), 276 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index f62f064..0e7ff17 100644 --- a/src/components/Wind/Map.vue +++ b/src/components/Wind/Map.vue @@ -5,7 +5,10 @@ element-loading-text="���������" element-loading-background="rgba(0, 0, 0, 0.6)" > - <div v-if="noneData" class="noneData"> + <div + v-if="noneData" + class="noneData" + > ������������������������������ </div> <div class="top"> @@ -25,7 +28,20 @@ alt="" @click="turnState" > - <span class="text_Time">{{ dateFormat }}</span> + <span class="text_Time"> + <el-date-picker + v-model="selectData" + popper-class="tpc" + value-format="yyyy-MM-dd HH" + format="yyyy-MM-dd HH" + :clearable="false" + :editable="false" + type="datetime" + :picker-options="pickerOptions" + placeholder="������������������" + @change="changeData" + /> + </span> <img class="drop-icon" :src="turnImg" @@ -34,8 +50,14 @@ > </span> </div> - <div class="topDate" style="height: 60px"> - <div id="eventPro" class="jdt"> + <div + class="topDate" + style="height: 60px" + > + <div + id="eventPro" + class="jdt" + > <div class="mouseDiv"> <span class="inText" /> <div class="sjDiv" /> @@ -117,7 +139,10 @@ <li /> <li /> </div> - <div class="timeDiv" style="position: relative"> + <div + class="timeDiv" + style="position: relative" + > <ul id="timeUl"> <li style="width: 0.83%" /> <li /> @@ -231,7 +256,11 @@ </div> </div> </div> - <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" /> + <regional-overview + :key="timerKey" + :map="map" + :show-flag="showOrHidden" + /> <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" @@ -254,7 +283,10 @@ end-placeholder="������������" value-format="yyyy-MM-dd" /> - <el-select v-model="factorValue" placeholder="������������"> + <el-select + v-model="factorValue" + placeholder="������������" + > <el-option v-for="item in factorOptions" :key="item.value" @@ -262,7 +294,10 @@ :value="item.value" /> </el-select> - <el-select v-model="alartValue" placeholder="������������������"> + <el-select + v-model="alartValue" + placeholder="������������������" + > <el-option v-for="item in alertOptions" :key="item.value" @@ -270,7 +305,10 @@ :value="item.value" /> </el-select> - <el-button type="primary" @click="alertData(PageSize, currentPage)"> + <el-button + type="primary" + @click="alertData(PageSize, currentPage)" + > ������ </el-button> </div> @@ -290,8 +328,16 @@ 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="alarm_time" + label="������������" + width="150" + /> + <el-table-column + property="deviceName" + label="������������" + width="200" + /> <el-table-column property="index" label="������" @@ -319,8 +365,14 @@ @size-change="handleSizeChange" @current-change="handleCurrentChange" /> - <div slot="footer" class="dialog-footer"> - <el-button size="mini" @click="alarmTableVisible = false"> + <div + slot="footer" + class="dialog-footer" + > + <el-button + size="mini" + @click="alarmTableVisible = false" + > ��� ��� </el-button> </div> @@ -339,7 +391,7 @@ import { WWindUtil } from '@/components/Wind/WRatingArr.js' import RegionalOverview from '@/components/Wind/RegionalOverview' // ������������������ import { mapGetters } from 'vuex' -import { gcj02towgs84 } from '@/assets/json/transform' +// import { gcj02towgs84 } from '@/assets/json/transform' export default { components: { RegionalOverview }, props: { @@ -348,14 +400,20 @@ jingdu: Number, monitorPointId: Number, monitorPointIds: Array, + defaultData: Array }, - data() { + data () { return { compassBg: require('@/assets/images/regionalOverview/wind_watch.png'), compassDirection: require('@/assets/images/regionalOverview/wind_point.png'), timerKey: '', // ��������������������������� map: null, code: [], + pickerOptions: { + disabledDate: (time) => { + return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000 + }, + }, latlng: [], noneData: false, params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'], @@ -392,81 +450,82 @@ // ������������������������������������������(���������������������������) totalCount: 0, // ������������������������������ - pageSizes: [10, 20, 30, 40], + pageSizes: [10, 50, 100, 200], // ������������������������������������������ PageSize: 20, 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'), showOrHidden: true, dateFormat: '', + selectData: new Date(), alarmTableVisible: false, chooseTimeInfo: false, // ������������������������ chooseTime: false, @@ -474,32 +533,35 @@ timeInfo: '', // ��������������� nyr: '', // ������������������ windJsonData: [], + clickmac: '', + childerItem: {}, + farterItem: {}, + indexsLaber: 0, + time: new Date() } }, computed: { - ...mapGetters(['regionCode']), + ...mapGetters(['regionCode']) }, watch: { - dateValue(n, o) { - // console.log(n) + dateValue (n, o) { // this.newDate() }, - regionCode(newCode, oldCode) { + regionCode (newCode, oldCode) { this.timerKey = newCode // ������������code��������������������������� }, - windJsonData(newCode, oldCode) { + windJsonData (newCode, oldCode) { this.$nextTick(() => { - console.log('111') - this.canvasWind(newCode) }) - }, + } }, - mounted() { + mounted () { this.currentHour() this.$Bus.$on( 'alarmTableVisible', - (res) => ( + res => ( + // eslint-disable-next-line no-sequences (this.alarmTableVisible = res), this.alertData(this.PageSize, this.currentPage) ) @@ -509,8 +571,12 @@ // ������������ this.eventProxy() + window.deviceDetail = this.deviceDetail }, - created() { + created () { + if (this.$store.state.orgId === 72) { + this.changeColor = 1 + } const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ��������������������������������� this.jingduNew = newLL[1] this.weiduNew = newLL[0] @@ -519,30 +585,25 @@ this.newDate() // this.alertData(this.PageSize, this.currentPage) }, - beforeDestroy() { + beforeDestroy () { if (this.timer) { clearInterval(this.timer) - // console.log('timer���������������������') } if (this.timer2) { - // console.log(this.timer2) clearInterval(this.timer2) - // console.log('timer2���������������������') } // ���������������������websocket if (this.ws) { - // console.log('WS������') this.ws.close() } }, methods: { // ������������������������������ - getDayXQ(day) { - var days = new Date() -.getDay() // ������ + getDayXQ (day) { + var days = new Date().getDay() // ������ // ������ var rq = '' // ������ if (day === 'today') { - rq = this.newData(0) + rq = this.newData(0) // ������������ } else if (day === 'yesterday') { days = (days + 7 - 1) % 7 rq = this.newData(-1) // ������������ @@ -576,7 +637,7 @@ return `${rq}(${days})` }, // ��������������������������������������� - newData(day, info) { + newData (day, info) { var today = new Date() var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day today.setTime(targetday_milliseconds) @@ -592,7 +653,7 @@ } }, // ������������ - eventProxy() { + eventProxy () { // ������������������������������ var ul = document.querySelector('#eventPro') var lis = document.querySelectorAll('#eventPro>li') @@ -610,7 +671,7 @@ p1.innerHTML = this.getDayXQ('beforeYea') var greenInfo = 0 var that = this - ul.onclick = (e) => { + ul.onclick = e => { var target = e.target if (target.tagName.toLowerCase() === 'li') { // ������������li��������������������� @@ -631,6 +692,7 @@ inText2.innerHTML = times + ':00' this.chooseTimeInfo = true // ��������������� this.chooseTime = true // ��������������� + console.log('times', times) if ((i + 1) / 24 < 1) { this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00' } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) { @@ -648,7 +710,7 @@ that.getParamsData(true) } // timeUl������������������ - timeUl.onclick = (e) => { + timeUl.onclick = e => { // ������������li��������������������� var target = e.target if (target.tagName.toLowerCase() === 'li') { @@ -664,6 +726,7 @@ inText2.innerHTML = times + ':00' this.chooseTimeInfo = true // ��������������� this.chooseTime = true // ��������������� + console.log('times', times) if (i / 24 < 1) { this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00' } else if (i / 24 < 2 && i / 24 >= 1) { @@ -683,7 +746,6 @@ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)' } } - // console.log('���������������������', greenInfo, 'index') } that.times = 1 that.getParamsData(true) @@ -691,41 +753,33 @@ // ������������������������ for (let i = 0; i < lis.length; i++) { lis[i].onmouseenter = function () { - // 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.display = 'block' var times = (i - 0 + 1) % 24 times = times > 9 ? times : '0' + times inText.innerHTML = times + ':00' - // console.log(mouseDiv) } lis[i].onmouseleave = function () { mouseDiv.style.display = 'none' - // console.log('������������', i) } } for (let i = 0; i < timeLis.length; i++) { 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.transform = 'translateX(-50%)' mouseDiv.style.display = 'block' var times = i % 24 times = times > 9 ? times : '0' + times inText.innerHTML = times + ':00' - // console.log(mouseDiv) } timeLis[i].onmouseleave = function () { mouseDiv.style.display = 'none' - // console.log('������������', i) } } }, // ��������������������� - currentHour() { + 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() @@ -745,7 +799,7 @@ this.dateFormat = currentDate.toString() }, // ��������������� - newDate() { + newDate () { var aData = new Date() var month = aData.getMonth() < 9 @@ -753,19 +807,18 @@ : aData.getMonth() + 1 var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate() this.currentDate = aData.getFullYear() + '-' + month + '-' + date - // console.log(this.currentDate) this.dateValue = [this.currentDate, this.currentDate] }, // ������������������ - mouseOver() { + mouseOver () { this.map.scrollWheelZoom.disable() }, // ������������������ - mouseLeave() { + mouseLeave () { this.map.scrollWheelZoom.enable() }, // ��������������������������������� - bd09togcj02(bd_lon, bd_lat) { + bd09togcj02 (bd_lon, bd_lat) { var x_pi = (3.14159265358979324 * 3000.0) / 180.0 var x = bd_lon - 0.0065 var y = bd_lat - 0.006 @@ -776,14 +829,13 @@ return [gg_lat, gg_lng] }, // ������������������,��������� - deviceMaker() { + deviceMaker () { if (this.map) { this.map.eachLayer(function (layer) { // ��������������������������� if ( !layer._container && - ('' + $(layer._container) -.attr('class')).replace(/\s/g, '') !== + ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer' ) { layer.remove() @@ -798,24 +850,19 @@ organizationId: this.$store.state.orgId, regionCode: this.$store.state.regionCode, chooseTime: this.chooseTime, - time: this.nyr, - }, - }) -.then((data) => { - // console.log('���������������������') + time: this.nyr + } + }).then(data => { this.markDeviceSite(data) + this.stateControlStation()// ��������������������� }) }, // ��������������� - markDeviceSite(data) { + markDeviceSite (data) { var keyData = data.data.devices this.keyData = data.data.devices - // ��������������������� - // this.stateControlStation() - var groupIcon = L.layerGroup() -.addTo(this.map) - var groupText = L.layerGroup() -.addTo(this.map) + var groupIcon = L.layerGroup().addTo(this.map) + var groupText = L.layerGroup().addTo(this.map) this.keys = [] for (let i = 0; i < keyData.length; i++) { if (keyData[i].a34002) { @@ -825,16 +872,13 @@ } else if (keyData[i].a21026) { this.keys.push(Math.floor(JSON.parse(keyData[i].a21026))) } else if (keyData[i].a21004) { - this.keys.push(Math.floor(JSON.parse(keyData[i].a21004) -.toFixed(0))) + this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))) } else if (keyData[i].a21005) { - this.keys.push(JSON.parse(keyData[i].a21005) -.toFixed(3)) + this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3)) } else if (keyData[i].a05024) { this.keys.push(Math.floor(JSON.parse(keyData[i].a05024))) } else if (keyData[i].a99054) { - this.keys.push(JSON.parse(keyData[i].a99054) -.toFixed(3)) + this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3)) } else { // for (let j = 0; j < keyData.length; j++) { this.keys.push(JSON.parse('null')) @@ -847,7 +891,7 @@ // ������������key������������������������������������������������ var colorNum = 7 if (keyData[i].a34002) { - var data = Math.floor(JSON.parse(keyData[i].a34002)) + let data = Math.floor(JSON.parse(keyData[i].a34002)) switch (true) { case data < 0: { colorNum = 7 @@ -885,7 +929,7 @@ break } } else if (keyData[i].a34004) { - var data = Math.floor(JSON.parse(keyData[i].a34004)) + let data = Math.floor(JSON.parse(keyData[i].a34004)) switch (true) { case data < 0: { colorNum = 7 @@ -923,7 +967,7 @@ break } } else if (keyData[i].a21026) { - var data = Math.floor(JSON.parse(keyData[i].a21026)) + let data = Math.floor(JSON.parse(keyData[i].a21026)) switch (true) { case data < 0: { colorNum = 7 @@ -961,9 +1005,8 @@ break } } else if (keyData[i].a21004) { - var data = Math.floor( - Math.floor(JSON.parse(keyData[i].a21004) -.toFixed(0)) + let data = Math.floor( + Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)) ) switch (true) { case data < 0: { @@ -1002,8 +1045,7 @@ break } } else if (keyData[i].a21005) { - var data = JSON.parse(keyData[i].a21005) -.toFixed(3) + let data = JSON.parse(keyData[i].a21005).toFixed(3) switch (true) { case data < 0: { colorNum = 7 @@ -1041,7 +1083,7 @@ break } } else if (keyData[i].a05024) { - var data = Math.floor(JSON.parse(keyData[i].a05024)) + let data = Math.floor(JSON.parse(keyData[i].a05024)) switch (true) { case data < 0: { colorNum = 7 @@ -1079,8 +1121,7 @@ break } } else if (keyData[i].a99054) { - var data = JSON.parse(keyData[i].a99054) -.toFixed(3) + let data = JSON.parse(keyData[i].a99054).toFixed(3) switch (true) { case data < 0: { colorNum = 7 @@ -1124,24 +1165,23 @@ // iconUrl: require('@/assets/icon/ico2.png'), iconSize: [60, 60], iconAnchor: [30, 48], - className: 'my-device', + className: 'my-device' }) // ��������������������� const iconMarker = L.marker([lat, lng], { - icon: blueIcon, + icon: blueIcon }) groupIcon.addLayer(iconMarker) - // console.log(JSON.parse(this.keys[i])) var myIcon = L.divIcon({ html: this.keys[i], className: 'my-div-icon', iconSize: [60, 60], - iconAnchor: [40, 40], + iconAnchor: [40, 40] }) const TexteMarker = L.marker([lat, lng], { icon: myIcon }) - TexteMarker.vuecontext = this + TexteMarker.inforData = keyData[i] groupText.addLayer(TexteMarker) const _this = this // ������������������������������������mouseover��������������� @@ -1158,24 +1198,23 @@ // this.bindPopup().closePopup() // }) } - console.log(' this.keys', this.keys) }, - styleBgColor(keyName) { - console.log('keyName', keyName) + styleBgColor (keyName) { let bgColorList = { pm25colorbg: '', pm10colorbg: '', - so2colorbg: '', //������������ - no210colorbg: '', //������������ - cocolorbg: '', //������������ - o3colorbg: '', //������ - tvoccolorbg: '', //TVOC + so2colorbg: '', // ������������ + no210colorbg: '', // ������������ + cocolorbg: '', // ������������ + o3colorbg: '', // ������ + tvoccolorbg: '' // TVOC } let data = '' + // eslint-disable-next-line no-unused-vars for (let i in keyName) { if (i === 'a34002') { - data = Math.floor(JSON.parse(keyName.a34002)) + data = Math.floor(JSON.parse(keyName.a34002) || 0) switch (true) { case data < 0: { bgColorList.pm10colorbg = '#999999' @@ -1213,7 +1252,7 @@ break } } else if (i === 'a34004') { - data = Math.floor(JSON.parse(keyName.a34004)) + data = Math.floor(JSON.parse(keyName.a34004) || 0) switch (true) { case data < 0: { bgColorList.pm25colorbg = '#999999' @@ -1251,7 +1290,7 @@ break } } else if (i === 'a21026') { - data = Math.floor(JSON.parse(keyName.a21026)) + data = Math.floor(JSON.parse(keyName.a21026) || 0) switch (true) { case data < 0: { bgColorList.so2colorbg = '#999999' @@ -1289,8 +1328,9 @@ break } } else if (i === 'a21004') { - data = Math.floor(Math.floor(JSON.parse(keyName.a21004) -.toFixed(0))) + data = Math.floor( + Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0)) + ) switch (true) { case data < 0: { bgColorList.no210colorbg = '#999999' @@ -1328,8 +1368,7 @@ break } } else if (i === 'a21005') { - data = JSON.parse(keyName.a21005) -.toFixed(3) + data = JSON.parse(keyName.a21005 || 0).toFixed(3) switch (true) { case data < 0: { bgColorList.cocolorbg = '#999999' @@ -1367,7 +1406,7 @@ break } } else if (i === 'a05024') { - data = Math.floor(JSON.parse(keyName.a05024)) + data = Math.floor(JSON.parse(keyName.a05024) || 0) switch (true) { case data < 0: { bgColorList.o3colorbg = '#999999' @@ -1405,10 +1444,13 @@ break } } else if (i === 'a99054') { - data = JSON.parse(keyName.a99054) -.toFixed(3) + data = JSON.parse(keyName.a99054 || 0).toFixed(3) switch (true) { case data < 0: { + bgColorList.tvoccolorbg = '#999999' + break + } + case data === '-': { bgColorList.tvoccolorbg = '#999999' break } @@ -1447,67 +1489,108 @@ } return bgColorList }, - handleClick(data, marker) { + deviceDetail () { + console.log('this.farterItem', this.clickmac) + console.log('this.childerItem', this.childerItem) + this.monitorPointInfo = this.farterItem + + this.$router.push({ + name: 'deviceDetail', + params: { + monitorPointInfo: this.farterItem, + device: this.childerItem, + macName: this.clickmac, + indexs: this.indexsLaber, + items: [this.childerItem.latitude, this.childerItem.longitude] + }, + query: { + monitorPointInfo: JSON.stringify(this.farterItem), + device: JSON.stringify(this.childerItem), + macName: this.clickmac, + indexs: this.indexsLaber, + items: [this.childerItem.latitude, this.childerItem.longitude] + } + }) + }, + handleClick (data, marker) { + this.clickmac = '' + this.childerItem = {} + this.farterItem = {} + this.indexsLaber = 0 + this.clickmac = marker.inforData.mac + this.childerItem = marker.inforData + console.log('this.defaultData', this.defaultData) + this.defaultData.forEach(item => { + if (item.devices) { + item.devices.forEach((dev, index) => { + if (dev.mac === marker.inforData.mac) { + this.farterItem = item + this.indexsLaber = index + } + }) + } + }) this.$request({ url: '/historyFiveMinutely/queryFiveDataByMac', method: 'get', params: { mac: data.mac, chooseTime: this.chooseTime, - time: this.nyr, - }, + time: this.nyr + } }) - .then((res) => { - console.log('res.data', res) + .then(res => { if (res.message === '���������������������') { var datafalse = '���������������������' - marker.bindPopup(datafalse) -.openPopup() + marker.bindPopup(datafalse).openPopup() return } + this.childerItem.name = res.data.name let colorliststyleBgColor = this.styleBgColor(res.data) console.log('colorliststyleBgColor', colorliststyleBgColor) - let deviceDetails = res.data + let deviceDetails = _.cloneDeep(res.data) + // eslint-disable-next-line no-unused-vars + for (let key in deviceDetails) { + if (deviceDetails[key] === null) { + deviceDetails[key] = '-' + } + } + console.log('deviceDetails', deviceDetails) + let windTip = 'inline' let windDeg = 0 let windDir = '' let dushu = - !deviceDetails.a01008 === '-' - ? JSON.parse(deviceDetails.a01008) -.toFixed(0) - : '-' + deviceDetails.a01008 === '-' + ? '-' + : JSON.parse(deviceDetails.a01008).toFixed(0) + let levelNumber = + deviceDetails.a01007 === '-' + ? '0.0' + : Number(deviceDetails.a01007).toFixed(1) let level = - !deviceDetails.a01007 === '-' - ? WWindUtil.windFormatLevel(deviceDetails.a01007) - : '-' + deviceDetails.a01007 === '0.0' + ? '-' + : WWindUtil.WindtoLevel(levelNumber).name console.log('level', level) if (deviceDetails.a01008) { - var windDirs = Number( - deviceDetails.a01008.substr(0, deviceDetails.a01008.length - 1) - ) - // console.log(windDirs) + var windDirs = dushu === '-' ? 0 : Number(dushu) + WWindUtil.windValueFormat(windDirs) + console.log('windDirs', WWindUtil.windValueFormat(windDirs)) windDeg = windDirs + windTip = 'inline' if (windDirs === 0 || windDirs === '-') { - windDir = '������' - } else if (windDirs > 0 && windDirs < 90) { - windDir = '���������' - } else if (windDirs === 90) { - windDir = '������' - } else if (windDirs > 90 && windDirs < 180) { - windDir = '���������' - } else if (windDirs === 180) { - windDir = '������' - } else if (windDirs > 180 && windDirs < 270) { - windDir = '���������' - } else if (windDirs === 270) { - windDir = '������' - } else if (windDirs > 270 && windDirs < 360) { - windDir = '���������' + windDir = '-' + windTip = 'none' + } else { + windDir = WWindUtil.windValueFormat(windDirs) + windTip = 'inline' } } // ������������������������������ + let htmlClassName = 'mypopup' let html = ` <div data-reactroot="" class="marker_maptip"> <div class="marker_title_1nQ"> - <span>������������</span> + <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>������������</span> </div> <div class="marker_firstline_2WH"> <div class="marker_citypart_keg"> @@ -1518,8 +1601,8 @@ <div class="marker_indexname_3TP" style="color: black;background:${ - colorliststyleBgColor.tvoccolorbg - }" + colorliststyleBgColor.tvoccolorbg +}" > TVOC </div> @@ -1533,8 +1616,8 @@ <div class="marker_itemname_Wq5" style="color: black;background:${ - colorliststyleBgColor.pm25colorbg - } " + colorliststyleBgColor.pm25colorbg +} " > PM2.5 </div> @@ -1546,8 +1629,8 @@ <div class="marker_itemname_Wq5" style="color: black;background:${ - colorliststyleBgColor.pm10colorbg - }" + colorliststyleBgColor.pm10colorbg +}" > PM10 </div> @@ -1559,8 +1642,8 @@ <div class="marker_itemname_Wq5" style="color: black;background:${ - colorliststyleBgColor.so2colorbg - }" + colorliststyleBgColor.so2colorbg +}" > SO2 </div> @@ -1572,8 +1655,8 @@ <div class="marker_itemname_Wq5" style="color: black;background:${ - colorliststyleBgColor.no210colorbg - }" + colorliststyleBgColor.no210colorbg +}" > NO2 </div> @@ -1584,9 +1667,7 @@ <div class="marker_item_2Kk"> <div class="marker_itemname_Wq5" - style="color: black;background:${ - colorliststyleBgColor.cocolorbg - }" + style="color: black;background:${colorliststyleBgColor.cocolorbg}" > CO </div> @@ -1597,9 +1678,7 @@ <div class="marker_item_2Kk"> <div class="marker_itemname_Wq5" - style="color: black; background:${ - colorliststyleBgColor.o3colorbg - }" + style="color: black; background:${colorliststyleBgColor.o3colorbg}" > O3 </div> @@ -1611,86 +1690,175 @@ <div class='windBox'> <div style="position: relative;width: 50%;text-align: center;color: #999;border-right: 1px dotted #999;" clss='windIcon'> <img style="width:140px; height:140px" src=${this.compassBg}> - <img style="width: 40px;height: 40px;position: absolute;left: 53%;top: 47%;transform: translate(-50%, -50%) rotate(${windDeg}deg)" + <img style="width: 40px;height: 40px;position: absolute;left: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg);display: ${windTip};" src=${this.compassDirection} > </div> <div class='windInfor'> - <div>������: ${windDir} (${dushu}���)</div> - <div>������: ${deviceDetails.a01007}m/s</div> + <div v-if="false">������: ${windDir} ( ${dushu} �� )</div> + <div>������: ${levelNumber} m/s</div> <div>������: ${level}</div> </div> </div> </div>` - marker.bindPopup(html, { className: 'mypopup' }) -.openPopup() + if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') { + htmlClassName = 'mypopupNoWind' + html = ` <div data-reactroot="" class="marker_maptip"> + <div class="marker_title_1nQ"> + <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>������������</span> + </div> + <div class="marker_firstline_2WH"> + <div class="marker_citypart_keg"> + <div class="marker_name_small_1VU">${deviceDetails.name}</div> + <div class="marker_time_w5m">${deviceDetails.dataTime}</div> + </div> + <div class="marker_indexpart_2UI"> + <div + class="marker_indexname_3TP" + style="color: black;background:${colorliststyleBgColor.tvoccolorbg}" + > + TVOC + </div> + <div class="marker_indexvalue_1O7"> + ${this.handleCutZero(deviceDetails.a99054)} + </div> + </div> + </div> + <div class="marker_secondline_2Om"> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.pm25colorbg} " + > + PM2.5 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(deviceDetails.a34004)} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.pm10colorbg}" + > + PM10 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(deviceDetails.a34002)} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.so2colorbg}" + > + SO2 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(deviceDetails.a21026)} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.no210colorbg}" + > + NO2 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(deviceDetails.a21004)} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.cocolorbg}" + > + CO + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(deviceDetails.a21005)} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black; background:${colorliststyleBgColor.o3colorbg}" + > + O3 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(deviceDetails.a05024)} + </div> + </div> + </div> + </div>` + } + marker.bindPopup(html, { className: htmlClassName }).openPopup() }) - .catch((err) => { + .catch(err => { console.log(err) }) }, - handleCutZero(data) { - - let num = data.substring(0,data.indexOf(".")+4); - //������������ ������������������������ + handleCutZero (data) { + let num = data.substring(0, data.indexOf('.') + 4) + // ������������ ������������������������ // let num = Number(data).toFixed(3).toString() let newstr = num - //������������ ������������������ + // ������������ ������������������ let leng = num.length - num.indexOf('.') - 1 - //��������������������� + // ��������������������� if (num.indexOf('.') > -1) { - //������������������ + // ������������������ for (let i = leng; i > 0; i--) { - //������newstr���������0 + // ������newstr���������0 if ( newstr.lastIndexOf('0') > -1 && newstr.substr(newstr.length - 1, 1) === 0 ) { let k = newstr.lastIndexOf('0') - //������������������������������0 ��������������� + // ������������������������������0 ��������������� if (newstr.charAt(k - 1) === '.') { return newstr.substring(0, k - 1) } else { - //������ ������������0 + // ������ ������������0 newstr = newstr.substring(0, k) } } else { - //������������������0 + // ������������������0 return newstr } } } return num }, - getMarkerInfor(data, marker) { + getMarkerInfor (data, marker) { this.$request({ url: '/historyFiveMinutely/queryPopDataByMac', method: 'get', params: { mac: data.mac, chooseTime: this.chooseTime, - time: this.nyr, - }, + time: this.nyr + } }) - .then((res) => { + .then(res => { if (res.message === '���������������������') { var datafalse = '���������������������' - this.bindPopup(datafalse) -.openPopup() + this.bindPopup(datafalse).openPopup() return } + // eslint-disable-next-line no-unused-vars for (const key in res.data) { - var tempDecimal = res.data[key].replace(/[^\d.]/g, '') -.split('.')[1] + 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) + + Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1] } } @@ -1699,16 +1867,15 @@ .replace(/,/g, `<br>`) .replace(/{|}|"/g, '') console.log(data) - marker.bindPopup(data) -.openPopup() + marker.bindPopup(data).openPopup() }) - .catch((err) => { + .catch(err => { console.log(err) }) return data }, // ��������������� - windDir() { + windDir () { // console.log('������������') // console.log('���������ws������������') // const that = this @@ -1718,8 +1885,7 @@ // ��������������������������� if ( !layer._container && - ('' + $(layer._container) -.attr('class')).replace(/\s/g, '') !== + ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer' ) { layer.remove() @@ -1730,13 +1896,13 @@ this.deviceMaker() }, // ���������������������regionCode���������������api������ - getRegionApiRequest() { + getRegionApiRequest () { this.getParamsData(true) setTimeout(() => { $.getJSON( 'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea', { monitorPointId: this.$store.state.monitorPointId }, - (data) => { + data => { this.map.setView([data[2], data[1]], 12) // console.log('������������') } @@ -1744,11 +1910,11 @@ }, 1000) }, // ��������������������������������������� - jumpMap(LngLat) { + jumpMap (LngLat) { this.map.setView(LngLat, 18) }, // ������������������������ - getParamsData(isFirst = true) { + getParamsData (isFirst = true) { clearInterval(this.timer) this.timer = setInterval(() => { this.currentHour() @@ -1781,13 +1947,14 @@ } }, 1000) }, - findLayer(layerName) { + findLayer (layerName) { // ������������������������������ if (!this.map) { return null } const gisMap_layers = this.map._layers let layer = null + // eslint-disable-next-line no-unused-vars for (const i in gisMap_layers) { if (gisMap_layers[i].options.id === layerName) { layer = gisMap_layers[i] @@ -1796,7 +1963,7 @@ return layer }, // ��������������������� - initMap() { + initMap () { var map = L.map('mapContent', { inertia: false, minZoom: 2, @@ -1806,13 +1973,12 @@ renderer: L.canvas(), zoomControl: false, // ������������ attributionControl: false, // ���������������logol - crs: L.CRS.EPSG3857, // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84 + crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84 }) // ������������������ L.tileLayer( 'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' - ) -.addTo(map) + ).addTo(map) this.map = map // data��������������� // const that = this // this.map.on('mousedown', function(ev) { @@ -1827,8 +1993,24 @@ // }) window.map = map }, + changeData (val) { + console.log(val) + this.nyr = val + ':00' + const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00')) + + console.log(date) + this.chooseTime = true + // var p1 = document.querySelector('.p1') + // var p2 = document.querySelector('.p2') + // var p3 = document.querySelector('.p3') + // this.time = date + // p3.innerHTML = this.getDayXQ('today') + // p2.innerHTML = this.getDayXQ('yesterday') + // p1.innerHTML = this.getDayXQ('beforeYea') + this.initData() + }, // ������������������������ - change(index) { + change (index) { this.changeColor = index var pr = '' switch (index) { @@ -1872,14 +2054,13 @@ } }, // ��������������������� - initData() { + initData () { if (this.map) { this.map.eachLayer(function (layer) { // ��������������������������� if ( !layer._container && - ('' + $(layer._container) -.attr('class')).replace(/\s/g, '') !== + ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer' ) { layer.remove() @@ -1890,25 +2071,25 @@ this.windData() }, // ��������������� - windData() { + windData () { this.$request({ url: '/monitorPoint/getWindData', method: 'get', params: { monitorPointIds: this.monitorPointIds.toString(), chooseTime: this.chooseTime, - time: this.nyr, - }, + time: this.nyr + } }) - .then((res) => { + .then(res => { this.windJsonData = res.data[0] return this.windJsonData }) - .catch((err) => { + .catch(err => { console.log(err) }) }, - canvasWind(data) { + canvasWind (data) { const res = this.findLayer('wmsid') if (res) { this.map.removeLayer(res) @@ -1921,7 +2102,7 @@ // velocityType: 'Global Wind', velocityType: 'GBR Wind', displayPosition: 'bottomleft', - displayEmptyString: 'No wind data', + displayEmptyString: 'No wind data' }, data: data, // ������ ��������������� // data: data2, @@ -1941,8 +2122,8 @@ '#345B1B', '#186303', '#175103', - '#053F03', - ], + '#053F03' + ] // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03'] }) velocityLayer.addTo(this.map) // ��������������� @@ -1951,7 +2132,7 @@ }, 1000) }, // ������������������������������������������������������������������ - alertData(n1, n2) { + alertData (n1, n2) { // ������������axios��������������������������� this.$request({ url: '/alarmInfo/getDataByConditionWithoutPage', @@ -1965,10 +2146,9 @@ startTime: this.dateValue[0], endTime: this.dateValue[1], index: this.factorValue, - alarmType: this.alartValue, - }, - }) -.then((res) => { + alarmType: this.alartValue + } + }).then(res => { // console.log('������������') // console.log(res) var tempData = res.data @@ -1984,20 +2164,21 @@ }, // ������ // ��������������������� - handleSizeChange(val) { + handleSizeChange (val) { // ��������������������������� this.PageSize = val // ��������������������������������������������������������������������������� this.currentPage = 1 }, // ��������������� - handleCurrentChange(val) { + handleCurrentChange (val) { // ��������������������� this.currentPage = val // console.log(val) }, // ��������������� - tableCellClassName({ row, column, rowIndex, columnIndex }) { + tableCellClassName ({ row, column, rowIndex, columnIndex }) { + // eslint-disable-next-line no-unused-vars for (const key in row) { if (key === column.property) { const code = column.property @@ -2017,7 +2198,7 @@ } return '' }, - turnState() { + turnState () { // console.log(this.showOrHidden) if (this.showOrHidden === true) { this.turnImg = require('@/assets/images/regionalOverview/dropDown.png') @@ -2027,54 +2208,197 @@ this.showOrHidden = !this.showOrHidden }, // ������������������ - stateControlStation() { + stateControlStation () { // this.$axios.get('monitorPoint/queryStateControlStation', { this.$request({ - url: '/govMonitorPoint/queryStateControlStation', - method: 'get', - params: { - regionCode: 130900, - sensorCode: 'a34002', - }, + url: '/govMonitorPoint/getGovMonitorPoints', + method: 'get' }) - .then((res) => { - // console.log('���������������') - // console.log(res) + .then(res => { + console.log('���������������') + console.log(res) var gkData = res.data - var group = L.layerGroup() -.addTo(this.map) + let _this = this + 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', + iconSize: [60, 60], + iconAnchor: [30, 48], + className: 'my-device' }) // ��������������������� - L.marker([glat, glng], { - icon: gIcon, + let marker = L.marker([glat, glng], { + icon: gIcon + }).addTo(group) + marker.inforData = gkData[i] + marker.on('click', function (e) { + console.log('Marker clicked!', e.target) + _this.handleguoClick(gkData[i], e.target) }) -.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) + // 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) => { + .catch(err => { + console.log(err) + }) + }, + handleguoClick (data, marker) { + this.clickmac = '' + this.childerItem = {} + this.farterItem = {} + this.indexsLaber = 0 + this.clickmac = marker.inforData.guid + this.childerItem = marker.inforData + console.log('this.defaultData', this.defaultData) + this.defaultData.forEach(item => { + if (item.devices) { + item.devices.forEach((dev, index) => { + if (dev.mac === marker.inforData.mac) { + this.farterItem = item + this.indexsLaber = index + } + }) + } + }) + this.$request({ + url: '/historyFiveMinutely/historyAqi', + method: 'get', + params: { + guid: data.guid, + } + }) + .then(res => { + if (res.message === '���������������������') { + var datafalse = '������������' + marker.bindPopup(datafalse).openPopup() + return + } + this.childerItem.name = marker.inforData.name + let colorliststyleBgColor = this.styleBgColor(res.data[0]) + console.log('colorliststyleBgColor', colorliststyleBgColor) + let deviceDetails = _.cloneDeep(res.data[0]) + deviceDetails.name = marker.inforData.name + let dataTime = deviceDetails.dataTime.replace(/["\\]/g, '') + deviceDetails.a99054 = '-' + // eslint-disable-next-line no-unused-vars + for (let key in deviceDetails) { + if (deviceDetails[key] === null) { + deviceDetails[key] = '-' + } + } + console.log('deviceDetails', deviceDetails) + console.log('dataTime', dataTime) + let htmlClassName = 'mypopupNoWind' + let html = ` <div data-reactroot="" class="marker_maptip"> + <div class="marker_title_1nQ"> + <span >������������</span> + </div> + <div class="marker_firstline_2WH"> + <div class="marker_citypart_keg"> + <div class="marker_name_small_1VU">${deviceDetails.name}</div> + <div class="marker_time_w5m">${dataTime}</div> + </div> + <div class="marker_indexpart_2UI"> + <div + class="marker_indexname_3TP" + style="color: black;background:${colorliststyleBgColor.tvoccolorbg}" + > + TVOC + </div> + <div class="marker_indexvalue_1O7"> + ${deviceDetails.a99054} + </div> + </div> + </div> + <div class="marker_secondline_2Om"> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.pm25colorbg} " + > + PM2.5 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(String(deviceDetails.a34004))} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.pm10colorbg}" + > + PM10 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(String(deviceDetails.a34002))} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.so2colorbg}" + > + SO2 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(String(deviceDetails.a21026))} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.no210colorbg}" + > + NO2 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(String(deviceDetails.a21004))} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black;background:${colorliststyleBgColor.cocolorbg}" + > + CO + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(String(deviceDetails.a21005))} + </div> + </div> + <div class="marker_item_2Kk"> + <div + class="marker_itemname_Wq5" + style="color: black; background:${colorliststyleBgColor.o3colorbg}" + > + O3 + </div> + <div class="marker_itemvalue_1l1"> + ${this.handleCutZero(String(deviceDetails.a05024))} + </div> + </div> + </div> + </div>` + + marker.bindPopup(html, { className: htmlClassName }).openPopup() + }) + .catch(err => { console.log(err) }) }, // ������������������������ - toggleWindState() { + toggleWindState () { if (this.ws) { this.ws.close() } @@ -2090,10 +2414,10 @@ // console.log(this.windState) } }, - closeAlarmTableVisible() { + closeAlarmTableVisible () { this.$store.state.alarmTableVisible = false - }, - }, + } + } } </script> @@ -2300,11 +2624,36 @@ margin-top: 9px; margin-left: 10px; } - .text_Time { float: left; margin-left: 37px; + .el-date-editor{ + width: 145px!important; + .el-input__prefix{ + display: none!important; + } + .el-input__inner{ + cursor: pointer; + font-size: 18px; + color: #fff; + padding: 0px!important; + border: none; + background: inherit; + + } + } } +.tpc{ + left: unset!important; + right: 60px; +} +.tpc .el-time-spinner__wrapper { + width:100% !important; +} +.tpc .el-scrollbar:nth-of-type(2) { + display: none !important; +} + .my-div-icon { font-size: 14px; text-align: center; -- Gitblit v1.8.0