xf-ohos/entry/src/main/ets/pages/MaintenanceStation.ets

import { TitleStateComp } from '../common/component/TitleStateComp';
import { BottomOperateComp } from '../common/component/BottomOperateComp';
import router from '@ohos.router';

export default class repairList {
  deviceName?:string
  unqualifiedQuantity?:number
  repairedQuantity?:number
  time?:string
}
@Entry
@Component
struct MaintenanceStation{

  textcontroller: TextInputController = new TextInputController()
  @State deviceName?:string=''
  @State click:number=-1
  private  repairList:Array<repairList>=[
    {deviceName:"DS123422233卫星天线1",unqualifiedQuantity:10,repairedQuantity:5,time:'2024/4/30 15:11:11'},
  {deviceName:"DS123422233卫星天线2",unqualifiedQuantity:10,repairedQuantity:5,time:'2024/4/30 15:11:11'},
{deviceName:"DS123422233卫星天线3",unqualifiedQuantity:10,repairedQuantity:5,time:'2024/5/1 15:11:11'},
    {deviceName:"DS123422233卫星天线4",unqualifiedQuantity:10,repairedQuantity:5,time:'2024/4/30 15:11:11'},
    {deviceName:"DS123422233卫星天线5",unqualifiedQuantity:10,repairedQuantity:5,time:'2024/4/30 15:11:11'},
    {deviceName:"DS123422233卫星天线6",unqualifiedQuantity:10,repairedQuantity:5,time:'2024/5/1 15:11:11'},
  ]
  private isHomePage:boolean = false
  build(){
    Column(){
      TitleStateComp({isHomePage : this.isHomePage})
      Row(){
        Column(){
          Text('待维修产品'+'['+this.repairList.length.toString()+']')
            .fontSize(px2vp(51))
            .fontColor('#e6000000')
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Start)
            .width('90%')
            .height('8%')
          List({ space: 10, initialIndex: 0 }) {
            ForEach(this.repairList, (item:repairList,index:number) => {
              ListItem() {
                Column(){
                  Text(item.deviceName)
                    .fontWeight(FontWeight.Medium)
                    .fontSize(px2vp(32))
                    .fontColor('#e6000000')
                    .width('100%')
                    .height('40%')
                  Row(){
                    Text('不合格数')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .width('20%')
                      .height('100%')
                    Text(item.unqualifiedQuantity?.toString())
                      .fontWeight(FontWeight.Medium)
                      .fontSize(px2vp(27))
                      .fontColor('#e6000000')
                      .width('20%')
                      .height('100%')
                    Text('已维修数')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .width('20%')
                      .height('100%')
                    Text(item.repairedQuantity?.toString())
                      .fontWeight(FontWeight.Medium)
                      .fontSize(px2vp(27))
                      .fontColor('#e6000000')
                      .width('10%')
                      .height('100%')
                  }.width('100%')
                  .height('30%')
                  Row(){
                    Text('审理时间:')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .width('30%')
                      .height('100%')
                    Text(item.time)
                      .fontWeight(FontWeight.Medium)
                      .fontSize(px2vp(27))
                      .fontColor('#e6000000')
                      .width('70%')
                      .height('100%')
                  }.width('100%')
                  .height('30%')


                }.width('100%')
                .height('25%')
                .borderRadius(15)
                .padding({left:10})
                .backgroundColor(this.click===index?$r('app.color.robot_set_card_blue'):$r('app.color.general_card_background_color'))
                .onClick(()=>{
                  this.click=index
                  this.deviceName=item.deviceName
                })
              }
            }
              // , item => item
            )
          }
          .width('90%')
          .height('92%')

        }.height('100%')
        .width('30%')
        Column(){
          Text('故障详情')
            .fontSize(px2vp(51))
            .fontColor('#e6000000')
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Start)
            .width('90%')
            .height('8%')
          Text(this.deviceName)
            .fontWeight(FontWeight.Medium)
            .fontSize(px2vp(32))
            .fontColor('#e6000000')
            .width('100%')
            .height('5%')
        }.height('100%')
        .width('30%')
        Column(){
          Row(){
            Text('不合格品状况')
              .fontSize(px2vp(51))
              .fontColor('#e6000000')
              .fontWeight(FontWeight.Medium)
              .textAlign(TextAlign.Start)
              .width('60%')
              .height('100%')
            Text('操作')
              .fontSize(px2vp(51))
              .fontColor('#e6000000')
              .fontWeight(FontWeight.Medium)
              .textAlign(TextAlign.Start)
              .width('40%')
              .height('100%')
          }
          .width('100%')
          .height('8%')
          Row(){
            Row(){
              Column(){
                Column(){
                  Row(){
                    Image($r('app.media.pending_report'))
                      .width(px2vp(37))
                      .height(px2vp(37))
                      .margin({left:10})
                    Text('待处理报故')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .margin({left:5})

                  }
                  .height('30%')
                  .width("100%")
                  Text('100')
                    .textAlign(TextAlign.Center)
                    .height('70%')
                    .width("100%")
                    .fontSize(px2vp(80))
                    .fontColor($r('app.color.OtherStorage_CallMaterials_text_color'))
                    .fontWeight(FontWeight.Bold)

                }.width('90%')
                .height('45%')
                .borderRadius(px2vp(15))
                .margin({ left:10,right:10,top:5,bottom:5 })
                .backgroundColor($r('app.color.robot_set_card_white'))
                Divider()
                  .width('85%')
                  .margin({left:20})
                Column(){
                  Row(){
                    Image($r('app.media.repair_products'))
                      .width(px2vp(37))
                      .height(px2vp(37))
                      .margin({left:10})
                    Text('待维修产品')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .margin({left:5})

                  }
                  .height('30%')
                  .width("100%")
                  Text('100')
                    .textAlign(TextAlign.Center)
                    .height('70%')
                    .width("100%")
                    .fontSize(px2vp(80))
                    .fontColor($r('app.color.OtherStorage_CallMaterials_text_color'))
                    .fontWeight(FontWeight.Bold)

                }.width('90%')
                .height('45%')
                .borderRadius(px2vp(15))
                .margin({ left:10,right:10,top:5,bottom:5 })
              }
              .width('50%')
              .height('100%')
              Divider()
                .vertical(true)
                .height('80%')
              Column(){
                Column(){
                  Row(){
                    Image($r('app.media.hear'))
                      .width(px2vp(37))
                      .height(px2vp(37))
                      .margin({left:10})
                    Text('审理中')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .margin({left:5})

                  }
                  .height('30%')
                  .width("100%")
                  Text('10')
                    .textAlign(TextAlign.Center)
                    .height('70%')
                    .width("100%")
                    .fontSize(px2vp(80))
                    .fontColor($r('app.color.OtherStorage_CallMaterials_text_color'))
                    .fontWeight(FontWeight.Bold)

                }.width('90%')
                .height('45%')
                .borderRadius(px2vp(15))
                .margin({ left:10,right:10,top:5,bottom:5 })

                Divider()
                  .width('85%')
                  .margin({right:20})
                Column(){
                  Row(){
                    Image($r('app.media.maintenance_history'))
                      .width(px2vp(37))
                      .height(px2vp(37))
                      .margin({left:10})
                    Text('维修历史')
                      .fontWeight(FontWeight.Regular)
                      .fontSize(px2vp(27))
                      .fontColor('#99000000')
                      .margin({left:5})

                  }
                  .height('30%')
                  .width("100%")
                  Text('999+')
                    .textAlign(TextAlign.Center)
                    .height('70%')
                    .width("100%")
                    .fontSize(px2vp(80))
                    .fontColor($r('app.color.OtherStorage_CallMaterials_text_color'))
                    .fontWeight(FontWeight.Bold)

                }.width('90%')
                .height('45%')
                .borderRadius(px2vp(15))
                .margin({ left:10,right:10,top:5,bottom:5 })
                .backgroundColor($r('app.color.robot_set_card_white'))
              }
              .width('50%')
              .height('100%')

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

            Column(){
              Row(){
                Text('生产履历')
                  .fontWeight(FontWeight.Medium)
                  .fontSize(px2vp(32))
                  .fontColor('#e6000000')
                  .width('60%')
                  .height('100%')
                Image($r('app.media.product_history'))
                  .width(px2vp(64))
                  .height(px2vp(64))
              }.width('95%')
              .height('30%')
              .margin({right:20,left:10})
              .padding({left:10,right:10})
              .borderRadius(px2vp(15))
              .backgroundColor($r('app.color.robot_set_card_white'))

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

          }.width('100%')
          .height('40%')
          Blank()
          Column(){
            Text('扫码')
              .fontSize(px2vp(51))
              .fontColor('#e6000000')
              .fontWeight(FontWeight.Medium)
              .textAlign(TextAlign.Start)
              .width('100%')
              .height('10%')
            Column(){
              Image($r('app.media.scan_qr'))
                .width(px2vp(141))
                .height(px2vp(141))
            }.width('100%')
            .height('50%')
            .justifyContent(FlexAlign.Center)
            Row(){
              Image($r('app.media.shaoma'))
                .width('56px')
                .height('56px')
                .margin({right:10})
              TextInput({ text: '', placeholder: '点击扫码或者输入编码', controller: this.textcontroller})
                .placeholderColor(Color.Grey)
                .placeholderFont({ size: 14, weight: 400 })
                .caretColor(Color.Blue)
                .backgroundColor($r('app.color.robot_set_card_white'))
                .height('100%')
                .fontSize(px2vp(32))
                .fontColor(Color.Black)
                .onSubmit(()=>{
                  router.pushUrl({
                    url:'pages/MaintenanceStationOperations'
                  })
                })
            }.width('80%')
            .backgroundColor($r('app.color.robot_set_card_white'))
            .borderRadius(15)
            .height('15%')
          }
          .width('90%')
          .height('40%')
        }.height('100%')
        .width('40%')

      }.width("100%")
      .height("84%")
      BottomOperateComp({isHomePage : this.isHomePage})
    }
    .width("100%")
    .height("100%")
    .backgroundColor($r('app.color.title_bar_background'))

  }
}