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 | 201 ++++++++++++++++++++++++++++--------------------- 1 files changed, 115 insertions(+), 86 deletions(-) diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index 56aecf0..4284d6f 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -5,30 +5,31 @@ <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="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠$嚎">璧峰绠$嚎 + title="鍦板浘涓婄偣鍑婚�夋嫨闇�瑕佽繘琛岃繛閫氬垎鏋愮殑绠℃">璧峰绠℃ </el-button> <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;" - title="鍦板浘涓婄偣鍑讳笌鎵�閫夌绾胯繛閫氱绾�">缁撴潫绠$嚎 + title="鍦板浘涓婄偣鍑讳笌鎵�閫夌娈佃繛閫氱娈�">缁撴潫绠℃ </el-button> <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;" - title="鏍规嵁璧峰銆佺粨鏉熺绾胯繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋� + title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">杩為�氭�у垎鏋� </el-button> <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" - title="鏍规嵁璧峰銆佺粨鏉熺绾胯繘琛岃繛閫氭�у垎鏋�">娓呴櫎 + title="鏍规嵁璧峰銆佺粨鏉熺娈佃繘琛岃繛閫氭�у垎鏋�">娓呴櫎 </el-button> <!-- <el-scrollbar style="height:450px">--> <!-- <el-card shadow="hover">--> - <span class="fixed-style">璧峰绠$嚎</span> + <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 @@ -63,7 +64,7 @@ </template> </el-table-column> </el-table> - <span class="fixed-style">缁撴潫绠$嚎</span> + <span class="fixed-style">缁撴潫绠℃</span> <el-table class="tableBox" height="100" @@ -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 @@ -163,15 +164,15 @@ <el-row> <span>鐖嗙锛堢浉鍏冲紑鍏筹級</span> <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" - title="鍦板浘涓婄偣鍑婚�夋嫨鍙戠敓鐖嗙鐨勭绾�"> - 閫夋嫨绠$嚎 + title="鍦板浘涓婄偣鍑婚�夋嫨鍙戠敓鐖嗙鐨勭娈�"> + 閫夋嫨绠℃ </el-button> <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="娓呴櫎缁樺埗"> 娓呴櫎 </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" @@ -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,8 +273,8 @@ </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 max-height="200" @@ -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', @@ -441,7 +443,9 @@ myChart: null, options: [], + echartsList: [], myChartShow: false, + flowPipeLine: null, // 鐢ㄤ簬鍒ゆ柇 @@ -458,31 +462,29 @@ bgMarker: null, hdmParam: null, - // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬绾� 0 杩為�氭�х粨鏉熺绾� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠$嚎 + // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ linkType: 1, - // 杩為�氭�� 璧峰绠$嚎 琛ㄦ牸鏁版嵁 + // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁 tableDataLinkStart: [], - // 杩為�氭�� 缁撴潫绠$嚎 琛ㄦ牸鏁版嵁 + // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁 tableDataLinkEnd: [], // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫� currentLinkIsTrue: '', // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁 tableDataLinkResult: [], - // 鐖嗙 鍙戠敓鐖嗚鐨勭绾� table琛ㄦ牸鏁版嵁 + // 鐖嗙 鍙戠敓鐖嗚鐨勭娈� table琛ㄦ牸鏁版嵁 bgPipeLine: [], // 鐖嗙 闇�瑕佸叧闂殑闃�闂� table琛ㄦ牸鏁版嵁 bgFm: [], - // 娴佸悜 閫夋嫨鐨勭绾� 鐨則able琛ㄦ牸鏁版嵁 + // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁 tableDataLiuxiang: [], // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁 lxTableDataResult: [], - // 妯柇闈� 绠$嚎鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 - tableData: [], - - echartsList: [] + // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 + tableData: [] } }, @@ -497,7 +499,8 @@ methods: { // tab鍒囨崲 handleClick (tab, event) { - // console.log(tab, event) + console.log(event) + // console.log(tab) this.clearLinkPipe() this.clearLX() this.linkClear() @@ -513,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) { @@ -532,6 +544,7 @@ } // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁 const res = await mapApi.findPipelineByClickPoint(param) + console.log(res) if (this.activeName === 'first') { if (this.linkType === 1) { this.tableDataLinkStart = res.data @@ -544,8 +557,6 @@ this.tableDataLiuxiang = res.data } else if (this.activeName === 'fourth') { } - // debugger - console.log(res.data) }, // 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝 createFlowLine (param) { @@ -555,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 + // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e linkClickStart (e) { - console.log(e) - console.log('鍦板浘鐐瑰嚮璧峰绠$嚎') + // console.log('鍦板浘鐐瑰嚮璧峰绠℃') this.linkType = 1 this.selectPipeLine() }, - // 杩為�氭�� 璧峰绠$嚎 table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� + // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� linkSelectStart (e) { - console.log('閫夋嫨璧峰绠$嚎') + // console.log('閫夋嫨璧峰绠℃') // this.$refs.singleTable.setCurrentRow(e) this.currentSelectStart = e if (this.currentSelectStartLine != null) { @@ -597,15 +600,15 @@ }).addTo(window.map) window.map.panInsideBounds(this.currentSelectStartLine.getBounds()) }, - // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠$嚎 + // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃ linkClickEnd () { - console.log('鍦板浘鐐瑰嚮缁撴潫绠$嚎') + // console.log('鍦板浘鐐瑰嚮缁撴潫绠℃') this.linkType = 0 this.selectPipeLine() }, - // 杩為�氭�� 缁撴潫绠$嚎 table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� + // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� linkSelectEnd (e) { - console.log('閫夋嫨缁撴潫绠$嚎') + console.log('閫夋嫨缁撴潫绠℃') this.currentSelectEnd = e // 鍋氬垽鏂璻emove @@ -635,9 +638,9 @@ }) this.linkPipeline = [] } - // 鍒ゆ柇 濡傛灉璧峰绠$嚎 缁撴潫绠$嚎娌℃湁鏁版嵁 鍒欒繑鍥瀎alse 鎻愮ず杩樻湭閫夋嫨璧峰/缁撴潫绠$嚎 + // 鍒ゆ柇 濡傛灉璧峰绠℃ 缁撴潫绠℃娌℃湁鏁版嵁 鍒欒繑鍥瀎alse 鎻愮ず杩樻湭閫夋嫨璧峰/缁撴潫绠℃ if (this.currentSelectStart === null || this.currentSelectEnd === null) { - this.$message('璇烽�夋嫨璧峰绠$嚎鍜岀粨鏉熺绾�') + this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�') return false } @@ -646,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('娌℃湁鎵惧埌杩為�氱殑绠$嚎') + this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃') + // 杩涜鍒ゆ柇 + // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) { this.currentLinkIsTrue = '涓嶈繛閫�' + // } return } this.tableDataLinkResult = res.data @@ -684,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() @@ -696,7 +701,7 @@ style: function (feature) { return { color: 'rgba(255,0,0,.6)', - weight: 6 + weight: 10 } } }).addTo(window.map) @@ -722,12 +727,12 @@ } }, - // 鐖嗙 ===> 閫夋嫨绠$嚎 + // 鐖嗙 ===> 閫夋嫨绠℃ bgClick () { this.selectPipeLine() }, async bgSelect (e) { - console.log('閫夋嫨鐖嗙绠$嚎') + console.log('閫夋嫨鐖嗙绠℃') console.log(e) this.bgFm = [] if (this.bgMarker != null) { @@ -744,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()) @@ -754,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) { @@ -763,7 +771,7 @@ } res.data.reverse() this.bgFm = res.data - console.log(res.data) + // console.log(res.data) this.bgPoint = res.data[0].startControlPoint @@ -772,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) @@ -800,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鍒楄〃鏁版嵁鐐瑰嚮 @@ -820,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()) @@ -865,7 +877,7 @@ this.flowPipeLine = null } }, - // 娴佸悜-绠$嚎閫夋嫨 + // 娴佸悜-绠℃閫夋嫨 selectRowLiuXiang (e) { // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾� // console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�') @@ -1099,6 +1111,23 @@ background: none; } + /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, 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;*/ /*}*/ -- Gitblit v1.8.0