fix: 视频分析页面开发

src/api/videoParse.ts

@@ -14,11 +14,24 @@ type Data = {
   msg: any;
   count: number;
   results?: Array<any>;
+  code: number;
 };
 
 export const getPicList = (params?: object) => {
-  return http.request<Result>("get", baseUrlApi("tps/pics"), { params });
+  return http.request<Result>("get", baseUrlApi("tps/pics/"), { params });
 };
 export const getTPList = (params?: object) => {
-  return http.request<Data>("get", baseUrlApi("tps"), { params });
+  return http.request<Data>("get", baseUrlApi("tps/"), { params });
+};
+
+export const submitAnalyse = (data?: object) => {
+  return http.request<Data>("post", baseUrlApi("tps/analysis_video/"), {
+    data
+  });
+};
+
+export const beforeUploadVideo = (params?: object) => {
+  return http.request<Data>("get", baseUrlApi("tps/upload_video/"), {
+    params
+  });
 };

src/views/videoParse/hook.tsx

@@ -15,7 +15,8 @@ export function videoUtil() {
     {
       label: "异常类型",
       prop: "exception_type",
-      minWidth: 100
+      minWidth: 100,
+      slot: "exception_type"
     },
     {
       label: "异常ID",
@@ -26,7 +27,7 @@ export function videoUtil() {
       label: "异常行为",
       prop: "abnormal_behavior",
       minWidth: 100,
-      slot: "violation"
+      slot: "behavior"
     },
     {
       label: "异常关键帧",
@@ -42,6 +43,7 @@ export function videoUtil() {
     // },
   ];
   function openDialog(title = "视频", row) {
+    console.log(title);
     const highlights = [
       // 进度条时间点高亮
       {
@@ -52,7 +54,7 @@ export function videoUtil() {
     sessionStorage.setItem("video_url", row.abnormal_video);
     sessionStorage.setItem("highlights", JSON.stringify(highlights));
     addDialog({
-      title: `${title}用户`,
+      // title: `${title}用户`,
       width: "40%",
       draggable: true,
       fullscreenIcon: true,

src/views/videoParse/index.vue

@@ -5,44 +5,111 @@ import { ref, reactive, onMounted } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { PureTable } from "@pureadmin/table";
 import { type PaginationProps } from "@pureadmin/table";
-import { getPicList, getTPList } from "@/api/videoParse";
 import { getToken } from "@/utils/auth";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox, genFileId } from "element-plus";
 import { videoUtil } from "./hook";
+import { baseUrlApi } from "@/api/utils";
 
-import type { UploadProps, UploadUserFile } from "element-plus";
+import {
+  getPicList,
+  getTPList,
+  submitAnalyse,
+  beforeUploadVideo
+} from "@/api/videoParse";
+
+import type {
+  UploadProps,
+  UploadUserFile,
+  UploadInstance,
+  UploadRawFile
+} from "element-plus";
 
 defineOptions({
   name: "videoParse"
 });
 const { columns, openDialog } = videoUtil();
-const fileList = ref<UploadUserFile[]>([
+const fileList = ref<UploadUserFile[]>([]);
-  {
+const uploadFile = ref<UploadInstance>();
-    name: "element-plus-logo.svg",
+
-    url: "https://element-plus.org/images/element-plus-logo.svg"
+const submitUpload = () => {
-  }
+  uploadFile.value!.submit();
-]);
+};
 
 const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
-  console.log(file, uploadFiles);
+  console.log("移除文件：", file, uploadFiles);
 };
 
 const handlePreview: UploadProps["onPreview"] = uploadFile => {
-  console.log(uploadFile);
+  console.log("预览文件：", uploadFile);
 };
 
-const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
+const handleExceed: UploadProps["onExceed"] = files => {
-  ElMessage.warning(
+  // ElMessage.warning(
-    `The limit is 3, you selected ${files.length} files this time, add up to ${
+  //   `每次只能上传一个视频，请先删除文件：${fileList.value[0].name}`
-      files.length + uploadFiles.length
+  // );
-    } totally`
+  ElMessageBox.confirm(`是否覆盖上传文件： ${fileList.value[0].name} ?`)
-  );
+    .then(() => {
+      console.log("开始覆盖");
+      uploadFile.value!.clearFiles();
+      const file = files[0] as UploadRawFile;
+      file.uid = genFileId();
+      uploadFile.value!.handleStart(file);
+    })
+    .catch(() => {
+      console.log("取消覆盖");
+      submitUpload();
+    });
+};
+
+const handleChange: UploadProps["onChange"] = files => {
+  if (files.status === "ready") {
+    const fileName = files.name.substring(files.name.lastIndexOf(".") + 1);
+    if (
+      fileName === "mp4" ||
+      fileName === "MP4" ||
+      fileName === "avi" ||
+      fileName === "AVI" ||
+      fileName === "mkv" ||
+      fileName === "MKV" ||
+      fileName === "mov" ||
+      fileName === "MOV"
+    ) {
+      const params = { video_name: files.name };
+      beforeUploadVideo(params).then(response => {
+        if (!response.success) {
+          if (!(response.code === 201)) {
+            fileList.value = [];
+            ElMessage.warning(`上传文件失败，原因为：${response.msg}`);
+            return false;
+          }
+        } else {
+          console.log("开始上传");
+          submitUpload();
+        }
+      });
+    } else {
+      ElMessage.warning(`上传文件格式不正确，当前文件格式为：${fileName}`);
+      fileList.value = [];
+      return false;
+    }
+  }
+};
+
+const successCallback: UploadProps["onSuccess"] = (
+  response,
+  uploadFile,
+  uploadFiles
+) => {
+  if (!response.success) {
+    fileList.value = [];
+    ElMessage.warning(`文件上传失败原因为：${response.msg}，请稍后再试！`);
+    handleRemove(uploadFile, uploadFiles);
+  }
 };
 
 const beforeRemove: UploadProps["beforeRemove"] = uploadFile => {
-  return ElMessageBox.confirm(
+  console.log("删除文件前：", uploadFile);
-    `Cancel the transfer of ${uploadFile.name} ?`
+  return ElMessageBox.confirm(`是否取消上传文件： ${uploadFile.name} ?`).then(
-  ).then(
     () => true,
     () => false
   );
@@ -80,8 +147,12 @@ function handleCurrentChange(val) {
   onSearch();
 }
 function onSearch() {
+  let video_name = undefined;
+  if (fileList.value.length > 0) {
+    video_name = fileList.value[0].name;
+  }
   const params = {
-    video_name: "test1",
+    video_name: video_name,
     page: currentPage.value || undefined,
     page_size: pageSize.value || undefined
   };
@@ -94,6 +165,8 @@ function onSearch() {
       setTimeout(() => {
         loading.value = false;
       }, 500);
+    } else {
+      ElMessage.warning(`提示：${response.msg}，请稍后再试！`);
     }
   });
   getPicList(params).then(response => {
@@ -123,12 +196,42 @@ function spanStyle(type) {
     case 3:
       return "span-third";
     default:
-      "";
+      return "span-default";
-      break;
   }
 }
+
+function getRandType(type) {
+  // const type = Math.floor(Math.random() * 5) + 1;
+  switch (type) {
+    case "画面异常":
+      return "warning";
+    default:
+      return "danger";
+  }
+}
+
+function startAnalyse() {
+  let video_name = undefined;
+  if (fileList.value.length > 0) {
+    video_name = fileList.value[0].name;
+  }
+  const params = {
+    video_name: video_name
+  };
+  submitAnalyse(params).then(response => {
+    if (!response.success) {
+      ElMessage.warning(`提示：${response.msg}，请稍后重试`);
+    } else {
+      onSearch();
+    }
+  });
+}
+
 onMounted(() => {
   onSearch();
+  setInterval(() => {
+    onSearch();
+  }, 1000 * 60 * 5);
 });
 </script>
 
@@ -151,13 +254,17 @@ onMounted(() => {
                 v-model:file-list="fileList"
                 class="upload"
                 :headers="{ token: 'Bearer ' + getToken().accessToken }"
-                action="http://192.168.10.13:8000/api/tps/upload_video"
+                :action="baseUrlApi('tps/upload_video/')"
-                multiple
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-remove="beforeRemove"
                 :limit="1"
                 :on-exceed="handleExceed"
+                :on-success="successCallback"
+                :on-change="handleChange"
+                ref="uploadFile"
+                :auto-upload="false"
+                accept=".mp4, .MP4, .avi, .AVI, .mkv, .MKV, .mov, .MOV"
               >
                 <span>{{ "选择分析文件" }}</span
                 ><el-button type="primary">选择文件</el-button>
@@ -168,9 +275,12 @@ onMounted(() => {
               </template> -->
               </el-upload>
             </div>
-            <el-button type="success" size="large">
+            <el-button type="success" size="large" @click="startAnalyse">
-              分析 <el-icon class="el-icon--right"><Help /></el-icon
+              分析
-            ></el-button>
+              <el-icon class="el-icon--right">
+                <Help />
+              </el-icon>
+            </el-button>
           </div>
           <el-divider border-style="dashed" />
           <!-- <el-empty description="暂无数据" v-show="videoData.length == 0" /> -->
@@ -307,7 +417,6 @@ onMounted(() => {
           >
             <template v-slot="{ size, dynamicColumns }">
               <pure-table
-                border
                 adaptive
                 align-whole="center"
                 table-layout="auto"
@@ -319,13 +428,15 @@ onMounted(() => {
                 :paginationSmall="size === 'small' ? true : false"
                 :header-cell-style="{
                   background: 'var(--el-table-row-hover-bg-color)',
+                  backgroundColor: 'cornflowerblue',
                   color: 'var(--el-text-color-primary)'
+                  // color: 'blue'
                 }"
                 @page-size-change="handleSizeChange"
                 @page-current-change="handleCurrentChange"
               >
-                <template #violation="{ row }">
+                <template #behavior="{ row }">
-                  {{ row.is_violation ? "是" : "否" }}
+                  <span style="color: red">{{ row.abnormal_behavior }}</span>
                 </template>
                 <template #image="{ row, index }">
                   <el-image
@@ -338,6 +449,11 @@ onMounted(() => {
                     class="w-[100px] h-[100px]"
                   />
                 </template>
+                <template #exception_type="{ row }">
+                  <el-button :type="getRandType(row.exception_type)">
+                    {{ row.exception_type }}
+                  </el-button>
+                </template>
                 <template #video="{ row }">
                   <el-button
                     class="reset-margin"
@@ -389,6 +505,7 @@ onMounted(() => {
     .analysis-box-label {
       font-size: 20px;
       font-weight: bold;
+      color: dodgerblue;
     }
 
     .analysis-table {
@@ -451,4 +568,10 @@ onMounted(() => {
   font-weight: bold;
   color: #516ee0;
 }
+
+.span-default {
+  font-size: 28px;
+  font-weight: bold;
+  color: #555a64;
+}
 </style>