完善设备管理、媒体管理

Web/src/components/devices/changeRecord/components/Search.vue

@@ -8,16 +8,16 @@
         <a-form-item name="device_name">
           <a-select style="width: 200px;" placeholder="请选择设备型号" v-model:value="formModel.device_name">
             <a-select-option value="1">
-              1
+              Dock 2
             </a-select-option>
             <a-select-option value="2">
-              2
+              M30
             </a-select-option>
             <a-select-option value="3">
-              3
+              Mavice 3E
             </a-select-option>
             <a-select-option value="4">
-              4
+              DJI
             </a-select-option>
           </a-select>
         </a-form-item>

Web/src/components/devices/changeRecord/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="changeRecord">
-    <Search :onClickSearch="async () => { }" :onClickReset="async () => { }" />
+    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div class="changeRecord-table">
       <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
         :loading="state.listLoading" :columns="columns" @change="refreshData" :rowClassName="rowClassName"
@@ -130,6 +130,16 @@ const refreshData = async (page: any) => {
   paginationConfig.pageSize = page?.pageSize!
   await fetchList();
 }
+
+// 点击搜索
+const onClickSearch = async () => {
+  console.log('点击搜索');
+}
+
+// 点击重置
+const onClickReset = async () => {
+  console.log('点击重置');
+}
 </script>
 
 <style lang="scss">

Web/src/components/devices/deviceList/components/Search.vue

@@ -35,32 +35,32 @@
         <a-form-item name="status">
           <a-select style="width: 200px;" placeholder="请选择状态" v-model:value="formModel.status">
             <a-select-option value="1">
-              1
+              设备空闲中
             </a-select-option>
             <a-select-option value="2">
-              2
+              设备已离线
             </a-select-option>
             <a-select-option value="3">
-              3
+              舱内关机
             </a-select-option>
             <a-select-option value="4">
-              4
+              离线
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item name="device_name">
           <a-select style="width: 200px;" placeholder="请选择设备型号" v-model:value="formModel.device_name">
             <a-select-option value="1">
-              1
+              Dock 2
             </a-select-option>
             <a-select-option value="2">
-              2
+              M30
             </a-select-option>
             <a-select-option value="3">
-              3
+              Mavice 3E
             </a-select-option>
             <a-select-option value="4">
-              4
+              DJI
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -91,7 +91,7 @@
         项目名称
       </div>
       <div>
-        上海展域航空技术有限公司
+        {{ state.deviceInfo.name }}
       </div>
     </div>
     <div class="modal-item">
@@ -99,7 +99,7 @@
         设备绑定码
       </div>
       <div>
-        PB97VR
+        {{ state.deviceInfo.code }}
       </div>
     </div>
   </a-modal>
