From 4f35a8b56c12315c82fd5bd136f32da2dcadc5e2 Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期二, 27 四月 2021 09:27:22 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 270 ++++++++++++++++++++++++++++-------------------------
1 files changed, 142 insertions(+), 128 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index e5fd270..4b3d479 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -17,8 +17,8 @@
title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎
</el-button>
<el-scrollbar style="height:450px">
- <el-card shadow="hover"> <!-- style="height: 300px"-->
- <span class="clearfixs">璧峰绠℃</span>
+ <el-card shadow="hover">
+ <span class="fixed-style">璧峰绠℃</span>
<el-table
ref="singleTable"
highlight-current-row
@@ -62,7 +62,7 @@
</template>
</el-table-column>
</el-table>
- <span class="clearfixs">缁撴潫绠℃</span>
+ <span class="fixed-style">缁撴潫绠℃</span>
<el-table
max-height="200"
highlight-current-row
@@ -105,7 +105,7 @@
</template>
</el-table-column>
</el-table>
- <span class="clearfixs">鍒嗘瀽缁撴灉:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
+ <span class="fixed-style">鍒嗘瀽缁撴灉:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
<el-table
highlight-current-row
max-height="200"
@@ -160,13 +160,11 @@
<el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="娓呴櫎缁樺埗">娓呴櫎
</el-button>
<el-card shadow="hover">
- <span class="clearfixs">鍙戠敓鐖嗚鐨勭娈�</span>
+ <span class="fixed-style">鍙戠敓鐖嗚鐨勭娈�</span>
<el-table
-
ref="singleTable"
highlight-current-row
:data="bgPipeLine"
-
style="width: 100%" size="mini">
<el-table-column
prop="lineloopna"
@@ -204,7 +202,7 @@
</template>
</el-table-column>
</el-table>
- <span class="clearfixs">闇�瑕佸叧闂殑闃�闂�</span>
+ <span class="fixed-style">闇�瑕佸叧闂殑闃�闂�</span>
<el-table
highlight-current-row
:data="bgFm"
@@ -345,7 +343,7 @@
<el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="娓呴櫎鎴柇闈㈠垎鏋愮粨鏋�">娓呴櫎
</el-button>
<el-card class="box-card">
- <div slot="header" class="clearfixs">
+ <div slot="header" class="fixed-style">
<span>绠＄嚎鏌ヨ缁撴灉</span>
</div>
<el-table
@@ -362,6 +360,7 @@
width="180">
</el-table-column>
<el-table-column
+ class-name="fixed-table"
fixed="right"
label="鍥捐〃鏌ョ湅"
>
@@ -372,11 +371,11 @@
</el-table>
</el-card>
<el-card class="box-card">
- <div slot="header" class="clearfixs">
+ <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" style="width: 600px;height:300px;"></div>
+ <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div>
</el-card>
</el-tab-pane>
</el-tabs>
@@ -387,65 +386,68 @@
<script>
-// import eventBus from './AnalysisChoose/eventBus'
-// import DrawLine from './AnalysisChoose/DrawLine'
-
-// import api from "../api"
-// import main from "../leaflet/app/main"
-
-import mapApi from '@/api/mapApi'
+import eventBus from '../../../../eventBus'
+import DrawLine from './AnalysisChoose/DrawLine'
+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: [],
+ map: window.map,
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)
- // })
+ // 鍒濆鍖杄charts鍥捐〃
+ this.myChart = this.$echarts.init(this.$refs.myChart)
+ // 浣跨敤 DrwLine鏂规硶
+ eventBus.$on('draw-hdm-line', (points) => {
+ this.getHdmPoint(points)
})
},
methods: {
@@ -467,14 +469,14 @@
// 娴佸悜鍦板浘涓婄偣鍑�
selectPipeLine () {
- this.map.on('click', this.selectClick)
+ window.map.on('click', this.selectClick)
},
// 鍦板浘涓婄偣鍑诲洖璋�
selectClick (e) {
- this.map.off('click', this.selectClick)
+ window.map.off('click', this.selectClick)
const point = [e.latlng.lng, e.latlng.lat]
console.log(point)
- // this.getPipeLine(point)
+ this.getPipeLine(point)
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃
@@ -489,6 +491,7 @@
this.linkType = 0
this.selectPipeLine()
},
+ // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectStart (e) {
console.log('閫夋嫨璧峰绠℃')
console.log(e)
@@ -506,6 +509,7 @@
// }).addTo(this.map)
// this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
},
+ // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectEnd (e) {
console.log('閫夋嫨缁撴潫绠℃')
console.log(e)
@@ -524,6 +528,7 @@
// }).addTo(this.map)
// this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
},
+ // 杩為�氭�� 鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁閫夋嫨鐐瑰嚮浜嬩欢
linkResultSelect (e) {
console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
console.log(e)
@@ -601,7 +606,7 @@
// this.linkPipeline.push(line)
// })
},
- // 杩為�氭�ч儴鍒嗙殑娓呴櫎鍔熻兘
+ // 杩為�氭�х殑娓呴櫎鍔熻兘
linkClear () {
if (this.currentSelectStartLine != null) {
this.currentSelectStartLine.remove()
@@ -618,65 +623,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,6 +710,66 @@
// 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 = {
@@ -771,7 +777,9 @@
// y: point[1],
// radius: 3
// }
+ // console.log(param)
+ // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
// const res = await api.getPipeline(param)
// 3 娴佸悜
@@ -801,6 +809,7 @@
console.log('姝ｆ祦鍚戞樉绀�')
console.log(e)
+ // 娓呴櫎娴佸悜鏂规硶
this.clearLX()
// const param = {
// points: e.data,
@@ -812,6 +821,7 @@
// this.flowPipeLine = main.createFlowLine(param)
},
+ // 娓呮鍒嗘瀽缁撴灉
clearLinkPipe () {
if (this.linkPipeline.length > 0) {
this.linkPipeline.forEach((itm, idx) => {
@@ -820,6 +830,7 @@
}
this.linkPipeline = []
},
+ // 閫嗘祦鍚戞樉绀�
lxHandleClick2 (e) {
console.log('閫嗘祦鍚戞樉绀�')
console.log(e)
@@ -836,10 +847,20 @@
// }
// 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('妯柇闈㈢殑缁樺埗绾�')
- console.table(line)
+ // console.table(line)
+ // 妯柇闈㈡暟鎹�
this.hdmParam = {
x1: line[0].lng,
y1: line[0].lat,
@@ -847,11 +868,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 +895,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) {
@@ -942,7 +956,7 @@
padding: 0;
}
-/deep/ .clearfixs {
+/deep/ .fixed-style {
display: inline-block;
color: #ffffff;
margin: 15px;
--
Gitblit v1.8.0