<template>
|
<div class="ReportLocationSection">
|
<el-form :model="form" label-width="90px">
|
<el-row class="pipe-line-search">
|
<el-col :span="12">
|
<el-form-item label="管线名称:">
|
<el-input v-model="form.pipeName">
|
<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-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-form-item label="管段编码:">
|
<el-input v-model="form.sectionName" disabled></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="附属设施:">
|
<el-input v-model="form.affiliatedFacilities" disabled></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="pipe-table" v-show="this.tableList.length>=1">
|
<el-card>
|
<span class="fixed-style" style="display: block">管线名称</span>
|
<el-table
|
:data="tableList"
|
border
|
height="120"
|
max-height="140"
|
@row-click="sectionShowClick"
|
style="width: 100%">
|
<el-table-column
|
label="序号"
|
type="index"
|
>
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.pipename"
|
label="管线名称">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.subchaname"
|
label="支线名称">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.mediumtype"
|
label="管线类型">
|
</el-table-column>
|
<el-table-column width="40" fixed="right" label="操作">
|
<template slot-scope="scope">
|
<el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-card>
|
<span class="fixed-style" style="display: block">管段列表</span>
|
<el-table
|
:data="tableListSection"
|
border
|
@row-click="sectionCode"
|
height="100"
|
max-height="100"
|
style="width: 100%">
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.pipesegcode"
|
label="管段编码">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.startpointnumber"
|
label="起点探查号">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.endpointnumber"
|
label="终点探查号">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.material"
|
label="材质">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.embeddingmode"
|
label="埋设方式">
|
</el-table-column>
|
<el-table-column width="40" fixed="right" label="操作">
|
<template slot-scope="scope">
|
<el-button @click="localAdr(scope.row)" type="text" size="small">定位</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span class="fixed-style" style="display: block">附属设施列表</span>
|
<el-table
|
:data="tableDataAffFac"
|
border
|
@row-click="affFacName"
|
height="120"
|
max-height="140"
|
style="width: 100%">
|
<el-table-column
|
show-overflow-tooltip
|
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
|
width="150"
|
show-overflow-tooltip
|
prop="properties.type"
|
label="设施类型">
|
</el-table-column>
|
<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>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
<el-row style="text-align: right;margin: 10px">
|
<el-button type="primary" @click="confirm">确认</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { highlight, fitBounds } from '../../../helpers/LocateHelper'
|
import WfsHelper from '@components/helpers/WfsHelper'
|
import AjaxUtils from '@utils/AjaxUtils'
|
import eventBus from '../../../../eventBus'
|
import { WMS_URL } from '../../../../conf/Constants'
|
|
export default {
|
name: 'ReportLocationSection',
|
data () {
|
return {
|
form: {
|
pipeName: '',
|
sectionName: '',
|
affiliatedFacilities: ''
|
},
|
// 管线查询数据列表
|
tableList: [],
|
// 管段查询数据列表
|
tableListSection: [],
|
// 附属设施查询列表数据
|
tableDataAffFac: [],
|
// 定义类型判断 if 是搜索到的数据可以进行管线选择 else 点击定位选择的管线不可以进行选择
|
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)
|
// 如果 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()
|
}
|
},
|
// 点击管段列表 管段编码传递
|
sectionCode (val) {
|
// console.log(val)
|
this.form.sectionName = val.properties.pipecode
|
},
|
// 点击附属设施列表 管段编码传递
|
affFacName (val) {
|
// console.log(val)
|
this.form.affiliatedFacilities = val.properties.name
|
},
|
// 定位功能
|
localAdr (val) {
|
// console.log(val)
|
fitBounds(val)
|
highlight(val)
|
},
|
// 管线 点击定位管段的选择功能
|
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)
|
}
|
}
|
})
|
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 = ''
|
},
|
// 点击定位 擦寻管段
|
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',
|
// 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])
|
}
|
})
|
},
|
// 点击确认
|
confirm () {
|
// console.log('点击确定选择完成')
|
eventBus.$emit('location-setChange', true)
|
this.form.pipeName = ''
|
this.form.sectionName = ''
|
this.form.affiliatedFacilities = ''
|
this.tableList = []
|
this.tableListSection = []
|
this.tableDataAffFac = []
|
this.SectionAndAffFacTableJudge = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/*/deep/ .el-input {*/
|
/* width: 0.74353rem;*/
|
/*}*/
|
|
.pipe-line-search {
|
display: flex;
|
align-items: center;
|
|
.el-button {
|
margin: 0 15px;
|
}
|
}
|
|
.pipe-table {
|
/*display: flex;*/
|
/*align-items: center;*/
|
/*justify-content: space-around;*/
|
|
/deep/ .el-card {
|
/*width: 1.39523rem;*/
|
/*max-width: 1.39523rem;*/
|
/*height: 0.9343rem;*/
|
/*max-height: 0.9343rem;*/
|
|
.el-table {
|
margin: 0.05345rem auto;
|
}
|
}
|
}
|
|
.fixed-style {
|
color: @color;
|
}
|
|
/deep/
|
.warnPagination {
|
.btn-quicknext, .btn-quickprev {
|
color: #e4e8f1 !important;
|
background-color: transparent;
|
// border: 1px solid #25AECD;
|
border-left: 1px solid #25AECD;
|
border-bottom: 1px solid #25AECD;
|
border-top: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
|
.el-pager li {
|
color: #e4e8f1;
|
background: transparent;
|
// border: 1px solid #25AECD;
|
border-left: 1px solid #25AECD;
|
border-bottom: 1px solid #25AECD;
|
border-top: 1px solid #25AECD;
|
}
|
|
.el-pager li.active {
|
border-color: #25AECD;
|
background-color: rgba(38, 222, 253, 0.3);
|
color: #e4e8f1;
|
}
|
|
.el-pager li:hover {
|
border-color: #25AECD;
|
background-color: rgba(38, 222, 253, 0.3);
|
color: #34e0ff;
|
}
|
|
.btn-prev {
|
background-color: transparent;
|
// border: 1px solid #25AECD;
|
border-left: 1px solid #25AECD;
|
border-bottom: 1px solid #25AECD;
|
border-top: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
|
.btn-next {
|
background-color: transparent;
|
border: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
}
|
</style>
|
