Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

zhangshuaibao

2021-04-15 c169ee517f0620f86689ea08db5e3e24f01446bc

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 .eslintrc.js

@@ -13,7 +13,9 @@
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'new-cap': 'off'
    //'camelcase': 'error'
  },
  overrides: [
    {

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

@@ -48,7 +48,6 @@
}

.el-dialog {
  height: 500px;
  border: 0.00521rem solid @color;
  box-shadow: 0 0 0.03rem @color;
  background: rgba(0, 16, 30, 0.8);
@@ -222,33 +221,6 @@
  margin-left: 10px;
}

.el-scrollbar__wrap {

}

.el-scrollbar__wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.el-scrollbar__wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: none;
}

.el-scrollbar__wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: none;
  border-radius: 10px;
}

#el-scrollbar__wrap::-webkit-scrollbar-button { /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
  background: #74D334;
}

/*******************操作按钮点击选中整体样式******************************/
.el-button {

@@ -366,13 +338,6 @@
/*************** PublicTable 表格样式。*********************************/

.el-table {
  border: 1px solid #396d83 !important;

  .el-table__body-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: none;
  }
  .cell {
    padding: 0 3px !important;
    i {
@@ -382,6 +347,13 @@
      line-height: 12px;
    }
  }
}
.el-table--border{
  border-bottom: 1px solid #ddd;
}

.el-dialog--center .el-dialog__body{
  padding: 0.04rem;
}

.el-table--border th {
@@ -431,6 +403,40 @@
  padding: 0 !important;
  font-size: 0.01rem !important;
}
.el-scrollbar__wrap {

}
/*****滚动条***/
.scroll::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar,
.el-scrollbar__wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

.scroll::-webkit-scrollbar-thumb,
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #000;
}
.scroll::-webkit-scrollbar-track,
.el-table__body-wrapper::-webkit-scrollbar-track,
.el-scrollbar__wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: @background-color;
  border-radius: 10px;
}




/*********解决横向滚动**/



/***********************************************动画效果************/
.transition {

 src/components/LayerController/logic/PipeLineAnimal.js

@@ -1,28 +1,78 @@

/**
 *  管线动画控制逻辑
 */
const layerPipeLines = require('../../../conf/layers/LayerPipeLines').LayerPipeLines
const LayerPipeLines = require('../../../conf/layers/LayerPipeLines').LayerPipeLines
const STYLES = require('../../../conf/Constants').STYLES

module.exports = function () {
  this.init = (layer, L) => {
    console.log('sssssss')
    const layers = layerPipeLines.layers
  this.init = () => {
    const layers = LayerPipeLines.layers
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]
      const code = config.code
      // window.layerFactory.show(config)
      const layer = window.layerFactory.layers[code]
      layer.setStyle({
        FILL: true,
        WEIGHT: 3,
        FILL_COLOR: '#73b2ff',
        COLOR: '#73b2ff',
        FILL_OPACITY: 0.2,
        OPACITY: 1,
        DASH_ARRAY: '4,4',
        DASH_SPPED: -5,
        ICON_SIZE: [10, 10]
      })
      console.log(layer)
      if (layer) {
        if (layer.eachLayer) {
          layer.eachLayer(function (layer) {
            layer.setStyle({
              fill: STYLES.FILL,
              weight: STYLES.WEIGHT,
              fillColor: STYLES.FILL_COLOR,
              color: STYLES.COLOR,
              fillOpacity: STYLES.FILL_OPACITY,
              opacity: STYLES.OPACITY,
              dashArray: STYLES.DASH_ARRAY,
              dashSpeed: STYLES.DASH_SPPED
            })
          })
          // 重新添加到地图上，动画才有效果
          window.map.removeLayer(layer)
          window.layerFactory.show(config)
        }
      }
    }
    /* window.$layer.iframe({
      content: {
        content: publicBounced,
        parent: this,
        data: {
          info: this.info,
          fn: () => {
            alert(1)
          }
        }
      },
      area: ['901px', '101px'],
      title: '这是一个标题这是一个标题这是一个标题这是一个标题',
      maxmin: true,
      shade: false,
      shadeClose: false,
      scrollbar: false,
      resize: true,
      btn: ['a', 'b'],
      cancel: () => {
        alert(2110)
      }
    }) */
  }

  this.destory = () => {
    console.log('destory!!!')
    const layers = LayerPipeLines.layers
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]
      const code = config.code
      // window.layerFactory.show(config)
      const layer = window.layerFactory.layers[code]
      if (layer) {
        if (layer.eachLayer) {
          layer.eachLayer(function (layer) {
            layer.resetStyle()
          })
        }
      }
    }
  }
}

 src/components/LayerController/service/EventLayerService.js

New file
@@ -0,0 +1,25 @@
import { logicMapper } from '../../../conf/Constants'

