文件整合，重新分弹框

zhangshuaibao

2021-03-29 2a99c0727f88565eb2b8c0beeb609618413ff3b0

文件整合，重新分弹框

 src/Sgis.js

@@ -16,6 +16,7 @@
import './components/plugin/Editable' // 标绘操作
import './components/plugin/MagicMarker' // 动画Marker
import './assets/css/map/magic.min.css' // 动画Marker css
// import './assets/css/map/leaflet.magicMarker.css' // 动画marker
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css


 src/assets/css/map/leaflet.magicMarker.css

New file
@@ -0,0 +1,13 @@
.magicDiv{
    height: 0;
    width: 0;
}
.magicIcon{
    position:relative;
    top:-5px;
    left:-16px;
}
.leaflet-div-icon{
    background: transparent;
    border:none;
}

 src/assets/images/map-pages/basenav/Waste-water/fs_blue.png

 src/assets/images/map-pages/basenav/Waste-water/fs_bright_green.png

 src/assets/images/map-pages/basenav/Waste-water/fs_gray.png

 src/assets/images/map-pages/basenav/Waste-water/fs_green.png

 src/assets/images/map-pages/basenav/Waste-water/fs_green_xc.png

 src/assets/images/map-pages/basenav/Waste-water/fs_orange.png

 src/assets/images/map-pages/basenav/Waste-water/fs_red.png

 src/assets/images/map-pages/basenav/Waste-water/fs_yellow.png

 src/components/BaseNav/WasteWater/WasteWater.js

File was renamed from src/components/BaseNav/WasteWater.js
@@ -1,7 +1,7 @@
import { requestWasteWater } from '@/api/request'
// 展示图片
import defaultImg from '@components/BaseNav/magicMarker.png'
import Setting from '@components/BaseNav/voc.png'
import defaultImg from '@assets/images/map-pages/basenav/Waste-water/fs_green.png'
import Setting from '@assets/images/map-pages/basenav/Waste-water/fs_yellow.png'

// 底图业务展示点
class AddWasteWaterHelper {
@@ -19,7 +19,7 @@
  requestData () {
    requestWasteWater().then(res => {
      this.DrawTheWasteWaterContent(res.Result.DataInfo)
      console.log(res)
      // console.log(res)
    }).catch(err => {
      console.log(err)
    })
@@ -51,13 +51,13 @@
      const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
      // let url = Icon.options.iconUrl

      const marker = this.L.marker([positionX, positionY], { icon: Icon })
      const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })

      marker.bindPopup(() => {
        return this.WasteWaterPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 600,
        minWidth: 1000,
        closeButton: true,
        autoClose: false
      })
@@ -84,7 +84,7 @@
    }
  }

  // 固废点击进行的 内容的设置
  // 废水按钮点击进行的 内容的设置
  SetWasteWaterContent (config, containerPopup) {
    this.WasteWaterPopup = containerPopup
  }
@@ -127,7 +127,7 @@
    } : position
    // 插件 效果实现
    const pulsingIcon = this.L.icon.pulse({
      iconSize: [20, 20],
      iconSize: [20, 20], // 控制光圈大小
      color: differentColor,
      fillColor: ''
    })
