~xingchuan/SewerAndRainNetwork.git

			@@ -1,46 +1,47 @@
			<template>
			<div class="panel-right" v-show="isShow">
			<div class="panel-tab">
			<!-- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"-->
			<!-- :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">-->
			<!-- <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
			<div class="container">
			<ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
			<el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
			<li style=" ">
			<!-- <span>{{item.name}}</span>-->
			<!-- <div >-->
			<img src="../../assets/images/map-pages/icon/sl.png" class="icon">
			<!-- </div>-->
			</li>
			</el-tooltip>
			</ul>
			</div>
			</div>
			<!-- <div class="panel-fold-btn" >-->
			<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
			<!-- </div>-->

			<!-- <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
			<!-- <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
			<!--<!– <div class="btn-stretch" v-if="isCollapse" </div>–>-->
			<!--<!– <div class="btn-shrink" v-else-if="!isCollapse" ></div>–>-->
			<!--<!– :style = "{width:isCollapse ? '290px' : '0px'}"–>-->
			<!-- </div>-->
			<!-- <div class="right-control" v-if="!isCollapse" >-->
			<div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
			<div class="panel-fold-btn" @click="toggleMonitorPanel">
			<!-- <div class="btn-stretch" v-if="isCollapse"></div>-->
			<!-- <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
			<div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
			</div>

			<div :class="'search-container map-background'">
			<div class="el-message-box__content" style="padding:6px;font-size: 13px;">
			<component :title="title" :is="gcComp"></component>
			</div>
			</div>
			</div>
			<transition name="searchPanelChange">
			<div style=" display: inline-flex;">
			<div class="panel-tab">
			<div class="container">
			<!-- <ul>
			<li style="text-align: right">
			<div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
			<i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
			<i class=" el-icon-d-arrow-left" v-else ></i>
			</div>
			</li>
			</ul> -->
			<ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" v-show="item.isShow" >
			<el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
			<li>
			<img src="../../assets/images/map-pages/icon/sl.png" class="icon">
			</li>
			</el-tooltip>
			</ul>
			</div>
			</div>
			<div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
			<div class="panel-fold-btn" @click="toggleMonitorPanel">
			<div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
			</div>
			<div :class="'search-container map-background'" v-show="selectGroup" >
			<div @click="setSearchPanelChange" class="el-button special-button el-button--default ">
			<i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
			<i class=" el-icon-d-arrow-left" v-else ></i>
			</div>
			<div class="el-message-box__content" style="padding:0;font-size: 13px;">
			<component :title="title" :is="gcComp"></component>
			</div>
			</div>
			</div>
			</div>
			</transition>
			<!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup">
			<div :class="selectGroup === true ?'active-button':''" class="iconBtn" @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
			<i class="el-icon-search icon"></i>
			</div>
			</el-tooltip> -->
			</div>
			</template>

			@@ -54,6 +55,7 @@
			import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
			import SewersSearch from '@components/panel/topicSearch/SewersSearch'
			import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
			import bus from '@/eventBus'
			export default {
			name: 'MonitorPanel',
			components: { GasWasteSearch, WaterWasteSearch, SolidWasteSearch, EnvRiskSearch, DischargeSearch },
			@@ -65,14 +67,14 @@
			topicCheckedList: [],
			isPanelVisible: false,
			gcComp: SewersSearch,

			gdVisible: true,
			hbVisible: false,
			pkVisible: false,
			toggleMonitorStyle: 'right:0px',

			title: '污雨水管网',
			isCollapse: true
			isCollapse: true,
			selectGroup: false
			}
			},
			computed: {},
			@@ -95,8 +97,18 @@
			handleClose (done) {
			console.log(done)
			},
			setSearchPanelChange () {
			this.selectGroup = !this.selectGroup
			if (!this.selectGroup) {
			this.topicList.forEach((itm) => {
			itm.checked = false
			})
			}
			},
			selected (val) {
			console.log(val)
			// console.log(val)
			this.title = val.name
			this.selectGroup = true
			this.topicList.forEach((itm) => {
			itm.checked = val.name === itm.name
			})
			@@ -104,13 +116,13 @@
			case '污染源':
			this.gcComp = DischargeSearch
			break
			case '废水监测':
			case '废水':
			this.gcComp = WaterWasteSearch
			break
			case '废气监测':
			case '废气':
			this.gcComp = GasWasteSearch
			break
			case '固废管理':
			case '固废':
			this.gcComp = SolidWasteSearch
			break
			case '环境风险':
			@@ -119,7 +131,7 @@
			case '土壤及地下水':
			this.gcComp = SoilGroundWaterSearch
			break
			case '污雨水管网':
			case '管线':
			this.gcComp = SewersSearch
			break
			}
			@@ -168,23 +180,49 @@
			// speed: 1000
			// })
			// }
			},
			defaultLastOne () {
			let v = {}
			this.topicList.forEach((item) => {
			if (item.isShow) {
			v = item
			}
			})
			this.selected(v)
			}
			},
			mounted () {
			const that = this
			bus.$on('changeSearchBar', function (obj) {
			// console.log(obj.checked, obj.name)
			that.topicList.forEach((item) => {
			if (item.name === obj.name) {
			item.isShow = obj.checked
			if (item.isShow) {
			that.selected(item)
			} else {
			that.defaultLastOne()
			}
			}
			})
			})
			}
			}
			</script>

			<style lang="less">
			.search-title{
			color: rgb(255, 255, 255);
			font-size: 16px;
			margin: 5px;
			}
			.searchPanelChange-enter-active {
			transform-origin: top right;
			animation: bounce-in .2s;
			}
			.searchPanelChange-leave-active {
			transform-origin: top right;
			animation: bounce-in .2s reverse;
			}
			.search-container {
			position: relative;
			width: 1.79167rem;
			height: 3.4375rem;
			/* height: 5.6475rem;*/
			overflow: hidden;
			}
			.module-wrap{
			@@ -221,8 +259,8 @@
			//top: 10px;
			height: 0;
			position: absolute;
			top: .4rem;
			right: .08333rem;
			top: 0.42979rem;
			right: 0.14583rem;
			z-index: 501;
			display: -webkit-box;
			display: -ms-flexbox;
			@@ -247,7 +285,28 @@
			// background-color: #061e51 !important;
			// border: solid 1px #0e639e !important;
			//}

			.el-button--default.special-button {
			padding: 0;
			background:@background-color4;
			color:@color-tool;
			position: absolute;
			top:24px;
			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%;
			z-index: 999;
			}
			.el-button--default.special-button:hover{
			background:@background-color;
			border:1px solid @color;
			box-shadow: 0 0 2px @color;
			color:@color;
			}
			.el-form-item__label {
			color: rgb(52, 224, 255);
			color: @color;
			@@ -443,20 +502,73 @@

			.search-form .el-icon-search {
			display: grid;
			line-height: 30px;
			font-size: 18px;
			}
			/input 点击搜索样式/
			.rightButtonSearch{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.el-input{margin-right: 10px}
			.el-icon-search{
			width: 40px;
			border:1px solid @color;
			height: 28px;
			line-height: 28px;
			text-align: center;
			color:#fff;
			border-radius: 2px;
			cursor:pointer;
			background: rgba(0,16,30,.5);
			padding:0;
			}
			}
			/单选按钮样式/
			.levelOfRisk{padding-left:20px}
			.levelOfRisk .el-radio{padding-bottom:6px}

			//.search-panel {
			// border: #07325B;
			// background-color: #07325B !important;
			// margin-top: 0px;
			//
			// .el-input__inner {
			// border-radius: 0px !important;
			// background-color: #061e51 !important;
			// }
			//}
			.levelOfRisk-type{
			display: inline-block;
			position: relative;
			padding-right: 5px;
			color:@color-shadow;
			i{
			display: block;
			width: 15px;
			height: 10px;
			position: absolute;
			top:50%;
			right: -15px;
			margin-top: -5px;
			}
			}
			.el-radio.is-checked .levelOfRisk-type{color:#409EFF}

			.environmental-risk-list{
			position: relative;
			cursor: pointer;
			padding-left:50px;
			padding-top:5px;
			padding-bottom:5px;
			color: @color-shadow;
			border-bottom:1px solid @background-color-split;
			.state{
			width: 30px;
			height: 30px;
			position: absolute;
			top:50%;
			left:10px;
			margin-top: -15px;
			border-radius: 50%;
			box-shadow: 0 0 3px #000;
			background: #0B3B6D;
			}
			}
			.environmental-risk-list.hover,
			.environmental-risk-list:hover{
			color:@color-over;
			background: @background-color;
			}

			input::-webkit-input-placeholder {
			color: #569ee1;
			@@ -620,5 +732,40 @@
			transform: translateX(0px);
			transition: transform 0.5s linear;
			}
			/****************以下公共部分********/
			.sewers-search{
			position: relative;
			overflow: hidden;
			.panel-title{}
			.search-panel{
			background-color: transparent;
			padding: 10px;
			border-bottom: 1px solid @background-color-split;
			// .el-input{width:calc(100% - 40px);position: relative}
			/deep/ input {
			border-radius: 0;
			background-color: @background-color-split ;
			border: solid 1px @color ;
			color: @color-gray;
			font-size: 0.01rem;
			padding:0 15px;
			.el-select .el-input.is-focus .el-input__inner{
			border-color: @color;
			}
			}
			.el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
			}
			.search-btn{

			}
			//location-btn{
			//
			//}
			.location-btn:hover,.el-input__icon:hover{
			color: @color;
			cursor: pointer;
			}
			}
			}

			</style>