index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  1. <template>
  2. <view>
  3. <cu-custom
  4. ref="custom"
  5. id="custom"
  6. bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
  7. :isBack="true"
  8. >
  9. <block slot="backText">返回</block>
  10. <block slot="content"> 搜索蓝牙设备 </block>
  11. </cu-custom>
  12. <view class="head">
  13. <view class="title">蓝牙设备列表</view>
  14. <u-loading-icon v-if="beSearching" size="21" />
  15. <view v-else class="anew" @click="startBluetooth(services)">
  16. 继续搜索
  17. </view>
  18. </view>
  19. <My_listbox ref="List" :pullDown="false">
  20. <view class="device" v-for="item in devices" :key="item.deviceId">
  21. <view class="left">
  22. <text class="iconfont icon-shuifa" />
  23. </view>
  24. <view class="content">
  25. <view class="name u-line-2">{{ item.name || item.deviceId }}</view>
  26. <view class="rssi">
  27. <view class="text">{{ getRSSIText(item.RSSI) }} </view>
  28. <view class="signal">
  29. <view
  30. class="cell"
  31. v-for="h in [4, 6, 8, 10]"
  32. :key="h"
  33. :style="{
  34. height: h + 'px',
  35. background:
  36. h &lt;= getRSSIStyle(item.RSSI).h
  37. ? getRSSIStyle(item.RSSI).BC
  38. : '#BBBBBB',
  39. }"
  40. />
  41. </view>
  42. </view>
  43. </view>
  44. <view style="flex: 1" />
  45. <view
  46. class="but"
  47. hover-class="navigator-hover"
  48. @click="connected ? '' : createBLEConnection(item)"
  49. >
  50. <u-loading-icon
  51. v-if="connected == item.deviceId"
  52. color="#FFF"
  53. inactive-color="#999"
  54. mode="circle"
  55. size="18"
  56. />
  57. <text v-else>连接</text>
  58. </view>
  59. </view>
  60. <view v-if="empty" class="empty">
  61. <u-empty />
  62. <view class="title"> 如果长时间未搜索到设备 </view>
  63. <view class="row"> 1.请检查设备是否开启蓝牙与地理位置 </view>
  64. <view class="row">
  65. 2.授权小程序蓝牙和位置想信息授权
  66. <text style="margin-left: 4px; font-weight: 700" @click="openSetting"
  67. >去设置</text
  68. >
  69. </view>
  70. <view class="row">
  71. 3.搜索全部蓝牙设备
  72. <text style="margin-left: 4px; font-weight: 700" @click="setServices"
  73. >设置</text
  74. >
  75. </view>
  76. </view>
  77. </My_listbox>
  78. </view>
  79. </template>
  80. <script>
  81. export default {
  82. components: {},
  83. name: "Bluetooth",
  84. data() {
  85. return {
  86. beSearching: false, //搜索状态
  87. connected: "", //连接状态
  88. empty: true,
  89. services: [],
  90. devices: [],
  91. };
  92. },
  93. onLoad(options) {
  94. if (options.services) {
  95. this.services = JSON.parse(options.services);
  96. this.startBluetooth(["FW01"]);
  97. } else {
  98. this.startBluetooth();
  99. }
  100. this.$refs.List.setHeight();
  101. },
  102. onUnload() {
  103. this.stopBluetooth();
  104. },
  105. methods: {
  106. setServices() {
  107. this.services = [];
  108. this.stopBluetooth();
  109. setTimeout(() => {
  110. this.startBluetooth([]);
  111. });
  112. },
  113. openSetting() {
  114. uni.openSetting();
  115. },
  116. /* 开始搜索 */
  117. startBluetooth(services = []) {
  118. let that = this;
  119. uni.onBluetoothDeviceFound(function ({ devices }) {
  120. that.devices = devices;
  121. that.empty = devices.length == 0;
  122. });
  123. uni.startBluetoothDevicesDiscovery({
  124. // services,
  125. success(res) {
  126. that.beSearching = true;
  127. that.$refs.List.setHeight();
  128. },
  129. fail: (fail) => {
  130. that.beSearching = false;
  131. that.handleFail(fail);
  132. if (fail.errno == 10000) uni.openBluetoothAdapter();
  133. },
  134. });
  135. },
  136. /* 停止搜索 */
  137. stopBluetooth() {
  138. let that = this;
  139. uni.stopBluetoothDevicesDiscovery({
  140. success: (success) => {
  141. that.beSearching = false;
  142. },
  143. });
  144. },
  145. /* 开始连接 */
  146. createBLEConnection(item) {
  147. this.stopBluetooth();
  148. let that = this,
  149. device = {
  150. device: item,
  151. };
  152. that.connected = item.deviceId;
  153. uni.createBLEConnection({
  154. deviceId: item.deviceId,
  155. success(res) {
  156. if (res.errCode == 0) {
  157. uni.getBLEDeviceServices({
  158. deviceId: item.deviceId,
  159. success(res) {
  160. console.log("获取蓝牙服务列表", res);
  161. if (res.services.length == 0) {
  162. uni.showModal({
  163. content: "未获取到蓝牙设备服务列表",
  164. showCancel: false,
  165. confirmText: "确认",
  166. });
  167. that.closeBLEConnection();
  168. } else {
  169. device.service = res.services[0];
  170. uni.getBLEDeviceCharacteristics({
  171. deviceId: item.deviceId,
  172. serviceId: device.service.uuid,
  173. success(res) {
  174. console.log("获取特征", res);
  175. if (res.characteristics.length == 0) {
  176. uni.showModal({
  177. content: "未获取到蓝牙服务的特征信息",
  178. showCancel: false,
  179. confirmText: "确认",
  180. });
  181. that.closeBLEConnection();
  182. } else {
  183. device.characteristic = res.characteristics[0];
  184. const { write, notify } =
  185. device.characteristic.properties;
  186. if (write && notify) {
  187. uni.showModal({
  188. content: `${
  189. item.name || item.deviceId
  190. }连接成功\n是否进入设备操作页`,
  191. confirmText: "确认",
  192. cancelText: "重选",
  193. success: ({ confirm }) => {
  194. if (confirm) {
  195. console.log("设备连接完成");
  196. that.$Http.setBluetooth(device);
  197. } else {
  198. that.closeBLEConnection();
  199. }
  200. },
  201. });
  202. } else {
  203. uni.showModal({
  204. content: "设备未开启notify或write权限,已断开连接",
  205. showCancel: false,
  206. confirmText: "确认",
  207. });
  208. that.closeBLEConnection();
  209. }
  210. }
  211. },
  212. fail(err) {
  213. console.log("获取特征失败", err);
  214. that.handleFail(fail);
  215. },
  216. });
  217. }
  218. },
  219. fail(err) {
  220. console.error("获取蓝牙服务失败", err);
  221. that.handleFail(fail);
  222. },
  223. });
  224. } else {
  225. console.log("设备连接失败", that.codes[res.errCode]);
  226. that.handleFail(res);
  227. }
  228. },
  229. fail: (fail) => {
  230. console.log("连接失败", fail);
  231. that.handleFail(fail);
  232. },
  233. });
  234. },
  235. /* 关闭连接 */
  236. closeBLEConnection() {
  237. let that = this;
  238. if (this.connected)
  239. uni.closeBLEConnection({
  240. deviceId: that.connected,
  241. success(res) {},
  242. });
  243. this.connected = "";
  244. },
  245. handleFail(fail) {
  246. const codes = {
  247. 0: "ok",
  248. "-1": "已连接 ",
  249. 10000: "未初始化蓝牙适配器",
  250. 10001: "当前蓝牙适配器不可用",
  251. 10002: "没有找到指定设备",
  252. 10003: "连接失败",
  253. 10004: "没有找到指定服务",
  254. 10005: "没有找到指定特征值",
  255. 10006: "当前连接已断开",
  256. 10007: "当前特征值不支持此操作",
  257. 10008: "其余所有系统上报的异常",
  258. 10009: "系统版本低于 4.3 不支持 BLE",
  259. 10010: "已连接",
  260. 10011: "配对设备需要配对码",
  261. 10012: "连接超时",
  262. 10013: "连接 deviceId 为空或者是格式不正确",
  263. };
  264. this.connected = false;
  265. uni.showModal({
  266. content: codes[fail.errCode] || fail.errMsg,
  267. showCancel: false,
  268. confirmText: "确认",
  269. });
  270. this.closeBLEConnection();
  271. },
  272. getRSSIText: function (rssi) {
  273. let text = "";
  274. if (rssi >= -70) {
  275. text = "可连接";
  276. } else if (rssi < -90) {
  277. text = "不可连接";
  278. } else {
  279. text = "信号差";
  280. }
  281. return text + `(${rssi})`;
  282. },
  283. getRSSIStyle: function (rssi) {
  284. let obj = {
  285. h: 10,
  286. BC: "#5AB73F",
  287. };
  288. if (rssi < -60 && rssi >= -69) {
  289. obj.h = 8;
  290. } else if (rssi <= -70 && rssi >= -79) {
  291. obj.h = 6;
  292. obj.BC = "#F29C37";
  293. } else if (rssi <= -80 && rssi >= -89) {
  294. obj.h = 4;
  295. obj.BC = "#EB4B5C";
  296. } else if (rssi <= -90) {
  297. obj.h = 0;
  298. }
  299. return obj;
  300. },
  301. },
  302. };
  303. </script>
  304. <style lang="scss" scoped>
  305. .head {
  306. display: flex;
  307. justify-content: space-between;
  308. align-items: center;
  309. width: 100vw;
  310. padding: 10px;
  311. box-sizing: border-box;
  312. .title {
  313. font-family: PingFang SC, PingFang SC;
  314. font-weight: 500;
  315. font-size: 15px;
  316. color: #ffffff;
  317. }
  318. .anew {
  319. font-size: 12px;
  320. color: #ffffff;
  321. opacity: 0.8;
  322. }
  323. }
  324. .device {
  325. display: flex;
  326. align-items: center;
  327. width: 355px;
  328. height: 78px;
  329. background: #ffffff;
  330. border-radius: 4px;
  331. margin: 0 auto 10px;
  332. .left {
  333. width: 61px;
  334. text-align: center;
  335. color: #333333;
  336. font-size: 18px;
  337. }
  338. .content {
  339. width: 168px;
  340. .name {
  341. font-family: PingFang SC, PingFang SC;
  342. font-weight: bold;
  343. font-size: 12px;
  344. color: #333333;
  345. }
  346. .rssi {
  347. display: flex;
  348. align-items: center;
  349. height: 17px;
  350. margin-top: 4px;
  351. .text {
  352. font-family: PingFang SC, PingFang SC;
  353. font-size: 12px;
  354. color: #666666;
  355. margin-right: 18px;
  356. }
  357. .signal {
  358. display: flex;
  359. align-items: flex-end;
  360. height: 12px;
  361. .cell {
  362. width: 3px;
  363. border-radius: 1px;
  364. margin-right: 1px;
  365. }
  366. }
  367. }
  368. }
  369. .but {
  370. display: flex;
  371. align-items: center;
  372. justify-content: center;
  373. width: 56px;
  374. height: 24px;
  375. background: #0b3f7e;
  376. border-radius: 4px;
  377. font-family: PingFang SC, PingFang SC;
  378. font-weight: 500;
  379. font-size: 12px;
  380. color: #ffffff;
  381. margin-right: 20px;
  382. }
  383. }
  384. .empty {
  385. text-align: center;
  386. color: #fff;
  387. padding-top: 30px;
  388. .title {
  389. font-weight: 700;
  390. margin-top: 40px;
  391. }
  392. .row {
  393. margin-top: 14px;
  394. font-size: 12px;
  395. }
  396. }
  397. </style>