tianmucloudmobile/pages/bluetooth/set/one.vue

<template>
  <view class="container">


    <!-- 头部区域 -->
    <view class="header">
      <u-row>
        <u-col span="2">
          <view class="status-btn" :class="{ active_btn: communicationLink_1 }">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>

    <!-- 主要内容区域 -->
    <scroll-view class="content" scroll-y>
      <view class="param-section">
        <!-- 经度 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="primary" size="mini" class="param-label">经度</u-button>
          </view>
          <view class="input-class">
            <u-input
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
                v-model="params.longitude"
                placeholder=""
                class="param-input"
            ></u-input>
          </view>
        </view>

        <!-- 纬度 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="primary" size="mini" class="param-label">纬度</u-button>
          </view>
          <view class="input-class">
            <u-input
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
                v-model="params.latitude"
                placeholder=""
                class="param-input"
            ></u-input>
          </view>
        </view>

        <!-- 时区 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="primary" size="mini" class="param-label">时区</u-button>
          </view>
          <view class="input-class">
            <u-input
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
                v-model="params.timezone"
                placeholder=""
                class="param-input"
            ></u-input>
          </view>
          <u-radio-group v-model="params.timezoneMode" class="radio-group">
            <u-radio label="读" name="read"></u-radio>
            <u-radio label="写" name="write"></u-radio>
          </u-radio-group>
          <u-button :plain="true" :hairline="true" :disabled="params.timezoneMode == 'read'"  size="mini" class="action-btn" @click="addValue('READ_TEMPERATURE')">天文写入</u-button>
        </view>

        <!-- 频点 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">频点[0-83]</u-button>
          </view>
          <view class="input-class">
            <u-input
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
                v-model="params.frequency"
                placeholder=""
                class="param-input"
            ></u-input>
          </view>
        </view>

        <!-- 网络ID -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">网络ID</u-button>
          </view>
          <view class="input-class">
            <u-input
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
                v-model="params.networkId"
                placeholder=""
                class="param-input"
            ></u-input>
          </view>
        </view>

        <!-- 模块地址 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">模块地址</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.moduleAddress"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
          <u-checkbox-group
              placement="column">
            <u-checkbox v-model="params.wWl" class="checkbox" label="W_WL"  @change="handleWwlChange" >W_WL</u-checkbox>
          </u-checkbox-group>
          <u-button :plain="true" :hairline="true"  :disabled="params.wWl" size="mini" class="action-btn" @click="addValue('WRITE_ADDRESS')">参数写入</u-button>
        </view>

        <!-- 东限位 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="primary" size="mini" class="param-label">东限位(°)</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.eastLimit"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
        </view>

        <!-- 西限位 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="primary" size="mini" class="param-label">西限位(°)</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.westLimit"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
          <u-checkbox-group
              placement="column">
            <u-checkbox v-model="params.wLim" class="checkbox" label="W_Lin" @change="limit">W_Lim</u-checkbox>
          </u-checkbox-group>
          <u-button :plain="true" :hairline="true" :disabled="params.wLim"  size="mini" class="action-btn" @click="addValue('READ_LIMIT')">限位写入</u-button>
        </view>

        <!-- 宽度 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">宽度</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.width"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
        </view>

        <!-- 间距 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">间距</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.spacing"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
        </view>

        <!-- 上坡度 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">上坡度</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.uphillSlope"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
        </view>

        <!-- 下坡度 -->
        <view class="param-row">
          <view class="btn-class">
            <u-button type="warning" size="mini" class="param-label">下坡度</u-button>
          </view>
          <view class="input-class">
            <u-input
                v-model="params.downhillSlope"
                placeholder=""
                class="param-input"
                @focus="editStatus = true"
                @blur="handleBlurWithDelay"
            ></u-input>
          </view>
          <u-radio-group v-model="params.downhillMode" class="radio-group">
            <u-radio label="读" name="read"></u-radio>
            <u-radio label="写" name="write"></u-radio>
          </u-radio-group>
          <u-button :plain="true" :hairline="true" :disabled="params.downhillMode == 'read'"  size="mini" class="action-btn" @click="addValue('READ_INCLINATION')">参数写入</u-button>
        </view>
      </view>
    </scroll-view>
    <u-modal :show="confirmShow" title="提示" :content='confirmContent' :showCancelButton=true  @cancel="cancel"  @confirm="confirm" ></u-modal>

  </view>