class EventLayerService {
  constructor (config) {
    this.L = window.L
    this.map = window.map
    this.config = config
  }

  init () {
    // 引入 关联的js，在constant.js中根据config配置的id得到处理js
    const id = this.config.code
    const checked = this.config.checked
    const file = logicMapper[id]
    if (!file) {
      console.log('找不到逻辑处理js!!!' + id)
    } else {
      var BusiLayer = require('../logic/' + file)
      var busiLayer = new BusiLayer()
      checked ? busiLayer.init(this.config) : busiLayer.destory(this.config)
    }
  }
}

export default EventLayerService

 src/components/LayerController/service/LayerFactory.js

@@ -1,6 +1,7 @@
import WfsLayerService from './WfsLayerService'
import BusiLayerService from './BusiLayerService'
import WmsLayerService from './WmsLayerService'
import EventLayerService from './EventLayerService'

class LayerFactory {
  constructor (options) {
@@ -27,9 +28,9 @@
  }

  /**
   * 控制显示的级别
   * @param layerConfig
   */
     * 控制显示的级别
     * @param layerConfig
     */
  initEvent (layerConfig) {
    this.map.on('zoomend ', (e) => this.toggleZoomByLayer(layerConfig))
  }
@@ -67,30 +68,35 @@
    var wfs = config.wfs
    var wms = config.wms
    var url = config.url
    var checked = config.checked
    // 判断是否已经加载过，加载过就 直接得到对象调用 显示函数
    var layer = this.layers[code]
    if (!layer) {
      layer = this.L.featureGroup({}).addTo(this.map)
    // todo if是不是太多了
    if (checked) {
      if ((wfs || wms || url)) {
        if (layer) {
          this.show(code)
        } else {
          layer = this.L.featureGroup({}).addTo(this.map)
          this.layers[code] = layer
        }
      }
      // 2. 判断类型
      if (wfs) {
        // 3. 实例化具体service
        var wfsLayerService = new WfsLayerService(config)
        wfsLayerService.init(layer)
        this.setZIndex(layer)
      }
      if (wms) {
      } else if (wms) {
        var wmsLayerService = new WmsLayerService(config)
        wmsLayerService.init(layer)
      }
      // 请求业务数据接口
      if (url) {
      } else if (url) {
        var busiLayerService = new BusiLayerService(config)
        busiLayerService.init(layer)
      }
      layer ? (this.layers[code] = layer) : console.log('LayerFactory：newLayer is null，please check !!!')
    } else {
      this.show(code)
    }
    var eventLayerService = new EventLayerService(config)
    eventLayerService.init()
  }

  show (config) {
@@ -106,6 +112,7 @@
  hide (config) {
    var layer = this.layers[config.code]
    layer && this.map.removeLayer(layer)
    this.load(config)
  }

  toggle (code) {
@@ -130,25 +137,25 @@
      })
    }
    /* for (var k in this.layers) {
      var layerGroup = this.layers[k]
      layerGroup.eachLayer(function (layer) {
        console.log(layer)
        console.log(layer.getAttribution())
      })
      var layers = layerGroup.getLayers()
      if (layers) {
        for (var m = 0; m < layers.length; m++) {
          var layer = layers[m]
          console.log(layer)
          console.log(layer.getLayerId(val.id))
          /!* var feature = layer.feature
          if (feature.id === layerId) {
            this.map.flyToBounds(bound)
            return layer
          } *!/
        }
      }
    } */
          var layerGroup = this.layers[k]
          layerGroup.eachLayer(function (layer) {
            console.log(layer)
            console.log(layer.getAttribution())
          })
          var layers = layerGroup.getLayers()
          if (layers) {
            for (var m = 0; m < layers.length; m++) {
              var layer = layers[m]
              console.log(layer)
              console.log(layer.getLayerId(val.id))
              /!* var feature = layer.feature
              if (feature.id === layerId) {
                this.map.flyToBounds(bound)
                return layer
              } *!/
            }
          }
        } */
    return null
  }

