From 555c105699eebe9fda6aa46c1447b4b49323ee3c Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Wed, 30 Aug 2023 10:45:44 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=97=A0=E4=BA=BA=E6=9C=BA?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |   5 +
 src/App.vue                           |   8 +-
 src/api/media.ts                      |  19 ++-
 src/assets/icons/folder.svg           |   1 +
 src/assets/icons/zip.svg              |   1 +
 src/components/MediaPanel.vue         | 230 +++++++++++++++++++-------
 src/main.ts                           |   2 +
 src/pages/page-web/projects/media.vue |  72 ++++----
 8 files changed, 236 insertions(+), 102 deletions(-)
 create mode 100644 src/assets/icons/folder.svg
 create mode 100644 src/assets/icons/zip.svg

diff --git a/package.json b/package.json
index 4a82dd0..ba0c992 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "agora-rtc-sdk-ng": "^4.12.1",
     "ant-design-vue": "^2.2.8",
     "axios": "^0.21.1",
+    "dayjs": "^1.11.9",
     "eventemitter3": "^5.0.0",
     "mitt": "^3.0.0",
     "mqtt": "^4.3.7",
@@ -70,6 +71,7 @@
         "ant-design-vue/es/checkbox/style/css",
         "ant-design-vue/es/col/style/css",
         "ant-design-vue/es/collapse/style/css",
+        "ant-design-vue/es/date-picker/locale/zh_CN",
         "ant-design-vue/es/date-picker/style/css",
         "ant-design-vue/es/divider/style/css",
         "ant-design-vue/es/drawer/style/css",
@@ -80,6 +82,8 @@
         "ant-design-vue/es/input-number/style/css",
         "ant-design-vue/es/input/style/css",
         "ant-design-vue/es/layout/style/css",
+        "ant-design-vue/es/locale-provider/style/css",
+        "ant-design-vue/es/locale/zh_CN",
         "ant-design-vue/es/menu/style/css",
         "ant-design-vue/es/message/style/css",
         "ant-design-vue/es/modal/style/css",
@@ -100,6 +104,7 @@
         "ant-design-vue/es/tree/style/css",
         "ant-design-vue/es/upload/style/css",
         "axios",
+        "dayjs",
         "eventemitter3",
         "lodash",
         "mitt",
diff --git a/src/App.vue b/src/App.vue
index 453e2a5..e7cfa53 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="demo-app">
-    <router-view />
+    <a-locale-provider :locale="zhCN">
+      <router-view />
+    </a-locale-provider>
     <!-- <div class="map-wrapper">
       <GMap/>
     </div> -->
@@ -11,14 +13,14 @@
 import { computed, defineComponent, ref } from 'vue'
 import { useMyStore } from './store'
 import GMap from '/@/components/GMap.vue'
-
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
 export default defineComponent({
   name: 'App',
   components: { GMap },
 
   setup () {
     const store = useMyStore()
-    return {}
+    return { zhCN }
   }
 })
 </script>
diff --git a/src/api/media.ts b/src/api/media.ts
index 59ed04e..1eda5fa 100644
--- a/src/api/media.ts
+++ b/src/api/media.ts
@@ -3,8 +3,13 @@ import request, { IPage, IWorkspaceResponse } from '/@/api/http/request'
 const HTTP_PREFIX = '/media/api/v1'
 
 // Get Media Files
