import ProcessRequest from '../common/util/request/ProcessRequest'
import RequestParamModel from '../viewmodel/RequestParamModel'
import WorkOrderSeq from '../viewmodel/WorkOrderSeq'
import promptAction from '@ohos.promptAction'
import ProcessInfo from '../viewmodel/process/ProcessInfo'
import AntiWristStrap from '../viewmodel/device/AntiWristStrap';
import ElectricScrewdriver from '../viewmodel/device/ElectricScrewdriver';
import ElectricSolderingIron from '../viewmodel/device/ElectricSolderingIron';
import ThreeColourLight from '../viewmodel/device/ThreeColourLight';
import WeldFumeExtractor from '../viewmodel/device/WeldFumeExtractor'
import Lighting from '../viewmodel/device/Lighting'
import MqttDataItem from '../viewmodel/mqtt/MqttDataItem'
import MqttCmdData from '../viewmodel/mqtt/MqttCmdData'
import MqttManager from '../common/util/mqtt';
import CommonConstants from '../common/constants/CommonConstants'
import router from '@ohos.router'
import CardReader from '../viewmodel/device/CardReader'
import TempHumiditySensor from '../viewmodel/device/TempHumiditySensor'

// 辅助操作弹窗
@Component
export struct AuxiliaryOperationView {
  // 工单编号
  workOrderCode: string = ''
  @Link @Watch('getBarcodeStatistics') seqList: WorkOrderSeq[]
  // 扫码开工后的生产过程信息
  @Link process: ProcessInfo
  @Link isAuxiliaryViewOpen:boolean

  // 提前下线数量
  @State earlyOfflineNum: number = 50
  // 委外审核数量
  @State outsourcedAuditNum: number = 120
  // 条码关联中的统计
  @State barcodeStatistics: string = ''

  //当前用户id
  @Consume('currentUserId') currentUserId: number
  //照明
  @StorageProp('Lighting') lighting: Lighting = {}
   //三色灯
  @StorageProp('ThreeColourLight') threeColourLight: ThreeColourLight = {}
  //焊烟排烟机/空气净化器
  @StorageProp('WeldFumeExtractor') weldFumeExtractor: WeldFumeExtractor = { ExhaustFan: 0}
  // 电烙铁
  @StorageProp('ElectricSolderingIron') solderingIron: ElectricSolderingIron = { SolderingCurrTemp: 0}
  // 电动螺丝刀
  @StorageProp('ElectricScrewdriver') screwdriver: ElectricScrewdriver = { TorqueHoldTime:0 }
  // 防静电手环
  @StorageProp('AntiWristStrap') wristStrap: AntiWristStrap = { RingWearNormal: 0, RingWearStandby: 0, RingWearFault: 0, OnlineStatus: 0}
  // 读卡器
  @StorageProp('CardReader') cardReader: CardReader = {}
  // 温湿度传感器
  @StorageProp('TempHumiditySensor') tempHumiditySensor: TempHumiditySensor = {}
  // 相机是否在线
  @StorageProp('CameraStatus') cameraStatus: boolean = false
  // 扫码枪是否在线
  @StorageProp('ScanningGunStatus') scanningGunStatus: boolean = false

  // 打开零星叫料弹窗
  openLittleMaterialRequestDialog?: () => void = () => {}
  // 打开仓储操作弹窗
  openInAndOutBoundDialog?: () => void = () => {}
  // 打开条码关联弹窗
  openBarcodeAssociationDialog?: () => void = () => {}
  // 打开图纸资料弹窗
  openPictureDrawingDialog?: () => void = () => {}
  //设备点检弹窗
  openDeviceInspectionDialog?: () => void = () => {}

