From 404b9d331ba10fd1683e77c916c01aaa4cba4f0b Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期四, 01 四月 2021 14:12:55 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

---
 src/components/panel/ToolBoxPanel.vue |  313 +++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 237 insertions(+), 76 deletions(-)

diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 5db2eae..79b4693 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -1,36 +1,46 @@
 <template>
   <div class="left-top-toolbox-panel">
     <div class="specific-tools">
-      <el-button @click="changeSelect" v-show="selectGroup">
-        <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt="">
-        <span>宸ュ叿</span>
-      </el-button>
-      <el-button @click="changeSelect" v-show="!selectGroup">
-        <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="">
-        <a>宸ュ叿</a>
+      <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"
+                 @mouseover.enter.native="changeSelectMouse">
+        <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""/>
+        <span class="span-default">宸ュ叿</span>
       </el-button>
       <transition name="animationChange">
         <el-row v-show="selectGroup" class="specific-tools-group">
           <el-popover
+              trigger="manual"
               placement="bottom"
-              width=""
-              trigger="click"
               :popper-class="'tools-panel-content'"
               v-for="(item,index) in menuList" :key="index"
+              :width="item.index === '2'?230 : 150"
+              v-model="isShow[index]"
           >
-            <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''"
-                       @click="changeChoose(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/>
-              <span>{{ item.label }}</span>
+              <span v-if="active === index">{{ item.label }}</span>
+              <span v-else class="default-span">{{ item.label }}</span>
             </el-button>
-            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)">
-              <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT"/>
-              <img :src="itemT.icon" :title="itemT.title" v-else/>
+            <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/>
             </el-button>
+            <div class="base-map-inner-panel" v-show="item.index==='2'">
+              <div v-for="item in basemapHelper.basemapList" :key="item.code" class="basemap-layer-item">
+                <img class="base-map-img" width="50" height="50" :src="item.conf.icon_actived" :title="item.name"
+                     @click="changeBasemap(item)" alt=""/>
+                <el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
+                             label="鏍囨敞" @change="changeBasemap(item)">
+                </el-checkbox>
+              </div>
+            </div>
           </el-popover>
           <el-button @click="changeSelect" class="special-button">
-            <i :class="selectGroup === false ? 'el-icon-d-arrow-left':'el-icon-d-arrow-left'"></i>
+            <i class="el-icon-d-arrow-left"></i>
           </el-button>
         </el-row>
       </transition>
@@ -52,7 +62,7 @@
 import dowloadChooose from '@assets/images/map-pages/icon/toolbox/Selecd/xiazai.png'
 
 // 鏍囩粯鐨勫彲閫夋嫨鏁版嵁
-// import iconRefinery from '@assets/images/map-pages/local.png'
+import iconRefinery from '@assets/images/map-pages/local.png'
 
 import marker from '@assets/images/map-pages/icon/toolbox/map.png'
 import line from '@assets/images/map-pages/icon/toolbox/line.png'
@@ -68,10 +78,17 @@
 import polygonSChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/rectmark.png'
 import polygonYChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/circlemark.png'
 import delChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/shanchu.png'
+import distanceChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/juliceliangmark.png'
+import mmChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/mianjiceliangmark.png'
 
 // 娴嬮噺
 import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
 import mm from '@assets/images/map-pages/icon/toolbox/M2.png'
+
+// 涓嬭浇
+import FullScreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png'
+import cross from '@assets/images/map-pages/icon/toolbox/cross.png'
+import vertical from '@assets/images/map-pages/icon/toolbox/vertical.png'
 
 // 娴嬮噺鐨勬柟娉�
 import Measure from '@/components/plugin/MeaSure'
@@ -80,12 +97,19 @@
   name: 'ToolBoxPanel',
   data () {
     return {
+      isShow: [],
+      currentBaseMapCode: 'tianditu_img',
+      basemapList: [],
       selectGroup: false,
-      active: -1,
-      Selecd: -1,
       drawLayer: null,
+      drawLayerArray: [],
       map: null,
-      L: window.L,
+      active: -1,
+      checked: false,
+      checkbutton: -1,
+      checkedItem: false,
+      Selecd: -1,
+      isSelecd: -1,
       menuList: [
         {
           icon: plot,
@@ -147,19 +171,22 @@
               index: '3-1',
               label: '璺濈',
               icon: distance,
-              title: '璺濈娴嬮噺'
+              title: '璺濈娴嬮噺',
+              iconChoose: distanceChoose
             },
             {
               index: '3-2',
               label: '闈㈢Н',
               icon: mm,
-              title: '闈㈢Н娴嬮噺'
+              title: '闈㈢Н娴嬮噺',
+              iconChoose: mmChoose
             },
             {
               index: '3-3',
-              label: '鍒犻櫎',
-              icon: '',
-              title: '鍒犻櫎'
+              label: '娓呴櫎',
+              icon: del,
+              title: '娓呴櫎娴嬮噺',
+              iconChoose: delChoose
             }
           ]
         },
@@ -210,19 +237,19 @@
             {
               index: '4-1',
               label: '鍏ㄥ睆',
-              icon: '',
+              icon: FullScreen,
               title: '鍏ㄥ睆'
             },
             {
               index: '4-2',
               label: 'A4妯悜',
-              icon: '',
+              icon: cross,
               title: 'A4妯悜'
             },
             {
               index: '4-3',
               label: 'A4绾靛悜',
-              icon: '',
+              icon: vertical,
               title: 'A4绾靛悜'
             }
           ]
