297 lines
8.4 KiB
Vue
297 lines
8.4 KiB
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>
|