shangyun/Web/src/pages/page-web/projects/mediaInfo/index.vue

<template>
  <div class="mediaInfo">
    <div class="mediaInfo-detail">
      <div class="mediaInfo-detail-left">
        <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="mediaInfo-detail-info">
        <div class="mediaInfo-detail-info-title">
          详细信息
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            文件名称
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.file_name || '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            文件类型
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.picture_type || '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            任务名称
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.task_name || '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            航线名称
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.wayline_name || '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            分辨率
          </div>
          <div class="mediaInfo-detail-info-item-content">
            <div class="mediaInfo-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="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            文件大小
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.size > 0 ? (state.info.size / 1024 / 1024).toFixed(1) + 'M' : '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            拍摄负载
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.payload || '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-item">
          <div class="mediaInfo-detail-info-item-title">
            拍摄时间
          </div>
          <div class="mediaInfo-detail-info-item-content">
            {{ state.info.picture_time || '--' }}
          </div>
        </div>
        <div class="mediaInfo-detail-info-map">
          <div class="mediaInfo-detail-info-map-title">
            <div class="mediaInfo-detail-info-map-title-text">
              照片位置
            </div>
            <div class="mediaInfo-detail-info-map-title-icon">
              <EnvironmentOutlined @click="onClickMapLocationReset" />
            </div>
          </div>
          <div class="mediaInfo-detail-info-map-content">
            <div id="photoPositionMap" :style="{ width: '100%', height: '100%' }"></div>
            <div class="mediaInfo-detail-info-map-content-title">
              <span>
                {{ state.info.latitude }}° N
              </span>
              <span>
                {{ state.info.longitude }}° E
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { EnvironmentOutlined } 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 { wgs84togcj02 } from '../../../../vendors/coordtransform'
import router from '/@/router';

const state = reactive({
  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: [],
    thumbnail_url: '',
  },
  map: null, // 高德地图实例
})

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

const init = async () => {
  const { query } = router.currentRoute.value;
  const fileId = query.fileId;
  if (!fileId) {
    return;
  }
  try {
    const res = await apis.fetchFileDetail(fileId as string);
    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 onClickMapLocationReset = () => {
  const markerPosition = state.info.coordinates;
  const map: any = state.map;
  map.setCenter(markerPosition);
  map.setZoom(17);
}
</script>

<style lang="scss">
.mediaInfo {
  width: 100%;
  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 {
    height: 100vh;
    display: flex;

    &-left {
      flex: 1;
      height: 100%;
      padding: 24px 0 24px 24px;
      overflow: hidden;

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

    &-info {
      width: 420px;
      height: 100%;
      padding: 24px;
      overflow: auto;

      &-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;
          }
        }
      }
    }
  }
}

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

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