首页重构

entry/src/main/ets/pages/Login.ets

@@ -1,4 +1,5 @@
 import router from '@ohos.router'
+import { getDeviceId } from '../utils/System'
 import Loading from './components/Loading/Index'
 
 
@@ -65,7 +66,7 @@ struct Index {
     customStyle: true
   })
 
-  login() {
+  async login() {
     if (this.remember) {
       AppStorage.set("account", this.account)
       AppStorage.set("password", this.password)
@@ -76,13 +77,21 @@ struct Index {
       AppStorage.set("remember", false)
     }
 
+    let deviceId = await getDeviceId()
+
+    // this.controller.open()
+
+    // padLoginUsingPost({
+    //   username: this.account,
+    //   password: this.password,
+    //   imei: deviceId
+    // }).then(() => {
     router.pushUrl({
       url: "pages/home/Index"
-    }).then(() => {
-      setTimeout(() => {
-        router.clear()
-      }, 500)
     })
+    // }).finally(() => {
+    //   this.controller.close()
+    // })
   }
 
   build() {

entry/src/main/ets/pages/components/Loading/Button.ets

@@ -42,7 +42,7 @@ function info(size: CusButtonSize, block: boolean) {
 
 @Extend(Button)
 function primary(size: CusButtonSize, block: boolean) {
-  .backgroundColor(0x0D419D)
+  .backgroundColor(0x33a7f4)
   .fontColor(0xffffff)
   .border({
     width: 1,

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

@@ -1,4 +1,4 @@
-import CusButton, { CusButtonType } from './Button'
+import CusButton, { CusButtonSize, CusButtonType } from './Button'
 
 @CustomDialog
 export default struct Loading {
@@ -24,15 +24,25 @@ export default struct Loading {
   build() {
     Column() {
       LoadingProgress()
-        .width(160)
-        .height(160)
+        .width(120)
+        .height(120)
+        .margin({ bottom: 24 })
+        .color(0x33a7f4)
       if (this.showCancel) {
-        CusButton({ label: "取消", buttonType: CusButtonType.Info, }).margin({ top: 12 }).onClick(() => {
-          this.controller.close()
-        })
+        CusButton({ label: "取消", buttonType: CusButtonType.Primary, buttonSize: CusButtonSize.Small })
+          .margin({ top: 12 })
+          .onClick(() => {
+            this.controller.close()
+          })
       }
     }
-    .backgroundColor(0xffffff)
+    .shadow({
+      offsetX: 0,
+      offsetY: 0,
+      color: 0x1d3965,
+      radius: 15
+    })
+    .backgroundColor(0xaa1d3965)
     .justifyContent(FlexAlign.Center)
     .alignItems(HorizontalAlign.Center)
     .borderRadius(6)

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

@@ -25,7 +25,7 @@ export struct CusButton {
   public text?: string
   public normalImage?: Resource
   public activeImage?: Resource
-  public style?: ButtonStyle
+  public style?: SizeOptions
   private modifier: CusButtonModifier = new CusButtonModifier()
 
   aboutToAppear(): void {
@@ -43,7 +43,7 @@ export struct CusButton {
         Text(this.text).fontFamily("Alimama").fontSize(24)
       }
     }
-    .width(this.style?.width)
+    .width(this.style?.width || "100%")
     .height(this.style?.height)
     .justifyContent(FlexAlign.Center)
     .attributeModifier(this.modifier)

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

@@ -1,11 +1,19 @@
-import { Layout } from '../components/layout/Index'
 import { router } from '@kit.ArkUI'
 import { common } from '@kit.AbilityKit'
+import { dateFormat } from '../../utils/Utils'
+import { Footer } from './components/Footer'
+import { Block } from './components/Block'
+import { LineCard } from './components/LineCard'
+import { WarnCard } from './components/WarnCard'
 
 
 @Component
 @Entry
 struct Home {
+  @State currentTime: string = ""
+  @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'),
@@ -15,6 +23,22 @@ struct Home {
     $rawfile('images/home/车型库采集.png'),
     $rawfile('images/home/机器人重置.png'),
   ]
+  private timeTick: number = -1
+
+  onPageShow(): void {
+    setTimeout(() => {
+      router.clear()
+    }, 500)
+    this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
+    this.timeTick = setInterval(() => {
+      this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
+    }, 1000)
+  }
+
+  onPageHide(): void {
+    clearInterval(this.timeTick)
+    this.timeTick = -1
+  }
 
   exit() {
     let context = getContext(this) as common.UIAbilityContext
@@ -42,27 +66,196 @@ struct Home {
 
   build() {
     Column() {
-      Layout() {
+      Row() {
         Row() {
-          Image($rawfile("images/home/exit.png")).height(48).onClick(() => {
-            this.exit()
-          })
-        }.margin({ bottom: 16 }).padding({ top: 16, bottom: 16, right: 24 }).width("100%").justifyContent(FlexAlign.End)
+          Image($rawfile("images/text_logo.png")).height(36)
+        }.width("20%").height("100%").justifyContent(FlexAlign.Center).padding({ top: 18 })
 
-        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
-          ForEach(this.image, (img: Resource, index: number) => {
-            if (index < this.image.length - 1) {
-              Image(img).height(80).margin({ bottom: 48 }).onClick(() => {
-                this.toDetail(index)
+        Row() {
+          Row() {
+            Text("机动车智能查验机器人系统")
+              .fontFamily("Alimama")
+              .fontSize(32)
+              .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
+              .textShadow({
+                offsetX: 0.5,
+                offsetY: 0,
+                radius: 2,
+                color: 0x00627E
               })
-            } else {
-              Image(img).height(80).width('100%').onClick(() => {
-                this.toDetail(index)
-              })
-            }
-          })
-        }.padding({ left: 64, right: 64 })
+          }.linearGradient({ direction: GradientDirection.Top, colors: [[0xACECF7, 0.0], [0xFFFFFF, 1.0]] })
+          .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
+        }
+        .layoutWeight(1)
+
+        .height("100%")
+        .justifyContent(FlexAlign.Center)
+
+        Column() {
+          Column() {
+            Text("当前时间").fontSize(16).fontColor(0xffffff).margin({ bottom: 4 })
+            Text(this.currentTime).fontSize(16).fontColor(0xffffff)
+          }.alignItems(HorizontalAlign.Start)
+        }
+        .width("20%")
+        .height("100%")
+        .justifyContent(FlexAlign.Center)
+        .alignItems(HorizontalAlign.Center)
+        .padding({ top: 18 })
       }
-    }.width("100%").height("100%")
+      .width("100%")
+      .height(72)
+      .justifyContent(FlexAlign.Center)
+      .backgroundImage($rawfile("images/home/header.png"))
+      .backgroundImageSize({ width: "100%", height: "100%" })
+
+      Column() {
+        Row() {
+          Block({ cusMargin: { right: 18 }, title: "所有区域" }) {
+            List({ space: 12 }) {
+              ForEach(this.line, (item: number, index: number) => {
+                ListItem() {
+                  LineCard({
+                    label: item.toString(),
+                    select: this.select === index
+                  })
+                }.width("100%").height(100).onClick(() => {
+                  this.select = index
+                })
+              })
+            }.width("100%").height("100%")
+          }
+
+          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 })
+
+            Row() {
+              Column() {
+                Text("正在查验数量").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
+                Text("40").fontSize(32).fontColor(0xFFCC31).fontWeight(700)
+              }
+              .layoutWeight(1.8)
+              .justifyContent(FlexAlign.Center)
+              .alignItems(HorizontalAlign.Center)
+              .margin({ right: 20 })
+              .backgroundImage($rawfile("images/home/label.png"))
+              .backgroundImageSize({ width: "100%", height: "100%" })
+              .height("100%")
+
+              Column() {
+                Text("完成数量").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
+                Text("34").fontSize(32).fontColor(0x33FF29).fontWeight(700)
+              }
+              .layoutWeight(1.4)
+              .justifyContent(FlexAlign.Center)
+              .alignItems(HorizontalAlign.Center)
+              .margin({ left: 10, right: 10 })
+              .backgroundImage($rawfile("images/home/label.png"))
+              .backgroundImageSize({ width: "100%", height: "100%" })
+              .height("100%")
+
+              Column() {
+                Text("失败").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
+                Text("12").fontSize(32).fontColor(0xFF3A48).fontWeight(700)
+              }
+              .layoutWeight(1)
+              .justifyContent(FlexAlign.Center)
+              .alignItems(HorizontalAlign.Center)
+              .margin({ left: 10 })
+              .backgroundImage($rawfile("images/home/label.png"))
+              .backgroundImageSize({ width: "100%", height: "100%" })
+              .height("100%")
+            }.width("100%").height(100)
+          }
+          .alignItems(HorizontalAlign.Center)
+          .justifyContent(FlexAlign.SpaceBetween)
+          .margin({ left: 18, right: 18 })
+          .layoutWeight(1.5)
+          .height("100%")
+          .backgroundImage($rawfile("images/home/earth.png"))
+          .backgroundImagePosition(Alignment.Top)
+          .backgroundImageSize({
+            width: "90%"
+          })
+
+
+          Block({ cusMargin: { left: 18 }, title: "预警信息" }) {
+            Row() {
+              Column() {
+                Row() {
+                  Image($rawfile("images/home/total_warn.png")).width(48).margin({ right: 6 })
+                  Text("124").fontSize(24).fontColor(0xFF3A48)
+                }.margin({ bottom: 6 })
+
+                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)
+                Column() {
+                  Text("75%").fontColor(0xffffff).fontSize(16)
+                  Text("已处理").fontColor(0xffffff).fontSize(14)
+                }
+              }.layoutWeight(1).height("100%")
+            }.margin({ bottom: 12 }).height(80)
+
+            List({ space: 12 }) {
+              ForEach(this.warn, (item: number, index: number) => {
+                ListItem() {
+                  WarnCard({
+                    onDetail: () => {
+                      router.pushUrl({
+                        url: "pages/alarm/Detail"
+                      })
+                    }
+                  })
+                }.width("100%").height(100)
+              })
+            }.width("100%").layoutWeight(1)
+          }
+
+        }.layoutWeight(1).width("100%")
+
+        Footer()
+      }.layoutWeight(1).width("100%").padding(24)
+    }
+    .width("100%")
+    .height("100%")
+    .backgroundImage($rawfile("images/home/background.png"))
+    .backgroundImageSize({ width: "100%", height: "100%" })
   }
 }

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

@@ -0,0 +1,74 @@
+import { router } from '@kit.ArkUI'
+import { common } from '@kit.AbilityKit'
+import { Layout } from '../components/layout/Index'
+
+
+@Component
+@Entry
+struct Home {
+
+
+  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'),
+  ]
+
+  onPageShow(): void {
+    router.clear()
+  }
+
+  exit() {
+    let context = getContext(this) as common.UIAbilityContext
+    context.terminateSelf()
+  }
+
+  onBackPress(): boolean | void {
+    return true
+  }
+
+  toDetail(index: number) {
+    const url: string[] = [
+      "pages/filing/Index",
+      "pages/monitor/Index",
+      "pages/alarm/Index",
+      "pages/result/Index",
+      "pages/control/Index",
+      "pages/vehicle/Index",
+      "pages/reboot/Index",
+    ]
+    router.pushUrl({
+      url: url[index]
+    })
+  }
+
+  build() {
+    Column() {
+      Layout() {
+        Row() {
+          Image($rawfile("images/home/exit.png")).height(48).onClick(() => {
+            this.exit()
+          })
+        }.margin({ bottom: 16 }).padding({ top: 16, bottom: 16, right: 24 }).width("100%").justifyContent(FlexAlign.End)
+
+        Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
+          ForEach(this.image, (img: Resource, index: number) => {
+            if (index < this.image.length - 1) {
+              Image(img).height(80).margin({ bottom: 48 }).onClick(() => {
+                this.toDetail(index)
+              })
+            } else {
+              Image(img).height(80).width('100%').onClick(() => {
+                this.toDetail(index)
+              })
+            }
+          })
+        }.padding({ left: 64, right: 64 })
+      }
+    }.width("100%").height("100%")
+  }
+}

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

@@ -0,0 +1,33 @@
+@Component
+export struct Block {
+  @BuilderParam buildDefault?: () => void
+  public title: string = ""
+  public cusMargin?: Length | Padding | LocalizedPadding
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.title).fontSize(24).fontColor(0xffffff).fontWeight(700)
+      }
+      .width("100%")
+      .backgroundImage($rawfile("images/home/title.png"))
+      .backgroundImageSize({ width: "100%", height: "100%" })
+      .padding({ left: 42, top: 6, bottom: 6 })
+      .backgroundImagePosition({ x: 12 })
+
+      Column() {
+        this.buildDefault?.()
+      }
+      .layoutWeight(1)
+      .width("100%")
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
+      .padding(12)
+    }
+    .height("100%")
+    .layoutWeight(1)
+    .backgroundImage($rawfile("images/home/block_bg.png"))
+    .backgroundImageSize({ width: "100%", height: "100%" })
+    .margin(this.cusMargin)
+  }
+}

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

@@ -0,0 +1,57 @@
+import { CusButton } from '../../components/button/Index'
+import { router } from '@kit.ArkUI'
+
+@Component
+export struct Footer {
+  build() {
+    Row() {
+      Column() {
+        Row() {
+          Image($rawfile("images/home/avatar.png")).width(32).margin({ right: 12 })
+          Text("当前登录用户：" + "张三").fontSize(16).fontColor(0xffffff)
+        }.margin({ bottom: 12 })
+
+        Text($r("app.string.company")).fontSize(12).fontColor(0xffffff).margin({ bottom: 6 })
+        Text("版本：1.0.0").fontSize(12).fontColor(0xffffff)
+      }.layoutWeight(1).margin({ right: 8 }).alignItems(HorizontalAlign.Start)
+
+
+      CusButton({
+        normalImage: $rawfile("images/home/vehicle.png"),
+        activeImage: $rawfile("images/home/vehicle_active.png"),
+        style: { height: 64 }
+      }).layoutWeight(1).margin({ left: 4, right: 4 }).onClick(() => {
+        router.pushUrl({
+          url: "pages/vehicle/Index"
+        })
+      })
+
+      CusButton({
+        normalImage: $rawfile("images/home/reboot.png"),
+        activeImage: $rawfile("images/home/reboot_active.png"),
+        style: { height: 64 }
+      }).layoutWeight(1).margin({ left: 4, right: 4 }).onClick(() => {
+        router.pushUrl({
+          url: "pages/control/Index"
+        })
+      })
+
+      CusButton({
+        normalImage: $rawfile("images/home/result.png"),
+        activeImage: $rawfile("images/home/result_active.png"),
+        style: { height: 64 }
+      }).layoutWeight(1).margin({ left: 4, right: 4 }).onClick(() => {
+        router.pushUrl({
+          url: "pages/result/Index"
+        })
+      })
+
+      CusButton({
+        normalImage: $rawfile("images/home/setting.png"),
+        activeImage: $rawfile("images/home/setting_active.png"),
+        style: { height: 64 }
+      }).layoutWeight(1).margin({ left: 8 })
+
+    }.width("100%").height(100).alignItems(VerticalAlign.Bottom)
+  }
+}

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

@@ -0,0 +1,95 @@
+import { CusButton } from '../../components/button/Index'
+
+
+@Component
+export struct LineCard {
+  @Prop select: boolean = false
+  @Prop label: string = ""
+  public onMonitor?: () => void
+  public onStatus?: () => void
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.label)
+          .fontSize(36)
+          .fontColor(0xfffff)
+          .fontWeight(700)
+          .margin({ right: 12 })
+        Column() {
+          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 })
+
+          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 })
+
+            // 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 })
+
+      Row() {
+        CusButton({
+          normalImage: $rawfile("images/home/monitor.png"),
+          activeImage: $rawfile("images/home/monitor_active.png"),
+          style: { height: 28 }
+        }).margin({ right: 12 }).layoutWeight(1)
+          .onClick(() => {
+            this.onMonitor?.()
+          })
+        CusButton({
+          normalImage: $rawfile("images/home/status.png"),
+          activeImage: $rawfile("images/home/status_active.png"),
+          style: { height: 28 }
+        }).margin({ left: 12 }).layoutWeight(1)
+          .onClick(() => {
+            this.onStatus?.()
+          })
+      }.width("100%")
+    }
+    .linearGradient({
+      direction: GradientDirection.Top,
+      colors: this.select ? [[0x004994, 0.0], [0x0067F3, 1.0]] : [[0x034B61, 0.0], [0x034B61, 1.0]]
+    })
+    .padding({
+      left: 12,
+      top: 6,
+      right: 12,
+      bottom: 6
+    })
+    .width("100%")
+    .height("100%")
+    .borderRadius(10)
+  }
+}

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

@@ -0,0 +1,38 @@
+import { CusButton } from '../../components/button/Index'
+
+@Component
+export struct WarnCard {
+  public onDetail?: () => void
+
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($rawfile("images/home/time.png")).width(16).margin({ right: 4 })
+          Text("2025-09-23 15:15:53").fontSize(14).fontColor(0xffffff)
+        }
+
+        CusButton({
+          normalImage: $rawfile("images/home/info.png"),
+          activeImage: $rawfile("images/home/info_active.png"),
+          style: { width: 64, height: 28 }
+        }).onClick(() => {
+          this.onDetail?.()
+        })
+      }.width("100%").justifyContent(FlexAlign.SpaceBetween)
+      .margin({ bottom: 12 })
+
+      Text("人员闯入").fontSize(24).fontColor(0xFFCC31)
+    }
+    .backgroundColor(0x034B61)
+    .padding({
+      left: 12,
+      top: 6,
+      right: 12,
+      bottom: 6
+    })
+    .width("100%")
+    .height("100%")
+    .borderRadius(10)
+  }
+}