首页重构

entry/src/main/ets/pages/components/button/Index.ets

@@ -1,6 +1,6 @@
-interface ButtonStyle {
-  width: string | number
-  height: string | number
+interface ButtonStyle extends SizeOptions {
+  fontColor?: ResourceColor
+  fontSize?: number
 }
 
 class CusButtonModifier implements AttributeModifier<RowAttribute> {
@@ -25,7 +25,7 @@ export struct CusButton {
   public text?: string
   public normalImage?: Resource
   public activeImage?: Resource
-  public style?: SizeOptions
+  public style?: ButtonStyle
   private modifier: CusButtonModifier = new CusButtonModifier()
 
   aboutToAppear(): void {
@@ -40,7 +40,10 @@ export struct CusButton {
   build() {
     Row() {
       if (this.text) {
-        Text(this.text).fontFamily("Alimama").fontSize(24)
+        Text(this.text)
+          .fontFamily("Alimama")
+          .fontSize(this.style?.fontSize || 18)
+          .fontColor(this.style?.fontColor || 0xffffff)
       }
     }
     .width(this.style?.width || "100%")

entry/src/main/ets/pages/components/dropdown/Index.ets

@@ -20,7 +20,7 @@ export struct Dropdown {
           .borderRadius(0)
           .backgroundColor(this.select === index ? 0xcccccc : 0xffffff)
       })
-    }
+    }.padding(0).borderRadius(0)
   }
 
   aboutToAppear(): void {

entry/src/main/ets/pages/control/Index.ets

@@ -1,7 +1,6 @@
 import { CusButton } from '../components/button/Index'
 import { Layout } from '../components/layout/Index'
 import { Title } from '../components/title/Index'
-import { ControlButton } from './components/Button'
 import { CusMenuItem } from './components/MenuItem'
 import { RebootControl } from './utils/Control'
 import { router } from '@kit.ArkUI'
@@ -33,7 +32,7 @@ const button: string[][] =
 @Entry
 struct Control {
   @State select: number = 0
-  private menu: string[] = ["回到初始位置", "回到受理凭证位置", "回到充电位置", "自由控制"]
+  private menu: string[] = ["1", "2", "3", "4"]
   private control: RebootControl = new RebootControl("", 0)
   private forward: (event: TouchEvent) => void = TouchEventWrapper(() => {
     this.control.forward()
@@ -75,7 +74,7 @@ struct Control {
           Row() {
             Column() {
               Row() {
-                Text("操作流程").fontFamily("Alimama").fontColor(0xffffff).fontSize(24)
+                Text("线路选择").fontFamily("Alimama").fontColor(0xffffff).fontSize(24)
               }
               .backgroundImage($rawfile("images/control/header.png"))
               .backgroundImageSize({ width: "100%", height: "100%" })
@@ -84,76 +83,106 @@ struct Control {
               .padding({ left: 48 })
               .margin({ bottom: 24 })
 
-              Column() {
-                ForEach(this.menu, (menu: string, index: number) => {
-                  CusMenuItem({ text: menu, active: this.select === index }).margin({ bottom: 24 }).onClick(() => {
-                    this.select = index
+              Scroll() {
+                Column() {
+                  ForEach(this.menu, (menu: string, index: number) => {
+                    CusMenuItem({ text: menu, active: this.select === index }).margin({ bottom: 24 }).onClick(() => {
+                      this.select = index
+                    })
                   })
-                })
-              }.width("100%").padding({ left: 24, right: 24 })
-
+                }.width("100%").padding({ left: 24, right: 24 })
+              }.width("100%").layoutWeight(1).align(Alignment.Top)
             }
-            .width("30%")
+            .width("25%")
             .height("100%")
             .margin({ right: 24 })
             .backgroundColor(0xf4f4f5)
             .border({ width: 1, color: 0xf1f1f1 })
             .borderRadius(5)
 
-            Row() {
-
-              if (this.select === 3) {
-                Stack({ alignContent: Alignment.Center }) {
-                  Image($rawfile("images/control/center.png")).width(120)
-                  Image($rawfile("images/control/left.png")).offset({ x: -140 })
-                    .width(160).onTouch(this.left)
-                  Image($rawfile("images/control/right.png")).offset({ x: 140 })
-                    .width(160).onTouch(this.right)
-                  Image($rawfile("images/control/up.png")).offset({ y: -140 })
-                    .width(160).onTouch(this.forward)
-                  Image($rawfile("images/control/down.png")).offset({ y: 140 })
-                    .width(160).onTouch(this.backward)
-                  Text("左")
-                    .fontColor(0xffffff)
-                    .fontSize(28)
-                    .offset({ x: -100 })
-                    .hitTestBehavior(HitTestMode.Transparent)
-                  Text("右")
-                    .fontColor(0xffffff)
-                    .fontSize(28)
-                    .offset({ x: 100 })
-                    .hitTestBehavior(HitTestMode.Transparent)
-                  Text("前")
-                    .fontColor(0xffffff)
-                    .fontSize(28)
-                    .offset({ y: -100 })
-                    .hitTestBehavior(HitTestMode.Transparent)
-                  Text("后")
-                    .fontColor(0xffffff)
-                    .fontSize(28)
-                    .offset({ y: 100 })
-                    .hitTestBehavior(HitTestMode.Transparent)
-                }.width("100%").height("100%")
-
-              } else {
-                ControlButton({
-                  title: button[this.select][0], button: "采集", onCustomClick: () => {
-                    this.onCollectCommand()
-                  }
-                })
-                ControlButton({
-                  title: button[this.select][1], button: "前往", onCustomClick: () => {
-                    this.onMoveCommand()
-                  }
-                })
-              }
-
+            Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround }) {
+              CusButton({
+                normalImage: $rawfile("images/control/button.png"),
+                text: "采集初始位置",
+                style: { width: 160, height: 80, fontColor: 0x24F3FB }
+              }).margin({ bottom: 24 }).onClick(() => {
+                this.onCollectCommand()
+              })
+              CusButton({
+                normalImage: $rawfile("images/control/button.png"),
+                text: "回到初始位置",
+                style: { width: 160, height: 80, fontColor: 0x24F3FB }
+              }).margin({ bottom: 24 }).onClick(() => {
+                this.onMoveCommand()
+              })
+              CusButton({
+                normalImage: $rawfile("images/control/button.png"),
+                text: "采集扫码位置",
+                style: { width: 160, height: 80, fontColor: 0x24F3FB }
+              }).margin({ bottom: 24 }).onClick(() => {
+                this.onCollectCommand()
+              })
+              CusButton({
+                normalImage: $rawfile("images/control/button.png"),
+                text: "回到扫码位置",
+                style: { width: 160, height: 80, fontColor: 0x24F3FB }
+              }).margin({ bottom: 24 }).onClick(() => {
+                this.onMoveCommand()
+              })
+              CusButton({
+                normalImage: $rawfile("images/control/button.png"),
+                text: "采集充电位置",
+                style: { width: 160, height: 80, fontColor: 0x24F3FB }
+              }).margin({ bottom: 24 }).onClick(() => {
+                this.onCollectCommand()
+              })
+              CusButton({
+                normalImage: $rawfile("images/control/button.png"),
+                text: "回到充电位置",
+                style: { width: 160, height: 80, fontColor: 0x24F3FB }
+              }).margin({ bottom: 24 }).onClick(() => {
+                this.onMoveCommand()
+              })
             }
             .layoutWeight(1)
-            .height("100%")
-            .justifyContent(FlexAlign.SpaceAround)
-            .padding({ bottom: this.select === 3 ? 0 : 100 })
-          }.width("100%").layoutWeight(1).padding({ left: 12, right: 12 })
+            .margin({ right: 24 })
+
+            Row() {
+              Stack({ alignContent: Alignment.Center }) {
+                Image($rawfile("images/control/center.png")).width(80)
+                Image($rawfile("images/control/left.png")).offset({ x: -100 })
+                  .width(120).onTouch(this.left)
+                Image($rawfile("images/control/right.png")).offset({ x: 100 })
+                  .width(120).onTouch(this.right)
+                Image($rawfile("images/control/up.png")).offset({ y: -100 })
+                  .width(120).onTouch(this.forward)
+                Image($rawfile("images/control/down.png")).offset({ y: 100 })
+                  .width(120).onTouch(this.backward)
+                Text("左")
+                  .fontColor(0xffffff)
+                  .fontSize(28)
+                  .offset({ x: -70 })
+                  .hitTestBehavior(HitTestMode.Transparent)
+                Text("右")
+                  .fontColor(0xffffff)
+                  .fontSize(28)
+                  .offset({ x: 70 })
+                  .hitTestBehavior(HitTestMode.Transparent)
+                Text("前")
+                  .fontColor(0xffffff)
+                  .fontSize(28)
+                  .offset({ y: -70 })
+                  .hitTestBehavior(HitTestMode.Transparent)
+                Text("后")
+                  .fontColor(0xffffff)
+                  .fontSize(28)
+                  .offset({ y: 70 })
+                  .hitTestBehavior(HitTestMode.Transparent)
+              }.width("100%").height("100%")
+
+            }.layoutWeight(1)
+
+          }.width("100%").layoutWeight(1).padding({ left: 12, right: 12 }).alignItems(VerticalAlign.Center)
 
         }.width("100%").height("100%").padding(18)
       }

entry/src/main/ets/pages/filing/Index.ets

@@ -2,6 +2,7 @@ import { CusButton } from '../components/button/Index'
 import { Layout } from '../components/layout/Index'
 import { router } from '@kit.ArkUI'
 import { Option } from '../../typings/Common'
+import { Title } from '../components/title/Index'
 
 
 @Component
@@ -26,49 +27,59 @@ struct Filing {
     Column() {
       Layout({ mode: 2 }) {
         Column() {
-          ForEach(this.data, (item: Option) => {
-            Row() {
-              Flex({ justifyContent: FlexAlign.SpaceAround }) {
-                ForEach(item.label.split(""), (char: string) => {
-                  Text(char)
-                    .fontFamily("Alimama")
-                    .fontColor(0xffffff)
-                    .fontSize(24)
-                })
-              }.width("25%")
-
-              Text(item.value)
-                .fontColor(0x1D257A)
-                .fontSize(24)
-                .fontWeight(700)
-                .textAlign(TextAlign.Center)
-                .layoutWeight(1)
-                .padding({ left: 40 })
-            }
-            .backgroundImage($rawfile("images/filing/background.png"))
-            .backgroundImageSize({ width: "140%", height: "100%" })
-            .width("100%")
-            .height(64)
-            .margin({ bottom: 24 })
-          })
-
-          Flex({ justifyContent: FlexAlign.SpaceAround }) {
-            CusButton({
-              normalImage: $rawfile("images/filing/refresh.png"),
-              activeImage: $rawfile("images/filing/refresh_active.png"),
-              style: { width: 400, height: 80 }
-            }).onClick(() => {
-              this.getData()
-            })
-            CusButton({
-              normalImage: $rawfile("images/filing/back.png"),
-              activeImage: $rawfile("images/filing/back_active.png"),
-              style: { width: 400, height: 80 }
-            }).onClick(() => {
+          Row() {
+            Title({ title: "备案信息" })
+            CusButton({ normalImage: $rawfile("images/back.png"), style: { width: 120, height: 50 } })
+              .margin({ left: 24 }).onClick(() => {
               router.back()
             })
-          }.margin({ top: 24 })
-        }.height("100%").padding({ left: 64, right: 64 }).justifyContent(FlexAlign.Center)
+          }.margin({ bottom: 18 })
+
+          Column() {
+            ForEach(this.data, (item: Option) => {
+              Row() {
+                Flex({ justifyContent: FlexAlign.SpaceAround }) {
+                  ForEach(item.label.split(""), (char: string) => {
+                    Text(char)
+                      .fontFamily("Alimama")
+                      .fontColor(0xffffff)
+                      .fontSize(24)
+                  })
+                }.width("25%")
+
+                Text(item.value)
+                  .fontColor(0x1D257A)
+                  .fontSize(24)
+                  .fontWeight(700)
+                  .textAlign(TextAlign.Center)
+                  .layoutWeight(1)
+                  .padding({ left: 40 })
+              }
+              .backgroundImage($rawfile("images/filing/background.png"))
+              .backgroundImageSize({ width: "140%", height: "100%" })
+              .width("100%")
+              .height(64)
+              .margin({ bottom: 24 })
+            })
+
+            Flex({ justifyContent: FlexAlign.SpaceAround }) {
+              CusButton({
+                normalImage: $rawfile("images/filing/refresh.png"),
+                activeImage: $rawfile("images/filing/refresh_active.png"),
+                style: { width: 400, height: 80 }
+              }).onClick(() => {
+                this.getData()
+              })
+              CusButton({
+                normalImage: $rawfile("images/filing/back.png"),
+                activeImage: $rawfile("images/filing/back_active.png"),
+                style: { width: 400, height: 80 }
+              }).onClick(() => {
+                router.back()
+              })
+            }.margin({ top: 24 })
+          }.layoutWeight(1).padding({ left: 64, right: 64 }).justifyContent(FlexAlign.Center)
+        }.width("100%").height("100%").padding(18)
       }
     }.width("100%").height("100%")
   }

entry/src/main/ets/pages/home/Index.ets

@@ -5,7 +5,7 @@ import { Footer } from './components/Footer'
 import { Block } from './components/Block'
 import { LineCard } from './components/LineCard'
 import { WarnCard } from './components/WarnCard'
-
+import { RingOptions, RingProgress } from '../ring/Index'
 
 @Component
 @Entry
@@ -14,14 +14,14 @@ struct Home {
   @State line: number[] = [1, 2, 3, 4]
   @State warn: number[] = [1, 2, 3, 4]
   @State select: number = 0
-  private image: Resource[] = [
-    $rawfile('images/home/备案信息.png'),
-    $rawfile('images/home/线路监控.png'),
-    $rawfile('images/home/预警处理.png'),
-    $rawfile('images/home/结果查询.png'),
-    $rawfile('images/home/机器人控制.png'),
-    $rawfile('images/home/车型库采集.png'),
-    $rawfile('images/home/机器人重置.png'),
+  @State ring: RingOptions[] = [
+    { color: 0xffcc31, count: 10 },
+    { color: 0x33ff29, count: 20 },
+    { color: 0xff3a48, count: 30 },
+  ]
+  @State ring2: RingOptions[] = [
+    { color: 0x034B61, count: 10, animate: false },
+    { color: 0x06CDF5, count: 10 },
   ]
   private timeTick: number = -1
 
@@ -119,7 +119,7 @@ struct Home {
                     label: item.toString(),
                     select: this.select === index
                   })
-                }.width("100%").height(100).onClick(() => {
+                }.width("100%").constraintSize({ minHeight: 100 }).onClick(() => {
                   this.select = index
                 })
               })
@@ -127,30 +127,8 @@ struct Home {
           }
 
           Column() {
-            Stack({ alignContent: Alignment.Center }) {
-              Circle()
-                .width("100%")
-                .height("100%")
-                .strokeWidth(20)
-                .stroke(0xffcc31)
-                .fillOpacity(0)
-              Circle()
-                .width("100%")
-                .height("100%")
-                .strokeWidth(20)
-                .stroke(0x33ff29)
-                .fillOpacity(0)
-              Circle()
-                .width("100%")
-                .height("100%")
-                .strokeWidth(20)
-                .stroke(0xff3a48)
-                .fillOpacity(0)
-              Column() {
-                Text("查验数量").fontSize(32).fontColor(0xffffff).fontFamily("Alimama")
-                Text("86").fontSize(36).fontColor(0xffffff).fontFamily("Alimama")
-              }
-            }.width(290).height(290).margin({ top: 45.5, left: 1.5 })
+            RingProgress({ option: this.ring, style: { width: 290, height: 290 } })
+              .margin({ top: 45.5, left: 1.5 })
 
             Row() {
               Column() {
@@ -213,19 +191,14 @@ struct Home {
                 Text("总预警异常事件个数").fontSize(14).fontColor(0xffffff)
               }.height("100%").layoutWeight(1).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center)
 
+
               Stack({ alignContent: Alignment.Center }) {
-                Circle()
-                  .width(72)
-                  .height(72)
-                  .strokeWidth(10)
-                  .stroke(0x034B61)
-                  .fillOpacity(0)
-                Circle()
-                  .width(72)
-                  .height(72)
-                  .strokeWidth(10)
-                  .stroke(0x06CDF5)
-                  .fillOpacity(0)
+
+                RingProgress({
+                  option: this.ring2,
+                  style: { height: 72, width: 72 },
+                  strokeWidth: 10
+                })
                 Column() {
                   Text("75%").fontColor(0xffffff).fontSize(16)
                   Text("已处理").fontColor(0xffffff).fontSize(14)

entry/src/main/ets/pages/home/components/Footer.ets

@@ -3,6 +3,51 @@ import { router } from '@kit.ArkUI'
 
 @Component
 export struct Footer {
+  @State mediaWidth: number = 0
+
+  @Builder
+  buildMenu() {
+    Menu() {
+      MenuItem() {
+        CusButton({
+          normalImage: $rawfile("images/home/filing.png"),
+          activeImage: $rawfile("images/home/filing_active.png"),
+          style: { width: "100%", height: 54 }
+        }).margin({ bottom: 5 }).onClick(() => {
+          router.pushUrl({
+            url: "pages/filing/Index"
+          })
+        })
+      }
+
+      MenuItem() {
+        CusButton({
+          normalImage: $rawfile("images/home/reboot.png"),
+          activeImage: $rawfile("images/home/reboot_active.png"),
+          style: { width: "100%", height: 54 }
+        }).margin({ bottom: 5 }).onClick(() => {
+          router.pushUrl({
+            url: "pages/reboot/Index"
+          })
+        })
+      }
+
+      MenuItem() {
+        CusButton({
+          normalImage: $rawfile("images/home/config.png"),
+          activeImage: $rawfile("images/home/config_active.png"),
+          style: { width: "100%", height: 54 }
+        }).onClick(() => {
+          router.pushUrl({
+            url: "pages/setting/Index"
+          })
+        })
+      }
+    }
+    .width(this.mediaWidth)
+    .borderRadius(0)
+  }
+
   build() {
     Row() {
       Column() {
@@ -27,8 +72,8 @@ export struct Footer {
       })
 
       CusButton({
-        normalImage: $rawfile("images/home/reboot.png"),
-        activeImage: $rawfile("images/home/reboot_active.png"),
+        normalImage: $rawfile("images/home/robot.png"),
+        activeImage: $rawfile("images/home/robot_active.png"),
         style: { height: 64 }
       }).layoutWeight(1).margin({ left: 4, right: 4 }).onClick(() => {
         router.pushUrl({
@@ -50,7 +95,11 @@ export struct Footer {
         normalImage: $rawfile("images/home/setting.png"),
         activeImage: $rawfile("images/home/setting_active.png"),
         style: { height: 64 }
-      }).layoutWeight(1).margin({ left: 8 })
+      }).layoutWeight(1).margin({ left: 8 }).bindMenu(this.buildMenu, {
+        borderRadius: 3,
+      }).onSizeChange((_, area) => {
+        this.mediaWidth = Number(area.width)
+      })
 
     }.width("100%").height(100).alignItems(VerticalAlign.Bottom)
   }

entry/src/main/ets/pages/home/components/LineCard.ets

@@ -16,48 +16,40 @@ export struct LineCard {
           .fontColor(0xfffff)
           .fontWeight(700)
           .margin({ right: 12 })
-        Column() {
+        Blank()
+        Row() {
           Row() {
-            // Row() {
-            //   Image($rawfile("images/home/error.png")).height(16).margin({ right: 4 })
-            //   Text("故障").fontColor(0xFF3A48).fontSize(16)
-            // }.alignItems(VerticalAlign.Center).margin({ right: 6 })
-
-            Row() {
-              Image($rawfile("images/home/warn.png")).height(16).margin({ right: 4 })
-              Text("告警").fontColor(0xF3B43B).fontSize(16)
-            }.alignItems(VerticalAlign.Center).margin({ right: 6 })
-
-            Row() {
-              Image($rawfile("images/home/using.png")).height(16).margin({ right: 4 })
-              Text("使用中").fontColor(0x33FF29).fontSize(16)
-            }.alignItems(VerticalAlign.Center).margin({ right: 6 })
-
-            //
-            // Row() {
-            //   Image($rawfile("images/home/stop.png")).height(16).margin({ right: 4 })
-            //   Text("未启动").fontColor(0xDBDBDB).fontSize(16)
-            // }.alignItems(VerticalAlign.Center).margin({ right: 6 })
-            Row() {
-              Text("步骤一").fontColor(0x33FF29).fontSize(16)
-            }.alignItems(VerticalAlign.Center).margin({ right: 6 })
-          }.margin({ bottom: 6 })
+            Image($rawfile("images/home/warn.png")).height(12).margin({ right: 4 })
+            Text("告警").fontColor(0xF3B43B).fontSize(12)
+          }.alignItems(VerticalAlign.Center).margin({ right: 6 })
 
           Row() {
-            Row() {
-              Image($rawfile("images/home/electric_normal.png")).height(16).margin({ right: 4 })
-              Text("电量").fontColor(0x33FF29).fontSize(16)
-            }.alignItems(VerticalAlign.Center).margin({ right: 6 })
+            Image($rawfile("images/home/using.png")).height(12).margin({ right: 4 })
+            Text("使用中").fontColor(0x33FF29).fontSize(12)
+          }.alignItems(VerticalAlign.Center).margin({ right: 6 })
+
+          // Row() {
+          //   Image($rawfile("images/home/stop.png")).height(12).margin({ right: 4 })
+          //   Text("未启动").fontColor(0xDBDBDB).fontSize(12)
+          // }.alignItems(VerticalAlign.Center).margin({ right: 6 })
+
+          Row() {
+            Image($rawfile("images/home/electric_normal.png")).height(12).margin({ right: 4 })
+            Text("电量：65%").fontColor(0x33FF29).fontSize(12)
+          }.alignItems(VerticalAlign.Center).margin({ right: 6 })
+
+          // Row() {
+          //   Image($rawfile("images/home/electric_warn.png")).height(12).margin({ right: 4 })
+          //   Text("电量").fontColor(0xFF3A48).fontSize(12)
+          // }.alignItems(VerticalAlign.Center)
 
-            // Row() {
-            //   Image($rawfile("images/home/electric_warn.png")).height(16).margin({ right: 4 })
-            //   Text("电量").fontColor(0xFF3A48).fontSize(16)
-            // }.alignItems(VerticalAlign.Center)
-          }
         }
-        .justifyContent(FlexAlign.End)
-        .layoutWeight(1)
-      }.margin({ bottom: 12 })
+        .justifyContent(FlexAlign.SpaceBetween)
+      }.margin({ bottom: 8 }).width("100%")
+
+      Row() {
+        Text("当前步骤").fontSize(16).fontColor(0xffffff)
+      }.margin({ bottom: 12 }).width("100%")
 
       Row() {
         CusButton({
@@ -89,7 +81,6 @@ export struct LineCard {
       bottom: 6
     })
     .width("100%")
-    .height("100%")
     .borderRadius(10)
   }
 }

entry/src/main/ets/pages/ring/Index.ets

@@ -0,0 +1,91 @@
+export interface RingOptions {
+  color: ResourceColor
+  count: number
+  animate?: boolean
+}
+
+
+@Component
+export struct RingProgress {
+  @Prop @Watch("setup") option: RingOptions[] = []
+  @Prop style: SizeOptions
+  @State percent: number[] = []
+  private total: number = 0
+  public strokeWidth: number = 20
+
+  aboutToAppear(): void {
+    this.setup()
+  }
+
+  setup() {
+    this.total = this.option.reduce((p: number, c: RingOptions) => p + c.count, 0)
+    let prev = 0
+    this.option.forEach((item, index) => {
+      this.percent[index] = prev
+      prev += item.count / this.total
+    })
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.Center }) {
+      ForEach(this.option, (item: RingOptions, index: number) => {
+        singleRing({
+          color: item.color,
+          style: this.style,
+          percent: this.percent[index] || 0,
+          animate: item.animate ?? true,
+          strokeWidth: this.strokeWidth
+        })
+      })
+
+    }.width(this.style.width).height(this.style.height)
+  }
+}
+
+
+@Component
+struct singleRing {
+  @Prop color: ResourceColor
+  @Prop style: SizeOptions
+  @Prop @Watch("setup") percent: number
+  @State dashOffset: number[] = [0, 0]
+  public strokeWidth: number = 20
+  public animate: boolean = true
+
+  aboutToAppear(): void {
+    let r = Number(this.style!.width!) / 2
+    let perimeter = Math.PI * 2 * r
+    this.dashOffset = [0, perimeter]
+    this.setup()
+  }
+
+  setup() {
+    let r = Number(this.style!.width!) / 2
+    let perimeter = Math.PI * 2 * r
+    let changeLine = perimeter * (1 - this.percent) - this.dashOffset[0]
+    let changeDash = perimeter * this.percent - this.dashOffset[1]
+    let time = 0
+
+    let tick = setInterval(() => {
+      time++
+      if (time > 30) {
+        clearInterval(tick)
+        return
+      }
+      this.dashOffset = [this.dashOffset[0] + changeLine / 30, this.dashOffset[1] + changeDash / 30]
+    }, 1000 / 60)
+  }
+
+  build() {
+    Circle()
+      .width(this.style.width)
+      .height(this.style.height)
+      .strokeWidth(this.strokeWidth)
+      .stroke(this.color)
+      .fillOpacity(0)
+      .strokeDashArray(this.dashOffset)
+      .rotate({
+        angle: -90
+      })
+  }
+}

entry/src/main/ets/pages/setting/Index.ets

@@ -1,4 +1,7 @@
+import { CusButton } from '../components/button/Index'
 import { Layout } from '../components/layout/Index'
+import { Title } from '../components/title/Index'
+import { router } from '@kit.ArkUI'
 
 @Component
 @Entry
@@ -6,6 +9,15 @@ struct Setting {
   build() {
     Column() {
       Layout({ mode: 2 }) {
+        Column() {
+          Row() {
+            Title({ title: "系统配置" })
+            CusButton({ normalImage: $rawfile("images/back.png"), style: { width: 120, height: 50 } })
+              .margin({ left: 24 }).onClick(() => {
+              router.back()
+            })
+          }.margin({ bottom: 18 })
+        }.width("100%").height("100%").padding(18)
       }
     }.width("100%").height("100%")
   }