From 48c4a38d875f85f1d2de1dd844ca871308b39638 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 13 四月 2021 17:29:19 +0800
Subject: [PATCH] 右侧管线/历史
---
src/components/panel/RightSearchPanel.vue | 519 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 303 insertions(+), 216 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 28910bb..446cb33 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,47 +1,49 @@
<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)}" >
- <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" 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>
- <div class="el-message-box__content" style="padding:0 6px 6px 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>
- </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>
+ <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>
- </el-tooltip> -->
+ <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>
@@ -55,9 +57,17 @@
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 },
+ components: {
+ GasWasteSearch,
+ WaterWasteSearch,
+ SolidWasteSearch,
+ EnvRiskSearch,
+ DischargeSearch
+ },
data () {
return {
isShow: true,
@@ -66,7 +76,6 @@
topicCheckedList: [],
isPanelVisible: false,
gcComp: SewersSearch,
-
gdVisible: true,
hbVisible: false,
pkVisible: false,
@@ -74,7 +83,7 @@
title: '姹￠洦姘寸缃�',
isCollapse: true,
- selectGroup: true
+ selectGroup: false
}
},
computed: {},
@@ -116,13 +125,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 '鐜椋庨櫓':
@@ -131,7 +140,7 @@
case '鍦熷￥鍙婂湴涓嬫按':
this.gcComp = SoilGroundWaterSearch
break
- case '姹￠洦姘寸缃�':
+ case '绠＄嚎':
this.gcComp = SewersSearch
break
}
@@ -153,63 +162,91 @@
// 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
+ // })
+ // }
+ },
+ 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">
- .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: 5.6475rem;*/
- overflow: hidden;
+.searchPanelChange-enter-active {
+ transform-origin: top right;
+ animation: bounce-in .2s;
}
-.module-wrap{
+
+.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);
+ background: rgba(0, 16, 30, .5);
border-radius: .03125rem;
- border: .00521rem solid rgba(255,247,0,.5);
+ border: .00521rem solid rgba(255, 247, 0, .5);
margin: .04167rem 0;
font-size: .08333rem;
-webkit-transition: all .2s linear;
@@ -217,16 +254,19 @@
cursor: pointer;
position: relative;
line-height: 0.15rem;
- li{
+
+ li {
margin: 0.00521rem 0;
text-align: center;
- img{
+
+ img {
width: 0.1rem;
height: 0.1rem;
}
}
}
+
.panel-right {
display: inline-flex;
//width: 322px;
@@ -262,28 +302,30 @@
// 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-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;
@@ -377,18 +419,20 @@
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;
@@ -398,8 +442,9 @@
transform: rotateY(0deg);
transform-origin: 50% 50%;
transition: transform 1s linear;
- /*transition: 3s linear;*/
+ /*transition: 3s linear;*/
}
+
.btn-shrink {
width: 20px;
height: 40px;
@@ -419,14 +464,17 @@
font-size: 12px;
background-color: #0B3B6D;
}
- .tab-item:hover{
+
+ .tab-item:hover {
cursor: pointer;
}
+
.panel-tab {
position: relative;
z-index: 500;
margin-right: .025rem;
- .container{
+
+ .container {
max-height: 3.125rem;
overflow: hidden;
position: relative;
@@ -446,10 +494,12 @@
//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;
@@ -481,71 +531,90 @@
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}
+ /*input 鐐瑰嚮鎼滅储鏍峰紡*/
- .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;
- }
+ .rightButtonSearch {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .el-input {
+ margin-right: 10px
}
- .environmental-risk-list.hover,
- .environmental-risk-list:hover{
- color:@color-over;
- background: @background-color;
+
+ .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;
+ 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;
@@ -672,7 +741,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;
}
@@ -701,48 +770,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 0;
- 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;
- }
+ /******************浠ヤ笅鍏叡閮ㄥ垎**********/
+
+ .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>
--
Gitblit v1.8.0