From a2cf1dafa47139ef92135376db24ece72d2b51d2 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期一, 17 五月 2021 17:19:41 +0800
Subject: [PATCH] 管线分析
---
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue | 278 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 203 insertions(+), 75 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
index c1deb22..caaf56b 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
@@ -1,99 +1,227 @@
<template>
- <div class="connectivity">
- <el-row>
- <span class="tube-span">鐖嗙(鐩稿叧寮�鍏�)</span>
- <el-button type="primary" size="mini" @click="bgClick">閫夋嫨绠＄嚎</el-button>
- <el-button type="primary" size="mini" @click="handleClick('czp')">娓呴櫎</el-button>
- </el-row>
- <el-card class="box-card">
- <el-scrollbar style="height:350px">
- <span class="clearfix">鍙戠敓鐖嗚鐨勭娈�</span>
- <el-table
- :data="tableData"
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎绫诲瀷">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎鍚嶇О">
- </el-table-column>
- <el-table-column
- prop="province"
- label="璧风偣缂栧彿">
- </el-table-column>
- <el-table-column
- prop="city"
- label="缁堢偣缂栧彿">
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔">
- </el-table-column>
+ <div class="connectivity">
+ <el-row>
+ <span>鐖嗙锛堢浉鍏冲紑鍏筹級</span>
+ <el-button type="primary" @click="bgClick" size="mini" title="鍦板浘涓婄偣鍑婚�夋嫨鍙戠敓鐖嗙鐨勭娈�">閫夋嫨绠℃</el-button>
+ <el-button type="primary" @click="handleClick" size="mini" title="娓呴櫎缁樺埗">娓呴櫎</el-button>
+ </el-row>
+ <!-- <el-card shadow="hover">-->
+ <span class="fixed-style">鍙戠敓鐖嗚鐨勭娈�</span>
+ <el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine"
+ style="width: 100%" size="mini">
+ <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ label="缁堢偣缂栧彿"></el-table-column>
+ <el-table-column class-name="fixed-table" fixed="right" label="鎿嶄綔" width="40">
+ <template slot-scope="scope">
+ <el-button @click="bgSelect(scope.row)" type="text" size="small">閫夋嫨</el-button>
+ </template>
+ </el-table-column>
</el-table>
- <span class="clearfix">闇�瑕佸叧闂殑闃�闂�</span>
- <el-table
- :data="tableData"
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎绫诲瀷">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎鍚嶇О">
- </el-table-column>
- <el-table-column
- prop="province"
- label="璧风偣缂栧彿">
- </el-table-column>
- <el-table-column
- prop="city"
- label="缁堢偣缂栧彿">
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔">
- </el-table-column>
+ <span class="fixed-style">闇�瑕佸叧闂殑闃�闂�</span>
+ <el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick"
+ style="width: 100%" size="mini">
+ <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode"
+ label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ 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>
- </el-scrollbar>
- </el-card>
- </div>
+ <!-- </el-card>-->
+ </div>
</template>
<script>
-
-// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay'
+import mapApi from '../../../../../api/mapApi'
+import { pulseEffect } from '../../../../../utils/utils'
+import { createFlowLine } from './PublicWay'
export default {
name: 'Tube',
data () {
return {
- tableData: [],
- tube: []
+ bgPoint: null,
+ bgMarker: null,
+ hdmParam: null,
+ // 鐖嗙 鍙戠敓鐖嗚鐨勭娈� table琛ㄦ牸鏁版嵁
+ bgPipeLine: [],
+ // 鐖嗙 闇�瑕佸叧闂殑闃�闂� table琛ㄦ牸鏁版嵁
+ bgFm: [],
+ linkPipeline: []
}
},
methods: {
- // 閫夋寚绠＄嚎
+ handleClick (tab, event) {
+ console.log(event)
+ // console.log(tab)
+ this.clearLinkPipe()
+ 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)
+ this.bgPipeLine = res.data
+ },
+ // 娓呮鍒嗘瀽缁撴灉
+ clearLinkPipe () {
+ if (this.linkPipeline.length > 0) {
+ this.linkPipeline.forEach((itm, idx) => {
+ itm.remove()
+ })
+ }
+ this.linkPipeline = []
+ },
+ // 鐖嗙 ===> 閫夋嫨绠℃
bgClick () {
this.selectPipeLine()
},
- // 娓呮缁樺埗
- handleClick (val) {
- console.log(val)
- // PublicWay.handleClick(val)
+ async bgSelect (e) {
+ // console.log('閫夋嫨鐖嗙绠℃')
+ // console.log(e)
+ this.bgFm = []
+ if (this.bgMarker != null) {
+ this.bgMarker.remove()
+ this.bgMarker = null
+ }
+
+ if (this.currentSelectEndLine != null) {
+ this.currentSelectEndLine.remove()
+ this.currentSelectEndLine = null
+ }
+ this.clearLinkPipe()
+ // 缁欓�夋嫨涓殑鏁版嵁娣诲姞璁剧疆鏍峰紡
+ const geom = JSON.parse(e.geomText)
+ this.currentSelectEndLine = window.L.geoJSON(geom, {
+ style: function (feature) {
+ return {
+ weight: 10,
+ color: 'rgba(200,0,200,.6)'
+ }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
+
+ // 鏁版嵁璇锋眰鍙傛暟
+ const param = {
+ lineID: e.pipesegcode
+ }
+ const res = await mapApi.findLeakages(param)
+ // console.log(res)
+
+ const len = res.data.length
+ if (len === 0) {
+ this.$message('鏈壘鍒伴渶瑕佸叧闂殑闃�闂�')
+ return
+ }
+ res.data.reverse()
+ this.bgFm = res.data
+ // console.log(res.data)
+
+ this.bgPoint = res.data[0].startControlPoint
+
+ // const point = JSON.parse(this.bgPoint.geomText)
+ // const p = [point.coordinates[1], point.coordinates[0]]
+ // this.bgMarker = this.createFlowMarker(p)
+ // this.bgMarker = pulseEffect(p)
+ // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
+ // this.bgMarker.addTo(window.map)
+ // window.map.flyTo(p)
+
+ 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 = createFlowLine(param1)
+ this.linkPipeline.push(line)
+ })
+ },
+ bgFmClick (e) {
+ // console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
+ // console.log(e)
+ // const point = [e.data[0][0], e.data[0][1]]
+ const point = [e.startControlPoint.y, e.startControlPoint.x]
+ pulseEffect(point)
+ // const marker = this.createFlowMarker(point)
+ // marker.addTo(window.map)
+ // window.map.flyTo(point, 17)
+ },
+ // 瀹氫綅鏂规硶浜嬩欢
+ 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())
}
}
}
</script>
<style lang="less" scoped>
-.tube-span {
- color: #ffffff !important;
- font-size: 14px;
- margin: 0 15px;
-}
+
</style>
--
Gitblit v1.8.0