You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
8.7 KiB
1 lines
8.7 KiB
import{d as K,q as ne,r as I,n as ie,h as X,c as Y,a as u,b as Q,u as r,i as E,t as V,N as v,e as w,w as L,x as j,R as Z,F,G as P,B as R,ab as N,a2 as q,E as ae,X as ee,Y as te,a7 as fe,p as ce,g as de,y as G,z as J}from"./index-6010b07e.js";/* empty css *//* empty css */import"./el-form-item-4ed993c7.js";import{_ as pe}from"./index.vue_vue_type_script_setup_true_lang-6f0143c4.js";import{_ as re}from"./index.vue_vue_type_script_setup_true_lang-83f923ac.js";/* empty css */import{_ as ue}from"./_plugin-vue_export-helper-c27b6911.js";import{_ as me}from"./index-4718d422.js";import{u as he}from"./diy-8d93d096.js";const _e=A=>(ce("data-v-4ccdb30b"),A=A(),de(),A),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 h-[300px]"},Xe={key:0,class:"mb-[16px]"},Ye={class:"flex items-center"},Le={class:"dialog-footer"},Se=K({__name:"index",props:{modelValue:{type:String,default:""}},emits:["update:modelValue"],setup(A,{expose:z,emit:b}){const O=A,S=ne({get(){return O.modelValue},set(x){b("update:modelValue",x)}}),_=I(!1),m=I(400),T=I(400),W=I(4),d=ie([]),U=()=>{let x=d.length%W.value*100,i=Math.floor(d.length/W.value)*100;i>=m.value&&(i=0,x=0),d.push({left:x,top:i,width:100,height:100,unit:"px",link:{name:""}})},B=(x,i)=>{const p=document.getElementById("box_"+i),o=x.clientX-p.offsetLeft,H=x.clientY-p.offsetTop;document.onmousemove=function(g){p.style.left=g.clientX-o+"px",p.style.top=g.clientY-H+"px",g.clientX-o<0&&(p.style.left=0),g.clientX-o>m.value-p.offsetWidth&&(p.style.left=m.value-p.offsetWidth+"px"),g.clientY-H<0&&(p.style.top=0),g.clientY-H>T.value-p.offsetHeight&&(p.style.top=T.value-p.offsetHeight+"px"),d[i].left=p.offsetLeft,d[i].top=p.offsetTop,d[i].width=p.offsetWidth,d[i].height=p.offsetHeight,d[i].unit="px"},document.onmouseup=function(g){document.onmousemove=null}},D=(x,i)=>{const p=x;p.stopPropagation();const o=document.getElementById("box_"+i),H=x.target.className,g=o.offsetWidth,$=o.offsetHeight,k=p.clientX,c=p.clientY,f=o.offsetLeft,a=o.offsetTop,s=50,l=50;document.onmousemove=function(le){const h=le;if(H=="box1"){let e=g-(h.clientX-k);const C=m.value;let t=$-(h.clientY-c);const M=T.value-a;let n=f+(h.clientX-k),y=a+(h.clientY-c);e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),f==0&&a==0?e==s&&t==l?(n=s,y=l):e==s&&t>l?n=s:e>s&&t==l&&(y=l):f==0&&a>0?e==s&&t==l||e==s&&t>l?(n=s,y=o.offsetTop):e>s&&t==l&&(y=o.offsetTop):f>0&&a==0?e==s&&t==l?(n=o.offsetLeft,y=o.offsetTop):e==s&&t>l?(n=o.offsetLeft,y=0):e>s&&t==l&&(y=o.offsetTop):f>0&&a>0&&(e==s&&t==l||e==s&&t>l?(n=o.offsetLeft,y=o.offsetTop):e>s&&t==l&&(y=o.offsetTop)),n<0&&(n=0,e=g-(h.clientX-k)+(f+(h.clientX-k))),y<0&&(y=0,t=a+(h.clientY-c)+($-(h.clientY-c))),o.style.width=e+"px",o.style.height=t+"px",o.style.left=n+"px",o.style.top=y+"px"}else if(H=="box2"){let e=g+(h.clientX-k);const C=m.value-f;let t=$-(h.clientY-c);const M=T.value-a;let n=a+(h.clientY-c);e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),f==0&&a==0?e==s&&t==l?n=l:e==s&&t>l||e>s&&t==l&&(n=l):f==0&&a>0?(e==s&&t==l||e==s&&t>l||e>s&&t==l)&&(n=o.offsetTop):f>0&&a==0?e==s&&t==l?n=o.offsetTop:e==s&&t>l?n=0:e>s&&t==l&&(n=o.offsetTop):f>0&&a>0&&(e==s&&t==l||e==s&&t>l||e>s&&t==l)&&(n=o.offsetTop),n<0&&(n=0,t=a+(h.clientY-c)+($-(h.clientY-c))),o.style.width=e+"px",o.style.height=t+"px",o.style.top=n+"px"}else if(H=="box3"){let e=g-(h.clientX-k);const C=m.value;let t=$+(h.clientY-c);const M=T.value-a;let n=f+(h.clientX-k);e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),f==0&&a==0||f==0&&a>0?(e==s&&t==l||e==s&&t>l)&&(n=s):f>0&&a==0?(e==s&&t==l||e==s&&t>l)&&(n=o.offsetLeft):f>0&&a>0&&(e==s&&t==l||e==s&&t>l)&&(n=o.offsetLeft),n<0&&(n=0,e=g-(h.clientX-k)+(f+(h.clientX-k))),o.style.width=e+"px",o.style.height=t+"px",o.style.left=n+"px"}else if(H=="box4"){let e=g+(h.clientX-k);const C=m.value-f;let t=$+(h.clientY-c);const M=T.value-a;e<s&&(e=s),e>C&&(e=C),t<l&&(t=l),t>M&&(t=M),o.style.width=e+"px",o.style.height=t+"px"}d[i].left=o.offsetLeft,d[i].top=o.offsetTop,d[i].width=o.offsetWidth,d[i].height=o.offsetHeight,d[i].unit="px"},document.onmouseup=function(){document.onmousemove=null,document.onmouseup=null}},oe=()=>{if(!S.value.imageUrl){q({type:"warning",message:`${v("imageUrlTip")}`});return}Object.keys(S.value.heatMapData).length?d.splice(0,d.length,...S.value.heatMapData):(d.splice(0,d.length),U()),_.value=!0},se=()=>{let x=!0;for(let i=0;i<d.length;i++)if(!d[i].link.title){q({type:"warning",message:v("selectedHotArea")+(i+1)+v("hotAreaLink")}),x=!1;break}x&&(d.forEach((i,p)=>{const o=document.getElementById("box_"+p);i.width=parseFloat(o.offsetWidth/m.value*100).toFixed(2),i.height=parseFloat(o.offsetHeight/T.value*100).toFixed(2),i.left=parseFloat(o.offsetLeft/m.value*100).toFixed(2),i.top=parseFloat(o.offsetTop/T.value*100).toFixed(2),i.unit="%"}),S.value.heatMapData=d,_.value=!1)};return z({showDialog:_}),(x,i)=>{const p=ae,o=re,H=pe,g=ee,$=te,k=fe;return X(),Y("div",null,[u("div",{onClick:oe},[Q(x.$slots,"default",{},()=>[r(S).heatMapData.length?(X(),Y("div",ge,[E(V(r(v)("selected")),1),u("span",ve,V(r(S).heatMapData.length),1),E(V(r(v)("selectedAfterHotArea")),1)])):(X(),Y("div",xe,V(r(v)("addHotArea")),1))],!0)]),w(k,{modelValue:_.value,"onUpdate:modelValue":i[1]||(i[1]=c=>_.value=c),title:r(v)("hotAreaSet"),width:"45%","close-on-press-escape":!1,"destroy-on-close":!0,"close-on-click-modal":!1},{footer:L(()=>[u("span",Le,[w(p,{onClick:i[0]||(i[0]=c=>_.value=!1)},{default:L(()=>[E(V(r(v)("cancel")),1)]),_:1}),w(p,{type:"primary",onClick:se},{default:L(()=>[E(V(r(v)("confirm")),1)]),_:1})])]),default:L(()=>[u("div",be,[u("div",{class:"content-box relative bg-cover bg-gray-100 border border-dashed border-gray-500",style:j({backgroundImage:"url("+r(Z)(r(S).imageUrl)+")",width:m.value+"px",height:T.value+"px"})},[(X(!0),Y(F,null,P(d,(c,f)=>(X(),Y("div",{id:"box_"+f,key:f,class:"area-box border border-solid border-[#ccc] w-[100px] h-[100px] absolute top-0 left-0 select-none p-[5px]",style:j({left:c.left+c.unit,top:c.top+c.unit,width:c.width+c.unit,height:c.height+c.unit}),onMousedown:a=>B(a,f)},[u("span",null,V(f+1),1),c.link.title?(X(),Y(F,{key:0},[we,u("span",null,V(c.link.title),1)],64)):R("",!0),u("span",{class:"box1",onMousedown:N(a=>D(a,f),["stop"])},null,40,ke),u("span",{class:"box2",onMousedown:N(a=>D(a,f),["stop"])},null,40,Te),u("span",{class:"box3",onMousedown:N(a=>D(a,f),["stop"])},null,40,Ce),u("span",{class:"box4",onMousedown:N(a=>D(a,f),["stop"])},null,40,Me)],44,ye))),128))],4),w($,{"label-width":"80px",class:"pl-[20px]"},{default:L(()=>[u("h3",Ve,V(r(v)("hotAreaManage")),1),w(p,{type:"primary",plain:"",size:"small",class:"mb-[10px]",onClick:U},{default:L(()=>[E(V(r(v)("addHotArea")),1)]),_:1}),u("div",He,[(X(!0),Y(F,null,P(d,(c,f)=>(X(),Y(F,{key:f},[c?(X(),Y("div",Xe,[w(g,{label:r(v)("hotArea")+(f+1)},{default:L(()=>[u("div",Ye,[w(o,{modelValue:c.link,"onUpdate:modelValue":a=>c.link=a},null,8,["modelValue","onUpdate:modelValue"]),w(H,{class:"del cursor-pointer mx-[10px]",name:"element-CircleCloseFilled",color:"#bbb",size:"20px",onClick:a=>d.splice(f,1)},null,8,["onClick"])])]),_:2},1032,["label"])])):R("",!0)],64))),128))])]),_:1})])]),_:1},8,["modelValue","title"])])}}});const $e=ue(Se,[["__scopeId","data-v-4ccdb30b"]]),Ae={class:"content-wrap"},We={class:"edit-attr-item-wrap"},Be={class:"mb-[10px]"},Ee={ref:"imageBoxRef"},Fe={class:"item-wrap p-[10px] pb-0 relative border border-dashed border-gray-300 mb-[16px]"},Ue={class:"style-wrap"},De=K({__name:"edit-hot-area",setup(A,{expose:z}){const b=he();b.editComponent.ignore=[],b.editComponent.verify=_=>{const m={code:!0,message:""};return b.value[_].imageUrl===""&&(m.code=!1,m.message=v("imageUrlTip")),m};const O=_=>{S()},S=()=>{const _=new Image;_.src=Z(b.editComponent.imageUrl),_.onload=async()=>{b.editComponent.imgWidth=_.width,b.editComponent.imgHeight=_.height}};return z({}),(_,m)=>{const T=me,W=ee,d=$e,U=te;return X(),Y(F,null,[G(u("div",Ae,[u("div",We,[u("h3",Be,V(r(v)("hotAreaSet")),1),w(U,{"label-width":"80px",class:"px-[10px]"},{default:L(()=>[u("div",Ee,[u("div",Fe,[w(W,{label:r(v)("hotAreaBackground")},{default:L(()=>[w(T,{modelValue:r(b).editComponent.imageUrl,"onUpdate:modelValue":m[0]||(m[0]=B=>r(b).editComponent.imageUrl=B),limit:1,onChange:O},null,8,["modelValue"])]),_:1},8,["label"]),w(W,{label:r(v)("hotAreaSet")},{default:L(()=>[w(d,{modelValue:r(b).editComponent,"onUpdate:modelValue":m[1]||(m[1]=B=>r(b).editComponent=B)},null,8,["modelValue"])]),_:1},8,["label"])])],512)]),_:1})])],512),[[J,r(b).editTab=="content"]]),G(u("div",Ue,[Q(_.$slots,"style")],512),[[J,r(b).editTab=="style"]])],64)}}}),Ke=Object.freeze(Object.defineProperty({__proto__:null,default:De},Symbol.toStringTag,{value:"Module"}));export{Ke as _};
|
|
|