From d7c50f6207f0f27f4c20aa96f75b7c0b610b2b23 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期四, 20 五月 2021 11:06:54 +0800 Subject: [PATCH] 管线弹框分析修改 --- src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 1364 +++++++++++++++++++++++++++-------------------------------- 1 files changed, 623 insertions(+), 741 deletions(-) diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index e5fd270..20f74de 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -1,461 +1,149 @@ <template> - <div class="sewers-analysis-tab"> - <transition name="el-fade-in-linear"> - <el-card> + <div class="sewers-analysis-tab"> <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:450px"> - <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-tab-pane label="杩為�氭��" name="first"> + <Connectivity></Connectivity> + </el-tab-pane> + <el-tab-pane label="鐖嗙" style="color: #cccccc" name="second"> + <Tube></Tube> + </el-tab-pane> + <el-tab-pane label="娴佸悜" name="third"> + <Flow></Flow> + </el-tab-pane> + <el-tab-pane label="妯柇闈�" name="fourth"> + <!-- <CrossSectional></CrossSectional>--> + <el-row> + <el-button type="primary" @click="drawLine" size="mini" title="鍦板浘涓婄粯鍒惰杩涜鍒嗘瀽鎴柇闈㈢殑绾�">缁樺埗绾挎</el-button> + <el-button type="primary" @click="jdmQuery" size="mini" title="鎴柇闈㈠垎鏋�">鎴柇闈㈠垎鏋�</el-button> + <el-button type="primary" @click="jdmClear" size="mini" title="娓呴櫎鎴柇闈㈠垎鏋愮粨鏋�">娓呴櫎</el-button> + </el-row> + <!-- <el-card class="box-card">--> + <div slot="header" class="fixed-style"> + <span>绠℃鏌ヨ缁撴灉</span> + </div> + <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row + style="width: 100%" @row-click="selectRow" size="mini"> + <el-table-column prop="mediumtype" label="浠嬭川绫诲瀷" :show-overflow-tooltip="true"></el-table-column> + <el-table-column prop="x" label="鏂潰(缁忓害)" :show-overflow-tooltip="true" width="80"></el-table-column> + <el-table-column prop="y" label="鏂潰(绾害)" :show-overflow-tooltip="true" width="80"></el-table-column> + <el-table-column prop="z" label="鏂潰(楂樼▼)" :show-overflow-tooltip="true" width="80"></el-table-column> + <el-table-column prop="spacing" label="闂磋窛(m)" width="80"></el-table-column> + <!-- <el-table-column class-name="fixed-table" fixed="right" label="鍥捐〃" width="40">--> + <!-- <template slot-scope="scope">--> + <!-- <el-button @click="selectRow(scope.row)" type="text" size="small">鏌ョ湅</el-button>--> + <!-- </template>--> + <!-- </el-table-column>--> </el-table> - <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> - <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-card>--> + <!-- <el-card class="box-card"> + <div slot="header" class="fixed-style"> + <span>鏂潰鍥�</span> + </div> + <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">鏆傛棤鏁版嵁</span> + <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div> + </el-card> --> + <span class="fixed-style">鏂潰鍥�</span> + <span v-show="!myChartShow" + style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">鏆傛棤鏁版嵁</span> + <div v-show="myChartShow" id="echarts_box" ref="myChart" + style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" --> + </el-tab-pane> </el-tabs> - </el-card> - </transition> - </div> + </div> </template> <script> -// 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' +import eventBus from '../../../../eventBus' +import DrawLine from './AnalysisChoose/DrawLine' +import mapApi from '../../../../api/mapApi' +import { pulseEffect } from '../../../../utils/utils' +import Connectivity from './AnalysisChoose/Connectivity' +import Tube from './AnalysisChoose/Tube' +import Flow from './AnalysisChoose/Flow' +// import CrossSectional from './AnalysisChoose/CrossSectional' export default { name: 'SewersAnalysis', + components: { + Connectivity, + Tube, + Flow + // CrossSectional + }, data () { return { - activeName: 'first', // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈� + // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈� + activeName: 'first', measure: null, - map: null, - tableData: [], - tableDataLiuxiang: [], + map: window.map, myChart: null, + options: [], + echartsList: [], 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, - hdmParam: null + // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ + linkType: 1, + // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁 + tableDataLinkStart: [], + // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁 + tableDataLinkEnd: [], + // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫� + currentLinkIsTrue: '', + // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁 + tableDataLinkResult: [], + + // 鐖嗙 鍙戠敓鐖嗚鐨勭娈� table琛ㄦ牸鏁版嵁 + bgPipeLine: [], + // 鐖嗙 闇�瑕佸叧闂殑闃�闂� table琛ㄦ牸鏁版嵁 + bgFm: [], + + // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁 + tableDataLiuxiang: [], + // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁 + lxTableDataResult: [], + + // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 + tableData: [], + obj: {} + } }, 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) - // }) + // 鍒濆鍖杄charts鍥捐〃 + this.myChart = this.$echarts.init(this.$refs.myChart) + // 浣跨敤 DrwLine鏂规硶 + eventBus.$on('draw-hdm-line', (points) => { + this.getHdmPoint(points) }) }, methods: { // tab鍒囨崲 handleClick (tab, event) { - console.log(tab, event) + console.log(event) + // console.log(tab) this.clearLinkPipe() this.clearLX() this.linkClear() this.jdmClear() + this.currentLinkIsTrue = '' this.bgFm = [] this.bgPipeLine = [] this.tableData = [] @@ -463,89 +151,124 @@ this.tableDataLinkStart = [] this.tableDataLinkEnd = [] this.tableDataLinkResult = [] + this.lxTableDataResult = [] }, - // 娴佸悜鍦板浘涓婄偣鍑� + // 鍦板浘涓婄偣鍑� selectPipeLine () { - this.map.on('click', this.selectClick) + window.map.on('click', this.selectClick) + // 鍏抽棴寮圭獥 + // window.mapManager.clickDialogSwitch = false }, // 鍦板浘涓婄偣鍑诲洖璋� selectClick (e) { - this.map.off('click', this.selectClick) + // console.log(e) + window.map.off('click', this.selectClick) const point = [e.latlng.lng, e.latlng.lat] - console.log(point) - // this.getPipeLine(point) + this.getPipeLine(point) + }, + // 鐐瑰嚮鑾峰彇鍒ゆ柇鏁版嵁 + async getPipeLine (point) { + const param = { + x: point[0], + y: point[1], + radius: 3 + } + // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁 + const res = await mapApi.findPipelineByClickPoint(param) + console.log(res) + if (this.activeName === 'first') { + if (this.linkType === 1) { + this.tableDataLinkStart = res.data + } else { + this.tableDataLinkEnd = res.data + } + } else if (this.activeName === 'second') { + this.bgPipeLine = res.data + } else if (this.activeName === 'third') { + this.tableDataLiuxiang = res.data + } else if (this.activeName === 'fourth') { + } + }, + // 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝 + 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] + }) + }) }, - // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃ - linkClickStart () { - console.log('鍦板浘鐐瑰嚮璧峰绠℃') + // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e + linkClickStart (e) { + // console.log('鍦板浘鐐瑰嚮璧峰绠℃') this.linkType = 1 this.selectPipeLine() }, + // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� + linkSelectStart (e) { + // console.log(e) + this.currentSelectStart = e + if (this.currentSelectStartLine != null) { + this.currentSelectStartLine.remove() + this.currentSelectStartLine = null + } + const geom = JSON.parse(e.geomText) + this.currentSelectStartLine = window.L.geoJSON(geom, { + style: function (feature) { + return { + weight: 10, + color: 'rgba(0,255,0,.6)' + } + } + }).addTo(window.map) + window.map.panInsideBounds(this.currentSelectStartLine.getBounds()) + }, // 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃ linkClickEnd () { - console.log('鍦板浘鐐瑰嚮缁撴潫绠℃') + // 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()) - }, + // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� 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) + // console.log('閫夋嫨缁撴潫绠℃') + this.currentSelectEnd = 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()) + // 鍋氬垽鏂璻emove + if (this.currentSelectEndLine != null) { + this.currentSelectEndLine.remove() + this.currentSelectEndLine = null + } + // geoGson + const geom = JSON.parse(e.geomText) + this.currentSelectEndLine = window.L.geoJSON(geom, { + style: function (feature) { + return { + weight: 10, + color: 'rgba(255, 247, 0, 0.7)' + } + } + }).addTo(window.map) + window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) }, - // 杩為�氭�ф煡璇� + // 杩為�氭�ф煡璇� 缁撴灉 async linkQuery () { - // 璁剧疆鍒嗘瀽缁撴灉涓虹┖ + // 姣忔鏌ヨ鍒嗘瀽缁撴灉鍒剁┖ this.tableDataLinkResult = [] if (this.linkPipeline.length > 1) { this.linkPipeline.forEach((itm) => { @@ -558,22 +281,28 @@ 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) // 璇锋眰鎺ュ彛鍜屾暟鎹� const res = await mapApi.findConnectedPipelines(param) + // console.log(res) // 鍒ゆ柇鏁版嵁缁撴灉 === 0 鍒欐病鏈夎姹傚埌鏁版嵁 if (res.data.length === 0) { this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃') + // 杩涜鍒ゆ柇 this.currentLinkIsTrue = '涓嶈繛閫�' return } this.tableDataLinkResult = res.data this.currentLinkIsTrue = '杩為��' + // table 鏁扮粍鏁版嵁缃┖ const linkPipe = [] + // 鏁版嵁閬嶅巻geoJson res.data.forEach((itm, idx) => { const geom = JSON.parse(itm.geomText) const points = [] @@ -582,26 +311,39 @@ }) 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) - // }) + 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) + }) }, - // 杩為�氭�ч儴鍒嗙殑娓呴櫎鍔熻兘 + // 瀹氫綅鏂规硶浜嬩欢 + linkResultSelect (e) { + // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') + console.log(e) + const geom = JSON.parse(e.geomText) + if (this.currentSelectResultLine != null) { + this.currentSelectResultLine.remove() + this.currentSelectResultLine = null + } + this.currentSelectResultLine = window.L.geoJSON(geom, { + style: function (feature) { + return { + color: 'rgba(255,0,0,.6)', + weight: 10 + } + } + }).addTo(window.map) + window.map.panInsideBounds(this.currentSelectResultLine.getBounds()) + }, + // 杩為�氭�х殑娓呴櫎鍔熻兘 linkClear () { if (this.currentSelectStartLine != null) { this.currentSelectStartLine.remove() @@ -621,72 +363,13 @@ } }, - // 娴佸悜鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁鐐瑰嚮 - lxResultSelect (e) { - console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') - console.log(e) - - // const geom = JSON.parse(e.geomText) - // if (this.currentSelectResultLine != null) { - // this.currentSelectResultLine.remove() - // this.currentSelectResultLine = null - // } - // this.currentSelectResultLine = L.geoJSON(geom, { - // style: function (feature) { - // return { color: 'rgba(0,250,255,.6)' } - // } - // }).addTo(this.map) - // this.map.panInsideBounds(this.currentSelectResultLine.getBounds()) - }, - // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃鏁版嵁 - async lxQuery (e) { - console.log(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) - // }) - }, - // 娓呴櫎娴佸悜 - clearLX () { - if (this.flowPipeLine != null) { - this.flowPipeLine.remove() - this.flowPipeLine = null - } - }, - // 鐖嗙 ===> 閫夋嫨绠℃ bgClick () { this.selectPipeLine() }, async bgSelect (e) { - console.log('閫夋嫨鐖嗙绠℃') - console.log(e) + // console.log('閫夋嫨鐖嗙绠℃') + // console.log(e) this.bgFm = [] if (this.bgMarker != null) { this.bgMarker.remove() @@ -698,110 +381,150 @@ 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 { + weight: 10, + 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) + // 鏁版嵁璇锋眰鍙傛暟 + 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 = pulseEffect(p) + // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) + // this.bgMarker.addTo(window.map) + // window.map.flyTo(p) + + const linkPipe = [] + res.data.forEach((itm, idx) => { + const geom = JSON.parse(itm.geomText) + const points = [] + geom.coordinates.forEach((it, id) => { + points.push(it.reverse()) + }) + linkPipe.push(points) + }) + + linkPipe.forEach((itm, idx) => { + const param1 = { + points: itm, + option: { + dashArray: '15 15', + dashSpeed: -30, + color: '#ffff00' + } + } + const line = this.createFlowLine(param1) + this.linkPipeline.push(line) + }) }, bgFmClick (e) { - console.log('鐐瑰嚮褰卞搷鐨勯榾闂�') + // console.log('鐐瑰嚮褰卞搷鐨勯榾闂�') + // console.log(e) + // const point = [e.data[0][0], e.data[0][1]] + const point = [e.startControlPoint.y, e.startControlPoint.x] + pulseEffect(point) + // const marker = this.createFlowMarker(point) + // marker.addTo(window.map) + // window.map.flyTo(point, 17) + }, + + // 娴佸悜鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁鐐瑰嚮 + lxResultSelect (e) { + // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') + // console.log(e) + + const geom = JSON.parse(e.geomText) + if (this.currentSelectResultLine != null) { + this.currentSelectResultLine.remove() + this.currentSelectResultLine = null + } + this.currentSelectResultLine = window.L.geoJSON(geom, { + style: function (feature) { + return { + weight: 10, + color: 'rgba(0,250,255,.6)' + } + } + }).addTo(window.map) + window.map.panInsideBounds(this.currentSelectResultLine.getBounds()) + }, + // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀� + async lxQuery (e) { console.log(e) - 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 - // } + this.clearLinkPipe() + const param = { + // lineNodeID: e.startpoint + lineNodeID: e.startpointnumber + } + const res = await mapApi.findFlowDirection(param) + this.lxTableDataResult = res.data + const linkPipe = [] + res.data.forEach((itm, idx) => { + const geom = JSON.parse(itm.geomText) + const points = [] + geom.coordinates.forEach((it, id) => { + points.push(it.reverse()) + }) + linkPipe.push(points) + }) - // 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) + 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) + }) }, - // 娴佸悜-绠$嚎閫夋嫨 + // 娓呴櫎娴佸悜 + clearLX () { + if (this.flowPipeLine != null) { + this.flowPipeLine.remove() + this.flowPipeLine = null + } + }, + // 娴佸悜-绠℃閫夋嫨 selectRowLiuXiang (e) { // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾� - console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�') - console.log(e) + // console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�') + // console.log(e) }, lxHandleClick (e) { - console.log('姝f祦鍚戞樉绀�') - console.log(e) - - this.clearLX() + // console.log('姝f祦鍚戞樉绀�') + // console.log(e) + // + // // 娓呴櫎娴佸悜鏂规硶 + // this.clearLX() // const param = { // points: e.data, // option: { @@ -809,9 +532,10 @@ // dashSpeed: -30 // } // } - // this.flowPipeLine = main.createFlowLine(param) + // this.flowPipeLine = this.createFlowLine(param) }, + // 娓呮鍒嗘瀽缁撴灉 clearLinkPipe () { if (this.linkPipeline.length > 0) { this.linkPipeline.forEach((itm, idx) => { @@ -820,13 +544,14 @@ } this.linkPipeline = [] }, + // 閫嗘祦鍚戞樉绀� 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: { @@ -834,12 +559,22 @@ // dashSpeed: 30 // } // } - // this.flowPipeLine = main.createFlowLine(param) + // this.flowPipeLine = this.createFlowLine(param) + }, + // 妯柇闈㈢粯鍒剁嚎娈� + drawLine () { + // console.log('drawLine') + if (this.measure === null) { + this.measure = new DrawLine(window.map) + } + this.measure.destory() + this.measure.init() }, // 妯柇闈㈡暟鎹姹� async getHdmPoint (line) { - console.log('妯柇闈㈢殑缁樺埗绾�') - console.table(line) + // console.log('妯柇闈㈢殑缁樺埗绾�') + // console.table(line) + // 妯柇闈㈡暟鎹� this.hdmParam = { x1: line[0].lng, y1: line[0].lat, @@ -847,46 +582,147 @@ 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) + this.tableData = [] + if (this.hdmParam == null) { + this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�') + return false + } + // 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋� + const res = await mapApi.getCrossSection(this.hdmParam) + console.log(res) + const dataPoint = res.data.point + // 瀛樺偍闂磋窛list + const spacingList = res.data.pointInterval.reverse() + // console.log(spacingList) + for (let i = 0; i < dataPoint.length; i++) { + const obj = { + mediumtype: dataPoint[i].pipelines.extraData.mediumtype, + x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4), + y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4), + z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4), + spacing: spacingList[i - 1] + } + this.tableData.push(obj) + } + // spacingList.reverse() + // console.log(spacingList) + // console.log(this.tableData) + this.dealWithData(res) }, + dealWithData (e) { + const dataSeries = e.data.point + let tempData + const storeData = [] + const dataList = [] + this.echartsList = [] + for (let i = 0; i < dataSeries.length; i++) { + if (storeData.length === 0) { + storeData.push(name) + tempData = { + name: dataSeries[i].pipelines.oilPipeID, + data: e.data.pointInterval, + type: 'line' + } + this.echartsList.push(tempData) + } + dataList.push(dataSeries[i].pipelines.oilPipeID) + } + // console.log(dataList) + // const seriesList = e.data.pointInterval + // let seriesdata + // for (let i = 0; i < seriesList.length; i++) { + // console.log(seriesList[i]) + // } + // x鏁版嵁澶勭悊 + this.selectRow(dataList) + }, + // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず + selectRow (dataList) { + // console.log(dataList) + // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛� + this.option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + // legend: { + // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸'] + // data: dataList + // }, + toolbox: { + show: false, + feature: { + saveAsImage: {} + } + }, + grid: { + left: '10px', + right: '0', + top: '10px', + bottom: '5px', + containLabel: true + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + axisLabel: { + // formatter: '{value}', + textStyle: { + color: '#fff' + } + } + // data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'] + // data: dataList + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + // formatter: '{value}', + textStyle: { + color: '#fff' + } + } + } + ], + // series: [ + // { + // name: '鎼滅储寮曟搸', + // type: 'line', + // stack: '鎬婚噺', + // label: { + // show: true, + // position: 'top' + // }, + // areaStyle: {}, + // emphasis: { + // focus: 'series' + // }, + // data: [820, 932, 901, 934, 1290, 1330, 1320] + // } + // ] + series: this.echartsList + } + this.myChartShow = true + this.myChart.clear() + this.myChart.setOption(this.option) + }, + // 妯柇闈㈡竻闄� jdmClear () { this.hdmParam = null + this.tableData = [] + this.option = [] + this.myChartShow = false + this.myChart.clear() if (this.measure != null) { this.measure.destory() } @@ -896,59 +732,105 @@ </script> <style lang="less" scoped> -/deep/ .el-tabs__header { - background: none !important; -} + /deep/ .el-tabs .el-tabs__item { + height: 20px; + line-height: 20px; + } -/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) { - padding-left: 20px; -} + /deep/ .el-tabs--border-card > .el-tabs__content { + padding: 5px; + } -/deep/ .el-tabs--border-card { - background: none; - border: none; - box-shadow: none; -} + /deep/ .el-table .has-gutter tr th { + border: none !important; + } -/deep/ .el-tabs--border-card > .el-tabs__header { - background: none; - border-bottom: none; - margin: 0; -} + /deep/ .el-table tbody tr:hover > td { + background: none !important + } -/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { - color: #409EFF; - background: none; - border: none; -} + /deep/ .el-tabs__header { + background: none !important; + } -/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item { - border: none; -} + /deep/ .fixed-style { + /*margin: 15px;*/ + font-size: 12px; + display: inline-block; + color: #00fff6; + } -/deep/ .panel-right ::-webkit-scrollbar-thumb { - background: none; - border: none; -} + /deep/ th.is-leaf { + border: none !important; + } -/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-table__fixed-right::before, .el-table__fixed::before { + background: none; + } -/deep/ .el-card__body { - padding: 0; -} + /deep/ .el-table__empty-text { + line-height: 170px; + } -/deep/ .clearfixs { - display: inline-block; - color: #ffffff; - margin: 15px; -} + /deep/ .el-table__body .el-table__row.hover-row td { + background: none !important; + color: yellow; + } -/deep/ .fixed-table { - background: rgba(0, 16, 30, 1) !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-tab-pane { + min-height: 506.19px; + } + + /*/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