From f70d875a462fdb80807eae2bd022d5a3173a6e05 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 01 Feb 2024 10:53:17 +0800
Subject: [PATCH] fix:断线监控
---
src/views/hotMap/index.vue | 295 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 244 insertions(+), 51 deletions(-)
diff --git a/src/views/hotMap/index.vue b/src/views/hotMap/index.vue
index 5756426..f68d0a0 100644
--- a/src/views/hotMap/index.vue
+++ b/src/views/hotMap/index.vue
@@ -1,5 +1,8 @@
<template>
- <div class="content">
+ <div
+ ref="content"
+ class="content"
+ >
<div class="formInBox ">
<el-form
:inline="true"
@@ -19,10 +22,20 @@
</el-radio-group>
</el-form-item>
<el-form-item>
- <RegionCity
- :select-size="'small'"
- @regionForm="regionData"
- />
+ <el-select
+ v-model="orgId"
+ size="small"
+ placeholder="���������"
+ disabled
+ @change="regionData"
+ >
+ <el-option
+ v-for="item in orgData"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
</el-form-item>
<el-form-item>
<el-radio-group
@@ -48,11 +61,22 @@
>
������
</el-button>
+ <el-button
+ type="primary"
+ size="small"
+ @click="download"
+ >
+ ������
+ </el-button>
</el-form-item>
</el-form>
</div>
<div id="mapd" />
<div class="timeLine">
+ <div
+ :style="{ background: 'url(' + selectSensor.src + ') no-repeat' }"
+ class="buttomColorLine"
+ />
<Main
v-if="dateTimes.length > 0&&formInline.city!==''"
:options="options"
@@ -65,36 +89,137 @@
</template>
<script>
+import dayjs from 'dayjs'
import _ from 'lodash'
-import RegionCity from '@/components/Cascader/regionCity'
import selectHour from './components/selectHour.vue'
import Main from './components/timeLinePlay.vue'
+import html2canvas from 'html2canvas'
export default {
- components: { RegionCity, selectHour, Main },
+ components: { selectHour, Main },
data () {
return {
map: null,
heatmap: null,
markerClusterer: null,
+ orgData: [],
+ orgId: 71,
city: '������',
formInline: {
- city: '',
- cityCode: '',
+ city: '���������',
+ cityCode: '210381',
dayType: 'hour',
starTime: '',
endTime: '',
dateRadio: '������',
pollutant: 'PM10',
},
- selectSensor: {code: 'a34002', name: 'PM10', maxNumber: 500},
+ selectSensor: {code: 'a34002',
+ name: 'PM10',
+ 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'
+ }},
sensorArr: [
- { code: 'a34002', name: 'PM10', maxNumber: 500 },
- { code: 'a34004', name: 'PM2.5', maxNumber: 350 },
- { code: 'a21026', name: 'SO2', maxNumber: 2100 },
- { code: 'a21004', name: 'NO2', maxNumber: 750 },
- { code: 'a21005', name: 'CO', maxNumber: 48 },
- { code: 'a05024', name: 'O3', maxNumber: 1000 },
- { code: 'a99054', name: 'TVOC', maxNumber: 4 }
+ { code: 'a34002',
+ name: 'PM10',
+ 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'
+ }},
+ { 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'
+ } },
+ { code: 'a21026',
+ name: 'SO2',
+ maxNumber: 150,
+ src: require('@/assets/images/tl_SO2.png'),
+ gradient: {
+ 1: '#feff01',
+ 0.3: '#12a112',
+ }
+ },
+ { code: 'a21004',
+ name: 'NO2',
+ maxNumber: 400,
+ src: require('@/assets/images/tl_NO2.png'),
+ gradient: {
+ 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.0: '#12a112',
+ 0.04: '#12a112',
+ 0.083: '#feff01',
+ 0.29: '#fd8200',
+ 0.5: '#fd0001',
+ 0.75: '#95014b',
+ 1: '#7e0226'
+ }},
+ { code: 'a05024',
+ name: 'O3',
+ maxNumber: 500,
+ src: require('@/assets/images/tl_O3.png'),
+ gradient: {
+ 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'
+ }}
],
heatMapData: [],
dataType: 'datetimerange',
@@ -131,7 +256,6 @@
console.log('newVal', newVal === '')
if (newVal !== '') {
this.init1()
- this.map.setCity(newVal)
if (!!this.formInline.starTime && !!this.formInline.endTime) {
this.onSubmit()
}
@@ -153,6 +277,9 @@
}
},
mounted () {
+ let dataTime = dayjs().format('YYYY-MM-DD')
+ this.getOrganizationId()
+ this.getData(`${dataTime} 00`)
this.$nextTick(() => {
this.initMap()
this.createHeatMap()
@@ -165,34 +292,57 @@
}
},
methods: {
+ download () {
+ const ref = this.$refs.content // ������������
+ html2canvas(ref, {
+ backgroundColor: '#e8f4ff',
+ useCORS: true // ���������������������������������,���������������������������,������������������,������������������������
+ }).then((canvas) => {
+ const dataURL = canvas.toDataURL('image/png')
+ const creatDom = document.createElement('a')
+ document.body.appendChild(creatDom)
+ creatDom.href = dataURL
+ creatDom.download = '������'
+ creatDom.click()
+ })
+ },
getDateFun (item) {
console.log(item)
this.activeItem = item
},
getPollutant (data) {
this.selectSensor = _.find(this.sensorArr, { name: data })
- console.log(this.selectSensor)
+ this.dateTimes = []
+ if (this.heatmap) {
+ this.map.remove(this.heatmap)
+ this.heatmap = null
+ }
+ console.log('this.heatmap', this.heatmap)
},
// ���������������
initMap () {
var map = new AMap.Map('mapd', {
resizeEnable: true,
- zooms: [3, 18],
- zoom: 11,
+ zooms: [10, 10],
+ zoom: 10,
})
this.map = map
+ this.init1()
// let that = this
},
init1 () { // ������������
var that = this
+ this.map.setCity(this.formInline.city)
+ console.log('������', this.formInline.cityCode)
if (that.polygon) {
that.map.remove(that.polygon)
}
+ console.log('that.polygon', that.polygon)
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),
@@ -206,7 +356,7 @@
pathL: pathArray,
strokeColor: 'red', // ������������������
strokeWeight: 3,
- fillColor: '#FFF', // ���������������������
+ fillColor: '#ccc', // ���������������������
fillOpacity: 1
})
that.polygon.setPath(pathArray)
@@ -219,7 +369,7 @@
url: '/heatMap/query',
method: 'get',
params: {
- code: this.formInline.cityCode,
+ id: this.orgId,
startTime: newVal,
type: this.selectSensor.code,
form: this.formInline.dayType
@@ -227,19 +377,18 @@
})
.then(res => {
if (res.data !== '0') {
- // this.map.remove(this.heatmap)
if (this.heatmap === null) {
this.createHeatMap()
}
this.heatMapData = []
this.heatMapData = res.data
+ this.dataProcessing()
this.heatmap.setDataSet({
data: this.heatMapData,
max: this.selectSensor.maxNumber
})
- // let zoomLevel = this.map.getZoom()
- //
- this.setMarkers(this.heatMapData)
+ console.log('000', this.selectSensor.maxNumber)
+ console.log('1111', this.heatmap.getDataSet())
} else {
this.heatmap = null
}
@@ -248,7 +397,44 @@
console.log(err)
})
},
-
+ dataProcessing () {
+ // ���������������
+ const max = this.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) {
curData.forEach((item, index) => {
let div = document.createElement('div')
@@ -292,9 +478,11 @@
gridSize: 100,
renderClusterMarker: function (context) {
let contNumber = 0
- context.markers.forEach(item => {
+ context.markers.forEach((item, index) => {
+ console.log('indexitem', index, item.getExtData())
contNumber += item.getExtData()
})
+ console.log('contNumber', contNumber)
let factor = Math.pow(context.count / count, 1 / 18)
let div = document.createElement('div')
let Hue = 180 - factor * 180
@@ -315,6 +503,7 @@
div.style.textAlign = 'center'
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
context.marker.setContent(div)
+ console.log('context.marker----------------', context.marker)
}
})
})
@@ -336,31 +525,36 @@
console.log(err)
})
},
+ getOrganizationId () {
+ this.$request({
+ url: '/organization/getOrganizationId',
+ method: 'get'
+ })
+ .then(res => {
+ this.orgData = res.data
+ })
+ .catch(err => {
+ console.log(err)
+ })
+ },
createHeatMap () {
let that = this
this.map.plugin(['AMap.Heatmap'], function () {
// ���������heatmap������
that.heatmap = new AMap.Heatmap(that.map, {
radius: 100, // ������������
- opacity: [0.2, 0.8],
- gradient: {
- '0': '#d81e06',
- '0.2': '#ea9518',
- '0.4': '#fd8200',
- '0.6': '#fd0001',
- '0.8': '#95014b',
- '1': '#7e0226'
- }
+ opacity: [0.5, 1],
+ gradient: that.selectSensor.gradient
})
})
},
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.init1()
// this.map.setZoom(12)
} else {
this.$message({
@@ -371,20 +565,16 @@
})
}
},
- regionData (city) {
- console.log(city)
- if (city.org) {
- this.formInline.city = city.org
- this.formInline.cityCode = city.orgid
- } else {
- this.formInline.city = ''
- this.formInline.cityCode = ''
- }
+ regionData (id) {
+ let cityData = _.find(this.orgData, { id: id })
+ this.formInline.city = cityData.areaName
+ this.formInline.cityCode = cityData.areaCode
},
selectHourData (data) {
if (data) {
this.formInline.starTime = data[0]
this.formInline.endTime = data[1]
+ this.getDayListData()
} else {
this.formInline.starTime = ''
this.formInline.endTime = ''
@@ -422,9 +612,12 @@
.timeLine{
position: absolute;
padding: 5px 10px;
- bottom: 15px;
+ bottom: 5px;
width: 100%;
z-index: 999;
+ .buttomColorLine{
+ height: 50px;
+ }
}
/deep/.menu-icon {
font-size: 20px;
--
Gitblit v1.8.0