<template>
|
<div class="connectivity">
|
<el-row>
|
<span>爆管（相关开关）</span>
|
<el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button>
|
<el-button type="primary" @click="handleClick" size="mini" title="清除绘制">清除</el-button>
|
</el-row>
|
<!-- <el-card shadow="hover">-->
|
<span class="fixed-style">发生爆裂的管段</span>
|
<el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine"
|
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" 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="40">
|
<template slot-scope="scope">
|
<el-button @click="bgSelect(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="bgFm" @row-click="bgFmClick"
|
style="width: 100%" size="mini">
|
<el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column>
|
<el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
|
label="管段名称"></el-table-column>
|
<el-table-column sortable :show-overflow-tooltip="true" 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>
|
<!-- </el-card>-->
|
</div>
|
</template>
|
|
<script>
|
import mapApi from '../../../../../api/mapApi'
|
import { pulseEffect } from '../../../../../utils/utils'
|
import { createFlowLine } from './PublicWay'
|
import eventBus from '../../../../../eventBus'
|
|
export default {
|
name: 'Tube',
|
data () {
|
return {
|
bgPoint: null,
|
bgMarker: null,
|
hdmParam: null,
|
// 爆管 发生爆裂的管段 table表格数据
|
bgPipeLine: [],
|
// 爆管 需要关闭的阀门 table表格数据
|
bgFm: [],
|
linkPipeline: [],
|
currentSelectEndLine: null
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
eventBus.$on('tabData-change', (obj) => {
|
if (obj) {
|
this.handleClick()
|
}
|
})
|
})
|
},
|
methods: {
|
handleClick () {
|
this.clearLinkPipe()
|
this.linkClear()
|
this.bgFm = []
|
this.bgPipeLine = []
|
},
|
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
|
}
|
},
|
// 地图上点击
|
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.bgPipeLine = res.data
|
},
|
// 清楚分析结果
|
clearLinkPipe () {
|
if (this.linkPipeline.length > 0) {
|
this.linkPipeline.forEach((itm, idx) => {
|
itm.remove()
|
})
|
}
|
this.linkPipeline = []
|
if (this.currentSelectEndLine != null) {
|
this.currentSelectEndLine.remove()
|
this.currentSelectEndLine = null
|
}
|
},
|
// 爆管 ===> 选择管段
|
bgClick () {
|
this.selectPipeLine()
|
},
|
async bgSelect (e) {
|
// console.log('选择爆管管段')
|
// console.log(e)
|
this.bgFm = []
|
if (this.bgMarker != null) {
|
this.bgMarker.remove()
|
this.bgMarker = null
|
}
|
|
if (this.currentSelectEndLine != null) {
|
this.currentSelectEndLine.remove()
|
this.currentSelectEndLine = null
|
}
|
this.clearLinkPipe()
|
// 给选择中的数据添加设置样式
|
const geom = JSON.parse(e.geomText)
|
this.currentSelectEndLine = window.L.geoJSON(geom, {
|
style: function (feature) {
|
return {
|
weight: 10,
|
color: 'rgba(200,0,200,.6)'
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
|
|
// 数据请求参数
|
const param = {
|
lineID: e.pipesegcode
|
}
|
const res = await mapApi.findLeakages(param)
|
// console.log(res)
|
|
const len = res.data.length
|
if (len === 0) {
|
this.$message('未找到需要关闭的阀门')
|
return
|
}
|
res.data.reverse()
|
this.bgFm = res.data
|
// console.log(res.data)
|
|
this.bgPoint = res.data[0].startControlPoint
|
|
// const point = JSON.parse(this.bgPoint.geomText)
|
// const p = [point.coordinates[1], point.coordinates[0]]
|
// this.bgMarker = this.createFlowMarker(p)
|
// this.bgMarker = pulseEffect(p)
|
// this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
|
// this.bgMarker.addTo(window.map)
|
// window.map.flyTo(p)
|
|
const linkPipe = []
|
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)
|
})
|
},
|
bgFmClick (e) {
|
// console.log('点击影响的阀门')
|
// console.log(e)
|
// const point = [e.data[0][0], e.data[0][1]]
|
const point = [e.startControlPoint.y, e.startControlPoint.x]
|
pulseEffect(point)
|
// const marker = this.createFlowMarker(point)
|
// marker.addTo(window.map)
|
// window.map.flyTo(point, 17)
|
},
|
// 定位方法事件
|
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())
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|
