<template>
|
<div class="click-location">
|
<el-row>
|
<el-input type="text" v-model="clickLocation" clearable @change="focusLocation"></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>
|
<!-- </el-card>-->
|
<el-row style="text-align: right">
|
<el-button type="primary" size="small" @click="confirm">确认</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
|
import { reportLocationSearch } from '../../../../api/request'
|
import { pulseEffect } from '../../../../utils/utils'
|
import eventBus from '../../../../eventBus'
|
import iconUrl from '../../../../../public/assets/images/map/marker-icon.png'
|
|
export default {
|
name: 'ReportLocationSearch',
|
data () {
|
return {
|
activeNum: -1,
|
// 点击定位绑定数据
|
clickLocation: '',
|
searchList: [],
|
marker: null,
|
total: 0,
|
// 分页 默认展示
|
currentPage: 1,
|
// 分页 每页多少数据
|
pageSize: 3
|
}
|
},
|
methods: {
|
handlePage (currentPage) {
|
// this.focusLocation()
|
this.currentPage = currentPage
|
},
|
handleLocation (index) {
|
this.activeNum = index
|
},
|
// 搜索定位
|
focusLocation () {
|
const getBoundsData = '' + window.map.getBounds()._southWest.lng + ',' + window.map.getBounds()._southWest.lat + ',' + window.map.getBounds()._northEast.lng + ',' + window.map.getBounds()._northEast.lat
|
const data = {
|
postStr: {
|
keyWord: this.clickLocation,
|
level: window.map.getZoom(),
|
mapBound: getBoundsData,
|
queryType: 7,
|
count: 14,
|
start: 0,
|
queryTerminal: 10000
|
},
|
type: 'query'
|
}
|
reportLocationSearch(data).then(res => {
|
console.log(res)
|
this.searchList = res.pois
|
this.total = res.pois.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]
|
})
|
// icon: myIcon
|
})
|
.bindTooltip(val.name, {
|
permanent: 'true',
|
direction: 'bottom',
|
offset: [0, 10],
|
sticky: true,
|
className: ''
|
})
|
window.map.addLayer(this.marker)
|
window.map.setView([ps[1], ps[0]], 17)
|
pulseEffect([ps[1], ps[0]])
|
},
|
// 点击确认按钮事件
|
confirm () {
|
window.mapManager.clearHighlight()
|
window.map.removeLayer(this.marker)
|
this.searchList = []
|
this.clickLocation = ''
|
eventBus.$emit('location-setChange', true)
|
}
|
}
|
}
|
</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);
|
|
h3 {
|
font-size: 0.1rem;
|
}
|
}
|
|
/*<!--.environmental-risk-list:hover {-->*/
|
/*<!-- color: @color-highlight;-->*/
|
/*<!-- background: @background-color;-->*/
|
/*<!--}-->*/
|
.search-list {
|
h3:hover {
|
color: @color-highlight;
|
}
|
}
|
|
.hover {
|
color: @color-highlight;
|
}
|
|
.click-location {
|
margin: 0 auto;
|
text-align: center;
|
|
.el-input {
|
width: 80%;
|
margin: 15px auto;
|
}
|
|
.el-button {
|
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;
|
}
|
|
.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: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-next {
|
background-color: transparent;
|
border: 1px solid #25AECD;
|
color: #e4e8f1;
|
}
|
}
|
</style>
|
