import { Logger } from 'comm_library';
import { DeviceInfoDBModel } from 'datastore';
import { HikNavBar } from 'uicomponents';
import { HomeNavPathConstants } from 'utils';
import { UISettingSection } from '../model/SetTheTypeModels';
@Builder
export function ConfigureBuilder() {
Configure()
}
@Entry
@Component
export struct Configure {
@Provide jumpIndex: number = 0
@State swiperIndex: number = 1;
@Provide('deviceInfoDatas') deviceInfoDatas: DeviceInfoDBModel[] = [];
@StorageLink('mainNavStack') mainNavStack: NavPathStack = new NavPathStack()
@State showAddDevice: boolean = true
@StorageLink('isAutoConnect') isAutoConnect: boolean = false
@StorageProp('Top') Top: number = 0
@StorageProp('Bottom') Bottom: number = 0
@State resolution: string = '1440P@25fps'
@State isWideDynamic: boolean = true
@State isCapture: boolean = true
@State isRecordingSound: boolean = true
@State isEmergencyRecording: boolean = true
@State speedWatermark: boolean = true
@State volumeLevel: number = 2
@State bootSound: boolean = true
@State sensitivityLevel: string = '中'
@State collisionAlarm: boolean = true
@State unit: string = '公制'
@State language: string = '中文'
@State sections: UISettingSection[] = [];
aboutToAppear(): void {
}
private jumpToResolutionSetting(): void {
this.mainNavStack?.pushPathByName(HomeNavPathConstants.Home_Pages_ResolutionSettingPage, {
} as Record<string, object>)
}
build() {
NavDestination() {
HikNavBar({
leftImage: $r('app.media.return'),
title: '设置',
leftImageClick: () => {
this.mainNavStack.pop()
}
})
//
Column() {
Scroll() {
Column() {
// 录像设置区域
SettingSection({ title: '录像设置' })
// 分辨率与帧率
SettingItem({
title: '分辨率与帧率',
type: 'arrow', // 箭头类型
textValue: this.resolution,
onAction: () => this.jumpToResolutionSetting()
})
// 宽动态
SettingItem({
title: '宽动态',
type: 'toggle', // 开关类型
toggleValue: this.isWideDynamic,
onChange: (value) => {
this.isWideDynamic = value as boolean
// 更新设备设置
}
})
// 抓拍关联录像
SettingItem({
title: '抓拍关联录像',
type: 'toggle', // 开关类型
description: '抓拍时自动生成一段关联视频',
toggleValue: this.isCapture,
onChange: (value) => {
this.isCapture = value as boolean
// 更新设备设置
}
})
// 录音设置
SettingItem({
title: '录像时录音',
type: 'toggle', // 开关类型
toggleValue: this.isRecordingSound,
onChange: (value) => {
this.isRecordingSound = value as boolean
// 更新设备设置
}
})
// 紧急录像
SettingItem({
title: '紧急录像',
type: 'toggle', // 开关类型
toggleValue: this.isEmergencyRecording,
description: '当车辆发生急刹车、急转弯及碰撞，将自动录制一份紧急视频',
onChange: (value) => {
this.isEmergencyRecording = value as boolean
// 更新设备设置
}
})
// 车速水印
SettingItem({
title: '车速水印',
type: 'toggle', // 开关类型
toggleValue: this.speedWatermark,
description: '数据来源于GPS，设备需内置或扩展GPS模块',
onChange: (value) => {
this.speedWatermark = value as boolean
// 更新设备设置
}
})
// 声音与显示区域
SettingSection({ title: '声音与显示' })
// 音量设置
SettingItem({
title: '音量',
type: 'slider',
sliderValue: this.volumeLevel,
min: 0,
max: 10,
step: 1,
onChange: (value) => {
this.volumeLevel = value as number
// 更新设备音量
}
})
// 开机音乐
SettingItem({
title: '开机音乐',
type: 'toggle', // 开关类型
toggleValue: this.bootSound,
onChange: (value) => {
this.bootSound = value as boolean
// 更新设备音量
}
})
// 停车监控区域
SettingSection({ title: '停车监控' })
// 震动监测
SettingItem({
title: '震动监测灵敏度',
showArrow: true,
type: 'arrow', // 箭头类型
textValue: this.sensitivityLevel
})
// 慧眼互联区域
SettingSection({ title: '慧眼互联' })
// 碰撞报警
SettingItem({
title: '停车监控碰撞报警',
type: 'toggle', // 开关类型
toggleValue: this.collisionAlarm,
onChange: (value) => {
this.collisionAlarm = value as boolean
// 更新设备
}
})
// 电子围栏
SettingItem({
title: '电子围栏',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 慧眼互联区域
SettingSection({ title: '慧眼智能' })
// ADAS
SettingItem({
title: 'ADAS',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 语音控制
SettingItem({
title: '语音控制',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 网络参数
SettingSection({ title: '网络参数' })
// Wi-Fi配置
SettingItem({
title: 'Wi-Fi配置',
showArrow: true,
type: 'arrow', // 箭头类型
})
// GPS
SettingItem({
title: 'GPS',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 移动数据
SettingItem({
title: '移动数据',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 系统管理
SettingSection({ title: '系统管理' })
// 关于设备
SettingItem({
title: '关于设备',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 存储管理
SettingItem({
title: '存储管理',
showArrow: true,
type: 'arrow', // 箭头类型
})
// 单位制式
SettingItem({
title: '单位制式',
showArrow: true,
type: 'arrow', // 箭头类型
textValue: this.unit
})
// 语言
SettingItem({
title: '语言',
showArrow: true,
type: 'arrow', // 箭头类型
textValue: this.language
})
SettingItem({
title: '恢复设备缺省设置',
showArrow: true,
type: 'arrow', // 箭头类型
})
SettingItem({
title: '重启设备',
showArrow: true,
type: 'arrow', // 箭头类型
})
}
}
.scrollable(ScrollDirection.Vertical)
.layoutWeight(1)
}
.width('100%')
.backgroundColor('#FFFFFF')
}
.hideTitleBar(true)
.padding({
bottom: this.Bottom + 60
})
}
}
// 设置项组件
interface ClickType {
onClick?: () => void;
onChange?: (value: boolean | number) => void;
}
@Component
struct SettingItem {
@Prop title: string // 左侧标题
private showArrow: boolean = false // 是否显示箭头
private hasToggle: boolean = false // 是否有开关
@Prop hasTitle: boolean = false
@Prop rightTitle: string = ''
private hasSlider: boolean = false // 是否有滑块
@Prop type: 'text' | 'toggle' | 'slider' | 'arrow' | 'none' = 'none' // 右侧内容类型
@Prop textValue?: string // 文本值
@Prop toggleValue?: boolean // 开关状态
@Prop sliderValue?: number // 滑块值
@Prop description: string = '' // 描述文本
private divider: boolean = true // 是否显示分隔线
@Prop min: number = 0 // 滑块最小值
@Prop max: number = 10 // 滑块最大值
@Prop step: number = 1 // 滑块步长
onChange?: (value: string | boolean | number) => void
@State isPressed: boolean = false;
// 回调函数处理
private onClickCallback: () => void = () => {}
private onChangeCallback: (value: string | boolean | number) => void = () => {}
// 事件委托对象
private eventDelegate: ClickType = {};
onAction?: () => void
// 设置点击事件回调
setOnAction(callback: () => void): SettingItem {
this.eventDelegate.onClick = callback;
return this;
}
// 设置变更事件回调
setChangeCallback(callback: (value: boolean | number) => void): SettingItem {
this.eventDelegate.onChange = callback;
return this;
}
// 处理点击事件
private handleClick() {
Logger.info('设置项被点击');
// 添加回调执行
this.onAction?.();
}
build() {
Column() {
// 主内容行
Row() {
// 左侧标题 (严格遵循设计规范)
Text(this.title)
.fontSize(14)
.lineHeight(20)
.textAlign(TextAlign.Start)
.layoutWeight(1)
.fontColor('#000000')
if (this.hasTitle) {
Text(this.rightTitle)
.fontSize(14)
.lineHeight(20)
.textAlign(TextAlign.Start)
.fontColor('#000000')
}
if (this.type === 'text') {
if (this.textValue !== undefined) {
Text(this.textValue)
.fontSize(14)
.fontColor('#666666')
}
} else if (this.type === 'toggle') {
if (this.toggleValue !== undefined) {
Toggle({ type: ToggleType.Switch, isOn: this.toggleValue })
.onChange(value => {
if (this.onChange) {
this.onChange(value)
}
})
}
} else if (this.type === 'slider') {
if (this.sliderValue !== undefined) {
Row() {
Slider({
value: this.sliderValue,
min: this.min,
max: this.max,
step: this.step
})
.onChange(value => {
if (this.onChange) {
this.onChange(value)
}
})
.layoutWeight(1)
Text(this.sliderValue.toString())
.width(24)
.margin({ left: 8 })
.textAlign(TextAlign.End)
}
.width('60%')
}
} else if (this.type === 'arrow') {
Row() {
// 如果有文本值则显示文本
if (this.textValue !== undefined) {
Text(this.textValue)
.fontSize(14)
.fontColor('#666666')
.margin({ right: 8 })
}
// 始终显示箭头图标
Image($r('app.media.public_icon_right_arrow'))
.width(16)
.height(16)
}
.padding({ right: 8 })
}
}
.height(56)
.padding({ left: 16, right: 16 })
// 描述文字
if (this.description !== '') {
Text(this.description)
.fontSize(12)
.textAlign(TextAlign.Start)
.width('100%')
.fontColor('#999999')
.padding({ left: 16, bottom: 8 })
}
// 分隔线
if (this.divider) {
Divider()
.strokeWidth(0.5)
.color('#EEEEEE')
.margin({ left: 16 })
}
}
.onClick(() => this.handleClick())
.width('100%')
}
}
// 分组标题组件
@Component
struct SettingSection {
@Prop title: string = '' // 分组标题
@Prop note?: string = '' // 分组说明
build() {
Column() {
Row() {
Text(this.title)
.fontSize(12)
.textAlign(TextAlign.Start)
.layoutWeight(1)
.padding({ top: 8, bottom: 8 })
if (this.note && this.note !== '') {
Text(this.note)
.fontSize(12)
.fontColor('#e1c4c2c2')
.padding({ top: 10, bottom: 8 })
}
}
.backgroundColor('#c4f6f5f5')
.padding({ left: 16, right: 16 })
.width('100%')
// 分隔线
Divider()
.strokeWidth(0.5)
.color('#EEEEEE')
.margin({ left: 16 })
}
.width('100%')
}
}
当前右侧数据是写死的，我需要把mock的数据渲染到右侧，请注意要把对应的类型写出来，不能出现any类型以及索引签名(indexed signatures)是被限制使用，json数据：// 消费类协议设置相关能力集
{
"msgId": 200,
"mainType": "setting",
"paramData": {
"resolution": {
"paramType": "radio",
"paramData": {
"content": [
"2160P@30FPS",
"2160P@25FPS",
"1440P@30FPS",
"1440P@25FPS",
"1080P@60FPS",
"1080P@30FPS",
"1080P@25FPS"
]
}
},
"captureLinkage": {
"paramType": "switch",
"paramData": {
"tips": "captureLinkageTips"
}
},
"microphone": {
"paramType": "switch"
},
"eventVideo": {
"paramType": "switch",
"paramData": {
"tips": "eventVideoTips"
}
},
"speedOsd": {
"paramType": "switch",
"paramData": {
"tips": "speedOsdTips"
}
},
"videoFlip": {
"paramType": "switch",
"paramData": {
"tips": "subVideoFlipTips"
}
},
"speakerVolume": {
"paramType": "slider",
"paramData": {
"content": {
"min": 0,
"max": 40,
"space": 1
}
}
},
"bootMusic": {
"paramType": "switch"
},
"standby": {
"paramType": "radio",
"paramData": {
"content": [
"livePreview",
"clock",
"auto off"
]
}
},
"parkingMonitoringEnable": {
"paramType": "switch"
},
"parkingSensitivity": {
"paramType": "radio",
"paramData": {
"content": [
"low",
"middle",
"high"
]
}
},
"parkingMonitoringTime": {
"paramType": "radio",
"paramData": {
"content": [
"unlimited",
"8h",
"12h",
"24h"
]
}
},
"collisionAlarm": {
"paramType": "switch"
},
"electricFence": {
"paramType": "standard",
"paramData": {
"detail": {
"alarmType": {
"paramType": "radio",
"content": [
"driveIn",
"driveOut",
"driveInOut"
]
},
"number": {
"paramType": "range",
"content": {
"maximum": 3,
"minimum": 0
}
},
"index": {
"paramType": "range",
"content": {
"maximum": 2,
"minimum": 0
}
},
"radius": {
"paramType": "range",
"content": {
"maximum": 100,
"minimum": 1
}
},
"name": {
"paramType": "stringEdit",
"content": {
"lengthMin": 1,
"lengthMax": 5
}
}
}
}
},
"carSearchAid": {
"paramType": "switch"
},
"ADAS": {
"paramType": "subClass",
"paramData": {
"guide": {
"paramType": "dialog",
"paramData": {
"content": {
"title": "ADAS Disclaimer Title",
"message": "ADAS Disclaimer",
"confirm": "confirm"
}
}
}
}
},
"frontCarStart": {
"paramType": "switch"
},
"greenlight": {
"paramType": "switch"
},
"speedLimit": {
"paramType": "switch"
},
"fcw": {
"paramType": "switch"
},
"pcw": {
"paramType": "switch"
},
"horizon": {
"paramType": "standard",
"paramData": {
"detail": {
"horizontal": {
"paramType": "range",
"content": {
"minimum": 50,
"maximum": 70,
"space": 1
}
}
}
}
},
"kwsControl": {
"paramType": "subClass"
},
"kwsCapture": {
"paramType": "switch",
"paramData": {
"tips": "kwsCaptureTips"
}
},
"kwsRecording": {
"paramType": "switch",
"paramData": {
"tips": "kwsRecordingTips"
}
},
"bluetooth": {
"paramType": "switch"
},
"Wi-Fi": {
"paramType": "standard",
"paramData": {
"detail": {
"ssid": {
"paramType": "display"
},
"password": {
"paramType": "password",
"content": {
"lengthMin": 8,
"lengthMax": 32
}
},
"band": {
"paramType": "radio",
"content": [
"2.4G",
"5G"
]
}
}
}
},
"GPS": {
"paramType": "subClass"
},
"positioningService": {
"paramType": "switch"
},
"satelliteInfo": {
"paramType": "standard"
},
"cellular": {
"paramType": "subClass"
},
"cellularEnable": {
"paramType": "switch"
},
"cloudBox": {
"paramType": "standard"
},
"about": {
"paramType": "standard"
},
"storage": {
"paramType": "standard",
"paramData": {
"detail": {
"status": {
"paramType": "display"
},
"type": {
"paramType": "display"
},
"totalCapacity": {
"paramType": "display",
"tips": "preallocated full memory"
}
}
}
},
"units": {
"paramType": "radio",
"paramData": {
"content": [
"metric",
"imperial"
]
}
},
"language": {
"paramType": "radio",
"paramData": {
"content": [
"EN",
"CN",
"CNT"
]
}
},
"reset": {
"paramType": "dialog",
"paramData": {
"content": {
"title": "reset",
"message": "resetReboot",
"confirm": "confirm",
"cancel": "cancel"
}
}
},
"reboot": {
"paramType": "dialog",
"paramData": {
"content": {
"title": "reboot",
"message": "reboot?",
"confirm": "confirm",
"cancel": "cancel"
}
}
},
"APN": {
"paramType": "standard",
"paramData": {
"detail": {
"enable": {
"paramType": "switch"
},
"apn": {
"paramType": "stringEdit",
"content": {
"lengthMin": 1,
"lengthMax": 32
}
},
"telephone": {
"paramType": "stringEdit",
"content": {
"lengthMin": 0,
"lengthMax": 32
}
},
"username": {
"paramType": "stringEdit",
"content": {
"lengthMin": 0,
"lengthMax": 32
}
},
"password": {
"paramType": "password",
"content": {
"lengthMin": 0,
"lengthMax": 32
}
},
"mtu": {
"paramType": "numberEdit",
"content": {
"minimum": 128,
"maximum": 16384,
"lengthMin": 3,
"lengthMax": 5
}
},
"band": {
"paramType": "radio",
"content": [
"autoSwitch",
"ADJUST",
"Force2G",
"Force3G",
"Force4G"
]
},
"verify": {
"paramType": "radio",
"content": [
"autoSelect",
"CHAP",
"PAP"
]
}
}
}
},
"DST": {
"paramType": "standard"
}
},
"rval": {
"code": 200
}
}
扫一扫
1746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
