<template>
|
<div class="connectivity">
|
<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>
|
<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%" size="mini">
|
<el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
|
:label="item.label" :show-overflow-tooltip="true" min-width="100"></el-table-column>
|
</el-table>
|
<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>
|
</div>
|
</template>
|
|
<script>
|
import eventBus from '../../../../../eventBus'
|
import mapApi from '../../../../../api/mapApi'
|
import DrawLine from '../../../../plugin/DrawLine'
|
|
export default {
|
name: 'CrossSectional',
|
data () {
|
return {
|
// 用于绘制横断面线段
|
measure: null,
|
// 定义 echarts对象
|
myChart: null,
|
// 用于判断echarts图表的显示与隐藏
|
myChartShow: false,
|
// 用于定义接收横断面数据
|
hdmParam: null,
|
// 横断面 管段查询结果 的table表格数据
|
tableData: [],
|
// table 表格定义的字段
|
listLabel: [
|
{
|
label: '介质类型',
|
prop: 'mediumtype'
|
},
|
{
|
label: '断面(经度)',
|
prop: 'x'
|
},
|
{
|
label: '断面(纬度)',
|
prop: 'y'
|
},
|
{
|
label: '断面高程(m)',
|
prop: 'z'
|
},
|
{
|
label: '间距(m)',
|
prop: 'spacing'
|
}
|
]
|
}
|
},
|
mounted () {
|
// 初始化echarts图表
|
this.myChart = this.$echarts.init(this.$refs.myChart)
|
// 使用 DrwLine方法
|
eventBus.$on('draw-hdm-line', (points) => {
|
this.getHdmPoint(points)
|
})
|
eventBus.$on('tabData-change', (obj) => {
|
if (obj) {
|
this.jdmClear()
|
}
|
})
|
},
|
methods: {
|
// 横断面 线段绘制
|
drawLine () {
|
if (this.measure === null) {
|
this.measure = new DrawLine(window.map)
|
}
|
this.measure.destory()
|
this.measure.init()
|
},
|
// 绘制的横断面 线段数据获取
|
async getHdmPoint (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)
|
// 调用数据处理方法
|
this.dealWithData(res)
|
// table数据处理
|
const dataPoint = res.data.point
|
// 存储间距list
|
const spacingList = res.data.pointInterval.reverse()
|
for (let i = 0; i < dataPoint.length; i++) {
|
const obj = {
|
mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
|
x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(8),
|
y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(8),
|
z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(2),
|
spacing: spacingList[i - 1]
|
}
|
this.tableData.push(obj)
|
}
|
},
|
// 对获取到的数据进行处理
|
dealWithData (e) {
|
console.log(e)
|
const dataPoint = e.data.point
|
const spacingList = e.data.pointInterval.reverse()
|
const dataList = []
|
for (let i = 0; i < dataPoint.length; i++) {
|
const obj = {
|
mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
|
startpointz: dataPoint[i].pipelines.extraData.startpointz,
|
diameter: dataPoint[i].pipelines.extraData.diameter,
|
spacing: spacingList[i - 1],
|
x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(8),
|
y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(8),
|
z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(2)
|
}
|
dataList.push(obj)
|
}
|
// 横向坐标数据
|
const xAxisData = []
|
const dataObj = []
|
for (let i = 0; i < dataList.length; i++) {
|
xAxisData.push(dataList[i].mediumtype)
|
// if (dataList[i].mediumtype === '雨水') {
|
// dataObj.color = 'red'
|
// }
|
dataObj.push(dataList[i].startpointz)
|
}
|
this.selectRow(xAxisData, dataObj)
|
},
|
// 横断面绘制完成后 进行横断面数据分析 进行图表展示
|
selectRow (xAxisData, dataObj) {
|
const option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
// legend: {
|
// data: []
|
// },
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
splitLine: {
|
lineStyle: {
|
type: 'dashed'
|
},
|
show: true
|
},
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
data: xAxisData,
|
axisLabel: {
|
interval: 0,
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
yAxis: {
|
axisPointer: {
|
snap: true
|
},
|
splitLine: {
|
show: false
|
},
|
type: 'value',
|
axisLabel: {
|
interval: 0,
|
textStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
series: [
|
{
|
type: 'scatter',
|
data: dataObj
|
}
|
]
|
}
|
this.myChartShow = true
|
this.myChart.clear()
|
this.myChart.setOption(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>
|
|
</style>
|
