From bc01f19e361a4c05748942de1b968cf85fbee08b Mon Sep 17 00:00:00 2001
From: ChenZeping <chenzeping>
Date: 星期五, 30 四月 2021 12:33:34 +0800
Subject: [PATCH] 管线分析功能样式表格修改
---
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 510 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 304 insertions(+), 206 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index 7a9b7a5..f19e7c4 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,7 +1,7 @@
<template>
<div class="sewers-analysis-tab">
- <!-- <transition name="el-fade-in-linear">-->
- <!-- <el-card>-->
+ <!--<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;"
@@ -13,25 +13,25 @@
<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;"
+ <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎
</el-button>
<!-- <el-scrollbar style="height:450px">-->
<!-- <el-card shadow="hover">-->
<span class="fixed-style">璧峰绠℃</span>
<el-table
- ref="singleTable"
- highlight-current-row
+ class="tableBox"
:data="tableDataLinkStart"
+ max-height="100"
@row-click="linkSelectStart"
- max-height="200"
style="width: 100%" size="mini">
<el-table-column
- prop="lineloopna"
+ prop="datasource"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
prop="pipecode"
@@ -41,20 +41,19 @@
<el-table-column
sortable
width="100"
- prop="startpoint"
+ prop="material"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
sortable
width="100"
- prop="endpointnu"
+ prop="material"
label="缁堢偣缂栧彿"
>
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
label="鎿嶄綔"
>
<template slot-scope="scope">
@@ -64,17 +63,20 @@
</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="lineloopna"
+ prop="datasource"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
prop="pipecode"
@@ -84,20 +86,20 @@
<el-table-column
sortable
width="100"
- prop="startpoint"
+ prop="material"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
sortable
width="100"
- prop="endpointnu"
+ prop="material"
label="缁堢偣缂栧彿"
>
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
+
label="鎿嶄綔"
>
<template slot-scope="scope">
@@ -105,8 +107,9 @@
</template>
</el-table-column>
</el-table>
- <span class="fixed-style">鍒嗘瀽缁撴灉:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
+ <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"
@@ -114,11 +117,12 @@
style="width: 100%" size="mini">
<el-table-column
- prop="lineloopna"
+ prop="material"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
prop="pipecode"
@@ -128,20 +132,20 @@
<el-table-column
sortable
width="100"
- prop="startpoint"
+ prop="material"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
sortable
width="100"
- prop="endpointnu"
+ prop="material"
label="缁堢偣缂栧彿"
>
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
+
label="鎿嶄綔"
>
<template slot-scope="scope">
@@ -150,10 +154,10 @@
</el-table-column>
</el-table>
- <!-- </el-card>-->
- <!-- </el-scrollbar>-->
+ <!--</el-card>-->
+ <!--</el-scrollbar>-->
</el-tab-pane>
- <el-tab-pane label="鐖嗙" name="second" style="color: #cccccc">
+ <el-tab-pane label="鐖嗙" style=";color: #cccccc" name="second">
<el-row>
<span>鐖嗙锛堢浉鍏冲紑鍏筹級</span>
<el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" title="鍦板浘涓婄偣鍑婚�夋嫨鍙戠敓鐖嗙鐨勭娈�">
@@ -163,18 +167,22 @@
</el-button>
</el-row>
<!-- <el-card shadow="hover">-->
- <span class="fixed-style">鍙戠敓鐖嗚鐨勭娈�:</span>
+ <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
- prop="lineloopna"
+ :show-overflow-tooltip="true"
+ prop="pipecode"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
prop="pipecode"
@@ -182,22 +190,24 @@
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
- prop="startpoint"
+ prop="pipecode"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
- prop="endpointnu"
+ prop="pipecode"
label="缁堢偣缂栧彿"
>
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
+
label="鎿嶄綔"
>
<template slot-scope="scope">
@@ -205,19 +215,23 @@
</template>
</el-table-column>
</el-table>
- <span class="fixed-style">闇�瑕佸叧闂殑闃�闂細</span>
+ <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="lineloopna"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
sortable
+ :show-overflow-tooltip="true"
width="100"
prop="pipecode"
label="绠＄嚎鍚嶇О"
@@ -225,12 +239,14 @@
</el-table-column>
<el-table-column
sortable
+ :show-overflow-tooltip="true"
width="100"
prop="startpoint"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
prop="endpointnu"
@@ -240,7 +256,7 @@
<el-table-column
class-name="fixed-table"
- fixed="right"
+
label="鎿嶄綔"
>
<template slot-scope="scope">
@@ -256,13 +272,17 @@
閫夋嫨绠℃
</el-button>
<el-table
+ max-height="200"
+ class="tableBox"
:data="tableDataLiuxiang" size="mini">
<el-table-column
- prop="lineloopna"
+ :show-overflow-tooltip="true"
+ prop="pipecode"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
prop="pipecode"
@@ -270,22 +290,23 @@
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
- prop="startpoint"
+ prop="pipecode"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
- prop="endpointnu"
+ prop="pipecode"
label="缁堢偣缂栧彿"
>
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
label="鎿嶄綔"
width="100"
>
@@ -296,6 +317,7 @@
</el-table>
<span class="fixed-style">鍒嗘瀽缁撴灉</span>
<el-table
+ class="tableBox"
highlight-current-row
max-height="200"
:data="lxTableDataResult"
@@ -303,11 +325,13 @@
style="width: 100%" size="mini">
<el-table-column
- prop="lineloopna"
+ :show-overflow-tooltip="true"
+ prop="pipecode"
label="绠＄嚎绫诲瀷"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
width="100"
sortable
prop="pipecode"
@@ -315,22 +339,23 @@
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
- prop="startpoint"
+ prop="pipecode"
label="璧风偣缂栧彿"
>
</el-table-column>
<el-table-column
+ :show-overflow-tooltip="true"
sortable
width="100"
- prop="endpointnu"
+ prop="pipecode"
label="缁堢偣缂栧彿"
>
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
label="鎿嶄綔"
>
<template slot-scope="scope">
@@ -353,21 +378,23 @@
<span>绠＄嚎鏌ヨ缁撴灉</span>
</div>
<el-table
+ class="tableBox"
:data="tableData"
+ max-height="200"
style="width: 100%" @row-click="selectRow" size="mini">
<el-table-column
- prop="name"
+ prop="pipename"
label="绠＄嚎鍚嶇О"
width="180">
</el-table-column>
<el-table-column
- prop="type"
+ prop="mediumtype"
label="绠＄嚎绫诲瀷"
width="180">
</el-table-column>
<el-table-column
class-name="fixed-table"
- fixed="right"
+
label="鍥捐〃鏌ョ湅"
>
<template slot-scope="scope">
@@ -381,12 +408,12 @@
<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: 600px;height:300px;"></div>
+ <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
</el-card>
</el-tab-pane>
</el-tabs>
- <!-- </el-card>-->
- <!-- </transition>-->
+ <!--</el-card>-->
+ <!--</transition>-->
</div>
</template>
@@ -464,6 +491,7 @@
this.clearLX()
this.linkClear()
this.jdmClear()
+ this.currentLinkIsTrue = ''
this.bgFm = []
this.bgPipeLine = []
this.tableData = []
@@ -471,6 +499,7 @@
this.tableDataLinkStart = []
this.tableDataLinkEnd = []
this.tableDataLinkResult = []
+ this.lxTableDataResult = []
},
// 娴佸悜鍦板浘涓婄偣鍑�
@@ -488,12 +517,12 @@
const param = {
x: point[0],
y: point[1],
- radius: 3
+ radius: 5
}
// 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
const res = await mapApi.findPipelineByClickPoint(param)
if (this.activeName === 'first') {
- if (this.linkType) {
+ if (this.linkType === 1) {
this.tableDataLinkStart = res.data
} else {
this.tableDataLinkEnd = res.data
@@ -503,9 +532,31 @@
} else if (this.activeName === 'third') {
this.tableDataLiuxiang = res.data
} else if (this.activeName === 'fourth') {
-
}
- console.log(res)
+ // debugger
+ console.log(res.data)
+ },
+ // 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝
+ createFlowLine (param) {
+ const flowLine = window.L.polyline(param.points, param.option)
+ flowLine.addTo(window.map)
+ return flowLine
+ },
+ createFlowMarker (point) {
+ return window.L.marker(point, {
+ icon: window.L.divIcon({
+ className: 'dIcon',
+ html: '<div class="plane live">' +
+ // '<img src="'+require("../../assets/images/map/ship.png")+
+ '<div style="position: absolute;' +
+ ' width: 20px;' +
+ ' height: 20px;' +
+ ' border-radius: 50%;' +
+ ' content: \'\'; background-color: #FF664A;"/>' +
+ '<span></span><span></span></div></>',
+ iconSize: [90, 36]
+ })
+ })
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e
@@ -518,7 +569,7 @@
// 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectStart (e) {
console.log('閫夋嫨璧峰绠℃')
- this.$refs.singleTable.setCurrentRow(e)
+ // this.$refs.singleTable.setCurrentRow(e)
this.currentSelectStart = e
if (this.currentSelectStartLine != null) {
this.currentSelectStartLine.remove()
@@ -529,8 +580,8 @@
style: function (feature) {
return { color: 'rgba(0,255,0,.6)' }
}
- }).addTo(this.map)
- this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃
linkClickEnd () {
@@ -541,7 +592,6 @@
// 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectEnd (e) {
console.log('閫夋嫨缁撴潫绠℃')
- console.log(e)
this.currentSelectEnd = e
// 鍋氬垽鏂璻emove
@@ -549,14 +599,14 @@
this.currentSelectEndLine.remove()
this.currentSelectEndLine = null
}
-
+ // geoGson
const geom = JSON.parse(e.geomText)
this.currentSelectEndLine = window.L.geoJSON(geom, {
style: function (feature) {
return { color: 'rgba(200,0,200,.6)' }
}
- }).addTo(this.map)
- this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
},
// 杩為�氭�ф煡璇�
async linkQuery () {
@@ -573,10 +623,11 @@
this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�')
return false
}
+
// 璇锋眰鏁版嵁鏃剁殑鍙傛暟
const param = {
- startLineID: this.currentSelectStart.id,
- endLineID: this.currentSelectEnd.id
+ startLineID: this.currentSelectStart.pipesegcode,
+ endLineID: this.currentSelectEnd.pipesegcode
}
console.log(param)
// 璇锋眰鎺ュ彛鍜屾暟鎹�
@@ -590,7 +641,9 @@
}
this.tableDataLinkResult = res.data
this.currentLinkIsTrue = '杩為��'
+ // table 鏁扮粍鏁版嵁缃┖
const linkPipe = []
+ // 鏁版嵁閬嶅巻geoJson
res.data.forEach((itm, idx) => {
const geom = JSON.parse(itm.geomText)
const points = []
@@ -599,44 +652,38 @@
})
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) => {
- // const flowLine = window.L.polyline(param.points, param.option)
- // flowLine.addTo(window.map)
- // return flowLine
- // }
- // this.linkPipeline.push(line)
- // })
+ linkPipe.forEach((itm, idx) => {
+ const param1 = {
+ points: itm,
+ option: {
+ dashArray: '15 15',
+ dashSpeed: -30,
+ color: '#ffff00'
+ }
+ }
+ const line = this.createFlowLine(param1)
+ this.linkPipeline.push(line)
+ })
},
// 杩為�氭�� 鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁閫夋嫨鐐瑰嚮浜嬩欢
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())
+ 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: 6
+ }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
},
// 杩為�氭�х殑娓呴櫎鍔熻兘
linkClear () {
@@ -676,63 +723,64 @@
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 geom = JSON.parse(e.geomText)
+ this.currentSelectEndLine = window.L.geoJSON(geom, {
+ style: function (feature) {
+ return { color: 'rgba(200,0,200,.6)' }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
- // const param = {
- // lineID: e.id
- // }
- // const res = await api.findLeakages(param)
- // console.log(res)
+ // 鏁版嵁璇锋眰鍙傛暟
+ 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
- //
- // 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)
- // })
+ const len = res.data.length
+ if (len === 0) {
+ this.$message('鏈壘鍒伴渶瑕佸叧闂殑闃�闂�')
+ return
+ }
+ res.data.reverse()
+ this.bgFm = res.data
+ console.log(res.data)
- // 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)
- // })
+ 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.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 = this.createFlowLine(param1)
+ this.linkPipeline.push(line)
+ })
},
bgFmClick (e) {
console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
@@ -740,60 +788,63 @@
const point = [e.data[0][0], e.data[0][1]]
// const marker = main.createFlowMarker(point)
// marker.addTo(this.map)
- this.map.flyTo(point, 16)
+ window.map.flyTo(point, 16)
},
// 娴佸悜鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁鐐瑰嚮
lxResultSelect (e) {
- console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
- console.log(e)
+ // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
+ // console.log(e)
- // const geom = JSON.parse(e.geomText)
- // if (this.currentSelectResultLine != null) {
- // this.currentSelectResultLine.remove()
- // this.currentSelectResultLine = null
- // }
- // this.currentSelectResultLine = L.geoJSON(geom, {
- // style: function (feature) {
- // return { color: 'rgba(0,250,255,.6)' }
- // }
- // }).addTo(this.map)
- // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
+ 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(0,250,255,.6)' }
+ }
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
},
- // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃鏁版嵁
+ // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀�
async lxQuery (e) {
console.log(e)
this.clearLinkPipe()
- // const param = {
- // lineNodeID: e.startpoint
- // }
- // const res = await api.findFlowDirection(param)
+ 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)
+ })
- // 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)
- // })
+ linkPipe.forEach((itm, idx) => {
+ const param1 = {
+ points: itm,
+ option: {
+ dashArray: '15 15',
+ dashSpeed: -30,
+ color: '#ffff00'
+ }
+ }
+ const line = this.createFlowLine(param1)
+ this.linkPipeline.push(line)
+ })
},
+ // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀� 鐨勬暟鎹鐞嗘柟娉�
+ // getres (res) {
+ //
+ // },
// 娓呴櫎娴佸悜
clearLX () {
if (this.flowPipeLine != null) {
@@ -804,15 +855,15 @@
// 娴佸悜-绠＄嚎閫夋嫨
selectRowLiuXiang (e) {
// 閫夋嫨瑕佹樉绀虹殑娴佸悜绾�
- console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�')
- console.log(e)
+ // console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�')
+ // console.log(e)
},
lxHandleClick (e) {
- console.log('姝ｆ祦鍚戞樉绀�')
- console.log(e)
-
- // 娓呴櫎娴佸悜鏂规硶
- this.clearLX()
+ // console.log('姝ｆ祦鍚戞樉绀�')
+ // console.log(e)
+ //
+ // // 娓呴櫎娴佸悜鏂规硶
+ // this.clearLX()
// const param = {
// points: e.data,
// option: {
@@ -820,7 +871,7 @@
// dashSpeed: -30
// }
// }
- // this.flowPipeLine = main.createFlowLine(param)
+ // this.flowPipeLine = this.createFlowLine(param)
},
// 娓呮鍒嗘瀽缁撴灉
@@ -834,12 +885,12 @@
},
// 閫嗘祦鍚戞樉绀�
lxHandleClick2 (e) {
- console.log('閫嗘祦鍚戞樉绀�')
- console.log(e)
- if (this.flowPipeLine != null) {
- this.flowPipeLine.remove()
- this.flowPipeLine = null
- }
+ // console.log('閫嗘祦鍚戞樉绀�')
+ // console.log(e)
+ // if (this.flowPipeLine != null) {
+ // this.flowPipeLine.remove()
+ // this.flowPipeLine = null
+ // }
// const param = {
// points: e.data,
// option: {
@@ -847,20 +898,20 @@
// dashSpeed: 30
// }
// }
- // this.flowPipeLine = main.createFlowLine(param)
+ // this.flowPipeLine = this.createFlowLine(param)
},
// 妯柇闈㈢粯鍒剁嚎娈�
drawLine () {
- console.log('drawLine')
+ // console.log('drawLine')
if (this.measure === null) {
- this.measure = new DrawLine(this.map)
+ this.measure = new DrawLine(window.map)
}
this.measure.destory()
this.measure.init()
},
// 妯柇闈㈡暟鎹姹�
async getHdmPoint (line) {
- console.log('妯柇闈㈢殑缁樺埗绾�')
+ // console.log('妯柇闈㈢殑缁樺埗绾�')
// console.table(line)
// 妯柇闈㈡暟鎹�
this.hdmParam = {
@@ -877,16 +928,28 @@
return false
}
// 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋�
- // const res = await api.getCrossSection(this.hdmParam)
- // console.log(res)
+ const res = await mapApi.getCrossSection(this.hdmParam)
+ console.log(res)
+ const dataPoint = res.data.point
+ console.log(dataPoint)
+ // this.tableData = dataPoint.pipelines.extraData
+ 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)
+ }
},
// 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず
async selectRow (e) {
console.log(e)
+ // option 鏁版嵁澶勭悊 const dataSeries = e.data.pointInterval
// 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
const option = {
xAxis: {
type: 'category',
+ // data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
},
yAxis: {
@@ -894,6 +957,7 @@
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
+ // data: dataSeries,
type: 'line'
}]
}
@@ -912,6 +976,40 @@
</script>
<style lang="less" scoped>
+/*****婊氬姩鏉�***/
+/deep/ .tableBox {
+ .el-table__fixed-right-patch {
+ display: none;
+ }
+}
+
+/deep/ .tableBox::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 10px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ height: 10px;
+}
+
+/deep/ .tableBox::-webkit-scrollbar-thumb {
+ /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
+ border-radius: 10px;
+ background: #000;
+}
+
+/deep/ .tableBox::-webkit-scrollbar-track {
+ /*婊氬姩鏉￠噷闈㈣建閬�*/
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+ background: @background-color;
+ border-radius: 10px;
+}
+
+/deep/ .el-table .has-gutter tr th {
+ border: none !important;
+}
+
+/deep/ .el-table tbody tr:hover > td {
+ background: none !important
+}
+
/deep/ .el-tabs__header {
background: none !important;
}
@@ -976,6 +1074,6 @@
}
/deep/ .fixed-table {
- background: rgba(0, 16, 30, 1) !important;
+ //background: rgba(0, 16, 30, 0.9) !important;
}
</style>
--
Gitblit v1.8.0