From a386f08fcf875f54860951834cfc6c888091e192 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 25 Oct 2023 17:27:35 +0800 Subject: [PATCH] Merge branch 'feature_1.0' --- src/components/Wind/Map.vue | 306 +++++++++++++++++++++++++------------------------- 1 files changed, 155 insertions(+), 151 deletions(-) diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue index f62f064..ea6a88a 100644 --- a/src/components/Wind/Map.vue +++ b/src/components/Wind/Map.vue @@ -5,9 +5,7 @@ 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" @@ -15,7 +13,8 @@ class="left" :class="{ click: changeColor === index }" @click="change(index)" - >{{ item }}</span> + >{{ item }}</span + > <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> --> <span class="right">{{ times }}���</span> <span class="dropDown"> @@ -24,14 +23,9 @@ :src="require('@/assets/images/regionalOverview/realTimeImg.png')" alt="" @click="turnState" - > + /> <span class="text_Time">{{ dateFormat }}</span> - <img - class="drop-icon" - :src="turnImg" - alt="" - @click="turnState" - > + <img class="drop-icon" :src="turnImg" alt="" @click="turnState" /> </span> </div> <div class="topDate" style="height: 60px"> @@ -348,8 +342,9 @@ 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'), @@ -474,28 +469,29 @@ timeInfo: '', // ��������������� nyr: '', // ������������������ windJsonData: [], + clickmac: '', + childerItem: {}, + farterItem: {}, + indexsLaber: 0 } }, 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', @@ -509,8 +505,9 @@ // ������������ this.eventProxy() + window.deviceDetail = this.deviceDetail }, - created() { + created () { const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // ��������������������������������� this.jingduNew = newLL[1] this.weiduNew = newLL[0] @@ -519,27 +516,23 @@ 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) { + getDayXQ (day) { var days = new Date() -.getDay() // ������ + .getDay() // ������ var rq = '' // ������ if (day === 'today') { rq = this.newData(0) @@ -576,7 +569,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 +585,7 @@ } }, // ������������ - eventProxy() { + eventProxy () { // ������������������������������ var ul = document.querySelector('#eventPro') var lis = document.querySelectorAll('#eventPro>li') @@ -683,7 +676,7 @@ lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)' } } - // console.log('���������������������', greenInfo, 'index') + } that.times = 1 that.getParamsData(true) @@ -691,41 +684,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 +730,7 @@ this.dateFormat = currentDate.toString() }, // ��������������� - newDate() { + newDate () { var aData = new Date() var month = aData.getMonth() < 9 @@ -753,19 +738,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,15 +760,15 @@ 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, '') !== - 'leaflet-layer' + .attr('class')).replace(/\s/g, '') !== + 'leaflet-layer' ) { layer.remove() } @@ -801,21 +785,20 @@ time: this.nyr, }, }) -.then((data) => { - // console.log('���������������������') - this.markDeviceSite(data) - }) + .then((data) => { + this.markDeviceSite(data) + }) }, // ��������������� - markDeviceSite(data) { + markDeviceSite (data) { var keyData = data.data.devices this.keyData = data.data.devices // ��������������������� // this.stateControlStation() var groupIcon = L.layerGroup() -.addTo(this.map) + .addTo(this.map) var groupText = L.layerGroup() -.addTo(this.map) + .addTo(this.map) this.keys = [] for (let i = 0; i < keyData.length; i++) { if (keyData[i].a34002) { @@ -826,15 +809,15 @@ 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))) + .toFixed(0))) } else if (keyData[i].a21005) { this.keys.push(JSON.parse(keyData[i].a21005) -.toFixed(3)) + .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)) + .toFixed(3)) } else { // for (let j = 0; j < keyData.length; j++) { this.keys.push(JSON.parse('null')) @@ -963,7 +946,7 @@ } else if (keyData[i].a21004) { var data = Math.floor( Math.floor(JSON.parse(keyData[i].a21004) -.toFixed(0)) + .toFixed(0)) ) switch (true) { case data < 0: { @@ -1003,7 +986,7 @@ } } else if (keyData[i].a21005) { var data = JSON.parse(keyData[i].a21005) -.toFixed(3) + .toFixed(3) switch (true) { case data < 0: { colorNum = 7 @@ -1080,7 +1063,7 @@ } } else if (keyData[i].a99054) { var data = JSON.parse(keyData[i].a99054) -.toFixed(3) + .toFixed(3) switch (true) { case data < 0: { colorNum = 7 @@ -1132,7 +1115,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', @@ -1141,7 +1123,7 @@ }) const TexteMarker = L.marker([lat, lng], { icon: myIcon }) - TexteMarker.vuecontext = this + TexteMarker.inforData = keyData[i] groupText.addLayer(TexteMarker) const _this = this // ������������������������������������mouseover��������������� @@ -1158,10 +1140,8 @@ // this.bindPopup().closePopup() // }) } - console.log(' this.keys', this.keys) }, - styleBgColor(keyName) { - console.log('keyName', keyName) + styleBgColor (keyName) { let bgColorList = { pm25colorbg: '', pm10colorbg: '', @@ -1290,7 +1270,7 @@ } } else if (i === 'a21004') { data = Math.floor(Math.floor(JSON.parse(keyName.a21004) -.toFixed(0))) + .toFixed(0))) switch (true) { case data < 0: { bgColorList.no210colorbg = '#999999' @@ -1329,7 +1309,7 @@ } } else if (i === 'a21005') { data = JSON.parse(keyName.a21005) -.toFixed(3) + .toFixed(3) switch (true) { case data < 0: { bgColorList.cocolorbg = '#999999' @@ -1406,7 +1386,7 @@ } } else if (i === 'a99054') { data = JSON.parse(keyName.a99054) -.toFixed(3) + .toFixed(3) switch (true) { case data < 0: { bgColorList.tvoccolorbg = '#999999' @@ -1447,7 +1427,44 @@ } 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 + this.defaultData.forEach(item => { + item.devices.forEach((dev, index) => { + if (dev.mac === marker.inforData.mac) { + this.farterItem = item + this.indexsLaber = index + } + }) + }) this.$request({ url: '/historyFiveMinutely/queryFiveDataByMac', method: 'get', @@ -1458,27 +1475,21 @@ }, }) .then((res) => { - console.log('res.data', res) if (res.message === '���������������������') { var datafalse = '���������������������' marker.bindPopup(datafalse) -.openPopup() + .openPopup() return } + this.childerItem.name = res.data.name let colorliststyleBgColor = this.styleBgColor(res.data) console.log('colorliststyleBgColor', colorliststyleBgColor) let deviceDetails = res.data let windDeg = 0 let windDir = '' - let dushu = - !deviceDetails.a01008 === '-' - ? JSON.parse(deviceDetails.a01008) -.toFixed(0) - : '-' - let level = - !deviceDetails.a01007 === '-' - ? WWindUtil.windFormatLevel(deviceDetails.a01007) - : '-' + let dushu = deviceDetails.a01008 === '-' ? '-' : JSON.parse(deviceDetails.a01008) + .toFixed(0) + let level = deviceDetails.a01007 === '0.0' ? '-' : WWindUtil.WindtoLevel(deviceDetails.a01007).level console.log('level', level) if (deviceDetails.a01008) { var windDirs = Number( @@ -1507,7 +1518,7 @@ // ������������������������������ 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"> @@ -1517,9 +1528,8 @@ <div class="marker_indexpart_2UI"> <div class="marker_indexname_3TP" - style="color: black;background:${ - colorliststyleBgColor.tvoccolorbg - }" + style="color: black;background:${colorliststyleBgColor.tvoccolorbg + }" > TVOC </div> @@ -1532,9 +1542,8 @@ <div class="marker_item_2Kk"> <div class="marker_itemname_Wq5" - style="color: black;background:${ - colorliststyleBgColor.pm25colorbg - } " + style="color: black;background:${colorliststyleBgColor.pm25colorbg + } " > PM2.5 </div> @@ -1545,9 +1554,8 @@ <div class="marker_item_2Kk"> <div class="marker_itemname_Wq5" - style="color: black;background:${ - colorliststyleBgColor.pm10colorbg - }" + style="color: black;background:${colorliststyleBgColor.pm10colorbg + }" > PM10 </div> @@ -1558,9 +1566,8 @@ <div class="marker_item_2Kk"> <div class="marker_itemname_Wq5" - style="color: black;background:${ - colorliststyleBgColor.so2colorbg - }" + style="color: black;background:${colorliststyleBgColor.so2colorbg + }" > SO2 </div> @@ -1571,9 +1578,8 @@ <div class="marker_item_2Kk"> <div class="marker_itemname_Wq5" - style="color: black;background:${ - colorliststyleBgColor.no210colorbg - }" + style="color: black;background:${colorliststyleBgColor.no210colorbg + }" > NO2 </div> @@ -1584,9 +1590,8 @@ <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 +1602,8 @@ <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,28 +1615,28 @@ <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)" src=${this.compassDirection} > </div> <div class='windInfor'> <div>������: ${windDir} (${dushu}���)</div> <div>������: ${deviceDetails.a01007}m/s</div> - <div>������: ${level}</div> + <div>������: ${level}���</div> </div> </div> </div>` marker.bindPopup(html, { className: 'mypopup' }) -.openPopup() + .openPopup() }) .catch((err) => { console.log(err) }) }, - handleCutZero(data) { + handleCutZero (data) { - let num = data.substring(0,data.indexOf(".")+4); + let num = data.substring(0, data.indexOf(".") + 4); //������������ ������������������������ // let num = Number(data).toFixed(3).toString() let newstr = num @@ -1663,7 +1667,7 @@ } return num }, - getMarkerInfor(data, marker) { + getMarkerInfor (data, marker) { this.$request({ url: '/historyFiveMinutely/queryPopDataByMac', method: 'get', @@ -1677,12 +1681,12 @@ if (res.message === '���������������������') { var datafalse = '���������������������' this.bindPopup(datafalse) -.openPopup() + .openPopup() return } for (const key in res.data) { var tempDecimal = res.data[key].replace(/[^\d.]/g, '') -.split('.')[1] + .split('.')[1] if (key !== '������' && key !== '������') { if (Number(tempDecimal) === 0) { res.data[key] = @@ -1690,7 +1694,7 @@ } else { res.data[key] = Number(res.data[key].split(' ')[0]) -.toFixed(2) + + .toFixed(2) + res.data[key].split(' ')[1] } } @@ -1700,7 +1704,7 @@ .replace(/{|}|"/g, '') console.log(data) marker.bindPopup(data) -.openPopup() + .openPopup() }) .catch((err) => { console.log(err) @@ -1708,7 +1712,7 @@ return data }, // ��������������� - windDir() { + windDir () { // console.log('������������') // console.log('���������ws������������') // const that = this @@ -1719,8 +1723,8 @@ if ( !layer._container && ('' + $(layer._container) -.attr('class')).replace(/\s/g, '') !== - 'leaflet-layer' + .attr('class')).replace(/\s/g, '') !== + 'leaflet-layer' ) { layer.remove() } @@ -1730,7 +1734,7 @@ this.deviceMaker() }, // ���������������������regionCode���������������api������ - getRegionApiRequest() { + getRegionApiRequest () { this.getParamsData(true) setTimeout(() => { $.getJSON( @@ -1744,11 +1748,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,7 +1785,7 @@ } }, 1000) }, - findLayer(layerName) { + findLayer (layerName) { // ������������������������������ if (!this.map) { return null @@ -1796,7 +1800,7 @@ return layer }, // ��������������������� - initMap() { + initMap () { var map = L.map('mapContent', { inertia: false, minZoom: 2, @@ -1812,7 +1816,7 @@ 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) { @@ -1828,7 +1832,7 @@ window.map = map }, // ������������������������ - change(index) { + change (index) { this.changeColor = index var pr = '' switch (index) { @@ -1872,15 +1876,15 @@ } }, // ��������������������� - initData() { + initData () { if (this.map) { this.map.eachLayer(function (layer) { // ��������������������������� if ( !layer._container && ('' + $(layer._container) -.attr('class')).replace(/\s/g, '') !== - 'leaflet-layer' + .attr('class')).replace(/\s/g, '') !== + 'leaflet-layer' ) { layer.remove() } @@ -1890,7 +1894,7 @@ this.windData() }, // ��������������� - windData() { + windData () { this.$request({ url: '/monitorPoint/getWindData', method: 'get', @@ -1908,7 +1912,7 @@ console.log(err) }) }, - canvasWind(data) { + canvasWind (data) { const res = this.findLayer('wmsid') if (res) { this.map.removeLayer(res) @@ -1951,7 +1955,7 @@ }, 1000) }, // ������������������������������������������������������������������ - alertData(n1, n2) { + alertData (n1, n2) { // ������������axios��������������������������� this.$request({ url: '/alarmInfo/getDataByConditionWithoutPage', @@ -1968,36 +1972,36 @@ 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 + }) }, // ������ // ��������������������� - 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 }) { for (const key in row) { if (key === column.property) { const code = column.property @@ -2017,7 +2021,7 @@ } return '' }, - turnState() { + turnState () { // console.log(this.showOrHidden) if (this.showOrHidden === true) { this.turnImg = require('@/assets/images/regionalOverview/dropDown.png') @@ -2027,7 +2031,7 @@ this.showOrHidden = !this.showOrHidden }, // ������������������ - stateControlStation() { + stateControlStation () { // this.$axios.get('monitorPoint/queryStateControlStation', { this.$request({ url: '/govMonitorPoint/queryStateControlStation', @@ -2042,7 +2046,7 @@ // console.log(res) var gkData = res.data var group = L.layerGroup() -.addTo(this.map) + .addTo(this.map) for (let i = 0; i < gkData.length; i++) { var glat = gkData[i].latitude var glng = gkData[i].longitude @@ -2057,7 +2061,7 @@ L.marker([glat, glng], { icon: gIcon, }) -.addTo(group) + .addTo(group) var myIcon = L.divIcon({ html: gkData[i].data, className: 'my-div-icon-g', @@ -2066,7 +2070,7 @@ L.marker([glat, glng], { icon: myIcon, }) -.addTo(group) + .addTo(group) } }) .catch((err) => { @@ -2074,7 +2078,7 @@ }) }, // ������������������������ - toggleWindState() { + toggleWindState () { if (this.ws) { this.ws.close() } @@ -2090,7 +2094,7 @@ // console.log(this.windState) } }, - closeAlarmTableVisible() { + closeAlarmTableVisible () { this.$store.state.alarmTableVisible = false }, }, -- Gitblit v1.8.0