WonderfulDemo/entry/src/main/ets/common/component/TaskComp.ets

import {task, taskclass} from '../util/request/StorageRequestInstance'
@Component
export struct TaskComp {
  @State bugNum:number=0
  @State completeNum:number=0
  @State kittingNum:number=0
  @State planNum:number=0
  private isHomePage?: boolean = false
  aboutToAppear() {
    ////获取仓储占有率
    task().then((res: taskclass) => {
      console.log("on page show11", res.bugNum, res.completeNum, res.kittingNum, res.planNum
      )
      this.bugNum = res.bugNum, this.completeNum = res.completeNum, this.kittingNum = res.kittingNum
      this.planNum = res.planNum
    })
  }
  build(){
    //中间框
    Row(){
      Column(){
        Text('未完成计划')
          .fontSize(px2vp(27))
          .opacity(0.6)
          .fontColor('#FFFFFF')
          .width('100%')
          .fontWeight(FontWeight.Bold)
          .padding({left:10,top:10})
        Text('20')
          .fontSize(px2vp(64))
          .fontColor('#FFFFFF')
          .width('100%')
          .fontWeight(FontWeight.Bold)
          .padding({left:10,top:10})
        Blank()
        Text('产品种类：'+"11")
          .fontSize(px2vp(27))
          .opacity(0.6)
          .fontColor('#FFFFFF')
          .width('100%')
          .fontWeight(FontWeight.Bold)
          .padding({left:10,top:10,bottom:10})

      }.width('40%')
      .backgroundImage($r('app.media.Unfinished_Plan'))
      .backgroundImageSize({width:'100%',height:'100%'})
      .height('100%')
      .borderRadius(15)


      //左右column
      Column(){
        //左边
        Column(){
          Row(){
            Blank()
            Image($r("app.media.Unfinished_orders"))
              .width('38px')
              .height('38px')
            Text().width('5%')
            Text('今日计划').width('40%')
              .height('100%')
              .fontColor('#99000000')
              .fontSize(px2vp(19))
              .fontWeight(FontWeight.Regular)
            Blank()

          }.width('100%')

          .height('30%')
          Text(this.planNum.toString()).width('80%')
            .height('70%')
            .fontColor('#e6000000')
            .textAlign(TextAlign.Center)
            .fontSize(px2vp(64))
            .fontWeight(FontWeight.Bold)

        }.width('100%')
        .height('50%')
        Divider().vertical(false)
          .width('80%')
        Blank()
        Column(){
          Blank()
          Row(){
            Blank()
            Image($r("app.media.completeMaterials"))
              .width('38px')
              .height('38px')
            Text().width('5%')
            Text('主料齐套').width('40%')
              .height('100%')
              .fontColor('#99000000')
              .fontSize(px2vp(19))
              .fontWeight(FontWeight.Regular)
            Blank()

          }.width('100%')
          .height('30%')
          Text(this.kittingNum.toString()).width('80%')
            .height('60%')
            .fontColor('#e6000000')
            .textAlign(TextAlign.Center)
            .fontSize(px2vp(64))
            .fontWeight(FontWeight.Bold)


        }.width('100%')
        .height('50%')


      }.width('30%')
      .height('70%')
      .borderRadius(15)
      .alignItems(HorizontalAlign.End)
      Divider().vertical(true)
        .height('60%')
      Column(){
        //右边
        Column(){
          Row(){
            Blank()
            Image($r("app.media.completedToday"))
              .width('38px')
              .height('38px')
            Text().width('5%')
            Text('今日完成').width('40%')
              .height('100%')
              .fontColor('#99000000')
              .fontSize(px2vp(19))
              .fontWeight(FontWeight.Regular)

            Blank()

          }.width('100%')

          .height('30%')
          Text(this.completeNum.toString()).width('80%')
            .height('70%')
            .fontColor('#e6000000')
            .textAlign(TextAlign.Center)
            .fontSize(px2vp(64))
            .fontWeight(FontWeight.Bold)

        }.width('100%')
        .height('50%')
        Divider().vertical(false)
          .width('80%')
        Column(){
          Blank()
          Row(){
            Blank()
            Image($r("app.media.todayReport"))
              .width('38px')
              .height('38px')
            Text().width('5%')
            Text('今日报故').width('40%')
              .height('100%')
              .fontColor('#99000000')
              .fontSize(px2vp(19))
              .fontWeight(FontWeight.Regular)
            Blank()

          }.width('100%')

          .height('30%')
          Text(this.bugNum.toString()).width('80%')
            .height('60%')
            .fontColor('#e6000000')
            .textAlign(TextAlign.Center)
            .fontSize(px2vp(64))
            .fontWeight(FontWeight.Bold)

        }.width('100%')
        .height('50%')


      }.width('30%')
      .height('70%')
      .borderRadius(15)
      .alignItems(HorizontalAlign.Start)

    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .borderRadius(15)
    .margin({left:10})
  }
}