From c60e56e2b6ceb633c6b10f5dc52e3da88129ad70 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期五, 21 五月 2021 17:35:41 +0800
Subject: [PATCH] 管线分析相关功能问题修改
---
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue | 442 +++++++++++++++++++++++++------------------------------
1 files changed, 200 insertions(+), 242 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
index 11e58c9..ddfc644 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
@@ -1,58 +1,67 @@
<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 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>
+ <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>
+ <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 './DrawLine'
+import DrawLine from '../../../../plugin/DrawLine'
export default {
name: 'CrossSectional',
data () {
return {
+ // 鐢ㄤ簬缁樺埗妯柇闈㈢嚎娈�
measure: null,
+ // 瀹氫箟 echarts瀵硅薄
myChart: null,
- options: [],
- echartsList: [],
+ // 鐢ㄤ簬鍒ゆ柇echarts鍥捐〃鐨勬樉绀轰笌闅愯棌
myChartShow: false,
- linkPipeline: [],
+ // 鐢ㄤ簬瀹氫箟鎺ユ敹妯柇闈㈡暟鎹�
+ hdmParam: null,
// 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
tableData: [],
- hdmParam: null
+ // table 琛ㄦ牸瀹氫箟鐨勫瓧娈�
+ listLabel: [
+ {
+ label: '浠嬭川绫诲瀷',
+ prop: 'mediumtype'
+ },
+ {
+ label: '鏂潰(缁忓害)',
+ prop: 'x'
+ },
+ {
+ label: '鏂潰(绾害)',
+ prop: 'y'
+ },
+ {
+ label: '鏂潰楂樼▼(m)',
+ prop: 'z'
+ },
+ {
+ label: '闂磋窛(m)',
+ prop: 'spacing'
+ }
+ ]
}
},
mounted () {
@@ -62,213 +71,13 @@
eventBus.$on('draw-hdm-line', (points) => {
this.getHdmPoint(points)
})
+ eventBus.$on('tabData-change', (obj) => {
+ if (obj) {
+ this.jdmClear()
+ }
+ })
},
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
@@ -279,6 +88,155 @@
if (this.measure != null) {
this.measure.destory()
}
+ },
+ // 妯柇闈� 绾挎缁樺埗
+ 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],
+ startpointz: dataPoint[i].pipelines.extraData.startpointz,
+ diameter: dataPoint[i].pipelines.extraData.diameter
+ }
+ this.tableData.push(obj)
+ }
+ // 璋冪敤鏁版嵁澶勭悊鏂规硶
+ this.dealWithData(this.tableData)
+ },
+ // 瀵硅幏鍙栧埌鐨勬暟鎹繘琛屽鐞�
+ dealWithData (dataList) {
+ console.log(dataList)
+ // 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
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ data: xAxisData,
+ axisLabel: {
+ interval: 0,
+ textStyle: {
+ color: '#fff'
+ },
+ margin: 20
+ }
+ },
+ yAxis: {
+ axisLine: {
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ 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)
}
}
}
--
Gitblit v1.8.0