From 0c97f10bb84d918eef2f037661afb017b34d11af Mon Sep 17 00:00:00 2001 From: zhuzhihui7 Date: Fri, 28 Feb 2025 15:55:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BB=A3=E7=90=86?= =?UTF-8?q?=E7=BB=91=E5=AE=9A=20Signed-off-by:=20xushengjun=20<=20xushengj?= =?UTF-8?q?un001@chinasoftinc.com>?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/ets/pages/picker/DeviceSelect.ets | 269 ++++++++++++------ .../main/resources/base/element/string.json | 12 + .../main/resources/zh_CN/element/string.json | 12 + 3 files changed, 209 insertions(+), 84 deletions(-) diff --git a/display/entry/src/main/ets/pages/picker/DeviceSelect.ets b/display/entry/src/main/ets/pages/picker/DeviceSelect.ets index 6b014010e..bd99fdb26 100644 --- a/display/entry/src/main/ets/pages/picker/DeviceSelect.ets +++ b/display/entry/src/main/ets/pages/picker/DeviceSelect.ets @@ -22,13 +22,15 @@ import deviceInfo from '@ohos.deviceInfo'; import Constant from '../../common/constant'; import accessibility from '@ohos.accessibility'; import common from '@ohos.app.ability.common'; +import display from '@ohos.display'; let anmDuration: number = 800; let TAG = '[DeviceManagerUI:DeviceSelect]==>'; enum StatusType { Unbound = 0, TrustBinding = 1, - Binding = 2 + BBinding = 2, + BindingFailed = 3, } let customData: Record = { @@ -102,9 +104,8 @@ class BindTargetData { public deviceId: string = ''; } -@Entry -@Component -export struct Index { +@CustomDialog +export struct DeviceSelectCustomDialog { @State showPhone: Visibility = Visibility.Visible; @State showFlag: Visibility = Visibility.Visible; @State deviceSelectSession : UIExtensionContentSession | undefined = undefined; @@ -122,33 +123,20 @@ export struct Index { @State bundleName: string = ''; @State moduleName: string = ''; @State abilityName: string = ''; - @State isLandscape: boolean = true; + @State isLandscape: boolean = false; @State isListNum: number = 5; @State discCapability: string = 'oop'; @State networIdMatchLen: number = -1; listener = mediaquery.matchMediaSync('(orientation: landscape)'); dmInstance: distributedDeviceManager.DeviceManager | undefined = undefined; - context = getContext(this) as common.UIAbilityContext + context = getContext(this) as common.UIAbilityContext; bindParam: Record = {}; - scroller: Scroller = new Scroller() - - @Builder - CustomBuilder() { - Column() { - Stack() { - Image($r('app.media.iocn_phone_self')).width(54).draggable(false) - Image($r('app.media.phone')).width(30).draggable(false) - } - .width(54) - .height(54) - .borderRadius(54) - } - .width(68) - .height(92) - } + scroller: Scroller = new Scroller(); + controller?: CustomDialogController; cancel() { this.dmInstance!.stopDiscovering(); + this.showFlag = Visibility.Hidden try { console.log(TAG + 'terminateSelf'); this.deviceSelectSession = AppStorage.get('deviceSelectSession'); @@ -316,15 +304,47 @@ export struct Index { this.dmInstance = distributedDeviceManager.createDeviceManager(bundleName); } - calcPositionX(index: number): number { - let angle = -160 + (index * 160 / this.isListNum) + calcPositionX(index: number, distance?: number): number { + let angleOne = 160 / this.deviceList.length + let angle = 0 + let angleStart = 0 + if((this.deviceList.length & 1) == 1) { + angleStart = -90 + } else { + angleStart = -90 - (angleOne / 2) + } + if((index & 1) == 1) { + angle = angleStart + ((Math.floor(index / 2) + 1) * angleOne) + } else { + angle = angleStart - (Math.floor(index / 2) * angleOne) + } + let radian = angle * Math.PI / 180 + if(distance) { + return this.centerX + Math.cos(radian) * (this.radius - 48) + } return this.centerX + Math.cos(radian) * this.radius } - calcPositionY(index: number): number { - let angle = -160 + (index * 160 / this.isListNum) + calcPositionY(index: number, distance?: number): number { + let angleOne = 160 / this.deviceList.length + let angle = 0 + let angleStart = 0 + if((this.deviceList.length & 1) == 1) { + angleStart = -90 + } else { + angleStart = -90 - (angleOne / 2) + } + if((index & 1) == 1) { + angle = angleStart + ((Math.floor(index / 2) + 1) * angleOne) + } else { + angle = angleStart - (Math.floor(index / 2) * angleOne) + } + let radian = angle * Math.PI / 180 + if(distance) { + return this.centerY + Math.sin(radian) * (this.radius - 48) + } return this.centerY + Math.sin(radian) * this.radius } @@ -345,7 +365,7 @@ export struct Index { bindTarget(item: Data, index: number) { this.currentDevice = item - if (item.status == 0) { + if (item.status == 0 || item.status == 3 || item.status == 2) { try { this.bindParam = { 'bindType': 1, @@ -358,14 +378,26 @@ export struct Index { }; this.dmInstance!.bindTarget(item.device.deviceId, this.bindParam, (err: BusinessError, data: BindTargetData) => { + this.showPhone = Visibility.Visible if (err) { + this.deviceList[index].status = StatusType.BindingFailed + this.deviceList.push(new Data()) + this.deviceList.splice(this.deviceList.length - 1, 1) console.error('======bindTarget errCode:' + err.code + ',errMessage:' + err.message); + if(err.code == 0) { + promptAction.showToast({ message: $r('app.string.pin_code_failed') }) + } return; } }); } catch (err) { let e: BusinessError = err as BusinessError; console.error('bindTarget errCode:' + e.code + ',errMessage:' + e.message); + this.deviceList[index].status = StatusType.BindingFailed + this.deviceList.push(new Data()) + this.deviceList.splice(this.deviceList.length - 1, 1) + this.showPhone = Visibility.Visible + promptAction.showToast({ message: $r('app.string.connection_failed') }) } } else { try { @@ -391,15 +423,27 @@ export struct Index { } } + initRotation() { + let rotation: number = display.getDefaultDisplaySync().orientation + if (rotation == 0 || rotation == 2) { + this.isLandscape = false + this.isListNum = 5 + } else { + this.isLandscape = true + this.isListNum = 8 + } + } + aboutToAppear(): void { this.listener.on('change', this.onPortrait.bind(this)) this.initPickParms() + this.initRotation() this.deviceSelectSession = AppStorage.get('deviceSelectSession'); this.devListInfo(); } aboutToDisappear(): void { - this.listener.off('change', this.onPortrait) + this.listener.off('change', this.onPortrait.bind(this)) } build() { @@ -419,67 +463,81 @@ export struct Index { .onClick(() => { this.cancel() }) - }.justifyContent(FlexAlign.SpaceBetween) + } + .justifyContent(FlexAlign.SpaceBetween) .width('100%') if (this.deviceList.length <= this.isListNum) { ForEach(this.deviceList, (item: Data, index: number) => { Column() { Stack() { - Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_ball_online') : - $r('app.media.icon_ball')).width(54) - Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')).width(30) + Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_background_light') : $r('app.media.icon_background')).width(48).draggable(false) + Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')).width(26).draggable(false) } - .width(54) - .height(54) - .borderRadius(54) - - Text(item.device.deviceName) - .fontSize(12) - .textAlign(TextAlign.Center) + .width(48) + .height(48) + .borderRadius(48) + .onClick(() => { + if (item.status == StatusType.TrustBinding) { + this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName) + } + }) + .onDrop((event: DragEvent, extraParams?: string | undefined) => { + if(item.status == StatusType.TrustBinding){ + this.showPhone = Visibility.Visible + this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName) + }else{ + this.bindTarget(item, index) + } + console.info('======onDrop onDrop:' + JSON.stringify(event), JSON.stringify(extraParams)); + }) } - .width(68) - .height(92) .position({ - x: this.calcPositionX(index) - 34, - y: this.calcPositionY(index) - 46 + x: this.calcPositionX(index) - 24, + y: this.calcPositionY(index) - 24 }) - .onClick(() => { - if (item.status == StatusType.TrustBinding) { - this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName) + Column() { + Text(item.device.deviceName) + .fontSize(11) + .textAlign(TextAlign.Center) + .maxLines(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed ? 1 : 2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontColor('#000000') + if(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed) { + Text(item.status == StatusType.TrustBinding ? $r('app.string.trust') : $r('app.string.connection_failed')) + .fontSize(10) + .textAlign(TextAlign.Center) + .maxLines(item.status ? 1 : 2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontColor(item.status == StatusType.TrustBinding ? $r('sys.color.ohos_id_color_text_secondary') : '#E84026') } - }) - .onDrop((event: DragEvent, extraParams?: string | undefined) => { - this.showPhone = Visibility.Visible - this.bindTarget(item, index) - console.info('======onDrop onDrop:' + JSON.stringify(event), JSON.stringify(extraParams)); + } + .width(72) + .height(30) + .position({ + x: this.calcPositionX(index) - 36, + y: this.calcPositionY(index) + 32 }) }) Column() { Stack() { - Image($r('app.media.iocn_phone_self')).width(54).draggable(false) - Image($r('app.media.phone')).width(30).draggable(false) + Image($r("app.media.icon_background")).width(48).draggable(false) + Image($r("app.media.phone")).width(26).draggable(false) } - .width(54) - .height(54) - .borderRadius(54) - - Text($r('app.string.local_machine')) - .fontSize(12) - .textAlign(TextAlign.Center) + .width(48) + .height(48) + .borderRadius(48) + .margin({ bottom: 8 }) } - .width(68) - .height(92) .position({ - x: this.centerX - 34, - y: this.centerY - 46 + x: this.centerX - 24, + y: this.centerY - 24 }) .visibility(this.showPhone) .draggable(true) .onDragStart((event) => { this.showPhone = Visibility.Hidden console.info('======onDrop onDragStart:' + JSON.stringify(event)); - return this.CustomBuilder() }) .onDragEnter((event: DragEvent, extraParams?: string | undefined) => { this.showPhone = Visibility.Hidden @@ -494,27 +552,48 @@ export struct Index { .onDragEnd((event: DragEvent, extraParams?: string | undefined) => { console.info('======onDrop onDragEnd:' + JSON.stringify(event), JSON.stringify(extraParams)); }) + Column() { + Text($r("app.string.local_machine")) + .fontSize(11) + .textAlign(TextAlign.Center) + } + .width(72) + .height(30) + .visibility(this.showPhone) + .position({ + x: this.centerX - 36, + y: this.centerY + 32 + }) } else { Grid(this.scroller) { ForEach(this.deviceList, (item: Data, index: number) => { GridItem() { Column() { Stack() { - Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_ball_online') : - $r('app.media.icon_ball')).width(54).draggable(false) - Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')) - .width(30) - .draggable(false) + Image(item.status == StatusType.TrustBinding ? $r('app.media.icon_background_light') : $r('app.media.icon_background')).width(48).draggable(false) + Image(item.device.deviceType == 'PHONE' ? $r('app.media.phone') : $r('app.media.icon_pad')).width(26).draggable(false) } - .width(54) - .height(54) - .borderRadius(54) + .width(48) + .height(48) + .borderRadius(48) + .margin({ bottom: 8 }) Text(item.device.deviceName) - .fontSize(12) - .textAlign(TextAlign.Center) + .fontSize(11) + .textAlign(TextAlign.Center) + .maxLines(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed ? 1 : 2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontColor('#000000') + if(item.status == StatusType.TrustBinding || item.status == StatusType.BindingFailed) { + Text(item.status == StatusType.TrustBinding ? $r('app.string.trust') : $r('app.string.connection_failed')) + .fontSize(10) + .textAlign(TextAlign.Center) + .maxLines(item.status ? 1 : 2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .fontColor(item.status == StatusType.TrustBinding ? $r('sys.color.ohos_id_color_text_secondary') : '#E84026') + } } - .width(68) + .width(72) .height(92) .onClick(() => { if (item.status == StatusType.TrustBinding) { @@ -544,7 +623,7 @@ export struct Index { }) } .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) + .columnsGap(2) .rowsGap(10) .friction(0.6) .enableScrollInteraction(true) @@ -562,11 +641,11 @@ export struct Index { this.showPhone = Visibility.Visible console.info('======onDrop onDrop:' + JSON.stringify(event), JSON.stringify(extraParams)); }) - .width('100%') - .height('100%') + .width(this.isLandscape ? '70%' : '100%') + .height(this.isLandscape ? '90%' : '60%') .backgroundColor(Color.White) .borderRadius({ topLeft: 20, topRight: 20 }) - .padding({ bottom: 0, left: 10, right: 10 }) + .padding({ bottom : 8, left: 10, right: 10, top: 0 }) .onClick(() => { if (this.isAutoCancel) { this.cancel(); @@ -575,16 +654,38 @@ export struct Index { .onAreaChange((oldValue, newValue) => { this.centerX = Number(newValue.width) / 2 if (this.isLandscape) { - this.radius = Number(newValue.height) - 90 - this.centerY = Number(newValue.height) - 20 + this.radius = Number(newValue.height) - 132 + this.centerY = Number(newValue.height) - 60 } else { this.radius = Math.min(Number(newValue.width), Number(newValue.height)) * 0.4 this.centerY = this.radius + 90 } }) .visibility(this.showFlag) - .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration }) - .combine(TransitionEffect.translate({ y: 100 }))) + } +} + +@Entry +@Component +struct dialogPlusPage { + dialogController: CustomDialogController = new CustomDialogController({ + builder: DeviceSelectCustomDialog(), + autoCancel: false, + alignment: DialogAlignment.Bottom, + offset: { dx: 0, dy: 0 }, + customStyle: true, + maskColor: $r('sys.color.ohos_id_color_mask_thin') + }); + + aboutToAppear() { + console.log(TAG + 'aboutToAppear execute') + } + + aboutToDisappear() { + console.log(TAG + 'aboutToDisappear executed') + } + build() { + Column(this.dialogController.open()) } } \ No newline at end of file diff --git a/display/entry/src/main/resources/base/element/string.json b/display/entry/src/main/resources/base/element/string.json index c4de811ed..c6b35ed17 100644 --- a/display/entry/src/main/resources/base/element/string.json +++ b/display/entry/src/main/resources/base/element/string.json @@ -104,6 +104,18 @@ { "name":"dm_password_error", "value":"Incorrect password. Connection failed." + }, + { + "name": "trust", + "value": " Trusted" + }, + { + "name": "connection_failed", + "value": "Connection Failed" + }, + { + "name": "pin_code_failed", + "value": "PIN code failed and the connection failed" } ] } \ No newline at end of file diff --git a/display/entry/src/main/resources/zh_CN/element/string.json b/display/entry/src/main/resources/zh_CN/element/string.json index eee4e696c..213bfc948 100644 --- a/display/entry/src/main/resources/zh_CN/element/string.json +++ b/display/entry/src/main/resources/zh_CN/element/string.json @@ -108,6 +108,18 @@ { "name":"local_machine", "value":"本机" + }, + { + "name": "trust", + "value": "已信任" + }, + { + "name": "connection_failed", + "value": "连接失败" + }, + { + "name": "pin_code_failed", + "value": "PIN码验证不通过，连接失败" } ] } \ No newline at end of file -- Gitee From 87d4f8918f4b54bd9b036e61ff2a5de548a2e1a8 Mon Sep 17 00:00:00 2001 From: zhuzhihui7 Date: Fri, 28 Feb 2025 16:22:19 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BB=A3=E7=90=86?= =?UTF-8?q?=E7=BB=91=E5=AE=9A=20Signed-off-by:=20xushengjun=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- display/AppScope/app.json | 4 ++-- .../entry/src/main/ets/pages/picker/DeviceSelect.ets | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/display/AppScope/app.json b/display/AppScope/app.json index c4e9d0b90..bfc8e70ec 100644 --- a/display/AppScope/app.json +++ b/display/AppScope/app.json @@ -2,8 +2,8 @@ "app": { "bundleName": "com.ohos.devicemanagerui", "vendor": "example", - "versionCode": 1000035, - "versionName": "1.0.35", + "versionCode": 1000036, + "versionName": "1.0.36", "icon": "$media:app_icon", "label": "$string:app_name", "minAPIVersion": 10, diff --git a/display/entry/src/main/ets/pages/picker/DeviceSelect.ets b/display/entry/src/main/ets/pages/picker/DeviceSelect.ets index bd99fdb26..a6f236e60 100644 --- a/display/entry/src/main/ets/pages/picker/DeviceSelect.ets +++ b/display/entry/src/main/ets/pages/picker/DeviceSelect.ets @@ -29,7 +29,7 @@ let TAG = '[DeviceManagerUI:DeviceSelect]==>'; enum StatusType { Unbound = 0, TrustBinding = 1, - BBinding = 2, + Binding = 2, BindingFailed = 3, } @@ -483,7 +483,7 @@ export struct DeviceSelectCustomDialog { } }) .onDrop((event: DragEvent, extraParams?: string | undefined) => { - if(item.status == StatusType.TrustBinding){ + if(item.status == StatusType.TrustBinding) { this.showPhone = Visibility.Visible this.sendData(item.device.deviceId, item.device.networkId, item.device.deviceName) }else{ @@ -521,8 +521,8 @@ export struct DeviceSelectCustomDialog { }) Column() { Stack() { - Image($r("app.media.icon_background")).width(48).draggable(false) - Image($r("app.media.phone")).width(26).draggable(false) + Image($r('app.media.icon_background')).width(48).draggable(false) + Image($r('app.media.phone')).width(26).draggable(false) } .width(48) .height(48) @@ -553,7 +553,7 @@ export struct DeviceSelectCustomDialog { console.info('======onDrop onDragEnd:' + JSON.stringify(event), JSON.stringify(extraParams)); }) Column() { - Text($r("app.string.local_machine")) + Text($r('app.string.local_machine')) .fontSize(11) .textAlign(TextAlign.Center) } -- Gitee