erqi-web/src/components/Map/legend.vue

<template>

  <div :class="['screen-legend-left',isFold? 'fold':'']">
    <div class="header" @click="toggleExpand">
      <span>图例 </span>
      <img src="@/assets/images/map/legend/icon-suffix.png" alt="">
    </div>

    <ul class="list-wrapper">
      <li :class="['list-item', item.checked ? 'active' : '']" v-for="(item, index) in list" :key="index" @click="handle(item)">
        <img :src="getAssetsFile(`map/legend/icon_${item.icon}.png`)" alt="">
        <span class="label">{{ item.label }}</span>
        <img class="sector-icon" v-if="item.prop === 'monitor' || item.prop === 'UAV'" :src="getSectorIcon(item)" alt="" @click.stop="toggleSector(item)">
      </li>
    </ul>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import { getAssetsFile } from '@/utils/common'
  import useMapStore from '@/store/modules/map'

  const mapStore = useMapStore()

  const isFold = ref(true)

  const list = ref([
    {
      label: '无人机',
      icon: 'UAV',
      prop: 'UAV',
      checked: true,
      sector: false
    },
    {
      label: '监控点位',
      icon: 'monitor',
      prop: 'monitor',
      checked: true,
      sector: false
    },
    {
      label: 'AIS基站',
      icon: 'ais_station',
      prop: 'ais_station',
      checked: true
    },
    {
      label: '环境监测设备',
      icon: 'environmental',
      prop: 'environmental',
      checked: true
    },
    {
      label: '电子围栏',
      icon: 'fence',
      prop: 'fence',
      checked: true
    }
  ])

  const getSectorIcon = (item) => {
    return getAssetsFile(`login/icon-${item.sector ? 'show' : 'hidden'}.png`)
  }
  const toggleSector = (item) => {
    if (!item.checked) {
      return
    }
    item.sector = !item.sector
    mapStore.updateSector(item.prop, item.sector)
  }
  const toggleExpand = () => {
    isFold.value = !isFold.value
  }

  const handle = (item) => {
    item.checked = !item.checked
    mapStore.updateLegend(item.prop, item.checked)
    if(!item.checked && (item.prop === 'monitor' || item.prop === 'UAV')) {
      item.sector = false
      mapStore.updateSector(item.prop, item.sector)
    }
  }
</script>

<style scoped lang="scss">
.screen-legend-left {
  bottom: 54px;
  display: flex;
  flex-direction: column;
  left: 476px;
  position: fixed;
  padding: 6px;
  box-sizing: border-box;
  transition: all 0.3s;
  overflow: hidden;
  background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.2) 100%);
  color: #FFFFFF;
  border-radius: 6px;
  .header{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'SHSCNM';
    font-size: 14px;
    width: 94px;
    height: 28px;
    background: #0AA9FF;
    border-radius: 3px;
    img{
        width: 10px;
        height: 10px;
    }
  }
  .list-wrapper{
    width: 100%;
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    gap: 6px;
    height: auto;
    .list-item{
      display: flex;
      align-items: center;
      cursor: pointer;
      opacity: 0.6;
      &.active{
        opacity: 1;
      }
      img{
        max-width: 18px;
        max-height: 25px;
        margin-right: 6px;
      }
      .label{
        font-size: 12px;
        font-family: 'SHSCNN';
      }
      .sector-icon{
        margin:0 0 0 6px;
      }
    }
  }
  &.fold{
    .list-wrapper{
      transition: all 0.3s;
      opacity: 0;
      height: 0;
      margin-top: 0;
    }
  }
}
.screen-legend-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  padding: 1px; /* 控制"边框"宽度 */
  background: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8));
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.bottom{
    bottom: 391px;
}
.left{
  left: 85px;
}
</style>