<script setup lang="ts">
|
import { useCommandCenterStore } from '@/store/commandCenter'
|
|
const store = useCommandCenterStore()
|
|
const layerItems = computed(() => [
|
{
|
key: 'vehicle',
|
label: '车辆位置',
|
active: store.layerVisibility.vehicle,
|
toggle: () => store.toggleLayer('vehicle', !store.layerVisibility.vehicle),
|
iconHtml: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16"><path d="M941.4 467.2l-117.6-3.2-56-155.2c-16-44.8-59.2-75.2-107.2-75.2H362.2c-48 0-91.2 30.4-107.2 75.2l-56 155.2-117.6 3.2C56.6 468.8 35 491.2 35 518.4v148.8c0 27.2 22.4 49.6 49.6 49.6h44.8c8 51.2 52.8 89.6 105.6 89.6s97.6-38.4 105.6-89.6h342.4c8 51.2 52.8 89.6 105.6 89.6s97.6-38.4 105.6-89.6h44.8c27.2 0 49.6-22.4 49.6-49.6V518.4c0-27.2-22.4-51.2-46.6-51.2zM235 758.4c-27.2 0-49.6-22.4-49.6-49.6s22.4-49.6 49.6-49.6 49.6 22.4 49.6 49.6-22.4 49.6-49.6 49.6zm553.6 0c-27.2 0-49.6-22.4-49.6-49.6s22.4-49.6 49.6-49.6 49.6 22.4 49.6 49.6-22.4 49.6-49.6 49.6zM253.4 462.4l44.8-131.2c8-24 30.4-40 56-40h315.2c25.6 0 48 16 56 40l44.8 131.2H253.4z"></path><path d="M512 296a25.6 25.6 0 0 1-25.6-25.6V134.4a25.6 25.6 0 0 1 51.2 0v136c0 14.1-11.5 25.6-25.6 25.6z"></path></svg>',
|
},
|
{
|
key: 'passengerCall',
|
label: '呼单乘客',
|
active: store.layerVisibility.passengerCall,
|
toggle: () => store.toggleLayer('passengerCall', !store.layerVisibility.passengerCall),
|
iconHtml: '<span style="font-size:14px;">👤</span>',
|
},
|
{
|
key: 'point',
|
label: '运营点位',
|
active: store.layerVisibility.point,
|
toggle: () => store.toggleLayer('point', !store.layerVisibility.point),
|
iconHtml: '<span style="font-size:14px;">📍</span>',
|
},
|
{
|
key: 'fence',
|
label: '运营区域',
|
active: store.layerVisibility.fence,
|
toggle: () => store.toggleLayer('fence', !store.layerVisibility.fence),
|
iconHtml: '<span style="font-size:13px;font-weight:600;">区</span>',
|
},
|
])
|
|
const activeCount = computed(() => layerItems.value.filter(i => i.active).length)
|
</script>
|
|
<template>
|
<div class="layer-control">
|
<div class="layer-control__header">
|
<span class="layer-control__title">图例 / 图层</span>
|
<span class="layer-control__count">{{ activeCount }}/{{ layerItems.length }}</span>
|
</div>
|
<div class="layer-control__list">
|
<div
|
v-for="item in layerItems"
|
:key="item.key"
|
class="layer-control__item"
|
:class="{ 'layer-control__item--active': item.active }"
|
@click="item.toggle"
|
>
|
<span class="layer-control__icon" :class="`layer-control__icon--${item.key}`">
|
<span v-html="item.iconHtml" />
|
</span>
|
<span class="layer-control__label">{{ item.label }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.layer-control {
|
position: absolute;
|
top: 12px;
|
right: 12px;
|
z-index: 100;
|
background: #fff;
|
border-radius: 10px;
|
padding: 14px;
|
min-width: 150px;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
&__header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
padding-bottom: 8px;
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
}
|
|
&__title {
|
font-size: 13px;
|
font-weight: 600;
|
color: rgba(0, 0, 0, 0.85);
|
}
|
|
&__count {
|
font-size: 12px;
|
color: rgba(0, 0, 0, 0.45);
|
}
|
|
&__list {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
}
|
|
&__item {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
padding: 7px 10px;
|
border-radius: 20px;
|
cursor: pointer;
|
transition: all 0.2s;
|
background: #fff;
|
|
.layer-control__label {
|
color: #64748b;
|
font-size: 13px;
|
}
|
|
&--active {
|
background: rgba(37, 99, 235, 0.08);
|
|
.layer-control__label {
|
color: #2563eb;
|
font-weight: 500;
|
}
|
}
|
}
|
|
&__icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 26px;
|
height: 26px;
|
border-radius: 50%;
|
flex-shrink: 0;
|
|
&--vehicle {
|
background: #2563eb;
|
color: #fff;
|
}
|
|
&--passengerCall {
|
background: #f59e0b;
|
border-radius: 50%;
|
}
|
|
&--point {
|
background: transparent;
|
}
|
|
&--fence {
|
background: #fff;
|
border: 2px solid #2563eb;
|
color: #2563eb;
|
}
|
}
|
|
&__label {
|
font-size: 13px;
|
white-space: nowrap;
|
transition: all 0.2s;
|
}
|
}
|
</style>
|
