tianmucloudmobile/pages/bluetooth/set/set.vue

<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <u-row>
        <u-col span="2">
          <view class="status-btn" :class="{ active_btn: communicationLink_set }">Link</view>
        </u-col>
        <u-col span="2">
          <view class="status-btn" :class="{ active_btn: bleConnected }">blue</view>
        </u-col>
        <u-col span="6" textAlign="left">
          <text class="title">长沙亿旭智能</text>
        </u-col>
        <u-col span="2">
        </u-col>
      </u-row>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 日期时间显示 -->
      <view class="datetime-box">
        <text class="datetime-text">{{ currentDateTime }}</text>
      </view>

      <view class="status-indicators">
        <!-- 状态指示器 -->
        <view class="indicator-row">
          <view class="indicator-item" v-for="(item, index) in indicators1" :key="index">
            <view class="status-indicator" :class="{ 'active': item.value }"></view>
            <text class="indicator-text">{{ item.label }}</text>
          </view>
        </view>
        <view class="indicator-row">
          <view class="indicator-item" v-for="(item, index) in indicators2" :key="index">
            <view class="status-indicator" :class="{ 'active': item.value }"></view>
            <text class="indicator-text">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 传感器读数和控制 -->
      <view class="sensor-controls">
        <view class="control-item" v-for="(item, index) in sensorControls" :key="index">
          <view class="control-label">{{ item.label }}</view>
          <view class="control-value">
            <u--input
                border="none"
                v-model="item.value"
            ></u--input>
          </view>
          <view class="control-buttons">
            <u-button
                v-for="(btn, btnIndex) in item.buttons"
                :key="btnIndex"
                :plain="true" :hairline="true"
                :class="getButtonClass(btn)"
                size="mini"
                @click="handleButtonClick(btn.text,btn.action)"
            >
              {{ btn.text }}
            </u-button>
          </view>
        </view>
      </view>
    </view>
    <u-modal :show="confirmShow" title="提示" :content='confirmContent' :showCancelButton=true  @cancel="cancel"  @confirm="confirm" ></u-modal>
  </view>
</template>

