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

import HeaderComponent from './compontents/Header';
import { CommonListType, EnvironmentConfigurationType } from '../model';
import common from '@ohos.app.ability.common';
import FileUtils from '../utils/FileUtils';
import { GlobalConfig, TerminalInfoTag } from '../config';
import ethernet from '@ohos.net.ethernet';
import { BusinessError } from '@ohos.base';
import Prompt from '@system.prompt';

@Entry
@Component
struct TerminalInfoPage {
  @State config: EnvironmentConfigurationType = {}
  private fileUtil!: FileUtils
  private context = getContext(this) as common.UIAbilityContext;

  async aboutToAppear() {
    this.fileUtil = new FileUtils(this.context)
    const data = await this.fileUtil.readFile(GlobalConfig.commonFileWriteAddress + '/config/ipConfig.txt');
    console.log(TerminalInfoTag, "data", data)
    if (data) {
      this.config = JSON.parse(data)
      AppStorage.setOrCreate<EnvironmentConfigurationType>("EnvironmentConfiguration", this.config)
    }
  }

  build() {
    Flex({
      justifyContent: FlexAlign.Center,
      direction: FlexDirection.Column,
      alignItems: ItemAlign.Center,
    }) {
      HeaderComponent({
        shortLogo: true,
        shouBackArea: true
      })
      Column() {
        Column() {
          Flex({
            wrap: FlexWrap.Wrap,
          }) {
            if (this.config.isOpenFiniteDifference === "1") {
              blockComponent({
                value: this.config.tcpOppositeIp,
                change: (value: string) => {
                  this.config.tcpOppositeIp = value;
                }
              })
              blockComponent({
                label: "差分响应端口",
                value: this.config.tcpOppositePort,
                change: (value: string) => {
                  this.config.tcpOppositePort = value;
                }
              })
            }
            blockComponent({
              label: "中心服务器IP",
              value: this.config.centerIp,
              change: (value: string) => {
                this.config.centerIp = value;
              }
            })
            blockComponent({
              label: "中心响应端口",
              value: this.config.centerPort,
              change: (value: string) => {
                this.config.centerPort = value;
              }
            })
            blockComponent({
              label: "后置机IP",
              value: this.config.udpOppositeIp,
              change: (value: string) => {
                this.config.udpOppositeIp = value;
              }
            })
            blockComponent({
              label: "后置机响应端口",
              value: this.config.udpOppositeIpPort,
              change: (value: string) => {
                this.config.udpOppositeIpPort = value;
              }
            })
            if (this.config.carType === "4") {
              blockComponent({
                label: "后置机响应端口2",
                value: this.config.udpOppositeIpPortTwo,
                change: (value: string) => {
                  this.config.udpOppositeIpPortTwo = value;
                }
              })
            }
            blockComponent({
              label: "前置机IP",
              value: this.config.udplocalIp,
              change: (value: string) => {
                this.config.udplocalIp = value;
                this.config.tcplocalIp = value
              }
            })
            blockComponent({
              label: "后置机UDP本地端口",
              value: this.config.udplocalIpPort,
              change: (value: string) => {
                this.config.udplocalIpPort = value;
              }
            })
            if (this.config.carType === "4") {
              blockComponent({
                label: "后置机UDP本地端口2",
                value: this.config.udplocalIpPortTwo,
                change: (value: string) => {
                  this.config.udplocalIpPortTwo = value;
                }
              })
            }
            // blockComponent({
            //   label: "TCP本地端口",
            //   value: this.config.tcplocalIpPort,
            //   change: (value: string) => {
            //     this.config.tcplocalIpPort = value;
            //   }
            // })
            blockComponent({
              label: "子网掩码",
              value: this.config.netMask,
              change: (value: string) => {
                this.config.netMask = value;
              }
            })
            blockComponent({
              label: "默认网关",
              value: this.config.gateway,
              change: (value: string) => {
                this.config.gateway = value;
              }
            })
            blockComponent({
              label: "DNS",
              value: this.config.dnsServers,
              change: (value: string) => {
                this.config.dnsServers = value;
              }
            })
            blockComponent({
              label: "车型",
              type: 4,
              value: this.config.carType,
              change: (value: string) => {
                this.config.carType = value;
              }
            })
            blockComponent({
              label: "后置机类型",
              type: 1,
              value: this.config.rearMachineModel,
              change: (value: string) => {
                this.config.rearMachineModel = value;
              }
            })
            blockComponent({
              label: "是否开启差分",
              type: 5,
              value: this.config.isOpenFiniteDifference,
              change: (value: string) => {
                this.config.isOpenFiniteDifference = value;
              }
            })
            blockComponent({
              label: "是否开启日志",
              type: 2,
              value: this.config.isOpenLog,
              change: (value: string) => {
                this.config.isOpenLog = value;
              }
            })
            blockComponent({
              label: "板卡类型",
              type: 3,
              value: this.config.boardType,
              change: (value: string) => {
                this.config.boardType = value;
              }
            })
          }
          .backgroundColor("#282828")
          .height(650)
          .borderRadius(20)
          .margin(20)
          .padding({
            top: 10
          })

          Row() {
            Image($r('app.media.bc')).height(80).objectFit(ImageFit.Contain).onClick(() => {
              console.log(TerminalInfoTag, "保存配置", JSON.stringify(this.config))
              AppStorage.setOrCreate<EnvironmentConfigurationType>("EnvironmentConfiguration", this.config)
              this.fileUtil.addFile(GlobalConfig.commonFileWriteAddress + '/config/ipConfig.txt', JSON.stringify(this.config))
              ethernet.setIfaceConfig("eth0", {
                mode: ethernet.IPSetMode.STATIC,
                ipAddr: this.config.udplocalIp,
                route: "0.0.0.0",
                gateway: this.config.gateway, //value.gateway网关
                netMask: this.config.netMask, //value.netMask网络掩码
                dnsServers: this.config.dnsServers,
                domain: ""
              }, (error: BusinessError) => {
                if (error) {
                  Prompt.showToast({
                    message: '设置失败' + JSON.stringify(error),
                    duration: 3000
                  });
                } else {
                  Prompt.showToast({
                    message: '设置成功',
                    duration: 3000
                  });
                }
              });
            })
          }
          .width("100%")
          .height(120)
          .backgroundColor("#CAC4B8")
          .justifyContent(FlexAlign.Center)
          .alignItems(VerticalAlign.Center)
          .borderRadius({
            bottomLeft: 20,
            bottomRight: 20
          })
        }
        .width(1500)
        .height(810)
        .backgroundColor("#fff")
        .borderRadius(20)
      }
      .width("100%")
      .height("100%")
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }.width("100%")
    .height("100%")
    .backgroundImage($r('app.media.index_bg'))
    .backgroundImageSize({
      width: "100%",
      height: "100%"
    })
  }
}

