页面

entry/src/main/ets/pages/control/Index.ets

@@ -33,7 +33,7 @@ struct Control {
   private menu: string[] = ["回到初始位置", "回到受理凭证位置", "回到充电位置", "自由控制"]
   private button: string[][] =
     [["采集初始位置", "回到初始位置"], ["采集受理凭证位置", "回到受理凭证位置"], ["采集充电位置", "回到充电位置"]]
-  private control: RebootControl = new RebootControl("")
+  private control: RebootControl = new RebootControl("", 0)
   private forward: (event: TouchEvent) => void = TouchEventWrapper(() => {
     this.control.forward()
   })

entry/src/main/ets/pages/control/utils/Control.ets

@@ -1,16 +1,16 @@
 import Logger from '../../../utils/Logger'
 import { TaskPool } from '../../../utils/TaskPool'
-import { WebsocketClient } from '../../../utils/WebsocketUtils'
+import { TcpClient } from '../../../utils/TcpUtils'
 import { VehicleBean, VehicleInfo } from './Model'
 
 const Tag = "RebootControl"
 
 export class RebootControl {
-  private service: WebsocketClient
+  private service: TcpClient
   private taskPool: TaskPool<boolean> = new TaskPool()
 
-  constructor(url: string) {
-    this.service = new WebsocketClient(url)
+  constructor(address: string, port: number) {
+    this.service = new TcpClient(address, port)
   }
 
   private addTask(data: string) {

entry/src/main/ets/pages/monitor/Index.ets

@@ -1,11 +1,112 @@
 import { Layout } from '../components/layout/Index'
+import { Column, Table } from '../components/table/Index'
+import { router } from '@kit.ArkUI'
+import { Title } from '../components/title/Index'
+import { CusButton } from '../components/button/Index'
+
+
+interface Test {
+  date: string
+  type: string
+  content: string
+  state: string
+  step: string
+  status: string
+}
 
 @Component
 @Entry
 struct LineMonitor {
+  @State columns: Array<Column> = []
+  @State data: Array<Test> = []
+  @State total: number = 500
+  @State loading: boolean = false
+  @State currentPage: number = 1
+  private pageSize: number = 10
+  private pageSizes: number[] = [10, 20, 30, 50]
+
+  @Builder
+  buildOperate(_row: Test) {
+    Image($rawfile("images/detail.png")).objectFit(ImageFit.Contain).width(80).height(30).onClick(() => {
+      // router.pushUrl({
+      //   url: "pages/alarm/Detail"
+      // })
+    })
+  }
+
+  aboutToAppear(): void {
+    this.columns = [
+      {
+        title: "序号",
+        prop: "index",
+        width: "60",
+        type: "index"
+      },
+      { title: "线路编号", prop: "date", width: 1.5, },
+      { title: "线路名称", prop: "type", width: 2, },
+      { title: "状态", prop: "content", width: 1, },
+      { title: "当前步骤", prop: "step", width: 1, },
+      {
+        title: "操作",
+        prop: "",
+        width: 2,
+        cell: (row: Test) => {
+          this.buildOperate(row)
+        }
+      },
+    ]
+    this.total = 500
+    this.getData()
+  }
+
+  getData() {
+    this.loading = true
+    setTimeout(() => {
+      this.data = new Array(this.pageSize).fill({
+        date: "2025-09-13",
+        type: `PAD001-${Math.random().toFixed(3)}`,
+        content: "车辆长时间未驶入查验区域",
+        state: "等待车辆进入",
+        step: "步骤一",
+        status: "2"
+      })
+      this.loading = false
+    }, 1000)
+  }
+
+
   build() {
     Column() {
       Layout({ mode: 2 }) {
+        Column() {
+          Row() {
+            Title({ title: "线路监控" })
+            CusButton({ normalImage: $rawfile("images/back.png"), style: { width: 120, height: 50 } })
+              .margin({ left: 24 }).onClick(() => {
+              router.back()
+            })
+          }.margin({ bottom: 18 }).padding({ left: 12, right: 12 })
+
+          Table({
+            loading: this.loading,
+            column: this.columns,
+            data: this.data,
+            currentPage: this.currentPage,
+            total: this.total,
+            pageSize: this.pageSize,
+            pageSizes: this.pageSizes,
+            onPageChange: (page) => {
+              this.currentPage = page
+              this.getData()
+            },
+            onPageSizeChange: (pageSize) => {
+              this.pageSize = pageSize
+            },
+            onPageSizesChange: (pageSizes) => {
+              this.pageSizes = pageSizes
+            }
+          }).layoutWeight(1).margin({ left: 12, right: 12 })
+        }.height("100%").width("100%").padding(18)
       }
     }.width("100%").height("100%")
   }

entry/src/main/ets/utils/TcpUtils.ets

@@ -1,5 +1,8 @@
 import { socket } from '@kit.NetworkKit';
 import { BusinessError } from '@kit.BasicServicesKit';
+import Logger from './Logger';
+
+const Tag = "TcpClient"
 
 export class TcpClient {
   private socket: socket.TCPSocket = socket.constructTCPSocketInstance()
@@ -14,6 +17,18 @@ export class TcpClient {
     this.deal = deal
   }
 
+  reconnect() {
+    return new Promise<void>((resolve, reject) => {
+      this.close().then(() => {
+        this.socket =  socket.constructTCPSocketInstance()
+        return this.connect()
+      }).then(resolve).catch((err: BusinessError) => {
+        Logger.error(Tag, JSON.stringify(err))
+        reject(err)
+      })
+    })
+  }
+
   connect(): Promise<void> {
     return new Promise<void>((resolve, reject) => {
       this.socket.connect({
@@ -44,9 +59,11 @@ export class TcpClient {
     this.callback = this.callback.filter(item => item != cb)
   }
 
-  send(data: string | ArrayBuffer): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      this.socket.send({ data }).then(resolve).catch((err: BusinessError) => {
+  send(data: string | ArrayBuffer): Promise<boolean> {
+    return new Promise<boolean>((resolve, reject) => {
+      this.socket.send({ data }).then(() => {
+        resolve(true)
+      }).catch((err: BusinessError) => {
         reject(err)
       })
     })

entry/src/main/ets/utils/WebsocketUtils.ets

@@ -25,7 +25,6 @@ export class WebsocketClient {
         reject(err)
       })
     })
-
   }
 
   connect(): Promise<void> {