buddhism/page_user/luru/index.vue

<template>
  <view class="pages">
    <view class="title">
      <view class="title_li" style="display: flex; align-items: center">
        <view class="text">设备列表</view>

        <view class="btns" @click="replay()"> 重置页面</view>
      </view>
      <image
        mode="widthFix"
        src="https://api.ccttiot.com/smartmeter/img/static/uCfe9273aC89tGOT7n1G"
      ></image>
      <text class="sm">{{ texts }}</text>
    </view>
    <view
      v-for="(item, index) in devicesList"
      :key="index"
      class="dblist"
      @tap="choose(item)"
    >
      <view class="cen">
        <view class="name">
          MAC：{{ item.localName.substring(5) }}
          <span
            :style="{
              fontSize: '24rpx',
              marginLeft: '30rpx',
              color: item.isBand ? '#808080' : '#4297F3',
            }"
          >
            <!-- 根据 isBound 显示录入或未录入 -->
            {{ item.isBand ? "已录入" : "未录入" }}
          </span>
        </view>
        <view class="mac">
          蓝牙信号：{{ item.RSSI }}
          <span v-if="item.isBand" style="margin-left: 20rpx">
            SN:{{ item.sn }}</span
          >
        </view>
      </view>
      <view class="rt" style="margin-right: 10rpx">
        <text :id="item.deviceId">选择</text>
      </view>
    </view>
    <view class="anniu" @click="Search">
      <button>重新扫描</button>
    </view>
    <view v-if="showConfirmModal" class="modal-overlay">
      <view class="modal">
        <view class="modal-content">
          <view class="modal-title">确认绑定</view>
          <view class="modal-body">是否确认绑定设备？</view>
          <view class="modal-footer">
            <view
              class="btn"
              style="background: #ccc"
              @click="closeConfirmModal"
              >取消
            </view>
            <view class="btn" @click="confirmBind">确定</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-show="statusflag" class="containers">
      <uni-section>
        <uni-load-more :status="status" />
      </uni-section>
    </view>
  </view>
</template>

<script>
import { listSnByMac } from "../../api/device/device";
import xBlufi from "../../components/blufi/xBlufi";
import $wxBlufiImpl from "../../components/blufi/xBlufi-wx-impl.js"; // 0表示阿里支付宝小程序 1表示微信小程序

const app = getApp();

