From 8860c8cd7d03100edc3c035638320c74a2c18b7c Mon Sep 17 00:00:00 2001 From: kongfp Date: Sat, 7 Oct 2023 09:39:26 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=86=E9=A2=91=E5=88=86=E6=9E=90?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/videoParse.ts | 17 ++- src/views/videoParse/hook.tsx | 8 +- src/views/videoParse/index.vue | 185 +++++++++++++++++++++++++++------ 3 files changed, 174 insertions(+), 36 deletions(-) diff --git a/src/api/videoParse.ts b/src/api/videoParse.ts index 07ad0f2..fcf52a8 100644 --- a/src/api/videoParse.ts +++ b/src/api/videoParse.ts @@ -14,11 +14,24 @@ type Data = { msg: any; count: number; results?: Array; + code: number; }; export const getPicList = (params?: object) => { - return http.request("get", baseUrlApi("tps/pics"), { params }); + return http.request("get", baseUrlApi("tps/pics/"), { params }); }; export const getTPList = (params?: object) => { - return http.request("get", baseUrlApi("tps"), { params }); + return http.request("get", baseUrlApi("tps/"), { params }); +}; + +export const submitAnalyse = (data?: object) => { + return http.request("post", baseUrlApi("tps/analysis_video/"), { + data + }); +}; + +export const beforeUploadVideo = (params?: object) => { + return http.request("get", baseUrlApi("tps/upload_video/"), { + params + }); }; diff --git a/src/views/videoParse/hook.tsx b/src/views/videoParse/hook.tsx index e53dddd..ed48aec 100644 --- a/src/views/videoParse/hook.tsx +++ b/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, diff --git a/src/views/videoParse/index.vue b/src/views/videoParse/index.vue index ba98cea..2dcbc50 100644 --- a/src/views/videoParse/index.vue +++ b/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([ - { - name: "element-plus-logo.svg", - url: "https://element-plus.org/images/element-plus-logo.svg" - } -]); +const fileList = ref([]); +const uploadFile = ref(); + +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) => { - ElMessage.warning( - `The limit is 3, you selected ${files.length} files this time, add up to ${ - files.length + uploadFiles.length - } totally` - ); +const handleExceed: UploadProps["onExceed"] = files => { + // ElMessage.warning( + // `每次只能上传一个视频，请先删除文件：${fileList.value[0].name}` + // ); + 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( - `Cancel the transfer of ${uploadFile.name} ?` - ).then( + console.log("删除文件前：", uploadFile); + return ElMessageBox.confirm(`是否取消上传文件： ${uploadFile.name} ?`).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: - ""; - break; + return "span-default"; + } +} + +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); }); @@ -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" - multiple + :action="baseUrlApi('tps/upload_video/')" :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" > {{ "选择分析文件" }}选择文件 @@ -168,9 +275,12 @@ onMounted(() => { --> - - 分析 + + 分析 + + + + @@ -307,7 +417,6 @@ onMounted(() => { >