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

import { TimeAndTitle } from '../common/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 { SelectWorkOrderDialog } from '../view/SelectWorkOrderDialog';
import { SwitchingProductDialog, taskSeqItem } from '../view/SwitchingProductDialog';
import TaskSeqVO from '../viewmodel/process/TaskSeqInfo';
import promptAction from '@ohos.promptAction';
import { LoginInfoDialog } from '../view/LoginInfoDialog';
import { SwitchingDeptDialog, SwitchingProductLineDialog, SwitchingStationDialog } from '../view/SwitchingStationViews';
import { SwitchingUserDialog } from '../view/SwitchingUserDialog';
import OperationComponent from '../viewmodel/process/OperationComponent';
import ProcessInfo from '../viewmodel/process/ProcessInfo';
import { MaterialCollectView } from '../view/process/MaterialCollectView';
import { WorkOrderPage } from '../viewmodel/WorkOrderPage';
import { UserInfo } from '../viewmodel/UserInfo';
import { CompleteReceiveDialog } from '../view/CompleteReceiveDialog';
import { WorkInstructionsDialog } from '../view/WorkInstructionsDialog';
import connection from '@ohos.net.connection';
import { ReportWorkNumDialog } from '../view/ReportWorkNumDialog';
import { ProcessReportingDialog } from '../view/ProcessReportingDialog';
import { JoinPersonNameDialog } from '../view/JoinPersonNameDialog';
import ReportInfo from '../viewmodel/ReportInfo';
import { BindTaskSeqVO } from '../viewmodel/BindTaskSeqVO';
import { MqttClientOptions, MqttConnectOptions } from '@ohos/mqtt';
import MqttManager from '../common/util/mqtt';
import { UnqualifiedReportDialog } from '../view/UnqualifiedReportDialog';
import { SelfInspectView } from '../view/process/SelfInspectView';
import { MultiMediaCollect } from '../view/process/MultiMediaCollect';
import { BarcodeAssociationDialog } from '../view/BarcodeAssociationDialog';
import WorkOrderSeq from '../viewmodel/WorkOrderSeq';
import { USBDeviceManager } from '../common/util/UsbDevice';
import { InAndOutBoundDialog } from '../view/InAndOutBoundDialog';
import { LittleMaterialRequestDialog } from '../view/LittleMaterialRequestDialog';
import { PictureDrawingDialog } from '../view/PictureDrawingDialog';
import { AuxiliaryOperationView } from '../view/AuxiliaryOperationView';
import { BusinessError } from '@ohos.base';
import window from '@ohos.window';
import { DeviceInspectionDialog } from '../view/DeviceInspectionDialog';
import preferencesUtil from '../common/util/PerferencesUtil';
import TimeUtil from '../common/util/TimeUtil';
import ProcessDeviceDailyCheck from '../viewmodel/process/ProcessDeviceDailyCheck';

// 声明接受参数的类型
interface Params {
  // 辅助操作标志
  auxiliaryOperationFlag?: boolean,
}

@Entry
@Component
struct ProcessIndex {
  // 工单列表
  @State workOrders: WorkOrderInfo[] = []
  // 选中工单
  @State selectWorkOder: WorkOrderInfo = {}
  // 工位通知数量
  @State noticeNum: number = 100
  // 扫描或手动输入的流水/序列/铭牌号
  @State scanCode: string = ''
  // 当前流转卡号
  @State seqNo: string = ''
  //是否打开底部抽屉
  @State isAuxiliaryViewOpen:boolean = false
  // 选中工序id
  @State selectOperationId: string = ''
  // 选中工序名称
  selectOperationName: string = ''
  //选择的按钮索引(默认加载全部)
  @State selectedButtonIndex: number = 0
  // 流转卡号信息集合
  @State taskSeqArray: TaskSeqVO[] = []
  // 工序组件（工步）
  @State opComponents: OperationComponent[] = []
  // 选中的工序组件类型
  @State selectComponentType: string = ''
  // 工序组件状态数组(0:未完成)
  @State componentStates: number[] = []
  // 工序组件对应的图标
  componentResMap: Map<string, Resource> = new Map([
    ['1', $r('app.media.process_component_material_collect')],
    ['2', $r('app.media.process_component_record_item')],
    ['3', $r('app.media.process_component_multi_media_collect')],
    ['4', $r('app.media.process_component_esop')],
    ['5', $r('app.media.process_component_self_inspect')],
    ['6', $r('app.media.process_component_device_record')],
    ['7', $r('app.media.process_component_fastening')],
    ['9', $r('app.media.process_component_label_bind')],
    ['10', $r('app.media.process_component_self_inspect')],
  ])
  // 扫码开工后的生产过程信息
  @State process: ProcessInfo = {}
  // 扫码开工状态(0:未开工 1:已开工)
  @State scanState: number = 0
  // 工单下流转卡号列表
  @State seqList: WorkOrderSeq[] = []
  // 设备每日点检
  @State deviceChecks: ProcessDeviceDailyCheck[] = []

