WonderfulDemo/entry/src/main/ets/pages/process/ProcessStepPage.ets

/*
 * 工步页面
 * */
import { BottomOperateComp } from '../../common/component/BottomOperateComp'
import router from '@ohos.router';
import ProcessData from '../../viewmodel/ProcessData';
import CommonConstants from '../../common/constants/CommonConstants';
import ProcessStep from '../../viewmodel/ProcessStep'
import MaterialInfo from '../../model/MaterialInfo';
import { MaterialCollectView } from '../../view/processview/MaterialCollectView';
import { RecordItemView } from '../../view/processview/RecordItemView';
import { MultimediaCollectView } from '../../view/processview/MultimediaCollectView';
import { EsopView } from '../../view/processview/EsopView';
import { SpotCheckView } from '../../view/processview/SpotCheckView';
import { EquipRecordView } from '../../view/processview/EquipRecordView';
import { DebugPairView } from '../../view/processview/DebugPairView';
import { FixtureView } from '../../view/processview/FixtureView';
import { NameplateBindView } from '../../view/processview/NameplateBindView';
import { pinyin } from 'pinyin-pro';
import HashMap from '@ohos.util.HashMap';
import { ProcessTitleComp } from '../../common/component/ProcessTitleComp';
import JGRequest from '../../common/util/request/Request';
import StartWorkInfo from '../../viewmodel/StartWorkInfo';

const params = router.getParams(); // 获取传递过来的参数对象
const startWorkInfo = params['startWorkInfo']; // 获取开工信息
const processInfo = params['processInfo']; // 获取当前工序信息

@Entry
@Component
struct ProcessStepPage {

  startWorkInfo: StartWorkInfo = startWorkInfo
  @State process: ProcessData = processInfo

  @State processSteps: ProcessStep[] = []

  private stepImages: Resource[] = CommonConstants.STEP_IMAGES
  private stepSelectImages: Resource[] = CommonConstants.STEP_SELECT_IMAGES
  // 选中的工步索引
  @State selectStep: number = -1

  // 报故弹窗
  reportFaultController: CustomDialogController = new CustomDialogController({
    builder: ReportFaultDialog({
    }),
    autoCancel: true,
    alignment: DialogAlignment.TopEnd,
    // gridCount: 3,
    customStyle: true,
  })

