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

媒体库-图片展示和历史图片路径-缩略图替换完成版

main
滕嵩 2025-07-28 11:23:52 +08:00
parent a989857c26
commit 8d5dc54cd1
4 changed files with 215 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
View File

@ -178,9 +178,16 @@
<CloseOutlined
style="margin-right: 10px; color: red"
@click="
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
rect.text
? ((rect.x = graffitisClone[index].x),
(rect.y = graffitisClone[index].y),
(rect.width = graffitisClone[index].width),
(rect.height = graffitisClone[index].height),
(rect.color = graffitisClone[index].color),
(rect.text = graffitisClone[index].text),
(rect.status = 'success'))
: graffitis.splice(index, 1);
nowGraffiti = -1;
rect.status = 'success';
"
/>
<DeleteOutlined
@ -218,12 +225,14 @@
:style="{
textDecoration: rect.status == 'mouse' ? 'underline' : '',
}"
@mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
@mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
@mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
@mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
@click="
rect.status = 'edit';
graffitisClone = cloneDeep(graffitis);
nowGraffiti = index;
graffitiFlag
? ((rect.status = 'edit'),
(graffitisClone = cloneDeep(graffitis)),
(nowGraffiti = index))
: ''
"
>
{{ rect.text }}
@ -242,10 +251,7 @@
}"
@mouseenter="mouseenter(rect, 'top')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'top')"
/>
<!-- 下 -->
@ -261,10 +267,7 @@
}"
@mouseenter="mouseenter(rect, 'bottom')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'bottom')"
/>
<!-- 右 -->
@ -280,10 +283,7 @@
}"
@mouseenter="mouseenter(rect, 'right')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'right')"
/>
<!-- 左 -->
@ -299,10 +299,7 @@
}"
@mouseenter="mouseenter(rect, 'left')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'left')"
/>
<!-- 左上 -->
@ -504,6 +501,7 @@
? 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"
/>
@ -692,7 +690,7 @@
const scale = ref(1);
// 放大函数
function zoomIn() {
if (scale.value < 3) {
if (scale.value < 4) {
// 设置最大缩放倍数为3倍
scale.value += 0.1;
}
@ -726,8 +724,8 @@
props.nowShowImageData.width > 1040 &&
props.nowShowImageData.height > 800
) {
imageHeight.value = 800;
imageWidth.value = (800 / props.nowShowImageData.height) * props.nowShowImageData.width;
imageWidth.value = 1040;
imageHeight.value = (1040 / props.nowShowImageData.width) * props.nowShowImageData.height;
} else {
imageHeight.value = 800;
imageWidth.value = 1040;
@ -741,14 +739,16 @@
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 = props.nowShowImageData.width;
imageHeight.value = props.nowShowImageData.height;
scale.value = props.nowShowImageData.width / 1040;
// imageWidth.value = props.nowShowImageData.width;
// imageHeight.value = props.nowShowImageData.height;
} else {
imageWidth.value = 1440;
imageHeight.value = 1106;
scale.value = 2;
// imageWidth.value = 2080;
// imageHeight.value = 1600;
}
}
@ -796,6 +796,7 @@
// 选择当前展示图片-----------------------------------------------
function setNowShowImageData(value) {
emits('setNowShowImageData', value);
refresh();
}
// 鼠标拖动or涂鸦-------------------------------------------------
@ -1032,7 +1033,9 @@
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
// dragDocument.style.cursor = 'default';
if (dragDocument) {
dragDocument.style.cursor = 'default';
}
}
}
// 鼠标滚轮
@ -1066,82 +1069,92 @@
//------------------------------------------------------------------------
// 鼠标聚焦
function mouseenter(rect, type) {
// if (rect.status != 'edit') {
// rect.status = 'mouse';
// document.body.style.cursor = 'pointer';
// }
// if (rect.status == 'edit') {
// if (type == 'top' || type == 'bottom') {
// document.body.style.cursor = 'ns-resize';
// }
// if (type == 'left' || type == 'right') {
// document.body.style.cursor = 'ew-resize';
// }
// if (type == 'leftTop' || type == 'rightBottom') {
// document.body.style.cursor = 'nwse-resize';
// }
// if (type == 'leftBottom' || type == 'rightTop') {
// document.body.style.cursor = 'nesw-resize';
// }
// }
if (graffitiFlag.value) {
if (rect.status != 'edit') {
rect.status = 'mouse';
document.body.style.cursor = 'pointer';
}
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
}
if (type == 'left' || type == 'right') {
document.body.style.cursor = 'ew-resize';
}
if (type == 'leftTop' || type == 'rightBottom') {
document.body.style.cursor = 'nwse-resize';
}
if (type == 'leftBottom' || type == 'rightTop') {
document.body.style.cursor = 'nesw-resize';
}
}
}
}
// 鼠标离开
function mouseleave(rect) {
// if (rect.status == 'mouse' || rect.status == 'edit') {
// if (rect.status == 'mouse') {
// rect.status = 'success';
// }
// if (graffitiFlag.value) {
// document.body.style.cursor = 'crosshair';
// } else {
// document.body.style.cursor = 'pointer';
// }
// }
if (graffitiFlag.value) {
if (rect.status == 'mouse' || rect.status == 'edit') {
if (rect.status == 'mouse') {
rect.status = 'success';
}
if (graffitiFlag.value) {
document.body.style.cursor = 'crosshair';
} else {
document.body.style.cursor = 'pointer';
}
}
}
}
// 编辑状态下的鼠标按下
const mouseEditType = ref('');
function funMouseDownEdit(e, index, type) {
// 获取相对于容器的坐标
// graffitisClone.value = cloneDeep(graffitis.value);
// const rect = mouseCanvasRef.value.getBoundingClientRect();
// startX = e.x - rect.x;
// startY = e.y - rect.y;
// isDragging.value = true;
// nowGraffiti.value = index;
// mouseEditType.value = type;
// window.addEventListener('mousemove', funMouseMoveEdit);
// window.addEventListener('mouseup', funMouseUpEdit);
if (graffitiFlag.value) {
// 获取相对于容器的坐标
graffitisClone.value = cloneDeep(graffitis.value);
const rect = mouseCanvasRef.value.getBoundingClientRect();
startX = e.x - rect.x;
startY = e.y - rect.y;
isDragging.value = true;
nowGraffiti.value = index;
mouseEditType.value = type;
window.addEventListener('mousemove', funMouseMoveEdit);
window.addEventListener('mouseup', funMouseUpEdit);
}
}
// 编辑状态下的鼠标移动
function funMouseMoveEdit(e) {
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
if (graffitiFlag.value) {
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
funSetMouseDataEdit();
}
funSetMouseDataEdit();
}
// 编辑状态下的鼠标松开
function funMouseUpEdit(e) {
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
if (graffitiFlag.value) {
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
}
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
}
// 编辑状态下的数据
function funSetMouseDataEdit() {

13
src/views/demo/system/mediaLibrary/path/pathMap.vue
View File

@ -373,12 +373,12 @@
if (item.lng && item.lat && item.absoluteAltitude && item.showOnMap == 1) {
const image = new Image();
image.crossOrigin = 'Anonymous';
// if (item.minipic) {
// image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
// } else {
image.src =
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
// }
if (item.minipic) {
image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
} else {
image.src =
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
}
image.onload = () => {
// 创建Canvas元素
const canvas = document.createElement('canvas');
@ -402,7 +402,6 @@
ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1); // 调整坐标和尺寸以适应边框宽度
// 将Canvas内容转换为图片的数据URL
const dataURL2 = canvas.toDataURL('image/png');
// 位置
let position = [
parseFloat(item.lng),

13
src/views/demo/system/mediaLibrary/preview/Map.vue
View File

@ -319,13 +319,12 @@
if (item.lng && item.lat && item.absoluteAltitude) {
const image = new Image();
image.crossOrigin = 'Anonymous';
// if (item.minipic) {
// image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
// } else {
image.src =
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
// }
if (item.minipic) {
image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
} else {
image.src =
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
}
image.onload = () => {
// 创建Canvas元素
const canvas = document.createElement('canvas');

181
src/views/demo/system/mediaLibrary/preview/previewImage.vue
View File

@ -64,9 +64,16 @@
<CloseOutlined
style="margin-right: 10px; padding: 3px; color: red"
@click="
rect.text ? (rect.text = graffitisClone[index].text) : (rect.text = '');
rect.text
? ((rect.x = graffitisClone[index].x),
(rect.y = graffitisClone[index].y),
(rect.width = graffitisClone[index].width),
(rect.height = graffitisClone[index].height),
(rect.color = graffitisClone[index].color),
(rect.text = graffitisClone[index].text),
(rect.status = 'success'))
: graffitis.splice(index, 1);
nowGraffiti = -1;
rect.status = 'success';
"
/>
<DeleteOutlined
@ -107,12 +114,14 @@
:style="{
textDecoration: rect.status == 'mouse' ? 'underline' : '',
}"
@mouseenter="rect.status != 'edit' ? (rect.status = 'mouse') : ''"
@mouseleave="rect.status == 'mouse' ? (rect.status = 'success') : ''"
@mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
@mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
@click="
rect.status = 'edit';
graffitisClone = cloneDeep(graffitis);
nowGraffiti = index;
graffitiFlag
? ((rect.status = 'edit'),
(graffitisClone = cloneDeep(graffitis)),
(nowGraffiti = index))
: ''
"
>
{{ rect.text }}
@ -131,10 +140,7 @@
}"
@mouseenter="mouseenter(rect, 'top')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'top')"
/>
<!-- 下 -->
@ -150,10 +156,7 @@
}"
@mouseenter="mouseenter(rect, 'bottom')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'bottom')"
/>
<!-- 右 -->
@ -169,10 +172,7 @@
}"
@mouseenter="mouseenter(rect, 'right')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'right')"
/>
<!-- 左 -->
@ -188,10 +188,7 @@
}"
@mouseenter="mouseenter(rect, 'left')"
@mouseleave="mouseleave(rect)"
@click="
rect.status = 'edit';
nowGraffiti = index;
"
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
@mousedown="funMouseDownEdit($event, index, 'left')"
/>
<!-- 左上 -->
@ -582,7 +579,7 @@
const scale = ref(1);
// 放大函数
function zoomIn() {
if (scale.value < 3) {
if (scale.value < 4) {
scale.value += 0.1;
}
}
@ -634,11 +631,13 @@
props.nowPreviewRecord.width > 1040 &&
props.nowPreviewRecord.height > 800
) {
imageWidth.value = props.nowPreviewRecord.width;
imageHeight.value = props.nowPreviewRecord.height;
scale.value = props.nowPreviewRecord.height / 800;
// imageWidth.value = props.nowPreviewRecord.width;
// imageHeight.value = props.nowPreviewRecord.height;
} else {
imageWidth.value = 2080;
imageHeight.value = 1600;
scale.value = 2;
// imageWidth.value = 2080;
// imageHeight.value = 1600;
}
}
@ -917,7 +916,9 @@
// 拖动
const dragDocument: any = document.querySelector('.dragModal');
isDragging.value = false;
dragDocument.style.cursor = 'default';
if (dragDocument) {
dragDocument.style.cursor = 'default';
}
}
}
@ -947,82 +948,92 @@
//------------------------------------------------------------------------
// 鼠标聚焦
function mouseenter(rect, type) {
if (rect.status != 'edit') {
rect.status = 'mouse';
document.body.style.cursor = 'pointer';
}
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
if (graffitiFlag.value) {
if (rect.status != 'edit') {
rect.status = 'mouse';
document.body.style.cursor = 'pointer';
}
if (type == 'left' || type == 'right') {
document.body.style.cursor = 'ew-resize';
}
if (type == 'leftTop' || type == 'rightBottom') {
document.body.style.cursor = 'nwse-resize';
}
if (type == 'leftBottom' || type == 'rightTop') {
document.body.style.cursor = 'nesw-resize';
if (rect.status == 'edit') {
if (type == 'top' || type == 'bottom') {
document.body.style.cursor = 'ns-resize';
}
if (type == 'left' || type == 'right') {
document.body.style.cursor = 'ew-resize';
}
if (type == 'leftTop' || type == 'rightBottom') {
document.body.style.cursor = 'nwse-resize';
}
if (type == 'leftBottom' || type == 'rightTop') {
document.body.style.cursor = 'nesw-resize';
}
}
}
}
// 鼠标离开
function mouseleave(rect) {
if (rect.status == 'mouse' || rect.status == 'edit') {
if (rect.status == 'mouse') {
rect.status = 'success';
}
if (graffitiFlag.value) {
document.body.style.cursor = 'crosshair';
} else {
document.body.style.cursor = 'pointer';
if (graffitiFlag.value) {
if (rect.status == 'mouse' || rect.status == 'edit') {
if (rect.status == 'mouse') {
rect.status = 'success';
}
if (graffitiFlag.value) {
document.body.style.cursor = 'crosshair';
} else {
document.body.style.cursor = 'pointer';
}
}
}
}
// 编辑状态下的鼠标按下
const mouseEditType = ref('');
function funMouseDownEdit(e, index, type) {
// 获取相对于容器的坐标
// graffitisClone.value = cloneDeep(graffitis.value);
// const rect = mouseCanvasRef.value.getBoundingClientRect();
// startX = e.x - rect.x;
// startY = e.y - rect.y;
// isDragging.value = true;
// nowGraffiti.value = index;
// mouseEditType.value = type;
// window.addEventListener('mousemove', funMouseMoveEdit);
// window.addEventListener('mouseup', funMouseUpEdit);
if (graffitiFlag.value) {
// 获取相对于容器的坐标
graffitisClone.value = cloneDeep(graffitis.value);
const rect = mouseCanvasRef.value.getBoundingClientRect();
startX = e.x - rect.x;
startY = e.y - rect.y;
isDragging.value = true;
nowGraffiti.value = index;
mouseEditType.value = type;
window.addEventListener('mousemove', funMouseMoveEdit);
window.addEventListener('mouseup', funMouseUpEdit);
}
}
// 编辑状态下的鼠标移动
function funMouseMoveEdit(e) {
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
if (graffitiFlag.value) {
const rect = mouseCanvasRef.value.getBoundingClientRect();
if (!isDragging.value) return;
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
funSetMouseDataEdit();
}
funSetMouseDataEdit();
}
// 编辑状态下的鼠标松开
function funMouseUpEdit(e) {
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
if (graffitiFlag.value) {
if (!isDragging.value) return;
const rect = mouseCanvasRef.value.getBoundingClientRect();
endX = e.x - rect.x;
endY = e.y - rect.y;
if (endX < 0 && endY < 0) {
endX = startX;
endY = startY;
}
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
}
isDragging.value = false;
if (e.x > rect.right || e.y > rect.bottom) {
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
} else {
funSetMouseDataEdit();
}
window.removeEventListener('mousemove', funMouseMoveEdit);
window.removeEventListener('mouseup', funMouseUpEdit);
}
// 编辑状态下的数据
function funSetMouseDataEdit() {