Skip to content

F
founder_vue
Commit f9d55cae by 米嘉伟
Options

Merge branch 'dev_zwpt' of http://47.92.108.28/changchao/founder_vue into dev_zwpt

parents 7e44020c 46542d7a
Showing with 1060 additions and 222 deletions
src/router/modules/leftMenu.js
/*
* @Author: your name
* @Date: 2021-09-07 09:58:13
* @LastEditTime: 2021-12-01 20:50:56
* @LastEditTime: 2021-12-02 22:44:12
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\index.js
......@@ -192,6 +192,16 @@ export default [
component: () => import("@/views/AllPersonnelBase/dclb.vue")
},
{
path: "/bzxxgl",
name: "bzxxgl",
icon_d: "/img/bzxxgl_d.png",
icon_a: "/img/bzxxgl_a.png",
meta: {
title: "比中信息管理",
auth: "5",
},
},
{
path: "/SystemManage",
name: "SystemManage",
icon_d: "/img/manage_d.png",
......@@ -293,16 +303,6 @@ export default [
component: () => import("@/views/SystemManage/GroupPermission.vue")
},
{
path: "/bzxxgl",
name: "bzxxgl",
icon_d: "/img/bzxxgl_d.png",
icon_a: "/img/bzxxgl_a.png",
meta: {
title: "比中信息管理",
auth: "5",
},
},
{
path: "/bzxxfh",
name: "bzxxfh",
meta: {
......
src/store/index.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-11-22 16:09:08
* @LastEditTime: 2021-12-02 20:35:41
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\index.js
......@@ -17,6 +17,7 @@ import publicData from "./modules/publicData"
import rydaxx from "./modules/rydaxx";
import ajdaxx from "./modules/ajdaxx";
import loading from "./modules/loading";
import ryzwbj from "./modules/ryzwbj";
Vue.use(Vuex);
......@@ -28,7 +29,8 @@ const store = new Vuex.Store({
publicData,
rydaxx,
ajdaxx,
loading
loading,
ryzwbj
},
getters,
plugins: [
......
src/store/modules/mutations-types.js
/*
* @Author: your name
* @Date: 2021-11-04 13:14:49
* @LastEditTime: 2021-11-29 18:02:42
* @LastEditTime: 2021-12-02 21:14:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\modules\mutations-types.js
......@@ -31,3 +31,8 @@ export const SET_PREROUTE = 'setPreRoute'
export const SET_WILLROUTE = 'setWillRoute'
export const SET_SMALLLOADING = 'setSmallLoading'
// 人像信息
export const SET_RXINFO = 'setRxInfo'
// 是否放大人像
export const SET_ENLARGEFACE = 'setEnlargeFace'
src/store/modules/ryzwbj.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-11-04 11:12:33
* @LastEditTime: 2021-12-02 21:14:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\modules\zwbj.js
*/
import { SET_RXINFO, SET_ENLARGEFACE } from "./mutations-types";
const state = {
// 人像信息
rxInfo: [],
// 是否放大人像
enLargeFace: false
};
const mutations = {
[SET_RXINFO] (state, content) {
state.rxInfo = content
},
[SET_ENLARGEFACE] (state, content) {
state.enLargeFace = content
},
};
const actions = {
};
export default {
namespaced: true,
state,
mutations,
actions
};
src/views/Editor/modules/getElementStyle.js 0 → 100644
/*
* @Author: your name
* @Date: 2021-12-03 01:49:42
* @LastEditTime: 2021-12-03 01:52:48
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\getElementStyle.js
*/
function cssTransform (element, attr, val) {
//下面分为取值和赋值阶段，如果val不存在说明是取值的，如果val存在，说明是赋值阶段
//取值阶段
if (!element.transform) {
element.transform = {};
}
if (typeof val === "undefined") {
//取值阶段，又要分为，该值已经有了，和初始化该值阶段
if (typeof element.transform[attr] === "undefined") {
switch (attr) {
case "scale":
case "scaleX":
case "scaleY":
case "scaleZ":
element.transform[attr] = 100;
break;
default:
element.transform[attr] = 0;
}
}
//取值完毕，返回该值
return element.transform[attr];
} else {
//下面为赋值阶段
element.transform[attr] = val;
var transformVal = "";
//因为transform对象中可能不止一个属性，所以要对其进行遍历
for (var s in element.transform) {
switch (s) {
case "scale":
case "scaleX":
case "scaleY":
case "scaleZ":
transformVal += " " + s + "(" + (element.transform[s] / 100) + ")";
break;
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
transformVal += " " + s + "(" + element.transform[s] + "deg)";
break;
default:
transformVal += " " + s + "(" + element.transform[s] + "px)";
}
}
element.style.WebkitTransform = element.style.transform = transformVal;
}
}
export default cssTransform;
\ No newline at end of file
src/views/Editor/modules/imageEd.scss
......@@ -970,6 +970,58 @@ $transOrigin: var(--transOrigin, 0px, 0px);
justify-content: center !important;
align-items: center !important;
}
.face-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.face-item {
width: 203.2px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 42px;
margin-bottom: 26px;
&:nth-child(3) {
margin-bottom: 0;
}
&:nth-child(4) {
margin-bottom: 0;
}
.face-image {
width: 203.2px;
height: 270.4px;
border-radius: 4px;
border: 1px solid #cccccc;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:hover {
border: 1px solid #055FE7;
box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.16);
}
img {
width: 100%;
height: auto;
}
.zwtx {
font-size: 12px;
color: #999999;
}
.idCard {
height: 119px;
width: 100%;
}
}
.face-name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
}
}
}
}
.tzdDrawing {
width: 640px;
......@@ -1038,7 +1090,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
position: relative;
width: 336px;
height: 184px;
background: #F6F8FA;
background: #f6f8fa;
box-shadow: 0px -1px 2px 0px rgba(5, 95, 231, 0.25);
border-radius: 4px;
.top-title {
......@@ -1130,6 +1182,18 @@ $transOrigin: var(--transOrigin, 0px, 0px);
}
}
}
.mask {
position: absolute;
z-index: 99;
opacity: 0.5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f6f8fa;
box-shadow: 0px -1px 2px 0px rgba(5, 95, 231, 0.25);
border-radius: 4px;
}
}
.options-line {
width: 336px;
......@@ -1193,8 +1257,9 @@ $transOrigin: var(--transOrigin, 0px, 0px);
cursor: pointer;
width: 40px;
height: 40px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(5, 95, 231, 0.3), 0px 0px 4px 0px rgba(5, 95, 231, 0.15);
background: #ffffff;
box-shadow: 0px 2px 4px 0px rgba(5, 95, 231, 0.3),
0px 0px 4px 0px rgba(5, 95, 231, 0.15);
border-radius: 4px;
display: flex;
justify-content: center;
......@@ -1218,7 +1283,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
color: #ffffff;
}
}
// .tzd-d {
// position: relative;
// cursor: pointer;
......@@ -1251,17 +1316,17 @@ $transOrigin: var(--transOrigin, 0px, 0px);
.featuresActive {
width: 40px;
height: 40px;
background: #E9F3FD;
background: #e9f3fd;
box-shadow: 1px 1px 3px 0px rgba(5, 95, 231, 0.5) inset;
border-radius: 4px;
}
.dp{
.dp {
cursor: pointer;
margin-left: 20px;
width: 40px;
height: 40px;
background: #E9F3FD;
background: #e9f3fd;
box-shadow: 1px 1px 3px 0px rgba(5, 95, 231, 0.5) inset;
border-radius: 4px;
display: flex;
......@@ -1278,7 +1343,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
height: 40px;
background: #ffffff;
box-shadow: 0px 2px 4px 0px rgba(5, 95, 231, 0.3),
0px 0px 4px 0px rgba(5, 95, 231, 0.15);
0px 0px 4px 0px rgba(5, 95, 231, 0.15);
border-radius: 4px;
display: flex;
align-items: center;
......@@ -1420,12 +1485,13 @@ $transOrigin: var(--transOrigin, 0px, 0px);
font-family: MicrosoftYaHei;
color: #999999;
}
.dqzwtz,.qbzwtz {
.dqzwtz,
.qbzwtz {
width: 32px;
height: 32px;
background: #FFFFFF;
background: #ffffff;
border-radius: 4px;
border: 1px solid #AEB5C2;
border: 1px solid #aeb5c2;
display: flex;
align-items: center;
justify-content: center;
......@@ -1436,14 +1502,14 @@ $transOrigin: var(--transOrigin, 0px, 0px);
width: auto;
}
&:hover {
border: 1px solid #055FE7;
border: 1px solid #055fe7;
}
}
.qbzwtz {
margin-left: 9px;
}
.active {
border: 1px solid #055FE7;
border: 1px solid #055fe7;
}
.save-type {
......@@ -1505,10 +1571,11 @@ $transOrigin: var(--transOrigin, 0px, 0px);
}
}
.options-bottom {
position: relative;
margin-top: 16px;
width: 336px;
height: 488px;
background: #F6F8FA;
background: #f6f8fa;
box-shadow: 0px -1px 2px 0px rgba(5, 95, 231, 0.25);
border-radius: 4px;
font-size: 15px;
......@@ -1614,11 +1681,11 @@ $transOrigin: var(--transOrigin, 0px, 0px);
.disabled {
width: 64px;
height: 32px;
background: #ECEDF1;
background: #ecedf1;
border-radius: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #AEAFB4;
color: #aeafb4;
display: flex;
justify-content: center;
align-items: center;
......@@ -1705,6 +1772,18 @@ $transOrigin: var(--transOrigin, 0px, 0px);
.contrast-ratio {
margin-top: 10px;
}
.mask {
position: absolute;
z-index: 9999;
opacity: 0.5;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f6f8fa;
box-shadow: 0px -1px 2px 0px rgba(5, 95, 231, 0.25);
border-radius: 4px;
}
}
}
}
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-02 13:31:28
* @LastEditTime: 2021-12-03 00:46:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -12,31 +12,46 @@
<div class="imageEd_header">
<div class="center">
<el-tooltip class="item" effect="dark" content="撤销" :open-delay="500">
<div class="icon back disabled disabled2" id="btn-undo" @mousedown="mouseDownBack" @mouseup="mouseUpBack">
<dir v-if="isFace" class="disabled back">
<img class="disabled-img" src="@/assets/img/zcedit/back_disabled.png" alt="">
</dir>
<div v-else class="icon back disabled disabled2" id="btn-undo" @mousedown="mouseDownBack" @mouseup="mouseUpBack">
<img src="@/assets/img/zcedit/back.png" alt="" v-show="!back_active">
<img src="@/assets/img/zcedit/back_a.png" alt="" v-show="back_active">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复" :open-delay="500">
<div class="icon go disabled disabled2" id="btn-redo" @mousedown="mouseDownGo" @mouseup="mouseUpGo">
<dir v-if="isFace" class="disabled go">
<img class="disabled-img" src="@/assets/img/zcedit/go_disabled.png" alt="">
</dir>
<div v-else class="icon go disabled disabled2" id="btn-redo" @mousedown="mouseDownGo" @mouseup="mouseUpGo">
<img src="@/assets/img/zcedit/go.png" alt="" v-show="!go_active">
<img src="@/assets/img/zcedit/go_a.png" alt="" v-show="go_active">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="移动" :open-delay="500">
<div class="icon drag" @click="hand">
<dir v-if="isFace" class="disabled drag">
<img class="disabled-img" src="@/assets/img/zcedit/drag_disabled.png" alt="">
</dir>
<div v-else class="icon drag" @click="hand">
<img v-if="!isHand" src="@/assets/img/zcedit/drag.png" alt="">
<img v-else src="@/assets/img/zcedit/drag_a.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放大" :open-delay="500">
<div class="icon enlarge" @click="enlarge">
<dir v-if="isFace" class="disabled enlarge">
<img class="disabled-img" src="@/assets/img/zcedit/enlarge_disabled.png" alt="">
</dir>
<div v-else class="icon enlarge" @click="enlarge">
<img v-if="!isEnlarge" src="@/assets/img/zcedit/enlarge.png" alt="">
<img v-else src="@/assets/img/zcedit/enlarge_a.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="原尺寸显示" :open-delay="500">
<div class="size_mix">
<dir v-if="isFace" class="disabled size">
<img class="disabled-img" src="@/assets/img/zcedit/size_disabled.png" alt="">
</dir>
<div v-else class="size_mix">
<div class="icon_size" @click.stop="sizeChange">
<img class="size" v-if="!isActive" src="@/assets/img/zcedit/size.png" alt="">
<img class="size" v-else src="@/assets/img/zcedit/size_a.png" alt="">
......@@ -45,7 +60,7 @@
</div>
</div>
</el-tooltip>
<div class="rotate_mix">
<div class="rotate_mix" v-if="!isFace">
<el-tooltip class="item" effect="dark" content="旋转" :open-delay="500">
<div class="icon_rotate" @click.stop="rotateChange">
<img class="rotate" v-if="!isActive_rotate" src="@/assets/img/zcedit/rotate.png" alt="">
......@@ -119,7 +134,10 @@
</div>
</div>
<el-tooltip class="item" effect="dark" content="下载" :open-delay="500">
<div class="icon download" id="btn-download">
<dir v-if="isFace" class="disabled download">
<img class="disabled-img" src="@/assets/img/zcedit/download_disabled.png" alt="">
</dir>
<div v-else class="icon download" id="btn-download">
<img src="@/assets/img/zcedit/download.png" alt="">
</div>
</el-tooltip>
......@@ -134,17 +152,30 @@
</div>
</div>
<div class="imageEd_main">
<div class="preview-source" v-show="isShowSourcePrivew">
<div v-if="!isFace" class="preview-source" v-show="isShowSourcePrivew">
<img :src="previewSource" alt="">
</div>
<div class="drawing">
<div class="title">{{ fingerTitle }}</div>
<div v-if="!isFace" class="title">{{ fingerTitle }}</div>
<div class="body-container">
<div class="tui-image-editor"></div>
<img id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,'+sourceImage" alt="">
<div v-if="!isFace" class="tui-image-editor"></div>
<img v-if="!isFace" id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,'+sourceImage" alt="">
<div v-if="isFace" class="face-content">
<div class="face-item" v-for="(item, i) in rxInfo" :key="i">
<div class="face-image">
<!-- 有图像 -->
<img @dblclick="faceDoubleChange(item)" v-if="item.image && item.code==14" class="face-pic idCard" :src="'data:image/jpeg;base64,'+item.image" />
<img @dblclick="faceDoubleChange(item)" v-else-if="item.image && item.code!=14" class="face-pic" :src="'data:image/jpeg;base64,'+item.image" />
<!-- 缺图像 -->
<img v-else class="face-absence" src="@/assets/img/TT/zwtp.png" alt="">
<span class="zwtx" v-show="item.image==null">暂无图像</span>
</div>
<div class="face-name">{{item.name}}</div>
</div>
</div>
</div>
<div class="tzdDrawing"></div>
<div class="tzdDrawing_2"></div>
<div v-if="!isFace" class="tzdDrawing"></div>
<div v-if="!isFace" class="tzdDrawing_2"></div>
</div>
<!-- 展示方向 -->
<!-- <svg-icon v-show="isdirection" icon-class="direction" class="direction" /> -->
......@@ -262,6 +293,7 @@
</div>
</div>-->
</div>
<div class="mask" v-if="isFace"></div>
</div>
<div class="options-bottom">
<div class="options-bottom-title">图像调整</div>
......@@ -328,6 +360,7 @@
<input class="qb_v" type="text" v-model.number="inputContrastRange">
</div>
</div>
<div class="mask" v-if="isFace"></div>
</div>
</div>
</div>
......@@ -383,7 +416,7 @@ export default {
isyxhz: false,
isShowzyhzOptions: false,
tzdnumber: 0,
fingerTitle: "右拇",
fingerTitle: "",
sourceImage: null,
targetImage: null,
mouseEnlarge: false,
......@@ -591,14 +624,17 @@ export default {
originX: 0,
originY: 0,
// 记录session的个数
sessionCount: 0
sessionCount: 0,
// 是否为人像
isFace: false
};
},
computed: {
...mapState({
seq: state => state.zwbj.seq,
preTzdArr: state => state.zwbj.pretzdall,
autopretzdall: state => state.zwbj.autopretzdall
autopretzdall: state => state.zwbj.autopretzdall,
rxInfo: state => state.ryzwbj.rxInfo
})
},
created () {
......@@ -656,6 +692,7 @@ export default {
});
this.imageEditor = imageEditor;
// imageEditor.loadImageFromURL("img/xxx.jpg", "SampleImage").then(function (sizeValue) {
imageEditor.loadImageFromURL("img/finger.bmp", "SampleImage").then(function (sizeValue) {
//console.log(sizeValue);
imageEditor.clearUndoStack();
......@@ -1307,6 +1344,8 @@ export default {
// console.log(greenDeg);
// $(".greendirection").css("transform", `rotate(${greenDeg}deg)`);
// }
}).catch(err => {
console.log(err);
});
console.log(self.tzdArr);
});
......@@ -1482,6 +1521,7 @@ export default {
});
});
self.$store.commit("zwbj/setTzdall", tzdall_shou);
sessionStorage.setItem(`${self.seq}`, JSON.stringify(self.tzdall_shou))
// 删除自动提取的特征点
//console.log(self.autoTzdArr);
......@@ -1498,6 +1538,7 @@ export default {
}, 1000);
// 更新vuex数据
self.$store.commit("zwbj/setAutoTzdall", self.autoTzdArr);
sessionStorage.setItem(`auto${self.seq}`, JSON.stringify(self.autoTzdArr))
}
} else {
let auto_tzdindex = self.autoTzdArr.findIndex((item) => {
......@@ -1512,6 +1553,7 @@ export default {
}, 1000);
// 更新vuex数据
self.$store.commit("zwbj/setAutoTzdall", self.autoTzdArr);
sessionStorage.setItem(`auto${self.seq}`, JSON.stringify(self.autoTzdArr))
}
}
......@@ -1671,9 +1713,9 @@ export default {
// self.deg = 360 - self.deg;
} else if (e.clientX >= this.originX && e.clientY >= this.originY) {
// console.log(self.deg);
self.deg = 270 + (90-self.deg)
self.deg = 270 + (90 - self.deg)
}
if(self.deg == 360) {
if (self.deg == 360) {
self.deg = 0
}
......@@ -1736,6 +1778,7 @@ export default {
console.log(self.pretzdall);
// 全部数据保存
self.$store.commit("zwbj/setTzdall", self.pretzdall);
sessionStorage.setItem(self.seq, JSON.stringify(self.pretzdall))
//console.log(self.preTzdArr);
self.pretzdall = [];
}
......@@ -1833,9 +1876,27 @@ export default {
this.$bus.on("zwType", (zwType) => {
self.zwType = zwType;
});
// 更改指纹编辑区域标题
self.$bus.on('switchHandTitle', (fingerTitle) => {
self.fingerTitle = fingerTitle
})
// 判断是否为人脸，若是则关闭指纹编辑功能
this.$bus.on('isFace', (isFace) => {
self.isFace = isFace
})
},
methods: {
/**
* 人像双击事件
*/
faceDoubleChange(face) {
console.log(face);
this.$bus.emit('isBlur', true)
this.$store.commit('ryzwbj/setEnlargeFace', true)
},
/**
* 恢复按钮按下事件
*/
mouseDownGo () {
......@@ -3734,7 +3795,7 @@ export default {
}
console.log(isOptionsArr);
let flag = isOptionsArr.some((item) => {
return item===true
return item === true
})
console.log(flag);
// 有操作过的
......@@ -3923,47 +3984,7 @@ export default {
this.$bus.off('ryzwbjType');
this.$bus.off('ryzwbjTDZ');
this.$bus.off('zwType');
// let isOptionsArr = []
// let sessionKeys = Object.keys(sessionStorage);
// for (let index = 0; index < sessionKeys.length; index++) {
// const element = sessionKeys[index];
// if (element[0] == 'i') {
// isOptionsArr.push(JSON.parse(sessionStorage.getItem(element)))
// }
// }
// console.log(isOptionsArr);
// let flag = isOptionsArr.every((item) => {
// return item
// })
// console.log(flag);
// // 有操作过的
// if (flag) {
// let sessionArr = [];
// for (let index = 0; index < sessionKeys.length; index++) {
// const element = sessionKeys[index];
// console.log(element);
// }
// for (var i = 0; i < sessionKeys.length; i++) {
// //可以对key 进行分析从而决定是否要删除sessionStorage 里的缓存
// //console.log(sessionKeys[i], sessionStorage.getItem(sessionKeys[i]));
// if (sessionKeys[i].substring(0, 4) == "auto") {
// sessionArr.push(sessionStorage.getItem(sessionKeys[i]));
// }
// }
// //console.log(sessionArr);
// //console.log(this.sessionCount);
// if (sessionArr.length == this.sessionCount) {
// return;
// } else {
// this.$store.commit('loading/setJumpRoute', false)
// // this.$message.error("当前页面有未保存的指位!");
// }
// } else {
// // 没有操作过的
// return;
// }
this.$bus.off('isFace');
}
};
</script>
......
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-02 13:33:11
* @LastEditTime: 2021-12-03 02:08:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -595,6 +595,7 @@
</template>
<script>
import cssTransform from "./getElementStyle.js";
// import RangeSlider from './RangeSlider';
// import Canvas2Image from 'canvas2image';
import Canvas2Image from '@/utils/Canvas2Image.js';
......@@ -931,7 +932,9 @@ export default {
originX: 0,
originY: 0,
// 记录session的个数
sessionCount: 0
sessionCount: 0,
tzdDrawingLeft_yd: 0,
tzdDrawingTop_yd: 0
};
},
computed: {
......@@ -1026,8 +1029,8 @@ export default {
this.imageEditor = imageEditor;
imageEditor
// .loadImageFromURL("img/finger.bmp", "SampleImage")
.loadImageFromURL("xxx.bmp", "SampleImage")
.loadImageFromURL("img/finger.bmp", "SampleImage")
// .loadImageFromURL("xxx.jpg", "SampleImage")
.then(function (sizeValue) {
console.log(sizeValue);
imageEditor.clearUndoStack();
......@@ -2092,6 +2095,8 @@ export default {
} else {
sessionStorage.setItem("zyhz_" + self.seq, null)
}
}).catch(err => {
console.log(err);
});
});
......@@ -2596,8 +2601,8 @@ export default {
// originX: 'left',
// originY: 'top'
// }, true)
console.log("left:", originleft + ((x2 - x1) * self.newWidth) / 640);
console.log("top:", origintop + ((y2 - y1) * self.newHeight) / 640);
// console.log("left:", originleft + ((x2 - x1) * self.newWidth) / 640);
// console.log("top:", origintop + ((y2 - y1) * self.newHeight) / 640);
imageEditor._graphics.setImageProperties(
{
left:
......@@ -2640,21 +2645,24 @@ export default {
// $('.tzdDrawing').css('top', `${origintop + (y2 - y1)}px`)
// $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(Number(self.tzdDrawingLeft) + (x2 - x1));
console.log(canvasImage);
// console.log(canvasImage.left);
$(".tzdDrawing").css(
"transform",
`translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)
`translate(${Number(self.tzdDrawingLeft_yd) + (x2 - x1)}px,${Number(self.tzdDrawingTop_yd) + (y2 - y1)
}px) rotate(${canvasImage.angle}deg) scale(${self.zoomLevel})`
);
$(".tzdDrawing_2").css(
"transform",
`translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)
`translate(${Number(self.tzdDrawingLeft_yd) + (x2 - x1)}px,${Number(self.tzdDrawingTop_yd) + (y2 - y1)
}px) scale(${self.zoomLevel})`
);
self.tzdDrawing_top = Number(self.tzdDrawingTop_yd) + (y2 - y1);
self.tzdDrawing_left = Number(self.tzdDrawingLeft_yd) + (x2 - x1);
self.tzdDrawing_top = Number(self.tzdDrawingTop) + (y2 - y1);
self.tzdDrawing_left = Number(self.tzdDrawingLeft) + (x2 - x1);
// $('.tzdDrawing').css('transform', `translate(${(originleft + (x2 - x1))/16}rem,${(origintop + (y2 - y1))/16}rem) scale(${self.zoomLevel})`)
}
......@@ -2699,14 +2707,58 @@ export default {
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
// $(".tzdDrawing").css('transform-origin', `${Number($(".tzdDrawing").width())/2-Number(self.tzdDrawing_left)}px ${Number($(".tzdDrawing").height())/2-Number(self.tzdDrawing_top)}px`)
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(self.tzdDrawing_left)}px ${Number($(".tzdDrawing").height()) / 2 - Number(self.tzdDrawing_top)}px`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// console.log(`${originPointer.y}px,${originPointer.x}px`);
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`;
if (canvasImage.angle) {
let src = {
x: canvasImage.left,
y: canvasImage.top
};
console.log(src);
let det = {
x: canvasImage.width / 2,
y: canvasImage.height / 2
};
const point = { x: src.x, y: src.y };
// const angle = -Math.PI / 2;
// 角度超出360°范围了
console.log(canvasImage.angle);
if (canvasImage.angle <= -360) {
canvasImage.angle = 0;
}
if (canvasImage.angle >= 360) {
canvasImage.angle = 0;
}
const angle = -canvasImage.angle * Math.PI / 180.00;
console.log(angle);
// 角度 * Math.PI / 180
const [x, y] = reverse(
point.x,
point.y,
det.x,
det.y,
-angle
);
console.log(x, y);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(x)}px ${Number($(".tzdDrawing").height()) / 2 - Number(y)}px`);
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(x)}px,${Number(y)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
} else {
// $(".tzdDrawing").css('transform-origin', `${Number($(".tzdDrawing").width())/2-Number(self.tzdDrawing_left)}px ${Number($(".tzdDrawing").height())/2-Number(self.tzdDrawing_top)}px`)
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(canvasImage.left)}px ${Number($(".tzdDrawing").height()) / 2 - Number(canvasImage.top)}px`);
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(canvasImage.left)}px,${Number(canvasImage.top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// console.log(`${originPointer.y}px,${originPointer.x}px`);
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`;
}
$(".tzdDom").css("z-index", `99999`);
} else {
// 缩小
......@@ -2740,19 +2792,61 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = imageEditor._graphics.getCanvasImage();
// $(".tzdDrawing").css('transform-origin', `${Number($(".tzdDrawing").width())/2-Number(self.tzdDrawing_left)}px ${Number($(".tzdDrawing").height())/2-Number(self.tzdDrawing_top)}px`)
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(self.tzdDrawing_left)}px ${Number($(".tzdDrawing").height()) / 2 - Number(self.tzdDrawing_top)}px`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
if (canvasImage.angle) {
let src = {
x: canvasImage.left,
y: canvasImage.top
};
console.log(src);
let det = {
x: canvasImage.width / 2,
y: canvasImage.height / 2
};
const point = { x: src.x, y: src.y };
// const angle = -Math.PI / 2;
// 角度超出360°范围了
console.log(canvasImage.angle);
if (canvasImage.angle <= -360) {
canvasImage.angle = 0;
}
if (canvasImage.angle >= 360) {
canvasImage.angle = 0;
}
const angle = -canvasImage.angle * Math.PI / 180.00;
console.log(angle);
// 角度 * Math.PI / 180
const [x, y] = reverse(
point.x,
point.y,
det.x,
det.y,
-angle
);
console.log(x, y);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(x)}px ${Number($(".tzdDrawing").height()) / 2 - Number(y)}px`);
// $('.tzdDrawing').css('z-index', `99`)
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(x)}px,${Number(y)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
} else {
// $(".tzdDrawing").css('transform-origin', `${Number($(".tzdDrawing").width())/2-Number(self.tzdDrawing_left)}px ${Number($(".tzdDrawing").height())/2-Number(self.tzdDrawing_top)}px`)
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(canvasImage.left)}px,${Number(canvasImage.top)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing").css("transform-origin", `${Number($(".tzdDrawing").width()) / 2 - Number(canvasImage.left)}px ${Number($(".tzdDrawing").height()) / 2 - Number(canvasImage.top)}px`);
// self.tzdArr.forEach((item, index) => {
// $(`#tzd${index}`).css('left', (item.x * self.zoomLevel) + "px")
// $(`#tzd${index}`).css('top', (item.y * self.zoomLevel) + "px")
// })
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px)`);
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// $('.tzdDrawing').css('z-index', `99`)
// self.tzdArr.forEach((item, index) => {
// $(`#tzd${index}`).css('left', (item.x * self.zoomLevel) + "px")
// $(`#tzd${index}`).css('top', (item.y * self.zoomLevel) + "px")
// })
}
}
}
if (self.isHandTZD) {
......@@ -2886,22 +2980,33 @@ export default {
self.originleft = canvasImage.left;
self.origintop = canvasImage.top;
}
self.tzdDrawingLeft = canvasImage.left
self.tzdDrawingTop = canvasImage.top
// console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(','));
if (
$(".tzdDrawing")
.css("transform")
.replace(/[^0-9\-,]/g, "")
.split(",")[4]
) {
self.tzdDrawingLeft = $(".tzdDrawing")
.css("transform")
.replace(/[^0-9\-,]/g, "")
.split(",")[4];
self.tzdDrawingTop = $(".tzdDrawing")
.css("transform")
.replace(/[^0-9\-,]/g, "")
.split(",")[5];
}
console.log($('.tzdDrawing').css("transform"));
// console.log(cssTransform(document.querySelector('.tzdDrawing'), 'translate'));
let transformMatrix = $(".tzdDrawing").css("transform").substring(7, $(".tzdDrawing").css("transform").length - 1).split(',')
console.log(transformMatrix);
self.tzdDrawingLeft_yd = transformMatrix[4];
self.tzdDrawingTop_yd = transformMatrix[5];
// if (
// $(".tzdDrawing")
// .css("transform")
// .replace(/[^0-9\-,]/g, "")
// .split(",")[4]
// ) {
// self.tzdDrawingLeft = $(".tzdDrawing")
// .css("transform")
// .replace(/[^0-9\-,]/g, "")
// .split(",")[4];
// console.log('left:',self.tzdDrawingLeft);
// self.tzdDrawingTop = $(".tzdDrawing")
// .css("transform")
// .replace(/[^0-9\-,]/g, "")
// .split(",")[5];
// console.log('top:',self.tzdDrawingTop);
// }
// console.log(self.originleft);
// console.log(self.origintop);
self.startHand = false;
......
src/views/Editor/modules/ryzwbjLeft.scss
......@@ -178,11 +178,38 @@
color: #666666;
}
}
.handDom {
overflow: hidden;
.fingerPic {
width: 258px;
height: 258px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #cccccc;
overflow: hidden;
}
.absence {
overflow: hidden;
position: relative;
width: 258px;
height: 258px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #cccccc;
display: flex;
justify-content: center;
align-items: center;
img {
width: 80%;
height: 80%;
}
}
}
}
}
.isHasData {
background: #ECEDF1;
color: #AEAFB4;
background: #ecedf1;
color: #aeafb4;
}
.finger-total {
margin-top: 100px;
......@@ -203,6 +230,55 @@
padding: 0 4px;
}
}
.hand-total {
margin-top: 2px;
}
.face-total {
margin-top: 220px;
}
}
// 人像样式
.face {
display: flex;
align-items: center;
flex-wrap: wrap;
.face-item {
margin-right: 16px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 6px;
&:nth-child(2n) {
margin-right: 0;
}
.face-image {
width: 120px;
height: 161px;
border-radius: 4px;
border: 1px solid #cccccc;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 100%;
height: auto;
}
.zwtx {
font-size: 12px;
color: #999999;
}
.idCard {
height: 119px;
width: 100%;
}
}
.face-name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
}
}
}
}
}
src/views/Editor/modules/ryzwbjLeft.vue
<!--
* @Author: your name
* @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-12-02 12:03:12
* @LastEditTime: 2021-12-02 20:36:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
......@@ -17,23 +17,23 @@
<div class="ryzwbj-content">
<div class="zzw">
<div class="zzw-select" @click="zzwChange($event)">
<div class="select-item" :class="{active: zwSelect==='滚动指纹'}">滚动指纹</div>
<div class="select-item" :class="{active: zwSelect==='滚动'}">滚动</div>
<div class="select-line"></div>
<div class="select-item" :class="{active: zwSelect==='平面指纹', isHasData: !PainFingerFlag}">平面指纹</div>
<div class="select-item" :class="{active: zwSelect==='平面', isHasData: !PainFingerFlag}">平面</div>
<div class="select-line"></div>
<div class="select-item" :class="{active: zwSelect==='掌纹'}">掌纹</div>
<div class="select-line"></div>
<div class="select-item" :class="{active: zwSelect==='人像'}">人像</div>
</div>
<div class="left-right-hand" v-if="zwSelect==='滚动指纹'">
<div class="left-right-hand" v-if="zwSelect==='滚动'">
<el-tabs v-model="activeRollHand" @tab-click="handleRollClick">
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item) in rollFingersRight" :key="item.code" @click="rollFingersLeftChange(item)">
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item) in rollFingersLeft" :key="item.code" @click="rollFingersLeftChange(item)">
<div v-if="item.image" class="fingerPic" :class="{fingerPicActive: activerollFinger===item.code}">
<div class="finger-number">{{item.code>9?item.code:'0'+item.code}}</div>
<img class="finger-pic" :src="'data:image/jpeg;base64,'+item.image" />
<!-- <img class="finger-pic" src="../../../assets/img/img.png" /> -->
<!-- <div class="finger-desc">原图</div>-->
<!-- <div class="finger-desc">原图</div>-->
</div>
<div v-else class="absence">
<img src="@/assets/img/absence.png" alt="">
......@@ -41,13 +41,13 @@
<div class="finger-name">{{item.name}}</div>
</div>
</el-tab-pane>
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item) in rollFingersLeft" :key="item.code" @click="rollFingersLeftChange(item)">
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item) in rollFingersRight" :key="item.code" @click="rollFingersLeftChange(item)">
<div v-if="item.image" class="fingerPic" :class="{fingerPicActive: activerollFinger===item.code}">
<div class="finger-number">{{item.code>9?item.code:'0'+item.code}}</div>
<img class="finger-pic" :src="'data:image/jpeg;base64,'+item.image" />
<!-- <img class="finger-pic" src="../../../assets/img/img.png" /> -->
<!-- <div class="finger-desc">原图</div>-->
<!-- <div class="finger-desc">原图</div>-->
</div>
<div v-else class="absence">
<img src="@/assets/img/absence.png" alt="">
......@@ -57,15 +57,15 @@
</el-tab-pane>
</el-tabs>
</div>
<div class="left-right-hand" v-else-if="zwSelect==='平面指纹'">
<div class="left-right-hand" v-else-if="zwSelect==='平面'">
<el-tabs v-model="activePainHand" @tab-click="handlePainClick">
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item) in painFingersRight" :key="item.code" @click="rollFingersLeftChange(item)">
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item) in painFingersLeft" :key="item.code" @click="rollFingersLeftChange(item)">
<div v-if="item.image" class="fingerPic" :class="{fingerPicActive: activerollFinger===item.code}">
<div class="finger-number">{{item.code}}</div>
<img class="finger-pic" :src="'data:image/jpeg;base64,'+item.image" />
<!-- <img class="finger-pic" src="../../../assets/img/img.png" /> -->
<!-- <div class="finger-desc">原图</div>-->
<!-- <div class="finger-desc">原图</div>-->
</div>
<div v-else class="absence">
<img src="@/assets/img/absence.png" alt="">
......@@ -73,13 +73,13 @@
<div class="finger-name">{{item.name}}</div>
</div>
</el-tab-pane>
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item) in painFingersLeft" :key="item.code" @click="rollFingersLeftChange(item)">
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item) in painFingersRight" :key="item.code" @click="rollFingersLeftChange(item)">
<div v-if="item.image" class="fingerPic" :class="{fingerPicActive: activerollFinger===item.code}">
<div class="finger-number">{{item.code}}</div>
<img class="finger-pic" :src="'data:image/jpeg;base64,'+item.image" />
<!-- <img class="finger-pic" src="../../../assets/img/img.png" /> -->
<!-- <div class="finger-desc">原图</div>-->
<!-- <div class="finger-desc">原图</div>-->
</div>
<div v-else class="absence">
<img src="@/assets/img/absence.png" alt="">
......@@ -90,25 +90,33 @@
</el-tabs>
</div>
<div class="left-right-hand" v-else-if="zwSelect==='掌纹'">
<el-tabs v-model="activePainHand" @tab-click="handlePainClick">
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item) in painFingersRight" :key="item.code" @click="rollFingersLeftChange(item)">
<el-tabs v-model="activeHandPosition" @tab-click="handlePainClick">
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom handDom" v-for="(item) in handLeft" :key="item.code" @click="HandsChange(item)">
<div v-if="item.image" class="fingerPic" :class="{fingerPicActive: activerollFinger===item.code}">
<div class="finger-number">{{item.code}}</div>
<img class="finger-pic" :src="'data:image/jpeg;base64,'+item.image" />
</div>
<!-- 加载状态 -->
<div v-else-if="item.image == ''">
<img src="@/assets/img/zzjz/ysjz.gif" alt="">
</div>
<div v-else class="absence">
<img src="@/assets/img/absence.png" alt="">
</div>
<div class="finger-name">{{item.name}}</div>
</div>
</el-tab-pane>
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item) in painFingersLeft" :key="item.code" @click="rollFingersLeftChange(item)">
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom handDom" v-for="(item) in handRight" :key="item.code" @click="HandsChange(item)">
<div v-if="item.image" class="fingerPic" :class="{fingerPicActive: activerollFinger===item.code}">
<div class="finger-number">{{item.code}}</div>
<img class="finger-pic" :src="'data:image/jpeg;base64,'+item.image" />
</div>
<!-- 加载状态 -->
<div v-else-if="item.image == ''">
<img src="@/assets/img/zzjz/zsjz.gif" alt="">
</div>
<div v-else class="absence">
<img src="@/assets/img/absence.png" alt="">
</div>
......@@ -117,8 +125,32 @@
</el-tab-pane>
</el-tabs>
</div>
<div class="finger-total">
共计<span>{{rollFingersLeft.length+rollFingersRight.length+painFingersLeft.length+painFingersRight.length}}枚</span>指纹
<div class="left-right-hand face" v-else-if="zwSelect==='人像'">
<div class="face-item" v-for="(item, i) in faceData" :key="i">
<div class="face-image">
<!-- 有图像 -->
<img v-if="item.image && item.code==14" class="face-pic idCard" :src="'data:image/jpeg;base64,'+item.image" />
<img v-else-if="item.image && item.code!=14" class="face-pic" :src="'data:image/jpeg;base64,'+item.image" />
<!-- 加载状态 -->
<img v-else-if="item.image == '' && item.code == 1" src="@/assets/img/zzjz/zmjz.gif" alt="">
<img v-else-if="item.image == '' && item.code == 2" src="@/assets/img/zzjz/zcjz.gif" alt="">
<img v-else-if="item.image == '' && item.code == 4" src="@/assets/img/zzjz/yljz.gif" alt="">
<img v-else-if="item.image == '' && item.code == 11" src="@/assets/img/zzjz/ID.gif" alt="">
<!-- 缺图像 -->
<img v-else class="face-absence" src="@/assets/img/TT/zwtp.png" alt="">
<span class="zwtx" v-show="item.image==null">暂无图像</span>
</div>
<div class="face-name">{{item.name}}</div>
</div>
</div>
<div class="finger-total" v-if="zwSelect==='平面' || zwSelect==='滚动'">
共计<span>{{fingerTotal}}枚</span>指纹
</div>
<div class="finger-total hand-total" v-if="zwSelect==='掌纹'">
共计<span>{{handTotal}}枚</span>掌纹
</div>
<div class="finger-total face-total" v-if="zwSelect==='人像'">
共计<span>{{faceTotal}}个</span>人像
</div>
</div>
</div>
......@@ -127,7 +159,6 @@
<script>
import axios from 'axios';
import { Loading } from 'element-ui';
import { mapState } from 'vuex';
// 取消上一次请求
const CancelToken = axios.CancelToken;
......@@ -142,37 +173,62 @@ export default {
preSeq: '',
// 找到第一个有图片的指纹
finger: null,
// 找到第一个有图片的掌纹
hand: null,
// 人员编号
id: '',
zwSelect: '滚动指纹',
zwSelect: '滚动',
activeRollHand: 'right',
activePainHand: 'right',
activerollFinger: '6',
handLeft: [
activeHandPosition: 'right',
// 人像
faceData: [
{
code: '11',
name: '拇',
image: null
code: 1,
image: '',
name: '正侧面'
},
{
code: '12',
name: '食',
image: null
code: 2,
image: '',
name: '左侧面'
},
{
code: '13',
name: '中',
image: null
code: 4,
image: '',
name: '右侧面'
},
{
code: '14',
name: '环',
image: null
code: 11,
image: '',
name: '身份证照'
}
],
// 掌纹-左
handLeft: [
{
code: '32',
name: '左半掌',
image: ''
},
{
code: '15',
name: '小',
image: null
code: '34',
name: '左侧掌',
image: ''
}
],
// 掌纹-右
handRight: [
{
code: '31',
name: '右半掌',
image: ''
},
{
code: '33',
name: '右侧掌',
image: ''
}
],
rollFingersLeft: [
......@@ -283,9 +339,19 @@ export default {
image: null
}
],
// 总的指纹数
fingerTotal: 0,
// 总的掌纹数
handTotal: 0,
// 总的人像数
faceTotal: 0,
// 加载动画
loading: null,
timer: null,
// 是否请求过掌纹
isHandRequest: false,
// 是否请求过人脸
isFaceRequest: false
}
},
computed: {
......@@ -318,33 +384,118 @@ export default {
}*/
}
// setTimeout(() => {
// //console.log(this.finger);
// }, 1000);+
this.getHandsData()
//找到第一个有图片的掌纹
// await this.findHand()
// if(self.hand && self.hand.code) {
// self.activerollFinger = self.hand.code
// self.preSeq = this.activerollFinger
// // 默认选中第一个出现的掌纹
// this.HandsChange(self.hand)
// }
},
methods: {
/**
* 获取掌纹数据
* 获取人像数据
*/
getHandsData() {
getFaceData () {
let self = this
if(self.isFaceRequest) return;
this.$axios({
method: 'post',
url: '/api/png/palm/barcode',
url: '/api/org/face/barcode',
data: {
barcode: 'R4308214500002021100049'
barcode: 'Rmmmmmmmmmmmmmmmmmmmmmm'
// barcode: self.barcode
}
}).then(res => {
console.log(res);
self.faceData.forEach(item => {
item.image = null
})
if (res.data.code === 0) {
self.faceData.forEach(item => {
res.data.ret.forEach(item2 => {
if (item2.seq == item.code) {
item.image = item2.image
self.faceTotal++
}
})
})
}
self.$store.commit('ryzwbj/setRxInfo', self.faceData)
self.isFaceRequest = true
})
},
/**
* 切换掌纹
*/
HandsChange (hand) {
let self = this
console.log(hand);
if (hand && hand.image) {
self.$bus.emit('switchHandTitle', hand.name)
self.$bus.emit('ryzwbjImage', hand.image)
self.activerollFinger = hand.code
// 更换号码
this.$store.commit('zwbj/setSeq', hand.code)
} else {
self.$bus.emit('ryzwbjImage', 'xxx')
}
self.$bus.emit('ryzwbjTDZ')
},
/**
* 获取掌纹数据
*/
async getHandsData () {
let self = this
if(self.isHandRequest) return;
let res = await this.$axios({
method: 'post',
url: '/api/png/palm/barcode',
loading: true,
data: {
barcode: 'R4308214500002021100049'
// barcode: self.barcode
}
})
// 初始化图片
self.handLeft.forEach((item) => {
item.image = null
})
self.handRight.forEach((item) => {
item.image = null
})
// 赋值
if (res.data.code === 0) {
self.handLeft.forEach((item) => {
res.data.ret.forEach(item2 => {
if (item2.seq == item.code) {
item.image = item2.image
self.handTotal++
}
})
})
self.handRight.forEach((item) => {
res.data.ret.forEach(item2 => {
if (item2.seq == item.code) {
item.image = item2.image
self.handTotal++
}
})
})
} else {
self.$bus.emit('ryzwbjImage', 'xxx')
}
self.isHandRequest = true
console.log(self.handLeft);
console.log(self.handRight);
},
/**
* 打开档案信息
*/
daxxChange() {
daxxChange () {
this.$bus.emit('openRyDaxx', true)
// 降低指纹编辑按钮的优先级
$(".center").css('z-index', 9)
......@@ -355,7 +506,7 @@ export default {
* 获取平面/滚动指纹png图片
* @param code
*/
getRollOrPainFinger(finger) {
getRollOrPainFinger (finger) {
this.$store.commit('zwbj/setSeq', finger.code)
this.$bus.emit('ryzwbjImage', finger.image)
this.$bus.emit('ryzwbjTDZ')
......@@ -466,6 +617,7 @@ export default {
self.rollFingersLeft.forEach((item) => {
if (item.code == element.seq) {
item.image = element.image
self.fingerTotal++
}
})
} else {
......@@ -473,6 +625,7 @@ export default {
self.rollFingersRight.forEach((item) => {
if (item.code == element.seq) {
item.image = element.image
self.fingerTotal++
}
})
}
......@@ -514,6 +667,7 @@ export default {
self.painFingersLeft.forEach((item) => {
if (item.code == element.seq) {
item.image = element.image
self.fingerTotal++
}
})
} else {
......@@ -521,6 +675,7 @@ export default {
self.painFingersRight.forEach((item) => {
if (item.code == element.seq) {
item.image = element.image
self.fingerTotal++
}
})
}
......@@ -552,32 +707,36 @@ export default {
// 保存当前的指位特征点信息
// 直接覆盖之前的数据
//console.log(self.preTzdArr);
if (self.preTzdArr && self.preTzdArr.length >= 0) {
sessionStorage.setItem(this.preSeq, JSON.stringify(self.preTzdArr))
sessionStorage.setItem(`auto${this.preSeq}`, JSON.stringify(self.autopretzdall))
}
// 已在每次标上的时候存入了 sessionStorage 中
// if (self.preTzdArr && self.preTzdArr.length >= 0) {
// sessionStorage.setItem(this.preSeq, JSON.stringify(self.preTzdArr))
// sessionStorage.setItem(`auto${this.preSeq}`, JSON.stringify(self.autopretzdall))
// }
self.$store.commit('zwbj/setTzdall', null)
self.$store.commit('zwbj/setAutoTzdall', null)
}
this.preSeq = finger.code
//console.log(finger);
this.activerollFinger = finger.code
// 平面指纹原图
if (finger.code > 10) {
// this.getPainFingerOrigin(finger.code)
this.$store.commit('zwbj/setSeq', finger.code)
// 指纹编辑区域发送指纹数据，替换指纹图片
this.$store.commit('zwbj/setSeq', finger.code)
// 指纹编辑区域发送指纹数据，替换指纹图片
if (finger && finger.image) {
self.$bus.emit('ryzwbjImage', finger.image)
self.$bus.emit('ryzwbjTDZ')
} else {
// 滚动指纹原图
// this.getRollFingerOrigin(finger.code)
self.$bus.emit('ryzwbjImage', 'xxx')
}
self.$bus.emit('ryzwbjTDZ')
this.$store.commit('zwbj/setSeq', finger.code)
// 指纹编辑区域发送指纹数据，替换指纹图片
self.$bus.emit('ryzwbjImage', finger.image)
self.$bus.emit('ryzwbjTDZ')
// 平面指纹原图
if (finger && finger.image) {
if ((finger.code > 0 && finger.code <= 5) || (finger.code > 10 && finger.code <= 15)) {
self.$bus.emit('switchHandTitle', '右' + finger.name)
} else {
// 滚动指纹原图
self.$bus.emit('switchHandTitle', '左' + finger.name)
}
}
},
/**
......@@ -620,16 +779,64 @@ export default {
return self.finger
},
/**
* @description: 找到第一个有图片的掌纹用来初始化展示
* @param {*}
* @return {*}
*/
async findHand () {
let self = this
self.hand = null
self.handRight.some((item, index) => {
if (item.image !== null) {
self.hand = item
return true
}
})
if (self.hand) return self.hand
self.handLeft.some((item, index) => {
if (item.image !== null) {
self.hand = item
return true
}
})
if (self.hand) return self.hand
},
/**
* @description: 滚动指纹-平面指纹-掌纹切换
* @param {*} event
* @return {*}
*/
zzwChange (event) {
if (!this.PainFingerFlag && event.target.innerText == '平面指纹') {
async zzwChange (event) {
let self = this
if (!this.PainFingerFlag && event.target.innerText == '平面') {
return
}
this.zwSelect = event.target.innerText
if (this.zwSelect === '掌纹') {
// 获取掌纹数据
await this.getHandsData()
await this.findHand()
console.log(self.hand);
if (self.hand && self.hand.code) {
self.activerollFinger = self.hand.code
self.preSeq = this.activerollFinger
// 默认选中第一个出现的掌纹
this.HandsChange(self.hand)
}
// 传入判断，为掌纹则开启图像编辑的功能
this.$bus.emit('isFace', false)
} else if (this.zwSelect === '人像') {
// 获取人脸数据
this.getFaceData()
// 传入判断，为人像则关闭图像编辑的功能
this.$bus.emit('isFace', true)
} else {
// 传入判断，为指纹则开启图像编辑的功能
this.$bus.emit('isFace', false)
}
},
/**
* @description: 左右手切换
......
src/views/Home.vue
......@@ -107,6 +107,11 @@
<img src="../assets/img/loadingtxt.gif" alt="" />
</div>
</div>
<!-- 人像 -->
<div class="face-big" v-show="enLargeFace">
<img src="@/assets/img/下载.jpg" alt="">
</div>
</div>
</template>
......@@ -153,6 +158,14 @@ export default {
});
console.log(this.smallLoading);
document.querySelector('.shadow').addEventListener('click', function(e) {
// 如果图像是处于放大状态
if(self.enLargeFace) {
self.isCropper = false
self.$store.commit('ryzwbj/setEnlargeFace', false)
}
})
},
updated () {
this.menuActive = this.$route.name;
......@@ -165,6 +178,7 @@ export default {
willRoute: (state) => state.loading.willRoute,
jumproute: (state) => state.loading.jumproute,
smallLoading: (state) => state.loading.smallLoading,
enLargeFace: (state) => state.loading.enLargeFace,
}),
cachePageName () {
return this.$store.state.layout.cachePageName;
......@@ -493,6 +507,18 @@ export default {
};
</script>
<style scoped lang="scss">
// 人像
.face-big {
position: absolute;
top: 0;
left: 0;
width: 543px;
height: 722px;
box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
border-radius: 8px;
border: 1px solid #CCCCCC;
}
/deep/.dialog-footer {
margin-top: 26px;
width: 100%;
......
src/views/bzxxgl/bzxxfh.vue
<!--
* @Author: your name
* @Date: 2021-12-01 15:25:22
* @LastEditTime: 2021-12-01 21:38:10
* @LastEditTime: 2021-12-02 23:06:47
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \指纹系统\founder_vue\src\views\AllPersonnelBase\bzxxfh.vue
......@@ -121,11 +121,7 @@
<el-table-column prop="nydwGajgmc" label="操作" width="auto">
<template slot-scope="scope">
<div v-show="scope.row.nydwGajgmc==='待复核'" :class="{dfh: scope.row.nydwGajgmc==='待复核'}">{{scope.row.nydwGajgmc}}</div>
<!-- <div @click="cxfhChange(scope.row)" v-show="scope.row.nydwGajgmc==='撤销复核'" :class="{cxfh: scope.row.nydwGajgmc==='撤销复核'}">{{scope.row.nydwGajgmc}}</div> -->
<el-popover @click="cxfhChange(scope.row)" v-show="scope.row.nydwGajgmc==='撤销复核'" :class="{cxfh: scope.row.nydwGajgmc==='撤销复核'}" placement="left" title="标题" width="200" trigger="click">
<div slot="reference" class="cursor: pointer;">撤销复核</div>
</el-popover>
<div @click="cxfhChange($event,scope.row)" v-show="scope.row.nydwGajgmc==='撤销复核'" :class="{cxfh: scope.row.nydwGajgmc==='撤销复核'}">{{scope.row.nydwGajgmc}}</div>
</template>
</el-table-column>
</el-table>
......@@ -138,6 +134,21 @@
</div>
</div>
</div>
<div class="cxfh-dialog" v-show="cxfhVisiable">
<div class="cxfh-header">
<div class="header-left">撤销复核</div>
<div class="iconfont icon-danchuangguanbianniu" @click="closeCxfh"></div>
</div>
<div class="cxfh-line"></div>
<div class="cxfh-content">
<el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="textarea">
</el-input>
</div>
<div class="cxfh-footer">
<div class="confirm-btn" @click="confirmCxfh">确认</div>
<div class="cancel-btn" @click="closeCxfh">取消</div>
</div>
</div>
</div>
</template>
......@@ -209,6 +220,97 @@ export default {
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
{
ysxtAsjxgrybh: "A1231231231231231231232",
xm: "R1231231231231231231232",
zjhm: "滚动-右环",
csrq: "平面-右中",
xbdm: "湖南省长沙市",
rollcount: "闪电",
plancount: "2021-02-13",
plamcount: "张三李四",
piccount: "2021-02-13",
ifidcard: "复核无效",
nydwGajgmc: "撤销复核",
},
],
isShowTip: false, //批量操作提示
multipleSelection: [], // 表单选择项目
......@@ -218,7 +320,11 @@ export default {
// 当前页的数据条数
currentPageSize: 10,
// 数据总条数
total: 100
total: 100,
// 撤销复核原因
textarea: '',
// 撤销复核弹窗显示/隐藏
cxfhVisiable: false
}
},
components: {
......@@ -237,10 +343,33 @@ export default {
},
methods: {
/**
* 确认撤销复核
*/
confirmCxfh() {
this.cxfhVisiable = false
// 置空
this.textarea = ''
},
/**
* 关闭撤销复核弹窗
*/
closeCxfh() {
this.cxfhVisiable = false
// 置空
this.textarea = ''
},
/**
* 撤销复核
*/
cxfhChange (data) {
cxfhChange (event, data) {
console.log(data);
let dialog = document.querySelector('.cxfh-dialog')
if((event.y/16) < 46.25) {
dialog.style.top = (event.y-163-60-25)/16 + 'rem'
} else {
dialog.style.top = '30.6875rem';
}
this.cxfhVisiable = true
},
/**
* @description: pageSize 改变时会触发
......
src/views/bzxxgl/scss/bzxxfh.scss
......@@ -296,7 +296,7 @@ $tableHeight: var(--tableHeight, 450px);
margin-right: 6px;
}
.el-tag {
margin-bottom: 16px;
margin-bottom: 16px;
width: 100%;
height: 40px;
background: #ddebff;
......@@ -316,7 +316,7 @@ $tableHeight: var(--tableHeight, 450px);
}
}
.bzxxfh-content-content-footer {
margin-top: 16px;
margin-top: 16px;
width: 100%;
display: flex;
align-items: center;
......@@ -371,6 +371,97 @@ $tableHeight: var(--tableHeight, 450px);
.delSelection /deep/ .el-table-column--selection .cell {
display: none;
}
.cxfh-dialog {
z-index: 99;
position: absolute;
right: 175px;
top: 280px;
width: 400px;
height: 326px;
background: #ffffff;
box-shadow: 0px 14px 30px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
.cxfh-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100%;
padding: 0 24px;
.header-left {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282F3C;
}
.icon-danchuangguanbianniu {
cursor: pointer;
font-size: 13px;
color: #B1B6C2;
}
}
.cxfh-line {
width: 100%;
height: 1px;
background-color: #eeeeee;
}
.cxfh-content {
padding: 24px;
/deep/.el-textarea__inner {
width: 352px;
height: 152px;
background: #F6F8FA;
box-shadow: 0px 1px 2px 0px rgba(5, 95, 231, 0.18);
border-radius: 4px;
}
}
.cxfh-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.confirm-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 40px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #aeb5c2;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #2e3846;
margin-right: 24px;
&:hover {
border: 1px solid #377FEC;
color: #377FEC;
}
&:active {
border: 1px solid #044CB9;
color: #044CB9;
}
}
.cancel-btn {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 40px;
background: #055fe7;
border-radius: 4px;
border: 1px solid #aeb5c2;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
&:hover {
background: #377FEC;
}
&:active {
background: #044CB9;
}
}
}
}
}
vue.config.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-12-02 11:55:08
* @LastEditTime: 2021-12-02 16:18:28
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\vue.config.js
......
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