tianmucloudmobile/pages/bluetooth/index/index.vue

<template>
  <view class="container">

    <!-- 头部区域 -->
    <view class="header">
      <u-row>
        <u-col span="2">
          <view class="status-btn" :class="{ active_btn: communicationLink_one }">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="display-area">
        <view class="display-window">
          <view
              v-for="(item, index) in deviceListDataShow"
              :key="item.id"
              :class="['list-item', { 'list-item-selected': item.id === selectedDeviceId }]"
              hover-class="list-item-hover"
              hover-start-time="0"
              hover-stay-time="100"
              @click="selectblue(item.id)"
          >
            <image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image>
            <text class="list-item-name">{{item.id}}:{{ item.name }}&nbsp;</text>
            <image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img"></image>
            <image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit"
                   class="list-item-rssi-img"></image>
            <image v-else-if="item.rssi >= -65" src="/static/img/s3.png" mode="aspectFit"
                   class="list-item-rssi-img"></image>
            <image v-else-if="item.rssi >= -75" src="/static/img/s2.png" mode="aspectFit"
                   class="list-item-rssi-img"></image>
            <image v-else="item.rssi < -75" src="/static/img/s1.png" mode="aspectFit"
                   class="list-item-rssi-img"></image>
          </view>

        </view>
      </view>
      <!-- 控制按钮区域 -->
      <view class="control-area">
        <!-- 蓝牙控制行 -->
        <view class="control-row">
          <u-button type="info" size="medium" class="control-btn" @click="closeBlue()">断开蓝牙</u-button>
          <u-button type="info" size="medium" class="control-btn" @click="openBluetoothAdapter()">搜索蓝牙</u-button>
          <u-button type="info" size="medium" class="control-btn" @click="listViewTap()">连接蓝牙</u-button>
          <u-button type="info" size="medium" class="control-btn" @click="readAddress()">读取地址</u-button>
        </view>

        <!-- 设备地址行 -->
        <u-row gutter="10" customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="label-box">设备地址:</view>
          </u-col>
          <u-col span="5">
            <u-input v-model="deviceAddress"  type="number" class="address-input"></u-input>
          </u-col>
          <u-col span="4">
            <u-button type="info" size="medium" class="control-btn" @click="updataAddress()">更新通讯地址</u-button>
          </u-col>
        </u-row>
        <!-- 新设备地址行 -->
        <u-row gutter="10" customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="label-box">设备新地址:</view>
          </u-col>
          <u-col span="5">
            <u-input v-model="newDeviceAddress"  type="number" placeholder="" class="address-input"></u-input>
          </u-col>
          <u-col span="4">
            <u-button type="info" size="medium" class="control-btn" @click="writeAddress()">写地址</u-button>
          </u-col>
        </u-row>

      </view>
    </view>

  </view>
</template>