<script>
import {writeRegister,heartbeat} from '@/utils/modbus.js';
export default {
  data() {
    return {
      communicationLink_set: false,
      communicationTimer_set: null,
      selectAction: '',
      currentDateTime: '0000-00-00 00:00:00',
      currentTab: 0,
      rxCount: 0,
      txCount: 0,
      confirmShow: false,
      confirmContent: '是否确定执行该操作？',
      workMode: '', // 添加工作模式变量
      indicators1: [
        {name: 'tilt', label: '倾角', value: false},
        {name: 'limit', label: '限位', value: false},
        {name: 'overcurrent', label: '过流', value: false}
      ],
      indicators2: [
        {name: 'rtc', label: 'RTC', value: false},
        {name: 'wind', label: '大风', value: false},
        {name: 'undervoltage', label: '欠压', value: false}
      ],
      sensorControls: [
        {
          name: 'sunAltitude',
          label: '太阳高度角',
          value: '',
          buttons: [
            {text: '自动', action: 'auto', type: 'primary'}
          ]
        },
        {
          name: 'sunAzimuth',
          label: '太阳方位角',
          value: '',
          buttons: [
            {text: '手动', action: 'manual', type: 'primary'},
            {text: '标定', action: 'calibrate', type: 'primary'}
          ]
        },
        {
          name: 'targetAngle',
          label: '目标角度',
          value: '',
          buttons: [
            {text: '向东', action: 'east', type: 'primary'},
            {text: '放平', action: 'level', type: 'primary'}
          ]
        },
        {
          name: 'angle1',
          label: '角度1',
          value: '',
          buttons: [
            {text: '向西', action: 'west', type: 'primary'},
            {text: '雪', action: 'snow', type: 'primary'}
          ]
        },
        {
          name: 'angle2',
          label: '角度2',
          value: '',
          buttons: [
            {text: '雨', action: 'rain', type: 'primary'},
            {text: '风', action: 'wind', type: 'primary'}
          ]
        },
        {
          name: 'motor1Current',
          label: '电机1电流(A)',
          value: '',
          buttons: []
        },
        {
          name: 'motor2Current',
          label: '电机2电流(A)',
          value: '',
          buttons: []
        },
        {
          name: 'temperature',
          label: '温度(°)',
          value: '',
          buttons: []
        },
        {
          name: 'voltage',
          label: '电压(V)',
          value: '',
          buttons: [
            {text: '校正时间', action: 'calibrateTime', type: 'primary', number: 1}
          ]
        }
      ]
    }
  },
  computed: {
    bleConnected() {
      return this.$store.getters['ble/connected']
    },
    bleData() {
      return this.$store.getters['ble/data']
    }
  },
  watch: {
    bleData: {
      handler(newData, oldData) {
        if (newData) {
          console.log('newData:', newData)
          // 清除之前的定时器
          if (this.communicationTimer_set) {
            clearTimeout(this.communicationTimer_set)
            this.communicationTimer_set = null
          }
          // 设置通信链接状态为 true
          this.communicationLink_set = true
          this.updateSensorData(newData)


        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    cancel(){
      this.confirmShow = false
    },
    confirm() {
      switch (this.selectAction) {
        case 'auto': // 自动
          writeRegister("READ_AUTO",null);
          break
        case 'manual': // 手动
          writeRegister("READ_MANUAL",null)
          break
        case 'calibrate':  // 标定
          // writeRegister("WRITE_REGISTER",null)
          break
        case 'east': // 向东
          writeRegister("READ_DOWN",null)
          break
        case 'level': // 放平
          writeRegister("FLATTEN",null)
          break
        case 'west': // 向西
          writeRegister("READ_UP",null)
          break
        case 'snow': // 雪
          writeRegister("SNOW",null)
          break
        case 'rain': // 雨
          writeRegister("RAIN",null)
          break
        case 'wind': // 风
          writeRegister("WIND",null)
          break
        case 'calibrateTime':  // 校正时间
          writeRegister("READ_TIME",this.getCurrentTimeValues())
          break
        case 'cancel': //取消
          writeRegister("READ_CANCEL",null)
      }
      this.confirmShow = false;
      uni.showToast({
        title: '操作执行成功！',
        icon: 'success',
        duration: 2000
      });
    },
    handleButtonClick(text,action) {
      console.log(action)
      this.selectAction = action;
      this.confirmContent = `是否确定执行`+text+`相关的操作？`;
      this.confirmShow = true;
    },
    // 获取按钮的class
    getButtonClass(btn) {
      // 建立action与工作模式的映射关系
      const actionToModeMap = {
        'auto': '自动',
        'manual': '手动',
        'level': '放平',
        'snow': '雪',
        'rain': '雨',
        'wind': '风',
        'east':'向东',
        'west':'向西',
      };

      let classes = ['btn-broder'];

      // 添加宽度类
      if (btn.number == 1) {
        classes.push('one-btn');
      }

      // 如果是工作模式按钮且与当前工作模式匹配，则添加绿色背景类
      if (actionToModeMap[btn.action] && this.workMode === actionToModeMap[btn.action]) {
        classes.push('active-work-mode');
      }

      return classes;
    },
    updateSensorData(data) {
      // 根据蓝牙数据更新传感器值
      this.sensorControls.forEach(control => {
        switch (control.name) {
          case 'sunAltitude': // 太阳高度角
            if (data.qEleAngle_53 !== undefined) {
              control.value = data.qEleAngle_53
            }
            break
          case 'sunAzimuth': // 太阳方位角
            if (data.qAzimuth_54 !== undefined) {
              control.value = data.qAzimuth_54
            }
            break
          case 'targetAngle': // 目标角度
            if (data.qTargetAngle_42 !== undefined) {
              control.value = data.qTargetAngle_42
            }
            break
          case 'angle1': // 角度1
            if (data.qRealAngle_43 !== undefined) {
              control.value = data.qRealAngle_43
            }
            break
          case 'angle2': // 角度2
            if (data.qRealAngle_31 !== undefined) {
              control.value = data.qRealAngle_31
            }
            break
          case 'motor1Current': // 电机1电流
            if (data.MotorCurrent_30 !== undefined) {
              control.value = data.MotorCurrent_30
            }
            break
          case 'motor2Current': // 电机2电流
            if (data.MotorCurrent_35 !== undefined) {
              control.value = data.MotorCurrent_35
            }
            break
          case 'temperature': // 温度
            if (data.Temperature_33 !== undefined) {
              control.value = data.Temperature_33
            }
            break
          case 'voltage': // 电压
            if (data.Battery_32 !== undefined) {
              control.value = data.Battery_32
            }
            break
        }
      })

      console.log('WorkModle_41:',data.WorkModle_41);
      // 根据C++中的工作模式解析逻辑更新workMode
      if (data.WorkModle_41 !== undefined) {
        const workModeBits = data.WorkModle_41.toString();
        switch (workModeBits) {
          case "100000": // 自动
            this.workMode = '自动'
            break
          case "10000": // 手动
            this.workMode = '手动'
            break
          case "1000000": // 放平
            this.workMode = '放平'
            break
          case "1000000000": // 雨
            this.workMode = '雨'
            break
          case "100000000": // 雪
            this.workMode = '雪'
            break
          case "10000000000": // 风
            this.workMode = '风'
            break
          case "10000000": // 指定
            this.workMode = '指定'
            break
          case "11000": // 向东
            this.workMode = '向东'
            break
          case "10100": // 向西
            this.workMode = '向西'
            break
          default:
            this.workMode = '未知模式'
            break
        }
      }

      if (data.Message_40 !== undefined) {
        // 根据二进制字符串更新指示器状态
        const messageBits = data.Message_40.toString()
        console.log('messageBits:',messageBits)
        // 清除所有状态
        this.indicators1.forEach(item => item.value = false)
        this.indicators2.forEach(item => item.value = false)

        // 根据实际协议确定位的含义
        if(messageBits === "100") {
          this.indicators1[0].value = true // 倾角
        } else if(messageBits === "10") {
          this.indicators1[2].value = true // 过流
        } else if(messageBits === "1") {
          this.indicators1[1].value = true // 限位
        } else if(messageBits === "110") {
          this.indicators1[2].value = true // 过流
          this.indicators1[1].value = true // 限位
        } else if(messageBits === "101") {
          this.indicators1[0].value = true // 倾角
          this.indicators1[2].value = true // 过流
        } else if(messageBits === "11") {
          this.indicators1[1].value = true // 限位
          this.indicators1[2].value = true // 过流
        } else if(messageBits === "111") {
          this.indicators1[0].value = true // 倾角
          this.indicators1[1].value = true // 限位
          this.indicators1[2].value = true // 过流
        }
      }

      // 更新时间显示
      if (data.nowtime !== undefined) {
        this.currentDateTime = data.nowtime
      }

      // 设置6秒后将 communicationLink_set 设置为 false 的定时器
      this.communicationTimer_set = setTimeout(() => {
        this.communicationLink_set = false
        this.communicationTimer_set = null
      }, 5000)
    },
    getCurrentTimeValues(){
      const now = new Date();
      // 获取各个时间组件
      const year = now.getFullYear();        // 年份 (例如: 2024)
      const month = now.getMonth() + 1;      // 月份 (0-11, 需要+1变为1-12)
      const day = now.getDate();             // 日期 (1-31)
      const hours = now.getHours();          // 小时 (0-23)
      const minutes = now.getMinutes();      // 分钟 (0-59)
      const seconds = now.getSeconds();      // 秒 (0-59)

      // 返回时间值数组，每个值都是16位整数
      return [
        year,      // 年
        month,     // 月
        day,       // 日
        hours,     // 时
        minutes,   // 分
        seconds    // 秒
      ];
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;

  .link-btn {
    background-color: #ff4757;
    border: none;
    width: 60px;
    margin-left: 0px;
  }

  .title {
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }

  .status-btn {
    background-color: #ff4757;
    border: none;
    margin-left: 0px;
    padding: 0px;
    width: 40px;
    text-align: center;
    color: white;
    border-radius: 4px;
    height: 20px;
    line-height: 20px;
  }
  .active_btn {
    background-color: yellowgreen !important;
  }
}

.main-content {
  flex: 1;
  padding: 20rpx;
}

.work-mode-display {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  text-align: center;

  .work-mode-text {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }
}

.datetime-box {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  text-align: center;

  .datetime-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.status-indicators {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;

  .indicator-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20rpx;

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

  .indicator-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    gap: 10rpx;
  }

  .indicator-text {
    font-size: 24rpx;
    color: #666;
  }
}

.sensor-controls {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: auto;
  height: calc(100% - 220rpx);

  .control-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .control-label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    width: 240rpx;
    text-align: center;
    margin-right: 20rpx;
  }

  .control-value {
    background-color: #f8f9fa;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    width: 140rpx;
    height: 60rpx;
    text-align: center;
    margin-right: 20rpx;
  }

  .control-buttons {
    display: flex;
    gap: 20rpx;
  }

  .u-button--mini {
    width: 120rpx;
  }
}

.one-btn {
  width: 240rpx !important;
}

.btn-broder {
  border: 1rpx solid #dadbde;
}

// 活跃的工作模式按钮样式
.active-work-mode {
  background-color: #00ff00 !important; // 绿色背景
  color: #000 !important;
  border-color: #00ff00 !important;
}

.status-indicator {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10rpx;

  &.active {
    background-color: red;
  }
}
</style>