</template>

<script>
import {writeRegister} from '@/utils/modbus.js';
export default {
  data() {
    return {
      editStatus: false,
      communicationLink_1: false,
      communicationTimer_1: null, // 添加这一行用于保存定时器 ID
      selectAction: '',
      confirmShow: false,
      confirmContent: '是否确定执行该操作？',
      checkboxValue1: [],
      activeTab: 'home',
      params: {
        longitude: '',
        latitude: '',
        latMode: 'read',
        timezone: '',
        timezoneMode: 'read',
        frequency: '',
        networkId: '',
        moduleAddress: '',
        wWl: true,
        eastLimit: '',
        westLimit: '',
        wLim: true,
        width: '',
        spacing: '',
        uphillSlope: '',
        uphillMode: 'read',
        downhillSlope: '',
        downhillMode: 'read'
      }
    }
  },
  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)
          // 清除之前的定时器
          if (this.communicationTimer_1) {
            clearTimeout(this.communicationTimer_1)
            this.communicationTimer_1 = null
          }
          // 设置通信链接状态为 true
          this.communicationLink_1 = true
          if (!this.editStatus){
            this.updateSensorData(newData)
          }

        }
      },
      deep: true, // 深度监听，确保嵌套对象变化时也能触发
      immediate: true // 立即执行一次
    }
  },
  methods: {
    limit(value){
      console.log('限制选择:', value)
      this.params.wLim = !value;
    },
    handleWwlChange(value){
      this.params.wWl = !value;
    },
    handleBlurWithDelay() {
      setTimeout(() => {
        this.editStatus = false;
      }, 1000);
    },
    cancel(){
      this.confirmShow = false
    },
    addValue(action) {
      this.selectAction = action;
      this.confirmShow = true;
    },
    confirm() {
      const action = this.selectAction;
      switch (action) {
        case 'READ_TEMPERATURE': // 天文写入
          const longitude = parseFloat(this.params.longitude || "0");
          const latitude = parseFloat(this.params.latitude || "0");
          const timezone = parseFloat(this.params.timezone || "0");

          // 转换为带两位小数的整数（乘以100）
          const intValue1 = Math.round(longitude * 100);
          const intValue2 = Math.round(latitude * 100);
          const intValue3 = Math.round(timezone * 100);
          // 创建数组存储值
          const values = [];
          values.push(intValue1);
          values.push(intValue2);
          values.push(intValue3);

          writeRegister("READ_TEMPERATURE",values);
          break
        case 'WRITE_ADDRESS': // 网络地址写入
          // 获取输入值
          let frequency = parseInt(this.params.frequency) || 0;     // 频点
          let networkId = parseInt(this.params.networkId) || 0;     // 网络ID
          let moduleAddr = parseInt(this.params.moduleAddress) || 0; // 模块地址
          // 限制频点范围为0-83
          frequency = Math.max(0, Math.min(83, frequency));
          // 计算模块地址: 网络ID * 256 + 设备地址
          let calculatedModuleAddr = (networkId * 256) + moduleAddr;
          // 创建值数组
          let addressValues = [frequency, networkId, calculatedModuleAddr];
          // 调用写入寄存器函数
          writeRegister("READ_FREQUENCY", addressValues);
          break

        case 'READ_LIMIT': // 限位写入
          let eastLimit = parseInt(this.params.eastLimit) || 0;
          let westLimit = parseInt(this.params.westLimit) || 0;
          let limit = [eastLimit, westLimit];
          writeRegister("READ_LIMIT",limit);
          break
        case 'READ_INCLINATION': // 坡度写入
          let width = parseFloat( this.params.width);
          let interval = parseFloat(this.params.spacing);
          let upgrade = parseFloat(this.params.uphillSlope);
          let downgrade = parseFloat(this.params.downhillSlope);
          // 转换为16位整数并乘以100
          let number = Math.floor(width * 100);
          let number1 = Math.floor(interval * 100);
          let number2 = Math.floor(upgrade * 100);
          let number3 = Math.floor(downgrade * 100);
          let number4 = [number, number1, number2, number3];
          writeRegister("READ_INCLINATION",number4);
          break
      }
      this.confirmShow = false;
      uni.showToast({
        title: '操作执行成功！',
        icon: 'success',
        duration: 2000
      });
    },
    handleLink() {
      uni.showToast({
        title: '连接设备',
        icon: 'none'
      })
    },
    switchTab(tab) {
      this.activeTab = tab
      uni.showToast({
        title: `切换到${tab}`,
        icon: 'none'
      })
    },
    updateSensorData(data) {
      // 根据蓝牙数据更新参数值
      if (data.Longitude_50 !== undefined && this.params.timezoneMode == 'read') {
        this.params.longitude = data.Longitude_50
      }

      if (data.Latitude_51 !== undefined && this.params.timezoneMode == 'read') {
        this.params.latitude = data.Latitude_51
      }

      if (data.TimeZone_52 !== undefined && this.params.timezoneMode == 'read') {
        this.params.timezone = data.TimeZone_52
      }

      if (data.Frequence_25 !== undefined && this.params.wWl) {
        this.params.frequency = data.Frequence_25
      }

      if (data.NetworkId_26 !== undefined && this.params.wWl) {
        this.params.networkId = data.NetworkId_26
      }

      if (data.modAddre_27 !== undefined && this.params.wWl) {
        this.params.moduleAddress = data.modAddre_27
      }

      if (data.qEasternLimit_64 !== undefined && this.params.wLim) {
        this.params.eastLimit = data.qEasternLimit_64
      }

      if (data.qWesternLimit_65 !== undefined && this.params.wLim) {
        this.params.westLimit = data.qWesternLimit_65
      }

      if (data.qwidth_60 !== undefined && this.params.downhillMode == 'read') {
        this.params.width = data.qwidth_60
      }

      if (data.Interval_61 !== undefined && this.params.downhillMode == 'read') {
        this.params.spacing = data.Interval_61
      }

      if (data.UpGrade_62 !== undefined  && this.params.downhillMode == 'read') {
        this.params.uphillSlope = data.UpGrade_62
      }

      if (data.DownGrade_63 !== undefined && this.params.downhillMode == 'read') {
        this.params.downhillSlope = data.DownGrade_63
      }

      // 设置6秒后将 communicationLink_1 设置为 false 的定时器
      this.communicationTimer_1 = setTimeout(() => {
        this.communicationLink_1 = false
        this.communicationTimer_1 = null
      }, 5000)
    }
  }
}
</script>


