派生自 wuyushui/SewerAndRainNetwork
src/components/panel/ToolBoxPanel.vue
@@ -1,13 +1,10 @@ <template> <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-button class="el-button-choice" @click="changeSelect" v-show="selectGroup"> <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt=""> <span>工具</span> </el-button> <el-button class="el-button-choice" @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"> @@ -18,15 +15,16 @@ v-for="(item,index) in menuList" :key="index" :width="item.index === '2'?230 : 150" > <el-button slot="reference" class="el-button" :class="active === index ? 'tools-panel-choose':''" <el-button slot="reference" class="el-button" :class="active === index && checked? 'tools-panel-choose':''" @click="changeChoose(index)"> <img :src="item.iconSelecd" alt="" v-if="active === index && checked === true"/> <img :src="item.iconSelecd" alt="" v-if="active === index && checked"/> <img :src="item.icon" alt="" v-else/> <span>{{ item.label }}</span> <span v-if="active === index && checked">{{ 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)" v-show="item.index!=='2'"> <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checked === true"/> <img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT"/> <img :src="itemT.icon" :title="itemT.title" v-else/> </el-button> <div class="base-map-inner-panel" v-show="!isShow&&item.index==='2'"> @@ -92,11 +90,17 @@ name: 'ToolBoxPanel', data () { return { checked: false, checkbuuton: -1, isShow: true, currentBaseMapCode: 'tianditu_img', basemapList: [], selectGroup: false, drawLayer: null, drawLayerArray: [], map: null, active: -1, Selecd: -1, checked: false, checkbutton: -1, menuList: [ { icon: plot, @@ -241,14 +245,7 @@ } ] } ], selectGroup: false, drawLayer: null, drawLayerArray: [], map: null, // L: window.L, active: -1, Selecd: -1 ] } }, computed: { @@ -286,20 +283,20 @@ }) }, changeChoose (index) { this.active = index if (this.drawLayer == null) { this.drawLayer = this.L.layerGroup().addTo(this.map) } if (this.checkbuuton === index) { this.active = index if (this.checkbutton === index) { this.checked = !this.checked } else { if (this.checkbuuton === -1) { if (this.checkbutton === -1) { this.checked = !this.checked } else { this.checked = true } } this.checkbuuton = index this.checkbutton = index }, choiceItem (itemT, indexT) { this.Selecd = indexT @@ -314,6 +311,7 @@ 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 '线标绘': this.drawLayer = this.map.editTools.startPolyline() @@ -352,10 +350,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 @@ -364,7 +361,8 @@ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true hideControlContainer: true, hidden: true }).addTo(this.map) printerX.printMap('A4Landscape page', '横向') break @@ -373,7 +371,8 @@ sizeModes: ['Current', 'A4Landscape', 'A4Portrait'], filename: 'map_image', exportOnly: true, hideControlContainer: true hideControlContainer: true, hidden: true }).addTo(this.map) printerY.printMap('A4Portrait page', '纵向') break @@ -386,9 +385,13 @@ }) }, changeSelect () { this.selectGroup = !this.selectGroup this.selectGroup = false this.isShow = !this.isShow this.active = -1 this.checked = false }, changeSelectMouse () { this.selectGroup = true } } } @@ -419,8 +422,8 @@ 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; @@ -435,14 +438,16 @@ 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; } } @@ -452,17 +457,19 @@ margin: 0 0.015rem; width: 45px; height: 45px; background: @background-color-tools; border: 1px solid @color-shadow; 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; //.tools-panel-content { // width:220px!important; //} .base-map-inner-panel { //width: 230px!important; display: flex; justify-content: center; align-items: center; @@ -479,7 +486,7 @@ position: absolute; margin-left: 2px; background-color: rgba(0, 0, 0, .5); color: white; color: @color-over; .el-checkbox__label { padding-left: 5px !important; @@ -518,14 +525,19 @@ 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; } } } }
