| | |
| | | :data="tableDataAffFac" |
| | | border |
| | | @row-click="affFacName" |
| | | height="100" |
| | | max-height="100" |
| | | height="120" |
| | | max-height="140" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | show-overflow-tooltip |
| | | prop="properties.code" |
| | | label="附属设施编号"> |
| | | width="150" |
| | | prop="properties.pipecode" |
| | | label="管线编号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | show-overflow-tooltip |
| | | width="150" |
| | | prop="properties.name" |
| | | label="附属设施名称"> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- show-overflow-tooltip--> |
| | | <!-- prop="properties.measattribute"--> |
| | | <!-- label="附属设施名称">--> |
| | | <!-- </el-table-column>--> |
| | | <el-table-column |
| | | width="150" |
| | | show-overflow-tooltip |
| | | prop="properties.type" |
| | | label="附属设施类型"> |
| | | label="设施类型"> |
| | | </el-table-column> |
| | | <el-table-column width="40" fixed="right" label="操作"> |
| | | <el-table-column width="90" fixed="right" label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button> |
| | | </template> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | |
| | | // import { pulseEffect } from '../../../../utils/utils' |
| | | // import mapApi from '../../../../api/mapApi' |
| | | import { highlight, fitBounds } from '../../../helpers/LocateHelper' |
| | | import WfsHelper from '@components/helpers/WfsHelper' |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | import { fitBounds, highlight } from '../../../../components/helpers/LocateHelper' |
| | | import eventBus from '../../../../eventBus' |
| | | import { WMS_URL } from '../../../../conf/Constants' |
| | | |
| | |
| | | // 附属设施查询列表数据 |
| | | tableDataAffFac: [], |
| | | // 定义类型判断 if 是搜索到的数据可以进行管线选择 else 点击定位选择的管线不可以进行选择 |
| | | SectionAndAffFacTableJudge: false, |
| | | locateJudgmentSearch: false |
| | | SectionAndAffFacTableJudge: false |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.wfsHelper = new WfsHelper() |
| | | }, |
| | | methods: { |
| | | // 管线搜索 |
| | | async pipelineSearch () { |
| | | this.SectionAndAffFacTableJudge = true |
| | | this.tableList = [] |
| | | this.tableListSection = [] |
| | | this.tableDataAffFac = [] |
| | | this.wfsHelper.clearFilter() |
| | | this.wfsHelper.setTypeName(['sewer:pipeline']) |
| | | if (this.form.pipeName) { |
| | | this.wfsHelper.addLike('subchaname', this.form.pipeName) |
| | | } |
| | | // this.wfsHelper.addEquals('pipename', '\'' + this.form.pipeName + '\'') |
| | | const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) |
| | | // console.log(res) |
| | | if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { |
| | | this.total = res.totalFeatures |
| | | // console.log(res.features) |
| | | this.tableList = res.features |
| | | } |
| | | this.wfsHelper = new WfsHelper() |
| | | this.form.pipeName = '' |
| | | this.form.sectionName = '' |
| | | this.form.affiliatedFacilities = '' |
| | | }, |
| | | // 点击管线列表 展示管段内容 和附属设施内容 |
| | | async sectionShowClick (val) { |
| | | console.log(val) |
| | |
| | | const resAffFac = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) |
| | | console.log(resAffFac) |
| | | if (resAffFac instanceof Object && Object.prototype.hasOwnProperty.call(resAffFac, 'features')) { |
| | | // console.log(resAffFac.features) |
| | | // for (let i = 0; i < resAffFac.features.length; i++) { |
| | | // console.log(resAffFac.features[i]) |
| | | // // console.log(resAffFac.features[i]) |
| | | // this.tableDataAffFac.push(resAffFac.features[i].properties) |
| | | // } |
| | | this.tableDataAffFac = resAffFac.features |
| | | } |
| | |
| | | }, |
| | | // 定位功能 |
| | | localAdr (val) { |
| | | console.log(val) |
| | | // console.log(val) |
| | | fitBounds(val) |
| | | highlight(val) |
| | | }, |
| | |
| | | pipeClickLocation () { |
| | | // 设施不进行 管线表格数据的点击交互 |
| | | this.SectionAndAffFacTableJudge = false |
| | | window.mapManager.clickDialogSwitch = false |
| | | // this.tableList = [] |
| | | // 点击获取数据 |
| | | window.map.on('click', (e) => { |
| | | // window.mapManager.loadWfsDatas(e.latlng).then((res) => { |
| | | // console.log(res) |
| | | // for (let i = 0; i < res.features.length; i++) { |
| | | // this.tableList.push(res.features[i]) |
| | | // this.tableListSection.push(res.features[i]) |
| | | // this.tableDataAffFac.push(res.features[i]) |
| | | // } |
| | | // }) |
| | | // return new Promise((resolve, reject) => { |
| | | const size = window.map.getSize() |
| | | var point = window.map.latLngToContainerPoint(e.latlng, window.map.getZoom()) |
| | | const wmsParams = Object.assign({ |
| | | LAYERS: 'sewer:pipeline', |
| | | QUERY_LAYERS: 'sewer:pipeline', |
| | | 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]) |
| | | } |
| | | }) |
| | | // 管段 |
| | | // 点击地图关闭弹框 |
| | | window.mapManager.clickDialogSwitch = false |
| | | // 管线点击数据 |
| | | this.pipeData(e) |
| | | // 管段点击数据 |
| | | this.sectionData(e) |
| | | // 附属设施 |
| | | // 附属设施数据 |
| | | this.affFacData(e) |
| | | // }) |
| | | // 关闭点击事件 |
| | | window.map.off('click') |
| | | }) |
| | | // 数据 重新获取 进行置空 |
| | | this.tableList = [] |
| | | this.tableListSection = [] |
| | | this.form.pipeName = '' |
| | | this.tableDataAffFac = [] |
| | | this.form.sectionName = '' |
| | | this.form.affiliatedFacilities = '' |
| | | }, |
| | | // 点击定位 擦寻管段 |
| | | 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() |
| | | }, { |
| | | 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.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', |
| | | 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]) |
| | | } |
| | | }) |
| | | }, |
| | | // 管线搜索 |
| | | async pipelineSearch () { |
| | | this.SectionAndAffFacTableJudge = true |
| | | this.tableList = [] |
| | | this.tableListSection = [] |
| | | this.tableDataAffFac = [] |
| | | this.wfsHelper.clearFilter() |
| | | this.wfsHelper.setTypeName(['sewer:pipeline']) |
| | | if (this.form.pipeName) { |
| | | this.wfsHelper.addLike('pipename', this.form.pipeName) |
| | | }, |
| | | // 点击定位区域 搜寻管线数据 |
| | | pipeData (e) { |
| | | this.publicWay(e, 'sewer:pipeline', 'sewer:pipeline', this.tableList) |
| | | }, |
| | | // 点击定位区域 搜寻管段数据 |
| | | sectionData (e) { |
| | | 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', |
| | | FORMAT: 'image/png', |
| | | INFO_FORMAT: 'application/json', |
| | | TRANSPARENT: true, |
| | | FEATURE_COUNT: 50, |
| | | SRS: 'EPSG:4326', |
| | | cql_filter: cqlfilter, |
| | | EXCEPTIONS: 'application/vnd.ogc.se_inimage' |
| | | } |
| | | // this.wfsHelper.addEquals('pipename', '\'' + this.form.pipeName + '\'') |
| | | const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) |
| | | // console.log(res) |
| | | if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { |
| | | this.total = res.totalFeatures |
| | | // console.log(res.features) |
| | | this.tableList = res.features |
| | | } |
| | | this.wfsHelper = new WfsHelper() |
| | | // this.form.pipeName = '' |
| | | this.form.sectionName = '' |
| | | this.form.affiliatedFacilities = '' |
| | | 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++) { |
| | | dataList.push(res.data.features[i]) |
| | | } |
| | | }) |
| | | }, |
| | | // 点击确认 |
| | | confirm () { |
| | | // console.log('点击确定选择完成') |
| | | eventBus.$emit('section-search', true) |
| | | eventBus.$emit('location-setChange', true) |
| | | this.form.pipeName = '' |
| | | this.form.sectionName = '' |
| | | this.form.affiliatedFacilities = '' |