harmony_vehicle_terminal/entry/src/main/ets/pages/VideoConfig.ets

import { VideoConfigData } from '../mock'
import { VideoConfig, VideoItemType } from '../model'
import HeaderComponent from './compontents/Header'
import VideoConfigComponent from './VideoConfig/Config'

@Entry
@Component
struct VideoConfigPage {
  @State videoConfig: VideoConfig = VideoConfigData
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State openFlag: boolean = true
  // 是否自动播放
  @State isAutoPlay: boolean = true
  @State showControls: boolean = false
  // 弹窗
  dialogController: CustomDialogController = new CustomDialogController({
    builder: VideoConfigComponent({
      videoConfig: this.videoConfig
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true
  })
  // 视频控制器
  private controller1: VideoController = new VideoController()
  private controller2: VideoController = new VideoController()
  private controller3: VideoController = new VideoController()
  private controller4: VideoController = new VideoController()
  // 视频列表
  @State videoList: Array<VideoItemType> = [
    { td: 'td1', controller: this.controller1, src: '' },
    { td: 'td2', controller: this.controller2, src: '' },
    { td: 'td3', controller: this.controller3, src: '' },
    { td: 'td4', controller: this.controller4, src: '' },
  ]

  build() {
    Flex({
      justifyContent: FlexAlign.SpaceBetween,
      direction: FlexDirection.Column
    }) {
      HeaderComponent({
        shortLogo: false
      })
      Flex() {
        //   左边视频监控区域
        Flex({
          wrap: FlexWrap.Wrap
        }) {
          ForEach(this.videoList, (item: VideoItemType) => {
            Row() {
              Video({
                src: this.openFlag ?
                  `rtsp://${this.videoConfig.userName}:${this.videoConfig.pwd}@${this.videoConfig.ip}:${this.videoConfig.port}/h264/ch${Reflect.get(this.videoConfig,
                    'port')}/main/av_stream` : '',
                currentProgressRate: this.curRate,
                controller: item.controller
              })
                .muted(true)
                .autoPlay(this.isAutoPlay)
                .controls(this.showControls)
                .width("100%")
                .height("100%")
            }.width("50%").height("50%").border({
              color: "red",
              width: 1
            }).padding(20)
          })
        }.width("70%").height("100%").padding(40)

        // 右边视频配置区域

        Column() {
          // 设置
          ButtonComponent({
            type: "0",
            click: () => {
              this.dialogController.open()
            }
          })
          // 录像
          ButtonComponent({
            type: "1",
            click: () => {
              this.dialogController.open()
            }
          })
          // 停止
          ButtonComponent({
            type: "2",
            click: () => {
              this.dialogController.open()
            }
          })
          // 抓图
          ButtonComponent({
            type: "3",
            click: () => {
              this.dialogController.open()
            }
          })
        }
        .width("30%")
        .height("100%")
        .padding(100)
        .justifyContent(FlexAlign.End)
        .alignItems(HorizontalAlign.Center)
      }

    }
    .width("100%")
    .height("100%")
    .backgroundImage($r('app.media.index_bg'))
    .backgroundImageSize({
      width: "100%",
      height: "100%"
    })
  }
}

@Component
struct ButtonComponent {
  @State type: string = "0"
  click?: () => void
  // 使用映射表来存储类型与图片资源的对应关系
  private readonly imageResources: Record<string, Resource> = {
    "3": $r('app.media.zhuatu'),
    "2": $r('app.media.tingzhi'),
    "1": $r('app.media.luxiang'),
    "0": $r('app.media.shezhi')
  }

  build() {
    Image(this.imageResources[this.type])
      .width(500)
      .height(100)
      .objectFit(ImageFit.Contain)
      .margin({
        top: 20
      })
      .onClick(() => {
        this.click && this.click()
      })
  }
}