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/LayerController/modules/LcServiceLayerFilter.vue | 171 ++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 104 insertions(+), 67 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue index c4a6cef..9f36a5e 100644 --- a/src/components/LayerController/modules/LcServiceLayerFilter.vue +++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue @@ -1,71 +1,111 @@ <template> <div class="inner-panel"> <div class="filter-group"> - <div v-for="item in pointLayers" :key="item.code" class="filter-item"> + <div v-for="item in layers" :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" @change="swSubFilter(item.url,filter)"><label - :title="filter.name">{{filter.name}}</label> + <!-- <el-scrollbar style="height:100%"> --> + <div class="content"> + <div v-for="filter in item.layers" :key="filter.code"> + <input type="checkbox" :value="filter.code" :checked="filter.checked" + @change="swAllSubFilter(filter)"><label + :title="filter.name">{{filter.name}}</label> + </div> </div> - </div> + <!-- </el-scrollbar> --> </div> </div> </div> </template> <script> -import { mapMutations } from 'vuex' +import { LayerSewersPoint } from '@src/conf/layers/LayerSewers' export default { name: 'LcServiceLayerFilter', - components: {}, + components: { }, data () { return { visible: {}, + layerSewersPoint: LayerSewersPoint, + layers: [], filterConfig: [] // 闄勫睘瑕佺礌 } }, computed: { + serviceLayers () { + return this.$store.state.map.serviceLayers.LayerSewersLine + }, 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 () { - // this.filterConfig = window.serviceLayerHelper.getWMSConfig().filtersGroup - }, methods: { - ...mapMutations([]), swAllSubFilter (item) { + // eslint-disable-next-line no-debugger item.checked = !item.checked - console.log(item) - // window.serviceLayerHelper.loadLayers() + this.toggleLayer(item) + this.swLayers(item.layers, item.checked) }, - swSubFilter (url, item) { - item.checked = !item.checked + swLayers (layers, checked) { + if (layers) { + for (let i = 0, len = layers.length; i < len; ++i) { + var layer = layers[i] + layer.checked = checked + this.toggleLayer(layer) + if (layer.layers) { + this.swLayers(layer.layers, checked) + } + } + } + }, + // todo 杩橀渶瑕佷紭鍖栵紝鍦ㄦ湁澶氫釜闇�瑕佸瓙鍥惧眰鐙珛寮圭獥鎯呭喌涓嬫棤鏁� + // 鐩戝惉涓婄骇鍥惧眰瀛樺湪鐙珛寮圭獥鐨勯�変腑鎯呭喌 + toggle (serviceLayers) { + if (serviceLayers) { + for (var i = 0; i < serviceLayers.length; i++) { + var serviceLayer = serviceLayers[i] + var childLayer = serviceLayer.childLayer + if (childLayer) { + if (this.checkChecked(serviceLayer.layers)) { + this.layers = childLayer + } else { + this.layers = [] + } + break + } else { + this.toggle(serviceLayer.layers) + } + } + } + }, + checkChecked (serviceLayers) { + for (var i = 0; i < serviceLayers.length; i++) { + var serviceLayer = serviceLayers[i] + var checked = serviceLayer.checked + if (checked) { + return true + } + } + }, + toggleLayer (item) { if (item.checked) { - window.serviceLayerHelper.loadGeojsonLayer(url, item) + window.layerFactory.show(item) } else { - window.serviceLayerHelper.removeLayer(item) + window.layerFactory.hide(item) } // window.serviceLayerHelper.loadLayers() + } + }, + watch: { + // 姝ゅ闇�瑕佹繁搴︾洃鍚浘灞傞�変腑鐘舵�侊紝浣跨敤computed鏃犳晥 + '$store.state.map.serviceLayers.LayerSewersLine': { + handler: function (val) { + this.toggle(val) + }, + immediate: true, + deep: true } } } @@ -73,56 +113,53 @@ <style scoped lang="less"> .inner-panel { - color: #90c8e0; font-size: 13px; - position: absolute; - left: 250px; - bottom: 10px; + left: 1.82167rem; z-index: 1000; - height: 220px; - + top: 50px; .filter-group { display: flex; flex-flow: row; - .filter-item { - width: 120px; + width: 0.6rem; height: 100%; margin-right: 5px; - + background-color: @background-color; + box-shadow: 0 0 0.03rem #00fff6; + border-radius: 0.03rem; .title { - height: '25px'; - background-color: #091331; - border: 1px solid #10488c; + border-bottom:1px solid @background-color-split; + padding: 5px 0; + background-color: @background-color; } .content { - background-color: rgba(44, 62, 80, 0.6); - border: 1px solid #10488c; max-height: 200px; - overflow-y: auto; + padding-bottom: 5px; + //overflow-y: hidden; } - ::-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; - } + // + //::-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; + //} } } } -- Gitblit v1.8.0