齐套布局优化，当产品型号过长时候。设备列表三色灯操作。

entry/src/main/ets/pages/StationDevicesPage.ets

@@ -29,7 +29,18 @@ export class HardwareModel {
 @Component
 struct StationDevicesPage {
   //注释掉的是假数据，实际更具请求硬件获取
-  @State private items: Array<HardwareModel> = []
+  @State private items: Array<HardwareModel> = [
+  //   {
+  //   name: '三色灯',
+  //   text: '装配工位001',
+  //   type: $r('app.media.sansedeng'),
+  //   open: $r('app.media.open'),
+  //   colse: $r('app.media.colse'),
+  //   select: true,
+  //   temp: 1,
+  //   deviceName: "三色灯"
+  // }
+  ]
   scroller: Scroller = new Scroller()
   getDeviceList = async () => {
     let res: HardwareModel = await EquipmentRequest.get('/api/v1/device/list') as HardwareModel
@@ -37,12 +48,29 @@ struct StationDevicesPage {
       return device.state! === 0
     }) ?? []
   }
+  // 点击选择了设备之后
+  @State currentDevice: HardwareModel = {}
+  openDeviceOperationDialog = (d: HardwareModel) => {
+    this.currentDevice = d
+    if (d.deviceName == "三色灯") {
+      this.lightDController.open()
+    }
+  }
+  // 三色灯dialoag
+  lightDController = new CustomDialogController({
+    builder: ThreeColorsLight({
+      device: this.currentDevice
+    }),
+    alignment: DialogAlignment.Center,
+    customStyle: true,
+  })
 
   aboutToAppear(): void {
     this.getDeviceList()
   }
 
   build() {
+
     Column() {
       Row() {
         Image($r('app.media.back_white'))
@@ -95,6 +123,9 @@ struct StationDevicesPage {
               .padding({ left: 10 })
               .borderRadius(10)
               .backgroundColor('#66ffffff')
+              .onClick(() => {
+                this.openDeviceOperationDialog(item)
+              })
             }
           })
         }
@@ -121,4 +152,197 @@ struct StationDevicesPage {
 }
 
 
+@Extend(Button)
+function DeviceBtnS(color: ResourceColor) {
+  .fontColor(Color.White).width(70).height(30).backgroundColor(color)
+
+}
+
+
+// 三色灯
+interface SSDModel {
+  uiType: "Text" | "Button",
+  textValue: string,
+  key: string
+  value: string
+  btnColor: ResourceColor
+}
+
+interface SSDParamsData {
+  lighting: string
+  buzzer: string
+  flash: string
+}
+
+interface SSDParams {
+  deviceNo: string
+  data: SSDParamsData
+}
+
+@CustomDialog
+struct ThreeColorsLight {
+  controller: CustomDialogController
+  @Prop device: HardwareModel
+  @State operations: SSDModel[][] = [
+    [{
+      uiType: 'Text',
+      textValue: "亮灯",
+      key: "lighting",
+      value: "todo",
+      btnColor: $r("app.color.red_100")
+    },
+      {
+        uiType: 'Button',
+        textValue: "红灯",
+        key: "lighting",
+        value: "red",
+        btnColor: $r("app.color.red_100")
+      },
+      {
+        uiType: 'Button',
+        textValue: "黄灯",
+        key: "lighting",
+        value: "yellow",
+        btnColor: $r("app.color.yellow_1")
+      },
+      {
+        uiType: 'Button',
+        textValue: "绿灯",
+        key: "lighting",
+        value: "green",
+        btnColor: $r("app.color.green_100")
+      },
+      {
+        uiType: 'Button',
+        textValue: "关闭",
+        key: "lighting",
+        value: "off",
+        btnColor: $r("app.color.gray_6666")
+      },
+    ],
+    [{
+      uiType: 'Text',
+      textValue: "蜂鸣",
+      key: "buzzer",
+      value: "todo",
+      btnColor: $r("app.color.red_100")
+    },
+      {
+        uiType: 'Button',
+        textValue: "大声",
+        key: "buzzer",
+        value: "loud",
+        btnColor: $r("app.color.red_100")
+      },
+      {
+        uiType: 'Button',
+        textValue: "小声",
+        key: "buzzer",
+        value: "low",
+        btnColor: $r("app.color.green_100")
+      },
+      {
+        uiType: 'Button',
+        textValue: "关闭",
+        key: "buzzer",
+        value: "off",
+        btnColor: $r("app.color.gray_6666")
+      },
+    ],
+
+
+    [{
+      uiType: 'Text',
+      textValue: "闪光",
+      key: "flash",
+      value: "todo",
+      btnColor: $r("app.color.red_100")
+    },
+      {
+        uiType: 'Button',
+        textValue: "闪光快",
+        key: "flash",
+        value: "fast",
+        btnColor: $r("app.color.red_100")
+      },
+      {
+        uiType: 'Button',
+        textValue: "闪光中",
+        key: "flash",
+        value: "middle",
+        btnColor: $r("app.color.yellow_1")
+      },
+      {
+        uiType: 'Button',
+        textValue: "闪光慢",
+        key: "flash",
+        value: "slow",
+        btnColor: $r("app.color.green_100")
+      },
+      {
+        uiType: 'Button',
+        textValue: "关闭",
+        key: "flash",
+        value: "off",
+        btnColor: $r("app.color.gray_6666")
+      },
+    ],
+  ]
+  toOperation = (m: SSDModel) => {
+    console.log("toOperation", JSON.stringify(m))
+    let data: SSDParamsData = {
+      lighting: 'off',
+      buzzer: 'off',
+      flash: 'off'
+    }
+
+    Reflect.set(data, m.key, m.value)
+
+    console.log("toOperation", JSON.stringify(data))
+
+    EquipmentRequest.post("/api/v1/device/setup", {
+      deviceNo: this.device.deviceNo ?? "",
+      data: data
+    } as SSDParams)
+
+  }
+
+  build() {
+    Column() {
+
+      ForEach(this.operations, (ops: SSDModel[], index) => {
+        ListItem() {
+          Row({ space: 10 }) {
+            ForEach(ops, (op: SSDModel) => {
+              if (op.uiType === "Text") {
+                Text(op.textValue)
+              }
+              else {
+                Button({ type: ButtonType.Capsule }) {
+                  Text(op.textValue)
+                }.DeviceBtnS(op.btnColor)
+                .onClick(() => {
+                  this.toOperation(op)
+                })
+              }
+            })
+
+          }
+        }
+      })
+
+
+    }
+    .justifyContent(FlexAlign.SpaceEvenly)
+    .alignItems(HorizontalAlign.Start)
+    .padding({ left: 15 })
+    .width(400)
+    .height(240)
+    .backgroundColor(Color.White)
+    .borderRadius(10)
+
+  }
+}
+
+
 

entry/src/main/ets/view/CompleteSet.ets

@@ -416,26 +416,21 @@ export struct CompleteSet {
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                       .opacity(this.selectOrder === index ? $r('app.float.card_font_select_opacity') : 1)
                   }
-                  .width('90%')
-                  .height('20%')
+                  .width('100%')
                   .justifyContent(FlexAlign.Start)
 
                   Row() {
-                    Text('产品型号  ')
+                    Text('产品型号:  ' + item?.materialModel ?? "")
                       .fontWeight(FontWeight.Regular)
                       .fontSize($r('app.float.fontSize_20'))
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
-                    Text(item.materialModel)
-                      .fontSize($r('app.float.fontSize_20'))
-                      .fontWeight(FontWeight.Medium)
-                      .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
+
                   }
-                  .width('90%')
-                  .height('16%')
+                  .width('100%')
                   .justifyContent(FlexAlign.Start)
 
                   Row() {
-                    Text('计划编号  ')
+                    Text('计划编号:  ')
                       .fontWeight(FontWeight.Regular)
                       .fontSize($r('app.float.fontSize_20'))
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
@@ -444,12 +439,12 @@ export struct CompleteSet {
                       .fontWeight(FontWeight.Medium)
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                   }
-                  .width('90%')
-                  .height('16%')
+
+                  .width('100%')
                   .justifyContent(FlexAlign.Start)
 
                   Row() {
-                    Text('订单编号  ')
+                    Text('订单编号:  ')
                       .fontWeight(FontWeight.Regular)
                       .fontSize($r('app.float.fontSize_20'))
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
@@ -458,12 +453,12 @@ export struct CompleteSet {
                       .fontWeight(FontWeight.Medium)
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                   }
-                  .width('90%')
-                  .height('16%')
+                  .width('100%')
+
                   .justifyContent(FlexAlign.Start)
 
                   Row() {
-                    Text('下发时间  ')
+                    Text('下发时间:  ')
                       .fontSize($r('app.float.fontSize_20'))
                       .fontWeight(FontWeight.Regular)
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
@@ -472,8 +467,8 @@ export struct CompleteSet {
                       .fontWeight(FontWeight.Medium)
                       .fontColor(this.selectOrder === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color'))
                   }
-                  .width('90%')
-                  .height('16%')
+
+                  .width('100%')
                   .justifyContent(FlexAlign.Start)
 
                 }
@@ -499,7 +494,7 @@ export struct CompleteSet {
                   this.selectOrder = index
                 })
                 .width(px2vp(608))
-                .height('20%')
+                .padding(8)
                 .borderRadius($r('app.float.general_border_radius'))
                 .backgroundColor(this.selectOrder === index ? $r('app.color.order_select_background') : $r('app.color.general_card_background_color'))
               }

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

@@ -235,6 +235,10 @@
     {
       "name": "warn_1",
       "value": "#E9E98E40"
+    },
+    {
+      "name": "yellow_1",
+      "value": "#E9EEC706"
     }
   ]
 }