fix:日期限制取消

quanyawei

2023-12-27 ec38056995178c94bea0689d6c6fd64ed5da8014

 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;