quanyawei
2024-02-02 e635b5b4edab0a000a0af533b6b36f7300c5fa42
src/views/hotMap/index.vue
@@ -105,8 +105,8 @@
      orgId: 71,
      city: '苏州',
      formInline: {
        city: '鞍山市',
        cityCode: '210300',
        city: '海城市',
        cityCode: '210381',
        dayType: 'hour',
        starTime: '',
        endTime: '',
@@ -118,13 +118,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 +132,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: [],
@@ -331,7 +333,7 @@
    init1 () { // 区域遮盖
      var that = this
      this.map.setCity(this.formInline.city)
      console.log('this.formInline.city', this.formInline.cityCode)
      console.log('海城', this.formInline.cityCode)
      if (that.polygon) {
        that.map.remove(that.polygon)
      }
@@ -340,7 +342,7 @@
        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),
@@ -380,6 +382,7 @@
            }
            this.heatMapData = []
            this.heatMapData = res.data
            this.dataProcessing()
            this.heatmap.setDataSet({
              data: this.heatMapData,
              max: this.selectSensor.maxNumber
@@ -393,6 +396,43 @@
        .catch(err => {
          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) {
@@ -511,10 +551,10 @@
    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({
@@ -527,8 +567,8 @@
    },
    regionData (id) {
      let cityData = _.find(this.orgData, { id: id })
      this.formInline.city = cityData.cityName
      this.formInline.cityCode = cityData.cityCode
      this.formInline.city = cityData.areaName
      this.formInline.cityCode = cityData.areaCode
    },
    selectHourData (data) {
      if (data) {