<template>
<div class="pop-up-main">
<div class="paln-box">
<div
class="movableItem"
:style="{ width: width, height: height }"
@mousewheel="rollImg($event)"
@mousedown="drag($event, 1)"
ref="bigImage"
>
<!-- 图片不可选中 或不可拖拽到新标签打开-->
<slot
name="svg"
oncontextmenu="return false;"
onselectstart="return false;"
draggable="false"
></slot>
<template v-if="isEdit && iconWidth">
<img
ref="signImage"
:src="iconImgUrl"
@mousedown="dragSign($event, key)"
v-for="(item, key) in equipment"
:key="key"
:style="{
top: equipment[key].top + '%',
left: equipment[key].left + '%',
width: iconWidth,
height: iconHeight,
}"
class="equipment"
/>
</template>
<el-popover
width="200"
placement="bottom-start"
trigger="hover"
:close-delay="100"
content="暂无描述"
v-else-if="!isEdit && iconWidth && arrIcon.length == equipment.length"
v-for="(item, key) in equipment"
:key="key"
popper-class="preview-popover"
>
<!-- &&arrIcon.length==equipment.length -->
<template>
<div v-if="equipment[key].describe" class="describe">
<p class="describe-top">
{{ equipment[key].describe.deviceName }}
</p>
<p class="describe-center">
{{ equipment[key].describe.remark }}
</p>
<p class="describe-bottom">
{{ equipment[key].describe.location }}
</p>
</div>
</template>
<!-- <img oncontextmenu="return false;" onselectstart="return false;" draggable="false" slot="reference"
ref="signImage" :src="$baseUrl + equipment[key].iconImgUrl"
:style="{top:equipment[key].top+'%',left:equipment[key].left+'%',width:arrIcon[key].iconWidth,height:arrIcon[key].iconHeight}"
class="equipment" /> -->
</el-popover>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
equipment: {
type: Array,
default: () => {
return [
{
iconImgUrl: "",
top: 0,
left: 0,
},
];
},
},
isEdit: {
default: false,
},
imgUrl: {},
},
data() {
return {
// 定时器
timer: "",
// 图片加载失败
imgOnerror: false,
imgIndex: 0,
isChange: true,
// 图片显示默认大小
width: "1200px",
height: "800px",
// 可缩小倍数,为空则可无限缩小
minification: 3,
// 可放大倍数 为空则可无限放大
magnification: "",
bigMaxWidth: 1100,
bigMaxHeight: 800,
// 小图标信息
iconImgUrl: "",
iconWidth: "",
// 存储每个小图标处理好的宽高
iconHeight: "",
arrIcon: [],
iconMaxWidth: 32,
iconMaxHeight: 32,
tog: 1,
};
},
methods: {
// 获取图片大小
getImgInfo(
imgUrl,
MaxWidth,
MaxHeight,
StrWidth,
StrHeight,
Array = false,
arr,
num = 0
) {
let img = new Image();
// img.src = imgUrl;
img = document.getElementsByClassName("svg");
let _this = this;
img.onerror = () => {
// console.log("加载失败！！", _this.arrIcon.length);
// console.log(imgUrl, MaxWidth, MaxHeight, StrWidth, StrHeight);
_this.imgOnerror = true;
_this.imgIndex =
_this.arrIcon.length - 1 < 0 ? 0 : _this.arrIcon.length - 1;
this.timer = setTimeout(() => {
if (num <= 5) {
_this.getImgInfo(
imgUrl,
MaxWidth,
MaxHeight,
StrWidth,
StrHeight,
Array,
arr,
num + 1
);
}
clearInterval(this.timer);
}, 2000);
};
img.onload = function (e) {
// 显示时 初始 最大宽度
let maxWidth = MaxWidth;
// 显示时 初始 最大高度
let maxHeight = MaxHeight;
if (
e.path[0].naturalWidth <= maxWidth &&
e.path[0].naturalHeight <= maxHeight
) {
_this[StrWidth] = e.path[0].naturalWidth + "px";
_this[StrHeight] = e.path[0].naturalHeight + "px";
} else {
_this[StrWidth] = e.path[0].naturalWidth + "px";
_this[StrHeight] = e.path[0].naturalHeight + "px";
if (
e.path[0].naturalWidth > maxWidth &&
e.path[0].naturalHeight <= maxHeight
) {
let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
_this[StrWidth] = "1600px";
_this[StrHeight] = maxWidth / ratio + "px";
} else if (
e.path[0].naturalWidth <= maxWidth &&
e.path[0].naturalHeight > maxHeight
) {
let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
_this[StrWidth] = maxHeight * ratio + "px";
_this[StrHeight] = "800px";
} else if (
e.path[0].naturalWidth > maxWidth &&
e.path[0].naturalHeight > maxHeight
) {
let ratio = e.path[0].naturalWidth / e.path[0].naturalHeight;
let w = maxWidth;
let h = w / ratio;
if (h > maxHeight) {
let ratio2 = w / h;
h = maxHeight;
w = h * ratio2;
}
_this[StrWidth] = w + "px";
_this[StrHeight] = h + "px";
}
}
if (Array) {
_this[arr].push({
iconWidth: _this[StrWidth],
iconHeight: _this[StrHeight],
});
// console.log(
// "tow#################################arrIcon",
// _this[arr].length
// );
}
// _this[StrWidth] = `${e.path[0].naturalWidth}px`;
// _this[StrHeight] = `${e.path[0].naturalHeight}px`;
// vm.$set(vm.imgInfo, "width", img.width);
// vm.$set(vm.imgInfo, "height", img.height);
// console.log("打印图片信息", imgUrl, _this[StrWidth], _this[StrHeight]); // 打印图片信息
// console.log("打印图片信息", e.path[0].naturalHeight); // 打印图片信息
// console.log("打印图片信息", e); // 打印图片信息
// console.log("打印图片信息this.width", _this[StrWidth]); // 打印图片信息
// console.log("打印图片信息this.height", _this[StrHeight]); // 打印图片信息
};
},
// 缩放
rollImg() {
let that = this;
// let oImg = document.getElementsByClassName("movableItem")[0];
let oImg = this.$refs.bigImage;
// console.log(
// "length",
// document.getElementsByClassName("movableItem").length
// );
// console.log("oImg", oImg);
let _this = this;
function fnWheel(obj, fncc) {
obj.onmousewheel = fn;
if (obj.addEventListener) {
obj.addEventListener("DOMMouseScroll", fn, false);
}
function fn(ev) {
let oEvent = ev || window.event;
let down = true;
if (oEvent.detail) {
down = oEvent.detail > 0;
} else {
down = oEvent.wheelDelta < 0;
}
if (fncc) {
fncc.call(this, down, oEvent);
}
if (oEvent.preventDefault) {
oEvent.preventDefault();
}
return false;
}
}
fnWheel(oImg, function (down, oEvent) {
let oldWidth = this.offsetWidth;
let oldHeight = this.offsetHeight;
let oldLeft = this.offsetLeft;
let oldTop = this.offsetTop;
let parent = oEvent.path[2];
// 获取父元素距离页面可视区域的位置
let parentLeft = parent.getBoundingClientRect().left;
let parentTop = parent.getBoundingClientRect().top;
// 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
let scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
let scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
let nowWidth = this.style.width.split("p")[0];
let initWidth = _this.width.split("p")[0];
let initHeight = _this.height.split("p")[0];
let miniFlag = true;
let magniFlag = true;
if (_this.minification) {
// 限制缩小范围
if (nowWidth <= parseInt(initWidth / _this.minification)) {
miniFlag = false;
// console.log("限制缩小范围");
// console.log(
// "限制缩小范围",
// nowWidth,
// parseInt(initWidth / _this.minification)
// );
this.style.width = parseInt(initWidth / _this.minification) + "px";
this.style.height =
parseInt(initHeight / _this.minification) + "px";
}
if (_this.magnification) {
// 限制放大范围
if (nowWidth >= parseInt(initWidth * _this.magnification)) {
magniFlag = false;
// console.log("限制放大范围");
this.style.width =
parseInt(initWidth * _this.magnification) + "px";
this.style.height =
parseInt(initHeight * _this.magnification) + "px";
}
}
}
if (down && miniFlag) {
this.style.width = parseInt(this.offsetWidth * 0.9) + "px";
this.style.height = parseInt(this.offsetHeight * 0.9) + "px";
that.width = parseInt(this.offsetWidth * 0.9) + "px";
that.height = parseInt(this.offsetHeight * 0.9) + "px";
} else if (!down && magniFlag) {
// console.log("放大");
this.style.width = parseInt(this.offsetWidth * 1.1) + "px";
this.style.height = parseInt(this.offsetHeight * 1.1) + "px";
that.width = parseInt(this.offsetWidth * 1.1) + "px";
that.height = parseInt(this.offsetHeight * 1.1) + "px";
}
let newWidth = this.offsetWidth;
let newHeight = this.offsetHeight;
// 新的相对位置left = 原先的相对位置left - 比例 *（本身新的宽度-旧的宽度）
this.style.left =
Math.round(this.offsetLeft - scaleX * (newWidth - oldWidth)) + "px";
this.style.top =
Math.round(this.offsetTop - scaleY * (newHeight - oldHeight)) + "px";
});
// console.log(that.width)
},
// },
//拖拽
drag(ev) {
// let ie = document.all;
let nn6 = document.getElementById && !document.all;
let isdrag = false;
let y, x;
let nTY, nTX;
let oDragObj;
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top =
(nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
oDragObj.style.left =
(nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
return false;
}
}
function initDrag(e) {
// console.log("点击图片initDrag");
let oDragHandle = nn6 ? e.target : event.srcElement;
let topElement = "HTML";
while (
oDragHandle.tagName != topElement &&
oDragHandle.className != "movableItem"
) {
oDragHandle = nn6
? oDragHandle.parentNode
: oDragHandle.parentElement;
}
if (oDragHandle.className == "movableItem") {
isdrag = true;
oDragObj = oDragHandle;
// 父元素宽高
let width = e.path[2].offsetWidth;
let height = e.path[2].offsetHeight;
// 这里判断第一次获取不到style 样式 默认为 居中50%
if (oDragObj.style.top == "") {
nTY = 0;
nTX = parseInt((50 * width) / 100 + 0);
} else {
nTY = parseInt(oDragObj.style.top + 0);
nTX = parseInt(oDragObj.style.left + 0);
}
y = nn6 ? e.clientY : event.clientY;
x = nn6 ? e.clientX : event.clientX;
oDragObj.style.cursor = "move";
document.onmousemove = moveMouse;
return false;
}
}
document.onmousemove = initDrag;
// document.onmouseup = new Function("isdrag=false");
document.onmouseup = function (e) {
isdrag = false;
document.onmousemove = null;
document.onmouseup = null;
let oDragHandle = nn6 ? e.target : event.srcElement;
let topElement = "HTML";
while (
oDragHandle.tagName != topElement &&
oDragHandle.className != "movableItem"
) {
oDragHandle = nn6
? oDragHandle.parentNode
: oDragHandle.parentElement;
}
if (oDragHandle.className == "movableItem") {
oDragObj = oDragHandle;
oDragObj.style.cursor = "Default";
}
};
ev = event || window.event;
// 取消事件冒泡行为
// window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
},
// 拖拽标记
// eslint-disable-next-line no-unused-lets
dragSign(ev, key) {
let nn6 = document.getElementById && !document.all;
let isdrag = false;
let y, x;
let nTY, nTX;
let oDragObj;
let _this = this;
function moveMouse(e) {
if (isdrag) {
this.equipmentKey = key;
// console.log("thisequipmentKey", this.equipmentKey);
let widthItem = e.path[1].style.width.split("p");
let heightItem = e.path[1].style.height.split("p");
let width = widthItem[0];
// eslint-disable-next-line no-unused-lets
let height = heightItem[0];
let top =
((nn6
? (nTY / 100) * height + e.clientY - y
: (nTY / 100) * height + event.clientY - y) /
height) *
100;
let left =
((nn6
? (nTX / 100) * width + e.clientX - x
: (nTX / 100) * width + event.clientX - x) /
width) *
100;
if (top >= 0 && top <= 100) {
_this.equipment[key].top = top;
}
if (left >= 0 && left <= 100) {
_this.equipment[key].left = left;
}
return false;
}
}
// eslint-disable-next-line no-unused-vars
function initDrag(e) {
// console.log("_this", _this);
let oDragHandle = nn6 ? e.target : event.srcElement;
let topElement = "HTML";
while (
oDragHandle.tagName != topElement &&
oDragHandle.className.indexOf("equipment") == -1
) {
oDragHandle = nn6
? oDragHandle.parentNode
: oDragHandle.parentElement;
}
if (oDragHandle.className.indexOf("equipment") != -1) {
isdrag = true;
oDragObj = oDragHandle;
// 父元素宽高
let width = e.path[1].offsetWidth;
// let height = e.path[1].offsetHeight;
// console.log(width, height);
// console.log("oDragObj.style", oDragObj.style);
// 这里判断第一次获取不到style 样式 默认为 居中50%
if (oDragObj.style.top == "") {
// nTY = parseInt((50 * height) / 100 + 0);
nTY = 0;
nTX = parseInt((50 * width) / 100 + 0);
} else if (oDragObj.style.top.indexOf("%") != -1) {
nTY = oDragObj.style.top.split("%")[0];
nTX = oDragObj.style.left.split("%")[0];
} else {
nTY = parseInt(oDragObj.style.top + 0);
nTX = parseInt(oDragObj.style.left + 0);
}
y = nn6 ? e.clientY : event.clientY;
x = nn6 ? e.clientX : event.clientX;
oDragObj.style.cursor = "move";
document.onmousemove = moveMouse;
return false;
}
}
// document.onmousedown = initDrag;
document.onmousemove = initDrag;
document.onmouseup = function (e) {
isdrag = false;
document.onmousemove = null;
document.onmouseup = null;
let oDragHandle = nn6 ? e.target : event.srcElement;
let topElement = "HTML";
while (
oDragHandle.tagName != topElement &&
oDragHandle.className != "equipment"
) {
oDragHandle = nn6
? oDragHandle.parentNode
: oDragHandle.parentElement;
}
if (oDragHandle.className == "equipment") {
oDragObj = oDragHandle;
oDragObj.style.cursor = "Default";
}
};
// _this.equipmentKey = key;
// _this.equipment[_this.equipmentKey].left = l;
// _this.equipment[_this.equipmentKey].top = t;
ev = event || window.event;
// 取消事件冒泡行为
window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
},
},
watch: {
equipment() {
if (this.equipment.length != 0) {
this.arrIcon = [];
let finish = true;
this.equipment.filter((item) => {
if (!item.iconImgUrl) {
finish = false;
}
return true;
});
// console.log("finish", finish);
if (finish) {
this.equipment.filter((item, index) => {
if (index >= this.imgIndex) {
console.log("iconImgUrl", this.equipment[index].iconImgUrl);
this.getImgInfo(
this.$baseUrl + item.iconImgUrl,
this.iconMaxWidth,
this.iconMaxHeight,
"iconWidth",
"iconHeight",
true,
"arrIcon"
);
}
console.log("22filter", index);
return true;
});
}
}
},
},
created() {
this.getImgInfo(
this.imgUrl,
this.bigMaxWidth,
this.bigMaxHeight,
"width",
"height"
);
if (this.equipment.length != 0) {
this.arrIcon = [];
let finish = true;
this.equipment.filter((item) => {
if (!item.iconImgUrl) {
finish = false;
}
return true;
});
// console.log("finish", finish);
if (finish) {
this.equipment.filter((item, index) => {
if (index >= this.imgIndex) {
// console.log("iconImgUrl", this.equipment[index].iconImgUrl);
this.getImgInfo(
this.$baseUrl + item.iconImgUrl,
this.iconMaxWidth,
this.iconMaxHeight,
"iconWidth",
"iconHeight",
true,
"arrIcon"
);
}
// console.log("22filter", index);
return true;
});
}
}
this.iconImgUrl = JSON.parse(
JSON.stringify(this.$baseUrl + this.equipment[0].iconImgUrl)
);
// console.log("imgUrl", this.imgUrl);
// console.log("equipment", this.equipment);
// //禁止鼠标右键
// document.oncontextmenu = function() {
// return false;
// };
},
};
</script>
<style lang="less">
.preview-popover {
background-color: #d3edf7dd;
padding: 12px;
.popper__arrow::after {
border-bottom-color: #d3edf7dd !important;
}
.describe {
p {
padding-bottom: 5px;
&:last-child {
padding-bottom: 0px;
}
}
.describe-top {
// color: sandybrown;
// color: red;
color: rgb(21, 110, 110);
}
.describe-center {
color: rgb(79, 21, 206);
}
.describe-bottom {
color: rgb(30, 31, 29);
}
}
}
</style>
<style lang="less" scoped>
.pop-up-main {
width: 100%;
height: calc(100vh - 32vh);
overflow-y:hidden ;
.paln-box {
width: 100%;
height: 100%;
position: relative;
.movableItem {
position: absolute;
// top: 75%;
left: 50%;
transform: translate(-50%, -15%);
img,
.svg {
z-index: 1;
width: 100%;
height: 100%;
}
.equipment {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
z-index: 2;
font-size: 40px;
// color: red;
// background: blue;
zoom: 1;
}
}
.shuaxin {
position: absolute;
z-index: 2;
font-size: 40px;
top: 20px;
left: 20px;
cursor: pointer;
&:hover {
color: yellowgreen;
}
}
.equipment {
color: white;
}
&/deep/.el-button {
z-index: 2;
position: absolute;
bottom: 60px;
right: 20px;
width: 60px;
height: 35px;
span {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
i {
display: inline-block;
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
}
}
}
}
</style>