HJ_openHarmony_wms/entry/src/main/ets/component/WarehousingStaticsView.ets

import WorkOrderInfo from '../viewmodel/wms/WorkOrderInfo'
import {DemandMaterial,MaterialBox,EmptyBox} from "../params/OrderMaterialsStorageParams"
import WorkOrderMaterialInfo from "../viewmodel/wms/WorkOrderMaterialInfo"
import WmsRequest from '../common/util/request/WmsRequest'
import RequestParamModel from '../viewmodel/wms/RequestParamModel'
import MaterialInfo from '../viewmodel/wms/MaterialInfo'
import MaterialBoxInfo from '../viewmodel/wms/MaterialBoxInfo'
@Component
export struct StaticOrderList {
  private scrollerForList: Scroller = new Scroller()
  @Prop workOrders: WorkOrderInfo[] = []
  @State selectedIndex: number = -1
  @State scaleValue : number = 1
  build() {
    Column() { // 订单列表
      List({ space: 8,scroller:this.scrollerForList }) {
        ForEach(this.workOrders, (item: WorkOrderInfo, index) => {
          ListItem() {
            StaticOrderItem({
              item: item,
              index:index,
              workOrders:this.workOrders
            })
          }
        })
      }
      .width('100%')
      .flexGrow(1)
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct StaticOrderItem{
  @Prop item: WorkOrderInfo
  @Prop index: number
  @Prop workOrders:WorkOrderInfo[]
  @State scaleValue : number = 1
  @State selectedOrder : WorkOrderInfo = {}
  private onSelect(index: number): void {
    this.selectedOrder = this.workOrders[index]
  }
  OrderMaterialController: CustomDialogController = new CustomDialogController({
    builder: OrderMaterialDialog({
      selectedOrder:this.selectedOrder
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })
  build() {
    Column() {
      // 订单标题（带订单号）
      Text(`${this.item.orderName}${this.item.orderCode}`)
        .fontSize($r('app.float.fontSize_30'))
        .fontColor($r('app.color.FFFFFF'))
        .width('100%')
        .textAlign(TextAlign.Start)

      // 订单详情
      Column({ space: 3 }) {
        Text(`工单编号: ${this.item.workOrderCode}`)
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_16'))
          .fontWeight(FontWeight.Lighter)

        Text(`下发时间: ${this.item.planStartWhen}`)
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_16'))
          .fontWeight(FontWeight.Lighter)

        Row() {
          Text(`齐套比例:${(Number(this.item.inventoryNum) / Number(this.item.planNum) * 100).toFixed(0)}%`)
            .fontColor($r('app.color.FFFFFF'))
            .fontSize($r('app.float.fontSize_16'))
            .fontWeight(FontWeight.Lighter)
        }
        .width('100%')
        .justifyContent(FlexAlign.Start)
      }
      .margin({ top: 6 })
      .alignItems(HorizontalAlign.Start)
    }.backgroundColor(this.scaleValue===0.9 ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
    .borderRadius($r('app.float.virtualSize_24'))
    .padding(13)
    //.border({width:2,color:$r('app.color.20FFFFFF')})
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .animation({
      duration: 200,
      curve: Curve.Linear  // 弹性曲线更生动
    })
    .onClick(() => {
      this.scaleValue = 0.9;  // 点击时缩小
      setTimeout(() => {
        this.scaleValue = 1; // 0.2秒后恢复
        this.onSelect(this.index)
        this.OrderMaterialController.open()
      }, 200);
    })

  }
}

@CustomDialog
struct OrderMaterialDialog {
  private scrollerForList: Scroller = new Scroller()
  @Prop workOrders:WorkOrderInfo[] = []
  @Prop inBoundRation:number = 10
  @Prop outBoundRation:number = 79
  @Link selectedOrder: WorkOrderInfo
  @State materialData: WorkOrderMaterialInfo[] = [];

  queryDemandMaterial=async(workOrderCode:string)=>{
    this.materialData = await WmsRequest.post('/api/v1/wms/workOrderMaterial/list', {
      workOrderCode: workOrderCode,
    } as RequestParamModel) as WorkOrderMaterialInfo[]
  }

  controller: CustomDialogController
  searchRequestMaterial: () => void = () => {}

  async aboutToAppear(){
    const workOrderCode = this.selectedOrder?.workOrderCode ?? '';
    this.queryDemandMaterial(workOrderCode);
  }

  build() {
    Column() {
      Column(){
        Text('订单物流状况详情')
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_38'))
      }.height('8%')
      .justifyContent(FlexAlign.Center)

      Column() {
        // 订单标题（带订单号）
        Text(`${this.selectedOrder.orderName}${this.selectedOrder.orderCode}`)
          .fontSize($r('app.float.fontSize_30'))
          .fontColor($r('app.color.FFFFFF'))
          .width('100%')
          .textAlign(TextAlign.Start)


        Row(){
          Column({ space: 3 }) {
            Text(`工单编号: ${this.selectedOrder.workOrderCode}`)
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_16'))
            Text(`下发时间: ${this.selectedOrder.planStartWhen}`)
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_16'))
            Text(`预计完成时间: ${this.selectedOrder.planStartEnd}`)
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_16'))
            Text(`生产数量: ${this.selectedOrder.inventoryNum}`)
              .fontColor($r('app.color.FFFFFF'))
              .fontSize($r('app.float.fontSize_16'))
          }
          .margin({ top: 6 })
          .alignItems(HorizontalAlign.Start)
          .width('80%')
          Column({ space: 3 }){
            Row(){
              Text('物料入库比例')
                .width('80%')
                .fontColor($r('app.color.60FFFFFF'))
                .fontSize($r('app.float.fontSize_16'))
              Text(`${this.inBoundRation}%`)
                .width('20%')
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_16'))
                .textAlign(TextAlign.End)
            }
            Row() {
              Row()
                .width(`${this.inBoundRation}%`)
                .height('100%')
                .borderRadius($r('app.float.virtualSize_24'))
                .linearGradient({
                  angle: 90,
                  colors: [[$r('app.color.1050FF'), 0.0], [$r('app.color.73C3FF'), 1]]
                })
            }.height('10%').width('100%').backgroundColor($r('app.color.10FFFFFF'))
            .borderRadius($r('app.float.virtualSize_24'))
            Row(){
              Text('物料出库比例')
                .width('80%')
                .fontColor($r('app.color.60FFFFFF'))
                .fontSize($r('app.float.fontSize_16'))
              Text(`${this.outBoundRation}%`)
                .width('20%')
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_16'))
                .textAlign(TextAlign.End)
            }.margin({ top: '2%' })
            Row() {
              Row()
                .width(`${this.outBoundRation}%`)
                .height('100%')
                .borderRadius($r('app.float.virtualSize_24'))
                .linearGradient({
                  angle: 90,
                  colors: [[$r('app.color.1050FF'), 0.0], [$r('app.color.73C3FF'), 1]]
                })
            }
            .height('10%')
            .width('100%')
            .backgroundColor($r('app.color.10FFFFFF'))
            .borderRadius($r('app.float.virtualSize_24'))
          }
          .width('20%')
          .alignItems(HorizontalAlign.Start)
        }.width('100%')
      }.backgroundColor( $r('app.color.20FFFFFF'))
      .borderRadius($r('app.float.virtualSize_24'))
      .padding({left:30,right:10,top:10,bottom:5})
      .height('14%')
      .width('95%')
     Column(){
       List({scroller:this.scrollerForList}) {
         ForEach(this.materialData, (item:WorkOrderMaterialInfo) => {
           ListItem() {
             Column() {
               Column(){
                 Text(item.itemName)
                   .fontSize($r('app.float.fontSize_16'))
                   .fontColor($r('app.color.FFFFFF'))
                   .width('100%')
                   .textAlign(TextAlign.Start)
                 Text(`型号： ${item.itemCode}`)
                   .fontSize($r('app.float.fontSize_16'))
                   .fontColor($r('app.color.60FFFFFF'))
                   .width('100%')
                   .fontWeight(FontWeight.Lighter)
                   .textAlign(TextAlign.Start)
               }
               Row(){
                 Text(`入库数量：${item.storageNum}`)
                   .fontSize($r('app.float.fontSize_16'))
                   .fontColor($r('app.color.FFFFFF'))
                   .width('20%')
                   .fontWeight(FontWeight.Lighter)
                   .textAlign(TextAlign.Start)
                 Text(`出库数量：${item.storageNum}`)
                   .fontSize($r('app.float.fontSize_16'))
                   .fontColor($r('app.color.FFFFFF'))
                   .fontWeight(FontWeight.Lighter)
                   .width('20%')
                   .textAlign(TextAlign.Start)
                 Text(`缺料数量：${item.num}`)
                   .fontSize($r('app.float.fontSize_16'))
                   .fontColor($r('app.color.FFFFFF'))
                   .fontWeight(FontWeight.Lighter)
                   .width('20%')
                   .textAlign(TextAlign.Start)
                 Text(`需求数量：${item.num}`)
                   .fontSize($r('app.float.fontSize_16'))
                   .fontColor($r('app.color.FFFFFF'))
                   .width('20%')
                   .fontWeight(FontWeight.Lighter)
                   .textAlign(TextAlign.Start)
               }.justifyContent(FlexAlign.Start).width('100%').margin({top:'1%'})
             }.width('100%').justifyContent(FlexAlign.SpaceEvenly).padding(10)
           }
         })
       }
       .width('100%')
       .height('100%')
       .divider({
         strokeWidth: 1,
         color: $r('app.color.20FFFFFF')
       })
     }.height('57%').width('95%').margin({top:'2%',bottom:'2%'})

      Divider()
        .vertical(false)
        .strokeWidth(1)
        .color($r('app.color.15FFFFFF'))
      Column(){
        Text('关闭')
          .fontColor($r('app.color.60FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
      }
      .height('8%')
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .onClick(
        () => this.controller.close()
      )
    }
    .height('90%')
    .width('80%')
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .borderColor($r('app.color.000000'))
    .borderWidth(1)
    .borderRadius($r('app.float.virtualSize_16'))
  }
}




@Component
export struct StaticMaterialList {
  private scrollerForList: Scroller = new Scroller()

  @Prop currentStock: MaterialInfo[] = []
  @State scaleValue : number = 1
  build() {
    Column() { // 订单列表
      List({ space: 8,scroller:this.scrollerForList }) {
        ForEach(this.currentStock, (item: MaterialInfo, index) => {
          ListItem() {
            StaticMaterialItem({
              item: item,
              index:index,
              currentStock:this.currentStock
            })
          }
        })
      }
      .width('100%')
      .flexGrow(1)
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct StaticMaterialItem{
  @Prop item: MaterialInfo
  @Prop index: number
  @Prop currentStock:MaterialInfo[]
  @State scaleValue : number = 1
  @State selectedMaterial :MaterialInfo={}
  private onSelect(index: number): void {
    this.selectedMaterial = this.currentStock[index]
  }

  MaterialBoxController: CustomDialogController = new CustomDialogController({
    builder: MaterialBoxDialog({
      selectedMaterial:this.selectedMaterial
    }),
    autoCancel: true, // 点击遮罩关闭
    customStyle: true,
    maskColor: 'rgba(0,0,0,0.8)',  // 黑色遮罩
  })

  build() {
    Column() {
      // 订单标题（带订单号）
      Text(`${this.item.materialName}`)
        .fontSize($r('app.float.fontSize_30'))
        .fontColor($r('app.color.FFFFFF'))
        .width('100%')
        .textAlign(TextAlign.Start)
        .maxLines(1) // 限制单行显示
       // .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出显示...



      // 订单详情
      Column({ space: 3 }) {
        Text(`型号: ${this.item.materialNo}`)
          .fontColor($r('app.color.FFFFFF'))
          .textAlign(TextAlign.Start)
          .width('100%')
          .fontWeight(FontWeight.Lighter)
          .fontSize($r('app.float.fontSize_16'))

        Text(`总数量: ${this.item.num}`)
          .fontColor($r('app.color.FFFFFF'))
          .width('100%')
          .fontWeight(FontWeight.Lighter)
          .fontSize($r('app.float.fontSize_16'))
          .textAlign(TextAlign.Start)
      }
      .margin({ top: 6 })
      .alignItems(HorizontalAlign.Start)
    }.backgroundColor(this.scaleValue===0.9 ? $r('app.color.2030D158') : $r('app.color.20FFFFFF'))
    .borderRadius($r('app.float.virtualSize_24'))
    .padding(13)
    //.border({width:2,color:$r('app.color.20FFFFFF')})
    .scale({ x: this.scaleValue, y: this.scaleValue })
    .animation({
      duration: 200,
      curve: Curve.Linear  // 弹性曲线更生动
    })
    .onClick(() => {
      this.scaleValue = 0.9;  // 点击时缩小
      setTimeout(() => {
        this.scaleValue = 1; // 0.2秒后恢复
        this.onSelect(this.index)
        this.MaterialBoxController.open()
      }, 200);
    })

  }
}




@CustomDialog
struct MaterialBoxDialog {
  @Link selectedMaterial: MaterialInfo
  private scrollerMaterial: Scroller = new Scroller()
  @State selectedMaterialIndex: number = -1  // 物料箱选中索引
  private onSelectMaterial(index: number) {
    this.selectedMaterialIndex = index
  }
  @State materialBoxes: MaterialBoxInfo[] = [];
  @Prop emptyBoxes: EmptyBox[] = [];
  controller: CustomDialogController
  searchRequestMaterial: () => void = () => {}

  loadMaterialBoxes= async()=>{
    this.materialBoxes = await WmsRequest.post("/api/v1/stock/groupList", {
      materialNo: this.selectedMaterial.materialNo,
    } as RequestParamModel);
  }
  async aboutToAppear() {
    this.loadMaterialBoxes();
  }

  build() {
    Column() {
      Column(){
        Text('物料库存')
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_38'))
      }.height('8%')
      .justifyContent(FlexAlign.Center)

      Column() {
        Grid(this.scrollerMaterial) {
          ForEach(this.materialBoxes, (box: MaterialBoxInfo, index) => {
            GridItem() {
              Column() {
                // 订单标题（带订单号）
                Text(`${box.materials?box.materials[0].materialName:''}`)
                  .fontSize($r('app.float.fontSize_30'))
                  .fontColor($r('app.color.FFFFFF'))
                  .width('100%')
                  .textAlign(TextAlign.Start)
                  .margin({ bottom: '2%',left:'2%' })
                Column({ space: 3 }) {
                  Text(`料箱编号: ${box.vehicleCode}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`所属订单: `)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`数量: ${box.materials?box.materials[0].num:''}${box.materials?box.materials[0].unit:''}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`层数: ${box.position}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`位置: ${box.coordinate}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                }
                .width('100%')
                .margin({left:'2%'})
                .justifyContent(FlexAlign.Start)
                .alignItems(HorizontalAlign.Start)
              }
              //.margin({ top: 6 })
              .alignItems(HorizontalAlign.Start)
            }
            .backgroundColor(index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')) // 选中状态加深
            .borderRadius($r('app.float.virtualSize_24'))
            .padding(8)
            .border({
              width: 2,
              color: index === this.selectedMaterialIndex ? $r('app.color.2030D158') : $r('app.color.20FFFFFF')
            })
            .onClick(() => {
              this.onSelectMaterial(index)
            })

          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        // .rowsTemplate('1fr 1fr')
        .columnsGap(10) // 移除网格内部列间距
        .rowsGap(10) // 移除网格内部行间距
        .width('100%') // 确保填满父容器
        .height('97%')
        .padding(10)
      }.height('82%')

      Divider()
        .vertical(false)
        .strokeWidth(1)
        .color($r('app.color.15FFFFFF'))
      Column(){
        Text('关闭')
          .fontColor($r('app.color.60FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
      }
      .height('8%')
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .onClick(
        () => this.controller.close()
      )
    }
    .height('90%')
    .width('80%')
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .borderColor($r('app.color.000000'))
    .borderWidth(1)
    .borderRadius($r('app.float.virtualSize_16'))
  }
}
@Component
export struct LineChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  // 图表数据
  @Link  frequencyData: number[]
  private readonly months: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

  // 图表尺寸和边距
  private readonly chartWidth: number = 400
  private readonly chartHeight: number = 250
  private readonly chartPadding: number = 30

  build() {
    Column() {
      Canvas(this.context)
        .width(this.chartWidth)
        .height(this.chartHeight)
        .backgroundColor('#2c2c2c')
        .onReady(() => this.drawChart())
    }
    .width('100%')
    .height('100%')
  }

  private drawChart() {
    // 清空画布
    this.context.clearRect(0, 0, this.chartWidth, this.chartHeight)

    // 绘制坐标轴
    this.drawAxis()

    // 绘制折线
    this.drawLine()

    // 绘制数据点
    this.drawPoints()
  }

  private drawAxis() {
    this.context.beginPath()
    this.context.strokeStyle = '#666666'
    this.context.lineWidth = 1

    // Y轴
    this.context.moveTo(this.chartPadding, this.chartPadding)
    this.context.lineTo(this.chartPadding, this.chartHeight - this.chartPadding)

    // X轴
    this.context.moveTo(this.chartPadding, this.chartHeight - this.chartPadding)
    this.context.lineTo(this.chartWidth - this.chartPadding, this.chartHeight - this.chartPadding)

    // 绘制刻度和标签
    this.drawLabels()

    this.context.stroke()
  }

  private drawLabels() {
    this.context.fillStyle = '#ffffff'
    this.context.font = '14px sans-serif'

    // Y轴刻度
    for (let i = 0; i <= 5; i++) {
      const y = this.chartHeight - this.chartPadding - (i * (this.chartHeight - 2 * this.chartPadding) / 5)
      const value = i * 100
      this.context.fillText(value.toString(), 5, y + 4)
    }

    // X轴标签
    this.months.forEach((month, i) => {
      const x = this.chartPadding + (i * (this.chartWidth - 2 * this.chartPadding) / (this.months.length - 1))
      this.context.fillText(month, x - 15, this.chartHeight - 10)
    })
  }

  private drawLine() {
    this.context.beginPath()
    this.context.strokeStyle = '#2196F3'
    this.context.lineWidth = 2

    this.frequencyData.forEach((value, i) => {
      const x = this.chartPadding + (i * (this.chartWidth - 2 * this.chartPadding) / (this.frequencyData.length - 1))
      const y = this.chartHeight - this.chartPadding - ((value / 500) * (this.chartHeight - 2 * this.chartPadding))

      if (i === 0) {
        this.context.moveTo(x, y)
      } else {
        this.context.lineTo(x, y)
      }
    })

    this.context.stroke()
  }

  private drawPoints() {
    this.frequencyData.forEach((value, i) => {
      const x = this.chartPadding + (i * (this.chartWidth - 2 * this.chartPadding) / (this.frequencyData.length - 1))
      const y = this.chartHeight - this.chartPadding - ((value / 500) * (this.chartHeight - 2 * this.chartPadding))

      this.context.beginPath()
      this.context.fillStyle = '#2196F3'
      this.context.arc(x, y, 4, 0, Math.PI * 2)
      this.context.fill()
    })
  }
}