subject-two/entry/src/main/ets/pages/compontents/SignDisplayCom.ets

import router from '@ohos.router';
import UdpClient from '../../common/utils/UdpClient';
import FileLog from '../judgeSDK/utils/fileLog';
import RealTime from '../compontents/judge/RealTime';
import { GPSData, SignalData, RoadData } from '../../mock';
import { SignalDataType } from '../../model';

@Component
export default struct SignDisplayCom {
  @State showBack: boolean = false
  @State scaleNum: number = 1
  @State msg: string = ''
  @State signArr: Array<any> = []
  @State sjxhColum: Array<SignalDataType> = SignalData
  @State GPSColum: Array<SignalDataType> = GPSData
  @State ratio: number = 850 / 960
  @State gpsActive: number = 1
  @Prop active: number = 0
  @State msgStr: string = ''
  @State interval: number = 0
  @State @Watch('outClick') outFlag: boolean = false;
  @State url: string = ''
  private timer = null
  private udpClient: UdpClient = null
  private FileLog: FileLog
  private vocObj = null;

  constructor() {
    super()
  }

  build() {
    Column() {
      Column() {
        Flex({ justifyContent: FlexAlign.SpaceBetween }) {
          Row() {
            Image($r('app.media.signal_logoS')).width(30 * this.ratio).height(24 * this.ratio)
            Row() {
              Text('PLC信号').fontColor(this.active == 0 ? '#FFAD33' : '#e7cba3').fontSize(20 * this.ratio)
            }
            .backgroundImage(this.active == 0 ? $r('app.media.signal_tabS') : $r('app.media.signal_tab'))
            .width(144 * this.ratio)
            .height(50 * this.ratio)
            .backgroundImageSize({ width: '100%', height: '100%' })
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.active = 0

            })

            if (!this.showBack) {
              Row() {
                Text('实时轨迹').fontColor(this.active == 1 ? '#FFAD33' : '#e7cba3').fontSize(20 * this.ratio)
              }
              .backgroundImage(this.active == 1 ? $r('app.media.signal_tabS') : $r('app.media.signal_tab'))
              .width(144 * this.ratio)
              .height(50 * this.ratio)
              .backgroundImageSize({ width: '100%', height: '100%' })
              .justifyContent(FlexAlign.Center)
              .onClick(() => {
                this.active = 1
                // this.vocObj.playAudio({
                //   type: 1,
                //   name: 'media_button.wav'
                // })
              })
            }

            Row() {
              Text('原始数据').fontColor(this.active == 2 ? '#FFAD33' : '#e7cba3').fontSize(20 * this.ratio)
            }
            .backgroundImage(this.active == 2 ? $r('app.media.signal_tabS') : $r('app.media.signal_tab'))
            .width(144 * this.ratio)
            .height(50 * this.ratio)
            .backgroundImageSize({ width: '100%', height: '100%' })
            .justifyContent(FlexAlign.Center)
            .onClick(() => {
              this.active = 2
            })
          }

          Row() {
            if (this.showBack) {
              Image($r('app.media.topB_back')).height('12.2%')
                .onClick(() => {
                  router.back()
                  // this.url='back'
                  // this.vocObj.playAudio({
                  //   type: 1,
                  //   name: 'media_button.wav'
                  // })
                  this.outFlag = true
                })
            }
          }
        }.width(936 * this.ratio)

        Column() {
          Flex({ direction: FlexDirection.Column }) {
            Row() {
              Text("发送次数：" + this.signArr[49] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('25%')
                .textAlign(TextAlign.Start)
              Text("固件版本：" + this.signArr[54] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('30%')
                .textAlign(TextAlign.Start)
              Text("GPS数据次数/数据长度：" + this.signArr[59] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .textAlign(TextAlign.Start)
            }.justifyContent(FlexAlign.Start).padding({ left: 10 * this.ratio }).margin({ top: 8 * this.ratio })

            Row() {
              Text("方向盘类型：" + this.signArr[50] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('25%')
                .textAlign(TextAlign.Start)
              Text("按键数值：" + this.signArr[55] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('30%')
                .textAlign(TextAlign.Start)
              Text("GPS错误次数：" + this.signArr[60] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .textAlign(TextAlign.Start)
            }.justifyContent(FlexAlign.Start).padding({ left: 10 * this.ratio }).margin({ top: 8 * this.ratio })

            Row() {
              Text("汽车类型：" + this.signArr[51] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('25%')
                .textAlign(TextAlign.Start)
              Text("GPS板卡类型：" + this.signArr[56] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('30%')
                .textAlign(TextAlign.Start)
              Text("已工作时长/设定的工作时长：" + this.signArr[61] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .textAlign(TextAlign.Start)
            }.justifyContent(FlexAlign.Start).padding({ left: 10 * this.ratio }).margin({ top: 8 * this.ratio })

            Row() {
              Text("接口心跳：" + this.signArr[52] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('25%')
                .textAlign(TextAlign.Start)
              Text("GPS板卡软件版本：" + this.signArr[57] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('30%')
                .textAlign(TextAlign.Start)
              Text("改正数数据长度*数据长度-基准站RTCM改正数类型：" + this.signArr[62] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .textAlign(TextAlign.Start)
            }.justifyContent(FlexAlign.Start).padding({ left: 10 * this.ratio }).margin({ top: 8 * this.ratio })

            Row() {
              Text("本机IP：" + this.signArr[53] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('30%')
                .textAlign(TextAlign.Start)
              Text("改正数次数/改正数大小：" + this.signArr[58] || '0')
                .fontColor('#FFF5E5')
                .fontSize(14 * this.ratio)
                .width('30%')
                .textAlign(TextAlign.Start)
            }.justifyContent(FlexAlign.Start).padding({ left: 10 * this.ratio }).margin({ top: 8 * this.ratio })
          }
          .backgroundColor('#282828')
          .width(this.ratio * 890)
          .height(136 * this.ratio)
          .margin({ left: 0 * this.ratio, top: 15 * this.ratio })

          Row() {
            Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap }) {
              ForEach(this.sjxhColum, (item) => {
                Column() {
                  Text(`${item.key}:${item.value}`)
                    .fontSize(14 * this.ratio)
                    .lineHeight(25 * this.ratio)
                    .fontColor('#fff')
                }.height(25 * this.ratio).justifyContent(FlexAlign.Start).width('16%')
              })
            }

            Column() {
              Text('GPS坐标:').fontColor('#FFFFFF').fontSize(14 * this.ratio).margin({ bottom: 10 * this.ratio })
              Text('状态:' + this.signArr[83]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('收星数:' + this.signArr[84]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('海拔高:' + this.signArr[85]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('高度差:' + this.signArr[86]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('龄期:' + this.signArr[87]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('维度因子:' + this.signArr[88])
                .fontColor('#FFB433')
                .fontSize(14 * this.ratio)
                .height(18 * this.ratio)
              Text('经度因子:' + this.signArr[89])
                .fontColor('#FFB433')
                .fontSize(14 * this.ratio)
                .height(18 * this.ratio)
              Text('航向角:' + this.signArr[90]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('俯仰角:' + this.signArr[91]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('航向角状态-收星数:' + this.signArr[92])
                .fontColor('#FFB433')
                .fontSize(14 * this.ratio)
                .height(18 * this.ratio)
              Text('年月日:' + this.signArr[93]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('时分秒:' + this.signArr[94]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('经度:' + this.signArr[95]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('纬度:' + this.signArr[96]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
              Text('速度:' + this.signArr[97]).fontColor('#FFB433').fontSize(14 * this.ratio).height(18 * this.ratio)
            }
            .backgroundColor('#1A1A1A')
            .width(138 * this.ratio)
            .height(300 * this.ratio)
            .position({ y: 0 * this.ratio, x: 750 * this.ratio })
          }.backgroundColor('#282828').width(this.ratio * 890).height(308 * this.ratio).margin({ top: 3 * this.ratio })
        }
        .width(936 * this.ratio)
        .height(480 * this.ratio)
        .margin({ left: 10 * this.ratio })
        .padding({ left: 10 * this.ratio, right: 10 * this.ratio })
        .backgroundImage($r('app.media.km_open'))
        .backgroundImageSize({ width: '100%', height: '100%' })
        .visibility(this.active == 0 ? Visibility.Visible : Visibility.None)

        Row() {
          Flex({ direction: FlexDirection.Column }) {
            Row() {
              Row() {
                Text('GPS').fontColor(this.gpsActive == 0 ? '#2D3C5A' : '#fff')
              }
              .width(316 / 2 * this.ratio)
              .height(24 * this.ratio)
              .backgroundColor(this.gpsActive == 0 ? '#fff' : '#1A1A1A')
              .margin({ left: 10 * this.ratio, right: 10 * this.ratio })
              .justifyContent(FlexAlign.Center)
              .onClick(() => {
                this.gpsActive = 0
              })

            }.margin({ top: 10 * this.ratio })

            Flex({ direction: FlexDirection.Column }) {
              ForEach(this.GPSColum, (item) => {
                Column() {
                  Text(`${item.key}:${item.value}`)
                    .fontSize(12 * this.ratio)
                    .lineHeight(20 * this.ratio)
                    .fontColor('#fff')
                }.height(20 * this.ratio).justifyContent(FlexAlign.Start).width('100%')
              })
            }
          }
          .width(168 * this.ratio)
          .height(380 * this.ratio)
          .backgroundColor('#282828')
          .margin({ top: 6 * this.ratio, left: 10 * this.ratio })

          Row() {
            RealTime({
              widthNumber: Math.floor(550 * this.ratio),
              heightNumber: Math.floor(380 * this.ratio),
            })
          }
          .width(550 * this.ratio)
          .height(380 * this.ratio)
          .backgroundColor('#1A1A1A')
          .margin({ top: 6 * this.ratio,})

        }
        .width(936 * this.ratio)
        .height(420 * this.ratio)
        .margin({ left: 10 * this.ratio })
        .padding({ left: 10 * this.ratio, right: 10 * this.ratio })
        .backgroundImage($r('app.media.km_open'))
        .backgroundImageSize({ width: '100%', height: '100%' })
        .visibility(this.active == 1 ? Visibility.Visible : Visibility.None)
      }
      .width('100%')
      .height('100%')
    }

  }

  aboutToDisappear() {
    clearInterval(this.interval)
  }

  aboutToAppear() {
    this.ratio = this.ratio * (this.scaleNum || 1);
    const that = this
    const {showBack,getSignal} = this


    if (showBack) {
      this.ratio = 1.4
      globalThis.udpClient.onMessage_1((msg) => {
        console.log('msgmsg', msg)
        if (msg) {
          getSignal(msg)
        }
      })
    } else {
      clearInterval(globalThis.signalTimer)
      globalThis.signalTimer = setInterval(() => {
        const msgStr = globalThis.msgStr
        if (msgStr) {
          getSignal(msgStr)

        }
      }, 200)
    }
  }

  onPageShow() {
    console.info('SURENJUN', 123)

    const getSignal = this.getSignal;
    const that = this
    const showBack = this.showBack;
    if (showBack) {
      globalThis.udpClient.onMessage_1((msg) => {
        getSignal(msg)
      })
    } else {
      clearInterval(globalThis.signalTimer)
      globalThis.signalTimer = setInterval(() => {
        //TODO 临时方案
        const msgStr = globalThis.msgStr
        getSignal(msgStr)
      }, 200)
    }

  }

  getSignal = (msg) => {
    console.log('msgmsgmsg', msg)
    const that = this;
    that.msg = msg
    const strachArr = msg.split(',')
    if (strachArr[0] != '#DN_GD') {
      return
    }
    this.signArr = strachArr

    for (let i = 0; i <= 12; i++) {
      this.sjxhColum[i].value = this.signArr[i+2]
    }

    this.sjxhColum[13].value = this.signArr[17]
    this.sjxhColum[14].value = this.signArr[18]
    this.sjxhColum[15].value = this.signArr[19]
    this.sjxhColum[16].value = this.signArr[20]
    this.sjxhColum[17].value = this.signArr[23] //车速
    this.sjxhColum[18].value = this.signArr[28]
    this.sjxhColum[19].value = this.signArr[29]
    this.sjxhColum[20].value = this.signArr[30]
    this.sjxhColum[21].value = this.signArr[15] //NC
    this.sjxhColum[22].value = this.signArr[16] //SA15
    this.sjxhColum[23].value = this.signArr[21]
    this.sjxhColum[24].value = this.signArr[22]
    this.sjxhColum[25].value = this.signArr[24]
    this.sjxhColum[26].value = this.signArr[26]
    this.sjxhColum[27].value = this.signArr[25]
    this.sjxhColum[28].value = this.signArr[27]
    this.sjxhColum[29].value = this.signArr[31]
    this.sjxhColum[30].value = this.signArr[32]
    this.sjxhColum[31].value = this.signArr[33]
    this.sjxhColum[32].value = this.signArr[34]
    this.sjxhColum[33].value = this.signArr[35]
    for (let i = 34; i <= 46; i++) {
      this.sjxhColum[i].value = this.signArr[i+2]
    }
    let t = 0
    for (let i = 83; i <= 97; i++) {
      this.GPSColum[t].value = this.signArr[i]
      t++
    }
    this.sjxhColum = JSON.parse(JSON.stringify((this.sjxhColum)))
    that.signArr = JSON.parse(JSON.stringify((this.signArr)))
    that.GPSColum = JSON.parse(JSON.stringify((this.GPSColum)))
  }

  outClick() {
  }

  saveLog() {

  }
}