Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
platform
/
fanxing_new
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit af680df9
authored
May 20, 2021
by
潘建波
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
提交博关算法配置
1 parent
633f7a4d
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
341 additions
and
814 deletions
public/js/version.json
src/views/sceneManage/setting/areaconfig/Behavior.vue
src/views/sceneManage/setting/areaconfig/Behavior的副本.vue
public/js/version.json
View file @
af680df
{
"commit"
:
"598ed26024f20cfd49562e83ccb936a54f0607cc"
,
"commitDate"
:
"2021-5-15 17:8"
,
"buildDate"
:
"2021-5-18 17:25"
,
"version"
:
"2.1.0"
,
"info"
:
"bg区域绘制提交"
}
\ No newline at end of file
\ No newline at end of file
{
"commit"
:
"633f7a4d90b06cfc5d2a4809638b6778756ea0f5"
,
"commitDate"
:
"2021-5-20 11:5"
,
"buildDate"
:
"2021-5-20 16:29"
,
"version"
:
"2.1.0"
,
"info"
:
"tijioa"
}
\ No newline at end of file
\ No newline at end of file
src/views/sceneManage/setting/areaconfig/Behavior.vue
View file @
af680df
...
@@ -4,10 +4,10 @@
...
@@ -4,10 +4,10 @@
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<img
src=
"./img/line.png"
alt
/>
<img
src=
"./img/line.png"
alt
/>
</div>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
line
'}" @click="changetool('rect')">
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
rect
'}" @click="changetool('rect')">
<img
src=
"./img/rect.png"
alt
/>
<img
src=
"./img/rect.png"
alt
/>
</div>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
line
' }" @click="changetool('polygon')">
<div
:class=
"
{'tool-t':true,'toolactive':curtool == '
polygon
' }" @click="changetool('polygon')">
<img
src=
"./img/dbx.png"
alt
/>
<img
src=
"./img/dbx.png"
alt
/>
</div>
</div>
</div>
</div>
...
@@ -68,6 +68,8 @@
...
@@ -68,6 +68,8 @@
<el-input
v-model=
"citem.config[key]"
></el-input>
<el-input
v-model=
"citem.config[key]"
></el-input>
</span>
</span>
</div>
</div>
<div
style=
"color;#ccc;font-size:12px;margin-top:10px"
v-show=
"showdirection"
>
方向:1进入区域,2出去区域,3双向警告
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -76,7 +78,6 @@
...
@@ -76,7 +78,6 @@
<div>
<div>
<el-input
v-model=
"pushurl"
placeholder=
"推送地址"
width=
"100"
></el-input>
<el-input
v-model=
"pushurl"
placeholder=
"推送地址"
width=
"100"
></el-input>
</div>
</div>
<div
style=
"color;#ccc"
>
方向:1进入区域,2出去区域,3双向警告
</div>
<div><el-button
size=
"mini"
@
click=
"clearcanvas"
>
清空
</el-button></div>
<div><el-button
size=
"mini"
@
click=
"clearcanvas"
>
清空
</el-button></div>
</div>
</div>
</div>
</div>
...
@@ -112,10 +113,11 @@ export default {
...
@@ -112,10 +113,11 @@ export default {
groupList
:
[],
groupList
:
[],
curAlgoType
:
"xsdsfd"
,
curAlgoType
:
"xsdsfd"
,
basconfig
:
[],
basconfig
:
[],
curtool
:
"
line
"
,
curtool
:
""
,
baselist
:
{},
baselist
:
{},
cindex
:
0
,
cindex
:
0
,
citem
:
{
config
:
null
},
citem
:
{
config
:
null
},
showdirection
:
false
,
curuuid
:
null
,
curuuid
:
null
,
pushurl
:
""
,
pushurl
:
""
,
canvasObject
:
null
,
canvasObject
:
null
,
...
@@ -152,13 +154,14 @@ export default {
...
@@ -152,13 +154,14 @@ export default {
if
(
type
==
"polygon"
)
{
if
(
type
==
"polygon"
)
{
this
.
drawPolygon
();
this
.
drawPolygon
();
}
}
this
.
curtool
=
type
;
drawType
=
type
;
drawType
=
type
;
},
},
/**
/**
* 初始化区域
* 初始化区域
*/
*/
configInit
(
roiXml
,
confxml
)
{
configInit
(
roiXml
,
confxml
)
{
debugger
;
this
.
curtool
=
""
;
var
picuri
=
new
Date
().
getTime
();
var
picuri
=
new
Date
().
getTime
();
try
{
try
{
document
document
...
@@ -186,63 +189,40 @@ export default {
...
@@ -186,63 +189,40 @@ export default {
drawType
=
"rect"
;
drawType
=
"rect"
;
let
points
=
ele
.
point
;
let
points
=
ele
.
point
;
this
.
initRect
(
points
);
this
.
initRect
(
points
);
this
.
drawing
(
"init"
);
}
else
if
(
ele
.
polygon_type
==
"line"
)
{
}
else
if
(
ele
.
polygon_type
==
"line"
)
{
let
points
=
ele
.
point
;
let
points
=
ele
.
point
;
drawType
=
ele
.
polygon_type
;
drawType
=
ele
.
polygon_type
;
this
.
intline
(
points
)
this
.
intline
(
points
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
else
if
(
ele
.
polygon_type
==
"polygon"
)
{
}
else
if
(
ele
.
polygon_type
==
"polygon"
)
{
drawType
=
ele
.
polygon_type
;
drawType
=
ele
.
polygon_type
;
let
points
=
ele
.
point
;
let
points
=
ele
.
point
;
this
.
intPolygon
(
points
)
this
.
intPolygon
(
points
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
}
this
.
drawing
(
"init"
,
key
);
drawingObject
.
id
=
this
.
uuid
();
klassarr
.
push
(
drawingObject
);
});
});
}
else
{
}
else
{
if
(
polygon
.
polygon_type
==
"rect"
)
{
if
(
polygon
.
polygon_type
==
"rect"
)
{
drawType
=
"rect"
;
drawType
=
"rect"
;
this
.
initRect
(
polygon
.
point
);
this
.
initRect
(
polygon
.
point
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
else
if
(
polygon
.
polygon_type
==
"line"
)
{
}
else
if
(
polygon
.
polygon_type
==
"line"
)
{
drawType
=
polygon
.
polygon_type
;
drawType
=
polygon
.
polygon_type
;
this
.
intline
(
polygon
.
point
);
this
.
intline
(
polygon
.
point
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
//
}
else
if
(
polygon
.
polygon_type
==
"polygon"
)
{
}
else
if
(
polygon
.
polygon_type
==
"polygon"
)
{
drawType
=
"polygon"
;
drawType
=
"polygon"
;
let
points
=
polygon
.
point
;
let
points
=
polygon
.
point
;
this
.
intPolygon
(
points
);
this
.
intPolygon
(
points
);
this
.
drawing
(
"init"
);
// drawingObject.id = this.uuid();
// klassarr.push(drawingObject);
}
}
this
.
drawing
(
"init"
,
key
);
drawingObject
.
id
=
this
.
uuid
();
klassarr
.
push
(
drawingObject
);
}
}
drawingObject
.
id
=
this
.
uuid
();
drawingObject
.
key
=
key
;
klassarr
.
push
(
drawingObject
);
roiobj
[
key
].
rois
=
klassarr
;
}
}
}
}
// if (this.basconfig.length > 0) {
this
.
klassarr
=
klassarr
;
// if (this.basconfig[0].roi) {
this
.
seltype
(
this
.
basconfig
[
0
],
"0"
);
// this.basconfig[0].roi.map(ele => {
// this.fabricObjInit(ele);
// this.setAreaconfig();
// });
// }
// }
this
.
klassarr
=
klassarr
;
},
},
initRect
(
points
)
{
initRect
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
...
@@ -258,7 +238,11 @@ export default {
...
@@ -258,7 +238,11 @@ export default {
clearcanvas
(){
clearcanvas
(){
this
.
canvas
.
clear
();
this
.
canvas
.
clear
();
this
.
setAreaconfig
();
this
.
setAreaconfig
();
this
.
basconfig
[
this
.
cindex
].
roi
=
null
this
.
klassarr
.
map
((
ele
,
i
)
=>
{
if
(
ele
.
key
===
this
.
citem
.
config
[
"算法ID"
])
{
this
.
klassarr
.
splice
(
i
,
1
);
}
});
},
},
intPolygon
(
points
)
{
intPolygon
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
...
@@ -282,14 +266,13 @@ export default {
...
@@ -282,14 +266,13 @@ export default {
}
}
if
(
data
.
xml
!==
undefined
&&
data
.
xml
.
indexOf
(
'undefined'
)
<
0
)
{
if
(
data
.
xml
!==
undefined
&&
data
.
xml
.
indexOf
(
'undefined'
)
<
0
)
{
this
.
basconfig
=
Object
.
assign
(
this
.
basconfig
=
Object
.
assign
(
this
.
oParse
.
parseXML
(
data
.
xml
),
this
.
oParse
.
parseXML
(
xml
),
this
.
oParse
.
parseXML
(
xml
)
this
.
oParse
.
parseXML
(
data
.
xml
)
);
);
}
else
{
}
else
{
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
}
}
this
.
initConfig
(
this
.
basconfig
);
this
.
initConfig
(
this
.
basconfig
);
console
.
log
(
"config"
,
data
);
},
},
getObjects
(
klass
)
{
getObjects
(
klass
)
{
//获取所有的列表对象
//获取所有的列表对象
...
@@ -301,7 +284,6 @@ export default {
...
@@ -301,7 +284,6 @@ export default {
},
},
//设置活动对象
//设置活动对象
changeKlass
(
klass
)
{
changeKlass
(
klass
)
{
console
.
log
(
klass
)
this
.
curklass
=
klass
;
this
.
curklass
=
klass
;
this
.
canvas
.
setActiveObject
(
klass
);
this
.
canvas
.
setActiveObject
(
klass
);
this
.
canvas
.
requestRenderAll
();
this
.
canvas
.
requestRenderAll
();
...
@@ -320,7 +302,6 @@ export default {
...
@@ -320,7 +302,6 @@ export default {
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
confdata
.
roi
=
group
;
confdata
.
roi
=
group
;
this
.
canvas
.
clear
();
this
.
canvas
.
clear
();
console
.
log
(
this
.
basconfig
);
},
},
/**
/**
* 回显对象
* 回显对象
...
@@ -335,6 +316,7 @@ export default {
...
@@ -335,6 +316,7 @@ export default {
this
.
curuuid
=
klass
.
id
;
this
.
curuuid
=
klass
.
id
;
this
.
curklass
=
klass
;
this
.
curklass
=
klass
;
},
},
/**
/**
* 解构算法xml
* 解构算法xml
*/
*/
...
@@ -370,22 +352,18 @@ export default {
...
@@ -370,22 +352,18 @@ export default {
}
}
this
.
basconfig
=
arr
;
this
.
basconfig
=
arr
;
this
.
citem
=
arr
[
0
];
this
.
citem
=
arr
[
0
];
console
.
log
(
this
.
citem
);
console
.
log
(
"baseconfgi"
,
this
.
basconfig
);
},
},
seltype
(
item
,
cindex
)
{
seltype
(
item
,
cindex
)
{
if
(
this
.
cindex
==
cindex
)
{
return
false
;
}
this
.
citem
=
item
;
this
.
citem
=
item
;
this
.
changetype
(
item
);
this
.
changetype
(
item
);
this
.
cindex
=
cindex
;
this
.
cindex
=
cindex
;
this
.
klassarr
.
map
(
ele
=>
{
this
.
klassarr
.
map
(
ele
=>
{
if
(
ele
.
key
===
item
.
config
.
算法
ID
)
{
if
(
ele
.
key
&&
ele
.
key
===
item
.
config
.
算法
ID
)
{
this
.
fabricObjInit
(
ele
);
this
.
fabricObjInit
(
ele
);
}
}
})
});
this
.
showdirection
=
item
.
config
.
算法
ID
===
'RegionalInvasion'
?
true
:
false
;
this
.
setAreaconfig
();
},
},
/**
/**
* 修改配置文件
* 修改配置文件
...
@@ -400,15 +378,12 @@ export default {
...
@@ -400,15 +378,12 @@ export default {
parentname
;
parentname
;
this
.
basconfig
.
map
(
ele
=>
{
this
.
basconfig
.
map
(
ele
=>
{
if
(
ele
.
config
[
"算法ID"
])
{
if
(
ele
.
config
[
"算法ID"
])
{
let
roiArr
=
[];
let
idname
=
ele
.
config
[
"算法ID"
];
let
idname
=
ele
.
config
[
"算法ID"
];
let
ROI
=
{
let
roiconf
=
this
.
buildRoI
(
idname
);
idname
:
""
this
.
roiBody
[
idname
]
=
roiconf
?
roiconf
:{
'region_count'
:
0
};
};
console
.
log
(
"=============="
,
ele
);
this
.
roiBody
[
idname
]
=
this
.
buildRoI
(
ele
);
// confArr.push(this.buildRoI(ele));
}
}
console
.
log
(
this
.
roiBody
)
//构建参数树
//构建参数树
parentname
=
ele
.
pkey
;
parentname
=
ele
.
pkey
;
let
chidkey
=
ele
.
name
;
let
chidkey
=
ele
.
name
;
...
@@ -429,13 +404,13 @@ export default {
...
@@ -429,13 +404,13 @@ export default {
/**
/**
* 构建ROI
* 构建ROI
*/
*/
buildRoI
(
klass
)
{
buildRoI
(
cname
)
{
let
bg_arr
=
[],
let
bg_arr
=
[],
pol
,
index
=
0
;
pol
,
debugger
idname
=
klass
.
config
[
"算法ID"
];
this
.
klassarr
.
map
((
ele
,
k
)
=>
{
try
{
if
(
ele
.
key
===
cname
)
{
if
(
klass
.
roi
!=
null
&&
klass
.
roi
!=
""
)
{
index
++
;
klass
.
roi
.
map
((
ele
,
k
)
=>
{
try
{
if
(
ele
.
drawtype
==
"rect"
)
{
if
(
ele
.
drawtype
==
"rect"
)
{
let
lines
=
ele
.
aCoords
;
let
lines
=
ele
.
aCoords
;
let
point
=
[
let
point
=
[
...
@@ -461,7 +436,7 @@ export default {
...
@@ -461,7 +436,7 @@ export default {
}
}
];
];
let
obj
=
{
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_seq
:
index
,
polygon_point_count
:
4
,
polygon_point_count
:
4
,
point
:
point
,
point
:
point
,
polygon_type
:
"rect"
polygon_type
:
"rect"
...
@@ -481,7 +456,7 @@ export default {
...
@@ -481,7 +456,7 @@ export default {
poarr
.
push
(
obj
);
poarr
.
push
(
obj
);
});
});
let
obj
=
{
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_seq
:
index
,
polygon_point_count
:
po
.
length
,
polygon_point_count
:
po
.
length
,
point
:
poarr
,
point
:
poarr
,
polygon_type
:
"polygon"
polygon_type
:
"polygon"
...
@@ -489,7 +464,7 @@ export default {
...
@@ -489,7 +464,7 @@ export default {
bg_arr
.
push
(
obj
);
bg_arr
.
push
(
obj
);
}
}
if
(
ele
.
drawtype
==
"line"
)
{
if
(
ele
.
drawtype
==
"line"
)
{
let
lines
=
ele
.
aCoords
;
let
lines
=
ele
.
aCoords
;
let
point
=
[{
let
point
=
[{
point_seq
:
"1"
,
point_seq
:
"1"
,
x
:
(
ele
.
x1
/
700
).
toFixed
(
6
),
x
:
(
ele
.
x1
/
700
).
toFixed
(
6
),
...
@@ -501,26 +476,25 @@ export default {
...
@@ -501,26 +476,25 @@ export default {
y
:
(
ele
.
y2
/
500
).
toFixed
(
6
)
y
:
(
ele
.
y2
/
500
).
toFixed
(
6
)
}];
}];
let
obj
=
{
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_seq
:
index
,
polygon_point_count
:
2
,
polygon_point_count
:
2
,
point
:
point
,
point
:
point
,
polygon_type
:
"line"
polygon_type
:
"line"
};
};
bg_arr
.
push
(
obj
);
bg_arr
.
push
(
obj
);
}
}
});
pol
=
{
pol
=
{
region_count
:
index
region_count
:
klass
.
roi
.
length
,
};
polygon
:
bg_arr
if
(
bg_arr
.
length
>
0
)
{
};
pol
.
polygon
=
bg_arr
;
}
else
{
}
pol
=
{
console
.
log
(
pol
);
region_count
:
0
}
catch
(
error
)
{
};
console
.
log
(
error
);
}
}
}
console
.
log
(
pol
);
});
}
catch
(
error
)
{}
return
pol
;
return
pol
;
},
},
/**
/**
...
@@ -564,11 +538,12 @@ export default {
...
@@ -564,11 +538,12 @@ export default {
opacity
:
1
,
opacity
:
1
,
hasBorders
:
true
,
hasBorders
:
true
,
hasControls
:
false
,
hasControls
:
false
,
drawtype
:
drawType
drawtype
:
'polygon'
});
});
polygon
.
drawtype
=
drawType
;
polygon
.
drawtype
=
drawType
;
this
.
canvas
.
add
(
polygon
);
this
.
canvas
.
add
(
polygon
);
polygon
.
key
=
this
.
citem
.
config
[
'算法ID'
]
this
.
klassarr
.
push
(
polygon
)
this
.
activeLine
=
null
;
this
.
activeLine
=
null
;
this
.
activeShape
=
null
;
this
.
activeShape
=
null
;
this
.
polygonMode
=
false
;
this
.
polygonMode
=
false
;
...
@@ -586,16 +561,16 @@ export default {
...
@@ -586,16 +561,16 @@ export default {
//这里画的多边形,由顶点与线组成
//这里画的多边形,由顶点与线组成
this
.
pointArray
=
new
Array
();
// 顶点集合
this
.
pointArray
=
new
Array
();
// 顶点集合
this
.
lineArray
=
new
Array
();
//线集合
this
.
lineArray
=
new
Array
();
//线集合
this
.
canvas
.
isDrawingMode
=
false
;
//
this.canvas.isDrawingMode = false;
},
},
//delete
//delete
deleteShape
(
klass
)
{
deleteShape
(
klass
)
{
var
points
=
klass
.
get
(
"points"
);
var
points
=
klass
.
get
(
"points"
);
var
a
=
this
.
canvas
.
getActiveObject
();
var
a
=
this
.
canvas
.
getActiveObject
();
this
.
canvas
.
remove
(
a
)
this
.
canvas
.
remove
(
a
)
this
.
canvas
.
requestRenderAll
();
this
.
canvas
.
requestRenderAll
();
this
.
updateGroup
();
this
.
updateGroup
();
},
},
addPoint
(
e
)
{
addPoint
(
e
)
{
var
random
=
Math
.
floor
(
Math
.
random
()
*
10000
);
var
random
=
Math
.
floor
(
Math
.
random
()
*
10000
);
var
id
=
new
Date
().
getTime
()
+
random
;
var
id
=
new
Date
().
getTime
()
+
random
;
...
@@ -685,15 +660,15 @@ export default {
...
@@ -685,15 +660,15 @@ export default {
this
.
activeShape
=
polygon
;
this
.
activeShape
=
polygon
;
this
.
canvas
.
add
(
polygon
);
this
.
canvas
.
add
(
polygon
);
}
}
console
.
log
(
"polygon"
,
this
.
activeShape
);
this
.
activeLine
=
this
.
line
;
this
.
activeLine
=
this
.
line
;
this
.
pointArray
.
push
(
circle
);
this
.
pointArray
.
push
(
circle
);
this
.
lineArray
.
push
(
this
.
line
);
this
.
lineArray
.
push
(
this
.
line
);
this
.
canvas
.
add
(
this
.
line
);
this
.
canvas
.
add
(
this
.
line
);
this
.
canvas
.
add
(
circle
);
this
.
canvas
.
add
(
circle
);
},
},
drawing
(
type
)
{
drawing
(
type
,
skey
)
{
var
vthis
=
this
;
var
vthis
=
this
;
var
color
=
this
.
color
if
(
drawingObject
&&
type
==
"draw"
)
{
if
(
drawingObject
&&
type
==
"draw"
)
{
this
.
canvas
.
remove
(
drawingObject
);
this
.
canvas
.
remove
(
drawingObject
);
}
}
...
@@ -716,10 +691,10 @@ export default {
...
@@ -716,10 +691,10 @@ export default {
class
:
"line"
,
class
:
"line"
,
originX
:
"center"
,
originX
:
"center"
,
originY
:
"center"
,
originY
:
"center"
,
selectable
:
fals
e
,
selectable
:
tru
e
,
hasBorders
:
fals
e
,
hasBorders
:
tru
e
,
hasControls
:
fals
e
,
hasControls
:
tru
e
,
evented
:
fals
e
,
evented
:
tru
e
,
objectCaching
:
false
,
objectCaching
:
false
,
stroke
:
color
,
stroke
:
color
,
drawtype
:
'line'
drawtype
:
'line'
...
@@ -838,6 +813,7 @@ export default {
...
@@ -838,6 +813,7 @@ export default {
}
}
// canvasObject.index = getCanvasObjectIndex();
// canvasObject.index = getCanvasObjectIndex();
if
(
this
.
canvasObject
)
{
if
(
this
.
canvasObject
)
{
this
.
canvasObject
.
key
=
skey
?
skey
:
this
.
citem
.
config
[
'算法ID'
]
this
.
canvasObject
.
on
(
"selected"
,
function
()
{
this
.
canvasObject
.
on
(
"selected"
,
function
()
{
cvselect
=
true
;
cvselect
=
true
;
cvunselect
=
true
;
cvunselect
=
true
;
...
@@ -850,6 +826,9 @@ export default {
...
@@ -850,6 +826,9 @@ export default {
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
confdata
.
roi
=
group
;
confdata
.
roi
=
group
;
cvunselect
=
false
;
cvunselect
=
false
;
// vthis.klassarr.push(this.canvasObject);
vthis
.
klassarr
.
push
(
vthis
.
canvasObject
)
});
});
this
.
canvasObject
.
id
=
vthis
.
uuid
();
this
.
canvasObject
.
id
=
vthis
.
uuid
();
this
.
canvasObject
.
drawtype
=
drawType
;
this
.
canvasObject
.
drawtype
=
drawType
;
...
@@ -915,7 +894,6 @@ export default {
...
@@ -915,7 +894,6 @@ export default {
// 此段为判断是否闭合多边形,点击红点时闭合多边形
// 此段为判断是否闭合多边形,点击红点时闭合多边形
if
(
vthis
.
pointArray
.
length
>
1
)
{
if
(
vthis
.
pointArray
.
length
>
1
)
{
// e.target.id == this.pointArray[0].id 表示点击了初始红点
// e.target.id == this.pointArray[0].id 表示点击了初始红点
console
.
log
(
e
.
target
);
if
(
e
.
target
&&
e
.
target
.
id
==
vthis
.
pointArray
[
0
].
id
)
{
if
(
e
.
target
&&
e
.
target
.
id
==
vthis
.
pointArray
[
0
].
id
)
{
vthis
.
generatePolygon
();
vthis
.
generatePolygon
();
}
}
...
@@ -1147,5 +1125,8 @@ button {
...
@@ -1147,5 +1125,8 @@ button {
width
:
80%
;
width
:
80%
;
height
:
80%
;
height
:
80%
;
}
}
.toolactive
{
background
:
rgb
(
0
,
38
,
255
,
.27
)
}
</
style
>
</
style
>
src/views/sceneManage/setting/areaconfig/Behavior的副本.vue
View file @
af680df
<
template
>
<
template
>
<div
class=
"modal-body b-box"
>
<div
class=
"modal-body b-box"
>
<div
class=
"tool"
>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('line')">
<img
src=
"./img/line.png"
alt
/>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line'}" @click="changetool('rect')">
<img
src=
"./img/rect.png"
alt
/>
</div>
<div
:class=
"
{'tool-t':true,'toolactive':curtool == 'line' }" @click="changetool('polygon')">
<img
src=
"./img/dbx.png"
alt
/>
</div>
</div>
<div
class=
"modal-left"
>
<div
class=
"modal-left"
>
<div
class=
"pic"
id=
"pic"
>
<div
class=
"pic"
id=
"pic"
>
<canvas
id=
"main"
width=
"700"
height=
"500"
></canvas>
<canvas
id=
"main"
width=
"700"
height=
"500"
></canvas>
...
@@ -19,23 +8,28 @@
...
@@ -19,23 +8,28 @@
<div
class=
"modal-right"
>
<div
class=
"modal-right"
>
<div
class=
"be-header"
>
<div
class=
"be-header"
>
<el-radio-group
v-model=
"checkval"
size=
"mini"
>
<el-radio-group
v-model=
"checkval"
size=
"mini"
>
<el-radio-button
label=
"event"
>
行为事件
</el-radio-button>
<el-radio-button
label=
"shanghai"
>
行为事件
</el-radio-button>
<el-radio-button
label=
"jiaotong"
name=
"shangha"
disabled
>
交通事件
</el-radio-button>
<el-radio-button
label=
"北京"
name=
"shangha"
disabled
<el-radio-button
label=
"anfnag"
name=
"shnghai"
disabled
>
安防事件
</el-radio-button>
>
交通事件
</el-radio-button
>
<el-radio-button
label=
"广州"
name=
"shnghai"
disabled
>
安防事件
</el-radio-button
>
</el-radio-group>
</el-radio-group>
</div>
</div>
<div
class=
"be-content"
>
<div
class=
"be-content"
>
<div
class=
"typebox"
>
<div
class=
"typebox"
>
<div
class=
"checkbox"
v-for=
"(item, index) in basconfig"
:key=
"index"
>
<div
class=
"checkbox"
v-for=
"(item, index) in basconfig"
:key=
"index"
>
<div
:class=
"
{ listbox: true, curlist: cindex == index }" @click="seltype(item, index)">
<div
<!--
<el-checkbox-group
v-model=
"checktype"
class=
"checkgrop"
>
:class=
"
{ listbox: true, curlist: cindex == index }"
<el-checkbox
:key=
"item.name"
:label=
"item.name"
>
@click="seltype(item, index)"
{{
>
<el-checkbox-group
v-model=
"checkboxGroup1"
class=
"checkgrop"
>
<el-checkbox
:key=
"item.name"
:label=
"item.name"
>
{{
""
""
}}
}}
</el-checkbox>
</el-checkbox>
</el-checkbox-group>
</el-checkbox-group>
-->
<span
class=
"typetext"
>
{{
item
.
name
}}
</span>
<span
class=
"typetext"
>
{{
item
.
name
}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -43,12 +37,12 @@
...
@@ -43,12 +37,12 @@
<div
class=
"areabox"
>
<div
class=
"areabox"
>
<div
class=
"area-header"
>
检测规则
</div>
<div
class=
"area-header"
>
检测规则
</div>
<div
<div
:class=
"
{
'area-item': true, 'activeare1': item.id == curuuid
}"
:class=
"
{
'area-item':true,'activeare':item.id==curuuid
}"
v-for="(item, index) in groupList"
v-for="(item, index) in groupList"
:key="index"
:key="index"
@click="changeKlass(item)"
@click="changeKlass(item)"
>
区域
{{
index
+
1
}}
>
<!--
<span
class=
"el-icon-circle-close"
@
click=
"deleteShape(item)"
></span>
-->
区域
{{
index
+
1
}}
</div>
</div>
<div
class=
"bottombtn"
>
<div
class=
"bottombtn"
>
<!--
<el-button
@
click=
"savechange"
type=
"primary"
size=
"mini"
style=
"width:90px"
>
保存
</el-button>
-->
<!--
<el-button
@
click=
"savechange"
type=
"primary"
size=
"mini"
style=
"width:90px"
>
保存
</el-button>
-->
...
@@ -57,28 +51,22 @@
...
@@ -57,28 +51,22 @@
type=
"primary"
type=
"primary"
size=
"mini"
size=
"mini"
style=
"width: 90px"
style=
"width: 90px"
>
保存
</el-button>
-->
>
保存
</el-button>
-->
</div>
</div>
</div>
</div>
<div
class=
"setbox"
>
<div
class=
"setbox"
>
<div
v-if=
"citem.config"
>
<div
<div
v-for=
"(val, key, index) in citem.config"
:key=
"index"
class=
"setboxitem"
>
v-for=
"(val, key, index) in citem.config"
:key=
"index"
class=
"setboxitem"
>
<span
class=
"configlabel"
>
{{
key
}}
:
</span>
<span
class=
"configlabel"
>
{{
key
}}
:
</span>
<span
class
>
<span
class=
""
<el-input
v-model=
"citem.config[key]"
></el-input>
><el-input
v-model=
"citem.config[key]"
></el-input
</span>
></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"pusbox"
>
<div
class=
"label"
>
推送地址:
</div>
<div>
<el-input
v-model=
"pushurl"
placeholder=
"推送地址"
width=
"100"
></el-input>
</div>
<div
style=
"color;#ccc"
>
方向:1进入区域,2出去区域,3双向警告
</div>
<div><el-button
size=
"mini"
@
click=
"clearcanvas"
>
清空
</el-button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -87,225 +75,50 @@
...
@@ -87,225 +75,50 @@
import
{
fabric
}
from
"fabric"
;
import
{
fabric
}
from
"fabric"
;
import
{
select
}
from
"svg.js"
;
import
{
select
}
from
"svg.js"
;
import
{
xml
}
from
"./bog.js"
;
import
{
xml
}
from
"./bog.js"
;
var
drawingObject
=
null
;
//当前绘制对象
var
canvas
=
null
;
var
mouseFrom
=
{},
mouseTo
=
{},
drawType
=
""
,
canvasObjectIndex
=
0
,
textbox
=
null
;
var
drawWidth
=
2
;
//笔触宽度
var
color
=
"#E34F51"
;
//画笔颜色
var
moveCount
=
1
;
//绘制移动计数器
var
doDrawing
=
false
;
// 绘制状态
var
cvselect
=
false
;
var
curObjcet
=
null
;
var
cvunselect
=
true
;
export
default
{
export
default
{
name
:
"zoneSetting"
,
name
:
"zoneSetting"
,
props
:
[
"bgUrl"
,
"configxml"
],
props
:
[
"bgUrl"
],
data
()
{
data
()
{
return
{
return
{
tabPosition
:
"top"
,
tabPosition
:
"top"
,
checkval
:
"
event
"
,
checkval
:
"
shanghai
"
,
check
type
:
[
],
check
boxGroup1
:
[
"人员脱岗"
],
groupList
:
[],
groupList
:
[],
curAlgoType
:
"xsdsfd"
,
curAlgoType
:
"xsdsfd"
,
basconfig
:
[],
basconfig
:
{},
curtool
:
"line"
,
baselist
:
{},
baselist
:
{},
cindex
:
0
,
cindex
:
0
,
citem
:
{
config
:
null
},
citem
:
null
,
curuuid
:
null
,
curuuid
:
null
,
pushurl
:
""
,
roiBody
:{},
canvasObject
:
null
,
roiBody
:
{},
basedocument
:
null
,
basedocument
:
null
,
paramsData
:
""
,
paramsData
:
""
,
caturl
:
""
,
drawWidth
:
2
,
moveCount
:
1
,
//绘制移动计数器
doDrawing
:
false
,
// 绘制状态
color
:
"#E34F51"
,
//画笔颜色
//polygon 相关参数
polygonMode
:
false
,
pointArray
:
[],
lineArray
:
[],
activeShape
:
false
,
activeLine
:
""
,
line
:
{},
delectKlass
:
{},
imgFile
:
{},
imgSrc
:
""
,
polygonpoint
:[],
canvas
:
null
,
curklass
:
null
,
//活动对象
};
};
},
},
methods
:
{
methods
:
{
/**
/**
* 工具选择
*
*/
changetool
(
type
)
{
if
(
type
==
"polygon"
)
{
this
.
drawPolygon
();
}
drawType
=
type
;
},
/**
* 初始化区域
* 初始化区域
*/
*/
configInit
(
roiXml
,
confxml
)
{
configInit
(
xml
){
debugger
;
var
picuri
=
new
Date
().
getTime
();
try
{
document
.
getElementById
(
"VionVideo"
)
.
CapturePicture
(
"D:\\/"
+
picuri
+
".jpg"
);
setTimeout
(()
=>
{
document
.
getElementById
(
"pic"
).
style
.
backgroundImage
=
"url(D:\\/"
+
picuri
+
".jpg)"
;
},
1500
);
}
catch
(
error
)
{}
let
roiobj
=
this
.
oParse
.
parseXML
(
roiXml
).
roi
;
if
(
roiobj
===
undefined
)
{
roiobj
=
{};
}
for
(
key
in
roiobj
)
{
let
klassarr
=
[];
if
(
roiobj
[
key
].
region_count
>
0
)
{
var
polygon
=
roiobj
[
key
].
polygon
;
if
(
Object
.
prototype
.
toString
.
call
(
polygon
)
===
"[object Array]"
)
{
polygon
.
map
(
ele
=>
{
if
(
ele
.
polygon_type
==
"rect"
)
{
drawType
=
"rect"
;
let
points
=
ele
.
point
;
this
.
initRect
(
points
);
klassarr
.
push
(
drawingObject
);
}
else
if
(
ele
.
polygon_type
==
"line"
)
{
let
points
=
ele
.
point
;
drawType
=
ele
.
polygon_type
;
this
.
intline
(
points
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
}
else
if
(
ele
.
polygon_type
==
"polygon"
)
{
drawType
=
ele
.
polygon_type
;
let
points
=
ele
.
point
;
this
.
intPolygon
(
points
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
}
});
}
else
{
if
(
polygon
.
polygon_type
==
"rect"
)
{
drawType
=
"rect"
;
this
.
initRect
(
polygon
.
point
);
klassarr
.
push
(
drawingObject
);
}
else
if
(
polygon
.
polygon_type
==
"line"
)
{
drawType
=
polygon
.
polygon_type
;
this
.
intline
(
polygon
.
point
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
//
}
else
if
(
polygon
.
polygon_type
==
"polygon"
)
{
drawType
=
"polygon"
;
let
points
=
polygon
.
point
;
this
.
intPolygon
(
points
)
this
.
drawing
(
"init"
);
klassarr
.
push
(
drawingObject
);
}
}
roiobj
[
key
].
rois
=
klassarr
;
for
(
let
k
=
0
;
k
<
this
.
basconfig
.
length
;
k
++
)
{
if
(
this
.
basconfig
[
k
].
config
.
算法
ID
===
key
)
{
this
.
basconfig
[
k
].
roi
=
klassarr
;
// this.basconfig[k].config = confobj['root']
break
;
}
}
}
}
if
(
this
.
basconfig
.
length
>
0
)
{
if
(
this
.
basconfig
[
0
].
roi
)
{
this
.
basconfig
[
0
].
roi
.
map
(
ele
=>
{
this
.
fabricObjInit
(
ele
);
this
.
setAreaconfig
();
});
}
}
},
initRect
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
mouseTo
.
x
=
points
[
2
].
x
*
700
;
mouseTo
.
y
=
points
[
2
].
y
*
500
;
},
intline
(
points
){
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
mouseTo
.
x
=
points
[
1
].
x
*
700
;
mouseTo
.
y
=
points
[
1
].
y
*
500
;
},
clearcanvas
(){
this
.
canvas
.
clear
()
this
.
setAreaconfig
()
this
.
basconfig
[
this
.
cindex
].
roi
=
null
},
intPolygon
(
points
)
{
mouseFrom
.
x
=
points
[
0
].
x
*
700
;
mouseFrom
.
y
=
points
[
0
].
y
*
500
;
let
pointarr
=
[];
points
.
map
(
ele
=>
{
let
obj
=
{
x
:
ele
.
x
*
700
,
y
:
ele
.
y
*
500
}
pointarr
.
push
(
obj
);
})
this
.
polygonpoint
=
pointarr
},
/**
* 初始化参数及画布
*/
stageInit
(
data
)
{
if
(
!
this
.
canvas
)
{
this
.
Initfab
();
}
if
(
data
.
xml
!==
undefined
&&
data
.
xml
.
indexOf
(
'undefined'
)
<
0
)
{
this
.
basconfig
=
Object
.
assign
(
this
.
oParse
.
parseXML
(
data
.
xml
),
this
.
oParse
.
parseXML
(
xml
)
);
}
else
{
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
}
this
.
initConfig
(
this
.
basconfig
);
console
.
log
(
"config"
,
data
);
},
},
getObjects
(
klass
)
{
getObjects
(
klass
)
{
//获取所有的列表对象
//获取所有的列表对象
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
},
},
setAreaconfig
()
{
setAreaconfig
()
{
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
this
.
groupList
=
group
;
this
.
groupList
=
group
;
},
},
//设置活动对象
//设置活动对象
changeKlass
(
klass
)
{
changeKlass
(
klass
)
{
console
.
log
(
klass
)
canvas
.
setActiveObject
(
klass
);
this
.
curklass
=
klass
;
canvas
.
requestRenderAll
();
this
.
canvas
.
setActiveObject
(
klass
);
this
.
canvas
.
requestRenderAll
();
},
},
updateGroup
()
{
updateGroup
()
{
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
this
.
groupList
=
group
;
this
.
groupList
=
group
;
},
},
...
@@ -313,24 +126,23 @@ export default {
...
@@ -313,24 +126,23 @@ export default {
* tab切换保存之前绘制的数据
* tab切换保存之前绘制的数据
*/
*/
changetype
(
data
,
index
)
{
changetype
(
data
,
index
)
{
var
group
=
this
.
canvas
.
getObjects
();
var
group
=
canvas
.
getObjects
();
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
confdata
.
roi
=
group
;
confdata
.
roi
=
group
;
this
.
canvas
.
clear
();
canvas
.
clear
();
console
.
log
(
this
.
basconfig
);
console
.
log
(
this
.
basconfig
);
},
},
/**
/**
* 回显对象
* 回显对象
*/
*/
fabricObjInit
(
klass
)
{
fabricObjInit
(
klass
)
{
this
.
canvas
.
add
(
klass
);
canvas
.
add
(
klass
);
},
},
/**
/**
* 根据选择模型定位规则
* 根据选择模型定位规则
*/
*/
selectklass
(
klass
)
{
selectklass
(
klass
){
this
.
curuuid
=
klass
.
id
;
this
.
curuuid
=
klass
.
id
;
this
.
curklass
=
klass
;
},
},
/**
/**
* 解构算法xml
* 解构算法xml
...
@@ -352,20 +164,17 @@ export default {
...
@@ -352,20 +164,17 @@ export default {
buildUserobj
(
obj
,
parentkey
)
{
buildUserobj
(
obj
,
parentkey
)
{
let
arr
=
[];
let
arr
=
[];
for
(
let
key
in
obj
)
{
for
(
let
key
in
obj
)
{
if
(
key
!==
"结果推送地址"
)
{
let
buildobj
=
{
let
buildobj
=
{
pkey
:
parentkey
,
pkey
:
parentkey
,
id
:
key
,
id
:
key
,
name
:
key
,
name
:
key
,
roi
:
null
,
roi
:
null
,
config
:
obj
[
key
],
config
:
obj
[
key
]
};
};
arr
.
push
(
buildobj
);
arr
.
push
(
buildobj
);
}
else
{
this
.
pushurl
=
obj
[
key
];
}
}
}
this
.
basconfig
=
arr
;
this
.
basconfig
=
arr
;
debugger
;
this
.
citem
=
arr
[
0
];
this
.
citem
=
arr
[
0
];
console
.
log
(
this
.
citem
);
console
.
log
(
this
.
citem
);
console
.
log
(
"baseconfgi"
,
this
.
basconfig
);
console
.
log
(
"baseconfgi"
,
this
.
basconfig
);
...
@@ -379,7 +188,7 @@ export default {
...
@@ -379,7 +188,7 @@ export default {
this
.
cindex
=
cindex
;
this
.
cindex
=
cindex
;
let
rois
=
item
.
roi
;
let
rois
=
item
.
roi
;
if
(
item
.
roi
!==
""
&&
item
.
roi
!==
null
)
{
if
(
item
.
roi
!==
""
&&
item
.
roi
!==
null
)
{
this
.
groupList
=
rois
;
this
.
groupList
=
rois
for
(
let
i
=
0
;
i
<
rois
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
rois
.
length
;
i
++
)
{
this
.
fabricObjInit
(
rois
[
i
]);
this
.
fabricObjInit
(
rois
[
i
]);
}
}
...
@@ -396,13 +205,13 @@ export default {
...
@@ -396,13 +205,13 @@ export default {
//博关算法监测区域
//博关算法监测区域
let
confArr
=
[],
let
confArr
=
[],
parentname
;
parentname
;
this
.
basconfig
.
map
(
ele
=>
{
this
.
basconfig
.
map
(
(
ele
)
=>
{
if
(
ele
.
config
[
"算法ID"
])
{
if
(
ele
.
config
[
"算法ID"
])
{
let
idname
=
ele
.
config
[
"算法ID"
];
let
idname
=
ele
.
config
[
"算法ID"
];
let
ROI
=
{
let
ROI
=
{
idname
:
""
idname
:
""
,
};
};
console
.
log
(
this
.
buildRoI
(
ele
))
;
console
.
log
(
this
.
buildRoI
(
ele
))
this
.
roiBody
[
idname
]
=
this
.
buildRoI
(
ele
);
this
.
roiBody
[
idname
]
=
this
.
buildRoI
(
ele
);
// confArr.push(this.buildRoI(ele));
// confArr.push(this.buildRoI(ele));
}
}
...
@@ -414,323 +223,202 @@ export default {
...
@@ -414,323 +223,202 @@ export default {
childconfig
[
chidkey
]
=
ele
.
config
;
childconfig
[
chidkey
]
=
ele
.
config
;
confArr
.
push
(
childconfig
);
confArr
.
push
(
childconfig
);
});
});
this
.
buildParam
(
parentname
,
confArr
);
this
.
buildParam
(
parentname
,
confArr
);
this
.
clear
();
return
this
.
oParse
.
writeXML
({
roi
:
this
.
roiBody
});
return
this
.
oParse
.
writeXML
({
roi
:
this
.
roiBody
});
},
},
clear
()
{
clear
(){
this
.
basconfig
=
[];
canvas
.
clear
();
if
(
this
.
canvas
!==
undefined
)
{
this
.
canvas
.
clear
();
}
},
},
/**
/**
* 构建ROI
* 构建ROI
*/
*/
buildRoI
(
klass
)
{
buildRoI
(
klass
){
let
bg_arr
=
[],
let
bg_arr
=
[],
pol
;
pol
,
let
idname
=
klass
.
config
[
"算法ID"
];
idname
=
klass
.
config
[
"算法ID"
];
if
(
klass
.
roi
!=
null
&&
klass
.
roi
!=
""
)
{
try
{
klass
.
roi
.
map
(
ele
=>
{
if
(
klass
.
roi
!=
null
&&
klass
.
roi
!=
""
)
{
let
lines
=
ele
.
aCoords
;
klass
.
roi
.
map
((
ele
,
k
)
=>
{
let
point
=
[{
if
(
ele
.
drawtype
==
"rect"
)
{
"point_seq"
:
"1"
,
let
lines
=
ele
.
aCoords
;
"x"
:(
lines
.
tl
.
x
/
700
).
toFixed
(
6
),
let
point
=
[
"y"
:(
lines
.
tl
.
y
/
500
).
toFixed
(
6
)
{
},{
point_seq
:
"1"
,
"point_seq"
:
"2"
,
x
:
(
lines
.
tl
.
x
/
700
).
toFixed
(
6
),
"x"
:(
lines
.
tr
.
x
/
700
).
toFixed
(
6
),
y
:
(
lines
.
tl
.
y
/
500
).
toFixed
(
6
)
"y"
:(
lines
.
tr
.
y
/
500
).
toFixed
(
6
)
},
},{
{
"point_seq"
:
"3"
,
point_seq
:
"2"
,
"x"
:(
lines
.
br
.
x
/
700
).
toFixed
(
6
),
x
:
(
lines
.
tr
.
x
/
700
).
toFixed
(
6
),
"y"
:(
lines
.
br
.
y
/
500
).
toFixed
(
6
),
y
:
(
lines
.
tr
.
y
/
500
).
toFixed
(
6
)
},{
},
"point_seq"
:
"4"
,
{
"x"
:(
lines
.
bl
.
x
/
700
).
toFixed
(
6
),
point_seq
:
"3"
,
"y"
:(
lines
.
bl
.
y
/
500
).
toFixed
(
6
),
x
:
(
lines
.
br
.
x
/
700
).
toFixed
(
6
),
}]
y
:
(
lines
.
br
.
y
/
500
).
toFixed
(
6
)
let
obj
=
{
},
"polygon_point_count"
:
4
,
{
"point"
:
point
point_seq
:
"4"
,
x
:
(
lines
.
bl
.
x
/
700
).
toFixed
(
6
),
y
:
(
lines
.
bl
.
y
/
500
).
toFixed
(
6
)
}
];
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_point_count
:
4
,
point
:
point
,
polygon_type
:
"rect"
};
bg_arr
.
push
(
obj
);
}
//多边形
if
(
ele
.
drawtype
==
"polygon"
)
{
let
po
=
ele
.
points
;
let
poarr
=
[];
po
.
map
((
ele
,
i
)
=>
{
let
obj
=
{
point_seq
:
i
+
1
,
x
:
(
ele
.
x
/
700
).
toFixed
(
6
),
y
:
(
ele
.
y
/
500
).
toFixed
(
6
)
};
poarr
.
push
(
obj
);
});
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_point_count
:
po
.
length
,
point
:
poarr
,
polygon_type
:
"polygon"
};
bg_arr
.
push
(
obj
);
}
if
(
ele
.
drawtype
==
"line"
)
{
let
lines
=
ele
.
aCoords
;
let
point
=
[{
point_seq
:
"1"
,
x
:
(
ele
.
x1
/
700
).
toFixed
(
6
),
y
:
(
ele
.
y1
/
500
).
toFixed
(
6
)
},
{
point_seq
:
"2"
,
x
:
(
ele
.
x2
/
700
).
toFixed
(
6
),
y
:
(
ele
.
y2
/
500
).
toFixed
(
6
)
}];
let
obj
=
{
polygon_seq
:
k
+
1
,
polygon_point_count
:
2
,
point
:
point
,
polygon_type
:
"line"
};
bg_arr
.
push
(
obj
);
}
}
});
bg_arr
.
push
(
obj
)
pol
=
{
});
region_count
:
klass
.
roi
.
length
,
pol
=
{
polygon
:
bg_arr
"region_count"
:
klass
.
roi
.
length
,
};
"polygon"
:
bg_arr
}
else
{
pol
=
{
region_count
:
0
};
}
}
console
.
log
(
pol
);
}
catch
(
error
)
{}
}
else
{
pol
=
{
return
pol
;
"region_count"
:
0
,
}
}
return
pol
;
},
},
/**
/**
* 构建参数树
* 构建参数树
*/
*/
buildParam
(
parentname
,
confArr
)
{
buildParam
(
parentname
,
confArr
)
{
let
paramsconfig
=
{
let
paramsconfig
=
{
root
:
{
root
:
{
算法功能
:
{}
算法功能
:
{}
,
}
}
,
};
};
let
pobj
=
{
let
pobj
=
{
结果推送地址
:
this
.
pushurl
"结果推送地址"
:
"http://192.168.9.25:8080/"
};
};
confArr
.
map
(
ele
=>
{
confArr
.
map
(
(
ele
)
=>
{
for
(
key
in
ele
)
{
for
(
key
in
ele
)
{
pobj
[
key
]
=
ele
[
key
];
pobj
[
key
]
=
ele
[
key
];
}
}
});
});
paramsconfig
.
root
.
算法功能
[
parentname
]
=
pobj
;
paramsconfig
.
root
.
算法功能
[
parentname
]
=
pobj
;
this
.
paramsData
=
this
.
oParse
.
writeXML
(
paramsconfig
);
this
.
paramsData
=
this
.
oParse
.
writeXML
(
paramsconfig
);
},
},
//生成多边形
},
generatePolygon
()
{
created
()
{
var
points
=
new
Array
();
this
.
basconfig
=
this
.
oParse
.
parseXML
(
xml
);
this
.
pointArray
.
map
((
point
,
index
)
=>
{
this
.
initConfig
(
this
.
basconfig
);
points
.
push
({
},
x
:
point
.
left
,
mounted
()
{
y
:
point
.
top
this
.
basedocument
=
$
.
parseXML
(
xml
);
});
this
.
canvas
.
remove
(
point
);
});
this
.
lineArray
.
map
((
line
,
index
)
=>
{
this
.
canvas
.
remove
(
line
);
});
this
.
canvas
.
remove
(
this
.
activeShape
).
remove
(
this
.
activeLine
);
var
polygon
=
new
fabric
.
Polygon
(
points
,
{
stroke
:
this
.
color
,
strokeWidth
:
this
.
drawWidth
,
fill
:
"rgba(255, 255, 255, 0)"
,
opacity
:
1
,
hasBorders
:
true
,
hasControls
:
false
,
drawtype
:
drawType
});
polygon
.
drawtype
=
drawType
;
this
.
canvas
.
add
(
polygon
);
this
.
activeLine
=
null
;
var
vthis
=
this
;
this
.
activeShape
=
null
;
var
mouseFrom
=
{},
this
.
polygonMode
=
false
;
mouseTo
=
{},
this
.
doDrawing
=
false
;
drawType
=
""
,
this
.
drawType
=
null
;
canvasObjectIndex
=
0
,
this
.
setAreaconfig
();
textbox
=
null
;
var
group
=
this
.
canvas
.
getObjects
();
var
drawWidth
=
2
;
//笔触宽度
var
confdata
=
this
.
basconfig
[
this
.
cindex
];
var
color
=
"#E34F51"
;
//画笔颜色
confdata
.
roi
=
group
;
var
drawingObject
=
null
;
//当前绘制对象
},
var
moveCount
=
1
;
//绘制移动计数器
// 绘制多边形开始,绘制多边形和其他图形不一样,需要单独处理
var
doDrawing
=
false
;
// 绘制状态
drawPolygon
()
{
var
cvselect
=
false
;
drawType
=
"polygon"
;
var
curObjcet
=
null
;
this
.
polygonMode
=
true
;
var
cvunselect
=
true
;
//这里画的多边形,由顶点与线组成
var
deleteIcon
=
this
.
pointArray
=
new
Array
();
// 顶点集合
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"
;
this
.
lineArray
=
new
Array
();
//线集合
var
img
=
document
.
createElement
(
"img"
);
this
.
canvas
.
isDrawingMode
=
false
;
//设置图形显示拖拽点样式
},
//delete
deleteShape
(
klass
)
{
var
points
=
klass
.
get
(
"points"
);
var
a
=
this
.
canvas
.
getActiveObject
();
this
.
canvas
.
remove
(
a
)
this
.
canvas
.
requestRenderAll
();
this
.
updateGroup
();
},
addPoint
(
e
)
{
var
random
=
Math
.
floor
(
Math
.
random
()
*
10000
);
var
id
=
new
Date
().
getTime
()
+
random
;
var
circle
=
new
fabric
.
Circle
({
radius
:
5
,
fill
:
"#ffffff"
,
stroke
:
"#333333"
,
strokeWidth
:
0.5
,
left
:
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
top
:
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
(),
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
originX
:
"center"
,
originY
:
"center"
,
id
:
id
,
objectCaching
:
false
});
if
(
this
.
pointArray
.
length
==
0
)
{
circle
.
set
({
fill
:
"red"
});
}
var
points
=
[
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
(),
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
()
];
this
.
line
=
new
fabric
.
Line
(
points
,
{
fabric
.
Object
.
prototype
.
controls
.
deleteControl
=
new
fabric
.
Control
({
strokeWidth
:
2
,
x
:
0.5
,
fill
:
"#999999"
,
y
:
-
0.5
,
stroke
:
"#999999"
,
offsetY
:
-
10
,
class
:
"line"
,
offsetX
:
-
30
,
originX
:
"center"
,
cursorStyle
:
"pointer"
,
originY
:
"center"
,
mouseUpHandler
:
deleteObject
,
selectable
:
false
,
render
:
renderIcon
,
hasBorders
:
false
,
cornerSize
:
16
,
hasControls
:
false
,
});
evented
:
false
,
function
deleteObject
(
eventData
,
transform
)
{
objectCaching
:
false
var
target
=
transform
.
target
;
});
var
canvas
=
target
.
canvas
;
if
(
this
.
activeShape
)
{
cvselect
=
false
;
var
pos
=
this
.
canvas
.
getPointer
(
e
.
e
);
canvas
.
remove
(
target
);
var
points
=
this
.
activeShape
.
get
(
"points"
);
canvas
.
requestRenderAll
();
points
.
push
({
}
x
:
pos
.
x
,
y
:
pos
.
y
});
var
polygon
=
new
fabric
.
Polygon
(
points
,
{
stroke
:
"#333333"
,
strokeWidth
:
1
,
fill
:
"#cccccc"
,
opacity
:
0.3
,
selectable
:
true
,
function
renderIcon
(
ctx
,
left
,
top
,
styleOverride
,
fabricObject
)
{
hasBorders
:
false
,
var
size
=
this
.
cornerSize
;
hasControls
:
false
,
ctx
.
save
();
evented
:
false
,
ctx
.
translate
(
left
,
top
);
objectCaching
:
false
ctx
.
rotate
(
fabric
.
util
.
degreesToRadians
(
fabricObject
.
angle
));
});
ctx
.
drawImage
(
img
,
-
size
/
2
,
-
size
/
2
,
size
,
size
);
polygon
.
drawtype
=
drawType
;
ctx
.
restore
();
this
.
canvas
.
remove
(
this
.
activeShape
);
}
this
.
canvas
.
add
(
polygon
);
img
.
src
=
deleteIcon
;
this
.
activeShape
=
polygon
;
window
.
zoom
=
window
.
zoom
?
window
.
zoom
:
1
;
this
.
canvas
.
requestRenderAll
();
canvas
=
new
fabric
.
Canvas
(
"main"
,
{});
canvas
.
on
(
"mouse:down"
,
function
(
options
)
{
console
.
log
(
options
);
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseFrom
.
x
=
xy
.
x
;
mouseFrom
.
y
=
xy
.
y
;
if
(
!
cvselect
)
{
doDrawing
=
true
;
}
else
{
}
else
{
var
polyPoint
=
[
if
(
!
cvunselect
)
{
{
cvselect
=
false
;
x
:
(
e
.
pointer
.
x
||
e
.
e
.
layerX
)
/
this
.
canvas
.
getZoom
(),
}
y
:
(
e
.
pointer
.
y
||
e
.
e
.
layerY
)
/
this
.
canvas
.
getZoom
()
}
];
var
polygon
=
new
fabric
.
Polygon
(
polyPoint
,
{
stroke
:
"#333333"
,
strokeWidth
:
1
,
fill
:
"#cccccc"
,
opacity
:
0.3
,
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
evented
:
false
,
objectCaching
:
false
});
this
.
activeShape
=
polygon
;
this
.
canvas
.
add
(
polygon
);
}
}
console
.
log
(
"polygon"
,
this
.
activeShape
);
});
this
.
activeLine
=
this
.
line
;
canvas
.
on
(
"mouse:up"
,
function
(
options
)
{
this
.
pointArray
.
push
(
circle
);
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
this
.
lineArray
.
push
(
this
.
line
);
mouseTo
.
x
=
xy
.
x
;
this
.
canvas
.
add
(
this
.
line
);
mouseTo
.
y
=
xy
.
y
;
this
.
canvas
.
add
(
circle
);
// drawing();
},
drawingObject
=
null
;
drawing
(
type
)
{
moveCount
=
1
;
var
vthis
=
this
;
doDrawing
=
false
;
if
(
drawingObject
&&
type
==
"draw"
)
{
});
this
.
canvas
.
remove
(
drawingObject
);
canvas
.
on
(
"mouse:move"
,
function
(
options
)
{
if
(
moveCount
%
2
&&
!
doDrawing
)
{
//减少绘制频率
return
;
}
moveCount
++
;
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
drawType
=
"rectangle"
;
drawing
();
});
function
transformMouse
(
mouseX
,
mouseY
)
{
return
{
x
:
mouseX
/
window
.
zoom
,
y
:
mouseY
/
window
.
zoom
};
}
function
drawing
()
{
if
(
drawingObject
)
{
canvas
.
remove
(
drawingObject
);
}
}
var
canvasObject
=
null
;
switch
(
drawType
)
{
switch
(
drawType
)
{
case
"arrow"
:
//箭头
case
"arrow"
:
//箭头
this
.
canvasObject
=
new
fabric
.
Path
(
canvasObject
=
new
fabric
.
Path
(
drawArrow
(
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
,
30
,
30
),
drawArrow
(
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
,
30
,
30
),
{
{
stroke
:
color
,
stroke
:
color
,
fill
:
"rgba(255,255,255,0)"
,
fill
:
"rgba(255,255,255,0)"
,
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
}
}
);
);
break
;
break
;
case
"line"
:
//直线
case
"line"
:
//直线
this
.
canvasObject
=
new
fabric
.
Line
(
canvasObject
=
new
fabric
.
Line
(
[
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
],
[
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
],
{
{
strokeWidth
:
2
,
class
:
"line"
,
originX
:
"center"
,
originY
:
"center"
,
selectable
:
false
,
hasBorders
:
false
,
hasControls
:
false
,
evented
:
false
,
objectCaching
:
false
,
stroke
:
color
,
stroke
:
color
,
drawtype
:
'line'
strokeWidth
:
drawWidth
,
}
}
);
);
break
;
break
;
case
"dottedline"
:
//虚线
case
"dottedline"
:
//虚线
this
.
canvasObject
=
new
fabric
.
Line
(
canvasObject
=
new
fabric
.
Line
(
[
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
],
[
mouseFrom
.
x
,
mouseFrom
.
y
,
mouseTo
.
x
,
mouseTo
.
y
],
{
{
strokeDashArray
:
[
3
,
1
],
strokeDashArray
:
[
3
,
1
],
stroke
:
color
,
stroke
:
color
,
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
}
}
);
);
break
;
break
;
...
@@ -742,26 +430,24 @@ export default {
...
@@ -742,26 +430,24 @@ export default {
(
mouseTo
.
x
-
left
)
*
(
mouseTo
.
x
-
left
)
+
(
mouseTo
.
x
-
left
)
*
(
mouseTo
.
x
-
left
)
+
(
mouseTo
.
y
-
top
)
*
(
mouseTo
.
y
-
top
)
(
mouseTo
.
y
-
top
)
*
(
mouseTo
.
y
-
top
)
)
/
2
;
)
/
2
;
this
.
canvasObject
=
new
fabric
.
Circle
({
canvasObject
=
new
fabric
.
Circle
({
left
:
left
,
left
:
left
,
top
:
top
,
top
:
top
,
stroke
:
color
,
stroke
:
color
,
fill
:
"rgba(255, 255, 255, 0)"
,
fill
:
"rgba(255, 255, 255, 0)"
,
radius
:
radius
,
radius
:
radius
,
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
});
});
break
;
break
;
case
"ellipse"
:
//椭圆
case
"ellipse"
:
//椭圆
// eslint-disable-next-line no-redeclare
var
left
=
mouseFrom
.
x
,
var
left
=
mouseFrom
.
x
,
top
=
mouseFrom
.
y
;
top
=
mouseFrom
.
y
;
// eslint-disable-next-line no-redeclare
var
radius
=
var
radius
=
Math
.
sqrt
(
Math
.
sqrt
(
(
mouseTo
.
x
-
left
)
*
(
mouseTo
.
x
-
left
)
+
(
mouseTo
.
x
-
left
)
*
(
mouseTo
.
x
-
left
)
+
(
mouseTo
.
y
-
top
)
*
(
mouseTo
.
y
-
top
)
(
mouseTo
.
y
-
top
)
*
(
mouseTo
.
y
-
top
)
)
/
2
;
)
/
2
;
this
.
canvasObject
=
new
fabric
.
Ellipse
({
canvasObject
=
new
fabric
.
Ellipse
({
left
:
left
,
left
:
left
,
top
:
top
,
top
:
top
,
stroke
:
color
,
stroke
:
color
,
...
@@ -770,47 +456,70 @@ export default {
...
@@ -770,47 +456,70 @@ export default {
originY
:
"center"
,
originY
:
"center"
,
rx
:
Math
.
abs
(
left
-
mouseTo
.
x
),
rx
:
Math
.
abs
(
left
-
mouseTo
.
x
),
ry
:
Math
.
abs
(
top
-
mouseTo
.
y
),
ry
:
Math
.
abs
(
top
-
mouseTo
.
y
),
strokeWidth
:
drawWidth
strokeWidth
:
drawWidth
,
});
});
break
;
break
;
case
"square"
:
//TODO:正方形(后期完善)
case
"square"
:
//TODO:正方形(后期完善)
break
;
break
;
case
"rect"
:
//长方形
case
"rectangle"
:
//长方形
// eslint-disable-next-line no-redeclare
var
left
=
mouseFrom
.
x
,
var
left
=
mouseFrom
.
x
,
top
=
mouseFrom
.
y
;
top
=
mouseFrom
.
y
;
this
.
canvasObject
=
new
fabric
.
Rect
({
canvasObject
=
new
fabric
.
Rect
({
left
:
left
,
left
:
left
,
top
:
top
,
top
:
top
,
width
:
mouseTo
.
x
-
left
,
//矩形的宽度
width
:
mouseTo
.
x
-
left
,
//矩形的宽度
height
:
mouseTo
.
y
-
top
,
//矩形的高度
height
:
mouseTo
.
y
-
top
,
//矩形的高度
fill
:
"rgba(0,0,0,.3)"
,
//填充的颜色
fill
:
"rgba(0,0,0,.3)"
,
//填充的颜色
stroke
:
"orange"
,
// 边框原色
stroke
:
"orange"
,
// 边框原色
strokeWidth
:
1
// 边框大小
strokeWidth
:
1
,
// 边框大小
});
canvasObject
.
on
(
"selected"
,
function
()
{
cvselect
=
true
;
cvunselect
=
true
;
curObjcet
=
canvasObject
;
vthis
.
selectklass
(
canvasObject
);
});
canvasObject
.
on
(
"deselected"
,
function
()
{
vthis
.
setAreaconfig
();
var
group
=
canvas
.
getObjects
();
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
confdata
.
roi
=
group
;
cvunselect
=
false
;
});
});
break
;
break
;
case
"polygon"
:
//路径绘制
case
"rightangle"
:
//直角三角形
var
left
=
mouseFrom
.
x
,
var
path
=
top
=
mouseFrom
.
y
,
"M "
+
path
=
vthis
.
path
;
mouseFrom
.
x
+
" "
+
this
.
canvasObject
=
new
fabric
.
Polygon
(
vthis
.
polygonpoint
,
{
mouseFrom
.
y
+
" L "
+
hasControls
:
false
,
mouseFrom
.
x
+
" "
+
mouseTo
.
y
+
" L "
+
mouseTo
.
x
+
" "
+
mouseTo
.
y
+
" z"
;
canvasObject
=
new
fabric
.
Path
(
path
,
{
left
:
left
,
top
:
top
,
stroke
:
color
,
stroke
:
color
,
fill
:
"rgba(255, 255, 255, 0)"
strokeWidth
:
drawWidth
,
fill
:
"rgba(255, 255, 255, 0)"
,
});
});
break
;
break
;
case
"equilateral"
:
//等边三角形
case
"equilateral"
:
//等边三角形
var
height
=
mouseTo
.
y
-
mouseFrom
.
y
;
var
height
=
mouseTo
.
y
-
mouseFrom
.
y
;
this
.
canvasObject
=
new
fabric
.
Triangle
({
canvasObject
=
new
fabric
.
Triangle
({
top
:
mouseFrom
.
y
,
top
:
mouseFrom
.
y
,
left
:
mouseFrom
.
x
,
left
:
mouseFrom
.
x
,
width
:
Math
.
sqrt
(
Math
.
pow
(
height
,
2
)
+
Math
.
pow
(
height
/
2.0
,
2
)),
width
:
Math
.
sqrt
(
Math
.
pow
(
height
,
2
)
+
Math
.
pow
(
height
/
2.0
,
2
)),
height
:
height
,
height
:
height
,
stroke
:
color
,
stroke
:
color
,
strokeWidth
:
drawWidth
,
strokeWidth
:
drawWidth
,
fill
:
"rgba(255,255,255,0)"
fill
:
"rgba(255,255,255,0)"
,
});
});
break
;
break
;
case
"isosceles"
:
case
"isosceles"
:
...
@@ -823,9 +532,9 @@ export default {
...
@@ -823,9 +532,9 @@ export default {
fontSize
:
18
,
fontSize
:
18
,
borderColor
:
"#2c2c2c"
,
borderColor
:
"#2c2c2c"
,
fill
:
color
,
fill
:
color
,
hasControls
:
false
hasControls
:
false
,
});
});
this
.
canvas
.
add
(
textbox
);
canvas
.
add
(
textbox
);
textbox
.
enterEditing
();
textbox
.
enterEditing
();
textbox
.
hiddenTextarea
.
focus
();
textbox
.
hiddenTextarea
.
focus
();
break
;
break
;
...
@@ -835,153 +544,16 @@ export default {
...
@@ -835,153 +544,16 @@ export default {
break
;
break
;
}
}
// canvasObject.index = getCanvasObjectIndex();
// canvasObject.index = getCanvasObjectIndex();
if
(
this
.
canvasObject
)
{
if
(
canvasObject
)
{
this
.
canvasObject
.
on
(
"selected"
,
function
()
{
canvasObject
.
id
=
vthis
.
uuid
();
cvselect
=
true
;
console
.
log
(
canvasObject
);
cvunselect
=
true
;
curObjcet
=
vthis
.
canvasObject
;
vthis
.
selectklass
(
vthis
.
canvasObject
);
});
this
.
canvasObject
.
on
(
"deselected"
,
function
()
{
vthis
.
setAreaconfig
();
var
group
=
vthis
.
canvas
.
getObjects
();
var
confdata
=
vthis
.
basconfig
[
vthis
.
cindex
];
confdata
.
roi
=
group
;
cvunselect
=
false
;
});
this
.
canvasObject
.
id
=
vthis
.
uuid
();
this
.
canvasObject
.
drawtype
=
drawType
;
// console.log(canvasObject);
// canvasObject.index = getCanvasObjectIndex();
// canvasObject.index = getCanvasObjectIndex();
if
(
type
!==
"init"
)
{
canvas
.
add
(
canvasObject
);
//.setActiveObject(canvasObject)
vthis
.
canvas
.
add
(
this
.
canvasObject
);
//.setActiveObject(canvasObject)
drawingObject
=
canvasObject
;
}
drawingObject
=
this
.
canvasObject
;
vthis
.
updateGroup
();
vthis
.
updateGroup
();
}
}
},
Initfab
()
{
var
vthis
=
this
;
var
deleteIcon
=
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"
;
var
img
=
document
.
createElement
(
"img"
);
//设置图形显示拖拽点样式
// if (drawType !== "polygon") {
// fabric.Object.prototype.controls.deleteControl = new fabric.Control({
// x: 0.5,
// y: -0.5,
// offsetY: -10,
// offsetX: -30,
// cursorStyle: "pointer",
// mouseUpHandler: deleteObject,
// render: renderIcon,
// cornerSize: 16
// });
// }
function
deleteObject
(
eventData
,
transform
)
{
var
target
=
transform
.
target
;
var
canvas
=
target
.
canvas
;
cvselect
=
false
;
canvas
.
remove
(
target
);
canvas
.
requestRenderAll
();
}
function
renderIcon
(
ctx
,
left
,
top
,
styleOverride
,
fabricObject
)
{
if
(
drawType
==
"polygon"
)
{
return
;
}
var
size
=
this
.
cornerSize
;
ctx
.
save
();
ctx
.
translate
(
left
,
top
);
ctx
.
rotate
(
fabric
.
util
.
degreesToRadians
(
fabricObject
.
angle
));
ctx
.
drawImage
(
img
,
-
size
/
2
,
-
size
/
2
,
size
,
size
);
ctx
.
restore
();
}
img
.
src
=
deleteIcon
;
window
.
zoom
=
window
.
zoom
?
window
.
zoom
:
1
;
this
.
canvas
=
new
fabric
.
Canvas
(
"main"
,
{});
this
.
canvas
.
selectionColor
=
"rgba(0,0,0,0)"
;
this
.
canvas
.
on
(
"mouse:down"
,
function
(
options
)
{
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseFrom
.
x
=
xy
.
x
;
mouseFrom
.
y
=
xy
.
y
;
// drawing();
if
(
drawType
==
"polygon"
)
{
let
e
=
options
;
this
.
skipTargetFind
=
false
;
try
{
// 此段为判断是否闭合多边形,点击红点时闭合多边形
if
(
vthis
.
pointArray
.
length
>
1
)
{
// e.target.id == this.pointArray[0].id 表示点击了初始红点
console
.
log
(
e
.
target
);
if
(
e
.
target
&&
e
.
target
.
id
==
vthis
.
pointArray
[
0
].
id
)
{
vthis
.
generatePolygon
();
}
}
//未点击红点则继续作画
if
(
vthis
.
polygonMode
)
{
vthis
.
addPoint
(
e
);
}
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
if
(
!
cvselect
)
{
doDrawing
=
true
;
}
else
{
if
(
!
cvunselect
)
{
cvselect
=
false
;
}
}
});
this
.
canvas
.
on
(
"mouse:up"
,
function
(
options
)
{
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
drawingObject
=
null
;
moveCount
=
1
;
doDrawing
=
false
;
});
this
.
canvas
.
on
(
"mouse:move"
,
function
(
options
)
{
if
(
drawType
==
"polygon"
)
{
if
(
vthis
.
activeLine
&&
vthis
.
activeLine
.
class
==
"line"
)
{
var
pointer
=
vthis
.
canvas
.
getPointer
(
options
.
e
);
vthis
.
activeLine
.
set
({
x2
:
pointer
.
x
,
y2
:
pointer
.
y
});
var
points
=
vthis
.
activeShape
.
get
(
"points"
);
points
[
vthis
.
pointArray
.
length
]
=
{
x
:
pointer
.
x
,
y
:
pointer
.
y
,
zIndex
:
1
};
vthis
.
activeShape
.
set
({
points
:
points
});
vthis
.
canvas
.
renderAll
();
}
vthis
.
canvas
.
renderAll
();
return
false
;
}
if
(
moveCount
%
2
&&
!
doDrawing
)
{
//减少绘制频率
return
;
}
moveCount
++
;
var
xy
=
transformMouse
(
options
.
e
.
offsetX
,
options
.
e
.
offsetY
);
mouseTo
.
x
=
xy
.
x
;
mouseTo
.
y
=
xy
.
y
;
vthis
.
drawing
(
"draw"
);
});
function
transformMouse
(
mouseX
,
mouseY
)
{
return
{
x
:
mouseX
/
window
.
zoom
,
y
:
mouseY
/
window
.
zoom
};
}
}
}
},
},
created
()
{},
mounted
()
{
this
.
basedocument
=
$
.
parseXML
(
xml
);
}
};
};
</
script
>
</
script
>
...
@@ -1032,7 +604,8 @@ button {
...
@@ -1032,7 +604,8 @@ button {
top
:
0
;
top
:
0
;
left
:
0
;
left
:
0
;
border
:
1px
solid
#ccc
;
border
:
1px
solid
#ccc
;
background-size
:
100%
100%
;
background
:
url("../../../../assets/img/home/bk.png")
no-repeat
;
background-size
:
100%
100%
;
}
}
.pic
img
{
.pic
img
{
...
@@ -1054,7 +627,6 @@ button {
...
@@ -1054,7 +627,6 @@ button {
overflow-y
:
auto
;
overflow-y
:
auto
;
display
:
flex
;
display
:
flex
;
flex-direction
:
row
;
flex-direction
:
row
;
text-align
:
center
;
}
}
.configbox
{
.configbox
{
height
:
230px
;
height
:
230px
;
...
@@ -1076,12 +648,11 @@ button {
...
@@ -1076,12 +648,11 @@ button {
border-radius
:
3px
;
border-radius
:
3px
;
}
}
.listbox
{
.listbox
{
width
:
78
px
;
width
:
93
px
;
border
:
1px
solid
#dcdfe6
;
border
:
1px
solid
#dcdfe6
;
margin
:
0
10px
10px
0
;
height
:
35px
;
height
:
35px
;
margin
:
0
0
0
5px
;
border-radius
:
5px
;
border-radius
:
5px
;
text-align
:
center
;
}
}
.checkgrop
{
.checkgrop
{
width
:
20px
;
width
:
20px
;
...
@@ -1090,9 +661,6 @@ button {
...
@@ -1090,9 +661,6 @@ button {
}
}
.typetext
{
.typetext
{
margin
:
8px
0
0
0
;
margin
:
8px
0
0
0
;
text-align
:
center
;
width
:
100%
;
cursor
:
pointer
;
}
}
.curlist
{
.curlist
{
border
:
1px
solid
#2d8cf0
;
border
:
1px
solid
#2d8cf0
;
...
@@ -1116,34 +684,12 @@ button {
...
@@ -1116,34 +684,12 @@ button {
flex-direction
:
row
;
flex-direction
:
row
;
margin
:
10px
5px
0
0
;
margin
:
10px
5px
0
0
;
}
}
.area-item
{
.area-item
{
text-align
:
center
;
text-align
:
center
;
border-bottom
:
1px
solid
#dcdfe6
;
border-bottom
:
1px
solid
#dcdfe6
;
}
}
.activeare
{
.activeare
{
text-align
:
center
;
text-align
:
center
;
color
:
#2d8cf0
;
color
:
#2d8cf0
;
}
}
.tool
{
padding
:
5px
;
height
:
120px
;
border
:
1px
solid
#ccc
;
margin-right
:
5px
;
}
.tool-t
{
margin-bottom
:
10px
;
height
:
20px
;
width
:
20px
;
cursor
:
pointer
;
}
.tool-t
img
{
height
:
100%
;
width
:
100%
;
}
.tool-t
:nth-child
(
2
)
img
{
width
:
80%
;
height
:
80%
;
}
</
style
>
</
style
>
Write
Preview
Markdown
is supported
Attach a file
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 post a comment