<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 prop="pipecode" label="管线名称"></el-table-column>
|
<el-table-column sortable prop="startpoint" label="起点编号"></el-table-column>
|
<el-table-column sortable 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>
|
