gitY
/
DiKongGanZhiPingTai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

媒体库-按要求修改部分内容

Browse Source
main
滕嵩 1 month ago
parent 87ead57130
commit 525a4420d6
11 changed files with 312 additions and 129 deletions
Show Stats Download Patch File Download Diff File

111
src/views/demo/system/mediaLibrary/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<LeftTree ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
<div class="w-4/5 xl:w-5/6">
<LeftTree v-if="!pathDivShow" ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
<div v-if="!pathDivShow" class="w-4/5 xl:w-5/6">
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
@ -58,6 +58,7 @@
@mouseout="record.isHovered = false"
:style="{
textDecoration: record.isHovered ? 'underline' : 'none',
cursor: record.isHovered ? 'pointer' : 'default',
marginLeft: '5px',
}"
>
@ -114,18 +115,6 @@
<EditOutlined @click="renameRecord(record)" />
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<div>查看地图图片历史路径</div>
<div>只展示在地图上加载的图片</div>
</template>
<a-button
type="text"
v-if="record.objectKey && record.objectKey.includes('.jpeg')"
>
<BorderInnerOutlined @click="openPathModal(record)" />
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<span>
@ -149,6 +138,22 @@
/>
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<template #title>
<div>查看地图图片历史路径</div>
<div>只展示在地图上加载的图片</div>
</template>
<a-button
type="text"
v-if="
record.objectKey &&
record.objectKey.includes('.jpeg') &&
record.showOnMap == 1
"
>
<BorderInnerOutlined @click="showPathDiv(record)" />
</a-button>
</a-tooltip>
</div>
</template>
</div>
@ -202,6 +207,7 @@
class="storeDivSpanName"
:style="{
textDecoration: record.isHovered ? 'underline' : 'none',
cursor: record.isHovered ? 'pointer' : 'default',
}"
@click="lookRecord(record)"
>
@ -297,6 +303,15 @@
>
<Comparison @closeComparisonModal="closeComparisonModal" />
</a-modal>
<Path
v-if="pathDivShow"
:allImageDataList="allImageDataList"
:nowShowImageData="nowShowImageData"
:floderName="floderName"
@closePathModal="closePathModal"
@handleSuccessPath="handleSuccessPath"
/>
</PageWrapper>
</template>
<script lang="ts" setup>
@ -666,7 +681,7 @@
id: record.id,
fileTags: record.fileTags,
graffitiJson: record.graffitis,
display: record.display,
display: record.showOnMap == 1 ? 0 : 1,
showOnMap: record.showOnMap == 1 ? 0 : 1,
}).then((res) => {
if (record.showOnMap == 1) {
@ -685,16 +700,8 @@
const previewRecordList: any = ref([]);
// 查看-打开这个文件夹或者展示这个图片
async function lookRecord(record) {
if (!record.objectKey) {
nowParentKey.value = record.id;
floders.value.push({
id: nowParentKey.value,
name: record.name,
});
reload().then((res) => {
showTableData.value = res;
});
} else {
// 展示这个图片后者视频
if (record.objectKey) {
GetMediaFile({
...searchParams.value,
parentKey: nowParentKey.value,
@ -702,10 +709,22 @@
limit: 100,
}).then((res) => {
nowPreviewRecord.value = record;
// 同文件下的图片或者视频
previewRecordList.value = uniqueByKey(res.items, record);
open.value = true;
});
}
// 文件夹
if (!record.objectKey) {
nowParentKey.value = record.id;
floders.value.push({
id: nowParentKey.value,
name: record.name,
});
reload().then((res) => {
showTableData.value = res;
});
}
}
function uniqueByKey(arrlist, record) {
let resultList: any = [];
@ -768,7 +787,7 @@
// 路径地图弹窗----------------------------------------------------------------------
const pathOpen = ref(false);
// 打开变化检测弹窗
// 打开路径地图弹窗
const floderName = ref('');
const nowShowImageData = ref({});
const allImageDataList: any = ref([]);
@ -798,15 +817,45 @@
pathOpen.value = true;
});
}
// 关闭变化检测弹窗
// 展示路径地图部分
const pathDivShow = ref(false);
function showPathDiv(record) {
GetMediaFile({
parentKey: record.parentKey,
page: 1,
limit: 1000,
}).then((res) => {
allImageDataList.value = res.items.filter(
(item) => item.objectKey && item.objectKey.includes('.jpeg'),
);
allImageDataList.value.forEach((arr) => {
if (arr.fileTags) {
arr.fileTags = JSON.parse(arr.fileTags);
} else {
arr.fileTags = [];
}
if (arr.graffitiJson) {
arr.graffitiJson = JSON.parse(arr.graffitiJson);
} else {
arr.graffitiJson = [];
}
});
nowShowImageData.value = allImageDataList.value.find((item) => item.id == record.id);
floderName.value = floders.value[floders.value.length - 1].name;
pathDivShow.value = true;
});
}
// 关闭路径地图弹窗
function closePathModal() {
nowShowImageData.value = {};
pathOpen.value = false;
pathDivShow.value = false;
}
// 刷新
function handleSuccessPath(value) {
setTimeout(() => {
openPathModal(value);
pathDivShow.value ? openPathModal(value) : showPathDiv(value);
// openPathModal(value);
reload();
}, 500);
}
@ -915,4 +964,10 @@
::v-deep .vben-basic-table {
height: fit-content !important;
}
::v-deep .full-modal {
height: 100% !important;
}
::v-deep .ant-modal-body {
height: 100% !important;
}
</style>

8
src/views/demo/system/mediaLibrary/modal.data.ts
Unescape Escape View File

@ -207,8 +207,8 @@ export const svg_showOnMap_1 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="18"
height="18"
width="16"
height="16"
>
<path
d="M19 5v11.17l2 2V5c0-1.1-.9-2-2-2H5.83l2 2H19zM2.81 2.81L1.39 4.22L3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61l1.41-1.41L2.81 2.81zM5 19V7.83l7.07 7.07l-.82 1.1L9 13l-3 4h8.17l2 2H5z"
@ -220,8 +220,8 @@ export const svg_showOnMap_0 = `<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 24 24"
width="18"
height="18"
width="16"
height="16"
>
<path
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"

15
src/views/demo/system/mediaLibrary/path/index.vue
Unescape Escape View File

@ -77,7 +77,7 @@
}
// 右侧图片是否显示----------------------------------------------------
const imageInfoShow = ref(false);
const imageInfoShow = ref(true);
// 当前展示的图片
const nowShowImageData = ref();
const allImageDataList = ref();
@ -133,17 +133,13 @@
function handleSuccessPath(value) {
emits('handleSuccessPath', value);
}
// 打开路径弹窗
function openPathModal(value) {
emits('openPathModal', value);
}
</script>
<style lang="less" scoped>
.pathModal {
position: relative;
display: flex;
width: 100%;
height: 100vh;
height: 100%;
.leftMenuDiv {
position: relative;
@ -164,4 +160,11 @@
// min-width: 720px;
}
}
::v-deep .full-modal {
height: 100% !important;
}
::v-deep .ant-modal-body {
height: 100% !important;
}
</style>

67
src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
Unescape Escape View File

@ -95,19 +95,26 @@
<template #title>
<span>{{ hideOrShowGraffitiFlag ? '点击隐藏涂鸦信息' : '点击显示涂鸦信息' }}</span>
</template>
<EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
<EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
<div
style="
position: absolute;
bottom: 0px;
right: 0px;
font-size: 10px;
color: #000000;
pointer-events: none;
"
>
涂鸦
<EyeOutlined
@click="hideOrShowGraffiti(false)"
v-if="hideOrShowGraffitiFlag"
style="color: #2d8cf0"
/>
<EyeInvisibleOutlined
@click="hideOrShowGraffiti(true)"
v-if="!hideOrShowGraffitiFlag"
style="color: #595959"
/>
<div style="position: absolute; bottom: -6px; right: -4px; pointer-events: none">
<div
v-html="
`${
hideOrShowGraffitiFlag
? graffiti_svg.replaceAll('currentColor', '#2d8cf0')
: graffiti_svg.replaceAll('currentColor', '#595959')
}`
"
/>
</div>
</a-tooltip>
</div>
@ -494,18 +501,23 @@
:key="li.id"
@click="setNowShowImageData(li)"
>
<div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
<img
:src="
props.nowShowImageData.minipic
? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
"
loading="lazy"
width="75"
height="50"
/>
</div>
<a-tooltip placement="top">
<template #title>
<span>{{ li.name }}</span>
</template>
<div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
<img
:src="
li.minipic
? VITE_MEDIALIBRARY_IMAGE_URL + li.minipic
: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
"
loading="lazy"
width="75"
height="50"
/>
</div>
</a-tooltip>
</div>
</div>
</div>
@ -588,6 +600,7 @@
} from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import { UpdatePicStatus, UpdatePicName } from '@/api/demo/mediaLibrary';
import { graffiti_svg } from './svg';
import { getAppEnvConfig } from '@/utils/env';
import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage';
@ -687,7 +700,7 @@
// ----------------------------------------------------------------------
// 缩放比例
const scale = ref(1);
const scale = ref(0.9);
// 放大函数
function zoomIn() {
if (scale.value < 4) {
@ -754,7 +767,7 @@
// 刷新
function refresh() {
scale.value = 1;
scale.value = 0.9;
rotationAngle.value = 0;
graffitiFlag.value = false;
getImageWidthAndHeight();

12
src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
Unescape Escape View File

@ -8,7 +8,7 @@
>
<div class="leftMenu_closeButton">
<a-tooltip placement="right">
<template #title> 关闭弹窗 </template>
<template #title> 关闭路径弹窗 </template>
<CloseOutlined
style="font-size: 24px; margin: 8px; color: white"
@click="closePathModal"
@ -85,6 +85,14 @@
</div>
<a-tooltip placement="top">
<template #title>
<div>
<img
:src="VITE_MEDIALIBRARY_IMAGE_URL + show.minipic"
loading="lazy"
width="230"
height="190"
/>
</div>
<div> {{ show.name }}</div>
</template>
<div
@ -173,6 +181,8 @@
import { cloneDeep } from 'lodash-es';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage, createConfirm } = useMessage();
import { getAppEnvConfig } from '@/utils/env';
const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
const props = defineProps(['leftMenuShow', 'floderName', 'allImageDataList', 'nowShowImageData']);
const emits = defineEmits([

99
src/views/demo/system/mediaLibrary/path/pathMap.vue
Unescape Escape View File

@ -42,7 +42,7 @@
});
// 地图照片
// 地图照片-地面点
let bottomPointGraphicData: any = [];
// let bottomPointGraphicData: any = [];
// 地图照片-飞行点
let flightointGraphicData: any = [];
// 地图照片-地面点到展示图片的线
@ -292,15 +292,15 @@
(newValue) => {
if (newValue) {
// 地图照片-地面点
bottomPointGraphicData.forEach((graphicLayer) => {
if (graphicLayer.options.id == newValue.id + '_bottom') {
if (newValue.showOnMap == 1) {
graphicLayer.show = newValue.display == 1 ? true : false;
} else {
graphicLayers.removeGraphic(graphicLayer);
}
}
});
// bottomPointGraphicData.forEach((graphicLayer) => {
// if (graphicLayer.options.id == newValue.id + '_bottom') {
// if (newValue.showOnMap == 1) {
// graphicLayer.show = newValue.display == 1 ? true : false;
// } else {
// graphicLayers.removeGraphic(graphicLayer);
// }
// }
// });
// 地图照片-飞行点
flightointGraphicData.forEach((graphicLayer) => {
if (graphicLayer.options.id == newValue.id + '_flight') {
@ -349,9 +349,9 @@
// 地图照片-初始化-遍历展示
const showAllImageDataList = async () => {
// 删除旧数据
bottomPointGraphicData?.forEach((graphicLayer) => {
graphicLayers.removeGraphic(graphicLayer);
});
// bottomPointGraphicData?.forEach((graphicLayer) => {
// graphicLayers.removeGraphic(graphicLayer);
// });
flightointGraphicData?.forEach((graphicLayer) => {
graphicLayers.removeGraphic(graphicLayer);
});
@ -362,7 +362,7 @@
graphicLayers.removeGraphic(graphicLayer);
});
// 图层数据
bottomPointGraphicData = [];
// bottomPointGraphicData = [];
flightointGraphicData = [];
bottomImagePolylineGraphicData = [];
imageGraphicData = [];
@ -414,18 +414,18 @@
Cesium.Cartesian3.fromDegrees(position[0], position[1]),
).then((point) => {
// 地面点
let bottomPointGraphic = new mars3d.graphic.BillboardEntity({
id: item.id + '_bottom',
position: [position[0], position[1], point.height],
style: {
image: '/src/assets/images/flightoperation/mediaLibraryPoint.png',
clampToGround: true,
scale: 1,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
},
hasEdit: false,
show: item.display == 1 ? true : false,
});
// let bottomPointGraphic = new mars3d.graphic.BillboardEntity({
// id: item.id + '_bottom',
// position: [position[0], position[1], point.height],
// style: {
// image: '/src/assets/images/flightoperation/mediaLibraryPoint.png',
// clampToGround: true,
// scale: 1,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// },
// hasEdit: false,
// show: item.display == 1 ? true : false,
// });
if (index + 1 < props.allImageDataList.length) {
const afterItem = props.allImageDataList[index + 1];
let lng = afterItem.lng - item.lng;
@ -555,7 +555,7 @@
}
});
// 将地面点 添加到图层中
graphicLayers.addGraphic(bottomPointGraphic);
// graphicLayers.addGraphic(bottomPointGraphic);
// 将飞行点 添加到图层中
graphicLayers.addGraphic(flightointGraphic);
// 地面点到展示图片的线 添加到图层中
@ -563,10 +563,53 @@
// 展示图片 添加到图层中
graphicLayers.addGraphic(imageGraphic);
// 数据
bottomPointGraphicData.push(bottomPointGraphic);
// bottomPointGraphicData.push(bottomPointGraphic);
flightointGraphicData.push(flightointGraphic);
bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
imageGraphicData.push(imageGraphic);
// 初始选中
if (props.nowShowImageData && props.nowShowImageData.id) {
// 飞行点
flightointGraphicData?.forEach((graphicLayer) => {
if (props.nowShowImageData.id + '_flight' == graphicLayer.options.id) {
graphicLayer.show = true;
}
});
// 地面点到展示图片的线
bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
if (props.nowShowImageData.id + '_polyline' == graphicLayer.options.id) {
let defaultPosition = graphicLayer.options.defaultPosition;
let surfaceHeight = graphicLayer.options.surfaceHeight;
graphicLayer.positions = [
Cesium.Cartesian3.fromDegrees(
defaultPosition[0],
defaultPosition[1],
surfaceHeight,
),
Cesium.Cartesian3.fromDegrees(
defaultPosition[0],
defaultPosition[1],
defaultPosition[2] * 2,
),
];
graphicLayer.setStyle({
color: '#2d8cf0',
});
}
});
// 展示图片
imageGraphicData?.forEach((graphicLayer) => {
if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
graphicLayer.setStyle({
image: graphicLayer.options.chooseImage,
label: {
show: true,
},
});
}
});
}
});
};
}

16
src/views/demo/system/mediaLibrary/path/svg.ts
Unescape Escape View File

@ -22,4 +22,18 @@ height="18"
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z"
fill="#ffffff"
></path>
</svg>`;
</svg>`;
export const graffiti_svg = `<svg width="25px" height="25px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="作业区域-新增迭代724-展开" transform="translate(-1692, -817)">
<g id="编组-31" transform="translate(1692, 817)">
<rect id="矩形" fill="#FFFFFF00" x="0" y="0" width="30" height="30" rx="2"></rect>
<g id="paint-brush" transform="translate(5, 6)" fill="currentColor" fill-rule="nonzero">
<path d="M20,0.714305923 C20,0.319805655 19.6801943,0 19.2856941,0 C15.3498684,0 11.3113613,4.43851843 9.06844073,7.3778873 C7.44403191,6.88039807 5.67993844,7.18286866 4.31403832,8.1930748 C2.9481382,9.20328093 2.14234655,10.8014718 2.14235192,12.5003537 C2.14235192,15.2575745 0.397659708,16.4942166 0.314621644,16.5513611 C0.0544979202,16.7270112 -0.060485571,17.0518879 0.0312292032,17.352064 C0.122943977,17.6522401 0.39986556,17.8573755 0.713740079,17.8576481 L7.49964635,17.8576481 C9.1985282,17.8576481 10.7967191,17.0518618 11.8069252,15.6859617 C12.8171313,14.3200616 13.1196019,12.5559681 12.6221127,10.9315593 C15.5623745,8.68863867 20,4.65013156 20,0.714305923 Z M7.49964635,16.4290362 L2.37718,16.4290362 C2.97987562,15.572762 3.57096377,14.2789754 3.57096377,12.5003537 C3.57096377,10.3306022 5.32989487,8.57167108 7.49964635,8.57167108 C9.66939782,8.57167108 11.4283289,10.3306022 11.4283289,12.5003537 C11.4283289,14.6701051 9.66939782,16.4290362 7.49964635,16.4290362 Z M10.3943711,7.99576193 C10.7003321,7.59932214 11.0006383,7.22579967 11.2952894,6.87519451 C12.0164936,7.36244905 12.6375509,7.98350636 13.1248055,8.70471055 C12.7736051,8.99876649 12.4000826,9.29907261 12.0042381,9.6056289 C11.58799,8.9608029 11.0391971,8.41201004 10.3943711,7.99576193 Z M14.206979,7.75646944 C13.6677115,6.99555471 13.0035524,6.33139566 12.2426377,5.79212815 C15.080218,2.70900521 17.2204571,1.77415734 18.4838857,1.51432856 C18.2294142,2.77865004 17.2901019,4.91888916 14.206979,7.75646944 L14.206979,7.75646944 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>`

6
src/views/demo/system/mediaLibrary/preview/index.vue
Unescape Escape View File

@ -116,7 +116,7 @@
<style lang="less" scoped>
.modal {
width: 100%;
height: 920px;
height: 100%;
// 页面不能被选中
-webkit-user-select: none; /* Safari */
@ -148,7 +148,7 @@
}
.mainBody {
width: 100%;
height: 920px;
height: 100%;
display: flex;
position: absolute;
top: 0px;
@ -156,7 +156,7 @@
.imgOrVideo {
width: 80%;
height: 920px;
height: 100%;
background: #101010;
.imageDiv {

32
src/views/demo/system/mediaLibrary/preview/preview.ts
Unescape Escape View File

@ -2,4 +2,34 @@ export { default as PreviewImage } from './previewImage.vue';
export { default as PreviewVideo } from './previewVideo.vue';
export { default as PreviewImageInformation } from './previewImageInformation.vue';
export { default as PreviewVideoInformation } from './previewVideoInformation.vue';
export { default as Map } from './map.vue';
export { default as Map } from './map.vue';
export const graffiti_svg = `<svg width="25px" height="25px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="作业区域-新增迭代724-展开" transform="translate(-1692, -817)">
<g id="编组-31" transform="translate(1692, 817)">
<rect id="矩形" fill="#FFFFFF00" x="0" y="0" width="30" height="30" rx="2"></rect>
<g id="paint-brush" transform="translate(5, 6)" fill="currentColor" fill-rule="nonzero">
<path d="M20,0.714305923 C20,0.319805655 19.6801943,0 19.2856941,0 C15.3498684,0 11.3113613,4.43851843 9.06844073,7.3778873 C7.44403191,6.88039807 5.67993844,7.18286866 4.31403832,8.1930748 C2.9481382,9.20328093 2.14234655,10.8014718 2.14235192,12.5003537 C2.14235192,15.2575745 0.397659708,16.4942166 0.314621644,16.5513611 C0.0544979202,16.7270112 -0.060485571,17.0518879 0.0312292032,17.352064 C0.122943977,17.6522401 0.39986556,17.8573755 0.713740079,17.8576481 L7.49964635,17.8576481 C9.1985282,17.8576481 10.7967191,17.0518618 11.8069252,15.6859617 C12.8171313,14.3200616 13.1196019,12.5559681 12.6221127,10.9315593 C15.5623745,8.68863867 20,4.65013156 20,0.714305923 Z M7.49964635,16.4290362 L2.37718,16.4290362 C2.97987562,15.572762 3.57096377,14.2789754 3.57096377,12.5003537 C3.57096377,10.3306022 5.32989487,8.57167108 7.49964635,8.57167108 C9.66939782,8.57167108 11.4283289,10.3306022 11.4283289,12.5003537 C11.4283289,14.6701051 9.66939782,16.4290362 7.49964635,16.4290362 Z M10.3943711,7.99576193 C10.7003321,7.59932214 11.0006383,7.22579967 11.2952894,6.87519451 C12.0164936,7.36244905 12.6375509,7.98350636 13.1248055,8.70471055 C12.7736051,8.99876649 12.4000826,9.29907261 12.0042381,9.6056289 C11.58799,8.9608029 11.0391971,8.41201004 10.3943711,7.99576193 Z M14.206979,7.75646944 C13.6677115,6.99555471 13.0035524,6.33139566 12.2426377,5.79212815 C15.080218,2.70900521 17.2204571,1.77415734 18.4838857,1.51432856 C18.2294142,2.77865004 17.2901019,4.91888916 14.206979,7.75646944 L14.206979,7.75646944 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>`
export const otherimage_svg = `<svg width="23px" height="23px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="作业区域-新增迭代724-展开" transform="translate(-1692, -857)">
<g id="编组-30" transform="translate(1692, 857)">
<rect id="矩形" fill="#FFFFFF00" x="0" y="0" width="30" height="30" rx="2"></rect>
<g id="pencil-simple" transform="translate(4.8766, 6)" fill="currentColor">
<path d="M19.7015397,4.44403083 L15.680296,0.421887073 C15.4102312,0.151760637 15.0439078,0 14.6619349,0 C14.279962,0 13.9136386,0.151760637 13.6435738,0.421887073 L2.5455531,11.5208078 C2.27427322,11.7899334 2.12222767,12.1565934 2.12344121,12.5387189 L2.12344121,16.5608626 C2.12344121,17.3561613 2.76816548,18.0008856 3.56346417,18.0008856 L7.58560792,18.0008856 C7.96773341,18.0020991 8.33439336,17.8500536 8.60351899,17.5787737 L19.7015397,6.48075298 C19.9716662,6.21068821 20.1234268,5.84436477 20.1234268,5.4623919 C20.1234268,5.08041904 19.9716662,4.71409559 19.7015397,4.44403083 Z M7.58560792,16.5608626 L3.56346417,16.5608626 L3.56346417,12.5387189 L11.4835503,4.61863272 L15.5056941,8.64077648 L7.58560792,16.5608626 Z M16.5236051,7.62196539 L12.5014614,3.60072165 L14.6614849,1.44069816 L18.6836286,5.4619419 L16.5236051,7.62196539 Z" id="形状" fill-rule="nonzero"></path>
<line x1="1.123434" y1="17.5" x2="18.876566" y2="17.5" id="路径-6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></line>
<line x1="-0.876566" y1="17.5" x2="1.876566" y2="17.5" id="路径-6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" transform="translate(0.5, 17.5) scale(-1, -1) rotate(90) translate(-0.5, -17.5)"></line>
<line x1="17.623434" y1="17.5" x2="20.376566" y2="17.5" id="路径-6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" transform="translate(19, 17.5) scale(-1, -1) rotate(90) translate(-19, -17.5)"></line>
</g>
</g>
</g>
</g>
</svg>`;

73
src/views/demo/system/mediaLibrary/preview/previewImage.vue
Unescape Escape View File

@ -446,19 +446,26 @@
<template #title>
<span>{{ hideOrShowGraffitiFlag ? '点击隐藏涂鸦信息' : '点击显示涂鸦信息' }}</span>
</template>
<EyeOutlined @click="hideOrShowGraffiti(false)" v-if="hideOrShowGraffitiFlag" />
<EyeInvisibleOutlined @click="hideOrShowGraffiti(true)" v-if="!hideOrShowGraffitiFlag" />
<div
style="
position: absolute;
bottom: 0px;
right: 0px;
font-size: 10px;
color: #000000;
pointer-events: none;
"
>
涂鸦
<EyeOutlined
@click="hideOrShowGraffiti(false)"
v-if="hideOrShowGraffitiFlag"
style="color: #2d8cf0"
/>
<EyeInvisibleOutlined
@click="hideOrShowGraffiti(true)"
v-if="!hideOrShowGraffitiFlag"
style="color: #595959"
/>
<div style="position: absolute; bottom: -12px; right: -4px; pointer-events: none">
<div
v-html="
`${
hideOrShowGraffitiFlag
? graffiti_svg.replaceAll('currentColor', '#2d8cf0')
: graffiti_svg.replaceAll('currentColor', '#595959')
}`
"
/>
</div>
</a-tooltip>
</div>
@ -473,19 +480,26 @@
}}
</span>
</template>
<EyeOutlined @click="hideOrShowTextbox(false)" v-if="hideOrShowTextboxFlag" />
<EyeInvisibleOutlined @click="hideOrShowTextbox(true)" v-if="!hideOrShowTextboxFlag" />
<div
style="
position: absolute;
bottom: 0px;
right: 0px;
font-size: 10px;
color: #000000;
pointer-events: none;
"
>
标注
<EyeOutlined
@click="hideOrShowTextbox(false)"
v-if="hideOrShowTextboxFlag"
style="color: #2d8cf0"
/>
<EyeInvisibleOutlined
@click="hideOrShowTextbox(true)"
v-if="!hideOrShowTextboxFlag"
style="color: #595959"
/>
<div style="position: absolute; bottom: -10px; right: -3px; pointer-events: none">
<div
v-html="
`${
hideOrShowTextboxFlag
? otherimage_svg.replaceAll('currentColor', '#2d8cf0')
: otherimage_svg.replaceAll('currentColor', '#595959')
}`
"
/>
</div>
</a-tooltip>
</div>
@ -523,6 +537,7 @@
CompressOutlined,
} from '@ant-design/icons-vue';
import { UpdatePicStatus, Deletepic } from '@/api/demo/mediaLibrary';
import { graffiti_svg, otherimage_svg } from './preview';
import { useMessage } from '@/hooks/web/useMessage';
import { cloneDeep } from 'lodash-es';
import { getAppEnvConfig } from '@/utils/env';
@ -608,8 +623,8 @@
props.nowPreviewRecord.width > 1040 &&
props.nowPreviewRecord.height > 800
) {
imageHeight.value = 800;
imageWidth.value = (800 / props.nowPreviewRecord.height) * props.nowPreviewRecord.width;
imageWidth.value = 1040;
imageHeight.value = (1040 / props.nowPreviewRecord.width) * props.nowPreviewRecord.height;
} else {
imageHeight.value = 800;
imageWidth.value = 1040;
@ -627,7 +642,7 @@
props.nowPreviewRecord.width > 1040 &&
props.nowPreviewRecord.height > 800
) {
scale.value = props.nowPreviewRecord.height / 800;
scale.value = props.nowPreviewRecord.width / 1040;
// imageWidth.value = props.nowPreviewRecord.width;
// imageHeight.value = props.nowPreviewRecord.height;
} else {

2
src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
Unescape Escape View File

@ -65,7 +65,7 @@
<span class="infotitle">拍摄负载</span>
</a-col>
<a-col :span="17">
<span class="infovalue">{{ props.nowPreviewRecord.photographNumber }} </span>
<span class="infovalue">{{ props.nowPreviewRecord.payloadName }} </span>
</a-col>
<a-col :span="7">
<span class="infotitle">拍摄人员</span>

Write Preview
Loading…
Cancel
Save