~xingchuan/SewerAndRainNetwork.git

			@@ -1,43 +1,45 @@
			<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>
			<el-tooltip :popper-class="'map-tooltip'" effect="dark" content="工具" placement="left">
			<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>
			<transition name="animationChange">
			<el-row v-show="selectGroup" class="specific-tools-group">
			<el-popover
			trigger="manual"
			placement="bottom"
			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)">
			<img :src="item.iconSelecd" alt="" v-if="active === index && checked === true"/>
			<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)"
			v-show="item.index!=='2'">
			<img :src="itemT.iconChoose" :title="itemT.title" v-if="Selecd === indexT && checked === true"/>
			<img :src="itemT.icon" :title="itemT.title" v-else/>
			<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="!isShow&&item.index==='2'">
			<div v-for="item in 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)"/>
			<el-checkbox class="base-map-anno" name="basemap" v-model="item.conf.annotationCheck"
			label="标注" @change="changeBasemap(item)">
			</el-checkbox>
			</div>
			</div>
			<!-- <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">
			<i class="el-icon-d-arrow-left"></i>
			@@ -49,6 +51,7 @@
			</template>

			<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'
			@@ -85,18 +88,34 @@
			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'

			export default {
			name: 'ToolBoxPanel',
			components: {
			LcBaseMap
			},
			data () {
			return {
			isShow: [],
			// currentBaseMapCode: 'tianditu_img',
			// basemapList: [],
			selectGroup: false,
			drawLayer: null,
			drawLayerArray: [],
			map: null,
			active: -1,
			checked: false,
			checkbuuton: -1,
			isShow: true,
			currentBaseMapCode: 'tianditu_img',
			basemapList: [],
			checkbutton: -1,
			checkedItem: false,
			Selecd: -1,
			isSelecd: -1,
			menuList: [
			{
			icon: plot,
			@@ -224,85 +243,58 @@
			{
			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纵向'
			}
			]
			}
			],
			selectGroup: false,
			drawLayer: null,
			drawLayerArray: [],
			map: null,
			// L: window.L,
			active: -1,
			Selecd: -1
			}
			},
			computed: {
			basemapHelper () {
			return this.$store.state.map.basemapHelper
			}
			},
			watch: {
			basemapHelper (newVal) {
			if (newVal != null) {
			this.updateBasemapList()
			}
			]
			}
			},
			methods: {
			updateBasemapList () {
			this.basemapList = this.basemapHelper.getBasemapList()
			},
			changeBasemap (itm) {
			const code = itm.code
			this.basemapList.forEach((item) => {
			if (item.code === code) {
			console.log(this.currentBaseMapCode)
			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.getBasemapList().forEach((item) => {
			item.layer.bringToBack()
			})
			}
			})
			init (map) {
			this.map = map
			this.toolBoxPanelVisible = true
			},
			changeChoose (index) {
			this.active = index
			if (this.drawLayer == null) {
			this.drawLayer = this.L.layerGroup().addTo(this.map)
			}
			if (this.checkbuuton === index) {
			this.checked = !this.checked
			} else {
			if (this.checkbuuton === -1) {
			this.checked = !this.checked
			} else {
			this.checked = true
			this.active = index
			console.log(this.basemapList)
			for (let i = 0; i < this.isShow.length; i++) {
			if (i !== index) {
			this.isShow[i] = false
			}
			}
			this.checkbuuton = index
			// 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({
			@@ -314,6 +306,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 +345,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 +356,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,11 +366,13 @@
			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 () {
			this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
			@@ -386,8 +381,13 @@
			})
			},
			changeSelect () {
			this.selectGroup = !this.selectGroup
			this.selectGroup = false
			this.isShow = !this.isShow
			this.active = -1
			},
			changeSelectMouse () {
			this.selectGroup = true
			this.isShow = []
			}
			}
			}
			@@ -405,22 +405,21 @@

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

			.specific-tools {
			display: flex;

			.el-button {
			overflow: hidden;
			.el-button {
			z-index: 999;
			padding: 0;
			margin: 0 0.015rem;
			width: 45px;
			height: 45px;
			background: @background-color-tools;
			border: none;

			width: 0.2725rem;
			height: 0.2725rem;
			background: @background-color;
			vertical-align: middle !important;
			.base-map-img {
			position: absolute;
			}
			@@ -428,83 +427,44 @@
			.base-map-img:hover {
			cursor: pointer;
			}

			img {
			width: 22px;
			height: 22px;
			}

			.span-default {
			display: block;
			font-size: 10px;
			}
			span {
			display: block;
			color: @color-tool;
			font-size: 10px;
			}

			a {
			display: block;
			color: @color-shadow;
			}
			.specific-tools-group .el-button{
			span{
			color: #0B89B5;
			}
			}

			.el-button-choice {
			left: 500px;
			z-index: 999;
			padding: 0;
			margin: 0 0.015rem;
			width: 45px;
			height: 45px;
			background: @background-color-tools;
			border: 1px solid @color-shadow;
			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;
			//.tools-panel-content {
			// width:220px!important;
			//}
			.base-map-inner-panel {
			//width: 230px!important;
			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: white;

			.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;
			@@ -517,15 +477,70 @@

			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: 0.1362rem;
			height: 0.2725rem;
			color: #C0C4CC;
			border-radius: 0.03rem 50% 50% 0.03rem;
			}
			.special-button:hover{
			color: #00fff6;
			}
			}
			}
			}
			.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;
			}
			}
			}

			</style>