fix: 国控站

quanyawei

2024-11-15 f752f50a484f63fc3786ab1c7ad563f3b17cce77

 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,9 +22,26 @@
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <RegionCity
            :select-size="'small'"
            @regionForm="regionData"
          <!-- <el-select
            v-model="orgId"
            size="small"
            placeholder="请选择"
            @change="regionData"
          >
            <el-option
              v-for="item in orgData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select> -->
          <el-cascader
            v-model="orgId"
            size="small"
            :options="orgData"
            :props="props"
            clearable
            @change="regionData"
          />
        </el-form-item>
        <el-form-item>
@@ -48,13 +68,31 @@
          >
            查询
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="download"
          >
            截图
          </el-button>
          <!-- <el-button
            class="btn"
            style="margin-bottom: 5px"
            @click="drawRectangle"
          >
            绘制矩形
          </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!==''"
        v-if="dateTimes.length > 0"
        :options="options"
        :date-times="dateTimes"
        :date-type="formInline.dayType"
@@ -65,18 +103,189 @@
</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: [],
      props: { checkStrictly: true, label: 'name', value: 'id', children: 'children' },
      orgId: [],
      city: '苏州',
      selectYcLocationInfor: {},
      ycPoints: [
        {
          id: 117,
          name: '月亮广场',
          radius: 50,
          centerPoint: [120.162594, 33.335508],
          zoom: 15,
          path: [[
            [
              120.14212385147812,
              33.3501711960911
            ],
            [
              120.18375173538925,
              33.3501711960911
            ],
            [
              120.18375173538925,
              33.32428486558254
            ],
            [
              120.14212385147812,
              33.32428486558254
            ],
            [
              120.14212385147812,
              33.3501711960911
            ],
          ]]
        },
        {
          id: 118,
          name: '宝龙广场',
          radius: 100,
          centerPoint: [120.159189, 33.362052],
          zoom: 15,
          path: [[
            [
              120.14180812194945,
              33.376155594175906
            ],
            [
              120.1767841275036,
              33.376155594175906
            ],
            [
              120.1767841275036,
              33.349560021621436
            ],
            [
              120.14180812194945,
              33.349560021621436
            ],
            [
              120.14180812194945,
              33.376155594175906
            ]
          ]]
        },
        {
          id: 119,
          name: '开发区管委会',
          zoom: 16,
          radius: 100,
          centerPoint: [120.216872, 33.378334],
          path: [
            [
              [
                120.20549907401204,
                33.38532153338434
              ],
              [
                120.22927417472005,
                33.38532153338434
              ],
              [
                120.22927417472005,
                33.37125561579751
              ],
              [
                120.20549907401204,
                33.37125561579751
              ],
              [
                120.20549907401204,
                33.38532153338434
              ]
            ]
          ]
        },
        {
          id: 120,
          name: '盐城电厂',
          zoom: 15,
          radius: 60,
          centerPoint: [120.123716, 33.400926],
          path: [[
            [
              120.10800871968269,
              33.411207878716695
            ],
            [
              120.13839278340339,
              33.411207878716695
            ],
            [
              120.13839278340339,
              33.39053545526069
            ],
            [
              120.10800871968269,
              33.39053545526069
            ]
          ]]
        },
        {
          id: 121,
          name: '市监测站',
          zoom: 16,
          radius: 60,
          centerPoint: [120.159868, 33.392545],
          path: [[
            [
              120.1529805980623,
              33.39872613771991
            ],
            [
              120.16664913520219,
              33.39872613771991
            ],
            [
              120.16664913520219,
              33.38616740820813
            ],
            [
              120.1529805980623,
              33.38616740820813
            ]
          ]]
        },
        {
          id: 122,
          name: '大丰高级中学',
          zoom: 16,
          radius: 100,
          centerPoint: [120.433178, 33.203129],
          path: [[
            [
              120.42407972171901,
              33.21116367463085
            ],
            [
              120.4417823012173,
              33.21116367463085
            ],
            [
              120.4417823012173,
              33.196926006173
            ],
            [
              120.42407972171901,
              33.196926006173
            ]
          ]]
        },
      ],
      formInline: {
        city: '',
        cityCode: '',
@@ -86,15 +295,213 @@
        dateRadio: '小时',
        pollutant: 'PM10',
      },
      selectSensor: {code: 'a34002', name: 'PM10', maxNumber: 500},
      selectSensor: {code: 'a34002',
        name: 'PM10',
        src: require('@/assets/images/tl_PM10.png'),
        colorList: [{
          maxNumber: 50,
          color: '#12a112'
        }, {
          maxNumber: 150,
          color: '#feff01'
        }, {
          maxNumber: 250,
          color: '#fd8200'
        }, {
          maxNumber: 350,
          color: '#fd0001'
        }, {
          maxNumber: 420,
          color: '#95014b'
        }, {
          maxNumber: 500,
          color: '#7e0226'
        }],
        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',
          src: require('@/assets/images/tl_PM10.png'),
          colorList: [{
            maxNumber: 50,
            color: '#12a112'
          }, {
            maxNumber: 150,
            color: '#feff01'
          }, {
            maxNumber: 250,
            color: '#fd8200'
          }, {
            maxNumber: 350,
            color: '#fd0001'
          }, {
            maxNumber: 420,
            color: '#95014b'
          }, {
            maxNumber: 500,
            color: '#7e0226'
          }],
          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',
          colorList: [{
            maxNumber: 35,
            color: '#12a112'
          }, {
            maxNumber: 75,
            color: '#feff01'
          }, {
            maxNumber: 115,
            color: '#fd8200'
          }, {
            maxNumber: 150,
            color: '#fd0001'
          }, {
            maxNumber: 250,
            color: '#95014b'
          }, {
            maxNumber: 350,
            color: '#7e0226'
          }],
          src: require('@/assets/images/tl_PM2.5.png'),
          gradient: {}
        },
        { code: 'a21026',
          name: 'SO2',
          src: require('@/assets/images/tl_SO2.png'),
          colorList: [{
            maxNumber: 50,
            color: '#12a112'
          }, {
            maxNumber: 150,
            color: '#feff01'
          }, {
            maxNumber: 475,
            color: '#fd8200'
          }, {
            maxNumber: 800,
            color: '#fd0001'
          }, {
            maxNumber: 1600,
            color: '#95014b'
          }, {
            maxNumber: 2100,
            color: '#7e0226'
          }],
          gradient: {}
        },
        { code: 'a21004',
          name: 'NO2',
          src: require('@/assets/images/tl_NO2.png'),
          colorList: [{
            maxNumber: 40,
            color: '#12a112'
          }, {
            maxNumber: 80,
            color: '#feff01'
          }, {
            maxNumber: 180,
            color: '#fd8200'
          }, {
            maxNumber: 280,
            color: '#fd0001'
          }, {
            maxNumber: 565,
            color: '#95014b'
          }, {
            maxNumber: 750,
            color: '#7e0226'
          }],
          gradient: {}
        },
        { code: 'a21005',
          name: 'CO',
          src: require('@/assets/images/tl_CO.png'),
          colorList: [{
            maxNumber: 2,
            color: '#12a112'
          }, {
            maxNumber: 4,
            color: '#feff01'
          }, {
            maxNumber: 14,
            color: '#fd8200'
          }, {
            maxNumber: 24,
            color: '#fd0001'
          }, {
            maxNumber: 36,
            color: '#95014b'
          }, {
            maxNumber: 48,
            color: '#7e0226'
          }],
          gradient: {}
        },
        { code: 'a05024',
          name: 'O3',
          src: require('@/assets/images/tl_O3.png'),
          colorList: [{
            maxNumber: 160,
            color: '#12a112'
          }, {
            maxNumber: 200,
            color: '#feff01'
          }, {
            maxNumber: 300,
            color: '#fd8200'
          }, {
            maxNumber: 400,
            color: '#fd0001'
          }, {
            maxNumber: 800,
            color: '#95014b'
          }, {
            maxNumber: 1000,
            color: '#7e0226'
          }],
          gradient: {}
        },
        { code: 'a99054',
          name: 'TVOC',
          src: require('@/assets/images/tl_TVOCNew.png'),
          colorList: [{
            maxNumber: 0.5,
            color: '#12a112'
          }, {
            maxNumber: 1,
            color: '#feff01'
          }, {
            maxNumber: 1.5,
            color: '#fd8200'
          }, {
            maxNumber: 2,
            color: '#fd0001'
          }, {
            maxNumber: 3,
            color: '#95014b'
          }, {
            maxNumber: 4,
            color: '#7e0226'
          }],
          gradient: {}
        }
      ],
      heatMapData: [],
      dataType: 'datetimerange',
