<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="tableData"
|
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 连通性结束管段 用来判断是点击了起始 还是结束管段
|
tableData: []
|
}
|
},
|
methods: {
|
// 地图点击起始管段
|
linkClickStart () {
|
console.log('地图点击起始管段')
|
this.linkType = 1
|
// this.selectPipeLine()
|
},
|
// 地图点击结束管段
|
linkClickEnd () {
|
console.log('地图点击结束管段')
|
this.linkType = 0
|
// this.selectPipeLine()
|
},
|
// 连通性分析
|
linkQuery () {
|
console.log('点击连通性分析')
|
},
|
// 清除功能
|
linkClear () {
|
console.log('点击清除')
|
},
|
// 选择起始管段
|
linkSelectStart () {
|
console.log('选择起始管段')
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .fixed-tablea {
|
background: rgba(0, 16, 30, 1) !important;
|
}
|
/deep/ .el-table__fixed-right::before {
|
background: none;
|
}
|
</style>
|
