RgvControlView.ets 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. @Component
  2. export struct InfoRow {
  3. label: string = ''
  4. @Prop value: string = ''
  5. valueColor?: Resource = $r('app.color.FFFFFF') // 默认白色,可覆盖
  6. build() {
  7. Row({ space: 5 }) {
  8. Circle()
  9. .width($r('app.float.virtualSize_3'))
  10. .height($r('app.float.virtualSize_3'))
  11. .fill($r('app.color.FFFFFF'))
  12. Text(this.label)
  13. .fontColor($r('app.color.FFFFFF'))
  14. .fontSize($r('app.float.fontSize_8'))
  15. Text(this.value)
  16. .fontColor(this.valueColor)
  17. .fontSize($r('app.float.fontSize_8'))
  18. }
  19. .width('100%')
  20. }
  21. }
  22. @Component
  23. export struct RgvButton {
  24. @Prop text: string = ''
  25. // 按钮图标资源
  26. @Prop icon: Resource = $r('app.media.rgv_turn_off')
  27. @State scaleValue : number = 1
  28. onButtonClick: () => void = () => {}
  29. build() {
  30. Button({type: ButtonType.Normal}) {
  31. Row() {
  32. Image(this.icon)
  33. .width('10%')
  34. .height('50%')
  35. .margin({ right: '5%' ,left:'10%'})
  36. Text(this.text)
  37. .fontSize($r('app.float.fontSize_12'))
  38. .fontColor($r('app.color.FFFFFF'))
  39. }.justifyContent(FlexAlign.Start).width('100%')
  40. }
  41. .width('100%')
  42. .height('100%')
  43. .backgroundColor($r('app.color.20FFFFFF'))
  44. .borderRadius($r('app.float.virtualSize_6_4'))
  45. .scale({ x: this.scaleValue, y: this.scaleValue })
  46. .animation({
  47. duration: 200,
  48. curve: Curve.Linear // 弹性曲线更生动
  49. })
  50. .onClick(() => {
  51. this.scaleValue = 0.9; // 点击时缩小
  52. setTimeout(() => {
  53. this.scaleValue = 1; // 0.2秒后恢复
  54. }, 200);
  55. if (this.onButtonClick) {
  56. this.onButtonClick()
  57. }
  58. })
  59. }
  60. }
  61. @Entry
  62. @Component
  63. export struct RobotSelector {
  64. private scrollerForList: Scroller = new Scroller()
  65. @State isListVisible: boolean = false
  66. @Prop robotsList: string[] = ["",""]
  67. // @Link selectRobotIndex: number
  68. @State selectedRobot: string =''
  69. build() {
  70. Column() {
  71. // 主体按钮
  72. Button({type:ButtonType.Normal}) {
  73. Row() {
  74. Text(this.selectedRobot)
  75. .fontColor($r('app.color.FFFFFF'))
  76. .fontSize($r('app.float.fontSize_12'))
  77. .margin({left:'5%'})
  78. Image($r('app.media.general_return'))
  79. .height($r('app.float.virtualSize_22_4'))
  80. .width($r('app.float.virtualSize_22_4'))
  81. .fillColor($r('app.color.FFFFFF'))
  82. .margin({left:'30%'})
  83. .rotate({ // 添加旋转属性
  84. angle: -90, // 逆时针旋转90度(负值表示逆时针)
  85. centerX: '50%', // 旋转中心X轴位置(相对宽度)
  86. centerY: '50%' // 旋转中心Y轴位置(相对高度)
  87. })
  88. }
  89. .width('100%')
  90. .justifyContent(FlexAlign.Start)
  91. }
  92. .width('100%')
  93. .height('25%')
  94. .backgroundColor($r('app.color.20FFFFFF')) // 灰色背景
  95. .borderRadius($r('app.float.virtualSize_6_4'))
  96. .onClick(() => {
  97. this.isListVisible = !this.isListVisible
  98. })
  99. if (this.isListVisible) {
  100. Column() {
  101. List({ space: 8, scroller: this.scrollerForList }) {
  102. ForEach(this.robotsList, (item: string) => {
  103. ListItem() {
  104. Column() {
  105. Text(item)
  106. .fontColor($r('app.color.FFFFFF'))
  107. .fontSize($r('app.float.fontSize_12'))
  108. }
  109. .padding(12)
  110. }
  111. .onClick(() => {
  112. this.selectedRobot = item
  113. this.isListVisible = false
  114. })
  115. })
  116. }. divider({
  117. strokeWidth: 1,
  118. color: $r('app.color.20FFFFFF')
  119. })
  120. }
  121. .width('100%')
  122. .borderRadius(8)
  123. .backgroundColor($r('app.color.20FFFFFF')) // 列表背景色
  124. .height('80%')
  125. .margin({top:'1%'})
  126. }
  127. }
  128. .width('100%')
  129. .height('100%')
  130. }
  131. }
  132. @Component
  133. export struct MoveControllerButton {
  134. @State scaleValue : number = 1
  135. @Prop icon: Resource = $r('app.media.rgv_turn_off')
  136. onButtonClick: () => void = () => {}
  137. build() {
  138. Row() {
  139. Button({ type: ButtonType.Normal }) {
  140. Image(this.icon)
  141. .width('50%')
  142. .height('50%')
  143. .objectFit(ImageFit.Contain)
  144. .fillColor($r('app.color.FFFFFF'))
  145. }
  146. .width('100%')
  147. .height('100%')
  148. .backgroundColor($r('app.color.20FFFFFF'))
  149. .borderRadius($r('app.float.virtualSize_6_4'))
  150. .scale({ x: this.scaleValue, y: this.scaleValue })
  151. .animation({
  152. duration: 200,
  153. curve: Curve.Linear // 弹性曲线更生动
  154. })
  155. .onClick(() => {
  156. this.scaleValue = 0.9; // 点击时缩小
  157. setTimeout(() => {
  158. this.scaleValue = 1; // 0.2秒后恢复
  159. }, 200);
  160. if (this.onButtonClick) {
  161. this.onButtonClick()
  162. }
  163. })
  164. }
  165. }
  166. }
  167. // 在文件顶部或单独组件文件中定义
  168. @CustomDialog
  169. export struct CommonConfirmDialog {
  170. @State title: string = '提示'
  171. @State message: string = '确定要执行此操作吗?'
  172. @State confirmText: string = '确定'
  173. @State cancelText: string = '取消'
  174. controller: CustomDialogController
  175. onConfirm: () => void = () => {}
  176. build() {
  177. Column() {
  178. // 标题
  179. Column(){
  180. Text(this.title)
  181. .fontColor($r('app.color.FFFFFF'))
  182. .fontSize($r('app.float.fontSize_15_2'))
  183. }.height('30%')
  184. .justifyContent(FlexAlign.Center)
  185. Column(){
  186. Text(this.message)
  187. .fontColor($r('app.color.30FFFFFF'))
  188. .fontSize($r('app.float.fontSize_12'))
  189. }.height('30%')
  190. .justifyContent(FlexAlign.Center)
  191. Column(){
  192. Divider()
  193. .vertical(false)
  194. .strokeWidth(1)
  195. .color($r('app.color.20FFFFFF'))
  196. Row(){
  197. Row(){
  198. Text('取消')
  199. .fontColor($r('app.color.60FFFFFF'))
  200. .fontSize($r('app.float.fontSize_12'))
  201. }
  202. .justifyContent(FlexAlign.Center)
  203. .width('50%')
  204. .onClick(() => this.controller.close())
  205. Divider()
  206. .vertical(true)
  207. .strokeWidth(1)
  208. .color($r('app.color.20FFFFFF'))
  209. Row(){
  210. Text('确认')
  211. .fontColor($r('app.color.007AFF'))
  212. .fontSize($r('app.float.fontSize_12'))
  213. }
  214. .justifyContent(FlexAlign.Center)
  215. .width('50%')
  216. .onClick(() => {
  217. this.onConfirm();
  218. this.controller.close();
  219. })
  220. }
  221. }
  222. .width('100%')
  223. .height('30%')
  224. // // 按钮区域
  225. // Flex({ justifyContent: FlexAlign.SpaceAround }) {
  226. // Button(this.cancelText, { type: ButtonType.Normal })
  227. // .width('45%')
  228. // .backgroundColor('#0A84FF')
  229. // .fontColor($r('app.color.FFFFFF'))
  230. // .onClick(() => this.controller.close())
  231. //
  232. // Button(this.confirmText, { type: ButtonType.Normal })
  233. // .width('45%')
  234. // .backgroundColor($r('app.color.0A84FF'))
  235. // .fontColor($r('app.color.FFFFFF'))
  236. // .onClick(() => {
  237. // this.onConfirm();
  238. // this.controller.close();
  239. // })
  240. // }
  241. // .width('100%')
  242. // .margin({ bottom: 20 })
  243. }
  244. .height(200)
  245. .width(400)
  246. .backgroundColor($r('app.color.2A2A2A'))
  247. .justifyContent(FlexAlign.End)
  248. .borderRadius(16)
  249. }
  250. }
  251. // 弹窗组件定义
  252. @CustomDialog
  253. export struct MoveDialog {
  254. @Link rgvEndX: number
  255. @Link rgvEndY: number
  256. controller: CustomDialogController
  257. onConfirm: () => void = () => {}
  258. build() {
  259. Column() {
  260. Column(){
  261. Text('终点移动')
  262. .fontColor($r('app.color.FFFFFF'))
  263. .fontSize($r('app.float.fontSize_15_2'))
  264. }.height('30%')
  265. .justifyContent(FlexAlign.Center)
  266. Text('设置终点坐标')
  267. .fontColor($r('app.color.FFFFFF'))
  268. .fontSize($r('app.float.fontSize_8'))
  269. .width('70%')
  270. .textAlign(TextAlign.Start)
  271. .margin({ bottom: '2%'})
  272. // 输入区域
  273. Column() {
  274. // 第一个X轴输入
  275. Row() {
  276. Text('X轴')
  277. .fontColor($r('app.color.30FFFFFF'))
  278. .fontSize($r('app.float.fontSize_12'))
  279. .width('15%')
  280. .textAlign(TextAlign.Center)
  281. .margin({top:'10%',bottom:'10%'})
  282. Divider()
  283. .vertical(true)
  284. .strokeWidth(1)
  285. .color($r('app.color.20FFFFFF'))
  286. .margin({top:'2%',bottom:'2%'})
  287. TextInput({ text: `${this.rgvEndX }`})
  288. .width('85%')
  289. .height('100%')
  290. .backgroundColor('#000000')
  291. .fontSize($r('app.float.fontSize_12'))
  292. .fontColor($r('app.color.FFFFFF'))
  293. .type(InputType.Number)
  294. .maxLength(2)
  295. .onChange((value: string) => {
  296. let num = Number(value);
  297. num = Math.max(1, Math.min(num, 9));
  298. this.rgvEndX = num;
  299. })
  300. }
  301. .backgroundColor($r('app.color.000000'))
  302. .width('70%')
  303. .height('40%')
  304. .borderRadius($r('app.float.virtualSize_11_6'))
  305. // 第二个X轴输入
  306. Row() {
  307. Text('Y轴')
  308. .fontColor($r('app.color.30FFFFFF'))
  309. .fontSize($r('app.float.fontSize_12'))
  310. .width('15%')
  311. .textAlign(TextAlign.Center)
  312. Divider()
  313. .vertical(true)
  314. .strokeWidth(1)
  315. .color($r('app.color.20FFFFFF'))
  316. .margin({top:'2%',bottom:'2%'})
  317. TextInput({ text: String(this.rgvEndY)})
  318. .width('85%')
  319. .height('100%')
  320. .backgroundColor('#000000')
  321. .fontSize($r('app.float.fontSize_12'))
  322. .fontColor($r('app.color.FFFFFF'))
  323. .type(InputType.Number)
  324. .maxLength(2)
  325. .onChange((value: string) => {
  326. let num = Number(value);
  327. num = Math.max(1, Math.min(num, 13));
  328. this.rgvEndY = num;
  329. })
  330. }
  331. .width('70%')
  332. .height('40%')
  333. .backgroundColor($r('app.color.000000'))
  334. .borderRadius($r('app.float.virtualSize_11_6'))
  335. }
  336. .justifyContent(FlexAlign.SpaceBetween)
  337. .height('35%')
  338. .margin({bottom:'10%'})
  339. // 按钮区域
  340. Column(){
  341. Divider()
  342. .vertical(false)
  343. .strokeWidth(1)
  344. .color($r('app.color.20FFFFFF'))
  345. Row(){
  346. Row(){
  347. Text('取消')
  348. .fontColor($r('app.color.60FFFFFF'))
  349. .fontSize($r('app.float.fontSize_12'))
  350. }
  351. .justifyContent(FlexAlign.Center)
  352. .width('50%')
  353. .onClick(() => this.controller.close())
  354. Divider()
  355. .vertical(true)
  356. .strokeWidth(1)
  357. .color($r('app.color.20FFFFFF'))
  358. Row(){
  359. Text('确认')
  360. .fontColor($r('app.color.007AFF'))
  361. .fontSize($r('app.float.fontSize_12'))
  362. }
  363. .justifyContent(FlexAlign.Center)
  364. .width('50%')
  365. .onClick(() => {
  366. this.onConfirm();
  367. this.controller.close();
  368. })
  369. }
  370. }
  371. .width('100%')
  372. .height('15%')
  373. }
  374. .height('40%')
  375. .width('30%')
  376. .backgroundColor($r('app.color.2A2A2A'))
  377. .justifyContent(FlexAlign.End)
  378. .borderColor($r('app.color.000000'))
  379. .borderWidth(1)
  380. .borderRadius($r('app.float.virtualSize_11_6'))
  381. }
  382. }