@@ -164,11 +171,11 @@
  }

  /**
   * todo 这里无效，貌似是因为geojson加载到地图也是个layergroup
   *
   * 设置index,线在最下面，点在上面
   * @param layerGroup 图层组
   */
     * todo 这里无效，貌似是因为geojson加载到地图也是个layergroup
     *
     * 设置index,线在最下面，点在上面
     * @param layerGroup 图层组
     */
  setZIndex (layer) {
    if (Array.isArray(layer)) {
      for (var i = 0; i < layer.length; i++) {

 src/components/layer/index.js

New file
@@ -0,0 +1,9 @@
import layer from './src/layer.js'

// 为组件提供 install 安装方法，供按需引入
layer.install = function (Vue) {
  Vue.component('layer', layer)
}

// 默认导出组件
export default layer

 src/components/layer/src/helper/helper.js

New file
@@ -0,0 +1,160 @@
export default class helper {
  /**
   * 点击mask关闭弹窗
   * @param  {[type]} event [description]
   * @param  {[type]} layer [description]
   * @return {[type]}       [description]
   */
  static clickMaskCloseAll (event, layer, id) {
    const mask = event.target.getAttribute('class')
    if (mask && (mask.indexOf('notify-mask') > -1 || mask.indexOf('icon-remove') > -1)) {
      layer.close(id)
    }
  }

  /**
   * 默认的yes按钮操作
   * @param  {[type]} event [description]
   * @return {[type]}       [description]
   */
  static btnyes (event, options, formValue) {
    if (typeof (options.yes) === 'function') {
      if (options.type === 6) {
        options.yes(formValue, options.id)
      } else {
        options.yes(options.id)
      }
    } else {
      options.layer.close(options.id)
    }
  }

  /**
   * 默认取消按钮操作
   * @param  {[type]} event [description]
   * @return {[type]}       [description]
   */
  static async btncancel (event, options) {
    if (typeof (options.cancel) === 'function') {
      await options.cancel(options.id)
    } else {
      options.layer.close(options.id)
    }
  }

  /**
   * 隐藏滚动条
   */
  static hiddenScrollBar (options) {
    if (!options.scrollbar) {
      const htmlDom = document.getElementsByTagName('html')[0]
      const htmlClass = [...htmlDom.classList]
      if (htmlClass.indexOf('vl-html-scrollbar-hidden') > -1) {
        return
      }

      const htmlWidth = htmlDom.offsetWidth
      // 隐藏滚动条
      // htmlDom.style.overflowY = "hidden";
      htmlDom.classList.add('vl-html-scrollbar-hidden')
      const htmlWidthH = htmlDom.offsetWidth
      htmlDom.style.marginRight = htmlWidthH - htmlWidth + 'px'
    }
  }

  /**
   * 鼠标拖动弹窗
   * @param  {[type]} event   [description]
   * @param  {[type]} options [description]
   * @return {[type]}         [description]
   */
  static moveStart (event, options) {
    options.offset = options.offset === 'auto' ? [] : options.offset
    if (options.offset.length === 0) {
      options.offset.push(document.getElementById(options.id + '').offsetLeft)
      options.offset.push(document.getElementById(options.id + '').offsetTop)
      options.offset.push(0)
    }
    if (options.offset.length === 2) {
      options.offset.push(0)
    }
    options.offset[0] = (document.getElementById(options.id + '').offsetLeft)
    options.offset[1] = (document.getElementById(options.id + '').offsetTop)
  }

  /**
   * 拖动弹窗
   * @param  {[type]} event  [description]
   * @param  {[type]} ismove [description]
   * @return {[type]}        [description]
   */
  static move (event, options, ismove) {
    if (ismove) {
      const o = document.getElementById(options.id + '_alert')
      o.style.left = options.offset[0] + (event.clientX - this.moveLeft) + 'px'
      o.style.top = options.offset[1] + (event.clientY - this.moveTop) + 'px'
    }
  }

  /**
   * [sleep description]
   * @param  {[type]} ms [description]
   * @return {[type]}    [description]
   */
  static sleep (ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  /**
   *  深度拷贝
   * @param {*} source
   */
  static deepClone (target) {
    const copyedObjs = [] // 此数组解决了循环引用和相同引用的问题，它存放已经递归到的目标对象
    function _deepCopy (target) {
      if ((typeof target !== 'object') || !target) {
        return target
      }
      for (let i = 0; i < copyedObjs.length; i++) {
        if (copyedObjs[i].target === target) {
          return copyedObjs[i].copyTarget
        }
      }
      let obj = {}
      if (Array.isArray(target)) {
        obj = [] // 处理target是数组的情况
      }
      copyedObjs.push({
        target: target,
        copyTarget: obj
      })
      Object.keys(target).forEach(key => {
        if (obj[key]) {
          return
        }
        obj[key] = _deepCopy(target[key])
      })
      return obj
    }
    return _deepCopy(target)
  }

  /**
   *  取偶数
   * @param {*} str
   */
  static evenNumber (str = '') {
    const result = str.match(/\d+/g)
    if (result) {
      const n = parseInt(result[0])
      if (n % 2 === 0) {
        return str
      } else {
        str = str.replace(n, n + 1)
        return str
      }
    } else {
      return str
    }
  }
}

 src/components/layer/src/iframe.vue

New file
@@ -0,0 +1,126 @@
<template>
  <div class="public-bounced map-background" v-drag>
    <div class="public-bounced-title panel-title" ref="publicBounced">
      <span>{{options.title}}</span>
      <i class="el-icon-circle-close" @click="close"></i>
    </div>
    <div class="public-bounced-content" :id="id">
      {{options.content}}
    </div>
  </div>
</template>

<script>
import helper from './helper/helper.js'

export default {
  data () {
    return {
      cls: {
        'vl-notify-iframe': true
      },
      id: 'vlip' + new Date().getTime()
    }
  },
  props: {
    options: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    contentStyle () {
      return {
        height: 'calc(100% - 50px)', // parseInt(this.options.area[1]) - 50 + "px",
        minHeight: '20px',
        overflow: 'auto'
      }
    }
  },
  async mounted () {
    this.getContent()
    helper.hiddenScrollBar(this.options)
  },
  methods: {
    close () {

    },
    async getContent () {
      await helper.sleep(10)
      const propsData = helper.deepClone(this.options.content.data) || {}
      propsData.layerid = this.options.id
      propsData.lydata = this.options.content.data
      propsData.lyoption = this.options
      console.log(this.options.content.content)
      const instance = new this.options.content.content({
        // 具体参数信息，请参考vue源码
        parent: this.options.content.parent,
        propsData: propsData
      })
      instance.vm = instance.$mount()
      document.getElementById(this.id).appendChild(instance.vm.$el)
      this.options.layer.instancesVue[this.options.id].iframe = instance.vm
    },

    btnyes (event) {
      helper.btnyes(event, this.options)
    },
    btncancel (event) {
      helper.btncancel(event, this.options)
    }
  }
}
</script>

<style lang="less" scoped>
  .public-bounced {
    z-index: 2000;
    position: absolute;
    top: 35%;
    left: 20%;

  .public-bounced-title {
    cursor: move;
    height: 0.1rem;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

  span {
    color: #f4f7ff;
    margin: 0 15px;
    font-size: 14px;
  }

  i {
    color: #C0C4CC;
    margin: 0 15px;
    font-size: 22px;
    cursor: pointer;
  }

  i:hover {
    color: #00fff6;
  }
  }

  .public-bounced-content {
    padding: 0.1rem;
    display: flex;
  //align-items: center;
  //justify-content: space-around;

  .public-bounced-content-left {
  //width: 4.8rem;
  }

  .public-bounced-content-right {
  //width: 3rem;
    margin-left: 0.1rem;
  }
  }
  }
</style>

 src/components/layer/src/layer.js

New file
@@ -0,0 +1,195 @@
import layerVue from './layer.vue'
const Notification = function (Vue, globalOption = {
  msgtime: 1.5 // msg消失时间
}) {
  const NotificationConstructor = Vue.extend(layerVue)
  const self = {}
  const defOptions = {
    type: 0, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,5msg,6prompt
    title: '信息',
    content: '',
    area: 'auto',
    offset: 'auto',
    icon: -1,
    btn: '确定',
    time: 0,
    maxmin: false, // 最大最小化
    shade: true,
    yes: '',
    cancel: '',
    tips: [0, {}], // 支持上右下左四个方向，通过1-4进行方向设定,可以设定tips: [1, '#c00']
    tipsMore: false, // 是否允许多个tips
    shadeClose: true,
    scrollbar: true, // 是否允许浏览器出现滚动条:默认是允许
    resize: false // 是否允许拉伸，默认是不允许
  }
  self.instances = {}
  self.instancesVue = []
  self.iframeMinList = []
  let seed = 0

  /**
   * [function description]
   * @method function
   * @param  {[type]} options [description]
   * @return {[type]}         [description]
   */
  self.open = function (options) {
    options = mergeJson(options, defOptions)
    const id = `notification_${new Date().getTime()}_${seed++}`
    options.id = id
    options.layer = self
    const instance = new NotificationConstructor({
      data: options
    })
    if (options.type === 1) {
      options.content.content = Vue.extend(options.content.content)
    }
    instance.id = id
    instance.vm = instance.$mount()
    self.instances[id] = {
      inst: instance,
      type: options.type
    }
    document.body.appendChild(instance.vm.$el)
    self.instancesVue[id] = {
      mask: '',
      main: instance.vm,
      iframe: ''
    }
    return id
  }
  /**
   * [description]
   * @param  {[type]} options [description]
   * @return {[type]}         [description]
   */
  self.iframe = function (opt) {
    let option = {
      type: 1,
      content: opt.content,
      area: opt.area
    }
    option = mergeJson(option, opt)
    console.log(option)
    return self.open(option)
  }
  /**
   * 关闭一个弹窗
   * @param  {[type]} id [description]
   * @return {[type]}    [description]
   */
  self.close = function (id) {
    const oElm = document.getElementById(id)
    if (oElm) {
      document.body.removeChild(oElm)
      delete self.instances[id]
      self.instancesVue[id].main.$destroy()
      if (self.instancesVue[id].iframe !== '') {
        const minindex = parseInt(self.instancesVue[id].main.$el.getAttribute('minindex') || -2)
        if (minindex > -1) {
          self.iframeMinList[minindex] = -1
        }
        self.instancesVue[id].iframe.$destroy()
      }
      // 取消隐藏滚动条
      if (!self.instancesVue[id].main.scrollbar) {
        let scrollbarCount = 0
        for (const key in self.instancesVue) {
          if (!self.instancesVue[key].main.scrollbar) {
            scrollbarCount++
          }
        }
        if (scrollbarCount === 1) {
          const htmlDom = document.getElementsByTagName('html')[0]
          htmlDom.style.marginRight = 'auto'
          htmlDom.classList.remove('vl-html-scrollbar-hidden')
        }
      }
      // 控制遮罩,删除掉当前的遮罩
      if (self.instancesVue[id].main.shade) {
        const layerMask = document.getElementById(id + '_mask')
        const maskId = id + '_mask'
        document.body.removeChild(layerMask)
        if (self.instancesVue[maskId]) {
          self.instancesVue[maskId].mask.$destroy()
        }
      }
      delete self.instancesVue[id]
    } else {
      setTimeout(function () {
        const oElm = document.getElementById(id)
        if (oElm) {
          document.body.removeChild(oElm)
          delete self.instances[id]
          self.instancesVue[id].main.$destroy()
          if (self.instancesVue[id].iframe !== '') {
            self.instancesVue[id].iframe.$destroy()
          }
        }
      }, 200)
    }
  }
  /**
   * 关闭一个弹窗
   * @param  {[type]} id [description]
   * @return {[type]}    [description]
   */
  self.closeAll = function (type = -1) {
    const types = {
      page: 0,
      iframe: 1
    }
    if (type === -1) {
      for (const k in self.instances) {
        self.close(k)
      }
    } else {
      const targetType = types[type]
      for (const k in self.instances) {
        if (self.instances[k].type === targetType) {
          self.close(k)
        }
      }
    }
  }
  /**
   * 手动最大化
   */
  self.full = function (id = '') {
    document.querySelector('#' + id + ' .lv-icon-max').click()
  }
  /**
   * 手动最小化
   */
  self.min = function (id = '') {
    document.querySelector('#' + id + ' .lv-icon-mini').click()
  }
  /**
   * 手动最小化
   */
  self.restore = function (id = '') {
    document.querySelector('#' + id + ' .lv-icon-huanyuan').click()
  }

  /**
   * 合并json
   * @method mergeJson
   * @param  {[type]}  optons [description]
   * @param  {[type]}  def    [description]
   * @return {[type]}         [description]
   */
  function mergeJson (options, def) {
    for (const key in def) {
      if (options[key] === undefined) {
        options[key] = def[key]
      }
    }
    return options
  }

  return self
}

// module.exports = Notification;
export default Notification

 src/components/layer/src/layer.vue

New file
@@ -0,0 +1,46 @@
<template lang="html">
    <component :options="this.$data" :is="getActiveName"></component>
</template>

<script>
import pzpage from './page.vue'
import pziframe from './iframe.vue'

export default {
  data () {
    return {
      id: '',
      type: 0, // 0（alert默认）1（页面层）2（iframe层）3（loading）4（tips层）,5(msg),6(prompt)
      title: '信息',
      content: '',
      area: 'auto',
      offset: 'auto',
      icon: -1,
      btn: '确定',
      time: 0,
      shade: true,
      yes: '',
      cancel: ''
    }
  },
  computed: {
    getActiveName () {
      const comps = [
        'pzpage',
        'pziframe'
      ]
      return comps[this.$data.type]
    }
  },
  mounted () {},
  methods: {},
  watch: {},
  components: {
    pzpage,
    pziframe
  }
}
</script>

<style lang="less">
</style>

 src/components/layer/src/page.vue

New file
@@ -0,0 +1,73 @@
<template lang="html">
    <div class="public-bounced map-background" v-drag v-show="flag">
        <div class="public-bounced-title panel-title" ref="publicBounced">
            <span>{{options.title}}</span>
            <i class="el-icon-circle-close" @click="closePopup"></i>
        </div>
        <div class="public-bounced-content">
            {{options.content}}
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      moveLeft: 0, // 左移的距离
      moveTop: 0, // 上移的距离
      ismove: false
    }
  },
  props: {
    options: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {},
  mounted () { },
  methods: {
    close: function (event) {
      const mask = event.target.getAttribute('class')
      if (mask && mask.indexOf('notify-mask') > -1) {
        this.options.layer.close(this.options.id)
      }
    },
    moveStart: function (event) {
      this.options.offset = this.options.offset === 'auto' ? [] : this.options.offset
      if (this.options.offset.length === 0) {
        this.options.offset.push(document.getElementById(this.options.id + '_alert').offsetLeft)
        this.options.offset.push(document.getElementById(this.options.id + '_alert').offsetTop)
        this.options.offset.push(0)
      }
      if (this.options.offset.length === 2) {
        this.options.offset.push(0)
      }
      this.options.offset[0] = (document.getElementById(this.options.id + '_alert').offsetLeft)
      this.options.offset[1] = (document.getElementById(this.options.id + '_alert').offsetTop)
      this.moveLeft = event.clientX
      this.moveTop = event.clientY
      this.ismove = true
    },
    move: function (event) {
      if (this.ismove) {
        const o = document.getElementById(this.options.id + '_alert')
        o.style.left = this.options.offset[0] + (event.clientX - this.moveLeft) + 'px'
        o.style.top = this.options.offset[1] + (event.clientY - this.moveTop) + 'px'
      }
    },
    moveEnd: function () {
      this.ismove = false
    }
  },
  watch: {

  },
  components: {

  }
}
</script>

 src/components/panel/ToolBoxPanel.vue

@@ -2,13 +2,12 @@
  <div class="left-top-toolbox-panel">
    <div class="specific-tools">
      <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="工具" placement="left">
        <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"   @click.enter.native="changeSelectMouse">
        <div :class='["iconBtn",selectGroup === true  ? "active-button" : ""]' @click="changeSelectMouse" >
          <i class="icon iconfont icongongju"></i>
          <!--<span class="span-default">工具</span>-->
        </el-button>
        </div>
      </el-tooltip>
      <transition name="animationChange">
        <el-row v-show="selectGroup" class="specific-tools-group">
        <div v-show="selectGroup" class="specific-tools-group">
          <el-popover
              trigger="manual"
              placement="bottom"
@@ -18,13 +17,9 @@
              v-model="isShow[index]"
          >
            <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" @click.native="changeChoose(index)">
              <!-- <img :src="item.iconSelecd" alt="" v-if="active === index"/>
              <img :src="item.icon" alt="" v-else/> -->
              <i :class="'icon iconfont '+item.icon"></i>
            </el-button>
            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'">
              <!-- <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checkedItem" alt=""/>
              <img :src="itemT.icon" :title="itemT.title" alt="" v-else/> -->
              <i :class="'icon iconfont '+itemT.icon"></i>
            </el-button>
            <lc-base-map v-show="item.index==='2'"></lc-base-map>
@@ -32,7 +27,7 @@
          <!-- <el-button @click="changeSelect" class="special-button">
            <i class="el-icon-d-arrow-left"></i>
          </el-button> -->
        </el-row>
        </div>
      </transition>
    </div>
  </div>
@@ -437,6 +432,7 @@
      margin: 0 0.015rem;
      width: 0.2725rem;
      height: 0.2725rem;
       color:#fff;
      background: @background-color;
      vertical-align: middle !important;
       font-size: 20px;
@@ -487,9 +483,9 @@
      z-index: 1;

      .tools-panel-choose {
        border: none;
        box-shadow: 0 0 0.03rem @color-shadow;

        border: 0.00521rem solid #fff700;
        box-shadow: 0 0 0.03rem #fff700;
        color:#fff700;
        img {
          width: 22px;
          height: 22px;

 src/components/panel/topicSearch/SewersSearch.vue

@@ -36,13 +36,11 @@
        </div>
        <el-scrollbar style="height:380.44px;">
          <div class="environmental-risk-list" v-for="(item,index) in list" :key="index">
            <div @click="handleLocation(item)">
              <h3 class="B-TMD-table-list-title-y">
                {{ item.properties.pipename }}</h3>
              <!--<p v-for="itm in labelList" :key="itm.label">
                <span>{{ itm.label }}：</span>
                <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
              </p>-->
            <img class="state" :src="getImgSrc()" />
            <div>
              <h3 @click="handleLocation(item)">{{ item.properties.pipename }}</h3>
              <p>所属企业：<span>{{ item.properties.orgcode }}</span>
              <p>设施类型：<span>{{ item.properties.teetype }}</span></p>
            </div>
          </div>
        </el-scrollbar>
@@ -110,6 +108,10 @@
  },
  props: ['title'],
  methods: {
    getImgSrc () {
      const icon = this.form.dataType.icon
      return icon ? 'assets/images/map/' + icon : ''
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },

 src/components/table/components/IndexStatistics.vue

@@ -1,8 +1,8 @@
<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="指标统计" name="first">
            <el-table :data="tableData" >
                <el-table-column type="index" label="序号"></el-table-column>
            <el-table :data="tableData" :lock-scroll="true" class="scroll" >
                <el-table-column  type="index" label="序号"></el-table-column>
                <el-table-column prop="date" label="单位名称"></el-table-column>
                <el-table-column prop="province" label="工业取水量(m3)"></el-table-column>
                <el-table-column prop="province" label="外排废水量(m3)"></el-table-column>

 src/components/table/components/WasteWater.vue

@@ -1,6 +1,6 @@
<template>
   <div class="waste-water">
           <el-table class="tableBox" :data="tableData" @cell-click="handle">
           <el-table class="tableBox" :data="tableData" style="width: 100%" @cell-click="handle">
               <el-table-column width="30px" label="">
                 <template slot-scope="{row,$index}">
<!--                   <i class="el-icon-caret-right" v-if="$index ===1"></i>-->

 src/components/table/summarySheets.vue

@@ -142,8 +142,8 @@
      color:#fff;
    }
    .iconBtn.active-button{
      border-color:#00fff6 !important;
      color:#00fff6 !important;
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
    }
  }


 src/conf/Constants.js

@@ -4,7 +4,7 @@
  POLYGON: 'polygon'
}

export const PIPELINE_WFS = 'http://xearth.cn:8088/server/ogcserver/PipeLine2/wfs'
export const PIPELINE_WFS = 'http://xearth.cn:8088/server/ogcserver/PipeLine/wfs'

export const logicMapper = {
  wasteGasPfk: 'WasteGas.js',

 src/conf/LayerTopic.js

@@ -15,7 +15,7 @@
export const LayerTopic = {
  code: 'sewersTopic',
  name: '专题图层',
  checked: true,
  checked: false,
  isShow: true,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater, LayerPipeLines, LayerVideo, LayerArea]
}

 src/conf/Topic.js

@@ -60,7 +60,7 @@
  isShow: true,
  icon: 'iconguanxianxuncha',
  comp: ''
}, {
}/*, {
  name: '管道变更',
  id: 8,
  checked: false,
@@ -74,4 +74,4 @@
  isShow: true,
  icon: 'iconguanxianbiaozhu',
  comp: ''
}]
} */]

 src/conf/layers/LayerAirQuality.js

