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 | 133 ++++++++++++++++++++++++++++---------------- 1 files changed, 84 insertions(+), 49 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue index c116585..9f36a5e 100644 --- a/src/components/LayerController/modules/LcServiceLayerFilter.vue +++ b/src/components/LayerController/modules/LcServiceLayerFilter.vue @@ -1,73 +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> - <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="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> + <!-- </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 } } } @@ -75,36 +113,33 @@ <style scoped lang="less"> .inner-panel { - width: 500px; - color: #90c8e0; font-size: 13px; - position: absolute; - left: 300px; + 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; + padding-bottom: 5px; //overflow-y: hidden; } + // //::-webkit-scrollbar { // width: 7px; -- Gitblit v1.8.0