first commit

2025-12-24 18:19:05 +08:00
commit 78407f1cbd
283 changed files with 170690 additions and 0 deletions
--- a/src/components/Map/legend.vue
+++ b/src/components/Map/legend.vue
@@ -0,0 +1,178 @@
+<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>