| | |
| | | <template> |
| | | <basic-container> |
| | | <div |
| | | class="manage-m-all-10 manage-m-t-0 manage-p-all-20 manage-h-0 manage-flex-1 manage-flex manage-f-d-c manage-b-r-5 manage-b-c-w"> |
| | | <div class="dataCenter-table"> |
| | | <searchData @search="searchClick" @downFun="downloadFile" @allDownFun="aLLDownloadFile"></searchData> |
| | | <!-- 表格部分 --> |
| | |
| | | <template #default="scope"> |
| | | <span class="look" @click="lookDetail(scope.row)">查看</span> |
| | | <span class="delete" @click="deleteDetail(scope.row)" v-if="scope.row.resultType !== 2">删除</span> |
| | | <!-- && !isTifFile(scope.row.nickName) |
| | | scope.row.resultType !== 1--> |
| | | |
| | | <span class="location" @click="positionDetail(scope.row)" v-if="shouldShowLocation(scope.row)">定位</span> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | </template> |
| | | <div class="detailContainer"> |
| | | <div class="leftImg"> |
| | | <img v-if="dialogDetailList?.resultType === 1" :src="convertVideoUrlToThumbnail(dialogDetailList?.link)" |
| | | alt="" class="imageBox" /> |
| | | <!-- <img |
| | | v-if="dialogDetailList?.resultType === 1" |
| | | :src="convertVideoUrlToThumbnail(dialogDetailList?.link)" |
| | | alt="" |
| | | class="imageBox" |
| | | /> --> |
| | | <!-- 视频 --> |
| | | <video v-if="dialogDetailList?.resultType === 1" style="width: 100%" class="imageBox" ref="videoRefs" |
| | | controls autoplay :src="dialogDetailList.link"></video> |
| | | <!-- 全景 --> |
| | | <!-- <img |
| | | class="quanjing" |
| | | @click="clickpanorama(dialogDetailList)" |
| | | v-else-if="dialogDetailList?.resultType === 5" |
| | | :src="dialogDetailList?.resultType?.smallUrl" |
| | | alt="" |
| | | /> --> |
| | | <!-- 地图 --> |
| | | <div v-else-if="dialogDetailList?.resultType === 4" id="detaildataCenterMap" class="ztzf-cesium"></div> |
| | | <img v-else :src="getSmallImg(dialogDetailList?.link)" alt="" /> |
| | |
| | | <div class="title"> |
| | | <div class="inputEdit"> |
| | | 文件名称:<span class="fileTitle" v-if="!dialogDetailList?.checkedinput">{{ |
| | | dialogDetailList?.editName |
| | | dialogDetailList?.nickName ? dialogDetailList?.nickName : '--' |
| | | }}</span> |
| | | <el-input v-else v-model="dialogDetailList.editName" @keyup.enter="saveTitle()" class="title-input" |
| | | <el-input v-else v-model="dialogDetailList.nickName" @keyup.enter="saveTitle()" class="title-input" |
| | | clearable /> |
| | | </div> |
| | | <div class="editname"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div>任务名称:{{ dialogDetailList?.jobName }}</div> |
| | | <div>所属区域:{{ dialogDetailList?.regionName }}</div> |
| | | <div>拍摄机巢:{{ dialogDetailList?.nestName }}</div> |
| | | <div>任务名称:{{ dialogDetailList?.jobName ? dialogDetailList?.jobName : '--' }}</div> |
| | | <div> |
| | | 所属区域:{{ dialogDetailList?.regionName ? dialogDetailList?.regionName : '--' }} |
| | | </div> |
| | | <div>拍摄机巢:{{ dialogDetailList?.nestName ? dialogDetailList?.nestName : '--' }}</div> |
| | | <div> |
| | | 照片位置:{{ _.round(dialogDetailList?.longitude, 3) }},{{ |
| | | _.round(dialogDetailList?.latitude, 3) |
| | | }} |
| | | </div> |
| | | <div>任务时间:{{ dialogDetailList?.jobTime }}</div> |
| | | <div>拍摄时间:{{ dialogDetailList?.createTime }}</div> |
| | | <div>文件类型:{{ photoTypeMap[dialogDetailList?.photoType] }}</div> |
| | | <div>文件格式:{{ resultTypeMap[dialogDetailList?.resultType] }}</div> |
| | | <div>照片文件大小:{{ bytesToMB(dialogDetailList?.attachSize) }}</div> |
| | | <div>任务时间:{{ dialogDetailList?.jobTime ? dialogDetailList?.jobTime : '--' }}</div> |
| | | <div> |
| | | 拍摄时间:{{ dialogDetailList?.createTime ? dialogDetailList?.createTime : '--' }} |
| | | </div> |
| | | <div> |
| | | 文件类型:{{ |
| | | photoTypeMap[dialogDetailList?.photoType] |
| | | ? photoTypeMap[dialogDetailList?.photoType] |
| | | : '--' |
| | | }} |
| | | </div> |
| | | <div> |
| | | 文件格式:{{ |
| | | resultTypeMap[dialogDetailList?.resultType] |
| | | ? resultTypeMap[dialogDetailList?.resultType] |
| | | : '--' |
| | | }} |
| | | </div> |
| | | <div> |
| | | 照片文件大小:{{ |
| | | bytesToMB(dialogDetailList?.attachSize) |
| | | ? bytesToMB(dialogDetailList?.attachSize) |
| | | : '--' |
| | | }} |
| | | </div> |
| | | <div> |
| | | <el-button type="success" plain icon="el-icon-download" |
| | | @click="detailDownLoad(dialogDetailList)">下载</el-button> |
| | |
| | | <dataCenterMap ref="mapComponent" v-model:show="dataCenterMapVisible" :jobId="jobId" @lookDetail="lookDetail" |
| | | :dotData="mapList"></dataCenterMap> |
| | | </div> |
| | | </basic-container> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | |
| | | import { onMounted, watch } from 'vue' |
| | | import dayjs from 'dayjs' |
| | | |
| | | |
| | | |
| | | function bytesToMB (bytes, decimalPlaces = 2) { |
| | | if (typeof bytes !== 'number' || bytes < 0) return '无效输入' |
| | | return (bytes / 1048576).toFixed(decimalPlaces) + ' MB' |
| | |
| | | } |
| | | // 判断省市区 |
| | | const areaCode = userInfo.value?.detail?.areaCode || '' |
| | | |
| | | // 判断账号级别 |
| | | const isProvinceLevel = computed(() => areaCode.endsWith('00000000')) // 省级:后8位为0 |
| | | const isCityLevel = computed(() => !isProvinceLevel.value && areaCode.endsWith('000000')) // 市级:后6位为0 |
| | |
| | | // 处理区域名称的函数 |
| | | function processAddress (str) { |
| | | if (!str) return '' |
| | | |
| | | const parts = str.split(',') |
| | | |
| | | // 省级账号:显示市和区(去除省级) |
| | | if (isProvinceLevel.value) { |
| | | return parts.filter(part => !part.endsWith('省')).join(',') |
| | | } |
| | | |
| | | // 市级账号:只显示区(去除省和市) |
| | | if (isCityLevel.value) { |
| | | return parts.filter(part => !part.endsWith('省') && !part.endsWith('市')).join(',') |
| | | } |
| | | |
| | | // 区县级账号:不显示区域信息(在模板中已隐藏该列) |
| | | return '' |
| | | } |
| | | const showRegionColumn = computed(() => { |
| | | // 检查表格数据中是否有任何行的 regionName 处理后不为空 |
| | | // 是否显示列 |
| | | return tableData.value.some(row => { |
| | | const processed = processAddress(row.regionName || '') |
| | | return processed !== '' |
| | |
| | | orderByCreateTime: jobListParams.orderByCreateTime, |
| | | ...jobListParams.searchParams, |
| | | } |
| | | getaiImagesPageAPI(params, { current: jobListParams.current, size: jobListParams.size }).then( |
| | | res => { |
| | | |
| | | getaiImagesPageAPI(params, { |
| | | current: jobListParams.current, |
| | | size: jobListParams.size |
| | | }) |
| | | .then(res => { |
| | | total.value = res.data.data.total |
| | | tableData.value = res.data.data.records.map(i => ({ |
| | | ...i, |
| | |
| | | showUrl: getShowImg(i?.link), |
| | | file_name: i.name.split('/').pop(), |
| | | })) |
| | | // console.log('res', tableData.value); |
| | | loadings.value = false |
| | | } |
| | | ) |
| | | }) |
| | | .catch(error => { |
| | | // 可选:这里可以添加错误处理逻辑 |
| | | console.error("获取数据失败:", error) |
| | | }) |
| | | .finally(() => { |
| | | loadings.value = false // 无论成功失败都会执行 |
| | | }) |
| | | } |
| | | // 查询 |
| | | const searchClick = params => { |
| | |
| | | if (!list?.length) return ElMessage.warning('请选择文件') |
| | | if (list.length === 1) { |
| | | list.forEach((item, index) => { |
| | | setTimeout(() => { |
| | | aLinkDownload(item.url, item?.nickName) |
| | | }, index * 500) // 每个文件下载间隔50毫秒 |
| | | const suffix = item.url.split('.').pop() |
| | | aLinkDownload(item.url, item.nickName + '.' + suffix) |
| | | }) |
| | | } else { |
| | | loading = ElLoading.service({ background: 'rgba(0, 0, 0, 0.5)', text: '打包中,请稍等...' }) |
| | | const fileIds = list.map(i => i.id) |
| | | let aaa = { |
| | | areaCode: '', |
| | | attachIds: fileIds, |
| | | dockSn: '', |
| | | endTime: '', |
| | | fileName: '', |
| | | fileType: '', |
| | | jobName: '', |
| | | resultType: '', |
| | | startTime: '', |
| | | wayLineJobIds: [], |
| | | } |
| | | |
| | | downloadApi(aaa).then(res => { |
| | | aLinkDownload(res.data.data, `sjzx-file-pack-${dayjs().format('YYYYMMDDHHmmss')}.zip`) |
| | | loading.close() |
| | |
| | | fileDownload() |
| | | } |
| | | const detailDownLoad = val => { |
| | | aLinkDownload(val.link, val?.nickName) |
| | | const suffix = val.link?.split('.').pop() |
| | | aLinkDownload(val.link, val?.nickName + '.' + suffix) |
| | | } |
| | | // 全部下载 |
| | | const aLLDownloadFile = () => { |
| | |
| | | const saveTitle = item => { |
| | | const updateparams = { |
| | | id: item.id, |
| | | nickName: `${item.editName.trim()}`, |
| | | nickName: `${item.nickName.trim()}`, |
| | | } |
| | | // 验证并提示 |
| | | if (!validateNickname(updateparams.nickName, '名称')) return |
| | | item.checkedinput = false |
| | | detailTitle.value = item.editName |
| | | detailTitle.value = item.nickName |
| | | updataTitleApi(updateparams) |
| | | .then(res => { |
| | | if (res.status === 200) { |
| | |
| | | } |
| | | // 正射地图 |
| | | const yxShowBox = ref(false) |
| | | |
| | | const removeHandler = () => { |
| | | handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) |
| | | handler?.destroy() |
| | |
| | | |
| | | // console.log('地图初始化完成'); |
| | | } |
| | | // 查看弹框 |
| | | // 判断是否是正射 |
| | | function isTifFile (filename) { |
| | | const lastDot = filename.lastIndexOf('.') |
| | | if (lastDot === -1) return false // 无后缀 |
| | |
| | | const shouldShowLocation = row => { |
| | | return row.resultType !== 1 && row.resultType !== 4 |
| | | } |
| | | // 查看弹框 |
| | | const dialogVisible = ref(false) |
| | | const dialogDetailList = ref(null) |
| | | const detailTitle = ref('') |
| | | let curCustomImageryProvider = null |
| | | const orthoimageApi = ref('') |
| | | const positiongeom = ref('') |
| | | const odmToken = ref(null) |
| | | const lookDetail = val => { |
| | | if (val.resultType === 4) { |
| | |
| | | dialogVisible.value = true |
| | | detailTitle.value = val.nickName |
| | | dialogDetailList.value = val |
| | | console.log('3333', detailTitle.value, dialogDetailList.value) |
| | | |
| | | await nextTick() |
| | | initMap() |
| | | positiongeom.value = res.data.data.geom |
| | | orthoimageApi.value = res.data.data.orthoimageApi |
| | | odmToken.value = res.data.data.odmToken |
| | | if (res.data.data != null && isMapInitialized.value === true) { |
| | |
| | | }) |
| | | ) |
| | | yxShowBox.value = true |
| | | // 添加定位 |
| | | if (positiongeom.value) { |
| | | // 解析WKT格式的多边形坐标 |
| | | const wktString = positiongeom.value |
| | | const coordinates = parseWKTCoordinates(wktString) |
| | | if (coordinates.length > 0) { |
| | | // 创建多边形边界 |
| | | const positions = coordinates.map(coord => |
| | | Cesium.Cartesian3.fromDegrees(coord[0], coord[1]) |
| | | ) |
| | | // 计算多边形的包围球 |
| | | const boundingSphere = Cesium.BoundingSphere.fromPoints(positions) |
| | | const viewer = viewInstance.value.getViewer() |
| | | if (viewer && viewer.camera) { |
| | | viewer.camera.flyToBoundingSphere(boundingSphere, { |
| | | duration: 0, // 飞行动画持续时间(秒) |
| | | offset: new Cesium.HeadingPitchRange(0, -0.5, boundingSphere.radius * 1.5), |
| | | }) |
| | | } else { |
| | | console.error('无法获取有效的 Viewer 或 camera 对象') |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } else { |
| | | getAttachInfoAPI(val.id).then(res => { |
| | | detailTitle.value = res.data.data.nickName.split('.jpeg')[0] |
| | | // dialogDetailList.value = res.data.data; |
| | | dialogDetailList.value = { |
| | | ...res.data.data, |
| | | checkedinput: false, |
| | |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // WKT坐标解析函数 |
| | | function parseWKTCoordinates (wktString) { |
| | | // 解析POLYGON格式的WKT字符串 |
| | | const regex = /POLYGON\s*\(\((.*?)\)\)/i |
| | | const match = wktString.match(regex) |
| | | if (!match || !match[1]) return [] |
| | | // 分割坐标对 |
| | | const coordinatePairs = match[1].split(/,\s*/) |
| | | return coordinatePairs.map(pair => { |
| | | const [lon, lat] = pair.trim().split(/\s+/).map(Number) |
| | | return [lon, lat] |
| | | }) |
| | | } |
| | | function dialogClose () { |
| | | // 对话框关闭时清理资源 |
| | | viewInstance.value?.viewerDestroy() |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |