<template>
|
<div class="dataCenter-table">
|
<searchData></searchData>
|
<!-- 表格部分 -->
|
<div class="dataTable" >
|
<el-table
|
v-loading="loading"
|
element-loading-text="加载中"
|
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="regionName" label="所属区域" />
|
<el-table-column property="nestName" label="所属机巢" />
|
<el-table-column property="jobName" label="任务名称" show-overflow-tooltip/>
|
<el-table-column prop="nickName" label="文件名称" show-overflow-tooltip />
|
<el-table-column property="img" label="缩图" width="120">
|
<template #default="scope">
|
<img
|
class="quanjing"
|
@click="clickpanorama(scope.row)"
|
v-if="scope.row.fileformat === '全景'"
|
:src="scope.row.link"
|
alt=""
|
/>
|
<img
|
v-else-if="scope.row.fileformat === '视频'"
|
:src="convertVideoUrlToThumbnail(scope.row.link)"
|
alt=""
|
class="imageBox"
|
@click="enterFullScreen(scope.row)"
|
/>
|
<el-image
|
v-else
|
:src="scope.row.img"
|
:preview-src-list="[scope.row.link]"
|
fit="cover"
|
preview-teleported
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="任务时间" />
|
<el-table-column property="photoType" label="文件类别" >
|
<template #default="scope">
|
<span>{{scope.row.photoType=== 'visible' ? '可见光':'红外'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column property="resultType" label="文件格式">
|
<template #default="scope">
|
<span>{{
|
scope.row.resultType === 0
|
? '照片'
|
: scope.row.resultType === 1
|
? '视频'
|
: scope.row.resultType === 2
|
? 'AI识别'
|
: scope.row.resultType === 3
|
? '全景'
|
: '正射'
|
}}</span>
|
</template>
|
</el-table-column>
|
<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" @click="positionDetail()" 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="total"
|
@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>
|
<!-- 全景预览 -->
|
<PanoramaPopup
|
v-model:panoramaParamsShow="panoramaParamsShow"
|
v-model:panoramaParamsUrl="panoramaParamsUrl"
|
></PanoramaPopup>
|
<!-- 视频预览 -->
|
<el-dialog
|
:title="currentVideoTitle"
|
modal-class="videoDialog"
|
append-to-body
|
width="54%"
|
v-model="VideoShow"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
@close="currentVideoIndex = -1"
|
>
|
<div class="video-container">
|
<video
|
style="width: 100%"
|
class="videoBox"
|
ref="videoRefs"
|
controls
|
autoplay
|
:src="currentVideoUrl"
|
></video>
|
</div>
|
</el-dialog>
|
<!-- 地图弹框 -->
|
<dataCenterMap v-model:show="dataCenterMapVisible"></dataCenterMap>
|
</div>
|
</template>
|
|
<script setup>
|
import dataCenterMap from '@/views/dataCenter/components/dataCenterMap.vue';
|
import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import searchData from '@/views/dataCenter/components/searchData.vue';
|
import fy1 from '@/assets/images/dataCenter/1.jpeg';
|
import { getaiImagesPage } from '@/api/dataCenter/dataCenter';
|
import { onMounted } from 'vue';
|
function convertVideoUrlToThumbnail(videoUrl) {
|
// 检查是否是有效的视频URL
|
if (!videoUrl || typeof videoUrl !== 'string') {
|
return videoUrl;
|
}
|
// 替换文件扩展名
|
const thumbnailUrl = videoUrl.replace(/\.mp4$/, '_small.jpg');
|
return thumbnailUrl;
|
}
|
const loading = ref(true);
|
const total = ref(0);
|
const jobListParams = reactive({
|
current: 1,
|
size: 10,
|
searchParams: {},
|
});
|
const tableData = ref([]);
|
|
// 获取列表数据
|
const getgetaiImagesPage = () => {
|
getaiImagesPage(jobListParams).then(res => {
|
loading.value = true;
|
total.value = res.data.data.total;
|
|
tableData.value = res.data.data?.records;
|
console.log('res', tableData.value, total.value);
|
loading.value = false;
|
});
|
};
|
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;
|
};
|
// 全景预览
|
const panoramaParamsShow = ref(false);
|
const panoramaParamsUrl = ref(null);
|
const clickpanorama = val => {
|
panoramaParamsShow.value = true;
|
panoramaParamsUrl.value = val.img;
|
// console.log('全景', val);
|
};
|
// 视频
|
const currentVideoTitle = ref('');
|
const VideoShow = ref(false);
|
const currentVideoUrl = ref(null);
|
const enterFullScreen = val => {
|
currentVideoTitle.value = val.filename;
|
VideoShow.value = true;
|
currentVideoUrl.value = val.img;
|
console.log('视频', val);
|
};
|
// 地图弹框
|
const dataCenterMapVisible = ref(false);
|
const positionDetail = () => {
|
console.log('地图');
|
dataCenterMapVisible.value = true;
|
};
|
onMounted(() => {
|
getgetaiImagesPage();
|
});
|
</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;
|
}
|
.quanjing,
|
.el-image,
|
.imageBox {
|
cursor: pointer;
|
width: 76px;
|
height: 72px;
|
}
|
.videoDialog :deep(.el-dialog) {
|
height: 600px;
|
width: 54%;
|
}
|
.video-container {
|
width: 100%;
|
aspect-ratio: 16/9; /* 按视频比例设置（如16:9） */
|
overflow: hidden; /* 隐藏溢出部分 */
|
}
|
.videoBox {
|
width: 100%;
|
height: 100%;
|
object-fit: contain; /* 保持比例完整显示 */
|
display: block;
|
}
|
}
|
: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>
|
