From 315dc0b82a482a3d145009c8f25c20e87da681d5 Mon Sep 17 00:00:00 2001
From: ChenZeping <chenzeping>
Date: 星期一, 10 五月 2021 17:05:55 +0800
Subject: [PATCH] 企业应急
---
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 294 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 147 insertions(+), 147 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index 955ca38..4284d6f 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -21,14 +21,15 @@
<span class="fixed-style">璧峰绠℃</span>
<el-table
class="tableBox"
+ height="100"
max-height="200"
- highlight-current-row
:data="tableDataLinkStart"
@row-click="linkSelectStart"
+ highlight-current-row
style="width: 100%" size="mini">
<el-table-column
prop="datasource"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -36,7 +37,7 @@
sortable
width="100"
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
@@ -74,7 +75,7 @@
style="width: 100%" size="mini">
<el-table-column
prop="datasource"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -82,7 +83,7 @@
sortable
width="100"
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
@@ -120,7 +121,7 @@
<el-table-column
prop="material"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -128,7 +129,7 @@
sortable
width="100"
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
@@ -182,7 +183,7 @@
<el-table-column
:show-overflow-tooltip="true"
prop="pipecode"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -190,7 +191,7 @@
sortable
width="100"
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
@@ -229,8 +230,8 @@
style="width: 100%" size="mini">
<el-table-column
:show-overflow-tooltip="true"
- prop="lineloopna"
- label="绠＄嚎绫诲瀷"
+ prop="pipecode"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -238,14 +239,14 @@
:show-overflow-tooltip="true"
width="100"
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
sortable
:show-overflow-tooltip="true"
width="100"
- prop="startpoint"
+ prop="pipecode"
label="璧风偣缂栧彿"
>
</el-table-column>
@@ -253,7 +254,7 @@
:show-overflow-tooltip="true"
sortable
width="100"
- prop="endpointnu"
+ prop="pipecode"
label="缁堢偣缂栧彿"
>
</el-table-column>
@@ -272,7 +273,7 @@
</el-tab-pane>
<el-tab-pane label="娴佸悜" name="third">
<el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
- title="鍦板浘涓婄偣鍑昏鏄剧ず娴佸悜鐨勭绾�">
+ title="鍦板浘涓婄偣鍑昏鏄剧ず娴佸悜鐨勭娈�">
閫夋嫨绠℃
</el-button>
<el-table
@@ -282,7 +283,7 @@
<el-table-column
:show-overflow-tooltip="true"
prop="pipecode"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -290,7 +291,7 @@
sortable
width="100"
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
@@ -332,7 +333,7 @@
<el-table-column
:show-overflow-tooltip="true"
prop="pipecode"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
>
</el-table-column>
<el-table-column
@@ -340,7 +341,7 @@
width="100"
sortable
prop="pipecode"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
>
</el-table-column>
<el-table-column
@@ -382,7 +383,7 @@
</el-button>
<!-- <el-card class="box-card">-->
<div slot="header" class="fixed-style">
- <span>绠＄嚎鏌ヨ缁撴灉</span>
+ <span>绠℃鏌ヨ缁撴灉</span>
</div>
<el-table
class="tableBox"
@@ -391,12 +392,12 @@
style="width: 100%" @row-click="selectRow" size="mini">
<el-table-column
prop="pipename"
- label="绠＄嚎鍚嶇О"
+ label="绠℃鍚嶇О"
width="180">
</el-table-column>
<el-table-column
prop="mediumtype"
- label="绠＄嚎绫诲瀷"
+ label="绠℃绫诲瀷"
width="180">
</el-table-column>
<el-table-column
@@ -429,6 +430,7 @@
import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
+import iconUrl from '../../../../assets/images/other.png'
export default {
name: 'SewersAnalysis',
@@ -440,7 +442,10 @@
map: window.map,
myChart: null,
+ options: [],
+ echartsList: [],
myChartShow: false,
+
flowPipeLine: null,
// 鐢ㄤ簬鍒ゆ柇
@@ -478,10 +483,8 @@
// 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁
lxTableDataResult: [],
- // 妯柇闈� 绠＄嚎鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
- tableData: [],
-
- echartsList: []
+ // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ tableData: []
}
},
@@ -496,7 +499,8 @@
methods: {
// tab鍒囨崲
handleClick (tab, event) {
- // console.log(tab, event)
+ console.log(event)
+ // console.log(tab)
this.clearLinkPipe()
this.clearLX()
this.linkClear()
@@ -512,15 +516,24 @@
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)
+ // if () {
+ // // 鍏抽棴寮圭獥
+ // window.layerFactory.clickSwitch = false
+ // } else {
+ // window.layerFactory.clickSwitch = true
+ // }
},
// 鐐瑰嚮鑾峰彇鍒ゆ柇鏁版嵁
async getPipeLine (point) {
@@ -531,6 +544,7 @@
}
// 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
const res = await mapApi.findPipelineByClickPoint(param)
+ console.log(res)
if (this.activeName === 'first') {
if (this.linkType === 1) {
this.tableDataLinkStart = res.data
@@ -543,8 +557,6 @@
this.tableDataLiuxiang = res.data
} else if (this.activeName === 'fourth') {
}
- // debugger
- console.log(res.data)
},
// 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝
createFlowLine (param) {
@@ -554,31 +566,23 @@
},
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]
+ icon: window.L.icon({
+ iconUrl: iconUrl,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15]
})
})
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e
linkClickStart (e) {
- console.log(e)
- console.log('鍦板浘鐐瑰嚮璧峰绠℃')
+ // console.log('鍦板浘鐐瑰嚮璧峰绠℃')
this.linkType = 1
this.selectPipeLine()
},
// 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectStart (e) {
- console.log('閫夋嫨璧峰绠℃')
+ // console.log('閫夋嫨璧峰绠℃')
// this.$refs.singleTable.setCurrentRow(e)
this.currentSelectStart = e
if (this.currentSelectStartLine != null) {
@@ -588,14 +592,17 @@
const geom = JSON.parse(e.geomText)
this.currentSelectStartLine = window.L.geoJSON(geom, {
style: function (feature) {
- return { color: 'rgba(0,255,0,.6)' }
+ return {
+ weight: 10,
+ color: 'rgba(0,255,0,.6)'
+ }
}
}).addTo(window.map)
window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃
linkClickEnd () {
- console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
+ // console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
this.linkType = 0
this.selectPipeLine()
},
@@ -613,7 +620,10 @@
const geom = JSON.parse(e.geomText)
this.currentSelectEndLine = window.L.geoJSON(geom, {
style: function (feature) {
- return { color: 'rgba(200,0,200,.6)' }
+ return {
+ weight: 10,
+ color: 'rgba(255, 247, 0, 0.6)'
+ }
}
}).addTo(window.map)
window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
@@ -639,14 +649,17 @@
startLineID: this.currentSelectStart.pipesegcode,
endLineID: this.currentSelectEnd.pipesegcode
}
- console.log(param)
+ // console.log(param)
// 璇锋眰鎺ュ彛鍜屾暟鎹�
const res = await mapApi.findConnectedPipelines(param)
- console.log(res)
+ // console.log(res)
// 鍒ゆ柇鏁版嵁缁撴灉 === 0 鍒欐病鏈夎姹傚埌鏁版嵁
if (res.data.length === 0) {
this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃')
+ // 杩涜鍒ゆ柇
+ // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) {
this.currentLinkIsTrue = '涓嶈繛閫�'
+ // }
return
}
this.tableDataLinkResult = res.data
@@ -677,9 +690,8 @@
},
// 杩為�氭�� 鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁閫夋嫨鐐瑰嚮浜嬩欢
linkResultSelect (e) {
- console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
- console.log(e)
-
+ // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
+ // console.log(e)
const geom = JSON.parse(e.geomText)
if (this.currentSelectResultLine != null) {
this.currentSelectResultLine.remove()
@@ -689,7 +701,7 @@
style: function (feature) {
return {
color: 'rgba(255,0,0,.6)',
- weight: 6
+ weight: 10
}
}
}).addTo(window.map)
@@ -737,7 +749,10 @@
const geom = JSON.parse(e.geomText)
this.currentSelectEndLine = window.L.geoJSON(geom, {
style: function (feature) {
- return { color: 'rgba(200,0,200,.6)' }
+ return {
+ weight: 10,
+ color: 'rgba(200,0,200,.6)'
+ }
}
}).addTo(window.map)
window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
@@ -747,7 +762,7 @@
lineID: e.pipesegcode
}
const res = await mapApi.findLeakages(param)
- console.log(res)
+ // console.log(res)
const len = res.data.length
if (len === 0) {
@@ -756,7 +771,7 @@
}
res.data.reverse()
this.bgFm = res.data
- console.log(res.data)
+ // console.log(res.data)
this.bgPoint = res.data[0].startControlPoint
@@ -765,7 +780,7 @@
const p = [point.coordinates[1], point.coordinates[0]]
this.bgMarker = this.createFlowMarker(p)
- this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
+ // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
this.bgMarker.addTo(window.map)
window.map.flyTo(p)
@@ -793,12 +808,13 @@
})
},
bgFmClick (e) {
- console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
+ // console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
console.log(e)
- const point = [e.data[0][0], e.data[0][1]]
+ // const point = [e.data[0][0], e.data[0][1]]
+ const point = [e.startControlPoint.y, e.startControlPoint.x]
const marker = this.createFlowMarker(point)
- marker.addTo(this.map)
- window.map.flyTo(point, 16)
+ marker.addTo(window.map)
+ window.map.flyTo(point, 17)
},
// 娴佸悜鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁鐐瑰嚮
@@ -813,7 +829,10 @@
}
this.currentSelectResultLine = window.L.geoJSON(geom, {
style: function (feature) {
- return { color: 'rgba(0,250,255,.6)' }
+ return {
+ weight: 10,
+ color: 'rgba(0,250,255,.6)'
+ }
}
}).addTo(window.map)
window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
@@ -858,7 +877,7 @@
this.flowPipeLine = null
}
},
- // 娴佸悜-绠＄嚎閫夋嫨
+ // 娴佸悜-绠℃閫夋嫨
selectRowLiuXiang (e) {
// 閫夋嫨瑕佹樉绀虹殑娴佸悜绾�
// console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�')
@@ -950,6 +969,7 @@
let tempData
const storeData = []
const dataList = []
+ this.echartsList = []
for (let i = 0; i < dataSeries.length; i++) {
if (storeData.length === 0) {
storeData.push(name)
@@ -962,7 +982,7 @@
}
dataList.push(dataSeries[i].pipelines.oilPipeID)
}
- console.log(dataList)
+ // console.log(dataList)
// const seriesList = e.data.pointInterval
// let seriesdata
// for (let i = 0; i < seriesList.length; i++) {
@@ -975,7 +995,7 @@
selectRow (dataList) {
// console.log(dataList)
// 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
- const option = {
+ this.option = {
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -985,10 +1005,10 @@
}
}
},
- legend: {
- // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸']
- data: dataList
- },
+ // legend: {
+ // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸']
+ // data: dataList
+ // },
toolbox: {
show: false,
feature: {
@@ -1010,9 +1030,9 @@
textStyle: {
color: '#fff'
}
- },
+ }
// data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']
- data: dataList
+ // data: dataList
}
],
yAxis: [
@@ -1045,13 +1065,16 @@
series: this.echartsList
}
this.myChartShow = true
- this.myChart.setOption(option)
+ 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()
}
@@ -1061,32 +1084,6 @@
</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;
}
@@ -1097,50 +1094,6 @@
/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 {
- //width: 95%;
- //margin: 5px auto;
- //border: none;
- //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/ .fixed-style {
@@ -1158,13 +1111,60 @@
background: none;
}
- /deep/ .el-table__fixed-right {
- bottom: 0;
- padding: 0;
- margin: 0;
+ /deep/ .el-table__body .el-table__row.hover-row td {
+ background: none !important;
+ }
+
+ /deep/ .el-table__body tr.current-row > td {
+ background: rgba(0, 16, 30, 1) !important;
}
/deep/ .fixed-table {
- background: rgba(0, 16, 30, 0.9) !important;
+ background: rgba(0, 16, 30, 1) !important;
}
+
+ /*scroll鍙充晶鍗犱綅*/
+ /deep/ .el-table__fixed-right-patch {
+ display: none;
+ }
+
+ /*/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__body {*/
+ /* padding: 0;*/
+ /*}*/
+ /*/deep/ .el-table__fixed-right {*/
+ /* bottom: 0;*/
+ /* padding: 0;*/
+ /* margin: 0;*/
+ /*}*/
</style>
--
Gitblit v1.8.0