解决websdk的demo扫描时左侧列表中图像顺序不对的问题

This commit is contained in:
luoliangyi 2023-11-14 16:33:20 +08:00
parent fcd1fd0448
commit c5bf71451c
4 changed files with 268 additions and 144 deletions

View File

@ -21,6 +21,14 @@
constructor: WebScanController,
/*****************************************扫描仪相关********************************************************************************/
isDeviceInit: function (callBack) {
const that = this
this.sendCommand({
func: "is_device_init",
iden: that.wslicence
}, callBack)
},
initDevice: function (callBack) {
const that = this
this.sendCommand({
@ -449,6 +457,7 @@
},
//插入本地图像需返回成功后前端缩略图才能作相应的UI修改
insertLocalImage: function (imagePath, insertIndex, idenInfo, callBack) {
console.log('insertLocalImage insertIndex:' + insertIndex + ' imagePath:' + imagePath + ' ')
const that = this
this.sendCommand({
func: "insert_local_image",
@ -502,6 +511,7 @@
},
//修改图像
modifyImage: function (imageIndex, imageBase64, idenInfo, callBack) {
console.log('modifyImage imageIndex:' + imageIndex)
const that = this
this.sendCommand({
func: "modify_image",
@ -737,7 +747,7 @@
};
this.SocketClient.onmessage = function (event) {
console.log(TAG, "connect onmessage data:" + event.data)
// console.log(TAG, "connect onmessage data:" + event.data)
if (event && event.data) {
socketCallBack(new Result(SOCKET_EVENT, "", event.data))
}

View File

@ -42,8 +42,8 @@ new Vue({
showBigImageDialog: false,//是否显示大图
selectBigImage: '',//当前选中的大图base64
scanMode: 'normal',//当前扫描模式 normal:正常往后添加 insert:在指定位置前后插入 cover:从指定位置开始往后覆盖或者添加
curInsertIndex: -1,//当前需要插入的位置
curCoverIndex: -1,//当前需要覆盖扫描的位置
curInsertIndex: -1,//顺序扫描 当前需要插入的位置
curCoverIndex: -1,//覆盖扫描 当前需要覆盖扫描的位置
needCoverCount: -1,//当前需要覆盖扫描的数量
isSetup: false,//是否显示参数设置框
activeName: '1',//设置框的tab位
@ -164,6 +164,13 @@ new Vue({
],
markPositionTipX: 0,//提示X
markPositionTipY: 0,//提示Y
insertQueue: [{
insertType: -1,// 插入类型 -1占位啥都没有 1.加到末尾 2.插入到指定位置 3.覆盖指定位置图片
imagePath: '',//插入图像的路径
insertIndex: 0, //插入位置
idenInfo: {},//签名
}],//插入队列,等待结果返回再继续插入
insertLoopWork: Number,
},
created: function () {
window.eleLoadding = this.eleLoadding;
@ -171,7 +178,25 @@ new Vue({
window.scanCallBack = this.scanCallBack;
window.setupWindowCallBack = this.setupWindowCallBack
window.socketCallBack = this.onSocketCallBack
window.onbeforeunload = this.releaseService
window.onbeforeunload = this.onCloseScreen
let that = this;
this.insertQueue.length = 0
this.insertLoopWork = setInterval(() => {
//首位不是占位数据的
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType !== -1) {
let insertInfo = that.insertQueue[0]
console.log('loop work' + insertInfo.insertType + ' ' + insertInfo.imagePath)
//先去掉队列的第一位
that.insertQueue.splice(0, 1)
//插入占位数据
that.insertQueue.splice(0, 0, {insertType: -1})
that.insertAction(insertInfo)
}
}, 400);
},
mounted: function () {
let canvasContainer = $("#canvas-container")
@ -232,37 +257,45 @@ new Vue({
},
dispatchEvent: function (info) {
if (info.func) {
if (info.ret != null && info.ret != undefined) {
if (info.ret == 0) {//返回成功
let funcName = this.WebScanController.getCallBack(info.func)
if (funcName) {
funcName(info)
} else {
this.commonDispatch(info)
}
} else {//统一异常处理 弹个窗
this.eleUnloadding()
this.eleMessage(info.err_info ? info.err_info : '未知异常', 'error')
if (info.func != null && info.func != undefined) {
if (info.func === 'image_add_watermark') {//特殊情况单独处理
//添加水印失败了
// this.reLoadImageList()
}
}
if (info.func === 'is_device_init' || info.func === 'get_curr_device_name') {
//单独处理 ret 0 初始化了 非0 未初始化
let funcName = this.WebScanController.getCallBack(info.func)
if (funcName) {
funcName(info)
}
} else {
this.commonDispatch(info)
if (info.ret != null && info.ret != undefined) {
if (info.ret == 0) {//返回成功
let funcName = this.WebScanController.getCallBack(info.func)
if (funcName) {
funcName(info)
} else {
this.commonDispatch(info)
}
} else {//统一异常处理 弹个窗
this.eleUnloadding()
this.eleMessage(info.err_info ? info.err_info : '未知异常', 'error')
if (info.func != null && info.func != undefined) {
if (info.func === 'image_add_watermark') {//特殊情况单独处理
//添加水印失败了
// this.reLoadImageList()
}
}
}
} else {
this.commonDispatch(info)
}
}
}
},
commonDispatch: function (info) {//较通用事件处理
this.eleUnloadding()
console.log('commonDispatch', JSON.stringify(info))
// console.log('commonDispatch', JSON.stringify(info))
if (info) {
switch (info.func) {
case "device_arrive"://设备装载
this.eleMessage("设备已装载")
this.getDeviceNameList()
break
case "device_remove"://设备卸载
this.eleMessage("设备已移除!")
@ -294,10 +327,6 @@ new Vue({
case "scan_image"://图片回调
let imagePath = info.image_path
this.appendLog('图片回调:' + imagePath)
console.log('图片回调:' + imagePath + ' info:' + JSON.stringify(info))
let that = this
if (this.scanMode == 'insert') {//是插入扫描
this.curCoverIndex = -1
@ -308,130 +337,181 @@ new Vue({
this.curInsertIndex = this.selectImageObj.index
}
console.log('插入扫描待插入index:' + this.curInsertIndex + " path:" + imagePath)
this.WebScanController.insertLocalImage(imagePath, this.curInsertIndex,
{
console.log('插入扫描:队列插入位:' + this.curInsertIndex + " path:" + imagePath)
this.insertQueue.push({
insertType: 2,
imagePath: imagePath,
insertIndex: this.curInsertIndex,
idenInfo: {
insertType: 2,
insertIndex: this.curInsertIndex,
path: imagePath,
thumbnail: info.image_base64,
base64: info.image_base64
},
function (insertInfo) {
console.log('插入扫描插入index' + that.curInsertIndex)
let idenInfo = JSON.parse(insertInfo.iden);
that.urls.splice(that.curInsertIndex, 0, {
path: idenInfo.path,
thumbnail: idenInfo.thumbnail,
base64: idenInfo.base64
});
that.curInsertIndex++
that.$forceUpdate()
})
},//签名
})
this.curInsertIndex++
} else if (this.scanMode == 'cover') {//是覆盖扫描
this.curInsertIndex = -1
if (this.curCoverIndex != -1) {
} else {
this.curCoverIndex = this.selectImageObj.index
this.needCoverCount = this.urls.length - this.curCoverIndex
console.log('当前需要覆盖的起始位index' + this.curCoverIndex + ' 总长度位置:' + (this.urls.length - 1))
console.log('需要覆盖的数量:' + this.needCoverCount)
}
if (this.needCoverCount > 0) {//还在覆盖范围内,直接覆盖掉
this.WebScanController.modifyImage(this.curCoverIndex, info.image_base64, {
base64: info.image_base64,
thumbnail: info.image_base64,
path: imagePath
}, function (modifyInfo) {
console.log('覆盖扫描:修改成功 index:' + that.curCoverIndex)
console.log('覆盖前index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
let idenInfo = JSON.parse(modifyInfo.iden);
that.urls[that.curCoverIndex] = {
base64: idenInfo.base64,
thumbnail: idenInfo.thumbnail,
path: idenInfo.path
}
console.log('覆盖后index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
that.curCoverIndex++
that.needCoverCount--
that.$forceUpdate()
})
} else {//之后都是新增的往后添加了
this.WebScanController.insertLocalImage(imagePath, this.urls.length, {
console.log('覆盖扫描起始位index' + this.curCoverIndex + ' imagePath:' + imagePath + ' 总长度位置:' + (this.urls.length - 1))
console.log('需要覆盖的数量:' + this.needCoverCount)
this.insertQueue.push({
insertType: 3,
imagePath: imagePath,
idenInfo: {
insertType: 3,
path: imagePath,
thumbnail: info.image_base64,
base64: info.image_base64
}, function (result) {
console.log('覆盖扫描:插入成功 index' + that.urls.length)
let idenInfo = JSON.parse(result.iden);
that.urls.push({
path: idenInfo.path,
thumbnail: idenInfo.thumbnail,
base64: idenInfo.base64
})
that.$forceUpdate()
that.$nextTick(function () {
if (that.$refs.imageArea) {
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
}
})
})
}
},
})
} else {//正常按顺序
this.curInsertIndex = -1
this.curCoverIndex = -1
let that = this;
console.log('顺序扫描,队列插入位' + this.curInsertIndex + ' imagePath:' + imagePath)
this.WebScanController.insertLocalImage(imagePath, this.urls.length, {
path: imagePath,
thumbnail: info.image_base64,
base64: info.image_base64
}, function (result) {
let idenInfo = JSON.parse(result.iden);
console.log('正常扫描:插入成功 index' + that.urls.length + ' path:' + idenInfo.path)
that.urls.push({
path: idenInfo.path,
thumbnail: idenInfo.thumbnail,
base64: idenInfo.base64
})
that.$nextTick(function () {
if (that.$refs.imageArea) {
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
}
})
this.insertQueue.push({
insertType: 1,
imagePath: imagePath,
insertIndex: this.curInsertIndex,
idenInfo: {
insertType: 2,
path: imagePath,
insertIndex: this.curInsertIndex,
base64: info.image_base64
},//签名
})
this.curInsertIndex++
}
break
}
}
},
//扫描展示逻辑
insertAction: function (info) {
/* {
insertType: 1,
imagePath: imagePath,
insertIndex: this.insertIndex,
idenInfo: {
insertType: 2,
path: imagePath,
insertIndex: this.insertIndex,
base64: info.image_base64
}*/
let that = this
if (info.insertType === 3) {//是覆盖扫描逻辑
if (this.needCoverCount > 0) {//还在覆盖范围内,直接覆盖掉
this.WebScanController.modifyImage(this.curCoverIndex, info.idenInfo.base64, info.idenInfo, function (modifyInfo) {
let idenInfo = JSON.parse(modifyInfo.iden);
console.log('覆盖前index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
that.urls[that.curCoverIndex] = {
base64: idenInfo.base64,
thumbnail: idenInfo.base64,
path: idenInfo.path
}
console.log('覆盖后index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
that.curCoverIndex++
that.needCoverCount--
that.$forceUpdate()
//把占位符删掉 继续下一轮循环
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
that.insertQueue.splice(0, 1)
}
})
} else {//之后都是新增的往后添加了
this.WebScanController.insertLocalImage(info.imagePath, this.urls.length, info.idenInfo, function (result) {
console.log('覆盖扫描:插入成功 index' + that.urls.length)
let idenInfo = JSON.parse(result.iden);
that.urls.push({
path: idenInfo.path,
thumbnail: idenInfo.base64,
base64: idenInfo.base64
})
that.$forceUpdate()
that.$nextTick(function () {
if (that.$refs.imageArea) {
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
}
})
//把占位符删掉 继续下一轮循环
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
that.insertQueue.splice(0, 1)
}
})
}
} else {
this.WebScanController.insertLocalImage(info.imagePath, info.insertIndex, info.idenInfo, function (result) {
let idenInfo = JSON.parse(result.iden);
if (idenInfo.insertType === 1) {
//正常扫描,往后添加
console.log('正常扫描:插入成功 index' + idenInfo.insertIndex + ' path:' + idenInfo.path)
//插入到正确位置
that.urls.splice(idenInfo.insertIndex, 0, {
path: idenInfo.path,
thumbnail: idenInfo.base64,
base64: idenInfo.base64
})
that.$nextTick(function () {
if (that.$refs.imageArea) {
that.$refs.imageArea.scrollTop = that.$refs.imageArea.scrollHeight
}
})
} else if (idenInfo.insertType == 2) {
//插入扫描,指定位置
console.log('插入扫描插入index' + idenInfo.insertIndex + ' path:' + idenInfo.path)
//插入到正确位置
that.urls.splice(idenInfo.insertIndex, 0, {
path: idenInfo.path,
thumbnail: idenInfo.base64,
base64: idenInfo.base64
})
that.$forceUpdate()
}
//把占位符删掉 继续下一轮循环
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
that.insertQueue.splice(0, 1)
}
})
}
},
//一些初始化操作
initData: function () {
let that = this
// this.initDevice()
this.getGlobalConfig()
this.getBatchList(function () {
that.changeBatch(that.batchIdList.slice(-1)[0])
})
},
//界面销毁
onCloseScreen: function () {
this.releaseService()
if (this.insertLoopWork) {
clearInterval(this.insertLoopWork)
}
},
//关闭服务
releaseService: function () {
console.log('releaseService')
this.deinitDevices()
// this.stopBindFolder()
if (this.WebScanController) {
@ -465,12 +545,27 @@ new Vue({
//初始化设备
initDevice: function (succcallBack) {
let that = this
this.WebScanController.initDevice(function (info) {
console.log('init devices :' + info)
that.deviceInited = true
if (succcallBack != null) {
succcallBack()
this.WebScanController.isDeviceInit(function (info) {
console.log('isDeviceInit:' + JSON.stringify(info))
if (info.ret == 0) {
//已经初始化
that.deviceInited = true
if (succcallBack != null) {
succcallBack()
}
} else {
//没有初始化
console.log('start device init ' + new Date().getTime())
that.WebScanController.initDevice(function (info) {
console.log('init devices :' + JSON.stringify(info) + ' ' + new Date().getTime())
that.deviceInited = true
if (succcallBack != null) {
succcallBack()
}
})
}
})
},
//反初始化设备(需初始化后调用)
@ -489,7 +584,7 @@ new Vue({
getDeviceNameList: function () {
let that = this
this.WebScanController.getDeviceNameList(function (info) {
console.log('getDeviceNameList :' + info)
console.log('getDeviceNameList :' + JSON.stringify(info))
if (info.device_name_list) {//反初始化成功
for (let i = 0; i < info.device_name_list.length; i++) {
console.log('getDeviceNameList index:' + i + " item:" + info.device_name_list[i])
@ -501,12 +596,24 @@ new Vue({
//打开设备
openDevice: function (deviceName) {
let that = this
this.WebScanController.openDevice(deviceName, function (info) {
console.log('open devices :' + info)
that.deviceOpened = true
that.eleLoadding()
that.getScanParams()
this.WebScanController.getCurrDeviceName(function (info) {
console.log('getCurrDeviceName:' + JSON.stringify(info))
if (info.device_name) {
that.deviceOpened = true
that.eleLoadding()
that.getScanParams()
} else {
that.WebScanController.openDevice(deviceName, function (info) {
console.log('open devices :' + JSON.stringify(info))
that.deviceOpened = true
that.eleLoadding()
that.getScanParams()
})
}
})
},
//关闭设备
closeDevice: function () {
@ -546,7 +653,7 @@ new Vue({
let that = this
this.WebScanController.getScanParams(function (info) {
that.eleUnloadding()
console.log('获取到的扫描参数 ' + JSON.stringify(info))
// console.log('获取到的扫描参数 ' + JSON.stringify(info))
that.scanParamsRange = info.device_param
that.parameterCoerceIn()
})
@ -628,8 +735,8 @@ new Vue({
this.eleMessage('请先等待扫描结束!', 'warning')
return;
}
this.scanMode = 'normal'
this.curInsertIndex = this.urls.length
this.WebScanController.startScan(function (info) {
console.log('startScan :' + info)
})
@ -665,7 +772,11 @@ new Vue({
}
let that = this
this.curCoverIndex = -1
this.curInsertIndex = -1
this.curCoverIndex = this.selectImageObj.index
this.needCoverCount = this.urls.length - this.curCoverIndex
this.WebScanController.startScan(function (info) {
console.log('覆盖扫描')
that.scanMode = 'cover'
@ -695,6 +806,9 @@ new Vue({
let that = this
this.initDevice(function () {
that.isSetup = true
setTimeout(function () {
that.getDeviceNameList()
}, 500);
})
}
},
@ -773,7 +887,7 @@ new Vue({
this.eleLoadding()
this.WebScanController.openBatch(batchId, function (info) {
console.log('切换批次:' + JSON.stringify(info))
console.log('打开批次:' + JSON.stringify(info))
that.urls.length = 0//先清空一下
that.currentBatch = batchId
//重新加载
@ -2230,8 +2344,8 @@ new Vue({
this.scanParams.push(newGroup)
}
console.log('当前扫描参数:' + JSON.stringify(this.scanParams))
console.log('当前强强强扫描参数:' + JSON.stringify(paramsRange))
// console.log('当前扫描参数:' + JSON.stringify(this.scanParams))
// console.log('当前强强强扫描参数:' + JSON.stringify(paramsRange))
this.$forceUpdate()
},

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -761,7 +761,7 @@
<script src="js/WebScanController.js"></script>
<script src="js/util.js"></script>
<script src="js/FileSaver.js"></script>
<!-- <script src="js/colorpicker.js"></script> -->
<!--<script src="js/colorpicker.js"></script>-->
<script src="js/scanWeb.js"></script>
</body>
</html>