@@ -230,54 +257,101 @@
       ]
     }
   },
+  computed: {
+    basemapHelper () {
+      return this.$store.state.map.basemapHelper
+    }
+  },
   methods: {
+    init (map) {
+      this.map = map
+      this.toolBoxPanelVisible = true
+    },
+    changeBasemap (itm) {
+      this.active = -1
+      const code = itm.code
+      this.basemapHelper.basemapList.forEach((item) => {
+        if (item.code === code) {
+          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.basemapList.forEach((item) => {
+            item.layer.bringToBack()
+          })
+        }
+      })
+    },
     changeChoose (index) {
-      this.active = index
       if (this.drawLayer == null) {
         this.drawLayer = this.L.layerGroup().addTo(this.map)
       }
-    },
-    changeSelect () {
-      this.selectGroup = !this.selectGroup
+      this.active = index
+      console.log(this.basemapList)
+      for (let i = 0; i < this.isShow.length; i++) {
+        if (i !== index) {
+          this.isShow[i] = false
+        }
+      }
+      // debugger
+      this.isShow[index] = !this.isShow[index]
+      this.isShow[index] ? (this.active = index) : (this.active = '')
     },
     choiceItem (itemT, indexT) {
       this.Selecd = indexT
+      if (this.isSelecd === indexT) {
+        this.checkedItem = !this.checkedItem
+      } else {
+        if (this.isSelecd === -1) {
+          this.checkedItem = !this.checkedItem
+        } else {
+          this.checkedItem = true
+        }
+      }
+      this.isSelecd = indexT
       switch (itemT.label) {
         case '鐐规爣缁�':
           var myIcon = this.L.icon({
-            iconUrl: '', // iconRefinery
+            iconUrl: iconRefinery,
             iconSize: [26, 32],
             iconAnchor: [13, 16],
             popupAnchor: [26, -32]
           })
-          var drawLayer = this.map.editTools.startMarker()
-          drawLayer.setIcon(myIcon)
-          this.drawLayer.addLayer(drawLayer)
-          this.setLogic(drawLayer)
+          this.drawLayer = this.map.editTools.startMarker()
+          this.drawLayer.setIcon(myIcon)
+          this.drawLayerArray.push(this.drawLayer)
+          this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
           break
         case '绾挎爣缁�':
-          var drawLayerLine = this.map.editTools.startPolyline()
-          this.drawLayer.addLayer(drawLayerLine)
-          this.setLogic(drawLayerLine)
+          this.drawLayer = this.map.editTools.startPolyline()
+          this.drawLayerArray.push(this.drawLayer)
+          this.setLogic()
           break
         case '澶氳竟褰�':
-          var drawLayerPolygonD = this.map.editTools.startPolygon()
-          this.drawLayer.addLayer(drawLayerPolygonD)
-          this.setLogic(drawLayerPolygonD)
+          this.drawLayer = this.map.editTools.startPolygon()
+          this.drawLayerArray.push(this.drawLayer)
+          this.setLogic()
           break
         case '鐭╁舰':
-          var drawLayerPolygonJ = this.map.editTools.startRectangle()
-          this.drawLayer.addLayer(drawLayerPolygonJ)
-          this.setLogic(drawLayerPolygonJ)
+          this.drawLayer = this.map.editTools.startRectangle()
+          this.drawLayerArray.push(this.drawLayer)
+          this.setLogic()
           break
         case '鍦嗗舰':
-          var drawLayerPolygonY = this.map.editTools.startCircle()
-          this.drawLayer.addLayer(drawLayerPolygonY)
-          this.setLogic(drawLayerPolygonY)
-          // this.drawLayer = this.map.editTools.startCircle()
+          this.drawLayer = this.map.editTools.startCircle()
+          this.drawLayerArray.push(this.drawLayer)
+          this.setLogic()
           break
         case '鍒犻櫎':
-          this.drawLayer.clearLayers()
+          for (let i = 0; i < this.drawLayerArray.length; i++) {
+            this.map.removeLayer(this.drawLayerArray[i])
+          }
+          break
+        case '娓呴櫎':
+          Measure.clearMeasure(this.map, this.L)
           break
         case '璺濈':
           Measure.startMeasureLen(this.map, this.L)
@@ -288,10 +362,9 @@
         case '鍏ㄥ睆':
           // this.map.toggleFullscreen()
           var printer = this.L.easyPrint({
-            sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
-            filename: 'map_image',
             exportOnly: true,
-            hideControlContainer: true
+            hideControlContainer: true,
+            hidden: true
           }).addTo(this.map)
           printer.printMap('CurrentSize', '鍏ㄥ睆')
           break
@@ -300,7 +373,8 @@
             sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
             filename: 'map_image',
             exportOnly: true,
-            hideControlContainer: true
+            hideControlContainer: true,
+            hidden: true
           }).addTo(this.map)
           printerX.printMap('A4Landscape page', '妯悜')
           break
@@ -309,20 +383,28 @@
             sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
             filename: 'map_image',
             exportOnly: true,
-            hideControlContainer: true
+            hideControlContainer: true,
+            hidden: true
           }).addTo(this.map)
           printerY.printMap('A4Portrait page', '绾靛悜')
           break
       }
