wisdomisitezwfront-web/src/views/hz-project/smartSite/unmannedVideo/videoData/index.vue

<template>
	<div class="warning-page">
		<div class="right_container">
			<!-- <div class="form_div"> -->
			<el-form :model="form" :inline="true" @submit.prevent class="form" ref="FormRef">
				<el-form-item label="标题">
					<el-input v-model="form.title" placeholder="请输入" clearable />
				</el-form-item>
				<el-form-item label="创建时间">
					<el-date-picker
						v-model="form.createTime"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						@change="onDatePicker"
					/>
				</el-form-item>
				<el-form-item>
					<el-button class="btnStyle" type="primary" @click="handleSearch">查询</el-button>
					<el-button class="btnStyle">刷新</el-button>
					<el-button class="btnStyle" @click="addVideoData">新增</el-button>
				</el-form-item>
			</el-form>
			<!-- </div> -->

			<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" /> -->
						<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>
								<el-button type="primary" link @click="handleEditItem(2, item)">
									<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
									<span>编辑</span>
								</el-button>
								<el-button style="margin-right: 12px" type="danger" link :icon="Delete" @click="deleteAccount(item)"
									>删除</el-button
								>
							</div>
							<div class="img_bottom">
								<!-- <div class="position" style="font-size: 12px">位置：{{ item.deviceName }}</div> -->
								<div style="font-size: 12px">时间：{{ item.createTime }}</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="table-empty">
					<img src="@/assets/images/notData.png" alt="notData" />
					<div>暂无数据</div>
				</div>
				<!-- :handleSizeChange="handleSizeChange" -->
				<Pagination
					:pageable="pageable"
					:total="pageable.total"
					:page-size="pageable.pageSize"
					layout="prev, pager, next, jumper"
					:handleCurrentChange="handleCurrentChange"
					:background="background"
					class="pagination"
				/>
			</div>
		</div>
	</div>
	<el-dialog class="imgDialog" :title="title" width="40%" v-model="visible" show-close>
		<el-form class="diaForm" :rules="rules" :model="formData" ref="ruleFormRef" label-width="160px">
			<el-form-item label="录像标题：" prop="title">
				<el-input style="width: 70%" v-model="formData.title" placeholder="请输入" />
			</el-form-item>
			<el-form-item label="上传时间：" prop="uploadTime">
				<el-date-picker
					style="width: 70%"
					v-model="formData.uploadTime"
					format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="datetime"
					placeholder="请选择时间"
				/>
			</el-form-item>
			<el-form-item label="备注：" prop="remark">
				<el-input style="width: 70%" v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入" />
			</el-form-item>
			<el-form-item label="录像文件：" prop="videoUrl">
				<el-upload
					ref="upload"
					:headers="headers"
					:file-list="fileList"
					class="upload-demo"
					:action="`${baseUrl}` + '/xmgl/file/upload'"
					:on-remove="onRemove"
					multiple
					:limit="1"
					:on-success="uploadSuccess"
					:before-upload="beforeUpload"
					style="width: 100%"
				>
					<el-button class="uploadBtn" type="primary">点击上传</el-button>
				</el-upload>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="form-footer">
				<el-button class="hzCancelStyle" @click="visible = false">取消</el-button>
				<el-button class="btnStyle" type="primary" @click="confirm(ruleFormRef, formData)"> 保存 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { videoList, videoDataAdd, videoDataEdit, videoDataDelete } from "@/api/modules/project";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { ElMessage, UploadProps } from "element-plus";
import type { FormRules, FormInstance, UploadInstance } from "element-plus";
import { GlobalStore } from "@/stores";
import { Delete } from "@element-plus/icons-vue";
import { jxj_User } from "@/api/types";
import { useHandleData } from "@/hooks/useHandleData";
const upload = ref<UploadInstance>();
const fileList = ref([]);
const store = GlobalStore();
const headers = ref({ Authorization: "Bearer " + store.token });
const ruleFormRef = ref<FormInstance>();
const baseUrl = import.meta.env.VITE_API_URL;
interface formData {
	title: string;
	uploadTime: string;
	remark: string;
	videoUrl: string;
}
const formData = ref<formData>({
	title: "",
	uploadTime: "",
	remark: "",
	videoUrl: ""
});
const background = ref(true);
const visible = ref(false);
const title = ref("新增录像");

const rules = reactive<FormRules>({
	serialNumber: {
		required: true,
		message: "请输入",
		trigger: "blur"
	},
	dname: {
		required: true,
		message: "请输入",
		trigger: "change"
	},
	brand: {
		required: true,
		message: "请输入",
		trigger: "change"
	},
	model: {
		required: true,
		message: "请输入",
		trigger: "change"
	},
	droneType: {
		required: true,
		message: "请输入",
		trigger: "change"
	},
	liveUrl: {
		required: true,
		message: "请输入",
		trigger: "change"
	},
	image: {
		required: true,
		message: "请上传",
		trigger: "change"
	}
});
const pageable = ref({
	pageNo: 1,
	pageSize: 12,
	total: 0
});

const videoData = ref({
	records: []
});
const form = ref({
	title: "",
	createTime: "",
	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 }, `删除`);
	getVideoData();
};
const handleSearch = () => {
	console.log(666);
	getVideoData();
};
const handleEditItem = (index: number, row: any) => {
	title.value = "编辑录像";
	formData.value = { ...row };
	console.log(formData.value);
	if (row.videoUrl) {
		fileList.value = reactive([{ name: "文件", url: row.videoUrl }]);
	}
	visible.value = true;
};
const getVideoData = async () => {
	const res = await videoList({ ...pageable.value, ...form.value });
	videoData.value.records = res.result.records;
	console.log(videoData.value);
	console.log(res);
};

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 }];
};
const onRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
	formData.value.videoUrl = "";
	fileList.value = reactive([]);
};
// 新增影像
const addVideoData = () => {
	title.value = "新增录像";
	formData.value = reactive<formData>({
		title: "",
		uploadTime: "",
		remark: "",
		videoUrl: ""
	});
	fileList.value = reactive([]);
	visible.value = true;
};
const confirm = async (formEl: FormInstance | undefined, form: any) => {
	console.log(form);
	// 标记表单校验
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			if (formData.value.id) {
				const res = await videoDataEdit(form);
				ElMessage.success("编辑成功");
				visible.value = false;
				getVideoData();
			} else {
				const res = await videoDataAdd(form);
				ElMessage.success("保存成功");
				visible.value = false;
				getVideoData();
			}
		} else {
			console.log("error submit!", fields);
			ElMessage({
				showClose: true,
				message: "请完善表单信息！",
				type: "error"
			});
		}
	});
};
// 页面的分页
const handleCurrentChange = async (page: number) => {};
// form日期选择后改变入参
const onDatePicker = () => {
	form.value.startTime = form.value.createTime[0];
	form.value.endTime = form.value.createTime[1];
};

onMounted(async () => {
	getVideoData();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>