<template>
|
<div class="sewers-analysis-tab">
|
<!--<transition name="el-fade-in-linear">-->
|
<!--<el-card>-->
|
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
<el-tab-pane label="连通性" name="first">
|
<el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
|
title="地图上点击选择需要进行连通分析的管段">起始管段
|
</el-button>
|
<el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
|
title="地图上点击与所选管段连通管段">结束管段
|
</el-button>
|
<el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
|
title="根据起始、结束管段进行连通性分析">连通性分析
|
</el-button>
|
<el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
|
title="根据起始、结束管段进行连通性分析">清除
|
</el-button>
|
<!-- <el-scrollbar style="height:450px">-->
|
<!-- <el-card shadow="hover">-->
|
<span class="fixed-style">起始管段</span>
|
<el-table
|
class="tableBox"
|
max-height="200"
|
highlight-current-row
|
:data="tableDataLinkStart"
|
@row-click="linkSelectStart"
|
style="width: 100%" size="mini">
|
<el-table-column
|
prop="datasource"
|
label="管线类型"
|
>
|
</el-table-column>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
sortable
|
width="100"
|
prop="pipecode"
|
label="管线名称"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="material"
|
label="起点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="material"
|
label="终点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
class-name="fixed-table"
|
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="fixed-style">结束管段</span>
|
<el-table
|
class="tableBox"
|
height="100"
|
max-height="200"
|
highlight-current-row
|
:data="tableDataLinkEnd"
|
@row-click="linkSelectEnd"
|
style="width: 100%" size="mini">
|
<el-table-column
|
prop="datasource"
|
label="管线类型"
|
>
|
</el-table-column>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
sortable
|
width="100"
|
prop="pipecode"
|
label="管线名称"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="material"
|
label="起点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="material"
|
label="终点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
class-name="fixed-table"
|
fixed="right"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
|
<el-table
|
class="tableBox"
|
highlight-current-row
|
max-height="200"
|
:data="tableDataLinkResult"
|
@row-click="linkResultSelect"
|
style="width: 100%" size="mini">
|
|
<el-table-column
|
prop="material"
|
label="管线类型"
|
>
|
</el-table-column>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
sortable
|
width="100"
|
prop="pipecode"
|
label="管线名称"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="material"
|
label="起点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
sortable
|
width="100"
|
prop="material"
|
label="终点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
class-name="fixed-table"
|
fixed="right"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
<!--</el-card>-->
|
<!--</el-scrollbar>-->
|
</el-tab-pane>
|
<el-tab-pane label="爆管" style=";color: #cccccc" name="second">
|
<el-row>
|
<span>爆管（相关开关）</span>
|
<el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;"
|
title="地图上点击选择发生爆管的管段">
|
选择管段
|
</el-button>
|
<el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" 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="操作"
|
>
|
<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="lineloopna"
|
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="startpoint"
|
label="起点编号"
|
>
|
</el-table-column>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
sortable
|
width="100"
|
prop="endpointnu"
|
label="终点编号"
|
>
|
</el-table-column>
|
|
<el-table-column
|
class-name="fixed-table"
|
fixed="right"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- </el-card>-->
|
</el-tab-pane>
|
<el-tab-pane label="流向" name="third">
|
<el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
|
title="地图上点击要显示流向的管线">
|
选择管段
|
</el-button>
|
<el-table
|
max-height="200"
|
class="tableBox"
|
: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="100"
|
>
|
<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="操作"
|
>
|
<template slot-scope="scope">
|
<el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="横断面" name="fourth">
|
<el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;"
|
title="地图上绘制要进行分析截断面的线">
|
绘制线段
|
</el-button>
|
<el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析
|
</el-button>
|
<el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
|
</el-button>
|
<!-- <el-card class="box-card">-->
|
<div slot="header" class="fixed-style">
|
<span>管线查询结果</span>
|
</div>
|
<el-table
|
class="tableBox"
|
:data="tableData"
|
max-height="200"
|
style="width: 100%" @row-click="selectRow" size="mini">
|
<el-table-column
|
prop="pipename"
|
label="管线名称"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="mediumtype"
|
label="管线类型"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
class-name="fixed-table"
|
fixed="right"
|
label="图表查看"
|
>
|
<template slot-scope="scope">
|
<el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- </el-card>-->
|
<el-card class="box-card">
|
<div slot="header" class="fixed-style">
|
<span>断面图</span>
|
</div>
|
<span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
|
<div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
|
</el-card>
|
</el-tab-pane>
|
</el-tabs>
|
<!--</el-card>-->
|
<!--</transition>-->
|
</div>
|
</template>
|
|
<script>
|
|
import eventBus from '../../../../eventBus'
|
import DrawLine from './AnalysisChoose/DrawLine'
|
import mapApi from '../../../../api/mapApi'
|
|
export default {
|
name: 'SewersAnalysis',
|
data () {
|
return {
|
// 地图点击类型 first连通性点击 second爆管点击 third流向点击 fourth横断面
|
activeName: 'first',
|
measure: null,
|
map: window.map,
|
|
myChart: null,
|
options: [],
|
myChartShow: false,
|
flowPipeLine: null,
|
|
// 用于判断
|
currentSelectStart: null,
|
currentSelectEnd: null,
|
currentSelectStartLine: null,
|
currentSelectEndLine: null,
|
currentSelectResultLine: null,
|
currentResultLine: null,
|
|
linkPipeline: [],
|
|
bgPoint: null,
|
bgMarker: null,
|
hdmParam: null,
|
|
// 连通性 // 1 连通性起始管段 0 连通性结束管段 用来判断是点击了起始 还是结束管段
|
linkType: 1,
|
// 连通性 起始管段 表格数据
|
tableDataLinkStart: [],
|
// 连通性 结束管段 表格数据
|
tableDataLinkEnd: [],
|
// 连通性 分析结果 展示 => 连通 || 不连通
|
currentLinkIsTrue: '',
|
// 连通性 分析结果 表格数据
|
tableDataLinkResult: [],
|
|
// 爆管 发生爆裂的管段 table表格数据
|
bgPipeLine: [],
|
// 爆管 需要关闭的阀门 table表格数据
|
bgFm: [],
|
|
// 流向 选择的管段 的table表格数据
|
tableDataLiuxiang: [],
|
// 流向 分析结果 的table表格数据
|
lxTableDataResult: [],
|
|
// 横断面 管线查询结果 的table表格数据
|
tableData: [],
|
|
echartsList: []
|
|
}
|
},
|
mounted () {
|
// 初始化echarts图表
|
this.myChart = this.$echarts.init(this.$refs.myChart)
|
// 使用 DrwLine方法
|
eventBus.$on('draw-hdm-line', (points) => {
|
this.getHdmPoint(points)
|
})
|
},
|
methods: {
|
// tab切换
|
handleClick (tab, event) {
|
// console.log(tab, event)
|
this.clearLinkPipe()
|
this.clearLX()
|
this.linkClear()
|
this.jdmClear()
|
this.currentLinkIsTrue = ''
|
this.bgFm = []
|
this.bgPipeLine = []
|
this.tableData = []
|
this.tableDataLiuxiang = []
|
this.tableDataLinkStart = []
|
this.tableDataLinkEnd = []
|
this.tableDataLinkResult = []
|
this.lxTableDataResult = []
|
},
|
|
// 流向地图上点击
|
selectPipeLine () {
|
window.map.on('click', this.selectClick)
|
},
|
// 地图上点击回调
|
selectClick (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: 5
|
}
|
// 根据参数请求接口数据
|
const res = await mapApi.findPipelineByClickPoint(param)
|
if (this.activeName === 'first') {
|
if (this.linkType === 1) {
|
this.tableDataLinkStart = res.data
|
} else {
|
this.tableDataLinkEnd = res.data
|
}
|
} else if (this.activeName === 'second') {
|
this.bgPipeLine = res.data
|
} else if (this.activeName === 'third') {
|
this.tableDataLiuxiang = res.data
|
} else if (this.activeName === 'fourth') {
|
}
|
// debugger
|
console.log(res.data)
|
},
|
// 流向显示 的方法参数封
|
createFlowLine (param) {
|
const flowLine = window.L.polyline(param.points, param.option)
|
flowLine.addTo(window.map)
|
return flowLine
|
},
|
createFlowMarker (point) {
|
return window.L.marker(point, {
|
icon: window.L.divIcon({
|
className: 'dIcon',
|
html: '<div class="plane live">' +
|
// '<img src="'+require("../../assets/images/map/ship.png")+
|
'<div style="position: absolute;' +
|
' width: 20px;' +
|
' height: 20px;' +
|
' border-radius: 50%;' +
|
' content: \'\'; background-color: #FF664A;"/>' +
|
'<span></span><span></span></div></>',
|
iconSize: [90, 36]
|
})
|
})
|
},
|
|
// 连通性 ===> 地图点击起始管段e
|
linkClickStart (e) {
|
console.log(e)
|
console.log('地图点击起始管段')
|
this.linkType = 1
|
this.selectPipeLine()
|
},
|
// 连通性 起始管段 table列表数据 选择数据事件 的点击事件
|
linkSelectStart (e) {
|
console.log('选择起始管段')
|
// this.$refs.singleTable.setCurrentRow(e)
|
this.currentSelectStart = e
|
if (this.currentSelectStartLine != null) {
|
this.currentSelectStartLine.remove()
|
this.currentSelectStartLine = null
|
}
|
const geom = JSON.parse(e.geomText)
|
this.currentSelectStartLine = window.L.geoJSON(geom, {
|
style: function (feature) {
|
return {
|
weight: 10,
|
color: 'rgba(0,255,0,.6)'
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
|
},
|
// 连通性 ===> 地图点击结束管段
|
linkClickEnd () {
|
console.log('地图点击结束管段')
|
this.linkType = 0
|
this.selectPipeLine()
|
},
|
// 连通性 结束管段 table列表数据 选择数据事件 的点击事件
|
linkSelectEnd (e) {
|
console.log('选择结束管段')
|
this.currentSelectEnd = e
|
|
// 做判断remove
|
if (this.currentSelectEndLine != null) {
|
this.currentSelectEndLine.remove()
|
this.currentSelectEndLine = null
|
}
|
// geoGson
|
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())
|
},
|
// 连通性查询
|
async linkQuery () {
|
// 每次查询分析结果为空
|
this.tableDataLinkResult = []
|
if (this.linkPipeline.length > 1) {
|
this.linkPipeline.forEach((itm) => {
|
itm.remove()
|
})
|
this.linkPipeline = []
|
}
|
// 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段
|
if (this.currentSelectStart === null || this.currentSelectEnd === null) {
|
this.$message('请选择起始管段和结束管段')
|
return false
|
}
|
|
// 请求数据时的参数
|
const param = {
|
startLineID: this.currentSelectStart.pipesegcode,
|
endLineID: this.currentSelectEnd.pipesegcode
|
}
|
console.log(param)
|
// 请求接口和数据
|
const res = await mapApi.findConnectedPipelines(param)
|
console.log(res)
|
// 判断数据结果 === 0 则没有请求到数据
|
if (res.data.length === 0) {
|
this.$message('没有找到连通的管段')
|
this.currentLinkIsTrue = '不连通'
|
return
|
}
|
this.tableDataLinkResult = res.data
|
this.currentLinkIsTrue = '连通'
|
// table 数组数据置空
|
const linkPipe = []
|
// 数据遍历geoJson
|
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 = this.createFlowLine(param1)
|
this.linkPipeline.push(line)
|
})
|
},
|
// 连通性 分析结果table列表数据选择点击事件
|
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: 6
|
}
|
}
|
}).addTo(window.map)
|
window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
|
},
|
// 连通性的清除功能
|
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
|
}
|
if (this.bgMarker != null) {
|
this.bgMarker.remove()
|
this.bgMarker = 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 { 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.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 = this.createFlowLine(param1)
|
this.linkPipeline.push(line)
|
})
|
},
|
bgFmClick (e) {
|
console.log('点击影响的阀门')
|
console.log(e)
|
const point = [e.data[0][0], e.data[0][1]]
|
const marker = this.createFlowMarker(point)
|
marker.addTo(this.map)
|
window.map.flyTo(point, 16)
|
},
|
|
// 流向分析结果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 { 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) => {
|
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 = this.createFlowLine(param1)
|
this.linkPipeline.push(line)
|
})
|
},
|
// 清除流向
|
clearLX () {
|
if (this.flowPipeLine != null) {
|
this.flowPipeLine.remove()
|
this.flowPipeLine = null
|
}
|
},
|
// 流向-管线选择
|
selectRowLiuXiang (e) {
|
// 选择要显示的流向线
|
// console.log('选择要显示的流向线')
|
// console.log(e)
|
},
|
lxHandleClick (e) {
|
// console.log('正流向显示')
|
// console.log(e)
|
//
|
// // 清除流向方法
|
// this.clearLX()
|
// const param = {
|
// points: e.data,
|
// option: {
|
// dashArray: '15 15',
|
// dashSpeed: -30
|
// }
|
// }
|
// this.flowPipeLine = this.createFlowLine(param)
|
},
|
|
// 清楚分析结果
|
clearLinkPipe () {
|
if (this.linkPipeline.length > 0) {
|
this.linkPipeline.forEach((itm, idx) => {
|
itm.remove()
|
})
|
}
|
this.linkPipeline = []
|
},
|
// 逆流向显示
|
lxHandleClick2 (e) {
|
// console.log('逆流向显示')
|
// console.log(e)
|
// if (this.flowPipeLine != null) {
|
// this.flowPipeLine.remove()
|
// this.flowPipeLine = null
|
// }
|
// const param = {
|
// points: e.data,
|
// option: {
|
// dashArray: '15 15',
|
// dashSpeed: 30
|
// }
|
// }
|
// this.flowPipeLine = this.createFlowLine(param)
|
},
|
// 横断面绘制线段
|
drawLine () {
|
// console.log('drawLine')
|
if (this.measure === null) {
|
this.measure = new DrawLine(window.map)
|
}
|
this.measure.destory()
|
this.measure.init()
|
},
|
// 横断面数据请求
|
async getHdmPoint (line) {
|
// console.log('横断面的绘制线')
|
// console.table(line)
|
// 横断面数据
|
this.hdmParam = {
|
x1: line[0].lng,
|
y1: line[0].lat,
|
x2: line[1].lng,
|
y2: line[1].lat
|
}
|
},
|
// 横断面数据请求
|
async jdmQuery () {
|
if (this.hdmParam == null) {
|
this.$message('请先在地图上绘制截断线')
|
return false
|
}
|
// 已绘制线图 进行绘制横断面数据分析
|
const res = await mapApi.getCrossSection(this.hdmParam)
|
const dataPoint = res.data.point
|
for (let i = 0; i < dataPoint.length; i++) {
|
const obj = {
|
pipename: dataPoint[i].pipelines.extraData.pipename,
|
mediumtype: dataPoint[i].pipelines.extraData.mediumtype
|
}
|
this.tableData.push(obj)
|
}
|
this.dealWithData(res)
|
},
|
dealWithData (e) {
|
const dataSeries = e.data.point
|
let tempData
|
const storeData = []
|
const dataList = []
|
this.echartsList = []
|
for (let i = 0; i < dataSeries.length; i++) {
|
if (storeData.length === 0) {
|
storeData.push(name)
|
tempData = {
|
name: dataSeries[i].pipelines.oilPipeID,
|
data: e.data.pointInterval,
|
type: 'line'
|
}
|
this.echartsList.push(tempData)
|
}
|
dataList.push(dataSeries[i].pipelines.oilPipeID)
|
}
|
// console.log(dataList)
|
// const seriesList = e.data.pointInterval
|
// let seriesdata
|
// for (let i = 0; i < seriesList.length; i++) {
|
// console.log(seriesList[i])
|
// }
|
// x数据处理
|
this.selectRow(dataList)
|
},
|
// 横断面绘制完成后 进行横断面数据分析 进行图表展示
|
selectRow (dataList) {
|
// console.log(dataList)
|
// 3. 使用刚指定的配置项和数据，显示图表
|
this.option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
// legend: {
|
// // data: ['直接访问', '搜索引擎']
|
// data: dataList
|
// },
|
toolbox: {
|
show: false,
|
feature: {
|
saveAsImage: {}
|
}
|
},
|
grid: {
|
// left: '3%',
|
// right: '4%',
|
// bottom: '3%',
|
// containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
axisLabel: {
|
// formatter: '{value}',
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
// data: dataList
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLabel: {
|
// formatter: '{value}',
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
],
|
// series: [
|
// {
|
// name: '搜索引擎',
|
// type: 'line',
|
// stack: '总量',
|
// label: {
|
// show: true,
|
// position: 'top'
|
// },
|
// areaStyle: {},
|
// emphasis: {
|
// focus: 'series'
|
// },
|
// data: [820, 932, 901, 934, 1290, 1330, 1320]
|
// }
|
// ]
|
series: this.echartsList
|
}
|
this.myChartShow = true
|
this.myChart.clear()
|
this.myChart.setOption(this.option)
|
},
|
// 横断面清除
|
jdmClear () {
|
this.hdmParam = null
|
this.tableData = []
|
this.option = []
|
this.myChartShow = false
|
this.myChart.clear()
|
if (this.measure != null) {
|
this.measure.destory()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
/*****滚动条***/
|
/deep/ .tableBox {
|
.el-table__fixed-right-patch {
|
display: none;
|
}
|
}
|
|
/deep/ .tableBox::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
|
/*height: 10px;*/
|
}
|
|
/deep/ .tableBox::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 10px;
|
background: #000;
|
}
|
|
/deep/ .tableBox::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: @background-color;
|
border-radius: 10px;
|
}
|
|
/deep/ .el-table .has-gutter tr th {
|
border: none !important;
|
}
|
|
/deep/ .el-table tbody tr:hover > td {
|
background: none !important
|
}
|
|
/deep/ .el-tabs__header {
|
background: none !important;
|
}
|
|
/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
padding-left: 20px;
|
}
|
|
/deep/ .el-tabs--border-card {
|
background: none;
|
border: none;
|
box-shadow: none;
|
}
|
|
/deep/ .el-tabs--border-card > .el-tabs__header {
|
background: none;
|
border-bottom: none;
|
margin: 0;
|
}
|
|
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
color: #409EFF;
|
background: none;
|
border: none;
|
}
|
|
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
|
border: none;
|
}
|
|
/deep/ .panel-right ::-webkit-scrollbar-thumb {
|
background: none;
|
border: none;
|
}
|
|
/deep/ .el-card {
|
//width: 95%;
|
//margin: 5px auto;
|
//border: none;
|
//background: rgba(0, 16, 30, 0.5);
|
//border: 0.00521rem solid @color;
|
//box-shadow: 0 0 0.03rem @color;
|
}
|
|
/deep/ .el-card__body {
|
padding: 0;
|
}
|
|
/deep/ .fixed-style {
|
font-size: 12px;
|
display: inline-block;
|
color: #ffffff;
|
margin: 15px;
|
}
|
|
/deep/ th.is-leaf {
|
border: none !important;
|
}
|
|
/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
|
background: none;
|
}
|
|
/deep/ .el-table__fixed-right {
|
bottom: 0;
|
padding: 0;
|
margin: 0;
|
}
|
|
/deep/ .fixed-table {
|
background: rgba(0, 16, 30, 0.9) !important;
|
}
|
</style>
|
