426 lines
		
	
	
		
			16 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			426 lines
		
	
	
		
			16 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
| 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 } 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("改正数次数/改正数大小:" + this.signArr[58] || '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('25%')
 | ||
|                 .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 })
 | ||
|           }
 | ||
|           .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(170 * this.ratio)
 | ||
|             .height(300 * this.ratio)
 | ||
|             .position({ y: 0 * this.ratio, x: 720 * 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)
 | ||
|         Column() {
 | ||
|           Column() {
 | ||
|             Text( this.msg || '0')
 | ||
|               .fontColor('#FFF5E5')
 | ||
|               .fontSize(14 * this.ratio)
 | ||
|               .width('100%')
 | ||
|               .textAlign(TextAlign.Start)
 | ||
| 
 | ||
|           }
 | ||
|           .backgroundColor('#282828')
 | ||
|           .width(this.ratio * 890)
 | ||
|           .height(436 * this.ratio)
 | ||
|           .margin({ left: 0 * this.ratio, top: 15 * 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 == 2 ? 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&&globalThis.udpClient.onMessage_1((msg) => {
 | ||
|         console.log('getUDPonMessage_1bysignDisplay0', 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&&globalThis.udpClient.onMessage_1((msg) => {
 | ||
|         console.log('getUDPonMessage_1bysignDisplay2', 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() {
 | ||
| 
 | ||
|   }
 | ||
| }
 |