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

2025-06-19 18:03:14 +08:00 · 2025-06-19 18:03:14 +08:00 · 6ede5e69bb
commit 6ede5e69bb
parent 423845af7b
6 changed files with 161 additions and 127 deletions
--- a/entry/src/main/ets/pages/Index/BottomMessage.ets
+++ b/entry/src/main/ets/pages/Index/BottomMessage.ets
@ -19,7 +19,7 @@ export default struct BottomMessageComponent {
        Text('授权信息：' + (this.hasAuth ? "已授权" : "未授权")).textCommonStyle()
      }.gesture(
        GestureGroup(GestureMode.Exclusive,
-          TapGesture({ count: 5 })
+          TapGesture({ count: 3 })
            .onAction(() => {
              this.versionClick && this.versionClick()
            })
--- a/entry/src/main/ets/pages/Judge.ets
+++ b/entry/src/main/ets/pages/Judge.ets
@ -45,6 +45,7 @@ import { GetSyncData } from '../utils/table/Operation';
 import dayTs from '../utils/Date';
 import { CutArray, FormatTimeFlexible, GetCurrentTime } from '../utils/Common';
 import FileUtils from '../utils/FileUtils';
+import SignalTrajectoryDialog from './Judge/SignalTrajectoryDialog';


@Entry
@ -151,6 +152,12 @@ struct Index {
  @State isErrorMsgEnd: boolean = false
  @State disConnectErrorOpen: boolean = false
  public context = getContext(this) as common.UIAbilityContext;
+  // 信号查看弹窗
+  signalTrajectoryDialog: CustomDialogController = new CustomDialogController({
+    builder: SignalTrajectoryDialog(),
+    customStyle: true,
+    autoCancel: true
+  })
  private judge: Judge = new Judge(this)

  async aboutToDisappear() {
@ -939,7 +946,8 @@ struct Index {
              //   type: 1,
              //   name: 'button_media.wav'
              // })
-              this.signDisplayComVisible = true
+              // this.signDisplayComVisible = true
+              this.signalTrajectoryDialog.open()
            })

            Row() {
--- a/entry/src/main/ets/pages/Judge/SignalTrajectoryDialog.ets
+++ b/entry/src/main/ets/pages/Judge/SignalTrajectoryDialog.ets
@ -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"
+    })
+  }
+}
--- a/entry/src/main/ets/pages/SignDisplay.ets
+++ b/entry/src/main/ets/pages/SignDisplay.ets
@ -1,11 +1,50 @@
 import SignalDisplayComponent from './compontents/SignalDisplay';
+import router from '@ohos.router';
+import TabComponent from './compontents/Tab';

@Entry
@Component
-struct Index {
+struct SignDisplayPage {
+  @State active: number = 0
+
  build() {
-    Column() {
-      SignalDisplayComponent()
+    Flex({
+      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%')
    .height('100%')
--- a/entry/src/main/ets/pages/compontents/SignalDisplay.ets
+++ b/entry/src/main/ets/pages/compontents/SignalDisplay.ets
@ -1,4 +1,3 @@
-import router from '@ohos.router'
 import { GPSData, InitialPerLane, SignalData } from '../../mock'
 import { EnvironmentConfigurationType, PerLane, RoadDataType, SignalDataType, WorkerBackMessage } from '../../model'
 import apiJudgeSdk from 'libJudgeSdk.so'
@ -15,15 +14,13 @@ export default struct SignalDisplayComponent {
  // GPS信号
  @State GPSColum: Array<SignalDataType> = GPSData
  // tab选中
-  @State active: number = 0
+  @Prop active: number = 0
  // 原始数据
  @State rawData: string = "$GPS,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"
  // 车道信息
  @State laneSignal: PerLane = InitialPerLane
-  // 是否显示返回
-  @State isShowBack: boolean = true
-  onBackPress: () => void = () => {
-  }
+  // 是否现实轨迹
+  @State isShowTrajectory: boolean = false

  aboutToAppear(): void {
    DifferentialAndSignal.onMsg((data: string) => {
@ -91,41 +88,9 @@ export default struct SignalDisplayComponent {

  build() {
    Column() {
-      //   头部
      Flex({
-        alignItems: ItemAlign.Center,
-        justifyContent: FlexAlign.SpaceBetween
+        direction: FlexDirection.Column,
      }) {
-        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) {
          // GPS信号展示
@ -133,23 +98,20 @@ export default struct SignalDisplayComponent {
            data: this.signArr
          })
          //   车载信号以及车载坐标
-          Column() {
-            CarComponent({
-              data: this.vehicleSignal
-            })
-            CoordinateComponent({
-              data: this.GPSColum
-            })
-          }.margin({
-            top: 5
-          }).backgroundColor("#282828")
+          CarComponent({
+            data: this.vehicleSignal
+          })
+          CoordinateComponent({
+            data: this.GPSColum
+          })
+
        } else if (this.active === 1) {
          // 原始数据
          Column() {
            Text(this.rawData).fontSize(20).fontColor("#fff")
          }.backgroundColor("#282828").width("100%").height("100%")
        } else {
-          if (!this.isShowBack) {
+          if (this.isShowTrajectory) {
            // 轨迹查看
            Flex() {
              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
 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
 struct GPSComponent {
@ -435,7 +335,7 @@ struct GPSComponent {
        label: "改正数据长度*数据长度-基准站RTCM改正数类型",
        value: this.data[62] || "-"
      })
-    }.backgroundColor("#282828").width("100%")
+    }.backgroundColor("#282828").width("100%").height(140)
  }
 }

@ -453,7 +353,7 @@ struct CarComponent {
          value: item.value
        })
      })
-    }.width("100%")
+    }.width("100%").backgroundColor("#282828").height(490)
  }
 }

@ -464,9 +364,12 @@ struct CoordinateComponent {
  @State heightNum: number = 65

  build() {
-    Column() {
+    Flex({
+      direction: FlexDirection.Column,
+      alignItems: ItemAlign.Center
+    }) {
      Text("GPS坐标").fontColor("#FFB433").fontSize(20).margin({
-        top: 20
+        top: 10
      })
      Flex({
        wrap: FlexWrap.Wrap,
@ -480,12 +383,11 @@ struct CoordinateComponent {
            value: item.value
          })
        })
-      }.height("100%").width("100%")
+      }.width("100%")
    }
    .width("100%")
-    .height("100%")
+    .height(this.isItHorizontal ? 210 : "100%")
    .backgroundColor("#1A1A1A")
-    .justifyContent(FlexAlign.Center)
  }
 }

@ -494,13 +396,13 @@ struct blockComponent {
  @State label: string = "发送次数"
  @Prop value: string = "1"
  @State widthNum: number = 130
-  @State heightNum: number = 65
+  @State heightNum: number = 70
  @State color: string = "#FDF5E7"

  build() {
    Row() {
      Row() {
-        Text(this.label + ":").fontColor(this.color)
+        Text(this.label + ":").fontColor(this.color).fontSize(14)
      }.width(this.widthNum).justifyContent(FlexAlign.End)

      Row() {
@ -508,6 +410,9 @@ struct blockComponent {
      }.width(80).justifyContent(FlexAlign.Start).margin({
        left: 20
      })
-    }.height(this.heightNum).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)
+    }
+    .height(this.heightNum)
+    .justifyContent(FlexAlign.Center)
+    .alignItems(VerticalAlign.Center)
  }
 }
--- a/entry/src/main/ets/pages/compontents/Tab.ets
+++ b/entry/src/main/ets/pages/compontents/Tab.ets
@ -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" : "",
+    })
+  }
+}