From 86a3bf670a40559a8e72021925435492667f40d0 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 20 四月 2021 13:51:47 +0800
Subject: [PATCH] 图表部分修改
---
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 250 ++++++++++++++++++++++++++-----------------------
1 files changed, 133 insertions(+), 117 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index e5fd270..9b4a92f 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -162,11 +162,9 @@
<el-card shadow="hover">
<span class="clearfixs">鍙戠敓鐖嗚鐨勭娈�</span>
<el-table
-
ref="singleTable"
highlight-current-row
:data="bgPipeLine"
-
style="width: 100%" size="mini">
<el-table-column
prop="lineloopna"
@@ -362,6 +360,7 @@
width="180">
</el-table-column>
<el-table-column
+ class-name="fixed-table"
fixed="right"
label="鍥捐〃鏌ョ湅"
>
@@ -387,65 +386,72 @@
<script>
-// import eventBus from './AnalysisChoose/eventBus'
-// import DrawLine from './AnalysisChoose/DrawLine'
-
-// import api from "../api"
+import eventBus from '../../../../eventBus'
+import DrawLine from './AnalysisChoose/DrawLine'
// import main from "../leaflet/app/main"
-
import mapApi from '@/api/mapApi'
export default {
name: 'SewersAnalysis',
data () {
return {
- activeName: 'first', // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈�
+ // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈�
+ activeName: 'first',
measure: null,
map: null,
- tableData: [],
- tableDataLiuxiang: [],
myChart: null,
myChartShow: false,
flowPipeLine: null,
-
- // 杩為�氭��
- linkType: 1, // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃
- // 璧峰绠℃琛ㄦ牸鏁版嵁
- tableDataLinkStart: [],
- // 缁撴潫绠℃琛ㄦ牸鏁版嵁
- tableDataLinkEnd: [],
- // 杩為�氭�у垎鏋愮粨鏋滆〃鏍�
- tableDataLinkResult: [],
currentSelectStart: null,
currentSelectEnd: null,
currentSelectStartLine: null,
currentSelectEndLine: null,
currentSelectResultLine: null,
-
currentResultLine: null,
- currentLinkIsTrue: '',
linkPipeline: [],
- lxTableDataResult: [],
-
- bgPipeLine: [],
- bgFm: [],
bgPoint: null,
bgMarker: null,
+ hdmParam: null,
- hdmParam: null
+ // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃
+ linkType: 1,
+ // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁
+ tableDataLinkStart: [],
+ // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁
+ tableDataLinkEnd: [],
+ // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫�
+ currentLinkIsTrue: '',
+ // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁
+ tableDataLinkResult: [],
+
+ // 鐖嗙 鍙戠敓鐖嗚鐨勭娈� table琛ㄦ牸鏁版嵁
+ bgPipeLine: [],
+ // 鐖嗙 闇�瑕佸叧闂殑闃�闂� table琛ㄦ牸鏁版嵁
+ bgFm: [],
+
+ // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁
+ tableDataLiuxiang: [],
+ // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ lxTableDataResult: [],
+
+ // 妯柇闈� 绠＄嚎鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ tableData: []
}
},
mounted () {
- this.$nextTick(() => {
- this.map = window.map
- // this.myChart = this.$echarts.init(document.getElementById('echarts_box'))
- // eventBus.$on('draw-hdm-line', (points) => {
- // this.getHdmPoint(points)
- // })
+ // this.myChart = this.$echarts.init(document.getElementById('echarts_box'))
+ // 鍏ㄥ眬map浼犻�� || this.map = window.map
+ this.map = window.map
+ eventBus.$on('map-obj', (mapObj) => {
+ this.map = mapObj
+ })
+ // 浣跨敤 DrwLine鏂规硶
+ eventBus.$on('draw-hdm-line', (points) => {
+ this.getHdmPoint(points)
})
},
methods: {
@@ -474,7 +480,7 @@
this.map.off('click', this.selectClick)
const point = [e.latlng.lng, e.latlng.lat]
console.log(point)
- // this.getPipeLine(point)
+ this.getPipeLine(point)
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃
@@ -489,6 +495,7 @@
this.linkType = 0
this.selectPipeLine()
},
+ // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectStart (e) {
console.log('閫夋嫨璧峰绠℃')
console.log(e)
@@ -506,6 +513,7 @@
// }).addTo(this.map)
// this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
},
+ // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectEnd (e) {
console.log('閫夋嫨缁撴潫绠℃')
console.log(e)
@@ -524,6 +532,7 @@
// }).addTo(this.map)
// this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
},
+ // 杩為�氭�� 鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁閫夋嫨鐐瑰嚮浜嬩欢
linkResultSelect (e) {
console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
console.log(e)
@@ -601,7 +610,7 @@
// this.linkPipeline.push(line)
// })
},
- // 杩為�氭�ч儴鍒嗙殑娓呴櫎鍔熻兘
+ // 杩為�氭�х殑娓呴櫎鍔熻兘
linkClear () {
if (this.currentSelectStartLine != null) {
this.currentSelectStartLine.remove()
@@ -618,65 +627,6 @@
if (this.bgMarker != null) {
this.bgMarker.remove()
this.bgMarker = null
- }
- },
-
- // 娴佸悜鍒嗘瀽缁撴灉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 = L.geoJSON(geom, {
- // style: function (feature) {
- // return { color: 'rgba(0,250,255,.6)' }
- // }
- // }).addTo(this.map)
- // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
- },
- // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃鏁版嵁
- async lxQuery (e) {
- console.log(e)
- this.clearLinkPipe()
- // const param = {
- // lineNodeID: e.startpoint
- // }
- // const res = await api.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 = main.createFlowLine(param1)
- // // this.linkPipeline.push(line)
- // })
- },
- // 娓呴櫎娴佸悜
- clearLX () {
- if (this.flowPipeLine != null) {
- this.flowPipeLine.remove()
- this.flowPipeLine = null
}
},
@@ -764,14 +714,76 @@
// marker.addTo(this.map)
this.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 = L.geoJSON(geom, {
+ // style: function (feature) {
+ // return { color: 'rgba(0,250,255,.6)' }
+ // }
+ // }).addTo(this.map)
+ // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
+ },
+ // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃鏁版嵁
+ async lxQuery (e) {
+ console.log(e)
+ this.clearLinkPipe()
+ // const param = {
+ // lineNodeID: e.startpoint
+ // }
+ // const res = await api.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 = main.createFlowLine(param1)
+ // // this.linkPipeline.push(line)
+ // })
+ },
+ // 娓呴櫎娴佸悜
+ clearLX () {
+ if (this.flowPipeLine != null) {
+ this.flowPipeLine.remove()
+ this.flowPipeLine = null
+ }
+ },
+
// 娴佸悜鏁版嵁璇锋眰
async getPipeLine (point) {
- // const param = {
- // x: point[0],
- // y: point[1],
- // radius: 3
- // }
+ const param = {
+ x: point[0],
+ y: point[1],
+ radius: 3
+ }
+ console.log(param)
+ // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
// const res = await api.getPipeline(param)
// 3 娴佸悜
@@ -812,6 +824,7 @@
// this.flowPipeLine = main.createFlowLine(param)
},
+ // 娓呮鍒嗘瀽缁撴灉
clearLinkPipe () {
if (this.linkPipeline.length > 0) {
this.linkPipeline.forEach((itm, idx) => {
@@ -820,6 +833,7 @@
}
this.linkPipeline = []
},
+ // 閫嗘祦鍚戞樉绀�
lxHandleClick2 (e) {
console.log('閫嗘祦鍚戞樉绀�')
console.log(e)
@@ -836,6 +850,15 @@
// }
// this.flowPipeLine = main.createFlowLine(param)
},
+ // 妯柇闈㈢粯鍒剁嚎娈�
+ drawLine () {
+ console.log('drawLine')
+ if (this.measure === null) {
+ this.measure = new DrawLine(this.map)
+ }
+ this.measure.destory()
+ this.measure.init()
+ },
// 妯柇闈㈡暟鎹姹�
async getHdmPoint (line) {
console.log('妯柇闈㈢殑缁樺埗绾�')
@@ -847,11 +870,20 @@
y2: line[1].lat
}
},
- // 妯柇闈㈤�夋嫨鍚� 鍥捐〃灞曠ず
+ // 妯柇闈㈡暟鎹姹�
+ async jdmQuery () {
+ if (this.hdmParam == null) {
+ this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�')
+ return false
+ }
+ // 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋�
+ // const res = await api.getCrossSection(this.hdmParam)
+ // console.log(res)
+ },
+ // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず
async selectRow (e) {
console.log(e)
// 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
-
const option = {
xAxis: {
type: 'category',
@@ -865,26 +897,10 @@
type: 'line'
}]
}
-
this.myChartShow = true
this.myChart.setOption(option)
},
- drawLine () {
- console.log('drawLine')
- // if (this.measure === null) {
- // this.measure = new DrawLine(this.map)
- // }
- this.measure.destory()
- this.measure.init()
- },
- async jdmQuery () {
- // if (this.hdmParam == null) {
- // this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�')
- // return
- // }
- // const res = await api.getCrossSection(this.hdmParam)
- // console.log(res)
- },
+ // 妯柇闈㈡竻闄�
jdmClear () {
this.hdmParam = null
if (this.measure != null) {
--
Gitblit v1.8.0