hb_sis_zhfx/src/views/WindSite/components/previewPicture.vue

<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: "1600px",
      height: "800px",
      // 可缩小倍数,为空则可无限缩小
      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) {
          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;
      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 = 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);
            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;
        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 - 12vh);
  overflow-y: hidden;

  .paln-box {
    width: 100%;
    height: 100%;
    position: relative;

    .movableItem {
      position: absolute;
      // top: 75%;
      left: 50%;
      transform: translate(-50%, 0%);

      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>