From 8d9c17cd5166ad31e3357070e95ee73002f34de5 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期二, 11 五月 2021 10:44:10 +0800
Subject: [PATCH] 查询分页
---
src/components/LayerController/service/WmsLayerService.js | 18 +++++-
src/conf/layers/LayerPipeLines.js | 28 ++++----
src/utils/List.js | 40 +++++++++----
src/components/panel/topicSearch/SewersSearch.vue | 20 +++++-
src/components/helpers/WfsHelper.js | 21 ++++++
5 files changed, 91 insertions(+), 36 deletions(-)
diff --git a/src/components/LayerController/service/WmsLayerService.js b/src/components/LayerController/service/WmsLayerService.js
index 36aba46..fe4ba3c 100644
--- a/src/components/LayerController/service/WmsLayerService.js
+++ b/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)
}
diff --git a/src/components/helpers/WfsHelper.js b/src/components/helpers/WfsHelper.js
index 9f9b781..2ea5c7e 100644
--- a/src/components/helpers/WfsHelper.js
+++ b/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
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index 99842ad..2431ff5 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/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>
diff --git a/src/conf/layers/LayerPipeLines.js b/src/conf/layers/LayerPipeLines.js
index 8dea07c..d3de90e 100644
--- a/src/conf/layers/LayerPipeLines.js
+++ b/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',
diff --git a/src/utils/List.js b/src/utils/List.js
index 178cdc7..c7137c7 100644
--- a/src/utils/List.js
+++ b/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)
--
Gitblit v1.8.0