@iwusong/datav-vue3
Version:
Vue3 large screen data display component library
63 lines (62 loc) • 6.63 kB
JavaScript
;var v=Object.defineProperty,k=Object.defineProperties;var _=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var $=(a,l,n)=>l in a?v(a,l,{enumerable:!0,configurable:!0,writable:!0,value:n}):a[l]=n,c=(a,l)=>{for(var n in l||(l={}))q.call(l,n)&&$(a,n,l[n]);if(u)for(var n of u(l))w.call(l,n)&&$(a,n,l[n]);return a},p=(a,l)=>k(a,_(l));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),j=require("@jiaminghi/color"),S=require("../../hooks/useResize.js"),z=require("../../hooks/useUuid.js"),g=require("../../utils/borderBox.js"),M=require("../../utils/common.js"),y=require("../../utils/styled.js"),f=require("../styled/borderBox.js");require("lodash-es");require("../../utils/logger.js");const N=["#8aaafb","#1f33a2"],G=y.styled.svg`
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.__STYLED__ > polyline {
fill: none;
stroke-width: 1;
`("border-svg-container"),R=()=>p(c({},g.createBorderBoxCommonProps()),{titleWidth:{type:Number,default:250},title:{type:String,default:""}}),I=M.withInstall(t.defineComponent({name:"BorderBox11",props:R(),setup(a,{slots:l,expose:n}){const{autoBindRef:b,refreshLayoutSize:m,domSize:V}=S.useResize();n({refreshLayoutSize:m});const h=z.useUuid();return()=>{const{color:B,backgroundColor:C,titleWidth:o,title:x}=a,{width:e,height:r}=V,i=g.mergeColor(N,B),s=`border-box-11-filterId-${h}`;return t.createVNode(f.BorderBoxContainer,{class:y.styled.getClassNameForBind("border-box-11"),ref:b},{default:()=>[t.createVNode(G,{width:e,height:r},{default:()=>[t.createVNode("defs",null,[t.createVNode("filter",{id:s,height:"150%",width:"150%",x:"-25%",y:"-25%"},[t.createVNode("feMorphology",{operator:"dilate",radius:"2",in:"SourceAlpha",result:"thicken"},null),t.createVNode("feGaussianBlur",{in:"thicken",stdDeviation:"3",result:"blurred"},null),t.createVNode("feFlood",{"flood-color":i[1],result:"glowColor"},null),t.createVNode("feComposite",{in:"glowColor",in2:"blurred",operator:"in",result:"softGlowColored"},null),t.createVNode("feMerge",null,[t.createVNode("feMergeNode",{in:"softGlowColored"},null),t.createVNode("feMergeNode",{in:"SourceGraphic"},null)])])]),t.createVNode("polygon",{fill:C,points:`
20, 32 ${e*.5-o/2}, 32 ${e*.5-o/2+20}, 53
${e*.5+o/2-20}, 53 ${e*.5+o/2}, 32
${e-20}, 32 ${e-8}, 48 ${e-8}, ${r-25} ${e-20}, ${r-8}
20, ${r-8} 8, ${r-25} 8, 50
`},null),t.createVNode("polyline",{stroke:i[0],filter:`url(#${s})`,points:`
${(e-o)/2}, 30
20, 30 7, 50 7, ${50+(r-167)/2}
13, ${55+(r-167)/2} 13, ${135+(r-167)/2}
7, ${140+(r-167)/2} 7, ${r-27}
20, ${r-7} ${e-20}, ${r-7} ${e-7}, ${r-27}
${e-7}, ${140+(r-167)/2} ${e-13}, ${135+(r-167)/2}
${e-13}, ${55+(r-167)/2} ${e-7}, ${50+(r-167)/2}
${e-7}, 50 ${e-20}, 30 ${(e+o)/2}, 30
${(e+o)/2-20}, 7 ${(e-o)/2+20}, 7
${(e-o)/2}, 30 ${(e-o)/2+20}, 52
${(e+o)/2-20}, 52 ${(e+o)/2}, 30
`},null),t.createVNode("polygon",{stroke:i[0],fill:"transparent",points:`
${(e+o)/2-5}, 30 ${(e+o)/2-21}, 11
${(e+o)/2-27}, 11 ${(e+o)/2-8}, 34
`},null),t.createVNode("polygon",{stroke:i[0],fill:"transparent",points:`
${(e-o)/2+5}, 30 ${(e-o)/2+22}, 49
${(e-o)/2+28}, 49 ${(e-o)/2+8}, 26
`},null),t.createVNode("polygon",{stroke:i[0],fill:j.fade(i[1]||N[1],30),filter:`url(#${s})`,points:`
${(e+o)/2-11}, 37 ${(e+o)/2-32}, 11
${(e-o)/2+23}, 11 ${(e-o)/2+11}, 23
${(e-o)/2+33}, 49 ${(e+o)/2-22}, 49
`},null),t.createVNode("polygon",{filter:`url(#${s})`,fill:i[0],opacity:"1",points:`
${(e-o)/2-10}, 37 ${(e-o)/2-31}, 37
${(e-o)/2-25}, 46 ${(e-o)/2-4}, 46
`},[t.createVNode("animate",{attributeName:"opacity",values:"1;0.7;1",dur:"2s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("polygon",{filter:`url(#${s})`,fill:i[0],opacity:"0.7",points:`
${(e-o)/2-40}, 37 ${(e-o)/2-61}, 37
${(e-o)/2-55}, 46 ${(e-o)/2-34}, 46
`},[t.createVNode("animate",{attributeName:"opacity",values:"0.7;0.4;0.7",dur:"2s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("polygon",{filter:`url(#${s})`,fill:i[0],opacity:"0.5",points:`
${(e-o)/2-70}, 37 ${(e-o)/2-91}, 37
${(e-o)/2-85}, 46 ${(e-o)/2-64}, 46
`},[t.createVNode("animate",{attributeName:"opacity",values:"0.5;0.2;0.5",dur:"2s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("polygon",{filter:`url(#${s})`,fill:i[0],opacity:"1",points:`
${(e+o)/2+30}, 37 ${(e+o)/2+9}, 37
${(e+o)/2+3}, 46 ${(e+o)/2+24}, 46
`},[t.createVNode("animate",{attributeName:"opacity",values:"1;0.7;1",dur:"2s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("polygon",{filter:`url(#${s})`,fill:i[0],opacity:"0.7",points:`
${(e+o)/2+60}, 37 ${(e+o)/2+39}, 37
${(e+o)/2+33}, 46 ${(e+o)/2+54}, 46
`},[t.createVNode("animate",{attributeName:"opacity",values:"0.7;0.4;0.7",dur:"2s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("polygon",{filter:`url(#${s})`,fill:i[0],opacity:"0.5",points:`
${(e+o)/2+90}, 37 ${(e+o)/2+69}, 37
${(e+o)/2+63}, 46 ${(e+o)/2+84}, 46
`},[t.createVNode("animate",{attributeName:"opacity",values:"0.5;0.2;0.5",dur:"2s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("text",{class:"dv-border-box-11-title",x:`${e/2}`,y:"32",fill:"#fff","font-size":"18","text-anchor":"middle","dominant-baseline":"middle"},[x]),t.createVNode("polygon",{fill:i[0],filter:`url(#${s})`,points:`
7, ${53+(r-167)/2} 11, ${57+(r-167)/2}
11, ${133+(r-167)/2} 7, ${137+(r-167)/2}
`},null),t.createVNode("polygon",{fill:i[0],filter:`url(#${s})`,points:`
${e-7}, ${53+(r-167)/2} ${e-11}, ${57+(r-167)/2}
${e-11}, ${133+(r-167)/2} ${e-7}, ${137+(r-167)/2}
`},null)]}),t.createVNode(f.BorderBoxContent,null,{default:()=>{var d;return[(d=l.default)==null?void 0:d.call(l)]}})]})}}}));exports.BorderBox11=I;