查询分页

徐旺旺

2021-05-11 8d9c17cd5166ad31e3357070e95ee73002f34de5

查询分页

 src/components/LayerController/service/WmsLayerService.js

@@ -29,11 +29,15 @@
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = new List()
    this.filters = new List()
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      const typeName = config.typeName
      if (typeName) {
        this.layers.add(config.index, typeName)
        if (config.filter) {
          this.filters.addEnd(config.filter)
        }
      }
    }
  }
@@ -50,22 +54,30 @@
    if (typeName) {
      if (!this.layers.contains(typeName)) {
        this.layers.add(config.index, typeName)
        this.wmsLayer.setParams({ layers: this.layers.join(',') })
        if (config.filter) {
          this.filters.addEnd(config.filter)
        }
        this.wmsLayer.setParams({ cql_filter: this.filters.join(' and ') })
      }
    }
  }

  remove (config) {
    console.log(config)
    const typeName = config.typeName
    this.layers.remove(typeName)
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
    if (config.filter) {
      this.filters.remove(config.filter)
    }
    this.wmsLayer.setParams({ cql_filter: this.filters.join(' and ') })
  }

  load (layers) {
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      layers: this.layers.join(',')
      layers: 'sewer:pipesegment', // this.layers.join(','),
      cql_filter: this.filters.join(' and ')
    }).addTo(this.map)
  }


 src/components/helpers/WfsHelper.js

@@ -6,11 +6,22 @@
  this.filters = []
  this.typeNames = []
  this.url = WFS_URL
  this.page = 1
  this.pageSize = 10
  this.params = {
    REQUEST: 'getfeature',
    OUTPUTFORMAT: 'application/json',
    maxFeatures: 20000,
    version: '1.0.0'
    maxFeatures: 10,
    version: '1.0.0',
    startIndex: 0
  }

  this.setTypeName = (typeName) => {
    this.typeNames = typeName
  }

  this.clearFilter = () => {
    this.filters = []
  }

  this.addTypeName = (typeName) => {
@@ -89,6 +100,12 @@
    }
    return url + this.getUrlParams()
  }

  this.setPage = (page) => {
    const startIndex = page * this.pageSize
    this.params.startIndex = startIndex
    this.page = page
  }
}

export default WfsHelper

 src/components/panel/topicSearch/SewersSearch.vue

@@ -99,6 +99,7 @@
      list: [],
      items: [LayerPipeLines, LayerFsss, LayerHbss, LayerPk, LayerArea],
      subItems: LayerPipeLines.layers,
      pageSize: 10,
      total: 0,
      form: {
        pipelineType: '管线',
@@ -112,7 +113,8 @@
      facilitiesParameter: null,
      fuShuSheShiShow: true,
      fuShuSheShiPanelShow: true,
      activeNum: -1
      activeNum: -1,
      wfsHelper: null
    }
  },
  props: ['title'],
@@ -123,6 +125,10 @@
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handlePage (page) {
      this.wfsHelper.setPage(page)
      this.handleSearch()
    },
    // 设施类型筛选
    handlePipelineType (val) {
@@ -142,15 +148,16 @@
    async handleSearch () {
      // console.log(this.form.dataType.sname, this.form.keyword)
      this.list = []
      var wfsHelper = new WfsHelper()
      this.wfsHelper.clearFilter()
      // todo 现在管网还没区分开类型，后面改
      wfsHelper.addTypeName(this.form.dataType.typeName)
      this.wfsHelper.setTypeName([this.form.dataType.typeName])
      if (this.form.keyword) {
        wfsHelper.addLike('name', this.form.keyword)
        this.wfsHelper.addLike('name', this.form.keyword)
      }
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.total = res.totalFeatures
        this.list = res.features
      }
    },
