<template>
|
<div class="connectivity">
|
<el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
|
title="地图上点击要显示流向的管段">选择管段
|
</el-button>
|
<el-table max-height="200" class="tableBox" highlight-current-row :data="tableDataLiuxiang" size="mini">
|
<el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="管段名称"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="起点编号"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="终点编号"></el-table-column>
|
<el-table-column class-name="fixed-table" fixed="right" label="操作" width="60">
|
<template slot-scope="scope">
|
<el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span class="fixed-style">分析结果</span>
|
<el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult"
|
@row-click="lxResultSelect" style="width: 100%" size="mini">
|
<el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" width="100" sortable prop="pipecode"
|
label="管段名称"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
label="起点编号"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
|
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'
|
import eventBus from '../../../../../eventBus'
|
|
export default {
|
name: 'Flow',
|
data () {
|
return {
|
// 流向 选择的管段 的table表格数据
|
tableDataLiuxiang: [],
|
// 流向 分析结果 的table表格数据
|
lxTableDataResult: [],
|
linkPipeline: [],
|
currentSelectResultLine: null
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
eventBus.$on('tabData-change', (obj) => {
|
if (obj) {
|
this.handleClick()
|
}
|
})
|
})
|
},
|
methods: {
|
// tab切换
|
handleClick () {
|
this.clearLX()
|
this.linkClear()
|
this.tableDataLiuxiang = []
|
this.tableDataLinkStart = []
|
this.tableDataLinkEnd = []
|
this.tableDataLinkResult = []
|
this.lxTableDataResult = []
|
},
|
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
|
}
|
},
|
// 定位方法事件
|
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())
|
},
|
// 清楚分析结果
|
clearLinkPipe () {
|
if (this.linkPipeline.length > 0) {
|
this.linkPipeline.forEach((itm, idx) => {
|
itm.remove()
|
})
|
}
|
this.linkPipeline = []
|
},
|
// 地图上点击
|
selectPipeLine () {
|
window.map.on('click', this.selectClick)
|
// // 关闭弹窗
|
window.layerFactory.clickSwitch = false
|
},
|
// 地图上点击回调
|
selectClick (e) {
|
// console.log(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)
|
this.tableDataLiuxiang = res.data
|
},
|
// 流向分析结果table列表数据点击
|
lxResultSelect (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 {
|
weight: 10,
|
color: 'rgba(0,250,255,.6)'
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
|
},
|
// 点击显示流向 table列表中的数据 => 进行官网流向的显示
|
async lxQuery (e) {
|
// console.log(e)
|
this.clearLinkPipe()
|
const param = {
|
// lineNodeID: e.startpoint
|
lineNodeID: e.startpointnumber
|
}
|
const res = await mapApi.findFlowDirection(param)
|
this.lxTableDataResult = res.data
|
const linkPipe = []
|
res.data.forEach((itm, idx) => {
|
const geom = JSON.parse(itm.geomText)
|
const points = []
|
geom.coordinates.forEach((it, id) => {
|
const item = it.reverse()
|
if (it.length > 2) {
|
item.shift()
|
}
|
points.push(item)
|
})
|
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)
|
})
|
},
|
// 清除流向
|
clearLX () {
|
if (this.flowPipeLine != null) {
|
this.flowPipeLine.remove()
|
this.flowPipeLine = null
|
}
|
if (this.currentSelectResultLine != null) {
|
this.currentSelectResultLine.remove()
|
this.currentSelectResultLine = null
|
}
|
if (this.linkPipeline.length > 0) {
|
this.linkPipeline.forEach((itm, idx) => {
|
itm.remove()
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|