  private scrollerList: Scroller = new Scroller()

  @Provide('currentDept') currentDept:string = ''
  @Provide('currentProductLine') currentProductLine:string = ''
  @Provide('currentStation') currentStation:string = ''
  @Provide('stationIp') stationIp:string = ''
  @Provide('currentPLCode') currentPLCode:string = ''
  @Provide('currentOrgId') currentOrgId:number = 0
  @Provide('currentStationId') @Watch('refreshWorkOrder') currentStationId: string = ''
  @Provide('currentUserName') currentUserName: string =''
  @Provide('currentUserId') currentUserId: number = 0
  @Provide('bindTaskSeq') bindTaskSeq: BindTaskSeqVO[] = []
  @State reportList: ReportInfo[] = []
  @State currentReporterIndex:number =0
  @State currentReportNumIndex:number =0
  @State currentUnqualifiedIndex:number =0
  // mqtt是否连接
  @State isConnected: boolean = false
  // 工位发生改变则可能需要重新选择工单
  async refreshWorkOrder() {
    if (!this.selectWorkOder || !this.selectWorkOder.workOrderCode) {
      return
    }
    console.log('hhtest', '执行刷新------' +this.currentStationId)
    let queryRes = await ProcessRequest.post('/api/v1/plan/workOrder/taskPage2', {
      stationId: this.currentStationId,
      queryComplete: 0,
    } as RequestParamModel) as WorkOrderPage;
    this.workOrders = queryRes?.records??[]
    if (this.workOrders) {
      let clearFlag: boolean = true
      for (const element of this.workOrders) {
        console.log('hhtest', '工单编码-----------------' + element.workOrderCode)
        if (element.workOrderCode! === this.selectWorkOder.workOrderCode) {
          clearFlag = false
          break
        }
      }
      if (clearFlag) {
        this.selectWorkOder = {}
        this.clearSelectData()
        this.selectOrderController.open()
        console.log('hhtest', '选择工单被清空-----------------')
      }
    } else {
      this.selectWorkOder = {}
      this.clearSelectData()
      this.selectOrderController.open()
      console.log('hhtest', '选择工单被清空-----------------')
    }
  }
  // 扫码开工
  async scanCodeToStartWork() {
    this.process = await ProcessRequest.post('/api/v1/process/info/scan', {
      operationId: this.selectOperationId,
      qrCode: this.scanCode,
      workOrderCode: this.selectWorkOder.workOrderCode!,
      stationId: this.currentStationId
    } as RequestParamModel)
    if (this.process && this.process.id) {
      this.scanState = 1
      this.opComponents = await ProcessRequest.get(`/api/v1/process/opCompent/get/${this.selectOperationId!}/${this.process?.id!}`)
      if (this.opComponents) {
        for (const element of this.opComponents) {
          if (CommonConstants.OPERATION_COMPONENT_TYPE.has(element.compentType!)) {
            element.compentType = CommonConstants.OPERATION_COMPONENT_TYPE.get(element.compentType!)
          }
        }
      }
      // 过滤掉点检工步
      this.opComponents = this.opComponents.filter(item => item.compentType !== '5');
      this.opComponents.unshift({
        compentName:'自检',
        compentType: '5',
        deleted:0,
        operationId: this.selectOperationId,
        processRouteId: this.process?.id,
        remark:'',
        sortNum:0
      })
    }
    this.scanState = 1
    // 保存此流转卡号到数据库中
    let seqNos: string[] = []
    seqNos = await preferencesUtil.get(CommonConstants.PREFERENCE_INSTANCE_NAME, this.selectWorkOder.workOrderCode!, seqNos)
    if (seqNos.includes(this.seqNo)) {
      return
    }
    seqNos.push(this.seqNo)
    preferencesUtil.put(CommonConstants.PREFERENCE_INSTANCE_NAME, this.selectWorkOder.workOrderCode!, seqNos)
  }
  // 未开工查询工序组件（工步）
  async getComponentsForNotStartWork() {
    this.opComponents = await ProcessRequest.get('/api/v1/op/compent/get/' + this.selectOperationId)
    if (this.opComponents) {
      for (const element of this.opComponents) {
        if (CommonConstants.OPERATION_COMPONENT_TYPE.has(element.compentType!)) {
          element.compentType = CommonConstants.OPERATION_COMPONENT_TYPE.get(element.compentType!)
        }
      }
    }
    // 过滤掉点检工步
    this.opComponents = this.opComponents.filter(item => item.compentType !== '5');
    this.opComponents.unshift({
      compentName: '自检',
      compentType: '5',
      deleted: 0,
      operationId: this.selectOperationId,
      processRouteId: '0',
      remark: '',
      sortNum: 0
    })
  }
  // 清除选中的相关数据(工单不做处理)
  clearSelectData() {
    this.selectOperationId = ''
    this.seqNo = ''
    this.seqList = []
    this.scanState = 0
    this.process = {}
    this.opComponents = []
    this.taskSeqArray = []
    this.handleAllClick()
  }

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

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

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

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

