增加mediaInfo路由

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

@@ -2,118 +2,112 @@
   <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 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>
-          </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 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 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 v-else>
+                --
               </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>
+          <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-item">
-                <div class="fileInfo-detail-info-item-title">
-                  拍摄时间
-                </div>
-                <div class="fileInfo-detail-info-item-content">
-                  {{ state.info.picture_time || '--' }}
-                </div>
+              <div class="fileInfo-detail-info-map-title-icon">
+                <EnvironmentOutlined @click="onClickMapLocationReset" />
               </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 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>
-          </a-col>
-        </a-row>
+          </div>
+        </div>
       </div>
       <div class="fileInfo-area">
         <a-tooltip placement="bottom" title="下载">
@@ -354,8 +348,10 @@ const onClickSelected = async (id: string) => {
   }
 
   &-detail {
+    display: flex;
+
     &-left {
-      width: calc(100vw - 420px);
+      flex: 1;
       height: calc(100vh - 130px);
       overflow: hidden;
 
@@ -370,7 +366,7 @@ const onClickSelected = async (id: string) => {
     }
 
     &-info {
-      width: 100%;
+      width: 420px;
       height: calc(100vh - 130px);
       padding: 24px;
       overflow: auto;
@@ -397,10 +393,11 @@ const onClickSelected = async (id: string) => {
         &-title {
           width: 85px;
           color: hsla(0, 0%, 100%, .45);
+          margin-right: 16px;
         }
 
         &-content {
-          margin-left: 16px;
+          flex: 1;
 
           &-line {
             display: flex;

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

@@ -0,0 +1,331 @@
+<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>

Web/src/router/index.ts

@@ -58,6 +58,10 @@ const routes: Array<RouteRecordRaw> = [
       },
     ]
   },
+  {
+    path: '/mediaInfo',
+    component: () => import('/@/pages/page-web/projects/mediaInfo/index.vue')
+  },
   {
     path: '/' + ERouterName.PILOT,
     name: ERouterName.PILOT,