  // 报工弹窗
  reportWorkController: CustomDialogController = new CustomDialogController({
    builder: ReportWorkDialog({
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    // gridCount: 3,
    customStyle: true,
  })

  async aboutToAppear() {
    let res: ProcessStep[] = await JGRequest.get("/api/v1/process/opCompent/get/" + 129, {})
    if (res && res.length > 0) {
      this.processSteps = res
      this.selectStep = 0
    }
  }

  build() {
    Column() {
      ProcessTitleComp()
      Row() {
        // 左侧信息和操作栏
        Column() {
          // 信息栏（产品、工序、主料）
          Column() {
            Column() {
              Text(this.startWorkInfo.materialName)
                .fontSize($r('app.float.card_title_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.general_font_opacity'))
                .maxLines(1)
              Text(this.startWorkInfo.materialCode)
                .fontSize($r('app.float.card_info_font_size'))
                .fontColor($r('app.color.general_font_color'))
                .fontWeight(FontWeight.Regular)
                .opacity($r('app.float.card_font_default_opacity'))
                .maxLines(1)
            }
            .height('27%')
            .width('90%')
            .alignItems(HorizontalAlign.Start)
            Column() {
              Text('序列号')
                .fontSize($r('app.float.card_info_font_size'))
                .fontWeight(FontWeight.Regular)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.card_font_default_opacity'))
              Text(this.startWorkInfo.seqNo)
                .fontSize($r('app.float.card_info_font_size'))
                .fontColor($r('app.color.general_font_color'))
                .fontWeight(FontWeight.Medium)
                .opacity($r('app.float.general_font_opacity'))
                .maxLines(1)
            }
            .height('27%')
            .width('90%')
            .alignItems(HorizontalAlign.Start)
            Column() {
              Text('当前工序')
                .fontSize($r('app.float.card_info_font_size'))
                .fontWeight(FontWeight.Regular)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.card_font_default_opacity'))
              Row() {
                Text(this.process.operationName)
                  .fontSize($r('app.float.card_info_font_size'))
                  .fontColor($r('app.color.general_font_color'))
                  .fontWeight(FontWeight.Medium)
                  .opacity($r('app.float.general_font_opacity'))
                Image($r('app.media.subscript'))
                  .height($r('app.float.card_subscript_size'))
                  .width($r('app.float.card_subscript_size'))
              }
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.SpaceBetween)
              .width('90%')
            }
            .height('27%')
            .width('90%')
            .alignItems(HorizontalAlign.Start)
          }
          .height('29%')
          .width('100%')
          .justifyContent(FlexAlign.SpaceEvenly)
          .backgroundColor($r('app.color.general_card_background_color'))
          .borderRadius($r('app.float.general_border_radius'))

          // 操作卡片
          OperateCard({operateName: '叫料', operateImage:$r('app.media.call_material'), clickEvent: ()=>{
            router.pushUrl({
              url: 'pages/process/CallMaterialPage',
              // params: {}
            })
          }})
          OperateCard({operateName: '工位上料', operateImage:$r('app.media.station_loading'), clickEvent: ()=>{
            router.pushUrl({
              url: 'pages/process/StationLoadingPage'
            })
          }})
          OperateCard({operateName: '物料流转', operateImage:$r("app.media.material_circulation"), clickEvent: ()=>{
            router.pushUrl({
              url: 'pages/process/MaterialCirculationPage',
              // params: {}
            })
          }})
          OperateCard({operateName: '图纸', operateImage:$r('app.media.drawing'), clickEvent: ()=>{
            router.pushUrl({
              url: 'pages/process/ProcessDrawingPage',
              params: {
                mainMaterial: this.startWorkInfo.materialCode
              }
            })
          }})
          OperateCard({operateName: '报故', operateImage:$r('app.media.report_fault'), clickEvent: ()=>{
            this.reportFaultController.open()
          }})
          OperateCard({operateName: '报工', operateImage:$r('app.media.report_work'), bgColor: $r('app.color.process_card_green_color'), clickEvent: ()=>{
            this.reportWorkController.open()
          }})
        }
        .height('83%')
        .width('15%')
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(HorizontalAlign.Center)

        // 工步和当前工步的操作
        Column() {
          // 当前工序的工步列表
          List({space: 6}) {
            ForEach(this.processSteps, (item: ProcessStep, index: number)=> {
              ListItem() {
                Column() {
                  Image(this.selectStep === index ? this.stepSelectImages[item.compentType - 1] :  this.stepImages[item.compentType - 1])
                    .width($r('app.float.card_image_size'))
                    .height($r('app.float.card_image_size'))
                  Text(item.compentName)
                    .fontSize($r('app.float.card_info_font_size'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor(this.selectStep === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                    .opacity(this.selectStep === index ? 1 : $r('app.float.general_font_opacity'))
                }
                .height('100%')
                .width('9.5%')
                .justifyContent(FlexAlign.Center)
                .borderRadius($r('app.float.general_border_radius'))
                .backgroundColor(this.selectStep === index ? $r('app.color.process_card_blue_color') : $r('app.color.page_general_background'))
                .onClick(()=>{
                  this.selectStep = index
                })
              }
            })
          }
          .height('9%')
          .width('100%')
          .listDirection(Axis.Horizontal)
          .margin({left: '2%'})

          Column() {
            if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '1') {
              MaterialCollectView({
                startWorkInfo: this.startWorkInfo,
              })
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '2') {
              RecordItemView({
                operationId: this.process.operationId,
                processId: this.startWorkInfo.id
              })
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '3') {
              MultimediaCollectView({
                operationId: this.process.operationId,
                processId: this.startWorkInfo.id,
              })
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '4') {
              EsopView({operationId: this.process.operationId,})
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '5') {
              SpotCheckView({
                operationId: this.process.operationId,
                processId: this.startWorkInfo.id
              })
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '6') {
              EquipRecordView({
                operationId: this.process.operationId,
                processId: this.startWorkInfo.id
              })
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '7') {
              FixtureView()
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '8') {
              DebugPairView()
            } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '9') {
              NameplateBindView({mainMaterial: this.startWorkInfo.materialCode})
            }
          }
          .width('100%')
          .height('91%')
        }
        .height('100%')
        .width('85%')
      }
      .width('100%')
      .height('84%')
      .alignItems(VerticalAlign.Top)
      .margin({left: '1.25%'})
      BottomOperateComp()
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.page_general_background'))
  }
}

@Component
struct OperateCard {
  operateName: string
  operateImage: Resource
  bgColor?: Resource = $r('app.color.general_card_background_color')
  clickEvent?: Function

  build() {
    Row() {
      Row() {
        Text(this.operateName)
          .fontSize($r('app.float.card_title_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
        Image(this.operateImage)
          .width($r('app.float.general_icon_size'))
          .height($r('app.float.general_icon_size'))
      }
      .width('90%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .height('11.5%')
    .width('100%')
    .backgroundColor(this.bgColor)
    .borderRadius($r('app.float.general_border_radius'))
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      if (this.clickEvent) {
        this.clickEvent()
      }
    })
  }
}

@CustomDialog
struct ReportFaultDialog {

  @State historyArray: MaterialInfo[] = CommonConstants.MATERIAL_ARRAY
  // 所有的缺陷类型
  @State faultTypes: FaultType[] = [
    {id: 1, faultName: '外观缺陷'}, {id: 2, faultName: '尺寸和形状缺陷'}, {id: 3, faultName: '功能性缺陷'}, {id: 4, faultName: '电气连接缺陷'}, {id: 5, faultName: '密闭性缺陷'},
  ]
  // 所有的缺陷类型
  @State faultLevels: FaultLevel[] = [
    {id: 1, levelName: '1级缺陷'}, {id: 2, levelName: '2级缺陷'}, {id: 3, levelName: '3级缺陷'}, {id: 4, levelName: '4级缺陷'},
  ]

  @State selectTypes: number[] = []
  @State selectLevel: number = -1

  @State faultImage: Resource[] = [$r('app.media.return'), $r('app.media.pcb_demo'), $r('app.media.pcb_demo'), $r('app.media.pcb_demo')]

  // 故障缺陷选择弹窗
  faultTypeController: CustomDialogController = new CustomDialogController({
    builder: FaultTypeDialog({
      faultTypes: this.faultTypes,
      selectTypes: $selectTypes,
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    // gridCount: 3,
    customStyle: true,
  })

  // 故障等级选择弹窗
  faultLevelController: CustomDialogController = new CustomDialogController({
    builder: FaultLevelDialog({
      faultLevels: this.faultLevels,
      selectLevel: $selectLevel,
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    // gridCount: 3,
    customStyle: true,
  })

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  aboutToAppear(){
  //   todo 查询故障类型 故障等级
  }

  build() {
    Column() {
      Row() {
        Text('报故')
          .fontSize($r('app.float.process_card_large_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('7.5%')
      .alignItems(VerticalAlign.Bottom)

      Column() {
        Row() {
          Text('故障缺陷')
            .fontSize($r('app.float.process_card_middle_font_size'))
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.general_font_color'))
            .opacity($r('app.float.general_font_opacity'))
        }
        .width('96%')
        .height('6%')
        Scroll() {
          Flex({ wrap: FlexWrap.Wrap}) {
            ForEach(this.selectTypes, (item: number, index: number) => {
              Row().width('2%')
              Row() {
                Text(this.faultTypes[item].faultName)
                  .fontSize($r('app.float.process_card_middle_font_size'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.general_font_color'))
                  .opacity($r('app.float.general_font_opacity'))
              }
              .backgroundColor($r('app.color.general_card_background_color'))
              .width('47%')
              .height('10%')
              .borderRadius($r('app.float.general_border_radius'))
              .padding({left: 15})
              .margin({bottom: 5})
            })
            Row() {
              Row().width('2%')
              Image($r('app.media.fault_add'))
                .objectFit(ImageFit.Contain)
                .onClick(()=>{
                  this.faultTypeController.open()
                })
            }
            .width('100%')
            .height('10%')

            Row() {
              Row().width('2%')
              Text('故障等级')
                .fontSize($r('app.float.process_card_middle_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.general_font_opacity'))
            }
            .width('100%')
            .height('6%')

            Row() {
              Row().width('2%')
              Row() {
                Text(this.faultLevels && this.faultLevels[this.selectLevel] ? this.faultLevels[this.selectLevel].levelName : '请选择')
                  .fontSize($r('app.float.process_card_middle_font_size'))
                  .fontWeight(FontWeight.Medium)
                  .fontColor($r('app.color.general_font_color'))
                  .opacity($r('app.float.material_collect_font_opacity'))
                Blank()
                Row() {
                  Image($r('app.media.subscript_space'))
                    .height($r('app.float.card_subscript_new_size'))
                    .width($r('app.float.card_subscript_new_size'))
                }
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.End)
                .width('20%')
                .height('100%')
              }
              .backgroundColor($r('app.color.general_card_background_color'))
              .width('47%')
              .height('10%')
              .borderRadius($r('app.float.general_border_radius'))
              .padding({left: 15})
              .onClick(()=>{
                this.faultLevelController.open()
              })
            }
            .width('100%')

            Row() {
              Row().width('2%')
              Text('故障图片')
                .fontSize($r('app.float.process_card_middle_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.general_font_opacity'))
            }
            .width('100%')
            .height('6%')

            ForEach(this.faultImage, (item: Resource, index: number) => {
              Row().width('2%')
              if (index === 0) {
                Row() {
                  Image($r('app.media.process_camera'))
                    .width('30%')
                  Image($r('app.media.local_upload'))
                    .width('30%')
                }
                .width('30.67%')
                .height('33%')
                .layoutWeight(1)
                .justifyContent(FlexAlign.SpaceAround)
                .borderRadius($r('app.float.general_border_radius'))
                .borderStyle(BorderStyle.Dashed)
                .borderColor($r('app.color.material_collect_border_color'))
                .borderWidth(1)
                .margin({bottom: 5})
              } else {
                Row() {
                  Image(item)
                    .objectFit(ImageFit.Fill)
                    .borderRadius($r('app.float.general_border_radius'))
                }
                .width('30.67%')
                .height('33%')
                .margin({bottom: 5})
                .onClick(()=> {
                //  todo
                })
              }
            })

            Row().width('100%').height('10%')
          }
        }
        .scrollBar(BarState.Off)
      }
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Start)

      Row() {
        Button('取消')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.robot_set_card_blue'))
          .width('45%')
          .height('66.5%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_coord_card_grey'))
          .onClick(() => {
            //   todo
          })

        Button('报故')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_white_color'))
          .width('45%')
          .height('66.5%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_card_blue'))
          .onClick(() => {
            //   todo
          })
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .alignItems(VerticalAlign.Center)
      .height('11%')
      .width('100%')
    }
    .width('50.6%')
    .height('100%')
    .backgroundColor($r('app.color.page_general_background'))
    .justifyContent(FlexAlign.Start)
    .borderRadius({topLeft: $r('app.float.general_border_radius'), bottomLeft: $r('app.float.general_border_radius'),})
  }
}

@CustomDialog
struct ReportWorkDialog {

  @State reportSwitch: number = 1
  // 上报的工人
  @State reportWorkers: UserInfo[] = [
    {userName: '王德发', workHoursRatio: 100}
  ]

  // 工时总比率（max：100） todo 提交需要校验是否等于 100
  @State radioTotal: number = 100

  // 弹窗可用比率 = radioTotal - 当前用户的workHoursRatio
  @State availableRatio: number = 0

  workerRatio: number = 0
  // 修改的人员索引
  workerIndex: number = -1

  @State addWorker: UserInfo = null

  // 报工人员选择弹窗
  workerAddController: CustomDialogController = new CustomDialogController({
    builder: WorkerAddDialog({
      reportWorkers: $reportWorkers,
      addWorker: $addWorker,
      confirm: ()=> {
        this.reportWorkers.splice(this.reportWorkers.length - 1, 0, this.addWorker)
        this.addWorker = null
      }
    }),
    autoCancel: true,
    alignment: DialogAlignment.TopEnd,
    // gridCount: 3,
    customStyle: true,
  })

  workHoursRatioController: CustomDialogController = new CustomDialogController({
    builder: WorkHoursRatioDialog({
      availableRatio: $availableRatio,
      workerRatio: this.workerRatio,
      confirm: ()=> {
        console.log('testTag', '----'+this.availableRatio)
        this.reportWorkers[this.workerIndex] = {
          userName:  this.reportWorkers[this.workerIndex].userName,
          workHoursRatio: this.availableRatio
        }
        this.radioTotal = 0
        for (const worker of this.reportWorkers) {
          this.radioTotal += worker.workHoursRatio
        }
      }
    }),
    autoCancel: true,
    alignment: DialogAlignment.TopEnd,
    // gridCount: 3,
    customStyle: true,
  })

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  aboutToAppear() {
    this.reportWorkers.push({userName: 'admin', workHoursRatio: 0})
  }

  build(){
    Column() {
      Row() {
        Text('报工')
          .fontSize($r('app.float.title_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('12.6%')
      .alignItems(VerticalAlign.Bottom)
      .padding({ bottom : 10})

      // 报工切换按钮
      Row() {
        Row() {
          Stack() {
            if (this.reportSwitch === 1) {
              Text()
                .backgroundColor($r('app.color.general_card_background_color'))
                .width('100%')
                .height('100%')
                .borderRadius($r('app.float.general_border_radius'))
            }
            Text('单人报工')
              .fontSize($r('app.float.set_card_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .fontWeight(FontWeight.Medium)
              .opacity(this.reportSwitch === 1 ? $r('app.float.card_font_select_opacity') : $r('app.float.card_font_default_opacity'))
          }
          .width('100%')
          .height('100%')
        }
        .onClick(() => {
          this.reportSwitch = 1
        })
        .width('50%')
        Row() {
          Stack() {
            if (this.reportSwitch === 2) {
              Text()
                .backgroundColor($r('app.color.general_card_background_color'))
                .width('100%')
                .height('100%')
                .borderRadius($r('app.float.general_border_radius'))
            }
            Text('多人报工')
              .fontSize($r('app.float.set_card_font_size'))
              .fontColor($r('app.color.general_font_color'))
              .fontWeight(FontWeight.Medium)
              .opacity(this.reportSwitch === 2 ? $r('app.float.card_font_select_opacity') : $r('app.float.card_font_default_opacity'))
          }
          .width('100%')
          .height('100%')
        }
        .width('50%')
        .onClick(() => {
          this.reportSwitch = 2
        })
      }
      .width('66%')
      .height('10%')
      .borderRadius($r('app.float.general_border_radius'))
      .backgroundColor($r('app.color.robot_toward_set_card_background'))
      .margin({bottom: 22})

      // 报工人员
      Row() {
        if (this.reportSwitch === 1) {
          Column() {
            Row(){}.height('16.5%')
            Row(){
              Image($r('app.media.user'))
                .height('100%')
                .objectFit(ImageFit.Fill)
            }
            .height('28.5%')
            .width('100%')
            .justifyContent(FlexAlign.Center)
            Row(){
              Text(this.reportWorkers[0].userName)
                .fontSize($r('app.float.process_card_middle_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.card_font_select_opacity'))
            }
            .height('14.6%')

            Column() {
              Text('100%')
                .fontSize($r('app.float.process_card_middle_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.process_card_blue_color'))
              Text('用时占比')
                .fontSize($r('app.float.process_card_small_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.process_step_font_opacity'))
            }
            .height('27.5%')
            .width('75%')
            .justifyContent(FlexAlign.Center)
            .backgroundColor($r('app.color.robot_set_coord_card_grey'))
            .borderRadius($r('app.float.general_border_radius'))
          }
          .width('48%')
          .height('63%')
          .backgroundColor($r('app.color.general_card_background_color'))
          .borderRadius($r('app.float.general_border_radius'))
        } else {
          Scroll() {
            Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween}) {
              ForEach(this.reportWorkers, (item: UserInfo, index: number)=>{
                if (index === this.reportWorkers.length - 1) {
                  Column() {
                    Row() {
                      Image($r('app.media.user_add'))
                        .height('100%')
                        .objectFit(ImageFit.Fill)
                    }
                    .height('39%')
                  }
                  .width('48%')
                  .height('63%')
                  .borderRadius($r('app.float.general_border_radius'))
                  .justifyContent(FlexAlign.Center)
                  .borderStyle(BorderStyle.Dashed)
                  .borderColor($r('app.color.material_collect_border_color'))
                  .borderWidth(1)
                  .onClick(()=>{
                    this.workerAddController.open()
                  })
                } else {
                  Column() {
                    Row(){}.height('16.5%')
                    Row(){
                      Image($r('app.media.user'))
                        .height('100%')
                        .objectFit(ImageFit.Fill)
                    }
                    .height('28.5%')
                    .width('100%')
                    .justifyContent(FlexAlign.Center)
                    Row(){
                      Text(item.userName)
                        .fontSize($r('app.float.process_card_middle_font_size'))
                        .fontWeight(FontWeight.Medium)
                        .fontColor($r('app.color.general_font_color'))
                        .opacity($r('app.float.card_font_select_opacity'))
                    }
                    .height('14.6%')

                    Column() {
                      Text(item.workHoursRatio + '%')
                        .fontSize($r('app.float.process_card_middle_font_size'))
                        .fontWeight(FontWeight.Medium)
                        .fontColor($r('app.color.process_card_blue_color'))
                      Text('用时占比')
                        .fontSize($r('app.float.process_card_small_font_size'))
                        .fontWeight(FontWeight.Medium)
                        .fontColor($r('app.color.general_font_color'))
                        .opacity($r('app.float.process_step_font_opacity'))
                    }
                    .height('27.5%')
                    .width('75%')
                    .justifyContent(FlexAlign.Center)
                    .backgroundColor($r('app.color.robot_set_coord_card_grey'))
                    .borderRadius($r('app.float.general_border_radius'))
                    Row() {
                      Image($r('app.media.subscript_space'))
                        .height($r('app.float.card_subscript_new_size'))
                        .width($r('app.float.card_subscript_new_size'))
                    }
                    .alignItems(VerticalAlign.Bottom)
                    .justifyContent(FlexAlign.End)
                    .width('100%')
                    .layoutWeight(1)
                  }
                  .width('48%')
                  .height('63%')
                  .backgroundColor($r('app.color.general_card_background_color'))
                  .borderRadius($r('app.float.general_border_radius'))
                  .onClick(()=>{
                    this.workerIndex = index
                    this.workerRatio = this.reportWorkers[index].workHoursRatio
                    this.availableRatio = (100 - this.radioTotal) + this.reportWorkers[index].workHoursRatio
                    console.log('testTag', '========='+ this.availableRatio)
                    this.workHoursRatioController.open()
                  })
                }
              })
            }
          }
        }
      }
      .width('66%')
      .justifyContent(FlexAlign.Start)
      .alignItems(VerticalAlign.Top)
      .layoutWeight(1)

      // 确认/取消按钮
      Row() {
        Button('取消')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.robot_set_card_blue'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_coord_card_grey'))
          .onClick(() => {
            this.controller.close()
            this.cancel()
          })
        Row()
          .width('2.5%')
        Button('确认报工')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_white_color'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_card_blue'))
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .height('20%')
      .width('100%')
    }
    .width('48%')
    .height('74%')
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.general_border_radius'))
  }
}

@CustomDialog
struct FaultTypeDialog {

  faultTypes: FaultType[]
  @Link selectTypes: number[]

  selectTemps: number[] = []

  aboutToAppear() {
    if (this.selectTypes && this.selectTypes.length > 0) {
      for (const select of this.selectTypes) {
        this.selectTemps.push(select)
      }
    }
  }

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  build(){
    Column() {
      Row() {
        Text('选择缺陷')
          .fontSize($r('app.float.title_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('15%')
      .alignItems(VerticalAlign.Center)
      List({ space: 10}) {
        ForEach(this.faultTypes, (item: FaultType, index: number)=>{
          ListItem() {
            Row() {
              Text(item.faultName)
                .fontSize($r('app.float.process_card_middle_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.general_font_color'))
                .opacity($r('app.float.general_font_opacity'))
              Checkbox()
                .select(this.selectTemps.includes(index) ? true : false)
                .onChange((value: boolean)=>{
                  if (value) {
                    this.selectTemps.push(index)
                  } else {
                    this.selectTemps = this.selectTemps.filter(function(item) {
                      return item !== index
                    });
                  }
                })
            }
            .backgroundColor($r('app.color.general_card_background_color'))
            .width('71%')
            .height('14%')
            .borderRadius($r('app.float.general_border_radius'))
            .justifyContent(FlexAlign.SpaceBetween)
            .padding({left: 15, right: 15})
          }
        })
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)

      Row() {
        Button('取消')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.robot_set_card_blue'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_coord_card_grey'))
          .onClick(() => {
            this.controller.close()
            this.cancel()
          })
        Row()
          .width('2.5%')
        Button('确认')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_white_color'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_card_blue'))
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
              this.selectTypes = this.selectTemps
              this.selectTypes.sort(function(a, b){
                return a as number - (b as number);
              })
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .height('15%')
      .width('100%')
    }
    .width('48%')
    .height('74%')
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.general_border_radius'))
  }
}

@CustomDialog
struct FaultLevelDialog {

  faultLevels: FaultLevel[]
  @Link selectLevel: number

  @State selectTemp: number = -1

  aboutToAppear() {
    this.selectTemp = this.selectLevel
  }

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  build(){
    Column() {
      Row() {
        Text('选择故障等级')
          .fontSize($r('app.float.title_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('15%')
      .alignItems(VerticalAlign.Center)
      List({ space: 10 }) {
        ForEach(this.faultLevels, (item: FaultLevel, index: number)=>{
          ListItem() {
            Row() {
              Text(item.levelName)
                .fontSize($r('app.float.process_card_middle_font_size'))
                .fontWeight(FontWeight.Medium)
                .fontColor(this.selectTemp === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                .opacity(this.selectTemp === index ? 1 : $r('app.float.general_font_opacity'))
            }
            .backgroundColor(this.selectTemp === index ? $r('app.color.process_card_blue_color') : $r('app.color.general_card_background_color'))
            .width('71%')
            .height('20%')
            .borderRadius($r('app.float.general_border_radius'))
            .justifyContent(FlexAlign.Center)
            .padding({left: 15, right: 15})
            .onClick(()=>{
              this.selectTemp = index
            })
          }
        })
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)

      Row() {
        Button('取消')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.robot_set_card_blue'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_coord_card_grey'))
          .onClick(() => {
            this.controller.close()
            this.cancel()
          })
        Row()
          .width('2.5%')
        Button('确认')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_white_color'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_card_blue'))
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
              this.selectLevel = this.selectTemp
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .height('15%')
      .width('100%')
    }
    .width('48%')
    .height('54%')
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.general_border_radius'))
  }
}

@CustomDialog
struct WorkerAddDialog {

  @Link reportWorkers: UserInfo[]
  @Link addWorker: UserInfo

  // 所有工人
  @State workerArray: UserInfo[] = [
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
    {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'},  {userName: '安海兵'},
  ]
  // 字母对应的索引
  @State alphabetMap: HashMap<string, number> = new HashMap();

  @State alphabetArray: string[] = []

  scroller: Scroller = new Scroller()

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  aboutToAppear() {
  //   todo 查询所有工人（过滤掉已选择的）
    for (const worker of this.workerArray) {
      let str = pinyin(worker.userName, { mode: 'surname', toneType: 'none', pattern: 'first'})
      worker.pinyinInitial = str.charAt(0).toUpperCase()
    }

    // 将工人按照姓名字母排序
    this.workerArray = this.workerSort(this.workerArray)

    // 把第一个工人姓名的字母保存到对应的数组中
    this.workerArray.unshift({userName: 'A', pinyinInitial: 'A'})
    this.alphabetMap.set(this.workerArray[0].pinyinInitial, 0)
    this.alphabetArray.push(this.workerArray[0].pinyinInitial)

    let lastInitial: string = this.workerArray[0].pinyinInitial
    for (let index = 0; index < this.workerArray.length; index++) {
      if (this.workerArray[index].pinyinInitial !== lastInitial) {
        lastInitial = this.workerArray[index].pinyinInitial
        // 工人姓名字母发生变化，则在数组中插入 字母 保证渲染
        this.workerArray.splice(index, 0, {userName: lastInitial, pinyinInitial: lastInitial});
        this.alphabetMap.set(lastInitial, index)
        this.alphabetArray.push(lastInitial)
      } else {
        if (index === 0) {
          continue
        }
        this.workerArray[index].pinyinInitial = '@'
      }
    }
  }

  workerSort (arr: UserInfo[]) {
    if (arr.length <= 1) {
      return arr;
    }
    var medianIndex = Math.floor(arr.length / 2); // 找分界值索引
    var medianValue: UserInfo[] = arr.splice(medianIndex, 1); // 把分界值从原数组中取出并删除
    var left: UserInfo[] = []; 	// 比分界值小的，放左边
    var right: UserInfo[] = [];	// 比分界值大的，放右边
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].pinyinInitial < medianValue[0].pinyinInitial) {
        left.push(arr[i])
      } else {
        right.push(arr[i])
      }
    }

    return this.workerSort(left).concat(medianValue, this.workerSort(right));	// 最后进行拼接
  };

  build() {
    Column() {
      Row() {
        Text('参与人员')
          .fontSize($r('app.float.process_card_large_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('7.5%')
      .alignItems(VerticalAlign.Bottom)
      Row() {
        Row() {
          Row() {
            Image($r('app.media.user'))
              .height('31%')
          }
          .width('8%')
          .justifyContent(FlexAlign.End)

          TextInput({ placeholder: '员工名单搜索' })
            .placeholderColor($r('app.color.text_input_placeholder_font_color'))
            .placeholderFont({size: $r('app.float.robot_set_font_size'), weight: FontWeight.Medium})
            .fontSize($r('app.float.robot_set_font_size'))
            .fontWeight(FontWeight.Medium)
            .fontColor($r('app.color.general_font_color'))
            .textAlign(TextAlign.Start)
            .height('100%')
            .layoutWeight(1)
            .maxLength(100)
            .borderRadius($r('app.float.robot_set_radius'))
            .backgroundColor($r('app.color.general_font_white_color'))
            .onChange((value: string) => {

            })
            .onSubmit(() => {

            })
        }
        .height('66.5%')
        .width('92%')
        .borderRadius($r('app.float.robot_set_radius'))
        .backgroundColor($r('app.color.general_font_white_color'))
      }
      .height('11%')
      Row() {
        List({space:14, scroller: this.scroller}) {
          ForEach(this.workerArray, (item: UserInfo, index: number) => {
            ListItem() {
              if (this.alphabetMap.hasKey(item.pinyinInitial)) {
                Column() {
                  Text(item.pinyinInitial)
                    .fontSize($r('app.float.process_worker_font_size'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.general_font_white_color'))
                    .opacity($r('app.float.general_font_opacity'))
                }
                .height('9%')
                .width('26.5%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor($r('app.color.process_card_blue_color'))
              } else {
                Column() {
                  Text(item.userName)
                    .fontSize($r('app.float.process_card_middle_font_size'))
                    .fontWeight(FontWeight.Medium)
                    .fontColor($r('app.color.general_font_color'))
                    .textAlign(TextAlign.Center)
                }
                .height('9%')
                .onClick(()=>{
                  this.addWorker = {
                    userName: item.userName,
                    workHoursRatio: 0
                  }
                  this.controller.close()
                  this.confirm()
                })
              }
            }
          })
        }
        .width('50%')

        AlphabetIndexer({ arrayValue: this.alphabetArray, selected: 0 })
          .color($r('app.color.process_worker_font_color'))
          .selectedColor($r('app.color.process_worker_font_color')) // 选中项文本颜色
          .selectedBackgroundColor($r('app.color.general_font_white_color')) // 选中项背景颜色
          .usingPopup(false) // 是否显示弹出框
          .onSelect((index: number) => {
            if (this.alphabetMap.hasKey(this.alphabetArray[index])) {
              this.scroller.scrollToIndex(this.alphabetMap.get(this.alphabetArray[index]))
            }
          })
      }
      .width('92%')
      .justifyContent(FlexAlign.SpaceBetween)
      .layoutWeight(1)
    }
    .width('48%')
    .height('100%')
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.general_border_radius'))
  }
}

@CustomDialog
struct WorkHoursRatioDialog {

  @Link availableRatio: number
  workerRatio: number
  // 选择项（10%为一个间隔）
  selectItems: string[] = []

  private select: number = 1

  controller?: CustomDialogController
  cancel: () => void = () => {}
  confirm: () => void = () => {}

  aboutToAppear() {
    console.log('testTag', JSON.stringify(this.availableRatio))
    let radio = 10
    while (radio <= this.availableRatio) {
      this.selectItems.push(radio + '%')
      if (this.workerRatio && this.workerRatio === radio) {
        this.select = this.selectItems.length - 1
      }
      radio += 10
    }
    console.log('testTag', JSON.stringify(this.workerRatio))
  }

  build() {
    Column() {
      Row() {
        Text('用时占比')
          .fontSize($r('app.float.process_card_large_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_color'))
          .opacity($r('app.float.general_font_opacity'))
      }
      .height('16%')
      Row() {
        TextPicker({ range: this.selectItems, selected: this.select})
          .onChange((value: string, index: number) => {
            this.availableRatio = Number.parseInt(value)
          })
          .width('40%')
          .height('100%')
          .backgroundColor($r('app.color.bottom_bar_background'))
          .borderImage({source:$r('app.media.text_picker_frame'), fill: true})
      }
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)

      Row() {
        Button('取消')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.robot_set_card_blue'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_coord_card_grey'))
          .onClick(() => {
            this.controller.close()
            this.cancel()
          })
        Row()
          .width('2.5%')
        Button('确认')
          .fontSize($r('app.float.robot_set_font_size'))
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.general_font_white_color'))
          .width('32%')
          .height('50%')
          .borderRadius($r('app.float.robot_set_radius'))
          .backgroundColor($r('app.color.robot_set_card_blue'))
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
              this.confirm()
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .height('24%')
      .width('100%')
    }
    .width('48%')
    .height('62%')
    .backgroundColor($r('app.color.page_general_background'))
    .borderRadius($r('app.float.general_border_radius'))
  }
}

class FaultType {
  id?: number
  faultName?: string
}

class FaultLevel {
  id?: number
  levelName?: string
}

class UserInfo {
  id?: number
  userName?: string
  // 工时占比
  workHoursRatio?: number
  // 姓氏的拼音首字母
  pinyinInitial?: string
}