{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\hotpotModal\\AreaBox.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\hotpotModal\\AreaBox.vue","mtime":1761185179970},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQppbXBvcnQgbGlua2FkZHJlc3MgZnJvbSAnQC9jb21wb25lbnRzL2xpbmthZGRyZXNzJzsNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ0FyZWFCb3gnLA0KICBjb21wb25lbnRzOiB7IGxpbmthZGRyZXNzIH0sDQogIHByb3BzOiB7DQogICAgYXJlYUluaXQ6IHsNCiAgICAgIHR5cGU6IE9iamVjdCwNCiAgICAgIGRlZmF1bHQ6ICgpID0+IHt9LA0KICAgIH0sDQogICAgYXJlYURhdGFJbmRleDogew0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogbnVsbCwNCiAgICB9LA0KICAgIGxpbms6IHsNCiAgICAgIHR5cGU6IFN0cmluZywNCiAgICAgIGRlZmF1bHQ6ICcnLA0KICAgIH0sDQogICAgdGl0bGU6IHsNCiAgICAgIHR5cGU6IFN0cmluZywNCiAgICAgIGRlZmF1bHQ6ICcnLA0KICAgIH0sDQogICAgdHlwZTogew0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogLTEsDQogICAgfSwNCiAgICBwYXJlbnRXaWR0aDogew0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogMCwNCiAgICB9LA0KICAgIHBhcmVudEhlaWdodDogew0KICAgICAgdHlwZTogTnVtYmVyLA0KICAgICAgZGVmYXVsdDogMCwNCiAgICB9LA0KICB9LA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICBhcmVhVGl0bGU6ICcnLA0KICAgICAgdXJsOiAnJywNCiAgICAgIGVkaXRCb3hTaG93OiBmYWxzZSwNCiAgICAgIHByb21wdFRleHQ6ICflj4zlh7vorr7nva7ng63ljLonLA0KICAgICAgLy8gYm945pON5L2c5Yid5aeL54K5DQogICAgICBtb3ZlOiB7DQogICAgICAgIC8vIOaLluWKqA0KICAgICAgICBzdGFydFg6IDAsDQogICAgICAgIHN0YXJZOiAwLA0KICAgICAgICAvLyDlvaLlj5gNCiAgICAgICAgc3RhcnQxWDogMCwNCiAgICAgICAgc3RhcnQxWTogMCwNCiAgICAgIH0sDQogICAgfTsNCiAgfSwNCiAgY29tcHV0ZWQ6IHsNCiAgICBpc1NldCgpIHsNCiAgICAgIHJldHVybiAhIXRoaXMubGluazsNCiAgICB9LA0KICB9LA0KICB3YXRjaDogew0KICAgIHRpdGxlKHZhbCkgew0KICAgICAgdGhpcy5hcmVhVGl0bGUgPSB2YWw7DQogICAgfSwNCiAgICBsaW5rKHZhbCkgew0KICAgICAgdGhpcy51cmwgPSB2YWw7DQogICAgfSwNCiAgfSwNCiAgbW91bnRlZCgpIHsNCiAgICB0aGlzLnVybCA9IHRoaXMubGluazsNCiAgfSwNCiAgbWV0aG9kczogew0KICAgIC8vIOWIoOmZpA0KICAgIGRlbCgpIHsNCiAgICAgIHRoaXMuJGVtaXQoJ2RlbEFyZWFCb3gnLCB0aGlzLmFyZWFEYXRhSW5kZXgpOw0KICAgIH0sDQogICAgLy8g5re75Yqg572R5Z2ADQogICAgYWRkVVJMKCkgew0KICAgICAgaWYgKCF0aGlzLnVybCkgew0KICAgICAgICB0aGlzLiRtZXNzYWdlLmVycm9yKCfor7fovpPlhaXpk77mjqUnKTsNCiAgICAgIH0gZWxzZSB7DQogICAgICAgIHRoaXMuJGVtaXQoJ2FkZFVSTCcsIHRoaXMuYXJlYURhdGFJbmRleCwgdGhpcy51cmwpOw0KICAgICAgICB0aGlzLmVkaXRCb3hTaG93ID0gZmFsc2U7DQogICAgICB9DQogICAgfSwNCiAgICAvLyDlvIDlp4vmi5bliqjpmZDliLbojIPlm7QNCiAgICBtb3VzZURvd25MaW50KGUpIHsNCiAgICAgIGUucHJldmVudERlZmF1bHQoKTsNCiAgICAgIHRoaXMuc3RhclggPSBlLmNsaWVudFg7DQogICAgICB0aGlzLnN0YXJZID0gZS5jbGllbnRZOw0KICAgICAgY29uc3QgY2hpbGRyZW5EaXYgPSBlLnRhcmdldCB8fCBlOw0KICAgICAgLy/ojrflj5blrZDlhYPntKDnmoTlrr3pq5gNCiAgICAgIGxldCBjaGlsZHJlbldpZHRoID0gY2hpbGRyZW5EaXYuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkud2lkdGg7DQogICAgICBsZXQgY2hpbGRyZW5IaWdodCA9IGNoaWxkcmVuRGl2LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodDsNCiAgICAgIC8vIGNvbnNvbGUubG9nKGNoaWxkcmVuV2lkdGgsIGNoaWxkcmVuSGlnaHQpDQogICAgICBpZiAoIWRvY3VtZW50Lm9ubW91c2Vtb3ZlKSB7DQogICAgICAgIGNvbnN0IGluaXRYID0gdGhpcy5hcmVhSW5pdC5zdGFyWDsNCiAgICAgICAgY29uc3QgaW5pdFkgPSB0aGlzLmFyZWFJbml0LnN0YXJZOw0KICAgICAgICBkb2N1bWVudC5vbm1vdXNlbW92ZSA9IChldikgPT4gew0KICAgICAgICAgIC8vIOenu+WKqOS9jee9rg0KICAgICAgICAgIGxldCBuTGVmdCA9IGluaXRYICsgZXYuY2xpZW50WCAtIHRoaXMuc3Rhclg7DQogICAgICAgICAgbGV0IG5Ub3AgPSBpbml0WSArIGV2LmNsaWVudFkgLSB0aGlzLnN0YXJZOw0KICAgICAgICAgIG5MZWZ0ID0gbkxlZnQgPD0gMCA/IDAgOiBuTGVmdDsgLy/liKTmlq3lt6bovrnmmK/lkKbotornlYwNCiAgICAgICAgICBuVG9wID0gblRvcCA8PSAwID8gMCA6IG5Ub3A7IC8v5Yik5pat5LiK6L655piv5ZCm6LaK55WMDQogICAgICAgICAgbGV0IG5SaWdodCA9IG5MZWZ0ICsgY2hpbGRyZW5XaWR0aDsNCiAgICAgICAgICBsZXQgbkJvdHRvbSA9IG5Ub3AgKyBjaGlsZHJlbkhpZ2h0Ow0KICAgICAgICAgIC8vIOWIpOaWreWPs+i+ueaYr+WQpui2iueVjA0KICAgICAgICAgIGlmIChuUmlnaHQgPj0gdGhpcy5wYXJlbnRXaWR0aCkgew0KICAgICAgICAgICAgbkxlZnQgPSB0aGlzLnBhcmVudFdpZHRoIC0gY2hpbGRyZW5XaWR0aDsNCiAgICAgICAgICB9DQogICAgICAgICAgLy8g5Yik5pat5LiL6L655piv5ZCm6LaK55WMDQogICAgICAgICAgaWYgKG5Cb3R0b20gPj0gdGhpcy5wYXJlbnRIZWlnaHQpIHsNCiAgICAgICAgICAgIG5Ub3AgPSB0aGlzLnBhcmVudEhlaWdodCAtIGNoaWxkcmVuSGlnaHQ7DQogICAgICAgICAgfQ0KICAgICAgICAgIHRoaXMuYXJlYUluaXQuc3RhclggPSBuTGVmdDsNCiAgICAgICAgICB0aGlzLmFyZWFJbml0LnN0YXJZID0gblRvcDsNCiAgICAgICAgfTsNCiAgICAgIH0NCiAgICB9LA0KICAgIC8vIOW8gOWni+aLluWKqOS4jemZkOWItuiMg+WbtA0KICAgIG1vdXNlRG93bihlKSB7DQogICAgICBlLnByZXZlbnREZWZhdWx0KCk7DQogICAgICB0aGlzLnN0YXJYID0gZS5jbGllbnRYOw0KICAgICAgdGhpcy5zdGFyWSA9IGUuY2xpZW50WTsNCiAgICAgIGlmICghZG9jdW1lbnQub25tb3VzZW1vdmUpIHsNCiAgICAgICAgY29uc3QgaW5pdFggPSB0aGlzLmFyZWFJbml0LnN0YXJYOw0KICAgICAgICBjb25zdCBpbml0WSA9IHRoaXMuYXJlYUluaXQuc3Rhclk7DQogICAgICAgIGRvY3VtZW50Lm9ubW91c2Vtb3ZlID0gKGV2KSA9PiB7DQogICAgICAgICAgdGhpcy5hcmVhSW5pdC5zdGFyWCA9IGluaXRYICsgZXYuY2xpZW50WCAtIHRoaXMuc3Rhclg7DQogICAgICAgICAgdGhpcy5hcmVhSW5pdC5zdGFyWSA9IGluaXRZICsgZXYuY2xpZW50WSAtIHRoaXMuc3Rhclk7DQogICAgICAgIH07DQogICAgICB9DQogICAgfSwNCiAgICAvLyDnu5PmnZ/mi5bliqgv5Y+Y5b2iDQogICAgbW91c2VVcCgpIHsNCiAgICAgIGRvY3VtZW50Lm9ubW91c2Vtb3ZlID0gbnVsbDsNCiAgICB9LA0KICAgIC8vIOW9ouWPmOW8gOWniw0KICAgIHNoYXBlRG93bihlKSB7DQogICAgICBlLnByZXZlbnREZWZhdWx0KCk7DQoNCiAgICAgIHRoaXMuc3RhcjFYID0gZS5jbGllbnRYOw0KICAgICAgdGhpcy5zdGFyMVkgPSBlLmNsaWVudFk7DQogICAgICAvLyDojrflj5blt6bpg6jlkozlupXpg6jnmoTlgY/np7vph48NCg0KICAgICAgaWYgKCFkb2N1bWVudC5vbm1vdXNlbW92ZSkgew0KICAgICAgICBjb25zdCBpbml0WCA9IHRoaXMuYXJlYUluaXQuYXJlYVdpZHRoOw0KICAgICAgICBjb25zdCBpbml0WSA9IHRoaXMuYXJlYUluaXQuYXJlYUhlaWdodDsNCiAgICAgICAgZG9jdW1lbnQub25tb3VzZW1vdmUgPSAoZXYpID0+IHsNCiAgICAgICAgICB0aGlzLmFyZWFJbml0LmFyZWFXaWR0aCA9IGluaXRYICsgZXYuY2xpZW50WCAtIHRoaXMuc3RhcjFYOw0KICAgICAgICAgIHRoaXMuYXJlYUluaXQuYXJlYUhlaWdodCA9IGluaXRZICsgZXYuY2xpZW50WSAtIHRoaXMuc3RhcjFZOw0KICAgICAgICB9Ow0KICAgICAgfQ0KICAgIH0sDQogICAgZ2V0TGluaygpIHsNCiAgICAgIHRoaXMuJHJlZnMubGlua2FkZHJlcy5tb2RhbHMgPSB0cnVlOw0KICAgIH0sDQogICAgbGlua1VybChlKSB7DQogICAgICB0aGlzLnVybCA9IGU7DQogICAgfSwNCiAgfSwNCn07DQo="},{"version":3,"sources":["AreaBox.vue"],"names":[],"mappings":";AAgDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"AreaBox.vue","sourceRoot":"src/components/hotpotModal","sourcesContent":["<template>\r\n  <div\r\n    :style=\"{\r\n      width: areaInit.areaWidth + 'px',\r\n      height: areaInit.areaHeight + 'px',\r\n      left: areaInit.starX + 'px',\r\n      top: areaInit.starY + 'px',\r\n    }\"\r\n    class=\"areaBox\"\r\n    @dblclick=\"editBoxShow = true\"\r\n    @mousedown.left.stop=\"mouseDownLint($event)\"\r\n    @mouseup.left.stop=\"mouseUp($event)\"\r\n  >\r\n    <div class=\"prompt-text\">\r\n      <div class=\"prompt-item num\">热区 {{ areaInit.number }}</div>\r\n      <div class=\"prompt-item\" :style=\"{ color: isSet ? '#2d8cf0' : '#f00' }\">\r\n        {{ isSet ? '(已设置)' : '(未设置)' }}\r\n      </div>\r\n    </div>\r\n    <!--删除-->\r\n    <div class=\"del\" @click.stop=\"del()\">\r\n      <i class=\"el-icon-close\" size=\"16\" />\r\n    </div>\r\n    <!--形变点-->\r\n    <div class=\"shape\" @mousedown.left.stop=\"shapeDown($event)\" @mouseup.left.stop=\"mouseUp($event)\" />\r\n    <!--编辑框-->\r\n\r\n    <div>\r\n      <el-dialog :visible.sync=\"editBoxShow\" title=\"设置热区\" width=\"560px\" append-to-body>\r\n        <div class=\"area-set\">\r\n          <div class=\"area-label\">热区跳转链接：</div>\r\n          <div class=\"area-content\">\r\n            <el-input v-model=\"url\" style=\"width: 100%\" placeholder=\"选择跳转链接\">\r\n              <i class=\"el-icon-link\" slot=\"suffix\" @click=\"getLink()\" />\r\n            </el-input>\r\n          </div>\r\n        </div>\r\n        <span slot=\"footer\" class=\"dialog-footer\">\r\n          <el-button @click.stop=\"editBoxShow = false\">取 消</el-button>\r\n          <el-button type=\"primary\" @click.stop=\"addURL\">确 定</el-button>\r\n        </span>\r\n      </el-dialog>\r\n      <linkaddress ref=\"linkaddres\" @linkUrl=\"linkUrl\"></linkaddress>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport linkaddress from '@/components/linkaddress';\r\nexport default {\r\n  name: 'AreaBox',\r\n  components: { linkaddress },\r\n  props: {\r\n    areaInit: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n    areaDataIndex: {\r\n      type: Number,\r\n      default: null,\r\n    },\r\n    link: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    title: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    type: {\r\n      type: Number,\r\n      default: -1,\r\n    },\r\n    parentWidth: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    parentHeight: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      areaTitle: '',\r\n      url: '',\r\n      editBoxShow: false,\r\n      promptText: '双击设置热区',\r\n      // box操作初始点\r\n      move: {\r\n        // 拖动\r\n        startX: 0,\r\n        starY: 0,\r\n        // 形变\r\n        start1X: 0,\r\n        start1Y: 0,\r\n      },\r\n    };\r\n  },\r\n  computed: {\r\n    isSet() {\r\n      return !!this.link;\r\n    },\r\n  },\r\n  watch: {\r\n    title(val) {\r\n      this.areaTitle = val;\r\n    },\r\n    link(val) {\r\n      this.url = val;\r\n    },\r\n  },\r\n  mounted() {\r\n    this.url = this.link;\r\n  },\r\n  methods: {\r\n    // 删除\r\n    del() {\r\n      this.$emit('delAreaBox', this.areaDataIndex);\r\n    },\r\n    // 添加网址\r\n    addURL() {\r\n      if (!this.url) {\r\n        this.$message.error('请输入链接');\r\n      } else {\r\n        this.$emit('addURL', this.areaDataIndex, this.url);\r\n        this.editBoxShow = false;\r\n      }\r\n    },\r\n    // 开始拖动限制范围\r\n    mouseDownLint(e) {\r\n      e.preventDefault();\r\n      this.starX = e.clientX;\r\n      this.starY = e.clientY;\r\n      const childrenDiv = e.target || e;\r\n      //获取子元素的宽高\r\n      let childrenWidth = childrenDiv.getBoundingClientRect().width;\r\n      let childrenHight = childrenDiv.getBoundingClientRect().height;\r\n      // console.log(childrenWidth, childrenHight)\r\n      if (!document.onmousemove) {\r\n        const initX = this.areaInit.starX;\r\n        const initY = this.areaInit.starY;\r\n        document.onmousemove = (ev) => {\r\n          // 移动位置\r\n          let nLeft = initX + ev.clientX - this.starX;\r\n          let nTop = initY + ev.clientY - this.starY;\r\n          nLeft = nLeft <= 0 ? 0 : nLeft; //判断左边是否越界\r\n          nTop = nTop <= 0 ? 0 : nTop; //判断上边是否越界\r\n          let nRight = nLeft + childrenWidth;\r\n          let nBottom = nTop + childrenHight;\r\n          // 判断右边是否越界\r\n          if (nRight >= this.parentWidth) {\r\n            nLeft = this.parentWidth - childrenWidth;\r\n          }\r\n          // 判断下边是否越界\r\n          if (nBottom >= this.parentHeight) {\r\n            nTop = this.parentHeight - childrenHight;\r\n          }\r\n          this.areaInit.starX = nLeft;\r\n          this.areaInit.starY = nTop;\r\n        };\r\n      }\r\n    },\r\n    // 开始拖动不限制范围\r\n    mouseDown(e) {\r\n      e.preventDefault();\r\n      this.starX = e.clientX;\r\n      this.starY = e.clientY;\r\n      if (!document.onmousemove) {\r\n        const initX = this.areaInit.starX;\r\n        const initY = this.areaInit.starY;\r\n        document.onmousemove = (ev) => {\r\n          this.areaInit.starX = initX + ev.clientX - this.starX;\r\n          this.areaInit.starY = initY + ev.clientY - this.starY;\r\n        };\r\n      }\r\n    },\r\n    // 结束拖动/变形\r\n    mouseUp() {\r\n      document.onmousemove = null;\r\n    },\r\n    // 形变开始\r\n    shapeDown(e) {\r\n      e.preventDefault();\r\n\r\n      this.star1X = e.clientX;\r\n      this.star1Y = e.clientY;\r\n      // 获取左部和底部的偏移量\r\n\r\n      if (!document.onmousemove) {\r\n        const initX = this.areaInit.areaWidth;\r\n        const initY = this.areaInit.areaHeight;\r\n        document.onmousemove = (ev) => {\r\n          this.areaInit.areaWidth = initX + ev.clientX - this.star1X;\r\n          this.areaInit.areaHeight = initY + ev.clientY - this.star1Y;\r\n        };\r\n      }\r\n    },\r\n    getLink() {\r\n      this.$refs.linkaddres.modals = true;\r\n    },\r\n    linkUrl(e) {\r\n      this.url = e;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.areaBox {\r\n  position: absolute;\r\n  background: rgba(24, 144, 255, 0.5);\r\n  border: 1px dashed var(--prev-color-primary);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: var(--prev-color-primary);\r\n  font-size: 12px;\r\n  cursor: move;\r\n  .prompt-text {\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n    text-align: center;\r\n    align-items: center;\r\n    color: #fff;\r\n    .num {\r\n      font-size: 12px;\r\n    }\r\n    .prompt-item {\r\n      color: #fff;\r\n      margin: 0 2px;\r\n    }\r\n  }\r\n  .del {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 16px;\r\n    height: 16px;\r\n    line-height: 16px;\r\n    font-size: 12px;\r\n    background: var(--prev-color-primary);\r\n    color: #fff;\r\n    text-align: center;\r\n    border-radius: 0 0 0 3px;\r\n    position: absolute;\r\n    right: 7px;\r\n    top: 7px;\r\n    transform: translate3d(50%, -50%, 0);\r\n    cursor: default;\r\n  }\r\n  .del:hover {\r\n    width: 16px;\r\n    height: 16px;\r\n    line-height: 16px;\r\n  }\r\n  .shape {\r\n    position: absolute;\r\n    width: 7px;\r\n    height: 7px;\r\n    background: transparent;\r\n    right: 0;\r\n    bottom: 0;\r\n    transform: translate3d(50%, 50%, 0);\r\n    cursor: nwse-resize;\r\n  }\r\n}\r\n.area-set {\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 16px 0;\r\n}\r\n.area-label {\r\n  width: 100px;\r\n}\r\n.area-content {\r\n  flex: 1;\r\n}\r\n</style>\r\n"]}]}