  connectMQTT = async ()=> {
    const clientOptions: MqttClientOptions = {
      url: 'mqtt://192.168.1.3:1883',   // 替换实际IP
      clientId: `process_client_${Date.now()}`,
      persistenceType: 1,              // 使用英文逗号       // 建议开启自动重连
    };
    // MQTT连接配置
    const connectOptions: MqttConnectOptions = {
      cleanSession: true,
      connectTimeout: 30,
      keepAliveInterval: 60,
      userName: 'optional_username',
      password: 'optional_password'
    };
    try {
      MqttManager.init(clientOptions);
      this.isConnected = await MqttManager.connect(connectOptions);
      if (this.isConnected ) {
        console.info('hhtest', 'MQTT connected successfully');
        await MqttManager.subscribe(CommonConstants.mqttSubscribeTopic1);
        if (CommonConstants.mqttSubscribeTopic1 != CommonConstants.mqttSubscribeTopic2) {
          await MqttManager.subscribe(CommonConstants.mqttSubscribeTopic2);
        }
      } else {
        console.error('hhtest', 'MQTT connection failed');
      }
    } catch (err) {
      console.error('hhtest', `MQTT error: ${JSON.stringify(err)}`);
    }
  }

  connectUsbDevice=async()=>{
    return USBDeviceManager.getInstance();
  }

  onPageShow() {
    const params = router.getParams() as Params; // 获取传递过来的参数对象
    if (params && params.auxiliaryOperationFlag) {
      this.isAuxiliaryViewOpen = true
    }
  }

