index.vue 11 KB

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