Skip to content

F
founder_vue
Commit 5040af80 by 张超军
Options

人脸放大展示+人员指纹编辑特征点缩放+平移调整

parent 46542d7a
Showing with 205 additions and 45 deletions
src/store/modules/mutations-types.js
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-11-04 13:14:49 * @Date: 2021-11-04 13:14:49
* @LastEditTime: 2021-12-02 21:14:19 * @LastEditTime: 2021-12-03 10:30:40
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\modules\mutations-types.js * @FilePath: \指纹系统\founder_vue\src\store\modules\mutations-types.js
...@@ -36,3 +36,5 @@ export const SET_SMALLLOADING = 'setSmallLoading' ...@@ -36,3 +36,5 @@ export const SET_SMALLLOADING = 'setSmallLoading'
export const SET_RXINFO = 'setRxInfo' export const SET_RXINFO = 'setRxInfo'
// 是否放大人像 // 是否放大人像
export const SET_ENLARGEFACE = 'setEnlargeFace' export const SET_ENLARGEFACE = 'setEnlargeFace'
// 设置单个人像信息
export const SET_RXINFOENLARGE = 'setRxInfoEnlarge'
src/store/modules/ryzwbj.js
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-11-04 11:12:33 * @Date: 2021-11-04 11:12:33
* @LastEditTime: 2021-12-02 21:14:25 * @LastEditTime: 2021-12-03 10:41:41
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\store\modules\zwbj.js * @FilePath: \指纹系统\founder_vue\src\store\modules\zwbj.js
*/ */
import { SET_RXINFO, SET_ENLARGEFACE } from "./mutations-types"; import { SET_RXINFO, SET_ENLARGEFACE, SET_RXINFOENLARGE } from "./mutations-types";
const state = { const state = {
// 人像信息 // 人像信息
rxInfo: [], rxInfo: [],
// 单个人像信息
rxInfoEnlarge: {},
// 是否放大人像 // 是否放大人像
enLargeFace: false enLargeFace: false
}; };
...@@ -21,6 +23,9 @@ const mutations = { ...@@ -21,6 +23,9 @@ const mutations = {
[SET_ENLARGEFACE] (state, content) { [SET_ENLARGEFACE] (state, content) {
state.enLargeFace = content state.enLargeFace = content
}, },
[SET_RXINFOENLARGE] (state, content) {
state.rxInfoEnlarge = content
},
}; };
const actions = { const actions = {
......
src/views/Editor/modules/imageEd.scss
...@@ -999,7 +999,7 @@ $transOrigin: var(--transOrigin, 0px, 0px); ...@@ -999,7 +999,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover { &:hover {
border: 1px solid #055FE7; border: 1px solid #055fe7;
box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.16); box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.16);
} }
img { img {
......
src/views/Editor/modules/imageEd.vue
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-22 11:36:10 * @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-03 00:46:31 * @LastEditTime: 2021-12-03 11:30:28
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
...@@ -375,6 +375,8 @@ import "@/icons/direction.svg"; ...@@ -375,6 +375,8 @@ import "@/icons/direction.svg";
export default { export default {
data () { data () {
return { return {
// 人像信息
rxInfo: [],
// 绿色角度方向（暂时不做） // 绿色角度方向（暂时不做）
greenDeg: 0, greenDeg: 0,
// 是否点击了自动提取 // 是否点击了自动提取
...@@ -626,7 +628,10 @@ export default { ...@@ -626,7 +628,10 @@ export default {
// 记录session的个数 // 记录session的个数
sessionCount: 0, sessionCount: 0,
// 是否为人像 // 是否为人像
isFace: false isFace: false,
// 记录特征点图层上次停留的位置
tzdDrawingLeft_yd: 0,
tzdDrawingTop_yd: 0
}; };
}, },
computed: { computed: {
...@@ -634,7 +639,6 @@ export default { ...@@ -634,7 +639,6 @@ export default {
seq: state => state.zwbj.seq, seq: state => state.zwbj.seq,
preTzdArr: state => state.zwbj.pretzdall, preTzdArr: state => state.zwbj.pretzdall,
autopretzdall: state => state.zwbj.autopretzdall, autopretzdall: state => state.zwbj.autopretzdall,
rxInfo: state => state.ryzwbj.rxInfo
}) })
}, },
created () { created () {
...@@ -1607,12 +1611,19 @@ export default { ...@@ -1607,12 +1611,19 @@ export default {
// $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`) // $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
// TODO // TODO
$(".tzdDrawing").css("transform", `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`); $(".tzdDrawing").css(
"transform",
self.tzdDrawing_top = Number(self.tzdDrawingTop) + (y2 - y1); `translate(${Number(self.tzdDrawingLeft_yd) + (x2 - x1)}px,${Number(self.tzdDrawingTop_yd) + (y2 - y1)
self.tzdDrawing_left = Number(self.tzdDrawingLeft) + (x2 - x1); }px) rotate(${canvasImage.angle}deg) scale(${self.zoomLevel})`
);
$(".tzdDrawing_2").css("transform", `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`);
$(".tzdDrawing_2").css(
"transform",
`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.move_left = originleft + ((x2 - x1) * self.newWidth / self.canvasWidth / self.zoomLevel); self.move_left = originleft + ((x2 - x1) * self.newWidth / self.canvasWidth / self.zoomLevel);
self.move_top = origintop + ((y2 - y1) * self.newHeight / self.canvasHeight / self.zoomLevel); self.move_top = origintop + ((y2 - y1) * self.newHeight / self.canvasHeight / self.zoomLevel);
...@@ -1632,13 +1643,58 @@ export default { ...@@ -1632,13 +1643,58 @@ export default {
y: self.newHeight / 2, y: self.newHeight / 2,
zoomLevel: self.zoomLevel zoomLevel: self.zoomLevel
}); });
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = self.imageEditor._graphics.getCanvasImage(); let canvasImage = self.imageEditor._graphics.getCanvasImage();
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`); if (canvasImage.angle) {
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel})`); let src = {
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px"; x: canvasImage.left,
// //console.log(`${originPointer.y}px,${originPointer.x}px`); y: canvasImage.top
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`; };
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 {
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}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`); $(".tzdDom").css("z-index", `99999`);
} else { } else {
// 缩小 // 缩小
...@@ -1655,8 +1711,53 @@ export default { ...@@ -1655,8 +1711,53 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`) // $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`; // document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = self.imageEditor._graphics.getCanvasImage(); let canvasImage = self.imageEditor._graphics.getCanvasImage();
$(".tzdDrawing").css("transform", `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`); if (canvasImage.angle) {
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel})`); 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(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"; // document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// $('.tzdDrawing').css('z-index', `99`) // $('.tzdDrawing').css('z-index', `99`)
...@@ -1733,10 +1834,16 @@ export default { ...@@ -1733,10 +1834,16 @@ export default {
let canvasImage = imageEditor._graphics.getCanvasImage(); let canvasImage = imageEditor._graphics.getCanvasImage();
self.originleft = canvasImage.left; self.originleft = canvasImage.left;
self.origintop = canvasImage.top; self.origintop = canvasImage.top;
if ($(".tzdDrawing").css("transform").replace(/[^0-9\-,]/g, "").split(",")[4]) {
self.tzdDrawingLeft = $(".tzdDrawing").css("transform").replace(/[^0-9\-,]/g, "").split(",")[4]; self.tzdDrawingLeft = canvasImage.left
self.tzdDrawingTop = $(".tzdDrawing").css("transform").replace(/[^0-9\-,]/g, "").split(",")[5]; self.tzdDrawingTop = canvasImage.top
}
// 存储 特征点图层 在最后停下的位置 ---- 用于加在拖拽平移的基础上。
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];
// $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`) // $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg) translate(${Number(self.tzdDrawing_left)}px,${Number(self.tzdDrawing_top)}px) scale(${self.zoomLevel})`)
self.startHand = false; self.startHand = false;
self.mouseEnlarge = false; self.mouseEnlarge = false;
...@@ -1886,14 +1993,20 @@ export default { ...@@ -1886,14 +1993,20 @@ export default {
this.$bus.on('isFace', (isFace) => { this.$bus.on('isFace', (isFace) => {
self.isFace = isFace self.isFace = isFace
}) })
// 获取全部人像信息
this.$bus.on('setRxInfo', (rxInfo) => {
self.rxInfo = rxInfo
})
}, },
methods: { methods: {
/** /**
* 人像双击事件 * 人像双击事件
*/ */
faceDoubleChange(face) { faceDoubleChange (face) {
console.log(face);
this.$bus.emit('isBlur', true) this.$bus.emit('isBlur', true)
this.enLargeFace = true
this.$bus.emit('setRxInfoEnlarge', face)
this.$store.commit('ryzwbj/setEnlargeFace', true) this.$store.commit('ryzwbj/setEnlargeFace', true)
}, },
/** /**
...@@ -3985,6 +4098,8 @@ export default { ...@@ -3985,6 +4098,8 @@ export default {
this.$bus.off('ryzwbjTDZ'); this.$bus.off('ryzwbjTDZ');
this.$bus.off('zwType'); this.$bus.off('zwType');
this.$bus.off('isFace'); this.$bus.off('isFace');
this.$bus.off('setRxInfoEnlarge')
this.$bus.off('setRxInfo')
} }
}; };
</script> </script>
......
src/views/Editor/modules/imageEdAJ.vue
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-22 11:36:10 * @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-03 02:08:29 * @LastEditTime: 2021-12-03 11:20:56
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
...@@ -933,6 +933,7 @@ export default { ...@@ -933,6 +933,7 @@ export default {
originY: 0, originY: 0,
// 记录session的个数 // 记录session的个数
sessionCount: 0, sessionCount: 0,
// 记录特征点图层上次停留的位置
tzdDrawingLeft_yd: 0, tzdDrawingLeft_yd: 0,
tzdDrawingTop_yd: 0 tzdDrawingTop_yd: 0
}; };
...@@ -2708,6 +2709,7 @@ export default { ...@@ -2708,6 +2709,7 @@ export default {
let canvasImage = imageEditor._graphics.getCanvasImage(); let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage); console.log(canvasImage);
// 要计算canvas的在偏移角度的 坐标转换，用于 特征点图层 的translate transform-origin
if (canvasImage.angle) { if (canvasImage.angle) {
let src = { let src = {
x: canvasImage.left, x: canvasImage.left,
...@@ -2792,7 +2794,8 @@ export default { ...@@ -2792,7 +2794,8 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`) // $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`; // document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
let canvasImage = imageEditor._graphics.getCanvasImage(); let canvasImage = imageEditor._graphics.getCanvasImage();
// 要计算canvas的在偏移角度的 坐标转换，用于 特征点图层 的translate transform-origin
if (canvasImage.angle) { if (canvasImage.angle) {
let src = { let src = {
x: canvasImage.left, x: canvasImage.left,
...@@ -2986,6 +2989,8 @@ export default { ...@@ -2986,6 +2989,8 @@ export default {
// console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(',')); // console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(','));
console.log($('.tzdDrawing').css("transform")); console.log($('.tzdDrawing').css("transform"));
// console.log(cssTransform(document.querySelector('.tzdDrawing'), 'translate')); // console.log(cssTransform(document.querySelector('.tzdDrawing'), 'translate'));
// 存储 特征点图层 在最后停下的位置 ---- 用于加在拖拽平移的基础上。
let transformMatrix = $(".tzdDrawing").css("transform").substring(7, $(".tzdDrawing").css("transform").length - 1).split(',') let transformMatrix = $(".tzdDrawing").css("transform").substring(7, $(".tzdDrawing").css("transform").length - 1).split(',')
console.log(transformMatrix); console.log(transformMatrix);
self.tzdDrawingLeft_yd = transformMatrix[4]; self.tzdDrawingLeft_yd = transformMatrix[4];
......
src/views/Editor/modules/ryzwbjLeft.vue
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-22 09:42:07 * @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-12-02 20:36:39 * @LastEditTime: 2021-12-03 11:29:52
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
...@@ -424,7 +424,8 @@ export default { ...@@ -424,7 +424,8 @@ export default {
}) })
}) })
} }
self.$store.commit('ryzwbj/setRxInfo', self.faceData) // self.$store.commit('ryzwbj/setRxInfo', self.faceData)
self.$bus.emit('setRxInfo', self.faceData)
self.isFaceRequest = true self.isFaceRequest = true
}) })
}, },
...@@ -828,6 +829,7 @@ export default { ...@@ -828,6 +829,7 @@ export default {
} }
// 传入判断，为掌纹则开启图像编辑的功能 // 传入判断，为掌纹则开启图像编辑的功能
this.$bus.emit('isFace', false) this.$bus.emit('isFace', false)
this.$bus.emit('zwType', '掌纹')
} else if (this.zwSelect === '人像') { } else if (this.zwSelect === '人像') {
// 获取人脸数据 // 获取人脸数据
this.getFaceData() this.getFaceData()
...@@ -857,6 +859,7 @@ export default { ...@@ -857,6 +859,7 @@ export default {
this.$bus.off('ryzwbjType'); this.$bus.off('ryzwbjType');
this.$bus.off('ryzwbjTDZ'); this.$bus.off('ryzwbjTDZ');
this.$bus.off('zwType'); this.$bus.off('zwType');
this.$bus.off('setRxInfo')
}, },
watch: { watch: {
zwSelect (newValue, oldValue) { zwSelect (newValue, oldValue) {
......
src/views/Home.vue
...@@ -109,9 +109,12 @@ ...@@ -109,9 +109,12 @@
</div> </div>
<!-- 人像 --> <!-- 人像 -->
<div class="face-big" v-show="enLargeFace"> <transition name="el-fade-in-linear">
<img src="@/assets/img/下载.jpg" alt=""> <div class="face-big" v-show="enLargeFace">
</div> <div class="face-name">{{rxInfoEnlarge.name}}</div>
<img class="face-img" :src="'data:image/jpeg;base64,'+rxInfoEnlarge.image" alt="">
</div>
</transition>
</div> </div>
</template> </template>
...@@ -142,6 +145,8 @@ export default { ...@@ -142,6 +145,8 @@ export default {
jumpRouteDialogVisible: false, jumpRouteDialogVisible: false,
// 路由跳转的方式----- 1.面包屑切换。2.面包屑删除当前。3.左侧菜单跳转 // 路由跳转的方式----- 1.面包屑切换。2.面包屑删除当前。3.左侧菜单跳转
routeChangeType: "change", routeChangeType: "change",
// 人像信息
rxInfoEnlarge: {}
}; };
}, },
mounted () { mounted () {
...@@ -157,8 +162,8 @@ export default { ...@@ -157,8 +162,8 @@ export default {
} }
}); });
console.log(this.smallLoading); // 初始化人像是否放大
self.$store.commit('ryzwbj/setEnlargeFace', false)
document.querySelector('.shadow').addEventListener('click', function(e) { document.querySelector('.shadow').addEventListener('click', function(e) {
// 如果图像是处于放大状态 // 如果图像是处于放大状态
if(self.enLargeFace) { if(self.enLargeFace) {
...@@ -166,6 +171,13 @@ export default { ...@@ -166,6 +171,13 @@ export default {
self.$store.commit('ryzwbj/setEnlargeFace', false) self.$store.commit('ryzwbj/setEnlargeFace', false)
} }
}) })
// 获取放大的人像信息
this.$bus.on('setRxInfoEnlarge', (rxInfoEnlarge) => {
console.log(11111111111);
self.rxInfoEnlarge = rxInfoEnlarge
})
}, },
updated () { updated () {
this.menuActive = this.$route.name; this.menuActive = this.$route.name;
...@@ -178,7 +190,7 @@ export default { ...@@ -178,7 +190,7 @@ export default {
willRoute: (state) => state.loading.willRoute, willRoute: (state) => state.loading.willRoute,
jumproute: (state) => state.loading.jumproute, jumproute: (state) => state.loading.jumproute,
smallLoading: (state) => state.loading.smallLoading, smallLoading: (state) => state.loading.smallLoading,
enLargeFace: (state) => state.loading.enLargeFace, enLargeFace: (state) => state.ryzwbj.enLargeFace,
}), }),
cachePageName () { cachePageName () {
return this.$store.state.layout.cachePageName; return this.$store.state.layout.cachePageName;
...@@ -454,6 +466,9 @@ export default { ...@@ -454,6 +466,9 @@ export default {
}, },
watch: { watch: {
enLargeFace (newValue, oldValue) {
console.log(newValue);
},
menuActive (newValue, oldValue) { menuActive (newValue, oldValue) {
console.log(newValue); console.log(newValue);
}, },
...@@ -509,14 +524,29 @@ export default { ...@@ -509,14 +524,29 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
// 人像 // 人像
.face-big { .face-big {
position: absolute; z-index: 999;
top: 0; position: fixed;
left: 0; top: calc(50% - 361px);
width: 543px; left: calc(50% - 271.5px);
height: 722px; display: flex;
box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16); flex-direction: column;
border-radius: 8px; justify-content: center;
border: 1px solid #CCCCCC; align-items: center;
.face-name {
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
margin-bottom: 6px;
}
.face-img {
width: 543px;
height: 722px;
box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
border-radius: 8px;
border: 1px solid #CCCCCC;
background: #ffffff;
}
} }
/deep/.dialog-footer { /deep/.dialog-footer {
......
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