From 39638e1ec95822792c7520dcd0f5a807957cadde Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 19 四月 2021 18:28:39 +0800
Subject: [PATCH] 管线分析
---
src/components/layer/src/layer.vue | 3
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js | 445 ---------------
src/components/BaseNav/PublicSector.vue | 2
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 949 ++++++++++++++++++++++++++++++++
src/components/LayerController/logic/WasteSolid.js | 27
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js | 59 ++
src/components/BaseNav/WasteGas/WasteGasIndex.vue | 2
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue | 50
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus.js | 3
src/components/panel/topicSearch/SolidWasteSearch.vue | 120 ---
src/components/BaseNav/WasteSolid/WasteSolidIndex.vue | 2
11 files changed, 1,067 insertions(+), 595 deletions(-)
diff --git a/src/components/BaseNav/PublicSector.vue b/src/components/BaseNav/PublicSector.vue
index 927f67b..8daedcb 100644
--- a/src/components/BaseNav/PublicSector.vue
+++ b/src/components/BaseNav/PublicSector.vue
@@ -3,7 +3,7 @@
<div class="public-bounced-content-left">
<slot name='tabs'></slot>
<div class="public-bounced-content-left-bottom">
- <slot name='table'></slot>
+ <slot name='publicPart'></slot>
</div>
</div>
<div class="public-bounced-content-right">
diff --git a/src/components/BaseNav/WasteGas/WasteGasIndex.vue b/src/components/BaseNav/WasteGas/WasteGasIndex.vue
index f8c0d3d..0fb7f62 100644
--- a/src/components/BaseNav/WasteGas/WasteGasIndex.vue
+++ b/src/components/BaseNav/WasteGas/WasteGasIndex.vue
@@ -3,7 +3,7 @@
<template v-slot:tabs>
<public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
</template>
- <template v-slot:table>
+ <template v-slot:publicPart>
<public-echarts></public-echarts>
</template>
<template v-slot:video>
diff --git a/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue b/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue
index 4db2008..86befe3 100644
--- a/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue
+++ b/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue
@@ -3,7 +3,7 @@
<template v-slot:tabs>
<public-tabs ref='refsTabsData'></public-tabs>
</template>
- <template v-slot:table>
+ <template v-slot:publicPart>
<public-table ref="refsTableData"></public-table>
</template>
<template v-slot:video>
diff --git a/src/components/LayerController/logic/WasteSolid.js b/src/components/LayerController/logic/WasteSolid.js
index 977eaac..6352b4a 100644
--- a/src/components/LayerController/logic/WasteSolid.js
+++ b/src/components/LayerController/logic/WasteSolid.js
@@ -53,22 +53,6 @@
// 鐐瑰嚮marker鐨刾ulse()鍏夋尝
this.animalService.pulseEffect(e.latlng)
/* 鐐瑰嚮鏁版嵁鐨勬帴鍙ｈ姹� */
- this.requestSolidWasteData(e).then(e)
- }
-
- // 涓嶅悓绫诲瀷鍥剧墖灏佽
- this.differentTypes = (judgeValue) => {
- var effectOfChange
- if (judgeValue === 1) {
- effectOfChange = defaultImg
- } else {
- effectOfChange = setting
- }
- return effectOfChange
- }
-
- // 鏍规嵁鐐瑰嚮涓嶅悓鏁版嵁 杩涜鎺ュ彛鐨勬暟鎹姹�
- this.requestSolidWasteData = async (e) => {
// 寮规鏍囬
const title = e.layer.options.totransferData.Name
/* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */
@@ -87,6 +71,17 @@
})
}
+ // 涓嶅悓绫诲瀷鍥剧墖灏佽
+ this.differentTypes = (judgeValue) => {
+ var effectOfChange
+ if (judgeValue === 1) {
+ effectOfChange = defaultImg
+ } else {
+ effectOfChange = setting
+ }
+ return effectOfChange
+ }
+
// flayTo() 寮规鐨勫彲婊戝姩浜嬩欢
this.setPanTo = (pos, value) => {
var position = pos
diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue
index 2b233d7..3b25a3a 100644
--- a/src/components/layer/src/layer.vue
+++ b/src/components/layer/src/layer.vue
@@ -4,8 +4,7 @@
<span>{{ title }}</span>
<i class="el-icon-circle-close" @click="close"></i>
</div>
- <div class="public-bounced-content" :id="id">
- </div>
+ <div class="public-bounced-content" :id="id"></div>
</div>
</template>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
index 7eb985a..46fbf24 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
@@ -12,7 +12,7 @@
<el-table
ref="singleTable"
highlight-current-row
- :data="tableData"
+ :data="startingSection"
max-height="200"
style="width: 100%" size="mini">
<el-table-column
@@ -109,39 +109,42 @@
</template>
<script>
+
export default {
name: 'Connectivity',
data () {
return {
// 杩為�氭��
linkType: 1, // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃
- tableData: []
+ map: window.map,
+ tableData: [],
+ startingSection: []
}
},
methods: {
- // 鍦板浘鐐瑰嚮璧峰绠℃
- linkClickStart () {
- console.log('鍦板浘鐐瑰嚮璧峰绠℃')
- this.linkType = 1
- // this.selectPipeLine()
+ // 娴佸悜鍦板浘涓婄偣鍑�
+ selectPipeLine () {
+ this.map.on('click', this.selectClick)
},
- // 鍦板浘鐐瑰嚮缁撴潫绠℃
- linkClickEnd () {
- console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
- this.linkType = 0
- // this.selectPipeLine()
+ // 鍦板浘涓婄偣鍑诲洖璋�
+ selectClick (e) {
+ this.map.off('click', this.selectClick)
+ const point = [e.latlng.lng, e.latlng.lat]
+ console.log(point)
+ // 鏍规嵁鏁版嵁杩涜鏁版嵁璇锋眰
+ // this.getPipeLine(point)
},
- // 杩為�氭�у垎鏋�
- linkQuery () {
- console.log('鐐瑰嚮杩為�氭�у垎鏋�')
- },
- // 娓呴櫎鍔熻兘
- linkClear () {
- console.log('鐐瑰嚮娓呴櫎')
- },
- // 閫夋嫨璧峰绠℃
- linkSelectStart () {
- console.log('閫夋嫨璧峰绠℃')
+ // 鏁版嵁璇锋眰
+ async getPipeLine (point) {
+ const param = {
+ x: point[0],
+ y: point[1],
+ radius: 3
+ }
+ console.log(param)
+ // const res = await api.getPipeline(param)
+ // console.log(res)
+ // this.startingSection = res.data
}
}
}
@@ -151,6 +154,7 @@
/deep/ .fixed-tablea {
background: rgba(0, 16, 30, 1) !important;
}
+
/deep/ .el-table__fixed-right::before {
background: none;
}
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js
new file mode 100644
index 0000000..ebd24e8
--- /dev/null
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/DrawLine.js
@@ -0,0 +1,59 @@
+import L from 'leaflet'
+// import eventBus from "@/components/leaflet/app/eventBus"
+import eventBus from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus'
+
+class DrawLine {
+ constructor (map) {
+ this.points = []
+ this.color = 'red'
+ this.layers = L.layerGroup()
+ this.polyline = null
+ this.marker = null
+ this.points = []
+ this.polyline = null
+ this.marker = null
+ this.map = map
+ }
+
+ init = () => {
+ this.map.on('click', this.click)
+ this.map.on('mousemove', this.mousemove)
+ this.map.on('dblclick', this.dbClick)
+ }
+
+ click = (e) => {
+ this.map.doubleClickZoom.disable()
+ this.points.push(e.latlng)
+ if (this.points.length > 1) {
+ this.dbClick()
+ }
+ }
+
+ mousemove = (e) => {
+ this.points.push(e.latlng)
+ if (this.polyline) { this.map.removeLayer(this.polyline) }
+ this.polyline = L.polyline(this.points, { showMeasurements: true, color: 'red' })
+ this.polyline.addTo(this.layers)
+ this.layers.addTo(this.map)
+ this.points.pop()
+ }
+
+ dbClick = (e) => {
+ console.log('鍙屽嚮缁撴潫', e)
+ this.polyline.addTo(this.layers)
+ // this.close(e.latlng);
+ this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
+ console.log(this.points)
+ eventBus.$emit('draw-hdm-line', this.points)
+ }
+
+ destory () {
+ if (this.polyline) { this.map.removeLayer(this.polyline) }
+
+ if (this.marker) { this.marker.remove() }
+ this.points = []
+ this.layers.clearLayers()
+ }
+}
+
+export default DrawLine
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
index 63d8e26..332249f 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
@@ -1,427 +1,18 @@
-// export default {
-// handleClick (tab, event) {
-// console.log(tab, event)
-// this.clearLinkPipe()
-// this.clearLX()
-// this.linkClear()
-// this.jdmClear()
-// this.bgFm = []
-// this.bgPipeLine = []
-// this.tableData = []
-// this.tableDataLiuxiang = []
-// this.tableDataLinkStart = []
-// this.tableDataLinkEnd = []
-// this.tableDataLinkResult = []
-// },
-// linkClickStart () {
-// console.log('鍦板浘鐐瑰嚮璧峰绠℃')
-// this.linkType = 1
-// this.selectPipeLine()
-// },
-// linkClickEnd () {
-// console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
-// this.linkType = 0
-// this.selectPipeLine()
-// },
-// linkSelectStart (e) {
-// console.log('閫夋嫨璧峰绠℃')
-// console.log(e)
-// this.$refs.singleTable.setCurrentRow(e)
-// this.currentSelectStart = e
-// if (this.currentSelectStartLine != null) {
-// this.currentSelectStartLine.remove()
-// this.currentSelectStartLine = null
-// }
-// const geom = JSON.parse(e.geomText)
-// this.currentSelectStartLine = L.geoJSON(geom, {
-// style: function (feature) {
-// return { color: 'rgba(0,255,0,.6)' }
-// }
-// }).addTo(this.map)
-// this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
-// },
-// linkSelectEnd (e) {
-// console.log('閫夋嫨缁撴潫绠℃')
-// console.log(e)
-// this.currentSelectEnd = e
-//
-// if (this.currentSelectEndLine != null) {
-// this.currentSelectEndLine.remove()
-// this.currentSelectEndLine = null
-// }
-//
-// const geom = JSON.parse(e.geomText)
-// this.currentSelectEndLine = L.geoJSON(geom, {
-// style: function (feature) {
-// return { color: 'rgba(200,0,200,.6)' }
-// }
-// }).addTo(this.map)
-// this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
-// },
-// 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 = L.geoJSON(geom, {
-// style: function (feature) {
-// return {
-// color: 'rgba(255,0,0,.6)',
-// weight: 6
-// }
-// }
-// }).addTo(this.map)
-// this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
-// },
-// // 杩為�氭�ф煡璇�
-// async linkQuery () {
-// this.tableDataLinkResult = []
-// if (this.linkPipeline.length > 1) {
-// this.linkPipeline.forEach((itm) => {
-// itm.remove()
-// })
-// this.linkPipeline = []
-// }
-// if (this.currentSelectStart === null || this.currentSelectEnd === null) {
-// this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�')
-// return
-// }
-// const param = {
-// startLineID: this.currentSelectStart.id,
-// endLineID: this.currentSelectEnd.id
-// }
-//
-// const res = await api.findConnectedPipelines(param)
-//
-// if (res.data.length === 0) {
-// this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃')
-// this.currentLinkIsTrue = '涓嶈繛閫�'
-// return
-// }
-// this.tableDataLinkResult = res.data
-// this.currentLinkIsTrue = '杩為��'
-// 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)
-// })
-// },
-//
-// 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
-// }
-// if (this.bgMarker != null) {
-// this.bgMarker.remove()
-// this.bgMarker = null
-// }
-// },
-// lxResultSelect () {
-// 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())
-// },
-// async lxQuery (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)
-// })
-// },
-//
-// bgClick () {
-// this.selectPipeLine()
-// },
-// 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 = L.geoJSON(geom, {
-// style: function (feature) {
-// return { color: 'rgba(200,0,200,.6)' }
-// }
-// }).addTo(this.map)
-// this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
-//
-// const param = {
-// lineID: e.id
-// }
-// const res = await api.findLeakages(param)
-// console.log(res)
-//
-// const len = res.data.length
-// if (len === 0) {
-// this.$message('鏈壘鍒伴渶瑕佸叧闂殑闃�闂�')
-//
-// return
-// }
-// res.data.reverse()
-// this.bgFm = 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 = main.createFlowMarker(p)
-// this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
-// this.bgMarker.addTo(this.map)
-// this.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 = main.createFlowLine(param1)
-// this.linkPipeline.push(line)
-// })
-// },
-// bgFmClick (e) {
-// console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
-// console.log(e)
-// const point = [e.data[0][0], e.data[0][1]]
-// const marker = main.createFlowMarker(point)
-// marker.addTo(this.map)
-// this.map.flyTo(point, 16)
-// },
-// // 娴佸悜鍦板浘涓婄偣鍑�
-// selectPipeLine () {
-// this.map.on('click', this.selectClick)
-// },
-// // 鍦板浘涓婄偣鍑诲洖璋�
-// selectClick (e) {
-// this.map.off('click', this.selectClick)
-// const point = [e.latlng.lng, e.latlng.lat]
-// console.log(point)
-// this.getPipeLine(point)
-// },
-//
-// // 娴佸悜鏁版嵁璇锋眰
-// async getPipeLine (point) {
-// const param = {
-// x: point[0],
-// y: point[1],
-// radius: 3
-// }
-//
-// const res = await api.getPipeline(param)
-// // 3 娴佸悜
-//
-// if (this.activeName === 'first') {
-// if (this.linkType) {
-// 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') {
-//
-// }
-//
-// console.log(res)
-// },
-// // 娴佸悜-绠＄嚎閫夋嫨
-// selectRowLiuXiang (e) {
-// // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾�
-// console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�')
-// console.log(e)
-// },
-// lxHandleClick (e) {
-// console.log('姝ｆ祦鍚戞樉绀�')
-// console.log(e)
-//
-// this.clearLX()
-// const param = {
-// points: e.data,
-// option: {
-// dashArray: '15 15',
-// dashSpeed: -30
-// }
-// }
-// this.flowPipeLine = main.createFlowLine(param)
-// },
-// clearLinkPipe () {
-// if (this.linkPipeline.length > 0) {
-// this.linkPipeline.forEach((itm, idx) => {
-// itm.remove()
-// })
-// }
-// this.linkPipeline = []
-// },
-// clearLX () {
-// if (this.flowPipeLine != null) {
-// this.flowPipeLine.remove()
-// this.flowPipeLine = null
-// }
-// },
-// lxHandleClick2 (e) {
-// console.log('閫嗘祦鍚戞樉绀�')
-// console.log(e)
-// if (this.flowPipeLine != null) {
-// this.flowPipeLine.remove()
-// this.flowPipeLine = null
-// }
-// const param = {
-// points: e.data,
-// option: {
-// dashArray: '15 15',
-// dashSpeed: 30
-// }
-// }
-// this.flowPipeLine = main.createFlowLine(param)
-// },
-// // 妯柇闈㈡暟鎹姹�
-// 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 selectRow (e) {
-// console.log(e)
-// // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
-//
-// const option = {
-// xAxis: {
-// type: 'category',
-// data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
-// },
-// yAxis: {
-// type: 'value'
-// },
-// series: [{
-// data: [820, 932, 901, 934, 1290, 1330, 1320],
-// 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)
-// // debugger
-// },
-// jdmClear () {
-// this.hdmParam = null
-// if (this.measure != null) {
-// this.measure.destory()
-// }
-// }
-// }
+export default {
+ // 鐖嗙
+ bgClick () {
+ this.selectPipeLine()
+ },
+ // 娴佸悜鍦板浘涓婄偣鍑�
+ selectPipeLine () {
+ // console.log(map)
+ window.on('click', this.selectClick)
+ },
+ // 鍦板浘涓婄偣鍑诲洖璋�
+ selectClick (e) {
+ console.log(e)
+ // window.map.off('click', this.selectClick)
+ // const point = [e.latlng.lng, e.latlng.lat]
+ // console.log(point)
+ }
+}
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus.js
new file mode 100644
index 0000000..8853b4d
--- /dev/null
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue()
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index 6e9c12e..67f5666 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,51 +1,946 @@
<template>
<div class="sewers-analysis-tab">
- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
- <el-tab-pane label="杩為�氭��" name="first">
- <Connectivity></Connectivity>
- </el-tab-pane>
- <el-tab-pane label="鐖嗙" name="second">
- <Tube></Tube>
- </el-tab-pane>
- <el-tab-pane label="娴佸悜" name="third">
- <Flow></Flow>
- </el-tab-pane>
- <el-tab-pane label="妯柇闈�" name="four">
- <CrossSectional></CrossSectional>
- </el-tab-pane>
- </el-tabs>
+ <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-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
+ title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃
+ </el-button>
+ <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
+ title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃
+ </el-button>
+ <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
+ title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋�
+ </el-button>
+ <el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
+ title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎
+ </el-button>
+ <el-scrollbar style="height:400px">
+ <el-card shadow="hover"> <!-- style="height: 300px"-->
+ <span class="clearfixs">璧峰绠℃</span>
+ <el-table
+ ref="singleTable"
+ highlight-current-row
+ :data="tableDataLinkStart"
+ @row-click="linkSelectStart"
+ max-height="200"
+ style="width: 100%" size="mini">
+ <el-table-column
+ prop="lineloopna"
+ label="绠＄嚎绫诲瀷"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="pipecode"
+ label="绠＄嚎鍚嶇О"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="startpoint"
+ label="璧风偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="endpointnu"
+ label="缁堢偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ class-name="fixed-table"
+ fixed="right"
+ 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="clearfixs">缁撴潫绠℃</span>
+ <el-table
+ max-height="200"
+ highlight-current-row
+ :data="tableDataLinkEnd"
+ @row-click="linkSelectEnd"
+ style="width: 100%" size="mini">
+ <el-table-column
+ prop="lineloopna"
+ label="绠＄嚎绫诲瀷"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="pipecode"
+ label="绠＄嚎鍚嶇О"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="startpoint"
+ label="璧风偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="endpointnu"
+ label="缁堢偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ class-name="fixed-table"
+ fixed="right"
+ label="鎿嶄綔"
+ >
+ <template slot-scope="scope">
+ <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">閫夋嫨</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span class="clearfixs">鍒嗘瀽缁撴灉:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
+ <el-table
+ highlight-current-row
+ max-height="200"
+ :data="tableDataLinkResult"
+ @row-click="linkResultSelect"
+ style="width: 100%" size="mini">
+
+ <el-table-column
+ prop="lineloopna"
+ label="绠＄嚎绫诲瀷"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="pipecode"
+ label="绠＄嚎鍚嶇О"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="startpoint"
+ label="璧风偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="endpointnu"
+ label="缁堢偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ class-name="fixed-table"
+ fixed="right"
+ label="鎿嶄綔"
+ >
+ <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>
+ </el-tab-pane>
+ <el-tab-pane label="鐖嗙" name="second" style="color: #cccccc">鐖嗙锛堢浉鍏冲紑鍏筹級
+ <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" title="鍦板浘涓婄偣鍑婚�夋嫨鍙戠敓鐖嗙鐨勭娈�">
+ 閫夋嫨绠℃
+ </el-button>
+ <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="娓呴櫎缁樺埗">娓呴櫎
+ </el-button>
+ <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"
+ label="绠＄嚎绫诲瀷"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="pipecode"
+ label="绠＄嚎鍚嶇О"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="startpoint"
+ label="璧风偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="endpointnu"
+ label="缁堢偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ class-name="fixed-table"
+ fixed="right"
+ label="鎿嶄綔"
+ >
+ <template slot-scope="scope">
+ <el-button @click="bgSelect(scope.row)" type="text" size="small">閫夋嫨</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span class="clearfixs">闇�瑕佸叧闂殑闃�闂�</span>
+ <el-table
+ highlight-current-row
+ :data="bgFm"
+ @row-click="bgFmClick"
+ style="width: 100%" size="mini">
+ <el-table-column
+ prop="lineloopna"
+ label="绠＄嚎绫诲瀷"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="pipecode"
+ label="绠＄嚎鍚嶇О"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="startpoint"
+ label="璧风偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="endpointnu"
+ label="缁堢偣缂栧彿"
+ >
+ </el-table-column>
+
+ <el-table-column
+ class-name="fixed-table"
+ fixed="right"
+ label="鎿嶄綔"
+ >
+ <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-tab-pane>
+ <el-tab-pane label="娴佸悜" name="third">
+ <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
+ title="鍦板浘涓婄偣鍑昏鏄剧ず娴佸悜鐨勭绾�">
+ 閫夋嫨绠℃
+ </el-button>
+ <el-table
+ :data="tableDataLiuxiang" size="mini">
+ <el-table-column
+ prop="lineloopna"
+ label="绠＄嚎绫诲瀷"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="pipecode"
+ label="绠＄嚎鍚嶇О"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="startpoint"
+ label="璧风偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ sortable
+ width="100"
+ prop="endpointnu"
+ label="缁堢偣缂栧彿"
+ >
+ </el-table-column>
+ <el-table-column
+ class-name="fixed-table"
+ fixed="right"
+ label="鎿嶄綔"
+ width="100"
+ >
+ <template slot-scope="scope">
+ <el-button @click="lxQuery(scope.row)" type="text" size="small">鏄剧ず娴佸悜</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <span>鍒嗘瀽缁撴灉</span>
+ <!-- </div>-->
+ <el-table
+ highlight-current-row
+ max-height="200"
+ :data="lxTableDataResult"
+ @row-click="lxResultSelect"
+ 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-table"
+ fixed="right"
+ label="鎿嶄綔"
+ >
+ <template slot-scope="scope">
+ <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
+ </template>
+ </el-table-column>
+
+ </el-table>
+
+ </el-tab-pane>
+ <el-tab-pane label="妯柇闈�" name="fourth">
+ <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;" title="鍦板浘涓婄粯鍒惰杩涜鍒嗘瀽鎴柇闈㈢殑绾�">
+ 缁樺埗绾挎
+ </el-button>
+ <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="鎴柇闈㈠垎鏋�">鎴柇闈㈠垎鏋�
+ </el-button>
+ <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">
+ <span>绠＄嚎鏌ヨ缁撴灉</span>
+ </div>
+ <el-table
+ :data="tableData"
+ style="width: 100%" @row-click="selectRow" size="mini">
+ <el-table-column
+ prop="name"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="type"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ fixed="right"
+ label="鍥捐〃鏌ョ湅"
+ >
+ <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="clearfixs">
+ <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>
+ </el-card>
+ </el-tab-pane>
+ </el-tabs>
+ </el-card>
+ </transition>
</div>
</template>
<script>
-import Connectivity from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity'
-import Tube from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube'
-import Flow from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow'
-import CrossSectional from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional'
-// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay'
+// 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'
export default {
name: 'SewersAnalysis',
- components: {
- Connectivity,
- Tube,
- Flow,
- CrossSectional
- },
data () {
return {
- activeName: 'first'
+ activeName: 'first', // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈�
+ 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
}
},
+ 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)
+ // })
+ })
+ },
methods: {
+ // tab鍒囨崲
handleClick (tab, event) {
console.log(tab, event)
- // PublicWay.handleClick(tab, event)
+ this.clearLinkPipe()
+ this.clearLX()
+ this.linkClear()
+ this.jdmClear()
+ this.bgFm = []
+ this.bgPipeLine = []
+ this.tableData = []
+ this.tableDataLiuxiang = []
+ this.tableDataLinkStart = []
+ this.tableDataLinkEnd = []
+ this.tableDataLinkResult = []
+ },
+
+ // 娴佸悜鍦板浘涓婄偣鍑�
+ selectPipeLine () {
+ this.map.on('click', this.selectClick)
+ },
+ // 鍦板浘涓婄偣鍑诲洖璋�
+ selectClick (e) {
+ this.map.off('click', this.selectClick)
+ const point = [e.latlng.lng, e.latlng.lat]
+ console.log(point)
+ // this.getPipeLine(point)
+ },
+
+ // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃
+ linkClickStart () {
+ console.log('鍦板浘鐐瑰嚮璧峰绠℃')
+ this.linkType = 1
+ this.selectPipeLine()
+ },
+ // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃
+ linkClickEnd () {
+ console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
+ this.linkType = 0
+ this.selectPipeLine()
+ },
+ linkSelectStart (e) {
+ console.log('閫夋嫨璧峰绠℃')
+ console.log(e)
+ // this.$refs.singleTable.setCurrentRow(e)
+ // this.currentSelectStart = e
+ // if (this.currentSelectStartLine != null) {
+ // this.currentSelectStartLine.remove()
+ // this.currentSelectStartLine = null
+ // }
+ // const geom = JSON.parse(e.geomText)
+ // this.currentSelectStartLine = L.geoJSON(geom, {
+ // style: function (feature) {
+ // return { color: 'rgba(0,255,0,.6)' }
+ // }
+ // }).addTo(this.map)
+ // this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
+ },
+ linkSelectEnd (e) {
+ console.log('閫夋嫨缁撴潫绠℃')
+ console.log(e)
+ // this.currentSelectEnd = e
+ //
+ // if (this.currentSelectEndLine != null) {
+ // this.currentSelectEndLine.remove()
+ // this.currentSelectEndLine = null
+ // }
+ //
+ // const geom = JSON.parse(e.geomText)
+ // this.currentSelectEndLine = L.geoJSON(geom, {
+ // style: function (feature) {
+ // return { color: 'rgba(200,0,200,.6)' }
+ // }
+ // }).addTo(this.map)
+ // this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
+ },
+ 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 = L.geoJSON(geom, {
+ // style: function (feature) {
+ // return {
+ // color: 'rgba(255,0,0,.6)',
+ // weight: 6
+ // }
+ // }
+ // }).addTo(this.map)
+ // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
+ },
+ // 杩為�氭�ф煡璇�
+ async linkQuery () {
+ this.tableDataLinkResult = []
+ if (this.linkPipeline.length > 1) {
+ this.linkPipeline.forEach((itm) => {
+ itm.remove()
+ })
+ this.linkPipeline = []
+ }
+ if (this.currentSelectStart === null || this.currentSelectEnd === null) {
+ this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�')
+ return false
+ }
+ // 璇锋眰鏁版嵁鏃剁殑鍙傛暟
+ const param = {
+ startLineID: this.currentSelectStart.id,
+ endLineID: this.currentSelectEnd.id
+ }
+ // 璇锋眰鎺ュ彛鍜屾暟鎹�
+ const res = await mapApi.findConnectedPipelines(param)
+ // 鍒ゆ柇鏁版嵁缁撴灉
+ if (res.data.length === 0) {
+ this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃')
+ this.currentLinkIsTrue = '涓嶈繛閫�'
+ return
+ }
+ this.tableDataLinkResult = res.data
+ this.currentLinkIsTrue = '杩為��'
+ 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)
+ // const createFlowLine = (param) => {
+ // let flowLine = L.polyline(param.points, param.option)
+ // flowLine.addTo(map)
+ // return flowLine
+ // }
+ // this.linkPipeline.push(line)
+ // })
+ },
+ // 杩為�氭�ч儴鍒嗙殑娓呴櫎鍔熻兘
+ 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
+ }
+ if (this.bgMarker != null) {
+ this.bgMarker.remove()
+ this.bgMarker = null
+ }
+ },
+
+ lxResultSelect () {
+ 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())
+ },
+ async lxQuery (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)
+ // })
+ },
+ // 鐖嗙 ===> 閫夋嫨绠℃
+ bgClick () {
+ this.selectPipeLine()
+ },
+ 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 = L.geoJSON(geom, {
+ // style: function (feature) {
+ // return { color: 'rgba(200,0,200,.6)' }
+ // }
+ // }).addTo(this.map)
+ this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
+
+ // const param = {
+ // lineID: e.id
+ // }
+ // const res = await api.findLeakages(param)
+ // console.log(res)
+
+ // const len = res.data.length
+ // if (len === 0) {
+ // this.$message('鏈壘鍒伴渶瑕佸叧闂殑闃�闂�')
+ //
+ // return
+ // }
+ // res.data.reverse()
+ // this.bgFm = 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 = main.createFlowMarker(p)
+ // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
+ // this.bgMarker.addTo(this.map)
+ // this.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 = main.createFlowLine(param1)
+ // this.linkPipeline.push(line)
+ // })
+ },
+ bgFmClick (e) {
+ console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
+ console.log(e)
+ const point = [e.data[0][0], e.data[0][1]]
+ // const marker = main.createFlowMarker(point)
+ // marker.addTo(this.map)
+ this.map.flyTo(point, 16)
+ },
+ // 娴佸悜鏁版嵁璇锋眰
+ async getPipeLine (point) {
+ // const param = {
+ // x: point[0],
+ // y: point[1],
+ // radius: 3
+ // }
+
+ // const res = await api.getPipeline(param)
+ // 3 娴佸悜
+
+ // if (this.activeName === 'first') {
+ // if (this.linkType) {
+ // 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') {
+ //
+ // }
+ //
+ // console.log(res)
+ },
+ // 娴佸悜-绠＄嚎閫夋嫨
+ selectRowLiuXiang (e) {
+ // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾�
+ console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�')
+ console.log(e)
+ },
+ lxHandleClick (e) {
+ console.log('姝ｆ祦鍚戞樉绀�')
+ console.log(e)
+
+ this.clearLX()
+ // const param = {
+ // points: e.data,
+ // option: {
+ // dashArray: '15 15',
+ // dashSpeed: -30
+ // }
+ // }
+ // this.flowPipeLine = main.createFlowLine(param)
+ },
+ clearLinkPipe () {
+ if (this.linkPipeline.length > 0) {
+ this.linkPipeline.forEach((itm, idx) => {
+ itm.remove()
+ })
+ }
+ this.linkPipeline = []
+ },
+ clearLX () {
+ if (this.flowPipeLine != null) {
+ this.flowPipeLine.remove()
+ this.flowPipeLine = null
+ }
+ },
+ lxHandleClick2 (e) {
+ console.log('閫嗘祦鍚戞樉绀�')
+ console.log(e)
+ if (this.flowPipeLine != null) {
+ this.flowPipeLine.remove()
+ this.flowPipeLine = null
+ }
+ // const param = {
+ // points: e.data,
+ // option: {
+ // dashArray: '15 15',
+ // dashSpeed: 30
+ // }
+ // }
+ // this.flowPipeLine = main.createFlowLine(param)
+ },
+ // 妯柇闈㈡暟鎹姹�
+ 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 selectRow (e) {
+ console.log(e)
+ // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
+
+ const option = {
+ xAxis: {
+ type: 'category',
+ data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ 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) {
+ this.measure.destory()
+ }
}
}
}
</script>
<style lang="less" scoped>
+/deep/ .el-tabs__header {
+ background: none !important;
+}
+
+/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+ padding-left: 20px;
+}
+
+/deep/ .el-tabs--border-card {
+ background: none;
+ border: none;
+ box-shadow: none;
+}
+
+/deep/ .el-tabs--border-card > .el-tabs__header {
+ background: none;
+ border-bottom: none;
+ margin: 0;
+}
+
+/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+ color: #409EFF;
+ background: none;
+ border: none;
+}
+
+/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+ border: none;
+}
+
+/deep/ .panel-right ::-webkit-scrollbar-thumb {
+ background: none;
+ border: none;
+}
+
+/deep/ .el-card {
+ margin-top: 15px;
+ background: rgba(0, 16, 30, 0.5);
+ //border: 0.00521rem solid @color;
+ box-shadow: 0 0 0.03rem @color;
+}
+
+/deep/ .el-card__body {
+ padding: 0;
+}
+
+/deep/ .clearfixs {
+ display: inline-block;
+ color: #ffffff;
+ margin: 15px;
+}
+
+/deep/ .fixed-table {
+ background: rgba(0, 16, 30, 1) !important;
+}
</style>
diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue
index 09d9660..a57c29f 100644
--- a/src/components/panel/topicSearch/SolidWasteSearch.vue
+++ b/src/components/panel/topicSearch/SolidWasteSearch.vue
@@ -44,8 +44,7 @@
<script>
import mapApi from '@/api/mapApi'
-import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced'
-import defaultImg from '../../../../public/assets/images/map/solidwaste/gf_green2.png'
+import WasteSolidIndex from '@/components/BaseNav/WasteSolid/WasteSolidIndex'
export default {
name: 'SolidWasteSearch',
@@ -148,101 +147,6 @@
}
},
methods: {
- // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀�
- async handleSearch (data) {
- // console.log(this.form.keyword)
- const result = await mapApi.getSolidWaste(data)
- this.searchDataDisplay = result.Result.DataInfo
- console.log(this.searchDataDisplay)
- },
- // 涓嶅悓绫诲瀷鍥剧墖灏佽
- differentTypes (judgeValue) {
- var effectOfChange
- if (judgeValue === 1) {
- effectOfChange = defaultImg
- } else {
- effectOfChange = defaultImg
- }
- return effectOfChange
- },
- // 鏁版嵁灞曠ず,鐐瑰嚮杩涜寮规鍙婄偣鐨勫睍绀�
- async setBounced (val) {
- const pos = [val.Latitude, val.Longitude]
- window.map.flyTo(pos, 11)
- // 寰幆閬嶅巻鏁版嵁 鏍规嵁杩涜marker 鐨勫垱寤�
- // for (let i = 0; i < this.searchDataDisplay.length; i++) {
- // 缁忕含搴� 浣嶇疆
- const positionX = val.Latitude
- const positionY = val.Longitude
-
- // 瀹氫箟绫诲瀷 鐢ㄦ潵鍖哄垎鏁版嵁鐨勪笉鍚� 1.鎺ュ彛鎺ュ彛鏁版嵁鏉ヨ繘琛屾暟鎹殑鍒ゆ柇 2.鏍规嵁鏁版嵁绫诲瀷鐨勪笉鍚岋紝杩涜涓嶅悓绫诲瀷鐨勫浘鐗囨樉绀�
- const judgeValue = val.StorageQty
- var iconUrl = this.differentTypes(judgeValue)
-
- const marker = this.L.marker([positionX, positionY], {
- // totransferData: this.searchDataDisplay[i],
- icon: this.L.icon({
- iconUrl: iconUrl,
- iconSize: [30, 30],
- iconAnchor: [15, 15]
- })
- })
- this.layer.addLayer(marker)
- // }
- const t1 = setTimeout(async () => {
- const dataValue = {
- StoragePlaceId: val.StoragePlaceId
- }
- // 寮规鏍囬
- const title = val.Name
- debugger
- // 鍩烘湰淇℃伅 tabs
- const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
- // 璇︾粏淇℃伅灞曠ず table
- const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)
-
- // 缁戝畾寮规瀹炰緥
- this.instance && this.instance.closePopup()
- const PublicBounced = window.Vue.extend(publicBounced)
- this.instance = new PublicBounced().$mount()
- document.body.appendChild(this.instance.$el)
- // document.body.removeChild(instance.$el)
- // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹�
- this.instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
- this.setPanTo(pos, 250)
- }, 1000)
- console.log(t1)
- // clearTimeout(t1)
- this.pulseEffect(pos)
- },
-
- // flayTo() 寮规鐨勫彲婊戝姩浜嬩欢
- setPanTo (pos, value) {
- var position = pos
- position = window.map.latLngToLayerPoint(position)
- position.y += value
- position = window.map.layerPointToLatLng(position)
- window.map.flyTo(position)
- },
- pulseEffect (xy) {
- // 鎻掍欢 鏁堟灉瀹炵幇
- var pulsingIcon = this.L.icon.pulse({
- iconSize: [20, 20],
- color: this.colors[0],
- fillColor: ''
- })
- var picGroupMarker = this.L.marker(xy, { icon: pulsingIcon }).addTo(this.layer)
- var times = this.times
- // 瀹氭椂
- var timeInterval = setInterval(() => {
- if (times > 0) {
- times--
- } else {
- clearInterval(timeInterval)
- picGroupMarker.remove()
- }
- }, 1000)
- },
// select鐨刼ption鐨勬暟鎹�夋嫨
handlePipelineType (val) {
this.solidWasteTypeOptions.forEach(item => {
@@ -250,6 +154,28 @@
this.handleSearch(item.value)
}
})
+ },
+ // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀�
+ async handleSearch (data) {
+ // console.log(this.form.keyword)
+ const result = await mapApi.getSolidWaste(data)
+ this.searchDataDisplay = result.Result.DataInfo
+ },
+ // 鏁版嵁灞曠ず,鐐瑰嚮杩涜寮规鍙婄偣鐨勫睍绀�
+ setBounced (val) {
+ console.log(val)
+ const pos = [val.Latitude, val.Longitude]
+ window.map.flyTo(pos, 15)
+ window.$layer.open({
+ content: {
+ content: WasteSolidIndex, // 缁勪欢
+ parent: this, // 鐖剁粍浠�
+ data: { // 浼犻�掔殑鍙傛暟
+ storagePlaceId: val.StoragePlaceId
+ }
+ },
+ title: val.Name
+ })
}
}
}
--
Gitblit v1.8.0