Merge remote-tracking branch 'origin/master'

wangqi

2021-03-09 675f53b52844d1d368d71d966620ba698f24bcde

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/panel/RightSearchPanel.vue

 package.json

@@ -18,6 +18,7 @@
    "dayjs": "^1.9.6",
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "fullscreen": "^1.1.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",
    "leaflet": "^1.6.0",
@@ -26,10 +27,11 @@
    "lodash": "^4.17.10",
    "nprogress": "^0.2.0",
    "rbush": "^3.0.1",
    "screenfull": "^3.3.2",
    "screenfull": "^3.3.3",
    "vue": "^2.6.11",
    "vue-count-to": "^1.0.13",
    "vue-focus": "^2.1.0",
    "vue-fullscreen": "^2.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

 src/Sgis.js

@@ -10,6 +10,8 @@
import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
import CanvasMarkers from '@components/plugin/CanvasMarkers'
import FullScreen from '@components/plugin/FullScreen'

let map = null
const L = window.L
const initMap = (div) => {
@@ -26,6 +28,8 @@
  DashFlow.DashFlow(L) // 流动线图
  CanvasMarkers.init(L)// 画布图层
  // Leaflet扩展代码
  // 全屏
  FullScreen.init(L)

  map = L.map(div, MapConfig.mapOptions)


 src/components/LayerController/modules/LcBaseMap.vue

@@ -16,6 +16,7 @@
  data () {
    return {
      isShow: true,
      currentBaseMapCode: 'tianditu_img',
      basemapList: []
    }
  },
@@ -34,7 +35,14 @@
      const code = itm.code
      this.basemapList.forEach((item) => {
        if (item.code === code) {
          console.log(this.currentBaseMapCode)
          if (this.currentBaseMapCode == null || this.currentBaseMapCode !== code) {
            this.currentBaseMapCode = code
          this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, true)
          } else {
            this.basemapHelper.showBasemap(item.code, item.conf.annotationCheck, false)
          }

          this.basemapHelper.getBasemapList().forEach((item) => {
            item.layer.bringToBack()
          })

 src/components/helpers/BasemapHelper.js

@@ -11,6 +11,7 @@
    this.basemapList = []
    this.basemapMap = new Map()
    this.basemapLayerGroup = this.L.layerGroup().addTo(options.map)
    this.currentBaseMapCode = null
  }

    /**
@@ -58,6 +59,8 @@
      this.basemapLayerGroup.addLayer(basemap.layer)
      if (showAnnotation) {
        this.basemapLayerGroup.addLayer(basemap.annotation)
      } else {
        this.basemapLayerGroup.removeLayer(basemap.annotation)
      }
    }


 src/components/panel/LegendPanel.vue

@@ -4,7 +4,7 @@
      <i class="el-icon-more-outline"></i>
      <span>图例</span>
    </div>
    <transition name="fade">
    <`transition` name="fade">
      <div class="legend-content" v-show="legendControl">
        <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index">
          <p>{{ item.title }}</p>
@@ -258,8 +258,8 @@
  }

  .fade-leave-active {
    transform-origin: right;
    animation: bounce-in 1s reverse;
    //transform-origin: right;
    //animation: bounce-in 1s reverse;
    transform-origin: right bottom;
    animation: bounce-in .5s reverse;
  }

 src/components/panel/MenuTopic.vue

@@ -11,7 +11,7 @@
            {{ topicSelectAll.name }}</el-checkbox-button>

        <el-checkbox-group :indeterminate="isIndeterminate" v-show="isShow" v-model="topicCheckedList" size="medium" @change="checkedGroupSpecialChange">
          <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item.name" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
          <el-checkbox-button class="menu-special-item" v-for="item in topicList" :label="item" :key="item.id" :checked="item.checked" @change="checkedSpecialChange(item)">
            <div style="height: 1rem;width: 1rem;display: inline-flex;">     <img :src="item.icon" ></div>
            {{item.name}}</el-checkbox-button>
        </el-checkbox-group>
@@ -53,7 +53,7 @@
      this.$store.commit('setTopic', this.topicCheckedList)
    },
    checkedSpecialChangeAll (val) {
      this.topicCheckedList = val.check ? this.topicList.map(item => item.name) : []
      this.topicCheckedList = val.check ? this.topicList.map(item => item) : []
      this.isIndeterminate = false
      this.$store.commit('setTopic', this.topicCheckedList)
    },

 src/components/panel/RightSearchPanel.vue

@@ -44,7 +44,7 @@
      topicList: TopicList,
      topicCheckedList: [],
      isPanelVisible: false,
      gcComp: SewersSearch,
      gcComp: 'sewersSearch',

      gdVisible: true,
      hbVisible: false,
@@ -56,21 +56,10 @@
      isCollapse: false
    }
  },
  computed: {},
  watch: {
    '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
      this.topicCheckedList = newVal
      this.topicMenu = []
      this.topicList.forEach((item) => {
        this.topicCheckedList.forEach((itm) => {
          if (item.name === itm) {
            // item.checked = tr
            this.topicMenu.push(item)
          }
        })
      })
  computed: {
    topicMenu () {
      console.log(this.$store.state.map.topic.topicCheckedList)
      return this.$store.state.map.topic.topicCheckedList
    }
  },
  methods: {
@@ -85,7 +74,6 @@
    },
    toggleMonitorPanel () {
      this.isCollapse = !this.isCollapse
      console.log(11)
      // const el = $('.btn-stretch')
      // const el2 = $('.panel-fold-btn')
      // const el = document.getElementsByClassName('.btn-stretch')

 src/components/panel/ToolBoxPanel.vue

@@ -1,11 +1,25 @@
<template>
  <div class="lefttop-toolbox-panel">
    <ul>
      <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"
          :class="{'active':activeTools[i]}">
        <img :src="item"/>
      </li>
    </ul>
    <div class="init-choose" @click="changeSelect()">
      <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
    </div>
    <!--    <transition name="fade">-->
    <!--      <ul v-show='selectGroup'>-->
    <!--        <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"><img :src="item"/></li>-->
    <!--      </ul>-->
    <!--    </transition>-->
    <div class="el-select-dropdown" v-show='selectGroup'>
      <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total">
        <transition name="fade">
          <img :src="item.title" :title="item.alt"/>
        </transition>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'>
            <span @click='toggleActive(ite)'>{{ ite.headings }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

@@ -20,35 +34,98 @@
export default {
  name: 'ToolBoxPanel',
  components: {},
  props: ['map'],
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      activeTools: {},
      imgList: {
        circle: circle,
        square: square,
        polygon: polygon,
        legend: legend,
        location: location,
        fullscreen: fullscreen
      imgLists: [
        {
          title: circle,
          alt: '标绘',
          items: [
            { headings: '线标绘' },
            { headings: '面标绘' },
            { headings: '箭头标绘' }
          ]
      },
        {
          title: square,
          alt: '标注',
          items: [
            { headings: '点标注' },
            { headings: '线标注' },
            { headings: '面标注' },
            { headings: '文字标注' },
            { headings: '图标标注' }
          ]
        },
        {
          title: legend,
          alt: '测量',
          items: [
            { headings: '距离测量' },
            { headings: '面积测量' }
          ]
        },
        {
          title: location,
          alt: '切换底图',
          items: [
            { headings: '影像图' },
            { headings: '矢量图' },
            { headings: '地形图' }
          ]
        },
        {
          title: polygon,
          alt: '管网',
          items: [
            { headings: '连通性分析' },
            { headings: '爆管分析' },
            { headings: '流向分析' },
            { headings: '横断面分析' }
          ]
        },
        {
          title: fullscreen,
          alt: '下载',
          items: [
            { headings: '全屏' },
            { headings: 'A4横向' },
            { headings: 'A4纵向' }
          ]
        }
      ],
      form: {
        regionType: '',
        enterprise: ''
      }
      },
      selectGroup: false,
      selectGroupOne: false
    }
  },
  methods: {
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleCommand (command) {
      console.log(command)
      if (command === '全屏') {
        this.map.toggleFullscreen()
      }
    },
    toggleActive (k) {
      this.total++
      this.activeTools[k] = !this.activeTools[k]
      if (k === 'fullscreen') {
        this.map.toggleFullscreen()
      }
    },
    loadData () {

@@ -58,6 +135,7 @@
    this.loadData()
  },
  created () {

  }
}
</script>
@@ -67,31 +145,74 @@
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1000;
  width: 175px;
  z-index: 999;
  display: flex;

  .init-choose {
    //margin: 15px 5px;
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
  height: 35px;
  line-height: 30px;
  background: #07325b;
  border: 1px solid #5EF2FF;
  border-radius: 3px;
  text-align: center;
    border-radius: 50%;
    border: 2px skyblue solid;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 5px;
  .el-select-dropdown {
    position: absolute;
    z-index: 1;
    width: 250px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: #305B62;
    border-radius: 15px;
    padding-inline: 10px;
    padding-inline-start: 30px;

    li {
      float: left;
      width: 23px;
      height: 23px;
      margin: 0 1px;
      border: 1px solid #073C4F;
    .el-dropdow {
      width: 20%;
    }

    @keyframes bounce-in {
      0% {
        transform: scale(0);
        opacity: 0.3;
      }
      100% {
        transform: scale(1);
        opacity: 1;
    }
  }

  .active {
    border: 1px solid #5EF2FF;
    .fade-enter-active {
      transform-origin: left center;
      animation: bounce-in .2s;
  }

    .fade-leave-active {
      transform-origin: left;
      animation: bounce-in .2s reverse;
    }
  }

  .el-select-dropdown:last-child {
    margin-left: 10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

}
</style>

 src/components/panel/topicSearch/DischargeSearch.vue

@@ -91,7 +91,7 @@
  components: {},
  data () {
    return {
      isPanelVisible: false,
      isPanelVisible: true,
      total: 0,
      list: [],
      form: {

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,9 +1,5 @@
<template>
  <div class="sewers-search">
    <div class="el-message-box__header panel_header">
      <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
      </div>
    </div>
    <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
      <div class="box__content" v-if="gdVisible">
        <div>

 src/components/plugin/FullScreen.js

New file
@@ -0,0 +1,174 @@
/* eslint-disable */

const init = (L) => {

  (function (factory) {

    if (typeof define === 'function' && define.amd) {

      // AMD

      define(['leaflet'], factory)

    } else if (typeof module !== 'undefined') {

      // Node/CommonJS

      // module.exports = factory(require('leaflet'))

      factory(L)

    } else {

      // Browser globals

      if (typeof window.L === 'undefined') {

        throw new Error('Leaflet must be loaded first')

      }

      factory(window.L)

    }

  }(function (L) {

    L.Control.Fullscreen = L.Control.extend({

      options: {

        position: 'topleft',

        title: {

          false: 'View Fullscreen',

          true: 'Exit Fullscreen'

        }

      },



      onAdd: function (map) {

        var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control')



        this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container)

        this.link.href = '#'



        this._map = map

        this._map.on('fullscreenchange', this._toggleTitle, this)

        this._toggleTitle()



        L.DomEvent.on(this.link, 'click', this._click, this)



        return container

      },



      _click: function (e) {

        L.DomEvent.stopPropagation(e)

        L.DomEvent.preventDefault(e)

        this._map.toggleFullscreen(this.options)

      },



      _toggleTitle: function () {

        this.link.title = this.options.title[this._map.isFullscreen()]

      }

    })



    L.Map.include({

      isFullscreen: function () {

        return this._isFullscreen || false

      },



      toggleFullscreen: function (options) {

        var container = this.getContainer()

        if (this.isFullscreen()) {

          if (options && options.pseudoFullscreen) {

            this._disablePseudoFullscreen(container)

          } else if (document.exitFullscreen) {

            document.exitFullscreen()

          } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen()

          } else if (document.webkitCancelFullScreen) {

            document.webkitCancelFullScreen()

          } else if (document.msExitFullscreen) {

            document.msExitFullscreen()

          } else {

            this._disablePseudoFullscreen(container)

          }

        } else {

          if (options && options.pseudoFullscreen) {

            this._enablePseudoFullscreen(container)

          } else if (container.requestFullscreen) {

            container.requestFullscreen()

          } else if (container.mozRequestFullScreen) {

            container.mozRequestFullScreen()

          } else if (container.webkitRequestFullscreen) {

            container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)

          } else if (container.msRequestFullscreen) {

            container.msRequestFullscreen()

          } else {

            this._enablePseudoFullscreen(container)

          }

        }

      },



      _enablePseudoFullscreen: function (container) {

        L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen')

        this._setFullscreen(true)

        this.fire('fullscreenchange')

      },



      _disablePseudoFullscreen: function (container) {

        L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen')

        this._setFullscreen(false)

        this.fire('fullscreenchange')

      },



      _setFullscreen: function (fullscreen) {

        this._isFullscreen = fullscreen

        var container = this.getContainer()

        if (fullscreen) {

          L.DomUtil.addClass(container, 'leaflet-fullscreen-on')

        } else {

          L.DomUtil.removeClass(container, 'leaflet-fullscreen-on')

        }

        this.invalidateSize()

      },



      _onFullscreenChange: function (e) {

        var fullscreenElement =

          document.fullscreenElement ||

          document.mozFullScreenElement ||

          document.webkitFullscreenElement ||

          document.msFullscreenElement



        if (fullscreenElement === this.getContainer() && !this._isFullscreen) {

          this._setFullscreen(true)

          this.fire('fullscreenchange')

        } else if (fullscreenElement !== this.getContainer() && this._isFullscreen) {

          this._setFullscreen(false)

          this.fire('fullscreenchange')

        }

      }

    })



    L.Map.mergeOptions({

      fullscreenControl: false

    })



    L.Map.addInitHook(function () {

      if (this.options.fullscreenControl) {

        this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl)

        this.addControl(this.fullscreenControl)

      }



      var fullscreenchange



      if ('onfullscreenchange' in document) {

        fullscreenchange = 'fullscreenchange'

      } else if ('onmozfullscreenchange' in document) {

        fullscreenchange = 'mozfullscreenchange'

      } else if ('onwebkitfullscreenchange' in document) {

        fullscreenchange = 'webkitfullscreenchange'

      } else if ('onmsfullscreenchange' in document) {

        fullscreenchange = 'MSFullscreenChange'

      }



      if (fullscreenchange) {

        var onFullscreenChange = L.bind(this._onFullscreenChange, this)



        this.whenReady(function () {

          L.DomEvent.on(document, fullscreenchange, onFullscreenChange)

        })



        this.on('unload', function () {

          L.DomEvent.off(document, fullscreenchange, onFullscreenChange)

        })

      }

    })



    L.control.fullscreen = function (options) {

      return new L.Control.Fullscreen(options)

    }

  }))

}

