405 lines
11 KiB
Plaintext
405 lines
11 KiB
Plaintext
<template>
|
||
<view class="page-container">
|
||
<view>
|
||
<live-pusher v-once id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
|
||
device-position="back" :auto-focus="false" :muted="true" :enable-camera="true" :enable-mic="true"
|
||
:zoom="true" :style="[{height: cameraHeight+'rpx' ,width:'750rpx'}]">
|
||
</live-pusher>
|
||
</view>
|
||
<view class="table-list-item">
|
||
<view class="scan-btn" @click="handleInstruct('shutter')">
|
||
<text style="color: #FFF;">开始识别</text>
|
||
</view>
|
||
</view>
|
||
<view class="table-list-item">
|
||
<uni-row :gutter="24" style="display: flex; align-items: center">
|
||
<uni-col :span="5">
|
||
<text> 设备编码 </text>
|
||
</uni-col>
|
||
<uni-col :span="10">
|
||
<view>
|
||
<uni-easyinput v-model="queryCodeParams.maCode" maxlength="30" placeholder="请输入内容" />
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="6">
|
||
<view class="coding-btn" style="padding: 10rpx 0;color: #fe9a09;background-color: #fff7eb;border: 1px solid #fe9a09;"
|
||
@click="getCode()">
|
||
<text style="color: #fe9a09;text-align: center;">编码检索</text>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</view>
|
||
<view class="table-list-item">
|
||
<scroll-view class="scroll-view" scroll-y="true" style="height: 500rpx;">
|
||
<uni-forms :model="codeData" label-width="100" :border="true">
|
||
<uni-forms-item label="物资名称：" name="materialType">
|
||
<text style="display: flex;align-items: center;">{{ codeData.materialType }}</text>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="物资类型：" name="materialName">
|
||
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.typeName }}</text>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="规格型号：" name="materialModel">
|
||
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.materialName }}</text>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="设备编码：" name="maCode">
|
||
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.maCode }}</text>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="设备状态：" name="statusName">
|
||
<text style="height: 100%;display: flex;align-items: center;">{{ codeData.maStatusName }}</text>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="外观判定：" name="apDetection">
|
||
<uni-easyinput v-model="apDetection" maxlength="30" placeholder="请输入内容" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="附件：">
|
||
<div class="upload" @click="uploadImg" v-if="imgBeseUrl==''">+</div>
|
||
<div class="upload" @click="uploadImg" v-else>
|
||
<image :src="imgBeseUrl" style="width: 160rpx;height: 160rpx;" mode=""></image>
|
||
</div>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="outbound-btn" @tap="onHandleConfirm">
|
||
<text style="color: #FFF;">确认</text>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
livePusher: null,
|
||
ready: true,
|
||
cameraHeight: '', //相机画面宽度
|
||
coverImage: null,
|
||
queryParams:{},
|
||
queryCodeParams:{
|
||
maCode:""
|
||
},
|
||
codeData:{},
|
||
apDetection:"",
|
||
bmFileInfos:[],
|
||
imgBeseUrl:"",
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.queryParams = JSON.parse(options.queryParams)
|
||
console.log(this.queryParams)
|
||
// this.queryCodeParams.typeId = this.queryParams.typeId;
|
||
},
|
||
onReady() {
|
||
this.cameraHeight = uni.getSystemInfoSync().screenHeight * 0.22
|
||
console.log(this.cameraHeight)
|
||
this.init()
|
||
},
|
||
methods: {
|
||
//初始化相机
|
||
init() {
|
||
this.livePusher = uni.createLivePusherContext('livePusher', this);
|
||
console.log(this.livePusher)
|
||
setTimeout(() => {
|
||
this.startPreview()
|
||
}, 1000)
|
||
},
|
||
// 开始相机
|
||
startPreview() {
|
||
this.livePusher.startPreview({
|
||
success: () => {
|
||
console.log('相机初始化成功');
|
||
switch (plus.os.name) {
|
||
case 'Android':
|
||
break;
|
||
case 'iOS':
|
||
this.livePusher.switchCamera()
|
||
break
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
});
|
||
},
|
||
//截屏
|
||
handleInstruct(instruct) {
|
||
if (this.ready) {
|
||
this.ready = false
|
||
this.livePusher.snapshot({
|
||
success: (res) => {
|
||
console.log(res)
|
||
this.ready = true
|
||
this.$emit('getImage', res.message.tempImagePath)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//编码检索
|
||
async getCode(){
|
||
let param = {
|
||
"maCode":this.queryCodeParams.maCode,
|
||
"unitId":this.queryParams.unitId,
|
||
"proId":this.queryParams.proId
|
||
}
|
||
console.log(param)
|
||
uni.request({
|
||
url: '/material/back_apply_info/getMachine',
|
||
method: 'get',
|
||
data: param,
|
||
success: res => {
|
||
res = res.data;
|
||
console.log(res)
|
||
if(res.code==200){
|
||
if(res.data&&res.data.length>0){
|
||
this.codeData=res.data[0];
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
})
|
||
}
|
||
// if(res.rows&&res.rows.length>0){
|
||
// this.codeData=res.rows[0];
|
||
// }else{
|
||
// uni.showToast({
|
||
// title: '未检索到有效的设备编码！',
|
||
// icon: 'none',
|
||
// })
|
||
// }
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
//上传
|
||
uploadImg(){
|
||
uni.chooseImage({
|
||
count: 1, //图片可选择数量
|
||
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
||
sourceType: ['album', 'camera',], //album 从相册选图，camera 使用相机，默认二者都有。
|
||
success: res => {
|
||
console.log(res)
|
||
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
|
||
this.imgBeseUrl = imgFiles[0]
|
||
uni.uploadFile({
|
||
// url: baseURL+"/file/upload",//app
|
||
url: "/file/upload",//h5
|
||
filePath: imgFiles[0],
|
||
name: 'file',
|
||
success: (res) => {
|
||
res = JSON.parse(res.data)
|
||
console.log('上传成功', res);
|
||
if(res.code&&res.code==200){
|
||
let obj = {
|
||
"name":res.data.name,
|
||
"url":res.data.url,
|
||
"taskType":"10"
|
||
}
|
||
this.bmFileInfos = [obj]
|
||
uni.showToast({ title: '上传成功', icon: 'none' })
|
||
}else{
|
||
this.bmFileInfos = []
|
||
uni.showToast({ title: '上传失败', icon: 'none' })
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('上传失败', err);
|
||
}
|
||
});
|
||
// this.$refs.vForm.clearValidate()
|
||
}
|
||
})
|
||
},
|
||
//确认按钮
|
||
async onHandleConfirm(){
|
||
console.log(this.codeData.maId)
|
||
if(this.codeData.maId==undefined){
|
||
uni.showToast({
|
||
title: '请先识别编码！',
|
||
icon: 'none',
|
||
})
|
||
}else{
|
||
let obj = {
|
||
"maId":this.codeData.maId,
|
||
"maCode":this.codeData.maCode,
|
||
"typeId":this.codeData.typeId,
|
||
"apDetection":this.apDetection,
|
||
"bmFileInfos":this.bmFileInfos
|
||
}
|
||
let param = {
|
||
"backApplyInfo":this.queryParams,
|
||
"backApplyDetails":obj
|
||
}
|
||
console.log('333333333', param)
|
||
uni.request({
|
||
url: '/material/back_apply_info/insertApp',
|
||
method: 'post',
|
||
data: param,
|
||
success: res => {
|
||
res = res.data;
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: '添加成功！',
|
||
icon: 'none',
|
||
})
|
||
this.queryCodeParams.maCode = ''
|
||
this.codeData = {}
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page-container {
|
||
display: flex;
|
||
height: auto;
|
||
flex-direction: column;
|
||
background-color: #f7f8fa;
|
||
padding: 24rpx;
|
||
}
|
||
.table-list-item {
|
||
|
||
margin-top: 10rpx;
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.scan-btn {
|
||
/* width: 100%; */
|
||
height: 88rpx;
|
||
background: #4b8eff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
/* transition: all 0.3s ease; */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.coding-btn {
|
||
/* padding: 12rpx 0; */
|
||
background: #fff;
|
||
color: #ff9800;
|
||
border: 2rpx solid rgba(255, 152, 0, 0.5);
|
||
background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05), rgba(255, 152, 0, 0.1));
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 1rpx;
|
||
/* transition: all 0.3s ease; */
|
||
|
||
/* &:active {
|
||
background: rgba(255, 152, 0, 0.15);
|
||
border-color: rgba(255, 152, 0, 0.6);
|
||
transform: translateY(1rpx);
|
||
} */
|
||
}
|
||
.outbound-btn {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 20%;
|
||
/* transform: translateX(-50%); */
|
||
/* width: 90%; */
|
||
height: 88rpx;
|
||
width: 620rpx;
|
||
margin: 0 10px;
|
||
/* background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%); */
|
||
background: #4b8eff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
|
||
/* transition: all 0.3s ease; */
|
||
|
||
/* &:active {
|
||
transform: translateX(-50%) scale(0.98);
|
||
opacity: 0.9;
|
||
} */
|
||
}
|
||
|
||
/* 上传区域样式 */
|
||
.upload {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
background-color: #f7f8fa;
|
||
border: 1rpx dashed #d9d9d9;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 48rpx;
|
||
color: #bfbfbf;
|
||
/* transition: all 0.3s ease; */
|
||
|
||
&:active {
|
||
background-color: #f0f0f0;
|
||
border-color: #3784fb;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.camera-background {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.cover-image {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.camera-options {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.camera-item {
|
||
flex: 1;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.camera-item .camera-item-image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.camera-options-center .camera-item-image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
</style>
|