~xingchuan/SewerAndRainNetwork.git

			@@ -1,34 +1,31 @@
			<template>
			<div class="float-panel">
			<i class="horn horn-br"></i>
			<i class="horn horn-bl"></i>
			<div class="head title-border">
			<div class="title-text-border">
			<div class="title-icon"></div>
			<div class="title-text">业务看板</div>
			<div class="title-button" :class="{'switch-head-up':true, 'switch-head-down': !panelSwitch.main}"
			@click="switchPanel">
			<!-- <i class="el-icon-arrow-down"></i> -->
			</div>
			<div :class='["float-panel",layerControllerVisible ? "active" : ""]' >

			<el-tooltip :popper-class="'map-tooltip'" effect="dark" content="图层控制" placement="left">
			<div @click="showPanel" class="iconBtn" :class='layerControllerVisible ? "active-button" : ""' v-show="!layerControllerVisible" style=" position: absolute;top:0;left: 0;">
			<!-- <img src="@assets/images/map-pages/icon/layer.png" alt="" class="icon"> -->
			<i class="icon iconfont iconlayer-group"></i>
			<!-- <span class="icon-name">图层</span>-->
			</div>
			</div>
			<div class="body-box" id="panelContent">
			<div id="panelInnerContent" :style="{ height:height }">
			<slot></slot>
			</el-tooltip>
			<transition name="layerChange">
			<div :class="'legend-content map-background'" v-show="layerControllerVisible">
			<lc-service-layer></lc-service-layer>
			<button @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button>
			</div>
			</div>
			</transition>
			</div>
			</template>

			<script>
			import '@assets/css/map/magic.min.css'
			import presets from './layerControllerPresets'

			import iconSetting from '@/assets/images/map-pages/icon/setting.png'

			import LcServiceLayer from './modules/LcServiceLayer'
			import bus from '@/eventBus'
			export default {
			name: 'LayerController',
			components: {},
			components: { LcServiceLayer },
			props: {
			preset: {
			type: String,
			@@ -44,48 +41,46 @@
			},
			layerHelper () {
			return this.$store.state.map.layerHelper
			},
			layerControllerVisible () {
			return this.$store.state.map.layerControllerVisible
			}
			},
			data () {
			return {
			height: '200px',
			width: '250px',
			isShow: true,
			icons: {
			setting: iconSetting
			},
			layerControllerVisible: false,
			panelSwitch: {
			main: true // 主窗口
			}
			}
			},
			mounted () {
			this.$nextTick(function () {
			this.init()
			const that = this
			bus.$on('changeState', function (state) {
			if (state.num !== 3 && state.type) {
			that.layerControllerVisible = false
			}
			})
			},
			methods: {
			init () {
			this.initPreset()
			},
			initPreset () {
			if (this.preset !== 'default') {
			const prmPreset = presets[this.preset]
			Object.assign(this.layerControllerVisible, prmPreset) // 防止预设参数与默认参数不一致导致报错，如果没有按照您的配置发生改变，请检查拼写是否正确
			if (prmPreset === 'undefined') {
			console.log('该图层控制面板的预设没有找到，请检查预设名称是否正确！')
			} else {
			this.$store.commit('updateLayerControllerVisible', this.layerControllerVisible)
			}
			showPanel () {
			this.layerControllerVisible = !this.layerControllerVisible
			const state = {
			type: this.layerControllerVisible,
			num: 3
			}
			bus.$emit('changeState', state)
			},
			switchPanel () {
			this.panelSwitch.main = !this.panelSwitch.main
			if (this.panelSwitch.main) {
			this.height = '200px'
			this.width = '250px'
			this.isShow = true
			} else {
			this.height = '0px'
			this.width = '0px'
			this.isShow = false
			}
			}
			}
			@@ -94,24 +89,43 @@

			<style lang="less">

			.layerChange-enter-active {
			transform-origin: top left;
			animation: bounce-in .2s;
			}
			.layerChange-leave-active {
			transform-origin: top left;
			animation: bounce-in .2s reverse;
			}
			/*

			.layerChange-enter-active,
			.layerChange-leave-active {
			transition: all 0.5s;
			}

			.layerChange-enter,
			.layerChange-leave-to {
			opacity: 0;
			transform: translateX(-100px);
			}*/
			.float-panel.active{
			overflow: visible;
			}
			.float-panel {
			position: absolute;
			left: 10px;
			bottom: 10px;
			width: 230px;
			left: 0.14583rem;
			top: 0.73979rem;
			height: auto;
			font-size: 11px;
			z-index: 1000;

			div {
			color: #90c8e0;
			display: flex;
			min-height: 0.28rem;
			min-width: 0.28rem;
			overflow: hidden;
			.iconBtn.active{
			display: none;
			}

			#panelInnerContent {
			overflow: hidden;
			transition: all 0.5s linear;
			}

			.title-border {
			width: 100%;
			height: 28px;
			@@ -146,11 +160,12 @@
			}

			.title-text-border {
			width: 100%;
			height: 28px;
			width: 30px;
			height: 120px;
			float: left;
			background: #091331;
			-webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
			clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
			// -webkit-clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
			// clip-path: polygon(1px 1px, 1px 27px, 229px 27px, 229px 10px, 94px 10px, 85px 1px);
			}

			.title-icon {
			@@ -159,18 +174,16 @@
			height: 22px;
			margin-top: 4px;
			margin-left: 2px;
			background-image: url(/assets/images/map-pages/icon/setting.png);
			background-image: url(../../assets/images/map-pages/icon/setting.png);
			}

			.title-text {
			float: left;
			width: 150px;
			width: 25px;
			color: #00d0f9;
			margin-left: 4px;
			line-height: 20px;
			font-weight: bold;
			margin-top: 6px;
			text-align: left;
			text-align: center;
			font-size: 14px;
			filter: brightness(100%);
			text-shadow: 0 0 5px #00d0f9, 0 0 0 #00d0f9, 0 0 0 #00d0f9, 0 0 0 #0258c5, 0 0 0 #0258c5, 0 0 2px #0258c5, 0 0 5px #0258c5, 0 0 15px #0258c5;
			}
			@@ -212,28 +225,14 @@
			background-color: rgba(44, 62, 80, 0.6);
			border: 1px solid #10488c;
			margin-top: -1px;
			margin-left: 30px;
			height: auto;
			}

			.switch-head-up {
			width: 22px;
			height: 16px;
			float: right;
			margin-top: 10px;
			margin-right: 10px;
			cursor: pointer;
			background-image: url(/assets/images/map-pages/icon/xljt1.png);
			transform: rotateX(0deg);
			transform-origin: 50% 50%;
			transition: transform 0.5s linear 0s;
			}

			.switch-head-down {
			transform: rotateX(180deg);
			transform-origin: 50% 50%;
			transition: transform 0.5s linear 0s;
			transition: transform 2s linear 0s;
			}

			select {
			background: transparent;
			margin: 6px;
			@@ -242,38 +241,6 @@
			color: #569EB7;
			padding: 0 16px;
			}

			.horn {
			width: 6px;
			height: 6px;
			float: left;
			position: absolute;
			}

			.horn-tl {
			background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
			left: -1px;
			top: -1px;
			}

			.horn-tr {
			background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
			right: -1px;
			top: -1px;
			}

			.horn-bl {
			background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
			left: -1px;
			bottom: -1px;
			}

			.horn-br {
			background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
			right: -1px;
			bottom: -1px;
			}

			::-webkit-scrollbar {
			width: 7px;
			height: 5px !important;
			@@ -293,6 +260,31 @@
			border-radius: 0px;
			background: #0E3565;
			}
			.el-button--default{
			padding: 0;
			background:@background-color4;
			color:@color-tool;
			position: absolute;
			top:20px;
			right:0.02rem;
			border:none;//1px solid @color-tool;
			width: 0.2rem;
			height: 0.2rem;
			text-align: center;
			line-height: 0.2rem;
			margin-top: -0.1rem;
			border-radius: 50%;
			// border-radius: 0.03rem 50% 50% 0.03rem;
			}
			.el-button--default:hover{
			background:@background-color;
			border:1px solid @color;
			box-shadow: 0 0 2px @color;
			color:@color;
			}
			.legend-content{
			//width: 1.79167rem;
			}
			}

			</style>