~xingchuan/SewerAndRainNetwork.git

			@@ -1,62 +1,99 @@
			<template>
			<div id="right-panel">
			<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="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
			<!-- <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></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 class="panel-right" v-show="isShow">
			<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 list" :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"> -->
			<i class="icon iconfont" :class="item.icon"></i>
			</li>
			</el-tooltip>
			</ul>
			</div>
			</div>
			<div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " v-if="gcComp!=''">
			<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>
			<component :title="title" :is="gcComp"></component>
			</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>

			<script>
			// import $ from 'jquery'
			import EnvProtectSearch from './topicSearch/EnvProtectSearch'
			import EnvRiskSearch from './topicSearch/EnvRiskSearch'
			import DischargeSearch from './topicSearch/DischargeSearch'
			import { TopicList } from '../../conf/Topic'
			import { topicList } from '../../conf/Topic'

			import GasWasteSearch from '@components/panel/topicSearch/GasWasteSearch'
			import WaterWasteSearch from '@components/panel/topicSearch/WaterWasteSearch'
			import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
			import SewersSearch from '@components/panel/topicSearch/SewersSearch'
			import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
			import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
			import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'
			import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch'

			export default {
			name: 'MonitorPanel',
			components: { EnvProtectSearch, DischargeSearch },
			components: {
			GasWasteSearch,
			WaterWasteSearch,
			SolidWasteSearch,
			EnvRiskSearch,
			DischargeSearch,
			EnterpriseEmergencySearch
			},
			data () {
			return {
			isShow: true,
			topicMenu: [],
			topicList: TopicList,
			list: topicList,
			topicCheckedList: [],
			isPanelVisible: false,
			gcComp: SewersSearch,

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

			title: '污雨水管网',

			isCollapse: false
			isCollapse: true,
			selectGroup: false
			}
			},
			computed: {},
			computed: {
			serviceLayers () {
			return this.$store.state.map.serviceLayers.LayerSewersLine
			}
			}, /*
			watch: {
			'$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
			console.log(oldVal)
			@@ -66,22 +103,85 @@
			this.topicList.forEach((item) => {
			this.topicCheckedList.forEach((itm) => {
			if (item.name === itm) {
			// item.checked = tr
			this.topicMenu.push(item)
			}
			})
			})
			}
			},
			}, */
			methods: {
			handleClose (done) {
			console.log(done)
			},

			handlePage (page) {
			setSearchPanelChange () {
			// 搜索面板没有显示时，将所有主题选择状态设置为false
			this.selectGroup = !this.selectGroup
			if (!this.selectGroup) {
			this.list.forEach((itm) => {
			itm.checked = false
			})
			}
			},
			handleGd () {
			this.title = '管道信息查询'
			unselected (val) {
			// console.log(val)
			this.selectGroup = true
			this.list.forEach((itm) => {
			if (itm.name === val.name) {
			console.log(val.name)
			itm.checked = false
			itm.isShow = false
			}
			})
			},
			selected (val) {
			// console.log(val)
			this.selectGroup = true
			this.list.forEach((itm) => {
			if (itm.name === val.name) {
			itm.isShow = true
			itm.checked = true
			} else {
			itm.checked = false
			}
			})
			this.setComp(val)
			},
			setComp (val) {
			this.title = val.name
			switch (val.name) {
			case '污染源':
			this.gcComp = DischargeSearch
			break
			case '废水':
			this.gcComp = WaterWasteSearch
			break
			case '废气':
			this.gcComp = GasWasteSearch
			break
			case '固废':
			this.gcComp = SolidWasteSearch
			break
			case '环境风险':
			this.gcComp = EnvRiskSearch
			break
			case '土壤及地下水':
			this.gcComp = SoilGroundWaterSearch
			break
			case '管线':
			this.gcComp = SewersSearch
			break
			case '管道变更':
			this.gcComp = PipeChangesSearch
			break
			case '管道信息':
			this.gcComp = PipeInformationSearch
			break
			case '企业应急':
			this.gcComp = EnterpriseEmergencySearch
			break
			}
			},
			handlePage (page) {
			},
			toggleMonitorPanel () {
			this.isCollapse = !this.isCollapse
			@@ -90,70 +190,202 @@
			// const el = document.getElementsByClassName('.btn-stretch')
			// const el2 = document.getElementsByClassName('.panel-fold-btn')
			// let = 'btn-stretch-active'
			// var rightControl = $('#right-panel')
			// var rightControl = document.getElementById('#right-panel')
			// var rightControl = $('#panel-right')
			// var rightControl = document.getElementById('#panel-right')
			// const right = rightControl.css('right')
			// const rightit = rightControl.ownerDocument.defaultView
			// const right = rightit.getComputedStyle(rightit, null).right
			// if (right === '10px') {
			// rightControl.animate({
			// right: '-322px'
			// })
			// el.css({
			// transform: 'rotateY(180deg)',
			// 'transform-origin': '50% 50%',
			// transition: 'transform 1s linear'
			// })
			// el2.animate({
			// right: '320px',
			// speed: 1000
			// })
			// } else {
			// rightControl.animate({
			// right: '10px'
			// })
			// el.css({
			// transform: 'rotateY(0deg)',
			// 'transform-origin': '50% 50%',
			// transition: 'transform 1s linear'
			// })
			// el2.animate({
			// right: '290px',
			// speed: 1000
			// })
			// }
			// if (right === '10px') {
			// rightControl.animate({
			// right: '-322px'
			// })
			// el.css({
			// transform: 'rotateY(180deg)',
			// 'transform-origin': '50% 50%',
			// transition: 'transform 1s linear'
			// })
			// el2.animate({
			// right: '320px',
			// speed: 1000
			// })
			// } else {
			// rightControl.animate({
			// right: '10px'
			// })
			// el.css({
			// transform: 'rotateY(0deg)',
			// 'transform-origin': '50% 50%',
			// transition: 'transform 1s linear'
			// })
			// el2.animate({
			// right: '290px',
			// speed: 1000
			// })
			// }
			},
			containsLayer (layer) {
			if (layer) {
			for (let i = 0; i < layer.length; i++) {
			const lay = layer[i]
			const checked = lay.checked

			for (let j = 0; j < this.list.length; j++) {
			const topic = this.list[j]
			if (lay.name === topic.name) {
			if (lay.layers) {
			const isChecked = this.isChecked(lay.layers)
			if (isChecked) {
			this.selected(topic)
			} else {
			this.unselected(topic)
			}
			} else if (checked) {
			this.selected(topic)
			}
			break
			}
			}
			this.containsLayer(lay.layers)
			}
			}
			},
			isChecked (layers) {
			for (let i = 0; i < layers.length; i++) {
			const layer = layers[i]
			const checked = layer.checked
			if (checked) {
			return true
			}
			if (layer.layers) {
			return this.isChecked(layer.layers)
			}
			}
			return false
			}
			},
			mounted () {
			/* bus.$on('changeSearchBar', (obj) => {
			const topic = this.search(this.serviceLayers, obj)
			console.log('====' + JSON.stringify(topic))
			}) */
			},
			watch: {
			serviceLayers: {
			handler: function (newVal, oldVal) {
			this.containsLayer(newVal)
			},
			immediate: true,
			deep: true
			}
			}
			}
			</script>

			<style lang="less">
			@import '@assets/css/map/_map-variable';
			#right-panel {
			width: 322px;
			//height: 573px;
			height: 100%;
			.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;
			//width: 2.39167rem;
			width: 2.3rem;
			/* height: 5.6475rem;*/
			overflow: hidden;
			}

			.module-wrap {
			width: 0.15rem;
			height: 0.15rem;
			padding: .04167rem;
			//padding: .00521rem;
			background: rgba(0, 16, 30, .5);
			border-radius: .03125rem;
			border: .00521rem solid rgba(255, 247, 0, .5);
			margin: .04167rem 0;
			font-size: .08333rem;
			-webkit-transition: all .2s linear;
			transition: all .2s linear;
			cursor: pointer;
			position: relative;
			line-height: 0.15rem;
			li {
			margin: 0.00521rem 0;
			text-align: center;
			font-size: 20px;

			img {
			width: 0.1rem;
			height: 0.1rem;

			}
			}
			}

			.panel-right {
			display: inline-flex;
			//width: 322px;
			//height: 100%;
			//position: absolute;
			//right: 10px;
			//top: 10px;
			height: 0;
			position: absolute;
			right: 10px;
			top: 10px;
			top: 0.73979rem;
			right: 0.14583rem;
			z-index: 501;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: start;
			-ms-flex-align: start;
			align-items: flex-start;

			.el-card__body {
			padding: 7px;
			}
			.el-form-item__content {
			color: rgb(52, 224, 255);
			//.el-card__body {
			// padding: 7px;
			//}
			//.el-form-item__content {
			// color: rgb(52, 224, 255);
			//}
			//
			//.el-picker-panel {
			// background-color: #061e51 !important;
			//}
			//
			//.el-input__inner {
			// border-radius: 0 !important;
			// 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;
			left: 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-picker-panel {
			background-color: #061e51 !important;
			}

			.el-input__inner {
			border-radius: 0 !important;
			background-color: #061e51 !important;
			border: solid 1px #0e639e !important;
			.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 {
			@@ -249,29 +481,32 @@
			text-overflow: ellipsis;
			white-space: nowrap;
			}
			.panel-fold-btn{

			.panel-fold-btn {
			overflow: hidden;
			position: absolute;
			top:45%;
			top: 45%;
			left: -18px;
			/left: 0px;/
			//right: 320px;
			/right: 290px;/
			z-index: 1000;
			/right: 0px;/
			background-color: rgba(5,24,66,.8);
			background-color: rgba(5, 24, 66, .8);
			border-radius: 10px 0 0 10px;

			.btn-stretch {
			width: 20px;
			height: 40px;
			//width: 20px;
			//height: 40px;
			background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
			cursor: pointer;
			/margin-left: -20px;/
			transform: rotateY(0deg);
			transform-origin: 50% 50%;
			transition: transform 1s linear;
			/transition: 3s linear;/
			/transition: 3s linear;/
			}

			.btn-shrink {
			width: 20px;
			height: 40px;
			@@ -285,23 +520,29 @@
			}

			.tab-item {
			width: 32px;
			height: 30px;
			//width: .2rem;
			//height: .2rem;
			color: @color;
			font-size: 12px;
			background-color: #0B3B6D;
			}
			.tab-item:hover{

			.tab-item:hover {
			cursor: pointer;
			}

			.panel-tab {
			position: absolute;
			left: 0;
			//height: 120px;
			top: 0;
			width: 32px;
			position: relative;
			z-index: 500;
			background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
			margin-right: .025rem;

			.container {
			max-height: 3.125rem;
			overflow: hidden;
			position: relative;
			position: relative;
			}

			}

			.right-control {
			@@ -309,16 +550,18 @@
			//height: 573px;
			height: 100%;
			position: relative;
			top: 0;
			right: 0;
			z-index: 999;
			background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
			background-size: 100% 98%;
			//top: 0;
			//right: 0;
			z-index: 500;
			//background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
			//background-size: 100% 98%;
			}
			.a{

			.a {
			transform: translateX(328px);
			transition: transform 3s linear;
			}
			}

			.panel_searchTotal {
			font-size: 12px;
			float: right;
			@@ -348,19 +591,92 @@

			.search-form .el-icon-search {
			display: grid;
			line-height: 30px;
			font-size: 18px;
			}

			.search-panel {
			border: #07325B;
			background-color: #07325B !important;
			margin-top: 0px;
			/input 点击搜索样式/

			.el-input__inner {
			border-radius: 0px !important;
			background-color: #061e51 !important;
			.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
			}

			.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;
			padding-left: 50px;
			padding-top: 5px;
			padding-bottom: 5px;
			color: @color-shadow;
			border-bottom: 1px solid @background-color-split;
			h3{ cursor: pointer;}
			.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{
			background: @background-color;
			}
			.environmental-risk-list.hover h3,
			.environmental-risk-list h3:hover {
			color: @color-highlight;
			}

			input::-webkit-input-placeholder {
			@@ -418,12 +734,16 @@
			}

			.footer-page {
			position: absolute;
			// position: absolute;
			background-color: transparent !important;
			bottom: 10px !important;
			margin-left: 0px;
			// bottom: 10px !important;
			// margin-left: 0px;
			border: none;

			margin: 0;
			border-top: 1px solid rgba(0, 255, 246, 0.14);
			.el-card__body{
			padding: 5px;
			}
			.warnPagination {
			.btn-quicknext, .btn-quickprev {
			color: #e4e8f1 !important;
			@@ -488,7 +808,7 @@

			::-webkit-scrollbar-track {
			/滚动条里面轨道/
			box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0px;
			background: #0E3565;
			}
			@@ -517,13 +837,66 @@
			background-color: #061e51 !important;
			}
			}

			.unfold {
			transform: translateX(332px);
			transition: transform 0.5s linear;
			}

			.shrink {
			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>