@@ -6,15 +6,14 @@
export const LayerAirQuality = {
  code: 'sewersAirQuality',
  name: '空气质量',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'airQualityStation',
      name: '监测站',
      sname: '监测站', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      checked: false, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司'
    }
  ]
}

 src/conf/layers/LayerArea.js

@@ -6,7 +6,7 @@
export const LayerArea = {
  code: 'sewersArea',
  name: '区域信息',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'sewersAreaGs',
@@ -19,14 +19,14 @@
      code: 'sewersAreaMt',
      name: '码头',
      sname: '码头',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
      code: 'sewersAreaZz',
      name: '装置区',
      sname: '装置区',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]

 src/conf/layers/LayerEnvRisk.js

@@ -6,31 +6,29 @@
export const LayerEnvRisk = {
  code: 'sewersEnvRisk',
  name: '环境风险',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'envRiskChart',
      name: '风险统计图',
      sname: '风险统计图', // 表名
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMaterial',
      name: '物资库',
      sname: '物资库',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMajor',
      name: '重大风险',
      sname: '重大风险',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10,
      color: 'red'
@@ -39,7 +37,7 @@
      code: 'envRiskFirst',
      name: '一级风险',
      sname: '一级风险',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10,
      color: 'sandybrown'
@@ -48,7 +46,7 @@
      code: 'envRiskSecond',
      name: '二级风险',
      sname: '二级风险',
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10,
      color: 'yellow'

 src/conf/layers/LayerFsss.js

@@ -54,7 +54,6 @@
      code: 'pipesegment',
      name: '流向',
      sname: 'ywslx',
      url: 'pipesegment',
      checked: false
    },
    {

 src/conf/layers/LayerPipeLines.js

@@ -10,14 +10,14 @@
export const LayerPipeLines = {
  code: 'sewersPipeLines',
  name: '管线',
  checked: true,
  checked: false,
  childLayer: [LayerFsss, LayerHbss],
  layers: [
    {
      code: 'rainline',
      name: '雨水线',
      sname: '雨水线',
      checked: true,
      checked: false,
      wfs: WFS_URL + '?TYPENAME=管网',
      minZoom: 10
    },
@@ -25,7 +25,7 @@
      code: 'accidentline',
      name: '事故水线',
      sname: '事故水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=事故水',
      minZoom: 10
    },
@@ -33,7 +33,7 @@
      code: 'oilline',
      name: '含油污水线',
      sname: '含油污水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=含油污水',
      minZoom: 10
    },
@@ -41,7 +41,7 @@
      code: 'saltline',
      name: '含盐污水线',
      sname: '含盐污水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=含盐污水',
      minZoom: 10
    },