export default {

  init

}


 src/components/plugin/Leaflet.GridLayer.FadeOut.js

New file
@@ -0,0 +1,76 @@
/* eslint-disable */
// Adds a fade-out animation to grid layers when they're removed from the map

(function () {
  var gridProto = L.GridLayer.prototype
  var onRemoveProto = gridProto.onRemove
  var onAddProto = gridProto.onAdd
  var fadeDuration = 200

  L.GridLayer.include({

    onAdd: function (map) {
      if (this._fadeOutTime) {
        var now = performance.now() || (+new Date())
        L.Util.cancelAnimFrame(this._fadeOutFrame)
        this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now
        L.Util.requestAnimFrame(this._fadeIn, this)
      } else {
        onAddProto.call(this, map)
      }
    },

    onRemove: function (map) {
      if (this._fadeOutTime) {
        // We're removing this *again* quickly after removing and re-adding
        var now = performance.now() || (+new Date())

        this._fadeOutTime = now + fadeDuration - this._fadeOutTime + now
      }
      this._fadeOutTime = (performance.now() || (+new Date())) + fadeDuration * 2
      this._fadeOutMap = this._map

      L.Util.requestAnimFrame(this._fadeOut, this)
    },

    _fadeOut: function () {
      if (!this._fadeOutTime || !this._container) { return }

      var now = performance.now() || (+new Date())

      var opacity = Math.min((this._fadeOutTime - now) / fadeDuration, 1)
      // console.log('fadeout:', opacity);
      if (opacity < 0) {
        this._fadeOutTime = false

        onRemoveProto.call(this, this._fadeOutMap)

        return
      }

      L.DomUtil.setOpacity(this._container, opacity * this.options.opacity)

      this._fadeOutFrame = L.Util.requestAnimFrame(this._fadeOut, this)
    },

    // Only runs when the gridlayer is quickly re-added while it's being faded out
    _fadeIn: function _fadeIn () {
      if (!this._fadeOutTime || !this._container) { return }

      var now = performance.now() || (+new Date())

      var opacity = (now - this._fadeOutTime) / fadeDuration
      // console.log('fadein:', opacity);

      if (opacity > 1) {
        this._fadeOutTime = false
        return
      }

      L.DomUtil.setOpacity(this._container, opacity * this.options.opacity)

      L.Util.requestAnimFrame(this._fadeIn, this)
    }

  })
})()

 src/conf/MapConfig.js