@@ -102,6 +509,7 @@
        speed: 2
      },
      polygon: null,
      districtSearch: null,
      dateTimes: [],
      activeItem: {},
      markerList: []
@@ -126,39 +534,31 @@
      },
      deep: true
    },
    'formInline.city': {
      handler: function (newVal, oldVal) {
        console.log('newVal', newVal === '')
        if (newVal !== '') {
          this.map.clearMap()
          this.init1()
          this.map.setCity(newVal)
          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) {
          console.log('2222', this.map.getAllOverlays('marker'))
          this.map.remove(this.markerList)
          this.map.clearMap()
          this.markerList = []
          // this.markerClusterer = null
        }
        this.getData(newVal.name)

      },
      deep: true
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initMap()
      this.createHeatMap()
    })
    // let dataTime = dayjs().format('YYYY-MM-DD')
    this.getOrganizationId()
    // this.getData(`${dataTime} 00`)
  },

  destroyed () {
@@ -167,48 +567,108 @@
    }
  },
  methods: {
    drawRectangle () {
      AMap.plugin('AMap.MouseTool', () => {
        let mouseTool = new AMap.MouseTool(this.map)
        mouseTool.rectangle({
          strokeColor: 'red',
          strokeOpacity: 0.5,
          strokeWeight: 6,
          fillColor: 'blue',
          fillOpacity: 0.5,
          // strokeStyle还支持 solid
          strokeStyle: 'solid',
        // strokeDasharray: [30,10],
        })
        mouseTool.on('draw', function (event) {
          // event.obj 为绘制出来的覆盖物对象
          let data = event.obj.getPath()
          let allpoint = []
          data.forEach(item => {
            allpoint.push([item.R, item.Q])
          })
        })
      })
    },
    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
      if (this.orgId.length > 0) {
        this.getData(item.name)
      }
    },
    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
      }
    },
    // 初始化地图
    initMap () {
      var map = new AMap.Map('mapd', {
        resizeEnable: true,
        zooms: [3, 18],
        zoom: 11,
        zoomEnable: false,
        zoom: this.formInline.cityCode === '320900' ? this.selectYcLocationInfor.zoom : 10
      })
      this.map = map
      map.on('click', function (e) {
        console.log('e.lnglat.getLng() + ', ' + e.lnglat.getLat()', e.lnglat.getLng() + ',' + e.lnglat.getLat())
      })
      this.init1()
      // let that = this
    },
    init1 () { // 区域遮盖
      var that = this

      if (that.polygon) {
        that.map.remove(that.polygon)
        that.map.remove(that.districtSearch)
        that.polygon = null
        that.districtSearch = null
      }
      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) { // 外多边形坐标数组和内多边形坐标数组
          var outer = [
        }).search(that.formInline.cityCode, function (status, result) { // 外多边形坐标数组和内多边形坐标数组
          let outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ]
          var holes = result.districtList[0].boundaries
          var pathArray = [outer]
          pathArray.push.apply(pathArray, holes)
          let pathArray = [outer]
          let holes = result.districtList[0].boundaries
          if (that.formInline.cityCode === '320900') {
            // 盐城
            let locationInfor = _.find(that.ycPoints, { id: that.formInline.areName })
            that.map.setCenter(locationInfor.centerPoint)
            pathArray.push.apply(pathArray, locationInfor.path)
          } else {
            pathArray.push.apply(pathArray, holes)
            that.map.setCity(that.formInline.city)
          }
          // pathArray.push.apply(pathArray, holes)
          that.polygon = new AMap.Polygon({
            pathL: pathArray,
            strokeColor: 'red', // 城市边界颜色
            strokeWeight: 3,
            fillColor: '#FFF', // 遮罩背景色黑色
            fillColor: '#ccc', // 遮罩背景色黑色
            fillOpacity: 1
          })
          that.polygon.setPath(pathArray)
@@ -221,8 +681,9 @@
        url: '/heatMap/query',
        method: 'get',
        params: {
          code: this.formInline.cityCode,
          id: this.orgId[0],
          startTime: newVal,
          monitorId: this.formInline.areName,
          type: this.selectSensor.code,
          form: this.formInline.dayType
        }
@@ -232,16 +693,11 @@
            if (this.heatmap === null) {
              this.createHeatMap()
            }
            this.map.clearMap()
            this.heatMapData = res.data
            this.heatmap.setDataSet({
              data: this.heatMapData,
              max: this.selectSensor.maxNumber
            })
            // let zoomLevel = this.map.getZoom()
            //
            this.setMarkers(this.heatMapData)

            this.dataProcessing(this.heatMapData)
          } else {
            this.map.remove(this.heatmap)
            this.heatmap = null
          }
        })
