From 42a5c3a7bf9f65d4003d800b6efa3769018f1bc3 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期日, 30 五月 2021 17:42:19 +0800
Subject: [PATCH] 企业应急-事件上报-定位图标清除问题修改
---
src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 14 ++
src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue | 273 +++++++++++++++++++++++++++---------------------------
src/utils/utils.js | 2
3 files changed, 148 insertions(+), 141 deletions(-)
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
index ca90d4e..45d885a 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
@@ -64,7 +64,8 @@
longPos: '',
latPos: ''
},
- marker: null
+ marker: window.L.layerGroup().addTo(window.map),
+ layersGroupArrList: []
}
},
methods: {
@@ -85,6 +86,7 @@
})
})
window.map.addLayer(this.marker)
+ this.layersGroupArrList.push(this.marker)
window.map.off('click')
})
},
@@ -99,19 +101,23 @@
this.marker = window.L.marker(as, {
icon: window.L.icon({
iconUrl: iconUrl,
- iconSize: [30, 40],
- iconAnchor: [15, 20]
+ iconSize: [26, 40],
+ iconAnchor: [13, 20]
})
})
window.map.addLayer(this.marker)
+ this.layersGroupArrList.push(this.marker)
} else {
this.$message('璇疯緭鍏ヨ瘑鍙栫粡绾害')
}
},
// 鐐瑰嚮纭鎸夐挳浜嬩欢
confirm () {
+ for (let i = 0; i < this.layersGroupArrList.length; i++) {
+ window.map.removeLayer(this.layersGroupArrList[i])
+ }
window.mapManager.clearHighlight()
- window.map.removeLayer(this.marker)
+ // window.map.removeLayer(this.marker)
eventBus.$emit('location-setChange', true)
this.lonlatpos.longPos = ''
this.lonlatpos.latPos = ''
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 599d02d..f160110 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
+++ b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
@@ -1,53 +1,54 @@
<template>
- <div class="click-location">
- <el-row>
- <el-input type="text" v-model="clickLocation" @change="focusLocation">
- <el-button slot="suffix" type="text" @click="focusLocation">
- <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
- </el-button>
- </el-input>
- </el-row>
- <!-- <el-scrollbar style="height:250.34px">-->
- <el-row v-for="(item,index) in searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
- style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
- class="environmental-risk-list">
- <el-col :span="4">
- <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
- style="background: none;margin: 0 15px">
- </el-col>
- <el-col :span="12">
- <div class=search-list>
- <!-- <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">鍚嶇О锛�<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
- <h3 :class="activeNum===index?'hover':''" @click="handleLocation(index)">鍚嶇О锛歿{ item.name }}</h3>
- <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">鍦板潃锛�<span>{{ item.address }}</span>
- <p>鐢佃瘽锛�<span>{{ item.phone }}</span></p>
- </div>
- </el-col>
- <el-col :span="8" style="text-align: right">
- <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
- 瀹氫綅
- </el-button>
- </el-col>
- </el-row>
- <!-- </el-scrollbar>-->
- <!-- <el-card class="footer-page" >-->
- <div v-if="total > 10">
- <el-pagination
- small
- @current-change="handlePage"
- :page-size=pageSize
- :current-page.sync="currentPage"
- layout="prev, pager, next"
- :total=total
- class="warnPagination"
- >
- </el-pagination>
+ <div class="click-location">
+ <el-row>
+ <!-- clearable-->
+ <el-input type="text" v-model="clickLocation" @change="focusLocation">
+ <el-button slot="suffix" type="text" @click="focusLocation">
+ <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
+ </el-button>
+ </el-input>
+ </el-row>
+ <!-- <el-scrollbar style="height:250.34px">-->
+ <el-row v-for="(item,index) in searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
+ style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
+ class="environmental-risk-list">
+ <el-col :span="4">
+ <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
+ style="background: none;margin: 0 15px">
+ </el-col>
+ <el-col :span="12">
+ <div class=search-list>
+ <!-- <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">鍚嶇О锛�<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
+ <h3 :class="activeNum===index?'hover':''" @click="handleLocation(index)">鍚嶇О锛歿{ item.name }}</h3>
+ <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">鍦板潃锛�<span>{{ item.address }}</span>
+ <p>鐢佃瘽锛�<span>{{ item.phone }}</span></p>
</div>
- <!-- </el-card>-->
- <el-row style="text-align: right">
- <el-button type="primary" size="small" @click="confirm">纭</el-button>
- </el-row>
+ </el-col>
+ <el-col :span="8" style="text-align: right">
+ <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
+ 瀹氫綅
+ </el-button>
+ </el-col>
+ </el-row>
+ <!-- </el-scrollbar>-->
+ <!-- <el-card class="footer-page" >-->
+ <div v-if="total > 10">
+ <el-pagination
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ :current-page.sync="currentPage"
+ layout="prev, pager, next"
+ :total=total
+ class="warnPagination"
+ >
+ </el-pagination>
</div>
+ <!-- </el-card>-->
+ <el-row style="text-align: right">
+ <el-button type="primary" size="small" @click="confirm">纭</el-button>
+ </el-row>
+ </div>
</template>
<script>
@@ -65,7 +66,9 @@
// 鐐瑰嚮瀹氫綅缁戝畾鏁版嵁
clickLocation: '',
searchList: [],
- marker: null,
+ marker: window.L.layerGroup().addTo(window.map),
+ layer: window.L.layerGroup().addTo(window.map),
+ layersGroupArrList: [],
total: 0,
// 鍒嗛〉 榛樿灞曠ず
currentPage: 1,
@@ -98,29 +101,23 @@
}
// $http.get('http://10.246.133.164//api/search?', data)
reportLocationSearch(data).then(res => {
- console.log(res)
+ // console.log(res)
this.searchList = res.pois
this.total = res.pois.length
+ // this.searchList = res.statistics.priorityCitys
+ // this.total = res.statistics.priorityCitys.length
})
},
// 鐐瑰嚮瀹氫綅
locationMapClick (val, index) {
this.activeNum = index
- // console.log(val)
const ps = val.lonlat.trim().split(' ')
- // const htmls = '<div><ul><li>' + val.name + '</li></ul></div>'
- // var myIcon = window.L.divIcon({
- // html: htmls,
- // className: 'company-bindTooltip',
- // iconSize: 16
- // })
this.marker = window.L.marker([ps[1], ps[0]], {
icon: window.L.icon({
iconUrl: iconUrl,
- iconSize: [25, 40],
- iconAnchor: [15, 15]
+ iconSize: [26, 40],
+ iconAnchor: [13, 20]
})
- // icon: myIcon
})
.bindTooltip(val.name, {
permanent: 'true',
@@ -130,15 +127,19 @@
className: ''
})
window.map.addLayer(this.marker)
+ this.layersGroupArrList.push(this.marker)
window.map.setView([ps[1], ps[0]], 17)
pulseEffect([ps[1], ps[0]])
},
// 鐐瑰嚮纭鎸夐挳浜嬩欢
confirm () {
window.mapManager.clearHighlight()
- window.map.removeLayer(this.marker)
+ for (let i = 0; i < this.layersGroupArrList.length; i++) {
+ window.map.removeLayer(this.layersGroupArrList[i])
+ }
this.searchList = []
this.clickLocation = ''
+ this.total = 0
eventBus.$emit('location-setChange', true)
}
}
@@ -146,91 +147,91 @@
</script>
<style lang="less" scoped>
- /*/deep/ .el-row {*/
- /* margin: 2px 0 !important;*/
- /* padding: 0;*/
- /* height: 10px;*/
- /* max-height: 10px;*/
- /*}*/
- .environmental-risk-list {
- color: @color;
- border-bottom: 1px solid rgba(0, 255, 246, 0.14);
+/*/deep/ .el-row {*/
+/* margin: 2px 0 !important;*/
+/* padding: 0;*/
+/* height: 10px;*/
+/* max-height: 10px;*/
+/*}*/
+.environmental-risk-list {
+ color: @color;
+ border-bottom: 1px solid rgba(0, 255, 246, 0.14);
- h3 {
- font-size: 0.1rem;
- }
- }
+ h3 {
+ font-size: 0.1rem;
+ }
+}
- /*<!--.environmental-risk-list:hover {-->*/
- /*<!-- color: @color-highlight;-->*/
- /*<!-- background: @background-color;-->*/
- /*<!--}-->*/
- .search-list {
- h3:hover {
- color: @color-highlight;
- }
- }
+/*<!--.environmental-risk-list:hover {-->*/
+/*<!-- color: @color-highlight;-->*/
+/*<!-- background: @background-color;-->*/
+/*<!--}-->*/
+.search-list {
+ h3:hover {
+ color: @color-highlight;
+ }
+}
- .hover {
- color: @color-highlight;
- }
+.hover {
+ color: @color-highlight;
+}
- .click-location {
- margin: 0 auto;
- text-align: center;
+.click-location {
+ margin: 0 auto;
+ text-align: center;
- .el-input {
- width: 80%;
- margin: 15px auto;
- }
- }
+ .el-input {
+ width: 80%;
+ margin: 15px auto;
+ }
+}
- /deep/
- .warnPagination {
- .btn-quicknext, .btn-quickprev {
- color: #e4e8f1 !important;
- background-color: transparent;
- // border: 1px solid #25AECD;
- border-left: 1px solid #25AECD;
- border-bottom: 1px solid #25AECD;
- border-top: 1px solid #25AECD;
- color: #e4e8f1;
- }
+/deep/
+.warnPagination {
+ .btn-quicknext, .btn-quickprev {
+ color: #e4e8f1 !important;
+ background-color: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
- .el-pager li {
- color: #e4e8f1;
- background: transparent;
- // border: 1px solid #25AECD;
- border-left: 1px solid #25AECD;
- border-bottom: 1px solid #25AECD;
- border-top: 1px solid #25AECD;
- }
+ .el-pager li {
+ color: #e4e8f1;
+ background: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ }
- .el-pager li.active {
- border-color: #25AECD;
- background-color: rgba(38, 222, 253, 0.3);
- color: #e4e8f1;
- }
+ .el-pager li.active {
+ border-color: #25AECD;
+ background-color: rgba(38, 222, 253, 0.3);
+ color: #e4e8f1;
+ }
- .el-pager li:hover {
- border-color: #25AECD;
- background-color: rgba(38, 222, 253, 0.3);
- color: #34e0ff;
- }
+ .el-pager li:hover {
+ border-color: #25AECD;
+ background-color: rgba(38, 222, 253, 0.3);
+ color: #34e0ff;
+ }
- .btn-prev {
- background-color: transparent;
- // border: 1px solid #25AECD;
- border-left: 1px solid #25AECD;
- border-bottom: 1px solid #25AECD;
- border-top: 1px solid #25AECD;
- color: #e4e8f1;
- }
+ .btn-prev {
+ background-color: transparent;
+ // border: 1px solid #25AECD;
+ border-left: 1px solid #25AECD;
+ border-bottom: 1px solid #25AECD;
+ border-top: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
- .btn-next {
- background-color: transparent;
- border: 1px solid #25AECD;
- color: #e4e8f1;
- }
- }
+ .btn-next {
+ background-color: transparent;
+ border: 1px solid #25AECD;
+ color: #e4e8f1;
+ }
+}
</style>
diff --git a/src/utils/utils.js b/src/utils/utils.js
index d8d5e40..c187b1c 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -27,7 +27,7 @@
* 鑴夊啿鏁堟灉
*/
export function pulseEffect (xy) {
- let times = 5
+ let times = 1000
const colors = ['#00f100', '#ff0000']
// 鎻掍欢 鏁堟灉瀹炵幇
var pulsingIcon = window.L.icon.pulse({
--
Gitblit v1.8.0