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 +++++++++---
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue | 235 ++++++++--
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js | 8
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue | 317 ++++++++++++--
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 142 -----
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue | 303 +++++++++++--
6 files changed, 908 insertions(+), 375 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
index 1588a23..3d4167b 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
@@ -1,94 +1,279 @@
<template>
- <div class="connectivity">
- <el-row>
- <el-button type="primary" size="mini" @click="linkClickStart" title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃</el-button>
- <el-button type="primary" size="mini" @click="linkClickEnd" title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃</el-button>
- <el-button type="primary" size="mini" @click="linkQuery" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�</el-button>
- <el-button type="primary" size="mini" @click="linkClear" title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎</el-button>
- </el-row>
- <el-card class="box-card">
- <el-scrollbar style="height:2rem">
- <span class="clearfix">璧峰绠℃</span>
- <el-table ref="singleTable" highlight-current-row :data="startingSection" max-height="200" style="width: 100%" size="mini">
- <el-table-column prop="lineloopna" label="绠＄嚎绫诲瀷"></el-table-column>
- <el-table-column sortable prop="pipecode" label="绠＄嚎鍚嶇О"></el-table-column>
- <el-table-column sortable prop="startpoint" label="璧风偣缂栧彿"></el-table-column>
- <el-table-column sortable prop="endpointnu" label="缁堢偣缂栧彿"></el-table-column>
- <el-table-column class-name="fixed-tablea" fixed="right" label="鎿嶄綔">
- <template slot-scope="scope">
- <el-button @click="linkSelectStart(scope.row)" type="text" size="small">閫夋嫨</el-button>
- </template>
- </el-table-column>
+ <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="datasource" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column sortable width="100" prop="material" label="缁堢偣缂栧彿"></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="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" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd"
+ @row-click="linkSelectEnd" style="width: 100%" size="mini">
+ <el-table-column prop="datasource" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column sortable width="100" prop="material" 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="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 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="material" label="绠℃绫诲瀷"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
+ label="绠℃鍚嶇О"></el-table-column>
+ <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column>
+ <el-table-column sortable width="100" prop="material" 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>
+ </div>
</template>
<script>
+
+import mapApi from '../../../../../api/mapApi'
+import { createFlowLine } from './PublicWay'
export default {
name: 'Connectivity',
data () {
return {
- // 杩為�氭��
- linkType: 1, // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃
- map: window.map,
- tableData: [],
- startingSection: []
+ // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃
+ linkType: 1,
+ // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁
+ tableDataLinkStart: [],
+ // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁
+ tableDataLinkEnd: [],
+ // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫�
+ currentLinkIsTrue: '',
+ // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁
+ tableDataLinkResult: [],
+ linkPipeline: [],
+ currentSelectStart: null,
+ currentSelectEnd: null,
+ currentSelectStartLine: null,
+ currentSelectEndLine: null,
+ currentSelectResultLine: null,
+ flowPipeLine: null
}
},
methods: {
- // 娴佸悜鍦板浘涓婄偣鍑�
+ // 鍦板浘涓婄偣鍑�
selectPipeLine () {
- this.map.on('click', this.selectClick)
+ window.map.on('click', this.selectClick)
+ // 鍏抽棴寮圭獥
+ window.layerFactory.clickSwitch = false
},
// 鍦板浘涓婄偣鍑诲洖璋�
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)
},
- // 鏁版嵁璇锋眰
+ // 鐐瑰嚮鑾峰彇鍒ゆ柇鏁版嵁
async getPipeLine (point) {
const param = {
x: point[0],
y: point[1],
radius: 3
}
- console.log(param)
- // const res = await api.getPipeline(param)
+ // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
+ const res = await mapApi.findPipelineByClickPoint(param)
// console.log(res)
- // this.startingSection = res.data
+ if (this.linkType === 1) {
+ this.tableDataLinkStart = res.data
+ } else {
+ this.tableDataLinkEnd = res.data
+ }
+ },
+ // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e
+ linkClickStart (e) {
+ // console.log('鍦板浘鐐瑰嚮璧峰绠℃')
+ 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) => {
+ 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)
+ })
+ },
+ // 瀹氫綅鏂规硶浜嬩欢
+ 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())
+ },
+ // 杩為�氭�х殑娓呴櫎鍔熻兘
+ 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
+ }
+ },
+ handleClick () {
+ this.linkClear()
+ 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/ .fixed-tablea {
- background: rgba(0, 16, 30, 1) !important;
-}
-
-/deep/ .el-table__fixed-right::before {
- background: none;
-}
</style>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
index f6c0928..11e58c9 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
@@ -1,66 +1,289 @@
<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" @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">
- <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>
- </el-table>
- <span class="clearfix">鏂潰鍥�</span>
- <div class="cross-section">
- <span>鏆傛棤鏁版嵁</span>
- </div>
- </el-card>
+ <!-- <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 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" 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>
</template>
<script>
+import eventBus from '../../../../../eventBus'
+import mapApi from '../../../../../api/mapApi'
+import DrawLine from './DrawLine'
+
export default {
name: 'CrossSectional',
data () {
return {
- tableData: []
+ measure: null,
+ myChart: null,
+ options: [],
+ echartsList: [],
+ myChartShow: false,
+ linkPipeline: [],
+ // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ tableData: [],
+ hdmParam: null
+ }
+ },
+ mounted () {
+ // 鍒濆鍖杄charts鍥捐〃
+ this.myChart = this.$echarts.init(this.$refs.myChart)
+ // 浣跨敤 DrwLine鏂规硶
+ eventBus.$on('draw-hdm-line', (points) => {
+ this.getHdmPoint(points)
+ })
+ },
+ 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
+ this.tableData = []
+ this.option = []
+ this.myChartShow = false
+ this.myChart.clear()
+ if (this.measure != null) {
+ this.measure.destory()
+ }
}
}
}
</script>
<style lang="less" scoped>
-.cross-section {
- background: rgba(0, 16, 30, 0.5);
- border: 0.00521rem solid @color;
- box-shadow: 0 0 0.03rem @color;
- color: #ffffff;
- width: 100%;
- height: 50px;
- border-radius: 3px;
- text-align: center;
- line-height: 50px;
-}
+
</style>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue
index c221866..f32daad 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue
@@ -1,70 +1,187 @@
<template>
- <div class="connectivity">
- <el-row>
- <el-button type="primary" size="mini">閫夋嫨绠℃</el-button>
- </el-row>
- <el-card class="box-card">
- <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>
- </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>
- </el-table>
- </el-card>
- </div>
+ <div class="connectivity">
+ <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
+ title="鍦板浘涓婄偣鍑昏鏄剧ず娴佸悜鐨勭娈�">閫夋嫨绠℃
+ </el-button>
+ <el-table max-height="200" class="tableBox" highlight-current-row :data="tableDataLiuxiang" 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="60">
+ <template slot-scope="scope">
+ <el-button @click="lxQuery(scope.row)" type="text" size="small">鏄剧ず娴佸悜</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span class="fixed-style">鍒嗘瀽缁撴灉</span>
+ <el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult"
+ @row-click="lxResultSelect" 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" width="100" sortable 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="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
</template>
<script>
+import mapApi from '../../../../../api/mapApi'
+import { createFlowLine } from './PublicWay'
+
export default {
name: 'Flow',
data () {
return {
- tableData: []
+ // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁
+ tableDataLiuxiang: [],
+ // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ lxTableDataResult: [],
+ linkPipeline: []
+ }
+ },
+ methods: {
+ // tab鍒囨崲
+ handleClick (tab, event) {
+ console.log(event)
+ // console.log(tab)
+ this.clearLinkPipe()
+ this.clearLX()
+ this.linkClear()
+ this.jdmClear()
+ this.currentLinkIsTrue = ''
+ this.bgFm = []
+ this.bgPipeLine = []
+ this.tableData = []
+ this.tableDataLiuxiang = []
+ this.tableDataLinkStart = []
+ this.tableDataLinkEnd = []
+ this.tableDataLinkResult = []
+ this.lxTableDataResult = []
+ },
+ // 瀹氫綅鏂规硶浜嬩欢
+ 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())
+ },
+ // 娓呮鍒嗘瀽缁撴灉
+ clearLinkPipe () {
+ if (this.linkPipeline.length > 0) {
+ this.linkPipeline.forEach((itm, idx) => {
+ itm.remove()
+ })
+ }
+ this.linkPipeline = []
+ },
+ // 鍦板浘涓婄偣鍑�
+ 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.tableDataLiuxiang = res.data
+ },
+ // 娴佸悜鍒嗘瀽缁撴灉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 = window.L.geoJSON(geom, {
+ style: function (feature) {
+ return {
+ weight: 10,
+ color: 'rgba(0,250,255,.6)'
+ }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
+ },
+ // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀�
+ async lxQuery (e) {
+ console.log(e)
+ this.clearLinkPipe()
+ const param = {
+ // lineNodeID: e.startpoint
+ lineNodeID: e.startpointnumber
+ }
+ const res = await mapApi.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 = createFlowLine(param1)
+ this.linkPipeline.push(line)
+ })
+ },
+ // 娓呴櫎娴佸悜
+ clearLX () {
+ if (this.flowPipeLine != null) {
+ this.flowPipeLine.remove()
+ this.flowPipeLine = null
+ }
}
}
}
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
index b55c90a..933302b 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
@@ -1,5 +1,5 @@
-export default {
- clickPopup () {
- console.log('鍏叡鏂规硶')
- }
+export function createFlowLine (param) {
+ const flowLine = window.L.polyline(param.points, param.option)
+ flowLine.addTo(window.map)
+ return flowLine
}
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>
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index 71cc2fb..c637d81 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,139 +1,14 @@
<template>
<div class="sewers-analysis-tab">
- <!--<transition name="el-fade-in-linear">-->
- <!--<el-card>-->
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="杩為�氭��" name="first">
- <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>
- <!-- <el-scrollbar style="height:450px">-->
- <!-- <el-card shadow="hover">-->
- <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="datasource" label="绠℃绫诲瀷"></el-table-column>
- <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
- label="绠℃鍚嶇О"></el-table-column>
- <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column>
- <el-table-column sortable width="100" prop="material" label="缁堢偣缂栧彿"></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="datasource" label="绠℃绫诲瀷"></el-table-column>
- <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
- label="绠℃鍚嶇О"></el-table-column>
- <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column>
- <el-table-column sortable width="100" prop="material" 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="material" label="绠℃绫诲瀷"></el-table-column>
- <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode"
- label="绠℃鍚嶇О"></el-table-column>
- <el-table-column sortable width="100" prop="material" label="璧风偣缂栧彿"></el-table-column>
- <el-table-column sortable width="100" prop="material" 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-card>-->
- <!--</el-scrollbar>-->
+ <Connectivity></Connectivity>
</el-tab-pane>
<el-tab-pane label="鐖嗙" style="color: #cccccc" name="second">
- <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="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-card>-->
+ <Tube></Tube>
</el-tab-pane>
<el-tab-pane label="娴佸悜" name="third">
- <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
- title="鍦板浘涓婄偣鍑昏鏄剧ず娴佸悜鐨勭娈�">閫夋嫨绠℃
- </el-button>
- <el-table max-height="200" class="tableBox" highlight-current-row :data="tableDataLiuxiang" 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="60">
- <template slot-scope="scope">
- <el-button @click="lxQuery(scope.row)" type="text" size="small">鏄剧ず娴佸悜</el-button>
- </template>
- </el-table-column>
- </el-table>
- <span class="fixed-style">鍒嗘瀽缁撴灉</span>
- <el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult"
- @row-click="lxResultSelect" 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" width="100" sortable 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="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
- </template>
- </el-table-column>
- </el-table>
+ <Flow></Flow>
</el-tab-pane>
<el-tab-pane label="妯柇闈�" name="fourth">
<el-row>
@@ -170,8 +45,6 @@
style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" -->
</el-tab-pane>
</el-tabs>
- <!--</el-card>-->
- <!--</transition>-->
</div>
</template>
@@ -181,10 +54,17 @@
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
import { pulseEffect } from '../../../../utils/utils'
-// import iconUrl from '../../../../assets/images/other.png'
+import Connectivity from './AnalysisChoose/Connectivity'
+import Tube from './AnalysisChoose/Tube'
+import Flow from './AnalysisChoose/Flow'
export default {
name: 'SewersAnalysis',
+ components: {
+ Connectivity,
+ Tube,
+ Flow
+ },
data () {
return {
// 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈�
--
Gitblit v1.8.0