|
|
@@ -0,0 +1,323 @@
|
|
|
+<template>
|
|
|
+ <!-- 商品点检 -->
|
|
|
+ <view class="container">
|
|
|
+ <uni-nav-bar dark :fixed="true" shadow title="数智化产线AI视觉识别系统" backgroundColor="#007aff" color="#fff" height="60px">
|
|
|
+ <view class="nav-bar-view" style="">数智化产线AI视觉识别系统</view>
|
|
|
+ </uni-nav-bar>
|
|
|
+
|
|
|
+ <view class="uni-ma-10 " style="text-align: center;font-size: 50rpx;">
|
|
|
+ 设备({{eqSn}})
|
|
|
+ <uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="链接中" v-if="webSocketStatus==0" type="warning"></uni-tag>
|
|
|
+ <uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="已连接" v-else-if="webSocketStatus==1" type="primary"></uni-tag>
|
|
|
+ <uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="重连中" v-else-if="webSocketStatus==2" type="success"></uni-tag>
|
|
|
+ <uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="已断开" v-else-if="webSocketStatus==-1" type="error"></uni-tag>
|
|
|
+ <uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="未知" v-else type="default"></uni-tag>
|
|
|
+ </view>
|
|
|
+ <uni-row class="demo-uni-row uni-ma-10">
|
|
|
+ <uni-col :span="16" class="">
|
|
|
+ <view class="img-card uni-mx-5">
|
|
|
+ <image style="width: 100%;" mode="widthFix" v-if="imgUrl"
|
|
|
+ :src="imgUrl">
|
|
|
+ </image>
|
|
|
+ <view class="empty" v-else>
|
|
|
+ <uni-icons type="image" size="80"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="8">
|
|
|
+ <view class="uni-mr-5">
|
|
|
+ <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
|
|
|
+ <uni-tr>
|
|
|
+ <uni-th width="150" align="center">商品二维码</uni-th>
|
|
|
+ <!-- <uni-th width="100" align="center">图片</uni-th> -->
|
|
|
+ <uni-th width="50">状态</uni-th>
|
|
|
+ <uni-th align="center">识别结果</uni-th>
|
|
|
+ <uni-th align="center">拍照时间</uni-th>
|
|
|
+ </uni-tr>
|
|
|
+ <uni-tr v-for="(item, index) in tableData" :key="index" @click-row="clickRow(item)">
|
|
|
+ <template >
|
|
|
+ <uni-td align="center">{{ item.goodsCode }}</uni-td>
|
|
|
+ <!-- <uni-td align="center">
|
|
|
+ <view style="max-height: 60rpx;"><image style="width: 100rpx;height: 60rpx;":src="item.goodsImage"></image></view>
|
|
|
+ </uni-td> -->
|
|
|
+ <uni-td align="center">
|
|
|
+ <view :class="item.status==1?'uni-success':item.status==2?'uni-error':'uni-warning'">{{ item.status==1?'成功':item.status==2?'失败':'修正成功' }}</view>
|
|
|
+ </uni-td>
|
|
|
+ <uni-td align="center">{{ item.ocrResult }}</uni-td>
|
|
|
+ <uni-td align="center">{{ item.createTime }}</uni-td>
|
|
|
+ </template>
|
|
|
+ </uni-tr>
|
|
|
+ </uni-table>
|
|
|
+ <view class="uni-pagination-box"><uni-pagination show-icon :page-size="size" :current="current"
|
|
|
+ :total="total" @change="change" /></view>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+
|
|
|
+ <!-- 提示信息弹窗 -->
|
|
|
+ <uni-popup ref="message" type="message">
|
|
|
+ <uni-popup-message :type="msgType" fontSizt="30px" :message="messageText" :duration="3000"></uni-popup-message>
|
|
|
+ </uni-popup>
|
|
|
+
|
|
|
+ <!-- 普通弹窗 -->
|
|
|
+ <uni-popup ref="popup" background-color="#fff" :mask-click="false">
|
|
|
+ <view class="popup-header">物料详情</view>
|
|
|
+ <view class="popup-content" >
|
|
|
+ <uni-forms ref="detailsForm" :modelValue="details">
|
|
|
+ <uni-forms-item v-for="(item,index) in details" :key="item.id" :label="item.materialName" required :rules="[{'required': true,errorMessage: item.materialName+'必填'}]" :name="index+'.materialCode'">
|
|
|
+ <view class="form-item">
|
|
|
+ <uni-easyinput v-model="details[index].materialCode" :disabled="true" :placeholder="'请输入或扫描'+item.materialName+'的条码' "@blur="(e)=>detailsForm.id=e.detail.value" />
|
|
|
+ </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <input class="uni-easyinput__content-input" ref="materialCode" v-model="materialCode" :focus="true" :placeholder="'请输入或扫描物料条码' " @input="materialCodeInput"/>
|
|
|
+ <view class="button-group">
|
|
|
+ <button type="default" size="mini" @click="$refs.popup.close()">返回</button>
|
|
|
+ <button type="primary" size="mini" @click="submit('detailsForm')">提交</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const websocketModule = uni.requireNativePlugin("kyzone-websocket");
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isConnect:false,
|
|
|
+ tableData: [],
|
|
|
+ // 每页数据量
|
|
|
+ size: 10,
|
|
|
+ // 当前页
|
|
|
+ current: 1,
|
|
|
+ // 数据总量
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ eqSn: this.api.getSn(),
|
|
|
+ imgUrl:'',//https://ai.my-123.cn/pic/product-line/upload/20231218/d0dde7a200584e6cdb2e2f02622b9948.jpg
|
|
|
+ msgType:'',
|
|
|
+ messageText:'',
|
|
|
+ webSocketStatus:0,
|
|
|
+ detailsForm:{},
|
|
|
+ details:[],
|
|
|
+ materialCode:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ if(!this.eqSn){
|
|
|
+ let macAddress = that.api.getMacAddress()
|
|
|
+ that.api.setSn(macAddress)
|
|
|
+ }
|
|
|
+ // this.webSocketConfig()
|
|
|
+ this.getData(1)
|
|
|
+ this.initWebSocket()
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ // 页面销毁时执行的操作
|
|
|
+ console.log('页面销毁,onUnload被触发');
|
|
|
+ websocketModule.close()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initWebSocket(){
|
|
|
+ websocketModule.close()
|
|
|
+ var that = this
|
|
|
+ let url = that.api.wsHost() + that.eqSn +"_"+ new Date().getTime()
|
|
|
+ websocketModule.connect({
|
|
|
+ url: url,
|
|
|
+ reconnect: true, // 是否重连
|
|
|
+ headers:[],
|
|
|
+ })
|
|
|
+ plus.globalEvent.addEventListener('onConnectState', function(e) {
|
|
|
+ debugger
|
|
|
+ const data = e.data;
|
|
|
+ that.webSocketStatus = data
|
|
|
+ })
|
|
|
+ plus.globalEvent.addEventListener('onErrorMsg', function(e) {
|
|
|
+ debugger
|
|
|
+ console.log("错误信息:" + e.data);
|
|
|
+ })
|
|
|
+ plus.globalEvent.addEventListener('onMessage', function(e) {
|
|
|
+ debugger
|
|
|
+ e.data = e.data.replace(/\"id\": (\d+)/g,'"id":"$1"');
|
|
|
+ const data = JSON.parse(e.data);
|
|
|
+ console.log("监听接收的信息:" );
|
|
|
+ console.log(data);
|
|
|
+
|
|
|
+ if(data.eqSn==that.eqSn){
|
|
|
+ that.imgUrl = data.goodsImage
|
|
|
+ that.msgType = data.status==1?'success':'error'
|
|
|
+ that.messageText = data.ocrResult
|
|
|
+ that.$refs.message.open()
|
|
|
+ that.getData(1)
|
|
|
+ if(data.status!=1){
|
|
|
+ that.clickRow(data)
|
|
|
+ }
|
|
|
+
|
|
|
+ let innerAudioContext = uni.createInnerAudioContext();
|
|
|
+ innerAudioContext.src = data.status==1?'../../static/cg.mp3':'../../static/sb.mp3';
|
|
|
+ innerAudioContext.play();
|
|
|
+ innerAudioContext.onPause(function() {
|
|
|
+ uni.$console.info('end');
|
|
|
+ innerAudioContext.destroy();//音频播放停止后,就销毁实例
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 分页触发
|
|
|
+ change(e) {
|
|
|
+ this.getData(e.current)
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ getData(pageCurrent, value = '') {
|
|
|
+ this.loading = true
|
|
|
+ let that = this,
|
|
|
+ url = "app/api/inspectionRecordsList",
|
|
|
+ params = {
|
|
|
+ current: pageCurrent,
|
|
|
+ size: that.size,
|
|
|
+ eqSn_equal: that.eqSn
|
|
|
+ }
|
|
|
+ that.api.request(url, params, "get").then((res) => {
|
|
|
+ that.tableData = res.records
|
|
|
+ that.total = res.total
|
|
|
+ that.loading = false
|
|
|
+ }).catch((res) => {
|
|
|
+ that.loading = false
|
|
|
+ })
|
|
|
+ // this.request({
|
|
|
+ // pageSize: this.pageSize,
|
|
|
+ // pageCurrent: pageCurrent,
|
|
|
+ // value: value,
|
|
|
+ // success: res => {
|
|
|
+ // // console.log('data', res);
|
|
|
+ // this.tableData = res.data
|
|
|
+ // this.total = res.total
|
|
|
+ // this.loading = false
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ clickRow(item){
|
|
|
+ let that = this
|
|
|
+ this.imgUrl = item.goodsImage
|
|
|
+ console.log(item)
|
|
|
+ if(item.status==2 && item.goodsId>0){
|
|
|
+ this.$refs.popup.open("center")
|
|
|
+ this.details=[];
|
|
|
+ that.api.request("app/api/getInspectionDetails", {inspectionRecordsId_equal:item.id}, "get").then((res) => {
|
|
|
+ that.details = res
|
|
|
+ console.log(res)
|
|
|
+ }).catch((res) => {
|
|
|
+ that.loading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit(ref) {
|
|
|
+ let that = this;
|
|
|
+ this.$refs[ref].validate().then(res => {
|
|
|
+ console.log("123123")
|
|
|
+ that.api.request("app/api/editInspectionDetails",that.details, "post").then((res) => {
|
|
|
+ that.$refs.popup.close()
|
|
|
+ uni.showToast({
|
|
|
+ title: `修改成功`
|
|
|
+ })
|
|
|
+ that.getData(1)
|
|
|
+ }).catch((res) => {
|
|
|
+ that.loading = false
|
|
|
+ })
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('err', err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ materialCodeInput(e){
|
|
|
+ let that = this;
|
|
|
+ let value = e.target.value;
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ that.materialCode='';
|
|
|
+ })
|
|
|
+ let count = 0;
|
|
|
+ that.details.forEach(function(item, index) {
|
|
|
+ if(item.correctMaterialCode == value){
|
|
|
+ console.log(index)
|
|
|
+ if(!item.materialCode){
|
|
|
+ that.$nextTick(()=>{
|
|
|
+ that.details[index].materialCode = value
|
|
|
+ })
|
|
|
+ count++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(item.materialCode){
|
|
|
+ count++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(count >= that.details.length){
|
|
|
+ console.log(count)
|
|
|
+ that.$nextTick(()=>{
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log("detailsForm")
|
|
|
+ that.submit('detailsForm')
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .img-card{
|
|
|
+ box-shadow: 0 0 5px 1px rgba(0,0,0,.08);
|
|
|
+ min-height: 1300rpx;
|
|
|
+ text-align: center;
|
|
|
+ .empty{
|
|
|
+ padding-top: 600rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-bar-view{
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 50rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .popup-header{
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-bottom: 2rpx #bcbcbc solid;
|
|
|
+ }
|
|
|
+ .popup-content{
|
|
|
+ margin: 100rpx;
|
|
|
+ .button-group{
|
|
|
+ margin-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ button{
|
|
|
+ width: 200rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uni-easyinput__content-input {
|
|
|
+ color: #333;
|
|
|
+ line-height: 35px;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 35px;
|
|
|
+ border: 1px solid $uni-border-1;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+</style>
|