From 8d755b0755dac542cc092ab8e40e65ba8d664bc6 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期日, 30 五月 2021 14:53:20 +0800
Subject: [PATCH] 企业应急-事件上报-定位优化
---
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue | 274 +++++++++++++++++++++++-------------------------------
1 files changed, 116 insertions(+), 158 deletions(-)
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
index 7498287..9603092 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
@@ -1,30 +1,37 @@
<template>
<div class="ReportLocationSection">
- <el-form :model="form" label-width="90px">
+ <el-form :model="form" label-width="120px">
<el-row class="pipe-line-search">
- <el-col :span="12">
+ <el-col :span="18">
<el-form-item label="绠＄嚎鍚嶇О:">
- <el-input v-model="form.pipeName">
+ <el-input v-model="form.pipeName" @change="pipelineSearch">
<el-button style="padding-right:10px;" slot="suffix" type="text" @click="pipelineSearch">
<img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
</el-button>
</el-input>
</el-form-item>
</el-col>
- <el-col :span="8">
+ <el-col :span="6">
<el-button type="primary" size="small" icon="el-icon-location-outline" @click="pipeClickLocation">瀹氫綅
</el-button>
</el-col>
</el-row>
<el-row>
- <el-col :span="12">
+ <el-col :span="24">
<el-form-item label="绠℃缂栫爜:">
<el-input v-model="form.sectionName" disabled></el-input>
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
<el-col :span="12">
- <el-form-item label="闄勫睘璁炬柦:">
+ <el-form-item label="闄勫睘璁炬柦缂栫爜:">
<el-input v-model="form.affiliatedFacilities" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="闄勫睘璁炬柦绫诲瀷:">
+ <el-input v-model="form.affiliatedFacilitiesCode" disabled></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -141,7 +148,7 @@
</el-card>
</div>
<el-row style="text-align: right;margin: 10px">
- <el-button type="primary" @click="confirm">纭</el-button>
+ <el-button type="primary" @click="confirm" size="small">纭</el-button>
</el-row>
</div>
</template>
@@ -160,7 +167,8 @@
form: {
pipeName: '',
sectionName: '',
- affiliatedFacilities: ''
+ affiliatedFacilities: '',
+ affiliatedFacilitiesCode: ''
},
// 绠＄嚎鏌ヨ鏁版嵁鍒楄〃
tableList: [],
@@ -196,57 +204,73 @@
this.tableList = res.features
}
this.wfsHelper = new WfsHelper()
- this.form.pipeName = ''
+ // this.form.pipeName = ''
this.form.sectionName = ''
this.form.affiliatedFacilities = ''
+ this.form.affiliatedFacilitiesCode = ''
},
// 鐐瑰嚮绠＄嚎鍒楄〃 灞曠ず绠℃鍐呭 鍜岄檮灞炶鏂藉唴瀹�
- async sectionShowClick (val) {
- console.log(val)
- // 濡傛灉 SectionAndAffFacTableJudge === true 鏄悳绱㈡暟鎹粨鏋滅殑鍒楄〃 鍙互杩涜 绠℃ 闄勫睘璁炬柦浜や簰 鐐瑰嚮瀹氫綅鏌ヨ缁撴灉 涓嶈繘琛岀偣鍑讳氦浜�
+ sectionShowClick (val) {
+ // console.log(val)
+ // this.SectionAndAffFacTableJudge = true
if (this.SectionAndAffFacTableJudge === true) {
- // 绠℃鏌ヨ
- const sectionNameSearch = val.properties.pipename
- this.tableListSection = []
- this.wfsHelper.clearFilter()
- this.wfsHelper.setTypeName(['sewer:pipesegment'])
- this.wfsHelper.addLike('pipename', sectionNameSearch)
- this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'')
- const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
- // console.log(res)
- if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
- this.tableListSection = res.features
- }
- this.wfsHelper = new WfsHelper()
- // 闄勫睘璁炬柦鏌ヨ
- this.tableDataAffFac = []
- const AffFacSearch = val.properties.pipecode
- console.log(AffFacSearch)
- this.wfsHelper.clearFilter()
- this.wfsHelper.setTypeName(['sewer:view_pipeline'])
- this.wfsHelper.addLike('pipecode', AffFacSearch)
- // this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
- const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
- console.log(resAffFac)
- if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
- // for (let i = 0; i < resAffFac.features.length; i++) {
- // // console.log(resAffFac.features[i])
- // this.tableDataAffFac.push(resAffFac.features[i].properties)
- // }
- this.tableDataAffFac = resAffFac.features
- }
- this.wfsHelper = new WfsHelper()
+ this.searchSection(val)
+ this.searchAffFacData(val)
+ }
+ },
+ // 绠℃鏌ヨ
+ async searchSection (val) {
+ const sectionNameSearch = val.properties.pipename
+ this.tableListSection = []
+ this.wfsHelper.clearFilter()
+ this.wfsHelper.setTypeName(['sewer:pipesegment'])
+ this.wfsHelper.addLike('pipename', sectionNameSearch)
+ this.wfsHelper.addEquals('pipename', '\'' + sectionNameSearch + '\'')
+ const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
+ // console.log(res)
+ if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
+ this.tableListSection = res.features
+ }
+ },
+ // 闄勫睘璁炬柦鏌ヨ
+ async searchAffFacData (val) {
+ this.tableDataAffFac = []
+ const AffFacSearch = val.properties.pipecode
+ this.wfsHelper.clearFilter()
+ this.wfsHelper.setTypeName(['sewer:view_pipeline'])
+ this.wfsHelper.addLike('pipecode', AffFacSearch)
+ // this.wfsHelper.addEquals('type', '\'' + AffFacSearch + '\'')
+ const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
+ console.log(resAffFac)
+ if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) {
+ this.tableDataAffFac = resAffFac.features
+ }
+ },
+ // 鎼滅储鐨勫叕鍏辨柟娉曚紭鍖�
+ async publicSearch (searchVal, searchKeyword, searchTypeName, tableListData) {
+ tableListData = []
+ this.wfsHelper = new WfsHelper()
+ this.wfsHelper.clearFilter()
+ this.wfsHelper.setTypeName(searchTypeName)
+ this.wfsHelper.addLike(searchKeyword, searchVal)
+ this.wfsHelper.addEquals(searchKeyword, '\'' + searchVal + '\'')
+ const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
+ // console.log(res)
+ if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
+ tableListData = res.features
}
},
// 鐐瑰嚮绠℃鍒楄〃 绠℃缂栫爜浼犻��
sectionCode (val) {
// console.log(val)
- this.form.sectionName = val.properties.pipecode
+ this.form.sectionName = val.properties.pipesegcode
},
// 鐐瑰嚮闄勫睘璁炬柦鍒楄〃 绠℃缂栫爜浼犻��
affFacName (val) {
- // console.log(val)
+ console.log(val)
+ // this.form.affiliatedFacilities = val.properties.code
this.form.affiliatedFacilities = val.properties.name
+ this.form.affiliatedFacilitiesCode = val.properties.type
},
// 瀹氫綅鍔熻兘
localAdr (val) {
@@ -258,138 +282,72 @@
pipeClickLocation () {
// 璁炬柦涓嶈繘琛� 绠＄嚎琛ㄦ牸鏁版嵁鐨勭偣鍑讳氦浜�
this.SectionAndAffFacTableJudge = false
- // this.tableList = []
- // 鐐瑰嚮鑾峰彇鏁版嵁
- window.map.on('click', (e) => {
- // window.mapManager.clickDialogSwitch = false
- window.mapManager.loadWfsDatas(e.latlng).then((res) => {
- for (let i = 0; i < res.features.length; i++) {
- console.log(res.features[i])
- const ids = res.features[i].id.split('.')
- // console.log(ids[0])
- if (ids[0] === 'pipeline') {
- this.tableList.push(res.features[i])
- } else if (ids[0] === 'pipesegment') {
- this.tableListSection.push(res.features[i])
- } else {
- this.tableDataAffFac.push(res.features[i])
- // const obj = {
- // properties: {
- // pipecode: res.features[i].properties.code,
- // name: res.features[i].properties.companyname,
- // type: res.features[i].properties.mediumtype
- // }
- // }
- // console.log(obj)
- // this.tableDataAffFac.push(obj)
- // console.log(this.tableDataAffFac)
- }
- }
+ if (this.SectionAndAffFacTableJudge === false) {
+ // 鐐瑰嚮鑾峰彇鏁版嵁
+ window.map.on('click', (e) => {
+ this.SectionAndAffFacTableJudge = false
+ // 鐐瑰嚮鍦板浘鍏抽棴寮规
+ window.mapManager.clickDialogSwitch = false
+ // 绠＄嚎鐐瑰嚮鏁版嵁
+ this.pipeData(e)
+ // 绠℃鐐瑰嚮鏁版嵁
+ this.sectionData(e)
+ // 闄勫睘璁炬柦鏁版嵁
+ this.affFacData(e)
+ // 鍏抽棴鐐瑰嚮浜嬩欢
+ window.map.off('click')
})
- window.map.off('click')
- // const size = window.map.getSize()
- // var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
- // const wmsParams = Object.assign({
- // LAYERS: 'pipeline_group',
- // QUERY_LAYERS: 'pipeline_group',
- // WIDTH: size.x,
- // HEIGHT: size.y,
- // X: Math.round(point.x),
- // Y: Math.round(point.y),
- // BBOX: window.map.getBounds().toBBoxString()
- // }, {
- // VERSION: '1.1.1',
- // SERVICE: 'WMS',
- // REQUEST: 'GetFeatureInfo',
- // // bbox: bbox,
- // FORMAT: 'image/png',
- // INFO_FORMAT: 'application/json',
- // TRANSPARENT: true,
- // FEATURE_COUNT: 50,
- // SRS: 'EPSG:4326',
- // EXCEPTIONS: 'application/vnd.ogc.se_inimage'
- // })
- // AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
- // // console.log(res)
- // for (let i = 0; i < res.data.features.length; i++) {
- // // console.log(res.data.features[i])
- // this.tableList.push(res.data.features[i])
- // }
- // })
- // // 绠℃
- // this.sectionData(e)
- // // 闄勫睘璁炬柦
- // this.affFacData(e)
- })
+ }
// 鏁版嵁 閲嶆柊鑾峰彇 杩涜缃┖
- this.tableList = []
- this.tableListSection = []
- this.tableDataAffFac = []
this.form.pipeName = ''
this.form.sectionName = ''
this.form.affiliatedFacilities = ''
+ this.form.affiliatedFacilitiesCode = ''
+ this.tableList = []
+ this.tableListSection = []
+ this.tableDataAffFac = []
},
- // 鐐瑰嚮瀹氫綅 鎿﹀绠℃
+ // 鐐瑰嚮瀹氫綅鍖哄煙 鎼滃绠＄嚎鏁版嵁
+ pipeData (e) {
+ this.publicWay(e, 'sewer:pipeline', 'sewer:pipeline', this.tableList)
+ },
+ // 鐐瑰嚮瀹氫綅鍖哄煙 鎼滃绠℃鏁版嵁
sectionData (e) {
- const size = window.map.getSize()
- var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
- const wmsParams = Object.assign({
- LAYERS: 'sewer:pipesegment',
- QUERY_LAYERS: 'sewer:pipesegment',
- WIDTH: size.x,
- HEIGHT: size.y,
- X: Math.round(point.x),
- Y: Math.round(point.y),
- BBOX: window.map.getBounds().toBBoxString()
- }, {
+ this.publicWay(e, 'sewer:pipesegment', 'sewer:pipesegment', this.tableListSection)
+ },
+ // 鐐瑰嚮瀹氫綅鍖哄煙 鎼滃闄勫睘璁炬柦鏁版嵁
+ affFacData (e) {
+ this.publicWay(e, 'sewer:view_pipeline', 'sewer:view_pipeline', this.tableDataAffFac, 'pipecode <> \'\'')
+ },
+ // 鐐瑰嚮鎸夐挳瀹氫綅 鐨勫叕鍏变簨浠�
+ publicWay (e, layer, queryLayer, dataList, cqlfilter) {
+ const defaultWmsParams = {
VERSION: '1.1.1',
SERVICE: 'WMS',
REQUEST: 'GetFeatureInfo',
- // bbox: bbox,
FORMAT: 'image/png',
INFO_FORMAT: 'application/json',
TRANSPARENT: true,
FEATURE_COUNT: 50,
SRS: 'EPSG:4326',
+ cql_filter: cqlfilter,
EXCEPTIONS: 'application/vnd.ogc.se_inimage'
- })
+ }
+ const size = window.map.getSize()
+ const point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
+ const wmsParams = Object.assign({
+ LAYERS: layer,
+ QUERY_LAYERS: queryLayer,
+ WIDTH: size.x,
+ HEIGHT: size.y,
+ X: Math.round(point.x),
+ Y: Math.round(point.y),
+ BBOX: window.map.getBounds().toBBoxString()
+ }, defaultWmsParams)
AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
// console.log(res)
for (let i = 0; i < res.data.features.length; i++) {
- this.tableListSection.push(res.data.features[i])
- }
- })
- },
- // 鐐瑰嚮瀹氫綅 鎿﹀闄勫睘璁炬柦
- affFacData (e) {
- const size = window.map.getSize()
- var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom())
- const wmsParams = Object.assign({
- LAYERS: 'sewer:view_pipeline',
- QUERY_LAYERS: 'sewer:view_pipeline',
- // LAYERS: 'pipeline_fs',
- // QUERY_LAYERS: 'pipeline_fs',
- WIDTH: size.x,
- HEIGHT: size.y,
- X: Math.round(point.x),
- Y: Math.round(point.y),
- BBOX: window.map.getBounds().toBBoxString()
- }, {
- VERSION: '1.1.1',
- SERVICE: 'WMS',
- REQUEST: 'GetFeatureInfo',
- // bbox: bbox,
- FORMAT: 'image/png',
- INFO_FORMAT: 'application/json',
- TRANSPARENT: true,
- FEATURE_COUNT: 50,
- SRS: 'EPSG:4326',
- EXCEPTIONS: 'application/vnd.ogc.se_inimage'
- })
- AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => {
- console.log(res)
- for (let i = 0; i < res.data.features.length; i++) {
- this.tableDataAffFac.push(res.data.features[i])
+ dataList.push(res.data.features[i])
}
})
},
--
Gitblit v1.8.0