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

import { TimeAndTitle } from '../component/TimeAndTitle';
import router from '@ohos.router';
import WorkOrderInfo from '../viewmodel/WorkOrderInfo';
import CommonConstants from '../common/constants/CommonConstants';
import ProcessRequest from '../common/util/request/ProcessRequest';
import RequestParamModel from '../viewmodel/RequestParamModel';
import OperationInfo from '../viewmodel/process/OperationInfo';
import { SelectOrderDialog } from '../view/SelectOrderDialog';
import image from '@ohos.multimedia.image';
import { SwitchingProductDialog, taskSeqItem } from '../view/SwitchingProductDialog';
import TaskSeqVO from '../viewmodel/process/TaskSeqInfo';
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct Index {
  // 工单列表
  @State workOrders: WorkOrderInfo[] = []
  // 选中工单
  @State selectWorkOder: WorkOrderInfo = {}
  // 工位通知数量
  @State noticeNum: number = 100
  // 扫描或手动输入的流水/序列/铭牌号
  @State scanCode: string = ''
  // 当前流转卡号
  @State seqNo: string = ''
  // 选中工序id
  @State selectOperationId: string = ''
  //选择的按钮索引(默认加载全部)
  @State selectedButtonIndex: number = 0
  // 流转卡号信息集合
  @State taskSeqArray: TaskSeqVO[] = []

  private scrollerList: Scroller = new Scroller()
  pageNo: number = 1
  pageSize: number = 9

  selectOrderController: CustomDialogController = new CustomDialogController({
    builder: SelectOrderDialog({}),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })

  switchingProductDialogController: CustomDialogController = new CustomDialogController({
    builder: SwitchingProductDialog({
      scanSeqValue: this.scanCode
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })

  handleAllClick():void {
    this.onQueryTask([])
  }

  handleReportedClick():void{
    this.onQueryTask([2])
  }

  handleUnreportedClick():void{
    this.onQueryTask([-1,0,1])
  }

  onQueryTask = async (currentStateList: Array<number>)=>{
    this.taskSeqArray = await ProcessRequest.post('/api/v1/plan/task/list', {
      stationId: CommonConstants.STATION_ID.toString(),
      workOrderCode: this.selectWorkOder.workOrderCode!,
      operationId: this.selectOperationId,
      stateList: currentStateList
    } as RequestParamModel) as TaskSeqVO[];
  }

  async aboutToAppear() {
    if (!this.selectWorkOder || !this.selectWorkOder.workOrderCode) {
      this.selectOrderController.open()
      // this.workOrders = await ProcessRequest.post('/api/v1/plan/workOrder/taskPage', {
      //   //查询未完成的工单
      //   queryComplete: 0,
      //   pageNo: this.pageNo,
      //   pageSize: this.pageSize
      // } as RequestParamModel) as WorkOrderInfo[]
    }

  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      //时间和导航标
      Row(){
        TimeAndTitle()
      }.width('100%')
      .height('3.4%')
      .alignItems(VerticalAlign.Bottom)
      .justifyContent(FlexAlign.End)
      Row(){
        Image($r('app.media.general_return'))
          .height($r('app.float.virtualSize_56'))
          .width($r('app.float.virtualSize_56'))
          .fillColor($r('app.color.FFFFFF'))
        Text('生产执行')
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
          .fontWeight(FontWeight.Medium)
      }
      .height('4%')
      .width('94.8%')
      .justifyContent(FlexAlign.Start)
      .onClick(()=> {
        router.back()
      })
      Row().height('2.8%')
      // 主要操作栏
      Row() {
        // 左侧选择工单、工位、人员；工序查看
        Column() {
          if (this.selectWorkOder && this.selectWorkOder.workOrderCode) {
            Column() {
              Text(this.selectWorkOder.materialName!)
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_24'))
                .width('88.9%')
              Text(this.selectWorkOder.materialCode!)
                .fontWeight(FontWeight.Lighter)
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_12'))
                .width('88.9%')
              Row() {
                Text('工单：')
                  .fontWeight(FontWeight.Lighter)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_12'))
                Text(this.selectWorkOder.orderCode!)
                  .fontWeight(FontWeight.Bold)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_16'))
              }
              .width('88.9%')
            }
            .width('100%')
            .height('12.4%')
            .justifyContent(FlexAlign.Center)
            .backgroundColor($r('app.color.20FFFFFF'))
            .borderRadius($r('app.float.fontSize_16'))
            .onClick(()=>{
              this.selectOrderController.open()
            })
          } else {
            Button('请选择工单', { type: ButtonType.Normal })
              .width('100%')
              .height('12.4%')
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_24'))
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.fontSize_16'))
              .onClick(()=>{
                this.selectOrderController.open()
              })
          }

          // 工位、人员信息
          Row() {
            Row().width('5.6%')
            Column() {
              Text(CommonConstants.STATION_NANE)
                .fontSize($r('app.float.fontSize_16'))
                .fontWeight(FontWeight.Regular)
                .fontColor($r('app.color.FFFFFF'))
              Text(CommonConstants.USER_NAME)
                .fontSize($r('app.float.fontSize_12'))
                .fontWeight(FontWeight.Lighter)
                .fontColor($r('app.color.FFFFFF'))
            }
            .width('48.8%')
            .height('100%')
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Start)

            Row() {
              Text(this.noticeNum > 99 ? '99+' : this.noticeNum.toString())
                .fontSize($r('app.float.fontSize_16'))
                .fontWeight(FontWeight.Bold)
                .fontColor($r('app.color.FFFFFF'))
                .textAlign(TextAlign.Center)
                .height('42.3%')
                .width('42%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.fontSize_16'))
            }
            .width('40%')
            .height('100%')
            .justifyContent(FlexAlign.End)
            Row().width('5.6%')
          }
          .width('100%')
          .height('8.1%')
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          // 工序
          Column({space: 4}) {
            Row() {
              Text('工序')
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_24'))
            }
            .width('83.4%')
            .height('8.4%')
            .alignItems(VerticalAlign.Bottom)
            List() {
              ForEach(this.selectWorkOder.ops!, (item: OperationInfo, index: number) => {
                ListItem() {
                  Column() {
                    Row() {
                      Row() {
                        Text((index + 1).toString())
                          .fontSize($r('app.float.fontSize_16'))
                          .fontColor(this.selectOperationId === item.operationId ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
                          .fontWeight(FontWeight.Bold)
                      }
                      .width('14.6%')
                      .height('80%')
                      .justifyContent(FlexAlign.Center)
                      Row() {
                        Text(item.operationName)
                          .fontSize($r('app.float.fontSize_16'))
                          .fontColor(this.selectOperationId === item.operationId ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
                          .fontWeight(FontWeight.Regular)
                          .padding({left: 5})
                      }
                      .width('70.8%')
                      .height('100%')
                      .alignItems(VerticalAlign.Center)
                      .justifyContent(FlexAlign.Start)
                      Row() {
                        Image(this.selectOperationId === item.operationId ? $r('app.media.process_current_operation') : (item.isEnd! ? $r('app.media.process_complete') : ''))
                          .width($r('app.float.virtualSize_24'))
                          .height($r('app.float.virtualSize_24'))
                          .fillColor(this.selectOperationId === item.operationId ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
                          .opacity(this.selectOperationId != item.operationId && !item.isEnd ? 0 : 1)
                      }
                      .width('14.6%')
                      .height('100%')
                      .justifyContent(FlexAlign.Center)
                    }
                    .width('100%')
                    .height('70%')
                    .borderRadius($r('app.float.virtualSize_40'))
                    .backgroundImage(this.selectOperationId === item.operationId ? $r('app.media.process_select_operation') : $r('app.media.process_no_select_operation'))
                    .backgroundImageSize(ImageSize.Cover)
                    .onClick(() => {
                      this.selectOperationId = item.operationId!
                      if (!item.exists) {
                        promptAction.showToast({
                          message: `${item.operationName}需要在${item.stationName}工位上生产`,
                          duration: 1500,
                          bottom: 100
                        })
                      }
                      if (!this.seqNo || this.seqNo.length <= 0) {
                        this.handleAllClick()
                      }
                    })

                    if (index < this.selectWorkOder.ops!.length - 1) {
                      Row() {
                        Divider()
                          .vertical(true)
                          .color($r('app.color.60FFFFFF'))
                          .padding({ right: '15%' })
                      }
                      .justifyContent(FlexAlign.Center)
                      .width('20%')
                      .layoutWeight(1)
                    }
                  }
                  .width('100%')
                  .height('10.6%')
                  .alignItems(HorizontalAlign.Start)
                }
              })
            }
            .width('83.4%')
            .height('88.6%')
            .alignListItem(ListItemAlign.Center)
          }
          .width('100%')
          .height('77.2%')
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
        }
        .height('100%')
        .width('19.8%')
        .justifyContent(FlexAlign.SpaceBetween)
        // 右侧生产操作栏
        Column() {
          Row() {
            Text('录入流水号')
              .fontSize($r('app.float.fontSize_30'))
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.FFFFFF'))
          }
          .height('10%')
          .width('97.2%')
          .justifyContent(FlexAlign.Start)
          Row() {
            Column({space: 8}) {
              Row() {
                this.buildButton(0, '全部', () => this.handleAllClick())
                this.buildButton(1, '已报工', () => this.handleReportedClick())
                this.buildButton(2, '未报工', () => this.handleUnreportedClick())
              }
              .width('72%')
              .height('5.3%')
              .justifyContent(FlexAlign.Start)

              List({space: 4, scroller: this.scrollerList}) {
                ForEach(this.taskSeqArray, (item:TaskSeqVO) => {
                  ListItem() {
                    taskSeqItem({
                      item:item,
                      scanSeqValue: this.scanCode,
                      selectedButtonIndex: this.selectedButtonIndex
                    })
                  }
                })
              }
              .width('72%')
              .height('94.7%')
            }
            .width('52.9%')
            .height('100%')
            .alignItems(HorizontalAlign.End)
            .padding({right: '2.6%'})
            Divider()
              .vertical(true)
              .color($r('app.color.15FFFFFF'))
              .height('100%')

            Column({space: 5}) {
              Row().height('37%')
              Row() {
                Text('扫描流水/序列/铭牌号')
                  .fontSize($r('app.float.fontSize_16'))
                  .fontWeight(FontWeight.Regular)
                  .fontColor($r('app.color.FFFFFF'))
              }
              .width('62%')
              Row() {
                Row().width('3.4%')
                // 左侧二维码图标
                Image($r('app.media.material_qr_code')) // 请替换为您的二维码图片资源
                  .width($r('app.float.virtualSize_24'))
                  .height($r('app.float.virtualSize_24'))
                  .fillColor($r('app.color.FFFFFF'))
                // 扫码输入框
                TextInput({ placeholder: '请扫描物料编码', text: this.scanCode })
                  .type(InputType.Normal)
                  .placeholderFont({ size: $r('app.float.fontSize_16')})
                  .placeholderColor($r('app.color.30FFFFFF'))
                  .fontSize($r('app.float.fontSize_16'))
                  .fontColor($r('app.color.FFFFFF'))
                  .enableKeyboardOnFocus(false)
                  .onChange((value: string) => {
                    this.scanCode = value
                  })
                  .onSubmit(async () => {

                  })
              }
              .width('65%')
              .height('6.5%')
              .borderRadius($r('app.float.virtualSize_16'))
              .backgroundColor($r('app.color.000000'))
              .justifyContent(FlexAlign.Start)
            }
            .width('52.9%')
            .height('100%')
          }
          .width('100%')
          .height('87.7%')
          .justifyContent(FlexAlign.Center)
        }
        .width('79.1%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .backgroundColor($r('app.color.20FFFFFF'))
        .borderRadius($r('app.float.fontSize_16'))
      }
      .height('80%')
      .width('94.8%')
      .justifyContent(FlexAlign.SpaceBetween)
      // 底部按钮和抽屉
      Stack() {
        Column() {
          Blank()
          Stack() {
            Image($r('app.media.process_drawer_thumbnail'))
              .width('100%')
              .height('100%')
            Image($r('app.media.process_drawer_switch'))
              .width($r('app.float.virtualSize_48'))
              .height($r('app.float.virtualSize_48'))
              .fillColor($r('app.color.60FFFFFF'))
          }
          .width('100%')
          .height('47%')
        }
        .width('100%')
        .height('100%')

        Row() {
          Row({space: 4}) {
            Image($r('app.media.process_work_instruction'))
              .width($r('app.float.virtualSize_24'))
              .height($r('app.float.virtualSize_24'))
              .fillColor($r('app.color.0A84FF'))
            Text('作业指导')
              .fontColor($r('app.color.0A84FF'))
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
          }
          .width('10%')
          .height('58.3%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          Row().width('1.5%')
          Row({space: 4}) {
            Image($r('app.media.process_complete_reception'))
              .width($r('app.float.virtualSize_24'))
              .height($r('app.float.virtualSize_24'))
              .fillColor($r('app.color.0A84FF'))
            Text('齐套接收')
              .fontColor($r('app.color.0A84FF'))
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
          }
          .width('10%')
          .height('58.3%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))

          Blank()
          Column({space: 2}) {
            Row() {
              Text((this.selectWorkOder && this.selectWorkOder.workOrderCode) ? parseInt(this.selectWorkOder.completeNum!) + '/' + parseInt(this.selectWorkOder.planNum) : '')
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_16'))
                .fontWeight(FontWeight.Lighter)
            }
            .width('100%')
            .height('50%')
            .justifyContent(FlexAlign.End)
            .alignItems(VerticalAlign.Bottom)

            Row() {
              if (this.seqNo.length > 0 ) {
                Text('S/N ')
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_16'))
                  .fontWeight(FontWeight.Lighter)
                Text(this.seqNo)
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_16'))
                  .fontWeight(FontWeight.Bold)
              }
            }
            .width('100%')
            .height('50%')
            .justifyContent(FlexAlign.End)
            .alignItems(VerticalAlign.Top)
          }
          .width('10.8%')
          .height('100%')
          Row().width('1%')
          Row({space: 4}) {
            Image($r('app.media.process_switch'))
              .width($r('app.float.virtualSize_24'))
              .height($r('app.float.virtualSize_24'))
              .fillColor($r('app.color.0A84FF'))
            Text('切换产品')
              .fontColor($r('app.color.0A84FF'))
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
          }
          .width('10%')
          .height('58.3%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.20FFFFFF'))
          .borderRadius($r('app.float.fontSize_16'))
          .onClick(()=>{
            this.switchingProductDialogController.open()
          })
          Row().width('1.5%')
          Row({space: 4}) {
            Image($r('app.media.process_start_work'))
              .width($r('app.float.virtualSize_24'))
              .height($r('app.float.virtualSize_24'))
              .fillColor($r('app.color.FFFFFF'))
            Text('工序开工')
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_24'))
              .fontWeight(FontWeight.Medium)
          }
          .width('10%')
          .height('58.3%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor($r('app.color.0A84FF'))
          .borderRadius($r('app.float.fontSize_16'))
        }
        .height('90.6%')
        .width('100%')
        .padding({left: '2.6%', right: '2.6%'})
      }
      .width('100%')
      .height('9.8%')
      .alignContent(Alignment.Top)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.000000'))
  }

  @Builder
  buildButton(index: number, text: string, onClick: () => void) {
    Row({space: 5}){
      if(this.selectedButtonIndex === index) {
        Image($r('app.media.process_radio_check'))
          .width($r('app.float.virtualSize_24'))
          .height($r('app.float.virtualSize_24'))
          .fillColor($r('app.color.0A84FF'))
      } else {
        Image($r('app.media.process_radio_no_check'))
          .width($r('app.float.virtualSize_24'))
          .height($r('app.float.virtualSize_24'))
          .fillColor($r('app.color.FFFFFF'))
      }
      Text(text)
        .fontSize($r('app.float.fontSize_16'))
        .fontColor($r('app.color.FFFFFF'))
    }
    .justifyContent(FlexAlign.Center)
    .width('24.3%')
    .height('100%')
    .backgroundColor(this.selectedButtonIndex === index ? $r('app.color.200A84FF') : $r('app.color.20FFFFFF')) // 选中蓝/未选中灰
    .borderRadius($r('app.float.virtualSize_16'))
    .margin({ right:'3%'})
    .onClick(() => {
      this.selectedButtonIndex = index
      onClick();
    })
  }
}