niucloud-admin/niucloud/public/admin/assets/edit-hot-area-316f4b12.js
全栈小学生 26524c4bf5 update admin
2023-08-12 16:21:13 +08:00

2 lines
8.6 KiB
JavaScript

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