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

import EquipmentRequest from '../common/util/request/EquipmentRequest'
import JGRequest from '../common/util/request/Request'
import StorageRequest from '../common/util/request/StorageRequest'
import RequestParamModel from '../viewmodel/RequestParamModel'
import promptAction from '@ohos.promptAction'

export class routerClass {
  xRoute?: number
  YRoute?: number
}

export class routerHttp {
  XCoordinateIn?: number
  YCoordinateIn?: number
}

export class Adjustment {
  destx?: string
  code?: string
  msg?: string
  cmdId?: string
  state?: string
}

export class carPositionClass {
  code?: string
  message?: string
  data?: dataClass
}

export class dataClass {
  x?: number
  y?: number
}

enum ChooseStatus {
  Normal = 0,
  isChoosing = 1,
  Chosen = 2, //已经选择了
}


@Extend(Text)
function commonSquare() {
  .width(px2vp(55))
  .height(px2vp(55))
  .fontColor($r('app.color.blue_100'))
  .textAlign(TextAlign.Center)
  .border({ width: px2vp(1), color: '#7DC8EA' })
}

@Extend(Button)
function choiceBtnSty() {
  .width(px2vp(292))
  .borderRadius(px2vp(76))
  .height(px2vp(80))
}


@Entry
@Component
export struct WarehouseMap {
  //车的位置请求返回数据
  @State CarPosition: Array<carPositionClass> = []
  @State rgvNo: string = 'rgv1'
  @State route: routerClass[] = [
    { xRoute: 10, YRoute: 9 },
    { xRoute: 10, YRoute: 9 },
    { xRoute: 10, YRoute: 10 },
    { xRoute: 9, YRoute: 10 },
    { xRoute: 8, YRoute: 10 },
  ]
  //选择层数颜色
  @State selectColor: number = -1
  @State selectSvg: number = 0
  //车坐标
  @State carYCoordinate: number = 10
  @State carXCoordinate: number = 10
  @State carYCoordinate1: number = 8
  @State carXCoordinate1: number = 9
  //调入xy坐标
  @State YCoordinateIn: number = 0
  @State XCoordinateIn: number = 0
  //调出xy坐标
  @State YCoordinate: number = 0
  @State XCoordinate: number = 0
  //调入格子
  @State SelectEnter: number = ChooseStatus.Normal
  //调出格子
  @State SelectOut: ChooseStatus = ChooseStatus.Normal //点击 选调出料格
  @State boxNumber: number = 0 //调箱数量
  @State numberEnable: number = 0 //调入料格的剩余的个数
  @State JobHopping: number = 0
  scroller: Scroller = new Scroller()
  //选择的第几层
  @State selectStorey: number = -1
  //选调出格子有多少层
  @State storeyNumber: number = -1
  @State private storey: number[] = [6, 5, 4, 3, 2, 1]
  @State private YAxis: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
  @State private XAxis: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
  @State private XYxis: number[][] = [
    [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 0, 0, 0, 0, 0, 0, 6, 0, 6, 6],
    [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 0, 0, 0, 0, 0, 0, 6, 0, 6, 6],
    [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 0, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, -1, -1, 0, 0, 0, 6, 6, 6, 0, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, -1, -1, 0, 6, 0, 6, 5, 6, 0, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 3, 6, 6, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, 6, 6, 6, 6, 5, 6, 6, 6, 6, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [0, 0, 0, -1, -1, 6, 6, 6, 2, 6, 6, 6, 6, 3, 6, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 4, 6, 0, -1, -1, -1, -1, -1, -1, -1, -1],
    [0, 0, 0, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1]
  ]
  @State yNum: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
  //提示弹窗
  promptsController: CustomDialogController = new CustomDialogController({
    builder: prompt({
      JobHopping: this.JobHopping

    }),
    alignment: DialogAlignment.Center,
    gridCount: 4,
    customStyle: true,
  })
  //硬件调仓操作
  AdjustmentHttp = async (): Promise<Adjustment[]> => {
    let res: Adjustment[] = await EquipmentRequest.post("/api/v1/wcs/box/movMultiple",
      //todo 坐标加1，二维数组索引从零开始
      {
        //目标位置
        dest: (this.XCoordinateIn + 1) + '-' + (this.YCoordinateIn + 1),
        //移动位置
        src: (this.XCoordinate + 1) + '-' + (this.YCoordinate + 1),
        //todo 数量暂时写死1
        num: "1"
      } as RequestParamModel)
    //
    console.log('textTag', 'post请求结果' + JSON.stringify(res)
    );
    return res
  }
  Adjustment = async (): Promise<Adjustment[]> => {
    let res: Adjustment[] = await EquipmentRequest.get("/api/v1/wcs/rgvs/",
      {
        // destx:this.XCoordinateIn,
        // destY:this.YCoordinateIn,
        // rgvNo:'rgvNo1'
      })

    return res
  }
  //请求车的位置
  CarPositionHttp = async (): Promise<carPositionClass> => {
    let res: carPositionClass = await EquipmentRequest.get("/api/v1/wcs/rgv/" + this.rgvNo, {}) as carPositionClass
    if (res !== undefined && res.data !== undefined) {
      this.carYCoordinate = res.data.y!
      this.carXCoordinate = res.data.x!
    }

    return res
  }
  // 获取仓库坐标信息，x和y轴的信息
  getStorageXYData = async () => {
    let result: number[][] = await StorageRequest.post("/api/v1/wms/position/lineInfo/")

    this.XYxis = result


  }

  aboutToAppear(): void {
    this.getStorageXYData()

    this.CarPositionHttp().then((res: carPositionClass) => {

      console.log('textTag', '-------car现在的位置执行情况结果 cccccc11' + JSON.stringify(res))
    })

  }

  // 停止调仓后重置数据
  resetData = () => {
    this.JobHopping = 0
    this.SelectOut = ChooseStatus.Normal
    this.SelectEnter = ChooseStatus.Normal
    this.storeyNumber = -1
    this.boxNumber = 0
    this.selectStorey = -1
    this.stop()
  }

  build() {
    Row() {
      Column() {
        Button(this.JobHopping === 0 ? '启动调仓' : '停止调仓', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .borderRadius(px2vp(76))
          .backgroundColor(this.JobHopping === 0 ? $r('app.color.blue_100') : $r('app.color.red_100'))
          .width(px2vp(292))
          .height(px2vp(80))
          .onClick(() => {
            if (this.JobHopping === 0) {
              this.getStorageXYData()
              this.promptsController.open()
            } else if (this.JobHopping === 1) {
              this.resetData()
            }
          })
        Blank()
        if (this.SelectOut == ChooseStatus.Chosen) {
          Text('层数')
            .fontSize($r('app.float.fontSize_24'))
            .fontWeight(FontWeight.Medium)
            .textAlign(TextAlign.Center)
            .width(px2vp(292))
            .height(px2vp(80))
          List({ space: px2vp(20) }) {
            ForEach(this.storey, (item: number, index: number) => {
              ListItem() {
                Text(item.toString())
                  .width(px2vp(291))
                  .height(px2vp(80))
                  .fontColor($r('app.color.black_100'))
                  .textAlign(TextAlign.Center)
                  .border({ width: px2vp(1) })
                  .backgroundColor((index === (this.selectStorey - 1)) ? $r('app.color.red_100') : index >= (6 - this.storeyNumber) ? $r('app.color.green_100') : $r('app.color.white_f1f3f5'))
                  .borderRadius(px2vp(16))
                  .onClick(() => {
                    if (index >= (6 - this.storeyNumber)) {
                      this.selectStorey = index + 1

                      this.boxNumber = this.storeyNumber - (6 - this.selectStorey)
                    }
                  })
              }
            })
          }
          .scrollBar(BarState.Off)
          .width(px2vp(292))
          .height(px2vp(600))
        }

      }.width(px2vp(292))
      .height(px2vp(800))
      .margin({ right: px2vp(24) })

      Column() {
        Row() {
          Column() {
            Text('y')
              .width(px2vp(25))
              .height(px2vp(25))
              .fontColor($r('app.color.order_producing_state_background'))
              .textAlign(TextAlign.Center)
          }
          .width(px2vp(25))
          .height(px2vp(55))
          .justifyContent(FlexAlign.End)

          Column() {
            Text('x')
              .width(px2vp(25))
              .height(px2vp(25))
              .fontColor($r('app.color.order_producing_state_background'))
              .textAlign(TextAlign.Center)
          }
          .width(px2vp(25))
          .height(px2vp(55))
          .justifyContent(FlexAlign.Start)
        }
        .width(px2vp(50))
        .height(px2vp(55))

        List({ space: px2vp(1) }) {
          ForEach(this.YAxis, (item: number, index: number) => {
            ListItem() {
              Text(item.toString())
                .width(px2vp(55))
                .height(px2vp(55))
                .fontColor($r('app.color.black_10'))
                .textAlign(TextAlign.Center)

            }
          })
        }
        .scrollBar(BarState.Off)
        .width(px2vp(60))
        .height(px2vp(745))
      }
      .width(px2vp(60))
      .height(px2vp(800))

      Scroll(this.scroller) {
        Column() {
          List({ space: px2vp(1) }) {
            ForEach(this.XAxis, (item: number, index: number) => {
              ListItem() {
                Text(item.toString())
                  .width(px2vp(55))
                  .height(px2vp(55))
                  .fontColor($r('app.color.black_10'))
                  .textAlign(TextAlign.Center)

              }
            })
          }
          .listDirection(Axis.Horizontal)
          .scrollBar(BarState.Off)
          .width(px2vp(2000))
          .height(px2vp(55))

          List({ space: px2vp(1) }) {
            ForEach(this.XYxis, (y: number[], index1: number) => {
              ListItem() {
                List({ space: px2vp(1) }) {
                  ForEach(y, (x: number, index2: number) => {
                    ListItem() {
                      if (x >= 0 && x != 999) {
                        Stack() {

                          // 根据不同的状态展示不同的颜色
                          // 任何状态下都展示数字
                          Text(x.toString())
                            .commonSquare().backgroundColor($r('app.color.white_f1f3f5'))

                          // 调出正在选择中
                          if (this.SelectOut == ChooseStatus.isChoosing) {
                            if (Number(x) > 0) {
                              Text(x.toString())
                                .commonSquare().backgroundColor($r('app.color.green_100'))
                                .onClick(() => {
                                  this.YCoordinate = index1
                                  this.XCoordinate = index2
                                  this.SelectOut = ChooseStatus.Chosen
                                  this.storeyNumber = x
                                })
                            }
                            else {
                              Text(x.toString())
                                .commonSquare().backgroundColor($r('app.color.white_f1f3f5'))
                            }
                          }
                          else if (this.SelectEnter == ChooseStatus.isChoosing) {
                            if (Number(x) < 6 && index1 != this.YCoordinate && index2 != this.XCoordinate) {
                              Text(x.toString())
                                .commonSquare().backgroundColor($r('app.color.green_100'))
                                .onClick(() => {
                                  this.YCoordinateIn = index1
                                  this.XCoordinateIn = index2
                                  this.SelectEnter = ChooseStatus.Chosen
                                  this.numberEnable = 6 - Number(x)
                                })
                            }
                            else {
                              Text(x.toString())
                                .commonSquare().backgroundColor($r('app.color.white_f1f3f5'))
                            }
                          }


                          // 普通状态下 调出和调入都没有在选择的情况下展示的 小车
                          if (this.SelectOut != ChooseStatus.isChoosing && this.SelectEnter != ChooseStatus.isChoosing) {
                            Row() {
                              Image((index1 === this.carYCoordinate && index2 === this.carXCoordinate) ? $r('app.media.robot_top') : (index1 === this.carYCoordinate && index2 === this.carXCoordinate + 1) ? $r("app.media.robot_arm") : (index1 === this.carYCoordinate1 && index2 === this.carXCoordinate1) ? $r('app.media.car_top') : (index1 === this.carYCoordinate1 && index2 === this.carXCoordinate1 - 1) ? $r('app.media.car_bottom') : '')
                                .width(px2vp(55))
                                .height(px2vp(55))
                                .margin({ right: px2vp(55) })
                              // .onClick(() => {
                              //   if (x !== -1 && this.SelectOut === 1) {
                              //     this.YCoordinate = index1
                              //     this.XCoordinate = index2
                              //     this.SelectOut = 2
                              //     this.SelectEnter = 3
                              //     this.outSvg = 1
                              //     this.storeyNumber = x
                              //     console.log('textTag' + '调出坐标' + this.XCoordinate + this.YCoordinate)
                              //   }
                              // })
                            }
                            .justifyContent(FlexAlign.End)
                            .width(px2vp(55))
                            .height(px2vp(55))
                          }


                          // 展示调出的图标
                          if (index1 === this.YCoordinate && index2 === this.XCoordinate && this.SelectOut == ChooseStatus.Chosen) {
                            Image($r('app.media.Retrieve_grid'))
                              .width(px2vp(55))
                              .height(px2vp(55))
                          }
                          // 展示调入的图标
                          if (this.SelectEnter == ChooseStatus.Chosen && index1 === this.YCoordinateIn && index2 === this.XCoordinateIn) {
                            Image($r('app.media.Transfer_grid'))
                              .width(px2vp(55))
                              .height(px2vp(55))
                          }
                        }
                      } else {
                        Text()
                          .width(px2vp(55))
                          .height(px2vp(55))
                          .fontColor($r('app.color.black_100'))
                          .textAlign(TextAlign.Center)
                      }
                    }
                  })
                }
                .listDirection(Axis.Horizontal)
              }
            })
          }
          .scrollBar(BarState.Off)
        }.width(px2vp(2000))
        .height(px2vp(800))

      }
      .width(px2vp(1020))
      .height(px2vp(800))
      .scrollable(ScrollDirection.Horizontal) // 滚动方向纵向


      if (this.JobHopping === 1) {
        Column() {
          Column() {
            Row() {
              Text('调出料格')
                .fontWeight(FontWeight.Medium)
                .fontColor($r('app.color.black_100'))
                .fontSize($r('app.float.fontSize_24'))
                .width(px2vp(410))
                .textAlign(TextAlign.Start)
            }

            Blank()
            if (this.SelectOut == ChooseStatus.Chosen) {
              Button('取消选择', { type: ButtonType.Normal, stateEffect: true })
                .choiceBtnSty()
                .backgroundColor($r('app.color.red_100'))
                .onClick(() => {
                  this.SelectOut = ChooseStatus.Normal
                  this.storeyNumber = -1
                  this.selectStorey = -1
                })
            }
            else {
              Button('选调出料格', { type: ButtonType.Normal, stateEffect: true })
                .choiceBtnSty()
                .backgroundColor($r('app.color.blue_100'))
                .onClick(() => {
                  this.SelectOut = ChooseStatus.isChoosing
                })
            }

            Blank()

          }
          .width(px2vp(450))
          .height(px2vp(188))
          .padding(px2vp(20))
          .alignItems(HorizontalAlign.Center)
          .borderRadius(px2vp(16))
          .backgroundColor($r('app.color.black_10'))
          .margin({ bottom: px2vp(48) })

          Column() {
            Text('调入料格')
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.black_100'))
              .fontSize($r('app.float.fontSize_24'))
              .width(px2vp(410))
              .textAlign(TextAlign.Start)
            Blank()


            if (this.SelectEnter == ChooseStatus.Chosen) {
              Button('取消选择', { type: ButtonType.Normal, stateEffect: true })
                .choiceBtnSty()
                .backgroundColor($r('app.color.red_100'))
                .onClick(() => {
                  this.SelectEnter = ChooseStatus.Normal
                })
            }
            else {
              Button('选调入料格', { type: ButtonType.Normal, stateEffect: true })
                .choiceBtnSty()
                .backgroundColor($r('app.color.blue_100'))
                .enabled(this.SelectOut == ChooseStatus.Chosen)
                .onClick(() => {
                  this.SelectEnter = ChooseStatus.isChoosing
                })
            }

            Blank()
          }
          .width(px2vp(450))
          .height(px2vp(188))
          .padding(px2vp(20))
          .alignItems(HorizontalAlign.Center)
          .borderRadius(px2vp(16))
          .backgroundColor($r('app.color.black_10'))
          .margin({ bottom: px2vp(48) })

          Column() {
            Text('调箱数量' + this.boxNumber)
              .fontWeight(FontWeight.Medium)
              .fontColor($r('app.color.black_100'))
              .fontSize($r('app.float.fontSize_24'))
              .width(px2vp(410))
              .textAlign(TextAlign.Start)
          }
          .width(px2vp(450))
          .padding(px2vp(20))
          .alignItems(HorizontalAlign.Center)
          .borderRadius(px2vp(16))
          .backgroundColor($r('app.color.black_10'))
          .margin({ bottom: px2vp(48) })

          Button('确认调仓', { type: ButtonType.Normal, stateEffect: true }).choiceBtnSty()
            .backgroundColor((this.SelectEnter == ChooseStatus.Chosen && this.SelectOut == ChooseStatus.Chosen) ? $r('app.color.blue_100') : $r('app.color.blue_20'))
            .enabled(this.SelectEnter == ChooseStatus.Chosen && this.SelectOut == ChooseStatus.Chosen)
            .onClick(() => {
              this.sureToChangeStore()
            })


        }.width(px2vp(450))
        .height(px2vp(800))
        .margin({ left: px2vp(24) })
      } else if (this.JobHopping === 1) {

      }

    }
    .width(px2vp(1920))
    .height(px2vp(800))
    .padding({ left: px2vp(24), right: px2vp(24) })
    .margin({ top: px2vp(20) })
  }

  sureToChangeStore = async () => {
    //   入的要比调箱数量大
    if (this.boxNumber > this.numberEnable) {

      promptAction.showToast({
        message: "调入料格剩余数量小于调箱的数量!",
        duration: 1800,
        bottom: '50%'
      })

      return
    }

    // console.log("jjjjjjj", this.XCoordinate, this.YCoordinate, this.XCoordinateIn, this.YCoordinateIn)

    await StorageRequest.post("/api/v1/wms/common/changePosition", {
      src: `${this.XCoordinate + 1}-${this.YCoordinate + 1}`,
      dest: `${this.XCoordinateIn + 1}-${this.YCoordinateIn + 1}`,
      num: this.boxNumber
    } as RequestParamModel)

    this.resetData()

  }
  stop = async () => {
    await JGRequest.get("api/v1/wms/common/startChangePosition/0")
  }

  aboutToDisappear(): void {
    this.stop()
  }
}

@CustomDialog
  ///无批次号物料详情弹窗
struct prompt {
  @Link JobHopping: number
  controller: CustomDialogController
  start = async () => {
    await JGRequest.get("api/v1/wms/common/startChangePosition/1")
    this.JobHopping = 1
    this.controller.close()
  }

  build() {
    Column({ space: px2vp(50) }) {
      Text('调仓确认')
        .fontSize($r('app.float.fontSize_50'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('app.color.black_100'))
        .textAlign(TextAlign.Center)
        .width(px2vp(400))
        .margin({ top: px2vp(30) })
      Text('启动调仓后，其他工位将无法叫料，是否开始？')
        .fontSize($r('app.float.fontSize_24'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('app.color.black_100'))
        .textAlign(TextAlign.Center)
        .width(px2vp(400))
      Row() {
        Button('取消', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor($r('app.color.blue_100'))
          .width(px2vp(252))
          .height(px2vp(69))
          .borderRadius(px2vp(76))
          .onClick(() => {
            this.controller.close()
          })
        Blank()
        Button('确认', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor($r('app.color.warn_1'))
          .width(px2vp(252))
          .height(px2vp(69))
          .borderRadius(px2vp(76))
          .onClick(() => {
            this.start()
          })
      }.width(px2vp(600))
      .padding({ left: px2vp(30), right: px2vp(30) })

    }.width(px2vp(800))
    .height(px2vp(400))
    .backgroundColor($r('app.color.white_f1f3f5'))
    .borderRadius(16)
  }
}