@@ -49,7 +49,7 @@
      code: 'alkaliline',
      name: '含碱污水线',
      sname: '含碱污水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
    },
@@ -57,7 +57,7 @@
      code: 'lifeline',
      name: '生活污水',
      sname: '生活污水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=生活污水',
      minZoom: 10
    },
@@ -65,7 +65,7 @@
      code: 'purifyline',
      name: '净化水线',
      sname: '净化水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=净化水',
      minZoom: 10
    },
@@ -73,7 +73,7 @@
      code: 'loopline',
      name: '循环水线',
      sname: '循环水',
      checked: true, // 默认选中状态
      checked: false,
      wfs: WFS_URL + '?TYPENAME=循环水',
      minZoom: 10
    }

 src/conf/layers/LayerPollutionSources.js

@@ -5,13 +5,13 @@
export const LayerPollutionSources = {
  code: 'pollutionSources',
  name: '污染源',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'pollutionSourcesSczz',
      name: '生产装置',
      sname: '生产装置', // 表名
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    },
@@ -19,7 +19,7 @@
      code: 'pollutionSourcesZlss',
      name: '治理设施',
      sname: '治理设施', // 表名
      checked: true, // 默认选中状态
      checked: false, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
    }]

 src/conf/layers/LayerSoilGroundWater.js

