~xingchuan/SewerAndRainNetwork.git

			@@ -1,97 +1,312 @@
			<template>
			<div class="lefttop-toolbox-panel">
			<ul>
			<li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"
			:class="{'active':activeTools[i]}">
			<img :src="item"/>
			</li>
			</ul>
			<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
			@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>-->
			</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'
			import Measure from '@/components/plugin/MeaSure'

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

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

			export default {
			name: 'ToolBoxPanel',
			components: {},
			components: { BaseNavMenuItem },
			data () {
			return {
			isPanelVisible: false,
			total: 0,
			activeTools: {},
			imgList: {
			circle: circle,
			square: square,
			fullscreen: fullscreen,
			legend: legend,
			location: location,
			polygon: polygon
			},
			form: {
			regionType: '',
			enterprise: ''
			}
			menuList: [
			{
			icon: circle,
			label: '标绘',
			index: '1',
			items: [
			{
			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: '矩形'
			}
			]
			}
			]
			},
			{
			icon: location,
			label: '切换底图',
			index: '2',
			items: [
			{
			label: '影像图',
			index: '2-1',
			items: [
			{
			index: '2-1-1',
			label: '影像標注'
			}
			]
			},
			{
			label: '矢量图',
			index: '2-2',
			items: [
			{
			index: '2-2-1',
			label: '矢量標注'
			}
			]
			},
			{
			label: '地形图',
			index: '2-3',
			items: [
			{
			index: '2-3-1',
			label: '地形標注'
			}
			]
			}
			]
			},
			{
			icon: polygon,
			label: '管网',
			index: '3',
			items: [
			{
			index: '3-1',
			label: '连通性分析'
			},
			{
			index: '3-2',
			label: '爆管分析'
			},
			{
			index: '3-3',
			label: '流向分析'
			},
			{
			index: '3-4',
			label: '横断面分析'
			}
			]
			},
			{
			icon: fullscreen,
			label: '下载',
			index: '4',
			items: [
			{
			index: '4-1',
			label: '全屏'
			},
			{
			index: '4-2',
			label: 'A4横向'
			},
			{
			index: '4-3',
			label: 'A4纵向'
			}
			]
			}
			],
			isCollapse: false,
			selectGroup: false,
			drawLayer: null,
			map: null,
			L: window.L,
			// 控制工具栏文字标注的弹框是否显示
			bouncedText: false
			}
			},
			methods: {
			handleClose (done) {
			console.log(done)
			handleOpen () {
			},
			handleClick (tab, event) {
			console.log(tab, event)
			handleClose () {
			},
			toggleActive (k) {
			this.total++
			this.activeTools[k] = !this.activeTools[k]
			},
			loadData () {
			handleSelect (index, indexPath) {

			},
			gitBounced (params) {
			this.bouncedText = params
			},
			changeSelect () {
			this.selectGroup = !this.selectGroup
			},
			handleSelects (command) {
			console.log(command)
			switch (command) {
			case '全屏':
			// this.map.toggleFullscreen()
			var printer = this.L.easyPrint({
			sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
			filename: 'map_image',
			exportOnly: true,
			hideControlContainer: true
			}).addTo(this.map)
			printer.printMap('CurrentSize', 'MyManualPrint')
			break
			case 'A4横向':
			var printerX = this.L.easyPrint({
			sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
			filename: 'map_image',
			exportOnly: true,
			hideControlContainer: true
			}).addTo(this.map)
			printerX.printMap('A4Landscape page', 'MyManualPrint')
			break
			case 'A4纵向':
			var printerY = this.L.easyPrint({
			sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
			filename: 'map_image',
			exportOnly: true,
			hideControlContainer: 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)
			break
			}
			}
			},
			mounted () {
			this.loadData()
			},
			created () {
			}
			}
			</script>

			<style lang="less">

			.lefttop-toolbox-panel {
			position: absolute;
			left: 5px;
			top: 5px;
			z-index: 1000;
			width: 180px;
			height: 35px;
			line-height: 30px;
			background: #07325b;
			border: 1px solid #5EF2FF;
			border-radius: 3px;
			text-align: center;
			left: 15px;
			top: 15px;
			z-index: 999;

			ul {
			list-style: none;
			margin: 0;
			padding: 5px;
			div {
			width: 100%;
			height: 55px;
			line-height: 55px;
			display: flex;
			align-items: center;
			justify-content: space-around;

			li {
			float: left;
			width: 23px;
			height: 23px;
			margin: 0 1px;
			border: 1px solid #07325b;
			.init-choose {
			background: @background-color;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			border: 2px skyblue solid;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;
			}

			.el-menu {
			width: 80%;
			background: none;
			z-index: 1;
			border: none;
			background: #305B62;
			border-radius: 50px;
			}
			}

			.active {
			border: 1px solid #5EF2FF;
			}
			//.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>