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';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  // 工单列表
  @State workOrders: WorkOrderInfo[] = []
  // 选中工单
  @State selectWorkOder: WorkOrderInfo = {
    beforeNum: '0.00',
    completeNum:'0.00',
    inventoryNum:'0.00',
    materialCode:'GAS-RTA',
    materialModel: 'N2纯度99.9999%，露点<-70°C',
    materialName:'快速退火气体',
    ops:[
      {
        exists:false,
        firstCheck:0,
        inspection:0,
        mutualInspection:0,
        opComplete:false,
        operationCode:'GX-SFZB',
        operationId:'679',
        operationName:'三防准备',
        operationSort:0,
        selfCheck:0,
        seqs:[],
        specialInspection:0,
        workOrderCode:'10.25.0022'
      },
      {
        exists:false,
        firstCheck:0,
        inspection:0,
        mutualInspection:0,
        opComplete:false,
        operationCode:'GX-CXSL',
        operationId:'680',
        operationName:'程序烧录',
        operationSort:1,
        selfCheck:0,
        seqs:[],
        specialInspection:0,
        workOrderCode:'10.25.0022'
      },
      {
        exists:true,
        firstCheck:0,
        inspection:0,
        mutualInspection:0,
        opComplete:false,
        operationCode:'GX-WGJC',
        operationId:'681',
        operationName:'外观检测',
        operationSort:2,
        selfCheck:0,
        seqs:[
          {
            currentTask:'当前进度:包装工位1(三防准备)',
            seqNo:'10.25.0022-0001',
            state:'0'
          }
        ],
        specialInspection:0,
        workOrderCode:'10.25.0022'
      },
      {
        exists:false,
        firstCheck:0,
        inspection:0,
        mutualInspection:0,
        opComplete:false,
        operationCode:'GX-JY',
        operationId:'682',
        operationName:'检验',
        operationSort:3,
        selfCheck:0,
        seqs:[],
        specialInspection:0,
        workOrderCode:'10.25.0022'
      },
      {
        exists:false,
        firstCheck:0,
        inspection:0,
        mutualInspection:0,
        opComplete:false,
        operationCode:'GJ-WWSF',
        operationId:'683',
        operationName:'委外三防',
        operationSort:4,
        selfCheck:0,
        seqs:[],
        specialInspection:0,
        workOrderCode:'10.25.0022'
      },
      {
        exists:false,
        firstCheck:0,
        inspection:0,
        mutualInspection:0,
        opComplete:false,
        operationCode:'GJ-GDWCC',
        operationId:'677',
        operationName:'高低温存储',
        operationSort:5,
        selfCheck:0,
        seqs:[],
        specialInspection:0,
        workOrderCode:'10.25.0022'
      }
    ],
    orderCode:'DD2505140001',
    orderName:'GAS-RTA',
    planNum:'1.00',
    planStartEnd:'2025-05-16 08:26:00',
    planStartWhen:'2025-05-16 08:00:00',
    processRouteCode:'GAS-RTA',
    processRouteId:147,
    processRouteName:'GAS-RTA',
    productLineId:'18',
    productLineName:'配件产线01',
    workOrderCode:'10.25.0022',
    workOrderState:'3',
    workshopId:'0',
    workshopName:'青半002'
  }
  // 工位通知数量
  @State noticeNum: number = 100

  pageNo: number = 1
  pageSize: number = 9

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

  async aboutToAppear() {
    this.SelectOrderController.open()
    if (!this.selectWorkOder || !this.selectWorkOder.workOrderCode) {
      // 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_38'))
      }
      .height('4%')
      .width('94.8%')
      .justifyContent(FlexAlign.Start)
      .onClick(()=> {
        router.back()
      })

      Row() {
        // 左侧选择工单、工位、人员；工序查看
        Column() {
          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'))
          // 工位、人员信息
          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({ space: 4 }) {
                      Stack() {
                        Circle()
                          .width('100%')
                          .height('100%')
                          .fillOpacity(0)
                          .stroke($r('app.color.60FFFFFF'))
                          .strokeWidth('1px')
                        Row() {
                          Text((index + 1).toString())
                            .fontSize($r('app.float.fontSize_16'))
                            .fontColor($r('app.color.FFFFFF'))
                            .fontWeight(FontWeight.Bold)
                        }
                        .width('100%')
                        .height('100%')
                        .alignItems(VerticalAlign.Center)
                        .justifyContent(FlexAlign.Center)
                        .margin({right: '15%'})
                      }
                      .width('20%')
                      .height('100%')

                      Text(item.operationName)
                        .fontSize($r('app.float.fontSize_16'))
                        .fontColor( $r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Regular)
                    }
                    .width('100%')
                    .height('70%')
                    .backgroundColor($r('app.color.20FFFFFF'))
                    .borderRadius($r('app.float.virtualSize_40'))
                    .justifyContent(FlexAlign.Start)
                    .padding({ right: '5%' })
                    .onClick(() => {

                    })

                    if (index < this.selectWorkOder.ops!.length - 1) {
                      Row() {
                        Divider()
                          .vertical(true)
                          .color($r('app.color.60FFFFFF'))
                          .strokeWidth('1px')
                          .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() {

        }
        .width('79.1%')
        .height('100%')
      }
      .height('80%')
      .width('94.8%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.000000'))
  }
}