From a19b20afeacf84c1c743c76b5018bcfbddac2270 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 15 Nov 2024 09:10:12 +0800 Subject: [PATCH] fix: 国控站 --- src/components/Wind/Map.vue | 1155 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 1,016 insertions(+), 139 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index 61678cc..e0c8fcb 100644 --- a/src/components/Wind/Map.vue +++ b/src/components/Wind/Map.vue @@ -5,7 +5,12 @@ element-loading-text="���������" element-loading-background="rgba(0, 0, 0, 0.6)" > - <div v-if="noneData" class="noneData">������������������������������</div> + <div + v-if="noneData" + class="noneData" + > + ������������������������������ + </div> <div class="top"> <span v-for="(item, index) in params" @@ -23,12 +28,36 @@ alt="" @click="turnState" > - <span class="text_Time">{{ dateFormat }}</span> - <img class="drop-icon" :src="turnImg" alt="" @click="turnState"> + <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" + alt="" + @click="turnState" + > </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" /> @@ -110,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 /> @@ -224,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" @@ -247,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" @@ -255,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" @@ -266,7 +308,9 @@ <el-button type="primary" @click="alertData(PageSize, currentPage)" - >������</el-button> + > + ������ + </el-button> </div> </div> <el-table @@ -284,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="������" @@ -313,11 +365,16 @@ @size-change="handleSizeChange" @current-change="handleCurrentChange" /> - <div slot="footer" class="dialog-footer"> + <div + slot="footer" + class="dialog-footer" + > <el-button size="mini" @click="alarmTableVisible = false" - >��� ���</el-button> + > + ��� ��� + </el-button> </div> </el-dialog> </div> @@ -327,12 +384,14 @@ import 'leaflet/dist/leaflet.css' import 'leaflet-velocity/dist/leaflet-velocity.css' import L from 'leaflet' +import _ from 'lodash' import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js' import 'leaflet-velocity/dist/leaflet-velocity' import $ from 'jquery' +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: { @@ -340,13 +399,21 @@ weidu: Number, jingdu: Number, monitorPointId: Number, - monitorPointIds: Array + 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'], @@ -383,7 +450,7 @@ // ������������������������������������������(���������������������������) totalCount: 0, // ������������������������������ - pageSizes: [10, 20, 30, 40], + pageSizes: [10, 50, 100, 200], // ������������������������������������������ PageSize: 20, factorOptions: [ @@ -458,39 +525,43 @@ turnImg: require('@/assets/images/regionalOverview/dropDown.png'), showOrHidden: true, dateFormat: '', + selectData: new Date(), alarmTableVisible: false, chooseTimeInfo: false, // ������������������������ chooseTime: false, dateInfo: '', // ��������������� timeInfo: '', // ��������������� nyr: '', // ������������������ - windJsonData: [] + windJsonData: [], + clickmac: '', + childerItem: {}, + farterItem: {}, + indexsLaber: 0, + time: new Date() } }, computed: { ...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) ) @@ -500,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] @@ -510,29 +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) // ������������ @@ -566,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) @@ -582,7 +653,7 @@ } }, // ������������ - eventProxy() { + eventProxy () { // ������������������������������ var ul = document.querySelector('#eventPro') var lis = document.querySelectorAll('#eventPro>li') @@ -600,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��������������������� @@ -621,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) { @@ -638,7 +710,7 @@ that.getParamsData(true) } // timeUl������������������ - timeUl.onclick = (e) => { + timeUl.onclick = e => { // ������������li��������������������� var target = e.target if (target.tagName.toLowerCase() === 'li') { @@ -654,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) { @@ -673,49 +746,40 @@ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)' } } - // console.log('���������������������', greenInfo, 'index') } that.times = 1 that.getParamsData(true) } // ������������������������ 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) + '%' + lis[i].onmouseenter = function () { 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() { + 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) + '%' + timeLis[i].onmouseenter = function () { 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() { + 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() @@ -735,7 +799,7 @@ this.dateFormat = currentDate.toString() }, // ��������������� - newDate() { + newDate () { var aData = new Date() var month = aData.getMonth() < 9 @@ -743,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 @@ -766,9 +829,9 @@ return [gg_lat, gg_lng] }, // ������������������,��������� - deviceMaker() { + deviceMaker () { if (this.map) { - this.map.eachLayer(function(layer) { + this.map.eachLayer(function (layer) { // ��������������������������� if ( !layer._container && @@ -789,18 +852,15 @@ chooseTime: this.chooseTime, time: this.nyr } - }).then((data) => { - // console.log('���������������������') - console.log(data, 'tata') + }).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) this.keys = [] @@ -831,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 @@ -869,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 @@ -907,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 @@ -945,7 +1005,7 @@ break } } else if (keyData[i].a21004) { - var data = Math.floor( + let data = Math.floor( Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)) ) switch (true) { @@ -985,7 +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 @@ -1023,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 @@ -1061,7 +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 @@ -1113,7 +1173,6 @@ icon: blueIcon }) groupIcon.addLayer(iconMarker) - // console.log(JSON.parse(this.keys[i])) var myIcon = L.divIcon({ html: this.keys[i], className: 'my-div-icon', @@ -1122,13 +1181,16 @@ }) const TexteMarker = L.marker([lat, lng], { icon: myIcon }) + TexteMarker.inforData = keyData[i] groupText.addLayer(TexteMarker) const _this = this // ������������������������������������mouseover��������������� - TexteMarker.on('click', function(e) { + TexteMarker.on('click', function (e) { const MarkerTarget = e.target - _this.getMarkerInfor(keyData[i], MarkerTarget) + // _this.getMarkerInfor(keyData[i], MarkerTarget) this.noneData = false + // const _this = e.target.vuecontext + _this.handleClick(keyData[i], MarkerTarget) }) // ������������������������������������ // TexteMarker.on('mouseout', function(e) { @@ -1137,7 +1199,641 @@ // }) } }, - getMarkerInfor(data, marker) { + styleBgColor (keyName) { + let bgColorList = { + pm25colorbg: '', + pm10colorbg: '', + 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) || 0) + switch (true) { + case data < 0: { + bgColorList.pm10colorbg = '#999999' + break + } + case data === 0: { + bgColorList.pm10colorbg = '#688fb1' + break + } + case data <= 50: { + bgColorList.pm10colorbg = '#00ff01' + break + } + case data <= 150: { + bgColorList.pm10colorbg = '#fdfe00' + break + } + case data <= 250: { + bgColorList.pm10colorbg = '#fd8102' + break + } + case data <= 350: { + bgColorList.pm10colorbg = '#fc0101' + break + } + case data <= 420: { + bgColorList.pm10colorbg = '#c00261' + break + } + case data > 420: { + bgColorList.pm10colorbg = '#9f012f' + break + } + default: + break + } + } else if (i === 'a34004') { + data = Math.floor(JSON.parse(keyName.a34004) || 0) + switch (true) { + case data < 0: { + bgColorList.pm25colorbg = '#999999' + break + } + case data === 0: { + bgColorList.pm25colorbg = '#688fb1' + break + } + case data <= 35: { + bgColorList.pm25colorbg = '#00ff01' + break + } + case data <= 75: { + bgColorList.pm25colorbg = '#fdfe00' + break + } + case data <= 115: { + bgColorList.pm25colorbg = '#fd8102' + break + } + case data <= 150: { + bgColorList.pm25colorbg = '#fc0101' + break + } + case data <= 250: { + bgColorList.pm25colorbg = '#c00261' + break + } + case data > 250: { + bgColorList.pm25colorbg = '#9f012f' + break + } + default: + break + } + } else if (i === 'a21026') { + data = Math.floor(JSON.parse(keyName.a21026) || 0) + switch (true) { + case data < 0: { + bgColorList.so2colorbg = '#999999' + break + } + case data === 0: { + bgColorList.so2colorbg = '#688fb1' + break + } + case data <= 50: { + bgColorList.so2colorbg = '#00ff01' + break + } + case data <= 150: { + bgColorList.so2colorbg = '#fdfe00' + break + } + case data <= 475: { + bgColorList.so2colorbg = '#fd8102' + break + } + case data <= 800: { + bgColorList.so2colorbg = '#fc0101' + break + } + case data <= 1600: { + bgColorList.so2colorbg = '#c00261' + break + } + case data > 1600: { + bgColorList.so2colorbg = '#9f012f' + break + } + default: + break + } + } else if (i === 'a21004') { + data = Math.floor( + Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0)) + ) + switch (true) { + case data < 0: { + bgColorList.no210colorbg = '#999999' + break + } + case data === 0: { + bgColorList.no210colorbg = '#688fb1' + break + } + case data <= 40: { + bgColorList.no210colorbg = '#00ff01' + break + } + case data <= 80: { + bgColorList.no210colorbg = '#fdfe00' + break + } + case data <= 180: { + bgColorList.no210colorbg = '#fd8102' + break + } + case data <= 280: { + bgColorList.no210colorbg = '#fc0101' + break + } + case data <= 565: { + bgColorList.no210colorbg = '#c00261' + break + } + case data > 565: { + bgColorList.no210colorbg = '#9f012f' + break + } + default: + break + } + } else if (i === 'a21005') { + data = JSON.parse(keyName.a21005 || 0).toFixed(3) + switch (true) { + case data < 0: { + bgColorList.cocolorbg = '#999999' + break + } + case data === 0: { + bgColorList.cocolorbg = '#688fb1' + break + } + case data <= 2: { + bgColorList.cocolorbg = '#00ff01' + break + } + case data <= 4: { + bgColorList.cocolorbg = '#fdfe00' + break + } + case data <= 14: { + bgColorList.cocolorbg = '#fd8102' + break + } + case data <= 24: { + bgColorList.cocolorbg = '#fc0101' + break + } + case data <= 36: { + bgColorList.cocolorbg = '#c00261' + break + } + case data > 36: { + bgColorList.cocolorbg = '#9f012f' + break + } + default: + break + } + } else if (i === 'a05024') { + data = Math.floor(JSON.parse(keyName.a05024) || 0) + switch (true) { + case data < 0: { + bgColorList.o3colorbg = '#999999' + break + } + case data === 0: { + bgColorList.o3colorbg = '#688fb1' + break + } + case data <= 160: { + bgColorList.o3colorbg = '#00ff01' + break + } + case data <= 200: { + bgColorList.o3colorbg = '#fdfe00' + break + } + case data <= 300: { + bgColorList.o3colorbg = '#fd8102' + break + } + case data <= 400: { + bgColorList.o3colorbg = '#fc0101' + break + } + case data <= 800: { + bgColorList.o3colorbg = '#c00261' + break + } + case data > 800: { + bgColorList.o3colorbg = '#9f012f' + break + } + default: + break + } + } else if (i === 'a99054') { + data = JSON.parse(keyName.a99054 || 0).toFixed(3) + switch (true) { + case data < 0: { + bgColorList.tvoccolorbg = '#999999' + break + } + case data === '-': { + bgColorList.tvoccolorbg = '#999999' + break + } + case data === 0: { + bgColorList.tvoccolorbg = '#688fb1' + break + } + case data <= 0.5: { + bgColorList.tvoccolorbg = '#00ff01' + break + } + case data <= 1: { + bgColorList.tvoccolorbg = '#fdfe00' + break + } + case data <= 1.5: { + bgColorList.tvoccolorbg = '#fd8102' + break + } + case data <= 2: { + bgColorList.tvoccolorbg = '#fc0101' + break + } + case data <= 3: { + bgColorList.tvoccolorbg = '#c00261' + break + } + case data > 3: { + bgColorList.tvoccolorbg = '#9f012f' + break + } + // default: + // break + } + } + } + return bgColorList + }, + 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 + } + }) + .then(res => { + if (res.message === '���������������������') { + var datafalse = '���������������������' + marker.bindPopup(datafalse).openPopup() + return + } + this.childerItem.name = res.data.name + let colorliststyleBgColor = this.styleBgColor(res.data) + console.log('colorliststyleBgColor', colorliststyleBgColor) + 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) + let levelNumber = + deviceDetails.a01007 === '-' + ? '0.0' + : Number(deviceDetails.a01007).toFixed(1) + let level = + deviceDetails.a01007 === '0.0' + ? '-' + : WWindUtil.WindtoLevel(levelNumber).name + console.log('level', level) + if (deviceDetails.a01008) { + var windDirs = dushu === '-' ? 0 : Number(dushu) + WWindUtil.windValueFormat(windDirs) + console.log('windDirs', WWindUtil.windValueFormat(windDirs)) + windDeg = windDirs + windTip = 'inline' + if (windDirs === 0 || windDirs === '-') { + 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 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 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: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg);display: ${windTip};" + src=${this.compassDirection} + > + </div> + <div class='windInfor'> + <div v-if="false">������: ${windDir} ( ${dushu} �� )</div> + <div>������: ${levelNumber} m/s</div> + <div>������: ${level}</div> + </div> + </div> + + </div>` + 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 => { + console.log(err) + }) + }, + 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 + if ( + newstr.lastIndexOf('0') > -1 && + newstr.substr(newstr.length - 1, 1) === 0 + ) { + let k = newstr.lastIndexOf('0') + // ������������������������������0 ��������������� + if (newstr.charAt(k - 1) === '.') { + return newstr.substring(0, k - 1) + } else { + // ������ ������������0 + newstr = newstr.substring(0, k) + } + } else { + // ������������������0 + return newstr + } + } + } + return num + }, + getMarkerInfor (data, marker) { this.$request({ url: '/historyFiveMinutely/queryPopDataByMac', method: 'get', @@ -1147,24 +1843,23 @@ time: this.nyr } }) - .then((res) => { + .then(res => { if (res.message === '���������������������') { var datafalse = '���������������������' 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] + 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] + Number(res.data[key].split(' ')[0]).toFixed(2) + + res.data[key].split(' ')[1] } } } @@ -1174,19 +1869,19 @@ console.log(data) marker.bindPopup(data).openPopup() }) - .catch((err) => { + .catch(err => { console.log(err) }) return data }, // ��������������� - windDir() { + windDir () { // console.log('������������') // console.log('���������ws������������') // const that = this // ������������������ if (this.map) { - this.map.eachLayer(function(layer) { + this.map.eachLayer(function (layer) { // ��������������������������� if ( !layer._container && @@ -1201,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('������������') } @@ -1215,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() @@ -1252,12 +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] @@ -1266,7 +1963,7 @@ return layer }, // ��������������������� - initMap() { + initMap () { var map = L.map('mapContent', { inertia: false, minZoom: 2, @@ -1296,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) { @@ -1341,9 +2054,9 @@ } }, // ��������������������� - initData() { + initData () { if (this.map) { - this.map.eachLayer(function(layer) { + this.map.eachLayer(function (layer) { // ��������������������������� if ( !layer._container && @@ -1358,7 +2071,7 @@ this.windData() }, // ��������������� - windData() { + windData () { this.$request({ url: '/monitorPoint/getWindData', method: 'get', @@ -1368,15 +2081,15 @@ 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) @@ -1419,7 +2132,7 @@ }, 1000) }, // ������������������������������������������������������������������ - alertData(n1, n2) { + alertData (n1, n2) { // ������������axios��������������������������� this.$request({ url: '/alarmInfo/getDataByConditionWithoutPage', @@ -1435,7 +2148,7 @@ index: this.factorValue, alarmType: this.alartValue } - }).then((res) => { + }).then(res => { // console.log('������������') // console.log(res) var tempData = res.data @@ -1451,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 @@ -1484,7 +2198,7 @@ } return '' }, - turnState() { + turnState () { // console.log(this.showOrHidden) if (this.showOrHidden === true) { this.turnImg = require('@/assets/images/regionalOverview/dropDown.png') @@ -1494,20 +2208,17 @@ 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 + let _this = this var group = L.layerGroup().addTo(this.map) for (let i = 0; i < gkData.length; i++) { var glat = gkData[i].latitude @@ -1515,30 +2226,177 @@ var gIcon = L.icon({ iconUrl: require('@/assets/icon/gk.png'), // iconUrl:require('@/assets/images/tl_PM10.png'), - iconSize: [55, 55], - iconAnchor: [13, 21], + iconSize: [60, 60], + iconAnchor: [30, 48], className: 'my-device' }) // ��������������������� - L.marker([glat, glng], { + let marker = L.marker([glat, glng], { icon: gIcon }).addTo(group) - var myIcon = L.divIcon({ - html: gkData[i].data, - className: 'my-div-icon-g', - iconSize: 30 + marker.inforData = gkData[i] + marker.on('click', function (e) { + console.log('Marker clicked!', e.target) + _this.handleguoClick(gkData[i], e.target) }) - 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 + deviceDetails.a99054 = '-' + // eslint-disable-next-line no-unused-vars + for (let key in deviceDetails) { + if (deviceDetails[key] === null) { + deviceDetails[key] = '-' + } + } + console.log('deviceDetails', deviceDetails) + 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">${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"> + ${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() } @@ -1554,7 +2412,7 @@ // console.log(this.windState) } }, - closeAlarmTableVisible() { + closeAlarmTableVisible () { this.$store.state.alarmTableVisible = false } } @@ -1562,6 +2420,7 @@ </script> <style lang="scss"> +@import './dataModel.css'; html, body, #mapContent { @@ -1763,11 +2622,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; @@ -1800,14 +2684,7 @@ /* padding-left: 10px; */ /* padding-top: 30px; */ } -.leaflet-popup-content { - width: 235px !important; - font-size: 12px; - -webkit-transform-origin-x: 0; - z-index: 1000; - /* -webkit-transform: scale(0.90); */ - /* font-family: ui-serif; */ -} + .buttom-left { /* background-image: url("@/assets/images/tl_PM10.png"); */ position: absolute; -- Gitblit v1.8.0