/* * 工步页面 * */ import { BottomOperateComp } from '../../common/component/BottomOperateComp' import router from '@ohos.router'; import ProcessData from '../../viewmodel/ProcessData'; import CommonConstants from '../../common/constants/CommonConstants'; import ProcessStep from '../../viewmodel/ProcessStep' import MaterialInfo from '../../model/MaterialInfo'; import { MaterialCollectView } from '../../view/processview/MaterialCollectView'; import { RecordItemView } from '../../view/processview/RecordItemView'; import { MultimediaCollectView } from '../../view/processview/MultimediaCollectView'; import { EsopView } from '../../view/processview/EsopView'; import { SpotCheckView } from '../../view/processview/SpotCheckView'; import { EquipRecordView } from '../../view/processview/EquipRecordView'; import { DebugPairView } from '../../view/processview/DebugPairView'; import { FixtureView } from '../../view/processview/FixtureView'; import { NameplateBindView } from '../../view/processview/NameplateBindView'; import { pinyin } from 'pinyin-pro'; import HashMap from '@ohos.util.HashMap'; import { ProcessTitleComp } from '../../common/component/ProcessTitleComp'; import JGRequest from '../../common/util/request/Request'; import StartWorkInfo from '../../viewmodel/StartWorkInfo'; const params = router.getParams(); // 获取传递过来的参数对象 const startWorkInfo = params['startWorkInfo']; // 获取开工信息 const processInfo = params['processInfo']; // 获取当前工序信息 @Entry @Component struct ProcessStepPage { startWorkInfo: StartWorkInfo = startWorkInfo @State process: ProcessData = processInfo @State processSteps: ProcessStep[] = [] private stepImages: Resource[] = CommonConstants.STEP_IMAGES private stepSelectImages: Resource[] = CommonConstants.STEP_SELECT_IMAGES // 选中的工步索引 @State selectStep: number = -1 // 报故弹窗 reportFaultController: CustomDialogController = new CustomDialogController({ builder: ReportFaultDialog({ }), autoCancel: true, alignment: DialogAlignment.TopEnd, // gridCount: 3, customStyle: true, }) // 报工弹窗 reportWorkController: CustomDialogController = new CustomDialogController({ builder: ReportWorkDialog({ }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) async aboutToAppear() { let res: ProcessStep[] = await JGRequest.get("/api/v1/process/opCompent/get/" + 129, {}) if (res && res.length > 0) { this.processSteps = res this.selectStep = 0 } } build() { Column() { ProcessTitleComp() Row() { // 左侧信息和操作栏 Column() { // 信息栏（产品、工序、主料） Column() { Column() { Text(this.startWorkInfo.materialName) .fontSize($r('app.float.card_title_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) .maxLines(1) Text(this.startWorkInfo.materialCode) .fontSize($r('app.float.card_info_font_size')) .fontColor($r('app.color.general_font_color')) .fontWeight(FontWeight.Regular) .opacity($r('app.float.card_font_default_opacity')) .maxLines(1) } .height('27%') .width('90%') .alignItems(HorizontalAlign.Start) Column() { Text('序列号') .fontSize($r('app.float.card_info_font_size')) .fontWeight(FontWeight.Regular) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.card_font_default_opacity')) Text(this.startWorkInfo.seqNo) .fontSize($r('app.float.card_info_font_size')) .fontColor($r('app.color.general_font_color')) .fontWeight(FontWeight.Medium) .opacity($r('app.float.general_font_opacity')) .maxLines(1) } .height('27%') .width('90%') .alignItems(HorizontalAlign.Start) Column() { Text('当前工序') .fontSize($r('app.float.card_info_font_size')) .fontWeight(FontWeight.Regular) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.card_font_default_opacity')) Row() { Text(this.process.operationName) .fontSize($r('app.float.card_info_font_size')) .fontColor($r('app.color.general_font_color')) .fontWeight(FontWeight.Medium) .opacity($r('app.float.general_font_opacity')) Image($r('app.media.subscript')) .height($r('app.float.card_subscript_size')) .width($r('app.float.card_subscript_size')) } .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.SpaceBetween) .width('90%') } .height('27%') .width('90%') .alignItems(HorizontalAlign.Start) } .height('29%') .width('100%') .justifyContent(FlexAlign.SpaceEvenly) .backgroundColor($r('app.color.general_card_background_color')) .borderRadius($r('app.float.general_border_radius')) // 操作卡片 OperateCard({operateName: '叫料', operateImage:$r('app.media.call_material'), clickEvent: ()=>{ router.pushUrl({ url: 'pages/process/CallMaterialPage', // params: {} }) }}) OperateCard({operateName: '工位上料', operateImage:$r('app.media.station_loading'), clickEvent: ()=>{ router.pushUrl({ url: 'pages/process/StationLoadingPage' }) }}) OperateCard({operateName: '物料流转', operateImage:$r("app.media.material_circulation"), clickEvent: ()=>{ router.pushUrl({ url: 'pages/process/MaterialCirculationPage', // params: {} }) }}) OperateCard({operateName: '图纸', operateImage:$r('app.media.drawing'), clickEvent: ()=>{ router.pushUrl({ url: 'pages/process/ProcessDrawingPage', params: { mainMaterial: this.startWorkInfo.materialCode } }) }}) OperateCard({operateName: '报故', operateImage:$r('app.media.report_fault'), clickEvent: ()=>{ this.reportFaultController.open() }}) OperateCard({operateName: '报工', operateImage:$r('app.media.report_work'), bgColor: $r('app.color.process_card_green_color'), clickEvent: ()=>{ this.reportWorkController.open() }}) } .height('83%') .width('15%') .justifyContent(FlexAlign.SpaceBetween) .alignItems(HorizontalAlign.Center) // 工步和当前工步的操作 Column() { // 当前工序的工步列表 List({space: 6}) { ForEach(this.processSteps, (item: ProcessStep, index: number)=> { ListItem() { Column() { Image(this.selectStep === index ? this.stepSelectImages[item.compentType - 1] : this.stepImages[item.compentType - 1]) .width($r('app.float.card_image_size')) .height($r('app.float.card_image_size')) Text(item.compentName) .fontSize($r('app.float.card_info_font_size')) .fontWeight(FontWeight.Medium) .fontColor(this.selectStep === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color')) .opacity(this.selectStep === index ? 1 : $r('app.float.general_font_opacity')) } .height('100%') .width('9.5%') .justifyContent(FlexAlign.Center) .borderRadius($r('app.float.general_border_radius')) .backgroundColor(this.selectStep === index ? $r('app.color.process_card_blue_color') : $r('app.color.page_general_background')) .onClick(()=>{ this.selectStep = index }) } }) } .height('9%') .width('100%') .listDirection(Axis.Horizontal) .margin({left: '2%'}) Column() { if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '1') { MaterialCollectView({ startWorkInfo: this.startWorkInfo, }) } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '2') { RecordItemView({ operationId: this.process.operationId, processId: this.startWorkInfo.id }) } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '3') { MultimediaCollectView({ operationId: this.process.operationId, processId: this.startWorkInfo.id, }) } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '4') { EsopView({operationId: this.process.operationId,}) } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '5') { SpotCheckView({ operationId: this.process.operationId, processId: this.startWorkInfo.id }) } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '6') { EquipRecordView({ operationId: this.process.operationId, processId: this.startWorkInfo.id }) } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '7') { FixtureView() } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '8') { DebugPairView() } else if (this.processSteps && this.processSteps.length > 0 && this.processSteps[this.selectStep].compentType.toString() === '9') { NameplateBindView({mainMaterial: this.startWorkInfo.materialCode}) } } .width('100%') .height('91%') } .height('100%') .width('85%') } .width('100%') .height('84%') .alignItems(VerticalAlign.Top) .margin({left: '1.25%'}) BottomOperateComp() } .width('100%') .height('100%') .backgroundColor($r('app.color.page_general_background')) } } @Component struct OperateCard { operateName: string operateImage: Resource bgColor?: Resource = $r('app.color.general_card_background_color') clickEvent?: Function build() { Row() { Row() { Text(this.operateName) .fontSize($r('app.float.card_title_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) Image(this.operateImage) .width($r('app.float.general_icon_size')) .height($r('app.float.general_icon_size')) } .width('90%') .justifyContent(FlexAlign.SpaceBetween) } .height('11.5%') .width('100%') .backgroundColor(this.bgColor) .borderRadius($r('app.float.general_border_radius')) .justifyContent(FlexAlign.Center) .onClick(()=>{ if (this.clickEvent) { this.clickEvent() } }) } } @CustomDialog struct ReportFaultDialog { @State historyArray: MaterialInfo[] = CommonConstants.MATERIAL_ARRAY // 所有的缺陷类型 @State faultTypes: FaultType[] = [ {id: 1, faultName: '外观缺陷'}, {id: 2, faultName: '尺寸和形状缺陷'}, {id: 3, faultName: '功能性缺陷'}, {id: 4, faultName: '电气连接缺陷'}, {id: 5, faultName: '密闭性缺陷'}, ] // 所有的缺陷类型 @State faultLevels: FaultLevel[] = [ {id: 1, levelName: '1级缺陷'}, {id: 2, levelName: '2级缺陷'}, {id: 3, levelName: '3级缺陷'}, {id: 4, levelName: '4级缺陷'}, ] @State selectTypes: number[] = [] @State selectLevel: number = -1 @State faultImage: Resource[] = [$r('app.media.return'), $r('app.media.pcb_demo'), $r('app.media.pcb_demo'), $r('app.media.pcb_demo')] // 故障缺陷选择弹窗 faultTypeController: CustomDialogController = new CustomDialogController({ builder: FaultTypeDialog({ faultTypes: this.faultTypes, selectTypes: $selectTypes, }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) // 故障等级选择弹窗 faultLevelController: CustomDialogController = new CustomDialogController({ builder: FaultLevelDialog({ faultLevels: this.faultLevels, selectLevel: $selectLevel, }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear(){ // todo 查询故障类型 故障等级 } build() { Column() { Row() { Text('报故') .fontSize($r('app.float.process_card_large_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('7.5%') .alignItems(VerticalAlign.Bottom) Column() { Row() { Text('故障缺陷') .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .width('96%') .height('6%') Scroll() { Flex({ wrap: FlexWrap.Wrap}) { ForEach(this.selectTypes, (item: number, index: number) => { Row().width('2%') Row() { Text(this.faultTypes[item].faultName) .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .backgroundColor($r('app.color.general_card_background_color')) .width('47%') .height('10%') .borderRadius($r('app.float.general_border_radius')) .padding({left: 15}) .margin({bottom: 5}) }) Row() { Row().width('2%') Image($r('app.media.fault_add')) .objectFit(ImageFit.Contain) .onClick(()=>{ this.faultTypeController.open() }) } .width('100%') .height('10%') Row() { Row().width('2%') Text('故障等级') .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .width('100%') .height('6%') Row() { Row().width('2%') Row() { Text(this.faultLevels && this.faultLevels[this.selectLevel] ? this.faultLevels[this.selectLevel].levelName : '请选择') .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.material_collect_font_opacity')) Blank() Row() { Image($r('app.media.subscript_space')) .height($r('app.float.card_subscript_new_size')) .width($r('app.float.card_subscript_new_size')) } .alignItems(VerticalAlign.Bottom) .justifyContent(FlexAlign.End) .width('20%') .height('100%') } .backgroundColor($r('app.color.general_card_background_color')) .width('47%') .height('10%') .borderRadius($r('app.float.general_border_radius')) .padding({left: 15}) .onClick(()=>{ this.faultLevelController.open() }) } .width('100%') Row() { Row().width('2%') Text('故障图片') .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .width('100%') .height('6%') ForEach(this.faultImage, (item: Resource, index: number) => { Row().width('2%') if (index === 0) { Row() { Image($r('app.media.process_camera')) .width('30%') Image($r('app.media.local_upload')) .width('30%') } .width('30.67%') .height('33%') .layoutWeight(1) .justifyContent(FlexAlign.SpaceAround) .borderRadius($r('app.float.general_border_radius')) .borderStyle(BorderStyle.Dashed) .borderColor($r('app.color.material_collect_border_color')) .borderWidth(1) .margin({bottom: 5}) } else { Row() { Image(item) .objectFit(ImageFit.Fill) .borderRadius($r('app.float.general_border_radius')) } .width('30.67%') .height('33%') .margin({bottom: 5}) .onClick(()=> { // todo }) } }) Row().width('100%').height('10%') } } .scrollBar(BarState.Off) } .width('100%') .layoutWeight(1) .justifyContent(FlexAlign.Start) Row() { Button('取消') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.robot_set_card_blue')) .width('45%') .height('66.5%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .onClick(() => { // todo }) Button('报故') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_white_color')) .width('45%') .height('66.5%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_card_blue')) .onClick(() => { // todo }) } .justifyContent(FlexAlign.SpaceEvenly) .alignItems(VerticalAlign.Center) .height('11%') .width('100%') } .width('50.6%') .height('100%') .backgroundColor($r('app.color.page_general_background')) .justifyContent(FlexAlign.Start) .borderRadius({topLeft: $r('app.float.general_border_radius'), bottomLeft: $r('app.float.general_border_radius'),}) } } @CustomDialog struct ReportWorkDialog { @State reportSwitch: number = 1 // 上报的工人 @State reportWorkers: UserInfo[] = [ {userName: '王德发', workHoursRatio: 100} ] // 工时总比率（max：100） todo 提交需要校验是否等于 100 @State radioTotal: number = 100 // 弹窗可用比率 = radioTotal - 当前用户的workHoursRatio @State availableRatio: number = 0 workerRatio: number = 0 // 修改的人员索引 workerIndex: number = -1 @State addWorker: UserInfo = null // 报工人员选择弹窗 workerAddController: CustomDialogController = new CustomDialogController({ builder: WorkerAddDialog({ reportWorkers: $reportWorkers, addWorker: $addWorker, confirm: ()=> { this.reportWorkers.splice(this.reportWorkers.length - 1, 0, this.addWorker) this.addWorker = null } }), autoCancel: true, alignment: DialogAlignment.TopEnd, // gridCount: 3, customStyle: true, }) workHoursRatioController: CustomDialogController = new CustomDialogController({ builder: WorkHoursRatioDialog({ availableRatio: $availableRatio, workerRatio: this.workerRatio, confirm: ()=> { console.log('testTag', '----'+this.availableRatio) this.reportWorkers[this.workerIndex] = { userName: this.reportWorkers[this.workerIndex].userName, workHoursRatio: this.availableRatio } this.radioTotal = 0 for (const worker of this.reportWorkers) { this.radioTotal += worker.workHoursRatio } } }), autoCancel: true, alignment: DialogAlignment.TopEnd, // gridCount: 3, customStyle: true, }) controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear() { this.reportWorkers.push({userName: 'admin', workHoursRatio: 0}) } build(){ Column() { Row() { Text('报工') .fontSize($r('app.float.title_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('12.6%') .alignItems(VerticalAlign.Bottom) .padding({ bottom : 10}) // 报工切换按钮 Row() { Row() { Stack() { if (this.reportSwitch === 1) { Text() .backgroundColor($r('app.color.general_card_background_color')) .width('100%') .height('100%') .borderRadius($r('app.float.general_border_radius')) } Text('单人报工') .fontSize($r('app.float.set_card_font_size')) .fontColor($r('app.color.general_font_color')) .fontWeight(FontWeight.Medium) .opacity(this.reportSwitch === 1 ? $r('app.float.card_font_select_opacity') : $r('app.float.card_font_default_opacity')) } .width('100%') .height('100%') } .onClick(() => { this.reportSwitch = 1 }) .width('50%') Row() { Stack() { if (this.reportSwitch === 2) { Text() .backgroundColor($r('app.color.general_card_background_color')) .width('100%') .height('100%') .borderRadius($r('app.float.general_border_radius')) } Text('多人报工') .fontSize($r('app.float.set_card_font_size')) .fontColor($r('app.color.general_font_color')) .fontWeight(FontWeight.Medium) .opacity(this.reportSwitch === 2 ? $r('app.float.card_font_select_opacity') : $r('app.float.card_font_default_opacity')) } .width('100%') .height('100%') } .width('50%') .onClick(() => { this.reportSwitch = 2 }) } .width('66%') .height('10%') .borderRadius($r('app.float.general_border_radius')) .backgroundColor($r('app.color.robot_toward_set_card_background')) .margin({bottom: 22}) // 报工人员 Row() { if (this.reportSwitch === 1) { Column() { Row(){}.height('16.5%') Row(){ Image($r('app.media.user')) .height('100%') .objectFit(ImageFit.Fill) } .height('28.5%') .width('100%') .justifyContent(FlexAlign.Center) Row(){ Text(this.reportWorkers[0].userName) .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.card_font_select_opacity')) } .height('14.6%') Column() { Text('100%') .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.process_card_blue_color')) Text('用时占比') .fontSize($r('app.float.process_card_small_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.process_step_font_opacity')) } .height('27.5%') .width('75%') .justifyContent(FlexAlign.Center) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .borderRadius($r('app.float.general_border_radius')) } .width('48%') .height('63%') .backgroundColor($r('app.color.general_card_background_color')) .borderRadius($r('app.float.general_border_radius')) } else { Scroll() { Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween}) { ForEach(this.reportWorkers, (item: UserInfo, index: number)=>{ if (index === this.reportWorkers.length - 1) { Column() { Row() { Image($r('app.media.user_add')) .height('100%') .objectFit(ImageFit.Fill) } .height('39%') } .width('48%') .height('63%') .borderRadius($r('app.float.general_border_radius')) .justifyContent(FlexAlign.Center) .borderStyle(BorderStyle.Dashed) .borderColor($r('app.color.material_collect_border_color')) .borderWidth(1) .onClick(()=>{ this.workerAddController.open() }) } else { Column() { Row(){}.height('16.5%') Row(){ Image($r('app.media.user')) .height('100%') .objectFit(ImageFit.Fill) } .height('28.5%') .width('100%') .justifyContent(FlexAlign.Center) Row(){ Text(item.userName) .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.card_font_select_opacity')) } .height('14.6%') Column() { Text(item.workHoursRatio + '%') .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.process_card_blue_color')) Text('用时占比') .fontSize($r('app.float.process_card_small_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.process_step_font_opacity')) } .height('27.5%') .width('75%') .justifyContent(FlexAlign.Center) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .borderRadius($r('app.float.general_border_radius')) Row() { Image($r('app.media.subscript_space')) .height($r('app.float.card_subscript_new_size')) .width($r('app.float.card_subscript_new_size')) } .alignItems(VerticalAlign.Bottom) .justifyContent(FlexAlign.End) .width('100%') .layoutWeight(1) } .width('48%') .height('63%') .backgroundColor($r('app.color.general_card_background_color')) .borderRadius($r('app.float.general_border_radius')) .onClick(()=>{ this.workerIndex = index this.workerRatio = this.reportWorkers[index].workHoursRatio this.availableRatio = (100 - this.radioTotal) + this.reportWorkers[index].workHoursRatio console.log('testTag', '========='+ this.availableRatio) this.workHoursRatioController.open() }) } }) } } } } .width('66%') .justifyContent(FlexAlign.Start) .alignItems(VerticalAlign.Top) .layoutWeight(1) // 确认/取消按钮 Row() { Button('取消') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.robot_set_card_blue')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .onClick(() => { this.controller.close() this.cancel() }) Row() .width('2.5%') Button('确认报工') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_white_color')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_card_blue')) .onClick(() => { if (this.controller != undefined) { this.controller.close() } }) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .height('20%') .width('100%') } .width('48%') .height('74%') .backgroundColor($r('app.color.page_general_background')) .borderRadius($r('app.float.general_border_radius')) } } @CustomDialog struct FaultTypeDialog { faultTypes: FaultType[] @Link selectTypes: number[] selectTemps: number[] = [] aboutToAppear() { if (this.selectTypes && this.selectTypes.length > 0) { for (const select of this.selectTypes) { this.selectTemps.push(select) } } } controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} build(){ Column() { Row() { Text('选择缺陷') .fontSize($r('app.float.title_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('15%') .alignItems(VerticalAlign.Center) List({ space: 10}) { ForEach(this.faultTypes, (item: FaultType, index: number)=>{ ListItem() { Row() { Text(item.faultName) .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) Checkbox() .select(this.selectTemps.includes(index) ? true : false) .onChange((value: boolean)=>{ if (value) { this.selectTemps.push(index) } else { this.selectTemps = this.selectTemps.filter(function(item) { return item !== index }); } }) } .backgroundColor($r('app.color.general_card_background_color')) .width('71%') .height('14%') .borderRadius($r('app.float.general_border_radius')) .justifyContent(FlexAlign.SpaceBetween) .padding({left: 15, right: 15}) } }) } .width('100%') .layoutWeight(1) .alignListItem(ListItemAlign.Center) Row() { Button('取消') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.robot_set_card_blue')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .onClick(() => { this.controller.close() this.cancel() }) Row() .width('2.5%') Button('确认') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_white_color')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_card_blue')) .onClick(() => { if (this.controller != undefined) { this.controller.close() this.selectTypes = this.selectTemps this.selectTypes.sort(function(a, b){ return a as number - (b as number); }) } }) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .height('15%') .width('100%') } .width('48%') .height('74%') .backgroundColor($r('app.color.page_general_background')) .borderRadius($r('app.float.general_border_radius')) } } @CustomDialog struct FaultLevelDialog { faultLevels: FaultLevel[] @Link selectLevel: number @State selectTemp: number = -1 aboutToAppear() { this.selectTemp = this.selectLevel } controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} build(){ Column() { Row() { Text('选择故障等级') .fontSize($r('app.float.title_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('15%') .alignItems(VerticalAlign.Center) List({ space: 10 }) { ForEach(this.faultLevels, (item: FaultLevel, index: number)=>{ ListItem() { Row() { Text(item.levelName) .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor(this.selectTemp === index ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color')) .opacity(this.selectTemp === index ? 1 : $r('app.float.general_font_opacity')) } .backgroundColor(this.selectTemp === index ? $r('app.color.process_card_blue_color') : $r('app.color.general_card_background_color')) .width('71%') .height('20%') .borderRadius($r('app.float.general_border_radius')) .justifyContent(FlexAlign.Center) .padding({left: 15, right: 15}) .onClick(()=>{ this.selectTemp = index }) } }) } .width('100%') .layoutWeight(1) .alignListItem(ListItemAlign.Center) Row() { Button('取消') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.robot_set_card_blue')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .onClick(() => { this.controller.close() this.cancel() }) Row() .width('2.5%') Button('确认') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_white_color')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_card_blue')) .onClick(() => { if (this.controller != undefined) { this.controller.close() this.selectLevel = this.selectTemp } }) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .height('15%') .width('100%') } .width('48%') .height('54%') .backgroundColor($r('app.color.page_general_background')) .borderRadius($r('app.float.general_border_radius')) } } @CustomDialog struct WorkerAddDialog { @Link reportWorkers: UserInfo[] @Link addWorker: UserInfo // 所有工人 @State workerArray: UserInfo[] = [ {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, {userName: '王德发'}, {userName: '阿强'}, {userName: '包天'}, {userName: '毕想'}, {userName: '安海兵'}, ] // 字母对应的索引 @State alphabetMap: HashMap = new HashMap(); @State alphabetArray: string[] = [] scroller: Scroller = new Scroller() controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear() { // todo 查询所有工人（过滤掉已选择的） for (const worker of this.workerArray) { let str = pinyin(worker.userName, { mode: 'surname', toneType: 'none', pattern: 'first'}) worker.pinyinInitial = str.charAt(0).toUpperCase() } // 将工人按照姓名字母排序 this.workerArray = this.workerSort(this.workerArray) // 把第一个工人姓名的字母保存到对应的数组中 this.workerArray.unshift({userName: 'A', pinyinInitial: 'A'}) this.alphabetMap.set(this.workerArray[0].pinyinInitial, 0) this.alphabetArray.push(this.workerArray[0].pinyinInitial) let lastInitial: string = this.workerArray[0].pinyinInitial for (let index = 0; index < this.workerArray.length; index++) { if (this.workerArray[index].pinyinInitial !== lastInitial) { lastInitial = this.workerArray[index].pinyinInitial // 工人姓名字母发生变化，则在数组中插入 字母 保证渲染 this.workerArray.splice(index, 0, {userName: lastInitial, pinyinInitial: lastInitial}); this.alphabetMap.set(lastInitial, index) this.alphabetArray.push(lastInitial) } else { if (index === 0) { continue } this.workerArray[index].pinyinInitial = '@' } } } workerSort (arr: UserInfo[]) { if (arr.length <= 1) { return arr; } var medianIndex = Math.floor(arr.length / 2); // 找分界值索引 var medianValue: UserInfo[] = arr.splice(medianIndex, 1); // 把分界值从原数组中取出并删除 var left: UserInfo[] = []; // 比分界值小的，放左边 var right: UserInfo[] = []; // 比分界值大的，放右边 for (let i = 0; i < arr.length; i++) { if (arr[i].pinyinInitial < medianValue[0].pinyinInitial) { left.push(arr[i]) } else { right.push(arr[i]) } } return this.workerSort(left).concat(medianValue, this.workerSort(right)); // 最后进行拼接 }; build() { Column() { Row() { Text('参与人员') .fontSize($r('app.float.process_card_large_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('7.5%') .alignItems(VerticalAlign.Bottom) Row() { Row() { Row() { Image($r('app.media.user')) .height('31%') } .width('8%') .justifyContent(FlexAlign.End) TextInput({ placeholder: '员工名单搜索' }) .placeholderColor($r('app.color.text_input_placeholder_font_color')) .placeholderFont({size: $r('app.float.robot_set_font_size'), weight: FontWeight.Medium}) .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .textAlign(TextAlign.Start) .height('100%') .layoutWeight(1) .maxLength(100) .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.general_font_white_color')) .onChange((value: string) => { }) .onSubmit(() => { }) } .height('66.5%') .width('92%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.general_font_white_color')) } .height('11%') Row() { List({space:14, scroller: this.scroller}) { ForEach(this.workerArray, (item: UserInfo, index: number) => { ListItem() { if (this.alphabetMap.hasKey(item.pinyinInitial)) { Column() { Text(item.pinyinInitial) .fontSize($r('app.float.process_worker_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_white_color')) .opacity($r('app.float.general_font_opacity')) } .height('9%') .width('26.5%') .justifyContent(FlexAlign.Center) .backgroundColor($r('app.color.process_card_blue_color')) } else { Column() { Text(item.userName) .fontSize($r('app.float.process_card_middle_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .textAlign(TextAlign.Center) } .height('9%') .onClick(()=>{ this.addWorker = { userName: item.userName, workHoursRatio: 0 } this.controller.close() this.confirm() }) } } }) } .width('50%') AlphabetIndexer({ arrayValue: this.alphabetArray, selected: 0 }) .color($r('app.color.process_worker_font_color')) .selectedColor($r('app.color.process_worker_font_color')) // 选中项文本颜色 .selectedBackgroundColor($r('app.color.general_font_white_color')) // 选中项背景颜色 .usingPopup(false) // 是否显示弹出框 .onSelect((index: number) => { if (this.alphabetMap.hasKey(this.alphabetArray[index])) { this.scroller.scrollToIndex(this.alphabetMap.get(this.alphabetArray[index])) } }) } .width('92%') .justifyContent(FlexAlign.SpaceBetween) .layoutWeight(1) } .width('48%') .height('100%') .backgroundColor($r('app.color.page_general_background')) .borderRadius($r('app.float.general_border_radius')) } } @CustomDialog struct WorkHoursRatioDialog { @Link availableRatio: number workerRatio: number // 选择项（10%为一个间隔） selectItems: string[] = [] private select: number = 1 controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear() { console.log('testTag', JSON.stringify(this.availableRatio)) let radio = 10 while (radio <= this.availableRatio) { this.selectItems.push(radio + '%') if (this.workerRatio && this.workerRatio === radio) { this.select = this.selectItems.length - 1 } radio += 10 } console.log('testTag', JSON.stringify(this.workerRatio)) } build() { Column() { Row() { Text('用时占比') .fontSize($r('app.float.process_card_large_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('16%') Row() { TextPicker({ range: this.selectItems, selected: this.select}) .onChange((value: string, index: number) => { this.availableRatio = Number.parseInt(value) }) .width('40%') .height('100%') .backgroundColor($r('app.color.bottom_bar_background')) .borderImage({source:$r('app.media.text_picker_frame'), fill: true}) } .width('100%') .layoutWeight(1) .justifyContent(FlexAlign.Center) Row() { Button('取消') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.robot_set_card_blue')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_coord_card_grey')) .onClick(() => { this.controller.close() this.cancel() }) Row() .width('2.5%') Button('确认') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_white_color')) .width('32%') .height('50%') .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.robot_set_card_blue')) .onClick(() => { if (this.controller != undefined) { this.controller.close() this.confirm() } }) } .justifyContent(FlexAlign.Center) .height('24%') .width('100%') } .width('48%') .height('62%') .backgroundColor($r('app.color.page_general_background')) .borderRadius($r('app.float.general_border_radius')) } } class FaultType { id?: number faultName?: string } class FaultLevel { id?: number levelName?: string } class UserInfo { id?: number userName?: string // 工时占比 workHoursRatio?: number // 姓氏的拼音首字母 pinyinInitial?: string }