1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15import { NavigationBar } from '../../../common/components/navigationBar' 16 17@Entry 18@Component 19struct DataPanelSample { 20 @State showType: string = 'Circle' 21 @State showWidth: string = '70%' 22 @State showHeight: string = '70%' 23 @State numMax: number = 100 24 @State dataList: number[] = [25, 25, 25, 25] 25 @State sum: number = this.dataList.reduce((prev, curr) => { 26 return prev + curr 27 }) 28 29 build() { 30 Column() { 31 NavigationBar({ title: 'DataPanel' }) 32 Scroll() { 33 Column({ space: FlexAlign.SpaceAround }) { 34 DataPanel({ values: this.dataList, max: 100, type: DataPanelType[this.showType] }) 35 .width(this.showWidth) 36 .height(this.showHeight) 37 } 38 .alignItems(HorizontalAlign.Center) 39 .width('100%') 40 .height('100%') 41 } 42 .height('35%') 43 .width('100%') 44 .padding(18) 45 46 Scroll() { 47 Column() { 48 Row({ space: FlexAlign.SpaceBetween }) { 49 Text('type') 50 .fontWeight(FontWeight.Medium) 51 .fontColor('#182431') 52 .opacity(0.5) 53 .fontSize('16fp') 54 55 Blank() 56 57 Column() { 58 Text(`${this.showType}`) 59 .fontSize('16fp') 60 .fontColor('#182431') 61 .fontWeight(FontWeight.Medium) 62 } 63 .bindMenu([ 64 { 65 value: 'Circle', 66 action: () => { 67 this.showType = 'Circle' 68 this.showWidth = '70%' 69 this.showHeight = '70%' 70 } 71 }, 72 { 73 value: 'Line', 74 action: () => { 75 this.showType = 'Line' 76 this.showWidth = '80%' 77 this.showHeight = '40' 78 } 79 }, 80 ]) 81 } 82 .alignItems(VerticalAlign.Center) 83 .width('100%') 84 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 85 .borderRadius(24) 86 .backgroundColor('#FFFFFF') 87 .margin({ top: 8 }) 88 89 Row({ space: FlexAlign.SpaceBetween }) { 90 Text('Max') 91 .fontWeight(FontWeight.Medium) 92 .fontColor('#182431') 93 .opacity(0.5) 94 .fontSize('16fp') 95 96 Blank() 97 98 Column() { 99 TextInput({ placeholder: '100' }) 100 .type(InputType.Number) 101 .placeholderColor(Color.Black) 102 .placeholderFont({ 103 size: 14, 104 weight: FontWeight.Normal, 105 family: 'sans-serif', 106 style: FontStyle.Normal 107 }) 108 .enterKeyType(EnterKeyType.Next) 109 .width('20%') 110 .fontSize('10fp') 111 .fontWeight(FontWeight.Regular) 112 .backgroundColor('#FFFFFF') 113 .fontColor('#182431') 114 .maxLength(20) 115 .onChange((value: string) => { 116 this.numMax = Number(value) 117 }) 118 } 119 } 120 .alignItems(VerticalAlign.Center) 121 .width('100%') 122 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 123 .borderRadius(24) 124 .backgroundColor('#FFFFFF') 125 .margin({ top: 8 }) 126 127 Row() { 128 Button('+', { type: ButtonType.Circle, stateEffect: true }) 129 .width(55) 130 .height(55) 131 .backgroundColor(0x317aff) 132 .fontSize('40fp') 133 .onClick((event: ClickEvent) => { 134 if (this.dataList.length < 9) { 135 this.dataList.push(0) 136 } else if (this.dataList.length == 9) { 137 AlertDialog.show({ message: '数据值列表，最大支持9个数据' }) 138 } 139 }) 140 } 141 .justifyContent(FlexAlign.Center) 142 .width('100%') 143 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 144 .borderRadius(24) 145 .backgroundColor('#FFFFFF') 146 .margin({ top: 8 }) 147 148 Column() { 149 ForEach(this.dataList, (item, index) => { 150 Row() { 151 Column() { 152 Text(this.dataList[index].toFixed(0)).fontSize('16fp') 153 }.width(20) 154 155 Slider({ 156 value: this.dataList[index], 157 min: 0, 158 max: this.numMax, 159 step: 1, 160 style: SliderStyle.OutSet 161 }) 162 .blockColor('#FFFFFF') 163 .trackColor('#182431') 164 .selectedColor('#007DFF') 165 .width('80%') 166 .showSteps(false) 167 .showTips(false) 168 .onChange((value: number, mode: SliderChangeMode) => { 169 this.dataList[index] = value 170 this.sum = this.dataList.reduce((prev, curr) => { 171 return prev + curr 172 }) 173 if (this.sum > this.numMax) { 174 this.dataList[index] = value - (this.sum - this.numMax) 175 } 176 }) 177 .width('86%') 178 Text('-') 179 .textAlign(TextAlign.Center) 180 .lineHeight(22) 181 .borderRadius(12) 182 .width(22) 183 .height(22) 184 .backgroundColor('#000000') 185 .fontColor('#FFFFFF') 186 .fontSize('22fp') 187 .onClick((event: ClickEvent) => { 188 this.dataList.splice(index, 1) 189 }) 190 } 191 .padding({ top: 30 }) 192 }) 193 } 194 .width('100%') 195 .padding({ left: '3%', right: '3%', top: 12, bottom: 12 }) 196 .borderRadius(24) 197 .backgroundColor('#FFFFFF') 198 .margin({ top: 8 }) 199 200 Row().height(50).width('100%').backgroundColor('#F1F3F5').margin({ top: 20 }) 201 }.width('100%') 202 } 203 .width('100%') 204 .height('60%') 205 .margin({ top: 24 }) 206 } 207 .alignItems(HorizontalAlign.Center) 208 .justifyContent(FlexAlign.Start) 209 .width('100%') 210 .height('100%') 211 .backgroundColor('#F1F3F5') 212 .padding({ left: '3%', right: '3%', bottom: 10 }) 213 } 214 215 pageTransition() { 216 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 217 .slide(SlideEffect.Bottom) 218 .opacity(0.0) 219 220 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 221 .slide(SlideEffect.Bottom) 222 .opacity(0.0) 223 } 224}