HJ_launcher/product/phone/src/main/ets/view/HomeView.ets

import BusinessConstant, { DeviceType } from '../common/constants/BusinessConstant'
import MesAioRequest from '../common/util/request/MesAioRequest'
import TimeUtil from '../Common/util/TimeUtil'
import RequestParamModel from '../viewmodel/warehouse/RequestParamModel'
import {
  MqttAsync,
  MqttConnectOptions,
  MqttSubscribeOptions,
  MqttPublishOptions,
  MqttResponse,
  MqttMessage,
  MqttClient,
} from '@ohos/mqtt';
import MqttUploadData from '../viewmodel/mqtt/MqttUploadData'
import TempHumiditySensor from '../viewmodel/device/TempHumiditySensor'
import ElectricScrewdriverPresetModel from '../model/ElectricScrewdriverPresetModel';
import ElectricSolderingIronPresetModel from '../model/ElectricSolderingIronPresetModel';

@Component
export struct HomeView {

  private mqttAsyncClient: MqttClient | null = null;
  //  Set Client Configuration
  @State subscribeTopic: string = BusinessConstant.mqttSubscribeTopic;
  @State subscribeTopic2: string = BusinessConstant.mqttSubscribeTopic2;
  @State publishTopic: string = BusinessConstant.mqttPublishTopic;
  @State payload: string = '';
  @State url: string = BusinessConstant.mqttUrl;
  @State clientId: string = BusinessConstant.mqttClientId;
  @State userName: string = BusinessConstant.mqttUserName;
  @State password: string = BusinessConstant.mqttPassword;
  @State connectedCount: number = 0;
  // @State isConnect: boolean = false;
  @State isPromise: boolean = false;


  @State numList: number[] = [1,2,3]

  @State planFinish: PlanFinish = {}

  @State tempHumiditySensor: TempHumiditySensor = {OnlineStatus: 0}
  @State onlineDeviceNum: number = 0
  @State userStatistics: UserStatistics = {}
  @State outsourceStatistics: OutsourceStatistics = {}
  @State vehicleStatistics: VehicleStatistics = {}
  @State processStatistics: ProductProcessStatistics = {}

  private swiperController: SwiperController = new SwiperController()

  async aboutToAppear() {
    ElectricScrewdriverPresetModel.initTaskDB(getContext())
    ElectricSolderingIronPresetModel.initTaskDB(getContext())
    await this.createClient();
    await this.connect();
    await this.subscribe();
    this.planFinish = await MesAioRequest.post("/api/v1/process/census/task/count", {} as RequestParamModel)
    this.userStatistics = await MesAioRequest.post("/api/v1/test/userStatistics", {} as RequestParamModel)
    this.outsourceStatistics = await MesAioRequest.post("/api/v1/test/outsourceStatistics", {} as RequestParamModel)
    this.vehicleStatistics = await MesAioRequest.post("/api/v1/test/vehicleStatistics", {} as RequestParamModel)
    this.processStatistics = await MesAioRequest.post("/api/v1/test/productProcessStatistics", {} as RequestParamModel)

  }

