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">
        <a-row>
          <a-col flex="auto">
            <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 width="100%" height="100%" :src="state.info.url" v-else />
            </div>
          </a-col>
          <a-col flex="420px">
            <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>
          </a-col>
        </a-row>
      </div>
      <div class="fileInfo-area">
        <a-tooltip placement="bottom" title="下载">
          <DownloadOutlined style="font-size: 20px;margin-right: 20px;" @click="onClickDownload" />
        </a-tooltip>
      </div>
      <div class="fileInfo-previewList">
        <div class="fileInfo-previewList-item">
          <img :src="state.info.thumbnail_url" />
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { CloseOutlined, EnvironmentOutlined, DownloadOutlined } 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 { ELocalStorageKey } from '/@/types';
import { downloadMediaFile } from '/@/api/media';

interface Props {
  fileId: string,
  onClose: () => void,
};

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

});

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

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

onMounted(async () => {
  try {
    const res = await apis.fetchFileDetail(props.fileId);
    state.info = res.data;
    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.longitude && state.info.latitude) {
      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.longitude, state.info.latitude],// 中心点
      })
      state.map = map;
      // 创建一个标记并将其添加到地图上
      new AMap.Marker({
        map: map,
        cursor: 'pointer',
        position: [state.info.longitude, state.info.latitude],
      });
    }
  } catch (e) {
    console.error(e);
  }
})

// 点击下载
const onClickDownload = async () => {
  state.downloadLoading = true;
  try {
    const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '';
    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 onClickMapLocationReset = () => {
  const markerPosition = [state.info.longitude, state.info.latitude];
  const map: any = state.map;
  map.setCenter(markerPosition);
  map.setZoom(17);
}
</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 {
    &-left {
      width: calc(100vw - 420px);
      height: calc(100vh - 120px);
      overflow: hidden;

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

    &-info {
      width: 100%;
      height: calc(100vh - 120px);
      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);
        }

        &-content {
          margin-left: 16px;

          &-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: 70px;
    display: flex;
    justify-content: center;

    &-item {
      width: 80px;
      height: 60px;
      border: 2px solid $primary;
      border-radius: 4px;
      margin-bottom: 10px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

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

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