From e878d0ae2e535949ebe228b4e06413abebc7dc77 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 30 Jun 2025 16:42:20 +0800
Subject: [PATCH] Merge branch 'refs/heads/master' into feature/v3.0.0/帮助中心
---
src/views/dataCenter/dataCenter.vue | 232 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 162 insertions(+), 70 deletions(-)
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
index 6552ad2..73306c6 100644
--- a/src/views/dataCenter/dataCenter.vue
+++ b/src/views/dataCenter/dataCenter.vue
@@ -1,5 +1,6 @@
<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>
<!-- 表格部分 -->
@@ -31,8 +32,10 @@
<img v-else-if="scope.row?.resultType === 1" :src="convertVideoUrlToThumbnail(scope.row?.link)" alt=""
class="imageBox" @click="enterFullScreen(scope.row)" />
<!-- 正射 -->
- <img v-else-if="scope.row?.resultType === 4" :src="getzsSmallImg(scope.row?.link)" alt=""
- class="imageBox" />
+ <!-- <img v-else-if="scope.row?.resultType === 4" :src="getzsSmallImg(scope.row?.link)" alt=""
+ class="imageBox" /> -->
+ <el-image v-else-if="scope.row?.resultType === 4" :src="getzsSmallImg(scope.row?.link)" :preview-src-list="[getzsSmallImg(scope.row?.link)]" fit="cover"
+ preview-teleported />
<el-image v-else :src="scope.row?.smallUrl" :preview-src-list="[scope.row?.showUrl]" fit="cover"
preview-teleported />
</template>
@@ -52,8 +55,7 @@
<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>
@@ -66,55 +68,99 @@
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<!-- 查看弹框 -->
- <el-dialog v-model="dialogVisible" width="60%" append-to-body @close="dialogClose">
+ <el-dialog v-model="dialogVisible" width="60%" append-to-body @close="dialogClose" align-center>
<template #header="{ titleId, titleClass }">
<div class="my-header">
- <h4 :id="titleId" :class="titleClass">{{ detailTitle }}</h4>
+ <!-- <h4 :id="titleId" :class="titleClass">{{ detailTitle }}</h4> -->
+ <h4 :id="titleId" :class="titleClass">详情</h4>
</div>
</template>
<div class="detailContainer">
<div class="leftImg">
- <img v-if="dialogDetailList?.resultType === 1" :src="convertVideoUrlToThumbnail(dialogDetailList?.link)"
- alt="" class="imageBox" />
+ <!-- 视频 -->
+ <video
+ v-if="dialogDetailList?.resultType === 1"
+ style="width: 100%"
+ class="videoItem"
+ ref="videoRefs"
+ controls
+ autoplay
+ :src="dialogDetailList.link"
+ ></video>
<!-- 地图 -->
- <div v-else-if="dialogDetailList?.resultType === 4" id="detaildataCenterMap" class="ztzf-cesium"></div>
+ <div
+ v-else-if="dialogDetailList?.resultType === 4"
+ id="detaildataCenterMap"
+ class="ztzf-cesium"
+ ></div>
<img v-else :src="getSmallImg(dialogDetailList?.link)" alt="" />
</div>
<div class="rightDetail">
<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"
- clearable />
+ <el-input
+ v-else
+ v-model="dialogDetailList.nickName"
+ @blur="saveTitle(dialogDetailList)"
+ @keyup.enter="saveTitle(dialogDetailList)"
+ class="title-input"
+ clearable
+ />
+ <span class="editname" @click="editTitle(dialogDetailList)"
+ ><el-icon>
+ <Edit /> </el-icon
+ ></span>
</div>
- <div class="editname">
- <span v-if="!dialogDetailList?.checkedinput" @click="editTitle(dialogDetailList)"><el-icon>
- <Edit />
- </el-icon></span>
- <div v-else class="suffixBoxEdit">
- <div class="editText" @click="submitEditSuffix(dialogDetailList)">✔</div>
- <div class="editText" @click="cancelEditSuffix(dialogDetailList)">✖</div>
- </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>
- <el-button type="success" plain icon="el-icon-download"
- @click="detailDownLoad(dialogDetailList)">下载</el-button>
+ 拍摄时间：{{ 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
+ >
</div>
</div>
</div>
@@ -133,7 +179,7 @@
<dataCenterMap ref="mapComponent" v-model:show="dataCenterMapVisible" :jobId="jobId" @lookDetail="lookDetail"
:dotData="mapList"></dataCenterMap>
</div>
- </basic-container>
+ </div>
</template>
<script setup>
@@ -173,10 +219,8 @@
import { onMounted, watch } from 'vue'
import dayjs from 'dayjs'
-
-
function bytesToMB (bytes, decimalPlaces = 2) {
- if (typeof bytes !== 'number' || bytes < 0) return '无效输入'
+ if (typeof bytes !== 'number' || bytes < 0) return '0'
return (bytes / 1048576).toFixed(decimalPlaces) + ' MB'
}
// 视频一帧
@@ -202,7 +246,6 @@
}
// 判断省市区
const areaCode = userInfo.value?.detail?.areaCode || ''
-
// 判断账号级别
const isProvinceLevel = computed(() => areaCode.endsWith('00000000')) // 省级：后8位为0
const isCityLevel = computed(() => !isProvinceLevel.value && areaCode.endsWith('000000')) // 市级：后6位为0
@@ -211,24 +254,20 @@
// 处理区域名称的函数
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 !== ''
@@ -271,8 +310,12 @@
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,
@@ -282,10 +325,14 @@
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 => {
@@ -346,16 +393,25 @@
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()
@@ -367,7 +423,8 @@
fileDownload()
}
const detailDownLoad = val => {
- aLinkDownload(val.link, val?.nickName)
+ const suffix = val.link?.split('.').pop()
+ aLinkDownload(val.link, val?.nickName + '.' + suffix)
}
// 全部下载
const aLLDownloadFile = () => {
@@ -407,14 +464,7 @@
val.checkedinput = true
fileNameedit.value = val?.nickName
}
-// 取消
-const cancelEditSuffix = item => {
- item.nickName = fileNameedit.value
- item.checkedinput = false
-}
-const submitEditSuffix = item => {
- saveTitle(item)
-}
+
// 通用空值检查函数
const validateNickname = (name, fieldName) => {
if (!name || name.trim() === '') {
@@ -431,12 +481,12 @@
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) {
@@ -453,7 +503,6 @@
}
// 正射地图
const yxShowBox = ref(false)
-
const removeHandler = () => {
handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler?.destroy()
@@ -481,7 +530,7 @@
// console.log('地图初始化完成');
}
-// 查看弹框
+// 判断是否是正射
function isTifFile (filename) {
const lastDot = filename.lastIndexOf('.')
if (lastDot === -1) return false // 无后缀
@@ -490,11 +539,13 @@
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) {
@@ -503,8 +554,11 @@
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) {
@@ -516,12 +570,34 @@
})
)
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,
@@ -531,7 +607,19 @@
})
}
}
-
+// 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()
@@ -628,16 +716,20 @@
.detailContainer {
display: flex;
justify-content: space-between;
-
+align-items: center;
.leftImg {
width: 70%;
height: 500px;
-
+overflow: hidden;
img {
width: 100%;
height: 100%;
}
-
+.videoItem {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
#detaildataCenterMap {
width: 100%;
height: 100%;
@@ -725,4 +817,4 @@
}
}
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3