| | |
| | | <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-form-item label="管线名称:"> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | form: { |
| | | pipeName: '', |
| | | sectionName: '', |
| | | affiliatedFacilities: '' |
| | | affiliatedFacilities: '', |
| | | affiliatedFacilitiesCode: '' |
| | | }, |
| | | // 管线查询数据列表 |
| | | tableList: [], |
| | |
| | | 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.name |
| | | this.form.affiliatedFacilitiesCode = val.properties.code |
| | | }, |
| | | // 定位功能 |
| | | localAdr (val) { |
| | |
| | | pipeClickLocation () { |
| | | // 设施不进行 管线表格数据的点击交互 |
| | | this.SectionAndAffFacTableJudge = false |
| | | // 点击获取数据 |
| | | window.map.on('click', (e) => { |
| | | // 点击地图关闭弹框 |
| | | window.mapManager.clickDialogSwitch = false |
| | | // 管线点击数据 |
| | | this.pipeData(e) |
| | | // 管段点击数据 |
| | | this.sectionData(e) |
| | | // 附属设施数据 |
| | | this.affFacData(e) |
| | | // 关闭点击事件 |
| | | window.map.off('click') |
| | | }) |
| | | 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') |
| | | }) |
| | | } |
| | | // 数据 重新获取 进行置空 |
| | | this.form.pipeName = '' |
| | | this.form.sectionName = '' |
| | | this.form.affiliatedFacilities = '' |
| | | this.form.affiliatedFacilitiesCode = '' |
| | | this.tableList = [] |
| | | this.tableListSection = [] |
| | | this.tableDataAffFac = [] |
| | |
| | | BBOX: window.map.getBounds().toBBoxString() |
| | | }, defaultWmsParams) |
| | | AjaxUtils.get4JsonDataByUrl(WMS_URL, wmsParams, (res) => { |
| | | console.log(res) |
| | | // console.log(res) |
| | | for (let i = 0; i < res.data.features.length; i++) { |
| | | dataList.push(res.data.features[i]) |
| | | } |