~xingchuan/SewerAndRainNetwork.git

			@@ -1,89 +1,206 @@
			<template>
			<div class="lefttop-toolbox-panel">
			<div>
			<div class="init-choose" @click="changeSelect()">
			<img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""/>
			</div>
			<el-menu class="el-menu"
			mode="horizontal"
			:collapse="isCollapse"
			unique-opened
			@select="handleSelect"
			v-show='selectGroup'
			>
			<base-nav-menu-item :menuList='menuList'></base-nav-menu-item>
			</el-menu>
			<div class="left-top-toolbox-panel">
			<div class="specific-tools">
			<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">
			<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':''" @click.native="changeChoose(index)">
			<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'" :class="indexT==toolActive?'hover':''" >
			<i :class="'icon iconfont '+itemT.icon"></i>
			</el-button>
			<lc-base-map v-show="item.index==='2'"></lc-base-map>
			</el-popover>
			<!-- <el-button @click="changeSelect" class="special-button">
			<i class="el-icon-d-arrow-left"></i>
			</el-button> -->
			</div>
			</transition>
			</div>
			<!--文字标注弹框-->
			<!-- <TextBounced v-show="this.bouncedText" @changeBounced="gitBounced"></TextBounced>-->
			</div>
			</template>

			<script>
			// 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 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 plotChooose from '@assets/images/map-pages/icon/toolbox/Selecd/biaohui.png'
			import polygonChooose from '@assets/images/map-pages/icon/toolbox/Selecd/celiang1.png'
			import locationChooose from '@assets/images/map-pages/icon/toolbox/Selecd/ditu.png'
			import dowloadChooose from '@assets/images/map-pages/icon/toolbox/Selecd/xiazai.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'
			// 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'
			import lineChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/linemark.png'
			import polygonJChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/liubianxing2mark.png'
			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 '@/components/plugin/leaflet-measure-path/leaflet-measure-path.css'
			import Measure from '@/components/plugin/MeaSure'

			// 标注的方法
			import MakeTation from '@components/plugin/MakeTation'

			// 封装的选择弹框
			import BaseNavMenuItem from '@components/panel/BaseNavMenuItem'
			//
			import bus from '@/eventBus'

			export default {
			name: 'ToolBoxPanel',
			components: { BaseNavMenuItem },
			components: {
			LcBaseMap
			},
			data () {
			return {
			isShow: [],
			// currentBaseMapCode: 'tianditu_img',
			// basemapList: [],
			selectGroup: false,
			drawLayer: null,
			drawLayerArray: [],
			map: null,
			active: -1,
			checked: false,
			checkbutton: -1,
			checkedItem: false,
			Selecd: -1,
			isSelecd: -1,
			toolActive: -1,
			menuList: [
			{
			icon: circle,
			icon: 'iconjuliceliang', // plot,
			iconSelecd: plotChooose,
			label: '标绘',
			index: '1',
			items: [
			{
			index: '1-1',
			label: '点标绘'
			label: '点标绘',
			icon: 'iconlocation-full', // marker,
			title: '点标绘',
			active: false,
			iconChoose: markerChoose
			},
			{
			index: '1-2',
			label: '线标绘'
			label: '线标绘',
			icon: 'iconline', // line,
			title: '线标绘',
			active: 0,
			iconChoose: lineChoose
			},
			{
			index: '1-4',
			label: '多边形',
			icon: 'iconliubianxing1', // polygonJ,
			title: '多边形',
			active: 0,
			iconChoose: polygonJChoose
			},
			{
			index: '1-5',
			label: '矩形',
			icon: 'iconcheckbox-full', // polygonS,
			title: '矩形',
			active: 0,
			iconChoose: polygonSChoose
			},
			{
			index: '1-3',
			label: '面标绘',
			items: [
			{
			index: '1-3-1',
			label: '圆形'
			},
			{
			index: '1-3-2',
			label: '多边形'
			},
			{
			index: '1-3-3',
			label: '矩形'
			}
			]
			label: '圆形',
			icon: 'iconyuan', // polygonY,
			title: '圆形',
			active: 0,
			iconChoose: polygonYChoose
			},
			{
			index: '1-4',
			label: '删除',
			active: -1,
			icon: 'icondelete-fill', // del,
			title: '删除标绘',
			iconChoose: delChoose
			}
			]
			},
			{
			icon: location,
			label: '切换底图',
			icon: 'iconcelianggongju', // polygon,
			iconSelecd: polygonChooose,
			label: '测量',
			index: '3',
			items: [
			{
			index: '3-1',
			label: '距离',
			icon: 'iconjuliceliang', // distance,
			title: '距离测量',
			active: 0,
			iconChoose: distanceChoose
			},
			{
			index: '3-2',
			label: '面积',
			icon: 'iconmianjiceliang', // mm,
			title: '面积测量',
			active: 0,
			iconChoose: mmChoose
			},
			{
			index: '3-3',
			label: '清除',
			icon: 'icondelete-fill', // del,
			title: '清除测量',
			active: -1,
			iconChoose: delChoose
			}
			]
			},
			{
			icon: 'iconditu1', // location,
			iconSelecd: locationChooose,
			label: '地图',
			index: '2',
			items: [
			{
			label: '影像图',
			index: '2-1',
			active: 0,
			items: [
			{
			index: '2-1-1',
			@@ -94,6 +211,7 @@
			{
			label: '矢量图',
			index: '2-2',
			active: 0,
			items: [
			{
			index: '2-2-1',
			@@ -104,6 +222,7 @@
			{
			label: '地形图',
			index: '2-3',
			active: 0,
			items: [
			{
			index: '2-3-1',
			@@ -114,212 +233,353 @@
			]
			},
			{
			icon: polygon,
			label: '管网',
			index: '3',
			items: [
			{
			index: '3-1',
			label: '连通性分析'
			},
			{
			index: '3-2',
			label: '爆管分析'
			},
			{
			index: '3-3',
			label: '流向分析'
			},
			{
			index: '3-4',
			label: '横断面分析'
			}
			]
			},
			{
			icon: fullscreen,
			icon: 'icondownload', // fullscreen,
			iconSelecd: dowloadChooose,
			label: '下载',
			index: '4',
			items: [
			{
			index: '4-1',
			label: '全屏'
			label: '全屏',
			icon: 'icontianchongxing-', // FullScreen,
			active: 0,
			title: '全屏'
			},
			{
			index: '4-2',
			label: 'A4横向'
			label: 'A4横向',
			icon: 'iconsaoma', // cross,
			active: 0,
			title: 'A4横向'
			},
			{
			index: '4-3',
			label: 'A4纵向'
			label: 'A4纵向',
			icon: 'iconsaoma zongs', // vertical,
			active: 0,
			title: 'A4纵向'
			}
			]
			}
			],
			isCollapse: false,
			selectGroup: false,
			drawLayer: null,
			map: null,
			L: window.L,
			// 控制工具栏文字标注的弹框是否显示
			bouncedText: false
			]
			}
			},
			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: {
			handleOpen () {
			init (map) {
			this.map = map
			this.toolBoxPanelVisible = true
			},
			handleClose () {
			changeChoose (index) {
			if (this.drawLayer == null) {
			this.drawLayer = this.L.layerGroup().addTo(this.map)
			}
			this.active = index
			this.toolActive = -1
			// 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 = '')
			},
			handleSelect (index) {
			console.log(index)
			switch (index) {
			case '4-1':
			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 {
			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,
			iconSize: [26, 32],
			iconAnchor: [13, 16],
			popupAnchor: [26, -32]
			})
			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()
			this.drawLayerArray.push(this.drawLayer)
			this.setLogic()
			break
			case '多边形':
			this.drawLayer = this.map.editTools.startPolygon()
			this.drawLayerArray.push(this.drawLayer)
			this.setLogic()
			break
			case '矩形':
			this.drawLayer = this.map.editTools.startRectangle()
			this.drawLayerArray.push(this.drawLayer)
			this.setLogic()
			break
			case '圆形':
			this.drawLayer = this.map.editTools.startCircle()
			this.drawLayerArray.push(this.drawLayer)
			this.setLogic()
			break
			case '删除':
			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)
			break
			case '面积':
			Measure.startMeasureArea(this.map, this.L)
			break
			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', 'MyManualPrint')
			printer.printMap('CurrentSize', '全屏')
			break
			case 'A4横向':
			var printerX = this.L.easyPrint({
			sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
			filename: 'map_image',
			exportOnly: true,
			hideControlContainer: true
			hideControlContainer: true,
			hidden: true
			}).addTo(this.map)
			printerX.printMap('A4Landscape page', 'MyManualPrint')
			printerX.printMap('A4Landscape page', '横向')
			break
			case 'A4纵向':
			var printerY = this.L.easyPrint({
			sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
			filename: 'map_image',
			exportOnly: true,
			hideControlContainer: true
			hideControlContainer: true,
			hidden: true
			}).addTo(this.map)
			printerY.printMap('A4Portrait page', 'MyManualPrint')
			break
			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 '多边形':
			alert('多边形')
			break
			case '点标绘':
			MakeTation.StartPointAnnotation(this.map, this.L)
			break
			case '图标标注':
			this.drawLayer = this.map.editTools.startIcon()
			this.drawLayer.on('dblclick').on('dblclick', this.drawLayer.toggleEdit)
			break
			case '文字标注':
			this.bouncedText = true
			MakeTation.startMakeText(this.map, this.L)
			break
			case '距离测量':
			Measure.startMeasureLen(this.map, this.L)
			break
			case '面积测量':
			Measure.startMeasureArea(this.map, this.L)
			printerY.printMap('A4Portrait page', '纵向')
			break
			}
			this.active = -1
			},
			gitBounced (params) {
			this.bouncedText = params
			setLogic () {
			this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
			this.drawLayer.setStyle({
			color: 'red'
			})
			},
			changeSelect () {
			this.selectGroup = false
			},
			changeSelectMouse () {
			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">
			.lefttop-toolbox-panel {
			<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;
			}

			.animationChange-enter, .animationChange-leave-to {
			opacity: 0;
			transform: translateX(-100px);
			}

			.left-top-toolbox-panel {
			position: absolute;
			left: 15px;
			top: 15px;
			left: 0.14583rem;
			top: 0.11979rem;
			z-index: 999;

			div {
			width: 100%;
			height: 55px;
			line-height: 55px;
			.specific-tools {
			display: flex;
			align-items: center;

			.init-choose {
			background: #305B62;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			border: 2px skyblue solid;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			.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;
			}

			.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{
			color: #0B89B5;
			}
			}

			.el-menu {
			width: 100%;
			background: none;
			.el-button-choice {
			left: 500px;
			z-index: 999;
			padding: 0;
			margin: 0;
			margin-right:0.015rem;
			width: 0.2725rem;
			height: 0.2725rem;
			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;
			border: none;
			background: #305B62;
			border-radius: 50px;
			//margin-left: -30px;

			.el-icon-arrow-down:before {
			content: " ";
			.tools-panel-choose {
			border: 0.00521rem solid #fff700;
			box-shadow: 0 0 0.03rem #fff700;
			color:#fff700;
			img {
			width: 22px;
			height: 22px;
			}

			span {
			display: block;
			color: @color-shadow;
			}

			.default-span {
			display: block;
			color: @color-over;
			}
			}

			.el-submenu__title:focus, .el-submenu__title:hover {
			background: none;
			.special-button {
			width: 0.1362rem;
			height: 0.2725rem;
			background:@background-color4;
			color:@color-tool;
			border:1px solid @color-tool;
			}
			.special-button:hover{
			color: #00fff6;
			}
			}
			}

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

			}
			.el-menu--horizontal {
			.el-menu--popup {
			min-width: 100px;
			.el-menu-item {
			min-width: 50px;
			.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;
			}
			}
			}
			ul {
			padding-inline-start: 0;
			}

			</style>