@@ -6,47 +6,42 @@
export const LayerSoilGroundWater = {
  code: 'sewersSoilGroundWater',
  name: '土壤及地下水',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'soil',
      name: '土壤',
      sname: '土壤', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      checked: false, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
      code: 'groundWater',
      name: '地下水',
      sname: '地下水',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
      code: 'firstRiskBlock',
      name: '一级风险地块',
      sname: '一级风险地块',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区'
    },
    {
      code: 'secondRiskBlock',
      name: '二级风险地块',
      sname: '二级风险地块',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区'
    },
    {
      code: 'threeRiskBlock',
      name: '三级风险地块',
      sname: '三级风险地块',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      checked: false, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]
}

 src/conf/layers/LayerWasteGas.js

@@ -5,39 +5,35 @@
export const LayerWasteGas = {
  code: 'wasteGas',
  name: '废气',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'wasteGasPfk',
      name: '排放口',
      sname: '排放口', // 表名
      checked: true, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
      checked: false,
      url: 'http://www.baidu.com'
    },
    {
      code: 'wasteGasKrq',
      name: '可燃气',
      sname: '可燃气',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
      checked: false,
      url: ''
    },
    {
      code: 'wasteGasYhq',
      name: '有害气',
      sname: '有害气',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
      checked: false,
      url: ''
    },
    {
      code: 'wasteGasVocs',
      name: 'VOCs',
      sname: 'VOCs',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
      checked: false,
      url: ''
    }
  ]
}

 src/conf/layers/LayerWasteSolid.js

