企业应急-事件处置-事件信息页面

yangdelong

2021-05-30 8b2353875b5d7e8365a454ee414e3042c7208047

企业应急-事件处置-事件信息页面

 src/Sgis.js

@@ -14,6 +14,7 @@
import '@/components/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css
import '@components/plugin/L.CircleEditor'
import BasemapHelper from './components/helpers/BasemapHelper'
import VectorLayerHelper from './components/helpers/VectorLayerHelper'


 src/assets/css/map/map-panel-style.less

@@ -28,7 +28,8 @@
}

.el-button--mini, .el-button--mini.is-round {
  padding: 0.02rem 0.04rem;
  margin-left: 5px;
  margin-right: 5px;
}

/*隐藏*/
@@ -164,6 +165,11 @@
    background-color: @background-color-light;
    border: solid 1px @color;
  }

   input:hover {
    border: solid 1px @color;
  }

}

.map-tooltip.is-dark {

 src/assets/images/map-pages/buffer/1.png

 src/assets/images/map-pages/buffer/10.png

 src/assets/images/map-pages/buffer/15.png

 src/assets/images/map-pages/buffer/2.png

 src/assets/images/map-pages/buffer/3.png

 src/assets/images/map-pages/buffer/5.png

 src/assets/images/map-pages/buffer/7.png

 src/assets/images/map-pages/buffer/8.png

 src/assets/images/map-pages/buffer/area_query_drag.png

 src/assets/images/map-pages/buffer/img.png

 src/components/base-page/enterprise-emergency/DisposalEvent.vue

@@ -48,7 +48,7 @@
                <el-col class="info-text" :span="18">{{ form.eventDesc }}</el-col>
              </el-row>
              <el-row>
                <el-col class="info-label"  span="6">附件：</el-col>
                <el-col class="info-label"  :span="6">附件：</el-col>
                <el-col class="info-text" :span="18"><a class="link-btn" href="javascript:">附件</a>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <a class="link-btn" href="javascript:">附件</a>
@@ -94,8 +94,12 @@
    </div>
    </el-scrollbar>
    <div class="event-management">
      <el-input></el-input>
      <el-button type="primary" size="mini" @click="ToManagement">开始分析</el-button>
      <el-button type="primary" size="mini" @click="mapClick">地图点选</el-button>
      <el-select v-model="radius.value" placeholder="请选择" size="mini" class="map-input">
        <el-option v-for="(item,index) in radius.options" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="eventHanding">开始分析</el-button>
      <el-button type="primary" size="mini" @click="toManagement">事件管理</el-button>
      <!--            <el-button size="mini">关闭</el-button>-->
    </div>
  </div>
@@ -105,12 +109,17 @@
<script>

import eventBus from '../../../eventBus'

import BufferQuery from '@components/base-page/enterprise-emergency/event-handling/BufferQuery'
export default {
  name: 'DisposalEvent',
  data () {
    return {
      bufferQuery: null,
      activeNames: ['1'],
      radius: {
        value: 0.1,
        options: [{ label: '500m', value: 0.5 }, { label: '1km', value: 1 }, { label: '2km', value: 2 }, { label: '5km', value: 5 }, { label: '10km', value: 10 }]
      },
      form: {
        nameOfEvent: '***************事件',
        eventLocation: '**********装置',
@@ -170,9 +179,13 @@
      ]
    }
  },
  mounted () {
    this.bufferQuery = new BufferQuery(window.map, window.L)
    this.bufferQuery.initLayers()
  },
  methods: {
    // 开始分析
    ToManagement () {
    eventHanding () {
      eventBus.$emit('event-handling', {})
    },
    handleClickView (item) {
@@ -183,6 +196,23 @@
    },
    handleChange (val) {
      console.log(val)
    },
    mapClick () {
      window.map.once('click', (e) => {
        console.log(e)
        // [-75.343, 39.984];

        // var circle = turf.circle(center, radius, options)
        // eslint-disable-next-line no-unreachable
        this.bufferQuery.radius = this.radius.value
        const lat = 32.26431369781494
        const lng = 118.79283785820007
        // this.bufferQuery.bufferQuery(e.latlng.lng, e.latlng.lat)
        this.bufferQuery.bufferQuery(lng, lat)
      })
    },
    toManagement () {

    }
  }
}

 src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js

New file
@@ -0,0 +1,553 @@
/**
 * 缓冲区查询类
 */
import * as turf from '@turf/turf'
import $ from 'jquery'
// import MapConfig from '@/map/conf/MapConfig'
import zrbhq from '@assets/images/map-pages/buffer/1.png'
import yjdw from '@assets/images/map-pages/buffer/2.png'
import gadw from '@assets/images/map-pages/buffer/3.png'
import yy from '@assets/images/map-pages/buffer/5.png'
import st from '@assets/images/map-pages/buffer/7.png'
import yjzy from '@assets/images/map-pages/buffer/8.png'
import xfdw from '@assets/images/map-pages/buffer/10.png'
import mgmb from '@assets/images/map-pages/buffer/15.png'
const MapConfig = {

}
MapConfig.mapConfig = {}
MapConfig.mapConfig.bufferQueryUrlProd = 'http://10.238.235.179:6240/geoserver/sewer/ows'
class BufferQuery {
  constructor (map, L) {
    this.map = map
    this.L = L
    this.bufferLayer = null
    this.resultLayer = null
    this.resultMarkers = []
    this.queryResults = []
    this.radius = 10
    this.currentRadius = null
    this.bufferResultLayerArr = []
    this.bufferQueryLayerArr = []
    this.vueRef = null
    this.currentX = null
    this.currentY = null
  }

  setVueRef (vueRef) {
    this.vueRef = vueRef
  }

  initLayers () {
    // if (this.bufferLayer != null) {
    this.bufferLayer = this.L.layerGroup().addTo(this.map)
    // }
    // if (this.resultLayer != null) {
    this.resultLayer = this.L.layerGroup().addTo(this.map)
    // }
  }

  drawCricleBuffer (center, radius) {
    const circleLocation = new this.L.LatLng(center[1], center[0])
    const circleOptions = {
      color: '#3effed',
      fillColor: 'white',
      fillOpacity: 0,
      extendedIconClass: 'extend-icon' /* there are 3 classes defined in the marker-extend.css file */
    }
    const circle = new this.L.CircleEditor(circleLocation, radius * 1000, circleOptions)
    return circle
  }

  getCircleCoord (center, radius) {
    const options = { steps: 10, units: 'kilometers' }
    const circle = turf.circle(center, radius, options)
    const coordinate = turf.getCoords(circle)
    return coordinate
  }

  QueryInfoByArcgis (url, dis, geom, extent, layers) {
    const that = this
    const data = {
      f: 'json',
      tolerance: dis,
      returnGeometry: 'true',
      returnFieldName: 'false',
      returnUnformattedValues: 'false',
      imageDisplay: '920,622,96',
      geometry: geom,
      geometryType: 'esriGeometryPolygon',
      sr: '4326',
      mapExtent: extent,
      layers: layers
    }
    this.vueRef.datas = []
    this.vueRef.allDatas = []
    this.vueRef.currentX = this.currentX
    this.vueRef.currentY = this.currentY
    this.vueRef.total = 0
    this.vueRef.total1 = 0
    this.vueRef.countsMap = {}
    this._postQuery(url, data, function (res) {
      console.log(res)
      if (res.results != null && res.results.length !== 0) {
        that.drawGraphic(res.results)
        for (let i = 0; i < res.results.length; i++) {
          const ndata = {
            layerId: res.results[i].layerId,
            layerName: res.results[i].layerName,
            displayFieldName: res.results[i].displayFieldName,
            value: res.results[i].value,
            attributes: res.results[i].attributes,
            geometryType: res.results[i].geometryType,
            geometry: res.results[i].geometry,
            feature: {
              attributes: res.results[i].attributes,
              geometry: res.results[i].geometry
            }
          }
          that.queryResults.push(ndata)
        }
        // fillBufferResult(nrltData,currShowBufferLayerIndex);//填充面板
        that.fillBufferResultPanel(that.queryResults)
      }
    })
  }

  QueryInfoByGeoserver (url, dis, geom, extent, layers) {
    const that = this
    const data = {
      service: 'WFS',
      version: '1.1.0',
      request: 'GetFeature',
      // typeName: 'sewer:manhole',
      typeName: 'sewer:pipeline',
      maxFeatures: 50,
      outputFormat: 'application/json',
      srsname: 'EPSG:4326',
      // filter: '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">\n' +
      //   '<Intersects><PropertyName>geom</PropertyName><gml:Polygon srsName="EPSG:4326">\n' +
      //   '<gml:outerBoundaryIs>\n' +
      //   '    <gml:LinearRing>\n' +
      // eslint-disable-next-line no-irregular-whitespace
      //   '　<gml:coordinates>' + geom + '</gml:coordinates>\n' +
      //   '</gml:LinearRing>\n' +
      //   '</gml:outerBoundaryIs>\n' +
      //   '</gml:Polygon></Intersects></Filter>\n'

      /* filter: '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">\n' +
        '\n' +
        '<Intersects> \n' +
        '\n' +
        '<PropertyName>geom</PropertyName>\n' +
        '\n' +
        '<gml:MultiPolygon srsName="EPSG:4490"> \n' +
        '\n' +
        '<gml:polygonMember> \n' +
        '\n' +
        '<gml:Polygon> \n' +
        '\n' +
        '<gml:outerBoundaryIs> \n' +
        '\n' +
        '<gml:LinearRing>\n' +
        '\n' +
        '<gml:coordinates xmlns:gml="http://www.opengis.net/gml" decimal="." cs="," ts="">\n' +
        '\n' +
        geom +
        '\n' +
        '</gml:coordinates>  \n' +
        '\n' +
        '</gml:LinearRing>  \n' +
        '\n' +
        '</gml:outerBoundaryIs>  \n' +
        '\n' +
        '</gml:Polygon>  \n' +
        '\n' +
        '</gml:polygonMember>  \n' +
        '\n' +
        '</gml:MultiPolygon>\n' +
        '\n' +
        '</Intersects>\n' +
        '\n' +
        '</Filter>' */

      cql_filter: 'INTERSECTS(geom,POLYGON((' + geom + ')))'
    }
    // this.vueRef.datas = []
    // this.vueRef.allDatas = []
    // this.vueRef.currentX = this.currentX
    // this.vueRef.currentY = this.currentY
    // this.vueRef.total = 0
    // this.vueRef.total1 = 0
    // this.vueRef.countsMap = {}
    this._postQuery(url, data, function (res) {
      console.log(res)
      if (res.results != null && res.results.length !== 0) {
        that.drawGraphic(res.results)
        for (let i = 0; i < res.results.length; i++) {
          const ndata = {
            layerId: res.results[i].layerId,
            layerName: res.results[i].layerName,
            displayFieldName: res.results[i].displayFieldName,
            value: res.results[i].value,
            attributes: res.results[i].attributes,
            geometryType: res.results[i].geometryType,
            geometry: res.results[i].geometry,
            feature: {
              attributes: res.results[i].attributes,
              geometry: res.results[i].geometry
            }
          }
          that.queryResults.push(ndata)
        }
        // fillBufferResult(nrltData,currShowBufferLayerIndex);//填充面板
        that.fillBufferResultPanel(that.queryResults)
      }
    })
  }

  fillBufferResultPanel (datas) {
    // let resArray = []
    const that = this
    const layerIds = []
    for (let j = 0; j < this.bufferQueryLayerArr.length; j++) {
      if (this.bufferQueryLayerArr[j].ifSelected) {
        layerIds.push(this.bufferQueryLayerArr[j].layerid)
      }
    }
    const ndatas = []
    for (let i = 0; i < datas.length; i++) {
      if (datas[i].layerId === layerIds[0]) {
        const newObj = {}
        newObj.id = i
        if (Number(datas[i].layerId) === 10) {
          newObj.objid = datas[i].feature.attributes.id
          newObj.name = datas[i].feature.attributes.name
        } else {
          newObj.objid = datas[i].feature.attributes.OBJECTID
          newObj.name = datas[i].value
        }

        newObj.distance = this.countDisByLatLng(datas[i].feature.geometry.x, datas[i].feature.geometry.y, this.currentX, this.currentY)
        newObj.x = datas[i].feature.geometry.x
        newObj.y = datas[i].feature.geometry.y
        switch (datas[i].layerId) {
          case 5:
          case 3:
          case 8:
            newObj.addr = datas[i].feature.attributes['单位地址'] === 'Null' ? '' : datas[i].feature.attributes['单位地址']
            newObj.person = datas[i].feature.attributes['联系人'] === 'Null' ? '' : datas[i].feature.attributes['联系人']
            newObj.tel = datas[i].feature.attributes['联系电话'] === 'Null' ? '' : datas[i].feature.attributes['联系电话']
            break
          case 10:
            newObj.addr = datas[i].feature.attributes.name
            newObj.person = datas[i].feature.attributes.contact
            newObj.tel = datas[i].feature.attributes.officeTel
            break
          case 9:
          case 15:
            newObj.addr = ''
            newObj.person = datas[i].feature.attributes['负责人'] === 'Null' ? '' : datas[i].feature.attributes['负责人']
            newObj.tel = datas[i].feature.attributes['联系电话'] === 'Null' ? '' : datas[i].feature.attributes['联系电话']
            break
          case 7:
            newObj.addr = ''
            newObj.person = ''
            newObj.tel = datas[i].feature.attributes['联系方式'] === 'Null' ? '' : datas[i].feature.attributes['联系方式']
            break
          case 1:
            newObj.addr = ''
            newObj.person = datas[i].feature.attributes['负责人'] === 'Null' ? '' : datas[i].feature.attributes['负责人']
            newObj.tel = datas[i].feature.attributes['联系电话'] === 'Null' ? '' : datas[i].feature.attributes['联系电话']
            break
        }
        ndatas.push(newObj)
      }
    }
    this.vueRef.datas = ndatas
    this.vueRef.allDatas = datas
    this.vueRef.currentX = this.currentX
    this.vueRef.currentY = this.currentY
    this.vueRef.total = datas.length
    this.vueRef.total1 = ndatas.length
    const Map = {}
    for (let k = 0; k < layerIds.length; k++) {
      const id = layerIds[k]
      Map[id] = that.getCountByLayerID(datas, layerIds[k])
    }
    this.vueRef.countsMap = Map
  }

  /**
     *根据两点经纬度计算距离
     * @param lng1
     * @param lat1
     * @param lng2
     * @param lat2
     */
  countDisByLatLng (lng1, lat1, lng2, lat2) {
    const a = this.Rad(lat1) - this.Rad(lat2)
    const b = this.Rad(lng1) - this.Rad(lng2)
    let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
            Math.cos(this.Rad(lat1)) * Math.cos(this.Rad(lat2)) * Math.pow(Math.sin(b / 2), 2)))
    s = s * 6378137.0
    s = Math.round(s * 10000) / 10000000
    return s.toFixed(3)
  }

  Rad (d) {
    return d * Math.PI / 180.0
  }

  /**
     * 根据图层id 获取 各个图层查询结果的数量
     * @param arrs
     * @param id
     */
  getCountByLayerID (arrs, id) {
    let count = 0
    for (let i = 0; i < arrs.length; i++) {
      if (arrs[i].layerId === id) {
        count++
      }
    }
    return count
  }

  _postQuery (url, data, cb) {
    $.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      data: data,
      timeout: 600000,
      async: true,
      success: function (datas) {
        cb(datas)
      },
      error: function (e) {
        console.log('返回的错误信息：', e)
        return null
      }
    })
  }

  drawGraphic (data) {
    for (let i = 0; i < data.length; i++) {
      const pt = [data[i].geometry.y, data[i].geometry.x]
      const iconUrl = this.getIconUrl(data[i].layerId)
      const icon = new this.L.Icon({ iconUrl: iconUrl, iconSize: [20, 20], iconAnchor: [10, 10] })
      const marker = this.L.marker(pt, {
        icon: icon,
        attributes: data[i]
      })
      this.markerBindPopup(marker)
      this.resultMarkers.push(marker)
      this.resultLayer.addLayer(marker)
    }
  }

  markerBindPopup (maker) {
    const name = maker.options.attributes.value
    const layerId = maker.options.attributes.layerId
    let addr = ''
    let person = ''
    let tel = ''
    const distance = this.countDisByLatLng(maker.options.attributes.geometry.x, maker.options.attributes.geometry.y, this.currentX, this.currentY)
    switch (layerId) {
      case 5:
      case 3:
      case 8:
        addr = maker.options.attributes.attributes['单位地址'] === 'Null' ? '' : maker.options.attributes.attributes['单位地址']
        person = maker.options.attributes.attributes['联系人'] === 'Null' ? '' : maker.options.attributes.attributes['联系人']
        tel = maker.options.attributes.attributes['联系电话'] === 'Null' ? '' : maker.options.attributes.attributes['联系电话']
        break
      case 10:
        addr = maker.options.attributes.attributes.name
        person = maker.options.attributes.attributes.contact
        tel = maker.options.attributes.attributes.officeTel
        break
      case 9:
      case 15:
        addr = ''
        person = maker.options.attributes.attributes['负责人'] === 'Null' ? '' : maker.options.attributes.attributes['负责人']
        tel = maker.options.attributes.attributes['联系电话'] === 'Null' ? '' : maker.options.attributes.attributes['联系电话']
        break
      case 7:
        addr = ''
        person = ''
        tel = maker.options.attributes.attributes['联系方式'] === 'Null' ? '' : maker.options.attributes.attributes['联系方式']
        break
      case 1:
        addr = ''
        person = maker.options.attributes.attributes['负责人'] === 'Null' ? '' : maker.options.attributes.attributes['负责人']
        tel = maker.options.attributes.attributes['联系电话'] === 'Null' ? '' : maker.options.attributes.attributes['联系电话']
        break
    }

    const html = '<div style="width: 306px; height: 156px" class="aroundPanel">' +
                   '<div class="header">周边环境</div>' +
                   '<table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0"  class="editform edit-pf bg1 pd1" style="color: #deebf9;line-height: 26px;">\n' +
            '      <tr>\n' +
            '        <td width="10%" align="right" valign="top" class="zt05">名称：</td>\n' +
            '        <td width="19%" align="left" valign="top" class="zt05" id="name">' + name + '</td>\n' +
            '      </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05">地址：</td>\n' +
            '        <td align="left" valign="top" class="zt05" id="addr">' + addr + '</td>\n' +
            '      </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05">负责人：</td>\n' +
            '        <td align="left" valign="top" class="zt05" id="person">' + person + '</td>\n' +
            '      </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05">联系电话：</td>\n' +
            '        <td align="left" valign="top" class="zt05" id="tel">' + tel + '</td>\n' +
            '    </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05 line-dotted">距离（公里）：</td>\n' +
            '        <td align="left" valign="top" class="zt05 line-dotted" id="distance">' + distance + '</td>\n' +
            '      </tr>\n' +
            '    </table>' +
                   '</div>'
    maker.bindPopup(html, {
      closeButton: false,
      offset: this.L.point(0, -0.5)
    })
  }

  getIconUrl (index) {
    let url = null
    switch (index) {
      case 1:
        url = zrbhq
        break
      case 2:
        url = yjdw
        break
      case 3:
        url = gadw
        break
      case 5:
        url = yy
        break
      case 7:
        url = st
        break
      case 8:
        url = yjzy
        break
      case 10:
        url = xfdw
        break
      case 15:
        url = mgmb
        break
    }
    return url
  }

  bufferQuery (currEventX, currEventY) {
    this.currentX = currEventX
    this.currentY = currEventY
    const that = this
    if (this.bufferLayer) {
      this.bufferLayer.clearLayers()
    }
    this.map.setView(this.L.latLng(currEventY, currEventX), 11)
    const circle = this.drawCricleBuffer([currEventX, currEventY], this.radius)
    this.bufferLayer.addLayer(circle)
    circle.on('edit', function () {
      that.doBuffer(circle.getRadius() / 1000, that.bufferQueryLayerArr, that.currentX, that.currentY)
      that.currentRadius = circle.getRadius() / 1000
    })
    this.doBuffer(this.radius, this.bufferQueryLayerArr, currEventX, currEventY)
  }

  doBuffer (radius, bufferQueryLayerArr, currEventX, currEventY) {
    this.bufferResultLayerArr = this.getBufferLayerArr(bufferQueryLayerArr)
    this.bufferSearch(this.bufferResultLayerArr, radius, currEventX, currEventY)
  }

  getBufferLayerArr (arr) {
    var resultArr = []
    for (let i = 0; i < arr.length; i++) {
      const obj = arr[i]
      if (obj.ifSelected === 1) {
        resultArr.push(obj.layerid)
      }
    }
    return resultArr
  }

  bufferSearch (layerIDs, radius, currEventX, currEventY) {
    const that = this
    that.resultMarker = []
    that.queryResults = []
    if (that.resultLayer) {
      that.resultLayer.clearLayers()
    }
    // if (layerIDs == null || layerIDs.length === 0) {
    //   return null
    // }
    const xfIndex = layerIDs.indexOf(10)
    if (xfIndex > -1) {
    }
    let queryLayerStr = 'all:'
    for (let j = 0; j < layerIDs.length; j++) {
      if (layerIDs[j] !== 10) {
        queryLayerStr += layerIDs[j] + ','
      }
    }
    queryLayerStr = queryLayerStr.substring(0, queryLayerStr.length - 1)
    const coord = that.getCircleCoord([currEventX, currEventY], radius)
    const str = that.sgisTransfromToArcGeom(coord)
    debugger
    const bounds = this.map.getBounds()
    const extent = bounds.toBBoxString()
    debugger
    if (window.vm.$nodeEnv === 'production') {
      that.QueryInfoByGeoserver(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
      // that.QueryInfoByArcgis(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
    } else {
      that.QueryInfoByGeoserver(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
      // that.QueryInfoByArcgis(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
    }
  }

  sgisTransfromToArcGeom (coord) {
    const geomStr = ''
    let str = ''
    for (let i = 0; i < coord[0].length; i++) {
      str += coord[0][i][0] + ' ' + coord[0][i][1] + ','
    }
    str = str.substring(0, str.length - 1)
    const endStr = geomStr + str
    return endStr
  }

  /* sgisTransfromToArcGeom (coord) {
    const geomStr = '{"rings":[['
    let str = ''
    for (let i = 0; i < coord[0].length; i++) {
      str += '[' + coord[0][i][0] + ',' + coord[0][i][1] + '],'
    }
    str = str.substring(0, str.length - 1)
    const endStr = geomStr + str + ']]}'
    return endStr
  } */
  setBufferQueryLayerArr (bufferQueryLayerArr) {
    this.bufferQueryLayerArr = bufferQueryLayerArr
  }

  cleanLayer () {
    if (this.bufferLayer) {
      this.bufferLayer.clearLayers()
    }
    if (this.resultLayer) {
      this.resultLayer.clearLayers()
    }
    this.map.closePopup()
  }
}
export default BufferQuery

 src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue

@@ -15,7 +15,7 @@
      <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
      <el-button type="primary" size="mini" @click="toggleShowResInfo">周边资源</el-button>
      <el-button type="primary" size="mini" @click="toggleShowReportDoc">生成报告</el-button>
      <el-button type="primary" size="mini" @click="close">返回</el-button>
<!--      <el-button type="primary" size="mini" @click="close">返回</el-button>-->
    </div>

    <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
@@ -75,6 +75,10 @@
}
</script>

