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

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%")
  }
}