<template>
|
<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 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"> -->
|
<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>
|
</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 EnvRiskSearch from './topicSearch/EnvRiskSearch'
|
import DischargeSearch from './topicSearch/DischargeSearch'
|
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'
|
|
import bus from '@/eventBus'
|
|
export default {
|
name: 'MonitorPanel',
|
components: {
|
GasWasteSearch,
|
WaterWasteSearch,
|
SolidWasteSearch,
|
EnvRiskSearch,
|
DischargeSearch,
|
EnterpriseEmergencySearch
|
},
|
data () {
|
return {
|
isShow: true,
|
topicMenu: [],
|
topicList: TopicList,
|
topicCheckedList: [],
|
isPanelVisible: false,
|
gcComp: SewersSearch,
|
gdVisible: true,
|
hbVisible: false,
|
pkVisible: false,
|
toggleMonitorStyle: 'right:0px',
|
title: '污雨水管网',
|
isCollapse: true,
|
selectGroup: false
|
}
|
},
|
computed: {},
|
watch: {
|
'$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
|
console.log(oldVal)
|
console.log(newVal)
|
this.topicCheckedList = newVal
|
this.topicMenu = []
|
this.topicList.forEach((item) => {
|
this.topicCheckedList.forEach((itm) => {
|
if (item.name === itm) {
|
this.topicMenu.push(item)
|
}
|
})
|
})
|
}
|
},
|
methods: {
|
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)
|
this.title = val.name
|
this.selectGroup = true
|
this.topicList.forEach((itm) => {
|
itm.checked = val.name === itm.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) {
|
},
|
handleGd () {
|
this.title = '管道信息查询'
|
},
|
toggleMonitorPanel () {
|
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 = $('#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
|
// })
|
// }
|
},
|
defaultLastOne () {
|
let v = {}
|
this.topicList.forEach((item) => {
|
if (item.isShow) {
|
v = item
|
}
|
})
|
this.selected(v)
|
}
|
},
|
mounted () {
|
const that = this
|
bus.$on('changeSearchBar', function (obj) {
|
that.gcComp = ''
|
that.topicList.forEach((item) => {
|
if (item.name === obj.name) {
|
if (obj.type > 0) {
|
item.isShow = true
|
} else {
|
item.isShow = false
|
}
|
// item.isShow = obj.checked
|
if (item.isShow) {
|
that.selected(item)
|
} else {
|
that.defaultLastOne()
|
}
|
}
|
})
|
})
|
// console.log(that.topicList)
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.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;
|
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-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: 20px;
|
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-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;
|
}
|
|
.el-input__inner::placeholder {
|
color: #9a9494;
|
}
|
|
/* 谷歌 */
|
|
.el-input__inner::-webkit-input-placeholder {
|
color: #9a9494;
|
}
|
|
/* 火狐 */
|
|
.el-input__inner:-moz-placeholder {
|
color: #9a9494;
|
}
|
|
/*ie*/
|
|
.el-input__inner:-ms-input-placeholder {
|
color: #9a9494;
|
}
|
|
.warning {
|
color: #dcc805;
|
}
|
|
#plateNumber_n a {
|
color: rgb(52, 224, 255);
|
}
|
|
.offline {
|
color: #9a9494;
|
}
|
|
.customInput {
|
width: 118px;
|
}
|
|
.btn-ok {
|
margin-right: 10px;
|
width: 4rem;
|
background-color: #0B89B5;
|
color: white;
|
border: 0;
|
}
|
|
.btn-reset {
|
margin-right: 10px;
|
width: 4rem;
|
background-color: orange;
|
color: white;
|
border: 0;
|
}
|
|
.component-fade-enter-active, .component-fade-leave-active {
|
transition: opacity .5s ease;
|
}
|
|
.component-fade-enter, .component-fade-leave-to
|
/* .component-fade-leave-active for below version 2.1.8 */ {
|
opacity: 0;
|
}
|
|
.B-TMD-table-icons ul li {
|
float: left;
|
margin: 10px;
|
list-style: none;
|
}
|
|
.B-TMD-table-list {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.B-TMD-table-list-title {
|
width: 100%;
|
height: 30px;
|
}
|
|
.B-TMD-table-list-head {
|
//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;
|
|
transform: rotateY(180deg);
|
transform-origin: 50% 50%;
|
transition: transform 1s linear;
|
}
|
}
|
|
.tab-item {
|
//width: .2rem;
|
//height: .2rem;
|
color: @color;
|
font-size: 12px;
|
background-color: #0B3B6D;
|
}
|
|
.tab-item:hover {
|
cursor: pointer;
|
}
|
|
.panel-tab {
|
position: relative;
|
z-index: 500;
|
margin-right: .025rem;
|
|
.container {
|
max-height: 3.125rem;
|
overflow: hidden;
|
position: relative;
|
position: relative;
|
}
|
|
}
|
|
.right-control {
|
/*width: 290px;*/
|
//height: 573px;
|
height: 100%;
|
position: relative;
|
//top: 0;
|
//right: 0;
|
z-index: 500;
|
//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;
|
}
|
|
.panel_header {
|
// background-color: #030D2E;
|
padding: 8px 15px 3px 20px;
|
}
|
|
.panel_title {
|
font-size: 12px;
|
/*margin: 0px;*/
|
/*padding: 0px;*/
|
color: #78c4ff;
|
font-weight: bold;
|
}
|
|
.el-message-box__content {
|
background-color: transparent;
|
}
|
|
.search-form .el-form-item {
|
/*margin: 0px;*/
|
margin-bottom: 8px;
|
}
|
|
.search-form .el-icon-search {
|
display: grid;
|
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
|
}
|
|
.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 {
|
color: #569ee1;
|
}
|
|
input::-moz-placeholder {
|
color: #569ee1;
|
}
|
|
input::-ms-input-placeholder {
|
color: #569ee1;
|
}
|
|
input[type=text]:focus {
|
outline: 1px solid #17e4f6;
|
// box-shadow: 1px 0px 3px 0px #17e4f6;
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
}
|
|
.search-result {
|
margin: 5px 0px 0px 0px;
|
padding: 0px;
|
border: #051842;
|
//height: 290px;
|
height: calc(~"100vh - 180px");
|
overflow-y: scroll;
|
background-color: transparent !important;
|
margin-bottom: -8px !important;
|
}
|
|
.offline {
|
color: #64778B;
|
}
|
|
.B-TMD-table-list {
|
margin-top: 10px;
|
text-align: left;
|
padding-left: 10px;
|
//color: #64778B;
|
color: #34e0ff;
|
width: 100%;
|
line-height: 25px;
|
background: url('../../assets/images/map-pages/icon/dd.png') no-repeat;
|
}
|
|
.B-TMD-inp-button {
|
width: 46px;
|
height: 52px;
|
position: absolute;
|
bottom: 8px;
|
right: 16px;
|
background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
|
cursor: pointer;
|
}
|
|
.footer-page {
|
// position: absolute;
|
background-color: transparent !important;
|
// 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;
|
background-color: transparent;
|
// border: 1px solid #25AECD;
|
border-left: 1px solid #25AECD;
|
border-bottom: 1px solid #25AECD;
|
border-top: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
|
.el-pager li {
|
color: #e4e8f1;
|
background: transparent;
|
// border: 1px solid #25AECD;
|
border-left: 1px solid #25AECD;
|
border-bottom: 1px solid #25AECD;
|
border-top: 1px solid #25AECD;
|
}
|
|
.el-pager li.active {
|
border-color: #25AECD;
|
background-color: rgba(38, 222, 253, 0.3);
|
color: #e4e8f1;
|
}
|
|
.el-pager li:hover {
|
border-color: #25AECD;
|
background-color: rgba(38, 222, 253, 0.3);
|
color: #34e0ff;
|
}
|
|
.btn-prev {
|
background-color: transparent;
|
// border: 1px solid #25AECD;
|
border-left: 1px solid #25AECD;
|
border-bottom: 1px solid #25AECD;
|
border-top: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
|
.btn-next {
|
background-color: transparent;
|
border: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
}
|
}
|
|
::-webkit-scrollbar {
|
width: 7px;
|
height: 5px !important;
|
}
|
|
::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #0661AE;
|
border: 1px solid transparent;
|
}
|
|
::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
border-radius: 0px;
|
background: #0E3565;
|
}
|
|
.selectFrom {
|
color: #061e51;
|
border: 1px solid #061e51 !important;
|
background: #dcc805 !important;
|
|
.el-select-dropdown__list {
|
background: #061e51 !important;
|
}
|
|
.el-select-dropdown__item {
|
color: #949494;
|
background: #061e51 !important;
|
}
|
|
.el-select-dropdown__item.hover,
|
.el-select-dropdown__item:hover {
|
color: #fff;
|
background: #061e51 !important;
|
}
|
|
.popper__arrow {
|
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>
|
