Merge remote-tracking branch 'origin/master'

徐旺旺

2021-03-12 231ed8b3de4866ceb5bbb9833c0a7afaee9583d6

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/views/MapTemplate.vue

 src/components/LayerController/LayerController.vue

@@ -1,7 +1,5 @@
<template>
    <div class="float-panel">
        <!--    <i class="horn horn-br"></i>-->
        <!--    <i class="horn horn-bl"></i>-->
        <div class="title-text-border" @click="switchPanel">
            <div class="title-icon"></div>
            <div class="title-text">图层控制</div>

 src/components/panel/BaseNavMenuItem.vue

New file
@@ -0,0 +1,56 @@
<template>

  <div class="base-nav-menu">

    <template v-for="(item,index) in menuList">

      <template v-if="item.items && item.items.length">

        <el-submenu :index="item.index" :key="index">

          <template slot="title" v-if="item.icon">

            <img :src="item.icon" :title="item.label"/>

          </template>

          <template slot="title" v-else>{{item.label}}</template>

          <base-nav-menu-item v-for="child in item.items" :key="child.title" :menuList='[child]'></base-nav-menu-item>

        </el-submenu>

      </template>

      <template v-else>

        <el-menu-item :index="item.index" :key="index">

          {{ item.label }}

        </el-menu-item>

      </template>

    </template>

  </div>

</template>



<script>



export default {

  name: 'BaseNavMenuItem',

  data () {

    return {}

  },

  props: {

    menuList: Array

  }

}

</script>



<style lang="less" scoped>

.base-nav-menu {

  height: 38px;

  line-height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  outline: none;

  border: none;



  .el-submenu {

    .el-submenu__title {

      border-radius: 50%;



      .el-icon-arrow-down {

        display: none;

      }



    }

  }

}

</style>


 src/components/panel/ToolBoxPanel.vue

