| | |
| | | <template> |
| | | <div class="dataCenter-table"> |
| | | <searchData @search="searchClick"></searchData> |
| | | <searchData |
| | | @search="searchClick" |
| | | @downFun="downloadFile" |
| | | @allDownFun="aLLDownloadFile" |
| | | ></searchData> |
| | | <!-- 表格部分 --> |
| | | <div class="dataTable"> |
| | | <el-table |
| | |
| | | > |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column label="序号" type="index" width="60"> |
| | | <template #default="{ $index }"> |
| | | {{ ($index + 1 + (jobListParams.current - 1) * jobListParams.size).toString().padStart(2, '0') }} |
| | | </template> |
| | | </el-table-column> |
| | | <template #default="{ $index }"> |
| | | {{ |
| | | ($index + 1 + (jobListParams.current - 1) * jobListParams.size) |
| | | .toString() |
| | | .padStart(2, '0') |
| | | }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="regionName" label="所属区域" /> |
| | | <el-table-column property="nestName" label="所属机巢" /> |
| | | <el-table-column property="jobName" label="任务名称" show-overflow-tooltip /> |
| | |
| | | <img |
| | | class="quanjing" |
| | | @click="clickpanorama(scope.row)" |
| | | v-if="scope.row.fileformat === '全景'" |
| | | v-if="scope.row?.resultType === 3" |
| | | :src="scope.row.link" |
| | | alt="" |
| | | /> |
| | | <img |
| | | v-else-if="scope.row.fileformat === '视频'" |
| | | v-else-if="scope.row?.resultType === 1" |
| | | :src="convertVideoUrlToThumbnail(scope.row.link)" |
| | | alt="" |
| | | class="imageBox" |
| | |
| | | /> |
| | | <el-image |
| | | v-else |
| | | :src="scope.row.img" |
| | | :preview-src-list="[scope.row.link]" |
| | | :src="scope.row.smallUrl" |
| | | :preview-src-list="[scope.row.showUrl]" |
| | | fit="cover" |
| | | preview-teleported |
| | | /> |
| | |
| | | <el-table-column prop="jobTime" label="任务时间" /> |
| | | <el-table-column property="photoType" label="文件类别"> |
| | | <template #default="scope"> |
| | | <span>{{photoTypeMap[scope.row.photoType] }}</span> |
| | | <span>{{ photoTypeMap[scope.row.photoType] }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column property="resultType" label="文件格式"> |
| | | <template #default="{ row }"> |
| | | <span>{{ resultTypeMap[row.resultType] }}</span> |
| | | <span>{{ resultTypeMap[row?.resultType] }}</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 |
| | | class="delete" |
| | | @click="deleteDetail(scope.row)" |
| | | v-if="scope.row.fileformat !== 'AI识别'" |
| | | >删除</span |
| | | > |
| | | <span class="location" @click="positionDetail()" v-if="scope.row.fileformat !== '视频'" |
| | |
| | | </div> |
| | | </template> |
| | | <div class="detailContainer"> |
| | | <div class="leftImg"><img :src="dialogDetailList.link" alt="" /></div> |
| | | <div class="leftImg"> |
| | | <img |
| | | v-if="dialogDetailList?.resultType === 1" |
| | | :src="convertVideoUrlToThumbnail(dialogDetailList.link)" |
| | | alt="" |
| | | class="imageBox" |
| | | /> |
| | | <img v-else :src="dialogDetailList.link" alt="" /> |
| | | </div> |
| | | <div class="rightDetail"> |
| | | <div class="title"> |
| | | <div class="inputEdit"> |
| | |
| | | <div>任务名称:{{ dialogDetailList?.jobName }}</div> |
| | | <div>所属区域:{{ dialogDetailList?.regionName }}</div> |
| | | <div>拍摄机巢:{{ dialogDetailList?.nickName }}</div> |
| | | <div>照片位置:{{dialogDetailList?.longitude}},{{dialogDetailList?.latitude}}</div> |
| | | <div>任务时间:{{ dialogDetailList?.executeTime }}</div> |
| | | <div>拍摄时间:{{ dialogDetailList?.date }}</div> |
| | | <div>文件类型:{{photoTypeMap[dialogDetailList?.photoType] }}</div> |
| | | <div>照片位置:{{ dialogDetailList?.longitude }},{{ dialogDetailList?.latitude }}</div> |
| | | <div>任务时间:{{ dialogDetailList?.jobTime }}</div> |
| | | <div>拍摄时间:{{ dialogDetailList?.createTime }}</div> |
| | | <div>文件类型:{{ photoTypeMap[dialogDetailList?.photoType] }}</div> |
| | | <div>文件格式:{{ resultTypeMap[dialogDetailList?.resultType] }}</div> |
| | | <div>照片文件大小:{{dialogDetailList?.attachSize}}</div> |
| | | <div>照片文件大小:{{ dialogDetailList?.attachSize }}</div> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | <script setup> |
| | | import dataCenterMap from '@/views/dataCenter/components/dataCenterMap.vue'; |
| | | import PanoramaPopup from '@/components/PanoramaPopup/PanoramaPopup.vue'; //全景 |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'; |
| | | import searchData from '@/views/dataCenter/components/searchData.vue'; |
| | | import fy1 from '@/assets/images/dataCenter/1.jpeg'; |
| | | import { getaiImagesPageAPI, getAttachInfoAPI } from '@/api/dataCenter/dataCenter'; |
| | | import { |
| | | getaiImagesPageAPI, |
| | | getAttachInfoAPI, |
| | | deleteFileMultipleApi, |
| | | downloadApi, |
| | | } from '@/api/dataCenter/dataCenter'; |
| | | import { getShowImg, getSmallImg } from '@/utils/util'; |
| | | import { onMounted } from 'vue'; |
| | | import dayjs from 'dayjs'; |
| | | // 视频一帧 |
| | | function convertVideoUrlToThumbnail(videoUrl) { |
| | | // 检查是否是有效的视频URL |
| | | if (!videoUrl || typeof videoUrl !== 'string') { |
| | |
| | | 1: '视频', |
| | | 2: 'AI识别', |
| | | 3: '全景', |
| | | 4:'正射' |
| | | 4: '正射', |
| | | }; |
| | | const photoTypeMap ={ |
| | | visible:'可见光', |
| | | ir:'红外' |
| | | } |
| | | const photoTypeMap = { |
| | | visible: '可见光', |
| | | ir: '红外', |
| | | }; |
| | | const loading = ref(true); |
| | | const total = ref(0); |
| | | const startTime = dayjs().subtract(6, 'day').startOf('day') |
| | | const endTime = dayjs().endOf('day') |
| | | const timeRange = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')] |
| | | console.log('11',timeRange); |
| | | const startTime = dayjs().subtract(6, 'day').startOf('day'); |
| | | const endTime = dayjs().endOf('day'); |
| | | const timeRange = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')]; |
| | | |
| | | const jobListParams = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | searchParams: {startTime:timeRange[0],endTime:timeRange[1]}, |
| | | orderByCreateTime: true, |
| | | searchParams: { startTime: timeRange[0], endTime: timeRange[1] }, |
| | | }); |
| | | const tableData = ref([]); |
| | | |
| | |
| | | getaiImagesPageAPI({ |
| | | current: jobListParams.current, |
| | | size: jobListParams.size, |
| | | orderByCreateTime: jobListParams.orderByCreateTime, |
| | | ...jobListParams.searchParams, |
| | | }).then(res => { |
| | | loading.value = true; |
| | |
| | | tableData.value = res.data.data.records.map(i => ({ |
| | | ...i, |
| | | checked: false, |
| | | url: i.domainUrl, |
| | | smallUrl: getSmallImg(i.domainUrl), |
| | | showUrl: getShowImg(i.domainUrl), |
| | | url: i.link, |
| | | smallUrl: getSmallImg(i.link), |
| | | showUrl: getShowImg(i.link), |
| | | file_name: i.name.split('/').pop(), |
| | | })); |
| | | console.log('res', tableData.value); |
| | |
| | | jobListParams.current = 1; |
| | | jobListParams.size = 10; |
| | | jobListParams.searchParams = params; |
| | | console.log('jobListParams', jobListParams); |
| | | |
| | | getaiImagesPage(); |
| | | }; |
| | | const handleSizeChange = val => { |
| | | jobListParams.size = val; |
| | | getaiImagesPage(); |
| | | |
| | | console.log('jobListParams.size', jobListParams.size); |
| | | }; |
| | | const handleCurrentChange = val => { |
| | | jobListParams.current = val; |
| | | getaiImagesPage(); |
| | | console.log('jobListParams.current', jobListParams.current); |
| | | }; |
| | | // 多选 |
| | | const selectedRows = ref([]); |
| | | const handleSelectionChange = val => { |
| | | // console.log('多选',val); |
| | | }; |
| | | // 更新选中状态 |
| | | tableData.value.forEach(item => { |
| | | item.checked = val.some(selected => selected.id === item.id); |
| | | }); |
| | | |
| | | selectedRows.value = val; |
| | | }; |
| | | // url下载 |
| | | function aLinkDownload(url, name) { |
| | | const a = document.createElement('a'); |
| | | a.style.display = 'none'; |
| | | a.href = url; |
| | | a.download = name; |
| | | document.body.appendChild(a); |
| | | a.click(); |
| | | document.body.removeChild(a); |
| | | } |
| | | const fileDownload = () => { |
| | | const list = selectedRows.value.filter(i => i.checked); |
| | | if (!list?.length) return ElMessage.warning('请选择文件'); |
| | | if (list.length === 1) { |
| | | list.forEach((item, index) => { |
| | | setTimeout(() => { |
| | | // console.log('item.url, item.file_name', item.url, item.nickName) |
| | | aLinkDownload(item.url, item.nickName); |
| | | }, index * 500); // 每个文件下载间隔50毫秒 |
| | | }); |
| | | } else { |
| | | // loading = ElLoading.service({ background: 'rgba(0, 0, 0, 0.5)', text: '打包中,请稍等...' }) |
| | | const fileIds = list.map(i => Number(i.id)); |
| | | console.log('fileIds', fileIds, list); |
| | | let aaa = { |
| | | areaCode: '', |
| | | attachIds: fileIds, |
| | | dockSn: '', |
| | | endTime: '', |
| | | fileName: '', |
| | | fileType: '', |
| | | jobName: '', |
| | | resultType: '', |
| | | startTime: '', |
| | | wayLineJobIds: [], |
| | | }; |
| | | |
| | | downloadApi(aaa).then(res => { |
| | | console.log('res.data.data', res.data.data); |
| | | // aLinkDownload(res.data.data, `sjzx-file-pack-${dayjs().format('YYYYMMDDHHmmss')}.zip`); |
| | | // loading.close() |
| | | }); |
| | | } |
| | | }; |
| | | // 下载 |
| | | const downloadFile = () => { |
| | | fileDownload(); |
| | | }; |
| | | // 全部下载 |
| | | const aLLDownloadFile = () => { |
| | | console.log('全部下载'); |
| | | }; |
| | | // 查看弹框 |
| | | const dialogVisible = ref(false); |
| | | const dialogDetailList = ref(null); |
| | | const lookDetail = val => { |
| | | // dialogDetailList.value = val; |
| | | getAttachInfoAPI(val.id).then(res=>{ |
| | | dialogDetailList.value = res.data.data |
| | | console.log('red',res.data.data); |
| | | |
| | | }) |
| | | console.log('val',val); |
| | | |
| | | getAttachInfoAPI(val.id).then(res => { |
| | | dialogDetailList.value = res.data.data; |
| | | }); |
| | | dialogVisible.value = true; |
| | | console.log('弹框', val.id); |
| | | }; |
| | | // 删除 |
| | | const deleteDetail = () => { |
| | | const deleteDetail = val => { |
| | | ElMessageBox.confirm('您确定删除吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }); |
| | | }) |
| | | .then(() => { |
| | | deleteFileMultipleApi(val.id) |
| | | .then(res => { |
| | | console.log('删除成功', res); |
| | | ElMessage.success('删除成功'); |
| | | getaiImagesPage(); |
| | | }) |
| | | .catch(error => { |
| | | ElMessage.error('删除失败'); |
| | | }); |
| | | }) |
| | | .catch(() => {}); |
| | | }; |
| | | // 编辑文件名 |
| | | const editTitle = val => { |
| | |
| | | const VideoShow = ref(false); |
| | | const currentVideoUrl = ref(null); |
| | | const enterFullScreen = val => { |
| | | currentVideoTitle.value = val.filename; |
| | | currentVideoTitle.value = val.nickName; |
| | | currentVideoUrl.value = val.link; |
| | | VideoShow.value = true; |
| | | currentVideoUrl.value = val.img; |
| | | console.log('视频', val); |
| | | }; |
| | | // 地图弹框 |
| | | const dataCenterMapVisible = ref(false); |
| | | const positionDetail = () => { |
| | | console.log('地图'); |
| | | dataCenterMapVisible.value = true; |
| | | }; |
| | | onMounted(() => { |