<template>
|
<div class="connectivity">
|
<el-row>
|
<el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段
|
</el-button>
|
<el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button>
|
<el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
|
<el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button>
|
</el-row>
|
<span class="fixed-style">起始管段</span>
|
<el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart"
|
highlight-current-row style="width: 100%" size="mini">
|
<el-table-column prop="datasource" label="管段类型"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="管段名称"></el-table-column>
|
<el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
|
<el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
|
<el-table-column width="40" fixed="right" class-name="fixed-table" label="操作">
|
<template slot-scope="scope">
|
<el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span class="fixed-style">结束管段</span>
|
<el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd"
|
@row-click="linkSelectEnd" style="width: 100%" size="mini">
|
<el-table-column prop="datasource" label="管段类型"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="管段名称"></el-table-column>
|
<el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
|
<el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
|
<el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
|
<template slot-scope="scope">
|
<el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
|
<el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult"
|
style="width: 100%" size="mini">
|
<el-table-column prop="material" label="管段类型"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="管段名称"></el-table-column>
|
<el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column>
|
<el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column>
|
<el-table-column class-name="fixed-table" fixed="right" label="操作" width="40">
|
<template slot-scope="scope">
|
<el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
|
import mapApi from '../../../../../api/mapApi'
|
import { createFlowLine } from './PublicWay'
|
|
export default {
|
name: 'Connectivity',
|
data () {
|
return {
|
// 连通性 // 1 连通性起始管段 0 连通性结束管段 用来判断是点击了起始 还是结束管段
|
linkType: 1,
|
// 连通性 起始管段 表格数据
|
tableDataLinkStart: [],
|
// 连通性 结束管段 表格数据
|
tableDataLinkEnd: [],
|
// 连通性 分析结果 展示 => 连通 || 不连通
|
currentLinkIsTrue: '',
|
// 连通性 分析结果 表格数据
|
tableDataLinkResult: [],
|
linkPipeline: [],
|
currentSelectStart: null,
|
currentSelectEnd: null,
|
currentSelectStartLine: null,
|
currentSelectEndLine: null,
|
currentSelectResultLine: null,
|
flowPipeLine: null
|
}
|
},
|
methods: {
|
// 地图上点击
|
selectPipeLine () {
|
window.map.on('click', this.selectClick)
|
// 关闭弹窗
|
window.layerFactory.clickSwitch = false
|
},
|
// 地图上点击回调
|
selectClick (e) {
|
window.map.off('click', this.selectClick)
|
const point = [e.latlng.lng, e.latlng.lat]
|
this.getPipeLine(point)
|
},
|
// 点击获取判断数据
|
async getPipeLine (point) {
|
const param = {
|
x: point[0],
|
y: point[1],
|
radius: 3
|
}
|
// 根据参数请求接口数据
|
const res = await mapApi.findPipelineByClickPoint(param)
|
// console.log(res)
|
if (this.linkType === 1) {
|
this.tableDataLinkStart = res.data
|
} else {
|
this.tableDataLinkEnd = res.data
|
}
|
},
|
// 连通性 ===> 地图点击起始管段e
|
linkClickStart (e) {
|
// console.log('地图点击起始管段')
|
this.linkType = 1
|
this.selectPipeLine()
|
},
|
// 连通性 起始管段 table列表数据 选择数据事件 的点击事件
|
linkSelectStart (e) {
|
this.currentSelectStart = e
|
if (this.currentSelectStartLine != null) {
|
this.currentSelectStartLine.remove()
|
this.currentSelectStartLine = null
|
}
|
const geom = JSON.parse(e.geomText)
|
this.currentSelectStartLine = window.L.geoJSON(geom, {
|
style: function (feature) {
|
return {
|
weight: 10,
|
color: 'rgba(0,255,0,.6)'
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
|
},
|
// 连通性 ===> 地图点击结束管段
|
linkClickEnd () {
|
// console.log('地图点击结束管段')
|
this.linkType = 0
|
this.selectPipeLine()
|
},
|
// 连通性 结束管段 table列表数据 选择数据事件 的点击事件
|
linkSelectEnd (e) {
|
// console.log('选择结束管段')
|
this.currentSelectEnd = e
|
|
// 做判断remove
|
if (this.currentSelectEndLine != null) {
|
this.currentSelectEndLine.remove()
|
this.currentSelectEndLine = null
|
}
|
// geoGson
|
const geom = JSON.parse(e.geomText)
|
this.currentSelectEndLine = window.L.geoJSON(geom, {
|
style: function (feature) {
|
return {
|
weight: 10,
|
color: 'rgba(255, 247, 0, 0.7)'
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
|
},
|
// 连通性查询 结果
|
async linkQuery () {
|
// 每次查询分析结果制空
|
this.tableDataLinkResult = []
|
if (this.linkPipeline.length > 1) {
|
this.linkPipeline.forEach((itm) => {
|
itm.remove()
|
})
|
this.linkPipeline = []
|
}
|
// 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段
|
if (this.currentSelectStart === null || this.currentSelectEnd === null) {
|
this.$message('请选择起始管段和结束管段')
|
return false
|
}
|
|
// 请求数据时的参数
|
const param = {
|
startLineID: this.currentSelectStart.pipesegcode,
|
endLineID: this.currentSelectEnd.pipesegcode
|
}
|
// console.log(param)
|
// 请求接口和数据
|
const res = await mapApi.findConnectedPipelines(param)
|
// console.log(res)
|
// 判断数据结果 === 0 则没有请求到数据
|
if (res.data.length === 0) {
|
this.$message('没有找到连通的管段')
|
// 进行判断
|
this.currentLinkIsTrue = '不连通'
|
return
|
}
|
this.tableDataLinkResult = res.data
|
this.currentLinkIsTrue = '连通'
|
// table 数组数据置空
|
const linkPipe = []
|
// 数据遍历geoJson
|
res.data.forEach((itm, idx) => {
|
const geom = JSON.parse(itm.geomText)
|
const points = []
|
geom.coordinates.forEach((it, id) => {
|
points.push(it.reverse())
|
})
|
linkPipe.push(points)
|
})
|
linkPipe.forEach((itm, idx) => {
|
const param1 = {
|
points: itm,
|
option: {
|
dashArray: '15 15',
|
dashSpeed: -30,
|
color: '#ffff00'
|
}
|
}
|
const line = createFlowLine(param1)
|
this.linkPipeline.push(line)
|
})
|
},
|
// 定位方法事件
|
linkResultSelect (e) {
|
// console.log('连通性分析结果列表点击')
|
// console.log(e)
|
const geom = JSON.parse(e.geomText)
|
if (this.currentSelectResultLine != null) {
|
this.currentSelectResultLine.remove()
|
this.currentSelectResultLine = null
|
}
|
this.currentSelectResultLine = window.L.geoJSON(geom, {
|
style: function (feature) {
|
return {
|
color: 'rgba(255,0,0,.6)',
|
weight: 10
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
|
},
|
// 连通性的清除功能
|
linkClear () {
|
if (this.currentSelectStartLine != null) {
|
this.currentSelectStartLine.remove()
|
this.currentSelectStartLine = null
|
}
|
if (this.currentSelectEndLine != null) {
|
this.currentSelectEndLine.remove()
|
this.currentSelectEndLine = null
|
}
|
if (this.currentSelectResultLine != null) {
|
this.currentSelectResultLine.remove()
|
this.currentSelectResultLine = null
|
}
|
},
|
handleClick () {
|
this.linkClear()
|
this.currentLinkIsTrue = ''
|
this.tableDataLinkStart = []
|
this.tableDataLinkEnd = []
|
this.tableDataLinkResult = []
|
if (this.flowPipeLine != null) {
|
this.flowPipeLine.remove()
|
this.flowPipeLine = null
|
}
|
if (this.linkPipeline.length > 0) {
|
this.linkPipeline.forEach((itm, idx) => {
|
itm.remove()
|
})
|
}
|
this.linkPipeline = []
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
</style>
|
