fix: 优化评判弹窗以及信号展示组件优化

This commit is contained in:
wangzhongjie 2025-06-19 18:03:14 +08:00
parent 423845af7b
commit 6ede5e69bb
6 changed files with 161 additions and 127 deletions

View File

@ -19,7 +19,7 @@ export default struct BottomMessageComponent {
Text('授权信息:' + (this.hasAuth ? "已授权" : "未授权")).textCommonStyle() Text('授权信息:' + (this.hasAuth ? "已授权" : "未授权")).textCommonStyle()
}.gesture( }.gesture(
GestureGroup(GestureMode.Exclusive, GestureGroup(GestureMode.Exclusive,
TapGesture({ count: 5 }) TapGesture({ count: 3 })
.onAction(() => { .onAction(() => {
this.versionClick && this.versionClick() this.versionClick && this.versionClick()
}) })

View File

@ -45,6 +45,7 @@ import { GetSyncData } from '../utils/table/Operation';
import dayTs from '../utils/Date'; import dayTs from '../utils/Date';
import { CutArray, FormatTimeFlexible, GetCurrentTime } from '../utils/Common'; import { CutArray, FormatTimeFlexible, GetCurrentTime } from '../utils/Common';
import FileUtils from '../utils/FileUtils'; import FileUtils from '../utils/FileUtils';
import SignalTrajectoryDialog from './Judge/SignalTrajectoryDialog';
@Entry @Entry
@ -151,6 +152,12 @@ struct Index {
@State isErrorMsgEnd: boolean = false @State isErrorMsgEnd: boolean = false
@State disConnectErrorOpen: boolean = false @State disConnectErrorOpen: boolean = false
public context = getContext(this) as common.UIAbilityContext; public context = getContext(this) as common.UIAbilityContext;
// 信号查看弹窗
signalTrajectoryDialog: CustomDialogController = new CustomDialogController({
builder: SignalTrajectoryDialog(),
customStyle: true,
autoCancel: true
})
private judge: Judge = new Judge(this) private judge: Judge = new Judge(this)
async aboutToDisappear() { async aboutToDisappear() {
@ -939,7 +946,8 @@ struct Index {
// type: 1, // type: 1,
// name: 'button_media.wav' // name: 'button_media.wav'
// }) // })
this.signDisplayComVisible = true // this.signDisplayComVisible = true
this.signalTrajectoryDialog.open()
}) })
Row() { Row() {

View File

@ -0,0 +1,15 @@
import SignalDisplayComponent from '../compontents/SignalDisplay'
@CustomDialog
export default struct SignalTrajectoryDialog {
private controller?: CustomDialogController
build() {
Row() {
SignalDisplayComponent()
}.width(1200).height(1200).border({
width: 1,
color: "red"
})
}
}

View File

@ -1,11 +1,50 @@
import SignalDisplayComponent from './compontents/SignalDisplay'; import SignalDisplayComponent from './compontents/SignalDisplay';
import router from '@ohos.router';
import TabComponent from './compontents/Tab';
@Entry @Entry
@Component @Component
struct Index { struct SignDisplayPage {
@State active: number = 0
build() { build() {
Column() { Flex({
SignalDisplayComponent() direction: FlexDirection.Column,
alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center
}) {
// 头部
Flex({
alignItems: ItemAlign.Center,
justifyContent: FlexAlign.SpaceBetween
}) {
Row() {
// 短logo
Image($r('app.media.shortLogo')).height(100).width(150).objectFit(ImageFit.Contain).margin({
left: 10,
right: 10
})
TabComponent({
isShowTrajectory: true,
activeIndex: this.active,
onchange: (index: number) => {
this.active = index
}
})
}
Row() {
// 返回按钮
Image($r('app.media.topB_back')).height(100).onClick(() => {
router.back()
})
}
}.width("100%").height(100)
SignalDisplayComponent({
active: this.active,
isShowTrajectory: true
})
} }
.width('100%') .width('100%')
.height('100%') .height('100%')

View File

@ -1,4 +1,3 @@
import router from '@ohos.router'
import { GPSData, InitialPerLane, SignalData } from '../../mock' import { GPSData, InitialPerLane, SignalData } from '../../mock'
import { EnvironmentConfigurationType, PerLane, RoadDataType, SignalDataType, WorkerBackMessage } from '../../model' import { EnvironmentConfigurationType, PerLane, RoadDataType, SignalDataType, WorkerBackMessage } from '../../model'
import apiJudgeSdk from 'libJudgeSdk.so' import apiJudgeSdk from 'libJudgeSdk.so'
@ -15,15 +14,13 @@ export default struct SignalDisplayComponent {
// GPS信号 // GPS信号
@State GPSColum: Array<SignalDataType> = GPSData @State GPSColum: Array<SignalDataType> = GPSData
// tab选中 // tab选中
@State active: number = 0 @Prop active: number = 0
// 原始数据 // 原始数据
@State rawData: string = "$GPS,,,,,,,,,,,,,,,,,,,,,,,,,,,,," @State rawData: string = "$GPS,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"
// 车道信息 // 车道信息
@State laneSignal: PerLane = InitialPerLane @State laneSignal: PerLane = InitialPerLane
// 是否显示返回 // 是否现实轨迹
@State isShowBack: boolean = true @State isShowTrajectory: boolean = false
onBackPress: () => void = () => {
}
aboutToAppear(): void { aboutToAppear(): void {
DifferentialAndSignal.onMsg((data: string) => { DifferentialAndSignal.onMsg((data: string) => {
@ -91,41 +88,9 @@ export default struct SignalDisplayComponent {
build() { build() {
Column() { Column() {
// 头部
Flex({ Flex({
alignItems: ItemAlign.Center, direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceBetween
}) { }) {
Row() {
// 短logo
Image($r('app.media.shortLogo')).height(100).width(150).objectFit(ImageFit.Contain).margin({
left: 10,
right: 10
})
TabComponent({
activeIndex: this.active,
onchange: (index: number) => {
this.active = index
}
})
}
Row() {
if (this.isShowBack) {
// 返回按钮
Image($r('app.media.topB_back')).height(100).onClick(() => {
router.back()
})
} else {
Image($rawfile('judge/close.png')).height(100).onClick(() => {
this.onBackPress()
})
}
}
}.width("100%").height(100)
Column() {
// 信号查看 // 信号查看
if (this.active === 0) { if (this.active === 0) {
// GPS信号展示 // GPS信号展示
@ -133,23 +98,20 @@ export default struct SignalDisplayComponent {
data: this.signArr data: this.signArr
}) })
// 车载信号以及车载坐标 // 车载信号以及车载坐标
Column() {
CarComponent({ CarComponent({
data: this.vehicleSignal data: this.vehicleSignal
}) })
CoordinateComponent({ CoordinateComponent({
data: this.GPSColum data: this.GPSColum
}) })
}.margin({
top: 5
}).backgroundColor("#282828")
} else if (this.active === 1) { } else if (this.active === 1) {
// 原始数据 // 原始数据
Column() { Column() {
Text(this.rawData).fontSize(20).fontColor("#fff") Text(this.rawData).fontSize(20).fontColor("#fff")
}.backgroundColor("#282828").width("100%").height("100%") }.backgroundColor("#282828").width("100%").height("100%")
} else { } else {
if (!this.isShowBack) { if (this.isShowTrajectory) {
// 轨迹查看 // 轨迹查看
Flex() { Flex() {
Column() { Column() {
@ -241,38 +203,6 @@ struct trajectoryComponent {
} }
} }
@Component
struct TabComponent {
@State activeIndex: number = 0
onchange: (index: number) => void = () => {
}
build() {
Row() {
TabItemComponent({
active: this.activeIndex === 0,
}).onClick(() => {
this.activeIndex = 0
this.onchange(0)
})
TabItemComponent({
label: "原始数据",
active: this.activeIndex === 1,
}).onClick(() => {
this.activeIndex = 1
this.onchange(1)
})
TabItemComponent({
label: "轨迹查看",
active: this.activeIndex === 2,
}).onClick(() => {
console.log("轨迹查看")
this.activeIndex = 2
this.onchange(2)
})
}
}
}
@Component @Component
struct LaneComponent { struct LaneComponent {
@ -327,36 +257,6 @@ struct LaneComponent {
} }
} }
@Component
struct TabItemComponent {
@State label: string = "信号查看"
@Prop active: boolean = false
build() {
Row() {
Text(this.label).fontColor(this.active ? "#ECAD5C" : "#DDCBAC").fontSize(20).fontWeight(FontWeight.Bold)
}
.width(180)
.height(80)
.borderRadius({
topLeft: 20,
topRight: 20,
})
.border({
width: { top: 1, left: 1, right: 1 },
color: this.active ? "#ECAD5C" : "#DDCBAC"
})
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.margin({
left: 10
})
.shadow({
radius: 10,
color: this.active ? "#ECAD5C" : "",
})
}
}
@Component @Component
struct GPSComponent { struct GPSComponent {
@ -435,7 +335,7 @@ struct GPSComponent {
label: "改正数据长度*数据长度-基准站RTCM改正数类型", label: "改正数据长度*数据长度-基准站RTCM改正数类型",
value: this.data[62] || "-" value: this.data[62] || "-"
}) })
}.backgroundColor("#282828").width("100%") }.backgroundColor("#282828").width("100%").height(140)
} }
} }
@ -453,7 +353,7 @@ struct CarComponent {
value: item.value value: item.value
}) })
}) })
}.width("100%") }.width("100%").backgroundColor("#282828").height(490)
} }
} }
@ -464,9 +364,12 @@ struct CoordinateComponent {
@State heightNum: number = 65 @State heightNum: number = 65
build() { build() {
Column() { Flex({
direction: FlexDirection.Column,
alignItems: ItemAlign.Center
}) {
Text("GPS坐标").fontColor("#FFB433").fontSize(20).margin({ Text("GPS坐标").fontColor("#FFB433").fontSize(20).margin({
top: 20 top: 10
}) })
Flex({ Flex({
wrap: FlexWrap.Wrap, wrap: FlexWrap.Wrap,
@ -480,12 +383,11 @@ struct CoordinateComponent {
value: item.value value: item.value
}) })
}) })
}.height("100%").width("100%") }.width("100%")
} }
.width("100%") .width("100%")
.height("100%") .height(this.isItHorizontal ? 210 : "100%")
.backgroundColor("#1A1A1A") .backgroundColor("#1A1A1A")
.justifyContent(FlexAlign.Center)
} }
} }
@ -494,13 +396,13 @@ struct blockComponent {
@State label: string = "发送次数" @State label: string = "发送次数"
@Prop value: string = "1" @Prop value: string = "1"
@State widthNum: number = 130 @State widthNum: number = 130
@State heightNum: number = 65 @State heightNum: number = 70
@State color: string = "#FDF5E7" @State color: string = "#FDF5E7"
build() { build() {
Row() { Row() {
Row() { Row() {
Text(this.label + ":").fontColor(this.color) Text(this.label + ":").fontColor(this.color).fontSize(14)
}.width(this.widthNum).justifyContent(FlexAlign.End) }.width(this.widthNum).justifyContent(FlexAlign.End)
Row() { Row() {
@ -508,6 +410,9 @@ struct blockComponent {
}.width(80).justifyContent(FlexAlign.Start).margin({ }.width(80).justifyContent(FlexAlign.Start).margin({
left: 20 left: 20
}) })
}.height(this.heightNum).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center) }
.height(this.heightNum)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
} }
} }

