tianmucloudmobile/pages/components/DeviceStatusInfo.vue

<!-- components/DeviceStatusInfo.vue -->
<template>
  <view class="device-status-info" >
    <!-- 运行模式信息 -->
    <view class="info-section">
      <view class="info-title">运行模式:</view>
      <view class="info-content">
        <text class="mode-text" :class="modeClass">{{ currentMode }}</text>
      </view>
    </view>

    <!-- 故障信息 -->
    <view class="info-section">
      <view class="info-title">故障状态:</view>
      <view class="info-content">
        <text class="fault-text" :class="faultClass">{{ faultInfo }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "DeviceStatusInfo",
  computed: {
    bleConnected() {
      return this.$store.getters['ble/connected']
    },
    bleData() {
      return this.$store.getters['ble/data']
    },
    // 当前运行模式
    currentMode() {
      if (!this.bleData) return '未知';

      // 根据 WorkModle_41 二进制值判断模式（与set.vue中逻辑一致）
      const workMode = this.bleData.WorkModle_41;
      if (workMode !== undefined) {
        const workModeBits = workMode.toString();
        switch (workModeBits) {
          case "100000": // 自动
            return '自动';
          case "10000": // 手动
            return '手动';
          case "1000000": // 放平
            return '放平';
          case "1000000000": // 雨
            return '雨';
          case "100000000": // 雪
            return '雪';
          case "10000000000": // 风
            return '风';
          case "10000000": // 指定
            return '指定';
          case "11000": // 向东
            return '向东';
          case "10100": // 向西
            return '向西';
          default:
            return '未知模式';
        }
      }
      return '未知模式';
    },
    // 故障信息 (按照modbus.js中的逻辑)
    faultInfo() {
      if (!this.bleData) return '无数据';

      // 使用已解析的故障码信息（与modbus.js中逻辑一致）
      if (this.bleData.FaultCode_10 !== undefined) {
        if (this.bleData.FaultCode_10 === '0') {
          return '无故障';
        } else {
          return this.bleData.FaultCodeDescription || '未知故障';
        }
      }
      return '未知状态';
    },
    // 获取模式显示样式类
    modeClass() {
      const mode = this.currentMode;
      if (mode === '手动') {
        return 'manual-mode';
      } else if (mode === '自动') {
        return 'auto-mode';
      } else if (['放平', '雨', '雪', '风', '指定', '向东', '向西'].includes(mode)) {
        return 'other-mode';
      }
      return 'unknown-mode';
    },
    // 获取故障显示样式类
    faultClass() {
      if (this.faultInfo === '无故障') {
        return 'no-fault';
      } else {
        return 'has-fault';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.device-status-info {
  background-color: #fff;
  border-top: 1px solid #ddd;
  padding: 10px 15px;
  margin-top: auto;
  display: flex;
  height: 40px;
  justify-content: space-around;
}

.info-section {
  display: flex;
  margin-bottom: 8px;

  &:last-child {
    margin-bottom: 0;
  }
}

.info-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  width: 65px;
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.mode-text {
  font-size: 14px;
  padding: 0px 10px 0px 2px;
  border-radius: 4px;
  &.manual-mode {
    color: #e17055;
  }
  &.auto-mode {
    color: #666;
  }
  &.other-mode {
    color: #666;
  }
  &.unknown-mode {
    color: #666;
  }
}

.fault-text {
  font-size: 14px;
  padding: 0px 10px 0px 2px;
  border-radius: 4px;
  &.no-fault {
    color: #666;
  }
  &.has-fault {
    color: #666;
  }
}
</style>