@@ -34,6 +34,7 @@
const mapConfig = {
  IsLoadMapByToken: true, // 是否通过token加载地图
  showBaseMapType: 1, // 1显示天地图，2显示arcgis地图
  // defaultBasemapCode: 'tianditu_img', // 默认显示 地图类型
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: { LayerSewersLine: [LayerSewersLine], layerSewersPoint: LayerSewersPoint } // 污雨水图层配置

 src/conf/TDT.js

@@ -4,7 +4,7 @@
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770
const intranet = [
  {
    code: 'sinopec_img',
    code: 'tianditu_img',
    name: '中石化天地图影像',
    icon_actived: '/assets/images/map-pages/icon/img.png',
    icon_deactived: '/assets/images/map-pages/icon/img.png',
@@ -40,7 +40,7 @@
    }
  },
  {
    code: 'sinopec_vec',
    code: 'tianditu_vec',
    name: '中石化天地图矢量',
    icon_actived: '/assets/images/map-pages/icon/road.png',
    icon_deactived: '/assets/images/map-pages/icon/road.png',

 src/conf/Topic.js

@@ -4,54 +4,70 @@
  icon: '/assets/images/menu/special.png'
}

export const TopicComp = {
  dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'),
  envProtectSearch: () => import('@components/panel/topicSearch/EnvProtectSearch'),
  sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue')
}

export const TopicList = [{
  name: '污染源',
  id: 1,
  check: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'dischargeSearch'
}, {
  name: '废水监测',
  id: 2,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'envProtectSearch'
}, {
  name: '废气监测',
  id: 3,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'dischargeSearch'
}, {
  name: '固废管理',
  id: 4,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'envProtectSearch'
}, {
  name: '环境风险',
  id: 5,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'dischargeSearch'
}, {
  name: '土壤及地下水',
  id: 6,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'dischargeSearch'
}, {
  name: '污雨水管网',
  id: 7,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'envProtectSearch'
}, {
  name: '预警报警',
  id: 8,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'sewersSearch'
}, {
  name: '指标统计',
  id: 9,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'envProtectSearch'
}, {
  name: '应急地图',
  id: 10,
  checked: false,
  icon: '/assets/images/menu/special.png'
  icon: '/assets/images/menu/special.png',
  comp: 'sewersSearch'
}]

 src/main.js

@@ -12,6 +12,7 @@
import L from 'leaflet'
import 'leaflet.markercluster'
import 'leaflet-canvas-markers'
import './components/plugin/Leaflet.GridLayer.FadeOut'
Vue.config.productionTip = false

Vue.use(ElementUI)

 src/views/MapTemplate.vue

@@ -10,7 +10,7 @@
        </sgis-layer-controller>
        <monitor-panel></monitor-panel>
<!--        <top-enterprise-panel></top-enterprise-panel>-->
        <tool-box-panel></tool-box-panel>
    <tool-box-panel :map="this.map"></tool-box-panel>
      <menu-special></menu-special>
      <legend-panel></legend-panel>
    </div>
@@ -153,4 +153,4 @@
            border-top: 1px solid #0661AE;
        }
    }
</style>>
</style>