niucloud-admin/niucloud/public/admin/assets/edit-hot-area-1996b07b.js
2023-10-28 12:23:42 +08:00

2 lines
8.8 KiB
JavaScript

import"./base-0e92f4db.js";import{a as K,E as Q}from"./el-form-item-c2dd2ffe.js";import{E as ie}from"./el-overlay-3eff2fc5.js";/* empty css */import{_ as ae}from"./index-fac59425.js";import{_ as ne}from"./index.vue_vue_type_script_setup_true_lang-b3e92eec.js";import{d as I,v as j}from"./event-a537c4cb.js";import{t as v}from"./index-2d1c7ba3.js";import{c as Z}from"./common-46715e7e.js";import{a as P}from"./index-e9d9b1a1.js";import{E as fe}from"./index-e09a20f5.js";import{d as ee,c as re,r as N,M as pe,b as L,e as X,f as u,g as te,u as c,v as F,x as V,q as w,p as Y,h as q,F as U,t as R,C as G,au as de,av as ce,L as J}from"./runtime-core.esm-bundler-67034826.js";import{_ as ue}from"./_plugin-vue_export-helper-c27b6911.js";import{_ as me}from"./index-48a4e5ef.js";import{u as he}from"./diy-1d4c061a.js";const _e=W=>(de("data-v-7b0ed719"),W=W(),ce(),W),ge={key:0},ve={class:"text-primary p-[4px]"},xe={key:1},be={class:"flex"},ye=["id","onMousedown"],we=_e(()=>u("span",{class:"p-[4px]"},"|",-1)),ke=["onMousedown"],Te=["onMousedown"],Ce=["onMousedown"],Me=["onMousedown"],Ve={class:"mb-[10px] text-lg text-black"},He={class:"overflow-y-auto max-h-[300px]"},Le={key:0,class:"mb-[16px]"},Xe={class:"flex items-center"},Ye={class:"dialog-footer"},Se=ee({__name:"index",props:{modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(W,{expose:z,emit:b}){const O=W,S=re({get(){return O.modelValue},set(x){b("update:modelValue",x)}}),g=N(!1),m=N(400),T=N(400),$=N(4),p=pe([]),B=()=>{let x=p.length%$.value*100,a=Math.floor(p.length/$.value)*100;a>=m.value&&(a=0,x=0),p.push({left:x,top:a,width:100,height:100,unit:"px",link:{name:""}})},A=(x,a)=>{let d=document.getElementById("box_"+a),o=x.clientX-d.offsetLeft,H=x.clientY-d.offsetTop;document.onmousemove=function(_){d.style.left=_.clientX-o+"px",d.style.top=_.clientY-H+"px",_.clientX-o<0&&(d.style.left=0),_.clientX-o>m.value-d.offsetWidth&&(d.style.left=m.value-d.offsetWidth+"px"),_.clientY-H<0&&(d.style.top=0),_.clientY-H>T.value-d.offsetHeight&&(d.style.top=T.value-d.offsetHeight+"px"),p[a].left=d.offsetLeft,p[a].top=d.offsetTop,p[a].width=d.offsetWidth,p[a].height=d.offsetHeight,p[a].unit="px"},document.onmouseup=function(_){document.onmousemove=null}},D=(x,a)=>{var d=x;d.stopPropagation();let o=document.getElementById("box_"+a),H=x.target.className;var _=o.offsetWidth,E=o.offsetHeight,k=d.clientX,r=d.clientY,f=o.offsetLeft,n=o.offsetTop,l=50,s=50;document.onmousemove=function(se){var h=se;if(H=="box1"){let e=_-(h.clientX-k),C=m.value,t=E-(h.clientY-r),M=T.value-n,i=f+(h.clientX-k),y=n+(h.clientY-r);e<l&&(e=l),e>C&&(e=C),t<s&&(t=s),t>M&&(t=M),f==0&&n==0?e==l&&t==s?(i=l,y=s):e==l&&t>s?i=l:e>l&&t==s&&(y=s):f==0&&n>0?e==l&&t==s||e==l&&t>s?(i=l,y=o.offsetTop):e>l&&t==s&&(y=o.offsetTop):f>0&&n==0?e==l&&t==s?(i=o.offsetLeft,y=o.offsetTop):e==l&&t>s?(i=o.offsetLeft,y=0):e>l&&t==s&&(y=o.offsetTop):f>0&&n>0&&(e==l&&t==s||e==l&&t>s?(i=o.offsetLeft,y=o.offsetTop):e>l&&t==s&&(y=o.offsetTop)),i<0&&(i=0,e=_-(h.clientX-k)+(f+(h.clientX-k))),y<0&&(y=0,t=n+(h.clientY-r)+(E-(h.clientY-r))),o.style.width=e+"px",o.style.height=t+"px",o.style.left=i+"px",o.style.top=y+"px"}else if(H=="box2"){let e=_+(h.clientX-k),C=m.value-f,t=E-(h.clientY-r),M=T.value-n,i=n+(h.clientY-r);e<l&&(e=l),e>C&&(e=C),t<s&&(t=s),t>M&&(t=M),f==0&&n==0?e==l&&t==s?i=s:e==l&&t>s||e>l&&t==s&&(i=s):f==0&&n>0?(e==l&&t==s||e==l&&t>s||e>l&&t==s)&&(i=o.offsetTop):f>0&&n==0?e==l&&t==s?i=o.offsetTop:e==l&&t>s?i=0:e>l&&t==s&&(i=o.offsetTop):f>0&&n>0&&(e==l&&t==s||e==l&&t>s||e>l&&t==s)&&(i=o.offsetTop),i<0&&(i=0,t=n+(h.clientY-r)+(E-(h.clientY-r))),o.style.width=e+"px",o.style.height=t+"px",o.style.top=i+"px"}else if(H=="box3"){let e=_-(h.clientX-k),C=m.value,t=E+(h.clientY-r),M=T.value-n,i=f+(h.clientX-k);e<l&&(e=l),e>C&&(e=C),t<s&&(t=s),t>M&&(t=M),f==0&&n==0||f==0&&n>0?(e==l&&t==s||e==l&&t>s)&&(i=l):f>0&&n==0?(e==l&&t==s||e==l&&t>s)&&(i=o.offsetLeft):f>0&&n>0&&(e==l&&t==s||e==l&&t>s)&&(i=o.offsetLeft),i<0&&(i=0,e=_-(h.clientX-k)+(f+(h.clientX-k))),o.style.width=e+"px",o.style.height=t+"px",o.style.left=i+"px"}else if(H=="box4"){let e=_+(h.clientX-k),C=m.value-f,t=E+(h.clientY-r),M=T.value-n;e<l&&(e=l),e>C&&(e=C),t<s&&(t=s),t>M&&(t=M),o.style.width=e+"px",o.style.height=t+"px"}p[a].left=o.offsetLeft,p[a].top=o.offsetTop,p[a].width=o.offsetWidth,p[a].height=o.offsetHeight,p[a].unit="px"},document.onmouseup=function(){document.onmousemove=null,document.onmouseup=null}},oe=()=>{if(!S.value.imageUrl){P({type:"warning",message:`${v("imageUrlTip")}`});return}Object.keys(S.value.heatMapData).length?p.splice(0,p.length,...S.value.heatMapData):(p.splice(0,p.length),B()),g.value=!0},le=()=>{var x=!0;for(let a=0;a<p.length;a++)if(!p[a].link.title){P({type:"warning",message:v("selectedHotArea")+(a+1)+v("hotAreaLink")}),x=!1;break}x&&(p.forEach((a,d)=>{var o=document.getElementById("box_"+d);a.width=parseFloat(o.offsetWidth/m.value*100).toFixed(2),a.height=parseFloat(o.offsetHeight/T.value*100).toFixed(2),a.left=parseFloat(o.offsetLeft/m.value*100).toFixed(2),a.top=parseFloat(o.offsetTop/T.value*100).toFixed(2),a.unit="%"}),S.value.heatMapData=p,g.value=!1)};return z({showDialog:g}),(x,a)=>{const d=ne,o=ae,H=K,_=fe,E=Q,k=ie;return L(),X("div",null,[u("div",{onClick:oe,class:"cursor-pointer"},[te(x.$slots,"default",{},()=>[c(S).heatMapData.length?(L(),X("div",ge,[F(V(c(v)("selected")),1),u("span",ve,V(c(S).heatMapData.length),1),F(V(c(v)("selectedAfterHotArea")),1)])):(L(),X("div",xe,V(c(v)("clickSet")),1))],!0)]),w(k,{modelValue:g.value,"onUpdate:modelValue":a[1]||(a[1]=r=>g.value=r),title:c(v)("hotAreaSet"),width:"45%","close-on-press-escape":!1,"destroy-on-close":!0,"close-on-click-modal":!1},{footer:Y(()=>[u("span",Ye,[w(_,{onClick:a[0]||(a[0]=r=>g.value=!1)},{default:Y(()=>[F(V(c(v)("cancel")),1)]),_:1}),w(_,{type:"primary",onClick:le},{default:Y(()=>[F(V(c(v)("confirm")),1)]),_:1})])]),default:Y(()=>[u("div",be,[u("div",{class:"content-box relative bg-cover bg-gray-100 border border-dashed border-gray-500",style:q({backgroundImage:"url("+c(Z)(c(S).imageUrl)+")",width:m.value+"px",height:T.value+"px"})},[(L(!0),X(U,null,R(p,(r,f)=>(L(),X("div",{id:"box_"+f,class:"area-box cursor-move border border-solid border-[#ccc] w-[100px] h-[100px] absolute top-0 left-0 select-none p-[5px]",style:q({left:r.left+r.unit,top:r.top+r.unit,width:r.width+r.unit,height:r.height+r.unit}),onMousedown:n=>A(n,f)},[u("span",null,V(f+1),1),r.link.title?(L(),X(U,{key:0},[we,u("span",null,V(r.link.title),1)],64)):G("",!0),u("span",{class:"box1",onMousedown:I(n=>D(n,f),["stop"])},null,40,ke),u("span",{class:"box2",onMousedown:I(n=>D(n,f),["stop"])},null,40,Te),u("span",{class:"box3",onMousedown:I(n=>D(n,f),["stop"])},null,40,Ce),u("span",{class:"box4",onMousedown:I(n=>D(n,f),["stop"])},null,40,Me)],44,ye))),256))],4),w(E,{"label-width":"80px",class:"pl-[20px]"},{default:Y(()=>[u("h3",Ve,V(c(v)("hotAreaManage")),1),u("div",He,[(L(!0),X(U,null,R(p,(r,f)=>(L(),X(U,null,[r?(L(),X("div",Le,[w(H,{label:c(v)("hotArea")+(f+1)},{default:Y(()=>[u("div",Xe,[w(d,{modelValue:r.link,"onUpdate:modelValue":n=>r.link=n},null,8,["modelValue","onUpdate:modelValue"]),w(o,{class:"del cursor-pointer mx-[10px]",name:"element-CircleCloseFilled",color:"#bbb",size:"20px",onClick:n=>p.splice(f,1)},null,8,["onClick"])])]),_:2},1032,["label"])])):G("",!0)],64))),256))]),w(_,{type:"primary",plain:"",class:"ml-[80px]",onClick:B},{default:Y(()=>[F(V(c(v)("addHotArea")),1)]),_:1})]),_:1})])]),_:1},8,["modelValue","title"])])}}});const Ee=ue(Se,[["__scopeId","data-v-7b0ed719"]]),We={class:"content-wrap"},$e={class:"edit-attr-item-wrap"},Ae={class:"mb-[10px]"},Fe={ref:"imageBoxRef"},Ue={class:"item-wrap p-[10px] pb-0 relative border border-dashed border-gray-300 mb-[16px]"},Be={class:"style-wrap"},De=ee({__name:"edit-hot-area",setup(W,{expose:z}){const b=he();b.editComponent.ignore=[],b.editComponent.verify=g=>{var m={code:!0,message:""};return b.value[g].imageUrl===""&&(m.code=!1,m.message=v("imageUrlTip")),m};const O=g=>{S()},S=()=>{let g=new Image;g.src=Z(b.editComponent.imageUrl),g.onload=async()=>{b.editComponent.imgWidth=g.width,b.editComponent.imgHeight=g.height}};return z({}),(g,m)=>{const T=me,$=K,p=Ee,B=Q;return L(),X(U,null,[J(u("div",We,[u("div",$e,[u("h3",Ae,V(c(v)("hotAreaSet")),1),w(B,{"label-width":"80px",class:"px-[10px]"},{default:Y(()=>[u("div",Fe,[u("div",Ue,[w($,{label:c(v)("hotAreaBackground")},{default:Y(()=>[w(T,{modelValue:c(b).editComponent.imageUrl,"onUpdate:modelValue":m[0]||(m[0]=A=>c(b).editComponent.imageUrl=A),limit:1,onChange:O},null,8,["modelValue"])]),_:1},8,["label"]),w($,{label:c(v)("hotAreaSet")},{default:Y(()=>[w(p,{modelValue:c(b).editComponent,"onUpdate:modelValue":m[1]||(m[1]=A=>c(b).editComponent=A)},null,8,["modelValue"])]),_:1},8,["label"])])],512)]),_:1})])],512),[[j,c(b).editTab=="content"]]),J(u("div",Be,[te(g.$slots,"style")],512),[[j,c(b).editTab=="style"]])],64)}}}),ot=Object.freeze(Object.defineProperty({__proto__:null,default:De},Symbol.toStringTag,{value:"Module"}));export{ot as _};