@@ -6,15 +6,14 @@
export const LayerWasteSolid = {
  code: 'wasteSolid',
  name: '固废',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'wasteSolidCcd',
      name: '贮存点',
      sname: '贮存点',
      checked: true, // 默认选中状态
      url: 'http://www.baidu2.com',
      minZoom: 10
      checked: false,
      url: 'http://www.baidu2.com'
    }
  ]
}

 src/conf/layers/LayerWasteWater.js

@@ -5,31 +5,28 @@
export const LayerWasteWater = {
  code: 'wasteWater',
  name: '废水',
  checked: true,
  checked: false,
  layers: [
    {
      code: 'wasteWaterPfk',
      name: '排放口',
      sname: '排放口', // 表名
      checked: true, // 默认选中状态
      url: 'http://www.baidu.com', // 请求业务数据接口
      minZoom: 10 // 在指定级别显示
      checked: false, // 默认选中状态
      url: 'http://www.baidu.com'
    },
    {
      code: 'wasteWaterJcd',
      name: '流量',
      sname: '流量',
      checked: true, // 默认选中状态
      url: 'http://www.baidu2.com',
      minZoom: 10
      checked: false, // 默认选中状态
      url: 'http://www.baidu2.com'
    },
    {
      code: 'wasteWaterfk',
      name: '液位',
      sname: '液位',
      checked: true, // 默认选中状态
      url: '',
      minZoom: 10
      checked: false, // 默认选中状态
      url: ''
    }
  ]
}

 src/main.js

@@ -18,6 +18,7 @@
import '@components/plugin/leaflet-measure-path/leaflet-measure-path.css'
import '@components/plugin/leaflet-measure-path/leaflet-measure-path'
import '@components/plugin/PathDrag'
import layer from './components/layer'
const appConfig = require('@/app.config')
Vue.config.productionTip = false

@@ -27,6 +28,7 @@
Vue.prototype.$config = appConfig
Vue.prototype.$echarts = echarts // 挂载echarts
window.Vue = Vue
window.$layer = layer(Vue)
// 注册指令7
// registerDirectives(Vue)