2 lines
6.4 KiB
JavaScript
2 lines
6.4 KiB
JavaScript
import{c as A}from"./runtime-dom.esm-bundler-22744054.js";import{V as w}from"./vue-draggable-resizable-b9fb2b7f.js";/* empty css */import{_ as m}from"./_plugin-vue_export-helper-c27b6911.js";import{o as a,g as p,k as e,d as S,b as s,B as V,l as g,A as y,v as k,F as N,L as Y,x as j,s as L,c as P,M as R}from"./runtime-core.esm-bundler-381a9959.js";const X={},H=e("span",{class:"fixed"},"嘉定区",-1),J=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 71 82"},[e("path",{id:"嘉定区",d:"M329,302l-1,3,2-1,3,2v2l4,2,5-1v-2h2l1,2,3-3h2l12,4v2l4,4,5,1,4-1,3-4,4,2,2-3h2l1-3h-3l-2-2,2-2-8-1-1-4h-2l3-2-1-1,4-7-2-3,1-2-3-4,2-2-1-4-3-3v-4l-3-1v-3l4-2,1,1,1-6-3-5v-3h-2l1-4-2-1,1-1-3-6-3,2h-4l-2,2-1-1-3,3v-2l-2,2v-2l-1,1-2-4-2,5h-6v2l-5,3-1,3-9,2v2l4,1,1,2h-3l-2,2,3,3-2,2,1,2-3,1,2,2-9,4,1,1-2,2-1-1v4l3,1v2h3l1,5-2,4,2,4,2-3,1,1,2,4-1,1,3,2Z",transform:"translate(-316.5 -235.5)",fill:"rgba(238,238,238,0.5)",stroke:"#333","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"0.1","fill-rule":"evenodd"})],-1),O=[H,J];function Z(h,l){return a(),p("div",null,O)}const G=m(X,[["render",Z]]),I={},Q=e("span",{class:"fixed"},"黄浦区",-1),U=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 15 17"},[e("path",{id:"黄浦区",d:"M407,319l1,5h2v4h6l5-7-5-7,1-1-2-1-5,2-1-1,1,5h-3Z",transform:"translate(-406.5 -311.5)",fill:"rgba(238,238,238,0.5)",stroke:"#333","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"0.1","fill-rule":"evenodd"})],-1),q=[Q,U];function K(h,l){return a(),p("div",null,q)}const W=m(I,[["render",K]]),e0={},t0=e("span",{class:"fixed"},"嘉定区",-1),c0=e("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",contentScriptType:"text/ecmascript",zoomAndPan:"magnify",contentStyleType:"text/css",id:"图层_1",mapName:"中国",mapType:"国家地图",version:"1.1","xml:space":"preserve",preserveAspectRatio:"xMidYMid meet",width:"100%",height:"100%",viewBox:"0 0 1000 1000",x:"0px",y:"0px"},[e("path",{fill:"#E3E3E4","stroke-linejoin":"round",d:"M581.5,487c0,0,3.5-0.7,1.8-2.8 c0,0-3-1.8-1.3-3.3c0,0,1-1.8,1-3.7c0,0,0-2.2,2-2.8c0,0,4.5-2.5,4.8-2.8c0,0-3.2,0.5-10.3-6.3c0,0-4-0.3-6.3-0.3c0,0-7,0.5-3.2-7 c0,0,1.3-4.2,4.5-5.3c0,0,4.5-4,1.5-5.3c0,0-3.5-0.7-3.3-2.3l-0.8-3.8c0,0-0.2-0.7-1,0c0,0-4.7,2.3-6.7,4.7l-3.7,2.8 c0,0-1.5,1-1.7,2.5c0,0-1.3,8.5-1.3,9.5c0,0-0.7,9.5-0.7,9.8c-0.2,0.5-1,7-8.5,5c0,0-3.3,0.5-5.3,2.5c0,0-6.2,1.8-8.9,1.5l-4.5,1.8 l3.1,1c0,0,2.1,0.1,2.9,2.1c0,0,0.7,3,1.7,2.7c0,0,3.4,1,3.9,2.2l5.5,5.8c0.7,1.5,0.6,2.3-0.6,2.6c0,0-1.6,1.1-0.1,3.3l5.8,3.7 l-2,5.4c0,0-5,8.6,1.1,7.8c0,0,3-1,4,1.5c0,0,2.6,3.3,6.6,4.4c2.3,1.1,2.1,4.3,2.6,4.1c0,0,1.6,0.1,2.7-1.6c0,0,0.8-0.6,0.8-6.5 c0,0-1.3-2.7,4.8-3.4c0,0,2.9-1.1,3.3-5.6c0,0,0.8-4.8-5.4-4.7c0,0-1.1,0.4-3.1-3.9c0,0-0.7-0.4-1.1-1.4c0,0-1-0.5,1.8-1.7 c0,0,1.6-1.9,1.3-3.1c0,0,0-2.1,1.5-2.2c0,0,1.7-0.2,0.5-1.8c0,0-3-3.5-1.2-3.5c0,0,2,0.3,2-1.3l3.5-0.5c0,0,2.5,0.5,3.8-0.3 C579.7,486.5,581.5,486.3,581.5,487z",id:"path7",stroke:"#FFFFFF","stroke-miterlimit":"10"})],-1),n0=[t0,c0];function o0(h,l){return a(),p("div",null,n0)}const s0=m(e0,[["render",o0]]),l0=e("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",conten3tScriptType:"text/ecmascript",zoomAn3dPan:"magnify",content3StyleType:"text/css",id:"图层_1",mapName:"中国",mapType:"国家地图",version:"1.1","xml:s3pace":"preserve",preserveA3spectRatio:"xMidYMid meet",width:"10px",height:"100%",viewBox:"0 0 800 1000",x:"0px",y:"0px"},[e("path",{fill:"#E3E3E4","stroke-linejoin":"round",d:"M581.5,487c0,0,3.5-0.7,1.8-2.8c0,0-3-1.8-1.3-3.3c0,0,1-1.8,1-3.7c0,0,0-2.2,2-2.8c0,0,4.5-2.5,4.8-2.8c0,0-3.2,0.5-10.3-6.3c0,0-4-0.3-6.3-0.3c0,0-7,0.5-3.2-7 c0,0,1.3-4.2,4.5-5.3c0,0,4.5-4,1.5-5.3c0,0-3.5-0.7-3.3-2.3l-0.8-3.8c0,0-0.2-0.7-1,0c0,0-4.7,2.3-6.7,4.7l-3.7,2.8 c0,0-1.5,1-1.7,2.5c0,0-1.3,8.5-1.3,9.5c0,0-0.7,9.5-0.7,9.8c-0.2,0.5-1,7-8.5,5c0,0-3.3,0.5-5.3,2.5c0,0-6.2,1.8-8.9,1.5l-4.5,1.8 l3.1,1c0,0,2.1,0.1,2.9,2.1c0,0,0.7,3,1.7,2.7c0,0,3.4,1,3.9,2.2l5.5,5.8c0.7,1.5,0.6,2.3-0.6,2.6c0,0-1.6,1.1-0.1,3.3l5.8,3.7 l-2,5.4c0,0-5,8.6,1.1,7.8c0,0,3-1,4,1.5c0,0,2.6,3.3,6.6,4.4c2.3,1.1,2.1,4.3,2.6,4.1c0,0,1.6,0.1,2.7-1.6c0,0,0.8-0.6,0.8-6.5 c0,0-1.3-2.7,4.8-3.4c0,0,2.9-1.1,3.3-5.6c0,0,0.8-4.8-5.4-4.7c0,0-1.1,0.4-3.1-3.9c0,0-0.7-0.4-1.1-1.4c0,0-1-0.5,1.8-1.7 c0,0,1.6-1.9,1.3-3.1c0,0,0-2.1,1.5-2.2c0,0,1.7-0.2,0.5-1.8c0,0-3-3.5-1.2-3.5c0,0,2,0.3,2-1.3l3.5-0.5c0,0,2.5,0.5,3.8-0.3 C579.7,486.5,581.5,486.3,581.5,487z",id:"path7",stroke:"#FFFFFF","stroke-width":"0.01","stroke-miterlimit":"10"})],-1),r0={id:"toolbar"},a0=e("b",null,"ctrl",-1),x0=S({__name:"test2",setup(h){s(null);const l=[s(null),s(null),s(null)],b=()=>{console.log("所有元素的数据",r)},M=()=>{console.log("嘉定的ref数据",l[0].value),l[0].value.left=r[0].x},E=[G,W,s0],F=s(0);(()=>{F.value=1})();const i=s(!1),u=s(null),x=s(0),f=s(0),r=[{id:1,x:0,y:0,color:"red-100",text:"Element 1",map:0,ref:l[0]},{id:2,x:200,y:200,color:"red-200",text:"Element 2",map:1,ref:l[1]},{id:3,x:500,y:200,color:"red-200",text:"Element 3",map:2,ref:l[2]}];V(()=>{window.addEventListener("keydown",t=>{t.keyCode===17&&(i.value=!0)}),window.addEventListener("keyup",t=>{t.keyCode===17&&(i.value=!1)})});const $=t=>{const n=t-x.value;return x.value=t,n},D=t=>{const n=t-f.value;return f.value=t,n},_=()=>{if(u.value)return r.find(t=>t.id===u.value)},C=(t,n,c)=>{if(u.value=t,!i.value)return;const o=n-_.x,d=c-_.y,B=$(o),z=D(d);r.map(v=>(v.id!==t&&(v.x+=B,v.y+=z),v))},T=(t,n,c)=>{r.map(o=>(o.id===t&&(o.x=n,o.y=c),o)),u.value=null,x.value=0,f.value=0};return(t,n)=>(a(),p("div",null,[g(" 第二个地图页面 "),y(w,{ref:"refQingPu",style:{border:"none","z-index":"998"}},{default:k(()=>[l0]),_:1},512),(a(),p(N,null,Y(r,c=>y(w,{"class-name-active":"my-active-class",key:c.id,x:c.x,y:c.y,w:200,h:200,resizable:!0,ref_for:!0,ref:c.ref,onDragging:(o,d)=>C(c.id,o,d),onDragstop:(o,d)=>T(c.id,o,d)},{default:k(()=>[e("p",null,L(c.text),1),(a(),P(R(E[c.map])))]),_:2},1032,["x","y","onDragging","onDragstop"])),64)),e("div",r0,[e("label",null,[j(e("input",{type:"checkbox",name:"sync","onUpdate:modelValue":n[0]||(n[0]=c=>i.value=c),disabled:""},null,512),[[A,i.value]]),g(" Synchronize (use "),a0,g(" key) ")]),e("div",{class:"space-x-4"},[e("button",{class:"px-4 py-2 bg-gray-700 text-white",onClick:b},"查看数据"),e("button",{class:"px-4 py-2 bg-gray-700 text-white",onClick:M},"查看refJiaDing数据")])])]))}});export{x0 as default};
|