订单物料入库

entry/src/main/ets/component/InBoundView.ets

@@ -0,0 +1,130 @@
+@Component
+export struct InBoundView {
+  @Prop messages: string[] = []
+  build() {
+    Column() {
+      Text("空箱入库")
+        .fontColor($r('app.color.FFFFFF'))
+        .fontSize($r('app.float.fontSize_15_2'))
+        .margin({ top: '3%' })
+      Column() {
+        Stack() {
+          Image($r('app.media.drawer_in_box'))// 替换为您的电梯图片资源
+            .width('100%')
+            .height('100%')
+            .borderRadius($r('app.float.virtualSize_6_4'))
+            .objectFit(ImageFit.Contain)
+          // 文字信息层（左下角）
+          Column() {
+            Row() {
+              Image($r('app.media.material_weight'))
+                .width('5%')
+                .height('30%')
+                .fillColor($r('app.color.30D158'))
+              Text("15Kg")
+                .margin({ left: 10 })
+                .fontSize($r('app.float.fontSize_15_2'))
+                .fontColor($r('app.color.30D158')) // 绿色文字
+            }
+
+            Row() {
+              Image($r('app.media.material_rfid'))
+                .width('5%')
+                .height('30%')
+                .fillColor($r('app.color.30D158'))
+
+              Text("LX-00010")
+                .margin({ left: 10 })
+                .fontSize($r('app.float.fontSize_15_2'))
+                .fontColor($r('app.color.30D158')) // 绿色文字
+            }
+          }.height('19%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)
+          .position({ x: '3%', y: '78%' })
+
+          // 右上角物料信息
+          Row() {
+            Text(`物料:  0`)
+              .fontSize(18)
+              .fontColor($r('app.color.0A84FF'))// 使用图片中的蓝色
+              .fontWeight(FontWeight.Medium)
+          }
+          .justifyContent(FlexAlign.Center)
+          .backdropBlur(5) // 关键：背景模糊效果（模拟图片中的隐约线条）
+          .backgroundColor($r('app.color.40000000')) // 10%透明白底
+          .borderRadius($r('app.float.virtualSize_6_4')) // 圆角大小根据图片调整
+          .width('20%') // 自适应文字宽度
+          .height('10%') // 固定高度
+          .position({ x: '78%', y: '2%' })
+
+          // 右侧纵向时间信息
+          Column({ space: 5 }) {
+            ForEach(this.messages, (item: string) => {
+              Text(item)// .fontColor($r('app.color.0A84FF'))
+                // .fontSize($r('app.float.fontSize_8'))
+                .fontSize($r('app.float.fontSize_6'))
+                .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+            })
+          }
+          .position({ x: '68%', y: '80%' })
+          .alignItems(HorizontalAlign.End)
+        }
+        .width('95%')
+        .height('100%') // 根据实际需求调整
+      }
+      .height('67%')
+      .width('100%')
+      .margin({ top: '3%' })
+
+      //.justifyContent(FlexAlign.SpaceAround)
+      Row() {
+        Button({ type: ButtonType.Normal }) {
+          Text("伸出")
+            .fontSize($r('app.float.fontSize_12'))
+            .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+        }
+        .width('45%')
+        .height('100%')
+        .backgroundColor($r('app.color.20FFFFFF'))
+        .borderRadius($r('app.float.virtualSize_6_4'))
+        .onClick(() => {
+          // 按钮点击事件处理
+        })
+
+        Button({ type: ButtonType.Normal }) {
+          Text("缩回")
+            .fontSize($r('app.float.fontSize_12'))
+            .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+        }
+        .width('45%')
+        .height('100%')
+        .backgroundColor($r('app.color.20FFFFFF'))
+        .borderRadius($r('app.float.virtualSize_6_4'))
+        .onClick(() => {
+          // 按钮点击事件处理
+        })
+      }
+      .width('95%')
+      .height('6%')
+      .margin({ top: '2%' })
+      .justifyContent(FlexAlign.SpaceAround)
+      .alignItems(VerticalAlign.Top)
+
+      Button({ type: ButtonType.Normal }) {
+        Text("空箱入库")
+          .fontSize($r('app.float.fontSize_12'))
+          .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+      }
+      .margin({ top: '9%' })
+      .width('90%')
+      .height('6%')
+      .backgroundColor($r('app.color.20FFFFFF'))
+      .borderRadius($r('app.float.virtualSize_6_4'))
+      .onClick(() => {
+        // 按钮点击事件处理
+      })
+    }
+    .width('100%')
+    .height('100%')
+    .justifyContent(FlexAlign.Start)
+  }
+}

entry/src/main/ets/component/OrderMaterialsStorageView.ets

@@ -1,31 +1,31 @@
-import {OrderParams,MaterialItem,MaterialBox} from "../params/OrderMaterialsStorageParams"
+import {DemandMaterial,OrderParams,MaterialItem,MaterialBox,EmptyBox} from "../params/OrderMaterialsStorageParams"
+import { ON } from '@ohos.UiTest'
+
 @Component
 export struct ProcessFlow {
-  @Prop circle1Color : string
-  @Prop circle2Color : string
-  @Prop circle3Color : string
+  @Prop currentStep:number =0
   build() {
     Row() {
       // 步骤1
       FlowStep({
         stepNumber: 1,
-        title: '选择订单',
+        title: '选择工单',
         showConnector: true,
-        backColor:this.circle1Color
+        isChoose:this.currentStep === 1
       })
       // 步骤2
       FlowStep({
         stepNumber: 2,
         title: '调取料箱',
         showConnector: true,
-        backColor:this.circle2Color
+        isChoose:this.currentStep === 2
       })
       // 步骤3
       FlowStep({
         stepNumber: 3,
         title: '绑定入库',
         showConnector: false,
-        backColor:this.circle3Color
+        isChoose:this.currentStep === 3
       })
     }
     .justifyContent(FlexAlign.Center)
@@ -38,135 +38,121 @@ struct FlowStep {
   @Prop stepNumber: number
   @Prop title: string
   @Prop showConnector: boolean
-  @Prop backColor : string
+  @Prop isChoose : boolean
   build() {
     Row() {
       Column() {
         // 步骤圆圈
         Column() {
           Text(this.stepNumber.toString())
-            .fontSize(16)
-            .fontColor('#FFFFFF') // 深灰数字
+            .fontColor(this.isChoose? $r('app.color.FFFFFF'):$r('app.color.60FFFFFF'))
+            .fontSize($r('app.float.fontSize_15_2'))
         }
-        .width(40)
-        .height(40)
+        .width($r('app.float.virtualSize_23'))
+        .height($r('app.float.virtualSize_23'))
         .borderRadius(20) // 圆形
-        .backgroundColor(this.backColor) // 浅灰背景
+        .backgroundColor(this.isChoose? $r('app.color.0A84FF'):$r('app.color.20FFFFFF'))
         .justifyContent(FlexAlign.Center)
         .alignItems(HorizontalAlign.Center)
 
         // 步骤文字
         Text(this.title)
-          .fontSize(14)
+          .fontColor(this.isChoose? $r('app.color.FFFFFF'):$r('app.color.60FFFFFF'))
+          .fontSize($r('app.float.fontSize_9_6'))
           .margin({ top: 8 })
-          .fontColor('#000000') // 黑色文字
 
-        // 连接线（最后一个步骤不显示）
       }
       .justifyContent(FlexAlign.Center)
       .alignItems(HorizontalAlign.Center)
-
       if (this.showConnector) {
         Divider()
           .vertical(false)
           .strokeWidth(1)
-          .color('#1890FF')
-          .margin({ left: 10, right: 10,bottom:15 })
-          .width('15%')
+          .color($r('app.color.20FFFFFF'))
+          .margin({
+            left: '-3%',
+            right: '-3%',// 向左延伸至圆心
+          //
+          })
+          .width('30%') // 自适
       }
     }
   }
 }
 
-// 订单项组件封装
-@Component
-export struct OrderItemView {
-  @Prop orderName: string = '默认订单'
-  @Prop orderNo: string = '000000'
-  @Prop orderDate: string = '2023/01/01'
-  @Prop progress: string = '0%'
-  @Prop isSelected: boolean = false
-
-  private onSelect: (index: number) => void = () => {}
-  private index: number = 0
-
-  build() {
-    Column() {
-      Text(this.orderName)
-        .fontSize(16)
-        .fontColor(this.isSelected ? '#FFFFFF' : '#000000')
-
-      Text(`入库单号: ${this.orderNo}`)
-        .fontSize(14)
-        .fontColor(this.isSelected ? '#FFFFFF' : '#666666')
-
-      Text(`下发时间: ${this.orderDate}`)
-        .fontSize(14)
-        .fontColor(this.isSelected ? '#FFFFFF' : '#666666')
-        .margin({ top: 8 })
-
-      Text(`入库比例: ${this.progress}`)
-        .fontSize(14)
-        .fontColor(this.isSelected ? '#FFFFFF' : '#1890FF')
-        .margin({ top: 8 })
-    }
-    .backgroundColor(this.isSelected ? '#1890FF' : '#DFE5E7')
-    .onClick(() => {
-      this.onSelect(this.index)  // 点击时调用父组件的选中方法
-    })
-    .padding(16)
-    .border({
-      width: 1,
-      color: this.isSelected ? '#1890FF' : '#CCCCCC',
-      radius: 4
-    })
-    .width('100%')
-  }
-}
 
-// 订单列表容器
 @Component
-export struct OrderListView {
+export struct OrderListComponent {
   private scrollerForList: Scroller = new Scroller()
   @Prop orders: OrderParams[] = []
   @State selectedIndex: number = -1  // 添加选中索引状态
   @Link selectedOrderNo: string
   @Link selectedOrderDate: string
   @Link selectedOrderName: string
+  @Link selectedOrderInRatio:string
 
-  // 处理选中逻辑
-  private handleSelect(index: number): void {
+  // 选中回调函数
+  private onSelect(index: number): void {
     this.selectedIndex = index
     this.selectedOrderNo = this.orders[index].orderNo
     this.selectedOrderDate = this.orders[index].date
     this.selectedOrderName = this.orders[index].orderName
+    this.selectedOrderInRatio = this.orders[index].progress
   }
 
   build() {
-    List({ space: 12 ,scroller: this.scrollerForList}) {
-      ForEach(this.orders, (item:OrderParams, index) => {
-        ListItem() {
-          OrderItemView({
-            orderName: item.orderName,
-            orderNo: item.orderNo,
-            orderDate: item.date,
-            progress: item.progress,
-            isSelected: index === this.selectedIndex,
-            onSelect: () => this.handleSelect(index),
-            index: index
-          })
-        }
-      })
+    Column() { // 订单列表
+      List({ space: 8,scroller:this.scrollerForList }) {
+        ForEach(this.orders, (item: OrderParams, index) => {
+          ListItem() {
+            Column() {
+              // 订单标题（带订单号）
+              Text(`${item.orderName}`)
+                .fontSize($r('app.float.fontSize_12'))
+                .fontColor($r('app.color.FFFFFF'))
+                .width('100%')
+                .textAlign(TextAlign.Start)
+
+              // 订单详情
+              Column({ space: 3 }) {
+                Text(`工单编号: ${item.orderNo}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+
+                Text(`下发时间: ${item.date}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+
+                Row() {
+                  Text('入库比例:')
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_8'))
+
+                  Text(item.progress)
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_8'))
+                    .margin({ left: 4 })
+                }
+                .width('100%')
+                .justifyContent(FlexAlign.Start)
+              }
+              .margin({ top: 6 })
+              .alignItems(HorizontalAlign.Start)
+            }.backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
+            .borderRadius($r('app.float.virtualSize_9_6'))
+            .padding(13)
+            .border({width:2,color:index === this.selectedIndex ? $r('app.color.2030D158'):$r('app.color.20FFFFFF')})
+            .onClick(() => {
+              this.onSelect(index)
+            })
+          }
+        })
+      }
+      .width('100%')
+      .flexGrow(1)
     }
     .width('100%')
     .height('100%')
-    .listDirection(Axis.Vertical)
-    .divider({
-      strokeWidth: 1,
-      color: '#F0F0F0',
-      startMargin: 16,
-      endMargin: 16
-    })
   }
 }
 
@@ -236,146 +222,191 @@ export struct SingleOrder {
   @Prop selectedOrderNo: string
   @Prop selectedOrderDate: string
   @Prop selectedOrderName: string
+  @Prop selectedOrderInRatio: string
   build() {
     Column() {
-      // 订单标题
+      // 订单标题（带订单号）
       Text(this.selectedOrderName)
-        .fontSize(18)
-        .fontWeight(FontWeight.Bold)
-        .margin({ bottom: 12 })
-      // 订单详情
-      Text("入库单号： "+this.selectedOrderNo)
-        .fontSize(14)
-        .fontColor('#666666')
-        .margin({ bottom: 8 })
-
-      Text("下发时间： "+this.selectedOrderDate)
-        .fontSize(14)
-        .fontColor('#666666')
-    }
-    .padding(16)
-    .backgroundColor('#F5F5F5') // 浅灰背景
-    .width('100%') // 占Row的50%
-    .alignItems(HorizontalAlign.Center)
-  }
-}
-
-@Component
-export struct materialScan {
-  // @Prop selectedOrderNo: string
-  // @Prop selectedOrderDate: string
-  // @Prop selectedOrderName: string
-  build() {
-    Column() {
-      // 扫码标题
-      Text('物料扫码')
-        .fontSize(18)
-        .fontWeight(FontWeight.Bold)
-        .margin({ bottom: '5%' })
-
-      // 扫码提示
-      TextInput({ placeholder: '请扫描物料编码' })
-        .type(InputType.Normal)
-        .placeholderFont({ size: 16 })
-        .fontSize(16)
+        .fontSize($r('app.float.fontSize_12'))
+        .fontColor($r('app.color.FFFFFF'))
         .width('100%')
-        .height(40)
-        .margin({ bottom: '5%' })
-        .border({
-          width: 1,
-          color: '#1890FF', // 使用图片中的蓝色边框
-          radius: 4
-        })
-        .backgroundColor('#FFFFFF') // 白色背景
+        .textAlign(TextAlign.Start)
 
-      // 操作说明
-      Text('扫码查询同类物料，选择放入已有物料箱或空箱')
-        .fontSize(12)
-        .fontColor('#999999')
-        .margin({ bottom: '15%' })
+      // 订单详情
+      Column({ space: 3 }) {
+        Text(`工单编号: ${this.selectedOrderNo}`)
+          .fontColor($r('app.color.FFFFFF'))
+          .fontSize($r('app.float.fontSize_8'))
+
+        Text(`下发时间: ${this.selectedOrderDate}`)
+          .fontColor($r('app.color.FFFFFF'))
+          .fontSize($r('app.float.fontSize_8'))
+
+        Row() {
+          Text('入库比例:')
+            .fontColor($r('app.color.FFFFFF'))
+            .fontSize($r('app.float.fontSize_8'))
+
+          Text(this.selectedOrderInRatio)
+            .fontColor($r('app.color.FFFFFF'))
+            .fontSize($r('app.float.fontSize_8'))
+            .margin({ left: 4 })
+        }
         .width('100%')
-
-      // 物料信息展示区
-      Column() {
-        Text('物料名称XXXXXXX')
-          .fontSize(16)
-          .margin({ bottom: 8 })
-
-        Text('产品型号xxxxxxx')
-          .fontSize(14)
-          .fontColor('#666666')
-          .margin({ bottom: 8 })
-
-        Text('序列号：2131231231')
-          .fontSize(14)
-          .margin({ bottom: 8 })
-
-        Text('数量：500个')
-          .fontSize(14)
-          .fontColor('#1890FF')
+        .justifyContent(FlexAlign.Start)
       }
-    }
-    .padding(16)
-    .backgroundColor('#F5F5F5') // 浅灰背景
-    .width('100%') // 占Row的50%
-    .alignItems(HorizontalAlign.Center)
+      .margin({ top: 6 })
+      .alignItems(HorizontalAlign.Start)
+     Divider()
+       .strokeWidth(1)
+       .color($r('app.color.20FFFFFF'))
+       .margin({top:'2%'})
+    }//.backgroundColor(index === this.selectedIndex ? $r('app.color.30D158') : $r('app.color.20FFFFFF')) // 选中状态加深
+    .borderRadius($r('app.float.virtualSize_9_6'))
+    .padding(13)
+
   }
 }
 
-@Component
-export struct BoxGrid {
-  @Prop boxes: MaterialBox[] = [];
 
+@Component
+export struct BoxGrid{
+  private scrollerForList: Scroller = new Scroller()
+  @Prop orders: OrderParams[] = []
+  @State selectedIndex: number = -1  // 添加选中索引状态
+  // 选中回调函数
+  private onSelect(index: number): void {
+    this.selectedIndex = index
 
+  }
+  @Prop materialBoxs: MaterialBox[] = [];
   build() {
-    Grid() {
-      ForEach(this.boxes, (box:MaterialBox) => {
-        GridItem() {
-          Column() {
-            // 顶部标题区
-            Text(box.name)
-              .fontSize(16)
-              .fontWeight(FontWeight.Bold)
+    Column() {
+      Grid(this.scrollerForList) {
+        ForEach(this.materialBoxs, (box: MaterialBox, index) => {
+          GridItem() {
+            Column() {
+              // 订单标题（带订单号）
+              Text(`${box.name}`)
+                .fontSize($r('app.float.fontSize_12'))
+                .fontColor($r('app.color.FFFFFF'))
+                .width('100%')
+                .textAlign(TextAlign.Start)
+                .margin({ bottom: '2%' })
+              // 订单详情
+              Column({ space: 3 }) {
+                Text(`料箱编号: ${box.id}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`料箱类型: ${box.boxType}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`所属订单: ${box.order}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`数量: ${box.boxNumber}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`位置: ${box.position}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+              }
               .width('100%')
-              .textAlign(TextAlign.Center)
-              .margin({ bottom: 8 })
-            if (box.type === 'empty') {
-              Text('空箱图片')
-                .fontSize(14)
-                .fontColor('#FF0000')// 红色文字
-                .width('90%')
-                .height(60)
-                .backgroundColor('#FFFFFF')
-                .textAlign(TextAlign.Center)
-                .margin({ bottom: 8 })
-            }
-            BoxInfoRow({ label: '料箱编号', value: box.boxNumber})
-            BoxInfoRow({ label: '位置', value: box.position })
-            if (box.type === 'material') {
-              BoxInfoRow({ label: '料箱类型', value: box.boxType })
-              BoxInfoRow({ label: '所属订单', value: box.order || '' })
-              BoxInfoRow({ label: '数量', value: `${box.quantity}` })
+              .justifyContent(FlexAlign.Start)
+              .alignItems(HorizontalAlign.Start)
             }
+            //.margin({ top: 6 })
+            .alignItems(HorizontalAlign.Start)
+          }
+          .backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
+          .borderRadius($r('app.float.virtualSize_9_6'))
+          .padding(13)
+          .border({
+            width: 2,
+            color: index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
+          })
+          .onClick(() => {
+            this.onSelect(index)
+          })
 
-          }.width('100%')
-          .height('40%')
-          .padding(12)
-          .backgroundColor('#FFFFFF')
-          .borderRadius(4)
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr')
+      .columnsGap(10) // 移除网格内部列间距
+      .rowsGap(10) // 移除网格内部行间距
+      .width('100%') // 确保填满父容器
+      .height('50%')
+      .padding(10)
+
+      Grid(this.scrollerForList) {
+        ForEach(this.materialBoxs, (box: MaterialBox, index) => {
+          GridItem() {
+            Column() {
+              // 订单标题（带订单号）
+              Text(`${box.name}`)
+                .fontSize($r('app.float.fontSize_12'))
+                .fontColor($r('app.color.FFFFFF'))
+                .width('100%')
+                .textAlign(TextAlign.Start)
+                .margin({ bottom: '2%' })
+              // 订单详情
+              Column({ space: 3 }) {
+                Text(`料箱编号: ${box.id}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`料箱类型: ${box.boxType}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`所属订单: ${box.order}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`数量: ${box.boxNumber}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+                Text(`位置: ${box.position}`)
+                  .fontColor($r('app.color.FFFFFF'))
+                  .fontSize($r('app.float.fontSize_8'))
+                  .textAlign(TextAlign.Start)
+              }
+              .width('100%')
+              .justifyContent(FlexAlign.Start)
+              .alignItems(HorizontalAlign.Start)
+            }
+            //.margin({ top: 6 })
+            .alignItems(HorizontalAlign.Start)
+          }
+          .backgroundColor(index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
+          .borderRadius($r('app.float.virtualSize_9_6'))
+          .padding(13)
           .border({
-            width: 1,
-            color: '#F0F0F0'
+            width: 2,
+            color: index === this.selectedIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
           })
-        }
-      })
+          .onClick(() => {
+            this.onSelect(index)
+          })
+
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr')
+      .columnsGap(10) // 移除网格内部列间距
+      .rowsGap(10) // 移除网格内部行间距
+      .width('100%') // 确保填满父容器
+      .height('50%')
+      .padding(10)
     }
-    .columnsTemplate('1fr 1fr 1fr')
-    .columnsGap(10)  // 移除网格内部列间距
-    .rowsGap(10)     // 移除网格内部行间距
-    .width('100%')  // 确保填满父容器
-    .height('100%')
-    .padding(10)
-    .backgroundColor('#F5F5F5')     // 背景色与图片一致
+
+
+    // 背景色与图片一致
 
   }
 
@@ -401,4 +432,54 @@ struct BoxInfoRow {
     .margin({ bottom: 6 })
     .justifyContent(FlexAlign.Start)
   }
-}
+}
+
+@Component
+export struct MaterialList {
+  private scrollerForList: Scroller = new Scroller()
+  @Prop MaterialData: DemandMaterial[] = []
+  build() {
+    Column() {
+      List({scroller:this.scrollerForList}) {
+        ForEach(this.MaterialData, (item:DemandMaterial) => {
+          ListItem() {
+              Column() {
+                Row(){
+                  Text(item.materialName)
+                    .fontSize($r('app.float.fontSize_12'))
+                    .fontColor($r('app.color.FFFFFF'))
+                    .width('90%')
+                    .textAlign(TextAlign.Start)
+                  Text(`${item.inBoundNum}/${item.planNum}`)
+                    .fontSize($r('app.float.fontSize_12'))
+                    .fontColor($r('app.color.FFFFFF'))
+                    .width('10%')
+                    .textAlign(TextAlign.End)
+                }.margin({top:'1%'})
+                Row(){
+                  Text(`型号： ${item.materialType}`)
+                    .fontSize($r('app.float.fontSize_8'))
+                    .fontColor($r('app.color.FFFFFF'))
+                    .width('90%')
+                    .textAlign(TextAlign.Start)
+                  Text('入库/计划数量')
+                    .fontSize($r('app.float.fontSize_7'))
+                    .fontColor($r('app.color.60FFFFFF'))
+                    .width('10%')
+                    .textAlign(TextAlign.End)
+                }.margin({bottom:'1%'})
+              }.width('100%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly).height('12%')
+          }
+        })
+      }
+      .width('100%')
+      .height('100%')
+      .divider({
+        strokeWidth: 1,
+        color: $r('app.color.20FFFFFF')
+      })
+    }
+    .height('100%')
+    .justifyContent(FlexAlign.Start)
+  }
+}

entry/src/main/ets/pages/EmptyBoxStorage.ets

@@ -1,5 +1,6 @@
 import {NavigationBar} from '../component/NavigationBar'
 import {TimeAndTitle} from "../component/TimeAndTitle"
+import {InBoundView} from '../component/InBoundView'
 import router from '@ohos.router';
 @Entry
 @Component
@@ -8,6 +9,12 @@ struct emptyBoxStorage {
   @State isMaterialBoxExist: Boolean = true;
   @State isPrinterOnline: Boolean = true;
   @State isRfidOnline: Boolean = true;
+  @State messages: string[] = [
+    "抽屉伸出成功                   12-12-12",
+    "抽屉伸出成功                   12-12-12",
+    "抽屉伸出成功                   12-12-12",
+    "抽屉伸出成功                   12-12-12"
+  ]
   build() {
     Row() {
       Column() {
@@ -97,6 +104,10 @@ struct emptyBoxStorage {
             .height('100%')
             .width('45%')
             .justifyContent(FlexAlign.Start)
+            Image($r('app.media.arrow_right'))
+              .width($r('app.float.virtualSize_23'))
+              .height($r('app.float.virtualSize_23'))
+              .fillColor($r('app.color.FFFFFF'))
             Column(){
               Text("打印条码")
                 .fontColor($r('app.color.FFFFFF'))
@@ -192,123 +203,22 @@ struct emptyBoxStorage {
           .height('85%')
           .justifyContent(FlexAlign.SpaceAround)
           .backgroundColor($r('app.color.10FFFFFF'))
-
+          Image($r('app.media.arrow_right'))
+            .width($r('app.float.virtualSize_23'))
+            .height($r('app.float.virtualSize_23'))
+            .fillColor($r('app.color.FFFFFF'))
+            .margin({left:'-2%',right:'-2%'})
           Column(){
-            Column(){
-              Text("空箱入库")
-                .fontColor($r('app.color.FFFFFF'))
-                .fontSize($r('app.float.fontSize_15_2'))
-                .margin({top:'3%'})
-              Column(){
-                Stack() {
-                  Image($r('app.media.drawer_in_box')) // 替换为您的电梯图片资源
-                    .width('100%')
-                    .height('100%')
-                    .borderRadius($r('app.float.virtualSize_6_4'))
-                    .objectFit(ImageFit.Contain)
-                  // 文字信息层（左下角）
-                  Column() {
-                    Row(){
-                      Image($r('app.media.material_weight'))
-                        .width('5%')
-                        .height('30%')
-                        .fillColor($r('app.color.30D158'))
-                      Text("15Kg")
-                        .margin({left:10})
-                        .fontSize($r('app.float.fontSize_15_2'))
-                        .fontColor($r('app.color.30D158')) // 绿色文字
-                    }
-                    Row(){
-                      Image($r('app.media.material_rfid'))
-                        .width('5%')
-                        .height('30%')
-                        .fillColor($r('app.color.30D158'))
-
-                      Text("LX-00010")
-                        .margin({left:10})
-                        .fontSize($r('app.float.fontSize_15_2'))
-                        .fontColor($r('app.color.30D158')) // 绿色文字
-                    }
-                  }.height('19%').alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)
-                  .position({ x: '3%', y: '78%' })
-
-                  // 右上角物料信息
-                  Text("物料: 0")
-                    .fontSize(16)
-                    .fontColor(Color.White)
-                    .position({ x: '80%', y: '5%' })
-
-                  // 右侧纵向时间信息
-                  Column({ space: 12 }) {
-                    Text("12-12-12")
-                    Text("12:12-12")
-                    Text("12:12 12")
-                  }
-                  .position({ x: '85%', y: '30%' })
-                  .alignItems(HorizontalAlign.End)
-                }
-                .width('95%')
-                .height('100%') // 根据实际需求调整
-              }
-              .height('75%')
-              .width('100%')
-              .margin({top:'2%'})
-              //.justifyContent(FlexAlign.SpaceAround)
-              Row(){
-                Button({type:ButtonType.Normal}) {
-                    Text("伸出")
-                      .fontSize($r('app.float.fontSize_12'))
-                      .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-                }
-                .margin({top:'6%'})
-                .width('35%')
-                .height('8%')
-                .backgroundColor($r('app.color.20FFFFFF'))
-                .borderRadius($r('app.float.virtualSize_6_4'))
-                .onClick(() => {
-                  // 按钮点击事件处理
-                })
-                Button({type:ButtonType.Normal}) {
-                  Text("缩回")
-                    .fontSize($r('app.float.fontSize_12'))
-                    .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-                }
-                .margin({top:'6%'})
-                .width('35%')
-                .height('8%')
-                .backgroundColor($r('app.color.20FFFFFF'))
-                .borderRadius($r('app.float.virtualSize_6_4'))
-                .onClick(() => {
-                  // 按钮点击事件处理
-                })
-              }.width('100%')
-              .justifyContent(FlexAlign.SpaceAround)
-              Button({type:ButtonType.Normal}) {
-                Text("空箱入库")
-                  .fontSize($r('app.float.fontSize_12'))
-                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
-              }
-              .margin({top:'6%'})
-              .width('35%')
-              .height('8%')
-              .backgroundColor($r('app.color.20FFFFFF'))
-              .borderRadius($r('app.float.virtualSize_6_4'))
-              .onClick(() => {
-                // 按钮点击事件处理
-              })
-            }
-            .width('100%')
-            .height('100%')
-            .justifyContent(FlexAlign.Start)
+            InBoundView({messages:this.messages});
           }
-          .width('32%')
+          .width('29%')
           .height('85%')
           .backgroundColor($r('app.color.10FFFFFF'))
           .justifyContent(FlexAlign.Center)
         }
         .height('88.6%')
         .width('100%')
-        .justifyContent(FlexAlign.SpaceAround)
+        .justifyContent(FlexAlign.SpaceEvenly)
 
       }
       .width('100%')

entry/src/main/ets/pages/OrderMaterialsStorage.ets

@@ -1,6 +1,9 @@
-import {OrderListView,ProcessFlow,MaterialGrid,SingleOrder,materialScan,BoxGrid} from "../component/OrderMaterialsStorageView"
-import {OrderParams,MaterialItem,MaterialBox} from "../params/OrderMaterialsStorageParams"
+import {ProcessFlow,MaterialList,SingleOrder,BoxGrid,
+  OrderListComponent} from "../component/OrderMaterialsStorageView"
+import {OrderParams,DemandMaterial,MaterialBox, EmptyBox} from "../params/OrderMaterialsStorageParams"
 import router from '@ohos.router';
+import {NavigationBar} from '../component/NavigationBar'
+import {TimeAndTitle} from "../component/TimeAndTitle"
 @Entry
 @Component
 struct orderMaterialsStorage {
@@ -8,8 +11,10 @@ struct orderMaterialsStorage {
   @State selectedOrderNo: string = '';
   @State selectedOrderDate: string = ''
   @State selectedOrderName: string = ''
-  @State currentStep: number = 0;
-  @State boxData: MaterialBox[] = [
+  @State selectedOrderInRatio:string = ''
+  @State currentStep: number = 1;
+  @State emptyBox : EmptyBox []=[{ position: 'X-1Y-2' },{ position: 'X-1Y-2' },{ position: 'X-1Y-2' },{ position: 'X-1Y-2' }, ]
+  @State materialBoxes: MaterialBox[] = [
   // 第一行物料箱
     {
       id: '1', type: 'material',
@@ -172,181 +177,263 @@ struct orderMaterialsStorage {
     { orderName: '订单名称XXXX', orderNo: '123123213', date: '2025/11/11', progress: '75%' },
     { orderName: '特殊订单', orderNo: 'SH2024001', date: '2024/03/01', progress: '100%' }
   ]
-  @State materialData: MaterialItem[] = [
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-    { id: '1', name: '物料名称XXXX', model: '型号×××××', completed: 11, planned: 20 },
-    { id: '2', name: '物料名称XXX', model: '型号××××××', completed: 11, planned: 20 },
-  // 其他7项数据...
+  @State materialData: DemandMaterial[] = [
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
+    {materialName: 'PCBA电路板-SADD1231241142324233231233234', materialType: '12322221232321222332211233', inBoundNum: 11, planNum: 20 },
   ];
 
   build() {
     Row() {
       Column() {
         Row(){
-          Text('<订单物料入库')
-            .width('40%')
+          TimeAndTitle()
+        }.width('100%')
+        .height('3.4%')
+        .alignItems(VerticalAlign.Bottom)
+        .justifyContent(FlexAlign.End)
+
+        Row(){
+          Text('< 订单物料入库')
+            .fontColor($r('app.color.FFFFFF'))
+            .fontSize($r('app.float.fontSize_15_2'))
             .onClick(()=>{
               router.back({
                 url :"pages/Menu"
               })
             })
-          //.margin({left:'%'})
-          Row(){
-            Button('统计')
-              .width('22%')
-            Button('叫料通知')
-              .width('22%')
-            Button('仓储日志')
-              .width('22%')
-            Button('仓储车调试')
-              .width('22%')
-          }
-          .width('55%')
-          .justifyContent(FlexAlign.SpaceBetween)
         }
-        .height('10%')
-       if(this.currentStep === 0)
-       {
+        .height('4%')
+        .width('100%')
+        .justifyContent(FlexAlign.Start)
+        .margin({left:'5%'})
 
+        Row(){
+          Row(){
+            ProcessFlow({
+              currentStep:this.currentStep
+            })
+          }.width('20%')
+          .margin({right:'20%'})
+          NavigationBar().width('20%')
+        }
+        .width('100%')
+        .height('4%')
+        .margin({top:'1%'})
+        .justifyContent(FlexAlign.End)
+        .alignItems(VerticalAlign.Bottom)
 
-         Row(){
-           ProcessFlow({
-             circle1Color:"#1890FF",
-             circle2Color:"#676D6F",
-             circle3Color:"#676D6F",
-           }
-           )
-         }
-         .height('8%')
-         .width('100%')
-         .margin({bottom:'2%'})
-         .justifyContent(FlexAlign.SpaceAround)
 
+       if(this.currentStep === 1)
+       {
+         Column(){
            Row(){
-             OrderListView({
-               orders: this.orders,
-               selectedOrderNo: this.selectedOrderNo,
-               selectedOrderDate:this.selectedOrderDate,
-               selectedOrderName:this.selectedOrderName
-             })
-               .width('20%')
-
-             Row(){
-               MaterialGrid({ materials: this.materialData })
-                 .width('100%')
-                 .height('100%')
-             }.width('75%')
-             .border({width:1})
-             .height("100%")
-             .alignItems(VerticalAlign.Top)
-
-           }.height('65%')
-           .justifyContent(FlexAlign.SpaceAround)
+             Column(){
+               Row(){
+                 Text("选择工单")
+                   .fontColor($r('app.color.FFFFFF'))
+                   .fontSize($r('app.float.fontSize_15_2'))
+               }.height('10%')
+               Row(){
+                 OrderListComponent({
+                   orders:this.orders,
+                   selectedOrderNo: this.selectedOrderNo,
+                   selectedOrderDate:this.selectedOrderDate,
+                   selectedOrderName:this.selectedOrderName,
+                   selectedOrderInRatio:this.selectedOrderInRatio
+                 }).width('95%').height('90%')
+               }
+             }.width('30%').backgroundColor($r('app.color.10FFFFFF'))
+             Image($r('app.media.arrow_right'))
+               .width($r('app.float.virtualSize_23'))
+               .height($r('app.float.virtualSize_23'))
+               .fillColor($r('app.color.FFFFFF'))
+               .margin({left:'-2%',right:'-2%'})
+             Column(){
+               Row(){
+                 Text("需求物料")
+                   .fontColor($r('app.color.FFFFFF'))
+                   .fontSize($r('app.float.fontSize_15_2'))
+               }.height('10%')
+               Row() {
+                 MaterialList({ MaterialData: this.materialData })
+                   .width('100%')
+                   .height('100%')
+               }.width('95%').height('90%')
+             }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
+           }
+           .height('85%')
+           .justifyContent(FlexAlign.SpaceEvenly)
            .width('100%')
 
-           Button("下一步")
-             .width("30%")
-             .backgroundColor(this.selectedOrderNo ? '#1890FF' : '#CCCCCC')
-             .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
-             .onClick(() => {
-               this.currentStep = 1;
-             })
-         }
-        else if(this.currentStep === 1)
+           Button({type:ButtonType.Normal}) {
+                Text("下一步")
+                  .fontSize($r('app.float.fontSize_12'))
+                  .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+              }
+              .width('20%')
+              .height('6%')
+              .margin({bottom:'3%',left:'75%'})
+              .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+              .borderRadius($r('app.float.virtualSize_6_4'))
+              .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+              .onClick(() => {
+                this.currentStep = 2;
+              })
+         }.height('83.6%').margin({top:'3%'}).width('100%')
+         .justifyContent(FlexAlign.SpaceAround)
+         .width('100%')
+       }
+        else if(this.currentStep === 2)
         {
-          Row(){
-            ProcessFlow({
-              circle1Color:"#676D6F",
-              circle2Color:"#1890FF",
-              circle3Color:"#676D6F",
-            }
-            )
-          }
-          .height('8%')
-          .width('100%')
-          .margin({bottom:'2%'})
-          .justifyContent(FlexAlign.SpaceAround)
-
-          Row(){
-            Column(){
-              SingleOrder({
-                selectedOrderNo:this.selectedOrderNo,
-                selectedOrderDate:this.selectedOrderDate,
-                selectedOrderName:this.selectedOrderName
-              }).height('25%')
-              materialScan().margin({top:'5%'}).height('65%')
-            }.width('30%')
-            .justifyContent(FlexAlign.Start)
-            .height('100%')
+          Column(){
             Row(){
-              BoxGrid({ boxes: this.boxData })
-                .width('100%')
-                .height('100%')
-            }.width('65%')
-            .border({width:1})
-            .height("100%")
-            .alignItems(VerticalAlign.Top)
+              Column(){
+                SingleOrder({
+                  selectedOrderNo:this.selectedOrderNo,
+                  selectedOrderDate:this.selectedOrderDate,
+                  selectedOrderName:this.selectedOrderName,
+                  selectedOrderInRatio:this.selectedOrderInRatio
+                }).height('18%').width('95%')
+                Column(){
+                    Text('查询物料')
+                      .fontColor($r('app.color.FFFFFF'))
+                      .fontSize($r('app.float.fontSize_15_2'))
+                      .margin({top:'4%'})
+                    Row() {
+                      // 左侧二维码图标
+                      Image($r('app.media.material_qr_code')) // 请替换为您的二维码图片资源
+                        .width($r('app.float.virtualSize_16_8'))
+                        .height($r('app.float.virtualSize_16_8'))
+                        .fillColor($r('app.color.FFFFFF'))
+                        .margin({left:'2%'})
+                      // 扫码输入框
+                      TextInput({ placeholder: '请扫描物料编码' })
+                        .type(InputType.Normal)
+                        .placeholderFont({ size: $r('app.float.fontSize_12')})
+                        .placeholderColor($r('app.color.30FFFFFF'))
+                        .fontSize($r('app.float.fontSize_12'))
+                        .fontColor($r('app.color.FFFFFF'))
+                    }
+                    .margin({top:'3%'})
+                    .height('8%')
+                    .width('80%')
+                    .borderRadius($r('app.float.virtualSize_7_2'))
+                    .backgroundColor($r('app.color.000000'))
+                    // 操作说明
+                    Text('通过物料扫码查询当前库存是否有同型号物')
+                      .fontSize($r('app.float.fontSize_8'))
+                      .fontColor($r('app.color.60FFFFFF'))
+                      .width('100%')
+                      .textAlign(TextAlign.Center)
+                      .margin({top:'2%'})
 
-          }.height('65%')
+                    Column() {
+                      Image($r('app.media.arrow_down'))
+                        .width($r('app.float.virtualSize_23'))
+                        .height($r('app.float.virtualSize_23'))
+                        .fillColor($r('app.color.FFFFFF'))
+                      Column({space:5}){
+                        Text('DIANLUBANPCBAADD123124114232423ASD')
+                          .fontSize($r('app.float.fontSize_12'))
+                          .fontColor($r('app.color.0A84FF'))
+                          .textAlign(TextAlign.Start)
+                          .width('100%')
+                        Text('产品型号:12322221232321222332211233')
+                          .fontSize($r('app.float.fontSize_8'))
+                          .fontColor($r('app.color.0A84FF'))
+                          .textAlign(TextAlign.Start)
+                          .width('100%')
+                        Text('序列号：123254213452465346346456')
+                          .fontSize($r('app.float.fontSize_8'))
+                          .fontColor($r('app.color.0A84FF'))
+                          .textAlign(TextAlign.Start)
+                          .width('100%')
+                        Text('数量：10个')
+                          .fontSize($r('app.float.fontSize_8'))
+                          .fontColor($r('app.color.0A84FF'))
+                          .textAlign(TextAlign.Start)
+                          .width('100%')
+                      }.backgroundColor($r('app.color.000000'))
+                      .borderRadius($r('app.float.virtualSize_7_2'))
+                      .padding(16)
+                      .margin({top:'4%'})
+                      .height('40%')
+                      .width('80%')
+                      Row(){
+                        Text('当前有 ')
+                          .fontSize($r('app.float.fontSize_8'))
+                          .fontColor($r('app.color.60FFFFFF'))
+                        Text('6')
+                          .fontSize($r('app.float.fontSize_12'))
+                          .fontColor($r('app.color.0A84FF'))
+                        Text(' 个料箱装有同型号物料')
+                          .fontSize($r('app.float.fontSize_8'))
+                          .fontColor($r('app.color.60FFFFFF'))
+                      }.justifyContent(FlexAlign.Center)
+                      .margin({top:'5%'})
+                    }.margin({top:'4%'})
+                }.height('82%').width('95%').justifyContent(FlexAlign.Start)
+              }.width('30%').backgroundColor($r('app.color.10FFFFFF'))
+              Image($r('app.media.arrow_right'))
+                .width($r('app.float.virtualSize_23'))
+                .height($r('app.float.virtualSize_23'))
+                .fillColor($r('app.color.FFFFFF'))
+                .margin({left:'-2%',right:'-2%'})
+              Column(){
+                Row(){
+                  Text("选择料箱")
+                    .fontColor($r('app.color.FFFFFF'))
+                    .fontSize($r('app.float.fontSize_15_2'))
+                }.height('10%')
+                Row() {
+                  BoxGrid({ materialBoxes: this.materialBoxes,emptyBoxes:this.emptyBox })
+                    .width('100%')
+                    .height('100%')
+                }.width('100%').height('90%')
+              }.width('62%').backgroundColor($r('app.color.10FFFFFF'))
+            }
+            .height('85%')
+            .justifyContent(FlexAlign.SpaceEvenly)
+            .width('100%')
+            Button({type:ButtonType.Normal}) {
+              Text("下一步")
+                .fontSize($r('app.float.fontSize_12'))
+                .fontColor($r('app.color.0A84FF')) // 图片中的蓝色
+            }
+            .width('20%')
+            .height('6%')
+            .margin({bottom:'3%',left:'75%'})
+            .backgroundColor(this.selectedOrderNo ?$r('app.color.20FFFFFF'):$r('app.color.10FFFFFF'))
+            .borderRadius($r('app.float.virtualSize_6_4'))
+            .enabled(!!this.selectedOrderNo) // 只有选中订单时才启用按钮
+            .onClick(() => {
+              this.currentStep = 2;
+            })
+          }.height('83.6%').margin({top:'3%'}).width('100%')
           .justifyContent(FlexAlign.SpaceAround)
           .width('100%')
-
-          Row(){
-            Button("上一步")
-              .width("25%")
-              .onClick(()=>{
-                this.currentStep = 0;
-              })
-            Button("料箱出库")
-              .width("25%")
-              .onClick(()=>{
-                this.currentStep = 1;
-              })
-            Button("下一步")
-              .width("25%")
-              .onClick(()=>{
-                this.currentStep = 2;
-              })
-          }.justifyContent(FlexAlign.SpaceEvenly)
-          .width('100%')
         }
-        if(this.currentStep === 2)
+        if(this.currentStep === 3)
         {
-          Row(){
-            ProcessFlow({
-              circle3Color:"#1890FF",
-              circle2Color:"#676D6F",
-              circle1Color:"#676D6F",
-            }
-            )
-          }
-          .height('8%')
-          .width('100%')
-          .margin({bottom:'2%'})
-          .justifyContent(FlexAlign.SpaceAround)
 
           Row(){
 
-
             Row(){
-              MaterialGrid({ materials: this.materialData })
+
+              MaterialList({MaterialData: this.materialData })
                 .width('100%')
                 .height('100%')
             }.width('75%')
-            .border({width:1})
+            .backgroundColor($r('app.color.10FFFFFF'))
             .height("100%")
             .alignItems(VerticalAlign.Top)
 
@@ -374,7 +461,7 @@ struct orderMaterialsStorage {
       }
       .width('100%')
       .height('100%')
-      .justifyContent(FlexAlign.SpaceAround)
+      .backgroundColor($r('app.color.000000'))
     }
     .height('100%')
   }

entry/src/main/ets/params/OrderMaterialsStorageParams.ets

@@ -4,6 +4,14 @@ export interface OrderParams {
   date: string,
   progress: string
 }
+
+export interface DemandMaterial {
+  materialName: string,
+  materialType: string,
+  inBoundNum: number,
+  planNum: number
+}
+
 export interface MaterialItem {
   id: string;          // 唯一标识
   name: string;        // 物料名称
@@ -30,6 +38,8 @@ export interface InOrder{
   status: string;
 }
 
-
+export interface EmptyBox {
+  position: string
+}
 
 

entry/src/main/resources/base/element/color.json

@@ -17,6 +17,10 @@
       "value": "#0A84FF"
     },
     {
+      "name":"40000000",
+      "value": "#66000000"
+    },
+    {
       "name": "30D158",
       "value": "#30D158"
     },