Bozzys_HMOS/entry/src/main/ets/pages/PageHomeComponents/TabHome.ets

import { Job } from '../../api/rsp/Job';
import { Message } from '../../api/rsp/Message';
import { Task } from '../../api/rsp/Task';
import { CardContainer } from '../../components/CardContainer';
import { VMHome } from '../../vm/VMHome';

/**
 * 首页Tab页面
 */
@Component
export struct TabHome {
  // 父组件传递
  @Link vm: VMHome

  aboutToAppear(): void {
    this.vm.init()
  }

  build() {
    Column() {
      this.TopBar()
      Refresh({ refreshing: $$this.vm.isTabHomeRefreshing }) {
        Column() {
          this.TODOStatus()
          this.TODOList()
        }.width("100%").height("100%")
      }.width("100%").layoutWeight(1).onRefreshing(() => {
        this.vm.onTabHomeRefresh()
      })
    }
    .width("100%")
    .height("100%")
    .clip(false)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  /**
   * 顶部状态栏
   */
  @Builder
  TopBar() {
    Column() {
      Row() {
        Stack() {
          Image($r("app.media.user")).fillColor(Color.White).margin(8)
          Image(this.vm.user.avatar)
        }
        .width(36)
        .height(36)
        .borderRadius("50%")
        .backgroundColor("#FFD700")

        Column() {
          Text(this.vm.user.nickname).fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Medium)
          Text("角色类型").fontSize(12).fontColor(Color.White).opacity(0.8)
        }.layoutWeight(1).margin({ left: 10, right: 10 }).alignItems(HorizontalAlign.Start)

        Stack() {
          Image($r("app.media.bell")).width(19).height(19).fillColor(Color.White)
          Text(this.vm.messageUnreadCount > 99 ? "99+" : `${this.vm.messageUnreadCount}`)
            .backgroundColor("#FF4500")
            .borderRadius("50%")
            .fontColor(Color.White)
            .fontSize(10)
            .position({ top: -5, left: "52%" })
            .constraintSize({ minWidth: 15, minHeight: 15 })
            .textAlign(TextAlign.Center)
            .padding({ left: 2, right: 2 })
            .visibility(this.vm.messageUnreadCount == 0 ? Visibility.Hidden : Visibility.Visible)
        }.width(36).height(24).onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: "pages/PageMessage" }).catch()
        })

        // Stack() {
        //   Image($r("app.media.settings")).width(18).height(18).fillColor(Color.White)
        // }.width(36).height(24).onClick(() => {
        //   // const am = abilityAccessCtrl.createAtManager()
        //   // am.requestPermissionsFromUser(this.getUIContext().getHostContext(), ["ohos.permission.ACCESS_BLUETOOTH"]).then((data) => {
        //   //   console.log("权限请求", JSON.stringify(data))
        //   // })
        //   // const bm = new BleManager("CC:BA:97:21:71:CA")
        //   // bm.connect()
        // })
      }
      .width("100%")
      .padding({
        left: 16,
        top: 15,
        right: 16,
        bottom: 15
      })
    }
    .width("100%")
    .linearGradient({ angle: 90, colors: [['#FF8C00', 0.0], ['#FFA500', 1.0]] })
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  /**
   * 待办状态
   */
  @Builder
  TODOStatus() {
    Column() {
      Text(`今天有${this.vm.taskProgressCount}个待办任务`)
        .width("100%")
        .height(51)
        .backgroundColor("#E6F7FF")
        .fontSize(14)
        .fontColor("#333333")
        .textAlign(TextAlign.Center)
      Row() {
        Column() {
          Text(`${this.vm.taskProgressCount}`).fontSize(24).fontColor("#FFA500").fontWeight(FontWeight.Bold)
          Row() {
            Image($r("app.media.job_ing")).width(18).height(18).fillColor(Color.Black)
            Text("进行中").fontSize(14).fontColor($r("app.color.text")).fontWeight(FontWeight.Bold).margin({ left: 5 })
          }.margin({ top: 8 })
        }
        .margin(5)
        .layoutWeight(1)
        .height(80)
        .backgroundColor("#FFF5EB")
        .borderRadius(12)
        .justifyContent(FlexAlign.Center)

        Column() {
          Text(`${this.vm.taskFinishedCount}`).fontSize(24).fontColor("#32CD32").fontWeight(FontWeight.Bold)
          Row() {
            Image($r("app.media.job_finish")).width(18).height(18).fillColor(Color.Black)
            Text("本月完成").fontSize(14).fontColor($r("app.color.text")).fontWeight(FontWeight.Bold).margin({ left: 5 })
          }.margin({ top: 8 })
        }
        .margin(5)
        .layoutWeight(1)
        .height(80)
        .backgroundColor("#FFF5EB")
        .borderRadius(12)
        .justifyContent(FlexAlign.Center)
      }
      .padding({
        left: 5,
        right: 5,
        top: 10,
        bottom: 10
      })
    }.width("100%").margin({ top: 3 })
  }

  @Builder
  TODOList() {
    List() {
      ListItem() {
        Row() {
          Text("当前任务").fontSize(14).fontColor("#333333").fontWeight(FontWeight.Medium)
          Row().layoutWeight(1)
          Text("查看全部").fontSize(14).fontColor("#1E90FF").fontWeight(FontWeight.Medium)
        }.width("100%").height(46).onClick(() => {
          this.vm.updateTabIndex(2)
        })
      }.padding({ left: 16, right: 16 })

      // 空数据提示
      ListItem() {
        CardContainer() {
          Column() {
            Text("您当前暂无任务").fontSize(14).fontColor($r("app.color.text"))
          }.width("100%").height(102).justifyContent(FlexAlign.Center)
        }
      }.padding({ left: 16, right: 16 })
      .visibility(this.vm.homeTasks.length == 0 ? Visibility.Visible : Visibility.None)

      ForEach(this.vm.homeTasks, (task: Task, idx: number) => {
        ListItem() {
          CardContainer({ paddings: 16 }) {
            Column() {
              Row() {
                Text(task.name).fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium)
                Row().layoutWeight(1)
                // Text("待办")
                //   .fontSize(12)
                //   .fontColor("#333333")
                //   .backgroundColor("#FFD700")
                //   .borderRadius(20)
                //   .height(24)
                //   .padding({ left: 10, right: 10 })
                //   .textAlign(TextAlign.Center)
              }

              Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center, direction: FlexDirection.Row }) {
                // Image($r("app.media.location")).width(12).height(12).fillColor("#1E90FF").margin({ right: 5 })
                // Text("车间B区")
                //   .fontSize(13)
                //   .fontColor("#666666")
                //   .margin({ right: 12 })
                //   .height(24)
                //   .textAlign(TextAlign.Center)
                // 编号
                Image($r("app.media.jobs")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
                Text(`${task.orderNo}`)
                  .fontSize(13)
                  .fontColor("#666666")
                  .margin({ right: 12 })
                  .height(24)
                  .textAlign(TextAlign.Center)
                // 负责人
                Image($r("app.media.user")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
                Text(`负责人：${task.initiatorName}`)
                  .fontSize(13)
                  .fontColor("#666666")
                  .margin({ right: 12 })
                  .height(24)
                  .textAlign(TextAlign.Center)
              }.margin({ top: 10 })

              Row() {
                Text(`当前任务：`)
                  .fontSize(13)
                  .fontColor("#666666")
                  .height(24)
                Text(`${task.currentNodeName ?? '--'}`)
                  .backgroundColor("#1E90FF")
                  .borderRadius(4)
                  .padding({
                    left: 5,
                    top: 3,
                    right: 5,
                    bottom: 3
                  })
                  .fontSize(12)
                  .fontColor(Color.White)
                Text("今天 14:00")
                  .margin({ left: 10 })
                  .fontColor("#999999")
                  .fontSize(12)
                  .layoutWeight(1)
                  .textAlign(TextAlign.End)
              }.width("100%").margin({ bottom: -8 })
            }.width("100%").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
          }
        }
        .width("100%")
        .clip(false)
        .padding({ left: 16, right: 16 })
        .margin({ bottom: idx >= (this.vm.homeTasks.length - 1) ? 0 : 15 })
      })
      ListItem() {
        Row() {
          Text("最新消息").fontSize(14).fontColor("#333333").fontWeight(FontWeight.Medium)
          Row().layoutWeight(1)
          Text("全部消息").fontSize(14).fontColor("#1E90FF").fontWeight(FontWeight.Medium)
        }.width("100%").height(46).onClick(() => {
          this.getUIContext().getRouter().pushUrl({ url: "pages/PageMessage" }).catch()
        })
      }.padding({ left: 16, right: 16 })

      // 空数据提示
      ListItem() {
        CardContainer() {
          Column() {
            Text("您当前暂无消息").fontSize(14).fontColor($r("app.color.text"))
          }.width("100%").height(102).justifyContent(FlexAlign.Center)
        }
      }.padding({ left: 16, right: 16 })
      .visibility(this.vm.homeMessages.length == 0 ? Visibility.Visible : Visibility.None)

      ForEach(this.vm.homeMessages, (msg: Message) => {
        ListItem() {
          CardContainer({ paddings: 16 }) {
            Column() {
              Text(`${msg.title ?? "提醒"}`).fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium).margin({ bottom: 10 })
              Text(`${msg.templateContent}`).fontSize(13).fontColor("#666666").lineHeight(18)
              Row() {
                Text("作业管理").fontSize(12).fontColor("#999999").layoutWeight(1)
                Text("09:45").fontSize(12).fontColor("#999999")
              }.margin({ top: 6, bottom: -5 })
            }.width("100%").alignItems(HorizontalAlign.Start)
          }
        }
        .width("100%")
        .margin({ bottom: 15 })
        .padding({ left: 16, right: 16 })
      })
    }
    .width("100%").layoutWeight(1).scrollBar(BarState.Off)
  }
}