Skip to content

F
founder_vue
Commit 17cd7273 by 张超军
Options

指纹图片处理

parent 2a03532f
Showing with 515 additions and 18 deletions
package-lock.json
......@@ -10910,6 +10910,11 @@
}
}
},
"simple-uploader.js": {
"version": "0.5.6",
"resolved": "https://registry.npm.taobao.org/simple-uploader.js/download/simple-uploader.js-0.5.6.tgz",
"integrity": "sha1-03uMAjg0izmTVBxyk66d5WWLI6A="
},
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/slash/download/slash-2.0.0.tgz",
......@@ -12507,6 +12512,14 @@
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.6.tgz?cache=0&sync_timestamp=1602077426782&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.6.tgz",
"integrity": "sha1-972iyaQ9OYN2IcmgK6d4n12qJLI="
},
"vue-simple-uploader": {
"version": "0.7.6",
"resolved": "https://registry.npm.taobao.org/vue-simple-uploader/download/vue-simple-uploader-0.7.6.tgz",
"integrity": "sha1-LajOaZXAcBybFqy3Fxs1GDUJHQ4=",
"requires": {
"simple-uploader.js": "^0.5.6"
}
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
......
package.json
......@@ -30,6 +30,7 @@
"style-loader": "^2.0.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vue-simple-uploader": "^0.7.6",
"vue-wechat-title": "^2.0.7",
"vuedraggable": "^2.24.3",
"vuex": "^3.4.0",
......
src/App.vue
<!--
* @Author: your name
* @Date: 2021-06-15 15:12:19
* @LastEditTime: 2021-08-09 13:56:21
* @LastEditTime: 2021-08-11 09:30:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\App.vue
......@@ -25,7 +25,7 @@ export default {
},
async mounted () {
// 墨奇启动
try {
/*try {
var sessionId = 1617779968252; //这里到时候自动生成sessionid，纯数字
var bb = await new GrpcCameraService(url.BaseURL, sessionId);
this.version = await bb.getCameraVersion()
......@@ -39,7 +39,7 @@ export default {
} else {
// 跳转至ib vue
this.$router.push('/fingerprintIndex7')
}
}*/
},
};
</script>
......
src/main.js
......@@ -19,7 +19,7 @@ Vue.prototype.$lrz = lrz
import axios from 'axios'
//其他vue组件中就可以this.$axios调用使用,vue3.0中不允许$axios,故改为$ajax
Vue.prototype.$ajax = axios
axios.defaults.baseURL = '/apiZwcj' //关键代码
// axios.defaults.baseURL = '/apiZwcj' //关键代码
Vue.config.productionTip = false
// 引入echarts
......@@ -35,6 +35,8 @@ const LoadingCons = Vue.extend(Nsloading);
Vue.prototype.$util = Util;
window.util = Util;
Vue.use(VueWechatTitle);
import uploader from 'vue-simple-uploader';
Vue.use(uploader);
Vue.directive("nsLoading", {
bind(el, binding) {
......
src/router/modules/index.js
export default[
{
path: "/",
// redirect: "/login"
redirect: "/fingerprintIndex6"
},
{
path: "/fingerprintIndex",
......
src/utils/sample-code2.js
import {
CaptureState, EmptyRequest, FingerIndex, ImageType, PreviewState, AudioFile, AudioMute, AudioVolume, AutoCaptureRequest, AutoCaptureState, CameraState,
Bozorth3Request
......@@ -137,7 +136,7 @@ export class GrpcCameraService {
// return false
}
})
})
this.autoVideoStream.on('status', (status) => {
// 在这里处理 on status 状态弹窗
......@@ -149,17 +148,20 @@ export class GrpcCameraService {
console.log("会话过期，请重新启动相机驱动");
} else if (status.code == '14') {
console.log("USB中断，请重新连接指纹采集设备");
resolve({ msg: 'USB中断，请重新连接指纹采集设备', status: 'disconnection' })
// 刷新页面
location.reload();
// location.reload();
}
});
this.autoVideoStream.on('end', (status) => {
// 在这里处理 on end 错误
console.log(status);
resolve({ msg: '视频流终端', status: 'disconnection' })
// 刷新页面
location.reload();
// location.reload();
});
})
return result
}
......@@ -336,7 +338,7 @@ export class GrpcCameraService {
// 不要在这里 console.log，会占用内存
// 回调用于处理结果
cb(imageUrlList, status);
if(status == 0) {
if (status == 0) {
this.stopVideoStream();
}
}
......@@ -531,9 +533,9 @@ export class GrpcCameraService {
// 每次采集完成之后，把 rolledMinutiae push进一个 targets 数组中，rolledMinutiae push进去indices一个数组中
checkRepeatFinger (probe, targets, indices, cb) {
console.log("能进入重复指位验证吗？");
console.log("probe=="+probe);
console.log("targets=="+targets);
console.log("indices=="+indices);
console.log("probe==" + probe);
console.log("targets==" + targets);
console.log("indices==" + indices);
// 跳过第一个
// if (!targets || !targets.length) {
// debugger
......
src/views/zwxt/fingerprint.scss
......@@ -851,6 +851,18 @@ $lookingBg: var(--lookingBg, #161712);
justify-content: center;
border-radius: 5px;
}
.right-2 {
/deep/ .el-checkbox__label {
position: absolute;
left: -72px;
}
}
.right-1 {
/deep/ .el-checkbox__label {
position: absolute;
left: -45px;
}
}
}
.hands {
margin-left: 40px;
......@@ -2355,4 +2367,20 @@ $lookingBg: var(--lookingBg, #161712);
}
}
}
.pop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 99999999;
.alert {
position: absolute;
left: calc(50% - 250px);
top: 50px;
width: 500px;
padding: 5px;
}
}
}
src/views/zwxt/fingerprint4.vue
......@@ -124,11 +124,11 @@
</div>
<!-- 缺指 -->
<div class="anaphora no">
缺指<el-checkbox v-model="checked" @change="setLackFinger"></el-checkbox>
<el-checkbox class="right-1" v-model="checked" @change="setLackFinger">缺指</el-checkbox>
</div>
<!-- 手动采集 -->
<div class="anaphora hand">
手动采集<el-checkbox v-model="handChecked" @change="setHandLu"></el-checkbox>
<el-checkbox class="right-2" v-model="handChecked" @change="setHandLu">手动采集</el-checkbox>
</div>
</div>
<!-- 左手|右手 -->
......@@ -1516,6 +1516,12 @@ export default {
}
})
console.log(finger);
// 处理设备断开连接的错误
if (finger.status && finger.status == 'disconnection') {
self.$message.error(finger.msg)
// 刷新页面
location.reload();
}
// 交叉验证
let result = null
if (this.version.SupportNbis && this.checkList[0] == '指纹交叉验证' && finger.getPlainMinutiae) {
......@@ -1728,6 +1734,13 @@ export default {
self.isError = true
}
})
console.log(finger);
// 处理设备断开连接的错误
if (finger.status && finger.status == 'disconnection') {
self.$message.error(finger.msg)
// 刷新页面
location.reload();
}
// 交叉验证
let result = null
if (this.version.SupportNbis && this.checkList[0] == '指纹交叉验证' && finger.getPlainMinutiae) {
......@@ -1745,7 +1758,6 @@ export default {
self.indices.push(rightList[index - 5].code)
}
}
console.log(finger);
if (finger == '缺指了') {
index++
self.checked = false
......
src/views/zwxt/fingerprint6.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/zwxt/fingerprint7.vue
......@@ -91,11 +91,11 @@
<img :src="fingerImg" alt="">
</div>
<div class="loading" v-show="loading">
<img src="../../assets/img/zw/loading.gif" alt="">
<img src="../../assets/img/zw/fp-loading2.gif" alt="">
</div>
<!-- 缺指 -->
<div class="anaphora no">
缺指<el-checkbox v-model="checked" @change="setLackFinger"></el-checkbox>
<el-checkbox class="right-1" v-model="checked" @change="setLackFinger">缺指</el-checkbox>
</div>
</div>
<!-- 左手|右手 -->
......
src/views/zwxt/upload/globalUploader.vue 0 → 100644
<template>
<div id="global-uploader">
<uploader
:options="simpleUploader.options"
:key="simpleUploader.uploaderKey"
@file-success="onFileSuccess"
@file-complete="onFileComplete"
@file-progress="onFileProgress"
@file-added="onFileAdded"
@files-added="onFilesAdded"
@files-submitted="onFilesSubmitted"
@file-removed="onFileRemoved"
@file-retry="onFileRetry"
@file-error="onFileError"
@upload-start="onUploadStart"
@complete="complete"
class="uploader-example"
ref="uploader"
>
<uploader-unsupport></uploader-unsupport>
<!-- select file -->
<uploader-btn
class="global-uploader-btn"
:attrs="simpleUploader.attrs"
ref="uploadFileBtn"
/>
<!-- select folder -->
<uploader-btn
class="global-uploader-btn"
:directory="true"
ref="uploadFolderBtn"
/>
<uploader-list v-show="uploaderPanelShow">
<div
class="file-panel"
slot-scope="props"
:class="{'collapse': collapse}"
>
<div class="file-title">
<p class="file-list-title">文件列表</p>
<div class="operate">
<el-button
type="text"
@click="operate"
:title="collapse ? '折叠':'展开' "
>
<i
class="icon"
:class="collapse ? 'el-icon-caret-bottom': 'el-icon-caret-top'"
></i>
</el-button>
<el-button
type="text"
@click="close"
title="关闭"
>
<i class="icon el-icon-close"></i>
</el-button>
</div>
</div>
<ul
class="file-list"
:class="collapse ? 'uploader-list-ul-show': 'uploader-list-ul-hidden'"
>
<li
v-for="file in props.fileList"
:key="file.id"
>
<uploader-file
:class="'file_' + file.id"
ref="files"
:file="file"
:list="true"
></uploader-file>
</li>
<div
class="no-file"
v-if="!props.fileList.length"
><i class="icon icon-empty-file"></i> 暂无待上传文件</div>
</ul>
</div>
</uploader-list>
</uploader>
</div>
</template>
<script>
export default {
name: 'globalUploader',
data () {
return {
// 选择文件后，展示上传panel
uploaderPanelShow: false,
collapse: true,
/**
* 初始化组件 vue-simple-uploader
*/
simpleUploader: {
// 这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）
uploaderKey: new Date().getTime(),
// 组件实例化时传入的配置项
options: {
// 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式
target: 'http://47.92.226.24:8091/uploader/slicing-upload',
// 单文件上传。覆盖式，如果选择了多个会把之前的取消掉
singleFile: false,
// 分块时按照该值来分，最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小
chunkSize: 1 * 1024 * 1024,
// 是否强制所有的块都是小于等于 chunkSize 的值
forceChunkSize: false,
// 并发上传数
simultaneousUploads: 3,
// 上传文件时文件的参数名
fileParameterName: 'file',
// 其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式
query: {},
// 额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式
headers: {},
// 标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true
withCredentials: false,
// 当上传的时候所使用的是方式，可选 multipart、octet
method: 'multipart/form-data',
// 测试的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk
testMethod: 'GET',
// 真正上传的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk
uploadMethod: 'POST',
// 如果说一个文件已经上传过了是否还允许再次上传。默认的话如果已经上传了，除非你移除了否则是不会再次重新上传的
allowDuplicateUploads: false,
// 对于文件而言是否高优先级发送第一个和最后一个块。一般用来发送到服务端，然后判断是否是合法文件；例如图片或者视频的 meta 数据一般放在文件第一部分，这样可以根据第一个块就能知道是否支持
prioritizeFirstAndLastChunk: false,
// 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等
testChunks: false,
// 服务器分片校验函数 秒传及断点续传的基础(true:不用传 false:需要传)
// checkChunkUploadedByResponse: (chunk, message) => {
// 这里根据实际业务来 用来判断哪些片已经上传过了 不用再重复上传了 [这里可以用来写断点续传！！！]
// return false
// },
// 可选的函数，每个块在测试以及上传前会被调用，参数就是当前上传块实例 Uploader.Chunk，注意在这个函数中你需要调用当前上传块实例的 preprocessFinished 方法
preprocess: null,
// 可覆盖默认的生成文件唯一标示的函数
generateUniqueIdentifier: null,
// 最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次
maxChunkRetries: 2,
// 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试
chunkRetryInterval: null,
// 进度回调间隔
progressCallbacksInterval: 500,
// 主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的
speedSmoothingFactor: 0.1,
// 认为响应式成功的响应码
successStatuses: [200, 201, 202],
// 认为是出错的响应码
permanentErrors: [404, 415, 500, 501],
// 初始文件 paused 状态
initialPaused: false,
// 用于格式化你想要剩余时间，一般可以用来做多语言
parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
// timeRemaining{Number}, 剩余时间，秒为单位
// parsedTimeRemaining{String}, 默认展示的剩余时间内容
return parsedTimeRemaining
.replace(/\syears?/, '年')
.replace(/\days?/, '天')
.replace(/\shours?/, '小时')
.replace(/\sminutes?/, '分钟')
.replace(/\sseconds?/, '秒')
}
},
// 是否选择文件后自动开始上传
autoStart: true,
statusText: {
success: '成功',
error: '失败',
uploading: '上传中',
paused: '暂停',
waiting: '等待'
},
// 用于转换文件上传状态文本映射对象
fileStatusText: function (status, response) {
// 第一个 status 为状态，第二个为响应内容
const statusTextMap = {
success: '成功',
error: '失败',
uploading: '上传中',
paused: '暂停',
waiting: '等待'
}
return statusTextMap[status]
},
// 添加到 input 元素上的额外属性
attrs: {}
}
}
},
// 钩子函数：页面加载完成后执行
mounted: function () {
console.log(1111)
// this.openFileUploader()
},
methods: {
/**
* 触发文件上传的按钮
*/
openFileUploader: function () {
console.log(2222)
this.$refs.uploadFileBtn.$el.click()
},
/**
* 触发文件夹上传的按钮
*/
openFolderUploader: function () {
this.$refs.uploadFolderBtn.$el.click()
},
/**
* 折叠、展开面板动态切换
*/
operate: function () {
if (this.collapse === false) {
this.collapse = true
} else {
this.collapse = false
}
},
/**
* 关闭折叠面板
*/
close () {
this.uploaderPanelShow = false
},
/**
* 事件
* 一个文件上传成功
*
* @param {object} rootFile 成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件
* @param {object} file 当前成功的 Uploader.File 对象本身
* @param {object} message 服务端响应内容，永远都是字符串
* @param {object} chunk Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是
*/
onFileSuccess: function (rootFile, file, message, chunk) {
console.log(`文件: ${file.name} 上传成功`)
},
/**
* 事件
* 一个根文件（文件夹）成功上传完成。
*/
onFileComplete: function (rootFile) {
console.log('触发 onFileComplete 事件')
},
/**
* 事件
* 文件上传中触发
*/
onFileProgress (rootFile, file, chunk) {
console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
},
/**
* 事件:
* 添加了一个文件，一般用做文件校验，如果设置 file.ignored = true 的话这个文件就会被过滤掉
*/
onFileAdded: function (file) {
this.uploaderPanelShow = true
},
/**
* 事件
* 和 fileAdded 一样，但是一般用作多个文件的校验。
*/
onFilesAdded: function (files, fileList, event) {
this.uploaderPanelShow = true
},
/**
* 事件
* 和 filesAdded 类似，但是是文件已经加入到上传列表中，一般用来开始整个的上传
*/
onFilesSubmitted: function (files, fileList, event) {
console.log('触发 onFilesSubmitted 事件')
},
/**
* 事件
* 一个文件（文件夹）被移除
*/
onFileRemoved: function (file) {
console.log(`文件: ${file.name} 删除成功`)
},
/**
* 事件
* 文件重试上传事件
*/
onFileRetry: function (rootFile, file, chunk) {
console.log(`文件: ${file.name} 重试上传`)
},
/**
* 事件
* 文件上传出错
*/
onFileError: function (rootFile, file, message, chunk) {
console.log(`文件: ${file.name} 上传出错`, message)
},
/**
* 事件
* 已经开始上传了
*/
onUploadStart: function () {
console.log('触发 onUploadStart 事件')
},
/**
* 事件
* 上传完毕
*/
complete: function () {
console.log('触发 complete 事件')
}
}
}
</script>
<style>
#global-uploader {
position: fixed;
z-index: 20;
right: 15px;
bottom: 15px;
width: 550px;
}
.file-panel {
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 7px 7px 0 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.file-title {
display: flex;
height: 40px;
line-height: 40px;
padding: 0 15px;
border-bottom: 1px solid #ddd;
}
.file-title {
background-color: #e7ecf2;
}
.uploader-file-meta {
display: none !important;
}
.operate {
flex: 1;
text-align: right;
}
.file-list {
position: relative;
height: 240px;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
padding: 0px;
margin: 0 auto;
transition: all 0.5s;
}
.uploader-file-size {
width: 15% !important;
}
.uploader-file-status {
width: 32.5% !important;
text-align: center !important;
}
li {
background-color: #fff;
list-style-type: none;
}
.no-file {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
}
/* 隐藏上传按钮 */
.global-uploader-btn {
display: none !important;
clip: rect(0, 0, 0, 0);
/* width: 100px;
height: 50px; */
}
.file-list-title {
/*line-height: 10px;*/
font-size: 16px;
}
.uploader-file-name {
width: 36% !important;
}
.uploader-file-actions {
float: right !important;
}
.uploader-list-ul-hidden {
height: 0px;
}
</style>
vue.config.js
......@@ -70,6 +70,14 @@ module.exports = {
errors: false
},
proxy: {
"/apiDelImg": {
target: "http://47.92.226.24:8091/", //统一的请求头部每次修改都要重启才会生效
ws: true,
changeOrigin: true,
pathRewrite: {
'^/apiDelImg': ''
}
},
"/apiSaveImg": {
target: "http://localhost:8088/", //统一的请求头部每次修改都要重启才会生效
ws: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment