派生自 wuyushui/SewerAndRainNetwork

wangrui
2020-12-24 9cd476f875b661eca3eb5c4908ce0e744f48cbfe
配置过滤条件
1个文件已添加
4个文件已修改
305 ■■■■ 已修改文件
src/components/LayerController/modules/LcServiceLayer.vue 36 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/LayerController/modules/LcServiceLayerFilter.vue 106 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/conf/MapConfig.js 139 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/store/index.js 11 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/MapTemplate.vue 13 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/LayerController/modules/LcServiceLayer.vue
@@ -8,9 +8,9 @@
      </div>
      <div class="wms-panel">
        <div v-for="item in serviceWmsLayerList" :key="item.code" class="layerbox">
            <div><input type="checkbox" name="wmsLayer" :value="item.code" @change="swAllLayers"/>{{item.name}}</div>
            <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.inLegend" :value="item.code" @change="swAllLayers(item)"/>{{item.name}} <span @click="swFilter(item)" class="btn-filter">过滤</span></div>
            <div class="layerbox-item">
                <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" name="wmsSublayers" :value="item.code" @change="swAllLayers"/>{{itm.sname}}</div>
                <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" :name="'wmsSublayers_'+item.code+'_'+itm.code" :checked="itm.checked" :value="itm.code" @change="swWmsLayer(itm)"/>{{itm.sname}}</div>
            </div>
        </div>
      </div>
@@ -35,16 +35,21 @@
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper;
      },
      }
    }),
  },
  mounted() {
    // console.log('03步骤:', this.helper)
  },
  methods: {
    ...mapMutations([]),
    swAllLayers(){
    ...mapMutations(['setSelectedServiceLayer','toggleServiceLayerFilter']),
    swAllLayers(item){
        // eslint-disable-next-line no-debugger
        item.inLegend = !item.inLegend
        for(let i = 0, len = item.layers.length; i < len; ++i){
            item.layers[i].checked = item.inLegend
        }
        this.updateWms()
    },
    swTileLayer(){
        console.log('该TILE方法未实现!')
@@ -52,8 +57,13 @@
    swWmtsLayer(){
        console.log('该WMTS方法未实现!')
    },
    swWmsLayer(){
    swWmsLayer(itm){
        itm.checked = !itm.checked
        this.updateWms()
    },
    swFilter(item){
        this.$store.commit('setSelectedServiceLayer', item.code)
        this.$store.commit('toggleServiceLayerFilter')
    },
    updateServiceLayerList(){
        // eslint-disable-next-line no-debugger
@@ -79,6 +89,9 @@
                this.serviceWmsLayerList.push(wmsCfg[i].config)
            }
        }
    },
    updateWms(){
    }
  },
  watch: {
@@ -97,6 +110,9 @@
  justify-content: center;
  align-items: center;
    .btn-filter{
        cursor: pointer;
    }
    .wms-panel{
        display:flex;
        flex-flow: column;
@@ -107,7 +123,9 @@
            .layerbox-item{
                display:flex;
                flex-flow: row;
                flex-flow: row wrap;
                margin-left: 15px;
                margin-top: 5px;
                .basemap-layer-item{
                    width: 50%;
                }
src/components/LayerController/modules/LcServiceLayerFilter.vue
New file
@@ -0,0 +1,106 @@
<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">{{item.name}}</div>
              <div class="content">
                  <div v-for="filter in item.filters" :key="filter.code">
                    <input type="checkbox" :value="filter.code"><label :title="filter.name">{{filter.sname}}</label>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "LcServiceLayerFilter",
  components: {},
  data() {
    return {
      filterConfig: [], // 附属要素
    };
  },
  computed: {
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper
      },
      selectedServiceLayer: (state) => {
        return state.selectedServiceLayer
      },
    }),
  },
  mounted() {
  },
  methods: {
    ...mapMutations([]),
    getFilterConfig(){
        return this.filterConfig
    }
  },
  watch: {
      selectedServiceLayer(newVal){
          this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
      }
  }
};
</script>
<style scoped lang="less">
.inner-panel {
    color:#90c8e0;
    font-size: 13px;
    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;
            }
        }
    }
}
</style>
src/conf/MapConfig.js
@@ -233,60 +233,70 @@
                    code:'rainline',
                    name:'雨水线',
                    sname:'雨水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'oilline',
                    name:'含油污水线',
                    sname:'含油污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'saltline',
                    name:'含盐污水线',
                    sname:'含盐污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'alkaliline',
                    name:'含碱污水线',
                    sname:'含碱污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'outlet',
                    name:'排口',
                    sname:'排口',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'accidentline',
                    name:'事故水线',
                    sname:'事故水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'loopline',
                    name:'循环水线',
                    sname:'循环水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'purifyline',
                    name:'净化水线',
                    sname:'净化水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'lifeline',
                    name:'生活污水',
                    sname:'生活污水',
                    checked: true, // 默认选中状态
                    filter:{}
                },
                {
                    code:'rainline',
                    code:'areainfo',
                    name:'区域信息',
                    sname:'区域信息',
                    checked: true, // 默认选中状态
                    filter:{}
                },
            ],
@@ -298,49 +308,57 @@
                        {
                            code:'四通',
                            name:'四通',
                            sname:'',
                            sname:'四通',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'三通',
                            name:'三通',
                            sname:'',
                            sname:'三通',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管架(墩)',
                            name:'管架(墩)',
                            sname:'',
                            sname:'管架',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管廊(带)',
                            name:'管廊(带)',
                            sname:'',
                            sname:'管廊',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'流向',
                            name:'流向',
                            sname:'',
                            sname:'流向',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管网',
                            name:'管网',
                            sname:'',
                            sname:'管网',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'阀门',
                            name:'阀门',
                            sname:'',
                            sname:'阀门',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'弯头',
                            name:'弯头',
                            sname:'',
                            sname:'弯头',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                    ]
@@ -352,43 +370,50 @@
                        {
                            code:'窨井',
                            name:'窨井',
                            sname:'',
                            sname:'窨井',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'防火堤',
                            name:'防火堤',
                            sname:'',
                            sname:'防火堤',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'雨篦子',
                            name:'雨篦子',
                            sname:'',
                            sname:'雨篦子',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'溢流堰',
                            name:'溢流堰',
                            sname:'',
                            sname:'溢流堰',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'截流闸',
                            name:'截流闸',
                            sname:'',
                            sname:'截流闸',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'集水池(罐)',
                            name:'集水池(罐)',
                            sname:'',
                            sname:'集水池',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'隔油池',
                            name:'隔油池',
                            sname:'',
                            sname:'隔油池',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                    ]
@@ -400,7 +425,8 @@
                        {
                            code:'排放口',
                            name:'排放口',
                            sname:'',
                            sname:'排放口',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        }
                    ]
@@ -412,127 +438,148 @@
                        {
                            code:'第三方管道',
                            name:'第三方管道',
                            sname:'',
                            sname:'第三方管道',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'消防单位',
                            name:'消防单位',
                            sname:'',
                            sname:'消防单位',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'应急物资',
                            name:'应急物资',
                            sname:'',
                            sname:'应急物资',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'社会专业应急救援队伍',
                            name:'社会专业应急救援队伍',
                            sname:'',
                            sname:'专业应急救援',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'维抢修队伍',
                            name:'维抢修队伍',
                            sname:'',
                            sname:'维抢修队伍',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'医院',
                            name:'医院',
                            sname:'',
                            sname:'医院',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'自然保护区',
                            name:'自然保护区',
                            sname:'',
                            sname:'自然保护区',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'水体',
                            name:'水体',
                            sname:'',
                            sname:'水体',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'敏感目标',
                            name:'敏感目标',
                            sname:'',
                            sname:'敏感目标',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'环境监测单位',
                            name:'环境监测单位',
                            sname:'',
                            sname:'环境监测单位',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'监测点污染物指标信息',
                            name:'监测点污染物指标信息',
                            sname:'',
                            sname:'污染物指标',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'排放口周边环境敏感信息',
                            name:'排放口周边环境敏感信息',
                            sname:'',
                            sname:'排放口周边环境',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'泵',
                            name:'泵',
                            sname:'',
                            sname:'泵',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'液位计',
                            name:'液位计',
                            sname:'',
                            sname:'液位计',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'流量计',
                            name:'流量计',
                            sname:'',
                            sname:'流量计',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'视频监控配置',
                            name:'视频监控配置',
                            sname:'',
                            sname:'视频监控',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'在线监测设备配置',
                            name:'在线监测设备配置',
                            sname:'',
                            sname:'在线监测',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'可燃气体报警设备配置',
                            name:'可燃气体报警设备配置',
                            sname:'',
                            sname:'可燃气体报警',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'H2S浓度报警设备配置',
                            name:'H2S浓度报警设备配置',
                            sname:'',
                            sname:'H2S浓度报警',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管线点',
                            name:'管线点',
                            sname:'',
                            sname:'管线点',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        },
                        {
                            code:'管段',
                            name:'管段',
                            sname:'',
                            sname:'管段',
                            checked: true, // 默认选中状态
                            geom: GEOM_POINT
                        }
                    ]
src/store/index.js
@@ -16,7 +16,10 @@
    vectoryLayerHelper: {}, // 动态图层控制器实现助手程序
    layerControllerVisible: { // 图层控制面板的显示状态››
        layerController: true, // 爸爸栏目:是否显示图层控制面板
    }
    },
    showServiceLayerFilter: false, // Service图层过滤器
    selectedServiceLayer: '', // 使用过滤器时,被打开的WMS服务的CODE
  },
  mutations: {
    setMapObj(state, mObject) {
@@ -35,6 +38,12 @@
    updateLayerControllerVisible(state, preset) {
        state.layerControllerVisible = preset
    },
    setSelectedServiceLayer(state, selectedServiceLayer){
      state.selectedServiceLayer = selectedServiceLayer
    },
    toggleServiceLayerFilter(state){
      state.showServiceLayerFilter = !state.showServiceLayerFilter
    }
  },
  actions: {
    //
src/views/MapTemplate.vue
@@ -6,6 +6,7 @@
            <div class="barline"></div>
            <lc-service-layer></lc-service-layer>
        </sgis-layer-controller>
        <lc-service-layer-filter v-show="showServiceLayerFilter"></lc-service-layer-filter>
        <monitor-panel></monitor-panel>
  </div>
</template>
@@ -17,18 +18,24 @@
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations } from 'vuex'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'MapTemplate',
  components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer},
  components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter},
  data(){
    return {
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  computed:{
    ...mapState({
      showServiceLayerFilter: state => state.showServiceLayerFilter
    })
  },
  beforeMount(){
      this.$nextTick(() => {
@@ -40,7 +47,7 @@
        setMapObj: 'setMapObj',
        setBasemapHelper: 'setBasemapHelper',
        setServiceLayerHelper: 'setServiceLayerHelper',
        setVectorLayerHelper: 'setVectorLayerHelper',
        setVectorLayerHelper: 'setVectorLayerHelper'
      }),
      init() {
        const mapcontainer = this.$refs.rootmap