Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
常超
founder_vue
Commits
335e6c24
Commit
335e6c24
authored
Dec 13, 2021
by
张超军
Browse files
Options
Browse Files
Download
Plain Diff
冲突
parents
3535fc12
f4c2826a
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
592 additions
and
395 deletions
+592
-395
src/App.vue
+3
-3
src/views/Editor/modules/ajzwbjLeft.vue
+1
-1
src/views/Editor/modules/imageEdAJ.scss
+16
-6
src/views/Editor/modules/imageEdAJ.vue
+439
-375
src/views/zljc/Index.vue
+133
-10
No files found.
src/App.vue
View file @
335e6c24
...
...
@@ -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
View file @
335e6c24
<!--
* @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
View file @
335e6c24
...
...
@@ -1230,17 +1230,27 @@ $canvasWidth: var(--canvasWidth, 670px);
}
.preview-source {
z-index: 9999;
z-index: 9999
9
;
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
View file @
335e6c24
<!--
* @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
);
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
}
)`
);
// imageEditor.rotate(-30);
self
.
rotateImage
(
-
30
,
true
);
self
.
historys
.
push
(
"旋转"
);
console
.
log
(
self
.
move_left
);
console
.
log
(
self
.
move_top
);
...
...
@@ -1506,25 +1472,8 @@ export default {
// // o.set('rotate', -30).setCoords();
// });
// 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
);
}
// Fcanvas.getActiveObject().set('scale', -30).setCoords();
// 小区域旋转
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
);
}
console
.
log
(
canvasImage
);
// 小区域旋转
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) {
...
...
@@ -1606,24 +1529,7 @@ export default {
// Fcanvas.set({
// 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
);
}
// Fcanvas.requestRenderAll();
// 小区域旋转
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
);
...
...
@@ -1697,25 +1578,9 @@ export default {
}
deg)`
);
}
// 特征点的图层也要跟着转
$
(
".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
);
}
self
.
startPlace
=
self
.
inputRotationRange
;
};
$
(
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
)
{
...
...
@@ -1740,25 +1603,10 @@ export default {
"transform"
,
`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
);
}
self
.
historys
.
push
(
"旋转"
);
});
// 划线事件
...
...
@@ -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,21 +2564,28 @@ export default {
// }, true)
// console.log("left:", originleft + ((x2 - x1) * self.newWidth) / 640);
// console.log("top:", origintop + ((y2 - y1) * self.newHeight) / 640);
imageEditor
.
_graphics
.
setImageProperties
(
{
left
:
originleft
+
((
x2
-
x1
)
*
self
.
newWidth
)
/
self
.
canvasWidth
/
self
.
zoomLevel
,
top
:
origintop
+
((
y2
-
y1
)
*
self
.
newHeight
)
/
self
.
canvasHeight
/
self
.
zoomLevel
,
originX
:
"left"
,
originY
:
"top"
},
true
);
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
:
leftNew
,
top
:
topNew
,
originX
:
"left"
,
originY
:
"top"
,
},
true
);
self
.
move_left
=
originleft
+
...
...
@@ -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
)
{
...
...
@@ -2790,12 +2624,8 @@ 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
.
zoomLevel
=
self
.
zoomLevel
+
0.01
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
)}
)`
)
...
...
@@ -2805,12 +2635,8 @@ export default {
self
.
zoomLevel
=
2
;
}
console
.
log
(
self
.
newWidth
);
console
.
log
(
self
.
newHeight
);
imageEditor
.
zoom
({
x
:
self
.
newWidth
/
2
,
y
:
self
.
newHeight
/
2
,
zoomLevel
:
self
.
zoomLevel
});
console
.
log
(
self
.
newHeight
);
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);
...
...
@@ -2833,57 +2659,16 @@ export default {
console
.
log
(
canvasImage
);
// 要计算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
};
if
(
canvasImage
.
angle
)
{
// 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);
...
...
@@ -2964,29 +2741,8 @@ export default {
-
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"
,
`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")
// })
}
}
}
}
...
...
@@ -3124,8 +2880,7 @@ export default {
}
self
.
tzdDrawingLeft
=
canvasImage
.
left
self
.
tzdDrawingTop
=
canvasImage
.
top
// console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(','));
self
.
tzdDrawingTop
=
canvasImage
.
top
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
()
...
...
@@ -3322,7 +3103,7 @@ export default {
});
}
// 鼠标右击
if
(
e
.
which
===
3
)
{
if
(
e
.
which
===
3
)
{
console
.
log
(
Fcanvasline1
);
var
polygon
=
new
fabric
.
Polygon
(
Fcanvasline1
,
{
// left: 100,
...
...
@@ -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
,
// zoomLevel: self.frame_max_bb
zoomLevel
:
self
.
frame_max_bb
});
// this.imageEditor.zoom({
// y: 0,
// x: 0,
// // 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,7 +7342,177 @@ 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
:
{
// 监听特征点的数量
...
...
@@ -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
View file @
335e6c24
...
...
@@ -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
:
9
0
,
width3
:
11
0
,
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment