index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. <template>
  2. <view class="kk-printer">
  3. <view class="kk-printer-btn">
  4. <u-button @tap="handlePrintTap" shape="circle" :custom-style="{background:$config('primaryColor')}" type="primary">{{isPrinting?printingText:defaultText}}</u-button>
  5. </view>
  6. <view class="kk-shadow" :class="isShowSearch?'show':''" @tap="handleSearchClose">
  7. <view class="kk-modal" @tap.stop="doNothing">
  8. <view class="kk-search-device">
  9. <view class="kk-filter-wrap">
  10. <view class="filter-title">根据SRRI过滤设备</view>
  11. <slider @change="handleSRRIChange" max='-20' min='-100' value="-95" show-value/>
  12. </view>
  13. <view class="kk-filter-wrap">
  14. <view class="filter-title">根据蓝牙名过滤</view>
  15. <input type="text" placeholder-class="kk-placeholder-class" placeholder="请输入蓝牙名字或设备ID搜索" v-model="filterName" />
  16. </view>
  17. <view class="kk-btn-wrap">
  18. <view class="kk-btn-item confirm-btn" @tap="searchBtnTap" v-if="!isSearching">
  19. 搜索设备
  20. </view>
  21. <view class="kk-btn-item confirm-btn" v-else>
  22. 搜索中...
  23. </view>
  24. <view class="kk-btn-item" @tap="stopSearchBtnTap">
  25. 停止搜索
  26. </view>
  27. </view>
  28. <view class="kk-devices-wrap">
  29. <view class="empty-wrap" v-if="filterDeviceList.length <= 0">
  30. <view class="empty-icon"></view>
  31. <view class="empty-text">~ 无可搜索到的设备 ~</view>
  32. </view>
  33. <view class="" v-else>
  34. <view class="kk-devices-item" v-for="(item,index) in filterDeviceList" :key="index" @tap="handleConnectDevice(item)">
  35. <view class="name">
  36. <text>设备名称:</text>
  37. <text>{{item.name?item.name:'未命名'}}</text>
  38. </view>
  39. <view class="rssi">
  40. <text>信号强度:</text>
  41. <text>({{Math.max(0, item.RSSI + 100)}}%)</text>
  42. </view>
  43. <view class="deviceid">
  44. <text>设备ID:</text>
  45. <text>{{item.deviceId}}</text>
  46. </view>
  47. <view class="advmac" v-if="item.advMac">
  48. <text>advMac:</text>
  49. <text>{{item.advMac}}</text>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import tsc from '@/components/kk-printer/printer/tsc.js'
  61. import esc from '@/components/kk-printer/printer/esc.js'
  62. import * as blesdk from './utils/bluetoolth';
  63. import util from './utils/util.js';
  64. export default {
  65. data(){
  66. return{
  67. //是否正在打印
  68. isPrinting:false,
  69. //是否正在搜索设备
  70. isSearching:false,
  71. //是否显示蓝牙列表
  72. isShowSearch:false,
  73. //按蓝牙名过滤
  74. filterName:'DL-',
  75. //按信号过滤
  76. filterRSSI:-95,
  77. //设备列表
  78. devicesList:[],
  79. //连接的设备ID
  80. deviceId:'',
  81. //根据设备ID获取的服务
  82. services:'',
  83. //获取特征值时返回的三要素
  84. serviceId: '',
  85. writeId: '',
  86. readId: ''
  87. }
  88. },
  89. props:{
  90. //按钮默认文字
  91. defaultText:{
  92. type:String,
  93. default:'快速打印'
  94. },
  95. //按钮打印中的文字
  96. printingText:{
  97. type:String,
  98. default:'打印中...'
  99. },
  100. bufferData:{
  101. type:String,
  102. require:true
  103. },
  104. roomcode:{
  105. type:String,
  106. require:true
  107. },
  108. CustName:{
  109. type:String,
  110. require:true
  111. },
  112. roomid:{
  113. type:String,
  114. require:true
  115. }
  116. },
  117. computed:{
  118. mapFilterRSSI(){
  119. return (0 - this.filterRSSI)
  120. },
  121. filterDeviceList(){
  122. let devices = this.devicesList;
  123. let name = this.filterName;
  124. let rssi = this.filterRSSI;
  125. console.log(devices,name,rssi)
  126. //按RSSI过滤
  127. let filterDevices1 = devices.filter((item)=>{
  128. return item.RSSI > rssi
  129. })
  130. console.log(filterDevices1)
  131. // 按名字过滤
  132. let filterDevices2
  133. if(name!=''){
  134. filterDevices2 = filterDevices1.filter((item)=>{
  135. return (item.name.indexOf(name) >= 0 || item.deviceId.indexOf(name) >= 0)
  136. })
  137. }else{
  138. filterDevices2 = filterDevices1
  139. }
  140. // 根据广播数据提取MAC地址
  141. for (let i = 0; i < filterDevices2.length;i++) {
  142. if (filterDevices2[i].hasOwnProperty('advertisData')){
  143. if (filterDevices2[i].advertisData.byteLength == 8) {
  144. filterDevices2[i].advMac = util.buf2hex(filterDevices2[i].advertisData.slice(2, 7));
  145. }
  146. }
  147. }
  148. return filterDevices2
  149. }
  150. },
  151. mounted() {
  152. },
  153. beforeDestroy(){
  154. this.stopSearchBtnTap();
  155. },
  156. methods:{
  157. doNothing(){
  158. return;
  159. },
  160. //点击打印按钮
  161. handlePrintTap(){
  162. //打开蓝牙适配器
  163. blesdk.openBlue().then((res)=>{
  164. //获取已连接设备
  165. blesdk.getConnectedBluetoothDevices().then((res)=>{
  166. //若没有已连接设备,弹框搜索设备
  167. console.log(res,this.deviceId,this.serviceId,this.writeId,this.bufferData,this.onPrintSuccess)
  168. if(res.devices.length == 0){
  169. this.isShowSearch = true
  170. }else{
  171. const lastDevice = this.$store.state.vuex_lastBuleDevice
  172. if(lastDevice && res.devices[0].deviceId == lastDevice.deviceId){
  173. this.deviceId = lastDevice.deviceId
  174. this.serviceId = lastDevice.serviceId
  175. this.writeId = lastDevice.writeId
  176. this.readId = lastDevice.readId
  177. }
  178. let datalen=20;
  179. if (plus.os.name != 'Android')
  180. {
  181. datalen=180;
  182. }
  183. this.isPrinting = true;
  184. this.$nextTick(()=>{
  185. var command = tsc.jpPrinter.createNew()
  186. command.init()
  187. command.setSize(40, 30) // 标签纸张宽高,单位mm
  188. command.setGap(2) // 标签上下间距,单位mm
  189. command.setCls() // 清除缓冲区数据
  190. command.setText(50, 10, "TSS24.BF2", 1, 1, "打印测试")
  191. command.setQR(50, 50, "L", 5, "A", "https://www.baidu.com")
  192. command.setBox(5, 5, 795, 595, 1)
  193. command.setPagePrint(1,2) // 打印分数1,每个标签重发打印2次
  194. console.log("开始打印了")
  195. blesdk.senBlData(this.deviceId, this.serviceId, this.writeId, command.getData(), this.onPrintSuccess);
  196. this.isPrinting = false;
  197. })
  198. }
  199. }).catch((err)=>{
  200. blesdk.catchToast(err);
  201. })
  202. }).catch((err)=>{
  203. blesdk.catchToast(err);
  204. })
  205. },
  206. onGetDevice(res){
  207. this.devicesList = res;
  208. },
  209. handleSearchClose(){
  210. this.isShowSearch = false
  211. },
  212. handleSRRIChange(e){
  213. this.filterRSSI = e.detail.value
  214. },
  215. //开始搜索设备
  216. searchBtnTap(){
  217. blesdk.startBluetoothDevicesDiscovery();
  218. this.isSearching = true;
  219. blesdk.onfindBlueDevices(this.onGetDevice)
  220. },
  221. //停止搜索设备
  222. stopSearchBtnTap(){
  223. blesdk.stopBlueDevicesDiscovery();
  224. this.isSearching = false;
  225. },
  226. //点击连接设备
  227. handleConnectDevice(device){
  228. let deviceId = device.deviceId;
  229. let name = device.name;
  230. this.deviceId = deviceId;
  231. console.log('deviceId',this.deviceId)
  232. // uni.setStorageSync('k_curDeviceID',deviceId);
  233. // uni.setStorageSync('k_curDeviceName',name);plus.bluetooth.onBluetoothDeviceFound
  234. uni.onBLEConnectionStateChange(function(res){
  235. console.log('连接',res)
  236. if(res.connected){
  237. plus.nativeUI.toast('设备'+ res.deviceId + '已连接',{
  238. verticalAlign:'center'
  239. })
  240. }else{
  241. plus.nativeUI.toast('设备'+ res.deviceId + '已断开连接',{
  242. verticalAlign:'center'
  243. })
  244. }
  245. })
  246. blesdk.createBLEConnection(deviceId, this.onConnectSuccess, this.onConnectFail);
  247. },
  248. onConnectSuccess(res){
  249. this.stopSearchBtnTap()
  250. blesdk.getBLEDeviceServices(this.deviceId, this.onGetServicesSuccess, this.onGetServicesFail);
  251. },
  252. onConnectFail(err){
  253. console.log('链接失败',err)
  254. },
  255. onGetServicesSuccess(res){
  256. console.log('获取服务',res)
  257. this.services = res.serviceId;
  258. blesdk.getDeviceCharacteristics(this.deviceId, this.services, this.onGetCharacterSuccess, this.onGetCharacterFail);
  259. },
  260. onGetServicesFail(err){
  261. console.log('获取服务失败')
  262. },
  263. onGetCharacterSuccess(res){
  264. console.log('获取特征值成功',res)
  265. this.serviceId = res.serviceId;
  266. this.writeId = res.writeId;
  267. this.readId = res.readId;
  268. this.isShowSearch = false;
  269. this.$store.state.vuex_lastBuleDevice = {deviceId:this.deviceId,serviceId:this.serviceId,writeId:this.writeId,readId:this.readId}
  270. },
  271. onGetCharacterFail(err){
  272. console.log('特征值获取失败')
  273. },
  274. onPrintSuccess(){
  275. this.isPrinting = false;
  276. console.log({roomcode:this.roomcode,CustName:this.CustName,id:this.roomid})
  277. console.log('打印成功')
  278. // this.$emit('onPrintSuccess')
  279. },
  280. onPrintFail(){
  281. console.log('打印失败')
  282. this.isPrinting = false;
  283. },
  284. closeConnect(){
  285. blesdk.closeBLEConnection()
  286. }
  287. }
  288. }
  289. </script>
  290. <style lang="scss" scoped>
  291. .kk-printer{
  292. &-btn{
  293. width:100%;
  294. height:100%;
  295. }
  296. .kk-shadow{
  297. display: none;
  298. &.show{
  299. display: block;
  300. width:100vw;
  301. height:100vh;
  302. background: rgba(0,0,0,0.4);
  303. position: fixed;
  304. top: 0;
  305. left: 0;
  306. display: flex;
  307. justify-content: center;
  308. align-items: center;
  309. z-index: 10000;
  310. .kk-modal{
  311. width:680upx;
  312. height: 80%;
  313. padding:24upx;
  314. box-sizing: border-box;
  315. overflow-y: auto;
  316. border-radius: 20upx;
  317. background: #ffffff;
  318. display: flex;
  319. justify-content: center;
  320. align-items: center;
  321. .kk-search-device{
  322. width:100%;
  323. height: 100%;
  324. .kk-filter-wrap{
  325. width:100%;
  326. height: 160upx;
  327. display: flex;
  328. flex-direction: column;
  329. justify-content: flex-start;
  330. align-items: flex-start;
  331. .filter-title{
  332. line-height: 70upx;
  333. font-size: 30upx;
  334. color: #999999;
  335. }
  336. &>slider{
  337. width:90%;
  338. height: 90upx;
  339. }
  340. &>input{
  341. padding:0 20upx;
  342. box-sizing: border-box;
  343. border-radius: 10upx;
  344. height: 90upx;
  345. width:100%;
  346. border: 1upx solid #ebebeb;
  347. }
  348. }
  349. .kk-btn-wrap{
  350. width:100%;
  351. height: 140upx;
  352. display: flex;
  353. justify-content: space-between;
  354. align-items: center;
  355. &>view{
  356. flex:1 1 auto;
  357. height: 100upx;
  358. line-height: 100upx;
  359. border-radius: 16upx;
  360. text-align: center;
  361. color:#ffffff;
  362. &.confirm-btn{
  363. background: #007AFF;
  364. margin-right:30upx;
  365. }
  366. &:nth-last-child(1){
  367. background: #DD524D;
  368. }
  369. }
  370. }
  371. .kk-devices-wrap{
  372. height: calc(100% - 460upx);
  373. overflow-y:auto;
  374. padding:10upx 20upx;
  375. box-sizing: border-box;
  376. border: 1upx solid #ebebeb;
  377. box-sizing: border-box;
  378. border-radius: 20upx;
  379. .empty-wrap{
  380. width:100%;
  381. height: 100%;
  382. display: flex;
  383. flex-direction: column;
  384. justify-content: center;
  385. align-items: center;
  386. .empty-icon{
  387. width:268upx;
  388. height: 240upx;
  389. background: url('./empty-icon.png') no-repeat;
  390. background-size:100% 100%;
  391. margin-bottom: 26upx;
  392. }
  393. .empty-text{
  394. width: 100%;
  395. line-height: 50upx;
  396. font-size: 30upx;
  397. text-align: center;
  398. color: #999999;
  399. }
  400. }
  401. .kk-devices-item{
  402. width:100%;
  403. border-bottom: 1upx solid #ebebeb;
  404. padding:10upx 0;
  405. box-sizing: border-box;
  406. &:nth-last-child(1){
  407. border-bottom: none;
  408. }
  409. &>view{
  410. width:100%;
  411. font-size: 30upx;
  412. }
  413. }
  414. }
  415. }
  416. }
  417. }
  418. }
  419. }
  420. .kk-placeholder-class{
  421. font-size: 30upx;
  422. color:#999999;
  423. }
  424. </style>