xf-ohos/entry/src/main/ets/pages/StationDevicesPage.ets

// 工位的设备列表
import router from '@ohos.router'
import EquipmentRequest from '../common/util/request/EquipmentRequest'
import { carPositionClass } from './WarehouseMap'

export class HardwareModel {
  name?: string
  text?: string
  type?: Resource
  open?: Resource
  colse?: Resource
  select?: boolean
  temp?: number
  manufacturer?: string //: "厂家",
  brand?: string //"品牌或型号，比如JBC",
  deviceName?: string //"设备自定义名称或资产编号",
  deviceType?: string // "类别，比如电络铁",
  deviceNo?: string // "设备编号，唯一号",
  devicePic?: string // "图片",
  state?: number //"状态：0正常，-1：离线，1故障",
  workshop?: string //"产线",
  station?: string //"工站/工位",
  devicePosition?: string // "空间位置，目前暂时不用",
  data?: HardwareModel[]
}


@Entry
@Component
struct StationDevicesPage {
  //注释掉的是假数据，实际更具请求硬件获取
  @State private items: Array<HardwareModel> = []
  scroller: Scroller = new Scroller()
  getDeviceList = async () => {
    let res: HardwareModel = await EquipmentRequest.get('/api/v1/device/list') as HardwareModel
    this.items = res?.data?.filter((device) => {
      return device.state! === 0
    }) ?? []
  }

  aboutToAppear(): void {
    this.getDeviceList()
  }

  build() {
    Column() {
      Row() {
        Image($r('app.media.back_white'))
          .height(px2vp(48))
          .width(px2vp(48))
          .onClick(async () => {
            router.back()
          })
      }
      .width('100%')
      .height('8%')
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Start)

      Column() {

        //  Scroll(this.scroller){
        Grid(this.scroller) {
          ForEach(this.items, (item: HardwareModel, index) => {
            GridItem() {

              Row() {
                Column() {
                  Text(item.deviceName)
                    .fontColor('#FFFFFF')
                    .fontWeight(FontWeight.Medium)
                    .fontSize($r('app.float.fontSize_24'))
                  Text(item.deviceNo)
                    .fontColor('#FFFFFF')
                    .opacity(0.6)
                    .fontWeight(FontWeight.Regular)
                    .fontSize($r('app.float.fontSize_20'))
                  Row() {
                    Image(item.devicePic)
                      .width(px2vp(120))
                      .height(px2vp(120))
                      .margin({ top: 40 })
                  }.height('50%')
                  .width('100%')
                  .padding({ left: 10 })
                }
                .width('100%')
                .padding(10)
                .borderRadius(10)
                .alignItems(HorizontalAlign.Start)
                .height('100%')
              }
              .width('100%')
              .height('30%')
              .padding({ left: 10 })
              .borderRadius(10)
              .backgroundColor('#66ffffff')
            }
          })
        }
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
        .columnsGap(10)
        .rowsGap(10)
        .width('100%')
        .height('100%')
        .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
        .supportAnimation(true) //设置Grid是否开启拖拽补位动画
        .height('80%')
        .width('100%')
        .padding({ top: 10 })

      }
    }
    .backgroundImage($r('app.media.zhihuigc'))
    .backgroundImageSize({ width: '100%', height: '100%' })
    .width('100%')
    .height('100%')
    .padding(20)

  }
}