feat 接口联调

Co-authored-by: Copilot <copilot@github.com>

src/api/systemList/index.ts

@@ -0,0 +1,46 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DemoVO, DemoForm, DemoQuery } from '@/api/demo/demo/types';
+
+/**
+ * 查询首页logo
+ * /system/logo/get
+ */
+export const getDemo = () => {
+  return request({
+    url: '/system/logo/get',
+    method: 'get'
+  });
+};
+
+/**
+ * 上传图片
+ * /system/logo/upload
+ * @param file 文件对象
+ */
+export const uploadDemo = (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  return request({
+    url: '/system/logo/upload',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+};
+
+/**
+ * 修改logo
+ * /system/logo/edit
+ * @param data
+ */
+export const updateDemo = (data: any) => {
+  return request({
+    url: '/system/logo/edit',
+    method: 'post',
+    data: data
+  });
+};

src/views/WarningList/list.vue

@@ -4,8 +4,8 @@
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="报警编号" prop="deviceId">
-              <el-input v-model="queryParams.deviceId" placeholder="请输入设备编号" clearable @keyup.enter="handleQuery" />
+            <el-form-item label="报警编号" prop="alarmCode">
+              <el-input v-model="queryParams.alarmCode" placeholder="请输入报警编号" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="设备选择" prop="userName">
               <el-select v-model="queryParams.userName" placeholder="请选择" clearable style="width: 160px">
@@ -48,9 +48,9 @@
 
       <el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="报警编号" align="center" prop="deviceId" width="90" />
+        <el-table-column label="报警编号" align="center" prop="alarmCode" width="90" />
         <el-table-column label="报警时间" align="center" prop="alarmTime" min-width="170" />
-        <el-table-column label="所属设备" align="center" prop="userName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="所属设备" align="center" prop="deviceName" min-width="120" show-overflow-tooltip />
         <el-table-column label="报警区域" align="center" prop="monitoringArea" min-width="120" show-overflow-tooltip />
         <el-table-column label="处理状态" align="center" prop="status" width="100">
           <template #default="scope">
@@ -160,7 +160,8 @@ const data = reactive({
     beginTime: undefined,
     endTime: undefined,
     monitoringArea: undefined,
-    userName: undefined
+    userName: undefined,
+    alarmCode: undefined
   },
   rules: {},
   queryTime: []

src/views/fileList/list.vue

@@ -9,8 +9,8 @@
                 <el-option label="绑定的设备" :value="0" />
               </el-select>
             </el-form-item>
-            <el-form-item label="报警编号" prop="deviceId">
-              <el-input v-model="queryParams.deviceId" placeholder="请输入设备编号" clearable @keyup.enter="handleQuery" />
+            <el-form-item label="报警编号" prop="alarmCode">
+              <el-input v-model="queryParams.alarmCode" placeholder="请输入报警编号" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="报警时间" prop="queryTime">
               <el-date-picker
@@ -56,13 +56,13 @@
         <el-table-column label="录像编号" align="center" prop="code" width="90" />
         <el-table-column label="文件名称" align="center" prop="videoName" min-width="170" />
         <el-table-column label="所属设备" align="center" prop="deviceName" min-width="120" show-overflow-tooltip />
-        <el-table-column label="报警编号" align="center" prop="alarmId" min-width="120" show-overflow-tooltip />
+        <el-table-column label="报警编号" align="center" prop="alarmCode" min-width="120" show-overflow-tooltip />
         <el-table-column label="录像开始时间" align="center" prop="startTime" min-width="120" show-overflow-tooltip />
         <el-table-column label="录像结束时间" align="center" prop="endTime" min-width="120" show-overflow-tooltip />
-        <el-table-column label="录像时长" align="center" prop="duration" min-width="120" show-overflow-tooltip />
+        <el-table-column label="录像时长" align="center" prop="durationFormat" min-width="120" show-overflow-tooltip />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
           <template #default="scope">
-            <el-button type="primary" @click="handleUpdate(scope.row)">播放</el-button>
+            <el-button type="primary" @click="handlePlay(scope.row)">播放</el-button>
             <el-button type="primary" @click="handleUpload(scope.row)">下载至本地</el-button>
           </template>
         </el-table-column>
@@ -100,7 +100,7 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const monitorVideoUrl = 'http://192.168.0.214:8088/5a0db047943df198aff98b650ac9e001.mp4';
+const monitorVideoUrl = ref();
 
 const queryFormRef = ref<ElFormInstance>();
 const demoFormRef = ref<ElFormInstance>();
@@ -187,7 +187,7 @@ const handleAdd = () => {
 };
 
 /** 修改按钮操作 */
-const handleUpdate = async (row?: any) => {
+const handlePlay = async (row?: any) => {
   // reset();
   // const _id = row?.id || ids.value[0];
   // const res = await getDemo(_id);
@@ -199,9 +199,15 @@ const handleUpdate = async (row?: any) => {
     proxy?.$modal.msgError('视频地址不存在');
     return;
   }
+  monitorVideoUrl.value = row.videoUrl;
   dialog.visible = true;
 };
 const handleUpload = async (row?: any) => {
+  if (!row || !row.zipUrl) {
+    proxy?.$modal.msgError('下载地址不存在');
+    return;
+  }
+  proxy?.$download.zip(row.zipUrl, row.zipUrl);
   console.log('点击下载');
 };
 

src/views/systemList/base/base.vue

@@ -10,10 +10,14 @@
           <div class="text-center">
             <el-upload
               v-model:file-list="fileList"
-              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
               list-type="picture-card"
-              :on-preview="handlePictureCardPreview"
+              :limit="1"
               :on-remove="handleRemove"
+              :action="uploadUrl"
+              :on-change="handleChange"
+              :before-upload="beforeUpload"
+              :auto-upload="true"
+              accept="image/jpeg,image/png"
             >
               <el-icon><Plus /></el-icon>
             </el-upload>
@@ -38,9 +42,14 @@
 </template>
 
 <script lang="ts" setup>
-import UserAvatar from '@/views/system/user/profile/userAvatar.vue';
 import { ref, reactive } from 'vue';
-import type { UploadProps, UploadUserFile } from 'element-plus';
+import type { UploadProps, UploadUserFile, UploadRequestOptions } from 'element-plus';
+import { uploadDemo } from '@/api/systemList/index';
+import { ElMessage } from 'element-plus';
+import { Plus } from '@element-plus/icons-vue';
+
+const uploadUrl = import.meta.env.VITE_BASE_API + '/system/logo/upload';
+
 const form = reactive({
   name: '',
   remark: '',
@@ -48,27 +57,104 @@ const form = reactive({
 });
 
 const cancel = () => {
-  console.log('cancel');
+  // TODO: implement cancel logic
 };
 const save = () => {
-  console.log('save');
+  // TODO: implement save logic
 };
 
 /* ------------------------------------------ 图片上传逻辑----------------------------------------- */
-import { Plus } from '@element-plus/icons-vue';
 
-const fileList = ref<UploadUserFile[]>([
-  {
-    name: 'food.jpeg',
-    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-  }
-]);
+const fileList = ref<UploadUserFile[]>([]);
 
 const dialogImageUrl = ref('');
 const dialogVisible = ref(false);
 
+// 自定义上传方法
+const customUpload = async (options: UploadRequestOptions) => {
+  const { file } = options;
+
+  try {
+    // 调用 uploadDemo 接口上传图片到 OSS
+    console.log('开始上传图片...');
+    console.log('文件名:', file.name);
+    console.log('文件大小:', file.size);
+
+    const res = await uploadDemo(file as File);
+
+    console.log('上传响应:', res);
+    console.log('响应数据:', res.data);
+
+    // 假设返回的数据结构中有 url 字段，根据实际情况调整
+    if (res.data && res.data.url) {
+      // 创建新的文件对象并添加到 fileList
+      const newFile: UploadUserFile = {
+        uid: (file as any).uid,
+        name: file.name,
+        status: 'success',
+        url: res.data.url,
+        raw: file as any
+      };
+
+      // 将新文件添加到列表末尾
+      fileList.value.push(newFile);
+
+      // 更新表单中的 logo 字段
+      form.logo = res.data.url;
+
+      ElMessage.success('上传成功');
+    } else {
+      console.error('响应数据中没有 URL:', res.data);
+      ElMessage.error('上传失败，未获取到文件URL');
+    }
+  } catch (error: any) {
+    console.error('上传失败:', error);
+    console.error('错误详情:', error.message);
+    console.error('错误代码:', error.code);
+    console.error('错误响应:', error.response);
+
+    let errorMsg = '上传失败';
+    if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
+      errorMsg = '上传超时，请检查网络连接或后端服务是否正常运行';
+    } else if (error.response) {
+      errorMsg = `上传失败: ${error.response.status} - ${error.response.statusText}`;
+    } else if (error.request) {
+      errorMsg = '上传失败: 无法连接到服务器，请检查后端服务是否启动';
+    }
+
+    ElMessage.error(errorMsg);
+  }
+};
+
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles);
+  // 清空 logo 字段
+  form.logo = '';
+};
+
+const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+  console.log('文件改变', '上传文件中', uploadFile, '当前文件列表', uploadFiles);
+  // 确保新上传的图片显示在上传按钮后面（保持数组顺序）
+  fileList.value = [...uploadFiles];
+};
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  console.log('开始上传');
+
+  // 验证文件大小（500KB）
+  const isLt500K = rawFile.size / 1024 / 1024 < 0.5;
+  if (!isLt500K) {
+    ElMessage.error('图片大小不能超过 500KB!');
+    return false;
+  }
+
+  // 验证文件类型
+  const isJPGorPNG = rawFile.type === 'image/jpeg' || rawFile.type === 'image/png';
+  if (!isJPGorPNG) {
+    ElMessage.error('只能上传 JPG/PNG 格式的图片!');
+    return false;
+  }
+
+  return true;
 };
 
 const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {