| 1 |
- {"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"]}]}
|