View File

@ -0,0 +1,67 @@
@Component
export default struct TabComponent {
@State activeIndex: number = 0
@State isShowTrajectory: boolean = false
onchange: (index: number) => void = () => {
}
build() {
Row() {
TabItemComponent({
active: this.activeIndex === 0,
}).onClick(() => {
this.activeIndex = 0
this.onchange(0)
})
TabItemComponent({
label: "原始数据",
active: this.activeIndex === 1,
}).onClick(() => {
this.activeIndex = 1
this.onchange(1)
})
if (this.isShowTrajectory) {
TabItemComponent({
label: "轨迹查看",
active: this.activeIndex === 2,
}).onClick(() => {
console.log("轨迹查看")
this.activeIndex = 2
this.onchange(2)
})
}
}
}
}
@Component
struct TabItemComponent {
@State label: string = "信号查看"
@Prop active: boolean = false
build() {
Row() {
Text(this.label).fontColor(this.active ? "#ECAD5C" : "#DDCBAC").fontSize(20).fontWeight(FontWeight.Bold)
}
.width(180)
.height(80)
.borderRadius({
topLeft: 20,
topRight: 20,
})
.border({
width: { top: 1, left: 1, right: 1 },
color: this.active ? "#ECAD5C" : "#DDCBAC"
})
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.margin({
left: 10
})
.shadow({
radius: 10,
color: this.active ? "#ECAD5C" : "",
})
}
}