375 lines
11 KiB
Vue
375 lines
11 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"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<el-button style="background-color: #ffb750; color: #fff" @click="refresh">刷新</el-button>
|
||
<el-button class="addButtonStyle" @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.url"></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.uploadTime }}</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>
|
||
<engineeringEngDrawer v-model="engVisable" :active="activeValue" ref="engDrawer" :engList="engList" @select="tabsSelect">
|
||
<template #default="{ data }">
|
||
<span style="margin-left: 10px" @click="onUpdate(data)">{{
|
||
activeValue == "eng" ? data.engineeringName : data.projectName
|
||
}}</span>
|
||
</template>
|
||
</engineeringEngDrawer>
|
||
<allEngineering @click="engVisable = true" />
|
||
<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 v-model="formData.title" placeholder="请输入" />
|
||
</el-form-item>
|
||
<el-form-item label="上传时间：" prop="uploadTime">
|
||
<el-date-picker
|
||
style="width: 100%"
|
||
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 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>
|
||
<el-button class="cancelButtonStyle" @click="visible = false">取消</el-button>
|
||
<el-button 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, getEngineeringName } 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";
|
||
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
|
||
import allEngineering from "@/components/allEngineering/index.vue";
|
||
import { getRelevanceList } from "@/api/modules/common";
|
||
const activeValue = ref("eng");
|
||
const engList = ref([]);
|
||
const engVisable = ref(false);
|
||
const searchSn = ref("");
|
||
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>({
|
||
title: {
|
||
required: true,
|
||
message: "请输入",
|
||
trigger: "blur"
|
||
},
|
||
uploadTime: {
|
||
required: true,
|
||
message: "请选择",
|
||
trigger: "change"
|
||
},
|
||
remark: {
|
||
required: true,
|
||
message: "请输入",
|
||
trigger: "blur"
|
||
},
|
||
videoUrl: {
|
||
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: ""
|
||
});
|
||
|
||
// 抽屉tab选择时
|
||
const tabsSelect = val => {
|
||
activeValue.value = val;
|
||
if (val == "eng") {
|
||
getengineering();
|
||
} else if (val == "project") {
|
||
getProject();
|
||
}
|
||
};
|
||
// 获取项目信息
|
||
const getProject = async () => {
|
||
const res = await getEngineeringName();
|
||
engList.value = [res.result];
|
||
if (res.result) {
|
||
searchSn.value = res.result.projectSn;
|
||
}
|
||
getVideoData();
|
||
console.log(res);
|
||
};
|
||
const getengineering = async () => {
|
||
// let newParams = JSON.parse(JSON.stringify(params));
|
||
const res = await getRelevanceList();
|
||
engList.value = res.result;
|
||
if (res.result && res.result.length > 0) {
|
||
searchSn.value = res.result[0].engineeringSn;
|
||
}
|
||
getVideoData();
|
||
console.log(res);
|
||
};
|
||
// 点击抽屉的工程名称更新页面
|
||
const onUpdate = async row => {
|
||
if (activeValue.value == "eng") {
|
||
searchSn.value = row.engineeringSn;
|
||
} else if (activeValue.value == "project") {
|
||
searchSn.value = row.projectSn;
|
||
}
|
||
getVideoData();
|
||
ElMessage.success("页面已更新");
|
||
};
|
||
// 文件上传之前的钩子函数
|
||
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 refresh = () => {
|
||
form.value = {
|
||
title: "",
|
||
createTime: "",
|
||
startTime: "",
|
||
endTime: ""
|
||
};
|
||
getVideoData();
|
||
};
|
||
// 查询
|
||
const handleSearch = () => {
|
||
console.log(666);
|
||
getVideoData();
|
||
};
|
||
const handleEditItem = (index: number, row: any) => {
|
||
title.value = "编辑录像";
|
||
formData.value = { ...row };
|
||
console.log(formData.value);
|
||
fileList.value = row.videoUrl ? [row.videoUrl] : [];
|
||
visible.value = true;
|
||
};
|
||
const getVideoData = async () => {
|
||
let requestData = {
|
||
...pageable.value,
|
||
...form.value,
|
||
startTime: form.value.createTime ? form.value.createTime[0] : "",
|
||
endTime: form.value.createTime ? form.value.createTime[1] : ""
|
||
};
|
||
if (activeValue.value == "eng") {
|
||
requestData.engineeringSn = searchSn.value;
|
||
} else if (activeValue.value == "project") {
|
||
requestData.projectSn = searchSn.value;
|
||
}
|
||
delete requestData.createTime;
|
||
if (requestData.engineeringSn || requestData.projectSn) {
|
||
const res = await videoList(requestData);
|
||
if (res.result && res.result.records.length > 0) {
|
||
res.result.records.map(item => {
|
||
item.videoUrl = JSON.parse(item.videoUrl);
|
||
});
|
||
videoData.value.records = res.result.records;
|
||
} else {
|
||
videoData.value.records = [];
|
||
}
|
||
} else {
|
||
videoData.value.records = [];
|
||
}
|
||
};
|
||
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("上传成功");
|
||
formData.value.videoUrl = { name: response.result.originalFilename, url: response.result.url };
|
||
fileList.value = [{ name: response.result.originalFilename, url: response.result.downloadPath }];
|
||
ruleFormRef.value.validateField("videoUrl");
|
||
};
|
||
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) => {
|
||
// 标记表单校验
|
||
if (!formEl) return;
|
||
await formEl.validate(async (valid, fields) => {
|
||
if (valid) {
|
||
if (activeValue.value == "eng") {
|
||
form.engineeringSn = searchSn.value;
|
||
} else if (activeValue.value == "project") {
|
||
form.projectSn = searchSn.value;
|
||
}
|
||
form.videoUrl = JSON.stringify(form.videoUrl);
|
||
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) => {};
|
||
|
||
onMounted(async () => {
|
||
getengineering();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./index.scss";
|
||
</style>
|