+      this.active = -1
     },
-    setLogic (layer) {
-      layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit)
-      layer.setStyle({
-        color: 'red',
-        fillColor: '#ffffff',
-        fillOpacity: 0.1,
-        fill: true
+    setLogic () {
+      this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
+      this.drawLayer.setStyle({
+        color: 'red'
       })
+    },
+    changeSelect () {
+      this.selectGroup = false
+      this.isShow = !this.isShow
+      this.active = -1
+    },
+    changeSelectMouse () {
+      this.selectGroup = true
+      this.isShow = []
     }
   }
 }
@@ -353,26 +435,99 @@
       margin: 0 0.015rem;
       width: 45px;
       height: 45px;
-      background: @background-color-tools;
-      border: none;
+      background: @background-color;
+      vertical-align: middle !important;
+
+      .base-map-img {
+        position: absolute;
+      }
+
+      .base-map-img:hover {
+        cursor: pointer;
+      }
 
       img {
         width: 22px;
         height: 22px;
       }
 
-      span {
-        display: block;
-        color: @color-tool;
-      }
-
-      a {
+      .span-default {
         display: block;
         color: @color-shadow;
+        font-size: 11px;
+      }
+
+      span {
+        display: block;
+        color: @color-over;
+        font-size: 11px;
       }
     }
 
+    .el-button-choice {
+      left: 500px;
+      z-index: 999;
+      padding: 0;
+      margin: 0 0.015rem;
+      width: 45px;
+      height: 45px;
+      background: @background-color;
+      border: 0.00521rem solid @color-shadow;
+    }
+
+    .active-button {
+      border: 0.00521rem solid #fff700;
+      box-shadow: 0 0 0.03rem #fff700;
+    }
+
     .specific-tools-group {
+      z-index: 1;
+
+      .base-map-inner-panel {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .base-map-img {
+          position: absolute;
+        }
+
+        .base-map-img-Tool:hover {
+          cursor: pointer;
+        }
+
+        .base-map-anno-Tool {
+          position: absolute;
+          margin-left: 2px;
+          background-color: rgba(0, 0, 0, .5);
+          color: @color-over;
+
+          .el-checkbox__label {
+            padding-left: 5px !important;
+          }
+        }
+
+        .basemap-layer-item {
+          display: flex;
+          width: 50px;
+          height: 50px;
+          margin: 10px;
+          border: 2px solid white;
+
+          input {
+            position: relative;
+            left: 0;
+            top: -53px;
+          }
+
+          .basemap-layer-item-name {
+            position: relative;
+            left: 0;
+            top: -53px;
+          }
+        }
+      }
+
       .tools-panel-choose {
         border: none;
         box-shadow: 0 0 0.03rem @color-shadow;
@@ -384,14 +539,20 @@
 
         span {
           display: block;
+          color: @color-shadow;
+        }
+
+        .default-span {
+          display: block;
+          color: @color-over;
         }
       }
-    }
 
-    .special-button {
-      width: 22.5px;
-      height: 45px;
-      color: @color-over;
+      .special-button {
+        width: 22px;
+        height: 45px;
+        color: @color-over;
+      }
     }
   }
 }

--
Gitblit v1.8.0