<template>
|
<div class="dataCenter-table">
|
<searchData></searchData>
|
<!-- 表格部分 -->
|
<div class="dataTable">
|
<el-table
|
stripe
|
:data="tableData"
|
class="custom-header"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column label="序号" type="index" width="60" />
|
<el-table-column prop="address" label="所属区域" />
|
<el-table-column property="nest" label="所属机巢" />
|
<el-table-column property="taskname" label="任务名称" />
|
<el-table-column prop="filename" label="文件名称" />
|
<el-table-column property="img" label="缩图" width="120">
|
<template #default="scope">
|
<el-image
|
:src="scope.row.img"
|
:preview-src-list="[scope.row.img]"
|
fit="cover"
|
preview-teleported
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="timer" label="任务时间" />
|
<el-table-column property="fileclass" label="文件类别" />
|
<el-table-column property="fileformat" label="文件格式" />
|
<el-table-column label="操作" width="150" align="center">
|
<template #default="scope">
|
<span class="look" @click="lookDetail(scope.row)">查看</span>
|
<span class="delete" @click="deleteDetail()" v-if="scope.row.fileformat !== 'AI识别'"
|
>删除</span
|
>
|
<span class="location" v-if="scope.row.fileformat !== '视频'">定位</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 分页 -->
|
<div class="pagination">
|
<el-pagination
|
v-model:current-page="jobListParams.current"
|
v-model:page-size="jobListParams.size"
|
:page-sizes="[10, 20, 30, 40]"
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="400"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<!-- 查看弹框 -->
|
<el-dialog v-model="dialogVisible" width="60%" append-to-body>
|
<template #header="{ titleId, titleClass }">
|
<div class="my-header">
|
<h4 :id="titleId" :class="titleClass">{{ dialogDetailList?.filename }}</h4>
|
<el-button type="success" plain icon="el-icon-download">下载</el-button>
|
</div>
|
</template>
|
<div class="detailContainer">
|
<div class="leftImg"><img :src="dialogDetailList.img" alt="" /></div>
|
<div class="rightDetail">
|
<div class="title">
|
<div class="inputEdit">
|
文件名称：<span v-if="!dialogDetailList.checkedinput">{{
|
dialogDetailList?.filename
|
}}</span>
|
<el-input
|
v-else
|
v-model="dialogDetailList.filename"
|
@keyup.enter="saveTitle()"
|
class="title-input"
|
clearable
|
/>
|
</div>
|
<div class="editname" @click="editTitle(dialogDetailList)">
|
<span v-if="!dialogDetailList.checkedinput"
|
><el-icon><Edit /></el-icon
|
></span>
|
<div v-else class="suffixBoxEdit">
|
<div class="editText" @click="submitEditSuffix(item, index)">✔</div>
|
<div class="editText" @click="cancelEditSuffix(item, index)">✖</div>
|
</div>
|
</div>
|
</div>
|
<div>任务名称：{{ dialogDetailList?.taskname }}</div>
|
<div>所属区域：{{ dialogDetailList?.address }}</div>
|
<div>拍摄机巢：{{ dialogDetailList?.nest }}</div>
|
<div>照片位置：{{}}</div>
|
<div>任务时间：{{ dialogDetailList?.date }}</div>
|
<div>拍摄时间：{{ dialogDetailList?.date }}</div>
|
<div>文件类型：{{ dialogDetailList?.fileclass }}</div>
|
<div>文件格式：{{ dialogDetailList?.fileformat }}</div>
|
<div>照片文件大小：2M</div>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import searchData from '@/views/dataCenter/components/searchData.vue';
|
import fy1 from '@/assets/images/workbench/fy1.png';
|
const jobListParams = reactive({
|
current: 1,
|
size: 10,
|
searchParams: {},
|
});
|
const tableData = [
|
{
|
address: '南昌市,西湖区',
|
nest: '空间大厦',
|
date: '2016-05-04',
|
taskname: '测试任务',
|
filename: 'ABD2025053054654',
|
img: fy1,
|
timer: '2025-05-26 10:25',
|
fileclass: '可见光',
|
fileformat: '照片',
|
},
|
{
|
address: '南昌市,西湖区',
|
nest: '空间大厦',
|
date: '2016-05-04',
|
taskname: '测试任务',
|
filename: '1111',
|
img: fy1,
|
timer: '2025-05-26 10:25',
|
fileclass: '可见光',
|
fileformat: '视频',
|
},
|
{
|
address: '南昌市,西湖区',
|
nest: '空间大厦',
|
date: '2016-05-04',
|
taskname: '测试任务',
|
filename: '2222',
|
img: fy1,
|
timer: '2025-05-26 10:25',
|
fileclass: '可见光',
|
fileformat: 'AI识别',
|
},
|
{
|
address: '南昌市,西湖区',
|
nest: '空间大厦',
|
date: '2016-05-04',
|
taskname: '测试任务',
|
filename: '333',
|
img: fy1,
|
timer: '2025-05-26 10:25',
|
fileclass: '可见光',
|
fileformat: '全景',
|
},
|
{
|
address: '南昌市,西湖区',
|
nest: '空间大厦',
|
date: '2016-05-04',
|
taskname: '测试任务',
|
filename: '44',
|
img: fy1,
|
timer: '2025-05-26 10:25',
|
fileclass: '可见光',
|
fileformat: '正射',
|
},
|
];
|
const handleSizeChange = () => {};
|
const handleCurrentChange = () => {};
|
// 多选
|
const selectedRows = ref([]);
|
const handleSelectionChange = val => {
|
// console.log('多选',val);
|
};
|
|
// 弹框
|
const dialogVisible = ref(false);
|
const dialogDetailList = ref(null);
|
const lookDetail = val => {
|
dialogDetailList.value = val;
|
// console.log('弹框', dialogDetailList.value);
|
dialogVisible.value = true;
|
};
|
// 删除
|
const deleteDetail = () => {
|
ElMessageBox.confirm('您确定删除吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
});
|
};
|
// 编辑文件名
|
const editTitle = val => {
|
console.log('val', val);
|
val.checkedinput = !val.checkedinput;
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.dataCenter-table {
|
margin: 0 18px 16px 10px;
|
background-color: #ffffff;
|
padding: 14px 18px;
|
.dataTable {
|
height: 700px;
|
overflow: auto;
|
.look {
|
color: #1c5cff;
|
cursor: pointer;
|
margin-right: 10px;
|
}
|
.delete {
|
color: #ff241c;
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
.location {
|
color: #19876d;
|
cursor: pointer;
|
}
|
}
|
.pagination {
|
display: flex;
|
justify-content: end;
|
margin-top: 20px;
|
}
|
}
|
:deep(.custom-header th.el-table__cell) {
|
color: rgba(0, 0, 0, 0.85);
|
}
|
// 弹框
|
.detailContainer {
|
display: flex;
|
justify-content: space-between;
|
.leftImg {
|
width: 70%;
|
height: 500px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.rightDetail {
|
width: 30%;
|
padding-left: 40px;
|
.title {
|
display: flex;
|
margin: 0 !important;
|
.editname {
|
cursor: pointer;
|
}
|
.inputEdit {
|
display: flex;
|
align-items: center;
|
}
|
}
|
div {
|
margin-bottom: 20px;
|
}
|
}
|
}
|
.my-header :deep(.el-dialog__title) {
|
margin: 0 !important;
|
}
|
.my-header {
|
display: flex;
|
align-items: center;
|
.el-button {
|
margin-left: 20px;
|
}
|
}
|
.title-input {
|
margin-bottom: 0 !important;
|
width: 70%;
|
}
|
.editname {
|
margin-bottom: 0 !important;
|
}
|
.suffixBoxEdit {
|
display: flex;
|
// align-items: center;
|
justify-content: space-between;
|
margin-bottom: 0 !important;
|
font-size: 16px;
|
> .editText {
|
cursor: pointer;
|
margin-right: 6px;
|
&:hover {
|
transform: scale(1.2);
|
}
|
}
|
.editimg {
|
cursor: pointer;
|
width: 15px;
|
height: 15px;
|
&:hover {
|
transform: scale(1.2);
|
}
|
}
|
}
|
</style>
|
