| | |
| | | </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)}" > |
| | | <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"> |
| | |
| | | <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 "> |
| | | <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 6px 6px 6px;font-size: 13px;"> |
| | | <div class="el-message-box__content" style="padding:0;font-size: 13px;"> |
| | | <component :title="title" :is="gcComp"></component> |
| | | </div> |
| | | </div> |
| | |
| | | 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 }, |
| | |
| | | topicCheckedList: [], |
| | | isPanelVisible: false, |
| | | gcComp: SewersSearch, |
| | | |
| | | gdVisible: true, |
| | | hbVisible: false, |
| | | pkVisible: false, |
| | |
| | | |
| | | title: '污雨水管网', |
| | | isCollapse: true, |
| | | selectGroup: true |
| | | selectGroup: false |
| | | } |
| | | }, |
| | | computed: {}, |
| | |
| | | case '污染源': |
| | | this.gcComp = DischargeSearch |
| | | break |
| | | case '废水监测': |
| | | case '废水': |
| | | this.gcComp = WaterWasteSearch |
| | | break |
| | | case '废气监测': |
| | | case '废气': |
| | | this.gcComp = GasWasteSearch |
| | | break |
| | | case '固废管理': |
| | | case '固废': |
| | | this.gcComp = SolidWasteSearch |
| | | break |
| | | case '环境风险': |
| | |
| | | case '土壤及地下水': |
| | | this.gcComp = SoilGroundWaterSearch |
| | | break |
| | | case '污雨水管网': |
| | | case '管网': |
| | | this.gcComp = SewersSearch |
| | | break |
| | | } |
| | |
| | | // 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> |
| | |
| | | .search-container { |
| | | position: relative; |
| | | width: 1.79167rem; |
| | | /*height: 5.6475rem;*/ |
| | | /* height: 5.6475rem;*/ |
| | | overflow: hidden; |
| | | } |
| | | .module-wrap{ |
| | |
| | | .panel-title{} |
| | | .search-panel{ |
| | | background-color: transparent; |
| | | padding: 10px 0; |
| | | padding: 10px; |
| | | border-bottom: 1px solid @background-color-split; |
| | | // .el-input{width:calc(100% - 40px);position: relative} |
| | | /deep/ input { |