From ec4d5c1827487f4c901b69bd9eae58e111e82b32 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期四, 20 五月 2021 18:05:25 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue | 147 +++--- src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue | 11 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue | 4 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue | 76 -- src/views/MapTemplate.vue | 8 src/components/panel/topicSearch/SewersSearch.vue | 9 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 698 ------------------------------- src/components/emergency/index.vue | 265 ++++++++--- src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue | 11 src/components/plugin/DrawLine.js | 55 ++ 10 files changed, 373 insertions(+), 911 deletions(-) diff --git a/src/components/emergency/index.vue b/src/components/emergency/index.vue index 26867ae..c6fc1bf 100644 --- a/src/components/emergency/index.vue +++ b/src/components/emergency/index.vue @@ -1,6 +1,6 @@ <template> <div class="emergency"> - <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag > + <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag> <!-- 鍩虹淇℃伅 --> <div class="basicInformation" v-if="CZFX"> <div> @@ -33,15 +33,16 @@ <el-button type="primary" class="el-icon-location" size="mini"></el-button> <el-button type="primary" class="el-icon-location" size="mini"></el-button> <el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini"> - <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> + <el-option v-for="item in options" :key="item.value" :label="item.label" + :value="item.value"></el-option> </el-select> <el-button type="primary" class="el-icon-search" size="mini"></el-button> </div> <div> <div class="analysis-btn"> <div> - <el-button type="primary" size="mini" >閲嶇疆鍒嗘瀽鏉′欢</el-button> - <el-button type="primary" size="mini" @click="CZFX=!CZFX" >寮�濮嬪垎鏋�</el-button> + <el-button type="primary" size="mini">閲嶇疆鍒嗘瀽鏉′欢</el-button> + <el-button type="primary" size="mini" @click="CZFX=!CZFX">寮�濮嬪垎鏋�</el-button> </div> </div> </div> @@ -96,19 +97,28 @@ <el-button type="primary" class="el-icon-location" size="mini"></el-button> <el-button type="primary" class="el-icon-location" size="mini"></el-button> <el-select v-model="value" filterable placeholder="璇烽�夋嫨" size="mini"> - <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> + <el-option v-for="item in options" :key="item.value" :label="item.label" + :value="item.value"></el-option> </el-select> <el-button type="primary" class="el-icon-search" size="mini"></el-button> - <el-input placeholder="瀹℃壒浜�" size="mini" style="width: 60px"></el-input> + <el-input placeholder="瀹℃壒浜�" size="mini" style="width: 60px"></el-input> <el-button type="primary" size="mini">鏌ヨ</el-button> </div> </div> <div class="content"> <ul> - <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li> - <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li> - <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li> - <li><el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button></li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> + <li> + <el-button type="primary" size="mini">搴旀�ュ熀纭�</el-button> + </li> </ul> <el-table :data="tableData2" style="width: 80%"> <el-table-column prop="date" label="鏃ユ湡" width="180"></el-table-column> @@ -126,20 +136,55 @@ </el-dialog> <el-dialog class="calculate" :visible.sync="showCalculate" title="浜嬫晠姘存湁鏁堝绉绠�" :modal="false" v-dialogDrag> <ul> - <li>浜嬫晠姘存祦閲忥細<el-input size="mini" style="width: 60px"></el-input>m3/h</li> - <li>浜嬫晠鏃堕棿锛�<el-input size="mini" style="width: 60px"></el-input>h</li> - <li>浜嬫晠鐗╂枡閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li> - <li>杞瓨閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li> - <li>娑堥槻姘存祦閲忥細<el-input size="mini" style="width: 60px"></el-input>h</li> - <li>娑堥槻鏃堕棿锛�<el-input size="mini" style="width: 60px"></el-input>h</li> - <li>闄嶉洦閲忥細<el-input size="mini" style="width: 60px"></el-input>mm</li> - <li>姹囨按闈㈢Н锛�<el-input size="mini" style="width: 60px"></el-input>m2</li> - <li>鐢熶骇搴熸按閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li> - <li>鏀堕泦姹犱綑閲忥細<el-input size="mini" style="width: 60px"></el-input>m3</li> + <li>浜嬫晠姘存祦閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3/h + </li> + <li>浜嬫晠鏃堕棿锛� + <el-input size="mini" style="width: 60px"></el-input> + h + </li> + <li>浜嬫晠鐗╂枡閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>杞瓨閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>娑堥槻姘存祦閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + h + </li> + <li>娑堥槻鏃堕棿锛� + <el-input size="mini" style="width: 60px"></el-input> + h + </li> + <li>闄嶉洦閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + mm + </li> + <li>姹囨按闈㈢Н锛� + <el-input size="mini" style="width: 60px"></el-input> + m2 + </li> + <li>鐢熶骇搴熸按閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>鏀堕泦姹犱綑閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> </ul> <ul> - <li>浜嬫晠姘村绉細<el-input size="mini" style="width: 60px"></el-input>m3</li> - <li>鏄惁澶т簬鏀堕泦姹犱綑閲忥細<el-input size="mini" style="width: 60px"></el-input></li> + <li>浜嬫晠姘村绉細 + <el-input size="mini" style="width: 60px"></el-input> + m3 + </li> + <li>鏄惁澶т簬鏀堕泦姹犱綑閲忥細 + <el-input size="mini" style="width: 60px"></el-input> + </li> </ul> <div class="footer"> <el-button type="primary" size="mini">璁$畻</el-button> @@ -151,7 +196,9 @@ </template> <script> +import eventBus from '../../eventBus' const cityOptions = ['涓婃捣', '鍖椾含', '骞垮窞', '娣卞湷'] + export default { name: 'index', data () { @@ -159,18 +206,58 @@ tit: '浜嬩欢澶勭疆', showSchedule: false, tableData: [ - { name: '棰勬A', define: '缁煎悎棰勬', hierarchy: '浜岀骇鍗曚綅', classification: '鐜繚' }, - { name: '棰勬B', define: '涓撻」棰勬', hierarchy: '鐩村睘浼佷笟', classification: '鐜繚' }, - { name: '棰勬C', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' }, - { name: '棰勬D', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' }, - { name: '棰勬E', define: '鐜板満澶勭疆棰勬', hierarchy: '鍩哄眰鍗曚綅', classification: '鐢熶骇' } + { + name: '棰勬A', + define: '缁煎悎棰勬', + hierarchy: '浜岀骇鍗曚綅', + classification: '鐜繚' + }, + { + name: '棰勬B', + define: '涓撻」棰勬', + hierarchy: '鐩村睘浼佷笟', + classification: '鐜繚' + }, + { + name: '棰勬C', + define: '鐜板満澶勭疆棰勬', + hierarchy: '鍩哄眰鍗曚綅', + classification: '鐢熶骇' + }, + { + name: '棰勬D', + define: '鐜板満澶勭疆棰勬', + hierarchy: '鍩哄眰鍗曚綅', + classification: '鐢熶骇' + }, + { + name: '棰勬E', + define: '鐜板満澶勭疆棰勬', + hierarchy: '鍩哄眰鍗曚綅', + classification: '鐢熶骇' + } ], checkAll: false, checkedCities: ['涓婃捣', '鍖椾含'], cities: cityOptions, isIndeterminate: true, value: '', - options: [{ value: '500', label: '500m' }, { value: '1000', label: '1km' }, { value: '2000', label: '2km' }, { value: '5000', label: '5km' }, { value: '10000', label: '10km' }], + options: [{ + value: '500', + label: '500m' + }, { + value: '1000', + label: '1km' + }, { + value: '2000', + label: '2km' + }, { + value: '5000', + label: '5km' + }, { + value: '10000', + label: '10km' + }], isShowFenXi: false, CZFX: true, tableData2: [{ @@ -193,78 +280,96 @@ showCalculate: false } }, - methods: { - - }, + methods: {}, mounted () { - + eventBus.$on('events-reported', (obj) => { + console.log(obj) + this.showSchedule = obj + }) } } </script> <style scoped lang="less"> -.emergency{ - /deep/ .el-dialog{ - width: 450px; - } - .panel-title{ - text-align: left; - padding: 5px 0 0 0; - } - .basicInformation{ - .area-selected{ - display: flex; - justify-content:flex-end; - align-items : center; + .emergency { + /deep/ .el-dialog { + width: 450px; } - .analysis-btn{ - display: flex; - justify-content:space-between; - align-items : center; + + .panel-title { + text-align: left; + padding: 5px 0 0 0; } - } - .fenXiChuZhi{ - display: flex; - flex-wrap: wrap; - >div{width: 50%} - .filteringInformation{ - width: 100%; - .header{ + + .basicInformation { + .area-selected { + display: flex; + justify-content: flex-end; + align-items: center; + } + + .analysis-btn { display: flex; justify-content: space-between; - ul{ + align-items: center; + } + } + + .fenXiChuZhi { + display: flex; + flex-wrap: wrap; + + > div { + width: 50% + } + + .filteringInformation { + width: 100%; + + .header { display: flex; - li{ - span{ - display: block; + justify-content: space-between; + + ul { + display: flex; + + li { + span { + display: block; + } } } } - } - .content{ - display: flex; + + .content { + display: flex; + } } } - } - .footer{ - display: flex; - justify-content:flex-end - } - .calculate{ - ul{ + + .footer { display: flex; - flex-wrap: wrap; - li{ - width: 50%; + justify-content: flex-end + } + + .calculate { + ul { + display: flex; + flex-wrap: wrap; + + li { + width: 50%; + } + } + + /deep/ .el-dialog { + left: 810px; } } - /deep/ .el-dialog{ - left: 810px; - } } -} - .emergency .widt800{ - /deep/ .el-dialog{ + + .emergency .widt800 { + /deep/ .el-dialog { width: 800px; } } diff --git a/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue b/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue index 48f1e13..bdbd49e 100644 --- a/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue +++ b/src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue @@ -1,14 +1,15 @@ <template> - <div class="public-bounced-content"> - <!-- <el-dialog--> - <!-- custom-class="public-bounced-content_dialog"--> - <!-- title="涓婃姤浜嬩欢"--> - <!-- :visible.sync="dialogVisible"--> - <!-- :append-to-body="true"--> - <!-- :modal="false"--> - <!-- v-dialogDragBottom--> - <!-- >--> - <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form"> +<!-- <el-dialog--> +<!-- custom-class="events-reported"--> +<!-- title="涓婃姤浜嬩欢"--> +<!-- :visible.sync="eventsReported"--> +<!-- :append-to-body="true"--> +<!-- :modal="false"--> +<!-- v-dialogDrag--> +<!-- >--> +<!-- </el-dialog>--> + <div> + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="search-form"> <!-- 浜嬩欢鍚嶇О--> <el-form-item class="input-event-name" label="浜嬩欢鍚嶇О" prop="nameOfEvent"> <el-input v-model="ruleForm.nameOfEvent" placeholder="灏嗕簨浠跺懡鍚�"></el-input> @@ -84,7 +85,7 @@ </el-col> </el-row> <!-- 鐐瑰嚮涓婁紶--> - <el-form-item> + <el-form-item label="闄勪欢涓婁紶" prop="upload"> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" @@ -100,7 +101,7 @@ </el-form-item> <!-- 娑堟伅鎺ㄩ��--> <el-form-item label="娑堟伅鎺ㄩ��" prop="beingPush"> - <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange()"> + <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange"> <el-checkbox v-for="item in ruleForm.beingPushList" :key="item.name" :label="item.name" @@ -110,13 +111,17 @@ </el-form-item> <div v-show="wayTo"> <el-form-item label="浜嬩欢鎻忚堪" prop="desc"> - <el-input type="textarea" v-model="ruleForm.desc"></el-input> + <el-input type="textarea" resize="none" v-model="ruleForm.desc" + placeholder="甯﹀嚭浜嬩欢绫诲瀷锛屼簨浠朵綅缃紝浜嬩欢鍗曚綅锛屼簨浠舵椂闂寸瓑瀛楁鑷姩鐢熶骇涓�閮ㄥ垎鎻忚堪"> + </el-input> + <el-button type="primary">涓�閿�<br/>鐢熸垚</el-button> </el-form-item> <el-form-item label="鎺ユ敹浜哄憳" prop="desc"> - <el-input type="textarea" v-model="ruleForm.desc"></el-input> + <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="寮犱笁锛涙潕鍥涳紝"></el-input> + <el-button type="primary">+</el-button> </el-form-item> </div> - <el-form-item> + <el-form-item class="confirmCancel"> <el-button type="primary" @click="submitForm('ruleForm')">纭</el-button> <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button> </el-form-item> @@ -126,11 +131,15 @@ <script> +import eventBus from '../../../.././eventBus' + export default { name: 'ReportPopup', data () { return { - dialogVisible: false, + // eventsReported: true, + eventsReported: false, + saveSuccess: false, // 琛ㄥ崟缁戝畾鏁版嵁 ruleForm: { // 浜嬩欢鍚嶇О 缁戝畾鏁版嵁 @@ -274,26 +283,21 @@ } }, methods: { - // 娑堟伅鎺ㄩ�� 閫夋嫨 + // 娑堟伅鎺ㄩ�� 閫夋嫨鎺ㄩ�佺殑瀵硅薄 infotsChange () { - this.wayTo = !this.wayTo - console.log(this.ruleForm.beingPushed) - // for (let i = 0; i < this.ruleForm.beingPushed.length; i++) { - // // console.log(this.ruleForm.beingPushed[i]) - // if (this.ruleForm.beingPushed[i] === '鐭俊鎺ㄩ��' || this.ruleForm.beingPushed[i] === '鎵嬫満搴旂敤鎺ㄩ��') { - // this.wayTo = true - // } else { - // this.wayTo = !this.wayTo - // } - // } - // if (this.ruleForm.beingPushed[0] === '鐭俊鎺ㄩ��') { - // console.log('鐭俊鎺ㄩ��') - // this.wayTo = true - // } + if (this.ruleForm.beingPushed.indexOf('鐭俊鎺ㄩ��') > -1 || this.ruleForm.beingPushed.indexOf('鎵嬫満搴旂敤鎺ㄩ��') > -1) { + // console.log('鍖呭惈璇ュ厓绱�') + this.wayTo = true + } else { + // console.log('涓嶅寘鍚鍏冪礌') + this.wayTo = false + } }, + // 鐐瑰嚮涓婁紶 鐨勫彇娑堜笂浼犱簨浠� handleRemove (file, fileList) { console.log(file, fileList) }, + // 鐐瑰嚮涓婁紶 鐨勪笂浼犱簨浠� handlePreview (file) { console.log(file) }, @@ -303,19 +307,30 @@ beforeRemove (file, fileList) { return this.$confirm(`纭畾绉婚櫎 ${file.name}锛焋) }, - closePopup () { - this.flags = false - }, + // 琛ㄥ崟鐨勭‘璁ゆ寜閽偣鍑讳簨浠� submitForm (formName) { - this.$refs[formName].validate((valid) => { - if (valid) { - alert('submit!') - } else { - console.log('error submit!!') - return false - } - }) + // this.$refs[formName].validate((valid) => { + // if (valid) { + // alert('submit!') + // } else { + // console.log('error submit!!') + // return false + // } + // }) + // this.eventsReported = false + // this.saveSuccess = true + + // temp涓存椂 + window.mapManager.clickDialogSwitch = false + this.eventsReported = false + eventBus.$emit('events-reported', true) }, + // 澶勭疆鍒嗘瀽 + disposalAnalysis () { + this.saveSuccess = false + eventBus.$emit('events-reported', true) + }, + // form琛ㄥ崟鐨勫彇娑堟寜閽偣鍑讳簨浠� 閲嶇疆淇℃伅 resetForm (formName) { this.$refs[formName].resetFields() } @@ -325,19 +340,17 @@ <style lang="less" scoped> - /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { - display: none; + /deep/ .el-form-item { + margin: 5px 0; } - /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after { - content: '*'; - color: #F56C6C; - margin-left: 4px; - } - /deep/ .el-checkbox__label ::after { - content: '*' !important; - color: #F56C6C !important; - margin-left: 4px !important; + /deep/ .el-textarea__inner { + width: 2rem; + color: darkgrey; + border: solid 1px #00fff6; + background-color: rgba(0, 255, 246, 0.14); + outline: none; + font-size: 0.01rem; } /deep/ .el-checkbox__label { @@ -345,32 +358,26 @@ } /deep/ input { + /*width: 145px;*/ border-radius: 0; background-color: rgba(0, 255, 246, 0.14); border: solid 1px #00fff6; color: #C0C4CC; font-size: 0.01rem; - /*padding: 0 15px;*/ } /deep/ .el-input.is-disabled .el-input__inner { - border-radius: 0; - background-color: rgba(0, 255, 246, 0.14); - border: solid 1px #00fff6; color: #C0C4CC; font-size: 0.01rem; - /*padding: 0 15px;*/ + border-radius: 4px; + background: @background-color; + border-color: @color; } - /deep/ .input-event-name { - margin: 15px 0; - width: 75%; - - .el-input__inner { - width: 100%; - border-radius: 5px; - background: rgba(0, 16, 30, 0.5); - } + /deep/ .el-input__inner { + /*width: 145px;*/ + border-radius: 5px; + background: rgba(0, 16, 30, 0.5); } /deep/ .el-form-item__label { @@ -380,4 +387,10 @@ /deep/ .el-radio__label { color: @color; } + + .confirmCancel { + text-align: right; + /*display: flex;*/ + /*justify-content: flex-end;*/ + } </style> diff --git a/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue b/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue index ccff3b1..8db99ba 100644 --- a/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue +++ b/src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue @@ -74,8 +74,8 @@ dataType: '', keyword: '', eventNameList: [ - { name: '閲戦櫟鐭冲寲' }, - { name: '鍗椾含鍖栧' } + { name: '鎵瓙鐭冲寲' }, + { name: '浠緛鍖栫氦' } ] }, // 鎼滅储鍒扮殑鏁版嵁缁戝畾鐨刟ctive鐨勬牱寮� @@ -129,19 +129,18 @@ async handleSearch () { this.list = [] this.wfsHelper.clearFilter() - // todo 鐜板湪浼佷笟搴旀�ヨ繕娌″尯鍒嗗紑绫诲瀷锛屽悗闈㈡敼 - // console.log(this.form.dataType) - // this.wfsHelper.setTypeName([this.form.dataType.typeName]) this.wfsHelper.setTypeName(['sewer:emergency']) this.wfsHelper.setMaxFeatures(100) if (this.form.dataType) { + this.wfsHelper.addEquals('orgname', '\'' + this.form.eventName + '\'') this.wfsHelper.addEquals('type', '\'' + this.form.dataType.name + '\'') } if (this.form.keyword) { + this.wfsHelper.setFilter(this.form.keyword) this.wfsHelper.addLike('name', this.form.keyword) } const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) - console.log(res) + // console.log(res) if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { this.list = res.features } diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue index ce3356e..1948348 100644 --- a/src/components/panel/topicSearch/SewersSearch.vue +++ b/src/components/panel/topicSearch/SewersSearch.vue @@ -177,11 +177,12 @@ this.wfsHelper.setTypeName([this.form.dataType.typeName]) if (this.form.keyword) { this.wfsHelper.addLike('name', this.form.keyword) + this.wfsHelper.setFilter(this.form.keyword) } - const filter = this.form.dataType.filter - if (filter) { - this.wfsHelper.setFilter(filter) - } + // const filter = this.form.dataType.filter + // if (filter) { + // this.wfsHelper.setFilter(filter) + // } // const _this = this const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {}) if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) { diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue index 3d4167b..feb70b0 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue @@ -56,10 +56,12 @@ <script> import mapApi from '../../../../../api/mapApi' +import eventBus from '../../../../../eventBus' import { createFlowLine } from './PublicWay' export default { name: 'Connectivity', + props: ['tableData'], data () { return { // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ @@ -81,6 +83,15 @@ flowPipeLine: null } }, + mounted () { + this.$nextTick(() => { + eventBus.$on('tabData-change', (obj) => { + if (obj) { + this.handleClick() + } + }) + }) + }, methods: { // 鍦板浘涓婄偣鍑� selectPipeLine () { diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue index e8d3034..918f08e 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue @@ -8,8 +8,7 @@ <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 class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row style="width: 100%" 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> @@ -17,17 +16,15 @@ <el-table-column prop="spacing" label="闂磋窛(m)" width="80"></el-table-column> </el-table> <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> + <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> </div> </template> <script> import eventBus from '../../../../../eventBus' import mapApi from '../../../../../api/mapApi' -import DrawLine from './DrawLine' +import DrawLine from '../../../../plugin/DrawLine' export default { name: 'CrossSectional', @@ -53,7 +50,7 @@ }) }, methods: { - // 妯柇闈㈢粯鍒剁嚎娈� + // 妯柇闈� 绾挎缁樺埗 drawLine () { if (this.measure === null) { this.measure = new DrawLine(window.map) @@ -61,7 +58,7 @@ this.measure.destory() this.measure.init() }, - // 妯柇闈㈡暟鎹姹� + // 缁樺埗鐨勬í鏂潰 绾挎鏁版嵁鑾峰彇 async getHdmPoint (line) { // 妯柇闈㈡暟鎹� this.hdmParam = { @@ -71,7 +68,7 @@ y2: line[1].lat } }, - // 妯柇闈㈡暟鎹姹� + // 妯柇闈� 鏁版嵁璇锋眰 async jdmQuery () { this.tableData = [] if (this.hdmParam == null) { @@ -80,67 +77,26 @@ } // 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋� const res = await mapApi.getCrossSection(this.hdmParam) - console.log(res) - // let obj = {} - const dataSpacing = res.data.pointInterval - for (let i = 0; i < dataSpacing.length; i++) { - const objSpacing = { - spacing: dataSpacing[i] - } - console.log(objSpacing) - this.tableData.push(objSpacing) - } - // const dataSpacing = res.data.pointInterval - // // for (let i = 0; i < dataSpacing.length; i++) { - // // this.obj.spacing = dataSpacing[i] - // // } - // const dataPoint = res.data.point - // // const obj = {} - // for (let i = 0; i < dataPoint.length; i++) { - // this.obj.mediumtype = dataPoint[i].pipelines.extraData.mediumtype - // this.obj.x = parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4) - // this.obj.y = parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4) - // this.obj.z = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4) - // this.obj.spacing = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4) - // } + // 璋冪敤鏁版嵁澶勭悊鏂规硶 + this.dealWithData(res) + // table鏁版嵁澶勭悊 const dataPoint = res.data.point + // 瀛樺偍闂磋窛list + const spacingList = res.data.pointInterval.reverse() 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) + z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4), + spacing: spacingList[i - 1] } this.tableData.push(obj) } - 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) + console.log(e) }, // 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず selectRow (dataList) { diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue index caaf56b..5f49873 100644 --- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue +++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue @@ -75,6 +75,10 @@ this.tableDataLinkEnd = [] this.tableDataLinkResult = [] this.lxTableDataResult = [] + if (this.currentSelectEndLine != null) { + this.currentSelectEndLine.remove() + this.currentSelectEndLine = null + } }, // 鍦板浘涓婄偣鍑� selectPipeLine () { diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue index 20f74de..b163263 100644 --- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue +++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue @@ -11,721 +11,39 @@ <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> - <!-- </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" --> + <CrossSectional></CrossSectional> </el-tab-pane> </el-tabs> </div> </template> <script> - -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' +import CrossSectional from './AnalysisChoose/CrossSectional' +import eventBus from '../../../../eventBus' export default { name: 'SewersAnalysis', components: { Connectivity, Tube, - Flow - // CrossSectional + Flow, + CrossSectional }, data () { return { // 鍦板浘鐐瑰嚮绫诲瀷 first杩為�氭�х偣鍑� second鐖嗙鐐瑰嚮 third娴佸悜鐐瑰嚮 fourth妯柇闈� activeName: 'first', - measure: null, - map: window.map, - - myChart: null, - options: [], - echartsList: [], - myChartShow: false, - - flowPipeLine: null, - - // 鐢ㄤ簬鍒ゆ柇 - currentSelectStart: null, - currentSelectEnd: null, - currentSelectStartLine: null, - currentSelectEndLine: null, - currentSelectResultLine: null, - currentResultLine: null, - - linkPipeline: [], - - bgPoint: null, - bgMarker: null, - hdmParam: null, - - // 杩為�氭�� // 1 杩為�氭�ц捣濮嬬娈� 0 杩為�氭�х粨鏉熺娈� 鐢ㄦ潵鍒ゆ柇鏄偣鍑讳簡璧峰 杩樻槸缁撴潫绠℃ - linkType: 1, - // 杩為�氭�� 璧峰绠℃ 琛ㄦ牸鏁版嵁 - tableDataLinkStart: [], - // 杩為�氭�� 缁撴潫绠℃ 琛ㄦ牸鏁版嵁 - tableDataLinkEnd: [], - // 杩為�氭�� 鍒嗘瀽缁撴灉 灞曠ず => 杩為�� || 涓嶈繛閫� - currentLinkIsTrue: '', - // 杩為�氭�� 鍒嗘瀽缁撴灉 琛ㄦ牸鏁版嵁 - tableDataLinkResult: [], - - // 鐖嗙 鍙戠敓鐖嗚鐨勭娈� table琛ㄦ牸鏁版嵁 - bgPipeLine: [], - // 鐖嗙 闇�瑕佸叧闂殑闃�闂� table琛ㄦ牸鏁版嵁 - bgFm: [], - - // 娴佸悜 閫夋嫨鐨勭娈� 鐨則able琛ㄦ牸鏁版嵁 - tableDataLiuxiang: [], - // 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁 - lxTableDataResult: [], - - // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁 - tableData: [], - obj: {} - + tableData: false, + tableDataList: [] } - }, - mounted () { - // 鍒濆鍖杄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(event) - // console.log(tab) - this.clearLinkPipe() - this.clearLX() - this.linkClear() - this.jdmClear() - this.currentLinkIsTrue = '' - this.bgFm = [] - this.bgPipeLine = [] - this.tableData = [] - this.tableDataLiuxiang = [] - this.tableDataLinkStart = [] - this.tableDataLinkEnd = [] - this.tableDataLinkResult = [] - this.lxTableDataResult = [] - }, - - // 鍦板浘涓婄偣鍑� - selectPipeLine () { - window.map.on('click', this.selectClick) - // 鍏抽棴寮圭獥 - // window.mapManager.clickDialogSwitch = false - }, - // 鍦板浘涓婄偣鍑诲洖璋� - selectClick (e) { - // console.log(e) - window.map.off('click', this.selectClick) - const point = [e.latlng.lng, e.latlng.lat] - 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] - }) - }) - }, - - // 杩為�氭�� ===> 鍦板浘鐐瑰嚮璧峰绠℃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('鍦板浘鐐瑰嚮缁撴潫绠℃') - this.linkType = 0 - this.selectPipeLine() - }, - // 杩為�氭�� 缁撴潫绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠� - linkSelectEnd (e) { - // console.log('閫夋嫨缁撴潫绠℃') - this.currentSelectEnd = e - - // 鍋氬垽鏂璻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) => { - itm.remove() - }) - this.linkPipeline = [] - } - // 鍒ゆ柇 濡傛灉璧峰绠℃ 缁撴潫绠℃娌℃湁鏁版嵁 鍒欒繑鍥瀎alse 鎻愮ず杩樻湭閫夋嫨璧峰/缁撴潫绠℃ - if (this.currentSelectStart === null || this.currentSelectEnd === null) { - this.$message('璇烽�夋嫨璧峰绠℃鍜岀粨鏉熺娈�') - return false - } - - // 璇锋眰鏁版嵁鏃剁殑鍙傛暟 - const param = { - 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 = [] - 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) - }) - }, - // 瀹氫綅鏂规硶浜嬩欢 - 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() - this.currentSelectStartLine = null - } - if (this.currentSelectEndLine != null) { - this.currentSelectEndLine.remove() - this.currentSelectEndLine = null - } - if (this.currentSelectResultLine != null) { - this.currentSelectResultLine.remove() - this.currentSelectResultLine = null - } - if (this.bgMarker != null) { - this.bgMarker.remove() - this.bgMarker = null - } - }, - - // 鐖嗙 ===> 閫夋嫨绠℃ - bgClick () { - this.selectPipeLine() - }, - async bgSelect (e) { - // console.log('閫夋嫨鐖嗙绠℃') - // console.log(e) - this.bgFm = [] - if (this.bgMarker != null) { - this.bgMarker.remove() - this.bgMarker = null - } - - if (this.currentSelectEndLine != null) { - this.currentSelectEndLine.remove() - this.currentSelectEndLine = null - } - this.clearLinkPipe() - // 缁欓�夋嫨涓殑鏁版嵁娣诲姞璁剧疆鏍峰紡 - 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.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 - // 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 = 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(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) - 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) - }) - - 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) - }, - lxHandleClick (e) { - // console.log('姝f祦鍚戞樉绀�') - // console.log(e) - // - // // 娓呴櫎娴佸悜鏂规硶 - // this.clearLX() - // const param = { - // points: e.data, - // option: { - // dashArray: '15 15', - // dashSpeed: -30 - // } - // } - // this.flowPipeLine = this.createFlowLine(param) - }, - - // 娓呮鍒嗘瀽缁撴灉 - clearLinkPipe () { - if (this.linkPipeline.length > 0) { - this.linkPipeline.forEach((itm, idx) => { - itm.remove() - }) - } - this.linkPipeline = [] - }, - // 閫嗘祦鍚戞樉绀� - lxHandleClick2 (e) { - // console.log('閫嗘祦鍚戞樉绀�') - // console.log(e) - // if (this.flowPipeLine != null) { - // this.flowPipeLine.remove() - // this.flowPipeLine = null - // } - // const param = { - // points: e.data, - // option: { - // dashArray: '15 15', - // dashSpeed: 30 - // } - // } - // 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) - // 妯柇闈㈡暟鎹� - this.hdmParam = { - x1: line[0].lng, - y1: line[0].lat, - x2: line[1].lng, - y2: line[1].lat - } - }, - // 妯柇闈㈡暟鎹姹� - async jdmQuery () { - 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() - } + eventBus.$emit('tabData-change', true) } } } diff --git a/src/components/plugin/DrawLine.js b/src/components/plugin/DrawLine.js new file mode 100644 index 0000000..4466da3 --- /dev/null +++ b/src/components/plugin/DrawLine.js @@ -0,0 +1,55 @@ +import L from 'leaflet' +// import eventBus from '../../../../../eventBus' +import eventBus from '../../eventBus' + +class DrawLine { + constructor (map) { + this.points = [] + this.color = 'red' + this.layers = L.layerGroup() + this.polyline = null + this.marker = null + this.points = [] + this.polyline = null + this.marker = null + this.map = map + } + + init = () => { + this.map.on('click', this.click) + this.map.on('mousemove', this.mousemove) + this.map.on('dblclick', this.dbClick) + } + + click = (e) => { + this.map.doubleClickZoom.disable() + this.points.push(e.latlng) + if (this.points.length > 1) { + this.dbClick() + } + } + + mousemove = (e) => { + this.points.push(e.latlng) + if (this.polyline) { this.map.removeLayer(this.polyline) } + this.polyline = L.polyline(this.points, { showMeasurements: false, color: 'red' }) + this.polyline.addTo(this.layers) + this.layers.addTo(this.map) + this.points.pop() + } + + dbClick = (e) => { + this.polyline.addTo(this.layers) + this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick) + eventBus.$emit('draw-hdm-line', this.points) + } + + destory () { + if (this.polyline) { this.map.removeLayer(this.polyline) } + if (this.marker) { this.marker.remove() } + this.points = [] + this.layers.clearLayers() + } +} + +export default DrawLine diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue index a4bfcc5..234f7e0 100644 --- a/src/views/MapTemplate.vue +++ b/src/views/MapTemplate.vue @@ -17,7 +17,7 @@ <!-- <el-button type="primary" @click="ChangeWaterState" class="Waste-water">搴熸按</el-button>--> <!-- <el-button type="primary" @click="AddGasHelper" class="flue-gas">搴熸皵</el-button>--> <!-- <PublicBounced ref="PublicBounced"></PublicBounced>--> -<!-- <ReportPopup></ReportPopup>--> + <ReportPopup></ReportPopup> <Emergency ref="Emergency"></Emergency> <Message></Message> </div> @@ -39,7 +39,7 @@ // // 鍏叡灞曠ず鏁版嵁 // import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced' import LayerFactory from '@components/LayerController/service/LayerFactory' -// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup' +import ReportPopup from '../components/panel/topicSearch/EnterpriseEmergency/ReportPopup' import Emergency from '@components/emergency/index' import MapManager from '../components/helpers/MapManager' import Message from '@components/message/index' @@ -58,8 +58,8 @@ SummarySheet, // PublicBounced, Emergency, - Message - // ReportPopup + Message, + ReportPopup }, data () { return { -- Gitblit v1.8.0