  // 获取条码关联中的统计
  getBarcodeStatistics() {
    if (this.seqList) {
      let supportingCodeNum = 0
      let nameplateNoNum = 0
      for (const element of this.seqList) {
        if (element.supportingCode) {
          supportingCodeNum++
        }
        if (element.nameplateNo) {
          nameplateNoNum++
        }
      }
      this.barcodeStatistics = this.seqList.length + '/' + supportingCodeNum + '/' + nameplateNoNum
    } else {
      this.barcodeStatistics = ''
    }
  }

  async aboutToAppear() {
    if (this.workOrderCode) {
      this.seqList = await ProcessRequest.post('/api/v1/plan/seq/list', {
        workOrderCode: this.workOrderCode
      } as RequestParamModel)
    }
    this.getBarcodeStatistics()
  }

  build() {
    Stack() {
      Image($r('app.media.process_drawer'))
        .width('100%')
        .height('100%')

      Column() {
        Column(){
          Row() {
            Image($r('app.media.process_drawer_switch'))
              .width($r('app.float.virtualSize_48'))
              .height($r('app.float.virtualSize_48'))
              .fillColor($r('app.color.60FFFFFF'))
            Circle()
              .width($r('app.float.virtualSize_14'))
              .height($r('app.float.virtualSize_12'))
              .fill($r('app.color.FF453A'))
          }
          .height('5%')
        }
        .onClick(()=>{
          setTimeout(() => {
            this. isAuxiliaryViewOpen = false
          }, 500);
        })
        .width('15%')

        Blank().height('5.6%')
        Row({space: 12}) {
          // 左侧常用功能 和 流程相关操作
          Column() {
            // 注释说明
            Column({space: 3}) {
              Text('常用功能')
                .fontColor($r('app.color.FFFFFF'))
                .fontSize($r('app.float.fontSize_24'))
                .fontWeight(FontWeight.Medium)
              Text('智能仓储和生产相关功能')
                .fontColor($r('app.color.60FFFFFF'))
                .fontSize($r('app.float.fontSize_16'))
                .fontWeight(FontWeight.Regular)
            }
            .height('13.5%')
            .width('100%')
            .alignItems(HorizontalAlign.Start)
            // 常用功能
            Row() {
              // 零星叫料
              Stack() {
                Image($r("app.media.process_sporadic_call_material"))
                  .width('100%')
                  .height('100%')
                  .borderRadius($r('app.float.virtualSize_16'))
                Column({space: 2}) {
                  Text('零星叫料')
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_30'))
                    .fontWeight(FontWeight.Medium)
                  Text('向仓储工位发送物料需求')
                    .fontColor($r('app.color.60FFFFFF'))
                    .fontSize($r('app.float.fontSize_12'))
                    .fontWeight(FontWeight.Regular)
                }
                .height('61.3%')
                .justifyContent(FlexAlign.End)
              }
              .height('100%')
              .width('19.3%')
              .alignContent(Alignment.Top)
              .opacity(this.process.id ? 1 : 0.3)
              .onClick(()=>{
                if (!this.process.id) {
                  promptAction.showToast({
                    message: '请先选择工序开工！',
                    duration: 2000
                  });
                  return;
                }
                if (!this.currentUserId || this.currentUserId <= 0) {
                  promptAction.showToast({
                    message: '请先登录！',
                    duration: 2000
                  });
                  return;
                }
                if (this.openLittleMaterialRequestDialog) {
                  this.openLittleMaterialRequestDialog()
                }
              })
              // 仓储操作
              Stack() {
                Image($r("app.media.process_storage_operation"))
                  .width('100%')
                  .height('100%')
                  .borderRadius($r('app.float.virtualSize_16'))
                Column({space: 2}) {
                  Text('仓储操作')
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_30'))
                    .fontWeight(FontWeight.Medium)
                  Text('料箱抽屉操作')
                    .fontColor($r('app.color.60FFFFFF'))
                    .fontSize($r('app.float.fontSize_12'))
                    .fontWeight(FontWeight.Regular)
                }
                .height('61.3%')
                .justifyContent(FlexAlign.End)
              }
              .height('100%')
              .width('19.3%')
              .alignContent(Alignment.Top)
              .onClick(()=>{
                if (this.openInAndOutBoundDialog) {
                  this.openInAndOutBoundDialog()
                }
              })

              // 条码关联
              Stack() {
                Image($r("app.media.process_barcode_linkage"))
                  .width('100%')
                  .height('100%')
                  .borderRadius($r('app.float.virtualSize_16'))
                Column() {
                  Column({space: 2}) {
                    Text('条码关联')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_30'))
                      .fontWeight(FontWeight.Medium)
                    Text('当前工单的流水号/序列号/铭牌绑定')
                      .fontColor($r('app.color.60FFFFFF'))
                      .fontSize($r('app.float.fontSize_12'))
                      .fontWeight(FontWeight.Regular)
                      .textAlign(TextAlign.Center)
                      .textOverflow({ overflow: TextOverflow.Ellipsis })
                      .maxLines(1)
                  }
                  .height('61.3%')
                  .justifyContent(FlexAlign.End)
                  Column() {
                    Text(this.barcodeStatistics)
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_30'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('34.5%')
                  .justifyContent(FlexAlign.Center)
                }
                .width('100%')
                .height('100%')
              }
              .height('100%')
              .width('19.3%')
              .alignContent(Alignment.Top)
              .opacity(this.workOrderCode ? 1 : 0.3)
              .onClick(()=>{
                if (!this.workOrderCode) {
                  promptAction.showToast({
                    message: '请先选择工单！',
                    duration: 2000
                  });
                  return;
                }
                if (this.openBarcodeAssociationDialog) {
                  this.openBarcodeAssociationDialog()
                }
              })

              // 图纸资料
              Stack() {
                Image($r("app.media.process_drawing"))
                  .width('100%')
                  .height('100%')
                  .borderRadius($r('app.float.virtualSize_16'))
                Column() {
                  Column({space: 2}) {
                    Text('图纸资料')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_30'))
                      .fontWeight(FontWeight.Medium)
                    Text('查看产品图纸资料')
                      .fontColor($r('app.color.60FFFFFF'))
                      .fontSize($r('app.float.fontSize_12'))
                      .fontWeight(FontWeight.Regular)
                      .textAlign(TextAlign.Center)
                  }
                  .height('61.3%')
                  .justifyContent(FlexAlign.End)
                  Column() {
                    Text('99+')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_30'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('34.5%')
                  .justifyContent(FlexAlign.Center)
                }
                .width('100%')
                .height('100%')
              }
              .height('100%')
              .width('19.3%')
              .alignContent(Alignment.Top)
              .opacity(this.workOrderCode ? 1 : 0.3)
              .onClick(()=>{
                if (!this.workOrderCode) {
                  promptAction.showToast({
                    message: '请先选择工单！',
                    duration: 2000
                  });
                  return;
                }
                if (this.openPictureDrawingDialog) {
                  this.openPictureDrawingDialog()
                }
              })

              // 撤销报工
              Stack() {
                Image($r("app.media.process_drawing"))
                  .width('100%')
                  .height('100%')
                  .borderRadius($r('app.float.virtualSize_16'))
                Column({space: 2}) {
                  Text('撤销报工')
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_30'))
                    .fontWeight(FontWeight.Medium)
                  Text('流水号撤销报工')
                    .fontColor($r('app.color.60FFFFFF'))
                    .fontSize($r('app.float.fontSize_12'))
                    .fontWeight(FontWeight.Regular)
                }
                .height('61.3%')
                .justifyContent(FlexAlign.End)
              }
              .height('100%')
              .width('19.3%')
              .alignContent(Alignment.Top)
              .opacity(this.workOrderCode ? 1 : 0.3)
              .onClick(()=>{
                if (!this.workOrderCode) {
                  promptAction.showToast({
                    message: '请先选择工单！',
                    duration: 2000
                  });
                  return;
                }
                // if (this.openBarcodeAssociationDialog) {
                //   this.openBarcodeAssociationDialog()
                // }
              })
            }
            .height('33.6%')
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            // 流程相关
            Column() {
              Blank().height('6.7%')
              // 说明和创建流程
              Row() {
                Column() {
                  Text('流程单据')
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                  Text('自主配置处理单据，如返工、报故、委外')
                    .fontColor($r('app.color.60FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Regular)
                }
                .justifyContent(FlexAlign.SpaceBetween)
                .alignItems(HorizontalAlign.Start)

                Row({space: 4}) {
                  Image($r("app.media.general_create"))
                    .width($r('app.float.virtualSize_24'))
                    .height($r('app.float.virtualSize_24'))
                    .fillColor($r('app.color.0A84FF'))
                  Text('创建流程')
                    .fontColor($r('app.color.0A84FF'))
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                }
                .width('16.6%')
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.fontSize_16'))
                .opacity(this.currentUserId <= 0 ? 0.3 : 1)
                .onClick(()=>{
                  if (this.currentUserId <= 0) {
                    promptAction.showToast({
                      message: `请先登录！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                })
              }
              .height('13.4%')
              .width('95%')
              .justifyContent(FlexAlign.SpaceBetween)
              Blank().height('7.2%')

              // 流程相关操作
              Row() {
                // 委外申请
                Row() {
                  Text('委外申请')
                    .fontColor($r('app.color.0A84FF'))
                    .fontSize($r('app.float.fontSize_24'))
                    .fontWeight(FontWeight.Medium)
                }
                .width('13.5%')
                .height('100%')
                .justifyContent(FlexAlign.Center)
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.fontSize_16'))
                .opacity(this.currentUserId <= 0 ? 0.3 : 1)
                .onClick(()=>{
                  if (this.currentUserId <= 0) {
                    promptAction.showToast({
                      message: `请先登录！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                })
                // 提前下线
                Row() {
                  Text('提前下线')
                    .fontColor($r('app.color.0A84FF'))
                    .fontSize($r('app.float.fontSize_24'))
                    .height('100%')
                    .width('63%')
                    .textAlign(TextAlign.End)
                    .fontWeight(FontWeight.Medium)
                  Stack() {
                    Circle()
                      .width($r('app.float.virtualSize_32'))
                      .height($r('app.float.virtualSize_32'))
                      .fill($r('app.color.FF453A'))
                    Text(this.earlyOfflineNum > 99 ? '99+' : this.earlyOfflineNum.toString())
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_16'))
                      .textAlign(TextAlign.Center)
                      .width($r('app.float.virtualSize_32'))
                  }
                  .width('28%')
                  .height('100%')
                  .alignContent(Alignment.Center)
                }
                .width('17.3%')
                .height('100%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.fontSize_16'))
                .margin({left: '3.8%'})
                .opacity(this.currentUserId <= 0 ? 0.3 : 1)
                .onClick(()=>{
                  if (this.currentUserId <= 0) {
                    promptAction.showToast({
                      message: `请先登录！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                })
                // 委外审核
                Row() {
                  Text('委外审核')
                    .fontColor($r('app.color.0A84FF'))
                    .fontSize($r('app.float.fontSize_24'))
                    .height('100%')
                    .width('63%')
                    .textAlign(TextAlign.End)
                    .fontWeight(FontWeight.Medium)
                  Stack() {
                    Circle()
                      .width($r('app.float.virtualSize_32'))
                      .height($r('app.float.virtualSize_32'))
                      .fill($r('app.color.FF453A'))
                    Text(this.outsourcedAuditNum > 99 ? '99+' : this.outsourcedAuditNum.toString())
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_16'))
                      .textAlign(TextAlign.Center)
                      .width($r('app.float.virtualSize_32'))
                  }
                  .width('28%')
                  .height('100%')
                  .alignContent(Alignment.Center)
                }
                .width('17.3%')
                .height('100%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.fontSize_16'))
                .margin({left: '3.8%'})
                .opacity(this.currentUserId <= 0 ? 0.3 : 1)
                .onClick(()=>{
                  if (this.currentUserId <= 0) {
                    promptAction.showToast({
                      message: `请先登录！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                })
              }
              .width('95%')
              .height('13.4%')
            }
            .height('49.4%')
            .width('100%')
            .borderRadius($r('app.float.virtualSize_16'))
            .borderWidth(1)
            .borderColor($r('app.color.15FFFFFF'))
          }
          .height('100%')
          .width('63.5%')
          .justifyContent(FlexAlign.SpaceBetween)

          // 设备功能和设备点检
          Column() {
            Blank().height('3.5%')
            // 说明和设备点检
            Row() {
              Column() {
                Text('设备功能')
                  .fontColor($r('app.color.FFFFFF'))
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
                Text('设备感知与控制')
                  .fontColor($r('app.color.60FFFFFF'))
                  .fontSize($r('app.float.fontSize_16'))
                  .fontWeight(FontWeight.Regular)
              }
              .justifyContent(FlexAlign.SpaceBetween)
              .alignItems(HorizontalAlign.Start)

              Row({space: 4}) {
                Image($r('app.media.process_component_device_record'))
                  .width($r('app.float.virtualSize_24'))
                  .height($r('app.float.virtualSize_24'))
                  .fillColor($r('app.color.0A84FF'))
                Text('设备点检')
                  .fontColor($r('app.color.0A84FF'))
                  .fontSize($r('app.float.fontSize_24'))
                  .fontWeight(FontWeight.Medium)
              }
              .width('35.6%')
              .height('100%')
              .justifyContent(FlexAlign.Center)
              .backgroundColor($r('app.color.20FFFFFF'))
              .borderRadius($r('app.float.fontSize_16'))
              .onClick(()=>{
                if (this.openDeviceInspectionDialog) {
                  this.openDeviceInspectionDialog()
                }
              })
            }
            .width('90%')
            .height('6.6%')
            .justifyContent(FlexAlign.SpaceBetween)
            Blank().height('4.7%')
            //  设备列表和设备控制
            Column() {
              // 照明+空气净化器
              Row({space: 6}) {
                // 照明
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.lighting.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('照明')
                      .fontColor(this.lighting.lighting === 1 ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor(this.lighting.lighting === 1 ? $r('app.color.E5E5E5') : $r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                .onClick(()=>{
                  let item: MqttDataItem = {
                    tag: 'lighting',
                    value: this.lighting?.lighting! === 1 ? 0 : 1
                  }
                  let mqttData: MqttCmdData = {
                    w: [item]
                  }
                  // 发送控制命令
                  MqttManager.publish(CommonConstants.mqttSubscribePublish, JSON.stringify(mqttData))
                  // if (this.lighting?.OnlineStatus! === 1) {
                  //   this.lighting = {
                  //     lighting: item.value,
                  //     OnlineStatus: 1
                  //   }
                  // }
                })
                // 排烟机
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.weldFumeExtractor.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('空气净化器')
                      .fontColor(this.weldFumeExtractor.ExhaustFan === 1 ? $r('app.color.90000000') : $r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor(this.weldFumeExtractor.ExhaustFan === 1 ? $r('app.color.E5E5E5') : $r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                .onClick(()=>{
                  let item: MqttDataItem = {
                    tag: 'ExhaustFan',
                    value: this.weldFumeExtractor?.ExhaustFan! === 1 ? 0 : 1
                  }
                  let mqttData: MqttCmdData = {
                    w: [item]
                  }
                  // 发送控制命令
                  MqttManager.publish(CommonConstants.mqttSubscribePublish, JSON.stringify(mqttData))
                  // if (this.weldFumeExtractor?.OnlineStatus! === 1) {
                  //   this.weldFumeExtractor = {
                  //     ExhaustFan: item.value,
                  //     OnlineStatus: 1
                  //   }
                  // }
                })
              }
              .height('18.9%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              // 工业相机+电烙铁
              Row({space: 6}) {
                // 工业相机
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.cameraStatus ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('工业相机')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .enabled(this.cameraStatus )
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                .onClick(()=>{
                 router.pushUrl({
                   url: 'pages/CameraView',
                 })
                })
                // 电烙铁
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.solderingIron.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('电烙铁')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                  Column() {
                    Row() {
                      Text('设定温度 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.solderingIron.SolderingCurrTemp ? this.solderingIron.SolderingCurrTemp + '℃' : '-')
                        .fontColor(this.solderingIron.SolderingCurrTemp ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                  }
                  .height('56.6%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                .onClick(()=>{
                  if (this.solderingIron?.OnlineStatus !== 1) {
                    promptAction.showToast({
                      message: `设备不在线，请检查设备连接！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                  router.pushUrl({
                    url: 'pages/DeviceControllerPage',
                    params: {
                      deviceType: 1,
                      onlineStatus: this.solderingIron?.OnlineStatus
                    }
                  })
                })
              }
              .height('18.9%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              // 三色灯+电动螺丝刀
              Row({space: 6}) {
                // 三色灯
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.threeColourLight.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('三色灯')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                  Column() {
                    Row() {
                      Text('当前颜色 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.threeColourLight.LedRed! === 1 ? '红色' : (this.threeColourLight.LedOrange! === 1 ? '黄色' : (this.threeColourLight.LedGreen! === 1 ? '绿色' : '-')))
                        .fontColor(this.threeColourLight.LedRed! === 1 ? $r('app.color.FF453A') : (this.threeColourLight.LedOrange! === 1 ? $r('app.color.FFD60A') : (this.threeColourLight.LedGreen! === 1 ? $r('app.color.30D158') : $r('app.color.20FFFFFF'))))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    Row() {
                      Text('    蜂鸣器 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.threeColourLight.Buzzer! === 1 ? '开启' : '关闭')
                        .fontColor(this.threeColourLight.Buzzer! === 1 ? $r('app.color.0A84FF') : $r('app.color.15FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                  }
                  .height('56.6%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                .onClick(()=>{
                  if (this.threeColourLight?.OnlineStatus !== 1) {
                    promptAction.showToast({
                      message: `设备不在线，请检查设备连接！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                  router.pushUrl({
                    url: 'pages/DeviceControllerPage',
                    params: {
                      deviceType: 0,
                      onlineStatus: this.threeColourLight?.OnlineStatus
                    }
                  })
                })
                // 电动螺丝刀
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.screwdriver.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('电动螺丝刀')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                  Column() {
                    Row() {
                      Text('预设转速 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.screwdriver.TighteRotationDirection ? this.solderingIron + '℃' : '-')
                        .fontColor(this.solderingIron.SolderingSetTemp ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    Row() {
                      Text('预设力矩 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.solderingIron.SolderingSetTemp ? this.solderingIron + '℃' : '-')
                        .fontColor(this.solderingIron.SolderingSetTemp ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    Row() {
                      Text('预设圈数 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.solderingIron.SolderingSetTemp ? this.solderingIron + '℃' : '-')
                        .fontColor(this.solderingIron.SolderingSetTemp ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                  }
                  .height('56.6%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.20FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                .onClick(()=>{
                  if (this.solderingIron?.OnlineStatus !== 1) {
                    promptAction.showToast({
                      message: `设备不在线，请检查设备连接！`,
                      duration: 1500,
                      bottom: 100
                    })
                    return
                  }
                  router.pushUrl({
                    url: 'pages/DeviceControllerPage',
                    params: {
                      deviceType: 2,
                      onlineStatus: this.screwdriver?.OnlineStatus
                    }
                  })
                })
              }
              .height('18.9%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              // 读卡器+温湿度传感器
              Row({space: 6}) {
                // 读卡器
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.cardReader.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('读卡器')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                  Column() {
                    Row() {
                      Text('读取值 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.cardReader?.RfidCardNum1 && this.cardReader?.RfidCardNum2 ? this.cardReader.RfidCardNum1 + this.cardReader.RfidCardNum2 : '-')
                        .fontSize($r('app.float.fontSize_16'))
                        .fontColor(this.cardReader?.RfidCardNum1 && this.cardReader?.RfidCardNum2 ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    .padding({left: '19.2%'})
                  }
                  .height('56.6%')
                  .width('100%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.10FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                // 温湿度传感器
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.tempHumiditySensor.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('温湿度计')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                  Column() {
                    Row() {
                      Text('温度 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.tempHumiditySensor?.Temperature ? this.tempHumiditySensor.Temperature / 10 + '℃' : '-')
                        .fontSize($r('app.float.fontSize_16'))
                        .fontColor(this.tempHumiditySensor?.Temperature ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    .padding({left: '19.2%'})
                    Row() {
                      Text('湿度 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.tempHumiditySensor?.Humidity ? this.tempHumiditySensor.Humidity / 10 + '%RH' : '-')
                        .fontSize($r('app.float.fontSize_16'))
                        .fontColor(this.tempHumiditySensor?.Temperature ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    .padding({left: '19.2%'})
                  }
                  .height('56.6%')
                  .width('100%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.10FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
              }
              .height('18.9%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
              // 扫码枪+防静电手环
              Row({space: 6}) {
                // 扫码枪
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.scanningGunStatus ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('扫码枪')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.10FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
                // 防静电手环
                Column() {
                  Row({space: 5}) {
                    Circle()
                      .width($r('app.float.virtualSize_14'))
                      .height($r('app.float.virtualSize_14'))
                      .fill(this.tempHumiditySensor.OnlineStatus === 1 ? $r('app.color.30D158') : $r('app.color.15FFFFFF'))
                    Text('防静电手环')
                      .fontColor($r('app.color.FFFFFF'))
                      .fontSize($r('app.float.fontSize_24'))
                      .fontWeight(FontWeight.Medium)
                  }
                  .height('43.4%')
                  .width('84.9%')
                  Column() {
                    Row() {
                      Text('佩戴 ')
                        .fontColor($r('app.color.FFFFFF'))
                        .fontSize($r('app.float.fontSize_16'))
                        .fontWeight(FontWeight.Lighter)
                      Text(this.wristStrap?.RingWearNormal! === 1 ? '是' : '否')
                        .fontSize($r('app.float.fontSize_16'))
                        .fontColor(this.wristStrap?.RingWearNormal! === 1 ? $r('app.color.0A84FF') : $r('app.color.20FFFFFF'))
                        .fontWeight(FontWeight.Bold)
                    }
                    .width('100%')
                    .padding({left: '19.2%'})
                  }
                  .height('56.6%')
                  .width('100%')
                }
                .height('100%')
                .width('44.2%')
                .backgroundColor($r('app.color.10FFFFFF'))
                .borderRadius($r('app.float.virtualSize_16'))
              }
              .height('18.9%')
              .width('100%')
              .justifyContent(FlexAlign.Center)
            }
            .width('100%')
            .layoutWeight(1)
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .width('31.3%')
          .height('100%')
          .borderRadius($r('app.float.virtualSize_16'))
          .borderWidth(1)
          .borderColor($r('app.color.15FFFFFF'))
        }
        .width('100%')
        .height('83.8%')
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .transition(
      TransitionEffect.OPACITY
        .animation({ duration: 1000, curve: Curve.EaseOut }) // 300ms缓出动画
        .combine(TransitionEffect.translate({ y: 300 })) // 初始位置在屏幕下方
    )
  }
}