From 2e876ee0ba719df9a0008c2eb93de5a6d3697ee7 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期二, 13 四月 2021 11:01:20 +0800
Subject: [PATCH] 修改 图层控制和搜索组件联动。
---
src/components/panel/RightSearchPanel.vue | 45 +++++++++++++++++-----
src/conf/Topic.js | 15 +++++--
src/components/panel/LegendPanel.vue | 15 +++++++
src/components/LayerController/modules/LcServiceLayer.vue | 13 ++++--
4 files changed, 67 insertions(+), 21 deletions(-)
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
index f6af058..153db9d 100644
--- a/src/components/LayerController/modules/LcServiceLayer.vue
+++ b/src/components/LayerController/modules/LcServiceLayer.vue
@@ -7,7 +7,7 @@
<i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
<!-- 涓�绾у浘灞傞亶鍘� -->
<div style="padding-left:25px;padding-top:10px;color:#fff">
- <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
+ <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item,'')"/>{{ item.name }}
</div>
<div class="layerbox-item" v-show="item.isShow">
<!-- 浜岀骇鍥惧眰閬嶅巻 -->
@@ -16,7 +16,7 @@
:name="'wmsSublayers_'+item.code+'_'+itm.code"
:checked="itm.checked"
:value="itm.code"
- @change="swAllLayers(itm)"/>{{ itm.name }}
+ @change="swAllLayers(itm,item.name)"/>{{ itm.name }}
<!-- 涓夌骇鍥惧眰閬嶅巻 -->
<div class="layerbox-item-3">
<div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
@@ -24,7 +24,7 @@
:name="'wmsSublayers_'+item.code+'_'+layer.code"
:checked="layer.checked"
:value="layer.code"
- @change="swAllLayers(layer)"/>
+ @change="swAllLayers(layer,'')"/>
<span :style="'color:'+layer.color">{{ layer.name }}</span>
</div>
</div>
@@ -39,7 +39,7 @@
<script>
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
-
+import bus from '@/eventBus'
export default {
name: 'LcServiceLayer',
components: { LcServiceLayerFilter },
@@ -51,11 +51,14 @@
mounted () {
},
methods: {
- swAllLayers (item) {
+ swAllLayers (item, v) {
// eslint-disable-next-line no-debugger
item.checked = !item.checked
this.toggleLayer(item)
this.swLayers(item.layers, item.checked)
+ if (v === '涓撻鍥惧眰') {
+ bus.$emit('changeSearchBar', item)
+ }
},
swLayers (layers, checked) {
if (layers) {
diff --git a/src/components/panel/LegendPanel.vue b/src/components/panel/LegendPanel.vue
index d14a1b3..36e0efd 100644
--- a/src/components/panel/LegendPanel.vue
+++ b/src/components/panel/LegendPanel.vue
@@ -32,7 +32,7 @@
import { LayerPipeLines } from '../../conf/layers/LayerPipeLines'
import { LayerPk } from '../../conf/layers/LayerPk'
import { LayerArea } from '../../conf/layers/LayerArea'
-
+import bus from '@/eventBus'
export default {
name: 'LegendPanel',
data () {
@@ -42,10 +42,23 @@
serviceLayers: [LayerSoilGroundWater, LayerEnvRisk, LayerAirQuality, LayerWasteSolid, LayerWasteGas, LayerWasteWater, LayerArea, LayerPk, LayerPipeLines]
}
},
+ mounted () {
+ const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 4 && state.type) {
+ that.isShow = false
+ }
+ })
+ },
methods: {
// 鍥炬爣 鎺у埗鍐呭鐨勫睍绀轰笌闅愯棌
legendChange () {
this.isShow = !this.isShow
+ const state = {
+ type: this.isShow,
+ num: 4
+ }
+ bus.$emit('changeState', state)
}
}
}
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 28910bb..cc2ba13 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -12,7 +12,7 @@
</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">
@@ -26,11 +26,11 @@
<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>
@@ -55,6 +55,7 @@
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 },
@@ -66,7 +67,6 @@
topicCheckedList: [],
isPanelVisible: false,
gcComp: SewersSearch,
-
gdVisible: true,
hbVisible: false,
pkVisible: false,
@@ -74,7 +74,7 @@
title: '姹￠洦姘寸缃�',
isCollapse: true,
- selectGroup: true
+ selectGroup: false
}
},
computed: {},
@@ -116,13 +116,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 +131,7 @@
case '鍦熷￥鍙婂湴涓嬫按':
this.gcComp = SoilGroundWaterSearch
break
- case '姹￠洦姘寸缃�':
+ case '绠＄綉':
this.gcComp = SewersSearch
break
}
@@ -180,9 +180,32 @@
// 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>
@@ -199,7 +222,7 @@
.search-container {
position: relative;
width: 1.79167rem;
- /*height: 5.6475rem;*/
+ /* height: 5.6475rem;*/
overflow: hidden;
}
.module-wrap{
@@ -716,7 +739,7 @@
.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 {
diff --git a/src/conf/Topic.js b/src/conf/Topic.js
index 49707dd..bcf296e 100644
--- a/src/conf/Topic.js
+++ b/src/conf/Topic.js
@@ -15,42 +15,49 @@
name: '姹℃煋婧�',
id: 1,
check: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}, {
- name: '搴熸按鐩戞祴',
+ name: '搴熸按',
id: 2,
checked: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}, {
- name: '搴熸皵鐩戞祴',
+ name: '搴熸皵',
id: 3,
checked: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}, {
- name: '鍥哄簾绠＄悊',
+ name: '鍥哄簾',
id: 4,
checked: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}, {
name: '鐜椋庨櫓',
id: 5,
checked: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}, {
name: '鍦熷￥鍙婂湴涓嬫按',
id: 6,
checked: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}, {
- name: '姹￠洦姘寸缃�',
+ name: '绠＄嚎',
id: 7,
checked: false,
+ isShow: true,
icon: '/assets/images/menu/special.png',
comp: ''
}]
--
Gitblit v1.8.0