-export const getMediaFiles = async function (wid: string, pagination: IPage, pathId: string): Promise<IWorkspaceResponse<any>> {
-  const url = `${HTTP_PREFIX}/files/${wid}/files?page=${pagination.page}&page_size=${pagination.page_size}&path_id=${pathId}`
+export const getMediaFiles = async function (wid: string, pagination: IPage, pathId?: string): Promise<IWorkspaceResponse<any>> {
+  let url = ''
+  if (pathId) {
+    url = `${HTTP_PREFIX}/files/${wid}/files?page=${pagination.page}&page_size=${pagination.page_size}&father_id=${pathId}`
+  } else {
+    url = `${HTTP_PREFIX}/files/${wid}/files?page=${pagination.page}&page_size=${pagination.page_size}`
+  }
   const result = await request.get(url)
   return result.data
 }
@@ -26,8 +31,8 @@ export const downloadMediaFile = async function (workspaceId: string, fileId: st
 }
 
 // Get Media getFolder
-export const getFolder = async function (workspaceId: string, type: boolean): Promise<IWorkspaceResponse<any>> {
-  const url = `${HTTP_PREFIX}/files/${workspaceId}/folder/${type}`
-  const result = await request.get(url)
-  return result.data
-}
+// export const getFolder = async function (workspaceId: string): Promise<IWorkspaceResponse<any>> {
+//   const url = `${HTTP_PREFIX}/files/${workspaceId}/folder/2`
+//   const result = await request.get(url)
+//   return result.data
+// }
diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg
new file mode 100644
index 0000000..8777f01
--- /dev/null
+++ b/src/assets/icons/folder.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M21.594 19.842H2.903c-.5 0-.903-.359-.903-.803V5.932c0-.444.403-.802.903-.802h18.69c.5 0 .903.358.903.802V19.04c0 .442-.405.803-.902.803z" fill="#FFE9B4"/><path d="M12.26 9.009H2V4.404c0-.5.404-.904.904-.904h7.021c.4 0 .751.26.865.643l1.47 4.866z" fill="#FFA000"/><path d="M21.594 19.842H2.903A.902.902 0 0 1 2 18.94V7.272c0-.5.403-.903.903-.903h18.69c.5 0 .903.404.903.903v11.667a.905.905 0 0 1-.902.903z" fill="#FFCA28"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/zip.svg b/src/assets/icons/zip.svg
new file mode 100644
index 0000000..c915c0a
--- /dev/null
+++ b/src/assets/icons/zip.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M2 12V2.889c0-.49.398-.889.889-.889H21.11c.49 0 .889.398.889.889V12H2z" fill="#00C9FC"/><path d="M22 12v9.111c0 .49-.398.889-.889.889H2.89A.889.889 0 0 1 2 21.111V12h20z" fill="#5ED300"/><path fill="#FF5056" d="M2 9.332h20v5.334H2z"/><path fill="#FFAB00" d="M9.332 2h5.334v20H9.332z"/><path d="M14.445 14.444H9.556a.89.89 0 0 1-.89-.888v-3.112c0-.492.399-.889.89-.889h4.889c.49 0 .889.398.889.889v3.111a.89.89 0 0 1-.889.889zm-4-4a.89.89 0 0 0-.889.89v1.332c0 .492.398.89.889.89h3.111a.889.889 0 0 0 .889-.89v-1.333a.889.889 0 0 0-.889-.889h-3.111z" fill="#FFF"/></g></svg>
\ No newline at end of file
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index 9e13a56..960cbea 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -1,26 +1,95 @@
 <template>
-  <div class="header">Media Files</div>
-  <a-spin :spinning="loading" :delay="1000" tip="downloading" size="large">
+  <div class="header">
+    <a-button  type="primary" large class="btn-primary" @click='createFile'>创建文件夹</a-button>
+    <div v-show="state.selectedRowIds.length" class="other-btn">
+      <a-button   large class="btn-primary">压缩并下载</a-button>
+      <a-button   large class="btn-primary">移动</a-button>
+    </div>
+
+    <div class="search-content">
+      <a-form>
+        <a-row :gutter="16">
+              <a-col :span="10">
+                <a-form-item name="timestamp">
+                  <a-range-picker v-model:value="searchParam.timestamp" show-time/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="7">
+                <a-form-item name="type">
+                  <a-select placeholder="所有类型">
+                    <a-select-option value="searchParam.type">所有类型</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="7">
+                <a-form-item name="type">
+                  <a-select placeholder="所有负载">
+                    <a-select-option value="searchParam.type">所有负载</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+        </a-row>
+        <a-row :gutter="16">
+              <a-col :span="7">
+                <a-form-item name="type">
+                  <a-select placeholder="标签筛选">
+                    <a-select-option value="searchParam.type">所有类型</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="7">
+                <a-form-item name="name">
+                  <a-input v-model:value="searchParam.name" placeholder="按文件名称搜索">
+                    <template #addonAfter>
+                      <ZoomInOutlined />
+                    </template>
+                  </a-input>
+                </a-form-item>
+              </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </div>
+  <a-spin :spinning="loading"  tip="加载中..." size="large">
     <div class="media-panel-wrapper">
-      <a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint"
-        :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
-        <template v-for="col in ['name', 'path']" #[col]="{ text }" :key="col">
-          <a-tooltip :title="text">
-              <a v-if="col === 'name'">{{ text }}</a>
-              <span v-else>{{ text }}</span>
-          </a-tooltip>
-        </template>
-        <template #original="{ text }">
-          {{ text }}
+      <div class="bread-content">
+      <span v-for="(item,index) in breadList" :key="item">{{ item }}<span v-if="index!=breadList.length-1" >/</span></span>
+    </div>
+      <a-table :columns="columns" :data-source="mediaData.data" :scroll="{ x: '100%', y: 400 }" :row-selection="rowSelection" :pagination="paginationProp">
+        <template v-for="col in ['file_name']" #[col]="{ text,index }" :key="col">
+            <div @click="goDetail(mediaData.data[index])">
+              <img src="../assets/icons/folder.svg" v-if='mediaData.data[index].file_type==0'>
+              <img src="../assets/icons/zip.svg" v-if='mediaData.data[index].file_type==2'>
+              <a-image :width="30" :hight="30" v-if='mediaData.data[index].file_type==1' :src="mediaData.data[index].picture_url" :preview="{
+              src: mediaData.data[index].picture_url}"
+              />
+              <a-tooltip :title="text">
+                <a>&nbsp;{{ text }}</a>
+              </a-tooltip>
+            </div>
         </template>
         <template #action="{ record }">
           <a-tooltip title="download">
             <a class="fz18" @click="downloadMedia(record)"><DownloadOutlined /></a>
           </a-tooltip>
-        </template>
-      </a-table>
+    </template>
+  </a-table>
     </div>
   </a-spin>
+  <a-modal v-model:visible="state.folderOpen" :closable="false"  :maskClosable="false">
+    <template #title>
+        <div ref="modalTitleRef" style="width: 100%; cursor: move" class="model-title">创建文件夹</div>
+      </template>
+      <a-input class="ml10"
+        v-model:value="state.fileName"
+        placeholder="请输入文件名"></a-input>
+      <template #footer>
+        <div>
+          <a-button   large class="btn-primary" @click='state.folderOpen=false'>取消</a-button>
+          <a-button  type="primary" large class="btn-primary" @click='state.folderOpen=true'>确定</a-button>
+        </div>
+      </template>
+    </a-modal>
 </template>
 
 <script setup lang="ts">
@@ -31,52 +100,46 @@ import { IPage } from '../api/http/type'
 import { ELocalStorageKey } from '../types/enums'
 import { downloadFile } from '../utils/common'
 import { downloadMediaFile, getMediaFiles } from '/@/api/media'
-import { DownloadOutlined } from '@ant-design/icons-vue'
+import {
+  ZoomInOutlined,
+  DownloadOutlined
+} from '@ant-design/icons-vue'
 import { message, Pagination } from 'ant-design-vue'
-import { load } from '@amap/amap-jsapi-loader'
-import EventBus from '/@/event-bus'
-
 const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
 const loading = ref(false)
 const pathId = ref('')
