Merge remote-tracking branch 'origin/master'

YANGDL

2021-03-09 d7dd4a54b16e97e8e60bf0ea28762c3952093a8b

Merge remote-tracking branch 'origin/master'

 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.7.1",
@@ -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/assets/css/map/map-elem-ui.less

@@ -51,9 +51,9 @@


  }
  location-btn{

  }
  //location-btn{
  //
  //}

  .location-btn:hover,.el-input__icon:hover{
    color: @color;

 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/RightSearchPanel.vue

@@ -1,31 +1,46 @@
<template>
  <div id="right-panel">
    <div class="panel-tab">
      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleClick(item)">
      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
        <img :src="item.icon" style="width: 24px;height: 24px;"></div>

<!--      <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
<!--      <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
    </div>
    <div class="panel-fold-btn">
      <div class="btn-stretch" @click="toggleMonitorPanel"></div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->

    <div class="right-control">

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
      </div>
      <component :title="title" :is="gcComp"></component>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import { TopicComp, TopicList } from '../../conf/Topic'
// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'

import SewersSearch from '@components/panel/topicSearch/SewersSearch'
export default {
  name: 'MonitorPanel',
  components: TopicComp,
  components: { EnvProtectSearch, DischargeSearch },
  data () {
    return {
      topicMenu: [],
      topicList: TopicList,
      topicCheckedList: [],
      isPanelVisible: false,
@@ -36,8 +51,9 @@
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网'
      title: '污雨水管网',

      isCollapse: false
    }
  },
  computed: {
@@ -53,43 +69,48 @@

    handlePage (page) {
    },
    handleClick (item) {
      this.title = item.name
      this.gcComp = item.comp
    handleGd () {
      this.title = '管道信息查询'
    },
    toggleMonitorPanel () {
      const el = $('.btn-stretch')
      const el2 = $('.panel-fold-btn')
      // let cs = 'btn-stretch-active'
      var rightControl = $('#right-panel')
      const right = rightControl.css('right')
      if (right === '10px') {
        rightControl.animate({
          right: '-322px'
        })
        el.css({
          transform: 'rotateY(180deg)',
          'transform-origin': '50% 50%',
          transition: 'transform 1s linear'
        })
        el2.animate({
          right: '320px',
          speed: 1000
        })
      } else {
        rightControl.animate({
          right: '10px'
        })
        el.css({
          transform: 'rotateY(0deg)',
          'transform-origin': '50% 50%',
          transition: 'transform 1s linear'
        })
        el2.animate({
          right: '290px',
          speed: 1000
        })
      }
      this.isCollapse = !this.isCollapse
      // const el = $('.btn-stretch')
      // const el2 = $('.panel-fold-btn')
      // const el = document.getElementsByClassName('.btn-stretch')
      // const el2 = document.getElementsByClassName('.panel-fold-btn')
      // let  = 'btn-stretch-active'
      // var rightControl = $('#right-panel')
      // var rightControl = document.getElementById('#right-panel')
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
    //   if (right === '10px') {
    //     rightControl.animate({
    //       right: '-322px'
    //     })
    //     el.css({
    //       transform: 'rotateY(180deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '320px',
    //       speed: 1000
    //     })
    //   } else {
    //     rightControl.animate({
    //       right: '10px'
    //     })
    //     el.css({
    //       transform: 'rotateY(0deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '290px',
    //       speed: 1000
    //     })
    //   }
    }
  },
  mounted () {
@@ -127,6 +148,7 @@

  .el-form-item__label {
    color: rgb(52, 224, 255);
    /*<!--color: @color;-->*/
  }

  .el-input__inner::placeholder {
@@ -218,14 +240,29 @@
    white-space: nowrap;
  }
  .panel-fold-btn{
    overflow: hidden;
    position: absolute;
    top:45%;
    left: -18px;
    /*left: 0px;*/
    //right: 320px;
    right: 290px;
    /*right: 290px;*/
    z-index: 1000;
    /*right: 0px;*/
    background-color: rgba(5,24,66,.8);
    border-radius: 10px 0 0 10px;
    .btn-stretch {
      width: 20px;
      height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
      cursor: pointer;
      /*margin-left: -20px;*/
      transform: rotateY(0deg);
      transform-origin: 50% 50%;
      transition: transform 1s linear;
        /*transition: 3s linear;*/
    }
    .btn-shrink {
      width: 20px;
      height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
@@ -258,17 +295,20 @@
  }

  .right-control {
    width: 290px;
    /*width: 290px;*/
    //height: 573px;
    height: 100%;
    position: absolute;
    position: relative;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    background-size: 100% 98%;
  }

  .a{
    transform: translateX(328px);
    transition: transform 3s linear;
    }
  .panel_searchTotal {
    font-size: 12px;
    float: right;
@@ -276,13 +316,13 @@

  .panel_header {
    // background-color: #030D2E;
    padding: 7px 15px 3px 20px;
    padding: 8px 15px 3px 20px;
  }

  .panel_title {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    /*margin: 0px;*/
    /*padding: 0px;*/
    color: #78c4ff;
    font-weight: bold;
  }
@@ -292,7 +332,7 @@
  }

  .search-form .el-form-item {
    margin: 0px;
    /*margin: 0px;*/
    margin-bottom: 8px;
  }

@@ -438,7 +478,7 @@

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }
@@ -467,5 +507,13 @@
      background-color: #061e51 !important;
    }
  }
  .unfold {
    transform: translateX(332px);
    transition: transform 0.5s linear;
  }
  .shrink {
    transform: translateX(0px);
    transition: transform 0.5s linear;
  }
}
</style>

 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;
  height: 35px;
  line-height: 30px;
  background: #07325b;
  border: 1px solid #5EF2FF;
  border-radius: 3px;
  text-align: center;
  z-index: 999;
  display: flex;

  ul {
    list-style: none;
    margin: 0;
    padding: 5px;
  .init-choose {
    //margin: 15px 5px;
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px skyblue solid;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

    li {
      float: left;
      width: 23px;
      height: 23px;
      margin: 0 1px;
      border: 1px solid #073C4F;
  .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;

    .el-dropdow {
      width: 20%;
    }

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

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

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

  .active {
    border: 1px solid #5EF2FF;
  .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/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/views/MapTemplate.vue

@@ -1,19 +1,19 @@
<template>
    <div class="full-screen">
        <popup ref="popup" @callPopup="callPopup"></popup>
        <div id="map" ref="rootmap">
        </div>
        <sgis-layer-controller :preset="'warningPreset'">
            <lc-basemap></lc-basemap>
            <!--            <div class="barline"></div>-->
            <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
        </sgis-layer-controller>
        <monitor-panel></monitor-panel>
<!--        <top-enterprise-panel></top-enterprise-panel>-->
        <tool-box-panel></tool-box-panel>
      <menu-special></menu-special>
      <legend-panel></legend-panel>
  <div class="full-screen">
    <popup ref="popup" @callPopup="callPopup"></popup>
    <div id="map" ref="rootmap">
    </div>
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <!--            <div class="barline"></div>-->
      <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
    </sgis-layer-controller>
    <monitor-panel></monitor-panel>
    <!--        <top-enterprise-panel></top-enterprise-panel>-->
    <tool-box-panel :map="this.map"></tool-box-panel>
    <menu-special></menu-special>
    <legend-panel></legend-panel>
  </div>
</template>

<script>
@@ -134,23 +134,23 @@

<style lang="less">

    .full-screen {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;

        #map {
            height: 100%;
            width: 100%;
        }
  #map {
    height: 100%;
    width: 100%;
  }

        .barline {
            //width: 100%;
            //height: 1px;
            //background-color: #0661AE;
            border-top: 1px solid #0661AE;
        }
    }
</style>>
  .barline {
    //width: 100%;
    //height: 1px;
    //background-color: #0661AE;
    border-top: 1px solid #0661AE;
  }
}
</style>