@@ -170,6 +177,9 @@
      }
      window.layerFactory.flyByFeature(val, this.form.dataType.code)
    }
  },
  mounted () {
    this.wfsHelper = new WfsHelper()
  }
}
</script>

 src/conf/layers/LayerPipeLines.js

@@ -19,7 +19,7 @@
      sname: '管网',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
@@ -36,7 +36,7 @@
      sname: '事故水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      minZoom: 13,
      filter: 'mediumtype = \'事故水\'',
      index: 1
@@ -47,10 +47,10 @@
      sname: '含油污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      minZoom: 13,
      color: '#ffaa00',
      filter: 'mediumtype = \'含油\'',
      filter: 'mediumtype = \'含油污水\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
@@ -63,9 +63,9 @@
      sname: '含盐污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      minZoom: 13,
      filter: 'mediumtype = \'含盐\'',
      filter: 'mediumtype = \'含盐污水\'',
      index: 1
    },
    {
@@ -74,8 +74,8 @@
      sname: '含碱污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含碱\'',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      filter: 'mediumtype = \'含碱污水\'',
      minZoom: 10,
      index: 1
    },
@@ -85,8 +85,8 @@
      sname: '含硫污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含硫\'',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      filter: 'mediumtype = \'含硫污水\'',
      minZoom: 10,
      index: 1
    },
@@ -96,7 +96,7 @@
      sname: '生活污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      filter: 'mediumtype = \'生活污水\'',
      minZoom: 13,
      index: 1
@@ -107,7 +107,7 @@
      sname: '净化水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      filter: 'mediumtype = \'净化水\'',
      minZoom: 13,
      index: 1
@@ -117,7 +117,7 @@
      name: '循环水',
      sname: '循环水',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      filter: 'mediumtype = \'循环水\'',
      checked: false,
      minZoom: 13,
@@ -129,7 +129,7 @@
      sname: '生产污水',
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      typeName: 'sewer:pipeline,sewer:pipenetwork,sewer:pipesegment',
      filter: 'mediumtype = \'生产污水\'',
      minZoom: 13,
      color: '#a8a800',

 src/utils/List.js

@@ -4,6 +4,28 @@
  }

  add (index, element) {
    if (element.indexOf(',') > 0) {
      const arr = element.split(',')
      for (const k in arr) {
        if (!this.contains(element)) {
          this._addElement(index, arr[k])
        }
      }
    } else if (!this.contains(element)) {
      this._addElement(index, element)
    }
  }

  _addIndex (index, element) {
    const newArr = []
    for (var i = this.dataSouce.length - 1; i > index - 1; i--) {
      newArr[i + 1] = this.dataSouce[i]
    }
    newArr[index] = element
    this.dataSouce = newArr
  }

  _addElement (index, element) {
    if (!index) {
      this.addEnd(element)
    } else if (index >= this.dataSouce.length) {
@@ -11,7 +33,7 @@
    } else if (index === 1) {
      this.addFront(element)
    } else {
      this._add(index, element)
      this._addIndex(index, element)
    }
  }

@@ -20,7 +42,9 @@
    * @param {*} element 要添加的元素
    */
  addEnd (element) {
    this.dataSouce[this.dataSouce.length] = element
    if (!this.contains(element)) {
      this.dataSouce[this.dataSouce.length] = element
    }
  }

  /**
@@ -29,16 +53,9 @@
    * @param {*} after
    */
  addFront (element) {
    this._add(0, element)
  }

  _add (index, element) {
    const newArr = []
    for (var i = this.dataSouce.length - 1; i > index - 1; i--) {
      newArr[i + 1] = this.dataSouce[i]
    if (!this.contains(element)) {
      this._addIndex(0, element)
    }
    newArr[index] = element
    this.dataSouce = newArr
  }

  /**
@@ -84,7 +101,6 @@

  removeBlank () {
    const arr = this.dataSouce
    console.log(arr)
    for (const k in arr) {
      if (!arr[k]) {
        this.dataSouce.splice(k, 1)