|
|
|
|
@ -1,22 +1,20 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="page"> |
|
|
|
|
<el-tabs type="border-card"> |
|
|
|
|
<el-tabs type="border-card" class="el_tabs"> |
|
|
|
|
<el-tab-pane label="拍摄"> |
|
|
|
|
<div> |
|
|
|
|
<!-- <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="../../../public/img/load.gif" alt="主摄像头" /> |
|
|
|
|
<!-- <el-icon v-if="!IMG_startUp" @click="Deviceinitialization" class="SwitchButton" |
|
|
|
|
<img |
|
|
|
|
id="IMG_VIEW1" |
|
|
|
|
v-if="IMG_camera" |
|
|
|
|
ref="IMG_VIEW" |
|
|
|
|
src="../../../public/img/load.gif" |
|
|
|
|
alt="主摄像头" |
|
|
|
|
/> |
|
|
|
|
<el-icon v-if="!IMG_startUp" @click="Devicerestart" class="SwitchButton" |
|
|
|
|
><SwitchButton |
|
|
|
|
/></el-icon> --> |
|
|
|
|
/></el-icon> |
|
|
|
|
<div class="el_icon" v-if="IMG_startUp"> |
|
|
|
|
<el-tooltip effect="dark" :content="IMG_Trimming_edge ? '关闭裁边' : '开启裁边'"> |
|
|
|
|
<el-icon |
|
|
|
|
@ -35,7 +33,23 @@
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 缩略图 --> |
|
|
|
|
<div id="suoluetu" ref="IMG_Thumbnail"></div> |
|
|
|
|
<div id="suoluetu" ref="IMG_Thumbnail"> |
|
|
|
|
<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)" |
|
|
|
|
style="width: 90px; height: 90px" |
|
|
|
|
:src="item" |
|
|
|
|
:zoom-rate="1.2" |
|
|
|
|
:max-scale="4" |
|
|
|
|
:min-scale="0.2" |
|
|
|
|
:preview-src-list="IMG_suoluetuList" |
|
|
|
|
:initial-index="initialIndex" |
|
|
|
|
fit="cover" |
|
|
|
|
@click="showPreview(index)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
|
|
|
|
|
@ -52,17 +66,79 @@ import axios from 'axios';
|
|
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
|
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_VIEW = ref(null); // 主摄像头实例 |
|
|
|
|
const IMG_Thumbnail = ref(null); // 缩略图实例 |
|
|
|
|
const IMG_TITLE=ref('设备正在初始化中...') |
|
|
|
|
const IMG_TITLE = ref('设备正在初始化中...'); |
|
|
|
|
const IMG_suoluetuList = ref([]); // 示例图片列表 |
|
|
|
|
const initialIndex = ref(0); // 初始显示的索引 |
|
|
|
|
const imagePreviewRefs = 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); //图片缩放等级 |
|
|
|
|
let IMGstate=ref(1);//是否清楚历史记录 |
|
|
|
|
const $emit = defineEmits(['upload-success']); |
|
|
|
|
const props = defineProps({ |
|
|
|
|
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=[];//重置拍摄图片 |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// 打印日志 |
|
|
|
|
const mylog = val => { |
|
|
|
|
let element = document.getElementById('log'); |
|
|
|
|
let old_val = element.innerHTML; |
|
|
|
|
let date = new Date().toString().slice(16, 24); |
|
|
|
|
element.innerHTML = date + ' ' + val + '<br>' + old_val; |
|
|
|
|
}; |
|
|
|
|
// 设置每个 el-image 的引用 |
|
|
|
|
const setImagePreviewRef = (el, index) => { |
|
|
|
|
if (el) { |
|
|
|
|
imagePreviewRefs.value[index] = el.$refs.imageRef; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
const showPreview = async index => { |
|
|
|
|
initialIndex.value = index; // 设置点击的图片为初始显示图片 |
|
|
|
|
await nextTick(); |
|
|
|
|
// 触发图片预览 |
|
|
|
|
if (imagePreviewRefs.value[index]) { |
|
|
|
|
imagePreviewRefs.value[index].click(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
//判断设备是否连接 |
|
|
|
|
const IsConnect = async () => { |
|
|
|
|
let timeoutMs = 6000; // 6秒 |
|
|
|
|
let startTime = Date.now(); |
|
|
|
|
while (Date.now() - startTime < timeoutMs) { |
|
|
|
|
try { |
|
|
|
|
const response = await axios.post('/imgapi/device=isconnect', {}, { timeout: timeoutMs }); |
|
|
|
|
console.log(response.data, 'res'); |
|
|
|
|
|
|
|
|
|
// 获取设备状态 |
|
|
|
|
const Getdevicestatus = () => {}; |
|
|
|
|
if (response.data.code === '0') { |
|
|
|
|
console.log('设备数量:', response.data); |
|
|
|
|
return response.data; // 返回数据 |
|
|
|
|
} else { |
|
|
|
|
throw new Error('设备未连接'); |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error(error); |
|
|
|
|
// 如果是网络请求失败，可以选择重试，这里简化为继续等待 |
|
|
|
|
} |
|
|
|
|
// 等待一段时间后继续检查 |
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000)); // 等待1秒 |
|
|
|
|
} |
|
|
|
|
// 如果超过6秒仍未返回数据，返回false |
|
|
|
|
return false; |
|
|
|
|
}; |
|
|
|
|
//(开启/关闭)图像裁边 |
|
|
|
|
const Opentrimming = () => { |
|
|
|
|
IMG_Trimming_edge.value = !IMG_Trimming_edge.value; |
|
|
|
|
@ -74,46 +150,52 @@ const Opentrimming = () => {
|
|
|
|
|
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 = () => { |
|
|
|
|
const Deviceinitialization = async () => { |
|
|
|
|
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); |
|
|
|
|
}, 2000); |
|
|
|
|
let IMG_state = await IsConnect(); |
|
|
|
|
console.log(IMG_state, 'IMG_state'); |
|
|
|
|
//检查设备驱动是否连接成功 |
|
|
|
|
if (IMG_state == false) { |
|
|
|
|
ElMessage({ message: '设备驱动未连接', type: 'warning' }); |
|
|
|
|
mylog('设备驱动未连接'); |
|
|
|
|
IMG_VIEW.value.src = IMG_drive; // 主摄像头地址 |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
// 检查设备是否连接成功 |
|
|
|
|
if (IMG_state.code == '0' && IMG_state.data == '1') { |
|
|
|
|
ElMessage({ message: '设备已连接，设备数量:1', type: 'success' }); |
|
|
|
|
mylog('设备已连接，设备数量:1'); |
|
|
|
|
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); |
|
|
|
|
}, 2000); |
|
|
|
|
} else { |
|
|
|
|
IMG_VIEW.value.src = IMG_error; // 主摄像头地址 |
|
|
|
|
ElMessage({ message: '设备未连接', type: 'warning' }); |
|
|
|
|
mylog('设备未连接'); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
// 页面初始化加载 |
|
|
|
|
const onLoad=()=>{ |
|
|
|
|
Deviceinitialization();//初始化设备 |
|
|
|
|
} |
|
|
|
|
onLoad() |
|
|
|
|
// 打印日志 |
|
|
|
|
const mylog = val => { |
|
|
|
|
let element = document.getElementById('log'); |
|
|
|
|
let old_val = element.innerHTML; |
|
|
|
|
let date = new Date().toString().slice(16, 24); |
|
|
|
|
element.innerHTML = date + ' ' + val + '<br>' + old_val; |
|
|
|
|
const onLoad = async () => { |
|
|
|
|
await Deviceinitialization(); //初始化设备 |
|
|
|
|
}; |
|
|
|
|
onLoad(); |
|
|
|
|
// 设备重启 |
|
|
|
|
const Devicerestart=()=>{ |
|
|
|
|
IMG_camera.value = true; // 摄像头打开 |
|
|
|
|
mylog('重启设备'); |
|
|
|
|
IMG_VIEW.value.src = '../../../public/img/load.gif'; // 主摄像头地址 |
|
|
|
|
Deviceinitialization(); //初始化设备 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 图片缩放API |
|
|
|
|
const zoomAPI = attribute => { |
|
|
|
|
@ -227,19 +309,12 @@ const IMG_add = img_base64 => {
|
|
|
|
|
const base64Data = img_base64.replace(/^data:image\/\w+;base64,/, ''); |
|
|
|
|
const blob = base64ToBlob(base64Data, 'image/jpeg'); |
|
|
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
let img = document.createElement('img'); |
|
|
|
|
img.src = url; |
|
|
|
|
img.style.width = '80px'; |
|
|
|
|
img.style.height = '80px'; |
|
|
|
|
// 添加到缩略图 |
|
|
|
|
if (IMG_Thumbnail.value) { |
|
|
|
|
IMG_Thumbnail.value.appendChild(img); |
|
|
|
|
IMG_suoluetuList.value.push(url); |
|
|
|
|
mylog('添加缩略图成功'); |
|
|
|
|
} |
|
|
|
|
console.log(img, 'img'); |
|
|
|
|
Upload_Images(blob); //上传图片接口 |
|
|
|
|
|
|
|
|
|
console.log(url, 'blob'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 旋转摄像头 |
|
|
|
|
@ -276,6 +351,10 @@ let view1_scan = async () => {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.el_tabs { |
|
|
|
|
height: 380px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.page { |
|
|
|
|
width: 100%; |
|
|
|
|
img { |
|
|
|
|
@ -329,8 +408,8 @@ let view1_scan = async () => {
|
|
|
|
|
} |
|
|
|
|
.SwitchButton { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 50%; |
|
|
|
|
left: 50%; |
|
|
|
|
top: 10%; |
|
|
|
|
right: 0%; |
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
font-size: 25px; |
|
|
|
|
color: #fff; |
|
|
|
|
@ -342,11 +421,18 @@ let view1_scan = async () => {
|
|
|
|
|
/* 缩略图 */ |
|
|
|
|
#suoluetu { |
|
|
|
|
width: 38%; |
|
|
|
|
height: aut; |
|
|
|
|
border: 1px solid blue; |
|
|
|
|
height: 300px; |
|
|
|
|
overflow: scroll; |
|
|
|
|
border: 1px solid #172e60; |
|
|
|
|
padding: 0 !important; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
} |
|
|
|
|
#suoluetu img { |
|
|
|
|
margin-right: 10px; |
|
|
|
|
#suoluetu { |
|
|
|
|
.el-image { |
|
|
|
|
margin: 0 4px; |
|
|
|
|
margin-bottom: 2px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* 操作按钮 */ |
|
|
|
|
#myactive { |
|
|
|
|
|
