DiKongGanZhiPingTai/src/views/demo/system/mediaLibrary/path/index.vue

<template>
  <div class="pathModal">
    <!-- 左侧目录 -->
    <div
      class="leftMenuDiv"
      :style="{
        width: leftMenuShow ? '340px' : '0px',
      }"
    >
      <PathLeftMenu
        :leftMenuShow="leftMenuShow"
        :floderName="floderName"
        :allImageDataList="allImageDataList"
        :nowShowImageData="nowShowImageData"
        @changeLeftMenuShow="changeLeftMenuShow"
        @handlerLocation="handlerLocation"
        @closePathModal="closePathModal"
        @setNowShowImageData="setNowShowImageData"
        @handleSuccessPath="handleSuccessPath"
        @funUpdateDisplayOrShowOnMapData="funUpdateDisplayOrShowOnMapData"
      />
    </div>
    <!-- 地图 -->
    <div class="mapDiv" :style="{ width: dynamicWidth }">
      <PathMap
        ref="pathMapRef"
        :allImageDataList="allImageDataList"
        :nowShowImageData="nowShowImageData"
        @setNowShowImageData="setNowShowImageData"
        @setAllImageData="setAllImageData"
        :updateDisplayOrShowOnMapData="updateDisplayOrShowOnMapData"
      />
    </div>
    <!-- 地图照片 -->
    <div class="imageInfoDiv" v-if="imageInfoShow">
      <PathImageInfo
        :allImageDataList="allImageDataList"
        :nowShowImageData="nowShowImageData"
        @setNowShowImageData="setNowShowImageData"
        @handlerLocation="handlerLocation"
        @handleSuccessPath="handleSuccessPath"
        @funUpdateDisplayOrShowOnMapData="funUpdateDisplayOrShowOnMapData"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, computed, onMounted } from 'vue';
  import { PathLeftMenu, PathMap, PathImageInfo } from './path';
  import { cloneDeep } from 'lodash-es';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage, createConfirm } = useMessage();

  const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName']);
  const emits = defineEmits(['closePathModal', 'handleSuccessPath']);
  // 地图宽度
  const dynamicWidth = computed(() => {
    let width = 0;
    // 左侧目录
    if (leftMenuShow.value) {
      width += 340;
    }
    // 地图照片
    if (imageInfoShow.value) {
      width += 720;
    }
    return 'calc(100% - ' + width + 'px)';
  });

  // 地图ref
  const pathMapRef = ref();

  // 左侧目录是否显示----------------------------------------------------
  const leftMenuShow = ref(false);
  function changeLeftMenuShow() {
    leftMenuShow.value = !leftMenuShow.value;
  }

  // 右侧图片是否显示----------------------------------------------------
  const imageInfoShow = ref(false);
  // 当前展示的图片
  const nowShowImageData = ref();
  const allImageDataList = ref();
  // 修改display或者showOnMap
  const updateDisplayOrShowOnMapData = ref();
  function funUpdateDisplayOrShowOnMapData(value) {
    updateDisplayOrShowOnMapData.value = value;
  }

  watch(
    () => props.nowShowImageData,
    () => {
      nowShowImageData.value = props.nowShowImageData;
    },
    {
      deep: true,
      immediate: true,
    },
  );
  watch(
    () => props.allImageDataList,
    () => {
      allImageDataList.value = props.allImageDataList;
    },
    {
      deep: true,
      immediate: true,
    },
  );

  // 设置当前展示的图片
  function setNowShowImageData(value) {
    if (value.id) {
      imageInfoShow.value = true;
    } else {
      imageInfoShow.value = false;
    }
    nowShowImageData.value = value;
    pathMapRef.value.setNowShowImageByRight();
  }

  // 其他方法-----------------------------------------------------------------
  // 关闭弹窗
  function closePathModal() {
    emits('closePathModal');
  }

  // 移动位置
  function handlerLocation(position) {
    pathMapRef.value.handlerLocation([position.lng, position.lat]);
  }
  // 刷新列表和当前值
  function handleSuccessPath() {
    emits('handleSuccessPath');
  }
</script>
<style lang="less" scoped>
  .pathModal {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;

    .leftMenuDiv {
      position: relative;
      height: 100%;
    }

    .mapDiv {
      position: relative;
      height: 100%;
      // width: auto;
    }

    .annotationInfoDiv {
      position: relative;
      height: 100%;
      width: 320px;
    }

    .areaInfoDiv {
      position: relative;
      height: 100%;
      width: 320px;
    }

    .imageInfoDiv {
      position: relative;
      height: 100%;
      // width: 37%;
      width: 720px;
      // min-width: 720px;
    }
  }
</style>