import CommonConstants from '../common/constants/CommonConstants' import RobotInfo from '../model/RobotInfo' import RobotSelfCheck from '../model/RobotSelfCheck' import RobotSelfCheckModel from '../model/database/RobotSelfCheckModel' import StorageInfo from '../model/StorageInfo' import TimeUtil from '../common/util/TimeUtil' import router from '@ohos.router' import { RobotPreviewComp } from '../common/component/RobotPreviewComp' import StorageConfig from '../viewmodel/StorageConfig' import JGRequest from '../common/util/request/Request' import StorageModel from '../model/database/StorageModel' import StorageSpace from '../model/StorageSpace' import StorageSpaceModel from '../model/database/StorageSpaceModel' @Component export struct RobotSetView { @State list: Resource[] = [$r('app.media.car_preview'),$r('app.media.car_preview'),$r('app.media.car_preview')] @State selectRobot : number = 1 @State robots: RobotInfo[] = CommonConstants.ROBOTS @State storages: StorageInfo[] = [] @State robotX: number = 0 @State robotY: number = 0 @State robotStorage: StorageInfo = new StorageInfo() // 视频播放 @State videoSrc: Resource = $rawfile('robot.mp4') videoController: VideoController = new VideoController() async aboutToAppear() { if (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].x) { this.robotX = this.robots[this.selectRobot].x } if (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].y) { this.robotY = this.robots[this.selectRobot].y } // 查询本地数据库,没有则从后台获取 this.storages = await StorageModel.getStorageList() if (!this.storages || this.storages.length <= 0) { // 查询后台数据库的线边库 let config: StorageConfig = await JGRequest.get("/api/v1/wms/position/houseConfigInfo/" + 1, {}) if (!config) { return } let storage = {storageName: config.houseName, xSize: config.xNum, ySize: config.yNum, defaultLayer: config.layer} as StorageInfo this.storages.push(storage) let storageId = await StorageModel.addStorage(config.houseName, config.xNum, config.yNum, config.layer) storage.id = storageId if (config.xNum && config.xNum > 0 && config.yNum && config.yNum > 0) { for (let y = 1; y <= config.yNum; y++) { for (let x = 1; x <= config.xNum; x++) { let space: StorageSpace = {storageId: storageId, x: x, y: y, enableState: 1, storageType: '', capacity: config.layer, canWay: 1, canPark: 0} await StorageSpaceModel.addStorageSpace(space) } } } } for (const storage of this.storages) { if (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].storageId && this.robots[this.selectRobot].storageId === storage.id) { this.robotStorage = storage } } } // 编辑机器人编码的弹窗控制器 editCodeController: CustomDialogController = new CustomDialogController({ builder: EditCodeDialog({ currentRobot: this.robots && this.robots[this.selectRobot] ? this.robots[this.selectRobot] : null, selectRobot : this.selectRobot, robots: this.robots }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) // 编辑机器人所属仓库的弹窗控制器 editStorageController: CustomDialogController = new CustomDialogController({ builder: EditStorageDialog({ selectRobot : this.selectRobot, robotStorage : this.robotStorage, robots: this.robots, storages: this.storages, }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) // 编辑机器人朝向弹窗控制器 editTowardController: CustomDialogController = new CustomDialogController({ builder: RobotTowardDialog({ currentRobot: this.robots && this.robots[this.selectRobot] ? this.robots[this.selectRobot] : null, selectRobot : this.selectRobot, robots: this.robots }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) // 编辑机器人坐标的弹窗控制器 editCoordController: CustomDialogController = new CustomDialogController({ builder: EditCoordinateDialog({ x: this.robotX, y: this.robotY, xSize: this.robotStorage ? this.robotStorage.xSize : 0, ySize: this.robotStorage ? this.robotStorage.ySize : 0, confirm: ()=> { if (this.robots && this.robots[this.selectRobot]) { let robot = Object.assign({}, this.robots[this.selectRobot]); robot.x = this.robotX robot.y = this.robotY this.robots[this.selectRobot] = robot } } }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) // 编辑机器人自检的弹窗控制器 selfCheckController: CustomDialogController = new CustomDialogController({ builder: SelfCheckDialog({ currentRobot: this.robots && this.robots[this.selectRobot] ? this.robots[this.selectRobot] : null, }), autoCancel: true, alignment: DialogAlignment.Center, // gridCount: 3, customStyle: true, }) build() { Column() { // 机器人预览图片和当前机器人状态 Row() { RobotPreviewComp({ list: $list, selectRobot: $selectRobot, robots: $robots, robotX: $robotX, robotY: $robotY, robotStorage: $robotStorage, storages: $storages, }) .width($r('app.float.robot_image_list_size')) Blank() Row() { Image($r('app.media.battery_level')) .width($r('app.float.card_image_size')) .height($r('app.float.card_image_size')) Text('98%') .fontSize($r('app.float.robot_state_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .width('10%') .justifyContent(FlexAlign.SpaceEvenly) Row() { Image($r('app.media.coordinate')) .width($r('app.float.card_image_size')) .height($r('app.float.card_image_size')) Text('x:' + (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].x ? this.robots[this.selectRobot].x : ' ') + 'y:' + (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].y ? this.robots[this.selectRobot].y : ' ')) .fontSize($r('app.float.robot_state_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .width('10%') .justifyContent(FlexAlign.SpaceEvenly) Row() { Image($r('app.media.robot_auto_mode')) .width($r('app.float.card_image_size')) .height($r('app.float.card_image_size')) Text('自动模式') .fontSize($r('app.float.robot_state_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .width('10%') .justifyContent(FlexAlign.SpaceEvenly) } .width('100%') .height('8%') // 机器人3D播放 Row() { Video({ src: this.videoSrc, // previewUri: this.previewUri, currentProgressRate: PlaybackSpeed.Speed_Forward_1_00_X, controller: this.videoController }) .width('100%') .height('100%') .autoPlay(true) .controls(false) .loop(true) .backgroundImage($r('app.media.set_robot_unity_background')) .backgroundImageSize({ width:'100%', height:'100%'}) // Image($r('app.media.robot_set_demo')) // .objectFit(ImageFit.Contain) } .width('100%') .height('56%') .justifyContent(FlexAlign.Center) // .backgroundImage($r('app.media.set_robot_unity_background')) // .backgroundImageSize(ImageSize.Auto) // 机器人信息展示 Row() { this.displayCard({cardName:'机器人', displayInfo: (this.robots && this.robots[this.selectRobot] ? this.robots[this.selectRobot].robotCode : ''), clickEvent: ()=>{ this.editCodeController.open() }}) this.displayCard({cardName:'所属仓库', displayInfo: (this.robotStorage && this.robotStorage.storageName ? this.robotStorage.storageName : ''), clickEvent: ()=>{ this.editStorageController.open() }}) this.displayCard({cardName:'机器人朝向', displayInfo: this.robots && this.robots[this.selectRobot] ? (this.robots[this.selectRobot].robotToward === 1 ? '+x轴方向' : (this.robots[this.selectRobot].robotToward === 2 ? '-x轴方向' : (this.robots[this.selectRobot].robotToward === 3 ? '+y轴方向' : '-y轴方向'))) : '', clickEvent: ()=>{ this.editTowardController.open() }}) } .width('100%') .height('18%') .justifyContent(FlexAlign.SpaceBetween) Row() { this.displayCard({cardName: '当前点位', displayInfo: ('x:' + (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].x ? this.robots[this.selectRobot].x : ' ') + 'y:' + (this.robots && this.robots[this.selectRobot] && this.robots[this.selectRobot].y ? this.robots[this.selectRobot].y : ' ')), clickEvent: ()=>{ this.editCoordController.open() }}) this.displayCard({cardName: '自检', displayInfo: '上次自检:' + (this.robots && this.robots[this.selectRobot] ? this.robots[this.selectRobot].lastSelfCheck : ''), clickEvent: ()=>{ this.selfCheckController.open() }}) Column() { Row() { Text('调试') .height('30%') .fontSize($r('app.float.card_title_font_size')) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Start) .padding({left: '6.6%', right: '4.5%'}) .width('100%') .onClick(()=>{ router.pushUrl({ url:'pages/RobotDebug' }) }) } .height('90%') .width('32%') .justifyContent(FlexAlign.Center) .borderRadius($r('app.float.general_border_radius')) .backgroundColor($r('app.color.general_card_background_color')) } .width('100%') .height('18%') .justifyContent(FlexAlign.SpaceBetween) } .width('100%') .width('100%') } @Builder displayCard($$: { cardName: string, displayInfo: string , clickEvent?: Function}) { Column() { Row() { Text($$.cardName) .height('30%') .fontSize($r('app.float.card_title_font_size')) .fontColor($r('app.color.general_font_color')) .fontWeight(FontWeight.Medium) .opacity($r('app.float.general_font_opacity')) } .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Start) .padding({left: '6.6%', right: '4.5%'}) .width('100%') Row() { Text($$.displayInfo) .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')) } .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Start) .padding({left: '6.6%', right: '4.5%'}) .width('100%') Row() { Image($r('app.media.subscript')) .height($r('app.float.card_subscript_size')) .width($r('app.float.card_subscript_size')) } .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.End) .padding({right: '4.5%'}) .width('100%') } .height('90%') .width('32%') .justifyContent(FlexAlign.Center) .borderRadius($r('app.float.general_border_radius')) .backgroundColor($r('app.color.general_card_background_color')) .onClick(()=>{ try { $$.clickEvent() } catch (err) { console.log('testTag', '---------err' + JSON.stringify(err)) } }) } } // 编辑机器人编码弹窗 @CustomDialog struct EditCodeDialog { robotCode: string = '' private currentRobot: RobotInfo selectRobot : number @Link robots: RobotInfo[] controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear() { if (this.currentRobot && this.currentRobot.robotCode) { this.robotCode = this.currentRobot.robotCode } } 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('25%') .alignItems(VerticalAlign.Center) Row() { TextInput({placeholder: '请输入机器人编号' }) .placeholderColor($r('app.color.text_input_placeholder_font_color')) .placeholderFont({size: $r('app.float.robot_set_font_size'), weight: FontWeight.Regular}) .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Regular) .fontColor($r('app.color.general_font_color')) .borderRadius($r('app.float.robot_set_radius')) .backgroundColor($r('app.color.general_font_white_color')) .onChange((value: string) => { this.robotCode = value }) } .height('25%') .width('80%') .justifyContent(FlexAlign.SpaceAround) .alignItems(VerticalAlign.Center) Blank() 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() let robot = Object.assign({}, this.robots[this.selectRobot]); robot.robotCode = this.robotCode this.robots[this.selectRobot] = robot console.log('testTag', '---------'+JSON.stringify(robot)) } }) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .height('40%') .width('100%') } .width('48%') .height('37%') .backgroundColor($r('app.color.page_general_background')) .justifyContent(FlexAlign.SpaceEvenly) .borderRadius($r('app.float.general_border_radius')) } } // 编辑机器人所属仓库弹窗 @CustomDialog struct EditStorageDialog { selectRobot : number @Link robotStorage: StorageInfo @Link robots: RobotInfo[] storages: StorageInfo[] 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: 20, initialIndex: 0 }) { ForEach(this.storages, (item: StorageInfo) => { ListItem() { Text(item.storageName) .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor(this.robotStorage && item.id === this.robotStorage.id ? $r('app.color.general_font_white_color') : $r('app.color.general_font_color')) .textAlign(TextAlign.Center) .width('71%') .height('12.5%') .borderRadius($r('app.float.general_border_radius')) .backgroundColor(this.robotStorage && item.id === this.robotStorage.id ? $r('app.color.robot_set_card_blue') : $r('app.color.robot_set_card_white')) .onClick(()=>{ let robot = Object.assign({}, this.robots[this.selectRobot]); robot.storageId = item.id this.robots[this.selectRobot] = robot this.robotStorage = item this.controller.close() }) } }) } .listDirection(Axis.Vertical) // 排列方向 // .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 .height('80%') .width('100%') .alignListItem(ListItemAlign.Center) } .width('48%') .height('74%') .backgroundColor($r('app.color.page_general_background')) .justifyContent(FlexAlign.SpaceEvenly) .borderRadius($r('app.float.general_border_radius')) } } // 编辑坐标弹窗 @CustomDialog struct EditCoordinateDialog { @Link private x : number @Link private y : number @State private xSize : number = 0 @State private ySize : number = 0 private xList : string[] = [] private yList : string[] = [] controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear() { if (this.xSize > 0) { for (let index = 1; index <= this.xSize; index++) { this.xList.push(index.toString()) } } else { this.xList.push('0') } if (this.ySize > 0) { for (let index = 1; index <= this.ySize; index++) { this.yList.push(index.toString()) } } else { this.yList.push('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('16%') .alignItems(VerticalAlign.Center) Row() { Text('X轴') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) Text('Y轴') .fontSize($r('app.float.robot_set_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) } .height('8%') .width('80%') .justifyContent(FlexAlign.SpaceAround) .alignItems(VerticalAlign.Center) Row() { TextPicker({ range: this.xList, selected: this.x && this.x > 0 ? this.x - 1 : 0}) .onChange((value: string, index: number) => { this.x = Number.parseInt(value) console.info('textTag', 'Picker item changed, value: ' + value + ', index: ' + index) }) .width('40%') .height('100%') .backgroundColor($r('app.color.bottom_bar_background')) .borderImage({source:$r('app.media.text_picker_frame'), fill: true}) TextPicker({ range: this.yList, selected: this.y && this.y > 0 ? this.y - 1 : 0}) .onChange((value: string, index: number) => { this.y = Number.parseInt(value) console.info('textTag', 'Picker item changed, value: ' + value + ', index: ' + index) }) .width('40%') .height('100%') .backgroundColor($r('app.color.bottom_bar_background')) .borderImage({source:$r('app.media.text_picker_frame'), fill: true}) } .height('52%') .width('100%') .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')) .justifyContent(FlexAlign.SpaceEvenly) .borderRadius($r('app.float.general_border_radius')) } } // 自检弹窗 @CustomDialog struct SelfCheckDialog { private currentRobot: RobotInfo controller?: CustomDialogController @State checkList: RobotSelfCheck[] = [] cancel: () => void = () => { } confirm: () => void = () => { } aboutToAppear() { console.log('testTag', '-----------自检弹窗' + JSON.stringify(this.currentRobot)) if (this.currentRobot && this.currentRobot.id) { RobotSelfCheckModel.getListByRobotId(this.currentRobot.id).then(checks => { this.checkList = checks }) } } 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() { ForEach(this.checkList, (item: RobotSelfCheck)=>{ ListItem(){ Row(){ Text(item.checkName + (item.checkStatus ? (item.checkStatus === 1 ? '正常' : '故障'): '')) .fontSize($r('app.float.set_card_font_size')) .fontWeight(FontWeight.Medium) .fontColor(item.checkStatus && item.checkStatus === 2 ? $r('app.color.robot_set_coord_card_red') : $r('app.color.general_font_color')) .opacity($r('app.float.general_font_opacity')) Text(item.checkTime) .fontSize($r('app.float.set_card_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.card_font_default_opacity')) } .width('100%') .padding({left: '3%', right: '3%'}) .justifyContent(FlexAlign.SpaceBetween) } }) } .height('65%') .width('95%') .alignListItem(ListItemAlign.Center) .borderRadius($r('app.float.general_border_radius')) .borderColor($r('app.color.general_border_color')) .borderWidth($r('app.float.general_border_width')) 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(() => { // todo 调用硬件接口 let currentTime: string = TimeUtil.getCurrentTime() RobotSelfCheckModel.addRobotSelfCheck(this.currentRobot.id, '自检开始', currentTime) let check = {id:0, robotId: this.currentRobot.id, checkName: '自检开始', checkTime: currentTime} this.checkList = [] this.checkList.push(check) console.log('testTag', '------'+JSON.stringify(check)) // 休眠 let fun = () => console.log('time out'); let sleep1= (time)=> new Promise((resolve)=>{ setTimeout(()=>{ currentTime = TimeUtil.getCurrentTime() RobotSelfCheckModel.addRobotSelfCheck(this.currentRobot.id, '检查车轮电机', currentTime).then(id =>{ RobotSelfCheckModel.updateStatus(id, 1, '') }) let check2 = {id:0, robotId: this.currentRobot.id, checkName: '检查车轮电机', checkTime: currentTime, checkStatus: 1} this.checkList.push(check2) let sleep2= (time)=> new Promise((resolve)=>{ currentTime = TimeUtil.getCurrentTime() setTimeout(()=>{ RobotSelfCheckModel.addRobotSelfCheck(this.currentRobot.id, '自检完成', currentTime) this.controller.close() },time) }) sleep2(500).then(fun); },time) }) sleep1(1000).then(fun); }) } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .height('20%') .width('100%') } .width('48%') .height('74%') .backgroundColor($r('app.color.page_general_background')) .justifyContent(FlexAlign.SpaceEvenly) .borderRadius($r('app.float.general_border_radius')) } } // 编辑机器人朝向弹窗 @CustomDialog struct RobotTowardDialog { @State robotToward: number = 0 private currentRobot: RobotInfo selectRobot : number @Link robots: RobotInfo[] controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} aboutToAppear(){ if (this.currentRobot && this.currentRobot.robotToward) { this.robotToward = this.currentRobot.robotToward } } 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('10%') .alignItems(VerticalAlign.Bottom) Row() { Text(this.currentRobot && this.currentRobot.robotCode ? this.currentRobot.robotCode : '') .fontSize($r('app.float.card_info_font_size')) .fontWeight(FontWeight.Medium) .fontColor($r('app.color.general_font_color')) .opacity($r('app.float.card_font_default_opacity')) } .height('5%') .width('100%') .justifyContent(FlexAlign.SpaceEvenly) Row() { if (this.robotToward === 1) { Image($r('app.media.robot_toward_x_forward')) .objectFit(ImageFit.Contain) } else if (this.robotToward === 2){ Image($r('app.media.robot_toward_x_negative')) .objectFit(ImageFit.Contain) } else if (this.robotToward === 3){ Image($r('app.media.robot_toward_y_forward')) .objectFit(ImageFit.Contain) } else if (this.robotToward === 4){ Image($r('app.media.robot_toward_y_negative')) .objectFit(ImageFit.Auto) } } .height('65%') .width('100%') Row() { this.setTowardCard(1, '+X轴') this.setTowardCard(2, '-X轴') this.setTowardCard(3, '+Y轴') this.setTowardCard(4, '-Y轴') } .height('10%') .width('88%') .borderRadius($r('app.float.general_border_radius')) .backgroundColor($r('app.color.robot_toward_set_card_background')) } .width('48%') .height('74%') .backgroundColor($r('app.color.page_general_background')) .borderRadius($r('app.float.general_border_radius')) } @Builder setTowardCard(index: number, name: string) { Row() { Stack() { if (this.robotToward === index) { Text() .backgroundColor($r('app.color.general_card_background_color')) .width('100%') .height('100%') .borderRadius($r('app.float.general_border_radius')) } Text(name) .fontSize($r('app.float.set_card_font_size')) .fontColor($r('app.color.general_font_color')) .opacity(this.robotToward === index ? $r('app.float.card_font_select_opacity') : $r('app.float.card_font_default_opacity')) } .width('100%') .height('100%') } .width('25%') .onClick(()=>{ this.robotToward = index console.log('testTag', '--------------' + index) if (this.currentRobot) { this.currentRobot.robotToward = index let robot = Object.assign({}, this.robots[this.selectRobot]); robot.robotToward = this.robotToward this.robots[this.selectRobot] = robot } }) } }