java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

修复签收

dev-xx
马远东 9 months ago
parent
e1298d9d0c
commit
2db0c29fd2
2 changed files with 125 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      src/components/webCameraIMG/webCamera.vue
  2. 5
      src/utils/webCamera/eloamWebCamera.js

176
src/components/webCameraIMG/webCamera.vue
Unescape View File

@ -4,14 +4,8 @@
<el-tab-pane label="拍摄">
<div class="IMG_VIEW_container">
<!-- 主摄像头 -->
<div class="IMG_VIEW1">
<img
id="IMG_VIEW1"
v-if="IMG_camera"
ref="IMG_VIEW"
src="../../../public/img/load.gif"
alt="主摄像头"
/>
<div id="IMG_VIEW_Content" class="IMG_VIEW1">
<img id="IMG_VIEW1" ref="IMG_VIEW" src="http://127.0.0.1:38088/video=stream&camidx=0" alt="主摄像头" />
<el-icon v-if="!IMG_startUp" @click="Devicerestart" class="SwitchButton"
><SwitchButton
/></el-icon>
@ -34,7 +28,11 @@
<!-- 缩略图 -->
<div id="suoluetu" ref="IMG_Thumbnail">
<el-empty style="margin: auto;" description="暂无缩略图" v-if="!IMG_suoluetuList.length" />
<el-empty
style="margin: auto"
description="暂无缩略图"
v-if="!IMG_suoluetuList.length"
/>
<template v-for="(item, index) in IMG_suoluetuList" :key="index">
<el-image
ref="el => setImagePreviewRef(el, index)"
@ -61,38 +59,47 @@
</template>
<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue';
// import axios_serve from '../../../src/axios_IMG.js';
import { ElMessage } from 'element-plus';
import IMG_error from '../../../public/img/loaderror.png'; //设备未连接
import IMG_drive from '../../../public/img/driveerror.png'; //设备驱动未启动
import IMG_load from '../../../public/img/load.gif'; //设备驱动未启动
import Axios_IMG from '../../axiosimg.js';
const IMG_camera = ref(false); // 摄像头状态
const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0'; // 主摄像头地址
const IMG_error = '../../../public/img/loaderror.png'; //设备未连接
const IMG_drive = '../../../public/img/driveerror.png'; //设备驱动未启动
// const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0';
const IMG_URL = "http://127.0.0.1:38088/video=stream&camidx=0";// 主摄像头地址
// const IMG_error = '../../../public/img/loaderror.png'; //设备未连接
// const IMG_drive = '../../../public/img/driveerror.png'; //设备驱动未启动
const IMG_VIEW = ref(null); // 主摄像头实例
const IMG_Thumbnail = ref(null); // 缩略图实例
const IMG_TITLE = ref('设备正在初始化中...');
const IMG_suoluetuList = ref([]); // 示例图片列表
const initialIndex = ref(0); // 初始显示的索引
const imagePreviewRefs = ref([]);
let IMG_API_SERVER = reactive(true); //true表示线上环境，false表示开发环境
let IMG_Trimming_edge = ref(false); //图片裁边
let IMG_startUp = ref(false); //摄像头是否启动
let IMG_API = ref('/api/blade-resource/oss/endpoint/put-file');
let zoom = ref(5); //图片缩放等级
let IMGstate=ref(1);//是否清楚历史记录
let IMGstate = ref(1); //是否清楚历史记录
const $emit = defineEmits(['upload-success']);
const props = defineProps({
IMGstate: {
type: Number,//参数类型
required: false,//是否必传
default: 1 //默认值;0,清除历史记录.1不清除
}
IMGstate: {
type: Number, //参数类型
required: false, //是否必传
default: 1, //默认值;0,清除历史记录.1不清除
},
});
watch(() => props.IMGstate, (newValue, oldValue) => {
if(newValue !=IMGstate.value){
IMGstate.value = props.IMGstate
IMG_suoluetuList.value=[];//重置拍摄图片
watch(
() => props.IMGstate,
(newValue, oldValue) => {
if (newValue != IMGstate.value) {
IMGstate.value = props.IMGstate;
IMG_suoluetuList.value = []; //重置拍摄图片
}
}
});
);
// 打印日志
const mylog = val => {
let element = document.getElementById('log');
@ -100,6 +107,7 @@ const mylog = val => {
let date = new Date().toString().slice(16, 24);
element.innerHTML = date + '&nbsp;&nbsp;' + val + '<br>' + old_val;
};
// 设置每个 el-image 的引用
const setImagePreviewRef = (el, index) => {
if (el) {
@ -116,11 +124,19 @@ const showPreview = async index => {
};
//判断设备是否连接
const IsConnect = async () => {
IMG_startUp.value = true; //摄像头已启动
return true
let timeoutMs = 6000; // 6秒
let startTime = Date.now();
while (Date.now() - startTime < timeoutMs) {
try {
const response = await axios.post('/imgapi/device=isconnect', {}, { timeout: timeoutMs });
const response = await axios.post(
`${
IMG_API_SERVER ? 'http://127.0.0.1:38088/device=isconnect' : '/imgapi/device=isconnect'
}`,
{},
{ timeout: timeoutMs }
);
console.log(response.data, 'res');
if (response.data.code === '0') {
@ -153,8 +169,9 @@ const Opentrimming = () => {
// 开启摄像头
const Deviceinitialization = async () => {
IMG_camera.value = true; // 摄像头打开
let IMG_state = await IsConnect();
IMG_startUp.value = true; //摄像头已启动
return
// let IMG_state = await IsConnect();
console.log(IMG_state, 'IMG_state');
//检查设备驱动是否连接成功
if (IMG_state == false) {
@ -185,17 +202,16 @@ const Deviceinitialization = async () => {
};
// 页面初始化加载
const onLoad = async () => {
await Deviceinitialization(); //初始化设备
await Deviceinitialization(); //初始化设备
};
onLoad();
onLoad()
// 设备重启
const Devicerestart=()=>{
const Devicerestart = () => {
IMG_camera.value = true; // 摄像头打开
mylog('重启设备');
IMG_VIEW.value.src = '../../../public/img/load.gif'; // 主摄像头地址
IMG_VIEW.value.src = IMG_load; // 主摄像头地址
Deviceinitialization(); //初始化设备
}
};
// 图片缩放API
const zoomAPI = attribute => {
@ -204,7 +220,10 @@ const zoomAPI = attribute => {
corp: JSON.stringify(zoom.value), // 放大比例，取值0~9，0：原图，9最大显示
};
axios
.post('/imgapi/stream=zoominout', JSON.stringify(data))
.post(
`${IMG_API_SERVER ? 'http://127.0.0.1:38088/stream=zoominout' : '/imgapi/stream=zoominout'}`,
JSON.stringify(data)
)
.then(() => {})
.catch(error => {
console.error('请求出错', error);
@ -242,7 +261,7 @@ const Turnoffcamera = () => {
camidx: 0,
};
axios
.post('/imgapi/video=close', data)
.post(`${IMG_API_SERVER ? 'http://127.0.0.1:38088/video=close' : '/imgapi/video=close'}`, data)
.then(() => {
IMG_VIEW.value.src = ''; //关闭地址
IMG_startUp.value = false; //摄像头已关闭
@ -321,32 +340,81 @@ const IMG_add = img_base64 => {
const Rotatingcamera = angle => {
// angle:角度
let data = { camidx: '0', rotate: String(angle) };
axios.post('/imgapi/video=rotate', JSON.stringify(data)).then(res => {
console.log(res);
mylog('旋转摄像头成功');
});
axios
.post(
`${IMG_API_SERVER ? 'http://127.0.0.1:38088/video=rotate' : '/imgapi/video=rotate'}`,
JSON.stringify(data)
)
.then(res => {
console.log(res);
mylog('旋转摄像头成功');
});
};
// 点击拍照
let view1_scan = async () => {
let data = {
filepath: 'base64', //图片保存地址，传参类型：["", "D:\\1.jpg", "base64"]
rotate: '0', // 图像旋转角度，90的整数倍，默认："0"
camidx: '0', // 摄像头索引，参数：0:主头；1:副头
ColorMode: '0', // 色彩模式，图片保存本地时调用。0：彩色 1：灰色 2：黑白 3：白纸印章 4：去背景色(普通文件) 5:去背景色(身份证)
deskew: IMG_Trimming_edge.value ? '1' : '0', //纠偏（主头有效），参数：0:不纠偏；1:纠偏(裁边)
bAutoAdjust: '0', // 是否自动摆正： 0：不摆正 1：摆正
quality: '2', //图片质量，图片保存本地调用。0:默认质量；1:高质量；2:较高质量；3:中质量；4:较低质量；5:低质量
};
axios.post('/imgapi/video=grabimage', JSON.stringify(data)).then(res => {
console.log(res, '图片地址');
// 注意: res.data.photoBase64 应该是以 'data:image/jpeg;base64,' 开头的完整 base64 字符串
if (res.data.code !== '0') {
"filepath": "",
"rotate": "",
"deskew": "",
"deskewval": "",
"camidx": "0",
"ColorMode": "",
"quality": "1",
"bAutoAdjust": "",
"bIsPrint1to1": "",
"watermark": {
"pos": "",
"content": "",
"transparency": "",
"fontsize": "",
"font": "",
"color": ""
}
};
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:38088/video=grabimage', true);
// xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
const response = JSON.parse(xhr.responseText);
console.log(response, 'response');
console.log(response, '图片地址');
// 注意: res.photoBase64 应该是以 'data:image/jpeg;base64,' 开头的完整 base64 字符串
if (response.code !== '0') {
return ElMessage.error('拍摄失败请重新尝试');
}
ElMessage({ message: '拍摄成功', type: 'success' });
IMG_add(res.data.photoBase64); //添加略缩图上传
});
IMG_add(response.photoBase64); // 再次添加略缩图上传，确保上传
} else {
console.error('Error:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('Error:', xhr.statusText);
};
xhr.send(JSON.stringify(data));
return
Axios_IMG.post(
`${
IMG_API_SERVER ? 'http://127.0.0.1:38088/video=grabimage' : '/imgapi/video=grabimage'
}`,
data
)
.then(res => {
console.log(res, '图片地址');
// 注意: res.data.photoBase64 应该是以 'data:image/jpeg;base64,' 开头的完整 base64 字符串
if (res.data.code !== '0') {
return ElMessage.error('拍摄失败请重新尝试');
}
ElMessage({ message: '拍摄成功', type: 'success' });
IMG_add(res.data.photoBase64); //添加略缩图上传
});
};
</script>

5
src/utils/webCamera/eloamWebCamera.js
Unescape View File

@ -17,7 +17,7 @@ var __ELOAM_OBJ = {
autoTakePhotosStatus: false
}
var WebCamera = function (_$, data, suc, fail) {
var WebCamera = function (_$, data, suc, fail) {
// 初始化数额及
if (!_$) {
fail("jquery 不能为空")
@ -857,4 +857,5 @@ var WebCamera = function (_$, data, suc, fail) {
}
// 使用vue 项目需要打开这个注释
export default WebCamera
export default WebCamera
Write Preview
Loading…
Cancel
Save