|
@@ -96,13 +96,13 @@ export default {
|
|
|
isChange: true,
|
|
|
// 图片显示默认大小
|
|
|
width: "1600px",
|
|
|
- height: "800px",
|
|
|
+ height: "0",
|
|
|
// 可缩小倍数,为空则可无限缩小
|
|
|
minification: 3,
|
|
|
// 可放大倍数 为空则可无限放大
|
|
|
magnification: "",
|
|
|
- bigMaxWidth: 1600,
|
|
|
- bigMaxHeight: 800,
|
|
|
+ bigMaxWidth: 1100,
|
|
|
+ bigMaxHeight: 1200,
|
|
|
|
|
|
// 小图标信息
|
|
|
iconImgUrl: "",
|
|
@@ -127,7 +127,7 @@ export default {
|
|
|
arr,
|
|
|
num = 0
|
|
|
) {
|
|
|
- var img = new Image();
|
|
|
+ let img = new Image();
|
|
|
|
|
|
// img.src = imgUrl;
|
|
|
img = document.getElementsByClassName("svg");
|
|
@@ -222,15 +222,15 @@ export default {
|
|
|
},
|
|
|
// 缩放
|
|
|
rollImg() {
|
|
|
- var that = this;
|
|
|
- // var oImg = document.getElementsByClassName("movableItem")[0];
|
|
|
- var oImg = this.$refs.bigImage;
|
|
|
+ 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);
|
|
|
- var _this = this;
|
|
|
+ let _this = this;
|
|
|
|
|
|
function fnWheel(obj, fncc) {
|
|
|
obj.onmousewheel = fn;
|
|
@@ -239,8 +239,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
function fn(ev) {
|
|
|
- var oEvent = ev || window.event;
|
|
|
- var down = true;
|
|
|
+ let oEvent = ev || window.event;
|
|
|
+ let down = true;
|
|
|
if (oEvent.detail) {
|
|
|
down = oEvent.detail > 0;
|
|
|
} else {
|
|
@@ -256,17 +256,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
fnWheel(oImg, function (down, oEvent) {
|
|
|
- var oldWidth = this.offsetWidth;
|
|
|
- var oldHeight = this.offsetHeight;
|
|
|
- var oldLeft = this.offsetLeft;
|
|
|
- var oldTop = this.offsetTop;
|
|
|
- var parent = oEvent.path[2];
|
|
|
+ let oldWidth = this.offsetWidth;
|
|
|
+ let oldHeight = this.offsetHeight;
|
|
|
+ let oldLeft = this.offsetLeft;
|
|
|
+ let oldTop = this.offsetTop;
|
|
|
+ // let parent = oEvent.path[2];
|
|
|
// 获取父元素距离页面可视区域的位置
|
|
|
- var parentLeft = parent.getBoundingClientRect().left;
|
|
|
- var parentTop = parent.getBoundingClientRect().top;
|
|
|
+ // let parentLeft = parent.getBoundingClientRect().left;
|
|
|
+ // let parentTop = parent.getBoundingClientRect().top;
|
|
|
+ let parentLeft = oEvent.clientX;
|
|
|
+ let parentTop = oEvent.clientY;
|
|
|
// 比例 = (点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left)/ 本身宽度
|
|
|
- var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
|
|
|
- var scaleY = (oEvent.clientY - parentTop - oldTop) / oldHeight;
|
|
|
+ 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];
|
|
@@ -314,8 +316,8 @@ export default {
|
|
|
that.width = parseInt(this.offsetWidth * 1.1) + "px";
|
|
|
that.height = parseInt(this.offsetHeight * 1.1) + "px";
|
|
|
}
|
|
|
- var newWidth = this.offsetWidth;
|
|
|
- var newHeight = this.offsetHeight;
|
|
|
+ let newWidth = this.offsetWidth;
|
|
|
+ let newHeight = this.offsetHeight;
|
|
|
|
|
|
// 新的相对位置left = 原先的相对位置left - 比例 *(本身新的宽度-旧的宽度)
|
|
|
this.style.left =
|
|
@@ -328,12 +330,12 @@ export default {
|
|
|
// },
|
|
|
//拖拽
|
|
|
drag(ev) {
|
|
|
- // var ie = document.all;
|
|
|
- var nn6 = document.getElementById && !document.all;
|
|
|
- var isdrag = false;
|
|
|
- var y, x;
|
|
|
- var nTY, nTX;
|
|
|
- var oDragObj;
|
|
|
+ // 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) {
|
|
@@ -347,8 +349,8 @@ export default {
|
|
|
|
|
|
function initDrag(e) {
|
|
|
// console.log("点击图片initDrag");
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var topElement = "HTML";
|
|
|
+ let oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
+ let topElement = "HTML";
|
|
|
while (
|
|
|
oDragHandle.tagName != topElement &&
|
|
|
oDragHandle.className != "movableItem"
|
|
@@ -361,8 +363,10 @@ export default {
|
|
|
isdrag = true;
|
|
|
oDragObj = oDragHandle;
|
|
|
// 父元素宽高
|
|
|
- let width = e.path[2].offsetWidth;
|
|
|
- let height = e.path[2].offsetHeight;
|
|
|
+ // let width = e.path[2].offsetWidth;
|
|
|
+ // let height = e.path[2].offsetHeight;
|
|
|
+ let width = e.offsetX;
|
|
|
+ let height = e.offsetY;
|
|
|
// 这里判断第一次获取不到style 样式 默认为 居中50%
|
|
|
if (oDragObj.style.top == "") {
|
|
|
nTY = 0;
|
|
@@ -384,8 +388,8 @@ export default {
|
|
|
isdrag = false;
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var topElement = "HTML";
|
|
|
+ let oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
+ let topElement = "HTML";
|
|
|
while (
|
|
|
oDragHandle.tagName != topElement &&
|
|
|
oDragHandle.className != "movableItem"
|
|
@@ -405,13 +409,13 @@ export default {
|
|
|
// window.event ? (window.event.cancelBubble = true) : ev.stopPropagation();
|
|
|
},
|
|
|
// 拖拽标记
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
+ // eslint-disable-next-line no-unused-lets
|
|
|
dragSign(ev, key) {
|
|
|
- var nn6 = document.getElementById && !document.all;
|
|
|
- var isdrag = false;
|
|
|
- var y, x;
|
|
|
- var nTY, nTX;
|
|
|
- var oDragObj;
|
|
|
+ let nn6 = document.getElementById && !document.all;
|
|
|
+ let isdrag = false;
|
|
|
+ let y, x;
|
|
|
+ let nTY, nTX;
|
|
|
+ let oDragObj;
|
|
|
let _this = this;
|
|
|
|
|
|
function moveMouse(e) {
|
|
@@ -422,7 +426,7 @@ export default {
|
|
|
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-vars
|
|
|
+ // eslint-disable-next-line no-unused-lets
|
|
|
let height = heightItem[0];
|
|
|
let top =
|
|
|
((nn6
|
|
@@ -450,8 +454,8 @@ export default {
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
function initDrag(e) {
|
|
|
// console.log("_this", _this);
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var topElement = "HTML";
|
|
|
+ let oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
+ let topElement = "HTML";
|
|
|
while (
|
|
|
oDragHandle.tagName != topElement &&
|
|
|
oDragHandle.className.indexOf("equipment") == -1
|
|
@@ -496,8 +500,8 @@ export default {
|
|
|
isdrag = false;
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var topElement = "HTML";
|
|
|
+ let oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
+ let topElement = "HTML";
|
|
|
while (
|
|
|
oDragHandle.tagName != topElement &&
|
|
|
oDragHandle.className != "equipment"
|
|
@@ -642,7 +646,7 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
.pop-up-main {
|
|
|
width: 100%;
|
|
|
- height: calc(100vh - 12vh);
|
|
|
+ height: calc(100vh - 13vh);
|
|
|
overflow-y: hidden;
|
|
|
|
|
|
.paln-box {
|
|
@@ -654,7 +658,7 @@ export default {
|
|
|
position: absolute;
|
|
|
// top: 75%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%, 0%);
|
|
|
+ transform: translate(-50%, -15%);
|
|
|
|
|
|
img,
|
|
|
.svg {
|
|
@@ -693,7 +697,7 @@ export default {
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
- .el-button {
|
|
|
+ &/deep/.el-button {
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
bottom: 60px;
|
|
@@ -719,11 +723,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-// body {
|
|
|
-// height: 100%;
|
|
|
-// overflow: hidden;
|
|
|
-// margin: 0;
|
|
|
-// padding: 0;
|
|
|
-// }
|
|
|
</style>
|