搜索框模糊查询–关键字查询,不区分大小写
一个输入框和一个搜索按钮
< template>
< div slot= "footer" class = "mybtn" >
< p class = "searchBody" >
< Input v- model= "waterCoversName" class = "searchInput" / >
< Button class = "searchBtn" type= "primary" @click= "searchLampPole" > 搜索< / Button>
< / p>
< / div>
< / template>
设置样式
< style lang= "less" scoped>
. mybtn{
padding: 0 10 px;
. searchBody{
. searchInput{
width: 60 % ;
vertical- align: top;
/ deep/ input{
background- color: rgba ( 0 , 0 , 0 , 0.2 ) ;
color: #fff;
}
}
. searchBtn{
width: 35 % ;
margin- left: 3 % ;
}
}
button{
margin- bottom: 10 px;
}
}
< / style>
获取数据
getFacilityByType ( type) {
this . $ajax ( {
method: 'get' ,
url: '/portal/group/facility/get/' + type,
data: { } ,
$simple: true
} ) . then ( res => {
if ( res. data. length > 0 ) {
this . facilityList = res. data. map ( t => {
let status = t. devices[ 0 ] ? this . deviceStatusListImg[ t. devices[ 0 ] . abstract_status] : 'damage'
return {
... t,
lng: t. location. points[ 0 ] . longitude,
lat: t. location. points[ 0 ] . latitude,
src: this . iconOnMap[ type] ,
icon: this . iconOnMap[ type] ,
color: getColorByStatus ( status) ,
state: getColorByStatus ( status)
}
} )
this . $map. cover. icon. clear ( )
this . $map. getMap ( ) . remove ( this . markerList)
this . markerList = [ ]
this . facilityList. forEach ( ( t, i) => {
let marker = this . $map. cover. icon. add ( t, ( ) => {
this . currentCode = t. id
this . modal = true
this . $map. cover. icon. clearSelected ( )
this . clickItem ( t, i)
} )
this . markerList. push ( marker)
this . markers. push ( { id: t. id, marker: marker} )
} )
let opt = {
src: this . iconOnMap[ type] ,
name: '' ,
event: ( context) => {
let temp = { }
context. markers. forEach ( t => {
let devices = t. getExtData ( )
devices. forEach ( tt => {
temp[ tt. device_type_code] = temp[ tt. device_type_code] ? temp[ tt. device_type_code] + 1 : 1
} )
} )
let median = {
radio: 'icon-boardcast-24' ,
video: 'icon-video-24' ,
wifi: 'icon-wifi-24' ,
environment: 'icon-env-24'
}
let _html = ``
let count = 0
for ( let attr in temp) {
if ( median[ attr] ) {
count++
_html += `<div class="tips-item"><img src=" ${ this . $$icon[ median[ attr] ] } " width=12 height=12/></span><span> ${ temp[ attr] } </span></div>`
}
}
return {
count: count,
content: _html
}
}
}
this . $map. cover. markers. add ( this . markerList, opt)
} else {
this . facilityList = [ ]
}
} )
} ,
搜索按钮
searchLampPole ( ) {
this . $map. cover. icon. clearSelected ( this . markerList)
let index = - 1
for ( let i = 0 ; i < this . facilityList. length; i++ ) {
if ( this . facilityList[ i] . name. toLowerCase ( ) . indexOf ( this . waterCoversName. toLowerCase ( ) ) > - 1 ) {
index = i
this . $map. cover. icon. addSelected ( this . markerList[ index] )
}
}
if ( index === - 1 ) {
this . $Message. warning ( '无匹配的灯杆!' )
}
} ,