<template>
|
<div class="connectivity">
|
<el-row>
|
<el-button type="primary" size="mini" @click="linkClickStart" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button>
|
<el-button type="primary" size="mini" @click="linkClickEnd" title="地图上点击与所选管段连通管段">结束管段</el-button>
|
<el-button type="primary" size="mini" @click="linkQuery" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
|
<el-button type="primary" size="mini" @click="linkClear" title="根据起始、结束管段进行连通性分析">清除</el-button>
|
</el-row>
|
<el-card class="box-card">
|
<el-scrollbar style="height:2rem">
|
<span class="clearfix">起始管段</span>
|
<el-table
|
ref="singleTable"
|
highlight-current-row
|
:data="startingSection"
|
max-height="200"
|
style="width: 100%" size="mini">
|
<el-table-column
|
prop="lineloopna"
|
label="管线类型"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="pipecode"
|
label="管线名称"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="startpoint"
|
label="起点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="endpointnu"
|
label="终点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
class-name="fixed-tablea"
|
fixed="right"
|
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="clearfix">结束管段</span>
|
<el-table
|
:data="tableData"
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="管线类型">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="管线名称">
|
</el-table-column>
|
<el-table-column
|
prop="province"
|
label="起点编号">
|
</el-table-column>
|
<el-table-column
|
prop="city"
|
label="终点编号">
|
</el-table-column>
|
<el-table-column
|
class-name="fixed-table"
|
fixed="right"
|
label="操作">
|
</el-table-column>
|
</el-table>
|
<span class="clearfix">分析结果</span>
|
<el-table
|
:data="tableData"
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="管线类型">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="管线名称">
|
</el-table-column>
|
<el-table-column
|
prop="province"
|
label="起点编号">
|
</el-table-column>
|
<el-table-column
|
prop="city"
|
label="终点编号">
|
</el-table-column>
|
<el-table-column
|
class-name="fixed-table"
|
fixed="right"
|
label="操作">
|
</el-table-column>
|
</el-table>
|
</el-scrollbar>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'Connectivity',
|
data () {
|
return {
|
// 连通性
|
linkType: 1, // 1 连通性起始管段 0 连通性结束管段 用来判断是点击了起始 还是结束管段
|
map: window.map,
|
tableData: [],
|
startingSection: []
|
}
|
},
|
methods: {
|
// 流向地图上点击
|
selectPipeLine () {
|
this.map.on('click', this.selectClick)
|
},
|
// 地图上点击回调
|
selectClick (e) {
|
this.map.off('click', this.selectClick)
|
const point = [e.latlng.lng, e.latlng.lat]
|
console.log(point)
|
// 根据数据进行数据请求
|
// this.getPipeLine(point)
|
},
|
// 数据请求
|
async getPipeLine (point) {
|
const param = {
|
x: point[0],
|
y: point[1],
|
radius: 3
|
}
|
console.log(param)
|
// const res = await api.getPipeline(param)
|
// console.log(res)
|
// this.startingSection = res.data
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .fixed-tablea {
|
background: rgba(0, 16, 30, 1) !important;
|
}
|
|
/deep/ .el-table__fixed-right::before {
|
background: none;
|
}
|
</style>
|
