Skip to content

F
founder_vue
Commit 335e6c24 by 张超军
Options

冲突

parents 3535fc12 f4c2826a
Showing with 564 additions and 367 deletions
src/App.vue
......@@ -14,7 +14,7 @@
<script>
export default {
created() {
created () {
// console.log(document.body.scrollHeight)
var lett = this;
document.onkeydown = function (e) {
......@@ -99,7 +99,7 @@ export default {
font-family: MicrosoftYaHei;
color: #333333;
p {
line-height: 4rem!important;
line-height: 4rem !important;
}
}
.el-message-box__btns {
......@@ -136,7 +136,7 @@ export default {
padding-bottom: 0.625rem;
vertical-align: middle;
background-color: #fff;
height: 190px !important;
// height: 190px !important;
border-radius: 0.25rem;
border: 0.0625rem solid #ebeef5;
font-size: 1.125rem;
......
src/views/Editor/modules/ajzwbjLeft.vue
<!--
* @Author: your name
* @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-12-13 17:29:13
* @LastEditTime: 2021-12-13 21:33:22
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
......
src/views/Editor/modules/imageEdAJ.scss
......@@ -1230,17 +1230,27 @@ $canvasWidth: var(--canvasWidth, 670px);
}
.preview-source {
z-index: 9999;
z-index: 99999;
position: absolute;
left: 25px;
top: 55px;
left: 0;
top: 0;
border: 1px solid #ccc;
width: 80px;
height: 80px;
width: 144px;
height: 144px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
overflow: hidden;
img {
object-fit: contain;
}
.block_small {
width: 100%;
height: 100%;
border: 1px solid #055fe7;
position: absolute;
top: 0;
left: 0;
}
}
}
}
......
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-13 17:29:40
* @LastEditTime: 2021-12-13 21:33:32
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -77,7 +77,8 @@
<div class="imageEd_main">
<!-- 预览 -->
<div class="preview-source" v-show="isShowSourcePrivew">
<img :src="previewSource" alt="" />
<img id="preview-source-img" :src="previewSource" alt="" />
<div id="block_small" class="block_small" v-show="true"></div>
</div>
<!-- 小操作区域 -->
<div class="small-drawing" v-if="isTpdr_flag">
......@@ -965,7 +966,9 @@ export default {
// 掌纹框的最小宽度范围
minLength: 0,
// 图片类型
picType: 'get'
picType: 'get',
handDataX:0,
handDataY:0
};
},
computed: {
......@@ -1306,14 +1309,7 @@ export default {
self.isY = false;
self.isReset = false;
imageEditor.flipX().then(function (status) {
console.log("flipX: ", status.flipX);
console.log("flipY: ", status.flipY);
console.log("angle: ", status.angle);
if (status.flipX) {
$(".tzdDrawing").css("transform", `rotateY(${-status.angle + 180}deg) rotateX(${-status.angle}deg)`);
} else {
$(".tzdDrawing").css("transform", `rotate(${-status.angle}deg)`);
}
self.changeTzdDrawing();
});
// Fcanvas.getObjects().map(function(o) {
// // console.log(o);
......@@ -1330,14 +1326,7 @@ export default {
self.isY = false;
self.isReset = false;
imageEditor.flipX().then(function (status) {
console.log("flipX: ", status.flipX);
console.log("flipY: ", status.flipY);
console.log("angle: ", status.angle);
if (status.flipX) {
$(".tzdDrawing").css("transform", `rotateY(${-status.angle + 180}deg) rotateX(${-status.angle}deg)`);
} else {
$(".tzdDrawing").css("transform", `rotate(${-status.angle}deg)`);
}
self.changeTzdDrawing();
});
});
......@@ -1348,14 +1337,7 @@ export default {
self.isY = true;
self.isReset = false;
imageEditor.flipY().then(function (status) {
console.log("flipX: ", status.flipX);
console.log("flipY: ", status.flipY);
console.log("angle: ", status.angle);
if (status.flipY) {
$(".tzdDrawing").css("transform", `rotateX(${-status.angle + 180}deg) rotateY(${-status.angle}deg)`);
} else {
$(".tzdDrawing").css("transform", `rotate(${-status.angle}deg)`);
}
self.changeTzdDrawing();
});
});
......@@ -1366,14 +1348,7 @@ export default {
self.isY = true;
self.isReset = false;
imageEditor.flipY().then(function (status) {
console.log("flipX: ", status.flipX);
console.log("flipY: ", status.flipY);
console.log("angle: ", status.angle);
if (status.flipY) {
$(".tzdDrawing").css("transform", `rotateX(${-status.angle + 180}deg) rotateY(${-status.angle}deg)`);
} else {
$(".tzdDrawing").css("transform", `rotate(${-status.angle}deg)`);
}
self.changeTzdDrawing();
});
});
......@@ -1398,8 +1373,7 @@ export default {
imageEditor.resetZoom();
self.startPlace = 0;
// 特征点的图层也要跟着转
$(".tzdDrawing").css("transform", `rotate(${self.inputRotationRange}deg)`);
$(".tzdDrawing_2").css("transform", `rotate(${self.inputRotationRange}deg)`);
self.changeTzdDrawing();
}, 200);
setTimeout(() => {
......@@ -1411,8 +1385,6 @@ export default {
console.log("flipY: ", status.flipY);
console.log("angle: ", status.angle);
});
$(".tzdDrawing").css("transform", "rotateX(0)");
$(".tzdDrawing").css("transform", "rotateY(0)");
// imageEditor.resetZoom()
let canvasImage = imageEditor._graphics.getCanvasImage();
imageEditor._graphics.setImageProperties(
......@@ -1424,7 +1396,7 @@ export default {
},
true
);
self.resetTzdDrawing();
console.log(canvasImage);
});
......@@ -1445,8 +1417,7 @@ export default {
imageEditor.resetZoom();
self.startPlace = 0;
// 特征点的图层也要跟着转
$(".tzdDrawing").css("transform", `rotate(${self.inputRotationRange}deg)`);
$(".tzdDrawing_2").css("transform", `rotate(${self.inputRotationRange}deg)`);
self.resetTzdDrawing();
}, 200);
setTimeout(() => {
......@@ -1458,8 +1429,7 @@ export default {
console.log("flipY: ", status.flipY);
console.log("angle: ", status.angle);
});
$(".tzdDrawing").css("transform", "rotateX(0)");
$(".tzdDrawing").css("transform", "rotateY(0)");
self.resetTzdDrawing();
// imageEditor.resetZoom()
let canvasImage = imageEditor._graphics.getCanvasImage();
imageEditor._graphics.setImageProperties(
......@@ -1471,6 +1441,7 @@ export default {
},
true
);
self.resetTzdDrawing();
console.log(canvasImage);
});
......@@ -1486,14 +1457,9 @@ export default {
self.startPlace -= 30;
self.isLeftRotate = true;
self.isRightRotate = false;
imageEditor.rotate(-30);
// imageEditor.rotate(-30);
self.rotateImage(-30, true);
self.historys.push("旋转");
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
$(".tzdDrawing").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
console.log(self.move_left);
console.log(self.move_top);
......@@ -1507,24 +1473,7 @@ export default {
// });
// Fcanvas.requestRenderAll();
// Fcanvas.getActiveObject().set('scale', -30).setCoords();
console.log($(".irregular"));
$(".irregular").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
// 小区域旋转
if (self.isTpdr_flag) {
......@@ -1539,32 +1488,11 @@ export default {
self.startPlace -= 30;
self.isLeftRotate = true;
self.isRightRotate = false;
imageEditor.rotate(-30);
// imageEditor.rotate(-30);
self.rotateImage(-30, true);
self.historys.push("旋转");
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
$(".tzdDrawing").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
$(".irregular").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
// 小区域旋转
if (self.isTpdr_flag) {
console.log(canvasImage.angle);
......@@ -1584,16 +1512,11 @@ export default {
self.startPlace += 30;
self.isLeftRotate = false;
self.isRightRotate = true;
imageEditor.rotate(+30).then((res) => {
console.log(res);
});
self.rotateImage(30, true);
self.historys.push("旋转");
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
$(".tzdDrawing").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
// 不规则图形的旋转
// Fcanvas.getObjects().map(function(o) {
......@@ -1607,23 +1530,6 @@ export default {
// backgroundColor: '#333'
// })
// Fcanvas.requestRenderAll();
$(".irregular").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
// 小区域旋转
if (self.isTpdr_flag) {
......@@ -1640,34 +1546,11 @@ export default {
self.startPlace += 30;
self.isLeftRotate = false;
self.isRightRotate = true;
imageEditor.rotate(+30).then((res) => {
console.log(res);
});
self.rotateImage(30, true);
self.historys.push("旋转");
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
$(".tzdDrawing").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
$(".irregular").css(
"transform",
`rotate(${canvasImage.angle}deg) translate(${self.move_left}px,${self.move_top}px) scale(${self.zoomLevel})`
);
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
self.rotate_after_left = self.move_left + canvasImage.left
self.rotate_after_top = self.move_top + canvasImage.top
......@@ -1685,9 +1568,7 @@ export default {
self.isHandTZD = false;
var changeAngle = function () {
// self.inputRotationRange = parseInt($inputRotationRange.val(), 10);
imageEditor.rotate(
self.inputRotationRange - self.startPlace
);
self.rotateImage(self.inputRotationRange);
// 小区域旋转
if (self.isTpdr_flag) {
console.warn(222222, self.inputRotationRange);
......@@ -1698,24 +1579,8 @@ export default {
);
}
// 特征点的图层也要跟着转
$(".tzdDrawing").css("transform", `rotate(${self.inputRotationRange}deg)`);
$(".irregular").css("transform", `rotate(${self.inputRotationRange}deg)`);
self.startPlace = self.inputRotationRange;
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
self.imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
};
$(document).on("mousemove", changeAngle);
$(document).on("mouseup", function stopChangingAngle () {
......@@ -1729,9 +1594,7 @@ export default {
// 进行了特征操作，记录一下
sessionStorage.setItem('isOption_' + self.seq, true)
self.judgeJumpRoute()
imageEditor.rotate(
parseInt(self.inputRotationRange - self.startPlace
))
self.rotateImage(self.inputRotationRange);
// 小区域旋转
if (self.isTpdr_flag) {
......@@ -1741,24 +1604,9 @@ export default {
`rotate(${self.inputRotationRange}deg)`
);
}
// 特征点的图层也要跟着转
$(".tzdDrawing").css("transform", `rotate(${self.inputRotationRange}deg)`);
self.startPlace = self.inputRotationRange;
self.historys.push("旋转");
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
self.imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
});
// 划线事件
......@@ -2023,8 +1871,7 @@ export default {
.then(function (sizeValue) {
console.log(sessionStorage.getItem(self.seq));
// 特征点图层恢复默认
$('.tzdDrawing').css('transform', 'rotate(0deg)')
$('.tzdDrawing_2').css('transform', 'rotate(0deg)')
self.resetTzdDrawing();
// 更新工具栏的优先级
setTimeout(() => {
$(".center").css('z-index', '99999')
......@@ -2312,21 +2159,19 @@ export default {
originX: 'left',
originY: 'top'
}, true)
self.changeTzdDrawing()
Fcanvas.absolutePan({
x: 0,
y: 0
});
// Fcanvas.absolutePan({
// x: 0,
// y: 0
// });
//计算缩放中心
let zoomPoint = new fabric_irregular.Point(
Fcanvas.width / 2,
Fcanvas.height / 2
);
//开始缩放
Fcanvas.zoomToPoint(zoomPoint, 1);
$(".tzdDrawing").css("transform", "rotate(0deg)")
$(".tzdDrawing2").css("transform", "rotate(0deg)")
$(".irregular").css("transform", "rotate(0deg)")
// Fcanvas.zoomToPoint(zoomPoint, 1);
$(".small-drawing-img").css("transform", "rotate(0deg)")
}).catch(err => {
......@@ -2366,7 +2211,10 @@ export default {
ins = new MouseGesture({ wise: true });
originPointer = {
x: e.clientX,
y: e.clientY
y: e.clientY,
left: self.imageEditor._graphics.getCanvasImage().left,
top: self.imageEditor._graphics.getCanvasImage().top,
};
// 开启拖拽
......@@ -2716,22 +2564,29 @@ export default {
// }, true)
// console.log("left:", originleft + ((x2 - x1) * self.newWidth) / 640);
// console.log("top:", origintop + ((y2 - y1) * self.newHeight) / 640);
let canvasImage = imageEditor._graphics.getCanvasImage();
// 移动图片
const offsetx = canvasImage.getCenterPoint().x - 320;
const offsety = canvasImage.getCenterPoint().y - 320;
const leftNew =
originPointer.left +
((x2 - x1) * self.newWidth) / self.canvasWidth / self.zoomLevel;
const topNew =
originPointer.top +
((y2 - y1) * self.newHeight) / self.canvasHeight / self.zoomLevel;
imageEditor._graphics.setImageProperties(
{
left:
originleft +
((x2 - x1) * self.newWidth) / self.canvasWidth / self.zoomLevel,
top:
origintop +
((y2 - y1) * self.newHeight) /
self.canvasHeight /
self.zoomLevel,
left: leftNew,
top: topNew,
originX: "left",
originY: "top"
originY: "top",
},
true
);
self.move_left =
originleft +
((x2 - x1) * self.newWidth) / self.canvasWidth / self.zoomLevel;
......@@ -2740,44 +2595,23 @@ export default {
((y2 - y1) * self.newHeight) / self.canvasHeight / self.zoomLevel;
// 平移
Fcanvas.absolutePan({
x: -(
originleft +
((x2 - x1) * self.newWidth) / self.canvasWidth / self.zoomLevel
),
y: -(
origintop +
((y2 - y1) * self.newHeight) / self.canvasHeight / self.zoomLevel
)
});
// Fcanvas.absolutePan({
// x: -(
// originleft +
// ((x2 - x1) * self.newWidth) / self.canvasWidth / self.zoomLevel
// ),
// y: -(
// origintop +
// ((y2 - y1) * self.newHeight) / self.canvasHeight / self.zoomLevel
// )
// });
// console.log(imageEditor._graphics.getImageProperties());
// console.log(imageEditor._graphics.getCanvasImage());
// $('.tzdDrawing').css('left', `${originleft + (x2 - x1)}px`)
// $('.tzdDrawing').css('top', `${origintop + (y2 - y1)}px`)
// $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
let canvasImage = imageEditor._graphics.getCanvasImage();
console.log(canvasImage);
// console.log(canvasImage.left);
$(".tzdDrawing").css(
"transform",
`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_yd) + (x2 - x1)}px,${Number(self.tzdDrawingTop_yd) + (y2 - y1)
}px) scale(${self.zoomLevel})`
);
self.changeTzdDrawing(true);
self.tzdDrawing_top = Number(self.tzdDrawingTop_yd) + (y2 - y1);
self.tzdDrawing_left = Number(self.tzdDrawingLeft_yd) + (x2 - x1);
// $('.tzdDrawing').css('transform', `translate(${(originleft + (x2 - x1))/16}rem,${(origintop + (y2 - y1))/16}rem) scale(${self.zoomLevel})`)
}
// console.log(self.mouseEnlarge);
if (self.mouseEnlarge) {
......@@ -2791,11 +2625,7 @@ export default {
if (e.clientY <= originPointer.y) {
if (self.zwType == '掌纹' && self.picType == 'dr') {
self.zoomLevel = self.zoomLevel + 0.01
imageEditor.zoom({
x: 0,
y: 0,
zoomLevel: self.zoomLevel
});
self.zoomImage(self.zoomLevel);
console.log(imageEditor._graphics.getCanvasImage());
$('#blc').css('transform-origin', `0 0`)
$('#blc').css('transform', `scale(${self.frame_max_bb * (self.zoomLevel)})`)
......@@ -2806,11 +2636,7 @@ export default {
}
console.log(self.newWidth);
console.log(self.newHeight);
imageEditor.zoom({
x: self.newWidth / 2,
y: self.newHeight / 2,
zoomLevel: self.zoomLevel
});
self.zoomImage(self.zoomLevel);
// Fcanvas.absolutePan({ x: self.newWidth / 2, y: self.newHeight / 2 })
......@@ -2820,7 +2646,7 @@ export default {
Fcanvas.height / 2
);
//开始缩放
Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
// Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
console.log(Fcanvas);
// $(".canvas-container").css('transform', `scale(${self.zoomLevel})`)
// Fcanvas.setZoom(self.zoomLevel);
......@@ -2834,55 +2660,14 @@ export default {
// 要计算canvas的在偏移角度的 坐标转换，用于 特征点图层 的translate transform-origin
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(canvasImage.left)}px,${Number(canvasImage.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`;
}
}
......@@ -2892,11 +2677,7 @@ export default {
// 缩小
if (self.zwType == '掌纹') {
self.zoomLevel = self.zoomLevel - 0.01
imageEditor.zoom({
x: 0,
y: 0,
zoomLevel: self.zoomLevel
});
self.zoomImage(self.zoomLevel)
$('#blc').css('transform-origin', `0 0`)
$('#blc').css('transform', `scale(${self.frame_max_bb * (self.zoomLevel)})`)
} else {
......@@ -2904,11 +2685,7 @@ export default {
if (self.zoomLevel <= 1) {
self.zoomLevel = 1;
}
imageEditor.zoom({
x: self.newWidth / 2,
y: self.newHeight / 2,
zoomLevel: self.zoomLevel
});
self.zoomImage(self.zoomLevel );
// 平移
// Fcanvas.absolutePan({ x: self.newWidth / 2, y: self.newHeight / 2 })
......@@ -2919,7 +2696,7 @@ export default {
Fcanvas.height / 2
);
//开始缩放
Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
// Fcanvas.zoomToPoint(zoomPoint, self.zoomLevel);
// $(".canvas-container").css('transform', `scale(${self.zoomLevel})`)
// Fcanvas.setZoom(self.zoomLevel);
......@@ -2965,27 +2742,6 @@ export default {
);
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", `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`);
$(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(canvasImage.left)}px,${Number(canvasImage.top)}px)`);
// $(".tzdDrawing_2").css("transform", `scale(${self.zoomLevel}) translate(${Number(canvasImage.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")
// })
}
}
......@@ -3125,7 +2881,6 @@ export default {
self.tzdDrawingLeft = canvasImage.left
self.tzdDrawingTop = canvasImage.top
// console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(','));
console.log($('.tzdDrawing').css("transform"));
// console.log(cssTransform(document.querySelector('.tzdDrawing'), 'translate'));
......@@ -3264,6 +3019,32 @@ export default {
e.stopPropagation()
return false;
});
let tempLine=null;
function changeTempLine(p){
const tempPs=Fcanvasline1.concat(p);
Fcanvas.remove(tempLine);
tempLine = new fabric.Polyline(tempPs, {
fill: "rgba(0,0,0,0)",
strokeWidth: 4,
stroke: "red",
objectCaching: false,
transparentCorners: false,
cornerColor: "rgba(0,0,0,0)",
});
Fcanvas.add(tempLine);
}
function resetTempLine(){
Fcanvas.remove(tempLine);
tempLine=null;
Fcanvasline1 = [];
}
$(".canvas-container").mousemove(function (e) {
// 判断是否正在画线
// 生成临时线并展示
if (self.iszyhz && self.isZyhzFlag) {
changeTempLine({x: e.offsetX,y: e.offsetY})
}
})
$(".canvas-container").mousedown(function (e) {
e.stopPropagation()
......@@ -3343,7 +3124,7 @@ export default {
Fcanvasarr.push(Fcanvasline1);
console.log(Fcanvasarr);
self.Fcanvasarr = Fcanvasarr || [];
Fcanvasline1 = [];
resetTempLine();
// 更新vuex数据--自由绘制
self.$store.commit("zwbj/setZyhz", self.Fcanvasarr);
sessionStorage.setItem('zyhz_' + self.seq, JSON.stringify(self.Fcanvasarr))
......@@ -4442,12 +4223,13 @@ export default {
// 记住缩放比例
self.zoomLevel = self.frame_max_bb
this.imageEditor.zoom({
y: 0,
x: 0,
// this.imageEditor.zoom({
// y: 0,
// x: 0,
// // zoomLevel: self.frame_max_bb
// zoomLevel: self.frame_max_bb
zoomLevel: self.frame_max_bb
});
// });
this.zoomImage(self.zoomLevel)
// 掌纹框的最大宽度范围
self.maxLength = this.canvasHeight
......@@ -4888,17 +4670,61 @@ export default {
self.newHeight)
console.log("不加x:", ((e.clientX - self.x) / Number($(".small-drawing").width()) * self.newHeight));
console.log("加x:", ((e.clientX - self.x - self.crop_left) / Number($(".small-drawing").width()) * self.newHeight));
// self.imageEditor._graphics.setImageProperties(
// {
// left: -x,
// top: -y,
// originX: "left",
// originY: "top"
// },
// true
// );
// LMM↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// 获取鹰眼图框中心点
const [yyCenterX, yyCenterY] = [
$(".preview-source").width() / 2,
$(".preview-source").height() / 2,
];
// 获取小蓝框的中心点
const [xlCenterX, xlCenterY] = [
$("#block_small").width() / 2 +
$("#block_small").position().left,
$("#block_small").height() / 2 +
$("#block_small").position().top,
];
// 当前中心点偏移量
const [smallOffsetX, smallOffsetY] = [
xlCenterX - yyCenterX,
xlCenterY - yyCenterY,
];
const [canvasOffsetX, canvasOffsetY] = [
(smallOffsetX / $(".preview-source").width()) *
canvasImage.width,
(smallOffsetY / $(".preview-source").height()) *
canvasImage.height,
];
// 计算图片原来的偏移量得到不偏移情况的left top 值
const centerP = canvasImage.getCenterPoint();
const [oldCanvasOffsetX, oldCanvasOffsetY] = [
centerP.x - canvasImage.width / 2,
centerP.y - canvasImage.height / 2,
];
const [canvasleft, canvastop] = [
canvasImage.left - canvasOffsetX - oldCanvasOffsetX,
canvasImage.top - canvasOffsetY - oldCanvasOffsetY,
];
self.imageEditor._graphics.setImageProperties(
{
left: -x,
top: -y,
// left: self.rotate_after_left-xx,
// top: self.rotate_after_top-yy,
left: canvasleft,
top: canvastop,
originX: "left",
originY: "top"
originY: "top",
},
true
);
self.changeTzdDrawing(true, true);
// LMM↑↑↑↑↑↑↑↑↑↑↑↑
// let canvasImage = self.imageEditor._graphics.getCanvasImage();
self.move_left = canvasImage.left;
......@@ -5134,8 +4960,7 @@ export default {
});
this.zoomLevel = 1.2;
this.xsType = "shizhong";
$(".tzdDrawing").css("transform", "scale(1.2)");
$(".tzdDrawing_2").css("transform", "scale(1.2)");
this.changeTzdDrawing()
if (!type) {
// isActive
this.isActive = true;
......@@ -5157,11 +4982,11 @@ export default {
this.isHandTZD = false;
this.issize = true;
this.ismoderate = false;
this.imageEditor.resetZoom();
this.zoomLevel = 1;
// 特征点图层缩放设置为1
$(".tzdDrawing").css("transform", "scale(1)");
$(".tzdDrawing_2").css("transform", "scale(1)");
this.resetImage();
this.xsType = "yuantu";
if (!type) {
// isActive
......@@ -7170,14 +6995,97 @@ export default {
*/
onchangePreview () {
if (this.isSLT) {
let self = this;
this.isShowSourcePrivew = !this.isShowSourcePrivew;
if (this.isShowSourcePrivew) {
// 转换canvas为base64图片贴到缩略图中
setTimeout(() => {
let dataURL = this.imageEditor.toDataURL();
let dataURL = "data:image/jpeg;base64," + self.sourceImage;
console.log(dataURL);
this.previewSource = dataURL;
// 缩略图样式和尺寸
self.changeTzdDrawing()
}, 200);
function dragable(id) {
var d = document,
o = d.getElementById(id),
s = o.style,
x,
y,
p = "onmousemove";
self.dragableDiv = o
o.onmousedown = function (e) {
e = e || event;
x = e.clientX - o.offsetLeft;
y = e.clientY - o.offsetTop;
self.x = x;
self.y = y;
o[p] = function(e) {
e = e || event;
s.left = e.clientX - self.x + "px";
s.top = e.clientY - self.y + "px";
// 存下小指纹框当前的位置
// self.small_x = e.clientX - self.x;
// self.small_y = e.clientY - self.y;
// LMM↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
// 获取鹰眼图框中心点
const [yyCenterX, yyCenterY] = [
$(".preview-source").width() / 2,
$(".preview-source").height() / 2,
];
// 获取小蓝框的中心点
const [xlCenterX, xlCenterY] = [
$("#block_small").width() / 2 +
$("#block_small").position().left,
$("#block_small").height() / 2 +
$("#block_small").position().top,
];
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// 当前中心点偏移量
const [smallOffsetX, smallOffsetY] = [
xlCenterX - yyCenterX,
xlCenterY - yyCenterY,
];
const [canvasOffsetX, canvasOffsetY] = [
(smallOffsetX / $(".preview-source").width()) *
canvasImage.width,
(smallOffsetY / $(".preview-source").height()) *
canvasImage.height,
];
// 计算图片原来的偏移量得到不偏移情况的left top 值
const centerP = canvasImage.getCenterPoint();
const [oldCanvasOffsetX, oldCanvasOffsetY] = [
centerP.x - canvasImage.width / 2,
centerP.y - canvasImage.height / 2,
];
const [canvasleft, canvastop] = [
canvasImage.left - canvasOffsetX - oldCanvasOffsetX,
canvasImage.top - canvasOffsetY - oldCanvasOffsetY,
];
self.imageEditor._graphics.setImageProperties(
{
left: canvasleft,
top: canvastop,
originX: "left",
originY: "top",
},
true
);
self.changeTzdDrawing(true, true);
// LMM↑↑↑↑↑↑↑↑↑↑↑↑
};
o.onmouseup = function(e) {
if (e.which === 1) {
o[p] = null;
}
};
};
}
dragable("block_small");
}
}
},
......@@ -7434,8 +7342,178 @@ export default {
tj_lr_finger = lr_finger.join(",");
console.log(tj_lr_finger);
sessionStorage.setItem('fingerPosition_' + this.seq, JSON.stringify(tj_lr_finger))
},
/**
* 对特征点图层进行更新
*/
changeTzdDrawing(isPingyi, isNotRefreshSourcePrivew) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
// 当前图像中心点
var centerP = canvasImage.getCenterPoint();
const zoom = this.imageEditor.getZoom(),
angle = canvasImage.flipX ? -canvasImage.angle : canvasImage.angle,
rotateX = canvasImage.flipY ? 180 : 0,
rotateY = canvasImage.flipX ? 180 : 0,
offsetX = centerP.x - canvasImage.width / 2,
offsetY = centerP.y - canvasImage.height / 2;
if (isPingyi) {
this.handDataX =
(offsetX / canvasImage.width) * zoom * $(".tzdDrawing").width(); // this.canvasWidth;
this.handDataY =
(offsetY / canvasImage.height) * zoom * $(".tzdDrawing").height(); // this.canvasHeight;
}
$(".tzdDrawing").css(
"transform",
`translate(${Number(this.handDataX)}px,${Number(this.handDataY)}px)
rotateY(${rotateY}deg) rotate(${angle}deg) rotateX(${rotateX}deg) scale(${zoom})`
);
$(".irregular").css( "transform",
`translate(${Number(this.handDataX)}px,${Number(this.handDataY)}px)
rotateY(${rotateY}deg) rotate(${angle}deg) rotateX(${rotateX}deg) scale(${zoom})`
);
$(".tzdDrawing_2").css(
"transform",
`translate(${Number(this.handDataX)}px,${Number(
this.handDataY
)}px) scale(${zoom})`
);
// 缩略图
// if (this.isShowSourcePrivew) {
if (this.isShowSourcePrivew && !isNotRefreshSourcePrivew) {
// 底图变换
$("#preview-source-img").css(
"transform",
`rotateY(${rotateY}deg) rotate(${angle}deg) rotateX(${rotateX}deg)`
);
const [xlWidth, xlHeight] = [
$(".preview-source").width() / zoom,
$(".preview-source").height() / zoom,
];
// 更改小蓝框大小
$(".block_small").css("width", `${xlWidth}px`);
$(".block_small").css("height", `${xlHeight}px`);
// 更改小蓝框位置
const [xlTop, xlLeft] = [
// $(".preview-source").height() / 2 - xlHeight / 2 -
$(".preview-source").height() / 2 -
$(".block_small").height() / 2 -
(offsetY / canvasImage.height) * $(".preview-source").height(),
// $(".preview-source").width() / 2 - xlWidth / 2 -
$(".preview-source").width() / 2 -
$(".block_small").width() / 2 -
(offsetX / canvasImage.width) * $(".preview-source").width(),
];
$(".block_small").css("left", `${xlLeft}px`);
$(".block_small").css("top", `${xlTop}px`);
}
if (this.isTpdr_flag) {
$(".small-drawing-img").css("transform", `rotateY(${rotateY}deg) rotate(${angle}deg) rotateX(${rotateX}deg)`);
}
},
/**
* 图形归正
*/
resetTzdDrawing() {
this.handDataX = 0;
this.handDataY = 0;
this.zoomLevel = 1;
this.changeTzdDrawing();
},
/**
* 重置imageEditor和tzddrawing
*/
resetImage(){
const self=this;
// self.imageEditor.setAngle(0);
this.imageEditor.rotate(-this.imageEditor._graphics.getCanvasImage().angle)
self.imageEditor.resetFlip()
this.zoomImage(1)
},
// 旋转图片
rotateImage(deg, isAdd) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
let centerP = canvasImage.getCenterPoint();
// 判断是否移动过
const ishanded =
Math.abs(centerP.x - canvasImage.width / 2) > 0.1 ||
Math.abs(centerP.y - canvasImage.height / 2) > 0.1;
if (!isAdd) {
const angle = this.imageEditor._graphics.getCanvasImage().angle;
deg -= angle;
}
this.imageEditor.rotate(deg).then(
((status) => {
if (ishanded) {
const topNew = this.imageEditor._graphics.getCanvasImage().top;
const leftNew = this.imageEditor._graphics.getCanvasImage().left;
let centerPNew = canvasImage.getCenterPoint();
// 计算位移
const offsetx = centerP.x - centerPNew.x,
offsety = centerP.y - centerPNew.y;
this.imageEditor._graphics.setImageProperties(
{
top: topNew + offsety,
left: leftNew + offsetx,
},
true
);
}
this.changeTzdDrawing();
}).bind(this)
);
},
// 缩放图片
zoomImage(zoom) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
let centerP = canvasImage.getCenterPoint();
// 判断是否移动过
// 计算位移
const zoomold = this.imageEditor.getZoom();
// 记录偏移量,回到原点,缩放,移回去
// 移到原点
let offsetX = centerP.x - canvasImage.width / 2,
offsetY = centerP.y - canvasImage.height / 2,
left = canvasImage.left,
top = canvasImage.top;
this.imageEditor._graphics.setImageProperties(
{
top: top - offsetY,
left: left - offsetX,
},
true
);
this.changeTzdDrawing(true);
// 缩放
this.imageEditor.zoom({
x: canvasImage.width / 2,
y: canvasImage.height / 2,
zoomLevel: zoom,
});
// 移回去
this.imageEditor._graphics.setImageProperties(
{
top: this.imageEditor._graphics.getCanvasImage().top + offsetY,
left: this.imageEditor._graphics.getCanvasImage().left + offsetX,
},
true
);
// setTimeout(() => {
this.changeTzdDrawing(true);
// }, 2000);
},
},
watch: {
// 监听特征点的数量
tzdnumber: {
......@@ -7517,27 +7595,13 @@ export default {
let self = this;
let deg = newValue - this.startPlace;
if (!deg) deg = 0;
this.imageEditor.rotate(deg);
this.rotateImage(newValue)
this.startPlace = newValue;
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// 每次旋转时，位置都会改变，需要重新定位
if (self.move_left && self.move_top) {
self.imageEditor._graphics.setImageProperties(
{
left: self.move_left + canvasImage.left,
top: self.move_top + canvasImage.top,
originX: "left",
originY: "top"
},
true
);
}
if (self.isTpdr_flag) {
$(".small-drawing-img").css("transform", `rotate(${newValue}deg)`);
}
// 特征点的图层也要跟着转
$(".tzdDrawing").css("transform", `rotate(${newValue}deg)`);
$(".irregular").css("transform", `rotate(${newValue}deg)`);
},
inputRemoveWhiteRange (newValue, oldValue) {
this.imageEditor
......
src/views/zljc/Index.vue
......@@ -177,7 +177,23 @@
:width="width1"
>
<template slot="header">
<span class="sx">时限</span> <span class="djsLine"></span> <span class="cs">超时</span>
<span class="sx">时限</span> <span class="djsLine"></span> <span class="cs">超时</span><span
class='px'
@click="px"
><i class="el-icon-d-caret"></i></span>
</template>
<template slot-scope="scope">
<div
class='djsType0'
v-if="scope.row.type==0"
>{{ scope.row.djs | daojishi }}</div>
<div
class='djsType1'
v-else-if="scope.row.type==1"
>{{scope.row.djs | daojishi }}</div>
<div v-else>
<p>---</p>
</div>
</template>
</el-table-column>
<el-table-column
......@@ -204,11 +220,19 @@
width="auto"
>
<template slot-scope="scope">
<div v-if="scope.row.inspectionFlag==2"><span class='cg'>/</span></div>
<div v-if="scope.row.inspectionFlag==2">
<div class='czBtn cg'>/</div>
</div>
<div
v-else
@click="goShenHe(scope.row)"
><span class="iconfont icon-shenhe1"></span></div>
>
<div class='czBtn shBtn'>
检查
</div>
<!-- <span class="iconfont icon-shenhe1">
</span> -->
</div>
</template>
</el-table-column>
</el-table>
......@@ -256,7 +280,7 @@ export default {
width4: 120,
width1: 220,
width2: 160,
width3: 90,
width3: 110,
height: 550,
tableDate: [],
// 当前页数
......@@ -297,23 +321,53 @@ export default {
.post("/api/zljc/queryAll", reqParam)
.then((response) => {
if (response.data.code === 0) {
// console.log(response.data.ret)
this.tableDate = response.data.ret.rows;
this.total = response.data.ret.total;
console.info("查询结果===>", this.tableDate);
console.log("查询结果===>", this.tableDate);
// 给每一列生成一个时间戳
this.tableDate.forEach(el => {
// el.djs = Date.now();//模拟后端发的时间戳
this.daojishi(el);//调用定时器
})
console.log("查询结果===>", this.tableDate);
// this.userInfo = this.getUserInfo(this.tableDate);
} else {
this.$message.error(response.data.message);
}
});
},
// 时限排序
px () {
this.formInline.type == 0 ? this.formInline.type = 1 : this.formInline.type = 0
this.search()
},
// 倒计时定时器
daojishi (row) {
clearInterval(row.countDown)
row.countDown = setInterval(() => {
if (row.type == 1) {
row.djs = row.djs - 1000;
} else if (row.type == 0) {
row.djs = Number(row.djs) + 1000;
}
}, 1000);
},
// 清除所有定时器
clearAll (list) {
list.forEach(el => {
clearInterval(el.countDown)
})
},
clear () {
this.formInline = {
barcode: '', // 条码号
inspectionFlag: null, // 检查结果选择
codeDwCode: '', // 捺印单位
nysj: null,// 捺印时间
type: 1,// 1 升序 0 降序
type: 0,// 1 升序 0 降序
}
this.search()
},
......@@ -435,6 +489,35 @@ export default {
mounted () {
this.search();
},
filters: {
daojishi: function (mistiming) {
//也可以传截止的具体时间，改一下参数
// var newtime = new Date() //获取当前时间
// var storptime = new Date(storptimes) //获取截止时间
// var mistiming = storptime.getTime() - newtime.getTime() // 获取截止时间距离现在的毫秒差
if (mistiming > 0) {
var days = Math.floor(mistiming / 1000 / 60 / 60 / 24); //获取天数
var hours = Math.floor(mistiming / 1000 / 60 / 60 % 24); // 获取小时
var minutes = Math.floor(mistiming / 1000 / 60 % 60); //获取分钟数
var seconds = Math.floor(mistiming / 1000 % 60); //获取秒数
// 判断天、时、分、秒是不是两位数，如果是直接输出，如果不是在前边加个0;
days < 10 ? days = "0" + days : days;
hours < 10 ? hours = "0" + hours : hours;
minutes < 10 ? minutes = "0" + minutes : minutes;
seconds < 10 ? seconds = "0" + seconds : seconds;
// 第一种连接方法
// var rels = days + "天" + hours + "时" + minutes + "分" + seconds + "秒";
// 第二种连接方法
var rels = `${days}天${hours}时${minutes}分${seconds}秒`
}
// 判断时间差是不是正数，就是截止时间是不是比现在的时间晚
var mis = mistiming > 0 ? rels : "已超时"
return mis
}
},
computed: {
/**
* @description: 计算总页数
......@@ -454,6 +537,34 @@ export default {
// table表的高度
$tableHeight: var(--tableHeight, 550px);
.czBtn {
width: 72px;
height: 28px;
border-radius: 4px;
line-height: 28px;
text-align: center;
font-size: 14px;
font-family: MicrosoftYaHei;
}
.shBtn {
border: 1px solid #fe0000;
color: #fe0000;
}
.cg {
color: #00b47a;
}
.djsType0 {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #e60012;
}
.djsType1 {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #009f6c;
}
.sx {
font-size: 14px;
font-family: MicrosoftYaHei;
......@@ -473,10 +584,9 @@ $tableHeight: var(--tableHeight, 550px);
color: #e60012;
margin-left: 10px;
}
.cg {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #00b47a;
.px {
margin-left: 10px;
color: #b1b6c2;
}
.jcjgSpan {
display: inline-block;
......@@ -599,10 +709,22 @@ $tableHeight: var(--tableHeight, 550px);
height: 32px;
background: #055fe7;
border-radius: 4px;
color: #fff;
}
}
}
/deep/.el-table tr {
height: 55px;
}
/deep/.el-table th > .cell {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: normal;
color: #282f3c;
}
/deep/.el-table td > .cell {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
</style>
\ No newline at end of file
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