@@ -249,76 +705,78 @@
          console.log(err)
        })
    },

    setMarkers (curData) {
      curData.forEach((item, index) => {
        let div = document.createElement('div')
        let bgColor = 'hsla(180, 100%, 50%, 0.7)'
        let fontColor = '#000'
        let borderColor = 'hsl(180, 100%, 40%)'
        let shadowColor = 'hsl(180, 100%, 50%)'
        div.id = 'pint' + index
        div.style.backgroundColor = bgColor
        let size = 40
        div.style.width = div.style.height = size + 'px'
        div.style.border = 'solid 1px ' + borderColor
        div.style.borderRadius = size / 2 + 'px'
        div.style.boxShadow = '0 0 1px ' + shadowColor
        div.innerHTML = Math.floor(Number(item.count))
        div.style.lineHeight = size + 'px'
        div.style.color = fontColor
        div.style.fontSize = '14px'
        div.style.textAlign = 'center'
        let marker = new AMap.Marker({
          position: [item.lng, item.lat],
          title: item.name,
          extData: Math.floor(Number(item.count)),
          anchor: 'center',
          // 将 html 传给 content
          content: div,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(3, 10)
        })
        this.markerList.push(marker)
      })
      this.map.add(this.markerList)
      var count = this.markerList.length
      // eslint-disable-next-line no-new
      if (this.markerClusterer) {
        this.markerClusterer.clearMarkers()
    findMaxNumberForValue (value, colorList) {
      let matchedMaxItem = null
      for (let item of colorList) {
        if (value <= item.maxNumber) {
          matchedMaxItem = item
          break // 找到后退出循环
        }
      }
      let that = this
      AMap.plugin('AMap.MarkerClusterer', function () {
        that.markerClusterer = new AMap.MarkerClusterer(that.map, that.markerList, {
          gridSize: 100,
          renderClusterMarker: function (context) {
            let contNumber = 0
            context.markers.forEach(item => {
              contNumber += item.getExtData()
            })
            let factor = Math.pow(context.count / count, 1 / 18)
            let div = document.createElement('div')
            let Hue = 180 - factor * 180
            let bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
            let fontColor = 'hsla(' + Hue + ',100%,20%,1)'
            let borderColor = 'hsla(' + Hue + ',100%,40%,1)'
            let shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
            div.style.backgroundColor = bgColor
            let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
            div.style.width = div.style.height = size + 'px'
            div.style.border = 'solid 1px ' + borderColor
            div.style.borderRadius = size / 2 + 'px'
            div.style.boxShadow = '0 0 1px ' + shadowColor
            div.innerHTML = contNumber
            div.style.lineHeight = size + 'px'
            div.style.color = fontColor
            div.style.fontSize = '14px'
            div.style.textAlign = 'center'
            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
            context.marker.setContent(div)
      return matchedMaxItem
    },
    getGradientOption (matchedMaxItem) {
      let gradient = {}
      this.selectSensor.colorList.forEach(item => {
        if (item.maxNumber <= matchedMaxItem.maxNumber) {
          console.log('item', item)
          let key = (item.maxNumber / matchedMaxItem.maxNumber).toFixed(1)
          gradient[key] = item.color
        }
      }
      )

      let keysArray = Object.keys(gradient)
      let valuesArray = Object.values(gradient)
      console.log('keysArray', keysArray, valuesArray)
      let obj = {}
      keysArray.forEach((item, index) => {
        console.log(item, index, parseInt(item))
        if (Number(item) !== 1) {
          obj[Number(item)] = valuesArray[index]
          if (Number(item) + 0.1 < keysArray[index + 1]) {
            obj[Number(item) + 0.1] = valuesArray[index + 1]
          }
        })
        } else {
          obj[Number(item)] = valuesArray[index]
        }
      })
      obj[0] = '#12a112'
      return obj
    },
    dataProcessing (heatMapData) {
      // 获取最大值
      const max = heatMapData.reduce((prev, current) => (prev.count > current.count ? prev : current)).count
      let matchedMaxItem = this.findMaxNumberForValue(max, this.selectSensor.colorList)
      let gradient = this.getGradientOption(matchedMaxItem)
      this.heatmap.setDataSet({
        data: this.heatMapData,
        max: matchedMaxItem.maxNumber
      })
      this.heatmap.setOptions({
        gradient: gradient
      })
    },
    // 聚合点
    setMarkers (curData) {
      let markerList = []
      curData.forEach(item => {
        // let marker = new AMap.Marker({
        //   position: new AMap.LngLat(item.lng, item.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //   title: item.name,
        // })
        let marker = new AMap.Text({
          text: item.name, // 标记显示的文本内容
          anchor: 'center', // 设置文本标记锚点位置
          draggable: false, // 是否可拖拽
          cursor: 'pointer', // 指定鼠标悬停时的鼠标样式。
          angle: 10, // 点标记的旋转角度

          position: [item.lng, item.lat], // 点标记在地图上显示的位置
        })
        markerList.push(marker)
      })
      this.map.add(markerList)
    },
    getDayListData () {
      this.$request({
@@ -337,30 +795,48 @@
          console.log(err)
        })
    },
    getOrganizationId () {
      this.$request({
        url: '/organization/getOrganizationId',
        method: 'get'
      })
        .then(res => {
          this.orgData = res.data.map(item => {
            if (item.id === 73) {
              item.children = this.ycPoints
            }
            return item
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    createHeatMap () {
      let that = this
      // let radius = this.formInline.cityCode === '320900' ? this.selectYcLocationInfor.radius : 100
      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'
          }
          radius: 100, // 给定半
          opacity: [0.5, 0.5]
        })
      })
    },

    onSubmit () {
      if (!!this.formInline.city && !!this.formInline.starTime && !!this.formInline.endTime) {
        // this.map.clearMap()

        this.getDayListData()

        if (this.map) {
          this.map.destroy()
        }
        this.initMap()
        this.createHeatMap()
        this.getData(this.formInline.starTime)
        this.map.setZoom(12)
        // this.map.setZoom(12)
      } else {
        this.$message({
          showClose: true,
@@ -370,20 +846,28 @@
        })
      }
    },
    regionData (city) {
      console.log(city)
      if (city.org) {
        this.formInline.city = city.org
        this.formInline.cityCode = city.orgid
    regionData (id) {
      let cityData = _.find(this.orgData, { id: id[0] })
      if (id[0] === 73) {
        if (id[1]) {
          this.formInline.areName = id[1]
        }
        this.selectYcLocationInfor = _.find(this.ycPoints, { id: id[1] })
        this.formInline.city = cityData.cityName
        this.formInline.cityCode = String(cityData.cityCode)
      } else {
        this.formInline.city = ''
        this.formInline.cityCode = ''
        this.formInline.areName = ''
        this.formInline.city = cityData.areaName
        this.formInline.cityCode = String(cityData.areaCode)
      }
    },
    selectHourData (data) {
      if (data) {
        this.formInline.starTime = data[0]
        this.formInline.endTime = data[1]
        if (this.formInline.city) {
          this.getDayListData()
        }
      } else {
        this.formInline.starTime = ''
        this.formInline.endTime = ''
@@ -421,9 +905,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;