媒体管理

Web/src/api/custom/index.ts

@@ -59,6 +59,7 @@ export type BatchDownloadMediaFileApi = (params: BatchDownloadMediaFileApiParams
 export type FetchFileListByFolderApi = (dirId: string, params: FetchFileListByFolderApiParams) => Promise<any>;
 export type FetchFileDetailApi = (fileId: string) => Promise<any>;
 export type BatchDownloadFileApi = (params: BatchDownloadFileApiParams) => Promise<any>;
+export type UpdateFileNameApi = (fileId: string, data: { [key: string]: any }) => Promise<any>;
 export type BatchDeletePictureApi = (params: BatchDeletePictureApiParams) => Promise<any>;
 
 // 获取负载列表
@@ -121,6 +122,13 @@ const batchDownloadFileApi: BatchDownloadFileApi = async (params) => {
     return res.data;
 };
 
+// 更新文件名称
+const updateFileNameApi: UpdateFileNameApi = async (fileId, data) => {
+    const url = `/media/api/v1/files/${workspaceId}/updateFile/${fileId}`
+    const result = await request.put(url, data)
+    return result.data
+}
+
 // 批量删除图片
 const batchDeletePictureApi: BatchDeletePictureApi = async (data) => {
     const res = await request.delete(`/media/api/v1/files/${workspaceId}/deleteFiles`, { params: data });
@@ -137,5 +145,6 @@ export const apis = {
     fetchFileListByFolder: fetchFileListByFolderApi,
     fetchFileDetail: fetchFileDetailApi,
     batchDownloadFile: batchDownloadFileApi,
+    updateFileName: updateFileNameApi,
     batchDeletePicture: batchDeletePictureApi,
 };

Web/src/api/manage.ts

@@ -90,7 +90,7 @@ export const setLivestreamQuality = async function (body: {}): Promise<IWorkspac
   return result.data
 }
 
-export const getAllUsersInfo = async function (wid: string, body: IPage): Promise<CommonListResponse<any>> {
+export const getAllUsersInfo = async function (wid: string, body: { page: number, page_size: number }): Promise<CommonListResponse<any>> {
   const url = `${HTTP_PREFIX}/users/${wid}/users?&page=${body.page}&page_size=${body.page_size}`
   const result = await request.get(url)
   return result.data

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

@@ -47,10 +47,14 @@ const paginationConfig = reactive({
   total: 0
 })
 
-const fetchList = async () => {
+const fetchList = async (query?: any) => {
   state.listLoading = true;
   try {
-    const res = await apis.fetchChangeRecordList({ page: paginationConfig.current, page_size: paginationConfig.pageSize });
+    const res = await apis.fetchChangeRecordList({
+      ...query,
+      page: paginationConfig.current,
+      page_size: paginationConfig.pageSize
+    });
     if (res.code === 0) {
       paginationConfig.total = res.data.pagination.total
       paginationConfig.current = res.data.pagination.page
@@ -132,13 +136,13 @@ const refreshData = async (page: any) => {
 }
 
 // 点击搜索
-const onClickSearch = async () => {
-  console.log('点击搜索');
+const onClickSearch = async (query: any) => {
+  await fetchList(query);
 }
 
 // 点击重置
-const onClickReset = async () => {
-  console.log('点击重置');
+const onClickReset = async (query: any) => {
+  await fetchList(query);
 }
 </script>
 

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

@@ -92,7 +92,7 @@ interface State {
   selectedRowKeys: string[],
   currentDevice: any,
   editableData: {
-    [key: string]: string,
+    [key: string]: any,
   },
   deviceLogDrawerVisible: boolean,
   deviceHmsDrawerVisible: boolean,
@@ -118,10 +118,14 @@ const paginationConfig = reactive({
   total: 0
 })
 
-const fetchList = async () => {
+const fetchList = async (query?: any) => {
   state.listLoading = true;
   try {
-    const res = await getBindingDevices(state.workspaceId, { page: paginationConfig.current, page_size: paginationConfig.pageSize });
+    const res = await getBindingDevices(state.workspaceId, {
+      ...query,
+      page: paginationConfig.current,
+      page_size: paginationConfig.pageSize,
+    });
     state.list = res.data.list;
     paginationConfig.total = res.data.pagination.total
     paginationConfig.current = res.data.pagination.page
@@ -231,13 +235,13 @@ const onClickBatchDelete = async () => {
 }
 
 // 点击搜索
-const onClickSearch = async () => {
-  console.log('点击搜索');
+const onClickSearch = async (query: any) => {
+  await fetchList(query);
 }
 
 // 点击重置
-const onClickReset = async () => {
-  console.log('点击重置');
+const onClickReset = async (query: any) => {
+  await fetchList(query);
 }
 
 // 点击设备日志

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

@@ -75,10 +75,14 @@ const paginationConfig = reactive({
   total: 0
 })
 
-const fetchList = async () => {
+const fetchList = async (query?: any) => {
   state.listLoading = true;
   try {
-    const res = await apis.fetchChangeRecordList({ page: paginationConfig.current, page_size: paginationConfig.pageSize });
+    const res = await apis.fetchChangeRecordList({
+      ...query,
+      page: paginationConfig.current,
+      page_size: paginationConfig.pageSize
+    });
     if (res.code === 0) {
       paginationConfig.total = res.data.pagination.total
       paginationConfig.current = res.data.pagination.page
@@ -172,13 +176,13 @@ const refreshData = async (page: any) => {
 }
 
 // 点击搜索
-const onClickSearch = async () => {
-  console.log('点击搜索');
+const onClickSearch = async (query: any) => {
+  await fetchList(query);
 }
 
 // 点击重置
-const onClickReset = async () => {
-  console.log('点击重置');
+const onClickReset = async (query: any) => {
+  await fetchList(query);
 }
 
 // 点击详情

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

@@ -44,26 +44,39 @@
             <!-- 文件夹名称 -->
             <template #file_name="{ record }">
               <a-tooltip :title="record.file_name">
-                <div class="fileName" @click="onClickLookFile(record)">
-                  <div>
+                <div class="fileName">
+                  <div @click="onClickLookFile(record)">
                     <img :src="panoramaSrc" v-if="record.media_type === 3" />
                     <img :src="videoSrc" v-else-if="record.media_type === 4" />
                     <img :src="pictureSrc" v-else />
                   </div>
                   <div>
-                    {{ record.file_name }}
+                    <a-input v-model:value="record.file_name" v-if="state.editableData[record.file_id]" />
+                    <div @click="onClickLookFile(record)" v-else>
+                      {{ record.file_name }}
+                    </div>
                   </div>
                 </div>
               </a-tooltip>
             </template>
             <!-- 操作 -->
             <template #action="{ record }">
-              <div class="flex-align-center flex-row" style="color: #2d8cf0">
+              <!-- 编辑态操作 -->
+              <div v-if="state.editableData[record.file_id]">
+                <a-tooltip title="确定">
+                  <CheckOutlined style="color: #28d445;margin-right: 10px;" @click="onClickSave(record)" />
+                </a-tooltip>
+                <a-tooltip title="取消">
+                  <CloseOutlined style="color: #e70102;" @click="() => delete state.editableData[record.file_id]" />
+                </a-tooltip>
+              </div>
+              <!-- 非编辑态操作 -->
+              <div class="flex-align-center flex-row" style="color: #2d8cf0" v-else>
                 <a-tooltip title="照片位置" v-if="[1, 3].includes(record.media_type)">
                   <EnvironmentOutlined style="margin-right: 10px;" @click="onClickPhotoPosition" />
                 </a-tooltip>
                 <a-tooltip title="重命名" v-else-if="record.media_type === 4">
-                  <EditOutlined style="margin-right: 10px;" @click="onClickRechristen" />
+                  <EditOutlined style="margin-right: 10px;" @click="onClickRechristen(record)" />
                 </a-tooltip>
                 <a-tooltip title="删除" v-else-if="record.media_type === 2">
                   <DeleteOutlined style="margin-right: 10px;" @click="onClickDelete(record)" />
@@ -106,7 +119,7 @@
 
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue';
-import { MenuOutlined, AppstoreOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, EnvironmentOutlined } from '@ant-design/icons-vue';
+import { MenuOutlined, AppstoreOutlined, EditOutlined, DeleteOutlined, DownloadOutlined, EnvironmentOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
 import Search from './components/Search.vue';
 import FileInfo from './components/FileInfo.vue';
 import pictureSrc from '/@/assets/media/picture.svg';
@@ -119,10 +132,14 @@ import { downloadMediaFile } from '/@/api/media';
 import { ELocalStorageKey } from '/@/types';
 
 interface State {
+  query: any,
   listLoading: boolean,
   list: any[],
   dirName: string,
   selectedRowKeys: string[],
+  editableData: {
+    [key: string]: string,
+  },
   downloadLoading: boolean,
   mode: 'table' | 'list',
   fileId: string,
@@ -130,10 +147,12 @@ interface State {
 };
 
 const state: State = reactive({
+  query: undefined,
   listLoading: false,
   list: [],
   dirName: '',
   selectedRowKeys: [],
+  editableData: {},
   downloadLoading: false,
   mode: 'table',
   fileId: '',
@@ -273,6 +292,7 @@ const onClickBatchDelete = async () => {
 
 // 点击搜索
 const onClickSearch = async (query: any) => {
+  state.query = query;
   await fetchList(query);
 }
 
@@ -309,8 +329,15 @@ const onClickPhotoPosition = () => {
 }
 
 // 点击重命名
-const onClickRechristen = () => {
+const onClickRechristen = (record: any) => {
+  state.editableData[record.file_id] = record;
+}
 
+// 点击保存
+const onClickSave = async (record: any) => {
+  delete state.editableData[record.file_id];
+  await apis.updateFileName(record.file_id, { file_name: record.file_name })
+  await fetchList(state.query);
 }
 
 // 点击删除

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

@@ -2,12 +2,11 @@
   <div class="mediaList">
     <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
     <div class="mediaList-table">
-      <a-table :columns="columns" :data-source="data.member" :pagination="paginationConfig" @change="refreshData"
-        row-key="user_id" :rowClassName="(record, index) => ((index % 2) === 0 ? 'table-striped' : null)"
-        :scroll="{ x: '100%', y: 600 }">
+      <a-table :scroll="{ x: '100%', y: 500 }" rowKey="user_id" :loading="state.listLoading" :columns="columns"
+        @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig">
         <template v-for="col in ['mqtt_username', 'mqtt_password']" #[col]="{ text, record }" :key="col">
           <div>
-            <a-input v-if="editableData[record.user_id]" v-model:value="editableData[record.user_id][col]"
+            <a-input v-if="state.editableData[record.user_id]" v-model:value="state.editableData[record.user_id][col]"
               style="margin: -5px 0" />
             <template v-else>
               {{ text }}
@@ -16,14 +15,14 @@
         </template>
         <template #action="{ record }">
           <div class="editable-row-operations">
-            <span v-if="editableData[record.user_id]">
+            <span v-if="state.editableData[record.user_id]">
               <a-tooltip title="确定">
                 <span @click="save(record)" style="color: #28d445;">
                   <CheckOutlined />
                 </span>
               </a-tooltip>
               <a-tooltip title="取消">
-                <span @click="() => delete editableData[record.user_id]" class="ml15" style="color: #e70102;">
+                <span @click="() => delete state.editableData[record.user_id]" class="ml15" style="color: #e70102;">
                   <CloseOutlined />
                 </span>
               </a-tooltip>
@@ -39,12 +38,11 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import { TableState } from 'ant-design-vue/lib/table/interface'
 import { onMounted, reactive, UnwrapRef } from 'vue'
 import Search from './components/Search.vue';
-import { IPage } from '/@/api/http/type'
 import { getAllUsersInfo, updateUserInfo } from '/@/api/manage'
 import { ELocalStorageKey } from '/@/types'
 import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
@@ -59,10 +57,53 @@ export interface Member {
   mqtt_password: string
 }
 
-interface MemberData {
-  member: Member[]
+interface State {
+  listLoading: boolean,
+  list: Member[],
+  editableData: {
+    [key: string]: any,
+  },
 }
 
+const state: State = reactive({
+  listLoading: false,
+  list: [],
+  editableData: {},
+})
+
+const paginationConfig = reactive({
+  pageSizeOptions: ['20', '50', '100'],
+  showQuickJumper: true,
+  showSizeChanger: true,
+  pageSize: 20,
+  current: 1,
+  total: 0
+})
+
+const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
+
+const fetchList = async (query?: any) => {
+  state.listLoading = true;
+  try {
+    const res = await getAllUsersInfo(workspaceId, {
+      ...query,
+      page: paginationConfig.current,
+      page_size: paginationConfig.pageSize,
+    });
+    state.list = res.data.list;
+    paginationConfig.total = res.data.pagination.total
+    paginationConfig.current = res.data.pagination.page
+  } catch (e) {
+    console.error(e);
+  } finally {
+    state.listLoading = false;
+  }
+}
+
+onMounted(async () => {
+  await fetchList()
+})
+
 const columns = [
   {
     title: '用户名称',
@@ -106,55 +147,27 @@ const columns = [
   }
 ]
 
-const data = reactive<MemberData>({
-  member: []
-})
-
-const editableData: UnwrapRef<Record<string, Member>> = reactive({})
-
-const paginationConfig = reactive({
-  pageSizeOptions: ['20', '50', '100'],
-  showQuickJumper: true,
-  showSizeChanger: true,
-  pageSize: 20,
-  current: 1,
-  total: 0
-})
-
-type Pagination = TableState['pagination']
-
-const body: IPage = {
-  page: 1,
-  total: 0,
-  page_size: 50
-}
-const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId)!
-
-onMounted(() => {
-  getAllUsers(workspaceId, body)
-})
-
-function refreshData(page: Pagination) {
-  body.page = page?.current!
-  body.page_size = page?.pageSize!
-  getAllUsers(workspaceId, body)
+const rowClassName = (record: any, index: number) => {
+  const className = []
+  if ((index & 1) === 0) {
+    className.push('table-striped')
+  }
+  return className.toString().replaceAll(',', ' ')
 }
 
-function getAllUsers(workspaceId: string, page: IPage) {
-  getAllUsersInfo(workspaceId, page).then(res => {
-    const userList: Member[] = res.data.list
-    data.member = userList
-    paginationConfig.total = res.data.pagination.total
-    paginationConfig.current = res.data.pagination.page
-  })
+const refreshData = async (page: any) => {
+  paginationConfig.current = page?.current!
+  paginationConfig.pageSize = page?.pageSize!
+  await fetchList();
 }
-
-function edit(record: Member) {
-  editableData[record.user_id] = record
+// 点击编辑
+const edit = (record: Member) => {
+  state.editableData[record.user_id] = record;
 }
 
-function save(record: Member) {
-  delete editableData[record.user_id]
+// 点击保存
+const save = (record: Member) => {
+  delete state.editableData[record.user_id]
   updateUserInfo(workspaceId, record.user_id, record).then(res => {
     if (res.code !== 0) {
       message.error(res.message)
@@ -163,13 +176,13 @@ function save(record: Member) {
 }
 
 // 点击搜索
-const onClickSearch = async () => {
-  console.log('点击搜索');
+const onClickSearch = async (query: any) => {
+  await fetchList(query);
 }
 
 // 点击重置
-const onClickReset = async () => {
-  console.log('点击重置');
+const onClickReset = async (query: any) => {
+  await fetchList(query);
 }
 </script>
 

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

@@ -92,7 +92,6 @@ import Search from './components/Search.vue';
 import fileSrc from '/@/assets/media/file.svg';
 import { apis } from '/@/api/custom';
 import router from '/@/router/index';
-import { downloadFile } from '/@/utils/common';
 
 interface State {
   listLoading: boolean,
@@ -244,9 +243,7 @@ const onSelectChange = (selectedRowKeys: string[]) => {
 const onClickDownload = async (record: any) => {
   state.listLoading = true;
   try {
-    const bold = await apis.downloadMediaFile(record.id);
-    const data = new Blob([bold], { type: 'application/zip' });
-    downloadFile(data, record.dir_name)
+
   } catch (e) {
     console.error(e);
   } finally {