From b3d9e0d7a9479ba8e615a82e6f454fd2ebf62ac6 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期六, 29 五月 2021 10:20:16 +0800
Subject: [PATCH] 企业应急-事件上报-搜索定位/经纬度定位修改
---
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue | 78 +++++++++++++++++++++++---
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue | 1
src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue | 66 ++++++++++------------
3 files changed, 100 insertions(+), 45 deletions(-)
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue
index 3e8e096..084d73e 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocation.vue
@@ -20,7 +20,8 @@
</el-form>
</div>
<div class="place-right">
- <el-button type="primary" @click="mapPoints">瀹氫綅</el-button>
+ <el-button type="primary" size="small" @click="mapPoints">鐐瑰嚮瀹氫綅</el-button>
+ <el-button type="primary" size="small" @click="dataPoints">鏁版嵁瀹氫綅</el-button>
</div>
</el-row>
<div class="place-bottom" style="text-align: center;margin: 5px">
@@ -36,6 +37,8 @@
// 绠℃瀹氫綅缁勪欢
import ReportLocationSection from './ReportLocationSection'
import ReportLocationSearch from './ReportLocationSearch'
+
+import { pulseEffect } from '../../../../utils/utils'
import iconUrl from '../../../../../public/assets/images/map/loc.png'
@@ -56,36 +59,33 @@
}
}
},
- // mounted () {
- // // 鎺ユ敹瑙勫畾 姣忔閲嶆柊閫夋嫨瀹氫綅 閮芥寚瀹� 閫夋嫨绗竴涓紑濮�
- // eventBus.$on('tab-change', (obj) => {
- // this.activeName = obj
- // })
- // },
methods: {
- // 鍦板浘涓婄偣鍑�
- selectPipeLine () {
- window.map.on('click', this.selectClick)
- // window.mapManager.clickDialogSwitch = false
+ // 鐐瑰嚮瀹氫綅
+ mapPoints () {
+ window.map.on('click', (e) => {
+ this.LongLatPos.longPos = parseFloat(e.latlng.lng).toFixed(6)
+ this.LongLatPos.latPos = parseFloat(e.latlng.lat).toFixed(6)
+ const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
+ // console.log(as)
+ window.map.setView(as, 17)
+ pulseEffect(as)
+ const marker = window.L.marker(as, {
+ icon: window.L.icon({
+ iconUrl: iconUrl,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15]
+ })
+ })
+ window.map.addLayer(marker)
+ window.map.off('click')
+ })
},
- // 鍦板浘涓婄偣鍑诲洖璋�
- selectClick (e) {
- window.map.off('click', this.selectClick)
- // const point = [e.latlng.lng, e.latlng.lat]
- const pointX = e.latlng.lng
- const pointY = e.latlng.lat
- // let marker = window.L.marker(point,{
- //
- // })
- this.clickLocation = '\'' + pointX + '\'' + pointY + ''
- this.mapPointResult(e)
- },
- mapPointResult (e) {
- console.log(e)
- this.LongLatPos.longPos = e.latlng.lng
- this.LongLatPos.latPos = e.latlng.lat
- const as = [e.latlng.lat, e.latlng.lng]
+ // 閫氳繃鏁版嵁瀹氫綅
+ dataPoints () {
+ const as = [this.LongLatPos.latPos, this.LongLatPos.longPos]
// console.log(as)
+ window.map.setView(as, 17)
+ pulseEffect(as)
const marker = window.L.marker(as, {
icon: window.L.icon({
iconUrl: iconUrl,
@@ -94,14 +94,8 @@
})
})
window.map.addLayer(marker)
- },
- // 鑾峰緱鐒︾偣 杩涜瀹氫綅
- focusLocation () {
- this.selectPipeLine()
- },
- // 缁忕含搴﹀畾浣�
- mapPoints () {
- this.selectPipeLine()
+ this.LongLatPos.latPos = ''
+ this.LongLatPos.longPos = ''
},
// 鐐瑰嚮纭鎸夐挳浜嬩欢
confirm () {
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
index 71d6826..33bf401 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
@@ -3,6 +3,21 @@
<el-row>
<el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></el-input>
</el-row>
+ <el-scrollbar style="height:86.22px">
+ <el-row v-for="(item,index) in searchList" :key="index" style="display: flex;align-items: center">
+ <el-col :span="12">
+ <span>{{ item.name }}</span>
+ </el-col>
+ <el-col :span="12">
+ <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item)">瀹氫綅
+ </el-button>
+ </el-col>
+ <!-- <el-pagination-->
+ <!-- layout="prev, pager, next"-->
+ <!-- :total="50">-->
+ <!-- </el-pagination>-->
+ </el-row>
+ </el-scrollbar>
<el-row>
<el-button type="primary" @click="confirm" style="text-align: right">纭</el-button>
</el-row>
@@ -14,12 +29,15 @@
import { reportLocationSearch } from '../../../../api/request'
import { pulseEffect } from '../../../../utils/utils'
import eventBus from '../../../../eventBus'
+import iconUrl from '../../../../../public/assets/images/map/loc.png'
+
export default {
name: 'ReportLocationSearch',
data () {
return {
// 鐐瑰嚮瀹氫綅缁戝畾鏁版嵁
- clickLocation: ''
+ clickLocation: '',
+ searchList: []
}
},
methods: {
@@ -43,18 +61,50 @@
}
// console.log(data)
reportLocationSearch(data).then(res => {
- console.log(res)
+ // console.log(res)
+ this.searchList = res.pois
+ // console.log(this.searchList)
// const as = res.pois[0].lonlat.trim().split(' ')
// window.map.setView([as[1], as[0]], 17)
// pulseEffect([as[1], as[0]])
- for (let i = 0; i < res.pois.length; i++) {
- const as = res.pois[i].lonlat.trim().split(' ')
- if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
- window.map.setView([as[1], as[0]], 17)
- pulseEffect([as[1], as[0]])
- }
- }
+ // for (let i = 0; i < res.pois.length; i++) {
+ // const as = res.pois[i].lonlat.trim().split(' ')
+ // if (res.pois[i].name.indexOf(this.clickLocation) >= 0) {
+ // window.map.setView([as[1], as[0]], 17)
+ // pulseEffect([as[1], as[0]])
+ // }
+ // }
})
+ },
+ // 鐐瑰嚮瀹氫綅
+ locationMapClick (val) {
+ console.log(val)
+ const ps = val.lonlat.trim().split(' ')
+ // const htmls = '<div><ul><li>' + val.name + '</li> + <li>' + val.adress + '</li></ul></div>'
+ // var myIcon = window.L.divIcon({
+ // html: htmls,
+ // className: 'company-bindTooltip',
+ // iconSize: 16
+ // })
+ const htmls = '<div><ul><li>' + val.name + '</li> <br/> <li>' + val.address + '</li> <br/> <li>' + val.phone + '</li></ul></div>'
+ const marker = window.L.marker([ps[1], ps[0]], {
+ icon: window.L.icon({
+ iconUrl: iconUrl,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15]
+ })
+ // icon: myIcon
+ })
+ .bindTooltip(htmls, {
+ // permanent: 'true',
+ direction: 'bottom',
+ offset: [0, 10],
+ sticky: true,
+ className: ''
+ })
+ window.map.addLayer(marker)
+ window.map.setView([ps[1], ps[0]], 17)
+ pulseEffect([ps[1], ps[0]])
},
// 鐐瑰嚮纭鎸夐挳浜嬩欢
confirm () {
@@ -68,6 +118,16 @@
</script>
<style lang="less" scoped>
+ /*/deep/ .el-row {*/
+ /* margin: 2px 0 !important;*/
+ /* padding: 0;*/
+ /* height: 10px;*/
+ /* max-height: 10px;*/
+ /*}*/
+ .div-list-search {
+
+ }
+
.click-location {
margin: 0 auto;
text-align: center;
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
index d8bc7be..16b9c4d 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSection.vue
@@ -284,6 +284,7 @@
// 闄勫睘璁炬柦
this.affFacData(e)
// })
+ window.map.off('click')
})
// 鏁版嵁 閲嶆柊鑾峰彇 杩涜缃┖
this.tableList = []
--
Gitblit v1.8.0