|
|
@@ -0,0 +1,816 @@
|
|
|
+import WorkOrderInfo from '../viewmodel/wms/WorkOrderInfo'
|
|
|
+import {DemandMaterial,MaterialBox,EmptyBox} from "../params/OrderMaterialsStorageParams"
|
|
|
+@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_12'))
|
|
|
+ .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_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+
|
|
|
+ Text(`下发时间: ${this.item.planStartWhen}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+
|
|
|
+ Row() {
|
|
|
+ Text('齐套比例:')
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+
|
|
|
+ Text(`${this.item.inventoryNum}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .margin({ left: 4 })
|
|
|
+ .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_9_6'))
|
|
|
+ .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: 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 },
|
|
|
+ ];
|
|
|
+
|
|
|
+ controller: CustomDialogController
|
|
|
+ searchRequestMaterial: () => void = () => {}
|
|
|
+
|
|
|
+ build() {
|
|
|
+ Column() {
|
|
|
+ Column(){
|
|
|
+ Text('订单物流状况详情')
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_15_2'))
|
|
|
+ }.height('8%')
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+
|
|
|
+ Column() {
|
|
|
+ // 订单标题（带订单号）
|
|
|
+ Text(`${this.selectedOrder.orderName}${this.selectedOrder.orderCode}`)
|
|
|
+ .fontSize($r('app.float.fontSize_12'))
|
|
|
+ .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_8'))
|
|
|
+ Text(`下发时间: ${this.selectedOrder.planStartWhen}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ Text(`预计完成时间: ${this.selectedOrder.planStartWhen}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ Text(`生产数量: ${this.selectedOrder.inventoryNum}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ }
|
|
|
+ .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_7'))
|
|
|
+ Text(`${this.inBoundRation}%`)
|
|
|
+ .width('20%')
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .textAlign(TextAlign.End)
|
|
|
+ }
|
|
|
+ Row() {
|
|
|
+ Row()
|
|
|
+ .width(`${this.inBoundRation}%`)
|
|
|
+ .height('100%')
|
|
|
+ .borderRadius($r('app.float.virtualSize_9_6'))
|
|
|
+ .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_9_6'))
|
|
|
+ Row(){
|
|
|
+ Text('物料出库比例')
|
|
|
+ .width('80%')
|
|
|
+ .fontColor($r('app.color.60FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_7'))
|
|
|
+ Text(`${this.outBoundRation}%`)
|
|
|
+ .width('20%')
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .textAlign(TextAlign.End)
|
|
|
+ }.margin({ top: '2%' })
|
|
|
+ Row() {
|
|
|
+ Row()
|
|
|
+ .width(`${this.outBoundRation}%`)
|
|
|
+ .height('100%')
|
|
|
+ .borderRadius($r('app.float.virtualSize_9_6'))
|
|
|
+ .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_9_6'))
|
|
|
+ }
|
|
|
+ .width('20%')
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ }.width('100%')
|
|
|
+ }.backgroundColor( $r('app.color.20FFFFFF'))
|
|
|
+ .borderRadius($r('app.float.virtualSize_9_6'))
|
|
|
+ .padding({left:30,right:10,top:10,bottom:5})
|
|
|
+ .height('18%')
|
|
|
+ .width('95%')
|
|
|
+ Column(){
|
|
|
+ List({scroller:this.scrollerForList}) {
|
|
|
+ ForEach(this.materialData, (item:DemandMaterial) => {
|
|
|
+ ListItem() {
|
|
|
+ Column() {
|
|
|
+ Column(){
|
|
|
+ Text(item.materialName)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .width('100%')
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`型号： ${item.materialType}`)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontColor($r('app.color.60FFFFFF'))
|
|
|
+ .width('100%')
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ }
|
|
|
+ Row(){
|
|
|
+ Text(`入库数量：${item.planNum}`)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .width('20%')
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`出库数量：${item.planNum}`)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .width('20%')
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`缺料数量：${item.planNum}`)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .width('20%')
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`需求数量：${item.planNum}`)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .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:'3%',bottom:'2%'})
|
|
|
+
|
|
|
+ Divider()
|
|
|
+ .vertical(false)
|
|
|
+ .strokeWidth(1)
|
|
|
+ .color($r('app.color.20FFFFFF'))
|
|
|
+ Column(){
|
|
|
+ Text('关闭')
|
|
|
+ .fontColor($r('app.color.60FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_12'))
|
|
|
+ }
|
|
|
+ .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_11_6'))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+@Component
|
|
|
+export struct StaticMaterialList {
|
|
|
+ private scrollerForList: Scroller = new Scroller()
|
|
|
+ @Prop boundMaterial: DemandMaterial[] = [
|
|
|
+ {materialName: 'PCBA电路板SADD12312', 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 },
|
|
|
+ ]
|
|
|
+ @State scaleValue : number = 1
|
|
|
+ build() {
|
|
|
+ Column() { // 订单列表
|
|
|
+ List({ space: 8,scroller:this.scrollerForList }) {
|
|
|
+ ForEach(this.boundMaterial, (item: DemandMaterial, index) => {
|
|
|
+ ListItem() {
|
|
|
+ StaticMaterialItem({
|
|
|
+ item: item,
|
|
|
+ index:index,
|
|
|
+ boundMaterial:this.boundMaterial
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .flexGrow(1)
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Component
|
|
|
+struct StaticMaterialItem{
|
|
|
+ @Prop item: DemandMaterial
|
|
|
+ @Prop index: number
|
|
|
+ @Prop boundMaterial:DemandMaterial[]
|
|
|
+ @State scaleValue : number = 1
|
|
|
+ @State selectedMaterial :DemandMaterial={}
|
|
|
+ private onSelect(index: number): void {
|
|
|
+ this.selectedMaterial = this.boundMaterial[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_12'))
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .width('100%')
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ .maxLines(1) // 限制单行显示
|
|
|
+ // .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出显示...
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 订单详情
|
|
|
+ Column({ space: 3 }) {
|
|
|
+ Text(`型号: ${this.item.materialType}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ .width('100%')
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+
|
|
|
+ Text(`总数量: ${this.item.inBoundNum}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .width('100%')
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .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_9_6'))
|
|
|
+ .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 {
|
|
|
+ @Prop workOrders:WorkOrderInfo[] = []
|
|
|
+ @Prop inBoundRation:number = 10
|
|
|
+ @Prop outBoundRation:number = 79
|
|
|
+ @Link selectedMaterial: DemandMaterial
|
|
|
+ private scrollerMaterial: Scroller = new Scroller()
|
|
|
+ @State selectedMaterialIndex: number = -1 // 物料箱选中索引
|
|
|
+ private onSelectMaterial(index: number) {
|
|
|
+ this.selectedMaterialIndex = index
|
|
|
+ }
|
|
|
+
|
|
|
+ @State materialBoxes: MaterialBox[] = [
|
|
|
+ // 第一行物料箱
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ }, {
|
|
|
+ id: '1',
|
|
|
+ type: 'material',
|
|
|
+ name: '物料名称XXXXX',
|
|
|
+ boxNumber: 'LX-12345',
|
|
|
+ boxType: '通用类型',
|
|
|
+ order: 'XXXXX订单',
|
|
|
+ quantity: 10,
|
|
|
+ position: 'X-1 Y-2'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 其他2个物料箱...
|
|
|
+
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ // 第二行空箱
|
|
|
+ {
|
|
|
+ id: '4',
|
|
|
+ type: 'empty',
|
|
|
+ name: '空箱',
|
|
|
+ boxNumber: 'LX-67890',
|
|
|
+ boxType: '通用类型',
|
|
|
+ position: 'X-3 Y-1'
|
|
|
+ },
|
|
|
+ // 其他2个空箱...
|
|
|
+ ];
|
|
|
+ @Prop emptyBoxes: EmptyBox[] = [];
|
|
|
+ controller: CustomDialogController
|
|
|
+ searchRequestMaterial: () => void = () => {}
|
|
|
+
|
|
|
+ build() {
|
|
|
+ Column() {
|
|
|
+ Column(){
|
|
|
+ Text('物料库存')
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_15_2'))
|
|
|
+ }.height('8%')
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+
|
|
|
+ Column() {
|
|
|
+ Grid(this.scrollerMaterial) {
|
|
|
+ ForEach(this.materialBoxes, (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%',left:'2%' })
|
|
|
+ // 订单详情
|
|
|
+ Column({ space: 3 }) {
|
|
|
+ Text(`料箱编号: ${box.id}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`料箱类型: ${box.boxType}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`所属订单: ${box.order}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`数量: ${box.boxNumber}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .fontWeight(FontWeight.Lighter)
|
|
|
+ .textAlign(TextAlign.Start)
|
|
|
+ Text(`位置: ${box.position}`)
|
|
|
+ .fontColor($r('app.color.FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_8'))
|
|
|
+ .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_9_6'))
|
|
|
+ .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.20FFFFFF'))
|
|
|
+ Column(){
|
|
|
+ Text('关闭')
|
|
|
+ .fontColor($r('app.color.60FFFFFF'))
|
|
|
+ .fontSize($r('app.float.fontSize_12'))
|
|
|
+ }
|
|
|
+ .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_11_6'))
|
|
|
+ }
|
|
|
+}
|
|
|
+@Component
|
|
|
+export struct LineChart {
|
|
|
+ private settings: RenderingContextSettings = new RenderingContextSettings(true)
|
|
|
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
|
|
|
+
|
|
|
+ // 图表数据
|
|
|
+ private readonly data: number[] = [400, 380, 400, 450, 430, 450, 440, 450, 430, 440, 420, 450]
|
|
|
+ private readonly months: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
|
+
|
|
|
+ // 图表尺寸和边距
|
|
|
+ private readonly chartWidth: number = 300
|
|
|
+ private readonly chartHeight: number = 200
|
|
|
+ private readonly chartPadding: number = 30
|
|
|
+
|
|
|
+ aboutToAppear() {
|
|
|
+ // 初始化设置
|
|
|
+ }
|
|
|
+
|
|
|
+ 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.data.forEach((value, i) => {
|
|
|
+ const x = this.chartPadding + (i * (this.chartWidth - 2 * this.chartPadding) / (this.data.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.data.forEach((value, i) => {
|
|
|
+ const x = this.chartPadding + (i * (this.chartWidth - 2 * this.chartPadding) / (this.data.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()
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
