派生自 wuyushui/SewerAndRainNetwork
src/components/panel/ToolBoxPanel.vue
@@ -1,48 +1,34 @@ <template> <div class="left-top-toolbox-panel"> <div class="specific-tools"> <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice" @click.enter.native="changeSelectMouse"> <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="" class="icon" /> <!--<span class="span-default">工具</span>--> </el-button> <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="工具" placement="left"> <div :class='["iconBtn",selectGroup === true ? "active-button" : ""]' @click="changeSelectMouse"> <i class="icon iconfont icongongju"></i> </div> </el-tooltip> <transition name="animationChange"> <el-row v-show="selectGroup" class="specific-tools-group"> <div v-show="selectGroup" class="specific-tools-group"> <el-popover trigger="manual" placement="bottom" :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':''" v-model="isShow[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 v-if="active === index">{{ item.label }}</span> <span v-else class="default-span">{{ item.label }}</span> <i :class="'icon iconfont '+item.icon"></i> </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 && checkedItem" alt=""/> <img :src="itemT.icon" :title="itemT.title" alt="" v-else/> v-show="item.index!=='2'" :class="indexT==toolActive?'hover':''"> <i :class="'icon iconfont '+itemT.icon"></i> </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>--> <lc-base-map v-show="item.index==='2'"></lc-base-map> </el-popover> <el-button @click="changeSelect" class="special-button"> <!-- <el-button @click="changeSelect" class="special-button"> <i class="el-icon-d-arrow-left"></i> </el-button> </el-row> </el-button> --> </div> </transition> </div> </div> @@ -51,10 +37,10 @@ <script> import LcBaseMap from '@components/LayerController/modules/LcBaseMap' // 功能导航 import plot from '@assets/images/map-pages/icon/toolbox/biaohui.png' import polygon from '@assets/images/map-pages/icon/toolbox/celiang1.png' import location from '@assets/images/map-pages/icon/toolbox/ditu.png' import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png' // import plot from '@assets/images/map-pages/icon/toolbox/biaohui.png' // import polygon from '@assets/images/map-pages/icon/toolbox/celiang1.png' // import location from '@assets/images/map-pages/icon/toolbox/ditu.png' // import fullscreen from '@assets/images/map-pages/icon/toolbox/xiazai.png' // 导航选中的状态 import plotChooose from '@assets/images/map-pages/icon/toolbox/Selecd/biaohui.png' @@ -65,12 +51,12 @@ // 标绘的可选择数据 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' import polygonJ from '@assets/images/map-pages/icon/toolbox/polygon.png' import polygonS from '@assets/images/map-pages/icon/toolbox/ju.png' import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png' import del from '@assets/images/map-pages/icon/toolbox/del.png' // import marker from '@assets/images/map-pages/icon/toolbox/map.png' // import line from '@assets/images/map-pages/icon/toolbox/line.png' // import polygonJ from '@assets/images/map-pages/icon/toolbox/polygon.png' // import polygonS from '@assets/images/map-pages/icon/toolbox/ju.png' // import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png' // import del from '@assets/images/map-pages/icon/toolbox/del.png' // 标绘选中的内容图片 import markerChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/dingweimark.png' @@ -83,16 +69,19 @@ 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 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 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' // import bus from '@/eventBus' export default { name: 'ToolBoxPanel', @@ -114,9 +103,10 @@ checkedItem: false, Selecd: -1, isSelecd: -1, toolActive: -1, menuList: [ { icon: plot, icon: 'iconjuliceliang', // plot, iconSelecd: plotChooose, label: '标绘', index: '1', @@ -124,49 +114,55 @@ { index: '1-1', label: '点标绘', icon: marker, icon: 'iconlocation-full', // marker, title: '点标绘', active: false, iconChoose: markerChoose }, { index: '1-2', label: '线标绘', icon: line, icon: 'iconline', // line, title: '线标绘', active: 0, iconChoose: lineChoose }, { index: '1-4', label: '多边形', icon: polygonJ, icon: 'iconliubianxing1', // polygonJ, title: '多边形', active: 0, iconChoose: polygonJChoose }, { index: '1-5', label: '矩形', icon: polygonS, icon: 'iconcheckbox-full', // polygonS, title: '矩形', active: 0, iconChoose: polygonSChoose }, { index: '1-3', label: '圆形', icon: polygonY, icon: 'iconyuan', // polygonY, title: '圆形', active: 0, iconChoose: polygonYChoose }, { index: '1-4', label: '删除', icon: del, active: -1, icon: 'icondelete-fill', // del, title: '删除标绘', iconChoose: delChoose } ] }, { icon: polygon, icon: 'iconcelianggongju', // polygon, iconSelecd: polygonChooose, label: '测量', index: '3', @@ -174,28 +170,31 @@ { index: '3-1', label: '距离', icon: distance, icon: 'iconjuliceliang', // distance, title: '距离测量', active: 0, iconChoose: distanceChoose }, { index: '3-2', label: '面积', icon: mm, icon: 'iconmianjiceliang', // mm, title: '面积测量', active: 0, iconChoose: mmChoose }, { index: '3-3', label: '清除', icon: del, icon: 'icondelete-fill', // del, title: '清除测量', active: -1, iconChoose: delChoose } ] }, { icon: location, icon: 'iconditu1', // location, iconSelecd: locationChooose, label: '地图', index: '2', @@ -203,6 +202,7 @@ { label: '影像图', index: '2-1', active: 0, items: [ { index: '2-1-1', @@ -213,6 +213,7 @@ { label: '矢量图', index: '2-2', active: 0, items: [ { index: '2-2-1', @@ -223,6 +224,7 @@ { label: '地形图', index: '2-3', active: 0, items: [ { index: '2-3-1', @@ -233,7 +235,7 @@ ] }, { icon: fullscreen, icon: 'icondownload', // fullscreen, iconSelecd: dowloadChooose, label: '下载', index: '4', @@ -241,25 +243,39 @@ { index: '4-1', label: '全屏', icon: FullScreen, icon: 'icontianchongxing-', // FullScreen, active: 0, title: '全屏' }, { index: '4-2', label: 'A4横向', icon: cross, icon: 'iconsaoma', // cross, active: 0, title: 'A4横向' }, { index: '4-3', label: 'A4纵向', icon: vertical, icon: 'iconsaoma zongs', // vertical, active: 0, title: 'A4纵向' } ] } ] } }, mounted () { /* import bus from '@/eventBus' */ const that = this bus.$on('changeState', function (state) { if (state.num !== 1 && state.type) { that.selectGroup = false that.isShow = [] that.active = -1 } }) }, methods: { init (map) { @@ -271,7 +287,8 @@ this.drawLayer = this.L.layerGroup().addTo(this.map) } this.active = index console.log(this.basemapList) this.toolActive = -1 // console.log(this.basemapList) for (let i = 0; i < this.isShow.length; i++) { if (i !== index) { this.isShow[i] = false @@ -283,6 +300,11 @@ }, choiceItem (itemT, indexT) { this.Selecd = indexT if (itemT.active !== -1) { this.toolActive = indexT } else { this.toolActive = -1 } if (this.isSelecd === indexT) { this.checkedItem = !this.checkedItem } else { @@ -380,18 +402,36 @@ }, changeSelect () { this.selectGroup = false this.isShow = !this.isShow this.active = -1 }, changeSelectMouse () { this.selectGroup = true this.isShow = [] this.selectGroup = !this.selectGroup if (this.selectGroup) { this.isShow = [] } else { this.isShow = !this.isShow this.active = -1 } const state = { type: this.selectGroup, num: 1 } bus.$emit('changeState', state) } } } </script> <style lang="less" scoped> .tools-panel-content .el-button .zongs { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); display: block; } .animationChange-enter-active, .animationChange-leave-active { transition: all 0.5s; } @@ -410,14 +450,19 @@ .specific-tools { display: flex; overflow: hidden; .el-button { .el-button { z-index: 999; padding: 0; margin: 0 0.015rem; width: 0.2725rem; height: 0.2725rem; color: #00fff6; background: @background-color; border: 0.00521rem solid #00fff6; vertical-align: middle !important; font-size: 20px; .base-map-img { position: absolute; } @@ -425,21 +470,25 @@ .base-map-img:hover { cursor: pointer; } img { width: 22px; height: 22px; } .span-default { display: block; font-size: 10px; } span { display: block; font-size: 10px; } } .specific-tools-group .el-button{ span{ .specific-tools-group .el-button { span { color: #0B89B5; } } @@ -449,7 +498,7 @@ z-index: 999; padding: 0; margin: 0; margin-right:0.015rem; margin-right: 0.015rem; width: 0.2725rem; height: 0.2725rem; background: @background-color; @@ -465,8 +514,9 @@ z-index: 1; .tools-panel-choose { border: none; box-shadow: 0 0 0.03rem @color-shadow; border: 0.00521rem solid #fff700; box-shadow: 0 0 0.03rem #fff700; color: #fff700; img { width: 22px; @@ -487,11 +537,18 @@ .special-button { width: 0.1362rem; height: 0.2725rem; color: @color-over; background: @background-color4; color: @color-tool; border: 1px solid @color-tool; } .special-button:hover { color: #00fff6; } } } } .base-map-inner-panel { display: flex; justify-content: center;
