From a233865ed1c37738a3019909a25ecff07a656d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com> Date: Thu, 24 Jul 2025 11:24:53 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A3=9E=E8=A1=8C=E6=A0=87=E6=B3=A8-=E7=9B=AE?= =?UTF-8?q?=E5=BD=95=E6=A0=91=E3=80=81=E5=9C=B0=E5=9B=BE=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=90=8E=E5=90=8C=E6=AD=A5=E4=BF=AE=E6=94=B9=E5=90=8E=E5=8F=B0?= =?UTF-8?q?=E5=92=8C=E5=B1=95=E7=A4=BA=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/env.ts | 2 + src/views/demo/system/mediaLibrary/index.vue | 25 +- .../demo/system/mediaLibrary/modal.data.ts | 2 +- .../demo/system/mediaLibrary/path/index.vue | 16 +- .../mediaLibrary/path/pathImageInfo.vue | 34 +- .../system/mediaLibrary/path/pathLeftMenu.vue | 6 +- .../demo/system/mediaLibrary/path/pathMap.vue | 9 +- .../mediaLibrary/preview/previewImage.vue | 36 +- .../workmanagement/flightannotation/index.vue | 5 +- .../flightannotation/pathAnnotationInfo.vue | 225 ++------- .../flightannotation/pathLeftMenu.vue | 457 +++++++----------- .../flightannotation/pathMap.vue | 311 ++++++++++-- types/config.d.ts | 1 + 13 files changed, 568 insertions(+), 561 deletions(-) diff --git a/src/utils/env.ts b/src/utils/env.ts index 10e1f8b..922d43f 100644 --- a/src/utils/env.ts +++ b/src/utils/env.ts @@ -37,6 +37,7 @@ export function getAppEnvConfig() { VITE_GLOB_UPLOAD_URL, VITE_GLOB_APP_LOGO, VITE_GLOB_INFO_IMAGE_URL, + VITE_MEDIALIBRARY_IMAGE_URL, VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT, VITE_GLOB_APP_VERSIONS, @@ -56,6 +57,7 @@ export function getAppEnvConfig() { VITE_GLOB_UPLOAD_URL, VITE_GLOB_APP_LOGO, VITE_GLOB_INFO_IMAGE_URL, + VITE_MEDIALIBRARY_IMAGE_URL, VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT, VITE_GLOB_APP_VERSIONS, diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue index f366568..9f2c311 100644 --- a/src/views/demo/system/mediaLibrary/index.vue +++ b/src/views/demo/system/mediaLibrary/index.vue @@ -285,10 +285,12 @@ import Path from './path/index.vue'; import { AddFolderModal, MoveFileModal, CompressFileModal, RenameModal } from './modal/modal'; import { PermissionBtn } from '@/components/PermissionBtn/index'; + import { getAppEnvConfig } from '@/utils/env'; import { columns, searchFormSchema, svg_showOnMap_0, svg_showOnMap_1 } from './modal.data'; import dayjs from 'dayjs'; import { cloneDeep } from 'lodash-es'; + const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig(); const { createConfirm, createMessage } = useMessage(); // 表格数据-------------------------------------------------------------------- @@ -456,8 +458,25 @@ } // 图片获取路径 function getImgurl(url) { - return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url; + let uu = VITE_MEDIALIBRARY_IMAGE_URL + url; + // 使用示例 + // getImageDimensions(uu, function (dimensions) { + // console.log('宽度: ' + dimensions.width); + // console.log('高度: ' + dimensions.height); + // }); + return uu; + } + + function getImageDimensions(url, callback) { + const img = new Image(); + img.src = url; + img.onload = function () { + const width = img.width; + const height = img.height; + callback({ width: width, height: height }); + }; } + // 弹窗---------------------------------------------------------------------- // 左侧目录选择 function handleSelect(orgId = '') { @@ -784,7 +803,7 @@ padding-left: 16px; background: #ffffff; display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; } @@ -799,7 +818,7 @@ .storeDiv { position: relative; - width: 150px; + width: 160px; height: 120px; outline: 1px solid #000000; margin: 16px; diff --git a/src/views/demo/system/mediaLibrary/modal.data.ts b/src/views/demo/system/mediaLibrary/modal.data.ts index 1deb125..5078609 100644 --- a/src/views/demo/system/mediaLibrary/modal.data.ts +++ b/src/views/demo/system/mediaLibrary/modal.data.ts @@ -37,7 +37,7 @@ export const columns: BasicColumn[] = [ { title: '操作', dataIndex: 'action', - align: 'left', + align: 'center', width: 120, }, ]; diff --git a/src/views/demo/system/mediaLibrary/path/index.vue b/src/views/demo/system/mediaLibrary/path/index.vue index 32a88ee..ba7f1ff 100644 --- a/src/views/demo/system/mediaLibrary/path/index.vue +++ b/src/views/demo/system/mediaLibrary/path/index.vue @@ -62,7 +62,7 @@ } // 地图照片 if (imageInfoShow.value) { - width += 720; + width += 1040; } return 'calc(100% - ' + width + 'px)'; }); @@ -152,23 +152,11 @@ // width: auto; } - .annotationInfoDiv { - position: relative; - height: 100%; - width: 320px; - } - - .areaInfoDiv { - position: relative; - height: 100%; - width: 320px; - } - .imageInfoDiv { position: relative; height: 100%; // width: 37%; - width: 720px; + width: 1040px; // min-width: 720px; } } diff --git a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue index 979434c..1b1b6ad 100644 --- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue +++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue @@ -126,7 +126,7 @@ transition: 'transform 0.2s', width: `${imageWidth}px`, height: `${imageHeight}px`, - background: `url(${getImgurl(props.nowShowImageData.objectKey)}) no-repeat center center`, + background: `url(${VITE_MEDIALIBRARY_IMAGE_URL + props.nowShowImageData.objectKey}) no-repeat center center`, backgroundSize: 'contain', backgroundPosition: 'center', }" @@ -584,15 +584,12 @@ PlusSquareOutlined, } from '@ant-design/icons-vue'; import dayjs from 'dayjs'; - import { - UpdatePicStatus, - Deletepic, - UpdatePicName, - UpdatePicParentKey, - } from '@/api/demo/mediaLibrary'; + import { UpdatePicStatus, UpdatePicName } from '@/api/demo/mediaLibrary'; + import { getAppEnvConfig } from '@/utils/env'; import { cloneDeep } from 'lodash-es'; import { useMessage } from '@/hooks/web/useMessage'; const { createMessage, createConfirm } = useMessage(); + const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig(); const props = defineProps(['nowShowImageData', 'allImageDataList']); const emits = defineEmits([ @@ -603,11 +600,6 @@ 'funUpdateDisplayOrShowOnMapData', ]); - // 图片获取路径 - function getImgurl(url) { - return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url; - } - // 修改名称-------------------------------- const focusInputRef = ref(); const editNameFlag = ref(true); @@ -719,21 +711,21 @@ } // 宽高 - const imageWidth = ref(720); - const imageHeight = ref(553); + const imageWidth = ref(1040); + const imageHeight = ref(800); // 设置高度和宽度 function getImageWidthAndHeight() { if ( props.nowShowImageData.width && props.nowShowImageData.height && - props.nowShowImageData.width > 720 && - props.nowShowImageData.height > 553 + props.nowShowImageData.width > 1040 && + props.nowShowImageData.height > 800 ) { - imageWidth.value = 720; - imageHeight.value = (720 / props.nowShowImageData.width) * props.nowShowImageData.height; + imageHeight.value = 800; + imageWidth.value = (800 / props.nowShowImageData.height) * props.nowShowImageData.width; } else { - imageHeight.value = 553; - imageWidth.value = 720; + imageHeight.value = 800; + imageWidth.value = 1040; } } onMounted(() => { @@ -1035,7 +1027,7 @@ // 拖动 const dragDocument: any = document.querySelector('.dragModal'); isDragging.value = false; - dragDocument.style.cursor = 'default'; + // dragDocument.style.cursor = 'default'; } } // 鼠标滚轮 diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue index 99744a6..4a23c4c 100644 --- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue +++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue @@ -307,9 +307,9 @@ } } UpdatePicStatus({ - id: props.nowShowImageData.id, - fileTags: JSON.stringify(props.nowShowImageData.fileTags), - graffitiJson: JSON.stringify(props.nowShowImageData.graffitiJson), + id: show.id, + fileTags: JSON.stringify(show.fileTags), + graffitiJson: JSON.stringify(show.graffitiJson), display: show.display, showOnMap: show.showOnMap, }).then((res) => { diff --git a/src/views/demo/system/mediaLibrary/path/pathMap.vue b/src/views/demo/system/mediaLibrary/path/pathMap.vue index c9eeed3..c91208a 100644 --- a/src/views/demo/system/mediaLibrary/path/pathMap.vue +++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue @@ -25,6 +25,8 @@ import * as turf from '@turf/turf'; import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform'; import dayjs from 'dayjs'; + import { getAppEnvConfig } from '@/utils/env'; + const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig(); const props = defineProps([ 'allImageDataList', @@ -411,7 +413,7 @@ const image = new Image(); image.crossOrigin = 'Anonymous'; // image.src = item.preview_url; - // image.src = getImgurl(item.objectKey); + // image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.objectKey; image.src = 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'; image.onload = () => { @@ -608,10 +610,7 @@ } }); }; - // 图片获取路径 - function getImgurl(url) { - return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url; - } + // 地图照片-恢复默认 function imageRestoreDefault() { // 飞行点 diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue index b33f465..8ff1451 100644 --- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue +++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue @@ -12,7 +12,7 @@ transition: 'transform 0.2s', width: `${imageWidth}px`, height: `${imageHeight}px`, - background: `url(${getImgurl(props.nowPreviewRecord.objectKey)}) no-repeat center center`, + background: `url(${VITE_MEDIALIBRARY_IMAGE_URL + props.nowPreviewRecord.objectKey}) no-repeat center center`, backgroundSize: 'contain', backgroundPosition: 'center', }" @@ -263,7 +263,7 @@ -
+
@@ -399,7 +399,12 @@ v-if="li.objectKey" :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'" > - +
@@ -529,7 +534,8 @@ } from '@/api/demo/mediaLibrary'; import { useMessage } from '@/hooks/web/useMessage'; import { cloneDeep } from 'lodash-es'; - + import { getAppEnvConfig } from '@/utils/env'; + const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig(); const { createConfirm, createMessage } = useMessage(); const props = defineProps(['nowPreviewRecord', 'previewRecordList']); @@ -539,11 +545,6 @@ 'setHideOrShowTextboxFlag', ]); - // 图片获取路径 - function getImgurl(url) { - return 'http://175.27.168.120:6014/api/v1/buckets/test/objects/download?prefix=' + url; - } - // 上一张、下一张图片 function clickLeftOrRightButton(direction) { const list = props.previewRecordList.filter((item) => item.objectKey); @@ -680,7 +681,7 @@ // 复制到剪贴板 const copyToClipboard = async (url) => { try { - await navigator.clipboard.writeText(getImgurl(url)); + await navigator.clipboard.writeText(VITE_MEDIALIBRARY_IMAGE_URL + url); createMessage.success('图片链接已复制到剪贴板'); } catch (err) { createMessage.error('无法复制图片链接'); @@ -713,7 +714,7 @@ // 下载 async function fetchAndDownloadImage(url) { try { - const response = await fetch(getImgurl(url), { + const response = await fetch(VITE_MEDIALIBRARY_IMAGE_URL + url, { mode: 'cors', }); if (!response.ok) { @@ -1096,16 +1097,17 @@ align-items: center; justify-content: center; width: 100%; - height: 820px; + height: 89%; background: #101010; } - .bottom { - position: absolute; - bottom: 0px; - left: 0px; + .bottomDiv { + // position: absolute; + // bottom: 0px; + // left: 0px; + position: relative; width: 100%; - height: 100px; + height: 10%; background: #1c1c1c; display: flex; flex-wrap: wrap; diff --git a/src/views/demo/workmanagement/flightannotation/index.vue b/src/views/demo/workmanagement/flightannotation/index.vue index 4cf44f7..fbf5d2f 100644 --- a/src/views/demo/workmanagement/flightannotation/index.vue +++ b/src/views/demo/workmanagement/flightannotation/index.vue @@ -24,6 +24,7 @@
{ @@ -175,7 +176,7 @@ return 'Polygon'; } // 圈 - if (geom.indexOf('POLYGON') > -1 && radiusFlag) { + if (geom.indexOf('POINT') > -1 && radiusFlag) { return 'Circle'; } } diff --git a/src/views/demo/workmanagement/flightannotation/pathAnnotationInfo.vue b/src/views/demo/workmanagement/flightannotation/pathAnnotationInfo.vue index 7d6f7d4..d505d34 100644 --- a/src/views/demo/workmanagement/flightannotation/pathAnnotationInfo.vue +++ b/src/views/demo/workmanagement/flightannotation/pathAnnotationInfo.vue @@ -191,64 +191,17 @@
- - -
经纬模式
- - -
- - 十进制 - 度分秒 - -
-
经度
- - + - - - ° - - ′ - - ″
@@ -257,46 +210,11 @@
- - + - - - ° - - ′ - - ″
@@ -508,62 +426,6 @@ return returnIcon.replaceAll('currentColor', '#ffffff'); } - // 经纬模式 - const modalType = ref(0); - // 度分秒-经度 - const decimalToDMS_0 = ref({ - degrees: 0, - minutes: 0, - seconds: 0, - }); - // 度分秒-纬度 - const decimalToDMS_1 = ref({ - degrees: 0, - minutes: 0, - seconds: 0, - }); - watch( - () => modalType.value, - (newValue) => { - if (newValue == 0) { - // 度分秒-经度 → 十进制-经度 - let { degrees, minutes, seconds } = decimalToDMS_0.value; - let decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600; - nowAnnotationData.value.coordinates[0] = decimal; - // 度分秒-纬度 → 十进制-纬度 - degrees = decimalToDMS_1.value.degrees; - minutes = decimalToDMS_1.value.minutes; - seconds = decimalToDMS_1.value.seconds; - decimal = Math.abs(degrees) + minutes / 60 + seconds / 3600; - nowAnnotationData.value.coordinates[1] = decimal; - } - if (newValue == 1) { - // 十进制-经度 → 度分秒-经度 - const decimal1 = nowAnnotationData.value.coordinates[0]; - const degrees1 = Math.floor(decimal1); - const minutesFull1 = (decimal1 - degrees1) * 60; - const minutes1 = Math.floor(minutesFull1); - const seconds1 = parseFloat((minutesFull1 - minutes1) * 60); - decimalToDMS_0.value = { - degrees: degrees1, - minutes: minutes1, - seconds: seconds1, - }; - // 十进制-纬度 → 度分秒-纬度 - const decimal2 = nowAnnotationData.value.coordinates[1]; - const degrees2 = Math.floor(decimal2); - const minutesFull2 = (decimal2 - degrees2) * 60; - const minutes2 = Math.floor(minutesFull2); - const seconds2 = parseFloat((minutesFull2 - minutes2) * 60); - decimalToDMS_1.value = { - degrees: degrees2, - minutes: minutes2, - seconds: seconds2, - }; - } - }, - ); - // 关闭 function closePathAnnotationInfo() { emits('closePathAnnotationInfo'); @@ -571,8 +433,8 @@ // 移动到中心位置 function handlerLocation() { emits('handlerLocation', { - lng: props.nowShowAnnotationData.properties.centerPoint[0], - lat: props.nowShowAnnotationData.properties.centerPoint[1], + lng: parseFloat(props.nowShowAnnotationData.coordinates[0]), + lat: parseFloat(props.nowShowAnnotationData.coordinates[1]), }); } // 删除此标注 @@ -603,47 +465,56 @@ () => props.nowShowAnnotationData, () => { nowAnnotationData.value = props.nowShowAnnotationData; - // 线 - if (nowAnnotationData.value.type == 1) { - // 直线距离 - linearDistance.value = mars3d.MeasureUtil.getDistance( - nowAnnotationData.value.coordinates, - ).toFixed(2); - // 水平距离 - horizontalDistance.value = mars3d.MeasureUtil.getSurfaceDistance( - nowAnnotationData.value.coordinates, - ).toFixed(2); - // 高度差 - let heightlist: any = []; - nowAnnotationData.value.coordinates.forEach((item) => { - heightlist.push(item[2]); - }); - heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2); - } - // 多边形 - if (nowAnnotationData.value.type == 2) { - // 水平面积 - horizontalArea.value = mars3d.MeasureUtil.getSurfaceArea( - nowAnnotationData.value.coordinates[0], - ).toFixed(2); - // 水平周长 - horizontalPerimeter.value = mars3d.MeasureUtil.getSurfaceDistance( - nowAnnotationData.value.coordinates[0], - ).toFixed(2); - // 高度差 - let heightlist: any = []; - nowAnnotationData.value.coordinates[0].forEach((item) => { - heightlist.push(item[2]); - }); - heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2); - } + restoreAreaAndDistance(); }, { deep: true, immediate: true, }, ); - onMounted(() => {}); + + function restoreAreaAndDistance() { + // 线 + if (nowAnnotationData.value.type == 1) { + // 直线距离 + linearDistance.value = mars3d.MeasureUtil.getDistance( + nowAnnotationData.value.coordinates, + ).toFixed(2); + // 水平距离 + horizontalDistance.value = mars3d.MeasureUtil.getSurfaceDistance( + nowAnnotationData.value.coordinates, + ).toFixed(2); + // 高度差 + let heightlist: any = []; + nowAnnotationData.value.coordinates.forEach((item) => { + heightlist.push(item[2]); + }); + heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2); + } + // 多边形 + if (nowAnnotationData.value.type == 2) { + // 水平面积 + horizontalArea.value = mars3d.MeasureUtil.getSurfaceArea( + nowAnnotationData.value.coordinates[0], + ).toFixed(2); + // 水平周长 + horizontalPerimeter.value = mars3d.MeasureUtil.getSurfaceDistance( + nowAnnotationData.value.coordinates[0], + ).toFixed(2); + // 高度差 + let heightlist: any = []; + nowAnnotationData.value.coordinates[0].forEach((item) => { + heightlist.push(item[2]); + }); + heightDiff.value = (Math.max(...heightlist) - Math.min(...heightlist)).toFixed(2); + console.log(horizontalArea.value); + console.log(horizontalPerimeter.value); + console.log(heightDiff.value); + } + } + defineExpose({ + restoreAreaAndDistance, + }); diff --git a/src/views/demo/workmanagement/flightannotation/pathMap.vue b/src/views/demo/workmanagement/flightannotation/pathMap.vue index 67c1223..c7222f2 100644 --- a/src/views/demo/workmanagement/flightannotation/pathMap.vue +++ b/src/views/demo/workmanagement/flightannotation/pathMap.vue @@ -5,7 +5,7 @@