解决websdk的demo扫描时左侧列表中图像顺序不对的问题
This commit is contained in:
parent
fcd1fd0448
commit
c5bf71451c
|
@ -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))
|
||||
}
|
||||
|
|
|
@ -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,6 +257,14 @@ new Vue({
|
|||
},
|
||||
dispatchEvent: function (info) {
|
||||
if (info.func) {
|
||||
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 {
|
||||
|
||||
if (info.ret != null && info.ret != undefined) {
|
||||
if (info.ret == 0) {//返回成功
|
||||
let funcName = this.WebScanController.getCallBack(info.func)
|
||||
|
@ -254,15 +287,15 @@ new Vue({
|
|||
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,53 +337,84 @@ 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('覆盖扫描,起始位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,
|
||||
base64: info.image_base64
|
||||
},
|
||||
})
|
||||
} else {//正常按顺序
|
||||
|
||||
this.curCoverIndex = -1
|
||||
|
||||
console.log('顺序扫描,队列插入位' + this.curInsertIndex + ' imagePath:' + imagePath)
|
||||
|
||||
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.image_base64, {
|
||||
base64: info.image_base64,
|
||||
thumbnail: info.image_base64,
|
||||
path: imagePath
|
||||
}, function (modifyInfo) {
|
||||
this.WebScanController.modifyImage(this.curCoverIndex, info.idenInfo.base64, info.idenInfo, function (modifyInfo) {
|
||||
|
||||
console.log('覆盖扫描:修改成功 index:' + that.curCoverIndex)
|
||||
console.log('覆盖前:index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
|
||||
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.thumbnail,
|
||||
thumbnail: idenInfo.base64,
|
||||
path: idenInfo.path
|
||||
}
|
||||
console.log('覆盖后:index==' + that.curCoverIndex + ' path:' + that.urls[that.curCoverIndex].path)
|
||||
|
@ -363,19 +423,20 @@ new Vue({
|
|||
that.needCoverCount--
|
||||
|
||||
that.$forceUpdate()
|
||||
|
||||
//把占位符删掉 继续下一轮循环
|
||||
if (that.insertQueue.length > 0 && that.insertQueue[0].insertType === -1) {
|
||||
that.insertQueue.splice(0, 1)
|
||||
}
|
||||
})
|
||||
} else {//之后都是新增的往后添加了
|
||||
this.WebScanController.insertLocalImage(imagePath, this.urls.length, {
|
||||
path: imagePath,
|
||||
thumbnail: info.image_base64,
|
||||
base64: info.image_base64
|
||||
}, function (result) {
|
||||
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.thumbnail,
|
||||
thumbnail: idenInfo.base64,
|
||||
base64: idenInfo.base64
|
||||
})
|
||||
that.$forceUpdate()
|
||||
|
@ -385,53 +446,72 @@ new Vue({
|
|||
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.curInsertIndex = -1
|
||||
this.curCoverIndex = -1
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.WebScanController.insertLocalImage(info.imagePath, info.insertIndex, info.idenInfo, function (result) {
|
||||
|
||||
let that = this;
|
||||
|
||||
|
||||
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({
|
||||
if (idenInfo.insertType === 1) {
|
||||
//正常扫描,往后添加
|
||||
console.log('正常扫描:插入成功 index:' + idenInfo.insertIndex + ' path:' + idenInfo.path)
|
||||
//插入到正确位置
|
||||
that.urls.splice(idenInfo.insertIndex, 0, {
|
||||
path: idenInfo.path,
|
||||
thumbnail: idenInfo.thumbnail,
|
||||
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()
|
||||
}
|
||||
break
|
||||
|
||||
//把占位符删掉 继续下一轮循环
|
||||
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)
|
||||
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)
|
||||
|
||||
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 |
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue