~xingchuan/SewerAndRainNetwork.git

			@@ -1,269 +1,116 @@
			<template>
			<div id="right-panel">
			<div class="panel-tab">
			<div class="btn-stretch" @click="toggleMonitorPanel"></div>
			<div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
			<div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
			<div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
			<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="right-control">
			<div class="el-message-box__header panel_header">
			<div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
			</div>
			</div>
			<div class="el-message-box__content" style="padding:6px;font-size: 13px;">
			<div class="monitor1" v-if="gdVisible">
			<div>
			<el-card class="search-panel">
			<el-form ref="form" :model="form" label-width="90px" class="search-form">
			<el-form-item label="类型：">
			<el-select v-model="form.pipelineType" @change="handlePipelineType">
			<el-option
			v-for="item in pipelineTypeOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value">
			</el-option>
			</el-select>
			</el-form-item>
			<el-form-item label="数据类型：">
			<el-select v-model="form.dataType">
			<el-option
			v-for="item in dataTypeOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value">
			</el-option>
			</el-select>
			</el-form-item>
			<el-form-item label="模糊搜索：">
			<el-input v-model="form.key" size="mini"
			placeholder="在此输入关键字"></el-input>
			</el-form-item>
			<el-form-item>
			<input type="button" class="btn-ok" @click="handleSearch" value="查询">
			<input type="button" class="btn-reset" @click="handleSearch" value="重置">
			</el-form-item>
			</el-form>
			</el-card>
			<el-card class="search-result" style="height:271px;">
			<div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
			<div class="B-TMD-table-list-title">
			<div class="B-TMD-table-list-head">
			<div class="B-TMD-table-list-title-y"
			:class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
			<span>运单号：</span>
			<span id="waybillNumber" class="B-TMD-table-list-title-y-num"
			:title="item.transNo">
			<span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
			</span>
			</div>
			<div class="B-TMD-table-list-title-c">
			载具号：
			<span id="plateNumber_p">
			<span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
			</span>
			</div>
			</div>
			<div class="B-TMD-table-icons" style="float:right">
			<ul>
			<li class="B-TMD-table-list-title-y-adress"
			@click="handleLocation(item)"></li>
			<li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
			</ul>
			</div>
			</div>
			<div class="B-TMD-table-list-content">
			<div>
			<span>发货企业：</span>
			<span id="b_twe_consignment" :title="item.outWarehouseName">{{
			item.outWarehouseName == null ? "暂无" : item.outWarehouseName
			}}</span>
			</div>
			<div>
			<span>承  运  商：</span>
			<span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
			</div>
			<div><span>收货企业：</span> <span
			id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
			</div>
			<div class="B-TMD-table-list-bottom">
			<div class="B-TMD-table-list-bottom-name">
			货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
			</div>
			</div>
			</el-card>
			<!-- <div class="panel-fold-btn" >-->
			<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
			<!-- </div>-->

			<el-card class="footer-page" v-if="total > 10">
			<el-pagination
			small
			@current-change="handlePage"
			:page-size=pageSize
			layout="prev, pager, next"
			:total=total
			:current-page=current
			class="warnPagination"
			>
			</el-pagination>
			</el-card>
			</div>
			</div>
			<div class="monitor2" v-if="hbVisible">
			<env-protect-search></env-protect-search>
			</div>
			<div class="monitor2" v-if="pkVisible">
			<discharge-search></discharge-search>
			</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>
			<component :title="title" :is="gcComp"></component>
			</div>
			</div>
			</template>

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

			import SewersSearch from '@components/panel/topicSearch/SewersSearch'
			export default {
			name: 'MonitorPanel',
			components: { EnvProtectSearch, DischargeSearch },
			data () {
			return {
			topicMenu: [],
			topicList: TopicList,
			topicCheckedList: [],
			isPanelVisible: false,
			gcComp: 'sewersSearch',

			gdVisible: true,
			hbVisible: false,
			pkVisible: false,
			toggleMonitorStyle: 'right:0px',
			list: [],
			title: '管道信息查询',
			pipelineTypeOptions: [{
			value: '1',
			label: '管线本体'
			}, {
			value: '2',
			label: '附属设施'
			}],
			dataTypeOptions: [],
			attachOptions: [{
			value: '1',
			label: '阀门'
			}, {
			value: '2',
			label: '管廊'
			}, {
			value: '3',
			label: '管架'
			}, {
			value: '4',
			label: '三通'
			}, {
			value: '5',
			label: '四通'
			}, {
			value: '6',
			label: '弯头'
			}],
			pipelineOptions: [{
			value: '1',
			label: '管线'
			}, {
			value: '2',
			label: '雨水管段'
			}, {
			value: '3',
			label: '含盐管段'
			}, {
			value: '4',
			label: '含油管段'
			}, {
			value: '5',
			label: '事故水管段'
			}, {
			value: '6',
			label: '含碱管段'
			}, {
			value: '7',
			label: '循环水管段'
			}, {
			value: '8',
			label: '净化水管段'
			}, {
			value: '9',
			label: '生活污水管段'
			}],
			form: {
			transNo: null,
			carrierName: null,
			transMode: null,
			vehicleNo: null,
			orderState: null,
			size: 10,
			current: 1
			},
			pageSize: 10,
			current: 1,
			isWaybillHover: true,
			isRouteHover: false

			title: '污雨水管网',

			isCollapse: false
			}
			},
			computed: {},
			watch: {},
			computed: {
			topicMenu () {
			console.log(this.$store.state.map.topic.topicCheckedList)
			return this.$store.state.map.topic.topicCheckedList
			}
			},
			methods: {
			handleClose (done) {
			console.log(done)
			},
			handlePipelineType (item) {
			console.log(item)
			if (item === '2') {
			this.dataTypeOptions = this.attachOptions
			} else if (item === '1') {
			this.dataTypeOptions = this.pipelineOptions
			}
			},

			handlePage (page) {
			},
			handleGd () {
			this.gdVisible = true
			this.hbVisible = false
			this.pkVisible = false
			this.title = '管道信息查询'
			},
			handleHb () {
			this.gdVisible = false
			this.hbVisible = true
			this.pkVisible = false
			this.title = '环保设施查询'
			},
			handlePk () {
			this.gdVisible = false
			this.hbVisible = false
			this.pkVisible = true
			this.title = '排口信息查询'
			},
			toggleMonitorPanel () {
			const el = $('.btn-stretch')
			// let cs = 'btn-stretch-active'
			var rightControl = $('#right-panel')
			const right = rightControl.css('right')
			if (right === '10px') {
			rightControl.animate({
			right: '-290px'
			})
			el.css({
			transform: 'rotateY(180deg)',
			'transform-origin': '50% 50%',
			transition: 'transform 1s linear'
			})
			} else {
			rightControl.animate({
			right: '10px'
			})
			el.css({
			transform: 'rotateY(0deg)',
			'transform-origin': '50% 50%',
			transition: 'transform 1s linear'
			})
			}
			this.isCollapse = !this.isCollapse
			// const el = $('.btn-stretch')
			// const el2 = $('.panel-fold-btn')
			// 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')
			// 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
			// })
			// }
			}
			},
			mounted () {
			@@ -272,9 +119,11 @@
			</script>

			<style lang="less">
			@import '@assets/css/map/_map-variable';
			#right-panel {
			width: 322px;
			height: 573px;
			//height: 573px;
			height: 100%;
			position: absolute;
			right: 10px;
			top: 10px;
			@@ -299,6 +148,7 @@

			.el-form-item__label {
			color: rgb(52, 224, 255);
			/<!--color: @color;-->/
			}

			.el-input__inner::placeholder {
			@@ -378,53 +228,66 @@

			.B-TMD-table-list-title {
			width: 100%;
			height: 50px;
			height: 30px;
			}

			.B-TMD-table-list-head {
			width: 160px;
			//width: 160px;
			float: left;
			padding-left: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			}
			.panel-fold-btn{
			overflow: hidden;
			position: absolute;
			top:45%;
			left: -18px;
			/left: 0px;/
			//right: 320px;
			/right: 290px;/
			z-index: 1000;
			/right: 0px;/
			background-color: rgba(5,24,66,.8);
			border-radius: 10px 0 0 10px;
			.btn-stretch {
			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;/
			}
			.btn-shrink {
			width: 20px;
			height: 40px;
			background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
			cursor: pointer;

			.btn-stretch {
			width: 15px;
			height: 28px;
			background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
			margin-left: 10px;
			margin-top: 3px;
			cursor: pointer;

			transform: rotateY(180deg);
			transform-origin: 50% 50%;
			transition: transform 1s linear;
			transform: rotateY(180deg);
			transform-origin: 50% 50%;
			transition: transform 1s linear;
			}
			}

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

			.tab-hb {
			width: 32px;
			height: 30px;
			background-color: #545454;
			.tab-item:hover{
			cursor: pointer;
			}

			.tab-pk {
			width: 32px;
			height: 30px;
			background-color: #83a6c4;
			}

			.panel-tab {
			position: absolute;
			left: 0;
			height: 120px;
			//height: 120px;
			top: 0;
			width: 32px;
			z-index: 500;
			@@ -432,15 +295,20 @@
			}

			.right-control {
			width: 290px;
			height: 573px;
			position: absolute;
			/width: 290px;/
			//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%;
			}

			.a{
			transform: translateX(328px);
			transition: transform 3s linear;
			}
			.panel_searchTotal {
			font-size: 12px;
			float: right;
			@@ -448,13 +316,13 @@

			.panel_header {
			// background-color: #030D2E;
			padding: 7px 15px 3px 20px;
			padding: 8px 15px 3px 20px;
			}

			.panel_title {
			font-size: 12px;
			margin: 0px;
			padding: 0px;
			/margin: 0px;/
			/padding: 0px;/
			color: #78c4ff;
			font-weight: bold;
			}
			@@ -464,7 +332,8 @@
			}

			.search-form .el-form-item {
			margin: 0px;
			/margin: 0px;/
			margin-bottom: 8px;
			}

			.search-form .el-icon-search {
			@@ -506,7 +375,8 @@
			margin: 5px 0px 0px 0px;
			padding: 0px;
			border: #051842;
			height: 290px;
			//height: 290px;
			height: calc(~"100vh - 180px");
			overflow-y: scroll;
			background-color: transparent !important;
			margin-bottom: -8px !important;
			@@ -608,7 +478,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;
			}
			@@ -637,5 +507,13 @@
			background-color: #061e51 !important;
			}
			}
			.unfold {
			transform: translateX(332px);
			transition: transform 0.5s linear;
			}
			.shrink {
			transform: translateX(0px);
			transition: transform 0.5s linear;
			}
			}
			</style>