From 6d45b149ba4164dd87152180ff8e4c365484a5b3 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期三, 19 五月 2021 18:07:11 +0800 Subject: [PATCH] 企业应急修改 --- src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 900 ++++++++++++++++++++++------------------------------------- 1 files changed, 332 insertions(+), 568 deletions(-) diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index f19e7c4..0032468 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -1,420 +1,54 @@ <template> - <div class="sewers-analysis-tab"> - <!--<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="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 - class="tableBox" - :data="tableDataLinkStart" - max-height="100" - @row-click="linkSelectStart" - style="width: 100%" size="mini"> - <el-table-column - prop="datasource" - label="绠$嚎绫诲瀷" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="绠$嚎鍚嶇О" - > - </el-table-column> - <el-table-column - sortable - width="100" - prop="material" - label="璧风偣缂栧彿" - > - </el-table-column> - <el-table-column - sortable - width="100" - prop="material" - label="缁堢偣缂栧彿" - > - </el-table-column> - <el-table-column - class-name="fixed-table" - 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="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="datasource" - label="绠$嚎绫诲瀷" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="绠$嚎鍚嶇О" - > - </el-table-column> - <el-table-column - sortable - width="100" - prop="material" - label="璧风偣缂栧彿" - > - </el-table-column> - <el-table-column - sortable - width="100" - prop="material" - label="缁堢偣缂栧彿" - > - </el-table-column> - <el-table-column - class-name="fixed-table" - - 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="fixed-style">鍒嗘瀽缁撴灉:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span> - <el-table - class="tableBox" - highlight-current-row - max-height="200" - :data="tableDataLinkResult" - @row-click="linkResultSelect" - style="width: 100%" size="mini"> - - <el-table-column - prop="material" - label="绠$嚎绫诲瀷" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="绠$嚎鍚嶇О" - > - </el-table-column> - <el-table-column - sortable - width="100" - prop="material" - label="璧风偣缂栧彿" - > - </el-table-column> - <el-table-column - sortable - width="100" - prop="material" - label="缁堢偣缂栧彿" - > - </el-table-column> - <el-table-column - class-name="fixed-table" - - 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="鐖嗙" style=";color: #cccccc" name="second"> - <el-row> - <span>鐖嗙锛堢浉鍏冲紑鍏筹級</span> - <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-row> - <!-- <el-card shadow="hover">--> - <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 - :show-overflow-tooltip="true" - prop="pipecode" - label="绠$嚎绫诲瀷" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="绠$嚎鍚嶇О" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="璧风偣缂栧彿" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="缁堢偣缂栧彿" - > - </el-table-column> - <el-table-column - class-name="fixed-table" - - 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="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="绠$嚎鍚嶇О" - > - </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" - label="缁堢偣缂栧彿" - > - </el-table-column> - - <el-table-column - class-name="fixed-table" - - 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 - max-height="200" - class="tableBox" - :data="tableDataLiuxiang" size="mini"> - <el-table-column - :show-overflow-tooltip="true" - prop="pipecode" - label="绠$嚎绫诲瀷" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="绠$嚎鍚嶇О" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="璧风偣缂栧彿" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="缁堢偣缂栧彿" - > - </el-table-column> - <el-table-column - class-name="fixed-table" - 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 class="fixed-style">鍒嗘瀽缁撴灉</span> - <el-table - class="tableBox" - highlight-current-row - max-height="200" - :data="lxTableDataResult" - @row-click="lxResultSelect" - style="width: 100%" size="mini"> - - <el-table-column - :show-overflow-tooltip="true" - prop="pipecode" - label="绠$嚎绫诲瀷" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - width="100" - sortable - prop="pipecode" - label="绠$嚎鍚嶇О" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="璧风偣缂栧彿" - > - </el-table-column> - <el-table-column - :show-overflow-tooltip="true" - sortable - width="100" - prop="pipecode" - label="缁堢偣缂栧彿" - > - </el-table-column> - <el-table-column - class-name="fixed-table" - 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="fixed-style"> - <span>绠$嚎鏌ヨ缁撴灉</span> - </div> - <el-table - class="tableBox" - :data="tableData" - max-height="200" - style="width: 100%" @row-click="selectRow" size="mini"> - <el-table-column - prop="pipename" - label="绠$嚎鍚嶇О" - width="180"> - </el-table-column> - <el-table-column - prop="mediumtype" - label="绠$嚎绫诲瀷" - width="180"> - </el-table-column> - <el-table-column - class-name="fixed-table" - - 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="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> - </el-tab-pane> - </el-tabs> - <!--</el-card>--> - <!--</transition>--> - </div> + <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="鐖嗙" 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"> + <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="pipename" 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> + <!-- </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> + </div> </template> <script> @@ -422,9 +56,18 @@ 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' export default { name: 'SewersAnalysis', + components: { + Connectivity, + Tube, + Flow + }, data () { return { // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈� @@ -433,7 +76,10 @@ map: window.map, myChart: null, + options: [], + echartsList: [], myChartShow: false, + flowPipeLine: null, // 鐢ㄤ簬鍒ゆ柇 @@ -471,8 +117,9 @@ // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁 lxTableDataResult: [], - // 妯柇闈� 绠$嚎鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 + // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 tableData: [] + } }, mounted () { @@ -486,7 +133,8 @@ methods: { // tab鍒囨崲 handleClick (tab, event) { - // console.log(tab, event) + console.log(event) + // console.log(tab) this.clearLinkPipe() this.clearLX() this.linkClear() @@ -502,12 +150,15 @@ 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) @@ -517,10 +168,11 @@ const param = { x: point[0], y: point[1], - radius: 5 + radius: 3 } // 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁 const res = await mapApi.findPipelineByClickPoint(param) + console.log(res) if (this.activeName === 'first') { if (this.linkType === 1) { this.tableDataLinkStart = res.data @@ -533,8 +185,6 @@ this.tableDataLiuxiang = res.data } else if (this.activeName === 'fourth') { } - // debugger - console.log(res.data) }, // 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝 createFlowLine (param) { @@ -561,15 +211,13 @@ // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃e linkClickStart (e) { - console.log(e) - console.log('鍦板浘鐐瑰嚮璧峰绠℃') + // console.log('鍦板浘鐐瑰嚮璧峰绠℃') this.linkType = 1 this.selectPipeLine() }, // 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� linkSelectStart (e) { - console.log('閫夋嫨璧峰绠℃') - // this.$refs.singleTable.setCurrentRow(e) + // console.log(e) this.currentSelectStart = e if (this.currentSelectStartLine != null) { this.currentSelectStartLine.remove() @@ -578,20 +226,23 @@ 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() }, // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� linkSelectEnd (e) { - console.log('閫夋嫨缁撴潫绠℃') + // console.log('閫夋嫨缁撴潫绠℃') this.currentSelectEnd = e // 鍋氬垽鏂璻emove @@ -603,14 +254,17 @@ 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.7)' + } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) }, - // 杩為�氭�ф煡璇� + // 杩為�氭�ф煡璇� 缁撴灉 async linkQuery () { - // 姣忔鏌ヨ鍒嗘瀽缁撴灉涓虹┖ + // 姣忔鏌ヨ鍒嗘瀽缁撴灉鍒剁┖ this.tableDataLinkResult = [] if (this.linkPipeline.length > 1) { this.linkPipeline.forEach((itm) => { @@ -632,10 +286,11 @@ console.log(param) // 璇锋眰鎺ュ彛鍜屾暟鎹� const res = await mapApi.findConnectedPipelines(param) - console.log(res) + // console.log(res) // 鍒ゆ柇鏁版嵁缁撴灉 === 0 鍒欐病鏈夎姹傚埌鏁版嵁 if (res.data.length === 0) { this.$message('娌℃湁鎵惧埌杩為�氱殑绠℃') + // 杩涜鍒ゆ柇 this.currentLinkIsTrue = '涓嶈繛閫�' return } @@ -665,11 +320,10 @@ this.linkPipeline.push(line) }) }, - // 杩為�氭�� 鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁閫夋嫨鐐瑰嚮浜嬩欢 + // 瀹氫綅鏂规硶浜嬩欢 linkResultSelect (e) { - console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') + // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�') console.log(e) - const geom = JSON.parse(e.geomText) if (this.currentSelectResultLine != null) { this.currentSelectResultLine.remove() @@ -679,7 +333,7 @@ style: function (feature) { return { color: 'rgba(255,0,0,.6)', - weight: 6 + weight: 10 } } }).addTo(window.map) @@ -710,8 +364,8 @@ this.selectPipeLine() }, async bgSelect (e) { - console.log('閫夋嫨鐖嗙绠℃') - console.log(e) + // console.log('閫夋嫨鐖嗙绠℃') + // console.log(e) this.bgFm = [] if (this.bgMarker != null) { this.bgMarker.remove() @@ -727,7 +381,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()) @@ -737,7 +394,7 @@ lineID: e.pipesegcode } const res = await mapApi.findLeakages(param) - console.log(res) + // console.log(res) const len = res.data.length if (len === 0) { @@ -746,18 +403,17 @@ } res.data.reverse() this.bgFm = res.data - console.log(res.data) + // console.log(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 = this.createFlowMarker(p) - this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) - this.bgMarker.addTo(window.map) - window.map.flyTo(p) + // 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) => { @@ -783,12 +439,14 @@ }) }, 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) - window.map.flyTo(point, 16) + // 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鍒楄〃鏁版嵁鐐瑰嚮 @@ -803,7 +461,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()) @@ -841,10 +502,6 @@ this.linkPipeline.push(line) }) }, - // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀� 鐨勬暟鎹鐞嗘柟娉� - // getres (res) { - // - // }, // 娓呴櫎娴佸悜 clearLX () { if (this.flowPipeLine != null) { @@ -852,7 +509,7 @@ this.flowPipeLine = null } }, - // 娴佸悜-绠$嚎閫夋嫨 + // 娴佸悜-绠℃閫夋嫨 selectRowLiuXiang (e) { // 閫夋嫨瑕佹樉绀虹殑娴佸悜绾� // console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�') @@ -923,6 +580,7 @@ }, // 妯柇闈㈡暟鎹姹� async jdmQuery () { + this.tableData = [] if (this.hdmParam == null) { this.$message('璇峰厛鍦ㄥ湴鍥句笂缁樺埗鎴柇绾�') return false @@ -930,43 +588,148 @@ // 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋� 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 + // let obj = {} + const dataSpacing = res.data.pointInterval + console.log(dataSpacing) + // for (let i = 0; i < dataSpacing.length; i++) { + // obj.push({ + // spacing: dataSpacing[i] + // }) + // console.log(obj) + // } + // const dataPoint = res.data.point + // const dataPointjj = res.data.pointInterval + // for (let i = 0; i < dataPoint.length; i++) { + // obj = { + // pipename: dataPoint[i].pipelines.extraData.pipename, + // x: dataPoint[i].crossPoint3D.x, + // y: dataPoint[i].crossPoint3D.y, + // z: dataPoint[i].crossPoint3D.z + // } + // this.tableData.push(obj) + // } + // for (let i = 0; i < dataPointjj.length; i++) { + // obj = { + // pointInterval: dataPointjj[i] + // } + // this.tableData.push(obj) + // console.log(obj) + // } + // 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) } - this.tableData.push(obj) + 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) }, // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず - async selectRow (e) { - console.log(e) - // option 鏁版嵁澶勭悊 const dataSeries = e.data.pointInterval + selectRow (dataList) { + // console.log(dataList) // 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛� - const option = { - xAxis: { - type: 'category', - // data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7'] - data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7'] + this.option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } }, - yAxis: { - type: 'value' + // legend: { + // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸'] + // data: dataList + // }, + toolbox: { + show: false, + feature: { + saveAsImage: {} + } }, - series: [{ - data: [820, 932, 901, 934, 1290, 1330, 1320], - // data: dataSeries, - type: 'line' - }] + 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.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() } @@ -976,104 +739,105 @@ </script> <style lang="less" scoped> -/*****婊氬姩鏉�***/ -/deep/ .tableBox { - .el-table__fixed-right-patch { - display: none; - } -} + /deep/ .el-tabs .el-tabs__item { + height: 20px; + line-height: 20px; + } -/deep/ .tableBox::-webkit-scrollbar { - /*婊氬姩鏉℃暣浣撴牱寮�*/ - width: 10px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉$殑灏哄*/ - height: 10px; -} + /deep/ .el-tabs--border-card > .el-tabs__content { + padding: 5px; + } -/deep/ .tableBox::-webkit-scrollbar-thumb { - /*婊氬姩鏉¢噷闈㈠皬鏂瑰潡*/ - border-radius: 10px; - background: #000; -} + /deep/ .el-table .has-gutter tr th { + border: none !important; + } -/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 tbody tr:hover > td { + background: none !important + } -/deep/ .el-table .has-gutter tr th { - border: none !important; -} + /deep/ .el-tabs__header { + background: none !important; + } -/deep/ .el-table tbody tr:hover > td { - background: none !important -} + /deep/ .fixed-style { + /*margin: 15px;*/ + font-size: 12px; + display: inline-block; + color: #00fff6; + } -/deep/ .el-tabs__header { - background: none !important; -} + /deep/ th.is-leaf { + border: none !important; + } -/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) { - padding-left: 20px; -} + /deep/ .el-table__fixed-right::before, .el-table__fixed::before { + background: none; + } -/deep/ .el-tabs--border-card { - background: none; - border: none; - box-shadow: none; -} + /deep/ .el-table__empty-text { + line-height: 170px; + } -/deep/ .el-tabs--border-card > .el-tabs__header { - background: none; - border-bottom: none; - margin: 0; -} + /deep/ .el-table__body .el-table__row.hover-row td { + background: none !important; + color: yellow; + } -/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { - color: #409EFF; - background: none; - border: none; -} + /deep/ .el-table__body tr.current-row > td { + background: rgba(0, 16, 30, 1) !important; + } -/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item { - border: none; -} + /deep/ .fixed-table { + background: rgba(0, 16, 30, 1) !important; + } -/deep/ .panel-right ::-webkit-scrollbar-thumb { - background: none; - border: none; -} + /*scroll鍙充晶鍗犱綅*/ + /deep/ .el-table__fixed-right-patch { + display: 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-tab-pane { + min-height: 506.19px; + } -/deep/ .el-card__body { - padding: 0; -} + /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/ + /* padding-left: 20px;*/ + /*}*/ -/deep/ .fixed-style { - font-size: 12px; - display: inline-block; - color: #ffffff; - margin: 15px; -} + /*/deep/ .el-tabs--border-card {*/ + /* background: none;*/ + /* border: none;*/ + /* box-shadow: none;*/ + /*}*/ -/deep/ th.is-leaf { - border: none !important; -} + /*/deep/ .el-tabs--border-card > .el-tabs__header {*/ + /* background: none;*/ + /* border-bottom: none;*/ + /* margin: 0;*/ + /*}*/ -/deep/ .el-table__fixed-right::before, .el-table__fixed::before { - background: none; -} + /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {*/ + /* color: #409EFF;*/ + /* background: none;*/ + /* border: none;*/ + /*}*/ -/deep/ .fixed-table { - //background: rgba(0, 16, 30, 0.9) !important; -} + /*/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