index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. <template>
  2. <scroll-view class="main-container" scroll-y="true"
  3. :refresher-enabled="false">
  4. <view v-for="(item, index) in deviceListDataShow" :key="item.id" class="list-item" hover-class="list-item-hover"
  5. hover-start-time="0" hover-stay-time="100" @click="listViewTap(item.id)">
  6. <image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image>
  7. <image v-else src="/static/img/ble.png" class="list-item-img"></image>
  8. <text class="list-item-name">{{item.name}}</text>
  9. <image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img"></image>
  10. <image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit" class="list-item-rssi-img"></image>
  11. <image v-else-if="item.rssi >= -65" src="/static/img/s3.png" mode="aspectFit" class="list-item-rssi-img"></image>
  12. <image v-else-if="item.rssi >= -75" src="/static/img/s2.png" mode="aspectFit" class="list-item-rssi-img"></image>
  13. <image v-else="item.rssi < -75" src="/static/img/s1.png" mode="aspectFit" class="list-item-rssi-img"></image>
  14. <text class="list-item-rssi">{{item.rssi}}</text>
  15. <view class="list-item-line"></view>
  16. </view>
  17. <u-modal :show="showPwd" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="inputPwd" @cancel="cancel" :showCancelButton="true" :title="$t('buletooth.pwdinput')" >
  18. <view class="slot-content">
  19. <view>
  20. <u--input
  21. type="number"
  22. :placeholder="$t('buletooth.pwdtip')"
  23. border="surround"
  24. v-model="pwd"
  25. ></u--input>
  26. </view>
  27. <view style="margin:10px;text-decoration: underline;margin-bottom: 0px" @click="forgetPwd">
  28. {{i18('忘记密码')}}?
  29. </view>
  30. </view>
  31. </u-modal>
  32. <u-modal :show="showDeviceNo" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="resetPwd" @cancel="cancel" :showCancelButton="true" :title="i18('重置密码')" >
  33. <view class="slot-content">
  34. <view>
  35. <u--input
  36. type="number"
  37. :placeholder="i18('请输入序列号')"
  38. border="surround"
  39. v-model="inputDeviceNo"
  40. ></u--input>
  41. </view>
  42. </view>
  43. </u-modal>
  44. <view v-if="deviceListDataShow.length==0" class="notice"> - {{ $t('buletooth.nodevice') }} -</view>
  45. <view class="gap"></view>
  46. </scroll-view>
  47. </template>
  48. <script>
  49. import {getPwd,setPwd,parsePwd,sendPortDetailCmd,getUUID,parseDataObj} from "@/utils/weitiandi/device/device.js";
  50. // #ifdef APP
  51. import ecUI from '@/utils/ecUI.js'
  52. import ecBLE from '@/utils/ecBLE/ecBLE.js'
  53. // #endif
  54. // #ifdef MP
  55. const ecUI = require('@/utils/ecUI.js')
  56. const ecBLE = require('@/utils/ecBLE/ecBLE.js')
  57. // #endif
  58. import i18 from '@/utils/i18.js'
  59. let ctx
  60. let deviceListData = []
  61. export default {
  62. data() {
  63. return {
  64. showPwd:false,
  65. rightPwd:"",
  66. pwd:"",
  67. timer:"",
  68. buleid:"",
  69. deviceListDataShow: [],
  70. showTimer:null,
  71. connected:false,
  72. uuid:"",
  73. showDeviceNo:false,
  74. inputDeviceNo:""
  75. }
  76. },
  77. onLoad() {
  78. uni.setNavigationBarTitle({
  79. title: this.$t('page.bluetooth')
  80. })
  81. ecUI.showLoading(this.$t('buletooth.init'))
  82. ctx = this
  83. clearInterval(this.timer);
  84. this.timer = setInterval(() => {
  85. ctx.deviceListDataShow = JSON.parse(JSON.stringify(deviceListData))
  86. }, 800)
  87. },
  88. onUnload(){
  89. ecBLE.stopBluetoothDevicesDiscovery();
  90. ecBLE.closeBLEConnection()
  91. },
  92. onShow() {
  93. if(this.showTimer!= null){
  94. clearTimeout(this.showTimer);
  95. }
  96. this.showTimer = setTimeout(() => {
  97. ctx.openBluetoothAdapter()
  98. }, 100)
  99. },
  100. methods: {
  101. i18(text){
  102. return i18(text)
  103. },
  104. cancel(){
  105. this.showPwd = false;
  106. uni.navigateBack({
  107. });
  108. },
  109. resetPwd(){
  110. let self = this;
  111. if(!this.inputDeviceNo){
  112. self.$modal.showToast("请输入序列号");
  113. return;
  114. }
  115. if(this.uuid != this.inputDeviceNo){
  116. self.$modal.showToast("序列号有误");
  117. return;
  118. }
  119. if(this.uuid == this.inputDeviceNo){
  120. this.$modal.confirm("密码将被重置为123456").then(res=>{
  121. setPwd("123456")
  122. self.$modal.showToast("密码修改成功");
  123. this.rightPwd = "123456";
  124. self.loginSuccess();
  125. });
  126. }
  127. },
  128. goBack(){
  129. uni.navigateBack({
  130. });
  131. },
  132. inputPwd(){
  133. if(!this.pwd ){
  134. this.$modal.showToast(this.$t('buletooth.errpwd'));
  135. }else{
  136. if(this.rightPwd && this.rightPwd === this.pwd){
  137. this.loginSuccess();
  138. }else{
  139. this.$modal.showToast(this.$t('buletooth.errpwd'));
  140. }
  141. }
  142. },
  143. loginSuccess(){
  144. this.showPwd = false;
  145. this.showDeviceNo = false;
  146. uni.setStorageSync("pwd",this.rightPwd);
  147. uni.setStorageSync('blueid', this.buleid);
  148. this.pwd = "";
  149. ecBLE.stopBluetoothDevicesDiscovery();
  150. uni.navigateTo({
  151. url: '/pages/weitiandi/bluetooth/status'
  152. });
  153. },
  154. getLocalPwd(){
  155. let pwd = uni.getStorageSync("pwd");
  156. return pwd;
  157. },
  158. listViewTap(id){
  159. let self = this;
  160. ecUI.showLoading(this.$t('buletooth.connecting'))
  161. ecBLE.onBLEConnectionStateChange(res => {
  162. console.log(res);
  163. if (res.ok) {
  164. self.connected = true;
  165. setTimeout(function(){
  166. ecUI.hideLoading()
  167. getPwd();
  168. self.buleid = id;
  169. },500)
  170. // uni.setStorageSync('blueid', id);
  171. // ecBLE.stopBluetoothDevicesDiscovery();
  172. //
  173. } else {
  174. ecUI.hideLoading()
  175. uni.removeStorageSync('blueid');
  176. ecUI.showModal(
  177. this.$t('buletooth.tip'),
  178. 'error,errCode=' + res.errCode + ',errMsg=' + res.errMsg
  179. )
  180. }
  181. });
  182. //receive data
  183. ecBLE.onBLECharacteristicValueChange((str, strHex) => {
  184. console.log("数据来了")
  185. let isCheckRevHex = true;
  186. let data =
  187. (isCheckRevHex ? strHex.replace(/[0-9a-fA-F]{2}/g, ' $&') : str)
  188. console.log(data)
  189. self.$modal.closeLoading();
  190. data = parseDataObj(data);
  191. console.log(data);
  192. let type = data.type;
  193. if(type == 253){
  194. self.messageCallback(data)
  195. }else{
  196. let pwd = data.real_data;
  197. let localPwd = self.getLocalPwd()
  198. console.log(pwd);
  199. console.log("localPwd:"+localPwd)
  200. self.rightPwd = pwd;
  201. if(pwd != localPwd){
  202. self.showInputPwd();
  203. }else{
  204. self.loginSuccess();
  205. }
  206. }
  207. })
  208. self.connected = false;
  209. ecBLE.createBLEConnection(id);
  210. setTimeout(function (){
  211. if(!self.connected){
  212. self.$modal.showToast(i18('连接失败'));
  213. self.startBluetoothDevicesDiscovery()
  214. }
  215. },10000);
  216. },
  217. showInputPwd(){
  218. this.showPwd = true;
  219. },
  220. messageCallback(data){
  221. let self = this;
  222. console.log(data);
  223. let type = data.type;
  224. let real_data = data.real_data;
  225. if(type == 253){
  226. self.$modal.closeLoading();
  227. self.uuid = real_data.substr(0,6);
  228. }
  229. self.$forceUpdate();
  230. console.log('收到服务器内容:' + JSON.stringify(data));
  231. },
  232. forgetPwd(){
  233. this.$modal.loading("正在读取设备ID");
  234. getUUID()
  235. this.showDeviceNo = true;
  236. },
  237. openBluetoothAdapter() {
  238. let self = this;
  239. ecBLE.onBluetoothAdapterStateChange(res => {
  240. ecUI.hideLoading()
  241. if (res.ok) {
  242. let blueid = uni.getStorageSync('blueid');
  243. console.log('Bluetooth adapter ok,blueid:'+blueid)
  244. if(blueid){
  245. self.listViewTap(blueid);
  246. }else{
  247. ctx.startBluetoothDevicesDiscovery()
  248. }
  249. } else {
  250. ecUI.showModal(
  251. this.$t('buletooth.tip'),
  252. `Bluetooth adapter error | ${res.errCode} | ${res.errMsg}`,
  253. () => {
  254. }
  255. )
  256. }
  257. })
  258. ecBLE.openBluetoothAdapter()
  259. },
  260. startBluetoothDevicesDiscovery() {
  261. ecBLE.stopBluetoothDevicesDiscovery();
  262. console.log('start search')
  263. ecBLE.onBluetoothDeviceFound(res => {
  264. // if(res.id==="EC:22:05:13:78:49")
  265. // console.log(`id:${res.id},name:${res.name},rssi:${res.rssi}`)
  266. let isRight = false;
  267. if(res.name.startsWith('BT_') || res.name.startsWith('FC41D')){
  268. isRight = true;
  269. }
  270. if(!isRight){
  271. return;
  272. }
  273. for (const item of deviceListData) {
  274. if (item.id === res.id) {
  275. item.name = res.name
  276. item.rssi = res.rssi
  277. return
  278. }
  279. }
  280. let manufacturer = ''
  281. if (res.name.length === 11 && res.name.startsWith('@')) {
  282. manufacturer = 'eciot'
  283. }
  284. if (res.name.length === 15 && res.name.startsWith('BT_')) {
  285. manufacturer = 'eciot'
  286. }
  287. manufacturer = 'eciot'
  288. deviceListData.push({
  289. id: res.id,
  290. name: res.name,
  291. rssi: res.rssi,
  292. manufacturer,
  293. })
  294. })
  295. ecBLE.startBluetoothDevicesDiscovery()
  296. },
  297. }
  298. }
  299. </script>
  300. <style>
  301. .main-container {
  302. height: 100vh;
  303. }
  304. .list-item {
  305. height: 57px;
  306. position: relative;
  307. }
  308. .list-item-hover {
  309. background-color: #e5e4e9;
  310. }
  311. .list-item-img {
  312. position: absolute;
  313. width: 36px;
  314. height: 36px;
  315. left: 20px;
  316. top: 10px;
  317. }
  318. .list-item-name {
  319. position: absolute;
  320. font-size: 22px;
  321. left: 76px;
  322. top: 0px;
  323. line-height: 56px;
  324. }
  325. .list-item-rssi-img {
  326. position: absolute;
  327. width: 20px;
  328. height: 20px;
  329. right: 20px;
  330. top: 13px;
  331. }
  332. .list-item-rssi {
  333. position: absolute;
  334. width: 40px;
  335. height: 20px;
  336. right: 10px;
  337. top: 33px;
  338. font-size: 12px;
  339. font-weight: bold;
  340. display: flex;
  341. justify-content: center;
  342. }
  343. .list-item-line {
  344. position: absolute;
  345. height: 1px;
  346. width: 100vw;
  347. left: 20px;
  348. top: 56px;
  349. background-color: #c6c6c8;
  350. }
  351. .notice {
  352. display: flex;
  353. justify-content: center;
  354. align-items: center;
  355. margin-top: 10px;
  356. font-size: 13px;
  357. color: #909399;
  358. }
  359. .gap {
  360. height: 57px;
  361. }
  362. </style>