Merge pull request #60 in YR/star-web-components from feature-improve-clocks to master

* commit '54006c4becb3d2621fa88c74b18f2fc6c7b5d02d':
  TASK:#110955 修改自适应显示问题

src/components/clock/clock.ts

@@ -21,15 +21,19 @@ export class StarClock extends LitElement {
   @state() rotateHour = 0
   @state() rotateMinute = 0
   @state() rotateSecond = 0
-  private _date = 0
-  set date(val: number) {
-    this._date = val
-    val && this.dateUpdated(val)
-  }
-  @property({type: Number})
+
+  private _date: String = '0'
+  @property({type: String})
   get date() {
     return this._date
   }
+  set date(val: String) {
+    console.log(val, 'val')
+    // 1664942295167 (长度13)  // Wed Oct 05 2022 11:58:40 GMT+0800 (中国标准时间)
+    let dateMy = val.length <= 13 ? Number(val) : String(val)
+    val && this.dateUpdated(dateMy)
+  }
+
   @query('.star-clock')
   starClock: HTMLDivElement | undefined
   getTransparentClock() {
@@ -110,8 +114,8 @@ export class StarClock extends LitElement {
       }
     }
   }
-  protected dateUpdated(date: any) {
-    let timeMy = new Date(Number(date))
+  dateUpdated(date: any){
+    let timeMy = new Date(date)
     let hour = timeMy.getHours()
     let minute = timeMy.getMinutes()
     let second = timeMy.getSeconds()
@@ -128,12 +132,14 @@ export class StarClock extends LitElement {
     this.style.setProperty('--rotateSecondAfter',this.rotateSecond + 360 + 'deg')
     this.style.setProperty('--rotateMinuteAfter',this.rotateMinute + 360 + 'deg')
     this.style.setProperty('--rotateHourAfter', this.rotateHour + 360 + 'deg')
-    this.resizeFun()   
+  }
+  protected firstUpdated() {
+    this.resize()   
     window.addEventListener('resize', () => {
-      this.resizeFun()
+      this.resize()
     })
   }
-  protected resizeFun(){
+  protected resize(){
     let min = Math.min(
       this.starClock?.clientHeight || 100,
       this.starClock?.clientWidth || 100

src/test/panels/clock/clock.ts

@@ -5,7 +5,7 @@ export class PanelClock extends LitElement {
   @property()
   foo = ''
   @state()
-  date = 0
+  date: any = '0'
   render() {
     return html`
       <h3
@@ -49,13 +49,13 @@ export class PanelClock extends LitElement {
     `
   }
   static styles = css``
-  protected firstUpdated() {
-    this.date = new Date().getTime()
-    let timeMy = new Date(Number(this.date))
-    let hour = timeMy.getHours()
-    let minute = timeMy.getMinutes()
-    let second = timeMy.getSeconds()
-    console.log('传的值和类型:000', hour, minute, second)
+  protected firstUpdated(){
+     this.date = new Date() //.getTime()
+    // let timeMy = new Date(Number(this.date))
+    // let hour = timeMy.getHours()
+    // let minute = timeMy.getMinutes()
+    // let second = timeMy.getSeconds()
+    // console.log('传的值和类型:000', hour, minute, second)
   }
 }
 declare global {