@@ -130,6 +130,10 @@ const formModel = reactive({
 
 const state = reactive({
   visible: false,
+  deviceInfo: {
+    name: '上海展域航空技术有限公司',
+    code: 'PB97VR',
+  },
 })
 
 // 点击查询

Web/src/components/devices/deviceList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="deviceList">
-    <Search :selectedRowKeys="state.selectedRowKeys" :onClickDelete="onClickBatchDelete"
-      :onClickSearch="async () => { }" :onClickReset="async () => { }" />
+    <Search :selectedRowKeys="state.selectedRowKeys" :onClickDelete="onClickBatchDelete" :onClickSearch="onClickSearch"
+      :onClickReset="onClickReset" />
     <div class="deviceList-table">
       <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
         :loading="state.listLoading" :columns="columns" :dataSource="state.list" @change="refreshData"
@@ -200,7 +200,7 @@ const columns = [
     title: '操作',
     dataIndex: 'actions',
     fixed: 'right',
-    width: 150,
+    width: 120,
     slots: { customRender: 'action' },
   },
 ]
@@ -230,6 +230,16 @@ const onClickBatchDelete = async () => {
   console.log(state.selectedRowKeys, '点击批量删除');
 }
 
+// 点击搜索
+const onClickSearch = async () => {
+  console.log('点击搜索');
+}
+
+// 点击重置
+const onClickReset = async () => {
+  console.log('点击重置');
+}
+
 // 点击设备日志
 const onClickDeviceLog = (record: any) => {
   state.deviceLogDrawerVisible = true;

Web/src/components/devices/feedbackRecord/components/Search.vue

@@ -8,32 +8,23 @@
         <a-form-item name="status">
           <a-select style="width: 200px;" placeholder="请选择状态" v-model:value="formModel.status">
             <a-select-option value="1">
-              1
+              设备空闲中
             </a-select-option>
             <a-select-option value="2">
-              2
+              设备已离线
             </a-select-option>
             <a-select-option value="3">
-              3
+              舱内关机
             </a-select-option>
             <a-select-option value="4">
-              4
+              离线
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item name="device_name">
           <a-select style="width: 200px;" placeholder="请选择反馈人" v-model:value="formModel.device_name">
             <a-select-option value="1">
-              1
-            </a-select-option>
-            <a-select-option value="2">
-              2
-            </a-select-option>
-            <a-select-option value="3">
-              3
-            </a-select-option>
-            <a-select-option value="4">
-              4
+              pilot
             </a-select-option>
           </a-select>
         </a-form-item>

Web/src/components/devices/feedbackRecord/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="feedbackRecord">
-    <Search :onClickSearch="async () => { }" :onClickReset="async () => { }" />
+    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div class="feedbackRecord-table">
       <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="device_sn"
         :loading="state.listLoading" :columns="columns" @change="refreshData" :rowClassName="rowClassName"
@@ -29,7 +29,7 @@
           <div class="editable-row-operations">
             <div class="flex-align-center flex-row" style="color: #2d8cf0">
               <a-tooltip title="详情">
-                <FileSearchOutlined style="margin-right: 10px;" @click="onClickEdit(record.id)" />
+                <FileSearchOutlined style="margin-right: 10px;" @click="onClickDetail(record.id)" />
               </a-tooltip>
               <a-tooltip title="删除">
                 <DeleteOutlined @click="onClickDelete(record.id)" />
@@ -152,7 +152,7 @@ const columns = [
     title: '操作',
     dataIndex: 'operation',
     fixed: 'right',
-    width: 100,
+    width: 80,
     slots: { customRender: 'operation' }
   },
 ]
@@ -171,8 +171,18 @@ const refreshData = async (page: any) => {
   await fetchList();
 }
 
-// 点击编辑
-const onClickEdit = (id: string) => {
+// 点击搜索
+const onClickSearch = async () => {
+  console.log('点击搜索');
+}
+
+// 点击重置
+const onClickReset = async () => {
+  console.log('点击重置');
+}
+
+// 点击详情
+const onClickDetail = (id: string) => {
   state.currentId = id;
   state.drawerVisible = true;
 }

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

@@ -1,56 +1,56 @@
 <template>
-  <div class="imageModal">
-    <div class="imageModal-detail">
+  <div class="fileInfo">
+    <div class="fileInfo-detail">
       <a-row>
         <a-col flex="auto">
-          <div class="imageModal-detail-left">
-            <img :src="state.info.url" />
+          <div class="fileInfo-detail-left">
+            <a-image width="100%" height="100%" :src="state.info.url" />
           </div>
         </a-col>
         <a-col flex="420px">
-          <div class="imageModal-detail-info">
-            <CloseOutlined class="imageModal-detail-info-close" @click="onClose" />
-            <div class="imageModal-detail-info-title">
+          <div class="fileInfo-detail-info">
+            <CloseOutlined class="fileInfo-detail-info-close" @click="onClose" />
+            <div class="fileInfo-detail-info-title">
               详细信息
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 照片名称
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.file_name || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 照片类型
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.file_type || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 任务名称
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.task_name || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 航线名称
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.wayline_name || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 照片分辨率
               </div>
-              <div class="imageModal-detail-info-item-content">
-                <div class="imageModal-detail-info-item-content-line"
+              <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>
@@ -59,56 +59,56 @@
                 </div>
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 照片大小
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.size || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 拍摄负载
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.payload || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 拍摄来源
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.source_from || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 拍摄时间
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.picture_time || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-item">
-              <div class="imageModal-detail-info-item-title">
+            <div class="fileInfo-detail-info-item">
+              <div class="fileInfo-detail-info-item-title">
                 已关注进度
               </div>
-              <div class="imageModal-detail-info-item-content">
+              <div class="fileInfo-detail-info-item-content">
                 {{ state.info.hot || '--' }}
               </div>
             </div>
-            <div class="imageModal-detail-info-map">
-              <div class="imageModal-detail-info-map-title">
-                <div class="imageModal-detail-info-map-title-text">
+            <div class="fileInfo-detail-info-map">
+              <div class="fileInfo-detail-info-map-title">
+                <div class="fileInfo-detail-info-map-title-text">
                   照片位置
                 </div>
-                <div class="imageModal-detail-info-map-title-icon">
+                <div class="fileInfo-detail-info-map-title-icon">
                   <EnvironmentOutlined />
                 </div>
               </div>
-              <div class="imageModal-detail-info-map-content">
+              <div class="fileInfo-detail-info-map-content">
                 <div id="photoPositionMap" :style="{ width: '100%', height: '100%' }"></div>
               </div>
             </div>
@@ -116,16 +116,16 @@
         </a-col>
       </a-row>
     </div>
-    <div class="imageModal-area">
-      <a-tooltip title="record.file_name">
+    <div class="fileInfo-area">
+      <a-tooltip placement="bottom" title="下载">
         <DownloadOutlined style="font-size: 20px;margin-right: 20px;" />
       </a-tooltip>
-      <a-tooltip title="record.file_name">
+      <a-tooltip placement="bottom" title="删除">
         <DeleteOutlined style="font-size: 20px;" />
       </a-tooltip>
     </div>
-    <div class="imageModal-previewList">
-      <div class="imageModal-previewList-item">
+    <div class="fileInfo-previewList">
+      <div class="fileInfo-previewList-item">
         <img :src="state.info.url" />
       </div>
     </div>
@@ -148,7 +148,6 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const state = reactive({
-  loading: false,
   info: {
     url: '',
     file_name: '',
@@ -171,26 +170,29 @@ const state = reactive({
 const AmapHook = useGMapManage();
 
 onMounted(async () => {
-  state.loading = true;
   try {
     const res = await apis.fetchFileDetail(props.fileId);
     state.info = res.data;
     if (state.info.longitude && state.info.latitude) {
       AmapHook.newMap('photoPositionMap', {
+        pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
+        viewMode: '3D', // 地图模式
+        rotateEnable: true, // 是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
+        pitchEnable: true, // 是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
+        zoom: 17, // 初始化地图层级
+        rotation: -15, // 初始地图顺时针旋转的角度
+        zooms: [2, 20], // 地图显示的缩放级别范围
         center: [state.info.longitude, state.info.latitude],
-        zoom: 14
       })
     }
   } catch (e) {
     console.error(e);
-  } finally {
-    state.loading = false;
   }
 })
 </script>
 
 <style lang="scss">
-.imageModal {
+.fileInfo {
   width: 100%;
   height: 100vh;
   background: #1C1C1C;
@@ -198,7 +200,7 @@ onMounted(async () => {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 9999;
+  z-index: 9;
   overflow: auto;
 
   ::-webkit-scrollbar {
@@ -218,12 +220,6 @@ onMounted(async () => {
       width: 100%;
       height: calc(100vh - 120px);
       overflow: hidden;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
     }
 
     &-info {

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

@@ -1,18 +1,22 @@
 <template>
   <a-row style="margin-bottom: 20px;" justify="space-between">
-    <a-col style="display: flex;">
-      <a-upload :action="uploadUrl" method="POST" :headers="getHeaders()" accept=".png,.jpg,.jpeg" :multiple="false"
-        :showUploadList="false" @change="handleChangeUploadFile">
-        <a-button type="primary" @click="onClickDownload">
-          上传合成文件
+    <a-col>
+      <div style="display: flex;">
+        <a-upload :action="uploadUrl" method="POST" :headers="getHeaders()" accept=".png,.jpg,.jpeg" :multiple="false"
+          :showUploadList="false" @change="handleChangeUploadFile">
+          <a-button style="margin-right: 10px;" type="primary" @click="onClickDownload">
+            上传合成文件
+          </a-button>
+        </a-upload>
+        <a-button style="margin-right: 10px;" type="primary" :disabled="!selectedRowKeys.length"
+          @click="onClickDownload" v-if="mode === 'table'">
+          压缩下载
+        </a-button>
+        <a-button type="primary" danger :disabled="!selectedRowKeys.length" @click="onClickDelete"
+          v-if="mode === 'table'">
+          删除
         </a-button>
-      </a-upload>
-      <a-button style="margin: 0 10px;" type="primary" :disabled="!selectedRowKeys.length" @click="onClickDownload">
-        压缩下载
-      </a-button>
-      <a-button type="primary" danger :disabled="!selectedRowKeys.length" @click="onClickDelete">
-        删除
-      </a-button>
+      </div>
     </a-col>
     <a-col>
       <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
@@ -22,16 +26,10 @@
         <a-form-item name="status">
           <a-select style="width: 200px;" placeholder="请选择媒体类型" v-model:value="formModel.status">
             <a-select-option value="1">
-              1
+              原图
             </a-select-option>
             <a-select-option value="2">
-              2
-            </a-select-option>
-            <a-select-option value="3">
-              3
-            </a-select-option>
-            <a-select-option value="4">
-              4
+              截图
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -84,6 +82,7 @@ import router from '/@/router';
 import { ELocalStorageKey } from '/@/types'
 
 interface Props {
+  mode: 'table' | 'list',
   fetchList: () => Promise<any>,
   selectedRowKeys: string[],
   onClickDownload: () => Promise<any>,

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

@@ -1,7 +1,8 @@
 <template>
   <div class="mediaDetail">
-    <Search :fetchList="fetchList" :selectedRowKeys="state.selectedRowKeys" :onClickDownload="onClickBatchDownload"
-      :onClickDelete="onClickBatchDelete" :onClickSearch="async () => { }" :onClickReset="async () => { }" />
+    <Search :mode="state.mode" :fetchList="fetchList" :selectedRowKeys="state.selectedRowKeys"
+      :onClickDownload="onClickBatchDownload" :onClickDelete="onClickBatchDelete" :onClickSearch="onClickSearch"
+      :onClickReset="onClickReset" />
     <div style="background: #FFFFFF;padding: 20px;">
       <div class="mediaDetail-info">
         <div class="mediaDetail-info-left">
@@ -236,6 +237,16 @@ const onClickBatchDelete = async () => {
   console.log(state.selectedRowKeys, '点击批量删除');
 }
 
+// 点击搜索
+const onClickSearch = async () => {
+  console.log('点击搜索');
+}
+
+// 点击重置
+const onClickReset = async () => {
+  console.log('点击重置');
+}
+
 // 点击返回
 const onClickGoBack = () => {
   router.push({ path: '/media' })

Web/src/pages/page-web/projects/media/index/components/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <a-row style="margin-bottom: 20px;" justify="space-between">
     <a-col>
-      <a-button type="primary" :disabled="!selectedRowKeys.length" @click="onClickDownload">
+      <a-button type="primary" :disabled="!selectedRowKeys.length" @click="onClickDownload" v-if="mode === 'table'">
         压缩下载
       </a-button>
     </a-col>
@@ -13,32 +13,17 @@
         <a-form-item name="status">
           <a-select style="width: 200px;" placeholder="请选择任务类型" v-model:value="formModel.status">
             <a-select-option value="1">
-              1
+              飞行类型
             </a-select-option>
             <a-select-option value="2">
-              2
-            </a-select-option>
-            <a-select-option value="3">
-              3
-            </a-select-option>
-            <a-select-option value="4">
-              4
+              航拍类型
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item name="device_name">
           <a-select style="width: 200px;" placeholder="请选择拍摄负载" v-model:value="formModel.device_name">
             <a-select-option value="1">
-              1
-            </a-select-option>
-            <a-select-option value="2">
-              2
-            </a-select-option>
-            <a-select-option value="3">
-              3
-            </a-select-option>
-            <a-select-option value="4">
-              4
+              Mavic 3E Camera
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -88,6 +73,7 @@ import { ref, reactive } from 'vue';
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
 
 interface Props {
+  mode: 'table' | 'list',
   selectedRowKeys: string[],
   onClickDownload: () => Promise<any>,
   onClickSearch: (query: any) => Promise<any>,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="mediaList">
-    <Search :selectedRowKeys="state.selectedRowKeys" :onClickDownload="onClickBatchDownload"
-      :onClickSearch="async () => { }" :onClickReset="async () => { }" />
+    <Search :mode="state.mode" :selectedRowKeys="state.selectedRowKeys" :onClickDownload="onClickBatchDownload"
+      :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div style="background: #FFFFFF;padding: 20px;">
       <div class="mediaList-info">
         <div>
@@ -217,6 +217,16 @@ const onClickBatchDownload = async () => {
   console.log(state.selectedRowKeys, '点击批量下载');
 }
 
+// 点击搜索
+const onClickSearch = async () => {
+  console.log('点击搜索');
+}
+
+// 点击重置
+const onClickReset = async () => {
+  console.log('点击重置');
+}
+
 // 点击文件夹
 const onClickFile = (record: any) => {
   router.push({ path: `/media/${record.id}` })