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

Merge branch 'dev' of http://47.108.105.48:3000/java_project/logpm_page into dev

dev-xx
qb 8 months ago
parent
07c67d9dcb 24513434de
commit
e88cc03285
3 changed files with 187 additions and 44 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. BIN
      public/img/load.gif
  2. 182
      src/components/webCameraIMG/webCamera.vue
  3. 49
      src/views/system/pdaversion/pdaversionManage.vue

BIN
public/img/load.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

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

@ -3,17 +3,35 @@
<el-tabs type="border-card">
<el-tab-pane label="拍摄">
<div>
<el-button type="primary" @click="Deviceinitialization">启动摄像头</el-button>
<el-button type="primary" @click="Turnoffcamera">关闭摄像头</el-button>
<el-button type="primary" @click="view1_scan">点击拍摄</el-button>
<el-button type="primary" @click="Rotatingcamera(90)">旋转摄像头</el-button>
<el-button type="primary" @click="Enlargeimage">放大图片</el-button>
<el-button type="primary" @click="Reduceimage">缩小图像</el-button>
<!-- <el-button type="primary" @click="Opentrimming" :disabled="!IMG_startUp">{{
IMG_Trimming_edge ? '关闭裁边' : '开启裁边'
}}</el-button> -->
<!-- <el-button type="primary" @click="view1_scan" :disabled="!IMG_startUp"
>点击拍摄</el-button
> -->
</div>
<div class="IMG_VIEW_container">
<!-- 主摄像头 -->
<div class="IMG_VIEW1">
<img id="IMG_VIEW1" v-if="IMG_camera" ref="IMG_VIEW" src="#" alt="主摄像头" />
<img id="IMG_VIEW1" v-if="IMG_camera" ref="IMG_VIEW" src="../../../public/img/load.gif" alt="主摄像头" />
<!-- <el-icon v-if="!IMG_startUp" @click="Deviceinitialization" class="SwitchButton"
><SwitchButton
/></el-icon> -->
<div class="el_icon" v-if="IMG_startUp">
<el-tooltip effect="dark" :content="IMG_Trimming_edge ? '关闭裁边' : '开启裁边'">
<el-icon
:style="{ color: IMG_Trimming_edge ? 'red' : '#fff' }"
@click="Opentrimming"
><Crop
/></el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="点击拍摄">
<el-icon @click="view1_scan"><CameraFilled /></el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="旋转摄像头">
<el-icon @click="Rotatingcamera(90)"><RefreshRight /></el-icon>
</el-tooltip>
</div>
</div>
<!-- 缩略图 -->
@ -36,18 +54,59 @@ const IMG_camera = ref(false); // 摄像头状态
const IMG_URL = 'http://127.0.0.1:38088/video=stream&camidx=0'; // 主摄像头地址
const IMG_VIEW = ref(null); // 主摄像头实例
const IMG_Thumbnail = ref(null); // 缩略图实例
let IMG_API = reactive('/api/blade-resource/oss/endpoint/put-file');
let zoom = reactive(5); //图片缩放等级
const IMG_TITLE=ref('设备正在初始化中...')
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); //图片缩放等级
const $emit = defineEmits(['upload-success']);
// 获取设备状态
const Getdevicestatus = () => {};
//(开启/关闭)图像裁边
const Opentrimming = () => {
IMG_Trimming_edge.value = !IMG_Trimming_edge.value;
if (IMG_Trimming_edge.value) {
ElMessage({ message: '图像裁边已开启', type: 'success' });
mylog('图像裁边已开启');
} else {
ElMessage({ message: '图像裁边已关闭', type: 'success' });
mylog('图像裁边已关闭');
}
};
// 框选图片
const FrameSelectImage = () => {
let data = {
filepath: '', // 是否保存本地，可选a，为空不保存本地，否则按路径保存
left: 0,
top: 0,
right: 100,
bottom: 100,
};
axios.post('/imgapi/select=imagearea', JSON.stringify(data)).then(res => {
console.log(res, '框选图片');
});
};
// 开启摄像头
const Deviceinitialization = () => {
IMG_camera.value = true; // 摄像头打开
// 这里需要判断设备是否在线
let TIME_IMG_VIEW = setTimeout(() => {
if (IMG_VIEW.value) {
IMG_startUp.value = true; //摄像头已启动
IMG_VIEW.value.src = IMG_URL; // 主摄像头地址
IMG_TITLE.value=''
ElMessage({ message: '摄像头已启动', type: 'success' });
mylog('摄像头已启动');
}
clearTimeout(TIME_IMG_VIEW);
}, 50);
}, 2000);
};
// 页面初始化加载
const onLoad=()=>{
Deviceinitialization();//初始化设备
}
onLoad()
// 打印日志
const mylog = val => {
let element = document.getElementById('log');
@ -57,17 +116,14 @@ const mylog = val => {
};
// 图片缩放API
const zoomAPI = () => {
const zoomAPI = attribute => {
let data = {
action: '0',
corp: zoom,
camidx: '0', // 摄像头，0:主头；1:副头
corp: JSON.stringify(zoom.value), // 放大比例，取值0~9，0：原图，9最大显示
};
axios
.post('/imgapi/stream=zoominout', data)
.then(() => {
IMG_camera.value = false; // 摄像头打开
Deviceinitialization()
})
.post('/imgapi/stream=zoominout', JSON.stringify(data))
.then(() => {})
.catch(error => {
console.error('请求出错', error);
});
@ -75,26 +131,26 @@ const zoomAPI = () => {
// 放大图片
const Enlargeimage = () => {
if (zoom == 9) {
if (zoom.value == 9) {
ElMessage({
message: '已经最大了',
type: 'warning',
});
return;
}
zoom += 1;
zoom.value += 1;
zoomAPI();
};
// 缩小图片
const Reduceimage = () => {
if (zoom == 0) {
if (zoom.value == 0) {
ElMessage({
message: '已经最小了',
type: 'warning',
});
return;
}
zoom -= 1;
zoom.value -= 1;
zoomAPI();
};
@ -106,9 +162,10 @@ const Turnoffcamera = () => {
axios
.post('/imgapi/video=close', data)
.then(() => {
if (IMG_VIEW.value) {
IMG_VIEW.value.src = '';
}
IMG_VIEW.value.src = ''; //关闭地址
IMG_startUp.value = false; //摄像头已关闭
ElMessage({ message: '摄像头已关闭', type: 'success' });
mylog('摄像头已关闭');
IMG_camera.value = false; // 关闭节点
})
.catch(error => {
@ -133,17 +190,32 @@ const base64ToBlob = (base64, mime) => {
};
// 上传图片函数
const Upload_Images = blob => {
const Upload_Images = file => {
// 创建一个FormData对象
const formData = new FormData();
formData.append('file', blob);
// 确保文件具有正确的文件名和类型
const filename = file.name || 'image.jpg'; // 默认文件名
const filetype = file.type || 'image/jpeg'; // 默认文件类型
// 使用File对象确保文件流具有正确的文件名和类型
const fileBlob = new Blob([file], { type: filetype });
const fileWithMetadata = new File([fileBlob], filename, { type: filetype });
// 将文件附加到FormData对象中
formData.append('file', fileWithMetadata);
// 使用axios发送POST请求
axios
.post(IMG_API, formData, {
.post(IMG_API.value, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then(res => {
console.log(res, '图片上传成功');
// 触发上传成功事件
$emit('upload-success', res);
})
.catch(error => {
console.error('上传失败', error);
@ -165,10 +237,11 @@ const IMG_add = img_base64 => {
mylog('添加缩略图成功');
}
console.log(img, 'img');
// Upload_Images(blob);//上传图片接口
Upload_Images(blob); //上传图片接口
console.log(url, 'blob');
};
// 旋转摄像头
const Rotatingcamera = angle => {
// angle:角度
@ -178,15 +251,17 @@ const Rotatingcamera = angle => {
mylog('旋转摄像头成功');
});
};
// 点击拍照
let view1_scan = () => {
let view1_scan = async () => {
let data = {
filepath: 'base64',
rotate: '0',
cutpage: '0',
camidx: '0',
ColorMode: '0',
quality: '3',
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, '图片地址');
@ -195,7 +270,7 @@ let view1_scan = () => {
return ElMessage.error('拍摄失败请重新尝试');
}
ElMessage({ message: '拍摄成功', type: 'success' });
IMG_add(res.data.photoBase64);
IMG_add(res.data.photoBase64); //添加略缩图上传
});
};
</script>
@ -226,10 +301,43 @@ let view1_scan = () => {
width: 60%;
height: 300px;
border: 1px solid red;
position: relative;
background-color: #000;
img {
width: 100%;
height: 100%;
}
.el_icon {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
font-size: 25px;
color: #fff;
}
.el_icon {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.el_icon i {
margin: 0 10px;
}
.el_icon i:active {
color: #2196f3;
}
.SwitchButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: #fff;
}
.SwitchButton:active {
color: #2196f3;
}
}
/* 缩略图 */
#suoluetu {

49
src/views/system/pdaversion/pdaversionManage.vue
Unescape View File

@ -439,16 +439,51 @@ export default {
uploadBefore(file, done, loading, column) {
return true; // 返回 true 继续上传，返回 false 中止上传
},
async customUploadRequest({file}){
console.log(file,'文件上传');
const response = await this.$fileslicing(this, file);//文件切换全局函数(初始)
if(response.code && response.code == 200){
this.form.filelink = response.data.domain + response.data.name
async customUploadRequest({ file }) {
try {
console.log(file, '文件上传');
const responses = await this.$fileslicing(this, file); // 文件切片上传的全局函数(初始)
console.log(responses, 'responses');
let time= setTimeout(()=>{
let response=responses
if (response && response.code === 200) {
// 确保 this.form.filelink 被初始化为一个数组
if (!this.form.filelink) {
this.form.filelink = [];
console.log('初始化 this.form.filelink 为空数组');
}
// 确保数组的第一个元素存在且是一个对象，并初始化必需的嵌套结构
if (!this.form.filelink[0]) {
this.form.filelink[0] = { response: { data: {} } };
console.log('初始化 this.form.filelink[0] 为 { response: { data: {} } }');
} else {
if (!this.form.filelink[0].response) {
this.form.filelink[0].response = { data: {} };
console.log('初始化 this.form.filelink[0].response 为 { data: {} }');
}
if (!this.form.filelink[0].response.data) {
this.form.filelink[0].response.data = {};
console.log('初始化 this.form.filelink[0].response.data 为 {}');
}
}
console.log('在赋值之前的 this.form.filelink:', this.form.filelink);
this.form.filelink[0].response.data.link = response.data.domain + response.data.name;
console.log('赋值之后的 this.form.filelink:', this.form.filelink);
} else {
console.error('文件上传失败或响应无效', response);
}
console.log(response,'文件上传返回值');
},
clearTimeout(time)
},0)
} catch (error) {
console.error('文件上传过程中发生错误', error);
}
},
handleSubmit() {
if (!this.form.id) {
console.log( this.form.filelink,' this.form.filelink');
this.form.link = this.form.filelink[0].response.data.link;
this.form.versionCode = this.form.versionName.split('.').join('');
this.form.newTypes = this.form.link.indexOf('wgt') == -1 ? '1' : '2';

Write Preview
Loading…
Cancel
Save