|
|
|
@ -23,16 +23,27 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="map-bottom-decoration"></div> |
|
|
|
<div class="map-tab-list" v-if="mapLevel == 'grid' && mapTabList.length != 0"> |
|
|
|
<div :class="['tab-item']" v-for="(item, index) in mapTabList" :key="index" @click="chooseTab(item)"> |
|
|
|
<!-- <div class="icon"> |
|
|
|
<div class="map-tab-list-grid" v-if="mapLevel == 'grid' && mapTabListGrid.length != 0"> |
|
|
|
<div :class="['tab-item']" v-for="(item, index) in mapTabListGrid" :key="index" @click="chooseTabGrid(item)"> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="map-tab-list"> |
|
|
|
<div |
|
|
|
:class="['tab-item', currentTab === item.label ? 'active' : '']" |
|
|
|
v-for="(item, index) in mapTabList" |
|
|
|
:key="index" |
|
|
|
@click="chooseTab(item)" |
|
|
|
> |
|
|
|
<div class="icon"> |
|
|
|
<img |
|
|
|
:src="currentTab === item.label ? item.selectIcon : item.icon" |
|
|
|
alt="图标" |
|
|
|
/> |
|
|
|
</div> --> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
<div class="label">{{ item.label }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div :class="['map-serch', collapse ? 'collapse' : '']" @click.stop="collapse = false"> |
|
|
|
@ -120,7 +131,11 @@ export default { |
|
|
|
{ label: '已结案', value: 0 }, |
|
|
|
{ label: '网格员', value: 0 } |
|
|
|
], |
|
|
|
mapTabList: [], |
|
|
|
mapTabListGrid: [], |
|
|
|
mapTabList: [ |
|
|
|
// { icon: require('@/assets/images/red-cross-blue-icon.png'), label: '红十字会', selectIcon: require('@/assets/images/red-cross-yellow-icon.png') }, |
|
|
|
{ icon: require('@/assets/images/volunteer-blue-icon.png'), label: '志愿者', selectIcon: require('@/assets/images/volunteer-yellow-icon.png') } |
|
|
|
], |
|
|
|
currentTab: '', |
|
|
|
searchOptionList: [ |
|
|
|
{ label: '以房找人', value: '1' }, |
|
|
|
@ -323,7 +338,7 @@ export default { |
|
|
|
}, |
|
|
|
getGridList(id) { |
|
|
|
getGrid(id).then(res => { |
|
|
|
this.mapTabList = res.data |
|
|
|
this.mapTabListGrid = res.data |
|
|
|
}).catch(err => { |
|
|
|
console.error('获取网格列表', err) |
|
|
|
}) |
|
|
|
@ -376,22 +391,22 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换红十字会、志愿者tab |
|
|
|
async chooseTab(item) { |
|
|
|
// if (this.currentTab && (this.currentTab === tab.label)) { |
|
|
|
// this.currentTab = '' |
|
|
|
// } else { |
|
|
|
// this.currentTab = tab.label |
|
|
|
// } |
|
|
|
|
|
|
|
// if (this.currentTab === '红十字会') { |
|
|
|
// Bus.$emit('drawRedCrossMarker') |
|
|
|
// } else if (this.currentTab === '志愿者') { |
|
|
|
// Bus.$emit('drawVolunteerMarker') |
|
|
|
// } else { |
|
|
|
// Bus.$emit('clearMarker') |
|
|
|
// } |
|
|
|
|
|
|
|
async chooseTab(tab) { |
|
|
|
if (this.currentTab && (this.currentTab === tab.label)) { |
|
|
|
this.currentTab = '' |
|
|
|
} else { |
|
|
|
this.currentTab = tab.label |
|
|
|
} |
|
|
|
|
|
|
|
if (this.currentTab === '红十字会') { |
|
|
|
Bus.$emit('drawRedCrossMarker') |
|
|
|
} else if (this.currentTab === '志愿者') { |
|
|
|
Bus.$emit('drawVolunteerMarker') |
|
|
|
} else { |
|
|
|
Bus.$emit('clearMarker') |
|
|
|
} |
|
|
|
}, |
|
|
|
chooseTabGrid(item){ |
|
|
|
this.set_gridInfoDialog(true) |
|
|
|
Bus.$emit('emitgridInfoDialogData', { gridId: item.id || '1534561053840998402' }) |
|
|
|
}, |
|
|
|
@ -667,7 +682,7 @@ img { |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.map-tab-list { |
|
|
|
.map-tab-list-grid { |
|
|
|
position: absolute; |
|
|
|
right: calc(560px + 10px + 32px); |
|
|
|
bottom: 50%; |
|
|
|
@ -712,6 +727,58 @@ img { |
|
|
|
// margin-top: 6px; |
|
|
|
// } |
|
|
|
|
|
|
|
&.active { |
|
|
|
background: rgba(8, 31, 57, 0.61); |
|
|
|
border: 1px solid #f8bb00; |
|
|
|
|
|
|
|
.label { |
|
|
|
background: linear-gradient(0deg, #ffa229 0%, #f8fdfe 70%); |
|
|
|
background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
color: transparent; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.map-tab-list { |
|
|
|
position: absolute; |
|
|
|
left: calc(560px + 10px + 32px); |
|
|
|
bottom: 60px; |
|
|
|
z-index: 20; |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
width: 115px; |
|
|
|
height: 36px; |
|
|
|
background: rgba(8, 31, 57, 0.61); |
|
|
|
border: 1px solid #12d0ff; |
|
|
|
border-radius: 2px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-left: 13px; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.icon { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.label { |
|
|
|
font-size: 16px; |
|
|
|
font-family: "PingFang Regular"; |
|
|
|
font-weight: 900; |
|
|
|
background: linear-gradient(0deg, #25c2eb 0%, #f8fdfe 70%); |
|
|
|
background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
color: transparent; |
|
|
|
font-weight: 900; |
|
|
|
margin-left: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
&+.tab-item { |
|
|
|
margin-top: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
&.active { |
|
|
|
background: rgba(8, 31, 57, 0.61); |
|
|
|
border: 1px solid #f8bb00; |
|
|
|
|