  async aboutToAppear() {
    // 获取工位ip
    this.stationIp = CommonConstants.STATION_DEFAULT_IP
    try {
      const netHandle = connection.getDefaultNetSync();
      if (netHandle) {
        let connectionProperties = await connection.getConnectionProperties(netHandle)
        if (connectionProperties && connectionProperties.linkAddresses) {
          connectionProperties.linkAddresses.forEach((address: connection.LinkAddress, index: number) => {
            this.stationIp = address.address.address
            if (address.address.address.startsWith(CommonConstants.ipPrefix)) {
              CommonConstants.mqttSubscribeTopic1 = 'station' + address.address.address.replace(CommonConstants.ipPrefix, '') + '/data/devices'
              // todo 部署时放开注释
              // CommonConstants.mqttSubscribePublish = 'station' + address.address.address.replace(CommonConstants.ipPrefix, '') + '/cmd/devices'
            }
          })
        }
      }
    } catch (err) {
      console.log('hhtest', err);
    }
    // 创建mqtt连接和usb设备连接
    this.connectMQTT()
    this.connectUsbDevice()

    // 判断是否选中工单，未选择则选则工单
    if (!this.selectWorkOder || !this.selectWorkOder.workOrderCode) {
      this.selectOrderController.open()
    }
    //判断今日是否进行设备点检，否则先进行点检
    this.deviceChecks = await ProcessRequest.post('/api/v1/process/equipDailyCheck/list', {
      stationIp: this.stationIp,
      createDate: TimeUtil.getCurrentDate()
    } as RequestParamModel)
    if (!this.deviceChecks || this.deviceChecks.length <= 0) {
      this.deviceInspectionController.open()
    }
    // todo 删除
    let token:string = await ProcessRequest.post('api/auth/aioLogin', {
      password: '123456',
      userName: 'admin',
    } as RequestParamModel) ;
    if (token && token.length > 0) {
      CommonConstants.AUTH_TOKEN = token
      this.currentUserName = 'admin'
    }
    this.currentProductLine = '配件产线01'
    this.currentPLCode = 'PL000018'
    this.currentStationId = '71'
    this.currentStation = '包装工位1'
    let res:UserInfo = await ProcessRequest.get('/api/auth') ;
    this.currentUserId = res.id!
    // ---------------删除以上内容------------------
  }

