|
|
@@ -1,697 +0,0 @@
|
|
|
-<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: "1400px",
|
|
|
- height: "850px",
|
|
|
- // 可缩小倍数,为空则可无限缩小
|
|
|
- minification: 3,
|
|
|
- // 可放大倍数 为空则可无限放大
|
|
|
- magnification: "",
|
|
|
- bigMaxWidth: 1600,
|
|
|
- bigMaxHeight: 800,
|
|
|
-
|
|
|
- // 小图标信息
|
|
|
- iconImgUrl: "",
|
|
|
- iconWidth: "",
|
|
|
- // 存储每个小图标处理好的宽高
|
|
|
- iconHeight: "",
|
|
|
- arrIcon: [],
|
|
|
- iconMaxWidth: 32,
|
|
|
- iconMaxHeight: 32,
|
|
|
- tog: 1,
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取图片大小
|
|
|
- getImgInfo(
|
|
|
- imgUrl,
|
|
|
- MaxWidth,
|
|
|
- MaxHeight,
|
|
|
- StrWidth,
|
|
|
- StrHeight,
|
|
|
- Array = false,
|
|
|
- arr,
|
|
|
- num = 0
|
|
|
- ) {
|
|
|
- var 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() {
|
|
|
- var that = this;
|
|
|
- // var oImg = document.getElementsByClassName("movableItem")[0];
|
|
|
- var oImg = this.$refs.bigImage;
|
|
|
- console.log(
|
|
|
- "length",
|
|
|
- document.getElementsByClassName("movableItem").length
|
|
|
- );
|
|
|
- console.log("oImg", oImg);
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- function fnWheel(obj, fncc) {
|
|
|
- obj.onmousewheel = fn;
|
|
|
- if (obj.addEventListener) {
|
|
|
- obj.addEventListener("DOMMouseScroll", fn, false);
|
|
|
- }
|
|
|
-
|
|
|
- function fn(ev) {
|
|
|
- var oEvent = ev || window.event;
|
|
|
- var 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) {
|
|
|
- var oldWidth = this.offsetWidth;
|
|
|
- var oldHeight = this.offsetHeight;
|
|
|
- var oldLeft = this.offsetLeft;
|
|
|
- var oldTop = this.offsetTop;
|
|
|
- var parent = oEvent.path[2];
|
|
|
- // 获取父元素距离页面可视区域的位置
|
|
|
- var parentLeft = parent.getBoundingClientRect().left;
|
|
|
- var parentTop = parent.getBoundingClientRect().top;
|
|
|
- // 比例 = （点击位置距离可视窗口位置 - 父元素距离可视窗口位置 - 相对定位的left）/ 本身宽度
|
|
|
- var scaleX = (oEvent.clientX - parentLeft - oldLeft) / oldWidth; //比例
|
|
|
- var 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) {
|
|
|
- console.log("缩小");
|
|
|
- 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";
|
|
|
- }
|
|
|
- var newWidth = this.offsetWidth;
|
|
|
- var 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) {
|
|
|
- // var ie = document.all;
|
|
|
- // console.log(ev / 0);
|
|
|
-
|
|
|
- var nn6 = document.getElementById && !document.all;
|
|
|
- var isdrag = false;
|
|
|
- var y, x;
|
|
|
- var nTY, nTX;
|
|
|
- var 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");
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var 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 = parseInt((50 * height) / 100 + 0);
|
|
|
- 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;
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var 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-vars
|
|
|
- dragSign(ev, key) {
|
|
|
- var nn6 = document.getElementById && !document.all;
|
|
|
- var isdrag = false;
|
|
|
- var y, x;
|
|
|
- var nTY, nTX;
|
|
|
- var 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-vars
|
|
|
- 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);
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var 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);
|
|
|
- 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;
|
|
|
- var oDragHandle = nn6 ? e.target : event.srcElement;
|
|
|
- var 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 - 10vh);
|
|
|
- overflow-y:hidden ;
|
|
|
-
|
|
|
- .paln-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .movableItem {
|
|
|
- position: absolute;
|
|
|
- // top: 75%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -10%);
|
|
|
-
|
|
|
- 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%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // body {
|
|
|
- // height: 100%;
|
|
|
- // overflow: hidden;
|
|
|
- // margin: 0;
|
|
|
- // padding: 0;
|
|
|
- // }
|
|
|
-</style>
|
mw_666