<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>
|
<!-- <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" -->
|
</div>
|
</template>
|
|
<script>
|
import eventBus from '../../../../../eventBus'
|
import mapApi from '../../../../../api/mapApi'
|
import DrawLine from './DrawLine'
|
|
export default {
|
name: 'CrossSectional',
|
data () {
|
return {
|
measure: null,
|
myChart: null,
|
options: [],
|
echartsList: [],
|
myChartShow: false,
|
linkPipeline: [],
|
// 横断面 管段查询结果 的table表格数据
|
tableData: [],
|
hdmParam: null
|
}
|
},
|
mounted () {
|
// 初始化echarts图表
|
this.myChart = this.$echarts.init(this.$refs.myChart)
|
// 使用 DrwLine方法
|
eventBus.$on('draw-hdm-line', (points) => {
|
this.getHdmPoint(points)
|
})
|
},
|
methods: {
|
// tab切换
|
handleClick () {
|
this.clearLinkPipe()
|
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') {
|
}
|
},
|
// 清楚分析结果
|
clearLinkPipe () {
|
if (this.linkPipeline.length > 0) {
|
this.linkPipeline.forEach((itm, idx) => {
|
itm.remove()
|
})
|
}
|
this.linkPipeline = []
|
},
|
// 横断面绘制线段
|
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>
|
|
</style>
|
