<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-row>
|
<el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段
|
</el-button>
|
<el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button>
|
<el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
|
<el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button>
|
</el-row>
|
<!-- <el-scrollbar style="height:450px">-->
|
<!-- <el-card shadow="hover">-->
|
<span class="fixed-style">起始管段</span>
|
<el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart"
|
highlight-current-row 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 width="40" 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="操作" width="40">
|
<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"
|
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="操作" 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>-->
|
<!--</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" 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>-->
|
</el-tab-pane>
|
<el-tab-pane label="流向" name="third">
|
<el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
|
title="地图上点击要显示流向的管段">选择管段
|
</el-button>
|
<el-table max-height="200" class="tableBox" highlight-current-row :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="60">
|
<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="操作" 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-tab-pane>
|
<el-tab-pane label="横断面" name="fourth">
|
<el-row>
|
<el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button>
|
<el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button>
|
<el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button>
|
</el-row>
|
<!-- <el-card class="box-card">-->
|
<div slot="header" class="fixed-style">
|
<span>管段查询结果</span>
|
</div>
|
<el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row
|
style="width: 100%" @row-click="selectRow" size="mini">
|
<el-table-column prop="pipename" label="管段名称"></el-table-column>
|
<el-table-column prop="mediumtype" label="管段类型" width="80"></el-table-column>
|
<el-table-column class-name="fixed-table" fixed="right" label="图表" width="40">
|
<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> -->
|
<span class="fixed-style">断面图</span>
|
<span v-show="!myChartShow"
|
style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
|
<div v-show="myChartShow" id="echarts_box" ref="myChart"
|
style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" -->
|
</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'
|
import { pulseEffect } from '../../../../utils/utils'
|
// import iconUrl from '../../../../assets/images/other.png'
|
|
export default {
|
name: 'SewersAnalysis',
|
data () {
|
return {
|
// 地图点击类型 first连通性点击 second爆管点击 third流向点击 fourth横断面
|
activeName: 'first',
|
measure: null,
|
map: window.map,
|
|
myChart: null,
|
options: [],
|
echartsList: [],
|
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: []
|
|
}
|
},
|
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(event)
|
// console.log(tab)
|
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)
|
// // 关闭弹窗
|
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)
|
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') {
|
}
|
},
|
// 流向显示 的方法参数封
|
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('地图点击起始管段')
|
this.linkType = 1
|
this.selectPipeLine()
|
},
|
// 连通性 起始管段 table列表数据 选择数据事件 的点击事件
|
linkSelectStart (e) {
|
// console.log(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(255, 247, 0, 0.7)'
|
}
|
}
|
}).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)
|
})
|
},
|
// 定位方法事件
|
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())
|
},
|
// 连通性的清除功能
|
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 {
|
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 = 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 point = [e.startControlPoint.y, e.startControlPoint.x]
|
pulseEffect(point)
|
// const marker = this.createFlowMarker(point)
|
// marker.addTo(window.map)
|
// window.map.flyTo(point, 17)
|
},
|
|
// 流向分析结果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 {
|
weight: 10,
|
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 () {
|
this.tableData = []
|
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)
|
}
|
// console.log(this.tableData, 'this.tableData')
|
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: '10px',
|
right: '0',
|
top: '10px',
|
bottom: '5px',
|
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/ .el-tabs .el-tabs__item {
|
height: 20px;
|
line-height: 20px;
|
}
|
|
/deep/ .el-tabs--border-card > .el-tabs__content {
|
padding: 5px;
|
}
|
|
/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/ .fixed-style {
|
/*margin: 15px;*/
|
font-size: 12px;
|
display: inline-block;
|
color: #00fff6;
|
}
|
|
/deep/ th.is-leaf {
|
border: none !important;
|
}
|
|
/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
|
background: none;
|
}
|
|
/deep/ .el-table__empty-text {
|
line-height: 170px;
|
}
|
|
/deep/ .el-table__body .el-table__row.hover-row td {
|
background: none !important;
|
color: yellow;
|
}
|
|
/deep/ .el-table__body tr.current-row > td {
|
background: rgba(0, 16, 30, 1) !important;
|
}
|
|
/deep/ .fixed-table {
|
background: rgba(0, 16, 30, 1) !important;
|
}
|
|
/*scroll右侧占位*/
|
/deep/ .el-table__fixed-right-patch {
|
display: none;
|
}
|
|
/deep/ .el-tab-pane {
|
min-height: 506.19px;
|
}
|
|
/*/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__body {*/
|
/* padding: 0;*/
|
/*}*/
|
/*/deep/ .el-table__fixed-right {*/
|
/* bottom: 0;*/
|
/* padding: 0;*/
|
/* margin: 0;*/
|
/*}*/
|
</style>
|