@@ -156,7 +156,7 @@
    }, 1000)
  }

  // 清除 图层
  // 在执行下个前清除已存在图层
  pulseClear (pulseinterver) {
    clearInterval(pulseinterver)
    pulseinterver = null

 src/components/BaseNav/WasteWater/WasteWaterContent.vue

File was renamed from src/components/BaseNav/WasteWaterContent.vue
@@ -11,7 +11,7 @@

<script>

import WasteWaterTable from '@components/BaseNav/WasteWaterTable'
import WasteWaterTable from '@components/BaseNav/WasteWater/WasteWaterTable'

export default {
  name: 'WasteWaterContent',

 src/components/BaseNav/WasteWater/WasteWaterTable.vue

File was renamed from src/components/BaseNav/WasteWaterTable.vue
@@ -1,6 +1,6 @@
<template>
  <el-tabs>
    <el-tab-pane :label="displayContent.StoragePlaceName" name="">
    <el-tab-pane :label="displayContent.StoragePlaceName" name="" class="ShowTable">
      <el-table
          :data="tableData" :fit="true">
        <el-table-column

 src/components/BaseNav/WasteWater/directive.js

New file
@@ -0,0 +1,132 @@
import Vue from 'vue'

// 自定义元素实现弹框拖拽[重点]
Vue.directive('draw', {
  inserted: function (el, binding, vNode) {
    el.setAttribute('style', 'position: fixed; z-index: 9999')
  },
  bind: function (el, bindding, vNode) {
    el.setAttribute('draggable', true)
    let left, top, width, height
    el._dragstart = function (event) {
      event.stopPropagation()
      left = event.clientX - el.offsetLeft
      top = event.clientY - el.offsetTop
      width = el.offsetWidth
      height = el.offsetHeight
    }
    el._checkPosition = function () { // 防止被拖出边界
      const width = el.offsetWidth
      const height = el.offsetHeight
      let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
      left = Math.max(0, left)
      let top = Math.min(el.offsetTop, document.body.clientHeight - height)
      top = Math.max(0, top)
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
    }
    el._dragEnd = function (event) {
      event.stopPropagation()
      left = event.clientX - left
      top = event.clientY - top
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
      el._checkPosition()
    }
    el._documentAllowDraop = function (event) {
      event.preventDefault()
    }
    document.body.addEventListener('dragover', el._documentAllowDraop)
    el.addEventListener('dragstart', el._dragstart)
    el.addEventListener('dragend', el._dragEnd)
    window.addEventListener('resize', el._checkPosition)
  },

  unbind: function (el, bindding, vNode) {
    document.body.removeEventListener('dragover', el._documentAllowDraop)
    el.removeEventListener('dragstart', el._dragstart)
    el.removeEventListener('dragend', el._dragEnd)
    window.removeEventListener('resize', el._checkPosition)
    delete el._documentAllowDraop
    delete el._dragstart
    delete el._dragEnd
    delete el._checkPosition
  }
})

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      // 获取到的值带px 正则匹配替换
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/px/g, '')
        styT = +sty.top.replace(/px/g, '')
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
  bind (el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog')

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft

      document.onmousemove = function (e) {
        e.preventDefault() // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        dragDom.style.width = `${l}px`
      }

      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

 src/components/plugin/MagicMarker.js

@@ -1,4 +1,4 @@
const init = (L) => {
/* eslint-disable */
  (function (window) {
    console.log(window)
    const setOptions = function (obj, options) {
@@ -9,14 +9,15 @@
    }
    L.Icon.Magic = function (options) {
      let opts
    console.log(options)
      if (options.iconUrl) {
        opts = {
          html: "<div class='magicDiv'><div class='magictime " + options.magic + "'><img id='migic' src='" + options.iconUrl + "'/></div></div>"
          // className: 'magicDiv',
        html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'>' + options.html + '</div></div>'
        // className: 'magicDiv',L
        }
      } else {
        opts = {
          html: "<div class='magicDiv'><div class='magictime " + options.magic + "'>" + options.html + '</div></div>'
        html: '<div class=\'magicDiv\'><div class=\'magictime ' + options.magic + '\'><img id=\'migic\' src=\'' + options.icon.options.iconUrl + '\'/></div></div>'
          // className: 'magicDiv',
        }
      }
@@ -42,8 +43,3 @@
      return new L.Marker.Magic(latlng, options)
    }
  })(window)
}

export default {
  init
}

 src/conf/MapConfig.js

@@ -55,9 +55,27 @@
  }
}

/**
 *
 */
// const MagicMaker = {
//   Current: 'vanishIn',
//   ARRAY: [
//     'twisterInDown', 'twisterInUp', 'swap',
//     'puffIn', 'vanishIn',
//     'openDownLeftReturn', 'openDownRightReturn', 'openUpLeftReturn', 'openUpRightReturn',
//     'perspectiveDownReturn', 'perspectiveUpReturn', 'perspectiveLeftReturn', 'perspectiveRightReturn',
//     'slideDownReturn', 'slideUpReturn', 'slideLeftReturn', 'slideRightReturn',
//     'swashIn', 'foolishIn',
//     'tinRightIn', 'tinLeftIn', 'tinUpIn', 'tinDownIn',
//     'boingInUp',
//     'spaclInUp', 'spaceInRight', 'spaceInDown', 'spaceInLeft']
// }

export default {
  mapOptions,
  mapConfig,
  TokenConfig,
  BLUEMAP_HOST
  // MagicMaker
}

 src/img/fs_yellow.7fe82c5d.png

 src/views/MapTemplate.vue

@@ -38,11 +38,11 @@
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
import SolidContent from '@components/BaseNav/SolidContent'
import WasteWaterContent from '@components/BaseNav/WasteWaterContent'
import SolidContent from '@components/BaseNav/SolidWaste/SolidContent'
import WasteWaterContent from '@components/BaseNav/WasteWater/WasteWaterContent'
// 底图业务js逻辑
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater'
import AddSolidWasteHelper from '@components/BaseNav/SolidWaste/SolidWaste'
import AddWasteWaterHelper from '@components/BaseNav/WasteWater/WasteWater'

export default {
  name: 'MapTemplate',
@@ -63,6 +63,7 @@
  },
  data () {
    return {
      show: true,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -87,9 +88,11 @@
      AddSolidWaste.SetSolidWasteContent(this.config, this.$refs.SolidWastePopup)
    },
    ChangeWaterState () {
      if (this.show) {
      const AddWasteWater = new AddWasteWaterHelper({ map: this.map })
      AddWasteWater.requestData()
      AddWasteWater.SetWasteWaterContent(this.config, this.$refs.WasteWaterPopup)
      }
    },
    // isShowHidden () {
    //   this.isShowBtn = !this.isShowBtn
@@ -118,7 +121,8 @@
      this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
      this.vectorLayerHelper.initVectorLayers(this.config)

      this.ChangeState()
      // this.ChangeState()
      // this.ChangeWaterState()

      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
@@ -211,5 +215,16 @@
  .leaflet-custom-icon {
    background: white;
  }

  .leaflet-marker-icon {
    background: none;
  }

  #migic {
    width: 48px;
    height: 48px;
    margin: -18px -20px;
    z-index: 999;
  }
}
</style>