@Component
struct blockComponent {
  @State label: string = "差分服务器IP"
  @Prop value: string
  change?: (value: string) => void
  // 0 -输入框,1 -后置机类型,2 -日志开关,3 -板卡类型
  @State type: number = 0
  // '一型机', '二型机', '三型机', '一体机'
  @State rearMachineModelList: CommonListType[] = [
    {
      label: '一型机',
      value: '1'
    },
    {
      label: '二型机',
      value: '2'
    },
    {
      label: '三型机',
      value: '3'
    },
    {
      label: '一体机',
      value: '4'
    }
  ]
  // '北云', '天宝MB2'
  @State boardList: CommonListType[] = [
    {
      label: '北云',
      value: '1'
    },
    {
      label: '天宝MB2',
      value: '2'
    }
  ]
  @State logList: CommonListType[] = [
    {
      label: '开启',
      value: '1'
    },
    {
      label: '关闭',
      value: '0'
    }
  ]
  // 车型 "小车C1", "小车C2", "大车", "牵引车A2"
  @State carTypeList: CommonListType[] = [
    {
      label: '小车C1',
      value: '1'
    },
    {
      label: '小车C2',
      value: '2'
    },
    {
      label: '大车',
      value: '3'
    },
    {
      label: '牵引车A2',
      value: '4'
    }
  ]

  build() {
    Row() {
      Row() {
        Text(this.label + ":").fontSize(20).fontColor("#E5CBA1")
      }.width("35%").padding({
        left: 15
      })

      Row() {
        // 输入框
        if (this.type === 0) {
          TextInput({
            text: this.value,
          })
            .type(InputType.Normal)
            .borderRadius(0)
            .fontSize(20)
            .height(50)
            .backgroundColor("#4C473E")
            .fontColor("#FFF5E5")
            .border({
              width: 1,
              color: "#E6E0D8"
            })
            .margin({ left: 15, right: 15 })
            .onChange((value) => {
              this.value = value;
              this.change?.(value);
            })
        } else {
          ForEach(this.type === 1 ? this.rearMachineModelList :
            this.type === 2 || this.type === 5 ? this.logList :
              this.type === 3 ? this.boardList : this.carTypeList, (item: CommonListType, index) => {
            Radio({ value: item.label, group: 'terRadioGroup' + this.type })
              .borderColor('#E5CBA1')
              .checked(item.value === this.value ? true : false)
              .onChange((value: boolean) => {
                if (value) {
                  this.value = item.value
                  this.change?.(item.value);
                }
              })
            Text(item.label).fontSize(20).fontColor('#FFF')
          })
        }

      }.width("65%").padding({
        right: 15
      })
    }
    .width("50%")
    .height(50)
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .margin({
      top: 10,
      bottom: 10
    })
  }
}