-
+const searchParam = reactive({ timestamp: [], type: [], name: '' })
+const state = reactive({ selectedRowIds: [], folderOpen: false, fileName: '' })
+const breadList = ref(['全部文件'])
+const breadNum = ref(0)
 const columns = [
   {
-    title: 'File Name',
+    title: '文件名称',
     dataIndex: 'file_name',
     ellipsis: true,
-    slots: { customRender: 'name' }
+    slots: { customRender: 'file_name' }
   },
   {
-    title: 'File Path',
-    dataIndex: 'file_path',
+    title: '拍摄负载',
+    dataIndex: 'payload',
     ellipsis: true,
-    slots: { customRender: 'path' }
   },
-  // {
-  //   title: 'FileSize',
-  //   dataIndex: 'size',
-  // },
   {
-    title: 'Drone',
+    title: '大小',
     dataIndex: 'drone'
+
   },
   {
-    title: 'Payload Type',
-    dataIndex: 'payload'
-  },
-  {
-    title: 'Original',
-    dataIndex: 'is_original',
-    slots: { customRender: 'original' }
-  },
-  {
-    title: 'Created',
+    title: '创建时间',
     dataIndex: 'create_time'
   },
   {
-    title: 'Action',
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
     slots: { customRender: 'action' }
+
   }
 ]
 const body: IPage = {
@@ -88,8 +151,8 @@ const paginationProp = reactive({
   pageSizeOptions: ['20', '50', '100'],
   showQuickJumper: true,
   showSizeChanger: true,
-  pageSize: 50,
-  current: 1,
+  page_size: 50,
+  page: 1,
   total: 0
 })
 
@@ -111,20 +174,18 @@ const mediaData = reactive({
 })
 
 onMounted(() => {
-  // 订阅消息
-  EventBus.on('getFolderFiles', (val) => {
-    pathId.value = val
-
-    getFiles()
-  })
+  // pathId.value = val
+  getFiles()
 })
 
 function getFiles () {
-  getMediaFiles(workspaceId, body, pathId.value).then(res => {
+  loading.value = true
+  getMediaFiles(workspaceId, paginationProp).then(res => {
     mediaData.data = res.data.list
     paginationProp.total = res.data.pagination.total
-    paginationProp.current = res.data.pagination.page
-    console.info(mediaData.data[0])
+    paginationProp.page = res.data.pagination.page
+  }).finally(() => {
+    loading.value = false
   })
 }
 
@@ -147,29 +208,82 @@ function downloadMedia (media: MediaFile) {
   })
 }
 
+const rowSelection = {
+  onChange: (selectedRowKeys:any, selectedRows:any) => {
+    state.selectedRowIds = selectedRows.map((item:any) => item.father_id)
+  },
+}
+const createFile = () => {
+  state.folderOpen = true
+}
+const goDetail = (param:any) => {
+  if (param.file_type !== 0) { return }
+  loading.value = true
+  breadNum.value++
+  breadList.value[breadNum.value] = param.file_name
+  getMediaFiles(workspaceId, paginationProp, param.father_id).then(res => {
+    mediaData.data = res.data.list
+    paginationProp.total = res.data.pagination.total
+    paginationProp.page = res.data.pagination.page
+  }).finally(() => {
+    loading.value = false
+  })
+}
 </script>
 
 <style lang="scss" scoped>
 .media-panel-wrapper {
   width: 100%;
   padding: 16px;
+  .bread-content{
+    background: #fff;
+    padding: 16px;
+  }
   .media-table {
     background: #fff;
-    margin-top: 10px;
   }
   .action-area {
     color: $primary;
     cursor: pointer;
   }
 }
+.video-img{
+  width:25px;
+  height: 25px;
+  margin-right: 8px;
+}
 .header {
   width: 100%;
-  height: 60px;
-  background: #fff;
-  padding: 16px;
-  font-size: 20px;
-  font-weight: bold;
-  text-align: start;
+  padding: 16px 16px 0 16px;
   color: #000;
+  .other-btn{
+    display: inline-block;
+  }
+  &::v-deep{
+    .ant-btn{
+      margin-right: 8px !important;
+    }
+    .ant-calendar-picker{
+      width:100% !important;
+    }
+    .ant-form-item{
+      margin-bottom: 8px !important;
+    }
+  }
+
+  .btn-primary{
+    margin-bottom: 16px;
+  }
+}
+
+.model-title{
+    text-align: center;
+    border: none;
 }
+::v-deep{
+  .ant-modal-header{
+    padding: 0 0 !important;
+  }
+}
+
 </style>
diff --git a/src/main.ts b/src/main.ts
index cb46d6a..07ccd32 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import { CommonComponents } from './use-common-components'
 import 'virtual:svg-icons-register'
 import store, { storeKey } from './store'
 import { createInstance } from '/@/root'
+import dayjs from 'dayjs'
 import '/@/styles/index.scss'
 const app = createInstance(App)
 app.use(store, storeKey)
@@ -12,3 +13,4 @@ app.use(router)
 app.use(CommonComponents)
 app.use(antComponents)
 app.mount('#demo-app')
+app.config.globalProperties.day = dayjs
diff --git a/src/pages/page-web/projects/media.vue b/src/pages/page-web/projects/media.vue
index e02e07b..c378d09 100644
--- a/src/pages/page-web/projects/media.vue
+++ b/src/pages/page-web/projects/media.vue
@@ -1,36 +1,40 @@
 <template>
-  <div class="folder-herder">
-    <a-radio-group @change="changeType"  v-model:value="typeValue" button-style="solid">
-      <a-radio-button class="radio-button" :value="true"
-      >机场文件</a-radio-button
-      >
-      <a-radio-button class="radio-button" :value="false"
-      >普通文件</a-radio-button
+  <div>
+    <!-- 根据需求这部分先注释 -->
+    <!-- <div class="folder-herder">
+      <a-radio-group @change="changeType"  v-model:value="typeValue" button-style="solid">
+        <a-radio-button class="radio-button" :value="true"
+        >机场文件</a-radio-button
+        >
+        <a-radio-button class="radio-button" :value="false"
+        >普通文件</a-radio-button
+        >
+      </a-radio-group>
+    </div>
+    <div class="height-100 project-media-wrapper">
+      <div
+          class="folder-container"
+          v-for="(item, key) in folderData.data"
+          :key="key"
+          @click="selectFolder(key)"
       >
-    </a-radio-group>
-  </div>
-  <div class="height-100 project-media-wrapper">
-    <div
-        class="folder-container"
-        v-for="(item, key) in folderData.data"
-        :key="key"
-        @click="selectFolder(key)"
-    >
-      <a-tag color="blue" v-if="folderData.id === item.id">now</a-tag>
-      <div>
-        <div class="title">{{ item.name }}</div>
-        <div style="font-size: 13px; margin-left: 12px">
-          时间-{{ item.time }}
+        <a-tag color="blue" v-if="folderData.id === item.id">now</a-tag>
+        <div>
+          <div class="title">{{ item.name }}</div>
+          <div style="font-size: 13px; margin-left: 12px">
+            时间-{{ item.time }}
+          </div>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
+
 </template>
 
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue'
 import { ELocalStorageKey } from '/@/types/enums'
-import { getFolder } from '/@/api/media'
+// import { getFolder } from '/@/api/media'
 import EventBus from '/@/event-bus'
 
 const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
@@ -41,21 +45,21 @@ const folderData = reactive<any>({
   id: null,
 })
 
-onMounted(() => {
-  getFolderArr()
-})
+// onMounted(() => {
+//   getFolderArr()
+// })
 
-async function getFolderArr () {
-  folderData.data = []
-  const result = await getFolder(workspaceId, typeValue.value)
-  folderData.id = result.data[0].id
-  folderData.data = result.data
-  loadFiles()
-}
+// async function getFolderArr () {
+//   folderData.data = []
+//   const result = await getFolder(workspaceId)
+//   folderData.id = result.data[0].id
+//   folderData.data = result.data
+//   loadFiles()
+// }
 
 function changeType (val: any) {
   typeValue.value = val.target.value
-  getFolderArr()
+  // getFolderArr()
 }
 
 function selectFolder (index: number) {

From 780c52f9779bcb1b1efd54c88f222873b8fa441d Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Thu, 31 Aug 2023 16:16:06 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E5=92=8C=E7=A7=BB=E5=8A=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/http/type.ts          |   5 +
 src/api/media.ts              |  27 ++--
 src/components/MediaPanel.vue | 242 +++++++++++++++++++++++++++-------
 3 files changed, 221 insertions(+), 53 deletions(-)

diff --git a/src/api/http/type.ts b/src/api/http/type.ts
index f7d7982..bf3e5b8 100644
--- a/src/api/http/type.ts
+++ b/src/api/http/type.ts
@@ -23,6 +23,11 @@ export interface IWorkspaceResponse<T> {
  data: T;
  message: string;
 }
+export interface idData{
+  ids?:any,
+  file_name?:string,
+  father_id:string|number
+}
 
 export type IStatus = 'WAITING' | 'DOING' | 'SUCCESS' | 'FAILED';
 
diff --git a/src/api/media.ts b/src/api/media.ts
index 1eda5fa..132ccfe 100644
--- a/src/api/media.ts
+++ b/src/api/media.ts
@@ -1,5 +1,5 @@
 import { message } from 'ant-design-vue'
-import request, { IPage, IWorkspaceResponse } from '/@/api/http/request'
+import request, { IPage, IWorkspaceResponse, idData } from '/@/api/http/request'
 const HTTP_PREFIX = '/media/api/v1'
 
 // Get Media Files
@@ -29,10 +29,21 @@ export const downloadMediaFile = async function (workspaceId: string, fileId: st
     return result.data
   }
 }
-
-// Get Media getFolder
-// export const getFolder = async function (workspaceId: string): Promise<IWorkspaceResponse<any>> {
-//   const url = `${HTTP_PREFIX}/files/${workspaceId}/folder/2`
-//   const result = await request.get(url)
-//   return result.data
-// }
+// 新增或修改文件夹
+export const operateFile = async (wid: string, body:idData): Promise<IWorkspaceResponse<{ id: string }>> => {
+  const url = `${HTTP_PREFIX}/files/${wid}/folder`
+  const result = await request.post(url, body)
+  return result.data
+}
+// 删除文件
+export const deleteFile = async (wid: string, id:any): Promise<IWorkspaceResponse<{ id: string }>> => {
+  const url = `${HTTP_PREFIX}/files/${wid}/folder`
+  const result = await request.delete(url + '?id_arr=' + id)
+  return result.data
+}
+// 文件数
+export const floderTreeData = async (wid: string): Promise<IWorkspaceResponse<{ id: string }>> => {
+  const url = `${HTTP_PREFIX}/files/${wid}/folder/tree`
+  const result = await request.get(url)
+  return result.data
+}
diff --git a/src/components/MediaPanel.vue b/src/components/MediaPanel.vue
index 960cbea..7a575f1 100644
--- a/src/components/MediaPanel.vue
+++ b/src/components/MediaPanel.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="header">
-    <a-button  type="primary" large class="btn-primary" @click='createFile'>创建文件夹</a-button>
+    <a-button  type="primary" large class="btn-primary" @click='openFileDialog'>创建文件夹</a-button>
     <div v-show="state.selectedRowIds.length" class="other-btn">
       <a-button   large class="btn-primary">压缩并下载</a-button>
-      <a-button   large class="btn-primary">移动</a-button>
+      <a-button   large class="btn-primary" @click="move()">移动</a-button>
+      <a-button   large class="btn-primary" @click="deleteRow()">删除</a-button>
     </div>
 
     <div class="search-content">
@@ -53,24 +54,33 @@
   <a-spin :spinning="loading"  tip="加载中..." size="large">
     <div class="media-panel-wrapper">
       <div class="bread-content">
-      <span v-for="(item,index) in breadList" :key="item">{{ item }}<span v-if="index!=breadList.length-1" >/</span></span>
+      <span v-for="(item,index) in breadList" :key="item" @click="jumpToPath(index)" :class="[index!=breadList.length-1?'tab-click':'']">{{ item }}<span v-if="index!=breadList.length-1" >/</span></span>
     </div>
-      <a-table :columns="columns" :data-source="mediaData.data" :scroll="{ x: '100%', y: 400 }" :row-selection="rowSelection" :pagination="paginationProp">
-        <template v-for="col in ['file_name']" #[col]="{ text,index }" :key="col">
-            <div @click="goDetail(mediaData.data[index])">
+      <a-table :columns="columns" ref='tableRef' :data-source="mediaData.data" :scroll="{ x: '100%', y: 400 }" :row-selection="rowSelection">
+        <template v-for="col in ['file_name','payload','drone','create_time']" #[col]="{ text,index }" :key="col">
+            <div @click="goDetail(mediaData.data[index],index)" v-if="col=='file_name'">
               <img src="../assets/icons/folder.svg" v-if='mediaData.data[index].file_type==0'>
               <img src="../assets/icons/zip.svg" v-if='mediaData.data[index].file_type==2'>
               <a-image :width="30" :hight="30" v-if='mediaData.data[index].file_type==1' :src="mediaData.data[index].picture_url" :preview="{
               src: mediaData.data[index].picture_url}"
               />
-              <a-tooltip :title="text">
-                <a>&nbsp;{{ text }}</a>
+              <template v-if="index===state.index">
+                <a-input v-model:value="state.changeName"  class="edit-input space"></a-input>
+                <a @click="createFile(mediaData.data[index].id)" style="margin-right: 6px;"><CheckOutlined /></a>
+                <CloseOutlined @click.stop="cancelEdit" />
+              </template>
+              <a-tooltip :title="text" v-else>
+                <a class="space"> {{ text }}</a>
               </a-tooltip>
             </div>
+            <div v-else>{{ text||'--' }}</div>
         </template>
-        <template #action="{ record }">
+        <template #action="{ record, index }">
           <a-tooltip title="download">
-            <a class="fz18" @click="downloadMedia(record)"><DownloadOutlined /></a>
+            <a class="fz18 space" @click="downloadMedia(record)"><DownloadOutlined /></a>
+            <a class="fz18 space" @click="editName(index)"><EditOutlined /></a>
+            <a class="fz18 space" @click="deleteRow(index)"><DeleteOutlined /></a>
+            <a class="fz18 space" @click="move(mediaData.data[index].id)"><LoginOutlined /></a>
           </a-tooltip>
     </template>
   </a-table>
@@ -86,7 +96,27 @@
       <template #footer>
         <div>
           <a-button   large class="btn-primary" @click='state.folderOpen=false'>取消</a-button>
-          <a-button  type="primary" large class="btn-primary" @click='state.folderOpen=true'>确定</a-button>
+          <a-button  type="primary" large class="btn-primary" @click='createFile()'>确定</a-button>
+        </div>
+      </template>
+    </a-modal>
+    <a-modal v-model:visible="state.folderTree" :closable="false"  :maskClosable="false">
+    <template #title>
+        <div ref="modalTitleRef" style="width: 100%; cursor: move" class="model-title">移动到</div>
+      </template>
+      <a-directory-tree
+      @select="selectTree"
+    :tree-data="treeList"
+    :field-names="fieldNames"
+  >
+    <template #title="{ file_name}" >
+      <span >{{ file_name }}</span>
+    </template>
+  </a-directory-tree>
+      <template #footer>
+        <div>
+          <a-button   large class="btn-primary" @click='state.folderTree=false'>取消</a-button>
+          <a-button  type="primary" large class="btn-primary" @click='moveSubmit()'>确定</a-button>
         </div>
       </template>
     </a-modal>
@@ -95,39 +125,51 @@
 <script setup lang="ts">
 import { ref } from '@vue/reactivity'
 import { TableState } from 'ant-design-vue/lib/table/interface'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, nextTick } from 'vue'
 import { IPage } from '../api/http/type'
 import { ELocalStorageKey } from '../types/enums'
 import { downloadFile } from '../utils/common'
-import { downloadMediaFile, getMediaFiles } from '/@/api/media'
+import { downloadMediaFile, getMediaFiles, operateFile, deleteFile, floderTreeData } from '/@/api/media'
 import {
   ZoomInOutlined,
-  DownloadOutlined
+  DownloadOutlined,
+  EditOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  DeleteOutlined,
+  LoginOutlined
 } from '@ant-design/icons-vue'
 import { message, Pagination } from 'ant-design-vue'
-const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
+const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)
 const loading = ref(false)
-const pathId = ref('')
 const searchParam = reactive({ timestamp: [], type: [], name: '' })
-const state = reactive({ selectedRowIds: [], folderOpen: false, fileName: '' })
+const state = reactive({ rowid: '', selectedRowIds: [], folderOpen: false, fileName: '新建文件夹', fatherId: 0, changeName: '', index: '', folderTree: false })
+const tableRef = ref()
+// 面包屑对应的文件名
 const breadList = ref(['全部文件'])
+// 面包屑对应的父级id
+const fatherids = ref([0])
+// 所在层级
 const breadNum = ref(0)
 const columns = [
   {
     title: '文件名称',
     dataIndex: 'file_name',
     ellipsis: true,
+    width: 300,
     slots: { customRender: 'file_name' }
   },
   {
     title: '拍摄负载',
     dataIndex: 'payload',
     ellipsis: true,
+    slots: { customRender: 'payload' }
+
   },
   {
     title: '大小',
-    dataIndex: 'drone'
-
+    dataIndex: 'drone',
+    slots: { customRender: 'drone' }
   },
   {
     title: '创建时间',
@@ -137,7 +179,7 @@ const columns = [
     title: '操作',
     key: 'operation',
     fixed: 'right',
-    width: 100,
+    width: 120,
     slots: { customRender: 'action' }
 
   }
@@ -148,14 +190,20 @@ const body: IPage = {
   page_size: 50
 }
 const paginationProp = reactive({
-  pageSizeOptions: ['20', '50', '100'],
-  showQuickJumper: true,
-  showSizeChanger: true,
-  page_size: 50,
+  page_size: 10,
   page: 1,
   total: 0
 })
-
+const treeList = ref([])
+const fieldNames = reactive({
+  children: 'children',
+  title: 'file_name',
+  key: 'id',
+  value: 'id',
+})
+const expandedKeys = ref<string[]>([])
+const selectedKeys = ref<string[]>([])
+const checkedKeys = ref<string[]>([])
 type Pagination = TableState['pagination']
 
 interface MediaFile {
@@ -167,6 +215,7 @@ interface MediaFile {
   file_path: string,
   create_time: string,
   file_id: string,
+  id:number
 }
 
 const mediaData = reactive({
@@ -175,13 +224,30 @@ const mediaData = reactive({
 
 onMounted(() => {
   // pathId.value = val
-  getFiles()
+  nextTick(() => {
+    if (tableRef.value.$el) {
+      const tableContainer = tableRef.value.$el.querySelector('.ant-table-body')
+      tableContainer.addEventListener('scroll', handleScroll)
+    }
+  })
+  getFiles(workspaceId, paginationProp)
 })
-
-function getFiles () {
+const handleScroll = () => {
+  const tableContainer = tableRef.value.$el.querySelector('.ant-table-body')
+  const scrollPosition = tableContainer.scrollTop
+  const isAtTop = scrollPosition === 0
+  const isAtBottom = tableContainer.scrollHeight - scrollPosition === tableContainer.clientHeight
+  if (isAtBottom) {
+    // 已滚动到底部，执行相应操作
+    if (paginationProp.total > mediaData.data.length) {
+      getFiles(workspaceId, paginationProp, state.fatherId)
+    }
+  }
+}
+function getFiles (...data) {
   loading.value = true
-  getMediaFiles(workspaceId, paginationProp).then(res => {
-    mediaData.data = res.data.list
+  getMediaFiles(...data).then(res => {
+    mediaData.data = mediaData.data.concat(res.data.list)
     paginationProp.total = res.data.pagination.total
     paginationProp.page = res.data.pagination.page
   }).finally(() => {
@@ -192,7 +258,7 @@ function getFiles () {
 function refreshData (page: Pagination) {
   body.page = page?.current!
   body.page_size = page?.pageSize!
-  getFiles()
+  getFiles(workspaceId, paginationProp)
 }
 
 function downloadMedia (media: MediaFile) {
@@ -210,25 +276,101 @@ function downloadMedia (media: MediaFile) {
 
 const rowSelection = {
   onChange: (selectedRowKeys:any, selectedRows:any) => {
-    state.selectedRowIds = selectedRows.map((item:any) => item.father_id)
+    state.selectedRowIds = selectedRows.map((item:any) => item.id)
   },
+
 }
-const createFile = () => {
+const openFileDialog = () => {
   state.folderOpen = true
+  state.fileName = '新建文件夹'
 }
-const goDetail = (param:any) => {
-  if (param.file_type !== 0) { return }
-  loading.value = true
-  breadNum.value++
-  breadList.value[breadNum.value] = param.file_name
-  getMediaFiles(workspaceId, paginationProp, param.father_id).then(res => {
-    mediaData.data = res.data.list
-    paginationProp.total = res.data.pagination.total
-    paginationProp.page = res.data.pagination.page
-  }).finally(() => {
-    loading.value = false
+const goDetail = (param:any, index?:any) => {
+  if (param.file_type === 0 && state.index === '') {
+    state.fatherId = param.id
+    loading.value = true
+    breadNum.value++
+    fatherids.value.push(param.id)
+    breadList.value[breadNum.value] = param.file_name
+    mediaData.data = []
+    getFiles(workspaceId, paginationProp, param.id)
+  }
+}
+const jumpToPath = (index:any) => {
+  if (index !== breadNum.value) {
+    breadList.value.splice(index + 1)
+    fatherids.value.splice(index + 1)
+    breadNum.value = index
+    state.fatherId = fatherids.value[index]
+    mediaData.data = []
+    getFiles(workspaceId, paginationProp, fatherids.value[index])
+  }
+}
+// 操作文件夹（新增或者修改）
+const createFile = (id?:any) => {
+  state.fileName = id ? state.changeName : state.fileName
+  if (!state.fileName) {
+    message.warning('文件夹名称不能为空')
+    return
+  }
+  const param = id ? { id: id, file_name: state.fileName, father_id: state.fatherId } : { file_name: state.fileName, father_id: state.fatherId }
+  operateFile(workspaceId, param).then(res => {
+    if (res.code === 0) {
+      state.index = ''
+      const msg = id ? '修改成功' : '新建成功'
+      message.success(msg)
+      state.folderOpen = false
+      mediaData.data = []
+      getFiles(workspaceId, paginationProp, param.father_id)
+    }
   })
 }
+// 编辑项目名称
+const editName = (index:any) => {
+  state.index = index
+  state.changeName = mediaData.data[index].file_name
+}
+// 取消编辑
+const cancelEdit = () => {
+  state.index = ''
+  state.changeName = ''
+}
+const deleteRow = (index?:any) => {
+  deleteFile(workspaceId, index ? mediaData.data[index].id : state.selectedRowIds).then(res => {
+    if (res.code === 0) {
+      state.selectedRowIds = []
+      message.success('删除成功')
+      mediaData.data = []
+      getFiles(workspaceId, paginationProp, state.fatherId)
+    }
+  })
+}
+// 移动确认
+const moveSubmit = () => {
+  const param = { ids: state.selectedRowIds.length ? state.selectedRowIds : [state.rowid], father_id: selectedKeys.value }
+  operateFile(workspaceId, param).then(res => {
+    if (res.code === 0) {
+      message.success('移动成功')
+      state.folderTree = false
+      mediaData.data = []
+      getFiles(workspaceId, paginationProp, state.fatherId)
+    }
+  })
+}
+// 打开移动弹框
+const move = (id?:any) => {
+  state.rowid = id
+  floderTreeData(workspaceId).then(res => {
+    if (res.code === 0) {
+      treeList.value = res.data
+      console.log(treeList.value, res.data, '1212')
+      state.folderTree = true
+    }
+  })
+}
+const selectTree = (seid:any, e:any) => {
+  selectedKeys.value = e.node.dataRef.id
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -238,6 +380,10 @@ const goDetail = (param:any) => {
   .bread-content{
     background: #fff;
     padding: 16px;
+    .tab-click{
+     cursor: pointer;
+     color:#333;
+    }
   }
   .media-table {
     background: #fff;
@@ -252,6 +398,9 @@ const goDetail = (param:any) => {
   height: 25px;
   margin-right: 8px;
 }
+.space{
+  margin-left: 6px;
+}
 .header {
   width: 100%;
   padding: 16px 16px 0 16px;
@@ -281,9 +430,12 @@ const goDetail = (param:any) => {
     border: none;
 }
 ::v-deep{
+  .edit-input{
+    width: 100px !important;
+    margin-right: 10px;
+  }
   .ant-modal-header{
     padding: 0 0 !important;
   }
 }
-
 </style>

From df69595c93a17339d98993a98d12c96cd891561e Mon Sep 17 00:00:00 2001
From: freshman-white <2514756131@qq.com>
Date: Fri, 1 Sep 2023 11:14:17 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                            |  5 +--
 package.json                            |  1 +
 src/api/manage.ts                       |  7 +++++
 src/components/GMap.vue                 | 33 ++++++++++++++------
 src/components/livestream-newOthers.vue | 41 +++++++++++++------------
 src/pages/page-web/projects/tsa.vue     |  7 ++---
 6 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index dd8f769..cf2d9ca 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,9 +3,10 @@ module.exports = {
     browser: true,
     commonjs: true,
     es2021: true,
-    node: true
+    node: true,
   },
-  extends: ['standard', 'plugin:vue/vue3-essential'],
+  parser: 'vue-eslint-parser',
+  extends: ['standard','eslint:recommended', 'plugin:vue/vue3-essential'],
   parserOptions: {
     ecmaVersion: 12,
     parser: '@typescript-eslint/parser'
diff --git a/package.json b/package.json
index ba0c992..01fa3fd 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "vite-plugin-style-import": "^1.0.1",
     "vite-plugin-svg-icons": "^1.0.5",
     "vite-plugin-vconsole": "^1.1.0",
+    "vue-eslint-parser": "^9.3.1",
     "vue-tsc": "^0.0.24"
   },
   "license": "ISC",
diff --git a/src/api/manage.ts b/src/api/manage.ts
index d2d0d52..2a2818d 100644
--- a/src/api/manage.ts
+++ b/src/api/manage.ts
@@ -69,6 +69,13 @@ export const getLiveCapacity = async function (body: {}): Promise<IWorkspaceResp
   return result.data
 }
 
+// 设备信息
+export const getLiveSnCapacity = async function (id:any): Promise<IWorkspaceResponse<any>> {
+  const url = `${HTTP_PREFIX}/live/capacity?sn=${id}`
+  const result = await request.get(url)
+  return result.data
+} 
+
 // Start Livestream
 export const startLivestream = async function (body: {}): Promise<IWorkspaceResponse<any>> {
   const url = `${HTTP_PREFIX}/live/streams/start`
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index db81615..762993f 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -140,14 +140,14 @@
             {{ 10 > (deviceInfo.device.battery.remain_flight_time % 60) ? '0' : ''}}{{deviceInfo.device.battery.remain_flight_time % 60 }}
           </div>
         </div>
-        <div class="fz14">
-          <div @click="play()">直播视频</div>
+        <div class="fz14 content-padding">
+          <div @click="play()" class="video-btn"><a style="color: white;"><VideoCameraOutlined /></a>直播视频</div>
         </div>
       </div>
       <div class="live" v-if="showLive">
         <!-- <div>2222</div> -->
         <!-- <router-view :name="routeName" /> -->
-        <LiveNewOthers></LiveNewOthers>
+        <LiveNewOthers ref="liveStreamRef"></LiveNewOthers>
       </div>
     </div>
     <!-- <div class="osd-panel2 fz12">
@@ -430,7 +430,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted, reactive, ref, watch, nextTick } from 'vue'
 import {
   generateLineContent,
   generatePointContent,
@@ -459,7 +459,7 @@ import {
   BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
   ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
   FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
-  EyeInvisibleOutlined
+  EyeInvisibleOutlined, VideoCameraOutlined
 } from '@ant-design/icons-vue'
 import { EDeviceTypeName } from '../types'
 import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -485,6 +485,7 @@ export default defineComponent({
     CloudOutlined,
     CloudFilled,
     FolderOpenOutlined,
+    VideoCameraOutlined,
     RobotFilled,
     ArrowUpOutlined,
     ArrowDownOutlined,
@@ -502,7 +503,7 @@ export default defineComponent({
     const root = getRoot()
     // const routeName = ref<string>('LiveOthers')
     const showLive = ref(false)
-
+    const liveStreamRef = ref()
     const mouseMode = ref(false)
     const store = useMyStore()
     const state = reactive({
@@ -660,9 +661,11 @@ export default defineComponent({
       mouseMode.value = bool
     }
     function play () {
-      console.log(222)
       // routeName.value = 'LiveOthers'
-      showLive.value = true
+      showLive.value = !showLive.value
+      nextTick(() => {
+        showLive.value ? liveStreamRef.value.onStart() : liveStreamRef.value.onStop()
+      })
     }
 
     // dock 控制面板
@@ -769,7 +772,7 @@ export default defineComponent({
       // layer.id = 'private_layer' + uuidv4()
       // layer?.elements.push(resource)
       if (layer?.elements) {
-        ;(layer?.elements as any[]).push(resource)
+        (layer?.elements as any[]).push(resource)
       }
       // console.log('layers', layers)
       // store.commit('SET_LAYER_INFO', layers)
@@ -840,6 +843,7 @@ export default defineComponent({
     return {
       draw,
       play,
+      liveStreamRef,
       showLive,
       // routeName,
       mouseMode,
@@ -911,6 +915,17 @@ export default defineComponent({
   color: #fff;
   border-radius: 2px;
   /* opacity: 0.8; */
+  .content-padding{
+    padding:16px;
+    .video-btn{
+      cursor:pointer;
+      text-align: center;
+      padding:2px 16px;
+      width:160px;
+      background-color:#1fa3f6;
+
+    }
+  }
 }
 .live{
   background: #000;
diff --git a/src/components/livestream-newOthers.vue b/src/components/livestream-newOthers.vue
index c05834a..307913e 100644
--- a/src/components/livestream-newOthers.vue
+++ b/src/components/livestream-newOthers.vue
@@ -8,7 +8,6 @@
       class="mt20"
     ></video>
     <p class="fz24">Live streaming source selection</p>
-
     <div class="">
       <template v-if="liveState && isDockLive">
         <span class="mr10">Lens:</span>
@@ -17,7 +16,7 @@
         </a-radio-group>
       </template>
       <template v-else>
-      <a-select
+      <!-- <a-select
         style="width: 100px"
         placeholder="Select Live Type"
         @select="onLiveTypeSelect"
@@ -30,8 +29,8 @@
         >
           {{ item.label }}
         </a-select-option>
-      </a-select>
-      <a-select
+      </a-select> -->
+      <!-- <a-select
         class="ml10"
         style="width:100px"
         placeholder="Select Drone"
@@ -44,8 +43,8 @@
           @click="onDroneSelect(item)"
           >{{ item.label }}</a-select-option
         >
-      </a-select>
-      <a-select
+      </a-select> -->
+      <!-- <a-select
         class="ml10"
         style="width:100px"
         placeholder="Select Camera"
@@ -58,7 +57,7 @@
           @click="onCameraSelect(item)"
           >{{ item.label }}</a-select-option
         >
-      </a-select>
+      </a-select> -->
       <!-- <a-select
         class="ml10"
         style="width:150px"
@@ -99,10 +98,10 @@
     </div>
     <div class="flex-row flex-justify-center flex-align-center" style="margin-bottom: 20px;">
       <a-button v-if="liveState && isDockLive" type="primary" large @click="onSwitch">Switch Lens</a-button>
-      <a-button v-else type="primary" large @click="onStart">Play</a-button>
+      <!-- <a-button v-else type="primary" large @click="onStart">Play</a-button>
       <a-button class="ml20" type="primary" large @click="onStop"
         >Stop</a-button
-      >
+      > -->
       <!-- <a-button class="ml20" type="primary" large @click="onUpdateQuality"
         >Update Clarity</a-button
       >
@@ -115,11 +114,13 @@
 
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, computed, ref } from 'vue'
 import { CURRENT_CONFIG as config } from '/@/api/http/config'
-import { changeLivestreamLens, getLiveCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
+import { changeLivestreamLens, getLiveSnCapacity, setLivestreamQuality, startLivestream, stopLivestream } from '/@/api/manage'
 import { getRoot } from '/@/root'
+import { useMyStore } from '/@/store'
 import jswebrtc from '/@/vendors/jswebrtc.min.js'
+const store = useMyStore()
 const root = getRoot()
 
 interface SelectOption {
@@ -173,16 +174,18 @@ const videoList = ref()
 const droneSelected = ref()
 const cameraSelected = ref()
 const videoSelected = ref()
-const claritySelected = ref()
+const claritySelected = ref(0)
 const videoId = ref()
 const liveState = ref<boolean>(false)
-const livetypeSelected = ref()
+const livetypeSelected = ref(1)
 const rtspData = ref()
 const lensList = ref<string[]>([])
 const lensSelected = ref<String>()
 const isDockLive = ref(false)
 const nonSwitchable = 'normal'
-
+const osdVisible = computed(() => {
+  return store.state.osdVisible
+})
 const onRefresh = async () => {
   droneList.value = []
   cameraList.value = []
@@ -190,7 +193,7 @@ const onRefresh = async () => {
   droneSelected.value = null
   cameraSelected.value = null
   videoSelected.value = null
-  await getLiveCapacity({})
+  await getLiveSnCapacity(osdVisible.value.sn)
     .then(res => {
       console.log(res)
       if (res.code === 0) {
@@ -207,7 +210,7 @@ const onRefresh = async () => {
           livestreamSource.value.forEach((ele: any) => {
             temp.push({ label: ele.name + '-' + ele.sn, value: ele.sn, more: ele.cameras_list })
           })
-          droneList.value = temp
+          droneSelected.value = temp[0].value
         }
       }
     })
@@ -231,9 +234,6 @@ const onStart = async () => {
   )
   const timestamp = new Date().getTime().toString()
   if (
-    livetypeSelected.value == null ||
-    droneSelected.value == null ||
-    cameraSelected.value == null ||
     claritySelected.value == null
   ) {
     message.warn('waring: not select live para!!!')
@@ -366,6 +366,7 @@ const onDroneSelect = (val: SelectOption) => {
     temp.push({ label: ele.name, value: ele.index, more: ele.videos_list })
   })
   cameraList.value = temp
+  cameraSelected.value = cameraList.value[0].value
 }
 const onCameraSelect = (val: SelectOption) => {
   cameraSelected.value = val.value
@@ -412,6 +413,8 @@ const onSwitch = () => {
     }
   })
 }
+defineExpose({ onStart, onStop })
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/page-web/projects/tsa.vue b/src/pages/page-web/projects/tsa.vue
index 0258b24..73690c5 100644
--- a/src/pages/page-web/projects/tsa.vue
+++ b/src/pages/page-web/projects/tsa.vue
@@ -137,12 +137,11 @@
         </a-collapse-panel>
       </a-collapse>
       <a-collapse :bordered="false" expandIconPosition="right" accordion style="background: #232323;">
-        <a-collapse-panel :key="EDeviceTypeName.Aircraft" header="Online Devices" style="border-bottom: 1px solid #4f4f4f;">
-          <div v-if="onlineDevices.data.length === 0" style="height: 150px; color: white;">
-            <div style="background: red;" @click="cheshi">设备测试</div>
+        <a-collapse-panel v-if='!onlineDevices.data.length' :key="EDeviceTypeName.Aircraft" header="Online Devices" style="border-bottom: 1px solid #4f4f4f;">
+          <div style="height: 150px; color: white;">
             <a-empty :image="noData" :image-style="{ height: '60px' }" />
           </div>
-          <div v-else class="fz12" style="color: white;">
+          <div   class="fz12" style="color: white;" v-else>
             <div v-for="device in onlineDevices.data" :key="device.sn" style="background: #3c3c3c; height: 90px; width: 250px; margin-bottom: 10px;">
               <div class="battery-slide" v-if="deviceInfo[device.sn]">
                 <div style="background: #535759; width: 100%;"></div>