From 6ace815c16170b0a7fc68bf280f63bffe96612e6 Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期三, 14 四月 2021 18:24:30 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/panel/topicSearch/SolidWasteSearch.vue | 135 +++++++++++++++++++++++++++++++++----------- 1 files changed, 100 insertions(+), 35 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index 7b78c79..d98e78a 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -1,6 +1,6 @@ <template> <div class="sewers-search" v-if="judgeVisible"> - <div class="search-title">{{title}}</div> + <div class="panel-title">{{ title }}</div> <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'锛�'" size="mini" @@ -15,27 +15,24 @@ </el-option> </el-select> </el-form-item> - <!-- <div class="search-radio"> - <el-radio v-model="radio" label="1">鍏ㄩ儴</el-radio> - <el-radio v-model="radio" label="2">姝e父</el-radio> - <el-radio v-model="radio" label="3">棰勮</el-radio> - </div> --> - <el-radio-group v-model="form.type" class="levelOfRisk"> - <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio> + <el-radio-group v-model="form.transferData" class="levelOfRisk"> + <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"> + <span class="levelOfRisk-type">{{ item.name }}</span> + </el-radio> </el-radio-group> - <div class="rightButtonSearch"> - <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> - <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> + <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> + <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> </el-form> </div> <el-scrollbar style="height:286.22px"> - <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index" ><!-- v-for="(item,index) in list" :key="index" --> + <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index" + @click="setBounced(item)"> <i class="state"></i> <div> <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> + <p>鎵�灞為儴闂細<span>{{ item.Name }}</span></p> <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> </div> </div> @@ -46,17 +43,13 @@ <script> import mapApi from '@/api/mapApi' +import publicBounced from '@/components/BaseNav/PublicBounced/PublicBounced' export default { name: 'SolidWasteSearch', props: ['title'], data () { return { - levelOfRisk: [ - { name: '鍏ㄩ儴', value: '1' }, - { name: '姝e父', value: '2' }, - { name: '棰勮', value: '3' } - ], judgeVisible: true, solidWasteTypeOptions: [{ value: '1', @@ -123,34 +116,106 @@ key: 'length' }] }], - radio: '1', form: { keyword: '鍥哄簾闈㈡澘鏁版嵁鏌ヨ', // 鏁版嵁鐨勪紶閫� - transferData: '' + transferData: 1 }, - searchDataDisplay: [] + levelOfRisk: [ + { + name: '鍏ㄩ儴', + value: 1 + }, + { + name: '姝e父', + value: 2 + }, + { + name: '棰勮', + value: 3 + } + ], + // 鏁版嵁鎼滅储涔嬪悗锛屽瓨鍌ㄦ暟鎹殑 + searchDataDisplay: [], + instance: null, + intervals: [], + layer: window.map, + L: window.L, + times: 5, + colors: ['#98FB98', '#ff0000'] } }, methods: { - handlePipelineType (val) { - // console.log(val) - this.solidWasteTypeOptions.forEach(item => { - // console.log(item.value) - if (val === item.value) { - // console.log('鏁版嵁閫夋嫨鐩稿悓') - // 鎺ユ敹鏁版嵁 鐢ㄤ簬涔嬪悗鎺ュ彛鏁版嵁鐨勮皟鐢� - // this.form.transferData = item.value - this.handleSearch(item.value) - } - }) - }, // 鐐瑰嚮鎼滅储瀹炵幇鏁版嵁鐨勬悳绱㈠睍绀� async handleSearch (data) { // console.log(this.form.keyword) - const result = await mapApi.getSolidWasteSurveyDetail(data) - // console.log(result) + const result = await mapApi.getSolidWaste(data) this.searchDataDisplay = result.Result.DataInfo + }, + // 鏁版嵁灞曠ず,鐐瑰嚮杩涜寮规鍙婄偣鐨勫睍绀� + async setBounced (val) { + const pos = [val.Latitude, val.Longitude] + window.map.flyTo(pos, 11) + const t1 = setTimeout(async () => { + const dataValue = { + StoragePlaceId: val.StoragePlaceId + } + // 寮规鏍囬 + const title = val.Name + // 鍩烘湰淇℃伅 tabs + const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) + // 璇︾粏淇℃伅灞曠ず table + const resultDetailed = await mapApi.getSolidWasteDetail(dataValue) + + // 缁戝畾寮规瀹炰緥 + this.instance && this.instance.closePopup() + const PublicBounced = window.Vue.extend(publicBounced) + this.instance = new PublicBounced().$mount() + document.body.appendChild(this.instance.$el) + // document.body.removeChild(instance.$el) + // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� + this.instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') + this.setPanTo(pos, 250) + }, 1000) + console.log(t1) + // clearTimeout(t1) + this.pulseEffect(pos) + }, + + // flayTo() 寮规鐨勫彲婊戝姩浜嬩欢 + setPanTo (pos, value) { + var position = pos + position = window.map.latLngToLayerPoint(position) + position.y += value + position = window.map.layerPointToLatLng(position) + window.map.flyTo(position) + }, + pulseEffect (xy) { + // 鎻掍欢 鏁堟灉瀹炵幇 + var pulsingIcon = this.L.icon.pulse({ + iconSize: [20, 20], + color: this.colors[0], + fillColor: '' + }) + var picGroupMarker = this.L.marker(xy, { icon: pulsingIcon }).addTo(this.layer) + var times = this.times + // 瀹氭椂 + var timeInterval = setInterval(() => { + if (times > 0) { + times-- + } else { + clearInterval(timeInterval) + picGroupMarker.remove() + } + }, 1000) + }, + // select鐨刼ption鐨勬暟鎹�夋嫨 + handlePipelineType (val) { + this.solidWasteTypeOptions.forEach(item => { + if (val === item.value) { + this.handleSearch(item.value) + } + }) } } } -- Gitblit v1.8.0