shangyun/Web/src/pages/page-web/projects/media/detail/components/FileInfo.vue

<template>
  <div class="fileInfo">
    <a-spin :spinning="state.downloadLoading" tip="下载中...">
      <div class="fileInfo-detail">
        <div class="fileInfo-detail-left">
          <div class="fileInfo-detail-left-background" v-if="state.imgLoading">
            <a-spin tip="加载中..." />
          </div>
          <Panoramic :src="state.info.url" v-if="state.info.media_type === 3" />
          <video style="width: 100%;height: 100%;" controls :src="state.info.url"
            v-else-if="state.info.media_type === 4"></video>
          <a-image style="object-fit:cover;" width="100%" height="100%" :src="state.info.url" v-else />
        </div>
        <div class="fileInfo-detail-info">
          <CloseOutlined class="fileInfo-detail-info-close" @click="onClose" />
          <div class="fileInfo-detail-info-title">
            详细信息
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              文件名称
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.file_name || '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              文件类型
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.picture_type || '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              任务名称
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.task_name || '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              航线名称
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.wayline_name || '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              分辨率
            </div>
            <div class="fileInfo-detail-info-item-content">
              <div class="fileInfo-detail-info-item-content-line"
                v-if="state.info.image_width && state.info.image_height">
                {{ state.info.image_width }}*{{ state.info.image_height }}
              </div>
              <div v-else>
                --
              </div>
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              文件大小
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.size > 0 ? (state.info.size / 1024 / 1024).toFixed(1) + 'M' : '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              拍摄负载
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.payload || '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-item">
            <div class="fileInfo-detail-info-item-title">
              拍摄时间
            </div>
            <div class="fileInfo-detail-info-item-content">
              {{ state.info.picture_time || '--' }}
            </div>
          </div>
          <div class="fileInfo-detail-info-map">
            <div class="fileInfo-detail-info-map-title">
              <div class="fileInfo-detail-info-map-title-text">
                照片位置
              </div>
              <div class="fileInfo-detail-info-map-title-icon">
                <EnvironmentOutlined @click="onClickMapLocationReset" />
              </div>
            </div>
            <div class="fileInfo-detail-info-map-content">
              <div id="photoPositionMap" :style="{ width: '100%', height: '100%' }"></div>
              <div class="fileInfo-detail-info-map-content-title">
                <span>
                  {{ state.info.latitude }}° N
                </span>
                <span>
                  {{ state.info.longitude }}° E
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fileInfo-area">
        <a-tooltip placement="bottom" title="下载">
          <DownloadOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickDownload" />
        </a-tooltip>
        <div v-if="[1, 3].includes(state.info.media_type)">
          <a-tooltip placement="bottom" title="在地图上加载" v-if="!state.info.element_id">
            <AimOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickCreateMapElement" />
          </a-tooltip>
          <a-tooltip placement="bottom" title="在地图上取消加载" v-else>
            <AimOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickDeleteMapElement" />
          </a-tooltip>
        </div>
      </div>
      <div class="fileInfo-previewList">
        <div class="fileInfo-previewList-button" @click="onClickScroll('LEFT')" @mousedown.prevent>
          <VerticalRightOutlined />
        </div>
        <div ref="contentRef" class="fileInfo-previewList-content">
          <img
            :class="['fileInfo-previewList-content-item', state.currentId === item.file_id ? 'fileInfo-previewList-content-item-selected' : '']"
            v-for="item in fileList" :src="item.thumbnail_url" @click="onClickSelected(item.file_id)" />
        </div>
        <div class="fileInfo-previewList-button" @click="onClickScroll('RIGHT')" @mousedown.prevent>
          <VerticalLeftOutlined />
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { CloseOutlined, EnvironmentOutlined, DownloadOutlined, AimOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons-vue';
import Panoramic from '/@/components/panoramic/index.vue';
import { useGMapManage } from '/@/hooks/use-g-map';
import { apis } from '/@/api/custom';
import { downloadFile } from '/@/utils/common';
import { downloadMediaFile } from '/@/api/media';
import { wgs84togcj02 } from '../../../../../../vendors/coordtransform'
import { getWorkspaceId } from '/@/utils/index'

interface Props {
  fileId: string,
  fileList: any[],
  onClose: () => Promise<any>,
};

const props = withDefaults(defineProps<Props>(), {

});

const state = reactive({
  currentId: props.fileId,
  downloadLoading: false,
  imgLoading: false,// 图片加载
  info: {
    url: '',
    media_type: 0,
    file_id: '',
    element_id: '',
    file_name: '',
    picture_type: '',
    task_name: '',
    wayline_name: '',
    image_width: '',// 照片分辨率-宽度
    image_height: '',// 照片分辨率-高度
    size: 0,
    payload: '',
    picture_time: '',
    longitude: '',// 经度
    latitude: '',// 纬度
    coordinates: [],
  },
  map: null,// 高德地图实例
})

const contentRef = ref();

// 高德地图Hook
const AmapHook = useGMapManage();

const init = async () => {
  try {
    const res = await apis.fetchFileDetail(state.currentId);
    state.info = {
      ...res.data,
      longitude: res.data.longitude ? res.data.longitude.toFixed(6) : '',
      latitude: res.data.latitude ? res.data.latitude.toFixed(6) : '',
      coordinates: (res.data.longitude && res.data.latitude) ? wgs84togcj02(res.data.longitude, res.data.latitude) : [],
    };
    if (res.data.media_type !== 4) {
      state.imgLoading = true;
      const img = new Image();
      img.src = state.info.url;
      img.onload = () => {
        state.imgLoading = false;
      };
    }
    if (state.info.coordinates.length) {
      const AMap = await AmapHook.asyncInitMap();
      const map = new AMap.Map('photoPositionMap', {
        layers: [new AMap.TileLayer.Satellite()],// 卫星图-图层
        viewMode: '3D',// 3D地图
        rotateEnable: true,// 开启地图旋转交互
        pitchEnable: true,// 开启地图倾斜交互
        zoom: 17, // 初始化地图层级
        center: state.info.coordinates,// 中心点
      })
      state.map = map;
      // 创建一个标记并将其添加到地图上
      new AMap.Marker({
        map: map,
        cursor: 'pointer',
        position: state.info.coordinates,
      });
    }
  } catch (e) {
    console.error(e);
  }
}

onMounted(async () => {
  await init()
})

// 点击下载
const onClickDownload = async () => {
  state.downloadLoading = true;
  try {
    const workspaceId: string = getWorkspaceId();
    const res = await downloadMediaFile(workspaceId, state.info.file_id)
    if (!res) {
      return
    }
    const data = new Blob([res])
    downloadFile(data, state.info.file_name)
  } catch (e) {
    console.error(e);
  } finally {
    state.downloadLoading = false;
  }
}

// 点击在地图上加载
const onClickCreateMapElement = async () => {
  try {
    const id = state.info.file_id;
    const res = await apis.createMapElement(id);
    state.info.element_id = res.data.element_id;
    message.success('在地图上加载成功');
  } catch (e: any) {
    console.error(e);
  }
}

// 点击在地图上取消加载
const onClickDeleteMapElement = async () => {
  try {
    const id = state.info.file_id;
    await apis.deleteMapElement(id);
    state.info.element_id = '';
    message.success('在地图上取消加载成功');
  } catch (e: any) {
    console.error(e);
  }
}

// 点击地图位置重置
const onClickMapLocationReset = () => {
  const markerPosition = state.info.coordinates;
  const map: any = state.map;
  map.setCenter(markerPosition);
  map.setZoom(17);
}

// 点击滚动
const onClickScroll = (type: 'LEFT' | 'RIGHT') => {
  const contentElement = contentRef.value;
  const scrollAmount = 80; // 滚动的像素数等于图片宽度
  if (type === 'LEFT') {
    contentElement.scrollLeft -= scrollAmount; // 向左滚动
  } else if (type === 'RIGHT') {
    contentElement.scrollLeft += scrollAmount; // 向右滚动
  }
};

// 点击选中
const onClickSelected = async (id: string) => {
  state.currentId = id;
  state.downloadLoading = false;
  state.imgLoading = false;
  state.info = {
    url: '',
    media_type: 0,
    file_id: '',
    element_id: '',
    file_name: '',
    picture_type: '',
    task_name: '',
    wayline_name: '',
    image_width: '',// 照片分辨率-宽度
    image_height: '',// 照片分辨率-高度
    size: 0,
    payload: '',
    picture_time: '',
    longitude: '',// 经度
    latitude: '',// 纬度
    coordinates: [],
  }
  await init()
}
</script>

<style lang="scss">
.fileInfo {
  width: 100%;
  height: 100vh;
  background: #1C1C1C;
  color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  overflow: auto;

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    border: none;
    background: rgb(89, 89, 89);
  }

  &-detail {
    display: flex;

    &-left {
      flex: 1;
      height: calc(100vh - 130px);
      overflow: hidden;

      &-background {
        width: 100%;
        height: 100%;
        padding: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    &-info {
      width: 420px;
      height: calc(100vh - 130px);
      padding: 24px;
      overflow: auto;

      &-close {
        font-size: 20px;
        position: absolute;
        right: 24px;
        top: 24px;
        cursor: pointer;
      }

      &-title {
        font-size: 16px;
        margin-bottom: 16px;
      }

      &-item {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;

        &-title {
          width: 85px;
          color: hsla(0, 0%, 100%, .45);
          margin-right: 16px;
        }

        &-content {
          flex: 1;

          &-line {
            display: flex;
            align-items: center;
          }
        }
      }

      &-map {
        &-title {
          height: 38px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-text {
            color: hsla(0, 0%, 100%, .45);
          }

          &-icon {
            color: $primary;
          }
        }

        &-content {
          width: 100%;
          height: 250px;
          background: #dddddd;
          border-radius: 4px;
          margin-top: 10px;
          position: relative;
          overflow: hidden;

          &-title {
            width: 100%;
            height: 28px;
            padding-left: 10px;
            background: rgba(0, 0, 0, .5);
            line-height: 28px;
            font-size: 14px;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }

  &-area {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-previewList {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    &-content {
      width: calc(100vw - 80px);
      display: flex;
      overflow: auto;
      scrollbar-width: none;

      &-item {
        width: 80px;
        height: 60px;
        object-fit: cover;
        border: 2px solid transparent;
        border-radius: 4px;
        margin-right: 10px;
        cursor: pointer;

        &-selected {
          border-color: $primary;
        }
      }

      &-item:last-child {
        margin: 0;
      }
    }

    &-button {
      width: 30px;
      height: 60px;
      border: 1px solid #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}

.amap-logo {
  display: none !important;
}

.amap-copyright {
  display: none !important;
}
</style>