<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-search" @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">管线名称</span>
|
<el-table
|
:data="tableList"
|
border
|
height="240"
|
max-height="280"
|
@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.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">管段列表</span>
|
<el-table
|
:data="tableListSection"
|
border
|
@row-click="sectionCode"
|
height="100"
|
max-height="120"
|
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">附属设施列表</span>
|
<el-table
|
:data="tableDataAffFac"
|
border
|
@row-click="affFacName"
|
height="100"
|
max-height="120"
|
style="width: 120%">
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.name"
|
label="附属设施名称">
|
</el-table-column>
|
<el-table-column
|
show-overflow-tooltip
|
prop="properties.type"
|
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>
|
</div>
|
<el-row style="text-align: center;margin: 10px">
|
<el-button type="primary" @click="confirm">确认</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import WfsHelper from '@components/helpers/WfsHelper'
|
import AjaxUtils from '@utils/AjaxUtils'
|
// import { pulseEffect } from '../../../../utils/utils'
|
// import mapApi from '../../../../api/mapApi'
|
|
import { fitBounds, highlight } from '../../../../components/helpers/LocateHelper'
|
import eventBus from '../../../../eventBus'
|
// import MapManager from '../../../helpers/MapManager'
|
|
export default {
|
name: 'ReportLocationSection',
|
data () {
|
return {
|
form: {
|
pipeName: '',
|
sectionName: '',
|
affiliatedFacilities: ''
|
},
|
// 管线查询数据列表
|
tableList: [],
|
// 管段查询数据列表
|
tableListSection: [],
|
// 附属设施查询列表数据
|
tableDataAffFac: [],
|
// 分页功能
|
pageSize: 3,
|
total: 0,
|
currentPage: 1
|
}
|
},
|
mounted () {
|
this.wfsHelper = new WfsHelper()
|
},
|
methods: {
|
// 点击管线列表 展示管段内容
|
async sectionShowClick (val) {
|
console.log(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
|
}
|
this.wfsHelper = new WfsHelper()
|
// 附属设施查询
|
this.tableDataAffFac = []
|
const AffFacSearch = val.properties.pipename
|
this.wfsHelper.clearFilter()
|
this.wfsHelper.setTypeName(['sewer:view_pipeline'])
|
this.wfsHelper.addLike('name', AffFacSearch)
|
this.wfsHelper.addEquals('name', '\'' + 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
|
}
|
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) {
|
fitBounds(val)
|
highlight(val)
|
},
|
// 管线点击点击定位功能
|
pipeClickLocation () {
|
// console.log('val')
|
// this.selectPipeLine()
|
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++) {
|
// console.log(res.features[i].properties)
|
this.tableList.push(res.features[i])
|
}
|
// console.log(this.tableList)
|
})
|
})
|
},
|
// 管线搜索
|
async pipelineSearch () {
|
// this.pipeTable = !this.pipeTable
|
this.tableList = []
|
this.wfsHelper.clearFilter()
|
this.wfsHelper.setTypeName(['sewer:pipeline'])
|
if (this.form.pipeName) {
|
this.wfsHelper.addLike('name', this.form.pipeName)
|
}
|
// this.wfsHelper.addEquals('type', '\'' + 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()
|
},
|
// 分页功能 currentPage 改变时会触发
|
handlePage (val) {
|
// console.log(val)
|
this.currentPage = val
|
},
|
// 分页功能 pageSize 改变时会触发
|
handleSizeChange (val) {
|
// console.log(val)
|
this.pageSize = val
|
},
|
// 点击确认
|
confirm () {
|
console.log('点击确定选择完成')
|
eventBus.$emit('section-search', true)
|
}
|
}
|
}
|
</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: 1.9343rem;
|
max-height: 1.9343rem;
|
|
.el-table {
|
margin: 0.07345rem 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>
|
