yjxp-web/src/views/mobileControl/index.vue

<template>
  <div class="container">
    <div class="top-content">
      <!--    <YztMap v-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :point-type="pointType" />-->
      <Map ref="mapRef" :active-map="activeMap" :point-type="pointType" :class="showMenu && !!eventId && !fullscreen ? 'containerHeight1' : 'containerHeight2'"/>
      <div v-show="!fullscreen" class="top-left-panel">
      </div>
      <div class="top-right-panel">
        <SearchBtn v-show="!fullscreen" />
        <div v-show="!fullscreen" class="add-button button1" @click="handleAdd" />
        <div v-show="!fullscreen" class="reduce-button button1" @click="handleReduce" />
        <div class="fullScreen-button button1" @click="handleFullscreen" />
        <div v-show="!fullscreen" class="layer-button button1" />
      </div>
      <div v-show="!fullscreen" class="bottom-left-panel">
        <div class="button2" @click="toIndex">
          <i class="back-btn" />
          <div>首页</div>
        </div>
        <div v-show="!eventId" class="button2">
          <i class="material-btn" />
          <div>指挥作战</div>
        </div>
        <div class="button2">
          <i class="material-btn" />
          <div>物资</div>
        </div>
        <div class="button2">
          <i class="event-btn" />
          <div>事件</div>
        </div>
        <div class="button2">
          <i class="plot-btn" />
          <div>协同标绘</div>
        </div>
      </div>
      <i v-if="!!eventId" v-show="!fullscreen" :class="showMenu ? 'arrow-icon' : 'arrow-icon turn'" @click="showMenu = !showMenu" />
    </div>

    <div v-if="!!eventId" v-show="showMenu && !fullscreen">
      <EventBox :eventId="eventId" />
    </div>
  </div>

</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import EventBox from "./EventBox.vue";
import SearchBtn from "./SearchBtn.vue";

const router = useRouter();
const route = useRoute();
const eventId = ref('');
let fullscreen = ref(false);
let showMenu = ref(true);
let mapRef = ref(null);
let map2Ref = ref(null);
// logical vectorgraph satellite satellite2 satellite3
let activeMap = ref('vectorgraph');
let pointType = ref([]);


const toIndex = () => {
  router.push('/leader/index');
};

// 地图增加一级
const handleAdd = () => {
  let map = getMap();
  if (!!map) {
    map.setZoom(map.getZoom() + 1);
  }
}
// 地图减小一级
const handleReduce = () => {
  let map = getMap();
  if (!!map) {
    map.setZoom(map.getZoom() - 1);
  }
}
// 全屏
const handleFullscreen = () => {
  fullscreen.value = !fullscreen.value;
}
const getMap = () => {
  let map;
  if (['satellite2', 'satellite3'].includes(activeMap.value)) {

  } else {
    map = mapRef.value.getMap();
  }
  return map;
}
onMounted(() => {
  eventId.value = route.query.event_id as string;
})
</script>

<style lang="scss" scoped>
.container {
  .top-content {
    width: 100%;
    height: 100%;
    position: relative;
    .arrow-icon {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 24px;
      background: url('@/assets/images/command/arrow.png') no-repeat;
      background-size: 100% 100%;
    }
    .turn {
      transform: translateX(-50%) rotateX(180deg);
    }
  }
}

.top-left-panel {
  position: absolute;
  top: 16px;
  left: 16px;
}
.top-right-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 16px;
  top: 16px;
  .add-button {
    background: url('@/assets/images/command/add.png') no-repeat;
  }
  .reduce-button {
    background: url('@/assets/images/command/reduce.png') no-repeat;
  }
  .fullScreen-button {
    background: url('@/assets/images/command/fullScreen.png') no-repeat;
  }
  .layer-button {
    background: url('@/assets/images/command/layer.png') no-repeat;
  }
  .button1 {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    cursor: pointer;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }

}

.bottom-left-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 16px;
  bottom: 16px;

  .button2 {
    margin-bottom: 16px;
    min-width: 87px;
    height: 26px;
    background: #2C81FF;
    border-radius: 2px;
    display: flex;
    padding: 0 11px;
    align-items: center;
    font-size: 12px;
    color: #ffffff;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .back-btn {
    width: 12px;
    height: 12px;
    background: url('@/assets/images/command/back.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 6px;
  }
  .material-btn {
    width: 13px;
    height: 12px;
    background: url('@/assets/images/command/material.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 6px;
  }
  .event-btn {
    width: 13px;
    height: 12px;
    background: url('@/assets/images/command/event.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 6px;
  }
  .plot-btn {
    width: 12px;
    height: 12px;
    background: url('@/assets/images/command/plot.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 6px;
  }
}
.containerHeight1 {
  height: calc(100vh - 359px);
}
.containerHeight2 {
  height: calc(100vh - 55px);
}
</style>