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/Connectivity.vue | 371 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 303 insertions(+), 68 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
index 325eb98..e7b8aeb 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
@@ -1,83 +1,318 @@
<template>
- <div class="connectivity">
- <el-row>
- <el-button type="primary" size="mini">璧峰绠℃</el-button>
- <el-button type="primary" size="mini">缁撴潫绠℃</el-button>
- <el-button type="primary" size="mini">杩為�氭�у垎鏋�</el-button>
- <el-button type="primary" size="mini">娓呴櫎</el-button>
- </el-row>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
- </div>
+ <div class="connectivity">
+ <el-row>
+ <el-button type="primary" @click="linkClickStart" size="mini" title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃
+ </el-button>
+ <el-button type="primary" @click="linkClickEnd" size="mini" title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃</el-button>
+ <el-button type="primary" @click="linkQuery" size="mini" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�</el-button>
+ <el-button type="primary" @click="handleClick" size="mini" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎</el-button>
+ </el-row>
+ <span class="fixed-style">璧峰绠℃</span>
+ <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart"
+ highlight-current-row style="width: 100%" size="mini">
+ <el-table-column prop="mediumtype" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipename"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable width="100" prop="startpointnumber" label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column sortable width="100" prop="endpointnumber" label="缁堢偣缂栧彿"></el-table-column>
+<!-- <el-table-column v-for="(item, index) in tableDataLinkStartList" :key="index" :prop="item.prop"-->
+<!-- :label="item.label" :show-overflow-tooltip="true" min-width="100" :sortable="item.sortable">-->
+<!-- </el-table-column>-->
+ <el-table-column width="40" fixed="right" class-name="fixed-table" label="鎿嶄綔">
+ <template slot-scope="scope">
+ <el-button @click="linkSelectStart(scope.row)" type="text" size="small">閫夋嫨</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span class="fixed-style">缁撴潫绠℃</span>
+ <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd"
+ @row-click="linkSelectEnd" style="width: 100%" size="mini">
+ <el-table-column prop="mediumtype" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipename"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable width="100" prop="startpointnumber" label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column sortable width="100" prop="endpointnumber" label="缁堢偣缂栧彿"></el-table-column>
+ <el-table-column class-name="fixed-table" fixed="right" label="鎿嶄綔" width="40">
+ <template slot-scope="scope">
+ <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">閫夋嫨</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span class="fixed-style">鍒嗘瀽缁撴灉:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
+ <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult"
+ style="width: 100%" size="mini">
+ <el-table-column prop="mediumtype" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipename"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable width="100" prop="startpointnumber" label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column sortable width="100" prop="endpointnumber" label="缁堢偣缂栧彿"></el-table-column>
+ <el-table-column class-name="fixed-table" fixed="right" label="鎿嶄綔" width="40">
+ <template slot-scope="scope">
+ <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
+ </template>
+ </el-table-column>
+
+ </el-table>
+ </div>
</template>
<script>
+
+import mapApi from '../../../../../api/mapApi'
+import eventBus from '../../../../../eventBus'
+import { createFlowLine } from './PublicWay'
+
export default {
name: 'Connectivity',
+ props: ['tableData'],
data () {
return {
- tableData: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }]
+ // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃
+ linkType: 1,
+ // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁
+ tableDataLinkStart: [],
+ tableDataLinkStartList: [// table 琛ㄦ牸瀹氫箟鐨勫瓧娈�
+ {
+ label: '绠℃绫诲瀷',
+ prop: 'datasource'
+ },
+ {
+ label: '绠℃鍚嶇О',
+ prop: 'pipecode',
+ sortable: true
+ },
+ {
+ label: '璧风偣缂栧彿',
+ prop: 'material',
+ sortable: true
+ },
+ {
+ label: '缁堢偣缂栧彿',
+ prop: 'material',
+ sortable: true
+ }
+ ],
+ // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁
+ tableDataLinkEnd: [],
+ // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫�
+ currentLinkIsTrue: '',
+ // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁
+ tableDataLinkResult: [],
+ linkPipeline: [],
+ currentSelectStart: null,
+ currentSelectEnd: null,
+ currentSelectStartLine: null,
+ currentSelectEndLine: null,
+ currentSelectResultLine: null,
+ flowPipeLine: null
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ eventBus.$on('tabData-change', (obj) => {
+ if (obj) {
+ this.handleClick()
+ }
+ })
+ })
+ },
+ methods: {
+ // 鍦板浘涓婄偣鍑�
+ selectPipeLine () {
+ window.map.on('click', this.selectClick)
+ // window.mapManager.clickDialogSwitch = false
+ },
+ // 鍦板浘涓婄偣鍑诲洖璋�
+ selectClick (e) {
+ // console.log(e)
+ window.map.off('click', this.selectClick)
+ window.mapManager.clickDialogSwitch = false
+ const point = [e.latlng.lng, e.latlng.lat]
+ this.getPipeLine(point)
+ // this.getPipeLine(point, this.linkType)
+ // window.mapManager.clickDialogSwitch = true
+ },
+ // 鐐瑰嚮鑾峰彇鍒ゆ柇鏁版嵁
+ async getPipeLine (point) {
+ const param = {
+ x: point[0],
+ y: point[1],
+ radius: 3
+ }
+ // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
+ const res = await mapApi.findPipelineByClickPoint(param)
+ console.log(res)
+ if (this.linkType === 1) {
+ this.tableDataLinkStart = res.data
+ } else {
+ this.tableDataLinkEnd = res.data
+ }
+ },
+ // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e
+ linkClickStart (e) {
+ this.linkType = 1
+ this.selectPipeLine()
+ },
+ // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
+ linkSelectStart (e) {
+ this.currentSelectStart = e
+ if (this.currentSelectStartLine != null) {
+ this.currentSelectStartLine.remove()
+ this.currentSelectStartLine = null
+ }
+ const geom = JSON.parse(e.geomText)
+ this.currentSelectStartLine = window.L.geoJSON(geom, {
+ style: function (feature) {
+ return {
+ weight: 10,
+ color: 'rgba(0,255,0,.6)'
+ }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
+ },
+ // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃
+ linkClickEnd () {
+ // console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
+ this.linkType = 0
+ this.selectPipeLine()
+ },
+ // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
+ linkSelectEnd (e) {
+ // console.log('閫夋嫨缁撴潫绠℃')
+ this.currentSelectEnd = e
+
+ // 鍋氬垽鏂璻emove
+ if (this.currentSelectEndLine != null) {
+ this.currentSelectEndLine.remove()
+ this.currentSelectEndLine = null
+ }
+ // geoGson
+ const geom = JSON.parse(e.geomText)
+ this.currentSelectEndLine = window.L.geoJSON(geom, {
+ style: function (feature) {
+ return {
+ weight: 10,
+ color: 'rgba(255, 247, 0, 0.7)'
+ }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
+ },
+ // 杩為�氭�ф煡璇� 缁撴灉
+ async linkQuery () {
+ // 姣忔鏌ヨ鍒嗘瀽缁撴灉鍒剁┖
+ this.tableDataLinkResult = []
+ if (this.linkPipeline.length > 1) {
+ this.linkPipeline.forEach((itm) => {
+ itm.remove()
+ })
+ this.linkPipeline = []
+ }
+ // 鍒ゆ柇 濡傛灉璧峰绠℃ 缁撴潫绠℃娌℃湁鏁版嵁 鍒欒繑鍥瀎alse 鎻愮ず杩樻湭閫夋嫨璧峰/缁撴潫绠℃
+ if (this.currentSelectStart === null || this.currentSelectEnd === null) {
+ this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�')
+ return false
+ }
+
+ // 璇锋眰鏁版嵁鏃剁殑鍙傛暟
+ const param = {
+ startLineID: this.currentSelectStart.pipesegcode,
+ endLineID: this.currentSelectEnd.pipesegcode
+ }
+ // console.log(param)
+ // 璇锋眰鎺ュ彛鍜屾暟鎹�
+ const res = await mapApi.findConnectedPipelines(param)
+ // console.log(res)
+ // 鍒ゆ柇鏁版嵁缁撴灉 === 0 鍒欐病鏈夎姹傚埌鏁版嵁
+ if (res.data.length === 0) {
+ this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃')
+ // 杩涜鍒ゆ柇
+ this.currentLinkIsTrue = '涓嶈繛閫�'
+ return
+ }
+ this.tableDataLinkResult = res.data
+ this.currentLinkIsTrue = '杩為��'
+ // table 鏁扮粍鏁版嵁缃┖
+ const linkPipe = []
+ // 鏁版嵁閬嶅巻geoJson
+ res.data.forEach((itm, idx) => {
+ const geom = JSON.parse(itm.geomText)
+ const points = []
+ geom.coordinates.forEach((it, id) => {
+ const item = it.reverse()
+ if (it.length > 2) {
+ item.shift()
+ }
+ points.push(item)
+ })
+ linkPipe.push(points)
+ })
+ linkPipe.forEach((itm, idx) => {
+ const param1 = {
+ points: itm,
+ option: {
+ dashArray: '15 15',
+ dashSpeed: -30,
+ color: '#ffff00'
+ }
+ }
+ const line = createFlowLine(param1)
+ this.linkPipeline.push(line)
+ })
+ },
+ // 瀹氫綅鏂规硶浜嬩欢
+ linkResultSelect (e) {
+ // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
+ // console.log(e)
+ const geom = JSON.parse(e.geomText)
+ if (this.currentSelectResultLine != null) {
+ this.currentSelectResultLine.remove()
+ this.currentSelectResultLine = null
+ }
+ this.currentSelectResultLine = window.L.geoJSON(geom, {
+ style: function (feature) {
+ return {
+ color: 'rgba(255,0,0,.6)',
+ weight: 10
+ }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
+ },
+ // 杩為�氭�х殑娓呴櫎鍔熻兘
+ handleClick () {
+ // this.linkClear()
+ if (this.currentSelectStartLine != null) {
+ this.currentSelectStartLine.remove()
+ this.currentSelectStartLine = null
+ }
+ if (this.currentSelectEndLine != null) {
+ this.currentSelectEndLine.remove()
+ this.currentSelectEndLine = null
+ }
+ if (this.currentSelectResultLine != null) {
+ this.currentSelectResultLine.remove()
+ this.currentSelectResultLine = null
+ }
+ this.currentLinkIsTrue = ''
+ this.tableDataLinkStart = []
+ this.tableDataLinkEnd = []
+ this.tableDataLinkResult = []
+ if (this.flowPipeLine != null) {
+ this.flowPipeLine.remove()
+ this.flowPipeLine = null
+ }
+ if (this.linkPipeline.length > 0) {
+ this.linkPipeline.forEach((itm, idx) => {
+ itm.remove()
+ })
+ }
+ this.linkPipeline = []
}
}
}
</script>
<style lang="less" scoped>
-/deep/ .el-table {
- margin-top: 15px;
-}
</style>
--
Gitblit v1.8.0