  build() {
    Stack() {
      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()
          window.getLastWindow(getContext()).then((data) => {
            //获取窗口对象
            let windowClass = data;
            windowClass.minimize((err: BusinessError) => {
              const errCode: number = err.code;
              if (errCode) {
                console.error('Failed to minimize the window. Cause: ' + JSON.stringify(err));
                return;
              }
              console.info('Succeeded in minimizing the window.');
            });
            console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
          });
          return true;
        })

        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.workOrderCode!)
                    .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(this.currentStation)
                  .fontSize($r('app.float.fontSize_16'))
                  .fontWeight(FontWeight.Regular)
                  .fontColor($r('app.color.FFFFFF'))
                Text(this.currentUserName)
                  .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'))
            .onClick(() => {
              this.loginInfoController.open()
            })

            // 工序
            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(() => {
                        if (!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId) {
                          return
                        }
                        this.selectOperationId = item.operationId!
                        this.selectOperationName = item.operationName!
                        if (!item.exists) {
                          promptAction.showToast({
                            message: `${item.operationName}需要在${item.stationName}工位上生产`,
                            duration: 1500,
                            bottom: 100
                          })
                          if (this.scanCode) {
                            // 未开工查询工序组件
                            this.getComponentsForNotStartWork()
                          }
                        } else if (this.scanState === 0 && this.scanCode) {
                          // 未开工查询工序组件
                          this.getComponentsForNotStartWork()
                        } else if (this.scanState === 1) {
                          this.scanCodeToStartWork()
                        }
                        if (!this.seqNo || this.seqNo.length <= 0) {
                          this.handleAllClick()
                        }
                      })

                      if (index < (this.selectWorkOder?.ops && this.selectWorkOder?.ops?.length ? this.selectWorkOder?.ops!.length : 0) - 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'))
            .opacity(!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId ? 0.3 : 1)
          }
          .height('100%')
          .width('19.8%')
          .justifyContent(FlexAlign.SpaceBetween)

          // 右侧生产操作栏
          if (this.opComponents.length <= 0) {
            // 没有工序组件则展示扫码页面
            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) => {
                        if (!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId) {
                          return
                        }
                        this.scanCode = value
                      })
                      .onSubmit(async () => {
                        if (!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId) {
                          return
                        }
                        // 查询工序组件
                        this.getComponentsForNotStartWork()
                        this.seqNo = this.scanCode
                        // 保存此流转卡号到数据库中
                        let seqNos: string[] = []
                        seqNos = await preferencesUtil.get(CommonConstants.PREFERENCE_INSTANCE_NAME, this.selectWorkOder.workOrderCode, seqNos)
                        if (seqNos.includes(this.seqNo)) {
                          return
                        }
                        seqNos.push(this.seqNo)
                        preferencesUtil.put(CommonConstants.PREFERENCE_INSTANCE_NAME, this.selectWorkOder.workOrderCode, seqNos)
                      })
                  }
                  .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'))
            .opacity(!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId ? 0.3 : 1)
          } else {
            Column() {
              List({ space: 4 }) {
                ForEach(this.opComponents, (item: OperationComponent, index: number) => {
                  ListItem() {
                    Column() {
                      Stack() {
                        Image(this.selectComponentType === item.compentType! ? $r('app.media.process_component_state_select') : (this.componentStates.length >= (index + 1) && this.componentStates[index] === 1 ? $r('app.media.process_component_state_finish') : $r('app.media.process_component_state_no_select')))
                          .height(this.selectComponentType === item.compentType! ? '100%' : '90%')
                          .width('100%')
                          .objectFit(ImageFit.Fill)
                          .borderRadius($r('app.float.fontSize_16'))
                        Column({ space: 2 }) {
                          Image(this.componentResMap.get(item.compentType!))
                            .height($r('app.float.virtualSize_24'))
                            .width($r('app.float.virtualSize_24'))
                            .fillColor(this.selectComponentType === item.compentType! ? $r('app.color.99000000') : (this.componentStates.length >= (index + 1) && this.componentStates[index] === 1 ? $r('app.color.30D158') : $r('app.color.FFFFFF')))
                          Text(item.compentName!)
                            .fontSize($r('app.float.fontSize_16'))
                            .fontWeight(FontWeight.Regular)
                            .fontColor(this.selectComponentType === item.compentType! ? $r('app.color.99000000') : (this.componentStates.length >= (index + 1) && this.componentStates[index] === 1 ? $r('app.color.30D158') : $r('app.color.FFFFFF')))
                        }
                        .width('100%')
                        .height('90%')
                        .justifyContent(FlexAlign.Center)
                      }
                      .width('100%')
                      .height('100%')
                      .alignContent(Alignment.Top)
                      .onClick(() => {
                        this.selectComponentType = item.compentType!
                      })
                    }
                    .height('100%')
                    .width('12.5%')
                  }
                })
              }
              .listDirection(Axis.Horizontal)
              .height('9.3%')
              .width('79.1%')

              // 不同工序组件（工步）展示不同页面
              Column() {
                if (this.selectComponentType === '1') {
                  MaterialCollectView({
                    scanState: this.scanState,
                    seqNo: this.seqNo,
                    selectWorkOder: this.selectWorkOder,
                    selectOperationId: this.selectOperationId,
                    process: this.process,
                  })
                } else if (this.selectComponentType === '3' && this.scanState == 1) {
                  MultiMediaCollect({
                    seqNo: this.seqNo,
                    selectOperationId: this.selectOperationId,
                    process: this.process,
                  })
                } else if (this.selectComponentType === '5') {
                  SelfInspectView({
                    scanState: this.scanState,
                    seqNo: this.seqNo,
                    selectOperationId: this.selectOperationId,
                    process: this.process,
                  })
                } else if (this.selectComponentType === '6') {
                  SelfInspectView({
                    scanState: this.scanState,
                    seqNo: this.seqNo,
                    selectOperationId: this.selectOperationId,
                    process: this.process,
                  })
                }
              }
              .width('79.1%')
              .height('90.7%')
              .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'))
            .onClick(() => {
              if (!this.selectWorkOder.workOrderCode) {
                return
              }
              this.workInstructionsController.open()
            })

            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'))
            .onClick(() => {
              if (!this.selectWorkOder.workOrderCode) {
                return
              }
              this.completeReceiveController.open()
            })

            Blank()
              .onClick(() => {
                this.isAuxiliaryViewOpen = true
              })
            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(() => {
              if (!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId || !this.selectOperationId) {
                return
              }
              this.switchingProductDialogController.open()
            })

            Row().width('1.5%')
            Row({ space: 4 }) {
              Image(this.scanState === 1 ? $r('app.media.process_report') : $r('app.media.process_start_work'))
                .width($r('app.float.virtualSize_24'))
                .height($r('app.float.virtualSize_24'))
                .fillColor($r('app.color.FFFFFF'))
              Text(this.scanState === 1 ? '工序报工' : '工序开工')
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
            }
            .width('10%')
            .height('58.3%')
            .justifyContent(FlexAlign.Center)
            .backgroundColor(this.scanState === 1 ? $r('app.color.30D158') : $r('app.color.0A84FF'))
            .borderRadius($r('app.float.fontSize_16'))
            .onClick(async () => {
              if (!this.scanCode || this.scanCode.length <= 0) {
                promptAction.showToast({
                  message: `请先扫描流水/序列/铭牌号`,
                  duration: 1500,
                  bottom: 100
                })
                return
              }
              if (!this.selectOperationId || this.selectOperationId.length <= 0) {
                promptAction.showToast({
                  message: `请先选择工序`,
                  duration: 1500,
                  bottom: 100
                })
                return
              }
              if (this.scanState === 0) {
                this.scanCodeToStartWork()
              } else if (this.scanState === 1) {
                this.processReportingController.open()
              }
            })
          }
          .height('90.6%')
          .width('100%')
          .padding({ left: '2.6%', right: '2.6%' })
          .opacity(!this.selectWorkOder.workOrderCode || !this.currentUserName || !this.currentStationId ? 0.3 : 1)
        }
        .width('100%')
        .height('9.8%')
        .alignContent(Alignment.Top)
      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('app.color.000000'))
      if (this.isAuxiliaryViewOpen) {
        Column() {
          AuxiliaryOperationView({
            workOrderCode: this.selectWorkOder?.workOrderCode!,
            seqList: this.seqList,
            isAuxiliaryViewOpen:this.isAuxiliaryViewOpen,
            process: this.process,
            openLittleMaterialRequestDialog: ()=>{
              this.littleMaterialRequestController.open()
            },
            openBarcodeAssociationDialog: ()=>{
              this.barcodeAssociationController.open()
            },
            openInAndOutBoundDialog: ()=>{
              this.inAndOutBoundController.open()
            },
            openPictureDrawingDialog: ()=>{
              this.pictureDrawingController.open()
            },
            openDeviceInspectionDialog: ()=>{
              this.deviceInspectionController.open()
            },
          })
            .height('93.5%')
            .width('100%')
        }
        .height('100%')
        .width('100%')
        .justifyContent(FlexAlign.End)
        .transition(
          TransitionEffect.OPACITY
            .combine(TransitionEffect.translate({ y: 1000 }))
            .animation({
              duration:1500,
              curve: Curve.EaseOut
            })
        )
        .opacity(this.isAuxiliaryViewOpen ? 1 : 0)
        .translate({ y: this.isAuxiliaryViewOpen ? 0 : 1000 })
      }
    }
    .height('100%')
    .width('100%')
  }

  @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();
    })
  }

  // 选择工单弹窗控制器
  selectOrderController: CustomDialogController = new CustomDialogController({
    builder: SelectWorkOrderDialog({
      selectWorkOder: this.selectWorkOder,
      onConfirm: ()=>{
        this.clearSelectData()
      }
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 选择工位和用户弹窗控制器
  loginInfoController: CustomDialogController = new CustomDialogController({
    builder: LoginInfoDialog({
      searchDept:()=>{this.SwitchingDeptController.open()},
      searchStation:()=>{this.SwitchingStationController.open()},
      searchProductLine:()=>{this.SwitchingProductLineController.open()},
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  //切换部门弹窗控制器
  SwitchingDeptController: CustomDialogController = new CustomDialogController({
    builder: SwitchingDeptDialog({}),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 工序报工-报工数量弹窗
  ReportWorkNumController: CustomDialogController = new CustomDialogController({
    builder: ReportWorkNumDialog({
      userName: this.reportList[this.currentReportNumIndex].userName,
      currentOperationId: this.selectOperationId,
      currentWorkOrderCode: this.selectWorkOder.workOrderCode!,
      onConfirm:(num:number)=>{
        const index = this.currentReportNumIndex;
        if (this.reportList[index]) {
          this.reportList[index].reportNum = String(num);
          this.reportList = [...this.reportList];
        }
      }
    }),
    autoCancel: true,
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',
  })
  // 工序报工-不良品报工弹窗
  UnqualifiedReportController: CustomDialogController = new CustomDialogController({
    builder: UnqualifiedReportDialog({
      userName: this.reportList[this.currentUnqualifiedIndex].userName,
      onConfirm:(num:number)=>{
        const index = this.currentUnqualifiedIndex;
        if (this.reportList[index]) {
          this.reportList[index].unqualifiedNum = String(num);
          this.reportList = [...this.reportList];
        }
      }
    }),
    autoCancel: true,
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',
  })
  // 工序报工-添加参与人员
  JoinPersonNameController: CustomDialogController = new CustomDialogController({
    builder: JoinPersonNameDialog({
      reportList:this.reportList,
      onConfirm:(name:string)=>{
        const nameExists = this.reportList.some(item =>
        item.userName && name &&
          item.userName.toString().toLowerCase() === name.toString().toLowerCase().trim()
        );
        if (nameExists) {
          promptAction.showToast({
            message: '该用户已添加，请添加其他用户！',
            duration: 2000
          });
          return;
        }
        const index = this.currentReporterIndex;
        if (this.reportList[index]) {
          this.reportList[index].userName = name;
          this.reportList = [...this.reportList];
        }
      }
    }),
    autoCancel: true,
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',
  })
  // 工序报工弹窗
  processReportingController: CustomDialogController = new CustomDialogController({
    builder: ProcessReportingDialog({
      onSelectReporter:(index:number)=>{
        this.currentReporterIndex = index;
        this.JoinPersonNameController.open();
      },
      onSelectReportNum:(index:number)=>{
        if (!this.reportList[index]?.userName?.trim()) {
          promptAction.showToast({
            message: '请先添加用户',
            duration: 2000
          });
          return;
        }
        this.currentReportNumIndex = index
        this.ReportWorkNumController.open()
      },
      onSelectUnqualified:(index:number)=>{
        if (!this.reportList[index]?.userName?.trim()) {
          promptAction.showToast({
            message: '请先添加用户',
            duration: 2000
          });
          return;
        }
        this.currentUnqualifiedIndex = index
        this.UnqualifiedReportController.open()
      },
      reportList:this.reportList,
      selectWorkOder: this.selectWorkOder,
      selectOperationName: this.selectOperationName,
      selectOperationId: this.selectOperationId
    }),
    autoCancel: true,
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',
  })
  // 切换产线弹窗控制器
  SwitchingProductLineController: CustomDialogController = new CustomDialogController({
    builder: SwitchingProductLineDialog({}),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 切换工位弹窗控制器
  SwitchingStationController: CustomDialogController = new CustomDialogController({
    builder: SwitchingStationDialog({}),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  //切换用户弹窗控制器
  switchingUserController: CustomDialogController = new CustomDialogController({
    builder: SwitchingUserDialog({}),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 切换产品弹窗控制器
  switchingProductDialogController: CustomDialogController = new CustomDialogController({
    builder: SwitchingProductDialog({
      scanState:this.scanState,
      process:this.process,
      scanSeqValue: this.scanCode,
      selectWorkOder:this.selectWorkOder,
      currentOperationId:this.selectOperationId,
      opComponents:this.opComponents,
      seqNo:this.seqNo,
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 作业指导弹窗控制器
  workInstructionsController: CustomDialogController = new CustomDialogController({
    builder: WorkInstructionsDialog({
      materialCode: this.selectWorkOder.materialCode!,
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 齐套接收弹窗控制器
  completeReceiveController: CustomDialogController = new CustomDialogController({
    builder: CompleteReceiveDialog({
      currentWorkOrderCode: this.selectWorkOder.workOrderCode!,
      currentOperationId: this.selectOperationId
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 零星叫料弹窗控制器
  littleMaterialRequestController: CustomDialogController = new CustomDialogController({
    builder: LittleMaterialRequestDialog({
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 仓储操作弹窗控制器
  inAndOutBoundController: CustomDialogController = new CustomDialogController({
    builder: InAndOutBoundDialog({
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 条码关联弹窗控制器
  barcodeAssociationController: CustomDialogController = new CustomDialogController({
    builder: BarcodeAssociationDialog({
      workOrderCode: this.selectWorkOder?.workOrderCode!,
      seqList: this.seqList
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 图纸资料弹窗控制器
  pictureDrawingController: CustomDialogController = new CustomDialogController({
    builder: PictureDrawingDialog({
      materialCode: this.selectWorkOder?.materialCode!
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  // 设备点检弹窗
  deviceInspectionController: CustomDialogController = new CustomDialogController({
    builder: DeviceInspectionDialog({
      deviceChecks: this.deviceChecks,
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    alignment:DialogAlignment.Center,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
}