index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632
  1. <template>
  2. <view style="height: 100vh">
  3. <view v-if="!connected">
  4. <scroll-view class="main-container" scroll-y="true"
  5. :refresher-enabled="false">
  6. <view v-for="(item, index) in deviceListDataShow" :key="item.id" class="list-item" hover-class="list-item-hover"
  7. hover-start-time="0" hover-stay-time="100" @click="listViewTap(item.id)">
  8. <image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image>
  9. <image v-else src="/static/img/ble.png" class="list-item-img"></image>
  10. <text class="list-item-name">{{item.name}}</text>
  11. <image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img"></image>
  12. <image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit" class="list-item-rssi-img"></image>
  13. <image v-else-if="item.rssi >= -65" src="/static/img/s3.png" mode="aspectFit" class="list-item-rssi-img"></image>
  14. <image v-else-if="item.rssi >= -75" src="/static/img/s2.png" mode="aspectFit" class="list-item-rssi-img"></image>
  15. <image v-else="item.rssi < -75" src="/static/img/s1.png" mode="aspectFit" class="list-item-rssi-img"></image>
  16. <text class="list-item-rssi">{{item.rssi}}</text>
  17. <view class="list-item-line"></view>
  18. </view>
  19. <u-popup :show="showSendData" >
  20. <view class="slot-content">
  21. <view>
  22. <u--input
  23. :placeholder="i18('请输入值')"
  24. border="surround"
  25. v-model="sendData"
  26. ></u--input>
  27. </view>
  28. <view style="margin:10px;text-decoration: underline;margin-bottom: 0px" @click="sendLanyaData">
  29. <u-button>发送</u-button>
  30. </view>
  31. </view>
  32. </u-popup>
  33. <view v-if="deviceListDataShow.length==0" class="notice"> - {{ $t('buletooth.nodevice') }} -</view>
  34. <view class="gap"></view>
  35. </scroll-view>
  36. </view>
  37. <view v-if="connected">
  38. <view class="text-area">
  39. <u--form style="width: 100%;"
  40. labelPosition="left"
  41. ref="uForm"
  42. >
  43. <u-form-item
  44. label="WIFI名称:"
  45. borderBottom
  46. labelWidth="auto"
  47. @click="openChooseWifi"
  48. ref="item1"
  49. >
  50. <u--input
  51. v-model="SSID"
  52. disabled
  53. disabledColor="#ffffff"
  54. placeholder="请选择wifi:"
  55. border="none"
  56. ></u--input>
  57. <u-icon
  58. slot="right"
  59. name="arrow-right"
  60. ></u-icon>
  61. </u-form-item>
  62. <u-form-item
  63. label="密码:"
  64. borderBottom
  65. ref="item1"
  66. >
  67. <u--input
  68. v-model="password"
  69. border="none"
  70. ></u--input>
  71. </u-form-item>
  72. <u-form-item
  73. label="设备编号:"
  74. borderBottom
  75. ref="item1"
  76. labelWidth="auto"
  77. >
  78. <u--input
  79. v-model="deviceno"
  80. border="none"
  81. ></u--input>
  82. </u-form-item>
  83. <u-form-item
  84. label="二维码ID:"
  85. borderBottom
  86. ref="item1"
  87. labelWidth="auto"
  88. >
  89. <u--input
  90. v-model="qrcodeid"
  91. border="none"
  92. ></u--input>
  93. </u-form-item>
  94. </u--form>
  95. </view>
  96. <view style="margin:10px">
  97. <u-button text="开始配网" @click="doConnect" size="small" type="primary"></u-button>
  98. </view>
  99. <u-picker @cancel="showWiftList=false" @confirm="chooseWifi" :show="showWiftList" :columns="wifiList"></u-picker>
  100. </view>
  101. </view>
  102. </template>
  103. <script>
  104. // #ifdef APP
  105. import ecUI from '@/utils/ecUI.js'
  106. import ecBLE from '@/utils/ecBLE/ecBLE.js'
  107. // #endif
  108. // #ifdef MP
  109. const ecUI = require('@/utils/ecUI.js')
  110. const ecBLE = require('@/utils/ecBLE/ecBLE.js')
  111. // #endif
  112. import i18 from '@/utils/i18.js'
  113. let ctx
  114. let deviceListData = []
  115. export default {
  116. data() {
  117. return {
  118. showPwd:false,
  119. rightPwd:"",
  120. pwd:"",
  121. timer:"",
  122. buleid:"",
  123. deviceListDataShow: [],
  124. showTimer:null,
  125. connected:false,
  126. uuid:"",
  127. showDeviceNo:false,
  128. inputDeviceNo:"",
  129. commonCode:"",
  130. showSendData:false,
  131. sendData:"",
  132. qrcodeid:"",
  133. deviceno:"",
  134. SSID:"",
  135. password:"",
  136. showWiftList:false,
  137. wifiList: [
  138. []
  139. ],
  140. }
  141. },
  142. onLoad() {
  143. uni.setNavigationBarTitle({
  144. title: "蓝牙配网"
  145. })
  146. ecUI.showLoading("正在初始化蓝牙模块")
  147. ctx = this
  148. clearInterval(this.timer);
  149. this.timer = setInterval(() => {
  150. ctx.deviceListDataShow = JSON.parse(JSON.stringify(deviceListData))
  151. }, 800)
  152. console.log(this.commonCode)
  153. },
  154. onUnload(){
  155. ecBLE.stopBluetoothDevicesDiscovery();
  156. ecBLE.closeBLEConnection()
  157. },
  158. onShow() {
  159. if(this.showTimer!= null){
  160. clearTimeout(this.showTimer);
  161. }
  162. this.showTimer = setTimeout(() => {
  163. ctx.openBluetoothAdapter()
  164. }, 100)
  165. },
  166. methods: {
  167. getAuth(){
  168. wx.getSetting({
  169. success(res) {
  170. if (!res.authSetting['scope.userLocation']) {
  171. wx.authorize({
  172. scope: 'scope.userLocation',
  173. success () {
  174. // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
  175. }
  176. })
  177. }
  178. }
  179. })
  180. },
  181. chooseWifi(e){
  182. this.SSID = e.value[0];
  183. this.showWiftList= false;
  184. },
  185. openChooseWifi(){
  186. if(this.wifiList[0].length == 0){
  187. this.getWifiList();
  188. }else{
  189. this.showWiftList = true;
  190. }
  191. },
  192. openWifi(){
  193. let self = this;
  194. // #ifdef MP-WEIXIN
  195. wx.startWifi({
  196. success(res) {
  197. console.log(res);
  198. // self.getWifiList();
  199. },
  200. fail(res) {
  201. console.log(res)
  202. uni.showToast({
  203. title: '请打开WIFI',
  204. icon: 'none',
  205. duration: 3000
  206. });
  207. },
  208. })
  209. // #endif
  210. },
  211. getWifi(){
  212. // #ifdef MP-WEIXIN
  213. var that = this
  214. wx.getConnectedWifi({
  215. success(res) {
  216. console.log(res)
  217. that.BSSID = res.wifi.BSSID
  218. that.WIFIName = res.wifi.SSID
  219. },
  220. fail(res) {
  221. console.log(res)
  222. //报错的相关处理
  223. },
  224. })
  225. // #endif
  226. },
  227. getWifiList(){
  228. // #ifdef MP-WEIXIN
  229. var that = this
  230. uni.showLoading();
  231. wx.getWifiList({
  232. success(res) {
  233. console.log(res)
  234. wx.onGetWifiList(function(res) {
  235. that.showWiftList = true;
  236. uni.hideLoading();
  237. console.log("获取wifi列表");
  238. that.wifiList = [[]];
  239. console.log(res.wifiList); //在这里提取列表数据
  240. //通过遍历将WIFI名字存入集合,以便下卡框等组件使用
  241. for (var i = 0; i < res.wifiList.length; i++) {
  242. that.wifiList[0].push(res.wifiList[i].SSID)
  243. }
  244. })
  245. },
  246. fail(res) {
  247. console.log(res)
  248. uni.showToast({
  249. title: '获取wifi失败,请检查wifi',
  250. icon: 'none',
  251. duration: 2000
  252. });
  253. },
  254. })
  255. // #endif
  256. },
  257. doConnect(){
  258. if(this.SSID == ""){
  259. uni.showToast({
  260. title: '请选择WIFI',
  261. icon: 'none',
  262. duration: 3000
  263. });
  264. return;
  265. }
  266. if(this.password == ""){
  267. uni.showToast({
  268. title: '请输入wifi密码',
  269. icon: 'none',
  270. duration: 3000
  271. });
  272. return;
  273. }
  274. if(this.qrcodeid == ""){
  275. uni.showToast({
  276. title: '请输入二维码ID',
  277. icon: 'none',
  278. duration: 3000
  279. });
  280. return;
  281. }
  282. if(this.deviceno == ""){
  283. uni.showToast({
  284. title: '请输入设备编号',
  285. icon: 'none',
  286. duration: 3000
  287. });
  288. return;
  289. }
  290. /**
  291. * ID:XXX+回车换行(设备编号)
  292. * QR:XXXX+回车换行(二维码ID)
  293. * ssid:WiFi名字+回车换行
  294. * psd:wifi密码+回车换行
  295. * 最后+OK
  296. */
  297. let self = this;
  298. let endStr = "$$";
  299. ecUI.showLoading("正在配置网络信息")
  300. setTimeout(function(){
  301. self.sendBlueData("ID:"+self.deviceno+endStr);
  302. },200);
  303. setTimeout(function(){
  304. self.sendBlueData("QR:"+self.qrcodeid+endStr);
  305. },400);
  306. setTimeout(function(){
  307. self.sendBlueData("ssid:"+self.SSID+endStr);
  308. },600);
  309. setTimeout(function(){
  310. self.sendBlueData("psd:"+self.password+endStr);
  311. },800);
  312. setTimeout(function(){
  313. self.sendBlueData("OK");
  314. },1000);
  315. },
  316. doByTime(func,time){
  317. setTimeout(function (){
  318. func();
  319. },time);
  320. },
  321. sendLanyaData(){
  322. this.$modal.showToast("正在发送");
  323. this.sendBlueData(this.sendData);
  324. },
  325. i18(text){
  326. return text;
  327. },
  328. cancel(){
  329. this.showPwd = false;
  330. uni.navigateBack({
  331. });
  332. },
  333. resetPwd(){
  334. let self = this;
  335. if(!this.inputDeviceNo){
  336. self.$modal.showToast("请输入序列号");
  337. return;
  338. }
  339. let uuidRight = false;
  340. if(this.inputDeviceNo == this.commonCode || this.uuid == this.inputDeviceNo){
  341. uuidRight = true;
  342. }
  343. if(!uuidRight){
  344. self.$modal.showToast("序列号有误");
  345. return;
  346. }
  347. if(uuidRight){
  348. this.$modal.confirm("密码将被重置为123456").then(res=>{
  349. setPwd("123456")
  350. self.$modal.showToast("密码修改成功");
  351. this.rightPwd = "123456";
  352. self.loginSuccess();
  353. });
  354. }
  355. },
  356. getBeijingTime() {
  357. const date = new Date();
  358. const utcTime = date.getTime() + (date.getTimezoneOffset() * 60 * 1000);
  359. const beijingTime = new Date(utcTime + (8 * 60 * 60 * 1000));
  360. return beijingTime;
  361. },
  362. generateUniqueNumber(date) {
  363. let dateString = date.toISOString().slice(0, 10).replace(/-/g, '');
  364. console.log(dateString)
  365. let hash = w_md5.hex_md5_32(dateString);
  366. console.log(hash);//32位小写
  367. let str = "";
  368. for (let i = 0; i < 6; i++) {
  369. const c = hash.charCodeAt(i);
  370. str = str+""+c+""
  371. }
  372. return str.substr(0,6);
  373. },
  374. goBack(){
  375. uni.navigateBack({
  376. });
  377. },
  378. $t(title){
  379. return title;
  380. },
  381. inputPwd(){
  382. if(!this.pwd ){
  383. this.$modal.showToast(this.$t('buletooth.errpwd'));
  384. }else{
  385. if(this.rightPwd && this.rightPwd === this.pwd){
  386. this.loginSuccess();
  387. }else{
  388. this.$modal.showToast(this.$t('buletooth.errpwd'));
  389. }
  390. }
  391. },
  392. loginSuccess(){
  393. this.showPwd = false;
  394. this.showDeviceNo = false;
  395. uni.setStorageSync("pwd",this.rightPwd);
  396. uni.setStorageSync('blueid', this.buleid);
  397. this.pwd = "";
  398. ecBLE.stopBluetoothDevicesDiscovery();
  399. uni.navigateTo({
  400. url: '/pages/weitiandi/bluetooth/status'
  401. });
  402. },
  403. getLocalPwd(){
  404. let pwd = uni.getStorageSync("pwd");
  405. return pwd;
  406. },
  407. sendBlueData(tempSendData){
  408. let data = tempSendData
  409. .replace(/\s*/g, '')
  410. .replace(/\n/g, '')
  411. .replace(/\r/g, '')
  412. console.log("写入数据:"+data);
  413. ecBLE.writeBLECharacteristicValue(data, false)
  414. },
  415. listViewTap(id){
  416. let self = this;
  417. ecUI.showLoading("正在连接蓝牙")
  418. ecBLE.onBLEConnectionStateChange(res => {
  419. console.log(res);
  420. if (res.ok) {
  421. self.connected = true;
  422. self.openWifi();
  423. ecUI.hideLoading()
  424. self.showSendData = true;
  425. ecBLE.stopBluetoothDevicesDiscovery();
  426. //
  427. } else {
  428. ecUI.hideLoading()
  429. this.$modal.showToast("请检查是否配置成功");
  430. }
  431. });
  432. //receive data
  433. ecBLE.onBLECharacteristicValueChange((str, strHex) => {
  434. console.log("数据来了")
  435. let isCheckRevHex = true;
  436. let data =
  437. (isCheckRevHex ? strHex.replace(/[0-9a-fA-F]{2}/g, ' $&') : str)
  438. console.log(data)
  439. self.$modal.closeLoading();
  440. data = parseDataObj(data);
  441. })
  442. self.connected = false;
  443. ecBLE.createBLEConnection(id);
  444. setTimeout(function (){
  445. if(!self.connected){
  446. self.$modal.showToast(i18('连接失败'));
  447. self.startBluetoothDevicesDiscovery()
  448. }
  449. },10000);
  450. },
  451. showInputPwd(){
  452. this.showPwd = true;
  453. },
  454. messageCallback(data){
  455. let self = this;
  456. console.log(data);
  457. let type = data.type;
  458. let real_data = data.real_data;
  459. if(type == 253){
  460. self.$modal.closeLoading();
  461. self.uuid = real_data.substr(0,6);
  462. }
  463. self.$forceUpdate();
  464. console.log('收到服务器内容:' + JSON.stringify(data));
  465. },
  466. forgetPwd(){
  467. this.$modal.loading("正在读取设备ID");
  468. getUUID()
  469. this.showDeviceNo = true;
  470. },
  471. openBluetoothAdapter() {
  472. let self = this;
  473. ecBLE.onBluetoothAdapterStateChange(res => {
  474. ecUI.hideLoading()
  475. if (res.ok) {
  476. ctx.startBluetoothDevicesDiscovery()
  477. } else {
  478. ecUI.showModal(
  479. this.$t('buletooth.tip'),
  480. `Bluetooth adapter error | ${res.errCode} | ${res.errMsg}`,
  481. () => {
  482. }
  483. )
  484. }
  485. })
  486. ecBLE.openBluetoothAdapter()
  487. },
  488. startBluetoothDevicesDiscovery() {
  489. ecBLE.stopBluetoothDevicesDiscovery();
  490. console.log('start search')
  491. ecBLE.onBluetoothDeviceFound(res => {
  492. let isRight = true;
  493. // if(res.name.startsWith('BT_') || res.name.startsWith('FC41D')){
  494. // isRight = true;
  495. // }
  496. if(!isRight){
  497. return;
  498. }
  499. for (const item of deviceListData) {
  500. if (item.id === res.id) {
  501. item.name = res.name
  502. item.rssi = res.rssi
  503. return
  504. }
  505. }
  506. let manufacturer = ''
  507. if (res.name.length === 11 && res.name.startsWith('@')) {
  508. manufacturer = 'eciot'
  509. }
  510. if (res.name.length === 15 && res.name.startsWith('BT_')) {
  511. manufacturer = 'eciot'
  512. }
  513. manufacturer = 'eciot'
  514. deviceListData.push({
  515. id: res.id,
  516. name: res.name,
  517. rssi: res.rssi,
  518. manufacturer,
  519. })
  520. })
  521. ecBLE.startBluetoothDevicesDiscovery()
  522. },
  523. }
  524. }
  525. </script>
  526. <style>
  527. .main-container {
  528. height: 100vh;
  529. }
  530. .list-item {
  531. height: 57px;
  532. position: relative;
  533. }
  534. .list-item-hover {
  535. background-color: #e5e4e9;
  536. }
  537. .list-item-img {
  538. position: absolute;
  539. width: 36px;
  540. height: 36px;
  541. left: 20px;
  542. top: 10px;
  543. }
  544. .list-item-name {
  545. position: absolute;
  546. font-size: 22px;
  547. left: 76px;
  548. top: 0px;
  549. line-height: 56px;
  550. }
  551. .list-item-rssi-img {
  552. position: absolute;
  553. width: 20px;
  554. height: 20px;
  555. right: 20px;
  556. top: 13px;
  557. }
  558. .list-item-rssi {
  559. position: absolute;
  560. width: 40px;
  561. height: 20px;
  562. right: 10px;
  563. top: 33px;
  564. font-size: 12px;
  565. font-weight: bold;
  566. display: flex;
  567. justify-content: center;
  568. }
  569. .list-item-line {
  570. position: absolute;
  571. height: 1px;
  572. width: 100vw;
  573. left: 20px;
  574. top: 56px;
  575. background-color: #c6c6c8;
  576. }
  577. .notice {
  578. display: flex;
  579. justify-content: center;
  580. align-items: center;
  581. margin-top: 10px;
  582. font-size: 13px;
  583. color: #909399;
  584. }
  585. .gap {
  586. height: 57px;
  587. }
  588. .text-area {
  589. display: flex;
  590. justify-content: center;
  591. background: white;
  592. width: 100%;
  593. height: 100%;
  594. }
  595. </style>