From fd4b04dff7153f15a32d442584396bbfc69f4e6a Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Wed, 21 Jun 2023 16:13:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goverment/huizhou/droneImaging/index.vue  | 14 +++++++++-
 .../unmannedVideo/videoData/index.scss        |  2 +-
 .../unmannedVideo/videoData/index.vue         | 28 +++++++++++--------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/views/goverment/huizhou/droneImaging/index.vue b/src/views/goverment/huizhou/droneImaging/index.vue
index 1f7cbe9..1022584 100644
--- a/src/views/goverment/huizhou/droneImaging/index.vue
+++ b/src/views/goverment/huizhou/droneImaging/index.vue
@@ -52,7 +52,8 @@
 			<div class="imgPage">
 				<div class="imgTable" v-if="videoData.records.length">
 					<div class="img_item" v-for="item in videoData.records" :key="item.id">
-						<el-image style="width: 100%; height: 182px" :src="item.videoUrl" fit="fill" />
+						<!-- <el-image style="width: 100%; height: 182px" :src="item.videoUrl" fit="fill" /> -->
+						<video style="width: 100%; height: 182px; object-fit: fill" controls :src="item.videoUrl"></video>
 						<div class="page_text flx-justify-column">
 							<div class="img_title">
 								<span>{{ item.title }}</span>
@@ -118,6 +119,7 @@
 					multiple
 					:limit="1"
 					:on-success="uploadSuccess"
+					:before-upload="beforeUpload"
 					style="width: 100%"
 				>
 					<el-button class="uploadBtn" type="primary">点击上传</el-button>
@@ -234,6 +236,16 @@ const searchSn = ref("");
 
 // 项目或者工程名字
 const searchName = ref<string>("");
+
+// 文件上传之前的钩子函数
+const beforeUpload = file => {
+	console.log(file);
+	const type = file.type;
+	if (type != "video/mp4") {
+		ElMessage.error("请上传视频文件");
+		return false;
+	}
+};
 // 页面的项目名称和工程名称的div点击事件
 const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
 	const { result } = await getUnmannedPage(
diff --git a/src/views/hz-project/smartSite/unmannedVideo/videoData/index.scss b/src/views/hz-project/smartSite/unmannedVideo/videoData/index.scss
index 9a74da6..922646a 100644
--- a/src/views/hz-project/smartSite/unmannedVideo/videoData/index.scss
+++ b/src/views/hz-project/smartSite/unmannedVideo/videoData/index.scss
@@ -193,7 +193,7 @@
 	width: 200px;
 }
 // 表单
-:deep(.el-form) {
+:deep() {
 	.el-form-item__content > :not(button) {
 		width: 160px;
 	}
diff --git a/src/views/hz-project/smartSite/unmannedVideo/videoData/index.vue b/src/views/hz-project/smartSite/unmannedVideo/videoData/index.vue
index 6bdaf1d..f1ba4ce 100644
--- a/src/views/hz-project/smartSite/unmannedVideo/videoData/index.vue
+++ b/src/views/hz-project/smartSite/unmannedVideo/videoData/index.vue
@@ -29,7 +29,8 @@
 			<div class="imgPage">
 				<div class="imgTable" v-if="videoData.records.length">
 					<div class="img_item" v-for="item in videoData.records" :key="item.id">
-						<el-image style="width: 100%; height: 182px" :src="item.videoUrl" fit="fill" />
+						<!-- <el-image style="width: 100%; height: 182px" :src="item.videoUrl" fit="fill" /> -->
+						<video style="width: 100%; height: 182px; object-fit: fill" controls :src="item.videoUrl"></video>
 						<div class="page_text flx-justify-column">
 							<div class="img_title">
 								<span>{{ item.title }}</span>
@@ -94,6 +95,7 @@
 					multiple
 					:limit="1"
 					:on-success="uploadSuccess"
+					:before-upload="beforeUpload"
 					style="width: 100%"
 				>
 					<el-button class="uploadBtn" type="primary">点击上传</el-button>
@@ -193,6 +195,15 @@ const form = ref({
 	startTime: "",
 	endTime: ""
 });
+// 文件上传之前的钩子函数
+const beforeUpload = file => {
+	console.log(file);
+	const type = file.type;
+	if (type != "video/mp4") {
+		ElMessage.error("请上传视频文件");
+		return false;
+	}
+};
 // 删除用户信息
 const deleteAccount = async (params: jxj_User.ResUserList) => {
 	await useHandleData(videoDataDelete, { id: params.id }, `删除`);
@@ -206,7 +217,9 @@ const handleEditItem = (index: number, row: any) => {
 	title.value = "编辑录像";
 	formData.value = { ...row };
 	console.log(formData.value);
-	fileList.value = reactive([{ name: "文件", url: row.videoUrl }]);
+	if (row.videoUrl) {
+		fileList.value = reactive([{ name: "文件", url: row.videoUrl }]);
+	}
 	visible.value = true;
 };
 const getVideoData = async () => {
@@ -215,18 +228,10 @@ const getVideoData = async () => {
 	console.log(videoData.value);
 	console.log(res);
 };
-const handleExceed: UploadProps["onExceed"] = files => {
-	// console.log(1111);
-	// upload.value!.clearFiles();
-	// const file = files[0] as UploadRawFile;
-	// file.uid = genFileId();
-	// // fileList.value = file;
-	// upload.value!.handleStart(file);
-	// upload.value?.submit();
-};
 
 const uploadSuccess = (response: any) => {
 	ElMessage.success("上传成功");
+	console.log(response.result);
 	formData.value.videoUrl = response.result.url;
 	fileList.value = [{ name: response.result.originalFilename, url: response.result.downloadPath }];
 };
@@ -247,6 +252,7 @@ const addVideoData = () => {
 	visible.value = true;
 };
 const confirm = async (formEl: FormInstance | undefined, form: any) => {
+	console.log(form);
 	// 标记表单校验
 	if (!formEl) return;
 	await formEl.validate(async (valid, fields) => {