<script>
import {ecBLE,ecUI,initBLE,writeRegister,startHeartbeat,stopHeartbeat,setGlobalSlaveAddress,getGlobalSlaveAddress} from '@/utils/modbus.js';
import i18 from '@/utils/i18.js';
let deviceListData = [];
let ctx;
export default {
  data() {
    return {
      editStatus: false,
      selectedDeviceId: null, //选中的设备
      timer: "",  //设备列表数据定时刷新
      deviceListDataShow: [
		  {
		    id: 1,
		    name: "设备1",
		    rssi: -55
		  },
		  {
		    id: 2,
		    name: "设备2",
		    rssi: -55
		  },
	  ], //蓝牙设备列表
      showTimer: null,
      connected: false,
      sendData: "",
      newDeviceAddress:'',
      deviceAddress:'',
      communicationLink_one: false,
      communicationTimer: null, // 添加这一行用于保存定时器 ID
    }

  },
  computed: {
    bleConnected() {
      return this.$store.getters['ble/connected']
    },
    bleData() {
      return this.$store.getters['ble/data']
    }
  },
  watch: {
    bleData: {
      handler(newData, oldData) {
        if (newData) {
          console.log('接收到蓝牙数据:------------------')
          // 清除之前的定时器
          if (this.communicationTimer) {
            console.log('清除之前的定时器');
            clearTimeout(this.communicationTimer)
            this.communicationTimer = null
          }
          // 设置通信链接状态为 true
          this.communicationLink_one = true
          this.updateSensorData(newData)

        }
      },
      deep: true, // 深度监听，确保嵌套对象变化时也能触发
      immediate: true // 立即执行一次
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "蓝牙配网"
    })
    ecUI.showLoading("正在初始化蓝牙模块")
    ctx = this;
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      ctx.deviceListDataShow = JSON.parse(JSON.stringify(deviceListData))
    }, 800)
    initBLE();

  },
  onUnload() {
    ecBLE.stopBluetoothDevicesDiscovery();
    ecBLE.closeBLEConnection()
  },
  onShow() {
    if (this.showTimer != null) {
      clearTimeout(this.showTimer);
    }
    this.showTimer = setTimeout(() => {
      ctx.openBluetoothAdapter()
    }, 100)
  },
  methods: {
    readAddress(){
      writeRegister("GET_ADDRESS", null);
    },
    closeBlue(){
      ecUI.showLoading("正在断开并重新扫描");
      ecBLE.closeBLEConnection();
      stopHeartbeat();
      // 重新开始蓝牙扫描以获取设备列表
      deviceListData = []; // 清空当前设备列表
      this.startBluetoothDevicesDiscovery(); // 开始重新扫描
      // 可选：在一段时间后隐藏加载提示
      setTimeout(() => {
        this.communicationLink_one = false
        ecUI.hideLoading();
      }, 2000);
    },
    updateSensorData(data) {
      console.log('接收到的数据地址:', data.Addres_23);
      this.deviceAddress = data.Addres_23;
      this.communicationTimer = setTimeout(() => {
        console.log('通信链接已结束')
        this.communicationLink_one = false
        this.communicationTimer = null
      }, 5000)
    },
    updataAddress(){
      if (this.deviceAddress == null || this.deviceAddress == '') {
        this.$modal.showToast("请输入通讯地址");
        return;
      }
      let value = parseInt(this.deviceAddress, 10);
      setGlobalSlaveAddress(value);
      startHeartbeat();
    },
    writeAddress(){
      ecUI.showLoading("正在写入地址，请稍后！")
      stopHeartbeat();
      setTimeout(() => {
        writeRegister("WRITE_ADDRESS",this.newDeviceAddress);
      }, 1000);
      setTimeout(() => {
        this.communicationLink_one = false
        ecUI.hideLoading();
      }, 2000);

    },
    i18(text) {
      return text;
    },
    $t(title) {
      return title;
    },
    selectblue(id) {  //选中需要连接的蓝牙
      this.selectedDeviceId = id;
    },
    listViewTap() {   //连接蓝牙
      const id = this.selectedDeviceId;
      // 校验设备ID
      if (!id) {
        this.$modal.showToast("请选择一个设备");
        return;
      }
      // 清除旧的连接状态
      this.connected = false;
      ecUI.showLoading("正在连接蓝牙");
      // 建立连接
      ecBLE.createBLEConnection(id);

      // 设置连接超时
      setTimeout(() => {
        this.handleConnectionTimeout();
      }, 5000);
    },
    // 超时处理函数
    handleConnectionTimeout() {
      this.connected = this.bleConnected;
      ecUI.hideLoading();
      if (!this.connected) {
        this.$modal.showToast(i18('连接失败'));
        this.startBluetoothDevicesDiscovery();
      }
    },
    openBluetoothAdapter() { //打开蓝牙
      ecBLE.onBluetoothAdapterStateChange(res => {
        ecUI.hideLoading()
        if (res.ok) {
          ctx.startBluetoothDevicesDiscovery()
        } else {
          ecUI.showModal(
              this.$t('buletooth.tip'),
              `Bluetooth adapter error | ${res.errCode} | ${res.errMsg}`,
              () => {

              }
          )
        }
      })
      ecBLE.openBluetoothAdapter()
    },
    startBluetoothDevicesDiscovery() {
      ecBLE.stopBluetoothDevicesDiscovery();
      console.log('start search')
      ecBLE.onBluetoothDeviceFound(res => {

        let isRight = true;
        if (!isRight) {
          return;
        }
        for (const item of deviceListData) {
          if (item.id === res.id) {
            item.name = res.name
            item.rssi = res.rssi
            return
          }
        }
        let manufacturer = ''
        if (res.name.length === 11 && res.name.startsWith('@')) {
          manufacturer = 'eciot'
        }
        if (res.name.length === 15 && res.name.startsWith('BT_')) {
          manufacturer = 'eciot'
        }
        manufacturer = 'eciot'
        deviceListData.push({
          id: res.id,
          name: res.name,
          rssi: res.rssi,
          manufacturer,
        })
      })
      ecBLE.startBluetoothDevicesDiscovery()
    },

  }
}
</script>

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


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

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



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

// 主要内容区域
.main-content {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 显示区域
.display-area {
  .display-window {
    width: 100%;
    height: 230px;
    background-color: #000;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: auto;
  }
}

// 控制区域
.control-area {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;

  .control-btn {
    flex: 1;
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    height: 40px;
	font-size: 13px;
  }

  .label-box {
    width: 80px;
  }

  .address-input {
    flex: 1;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    height: 40px;
    padding: 0 12px;
  }
}


.list-item {
  height: 40px;
  background-color: #000;
  color: #fff;
  position: relative;
}

.list-item-selected {
  background-color: #767a82;
  color: #000;
}


.list-item-name {
  position: absolute;
  font-size: 16px;
  left: 20px;
  top: 0px;
  line-height: 40px;
  color: #fff;
  max-width: 80%;
  overflow-x: hidden;
}

.list-item-rssi-img {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 20px;
  top: 13px;
}

.list-item-rssi {
  position: absolute;
  width: 40px;
  height: 40px;
  right: 0px;

  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  color: white;
  line-height: 50px;

}

.list-item-line {
  position: absolute;
  height: 1px;
  width: 100vw;
  left: 20px;
  background-color: #c6c6c8;
}

::v-deep  .u-button--medium{
  font-size: 13px !important;
}
</style>