<style lang="scss" >
@import '@/static/scss/custom-theme.scss';

.container {
  height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  background-color: $custom-bg-tertiary;
}

.status-bar {
  height: $custom-status-height;
  background-color: $custom-bg-primary;
  @include flex-between;
  padding: 0 $custom-spacing-md;
  font-size: 14px;

  .status-left {
    color: $custom-text-primary;
  }

  .status-right {
    @include flex-start;
    gap: $custom-spacing-xs;

    .data-rate {
      color: $custom-text-secondary;
      font-size: 12px;
    }

    .wifi-icon, .hd-text, .network, .battery {
      font-size: 12px;
    }
  }
}

.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;
  }

}

.content {
  flex: 1;
  padding: $custom-spacing-md;
  height: calc(100vh - 60px);
}

.param-section {
  @include card-style;
  overflow: auto;
}

.param-row {
  @include flex-start;
  margin-bottom: $custom-spacing-md;
  gap: $custom-spacing-sm;
  height: 40px;

  .param-label {
    width: 70px;
    @include button-style('primary');
  }

  .param-input {
    flex: 1;
    width: 60px;
    @include input-style;
  }

  .radio-group {
    @include flex-start;
    gap: $custom-spacing-md;
  }

  .checkbox {
    margin-left: $custom-spacing-sm;
  }

  .action-btn {
    border: 1px solid $custom-border-secondary;
    height: 20px;
    line-height: 20px;
    margin-right: 0px;
  }
}




// 响应式设计
@include responsive(md) {
  .param-row {
    .param-input {
      min-width: 150px;
    }
  }
}

@include responsive(lg) {
  .param-row {
    .param-input {
      min-width: 200px;
    }
  }
}

::v-deep .param-section .u-button--mini{
   width: 80px !important;
   height: 36px !important;
   font-size: 10px !important;
}

::v-deep .param-section .u-input{
   width: 60px !important;
}
::v-deep .content text{
  font-size: 12px !important;
}
</style>