  build() {
    Column() {
      // 顶部状态栏
      Row() {
        Text(TimeUtil.getDateAndWeek())
          .fontSize($r('app.float.fontSize_6_4'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
        Text(' ' + TimeUtil.getTimePeriod())
          .fontSize($r('app.float.fontSize_7'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
        Text(' ' + TimeUtil.getHourAndMinute())
          .fontSize($r('app.float.fontSize_7'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
        Row() {
          Image($r('app.media.state_ai'))
            .width($r('app.float.virtualSize_9_6'))
            .height($r('app.float.virtualSize_9_6'))
            .fillColor($r('app.color.FFFFFF'))
          Image($r('app.media.state_ipc'))
            .width($r('app.float.virtualSize_9_6'))
            .height($r('app.float.virtualSize_9_6'))
            .fillColor($r('app.color.FFFFFF'))
          Image($r('app.media.state_voice'))
            .width($r('app.float.virtualSize_9_6'))
            .height($r('app.float.virtualSize_9_6'))
            .fillColor($r('app.color.FFFFFF'))
          Image($r('app.media.state_microphone'))
            .width($r('app.float.virtualSize_9_6'))
            .height($r('app.float.virtualSize_9_6'))
            .fillColor($r('app.color.FFFFFF'))
        }
        .width('10%')
        .justifyContent(FlexAlign.SpaceEvenly)
        .alignItems(VerticalAlign.Bottom)
        .margin({right: 1})
        .height('100%')
      }
      .width('100%')
      .height('3.4%')
      .alignItems(VerticalAlign.Bottom)
      .justifyContent(FlexAlign.End)

      // 登录人员信息
      Row({space: 5}) {
        Row().width('2.8%')
        Image($r('app.media.state_user'))
          .width($r('app.float.virtualSize_19_2'))
          .height($r('app.float.virtualSize_19_2'))
          .fillColor($r('app.color.FFFFFF'))

        Text('李明华')
          .fontSize($r('app.float.fontSize_6_4'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Regular)
      }
      .width('100%')
      .height('4%')
      .alignItems(VerticalAlign.Center)

      // 首页：时间和编辑栏
      Row({space: 10}) {
        Text(TimeUtil.getHourAndMinute())
          .fontSize($r('app.float.fontSize_28'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)

        Text(TimeUtil.getDateAndWeek() + TimeUtil.getTimePeriod())
          .fontSize($r('app.float.fontSize_15_2'))
          .fontColor($r('app.color.FFFFFF'))
          .fontWeight(FontWeight.Lighter)
          .opacity(0.6)

        Blank()
        Image($r('app.media.home_edit'))
          .width($r('app.float.virtualSize_16_8'))
          .height($r('app.float.virtualSize_16_8'))
          .fillColor($r('app.color.FFFFFF'))
      }
      .width('94.4%')
      .height('14.9%')

      Swiper(this.swiperController) {
        ForEach(this.numList, (index:number) => {
          Column() {
            // 第一行卡片
            Row() {
              // 制造订单
              Column(){
                Row() {
                  Text('制造订单')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('17%')
                .width('85.5%')
                .alignItems(VerticalAlign.Bottom)

                // Row() {
                //   Text(BusinessConstant.stationName)
                //     .fontSize($r('app.float.fontSize_6_4'))
                //     .fontColor($r('app.color.FFFFFF'))
                //     .fontWeight(FontWeight.Lighter)
                //     .opacity(0.6)
                // }
                // .height('6.6%')
                // .width('85.5%')
                // .alignItems(VerticalAlign.Bottom)
                Row().height('13%')

                Column() {
                  Text((this.planFinish?.monthFinish! ? this.planFinish.monthFinish : 0) + '/' + (this.planFinish?.monthPlan! ? this.planFinish.monthPlan : 0))
                    .fontSize($r('app.float.fontSize_28'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                    .maxLines(1)
                    .opacity(0.6)
                  Text('本月进度')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('35%')
                .width('85.5%')
                .alignItems(HorizontalAlign.Start)

                Row() {
                  Row() {
                    Text(this.planFinish?.dayPlan! ? this.planFinish.dayPlan.toString() : '0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('33.3%')
                  .justifyContent(FlexAlign.Center)

                  Row() {
                    Text(this.planFinish?.dayFinish! ? this.planFinish.dayFinish.toString() : '0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('33.3%')
                  .justifyContent(FlexAlign.Center)

                  Row() {
                    Text(this.planFinish?.dayRate! ? this.planFinish.dayRate + '%' : '0%')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('33.3%')
                  .justifyContent(FlexAlign.Center)

                }
                .height('20%')
                .width('85.5%')
                .alignItems(VerticalAlign.Bottom)

                Row() {
                  Row() {
                    Text('今日计划')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('33.3%')
                  .justifyContent(FlexAlign.Center)

                  Row() {
                    Text('今日完成')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('33.3%')
                  .justifyContent(FlexAlign.Center)

                  Row() {
                    Text('今日完成率')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('33.3%')
                  .justifyContent(FlexAlign.Center)
                }
                .height('15%')
                .width('85.5%')
                .alignItems(VerticalAlign.Top)
                .justifyContent(FlexAlign.SpaceAround)
              }
              .width('32.8%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_process_task"))
              .backgroundImageSize(ImageSize.Contain)

              //温湿度
              Column() {
                Row() {
                  Text('温湿度')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row(){}.height('18.5%')

                Row(){
                  Text((this.tempHumiditySensor?.OnlineStatus! === 1 && this.tempHumiditySensor?.Temperature) ? this.tempHumiditySensor.Temperature / 10 + '℃' : '-')
                    .fontSize($r('app.float.fontSize_28'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('22.5%')
                .alignItems(VerticalAlign.Bottom)

                Row(){}.height('15.5%')
                Row({space: 2}) {
                  Image($r('app.media.home_temp_and_humidity'))
                    .width($r('app.float.virtualSize_9_6'))
                    .height($r('app.float.virtualSize_9_6'))
                    .fillColor($r('app.color.FFFFFF'))

                  Text((this.tempHumiditySensor?.OnlineStatus! === 1 && this.tempHumiditySensor?.Humidity) ? this.tempHumiditySensor.Humidity / 10 + '%' : '-')
                    .fontSize($r('app.float.fontSize_15_2'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .alignItems(VerticalAlign.Center)
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_temp_and_humidity"))
              .backgroundImageSize(ImageSize.Cover)

              // 工位设备
              Column() {
                Row() {
                  Text('工位')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)
                // Row() {
                //   Text(BusinessConstant.stationName)
                //     .fontSize($r('app.float.fontSize_6_4'))
                //     .fontColor($r('app.color.FFFFFF'))
                //     .fontWeight(FontWeight.Lighter)
                //     .opacity(0.6)
                // }
                // .height('6.6%')

                Blank()

                Row() {
                  Column() {
                    Text('16')
                      .fontSize($r('app.float.fontSize_19_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)

                    Text('数量')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('38%')
                  .height('80%')
                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('50%')

                  Column() {
                    Text(this.onlineDeviceNum.toString())
                      .fontSize($r('app.float.fontSize_19_2'))
                      .fontColor($r('app.color.30D158'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)

                    Text('在线设备')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('38%')
                  .height('80%')
                }
                .height('29.4%')
                .width('100%')
                .justifyContent(FlexAlign.Center)
                .alignItems(VerticalAlign.Top)

              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_workstation_device"))
              .backgroundImageSize(ImageSize.Cover)

              // 在岗人员
              Column() {
                Row() {
                  Text('人员')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row() {}.height('18%')

                Column() {
                  Text(this.userStatistics?.onDutyNum ? this.userStatistics?.onDutyNum.toString() : '0')
                    .fontSize($r('app.float.fontSize_28'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                  Row() {}.height('8%')
                  Text('在岗人数')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('27.5%')

                Row() {}.height('11%')

                Column({space: 5}) {
                  Text(this.userStatistics?.totalNum ? this.userStatistics?.totalNum.toString() : '0')
                    .fontSize($r('app.float.fontSize_15_2'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                  Text('总人数')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .justifyContent(FlexAlign.Center)
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_on_the_job_staff"))
              .backgroundImageSize(ImageSize.Cover)

              // 委外
              Column() {
                Row() {
                  Text('委外')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row() {}.height('18%')

                Column() {
                  Text(this.outsourceStatistics?.weekComplete ? this.outsourceStatistics.weekComplete.toString() : '0')
                    .fontSize($r('app.float.fontSize_28'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                  Row() {}.height('8%')
                  Text('本周完成')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('27.5%')

                Row() {}.height('11%')

                Column({space: 5}) {
                  Text(this.outsourceStatistics?.orderNum ? this.outsourceStatistics.orderNum.toString() : '0')
                    .fontSize($r('app.float.fontSize_15_2'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)

                  Text('订单数量')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .justifyContent(FlexAlign.Center)
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_electronic_report"))
              .backgroundImageSize(ImageSize.Cover)
            }
            .width('100%')
            .height('45.5%')
            .justifyContent(FlexAlign.SpaceBetween)
            Row() {}.height('1%')
            // 第二行卡片
            Row() {
              //缺料情况
              Column() {
                Row() {
                  Text('缺料情况')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row() {}.height('18%')

                Column() {
                  Text('1')
                    .fontSize($r('app.float.fontSize_28'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                  Row() {}.height('8%')
                  Text('产品数量')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('27.5%')

                Row() {}.height('11%')

                Row() {
                  Column({space: 5}) {
                    Text('1')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Text('订单数量')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('42.6%')
                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('50%')
                  Column({space: 5}) {
                    Text('1')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Text('产品型号')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('42.6%')
                }
                .justifyContent(FlexAlign.Center)
                .width('100%')
                .height('25%')
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_order_schedule"))
              .backgroundImageSize(ImageSize.Cover)

              // 试验情况
              Column() {
                Row() {
                  Text('试验情况')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row() {}.height('18%')

                Column() {
                  Text('0')
                    .fontSize($r('app.float.fontSize_28'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                  Row() {}.height('8%')
                  Text('正在执行的订单')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('27.5%')

                Row() {}.height('11%')

                Row() {
                  Column({space: 5}) {
                    Text('0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Text('排队订单')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('42.6%')
                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('50%')
                  Column({space: 5}) {
                    Text('0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Text('排队产品')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('42.6%')
                }
                .justifyContent(FlexAlign.Center)
                .width('100%')
                .height('25%')
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_work_order_issuance"))
              .backgroundImageSize(ImageSize.Cover)

              // 智能仓储
              Column() {
                Row() {
                  Text('智能仓储')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row() {}.height('10%')
                Row() {
                  Stack() {
                    Progress({ value: (this.vehicleStatistics?.totalNum! ? this.vehicleStatistics.totalNum : 0), total: BusinessConstant.maxStorageLocation, type: ProgressType.Ring})
                      .width($r('app.float.virtualSize_58'))
                      .height($r('app.float.virtualSize_58'))
                      .style({strokeWidth: $r('app.float.virtualSize_6_4')})
                      .color(new LinearGradient([{ color: $r('app.color.73C3FF'), offset: 0.0 },
                        { color:$r('app.color.1050FF'), offset: 1.0 }]))
                      .backgroundColor($r('app.color.10FFFFFF'))

                    Row() {
                      Text(this.vehicleStatistics?.totalNum! ? (this.vehicleStatistics.totalNum * 100 / BusinessConstant.maxStorageLocation).toFixed(1) : '0')
                        .fontSize($r('app.float.fontSize_15_2'))
                        .fontColor($r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Lighter)
                      Text('%')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Lighter)
                    }
                  }
                }
                .height('38.5%')
                Row() {
                  Text('仓储占用')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('8%')

                Row() {
                  Column() {
                    Text(this.vehicleStatistics?.totalNum! ? this.vehicleStatistics.totalNum.toString() : '0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Row() {}.height('5%')
                    Text('总料箱')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('38%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('40%')

                  Column() {
                    Text(this.vehicleStatistics?.emptyNum! ? this.vehicleStatistics.emptyNum.toString() : '0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)
                    Row() {}.height('5%')
                    Text('空箱')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('38%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                }
                .height('25%')
                .width('100%')
                .justifyContent(FlexAlign.Center)
                .alignItems(VerticalAlign.Center)
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_intellectual_storage"))
              .backgroundImageSize(ImageSize.Cover)

              // 工艺管理
              Column() {
                Row() {
                  Text('工艺管理')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('18.5%')
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Center)

                Row() {}.height('10%')
                Row() {
                  Stack() {
                    Progress({ value: (this.processStatistics?.productProcessNum! ? this.processStatistics.productProcessNum : 0), total: (this.processStatistics?.productNum! ? this.processStatistics.productNum : 100), type: ProgressType.Ring})
                      .width($r('app.float.virtualSize_58'))
                      .height($r('app.float.virtualSize_58'))
                      .style({strokeWidth: $r('app.float.virtualSize_6_4')})
                      .color(new LinearGradient([{ color: $r('app.color.73C3FF'), offset: 0.0 },
                        { color:$r('app.color.1050FF'), offset: 1.0 }]))
                      .backgroundColor($r('app.color.10FFFFFF'))

                    Row() {
                      Text(this.processStatistics?.productProcessNum! && this.processStatistics?.productNum! ? (this.processStatistics.productProcessNum * 100 / this.processStatistics.productNum).toFixed(1) : '0')
                        .fontSize($r('app.float.fontSize_15_2'))
                        .fontColor($r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Lighter)
                      Text('%')
                        .fontSize($r('app.float.fontSize_8'))
                        .fontColor($r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Lighter)
                    }
                  }
                }
                .height('38.5%')

                Row() {
                  Text('覆盖产品')
                    .fontSize($r('app.float.fontSize_6_4'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Lighter)
                }
                .height('8%')

                Row() {
                  Column() {
                    Text(this.processStatistics?.processPublishedNum! ? this.processStatistics.processPublishedNum.toString() : '0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Row() {}.height('5%')
                    Text('已发布')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('38%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('40%')

                  Column() {
                    Text(this.processStatistics?.processUnpublishedNum! ? this.processStatistics.processUnpublishedNum.toString() : '0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)
                    Row() {}.height('5%')
                    Text('未发布')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('38%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                }
                .height('25%')
                .width('100%')
                .justifyContent(FlexAlign.Center)
                .alignItems(VerticalAlign.Center)
              }
              .width('16%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_process_management"))
              .backgroundImageSize(ImageSize.Cover)

              // 质量检验
              Column(){
                Row() {
                  Text('质量检验')
                    .fontSize($r('app.float.fontSize_12'))
                    .fontColor($r('app.color.FFFFFF'))
                    .fontWeight(FontWeight.Medium)
                }
                .height('17%')
                .width('85.5%')
                .alignItems(VerticalAlign.Bottom)

                Row() {}.height('10%')

                Row() {
                  Column() {
                    Stack() {
                      Progress({ value: 1, total: 1, type: ProgressType.Ring})
                        .width($r('app.float.virtualSize_58'))
                        .height($r('app.float.virtualSize_58'))
                        .style({strokeWidth: $r('app.float.virtualSize_6_4')})
                        .color(new LinearGradient([{ color: $r('app.color.73C3FF'), offset: 0.0 },
                          { color:$r('app.color.1050FF'), offset: 1.0 }]))
                        .backgroundColor($r('app.color.10FFFFFF'))

                      Row() {
                        Text('100')
                          .fontSize($r('app.float.fontSize_15_2'))
                          .fontColor($r('app.color.FFFFFF'))
                          .fontWeight(FontWeight.Lighter)
                        Text('%')
                          .fontSize($r('app.float.fontSize_8'))
                          .fontColor($r('app.color.FFFFFF'))
                          .fontWeight(FontWeight.Lighter)
                      }
                    }
                    Row() {
                      Text('合格率')
                        .fontSize($r('app.float.fontSize_6_4'))
                        .fontColor($r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Lighter)
                    }
                    .height('17.2%')
                  }
                  .width('40%')

                  Column() {
                    Stack() {
                      Progress({ value: 0, total: 100, type: ProgressType.Ring})
                        .width($r('app.float.virtualSize_58'))
                        .height($r('app.float.virtualSize_58'))
                        .style({strokeWidth: $r('app.float.virtualSize_6_4')})
                        .color(new LinearGradient([{ color: $r('app.color.73C3FF'), offset: 0.0 },
                          { color:$r('app.color.1050FF'), offset: 1.0 }]))
                        .backgroundColor($r('app.color.10FFFFFF'))

                      Row() {
                        Text('0')
                          .fontSize($r('app.float.fontSize_15_2'))
                          .fontColor($r('app.color.FFFFFF'))
                          .fontWeight(FontWeight.Lighter)
                        Text('%')
                          .fontSize($r('app.float.fontSize_8'))
                          .fontColor($r('app.color.FFFFFF'))
                          .fontWeight(FontWeight.Lighter)
                      }
                    }
                    Row() {
                      Text('返工率')
                        .fontSize($r('app.float.fontSize_6_4'))
                        .fontColor($r('app.color.FFFFFF'))
                        .fontWeight(FontWeight.Lighter)
                    }
                    .height('17.2%')
                  }
                  .width('40%')
                }
                .width('100%')
                .height('46.5%')
                .justifyContent(FlexAlign.Center)

                Row() {
                  Column() {
                    Text('0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                    Row() {}.height('5%')
                    Text('检验单')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('21%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('40%')

                  Column() {
                    Text('0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)
                    Row() {}.height('5%')
                    Text('不合格品审理单')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Center)
                      .maxLines(2)
                  }
                  .width('21%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)

                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('40%')

                  Column() {
                    Text('10')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)
                    Row() {}.height('5%')
                    Text('合格件')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('21%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)

                  Divider().vertical(true)
                    .color($r('app.color.FFFFFF'))
                    .opacity(0.1)
                    .height('40%')

                  Column() {
                    Text('0')
                      .fontSize($r('app.float.fontSize_15_2'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                      .textAlign(TextAlign.Start)
                    Row() {}.height('5%')
                    Text('返工件')
                      .fontSize($r('app.float.fontSize_6_4'))
                      .fontColor($r('app.color.FFFFFF'))
                      .fontWeight(FontWeight.Lighter)
                  }
                  .width('21%')
                  .height('100%')
                  .justifyContent(FlexAlign.Center)
                }
                .height('25%')
                .width('100%')
                .justifyContent(FlexAlign.Center)
                .alignItems(VerticalAlign.Center)
              }
              .width('32.8%')
              .height('100%')
              .borderRadius($r('app.float.virtualSize_6_4'))
              .backgroundImage($r("app.media.home_bg_quality_management"))
              .backgroundImageSize(ImageSize.Cover)
            }
            .width('100%')
            .height('45.5%')
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .width('100%')
          .height('100%')
        })
      }
      .width('94.4%')
      .height('77.7%')
    }
    .width('100%')
    .height('100%')
  }

  createClient(): undefined | void {
    console.log("hhtest", '请求连接');
    if (this.mqttAsyncClient) {
      return;
    }
    this.mqttAsyncClient = MqttAsync.createMqtt({
      url: this.url,
      clientId: this.clientId,
      persistenceType: 1,
    });
    let num = 0
    while (num < 5) {
      if (!this.mqttAsyncClient) {
        this.mqttAsyncClient = MqttAsync.createMqtt({
          url: this.url,
          clientId: this.clientId,
          persistenceType: 1,
        });
      }
      num++
    }
    if (!this.mqttAsyncClient) {
      console.log("hhtest", '创建失败');
      return;
    }
    this.messageArrived()
    this.connectLost()
    this.mqttAsyncClient.setMqttTrace(6);
    // // this.showLog("create client success");
  }

  async connect(): Promise<undefined | void> {
    console.info('hhtest', "connect");
    // // this.showLog("connect");
    let options: MqttConnectOptions = {
      userName: this.userName,
      password: this.password,
      cleanSession:false,
      connectTimeout: 300
    };
    if (this.mqttAsyncClient == null) {
      return;
    }
    if (!(await this.isConnected())) {
      if (this.isPromise) {
        this.mqttAsyncClient.connect(options).then((data: MqttResponse) => {
          console.info('hhtest', "connect result:" + JSON.stringify(data));
          this.connectedCount++;
        }).catch((data: MqttResponse) => {
          console.info('hhtest', "connect fail result:" + JSON.stringify(data));
        })
      } else {
        this.mqttAsyncClient.connect(options, (err: Error, data: MqttResponse) => {
          if (!err) {
            console.info('hhtest', "connect result:" + JSON.stringify(data));
            if (data.message == "Connect Success") {
              console.info('hhtest', "connect result connectedCount:");
              this.connectedCount++;
            }
          } else {
            console.info('hhtest', "connect error:" + JSON.stringify(err));
          }
        });
      }
    }
  }

  async publish(): Promise<undefined | void> {
    console.info('hhtest', "publish");
    let publishOption: MqttPublishOptions = {
      topic: this.publishTopic,
      qos: 1,
      payload: this.payload
    }
    console.log('hhtest', 'publish msg:----------' + JSON.stringify(this.payload))
    console.log('hhtest', 'publish msg:----------' + JSON.stringify(publishOption))
    if (this.mqttAsyncClient == null) {
      return;
    }
    if (await this.isConnected()) {
      if (this.isPromise) {
        this.mqttAsyncClient.publish(publishOption).then((data: MqttResponse) => {
          console.info('hhtest', "publish success result:" + JSON.stringify(data));
        }).catch((err: MqttResponse) => {
          console.info('hhtest', "publish fail result:" + JSON.stringify(err));
        })
      } else {
        this.mqttAsyncClient.publish(publishOption, (err: Error, data: MqttResponse) => {
          console.info('hhtest', "publish response:");
          if (!err) {
            console.info('hhtest', "publish result:" + JSON.stringify(data));
          } else {
            console.info('hhtest', "publish error:" + JSON.stringify(err));
          }
        });
      }
    }
  }

  async subscribe(): Promise<undefined | void> {
    console.info('hhtest', "subscribe");
    let subscribeOption: MqttSubscribeOptions = {
      topic: this.subscribeTopic,
      qos: 2
    }
    if (this.mqttAsyncClient == null) {
      console.info('hhtest', "client not created");
      return;
    }
    if (await this.isConnected()) {
      if (this.isPromise) {
        this.mqttAsyncClient.subscribe(subscribeOption).then((data: MqttResponse) => {
          console.info('hhtest', "subscribe success result:" + JSON.stringify(data));
        }).catch((err: MqttResponse) => {
          console.info('hhtest', "subscribe fail result:" + JSON.stringify(err));
        })
      } else {
        this.mqttAsyncClient.subscribe(subscribeOption, (err: Error, data: MqttResponse) => {
          if (!err) {
            console.info('hhtest', "subscribe result:" + JSON.stringify(data));
          } else {
            console.info('hhtest', "subscribe error:" + JSON.stringify(err));
          }
        });
      }
    }
    if (this.subscribeTopic === this.subscribeTopic2) {
      return
    }
    let subscribeOption2: MqttSubscribeOptions = {
      topic: this.subscribeTopic2,
      qos: 2
    }
    if (await this.isConnected()) {
      if (this.isPromise) {
        this.mqttAsyncClient.subscribe(subscribeOption2).then((data: MqttResponse) => {
          console.info('hhtest', "subscribe success result:" + JSON.stringify(data));
        }).catch((err: MqttResponse) => {
          console.info('hhtest', "subscribe fail result:" + JSON.stringify(err));
        })
      } else {
        this.mqttAsyncClient.subscribe(subscribeOption2, (err: Error, data: MqttResponse) => {
          if (!err) {
            console.info('hhtest', "subscribe result:" + JSON.stringify(data));
          } else {
            console.info('hhtest', "subscribe error:" + JSON.stringify(err));
          }
        });
      }
    }
  }

  messageArrived(): undefined | void {
    console.info('hhtest', "messageArrived");
    if (this.mqttAsyncClient == null) {
      return;
    }
    this.mqttAsyncClient.messageArrived((err: Error, data: MqttMessage) => {
      if (!err) {
        // this.showLog(msg);
        let dataStr = JSON.stringify(data);
        console.info('hhtest', "messageArrived message:" + dataStr);
        if (dataStr.indexOf(this.subscribeTopic2) === -1) {
          return
        }
        let updateData: MqttUploadData = JSON.parse(data.payload) as MqttUploadData;
        if (!updateData || !updateData.d || updateData.d.length <= 0) {
          console.info('hhtest', "updateData没有解析成功" + JSON.stringify(updateData));
          return
        }

        let device0: TempHumiditySensor = { Temperature: 0, Humidity: 0, OnlineStatus: 0 }
        this.onlineDeviceNum = 0
        let collectFlag: Array<boolean> = [false]
        for (const element of updateData.d) {
          if (BusinessConstant.attrMap.has(element.tag)) {
            let deviceType: string = BusinessConstant.attrMap.get(element.tag) ?? '';
            switch (deviceType) {
              case DeviceType.TempHumiditySensor:
                collectFlag[0] = true
                if (element.tag! === 'Temperature') {
                  device0.Temperature = element.value
                } else if (element.tag! === 'Humidity') {
                  device0.Humidity = element.value
                }
                device0.OnlineStatus = 1
                this.onlineDeviceNum++
                break;
              case DeviceType.WeldFumeExtractor:
                this.onlineDeviceNum++
                break;
              case DeviceType.ElectricSolderingIron:
                this.onlineDeviceNum++
                break;
              case DeviceType.ElectricScrewdriver:
                this.onlineDeviceNum++
                break;
              case DeviceType.AntiWristStrap:
                this.onlineDeviceNum++
                break;
              case DeviceType.CardReader:
                this.onlineDeviceNum++
                break;
              case DeviceType.Lighting:
                this.onlineDeviceNum++
                break;
            }
          }
        }
        if (collectFlag[0]) {
          this.tempHumiditySensor = device0;
        } else {
          this.tempHumiditySensor = {
            OnlineStatus: 0
          }
        }
        console.info('hhtest', "this.tempHumiditySensor" + JSON.stringify(this.tempHumiditySensor));
      } else {
        console.info('hhtest', "messageArrived error:" + JSON.stringify(err));
      }
    });
  }

  async unsubscribe(): Promise<undefined | void> {
    console.info('hhtest', "unsubscribe");
    let subscribeOption: MqttSubscribeOptions = {
      topic: this.subscribeTopic,
      qos: 2
    }
    if (this.mqttAsyncClient == null) {
      return;
    }
    if (await this.isConnected()) {
      if (this.isPromise) {
        this.mqttAsyncClient.unsubscribe(subscribeOption).then((data: MqttResponse) => {
          console.info('hhtest', "unsubscribe success result:" + JSON.stringify(data));
        }).catch((err: MqttResponse) => {
          console.info('hhtest', "unsubscribe fail result:" + JSON.stringify(err));
        })
      } else {
        this.mqttAsyncClient.unsubscribe(subscribeOption, (err: Error, data: MqttResponse) => {
          if (!err) {
            console.info('hhtest', "unsubscribe result:" + JSON.stringify(data));
          } else {
            console.info('hhtest', "unsubscribe error:" + JSON.stringify(err));
          }
        });
      }
    }
  }

  async disconnect(): Promise<undefined | void> {
    console.info('hhtest', "disconnect");
    if (this.mqttAsyncClient == null) {
      return;
    }
    if (await this.isConnected()) {
      if (this.isPromise) {
        this.mqttAsyncClient.disconnect().then((data: MqttResponse) => {
          console.info('hhtest', "disconnect success result:" + JSON.stringify(data));
        }).catch((err: MqttResponse) => {
          console.info('hhtest', "disconnect fail result:" + JSON.stringify(err));
        })
      } else {
        this.mqttAsyncClient.disconnect((err: Error, data: MqttResponse) => {
          if (!err) {
            console.info('hhtest', "disconnect result:" + JSON.stringify(data));
          } else {
            console.info('hhtest', "disconnect error:" + JSON.stringify(err));
          }
        });
      }
    }
  }

  async isConnected(): Promise<undefined | boolean> {
    console.info('hhtest', "isConnected");
    if (this.mqttAsyncClient == null) {
      return;
    }
    return this.mqttAsyncClient.isConnected().then((data: boolean) => {
      console.info('hhtest', "isConnected result:" + data);
      if (!data) {
      }
      return data;
    })
  }

  async reconnect(): Promise<undefined | void> {
    console.info('hhtest', "reconnect");
    if (this.mqttAsyncClient == null) {
      return;
    }
    if (!(await this.isConnected())) {
      if (this.connectedCount == 0) {
        console.info('hhtest', "reconnect: client previously not connected");
        return;
      }
      this.mqttAsyncClient.reconnect().then((data: boolean) => {
        console.info('hhtest', "reConnected result:" + data);
      });
    }
  }

  connectLost(): undefined | void {
    console.info('hhtest', "connectLost");
    if (this.mqttAsyncClient == null) {
      return;
    }
    this.mqttAsyncClient.connectLost((err: Error, data: MqttResponse) => {
      if (!err) {
        this.reconnect();
        console.info('hhtest', "connect lost cause:" + JSON.stringify(data));
      } else {
        console.info('hhtest', "connect lost error:" + JSON.stringify(err));
      }
    });
  }

  async destroy(): Promise<undefined | void> {
    console.info('hhtest', "destroy");
    if (this.mqttAsyncClient == null) {
      return;
    }
    this.mqttAsyncClient.destroy().then((data: boolean) => {
      console.info('hhtest', "destroy result:" + data);
      this.mqttAsyncClient = null;
      this.connectedCount = 0;
    });
  }
}


class PlanFinish {
  // 今日完成
  dayFinish?: number
  // 今日完成
  dayPlan?: number
  // 今日完成率
  dayRate?: string
  // 本月完成
  monthFinish?: number
  // 本月计划
  monthPlan?: number
  // 本周完成
  weekFinish?: number
  // 本周计划
  weekPlan?: number
}

class UserStatistics {
  // 在岗人数
  onDutyNum?: number
  // 总人数
  totalNum?: number
}
// 委外统计
class OutsourceStatistics {
  // 本周完成
  weekComplete?: number
  // 订单数量
  orderNum?: number
}
// 载具（料箱）统计
class VehicleStatistics {
  // 空箱数量
  emptyNum?: number
  // 总料箱数量
  totalNum?: number
}
// 产品工艺统计
class ProductProcessStatistics {
  // 产品数量
  productNum?: number
  // 产品工艺数量
  productProcessNum?: number
  // 工艺发布数量
  processPublishedNum?: number
  // 工艺未发布数量
  processUnpublishedNum?: number
}