cione-comp-lib/lib/packages/co-clock-std/index2.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue");require("./index.vue_vue_type_style_index_0_scoped_true_lang.js");var l=require("../../_virtual/plugin-vue_export-helper.js");const a=e.defineComponent({name:"CoClockStd",props:{width:{type:String},height:{type:String},gradientColor1:{type:String,default:"rgba(3,48,58,1)"},gradientColor2:{type:String,default:"rgba(0,0,0,1)"},scaleColor:{type:String,default:"rgba(127,255,212,1)"},scaleNumColor:{type:String,default:"rgba(127,255,212,1)"},scaleNumSize:{type:Number,default:30},secColor:{type:String,default:"rgba(175,238,238,1)"},minColor:{type:String,default:"rgba(32,178,170,1)"},houColor:{type:String,default:"rgba(135,206,250,1)"},secCircleColor:{type:String,default:"rgba(135,206,250,1)"},minCircleColor:{type:String,default:"rgba(32,178,170,1)"},houCircleColor:{type:String,default:"rgba(175,238,238,1)"},isDate:{type:Boolean,default:!0},dateColor:{type:String,default:"rgba(127,255,212,1)"},dateSize:{type:Number,default:25}},setup(l){const a=e.ref(),u=e.ref(),t=e.ref(),v=e.ref(),r=e.ref(),o=e.ref(),i=e.ref();var n=0,s=0,c=0,d="";const h=e.ref(),g=()=>{e.nextTick((()=>{u.value=a.value.offsetWidth,t.value=a.value.offsetWidth/2,v.value.width=u.value,v.value.height=u.value,r.value=v.value.getContext("2d"),r.value.strokeStyle="#7FFFD4",r.value.lineWidth=3,r.value.shadowBlur=5,r.value.shadowColor="#7FFFD4",o.value=v.value.getContext("2d"),i.value=v.value.getContext("2d"),o.value.lineWidth=1,o.value.shadowBlur=0,o.value.shadowColor="#F0F8FF",h.value=setInterval(f,50)}))},f=()=>{T(),k(),C(),b(),p(),y(),S()},S=()=>{i.value.save(),i.value.translate(t.value,t.value),i.value.beginPath(),i.value.fillStyle=l.scaleNumColor,i.value.font=`${l.scaleNumSize}px Helvetica`;for(var e=0;e<60;e++)if(e%5==0){i.value.lineWidth=5;var a=Math.sin(6*e*2*Math.PI/360)*(t.value-55),u=-Math.cos(6*e*2*Math.PI/360)*(t.value-55);i.value.fillText(0==e?12:e/5,0==e?0:a,0==e?-(t.value-65):u+5)}i.value.stroke(),i.value.closePath(),i.value.restore()},C=()=>{o.value.save(),o.value.translate(t.value,t.value),o.value.rotate(n/60*2*Math.PI),o.value.beginPath(),o.value.strokeStyle=l.secColor,o.value.lineWidth=1,o.value.lineJoin="bevel",o.value.miterLimit=10,o.value.moveTo(0,30),o.value.lineTo(3,-(t.value-70)),o.value.lineTo(13,-(t.value-80)),o.value.lineTo(0,-(t.value-45)),o.value.lineTo(-13,-(t.value-80)),o.value.lineTo(-3,-(t.value-70)),o.value.lineTo(0,30),o.value.stroke(),o.value.closePath(),o.value.restore()},b=()=>{o.value.save(),o.value.translate(t.value,t.value),o.value.rotate(6*s*Math.PI/180),o.value.beginPath(),o.value.strokeStyle=l.minColor,o.value.lineWidth=1,o.value.lineJoin="bevel",o.value.miterLimit=10,o.value.moveTo(0,20),o.value.lineTo(3,-(t.value-110)),o.value.lineTo(10,-(t.value-120)),o.value.lineTo(0,-(t.value-85)),o.value.lineTo(-10,-(t.value-120)),o.value.lineTo(-3,-(t.value-110)),o.value.lineTo(0,20),o.value.stroke(),o.value.closePath(),o.value.restore()},p=()=>{o.value.save(),o.value.translate(t.value,t.value),o.value.rotate(30*c*Math.PI/180),o.value.beginPath(),o.value.strokeStyle=l.houColor,o.value.lineWidth=1,o.value.lineJoin="bevel",o.value.miterLimit=10,o.value.moveTo(0,20),o.value.lineTo(3,-(t.value-150)),o.value.lineTo(10,-(t.value-160)),o.value.lineTo(0,-(t.value-110)),o.value.lineTo(-10,-(t.value-160)),o.value.lineTo(-3,-(t.value-150)),o.value.lineTo(0,20),o.value.stroke(),o.value.closePath(),o.value.restore()},y=()=>{o.value.beginPath(),o.value.arc(t.value,t.value,3,0,2*Math.PI),o.value.stroke()},k=()=>{for(var e=0;e<60;e++)o.value.save(),o.value.translate(t.value,t.value),o.value.rotate(e/60*2*Math.PI),o.value.beginPath(),o.value.strokeStyle=l.scaleColor,o.value.moveTo(0,-t.value),o.value.lineWidth=e%5==0?5:2,o.value.lineTo(0,-(t.value-20)),o.value.stroke(),o.value.closePath(),o.value.restore();o.value.beginPath(),o.value.arc(t.value,t.value,0,0,2*Math.PI),o.value.stroke()},m=e=>{var l=Math.PI/180;return 0==e?270*l:e*l},T=()=>{var e=new Date,a=e.toLocaleDateString(),v=e.toLocaleTimeString(),o=e.getDay(),i=e.getHours(),h=e.getMinutes(),g=e.getSeconds()+e.getMilliseconds()/1e3,f=h+g/60,S=i+f/60;switch(n=g,s=f,c=S,o){case 1:d="一";break;case 2:d="二";break;case 3:d="三";break;case 4:d="四";break;case 5:d="五";break;case 6:d="六";break;case 0:d="日"}var C=r.value.createRadialGradient(t.value,t.value,5,t.value,t.value,300);C.addColorStop(0,l.gradientColor1),C.addColorStop(1,l.gradientColor2),r.value.fillStyle=C,r.value.fillRect(0,0,u.value,u.value),r.value.beginPath(),r.value.strokeStyle=l.houCircleColor,r.value.arc(t.value,t.value,t.value-35,m(0),m(30*S-90)),r.value.stroke(),r.value.beginPath(),r.value.strokeStyle=l.minCircleColor,r.value.arc(t.value,t.value,t.value-30,m(0),m(6*f-90)),r.value.stroke(),r.value.beginPath(),r.value.strokeStyle=l.secCircleColor,r.value.arc(t.value,t.value,t.value-25,m(0),m(6*g-90)),r.value.stroke(),r.value.beginPath(),l.isDate&&(r.value.font=`${l.dateSize}px Helvetica Bold`,r.value.fillStyle=l.dateColor,r.value.textAlign="center",r.value.fillText(a+"/星期"+d,t.value,t.value-20),r.value.font=l.dateSize-2+"px Helvetica Bold",r.value.fillStyle=l.dateColor,r.value.textAlign="center",r.value.fillText(v,t.value,t.value+30),r.value.beginPath()),r.value.arc(t.value,t.value,t.value,0,2*Math.PI),r.value.strokeStyle=l.scaleColor,r.value.stroke()};return e.watch((()=>l),(()=>{r.value&&(r.value.clearRect(0,0,u.value,u.value),o.value.clearRect(0,0,u.value,u.value),i.value.clearRect(0,0,u.value,u.value)),clearInterval(h.value),g()}),{deep:!0}),e.onMounted((()=>{g()})),e.onUnmounted((()=>{clearInterval(h.value)})),{clockDom:a,canvas:v,RESET_VIEW:()=>{r.value&&(r.value.clearRect(0,0,u.value,u.value),o.value.clearRect(0,0,u.value,u.value),i.value.clearRect(0,0,u.value,u.value),clearInterval(h.value),g())},...e.toRefs(l)}}}),u={ref:"canvas",id:"canvas",width:"500",height:"500"};var t=l.default(a,[["render",function(l,a,t,v,r,o){return e.openBlock(),e.createElementBlock("div",{class:"co-clock-std",style:e.normalizeStyle({width:l.width||"100%",height:l.height||"100%"}),ref:"clockDom"},[e.createElementVNode("canvas",u,null,512)],4)}],["__scopeId","data-v-73308118"]]);exports.default=t;