@@ -1,32 +1,33 @@
<template>
  <div class="lefttop-toolbox-panel">
    <div>
    <div class="init-choose" @click="changeSelect()">
      <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt="">
        <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""/>
    </div>
    <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>{{ ite.headings }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-menu class="el-menu"
               mode="horizontal"
               :collapse="isCollapse"
               unique-opened
               @open="handleOpen"
               @close="handleClose"
               @select="handleSelect"
               v-show='selectGroup'
      >
        <base-nav-menu-item :menuList='menuList'></base-nav-menu-item>
      </el-menu>
    </div>
    <!--    // 弹框-->
    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>
    <!--文字标注弹框-->
    <!--    <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>-->
  </div>
</template>

<script>
import circle from '@/assets/images/map-pages/icon/toolbox/circle.png'
import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png'
import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
import location from '@/assets/images/map-pages/icon/toolbox/location.png'
import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
import square from '@/assets/images/map-pages/icon/toolbox/square.png'
// import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
// import square from '@/assets/images/map-pages/icon/toolbox/square.png'
import circle from '@assets/images/map-pages/icon/toolbox/circle.png'
import location from '@assets/images/map-pages/icon/toolbox/location.png'
import polygon from '@assets/images/map-pages/icon/toolbox/polygon.png'
import fullscreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png'

// 测量的方法
import '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
@@ -36,78 +37,128 @@
import MakeTation from '@components/plugin/MakeTation'

// 封装的选择弹框
import TextBounced from '@components/panel/bounced/TextBounced'
import BaseNavMenuItem from '@components/panel/BaseNavMenuItem'

export default {
  name: 'ToolBoxPanel',
  components: { TextBounced },
  components: { BaseNavMenuItem },
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      activeTools: {},
      imgLists: [
      menuList: [
        {
          title: circle,
          alt: '标绘',
          icon: circle,
          label: '标绘',
          index: '1',
          items: [
            { headings: '线标绘' },
            { headings: '面标绘' },
            { headings: '箭头标绘' }
            {
              index: '1-1',
              label: '点标绘'
            },
            {
              index: '1-2',
              label: '线标绘'
            },
            {
              index: '1-3',
              label: '面标绘',
              items: [
                {
                  index: '1-3-1',
                  label: '圆形'
                },
                {
                  index: '1-3-2',
                  label: '多边形'
                },
                {
                  index: '1-3-3',
                  label: '矩形'
                }
              ]
            }
          ]
        },
        {
          title: square,
          alt: '标注',
          icon: location,
          label: '切换底图',
          index: '2',
          items: [
            { headings: '点标注' },
            { headings: '线标注' },
            { headings: '面标注' },
            { headings: '文字标注' },
            { headings: '图标标注' }
            {
              label: '影像图',
              index: '2-1',
              items: [
                {
                  index: '2-1-1',
                  label: '影像標注'
                }
          ]
        },
        {
          title: legend,
          alt: '测量',
              label: '矢量图',
              index: '2-2',
          items: [
            { headings: '距离测量' },
            { headings: '面积测量' }
                {
                  index: '2-2-1',
                  label: '矢量標注'
                }
          ]
        },
        {
          title: location,
          alt: '切换底图',
              label: '地形图',
              index: '2-3',
          items: [
            { headings: '影像图' },
            { headings: '矢量图' },
            { headings: '地形图' }
                {
                  index: '2-3-1',
                  label: '地形標注'
                }
              ]
            }
          ]
        },
        {
          title: polygon,
          alt: '管网',
          icon: polygon,
          label: '管网',
          index: '3',
          items: [
            { headings: '连通性分析' },
            { headings: '爆管分析' },
            { headings: '流向分析' },
            { headings: '横断面分析' }
            {
              index: '3-1',
              label: '连通性分析'
            },
            {
              index: '3-2',
              label: '爆管分析'
            },
            {
              index: '3-3',
              label: '流向分析'
            },
            {
              index: '3-4',
              label: '横断面分析'
            }
          ]
        },
        {
          title: fullscreen,
          alt: '下载',
          icon: fullscreen,
          label: '下载',
          index: '4',
          items: [
            { headings: '全屏' },
            { headings: 'A4横向' },
            { headings: 'A4纵向' }
            {
              index: '4-1',
              label: '全屏'
            },
            {
              index: '4-2',
              label: 'A4横向'
            },
            {
              index: '4-3',
              label: 'A4纵向'
            }
          ]
        }
      ],
      form: {
        regionType: '',
        enterprise: ''
      },
      isCollapse: false,
      selectGroup: false,
      drawLayer: null,
      map: null,
@@ -117,19 +168,20 @@
    }
  },
  methods: {
    handleOpen () {
    },
    handleClose () {
    },
    handleSelect (index, indexPath) {

    },
    gitBounced (params) {
      this.bouncedText = params
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleCommand (command) {
    handleSelects (command) {
      console.log(command)
      switch (command) {
        case '全屏':
@@ -163,17 +215,17 @@
        case '线标绘':
          this.drawLayer = this.map.editTools.startPolyline()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          Measure.startMeasureLen(this.map, this.L)
          break
        case '面标绘':
          this.drawLayer = this.map.editTools.startPolygon()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
          break
        case '箭头标绘':
          this.drawLayer = this.map.editTools.startPolylineArrow()
          this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
        case '多边形':
          alert('多边形')
          break
        case '点标注':
          MakeTation.StartCircleAnnotation(this.map, this.L)
        case '点标绘':
          MakeTation.StartPointAnnotation(this.map, this.L)
          break
        case '图标标注':
          this.drawLayer = this.map.editTools.startIcon()
@@ -190,34 +242,31 @@
          Measure.startMeasureArea(this.map, this.L)
          break
      }
    },
    loadData () {

    }
  },
  mounted () {
    this.loadData()
  },
  created () {

  }
}
</script>

<style lang="less">

.lefttop-toolbox-panel {
  position: absolute;
  left: 5px;
  top: 5px;
  left: 15px;
  top: 15px;
  z-index: 999;

  div {
    width: 100%;
    height: 55px;
    line-height: 55px;
  display: flex;
    align-items: center;
    justify-content: space-around;

  .init-choose {
    //margin: 15px 5px;
    background: #305B62;
    //margin-top: 15px;
    width: 35px;
    height: 38px;
      height: 35px;
    border-radius: 50%;
    border: 2px skyblue solid;
    display: flex;
@@ -226,57 +275,38 @@
    z-index: 999;
  }

  .el-select-dropdown {
    position: absolute;
    .el-menu {
      width: 80%;
      background: none;
    z-index: 1;
    width: 250px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
      border: none;
    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;
      border-radius: 50px;
      }
    }

    .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;
  }
  //.transition {
  //  @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;
  //  }
  //}

}
</style>

 src/components/panel/bounced/TextBounced.vue

@@ -16,7 +16,7 @@
      <li class="bounced-box-choose">

        <span>颜色：</span>

        <select v-model='bouncedSelect' @click="changeLabelTextSelect()">

          <option v-for="(item,index) in selectOptions" :key="index" :value="item">{{ item }}</option>

          <option v-for="(item,index) in selectOptions" :key="index" :value="item.value">{{ item.text }}</option>

        </select>

      </li>

    </ul>

@@ -32,8 +32,21 @@
  data () {

    return {

      bouncedText: '',

      bouncedSelect: '红色',

      selectOptions: ['红色', '蓝色', '黄色']

      bouncedSelect: 'red',

      selectOptions: [

        {

          value: 'red',

          text: '红色'

        },

        {

          value: 'blue',

          text: '蓝色'

        },

        {

          value: 'yellow',

          text: '黄色'

        }

      ]

    }

  },

  methods: {

@@ -43,6 +56,7 @@
    changeLabelTextSelect () {

      // this.bouncedSelect = item

      console.log('获取颜色')

      MakeTation.setContentColor(this.bouncedSelect)

    },

    ChangeText () {

      MakeTation.setContentText(this.bouncedText)


 src/components/plugin/Editable.js

@@ -306,16 +306,6 @@
        line.enableEdit(this.map).newShape(latlng)
        return line
      },
      // 箭头标绘
      startPolylineArrow: function (latlng, options) {
        const lineArrow = this.createPolyline([], {
          color: 'black',
          weight: 3,
          opacity: 1.0
        })
        lineArrow.enableEdit(this.map).newShape(latlng)
        return lineArrow
      },

      // 🍂method startPolygon(latlng: L.LatLng, options: hash): L.Polygon
      // Start drawing a Polygon. If `latlng` is given, a first point will be added. In any case, continuing on user click.

 src/components/plugin/MakeTation.js

@@ -20,14 +20,20 @@
    TextAnnotation.layers = L.layerGroup()

    map.on('click', TextAnnotation.click).on('dblclick', TextAnnotation.dblclick)

  },

  // 设置改变文字内容

  setContent :function (changeContent) {

    console.log(changeContent)

    // console.log(changeContent)

    TextAnnotation.changeContent = changeContent

  },

  // 设置改变文字颜色

  setColor: function (changeColor) {

    // console.log(changeColor)

    TextAnnotation.changeColor = changeColor

  },

  click: function (e) {

    console.log(TextAnnotation.changeContent)

    // console.log(TextAnnotation.changeContent)

    let labIcon = L.divIcon({

      html: '<div style="color: red;font-size: 18px;">' + TextAnnotation.changeContent + '</div>',

      html: '<div style="color:' + TextAnnotation.changeColor + ';font-size: 18px;">' + TextAnnotation.changeContent + '</div>',

      iconSize: [100, 40],

      iconAnchor: [0, 0],

      className: ''

@@ -52,7 +58,7 @@
}



// 添加 点 的标注

var CircleAnnotation = {

let pointAnnotation = {

  points: [],

  color: 'yellow',

  L: null,

@@ -61,54 +67,60 @@
  polyline: null,

  marker: null,

  init: function (map, L) {

    // console.log(L)

    CircleAnnotation.L = L

    CircleAnnotation.map = map

    CircleAnnotation.points = []

    CircleAnnotation.polyline = null

    CircleAnnotation.marker = null

    CircleAnnotation.layers = L.layerGroup()

    map.on('click', CircleAnnotation.click).on('dblclick', CircleAnnotation.dblclick)

    pointAnnotation.L = L

    pointAnnotation.map = map

    pointAnnotation.points = []

    pointAnnotation.polyline = null

    pointAnnotation.marker = null

    pointAnnotation.layers = L.layerGroup()

    map.on('click', pointAnnotation.click).on('dblclick', pointAnnotation.dblclick)

  },

  click: function (e) {

    // var myIcon = L.divIcon({className: 'my-div-icon'});

    let marker = L.marker(e.latlng)

    marker.addTo(CircleAnnotation.map)

    marker.addTo(pointAnnotation.map)

    // pointAnnotation.map.panBy(L.point(e.latlng))

  },

  dblclick: function (e) {

    CircleAnnotation.map.off('click', CircleAnnotation.click).off('dblclick', CircleAnnotation.dblclick)

    pointAnnotation.map.off('click', pointAnnotation.click).off('dblclick', pointAnnotation.dblclick)

  },

  destory: function () {

    if (CircleAnnotation.polyline) {

      CircleAnnotation.map.removeLayer(CircleAnnotation.polyline)

    if (pointAnnotation.polyline) {

      pointAnnotation.map.removeLayer(pointAnnotation.polyline)

    }

    if (CircleAnnotation.marker) {

      CircleAnnotation.marker.remove()

    if (pointAnnotation.marker) {

      pointAnnotation.marker.remove()

    }

    if (CircleAnnotation.layers) {

      CircleAnnotation.layers.clearLayers()

    if (pointAnnotation.layers) {

      pointAnnotation.layers.clearLayers()

    }

  }

}



// 添加文字标注

const startMakeText = function (map, L) {

  TextAnnotation.init(map, L)

}



const StartCircleAnnotation = function (map, L) {

  CircleAnnotation.init(map, L)

}



// 文字标注的 内容社设置

const setContentText = function (text) {

  TextAnnotation.setContent(text)

}

// 文字标注内容的 颜色 设置

const setContentColor = function (color) {

  TextAnnotation.setColor(color)

}



// 点 标注

const StartPointAnnotation = function (map, L) {

  pointAnnotation.init(map, L)

}



const clearText = function () {

  startMakeText.destory()

}

export default {

  startMakeText,

  clearText,

  StartCircleAnnotation,

  setContentText

  startMakeText,

  setContentText,

  setContentColor,

  StartPointAnnotation

}


 src/components/plugin/MeaSure.js

@@ -77,14 +77,14 @@
var distanceMeasure = {

  points: [],

// markers:[],

  color: 'red',

  color: 'blue',

  L: null,

  map: null,

  layers: null,

  polyline: null,

  marker: null,

  init: function (map, L) {

    console.log(L)

    // console.log(L)

    distanceMeasure.L = L

    distanceMeasure.map = map

    distanceMeasure.points = []

@@ -127,8 +127,6 @@
    console.log('双击结束', e)

    distanceMeasure.polyline.addTo(distanceMeasure.layers)

    distanceMeasure.close(e.latlng)

//distanceMeasure.polygon.enableEdit();

//map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon);

    distanceMeasure.map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick)

  },

  destory: function () {


 src/components/table/summarySheets.vue

@@ -1,17 +1,18 @@
<template>
    <div class="summary-sheets">
        <div id="summary">
            <el-row type="flex" class="head-area" align="middle">
                <el-col>
                    <span>企业指标分类统计</span>
                </el-col>
                <el-col class="head-area-button">
                    <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info"></el-button>
                    <el-button style="float: right; padding: 3px 0" icon="el-icon-close" type="info" @click="closebtn"></el-button>
                </el-col>
            </el-row>
<!--        <el-tabs class="tabs-text">-->
            <el-row :gutter="20" class="el-rowscol">
                <el-col>
                        <el-tabs class="tabs-text" v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tabs class="tabs-text" v-model="activeName" type="border-card" @tab-click="handleClick">
                                <el-tab-pane label="废水" name="first">
                                    <waste-water></waste-water>
                                </el-tab-pane>
@@ -27,6 +28,7 @@
                        </el-tabs>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

@@ -51,6 +53,11 @@
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    closebtn () {
      const summary = document.getElementById('summary')
      summary.style.display = 'none'
      console.log(1)
    }
  }
}
@@ -58,12 +65,11 @@

<style>
    .summary-sheets {
        /*overflow: hidden;*/
        position: absolute;
        top: 50px;
        left: 50px;
        width: 850px;
        height: 265px;
        /*width: 850px;*/
        /*height: 265px;*/
        border: #90c8e0 1px solid;
        z-index:9999999;
        background-color: rgba(26, 73, 81, 0.901960784313726);
@@ -82,8 +88,7 @@
    .head-area-button{
        margin-right: 5px;
    }
    .el-rowscol{
        width: 100%;
        height: 100%;
    .tabs-text{
        background-color: rgba(26, 73, 81, 0.901960784313726);
    }
</style>

 src/views/MapTemplate.vue

@@ -13,7 +13,8 @@
    <tool-box-panel ref="toolBox"></tool-box-panel>
    <menu-special></menu-special>
    <legend-panel></legend-panel>
    <enterprise></enterprise>
    <summary-sheets v-show="isShowbtn"></summary-sheets>
    <el-button id="mapbtn" type="primary" icon="el-icon-c-scale-to-original" circle @click="isshowhidden"></el-button>
  </div>
</template>

@@ -26,16 +27,15 @@
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import MonitorPanel from '@components/panel/RightSearchPanel'
// import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import summarySheets from '@components/table/summarySheets.vue'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'
import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'

export default {
  name: 'MapTemplate',
  components: {
    Enterprise,
    LegendPanel,
    MenuSpecial,
    ToolBoxPanel,
@@ -44,10 +44,12 @@
    MonitorPanel,
    LcBasemap,
    LcServiceLayer,
    Popup
    Popup,
    summarySheets
  },
  data () {
    return {
      isShowbtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -66,6 +68,9 @@
    })
  },
  methods: {
    isshowhidden () {
      this.isShowbtn = !this.isShowbtn
    },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)