let _this = null;
export default {
  data() {
    return {
      titleflag: false, //提示隐藏
      bgc: {
        backgroundColor: "#F7FAFE",
      },
      devicesList: [],
      devicesLists: [],
      searching: false,
      texts: "正在扫描蓝牙设备...",
      btnflag: true,
      tishiflag: false,
      option: "",
      bluthlist: [], //蓝牙数组
      statusflag: false,
      Bluetoothmac: "",
      gps: {},
      mac: "",
      status: false,
      showConfirmModal: false, // 控制弹窗显示的标志
      deviceinfo: null,
      sn: "",
    };
  },
  onLoad(e) {
    if (e.sn) {
      this.sn = e.sn;
    }
    $wxBlufiImpl.init();
    // xBlufi.initXBlufi(1);
  },
  onShow: function () {
    this.bluthlist = [];
    this.devicesList = [];
    this.devicesLists = [];
    // 强制视图更新
    this.$forceUpdate();
    // 后续的蓝牙初始化和扫描逻辑
    xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
    xBlufi.notifyStartDiscoverBle({ isStart: true });
    setTimeout(() => {
      xBlufi.notifyStartDiscoverBle({ isStart: false });
      if (this.devicesList.length == 0) {
        this.tishiflag = true;
        this.texts = "扫描完毕，请操作";
      } else {
        this.texts = "扫描到以下设备，请点击连接！";
      }
      this.status = true;
      // 再次强制更新
      this.$forceUpdate();
    }, 2000);
  },
  onUnload: function () {
    xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
    xBlufi.notifyStartDiscoverBle({
      isStart: false,
    });
  },
  onHide() {
    xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
    xBlufi.notifyStartDiscoverBle({
      isStart: false,
    });
  },
  onBeforeUnmount() {
    xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
    xBlufi.notifyStartDiscoverBle({
      isStart: false,
    });
  },
  mounted() {},
  methods: {
    replay() {
      uni.reLaunch({
        url: "/page_user/luru/index",
      });
    },
    toControl() {
      uni.navigateTo({
        url: "/page_user/luru/controlDevice",
      });
    },
    async fetchDevicesBoundStatus() {
      try {
        // 1. 提取并去重设备MAC地址
        const uniqueMacs = [
          ...new Set(
            this.devicesList.map((item) => item.localName.substring(5)),
          ),
        ];

        // 2. 重构去重后的设备列表（保留第一个匹配项）
        this.devicesList = uniqueMacs
          .map((mac) =>
            this.devicesList.find(
              (item) => item.localName.substring(5) === mac,
            ),
          )
          .filter(Boolean); // 过滤掉undefined项

        // 3. 批量查询设备状态
        const { data: resultList } = await listSnByMac(uniqueMacs);
        console.log("API响应:", resultList);

        // 4. 更新设备状态
        const macToDeviceMap = new Map(
          this.devicesList.map((device) => [
            device.localName.substring(5),
            device,
          ]),
        );

        resultList.forEach(({ mac, sn }) => {
          const device = macToDeviceMap.get(mac);
          if (device) {
            device.sn = sn;
            device.isBand = true;
          }
        });

        // 5. 排序设备列表（未绑定的排前面）
        this.devicesList.sort(
          (a, b) => (a.isBand ? 1 : -1) - (b.isBand ? 1 : -1),
        );

        console.log("更新后的设备列表:", this.devicesList);
        this.$forceUpdate();
      } catch (error) {
        console.error("批量获取设备录入状态失败:", error);
        // 可以在这里添加错误处理逻辑，如显示错误提示
      }
    },
    choose(e) {
      console.log(e);
      let Bluetoothmac = e.name.substring(5);
      uni.navigateTo({
        url: "/page_user/luru/bind_mac?mac=" + Bluetoothmac,
      });
    },
    send() {
      this.$u.post("/app/device/ring?sn=" + this.sn).then((res) => {
        if (res.code === 200) {
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    openConfirmModal(e) {
      this.deviceinfo = e;
      this.showConfirmModal = true;
    },
    closeConfirmModal() {
      this.showConfirmModal = false;
    },
    confirmBind() {
      this.closeConfirmModal();
      this.createBLEConnection(this.deviceinfo);
    },
    btnyc() {
      this.titleflag = false;
    },
    sing() {
      let vm = this; // 将外部的 this 绑定到 vm 上
      uni.getNetworkType({
        success(res) {
          if (res.networkType !== "none") {
            uni.getConnectedBluetoothDevices({
              success(res) {
                console.log("已连接的蓝牙设备信息：", res);
                xBlufi.notifySendCustomData({
                  customData: "11play1@",
                });
                uni.hideLoading();
                vm.remakr();
              },
              fail(err) {
                uni.hideLoading();
                console.error("获取已连接蓝牙设备信息失败：", err);
              },
            });
          } else {
            console.log("手机未连接网络");
          }
        },
      });
    },
    remakr() {
      let vm = this; // 将外部的 this 绑定到 vm 上
      uni.getNetworkType({
        success(res) {
          if (res.networkType !== "none") {
            uni.getConnectedBluetoothDevices({
              success(res) {
                console.log("已连接的蓝牙设备信息：", res);
                xBlufi.notifySendCustomData({
                  customData: "11reboot",
                });
                uni.navigateBack({
                  delta: 1, // delta值为1时表示返回的页面层数
                });
              },
              fail(err) {
                console.error("获取已连接蓝牙设备信息失败：", err);
              },
            });
          } else {
            console.log("手机未连接网络");
          }
        },
      });
    },
    funListenDeviceMsgEvent: function (options) {
      switch (options.type) {
        case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
          if (options.result) {
            this.devicesLists = options.data;
            // let devicesarr = options.data
            // // this.devicesList = options.data
            // // console.log(devicesarr, 'devicesarrdevicesarr');
            // devicesarr.forEach(device => {
            // 	const mac = device.name.substring(6);

            // 	if (device.name.indexOf("BBLE") != -1) {
            // 		// this.$u.get(`/app/device/${mac}/isBind`).then((res) => {
            // 		// if (res.data == false) {
            // 		this.devicesLists.push(device);
            // 		let uniqueDevicesList = Array.from(new Set(this.devicesLists));

            // 		// 将去重后的数组重新赋值给 this.devicesList
            // 		this.devicesLists = uniqueDevicesList;
            // 		// }
            // 		// })

            // 	}
            // 	// getisband(mac).then(res => {
            // 	// 	console.log(res);
            // 	// 	if (res.data == true) {
            // 	// 		console.log(`MAC 地址 ${mac} 已经绑定`);
            // 	// 	} else {
            // 	// 		this.devicesList.push(device)
            // 	// 	}
            // 	// }).catch(error => {
            // 	// 	console.error(`检查 MAC 地址 ${mac} 是否绑定的过程中出错:`, error);
            // 	// });
            // });
          }
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
          console.log("连接回调：" + JSON.stringify(options));
          if (options.result) {
            uni.hideLoading();
            uni.showToast({
              title: "连接成功",
              icon: "none",
            });
            {
              console.log(
                "连接回调options.data.deviceId：" + options.data.deviceId,
                "连接回调options.data.name：" + options.data.name,
              );
              xBlufi.notifyInitBleEsp32({
                deviceId: options.data.deviceId,
              });
              let systemInfo = uni.getSystemInfoSync();
              if (systemInfo.platform === "android") {
                // 当前设备是 Android
              } else if (systemInfo.platform === "ios") {
                // 当前设备是 iOS
              }
            }
          }
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
          if (!options.result) {
            console.log("蓝牙未开启", options);
            uni.showToast({
              title: "蓝牙未开启，如有疑问请查看查看常见问题",
              icon: "none",
              duration: 3000,
            });
            if (this.devicesList.length == 0) {
              this.tishiflag = true;
              this.texts = "扫描完毕";
            } else {
              this.texts = "扫描到以下设备，请点击连接！";
            }
          } else {
            this.searching = true;
          }
          break;

        case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
          if (options.result) {
            let uniqueDevicesList = Array.from(new Set(this.devicesLists));
            // 将去重后的数组重新赋值给 this.devicesList
            this.devicesLists = uniqueDevicesList;
            let list = [];
            uniqueDevicesList.forEach((device) => {
              // 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
              let macFromName = device.name.substring(device.name.length - 12);
              // console.log(macFromName);
              // 与 this.mac 进行比较
              list.push(device);
            });
            setTimeout(() => {
              this.devicesList = list;
              let uniqueDevicesList = Array.from(new Set(this.devicesList));
              // 将去重后的数组重新赋值给 this.devicesList
              this.devicesList = uniqueDevicesList;
              this.fetchDevicesBoundStatus();
            }, 200);

            console.log("蓝牙停止搜索ok");
          } else {
            //蓝牙停止搜索失败
            console.log("蓝牙停止搜索失败");
          }
          this.searching = false;
          // _this.setData({
          // 	searching: false
          // });

          break;
      }
    },
    funListenDeviceMsgEvents: function (options) {
      let that = this;
      switch (options.type) {
        case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
          {
            // console.log('状态', options.result)
            if (options.result == false) {
              this.statusflag = false;
              uni.hideLoading();
            }
          }
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
          console.log("1收到设备发来的自定义数据结果：", options.data);
          break;

        case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
          uni.hideLoading();
          if (options.result) {
            console.log("初始化成功");
          } else {
            console.log("初始化失败");
            uni.showModal({
              title: "温馨提示",
              content: `设备初始化失败`,
              showCancel: false,
              //是否显示取消按钮
              success: function (res) {},
            });
          }
          break;
      }
    },

    //4、建立连接
    createBLEConnection(e) {
      this.mac = e.localName.substring(5);
      let that = this;
      that.$u
        .post(`/appVerify/band?sn=` + that.sn + "&mac=" + that.mac)
        .then((res) => {
          uni.showLoading({
            title: "绑定中",
          });
          if (res.code == 200) {
            uni.showToast({
              title: "绑定成功",
              icon: "none",
              duration: 2000,
            });

            xBlufi.notifyStartDiscoverBle({
              isStart: false,
            });

            const deviceId = that.deviceinfo.deviceId;
            that.Bluetoothmac = that.deviceinfo.localName.substring(5); //从第七位开始截取 只取后面的mac号

            let name = that.deviceinfo.name;
            console.log(that.deviceinfo.deviceId, "that.deviceinfo.deviceId");
            xBlufi.notifyConnectBle({
              isStart: true,
              deviceId: that.deviceinfo.deviceId,
              name,
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1, // delta值为1时表示返回的页面层数
              });
            }, 2000);
          }
        });
    },
    // 点击重新搜索
    Search() {
      if (this.status) {
        xBlufi.notifyStartDiscoverBle({
          isStart: true,
        });
        // 重新搜索清空蓝牙数组
        this.bluthlist = [];
        this.devicesList = [];
        this.devicesLists = [];
        // 重新搜索
        // this.startBluetoothDevicesDiscovery()
        this.statusflag = true;
        this.texts = "正在扫描蓝牙设备...";
        setTimeout(() => {
          this.statusflag = false;
          if (this.searching) {
            // 判断是否存在浇花器设备
            if (this.devicesList.length == 0) {
              this.tishiflag = true;
              this.texts = "扫描完毕，请操作";
            } else {
              this.texts = "扫描到以下设备，请点击连接！";
            }
            xBlufi.notifyStartDiscoverBle({
              isStart: false,
            });
          } else {
            xBlufi.notifyStartDiscoverBle({
              isStart: true,
            });
          }
        }, 2000);
      }
    },
    // 点击隐藏没有设备提示
    btnhd() {
      this.tishiflag = false;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7fafe !important;
}

.containers {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  padding-top: 130rpx;
  box-sizing: border-box;
  left: 0;
  z-index: 999 !important;
  /* background-color: #fff; */
  z-index: 99;
}

.anniu2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 586rpx;
  height: 90rpx;
  border-radius: 54rpx 54rpx 54rpx 54rpx;
  border: 4rpx solid #4c97e7;
  box-sizing: border-box;
  position: fixed;
  left: 90rpx;
  bottom: 222rpx;
  font-weight: 500;
  font-size: 40rpx;
  color: #4c97e7;
}

.pages {
  // padding-top: 136rpx !important;
  padding: 0 66rpx;
  box-sizing: border-box;
  padding-bottom: 200rpx;
  box-sizing: border-box;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  width: 300px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.modal-content {
  padding: 20px;
}

.modal-title {
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

.modal-body {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}

.modal-footer {
  display: flex;
  justify-content: space-around;
}

.modal-footer button {
  width: 80px;
  height: 60rpx;
  padding: 10px;
  background: #8883f0;
  color: #fff;
  border: none;
  border-radius: 4px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8883f0;
  width: 80px;
  height: 60rpx;
  color: #fff;
  border-radius: 4px;
}

.modal-footer button:first-of-type {
  background: #ccc;
}

// text{
// 	display: block;
// }

.sm {
  color: #77808d;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  // margin-top: 48rpx;
  display: inline-block;
}

.title {
  margin-bottom: 84rpx;

  image {
    display: inline-block;
    width: 48rpx;
    height: 48rpx;
    vertical-align: bottom;
    margin-right: 10rpx;
  }
}

.title_li {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  .text {
    font-weight: 400;
    font-size: 70rpx;
    color: #262b37;

    text-align: left;
    font-style: normal;
    text-transform: none;
    display: block;
  }

  .btns {
    margin-left: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 138rpx;
    height: 50rpx;
    background: #f14c4c;
    border-radius: 31rpx 31rpx 31rpx 31rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
  }
}

.dblist {
  display: flex;
  width: 100%;
  margin-top: 34rpx;
  background: #ffffff;
  box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx 0 24rpx 18rpx;
  box-sizing: border-box;
  text-align: center;
  border-radius: 10rpx;

  .lt {
    padding-left: 10rpx;
    box-sizing: border-box;
    margin-right: 38rpx;

    image {
      width: 42rpx;
      // height: 112rpx;
    }
  }

  .cen {
    width: 370rpx;
    padding-left: 10rpx;
    box-sizing: border-box;

    .name {
      white-space: nowrap;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 28rpx;
      color: #262b37;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 10rpx;
    }

    .mac {
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 24rpx;
      color: #262b37;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 16rpx;
    }
  }

  .rt {
    margin-left: auto;
    margin-top: 22rpx;

    text {
      display: inline-block;
      width: 108rpx;
      height: 60rpx;
      background: rgba(255, 255, 255, 0);
      border: 2rpx solid #8883f0;
      filter: blur(0px);
      border-radius: 20rpx;
      text-align: center;
      line-height: 60rpx;
      color: #8883f0;
    }
  }
}

.anniu {
  padding: 0 90rpx;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 112rpx;

  button {
    background: #8883f0;
    border-radius: 52rpx 52rpx 52rpx 52rpx;
    color: #fff;
  }
}

.mask {
  width: 622rpx;
  height: 710rpx;
  background: #ffffff;
  filter: blur(0px);
  border-radius: 20rpx;
  position: fixed;
  top: 475rpx;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 38rpx;
  padding-left: 60rpx;
  padding-right: 60rpx;
  box-sizing: border-box;

  .titles {
    font-size: 48rpx;
    color: #262b37;
    line-height: 70rpx;
    text-align: center;
    margin-bottom: 24rpx;
  }

  text {
    display: block;
    font-size: 32rpx;
    color: #262b37;
    line-height: 56rpx;
    text-align: left;
  }

  button {
    margin-top: 46rpx;
    width: 266rpx;
    height: 96rpx;
    background: #8883f0;
    border-radius: 52rpx 52rpx 52rpx 52rpx;
    color: #fff;
    text-align: center;
    line-height: 96rpx;
  }
}
</style>