From 5d17a60f704cd141ddfa4e135258d0d4d5d1eb69 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期三, 03 三月 2021 17:39:46 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/components/LayerController/modules/LcServiceLayerFilter.vue | 187 +++++++++++++++++++++++++--------------------- 1 files changed, 100 insertions(+), 87 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue index 1749296..28d5521 100644 --- a/src/components/LayerController/modules/LcServiceLayerFilter.vue +++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue @@ -1,115 +1,128 @@ <template> - <div class="inner-panel"> - <div class="filter-group"> - <div v-for="item in filterConfig" :key="item.code" class="filter-item"> - <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" @change="swAllSubFilter(item)">{{item.name}}</div> - <div class="content"> - <div v-for="filter in item.filters" :key="filter.code"> - <input type="checkbox" :value="filter.code" :checked="filter.checked"><label :title="filter.name">{{filter.sname}}</label> - </div> - </div> - </div> - </div> - </div> + <div class="inner-panel"> + <div class="filter-group"> + <div v-for="item in pointLayers" :key="item.code" class="filter-item"> + <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" + @change="swAllSubFilter(item)">{{item.name}} + </div> + <div class="content"> + <div v-for="filter in item.layers" :key="filter.code"> + <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(item.url,filter)"><label + :title="filter.name">{{filter.name}}</label> + </div> + </div> + </div> + </div> + </div> </template> <script> -import { mapState, mapMutations } from "vuex"; +import { mapMutations } from 'vuex' + export default { - name: "LcServiceLayerFilter", + name: 'LcServiceLayerFilter', components: {}, - data() { + data () { return { - filterConfig: [], // 闄勫睘瑕佺礌 - }; + visible: {}, + filterConfig: [] // 闄勫睘瑕佺礌 + } }, computed: { - ...mapState({ - serviceLayerHelper: (state) => { - return state.serviceLayerHelper - }, - selectedServiceLayer: (state) => { - return state.selectedServiceLayer - }, - serviceLayerFilters: (state) => { - return state.serviceLayerFilters - } - }), + config () { + return this.$store.state.map.config + }, + pointLayers () { + // 鏍规嵁绾垮浘灞傞�変腑鎯呭喌锛屾樉绀烘垨闅愯棌鐐瑰浘灞傞潰鏉� + var serviceLayers = this.config.mapConfig.Layers.LayerSewersLine // 涓�绾у浘灞� + var checkedLayers = window.serviceLayerHelper.getCheckedLayers(serviceLayers) + var pointLayers = this.config.mapConfig.Layers.layerSewersPoint // 浜岀骇鍥惧眰 + return pointLayers.filter(function (layer) { + var code = layer.code + for (var i = 0; i < checkedLayers.length; i++) { + var checkedLayer = checkedLayers[i] + if (checkedLayer.childLayer.indexOf(code) >= 0) { + return checkedLayer + } + } + }) + } }, - mounted() { - + mounted () { + // this.filterConfig = window.serviceLayerHelper.getWMSConfig().filtersGroup }, methods: { ...mapMutations([]), - getFilterConfig(){ - return this.filterConfig + swAllSubFilter (item) { + item.checked = !item.checked + console.log(item) + // window.serviceLayerHelper.loadLayers() }, - swAllSubFilter(item){ - item.checked = !item.checked - for(let i = 0, len = item.filters.length; i < len; ++i){ - item.filters[i].checked = item.checked - } - } - }, - watch: { - selectedServiceLayer(newVal){ - this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup + swSubFilter (url, item) { + item.checked = !item.checked + if (item.checked) { + window.serviceLayerHelper.loadGeojsonLayer(url, item) + } else { + window.serviceLayerHelper.removeLayer(item) } + // window.serviceLayerHelper.loadLayers() + } } -}; +} </script> <style scoped lang="less"> -.inner-panel { - color:#90c8e0; - font-size: 13px; + .inner-panel { + color: #90c8e0; + font-size: 13px; - position: absolute; - left: 250px; - bottom: 10px; - z-index: 1000; - height: 220px; - width: 500px; + position: absolute; + left: 300px; + z-index: 1000; + height: 220px; - .filter-group{ - display: flex; - flex-flow: row; + .filter-group { + display: flex; + flex-flow: row; - .filter-item{ - width: 120px; - height: 100%; - margin-right: 5px; + .filter-item { + width: 120px; + height: 100%; + margin-right: 5px; - .title{ - height: '25px'; - background-color: #091331; - border: 1px solid #10488c; - } - .content{ - background-color: rgba(44,62,80, 0.6); - border: 1px solid #10488c; - max-height: 200px; - overflow-y: auto; - } + .title { + height: '25px'; + background-color: #091331; + border: 1px solid #10488c; + } - ::-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; + .content { + background-color: rgba(44, 62, 80, 0.6); + border: 1px solid #10488c; + max-height: 200px; + overflow-y: auto; + } + + ::-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; + } } } } -} </style> -- Gitblit v1.8.0