From 0bd34c441a3e2592500be5d3577d5c52d29e5416 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期五, 09 四月 2021 09:44:07 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/RightSearchPanel.vue | 361 +++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 277 insertions(+), 84 deletions(-) diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue index 13b6e48..28910bb 100644 --- a/src/components/panel/RightSearchPanel.vue +++ b/src/components/panel/RightSearchPanel.vue @@ -1,54 +1,66 @@ <template> - <div class="panel-right"> - <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 class="module-wrap" - style="padding-top: 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"> - <li class="active module-wrap__box"> - <div class="module-wrap__box-item"> - <!----><img src="../../assets/images/map-pages/icon/dd.png" class="icon"> - </div><!----> - </li> - </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> - <component :title="title" :is="gcComp"></component> - </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 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> + </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 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' export default { name: 'MonitorPanel', - components: { EnvProtectSearch, DischargeSearch }, + components: { GasWasteSearch, WaterWasteSearch, SolidWasteSearch, EnvRiskSearch, DischargeSearch }, data () { return { + isShow: true, topicMenu: [], topicList: TopicList, topicCheckedList: [], @@ -61,8 +73,8 @@ toggleMonitorStyle: 'right:0px', title: '姹¢洦姘寸缃�', - - isCollapse: false + isCollapse: true, + selectGroup: true } }, computed: {}, @@ -75,7 +87,6 @@ this.topicList.forEach((item) => { this.topicCheckedList.forEach((itm) => { if (item.name === itm) { - // item.checked = tr this.topicMenu.push(item) } }) @@ -86,7 +97,45 @@ 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 + } + }, handlePage (page) { }, handleGd () { @@ -139,17 +188,56 @@ </script> <style lang="less"> -@import '@assets/css/map/_map-variable'; + .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; +} +.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; + img{ + width: 0.1rem; + height: 0.1rem; + + } + } +} .panel-right { - width: 322px; + display: inline-flex; + //width: 322px; //height: 100%; //position: absolute; //right: 10px; //top: 10px; height: 0; position: absolute; - top: .60417rem; - right: .15625rem; + top: 0.42979rem; + right: 0.14583rem; z-index: 501; display: -webkit-box; display: -ms-flexbox; @@ -158,23 +246,44 @@ -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-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; + 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; @@ -281,8 +390,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;*/ @@ -304,8 +413,8 @@ } .tab-item { - width: 32px; - height: 30px; + //width: .2rem; + //height: .2rem; color: @color; font-size: 12px; background-color: #0B3B6D; @@ -314,13 +423,9 @@ 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; @@ -374,20 +479,73 @@ .search-form .el-icon-search { display: grid; - line-height: 30px; font-size: 18px; } - - .search-panel { - border: #07325B; - background-color: #07325B !important; - margin-top: 0px; - - .el-input__inner { - border-radius: 0px !important; - background-color: #061e51 !important; + /*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; + 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; @@ -551,5 +709,40 @@ 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; + } + } } + </style> -- Gitblit v1.8.0