Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

seatonwan9

2021-05-30 0039429882f8434000a0f61d6995324f1589633a

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -1,112 +1,175 @@
<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 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="swAllSubFilter(filter)"><label :title="filter.name">{{filter.name}}</label>
                        </div>
                    </div>
                <!--  </el-scrollbar> -->
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "LcServiceLayerFilter",
  components: {},
  data() {
  name: 'LcServiceLayerFilter',
  components: { },
  data () {
    return {
      filterConfig: [], // 附属要素
    };
      visible: {},
      layers: [],
      changeList: [],
      filterConfig: [] // 附属要素
    }
  },
  computed: {
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper
      },
      selectedServiceLayer: (state) => {
        return state.selectedServiceLayer
      },
    }),
  },
  mounted() {
    
    serviceLayers () {
      return this.$store.state.map.serviceLayers.LayerSewersLine
    },
    config () {
      return this.$store.state.map.config
    }
  },
  methods: {
    ...mapMutations([]),
    getFilterConfig(){
        return this.filterConfig
    },
    swAllSubFilter(item){
        item.checked = !item.checked
        for(let i = 0, len = item.filters.length; i < len; ++i){
            item.filters[i].checked = item.checked
    swAllSubFilter (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      this.toggleLayer(item)
      if (item.layers && item.layers.length > 0) {
        this.swLayers(item.layers, item.checked)
        if (item.checked) {
          window.layerFactory.showAll(this.changeList)
        } else {
          window.layerFactory.hideAll(this.changeList)
        }
        this.changeList = []
      } else {
        this.toggleLayer(item)
      }
    },
    swLayers (configs, checked) {
      if (configs) {
        for (let i = 0, len = configs.length; i < len; ++i) {
          const config = configs[i]
          const layers = config.layers
          this.changeList.push(config)
          if (layers) {
            this.swLayers(config, checked)
          }
          config.checked = 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.layerFactory.show(item)
      } else {
        window.layerFactory.hide(item)
      }
      // window.serviceLayerHelper.loadLayers()
    }
  },
  watch: {
      selectedServiceLayer(newVal){
          this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
      }
    // 此处需要深度监听图层选中状态，使用computed无效
    '$store.state.map.serviceLayers.LayerSewersLine': {
      handler: function (val) {
        this.toggle(val)
      },
      immediate: true,
      deep: true
    }
  }
};
}
</script>

<style scoped lang="less">
.inner-panel {
    color:#90c8e0;
    font-size: 13px;
    .inner-panel {
        font-size: 13px;
        position: absolute;
       // left: 1.82167rem;
        left: 2.13167rem;
        z-index: 1000;
        top: 50px;
        .filter-group {
            display: flex;
            flex-flow: row;
            .filter-item {
                width: 0.6rem;
                height: 100%;
                margin-right: 5px;
                background-color: @background-color;
                box-shadow: 0 0 0.03rem #00fff6;
                border-radius: 0.03rem;
                .title {
                    border-bottom:1px solid @background-color-split;
                    padding: 5px 0;
                    background-color: @background-color;
                }

    position: absolute;
    left: 250px;
    bottom: 10px;
    z-index: 1000;
    height: 220px;
    width: 500px;

    .filter-group{
        display: flex;
        flex-flow: row;

        .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;
            }

            ::-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 {
                    max-height: 200px;
                    padding-bottom: 5px;
                    //overflow-y: hidden;
                }
              input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 10px;position: relative;}
              input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
              input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700;color:@background-color;font-size: 10px;font-weight: bold;}
              //
                //::-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>