From 1c5df35e9d51b1c2196c8dbba23695f2b74d0f45 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 13 Mar 2024 14:02:39 +0800 Subject: [PATCH] fix: 走航报告下载修改 --- src/views/hotMap/index.vue | 249 +++++++++++++++++++++++++++++++------------------ 1 files changed, 155 insertions(+), 94 deletions(-) diff --git a/src/views/hotMap/index.vue b/src/views/hotMap/index.vue index ebbd572..b788b45 100644 --- a/src/views/hotMap/index.vue +++ b/src/views/hotMap/index.vue @@ -26,7 +26,6 @@ v-model="orgId" size="small" placeholder="���������" - disabled @change="regionData" > <el-option @@ -102,11 +101,11 @@ heatmap: null, markerClusterer: null, orgData: [], - orgId: 71, + orgId: null, city: '������', formInline: { - city: '���������', - cityCode: '210300', + city: '', + cityCode: '', dayType: 'hour', starTime: '', endTime: '', @@ -118,13 +117,13 @@ maxNumber: 500, src: require('@/assets/images/tl_PM10.png'), gradient: { - '0': '#12a112', - '0.1': '#12a112', - '0.3': '#feff01', - '0.5': '#fd8200', - '0.7': '#fd0001', - '0.84': '#95014b', - '1': '#7e0226' + 0: '#12a112', + 0.1: '#12a112', + 0.3: '#feff01', + 0.5: '#fd8200', + 0.7: '#fd0001', + 0.84: '#95014b', + 1: '#7e0226' }}, sensorArr: [ { code: 'a34002', @@ -132,91 +131,93 @@ maxNumber: 500, src: require('@/assets/images/tl_PM10.png'), gradient: { - '0': '#12a112', - '0.1': '#12a112', - '0.3': '#feff01', - '0.5': '#fd8200', - '0.7': '#fd0001', - '0.84': '#95014b', - '1': '#7e0226' + 0: '#12a112', + 0.1: '#12a112', + 0.3: '#feff01', + 0.5: '#fd8200', + 0.7: '#fd0001', + 0.84: '#95014b', + 1: '#7e0226' }}, { code: 'a34004', name: 'PM2.5', maxNumber: 350, src: require('@/assets/images/tl_PM2.5.png'), gradient: { - '0': '#12a112', - '0.1': '#12a112', - '0.21': '#feff01', - '0.32': '#fd8200', - '0.42': '#fd0001', - '0.71': '#95014b', - '1': '#7e0226' + 0: '#12a112', + 0.1: '#12a112', + 0.21: '#feff01', + 0.32: '#fd8200', + 0.42: '#fd0001', + 0.71: '#95014b', + 1: '#7e0226' } }, { code: 'a21026', name: 'SO2', - maxNumber: 2100, + maxNumber: 150, src: require('@/assets/images/tl_SO2.png'), gradient: { - '0': '#12a112', - '0.02': '#12a112', - '0.07': '#feff01', - '0.22': '#fd8200', - '0.38': '#fd0001', - '0.76': '#95014b', - '1': '#7e0226' - } }, + 1: '#feff01', + 0.3: '#12a112', + } + }, { code: 'a21004', name: 'NO2', - maxNumber: 750, + maxNumber: 400, src: require('@/assets/images/tl_NO2.png'), gradient: { - '0': '#12a112', - '0.05': '#12a112', - '0.1': '#feff01', - '0.24': '#fd8200', - '0.37': '#fd0001', - '0.75': '#95014b', - '1': '#7e0226' + 0: '#12a112', + 0.1: '#12a112', + 0.15: '#feff01', + 0.19: '#feff01', + 0.20: '#fd8200', + 0.25: '#fd8200', + 0.45: '#fd8200', + 0.5: '#fd0001', + 0.7: '#95014b', + 1: '#7e0226' }}, { code: 'a21005', name: 'CO', maxNumber: 48, src: require('@/assets/images/tl_CO.png'), gradient: { - '0': '#12a112', - '0.04': '#12a112', - '0.083': '#feff01', - '0.29': '#fd8200', - '0.5': '#fd0001', - '0.75': '#95014b', - '1': '#7e0226' + 0.0: '#12a112', + 0.04: '#12a112', + 0.083: '#feff01', + 0.29: '#fd8200', + 0.5: '#fd0001', + 0.75: '#95014b', + 1: '#7e0226' }}, { code: 'a05024', name: 'O3', - maxNumber: 1000, + maxNumber: 500, src: require('@/assets/images/tl_O3.png'), gradient: { - '0': '#12a112', - '0.16': '#12a112', - '0.2': '#feff01', - '0.3': '#fd8200', - '0.4': '#fd0001', - '0.8': '#95014b', - '1': '#7e0226' + 0: '#12a112', + 0.32: '#12a112', + 0.33: '#feff01', + 0.4: '#feff01', + 0.41: '#fd8200', + 0.6: '#fd8200', + 0.61: '#fd0001', + 0.8: '#fd0001', + 0.9: '#95014b', + 1: '#7e0226' } }, { code: 'a99054', name: 'TVOC', maxNumber: 4, src: require('@/assets/images/tl_TVOCNew.png'), gradient: { - '0': '#12a112', - '0.12': '#12a112', - '0.25': '#feff01', - '0.375': '#fd8200', - '0.5': '#fd0001', - '0.75': '#95014b', - '1': '#7e0226' + 0: '#12a112', + 0.12: '#12a112', + 0.25: '#feff01', + 0.375: '#fd8200', + 0.5: '#fd0001', + 0.75: '#95014b', + 1: '#7e0226' }} ], heatMapData: [], @@ -225,6 +226,7 @@ speed: 2 }, polygon: null, + districtSearch: null, dateTimes: [], activeItem: {}, markerList: [] @@ -249,18 +251,18 @@ }, deep: true }, - 'formInline.city': { - handler: function (newVal, oldVal) { - console.log('newVal', newVal === '') - if (newVal !== '') { - this.init1() - if (!!this.formInline.starTime && !!this.formInline.endTime) { - this.onSubmit() - } - } - }, - deep: true - }, + // 'formInline.city': { + // handler: function (newVal, oldVal) { + // console.log('newVal', newVal === '') + // if (newVal !== '') { + // this.init1() + // if (!!this.formInline.starTime && !!this.formInline.endTime) { + // this.onSubmit() + // } + // } + // }, + // deep: true + // }, activeItem: { handler (newVal, oldVal) { if (this.markerList.length > 0) { @@ -274,11 +276,12 @@ deep: true } }, + created () { + }, mounted () { - this.$nextTick(() => { - this.initMap() - this.createHeatMap() - }) + let dataTime = dayjs().format('YYYY-MM-DD') + this.getOrganizationId() + this.getData(`${dataTime} 00`) }, destroyed () { @@ -307,6 +310,7 @@ }, getPollutant (data) { this.selectSensor = _.find(this.sensorArr, { name: data }) + this.dateTimes = [] if (this.heatmap) { this.map.remove(this.heatmap) this.heatmap = null @@ -317,7 +321,7 @@ initMap () { var map = new AMap.Map('mapd', { resizeEnable: true, - zooms: [10, 10], + zooms: [1, 10], zoom: 10, }) this.map = map @@ -327,16 +331,17 @@ init1 () { // ������������ var that = this this.map.setCity(this.formInline.city) - console.log('this.formInline.city', this.formInline.cityCode) if (that.polygon) { that.map.remove(that.polygon) + that.map.remove(that.districtSearch) + that.polygon = null + that.districtSearch = null } - console.log('that.polygon', that.polygon) - AMap.plugin('AMap.DistrictSearch', function () { + this.districtSearch = AMap.plugin('AMap.DistrictSearch', function () { new AMap.DistrictSearch({ extensions: 'all', subdistrict: 0 - }).search(that.formInline.city, function (status, result) { // ��������������������������������������������������� + }).search(that.formInline.cityCode, function (status, result) { // ��������������������������������������������������� var outer = [ new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), @@ -376,11 +381,12 @@ } this.heatMapData = [] this.heatMapData = res.data + this.dataProcessing(this.heatMapData) this.heatmap.setDataSet({ data: this.heatMapData, max: this.selectSensor.maxNumber }) - console.log('000', this.map.getZoom()) + console.log('000', this.selectSensor.maxNumber) console.log('1111', this.heatmap.getDataSet()) } else { this.heatmap = null @@ -389,6 +395,45 @@ .catch(err => { console.log(err) }) + }, + dataProcessing (heatMapData) { + // ��������������� + console.log('this.heatMapData', this.heatMapData) + const max = heatMapData.reduce((prev, current) => (prev.count > current.count ? prev : current)).count + + // so2 + if (this.selectSensor.code === 'a21026') { + if (max > 150 && max <= 475) { + this.selectSensor.maxNumber = 475 + this.heatmap.setOptions({ + gradient: { + 0.1: '#12a112', + 0.2: '#feff01', + 0.3: '#feff01', + 0.32: '#fd8200', + 0.4: '#fd8200', + 1: '#fd8200' + } + }) + } + if (max > 475 && max <= 1000) { + this.selectSensor.maxNumber = 1000 + this.heatmap.setOptions({ + gradient: { + 0: '#12a112', + 0.05: '#12a112', + 0.15: '#feff01', + 0.47: '#fd8200', + 0.5: '#fd0001', + 0.8: '#fd0001', + 0.9: '#95014b', + 1: '#7e0226' + } + }) + } + } else if (this.selectSensor.code === 'a05024') { + if (max > 150 && max <= 475) {} + } }, // ��������� setMarkers (curData) { @@ -488,6 +533,14 @@ }) .then(res => { this.orgData = res.data + let cityData = _.find(this.orgData, { id: this.orgId }) + if (this.orgId === 73) { + this.formInline.city = cityData.cityName + this.formInline.cityCode = String(cityData.cityCode) + } else { + this.formInline.city = cityData.areaName + this.formInline.cityCode = String(cityData.areaCode) + } }) .catch(err => { console.log(err) @@ -507,10 +560,16 @@ onSubmit () { if (!!this.formInline.city && !!this.formInline.starTime && !!this.formInline.endTime) { - this.map.clearMap() + // this.map.clearMap() this.getDayListData() this.getData(this.formInline.starTime) - this.init1() + this.$nextTick(() => { + if (this.map) { + this.map.destroy() + } + this.initMap() + this.createHeatMap() + }) // this.map.setZoom(12) } else { this.$message({ @@ -523,18 +582,20 @@ }, regionData (id) { let cityData = _.find(this.orgData, { id: id }) - this.formInline.city = cityData.cityName - this.formInline.cityCode = cityData.cityCode + if (id === 73) { + this.formInline.city = cityData.cityName + this.formInline.cityCode = String(cityData.cityCode) + } else { + this.formInline.city = cityData.areaName + this.formInline.cityCode = String(cityData.areaCode) + } + console.log('cityData', cityData) }, selectHourData (data) { if (data) { this.formInline.starTime = data[0] this.formInline.endTime = data[1] - console.log('selectHourData', data) - let dataTime = dayjs().format('YYYY-MM-DD') - this.getOrganizationId() this.getDayListData() - this.getData(`${dataTime} 00`) } else { this.formInline.starTime = '' this.formInline.endTime = '' -- Gitblit v1.8.0