<style scoped>
<style lang="less" scoped>
.footer{
  text-align: right;
  margin: 15px;
}

</style>

 src/components/plugin/L.CircleEditor.js

New file
@@ -0,0 +1,216 @@
/*
 * L.CircleEditor is an extension of L.Circle, just to add the edition part (remember, radius in meters).
 */
'use strict'
/* eslint-disable */
import dragPng  from '../../assets/images/map-pages/buffer/area_query_drag.png'
// const init = (L) => {
    L.CircleEditor = L.Circle.extend ({

        options: {
            icon: new L.Icon({
                iconUrl: dragPng,
                iconSize: [30,30],
                //className: 'leaflet-div-icon leaflet-editing-icon'
            }),
            extendedIconClass : 'extend-icon'
        },

        onAdd: function (map) {
            L.Path.prototype.onAdd.call(this, map);

            this.addHooks();
        },

        onRemove: function (map) {
            this.removeHooks();

            L.Path.prototype.onRemove.call(this, map);
        },


        addHooks: function () {
            if (this._map) {
                if (!this._markerGroup) {
                    this._initMarkers();
                }
                this._map.addLayer(this._markerGroup);
            }
        },

        removeHooks: function () {
            if (this._map) {
                this._map.removeLayer(this._markerGroup);
                delete this._markerGroup;
                delete this._markers;
            }
        },

        updateMarkers: function () {
            this._markerGroup.clearLayers();
            this._initMarkers();
        },

        _initMarkers: function () {
            this._markerGroup = new L.LayerGroup();
            this._markers = [];

            var markerCenter = this._createMarker(this._latlng, 0, true);
            this._markers.push(markerCenter);

            var circleBounds = this.getBounds(),
                center = circleBounds.getCenter(),
                neCoord = circleBounds.getNorthEast(),
                northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);
            var markerNorthCenter = this._createMarker(northCenterCoord, 1);
            this._markers.push(markerNorthCenter);

            //xinzeng label
            var newNeCoord =  Number(neCoord.lng.toFixed(6))+Number(0.006030);
            var labelCenterCood = new L.LatLng(center.lat,newNeCoord, true);
            var markerLabel = this._createLableMaker(labelCenterCood,2,this.getRadius())
            this._markers.push(markerLabel);
        },

        _createLableMaker:function(latlng,index,radius){
            var html = parseInt(radius/1000) + "Km";
            var icon = new L.DivIcon({
                html:html,
                iconSize: new L.Point(30, 15),
                className: 'customLabel'
            });
            var marker = new L.Marker(latlng, {
                // draggable: true,
                icon: icon
            });
            marker._origLatLng = latlng;
            marker._index = index;
            // marker._isCenter = isCenter;
            this._markerGroup.addLayer(marker);
            return marker;
        },

        _createMarker: function (latlng, index, isCenter) {
            if(isCenter){
                var marker = new L.Marker(latlng, {
                    draggable: true,
                    icon: this.options.icon,
                    opacity    :0
                });
            }else{
                var marker = new L.Marker(latlng, {
                    draggable: true,
                    icon: this.options.icon
                });
            }


            if (isCenter === undefined) {
                isCenter = false;
            }
            //console.log("this is center point: " + isCenter);

            marker._origLatLng = latlng;
            marker._index = index;
            marker._isCenter = isCenter;

            if (isCenter) {
                //marker.on('drag', this._onCenterMove, this)
                //     .on('dragend', this._onCenterMoveEnd, this);
            } else {
                marker.on('drag', this._onMarkerDrag, this);
                marker.on('dragend', this._fireEdit, this)
                    .on('mouseover', this._onMouseOver, this)
                    .on('mouseout', this._onMouseOut, this);
            }


            this._markerGroup.addLayer(marker);

            return marker;
        },
        _onMouseOver: function (e) {
            var target = e.target,
                icon = target._icon,
                classValues = icon.getAttribute("class");
            //icon.setAttribute("class", "extend-icon " + classValues);
            icon.setAttribute("class", this.options.extendedIconClass + " " + classValues);
        },
        _onMouseOut: function (e) {
            var target = e.target,
                icon = target._icon,
                classValues = icon.getAttribute("class");
            //icon.setAttribute("class", classValues.replace("extend-icon", ""));
            icon.setAttribute("class", classValues.replace(this.options.extendedIconClass, ""));
        },

        _fireEdit: function () {
            this.fire('edit');
        },

        _onCenterMove: function (e) {
            var marker = e.target;
            //console.log("center move - START");

            L.Util.extend(marker._origLatLng, marker._latlng);

            var mm = this._markers[1];
            mm.setOpacity(0.1);

            this.redraw();

            //console.log("END");
        },

        _onCenterMoveEnd: function (e) {
            var marker = e.target;

            //now resetting the side point
            var circleBounds = this.getBounds(),
                center = circleBounds.getCenter(),
                neCoord = circleBounds.getNorthEast(),
                northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);

            var mm = this._markers[1];
            mm.setLatLng(northCenterCoord);
            mm.setOpacity(1);

            this.fire('centerchange');
        },

        _onMarkerDrag: function (e) {
            var marker = e.target;
            //console.log("marker drag - START");
            var center = this._markers[0].getLatLng();
            var axis = marker._latlng;

            var distance = center.distanceTo(axis);

            this.setRadius(distance);

            this.redraw();
            //console.log("END");

            this.fire('radiuschange');


            this._markerGroup.removeLayer(this._markers[2]);
            this._markers.pop();

            var circleBounds = this.getBounds(),
                center = circleBounds.getCenter(),
                neCoord = circleBounds.getNorthEast();
            var newNeCoord =  Number(neCoord.lng.toFixed(6))+Number(0.011010);
            var labelCenterCood1 = new L.LatLng(center.lat,newNeCoord, true);
            var markerLabel1 = this._createLableMaker(labelCenterCood1,2,this.getRadius())
            this._markers.push(markerLabel1);
        },

        centerchange: function() {},
        radiuschange: function() {}
    });
// }
//
// export default {
//     init
// }