putStorage.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <template>
  2. <view class="container">
  3. <scroll-view scroll-y="true" class="scroll-list"
  4. >
  5. <uni-list>
  6. <uni-list-item border v-for="(item, index) in listArr">
  7. <template v-slot:header>
  8. <view class="slot-box">
  9. <image class="slot-image" src="/static/girder.png" mode="widthFix" style="width: 50px; height: 50px;"></image>
  10. </view>
  11. </template>
  12. <template v-slot:body>
  13. <view class="ml-6" style="font-size: 14px;">
  14. <view class="name">
  15. {{item}}
  16. </view>
  17. <view>
  18. {{item}}
  19. </view>
  20. <view>
  21. {{item}}
  22. </view>
  23. </view>
  24. </template>
  25. <template v-slot:footer>
  26. <uni-icons type="close" color="#999" size="20" style="position: absolute; right: 20px;" @click="clearItem(item,index)"></uni-icons>
  27. </template>
  28. </uni-list-item>
  29. </uni-list>
  30. </scroll-view>
  31. <view class="button-container" v-if="type==1">
  32. <button class="btn" type="default" @click='startScan' v-if="isShowStartBtn" :loading="scanLoad">
  33. <uni-icons type="scan"></uni-icons>
  34. 开始扫描
  35. </button>
  36. <button class="btn" type="default" @click='stopScan' v-if="!isShowStartBtn">
  37. <uni-icons type="circle-filled"></uni-icons>
  38. 停止扫描</button>
  39. <button class="btn" type="default" @click="toStorageClick">
  40. <uni-icons type="upload-filled"></uni-icons>
  41. 一键入库</button>
  42. </view>
  43. <view class="button-container" v-if="type==2">
  44. <button class="btn" type="default" @click='startScan' v-if="isShowStartBtn" :loading="scanLoad">
  45. <uni-icons type="scan"></uni-icons>
  46. 开始扫描</button>
  47. <button class="btn" type="default" @click='stopScan' v-if="!isShowStartBtn">
  48. <uni-icons type="circle-filled"></uni-icons>
  49. 停止扫描</button>
  50. <button class="btn" type="default" @click="toReport">
  51. <uni-icons type="upload"></uni-icons>
  52. 一键生成报告</button>
  53. </view>
  54. <LottieAnimation :animationData="animationData" v-if="!isShowStartBtn" />
  55. </view>
  56. </template>
  57. <script setup>
  58. import LottieAnimation from './LottieAnimation.vue';
  59. import animationData from '/static/lotte/circle.json'; // 导入你的动画 JSON 数据
  60. import {
  61. onMounted,
  62. ref,
  63. watch
  64. } from "vue";
  65. import {onLoad, onReady, onUnload} from '@dcloudio/uni-app'
  66. import {getArrValue} from "js-fast-way";
  67. // 获取 module
  68. // const rfidModule = uni.requireNativePlugin("DeviceModule_RFID");
  69. //渲染完成
  70. onReady(() => {
  71. // #ifdef APP-PLUS
  72. // rfidModuleInit()
  73. // #endif
  74. })
  75. onLoad((options)=>{
  76. type.value=options.type
  77. if(options.type==1){
  78. title.value='样品入库'
  79. }else{
  80. title.value='样品检测'
  81. }
  82. uni.setNavigationBarTitle({
  83. title:title.value
  84. })
  85. })
  86. const title=ref('')
  87. const type=ref('1')
  88. // //按键操作
  89. const isRfidInit = ref(true)
  90. const rfidModuleInit = () => {
  91. isRfidInit.value = true
  92. uni.showLoading({
  93. title: 'RFID模块加载中...',
  94. mask: true,
  95. });
  96. /**
  97. 手机按键监听事件,可在此编写一些逻辑,如使用按键触发扫描,更多详细信息请查阅uni官方文档
  98. 需要注意:退出界面必须移除监听,否则再进入页面重复注册监听会出现多次触发、回调失效的问题
  99. */
  100. plus.key.addEventListener('keydown', keyListener);
  101. //初始化
  102. setTimeout(() => {
  103. // 使用模块前必须先初始化RDIF模块
  104. let { code } = rfidModule.init();
  105. if (code === 0) {
  106. uni.hideLoading();
  107. } else if (code === -1) {
  108. uni.hideLoading();
  109. uni.showToast({
  110. title: 'RFID模块加载失败',
  111. icon: 'error',
  112. duration: 3000
  113. })
  114. } else {
  115. uni.hideLoading();
  116. }
  117. isRfidInit.value = false
  118. }, 400);
  119. }
  120. //按键操作
  121. const keyListener = ({keyCode}) => {
  122. if (keyCode === 293 || keyCode === 312) {
  123. if (isScan.value) {
  124. stopScan()
  125. } else {
  126. startScan()
  127. }
  128. }
  129. }
  130. //开始扫描
  131. const isScan = ref(false)
  132. const startScan = () => {
  133. isShowStartBtn.value=false
  134. if (isRfidInit.value) return
  135. isScan.value = true
  136. rfidModule.startScan((res) => {
  137. if (res.code === 0) {
  138. uni.showToast({
  139. icon: "success",
  140. title: '开启扫描成功'
  141. })
  142. } else if (res.code === 1) {
  143. startScanData(res.data)
  144. }
  145. })
  146. }
  147. //扫描结果处理
  148. const scanDatas = ref([])
  149. const startScanData = async (data) => {
  150. const arr = getArrValue(data)
  151. let epcs = scanDatas.value
  152. for (let i = 0; i < arr.length; i++) {
  153. const epc = arr[i].epc
  154. if (epcs.indexOf(epc) === -1) {
  155. epcs.push(epc)
  156. }
  157. }
  158. scanDatas.value = epcs
  159. console.log(scanDatas.value,'scanDatas.value');
  160. listArr.value=scanDatas.value
  161. }
  162. //停止扫描
  163. const stopScan = () => {
  164. const { code } = rfidModule.stopScan()
  165. if (code === 0) {
  166. isScan.value = false
  167. uni.showToast({
  168. icon: "success",
  169. title: '关闭扫描成功'
  170. })
  171. isShowStartBtn.value=true
  172. } else {
  173. uni.showToast({
  174. icon: "error",
  175. title: res.message
  176. })
  177. }
  178. }
  179. //页面卸载
  180. onUnload(()=>{
  181. // #ifdef APP-PLUS
  182. plus.key.removeEventListener('keydown', keyListener)
  183. // 使用完毕必须释放RDIF模块
  184. rfidModule.free();
  185. // #endif
  186. })
  187. const listArr=ref([
  188. {name:' 水泥(42.5级散装)',num:'SN20015678',postion:'路基、路面、桥梁、隧道'},
  189. {name:' 水泥(42.5级散装)',num:'SN20015678',postion:'路基、路面、桥梁、隧道'},
  190. ])
  191. //开始扫描
  192. const isShowStartBtn=ref(true)
  193. const scanLoad=ref(false)
  194. const toStorageClick=()=>{
  195. if(!isShowStartBtn.value){
  196. uni.showToast({
  197. title: '请先停止扫描',
  198. icon: 'none',
  199. duration: 3000
  200. })
  201. }
  202. }
  203. const clearItem=(item,index)=>{
  204. listArr.value.splice(index,1)
  205. }
  206. //一键入库
  207. const storageLoad=ref(false)
  208. //一键生成报告
  209. const toReport=()=>{
  210. if(!isShowStartBtn.value){
  211. uni.showToast({
  212. title: '请先停止扫描',
  213. icon: 'none',
  214. duration: 3000
  215. })
  216. }
  217. }
  218. </script>
  219. <style lang="scss" scoped>
  220. .name{
  221. font-weight: bold;
  222. }
  223. .container {
  224. display: flex;
  225. flex-direction: column;
  226. height: 100vh; /* 使容器高度为视口高度 */
  227. }
  228. .scroll-list {
  229. flex: 1; /* 占据剩余空间 */
  230. overflow-y: auto; /* 纵向滚动 */
  231. }
  232. .button-container {
  233. display: flex;
  234. justify-content: space-around; /* 两个按钮均匀分布 */
  235. padding: 10px;
  236. background-color: #fff; /* 背景色 */
  237. box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  238. position: fixed; /* 固定在底部 */
  239. bottom: 0; /* 靠近底部 */
  240. left: 0; /* 左对齐 */
  241. right: 0; /* 右对齐 */
  242. z-index: 100;
  243. }
  244. .btn {
  245. flex: 1; /* 每个按钮占据相同的空间 */
  246. margin: 0 5px; /* 按钮之间的间距 */
  247. border: none;
  248. border-radius: 5px;
  249. cursor: pointer;
  250. color: black;
  251. }
  252. </style>