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 4aaf34ab
authored
Mar 06, 2020
by
潘建波
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
提交修改BUG和任务下发
1 parent
b2e5589f
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
2957 additions
and
150 deletions
src/assets/resetElementCss/index.css
src/views/public/mapvideo2.vue
src/views/sceneManage/setting/areaconfig/TraficCanvas.vue
src/views/sceneManage/setting/areaconfig/trafficback.vue
src/views/taskManage/back.vue
src/views/taskManage/editVideo.vue
src/views/taskManage/index.vue
src/views/taskManage/subtask.vue
src/views/trafficShow/alarmEvent.vue
src/assets/resetElementCss/index.css
View file @
4aaf34a
...
...
@@ -12,7 +12,7 @@
font-size
:
16px
;
}
#login
.el-form-item--mini.el-form-item
,
.el-form-item--small.el-form-item
{
margin-bottom
:
28px
!important
;
/* margin-bottom: 28px!important; */
}
.el-main
{
padding
:
0
;
...
...
src/views/public/mapvideo2.vue
View file @
4aaf34a
...
...
@@ -83,9 +83,9 @@ export default {
},
beforeDestroy
:
function
()
{
if
(
this
.
videoplayer
.
techName_
==
"Flash"
&&
this
.
videoplayer
.
pause
)
{
this
.
videoplayer
.
pause
();
}
//
if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
//
this.videoplayer.pause();
//
}
}
};
...
...
src/views/sceneManage/setting/areaconfig/TraficCanvas.vue
View file @
4aaf34a
This diff could not be displayed because it is too large.
src/views/sceneManage/setting/areaconfig/trafficback.vue
0 → 100644
View file @
4aaf34a
<
template
>
<div
class=
"modal-body"
>
<div
class=
"modal-lt"
>
<button
v-for=
"(item, index) in typeData"
:class=
"
{ curmodal: index == cindex }"
@click="changeLayer(index)"
:key="index"
>
{{
item
}}
</button>
</div>
<div
class=
"modal-editbox"
>
<div
class=
"modal-lb"
id=
"edit_list"
v-if=
"drawState != -1"
>
<!--
<button>
加载图片
</button>
-->
<!--
<button>
修改保存路径
</button>
-->
<!--
<button>
删除区域
</button>
-->
<el-radio-group
v-model=
"canvasState"
@
change=
"changeCanvasState"
:disabled=
"needLine || needRect"
v-show=
"drawState != 2"
>
<el-radio-button
:label=
"1"
class=
"editbtn"
>
<i
class=
"el-icon-circle-plus icon"
></i>
</el-radio-button>
<el-radio-button
:label=
"0"
class=
"editbtn"
>
<i
class=
"el-icon-edit-outline"
></i>
</el-radio-button>
</el-radio-group>
<div
v-if=
"!canvasState"
>
<span
@
click=
"delShape"
class=
"delbtn editbtn"
v-show=
"drawState != '2'"
>
<i
class=
"el-icon-delete icon"
></i>
</span>
<el-select
v-if=
"drawState == 1 && selectedShape"
v-model=
"markLineType"
@
change=
"lineChange"
>
<el-option
value=
"0"
label=
"普通车道线"
></el-option>
<el-option
value=
"7"
label=
"白实线"
></el-option>
<el-option
value=
"1"
label=
"黄实线"
></el-option>
<el-option
value=
"2"
label=
"停止线"
></el-option>
<el-option
value=
"3"
label=
"左转判定线"
></el-option>
<el-option
value=
"4"
label=
"右转判定线"
></el-option>
<el-option
value=
"5"
label=
"直行判定线"
></el-option>
<el-option
value=
"9"
label=
"左转弯弧度判定线"
></el-option>
</el-select>
<span
v-if=
"drawState == 2 && selectedShape"
>
导向类型
</span>
<el-select
v-if=
"drawState == 2 && selectedShape"
v-model=
"guidingtype"
>
<el-option
value=
"0"
label=
"直行车道"
></el-option>
<el-option
value=
"1"
label=
"左转车道"
></el-option>
<el-option
value=
"2"
label=
"右转车道"
></el-option>
<el-option
value=
"3"
label=
"直左混行"
></el-option>
<el-option
value=
"4"
label=
"直右混行"
></el-option>
<el-option
value=
"5"
label=
"左直右混行"
></el-option>
</el-select>
<span
v-if=
"drawState == 2 && selectedShape"
>
使用类型
</span>
<el-select
v-if=
"drawState == 2 && selectedShape"
v-model=
"lanuse"
>
<el-option
value=
"0"
label=
"普通车道"
></el-option>
<el-option
value=
"1"
label=
"公交车道"
></el-option>
<el-option
value=
"2"
label=
"应急车道"
></el-option>
<el-option
value=
"3"
label=
"非机动车道"
></el-option>
<el-option
value=
"4"
label=
"大货车禁行车道"
></el-option>
<el-option
value=
"5"
label=
"隔离带"
></el-option>
</el-select>
<span
v-if=
"drawState == 2 && selectedShape"
>
方向
</span>
<el-select
v-if=
"drawState == 2 && selectedShape"
v-model=
"markLineDirect"
>
<el-option
value=
"0"
label=
"去向"
></el-option>
<el-option
value=
"1"
label=
"来向"
></el-option>
<el-option
value=
"2"
label=
"双向"
></el-option>
</el-select>
<span
v-if=
"drawState == 2 && selectedShape"
>
车道号
</span>
<el-input
type=
"number"
v-model=
"lineNum"
min=
"1"
v-if=
"
((drawState == 1 &&
(markLineType == '0' ||
markLineType == '1' ||
markLineType == '7')) ||
drawState == 2) &&
selectedShape
"
></el-input>
<el-select
name=
""
v-model=
"lightInfo.type"
v-if=
"drawState == 3 && selectedShape"
>
<el-option
value=
"1"
label=
"左转灯"
></el-option>
<el-option
value=
"2"
label=
"直行灯"
></el-option>
<el-option
value=
"3"
label=
"左直灯"
></el-option>
<el-option
value=
"4"
label=
"右转灯"
></el-option>
<el-option
value=
"6"
label=
"右直灯"
></el-option>
</el-select>
<el-select
v-model=
"lightInfo.distribute"
v-if=
"drawState == 3 && selectedShape"
>
<el-option
value=
"1"
label=
"单眼灯"
></el-option>
<el-option
value=
"2"
label=
"两眼灯"
></el-option>
<el-option
value=
"3"
label=
"三眼灯"
></el-option>
</el-select>
<el-select
name=
""
v-model=
"lightInfo.shap"
v-if=
"drawState == 3 && selectedShape"
>
<el-option
value=
"1"
label=
"圆形"
></el-option>
<el-option
value=
"2"
label=
"箭头"
></el-option>
<el-option
value=
"3"
label=
"条形"
></el-option>
</el-select>
</div>
<div
class=
""
v-if=
"
!canvasState && (drawState == 6 || drawState == 7 || drawState == 8)
"
>
<el-input
v-model=
"polygon_id"
disabled=
"disabled"
type=
"text"
class=
"w120"
placeholder=
"区域ID"
></el-input>
<el-input
v-model=
"polygon_name"
disabled=
"disabled"
type=
"text"
class=
"w120 mt10"
placeholder=
"区域名称"
></el-input>
</div>
<div
v-if=
"canvasState"
sytle=
"textAlign:center"
>
<!--
<button>
撤销
</button>
-->
<el-radio-group
v-model=
"polyline"
@
change=
"polyChang"
>
<el-radio
class=
"radio"
:label=
"0"
:style=
"lineRadioStyle"
v-if=
"drawState == 1"
>
直线
</el-radio
>
<el-radio
class=
"radio"
:label=
"1"
:style=
"lineRadioStyle"
v-if=
"drawState == 1"
>
折线
</el-radio
>
</el-radio-group>
</div>
</div>
</div>
<div
class=
"modal-right"
>
<div
class=
"pic"
id=
"pic"
><img
:src=
"bgUrl"
id=
"bg"
/></div>
<div
id=
"traficCanvas"
></div>
</div>
<div
class=
"clear"
></div>
<div
id=
"line_type"
class=
"littleModel BR active"
v-if=
"smallWindow"
>
<div>
<p
v-if=
"typeFlag == 1"
>
线属性
</p>
<p
v-if=
"typeFlag == 0"
>
车道属性
</p>
<p
v-if=
"typeFlag == 2"
>
灯属性
</p>
<div
class=
"item"
>
<span
v-if=
"typeFlag != 3"
>
类型:
</span>
<div>
<el-select
v-if=
"typeFlag == 1"
v-model=
"markLineType"
>
<el-option
value=
"0"
label=
"普通车道线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"7"
label=
"白实线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"1"
label=
"黄实线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"2"
label=
"停止线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"3"
label=
"左转判定线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"4"
label=
"右转判定线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"5"
label=
"直行判定线"
v-if=
"!polyline"
></el-option>
<el-option
value=
"9"
label=
"左转弯弧度判定线"
></el-option>
</el-select>
<el-select
v-if=
"typeFlag == 0"
v-model=
"markLineType"
>
<el-option
value=
"0"
label=
"左转车道"
></el-option>
<el-option
value=
"1"
label=
"右转车道"
></el-option>
<el-option
value=
"2"
label=
"直行车道"
></el-option>
<el-option
value=
"3"
label=
"直左混行"
></el-option>
<el-option
value=
"4"
label=
"直右混行"
></el-option>
<el-option
value=
"8"
label=
"公交车道"
></el-option>
<el-option
value=
"9"
label=
"应急车道"
></el-option>
<el-option
value=
"10"
label=
"非机动车道"
></el-option>
</el-select>
<el-select
name=
""
v-model=
"lightInfo.type"
v-if=
"typeFlag == 2"
>
<el-option
value=
"1"
label=
"左转灯"
></el-option>
<el-option
value=
"2"
label=
"直行灯"
></el-option>
<el-option
value=
"3"
label=
"左直灯"
></el-option>
<el-option
value=
"4"
label=
"右转灯"
></el-option>
<el-option
value=
"6"
label=
"右直灯"
></el-option>
</el-select>
</div>
</div>
<div
class=
"item"
v-if=
"
(typeFlag == 1 &&
(markLineType == '0' ||
markLineType == '1' ||
markLineType == '7')) ||
drawState == 2
"
>
<span>
序号:
</span>
<div>
<el-input
type=
"number"
v-model=
"lineNum"
min=
"1"
></el-input>
</div>
</div>
<div
v-if=
"typeFlag == 2"
class=
"lightInfo item"
>
<span>
灯眼模式:
</span>
<div>
<el-select
v-model=
"lightInfo.distribute"
>
<el-option
value=
"1"
label=
"单眼灯"
></el-option>
<el-option
value=
"2"
label=
"两眼灯"
></el-option>
<el-option
value=
"3"
label=
"三眼灯"
></el-option>
</el-select>
</div>
</div>
<div
v-if=
"typeFlag == 2"
class=
"item"
>
<span>
形状:
</span>
<div>
<el-select
name=
""
v-model=
"lightInfo.shap"
>
<el-option
value=
"1"
label=
"圆形"
></el-option>
<el-option
value=
"2"
label=
"箭头"
></el-option>
<el-option
value=
"3"
label=
"条形"
></el-option>
</el-select>
</div>
</div>
<LightCanvas
v-if=
"typeFlag == 3"
ref=
"lightCanvas"
></LightCanvas>
</div>
<div
v-if=
"typeFlag != 3"
>
<button
@
click=
"lineTypeCancel"
>
取消
</button>
<button
@
click=
"lightLast"
v-if=
"typeFlag == 2"
>
上一步
</button>
<button
@
click=
"lineTypeBtn"
>
确定
</button>
</div>
<div
v-if=
"typeFlag == 3"
>
<button
@
click=
"lineTypeCancel"
>
取消
</button>
<button
@
click=
"childCancle"
v-if=
"lightCancle"
>
撤销
</button>
<button
@
click=
"lightNext"
v-if=
"lightNextBtn"
>
下一步
</button>
</div>
</div>
<div
class=
"pedestrian-area-attr BR"
v-if=
"curLayerstate"
>
<div
class=
"mt40"
>
<span
class=
"label"
>
ID号:
</span>
<input
type=
"text"
v-model=
"polygon_id"
/>
</div>
<div
class=
"mt10"
>
<span
class=
"label"
>
名称:
</span>
<input
type=
"text"
v-model=
"polygon_name"
/>
</div>
<div
class=
"btn-box mt40"
>
<button
@
click=
"bicyEnter"
>
确定
</button>
<button
@
click=
"curlayCancel"
>
取消
</button>
</div>
</div>
</div>
</
template
>
<
script
>
import
LightCanvas
from
"./LightCanvas"
;
export
default
{
name
:
"zoneSetting"
,
data
()
{
return
{
color
:
[
"222,50,212"
,
"24,0,254"
,
"0,254,137"
,
"255,255,0"
,
"138,43,226"
,
"241,31,8"
,
"31,151,181"
,
"3,65,76"
,
"12,222,235"
],
//线颜色
typeData
:
[
"预览"
,
"车牌检测区域"
,
"车道标志线"
,
"车道属性"
,
"红绿灯区域"
,
"对向车道"
,
"违停区域"
,
"行人检测区域"
,
"行人密度区域"
,
"异物检测区域"
],
cindex
:
0
,
//laneMark:false,
drawState
:
-
1
,
//配置项类型
lineRadioStyle
:
{
color
:
"#fff"
,
width
:
"40px"
,
margin
:
"10px 15px"
},
canvasState
:
0
,
//控制编辑/添加
polyline
:
0
,
//控制直线/折线
smallWindow
:
false
,
//控制属性弹窗
lightCancle
:
false
,
//控制属性弹窗是否显示撤销按钮
lightNextBtn
:
false
,
//控制属性弹窗是否显示下一步按钮
roadFlag
:
""
,
//标记车道线是否有修改
needRect
:
false
,
//标记是否处于划矩形状态
needLine
:
false
,
//标记是否处于划线状态
lightShootState
:
0
,
//标记选择灯区域截图起止方式,用于放大图片
layers
:
[],
//用于记录各个配置项的图层
blueLines
:
[],
//记录用于连接车道的车道线
greenLines
:
[],
//记录车道中线箭头
roads
:
[],
selectedShape
:
null
,
//当前选中图形
typeFlag
:
1
,
//选择属性弹窗状态
lineNum
:
1
,
//车道线/车道序号
curLayerstate
:
false
,
//行人检测区域属性设置
testLayerstate
:
false
,
//测试检测区域属性设置
polygon_id
:
""
,
//行人检测区域id
polygon_name
:
""
,
//行人检测区域name
markLineType
:
"0"
,
lanuse
:
'0'
,
//车道属性类型
guidingtype
:
''
,
//车道导向类型
markLineDirect
:
""
,
childUrl
:
""
,
//红绿灯区域截图
scale
:
{},
//红绿灯区域截图放大倍数
lightInfo
:
{
type
:
"1"
,
distribute
:
"1"
,
shap
:
"1"
,
delay
:
3
},
roiBody
:
{},
XMLStr
:
""
,
eventData
:[]
};
},
props
:
[
"bgUrl"
],
components
:
{
LightCanvas
},
methods
:
{
stageInit
:
function
(
params
)
{
console
.
log
(
"init1"
);
this
.
drawState
=
-
1
;
this
.
stage
=
new
Kinetic
.
Stage
({
container
:
"traficCanvas"
,
//<div>的id
width
:
800
,
//创建的舞台宽度
height
:
500
//创建的舞台高度
});
this
.
shadowLayer
=
new
Kinetic
.
Layer
({
id
:
"shadowLayer"
});
this
.
testLayer
=
new
Kinetic
.
Layer
({
id
:
"testLayer"
,
name
:
"layer"
});
this
.
lineLayer
=
new
Kinetic
.
Layer
({
id
:
"lineLayer"
,
name
:
"layer"
});
this
.
roadLayer
=
new
Kinetic
.
Layer
({
id
:
"roadLayer"
,
name
:
"layer"
});
this
.
lightLayer
=
new
Kinetic
.
Layer
({
id
:
"lightLayer"
,
name
:
"layer"
});
this
.
subtendLayer
=
new
Kinetic
.
Layer
({
id
:
"subtendLayer"
,
name
:
"layer"
});
this
.
noStopLayer
=
new
Kinetic
.
Layer
({
id
:
"noStopLayer"
,
name
:
"layer"
});
this
.
bicyLayer
=
new
Kinetic
.
Layer
({
//行人检测区域
id
:
"bicyLayer"
,
name
:
"layer"
});
this
.
densityLayer
=
new
Kinetic
.
Layer
({
//密度
id
:
'densityLayer'
,
name
:
"layer"
});
this
.
foreignLayer
=
new
Kinetic
.
Layer
({
//异物
id
:
'foreignLayer'
,
name
:
"layer"
});
this
.
testRegionLayer
=
new
Kinetic
.
Layer
({
//测试检测区域
id
:
'testRegionLayer'
,
name
:
"layer"
});
let
shadow
=
new
Kinetic
.
Rect
({
x
:
0
,
//矩形左上角x坐标
y
:
0
,
//矩形左上角y坐标
width
:
800
,
//矩形的宽度
height
:
500
,
//矩形的高度
fill
:
"rgba(255,255,255,.2)"
,
//矩形的填充色
stroke
:
"black"
,
//矩形边缘线的颜色
strokeWidth
:
3
//矩形边缘线的宽度
});
let
that
=
this
;
this
.
stage
.
on
(
"click"
,
function
(
evt
)
{
that
.
stageClick
(
evt
);
});
this
.
stage
.
on
(
"dblclick"
,
function
(
evt
)
{
if
(
that
.
polyline
)
{
let
pos
=
{
x
:
evt
.
evt
.
offsetX
,
y
:
evt
.
evt
.
offsetY
};
that
.
lineStop
(
that
.
layers
[
1
],
pos
);
that
.
smallWindow
=
true
;
}
});
this
.
stage
.
on
(
"mousemove"
,
function
(
evt
)
{
that
.
stageMouseMove
(
evt
);
});
this
.
shadowLayer
.
add
(
shadow
);
this
.
stage
.
add
(
this
.
shadowLayer
);
this
.
stage
.
add
(
this
.
testLayer
);
this
.
stage
.
add
(
this
.
lineLayer
);
this
.
stage
.
add
(
this
.
roadLayer
);
this
.
stage
.
add
(
this
.
lightLayer
);
this
.
stage
.
add
(
this
.
bicyLayer
);
this
.
stage
.
add
(
this
.
subtendLayer
);
this
.
stage
.
add
(
this
.
noStopLayer
);
this
.
stage
.
add
(
this
.
densityLayer
);
this
.
stage
.
add
(
this
.
foreignLayer
);
this
.
stage
.
add
(
this
.
testRegionLayer
)
this
.
layers
=
[
this
.
testLayer
,
this
.
lineLayer
,
this
.
roadLayer
,
this
.
lightLayer
,
this
.
subtendLayer
,
this
.
noStopLayer
,
this
.
bicyLayer
,
this
.
densityLayer
,
this
.
foreignLayer
,
this
.
testRegionLayer
];
},
//还原配置
configInit
:
function
(
xml
)
{
let
obj
=
this
.
oParse
.
parseXML
(
xml
).
roi
;
let
that
=
this
;
console
.
log
(
obj
);
//检测区域
// console.log(obj)
let
testAry
=
obj
.
flow_roi
.
flow_region
.
point
;
let
testRect
=
[];
try
{
testAry
.
forEach
((
ele
,
index
)
=>
{
testRect
.
push
(
ele
.
x
*
800
);
testRect
.
push
(
ele
.
y
*
500
);
});
let
line
=
this
.
drawRect
(
"morePoints"
,
testRect
,
this
.
color
[
0
]);
this
.
testLayer
.
add
(
line
);
}
catch
(
error
)
{
console
.
log
(
error
);
}
//车道线
try
{
console
.
log
(
obj
.
lane_line
);
let
normalLines
=
obj
.
lane_line
.
line
;
if
(
!
normalLines
.
length
)
{
normalLines
=
[
normalLines
];
}
normalLines
.
forEach
(
ele
=>
{
let
points
=
ele
.
points
.
point
;
let
lineType
=
ele
.
line_type
;
let
color
=
"24,0,254"
;
console
.
log
(
lineType
);
if
(
lineType
==
1
)
{
color
=
"255,255,0"
;
}
else
if
(
lineType
==
2
)
{
color
=
"255,0,0"
;
}
else
if
(
lineType
==
7
)
{
color
=
"255,255,255"
;
}
else
if
(
lineType
==
3
||
lineType
==
4
||
lineType
==
5
||
lineType
==
9
)
{
color
=
"0,255,0"
;
}
let
ary
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
ary
.
push
(
points
[
i
].
x
*
800
);
ary
.
push
(
points
[
i
].
y
*
500
);
}
let
line
=
this
.
drawLine
(
"morePoints"
,
ary
,
color
);
line
.
line_type
=
ele
.
line_type
;
if
(
line
.
line_type
==
0
||
line
.
line_type
==
1
||
line
.
line_type
==
7
)
{
this
.
blueLines
.
push
(
line
);
}
this
.
lineLayer
.
add
(
line
);
});
}
catch
(
e
)
{
//TODO handle the exception
console
.
log
(
e
);
}
//车道和行人
if
(
obj
.
median_lines
.
lane_count
>
0
)
{
let
ary
=
obj
.
median_lines
.
lane
;
if
(
!
ary
.
length
)
{
ary
=
[
ary
];
}
try
{
ary
.
forEach
((
ele
,
index
)
=>
{
// if (ele.lane_type == "12") {
// let points = [];
// ele.lane_polygon.point.forEach((ele, index) => {
// points.push(ele.x * 800);
// points.push(ele.y * 500);
// });
// let rect = this.drawRect("morePoints", points, this.color[4]);
// this.bicyLayer.add(rect);
// } else
if
(
ele
.
lane_type
==
"11"
)
{
let
points
=
[];
ele
.
lane_polygon
.
point
.
forEach
((
ele
,
index
)
=>
{
points
.
push
(
ele
.
x
*
800
);
points
.
push
(
ele
.
y
*
500
);
});
let
rect
=
this
.
drawRect
(
"morePoints"
,
points
,
this
.
color
[
5
]);
this
.
subtendLayer
.
add
(
rect
);
}
else
{
let
points
=
ele
.
line
.
point
;
let
group
=
new
Kinetic
.
Group
({
name
:
"arr"
});
let
line
=
this
.
drawLine
(
{
x
:
points
[
0
].
x
*
800
,
y
:
points
[
0
].
y
*
500
},
{
x
:
points
[
1
].
x
*
800
,
y
:
points
[
1
].
y
*
500
},
this
.
color
[
2
]
);
this
.
greenLines
[
ele
.
lane_seq
-
1
]
=
line
;
let
cPoints
,
direct
;
if
(
points
[
0
].
y
<
points
[
1
].
y
)
{
cPoints
=
[
points
[
0
].
x
*
800
,
points
[
0
].
y
*
500
,
points
[
1
].
x
*
800
,
points
[
1
].
y
*
500
];
direct
=
"1"
;
}
else
{
cPoints
=
[
points
[
1
].
x
*
800
,
points
[
1
].
y
*
500
,
points
[
0
].
x
*
800
,
points
[
0
].
y
*
500
];
direct
=
"0"
;
}
this
.
drawArrow
(
[
points
[
0
].
x
*
800
,
points
[
0
].
y
*
500
],
[
points
[
1
].
x
*
800
,
points
[
1
].
y
*
500
],
30
,
20
,
3
,
this
.
color
[
2
],
this
.
roadLayer
,
group
,
line
);
let
arrs
=
this
.
roadLayer
.
get
(
".arr"
);
let
arr
=
arrs
[
arrs
.
length
-
1
];
line
.
index
=
ele
.
lane_no
;
let
lane_guid_type
=
0
;
let
lane_use
=
0
;
if
(
obj
.
lanes
.
lane_count
==
1
){
lane_guid_type
=
obj
.
lanes
.
lane
.
lane_guiding_type
lane_use
=
obj
.
lanes
.
lane
.
lane_use_type
}
else
{
lane_guid_type
=
obj
.
lanes
.
lane
[
index
].
lane_guiding_type
;
lane_use
=
obj
.
lanes
.
lane
[
index
].
lane_use_type
}
this
.
roads
[
parseInt
(
ele
.
lane_seq
-
1
)]
=
{
type
:
ele
.
lane_type
,
index
:
ele
.
lane_no
,
direct
:
direct
,
lane_guiding_type
:
obj
.
lanes
.
lane
[
index
].
lane_guiding_type
,
lane_use_type
:
obj
.
lanes
.
lane
[
index
].
lane_use_type
};
}
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
//红绿灯
try
{
let
ary
=
obj
.
lights
.
light
;
if
(
!
ary
.
length
)
{
ary
=
[
ary
];
}
ary
.
forEach
((
ele
,
index
)
=>
{
let
points
=
ele
.
light_regions
.
light_region
;
let
left
=
points
.
left
*
800
;
let
top
=
points
.
top
*
500
;
let
right
=
points
.
right
*
800
;
let
bottom
=
points
.
bottom
*
500
;
let
pointsAry
=
[
left
,
top
,
left
,
bottom
,
right
,
bottom
,
right
,
top
];
let
rect
=
this
.
drawRect
(
"morePoints"
,
pointsAry
,
this
.
color
[
3
]);
let
linghtRoi
=
{
light_region_seq
:
1
,
top
:
(
top
/
500
).
toFixed
(
6
),
right
:
(
right
/
800
).
toFixed
(
6
),
bottom
:
(
bottom
/
500
).
toFixed
(
6
),
left
:
(
left
/
800
).
toFixed
(
6
)
};
(
rect
.
light_seq
=
index
+
1
),
(
rect
.
light_type
=
ele
.
light_type
),
(
rect
.
light_distribute
=
ele
.
light_distribute
),
(
rect
.
light_shape
=
ele
.
light_shape
),
(
rect
.
light_delay
=
ele
.
light_yellow_delay
||
ele
.
light_yellow_interval
),
(
rect
.
light_regions
=
{
light_region_count
:
1
,
light_region
:
linghtRoi
});
this
.
lightLayer
.
add
(
rect
);
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
//违停区域
let
noStopAry
=
obj
.
no_stop_region
.
no_stop_polygon
;
console
.
log
(
noStopAry
);
try
{
if
(
!
noStopAry
.
length
)
{
noStopAry
=
[
noStopAry
];
}
noStopAry
.
forEach
(
ele
=>
{
let
points
=
ele
.
point
;
let
noStopRect
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
const
point
=
points
[
i
];
noStopRect
.
push
(
point
.
x
*
800
);
noStopRect
.
push
(
point
.
y
*
500
);
}
let
line
=
this
.
drawRect
(
"morePoints"
,
noStopRect
,
this
.
color
[
5
]);
this
.
noStopLayer
.
add
(
line
);
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
//行人检测区域
try
{
let
bicyarr
=
obj
.
pedestrian_detection_region
.
polygon
;
if
(
!
bicyarr
.
length
)
{
bicyarr
=
[
bicyarr
];
}
bicyarr
.
forEach
(
ele
=>
{
let
points
=
ele
.
point
;
let
bicRect
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
const
point
=
points
[
i
];
bicRect
.
push
(
point
.
x
*
800
);
bicRect
.
push
(
point
.
y
*
500
);
}
let
rect
=
this
.
drawRect
(
"morePoints"
,
bicRect
,
this
.
color
[
6
]);
rect
.
polygon_name
=
ele
.
polygon_name
;
rect
.
polygon_id
=
ele
.
polygon_id
;
this
.
bicyLayer
.
add
(
rect
);
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
//行人密度区域
try
{
let
densityarr
=
obj
.
pedestrian_density_region
.
polygon
;
if
(
!
densityarr
.
length
)
{
densityarr
=
[
densityarr
];
}
densityarr
.
forEach
(
ele
=>
{
let
points
=
ele
.
point
;
let
densityRect
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
const
point
=
points
[
i
];
densityRect
.
push
(
point
.
x
*
800
);
densityRect
.
push
(
point
.
y
*
500
);
}
let
rect
=
this
.
drawRect
(
"morePoints"
,
densityRect
,
this
.
color
[
7
]);
rect
.
polygon_name
=
ele
.
polygon_name
;
rect
.
polygon_id
=
ele
.
polygon_id
;
this
.
densityLayer
.
add
(
rect
);
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
//异物检测区域
try
{
let
foreignarr
=
obj
.
foreign_detection_region
.
polygon
;
if
(
!
foreignarr
.
length
)
{
foreignarr
=
[
foreignarr
];
}
foreignarr
.
forEach
(
ele
=>
{
let
points
=
ele
.
point
;
let
foreignRect
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
const
point
=
points
[
i
];
foreignRect
.
push
(
point
.
x
*
800
);
foreignRect
.
push
(
point
.
y
*
500
);
}
let
rect
=
this
.
drawRect
(
"morePoints"
,
foreignRect
,
this
.
color
[
8
]);
rect
.
polygon_name
=
ele
.
polygon_name
;
rect
.
polygon_id
=
ele
.
polygon_id
;
this
.
foreignLayer
.
add
(
rect
);
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
//测试检测区域
try
{
let
testarr
=
obj
.
test_result_region
.
polygon
;
if
(
!
testarr
.
length
)
{
testarr
=
[
testarr
];
}
testarr
.
forEach
(
ele
=>
{
let
points
=
ele
.
point
;
let
bicRect
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
++
)
{
const
point
=
points
[
i
];
bicRect
.
push
(
point
.
x
*
800
);
bicRect
.
push
(
point
.
y
*
500
);
}
let
rect
=
this
.
drawRect
(
"morePoints"
,
bicRect
,
this
.
color
[
9
]);
rect
.
polygon_name
=
ele
.
polygon_name
;
rect
.
polygon_id
=
ele
.
polygon_id
;
this
.
testRegionLayer
.
add
(
rect
);
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
this
.
selectedShape
=
null
;
this
.
drawRoad
();
console
.
log
(
this
.
stage
);
this
.
stage
.
draw
();
},
//切换编辑、添加状态
changeCanvasState
:
function
()
{
if
(
this
.
canvasState
)
{
this
.
cancleSelectedGroup
();
}
if
(
this
.
drawState
==
1
)
{
this
.
lineNum
=
this
.
blueLines
.
length
+
1
;
}
else
if
(
this
.
drawState
==
2
)
{
this
.
lineNum
=
this
.
roads
.
length
+
1
;
}
this
.
selectedShape
=
null
;
this
.
markLineType
=
"0"
;
this
.
lightInfo
.
type
=
"1"
;
},
//切换配置项
changeLayer
:
function
(
index
)
{
this
.
cindex
=
index
;
if
(
this
.
needRect
||
this
.
needLine
)
{
let
shape
=
this
.
needRect
?
"区域"
:
"线段"
;
this
.
$message
({
type
:
"error"
,
message
:
"当前"
+
shape
+
"配置未完成"
});
return
;
}
if
(
this
.
smallWindow
)
{
this
.
$message
({
type
:
"error"
,
message
:
"当前属性配置未完成"
});
return
;
}
this
.
layers
.
forEach
(
ele
=>
{
ele
.
setVisible
(
false
);
});
if
(
this
.
drawState
!=
-
1
)
{
this
.
cancleSelectedGroup
();
}
this
.
canvasState
=
0
;
this
.
polyline
=
0
;
this
.
polygon_name
=
""
;
this
.
polygon_id
=
""
;
var
e
=
e
||
window
.
event
;
switch
(
index
-
1
)
{
case
-
1
:
this
.
layers
.
forEach
(
ele
=>
{
ele
.
setVisible
(
true
);
});
this
.
drawRoad
();
this
.
stage
.
draw
();
break
;
case
1
:
this
.
typeFlag
=
1
;
this
.
lineNum
=
this
.
blueLines
.
length
+
1
||
1
;
break
;
case
2
:
this
.
typeFlag
=
0
;
this
.
drawRoad
();
break
;
}
this
.
drawState
=
index
-
1
;
// this.layers[this.drawState].moveToTop()
if
(
index
)
{
console
.
log
(
this
.
drawState
);
this
.
layers
[
this
.
drawState
].
setVisible
(
true
);
this
.
layers
[
this
.
drawState
].
draw
();
}
},
//切换直线/折线
polyChang
:
function
()
{
if
(
this
.
polyline
)
{
this
.
markLineType
=
"9"
;
}
else
{
this
.
markLineType
=
"0"
;
}
},
//点击配置区域
stageClick
:
function
(
evt
)
{
if
(
this
.
drawState
==
-
1
)
{
this
.
$message
({
type
:
"info"
,
message
:
"预览模式下无法操作!"
});
return
;
}
if
(
this
.
canvasState
)
{
//点中空白区域添加图形
if
(
this
.
smallWindow
)
return
;
this
.
addShape
(
evt
);
}
else
{
//点击图形选中
this
.
cancleSelectedGroup
();
if
(
evt
.
target
.
className
!=
"Rect"
)
{
let
tar
=
evt
.
target
;
if
(
this
.
drawState
==
"2"
&&
tar
.
attrs
.
name
!=
"rect"
)
{
return
;
}
this
.
makeSelectedGroup
(
tar
);
}
}
},
//添加图形
addShape
:
function
(
evt
)
{
let
pos
=
{
x
:
evt
.
evt
.
offsetX
,
y
:
evt
.
evt
.
offsetY
};
let
layer
=
this
.
layers
[
this
.
drawState
];
switch
(
this
.
drawState
)
{
case
0
:
let
testRects
=
layer
.
get
(
".rect"
);
if
(
testRects
.
length
&&
!
this
.
needRect
)
{
this
.
$message
({
type
:
"error"
,
message
:
"只允许设置一个车牌检测区域"
});
return
;
}
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
1
:
if
(
this
.
roadFlag
)
{
this
.
roadFlag
=
false
;
}
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
break
;
case
3
:
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
4
:
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
6
:
let
rects
=
layer
.
get
(
".rect"
);
if
(
rects
.
length
>
1
&&
!
this
.
needRect
)
{
this
.
$message
({
type
:
"error"
,
message
:
"只允许设置两个行人检测区域"
});
return
;
}
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
5
:
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
7
:
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
8
:
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
case
9
:
if
(
this
.
needRect
)
{
this
.
endChangeShape
(
evt
);
}
else
{
this
.
needRect
=
true
;
this
.
startChangeShape
(
pos
,
layer
,
this
.
color
[
this
.
drawState
]);
}
break
;
default
:
break
;
}
},
//改变选中图形样式
makeSelectedGroup
:
function
(
shape
)
{
console
.
log
(
shape
);
let
points
=
shape
.
attrs
.
points
;
let
lineType
=
shape
.
line_type
;
let
color
=
this
.
color
[
this
.
drawState
];
if
(
this
.
drawState
==
2
)
{
this
.
lineNum
=
this
.
roads
[
shape
.
roadIndex
].
index
;
this
.
markLineType
=
this
.
roads
[
shape
.
roadIndex
].
type
;
this
.
markLineDirect
=
this
.
roads
[
shape
.
roadIndex
].
direct
;
this
.
guidingtype
=
this
.
roads
[
shape
.
roadIndex
].
lane_guiding_type
;
this
.
lanuse
=
this
.
roads
[
shape
.
roadIndex
].
lane_use_type
||
'0'
;
shape
.
setFill
(
"rgba("
+
this
.
color
[
1
]
+
",0.3)"
);
let
gLine
=
this
.
greenLines
[
shape
.
roadIndex
];
if
(
gLine
.
getParent
().
attrs
.
name
==
"arr"
)
{
gLine
.
getParent
().
destroy
();
this
.
roadLayer
.
add
(
gLine
);
}
}
else
{
if
(
this
.
drawState
==
1
)
{
let
index
=
this
.
blueLines
.
indexOf
(
shape
);
if
(
lineType
==
0
)
{
color
=
"0,0,255"
;
}
else
if
(
lineType
==
1
)
{
color
=
"255,255,0"
;
}
else
if
(
lineType
==
2
)
{
color
=
"255,0,0"
;
}
else
if
(
lineType
==
7
)
{
color
=
"255,255,255"
;
}
else
{
color
=
"0,255,0"
;
}
if
(
index
>
-
1
)
{
this
.
blueLines
.
splice
(
index
,
1
);
}
else
{
index
=
this
.
blueLines
.
length
;
}
this
.
lineNum
=
index
+
1
;
}
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
const
pos
=
{
x
:
points
[
i
],
y
:
points
[
i
+
1
]
};
let
cir
=
this
.
drawCircle
(
pos
,
color
,
5
);
this
.
layers
[
this
.
drawState
].
add
(
cir
);
}
}
if
(
this
.
drawState
==
1
)
{
this
.
markLineType
=
shape
.
line_type
;
}
else
if
(
this
.
drawState
==
3
)
{
this
.
lightInfo
=
{
type
:
shape
.
light_type
,
shap
:
shape
.
light_shape
,
distribute
:
shape
.
light_distribute
,
delay
:
shape
.
light_delay
};
}
else
if
(
this
.
drawState
==
6
||
this
.
drawState
==
7
||
this
.
drawState
==
8
)
{
this
.
polygon_name
=
shape
.
polygon_name
;
this
.
polygon_id
=
shape
.
polygon_id
;
}
this
.
selectedShape
=
shape
;
this
.
layers
[
this
.
drawState
].
draw
();
},
//取消选中图形样式
cancleSelectedGroup
:
function
(
isdel
)
{
if
(
!
this
.
selectedShape
)
return
;
let
cirs
=
this
.
layers
[
this
.
drawState
].
get
(
".circle"
);
for
(
let
i
=
0
;
i
<
cirs
.
length
;
i
++
)
{
const
cir
=
cirs
[
i
];
cir
.
destroy
();
}
if
(
this
.
drawState
==
1
)
{
if
(
(
this
.
markLineType
==
"0"
||
this
.
markLineType
==
"1"
||
this
.
markLineType
==
"7"
)
&&
!
isdel
)
{
this
.
blueLines
.
splice
(
this
.
lineNum
-
1
,
0
,
this
.
selectedShape
);
this
.
lineNum
++
;
this
.
roadFlag
=
false
;
}
this
.
selectedShape
.
line_type
=
this
.
markLineType
;
}
else
if
(
this
.
drawState
==
2
)
{
console
.
log
(
this
.
selectedShape
);
let
road
=
this
.
roads
[
this
.
selectedShape
.
roadIndex
];
road
.
type
=
this
.
markLineType
;
road
.
index
=
this
.
lineNum
;
road
.
lane_use_type
=
this
.
lanuse
;
road
.
lane_guiding_type
=
this
.
guidingtype
;
this
.
selectedShape
.
setFill
(
"rgba(255,255,255,0)"
);
if
(
this
.
markLineDirect
!=
undefined
)
{
road
.
direct
=
this
.
markLineDirect
;
road
.
cPoints
=
this
.
sortLinePoints
(
road
.
cPoints
);
let
points
;
if
(
this
.
markLineDirect
==
"0"
)
{
points
=
[
road
.
cPoints
[
2
],
road
.
cPoints
[
3
],
road
.
cPoints
[
0
],
road
.
cPoints
[
1
]
];
}
else
{
points
=
road
.
cPoints
;
}
let
line
=
this
.
greenLines
[
this
.
selectedShape
.
roadIndex
];
let
group
=
new
Kinetic
.
Group
({
name
:
"arr"
});
this
.
drawArrow
(
[
points
[
0
],
points
[
1
]],
[
points
[
2
],
points
[
3
]],
30
,
20
,
3
,
this
.
color
[
2
],
this
.
roadLayer
,
group
,
line
);
}
}
else
if
(
this
.
drawState
==
3
)
{
this
.
selectedShape
.
light_type
=
this
.
lightInfo
.
type
;
this
.
selectedShape
.
light_shape
=
this
.
lightInfo
.
shap
;
this
.
selectedShape
.
light_distribute
=
this
.
lightInfo
.
distribute
;
this
.
selectedShape
.
light_delay
=
this
.
lightInfo
.
delay
;
}
this
.
selectedShape
=
null
;
this
.
markLineType
=
"0"
;
this
.
lightInfo
=
{
type
:
"1"
,
distribute
:
"1"
,
shap
:
"1"
,
delay
:
3
};
this
.
layers
[
this
.
drawState
].
draw
();
},
//开始绘制图形(第一次点击)
startChangeShape
:
function
(
pos
,
layer
,
col
)
{
let
ary
=
layer
.
get
(
".circle"
);
if
(
this
.
drawState
==
0
||
this
.
drawState
==
3
||
this
.
drawState
==
4
||
this
.
drawState
==
5
||
this
.
drawState
==
6
||
this
.
drawState
==
7
||
this
.
drawState
==
8
||
this
.
drawState
==
9
)
{
let
rect
=
this
.
drawRect
(
pos
,
pos
,
col
);
rect
.
moveToBottom
();
layer
.
add
(
rect
);
}
else
{
if
(
ary
.
length
==
0
&&
!
this
.
needLine
)
{
let
circle
=
this
.
drawCircle
(
pos
,
"rgba(255,255,255,.2)"
);
layer
.
add
(
circle
);
this
.
needLine
=
true
;
let
line
=
this
.
drawLine
(
pos
,
pos
,
col
);
this
.
selectedShape
=
line
;
layer
.
add
(
line
);
}
else
{
if
(
this
.
polyline
)
{
let
lines
=
layer
.
get
(
".line"
);
let
lastLine
=
lines
[
lines
.
length
-
1
];
let
points
=
lastLine
.
attrs
.
points
;
if
(
points
.
length
>=
4
)
{
points
.
push
(
pos
.
x
);
points
.
push
(
pos
.
y
);
}
lastLine
.
attrs
.
points
=
points
;
}
else
{
this
.
lineStop
(
layer
,
pos
);
this
.
smallWindow
=
true
;
}
}
}
layer
.
draw
();
},
//鼠标移动生成线、矩形
stageMouseMove
:
function
(
evt
)
{
if
(
!
this
.
needLine
&&
!
this
.
needRect
)
return
;
let
pos
=
{
x
:
evt
.
evt
.
offsetX
,
y
:
evt
.
evt
.
offsetY
};
let
layer
=
this
.
layers
[
this
.
drawState
];
if
(
this
.
needLine
)
{
let
lines
;
if
(
this
.
drawState
==
2
)
{
lines
=
layer
.
get
(
".centerLine"
);
}
else
{
lines
=
layer
.
get
(
".line"
);
}
let
points
=
lines
[
lines
.
length
-
1
].
attrs
.
points
;
points
[
points
.
length
-
2
]
=
pos
.
x
;
points
[
points
.
length
-
1
]
=
pos
.
y
;
}
else
if
(
this
.
needRect
)
{
let
rects
=
layer
.
get
(
".rect"
);
let
rect
=
rects
[
rects
.
length
-
1
];
rect
.
moveToBottom
();
rect
.
attrs
.
points
[
3
]
=
pos
.
y
;
rect
.
attrs
.
points
[
4
]
=
pos
.
x
;
(
rect
.
attrs
.
points
[
5
]
=
pos
.
y
),
pos
;
rect
.
attrs
.
points
[
6
]
=
pos
.
x
;
}
layer
.
draw
();
},
//结束一个图形配置
endChangeShape
:
function
(
evt
)
{
evt
.
cancelBubble
=
true
;
if
(
!
this
.
needRect
)
return
;
this
.
needRect
=
false
;
if
(
this
.
drawState
==
3
)
{
let
layer
=
this
.
layers
[
this
.
drawState
];
let
rects
=
layer
.
get
(
".rect"
);
let
rect
=
rects
[
rects
.
length
-
1
];
let
points
=
rect
.
attrs
.
points
;
let
canvas
=
document
.
createElement
(
"canvas"
);
let
img
=
document
.
getElementById
(
"pic"
).
childNodes
[
0
];
console
.
log
(
img
);
let
w
=
Math
.
abs
(
points
[
0
]
-
points
[
4
]);
let
h
=
Math
.
abs
(
points
[
1
]
-
points
[
5
]);
this
.
scale
=
{
x
:
200
/
w
,
y
:
200
/
h
};
console
.
log
(
this
.
scale
);
canvas
.
width
=
w
;
canvas
.
height
=
h
;
if
(
points
[
0
]
-
points
[
4
]
>
0
&&
points
[
1
]
-
points
[
5
]
>
0
)
{
this
.
lightShootState
=
2
;
canvas
.
getContext
(
"2d"
)
.
drawImage
(
img
,
points
[
4
],
points
[
5
],
w
,
h
,
0
,
0
,
w
,
h
);
}
else
if
(
points
[
0
]
-
points
[
4
]
>
0
&&
points
[
1
]
-
points
[
5
]
<
0
)
{
this
.
lightShootState
=
3
;
canvas
.
getContext
(
"2d"
)
.
drawImage
(
img
,
points
[
6
],
points
[
7
],
w
,
h
,
0
,
0
,
w
,
h
);
}
else
if
(
points
[
0
]
-
points
[
4
]
<
0
&&
points
[
1
]
-
points
[
5
]
>
0
)
{
this
.
lightShootState
=
1
;
canvas
.
getContext
(
"2d"
)
.
drawImage
(
img
,
points
[
2
],
points
[
3
],
w
,
h
,
0
,
0
,
w
,
h
);
}
else
if
(
points
[
0
]
-
points
[
4
]
<
0
&&
points
[
1
]
-
points
[
5
]
<
0
)
{
this
.
lightShootState
=
0
;
canvas
.
getContext
(
"2d"
)
.
drawImage
(
img
,
points
[
0
],
points
[
1
],
w
,
h
,
0
,
0
,
w
,
h
);
}
console
.
log
(
this
.
lightShootState
);
this
.
typeFlag
=
3
;
// this.lineTypeShow()
this
.
smallWindow
=
true
;
let
that
=
this
;
this
.
childUrl
=
canvas
.
toDataURL
(
"image/webp"
);
setTimeout
(
function
()
{
that
.
$refs
.
lightCanvas
.
bgUrl
=
that
.
childUrl
;
that
.
$refs
.
lightCanvas
.
imgSize
(
w
,
h
);
},
0
);
layer
.
draw
();
}
if
(
this
.
drawState
==
6
||
this
.
drawState
==
7
||
this
.
drawState
==
8
)
{
this
.
curLayerstate
=
true
;
}
if
(
this
.
drawState
==
9
){
this
.
testLayerstate
=
true
;
}
},
lineChange
:
function
name
()
{
let
color
=
"blue"
;
if
(
this
.
markLineType
==
1
)
{
color
=
"yellow"
;
}
else
if
(
this
.
markLineType
==
2
)
{
color
=
"red"
;
}
else
if
(
this
.
markLineType
==
7
)
{
color
=
"white"
;
}
else
if
(
this
.
markLineType
==
3
||
this
.
markLineType
==
4
||
this
.
markLineType
==
5
||
this
.
markLineType
==
9
)
{
color
=
"rgb(0,255,0)"
;
}
this
.
selectedShape
.
attrs
.
stroke
=
color
;
this
.
lineLayer
.
draw
();
},
lineStop
:
function
(
layer
,
pos
)
{
this
.
needLine
=
false
;
let
start
=
layer
.
get
(
".circle"
)[
0
];
let
x
=
start
.
attrs
.
x
;
let
y
=
start
.
attrs
.
y
;
start
.
destroy
();
if
(
this
.
drawState
==
2
)
{
let
group
=
new
Kinetic
.
Group
({
name
:
"arr"
});
let
lines
=
layer
.
get
(
".centerLine"
);
let
line
=
lines
[
lines
.
length
-
1
];
this
.
drawArrow
(
[
x
,
y
],
[
pos
.
x
,
pos
.
y
],
30
,
20
,
3
,
this
.
color
[
2
],
layer
,
group
,
line
);
}
else
{
layer
.
draw
();
}
},
//行人检测信息/异物检测信息/测试检测区域
bicyEnter
()
{
let
curLayers
=
this
.
layers
[
this
.
drawState
].
get
(
".rect"
);
let
curlay
=
curLayers
[
curLayers
.
length
-
1
];
curlay
.
polygon_id
=
this
.
polygon_id
;
curlay
.
polygon_name
=
this
.
polygon_name
;
this
.
curLayerstate
=
false
;
//测试区域弹窗
this
.
testLayerstate
=
false
;
//清空输入框
this
.
polygon_id
=
""
;
this
.
polygon_name
=
""
;
},
curlayCancel
()
{
let
curLayers
=
this
.
layers
[
this
.
drawState
].
get
(
".rect"
);
let
curlay
=
curLayers
[
curLayers
.
length
-
1
];
curlay
.
destroy
();
console
.
log
(
curlay
);
this
.
selectedShape
=
null
;
this
.
cancleSelectedGroup
();
this
.
layers
[
this
.
drawState
].
draw
();
this
.
curLayerstate
=
false
;
//测试区域弹窗
this
.
testLayerstate
=
false
;
//清空输入框
this
.
polygon_id
=
""
;
this
.
polygon_name
=
""
;
},
//画圆
drawCircle
:
function
(
pos
,
col
,
r
)
{
let
size
=
r
||
2
;
let
circle
=
new
Kinetic
.
Circle
({
x
:
pos
.
x
,
y
:
pos
.
y
,
fill
:
"rgb("
+
col
+
")"
,
radius
:
size
,
name
:
"circle"
,
draggable
:
true
});
circle
.
on
(
"dragmove"
,
evt
=>
{
if
(
this
.
canvasState
)
return
;
evt
.
cancelBubble
=
true
;
this
.
changeRect
(
evt
);
});
return
circle
;
},
//画线
drawLine
:
function
(
start
,
end
,
col
,
width
)
{
let
points
;
if
(
start
===
"morePoints"
)
{
points
=
end
;
}
else
{
points
=
[
start
.
x
,
start
.
y
,
end
.
x
,
end
.
y
];
}
let
name
=
"line"
;
let
size
=
width
||
4
;
if
(
this
.
drawState
==
2
&&
this
.
needLine
)
{
name
=
"centerLine"
;
}
let
line
=
new
Kinetic
.
Line
({
x
:
0
,
points
:
points
,
tension
:
0
,
closed
:
false
,
stroke
:
"rgb("
+
col
+
")"
,
strokeWidth
:
size
,
name
:
name
});
return
line
;
},
//画矩形
drawRect
:
function
(
start
,
end
,
color
,
boo
)
{
let
points
,
isFill
=
true
;
if
(
boo
==
false
)
{
isFill
=
boo
;
}
if
(
start
===
"morePoints"
)
{
points
=
end
;
}
else
{
points
=
[
start
.
x
,
start
.
y
,
start
.
x
,
end
.
y
,
end
.
x
,
end
.
y
,
end
.
x
,
start
.
y
];
}
let
rect
=
new
Kinetic
.
Line
({
x
:
0
,
points
:
points
,
// tension: 0.5,
closed
:
true
,
stroke
:
"rgb("
+
color
+
")"
,
strokeWidth
:
4
,
name
:
"rect"
,
fill
:
isFill
?
"rgba("
+
color
+
",0.3)"
:
"transparent"
});
return
rect
;
},
//改变矩形
changeRect
:
function
(
evt
)
{
let
rects
=
evt
.
target
.
getParent
().
get
(
".rect"
);
let
cirs
=
evt
.
target
.
getParent
().
get
(
".circle"
);
let
points
=
[];
cirs
.
forEach
(
ele
=>
{
points
.
push
(
ele
.
attrs
.
x
);
points
.
push
(
ele
.
attrs
.
y
);
});
this
.
selectedShape
.
attrs
.
points
=
points
;
this
.
layers
[
this
.
drawState
].
draw
();
},
//删除图形
delShape
:
function
()
{
if
(
!
this
.
selectedShape
)
{
return
;
}
switch
(
this
.
drawState
)
{
case
1
:
if
(
this
.
selectedShape
.
line_type
!=
0
&&
this
.
selectedShape
.
line_type
!=
1
&&
this
.
selectedShape
.
line_type
!=
7
)
{
let
index
=
this
.
blueLines
.
indexOf
(
this
.
selectedShape
);
this
.
blueLines
.
splice
(
index
,
1
);
this
.
lineNum
=
this
.
blueLines
.
length
+
1
;
}
this
.
roadFlag
=
false
;
break
;
case
2
:
let
rindex
=
this
.
roads
.
indexOf
(
this
.
selectedShape
);
console
.
log
(
rindex
);
this
.
roads
[
rindex
]
=
""
;
break
;
case
6
:
this
.
polygon_name
=
""
;
this
.
polygon_id
=
""
;
default
:
break
;
}
this
.
selectedShape
.
destroy
();
this
.
cancleSelectedGroup
(
true
);
this
.
selectedShape
=
null
;
},
//选择线/区域属性弹窗
lineTypeCancel
:
function
()
{
if
(
this
.
drawState
==
3
)
{
let
rects
=
this
.
lightLayer
.
get
(
".rect"
);
let
rect
=
rects
[
rects
.
length
-
1
];
rect
.
destroy
();
}
else
{
this
.
selectedShape
.
destroy
();
}
this
.
selectedShape
=
null
;
this
.
cancleSelectedGroup
();
this
.
layers
[
this
.
drawState
].
draw
();
this
.
smallWindow
=
false
;
},
lineTypeBtn
:
function
()
{
this
.
smallWindow
=
false
;
let
layer
=
this
.
layers
[
this
.
drawState
];
if
(
this
.
typeFlag
==
1
)
{
let
lines
=
layer
.
get
(
".line"
);
let
line
=
lines
[
lines
.
length
-
1
];
let
color
=
"blue"
;
line
.
line_type
=
this
.
markLineType
;
if
(
this
.
markLineType
==
1
)
{
color
=
"yellow"
;
}
else
if
(
this
.
markLineType
==
2
)
{
color
=
"red"
;
}
else
if
(
this
.
markLineType
==
7
)
{
color
=
"white"
;
}
else
if
(
this
.
markLineType
==
3
||
this
.
markLineType
==
4
||
this
.
markLineType
==
5
||
this
.
markLineType
==
9
)
{
color
=
"rgb(0,255,0)"
;
}
line
.
attrs
.
stroke
=
color
;
layer
.
draw
();
if
(
this
.
markLineType
==
"0"
||
this
.
markLineType
==
"1"
||
this
.
markLineType
==
"7"
)
{
this
.
blueLines
.
splice
(
this
.
lineNum
-
1
,
0
,
lines
[
lines
.
length
-
1
]);
this
.
lineNum
++
;
}
}
else
if
(
this
.
typeFlag
==
0
)
{
if
(
this
.
roads
[
this
.
lineNum
-
1
])
{
console
.
log
(
this
.
roads
[
this
.
lineNum
-
1
]);
this
.
roads
[
this
.
lineNum
-
1
].
getParent
().
destroy
();
layer
.
draw
();
}
let
arrs
=
layer
.
get
(
".arr"
);
let
lastLine
=
arrs
[
arrs
.
length
-
1
].
children
[
0
];
lastLine
.
line_type
=
this
.
markLineType
;
lastLine
.
roadsIndex
=
this
.
lineNum
-
1
;
this
.
roads
[
this
.
lineNum
-
1
]
=
lastLine
;
this
.
lineNum
++
;
}
else
if
(
this
.
typeFlag
==
2
)
{
let
that
=
this
;
let
rects
=
layer
.
get
(
".rect"
);
let
rect
=
rects
[
rects
.
length
-
1
];
let
points
=
[];
this
.
childCirAry
.
forEach
(
ele
=>
{
let
cir
=
[];
console
.
log
(
this
.
lightShootState
);
switch
(
this
.
lightShootState
)
{
case
0
:
cir
=
[
rect
.
attrs
.
points
[
0
],
rect
.
attrs
.
points
[
1
]];
break
;
case
1
:
cir
=
[
rect
.
attrs
.
points
[
2
],
rect
.
attrs
.
points
[
3
]];
break
;
case
2
:
cir
=
[
rect
.
attrs
.
points
[
4
],
rect
.
attrs
.
points
[
5
]];
break
;
case
3
:
cir
=
[
rect
.
attrs
.
points
[
6
],
rect
.
attrs
.
points
[
7
]];
break
;
}
let
x
=
parseInt
(
ele
[
0
]
/
that
.
scale
.
x
)
+
parseInt
(
cir
[
0
]);
let
y
=
parseInt
(
ele
[
1
]
/
that
.
scale
.
y
)
+
parseInt
(
cir
[
1
]);
points
.
push
(
x
);
points
.
push
(
y
);
});
console
.
log
(
points
);
rect
.
attrs
.
points
=
points
;
layer
.
draw
();
let
length
=
points
;
let
top
=
Math
.
min
(
points
[
1
],
points
[
3
],
points
[
5
],
points
[
7
]);
let
left
=
Math
.
min
(
points
[
0
],
points
[
2
],
points
[
4
],
points
[
6
]);
let
bottom
=
Math
.
max
(
points
[
1
],
points
[
3
],
points
[
5
],
points
[
7
]);
let
right
=
Math
.
max
(
points
[
0
],
points
[
2
],
points
[
4
],
points
[
6
]);
let
linghtRoi
=
{
light_region_seq
:
1
,
top
:
(
top
/
500
).
toFixed
(
6
),
right
:
(
right
/
800
).
toFixed
(
6
),
bottom
:
(
bottom
/
500
).
toFixed
(
6
),
left
:
(
left
/
800
).
toFixed
(
6
)
};
(
rect
.
light_seq
=
this
.
lightLayer
.
get
(
"rect"
).
length
+
1
),
(
rect
.
light_type
=
this
.
lightInfo
.
type
),
(
rect
.
light_distribute
=
this
.
lightInfo
.
distribute
),
(
rect
.
light_shape
=
this
.
lightInfo
.
shap
),
(
rect
.
light_delay
=
this
.
lightInfo
.
delay
),
(
rect
.
light_regions
=
{
light_region_count
:
1
,
light_region
:
linghtRoi
});
this
.
childCirAry
=
[];
}
this
.
markLineType
=
"0"
;
this
.
lightInfo
=
{
type
:
"1"
,
distribute
:
"1"
,
shap
:
"1"
,
delay
:
3
};
this
.
selectedShape
=
null
;
},
//画箭头
drawArrow
:
function
(
c1
,
c2
,
theta
,
headlen
,
width
,
color
,
layer
,
group
,
line
)
{
theta
=
typeof
theta
!=
"undefined"
?
theta
:
30
;
headlen
=
typeof
theta
!=
"undefined"
?
headlen
:
10
;
width
=
typeof
width
!=
"undefined"
?
width
:
1
;
color
=
typeof
color
!=
"color"
?
color
:
"#000"
;
// 计算各角度和对应的P2,P3坐标
var
angle
=
(
Math
.
atan2
(
c1
[
1
]
-
c2
[
1
],
c1
[
0
]
-
c2
[
0
])
*
180
)
/
Math
.
PI
,
angle1
=
((
angle
+
theta
)
*
Math
.
PI
)
/
180
,
angle2
=
((
angle
-
theta
)
*
Math
.
PI
)
/
180
,
topX
=
headlen
*
Math
.
cos
(
angle1
),
topY
=
headlen
*
Math
.
sin
(
angle1
),
botX
=
headlen
*
Math
.
cos
(
angle2
),
botY
=
headlen
*
Math
.
sin
(
angle2
);
var
arrowX
=
c1
[
0
]
-
topX
,
arrowY
=
c1
[
1
]
-
topY
;
// let line = this.drawLine({x:c1[0],y:c1[1]},{x:c2[0],y:c2[1]},color)
line
.
attrs
.
name
=
"centerLine"
;
arrowX
=
c2
[
0
]
+
topX
;
arrowY
=
c2
[
1
]
+
topY
;
let
line1
=
this
.
drawLine
(
{
x
:
c2
[
0
],
y
:
c2
[
1
]
},
{
x
:
arrowX
,
y
:
arrowY
},
color
,
3
);
arrowX
=
c2
[
0
]
+
botX
;
arrowY
=
c2
[
1
]
+
botY
;
let
line2
=
this
.
drawLine
(
{
x
:
c2
[
0
],
y
:
c2
[
1
]
},
{
x
:
arrowX
,
y
:
arrowY
},
color
,
3
);
group
.
add
(
line
);
group
.
add
(
line1
);
group
.
add
(
line2
);
layer
.
add
(
group
);
layer
.
draw
();
},
//生成车道
drawRoad
:
function
()
{
if
(
this
.
roadFlag
===
true
)
return
;
if
(
this
.
roadFlag
===
false
)
{
this
.
$alert
(
"车道线有修改,请逐一检查车道属性是否正确"
,
"提示"
,
{
confirmButtonText
:
"确定"
});
}
let
childs
=
this
.
roadLayer
.
children
;
//清空层内非中线图形
const
num
=
childs
.
length
-
1
;
for
(
let
i
=
num
;
i
>
-
1
;
i
--
)
{
const
element
=
childs
[
i
];
element
.
destroy
();
}
this
.
roadLayer
.
draw
();
try
{
// console.log('蓝色车道线')
// console.log(this.blueLines)
this
.
blueLines
.
forEach
((
ele
,
index
)
=>
{
if
(
ele
.
attrs
.
points
[
1
]
-
ele
.
attrs
.
points
[
3
]
>
0
)
{
var
copypoint
=
Array
.
from
(
ele
.
attrs
.
points
);
ele
.
attrs
.
points
[
0
]
=
copypoint
[
2
]
ele
.
attrs
.
points
[
1
]
=
copypoint
[
3
]
ele
.
attrs
.
points
[
2
]
=
copypoint
[
0
]
ele
.
attrs
.
points
[
3
]
=
copypoint
[
1
]
// console.log('*******蓝色车道线*******')
// console.log(ele)
}
})
//车道线根据坐标排序
function
sortBlueLine
(
arr
){
var
len
=
arr
.
length
;
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
for
(
var
j
=
0
;
j
<
len
-
1
-
i
;
j
++
)
{
if
(
arr
[
j
].
attrs
.
points
[
0
]
>
arr
[
j
+
1
].
attrs
.
points
[
0
])
{
//相邻元素两两对比
var
temp
=
arr
[
j
+
1
];
//元素交换
arr
[
j
+
1
]
=
arr
[
j
];
arr
[
j
]
=
temp
;
}
}
}
return
arr
;
}
console
.
log
(
'排序后的蓝色车道线'
)
console
.
log
(
sortBlueLine
(
this
.
blueLines
))
this
.
blueLines
.
forEach
((
ele
,
index
)
=>
{
let
points
=
this
.
sortLinePoints
(
ele
.
attrs
.
points
);
if
(
index
>
0
)
{
//绘制车道
let
lastPoints
=
this
.
sortLinePoints
(
this
.
blueLines
[
index
-
1
].
attrs
.
points
);
let
num1
=
Math
.
pow
(
points
[
0
]
-
lastPoints
[
0
],
2
)
+
Math
.
pow
(
points
[
1
]
-
lastPoints
[
1
],
2
)
+
Math
.
pow
(
points
[
2
]
-
lastPoints
[
2
],
2
)
+
Math
.
pow
(
points
[
3
]
-
lastPoints
[
3
],
2
);
let
num2
=
Math
.
pow
(
points
[
0
]
-
lastPoints
[
2
],
2
)
+
Math
.
pow
(
points
[
1
]
-
lastPoints
[
3
],
2
)
+
Math
.
pow
(
points
[
2
]
-
lastPoints
[
0
],
2
)
+
Math
.
pow
(
points
[
3
]
-
lastPoints
[
1
],
2
);
let
mPoints
;
if
(
num1
<
num2
)
{
mPoints
=
points
.
concat
([
lastPoints
[
2
],
lastPoints
[
3
],
lastPoints
[
0
],
lastPoints
[
1
]
]);
}
else
{
mPoints
=
points
.
concat
([
lastPoints
[
0
],
lastPoints
[
1
],
lastPoints
[
2
],
lastPoints
[
3
]
]);
}
let
rect
=
this
.
drawRect
(
"morePoints"
,
mPoints
,
this
.
color
[
1
],
false
);
rect
.
roadIndex
=
index
-
1
;
this
.
roadLayer
.
add
(
rect
);
//绘制车道中线
if
(
!
this
.
roads
[
index
-
1
])
{
this
.
roads
[
index
-
1
]
=
{};
}
let
road
=
this
.
roads
[
index
-
1
];
let
cPoints
=
[
(
mPoints
[
0
]
+
mPoints
[
6
])
/
2
,
(
mPoints
[
1
]
+
mPoints
[
7
])
/
2
,
(
mPoints
[
2
]
+
mPoints
[
4
])
/
2
,
(
mPoints
[
3
]
+
mPoints
[
5
])
/
2
,
];
road
.
cPoints
=
cPoints
;
let
cLine
=
this
.
drawLine
(
"morePoints"
,
cPoints
,
this
.
color
[
2
]);
this
.
greenLines
[
index
-
1
]
=
cLine
;
if
(
road
.
direct
==
undefined
)
{
this
.
roadLayer
.
add
(
cLine
);
}
else
if
(
road
.
direct
==
"1"
)
{
this
.
drawArrow
(
[
cPoints
[
0
],
cPoints
[
1
]],
[
cPoints
[
2
],
cPoints
[
3
]],
30
,
20
,
3
,
this
.
color
[
2
],
this
.
roadLayer
,
new
Kinetic
.
Group
({
name
:
"arr"
}),
cLine
);
}
else
if
(
road
.
direct
==
"0"
)
{
this
.
drawArrow
(
[
cPoints
[
2
],
cPoints
[
3
]],
[
cPoints
[
0
],
cPoints
[
1
]],
30
,
20
,
3
,
this
.
color
[
2
],
this
.
roadLayer
,
new
Kinetic
.
Group
({
name
:
"arr"
}),
cLine
);
}
}
});
this
.
roadFlag
=
true
;
}
catch
(
error
)
{
console
.
log
(
error
);
}
this
.
roadLayer
.
draw
();
},
lightNext
:
function
()
{
this
.
childCirAry
=
this
.
$refs
.
lightCanvas
.
cirAry
;
this
.
typeFlag
=
2
;
},
lightLast
:
function
()
{
this
.
typeFlag
=
3
;
let
that
=
this
;
setTimeout
(
function
()
{
that
.
$refs
.
lightCanvas
.
cirAry
=
that
.
childCirAry
;
that
.
$refs
.
lightCanvas
.
bgUrl
=
that
.
childUrl
;
that
.
$refs
.
lightCanvas
.
draw
();
},
0
);
},
childCancle
:
function
()
{
this
.
$refs
.
lightCanvas
.
cancle
();
},
save
:
function
()
{
this
.
cancleSelectedGroup
();
//车牌检测区域
let
testAry
=
[];
try
{
const
testPoints
=
this
.
testLayer
.
get
(
".rect"
)[
0
].
attrs
.
points
;
for
(
let
i
=
0
;
i
<
testPoints
.
length
;
i
+=
2
)
{
testAry
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
testPoints
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
testPoints
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
}
catch
(
error
)
{}
this
.
roiBody
.
flow_roi
=
{
flow_type
:
""
,
flow_region
:
{
polygon_point_count
:
testAry
.
length
,
point
:
testAry
}
};
//新增新增
this
.
roiBody
.
plate_detect_region
=
{
detect_polygon
:
{
polygon_point_count
:
testAry
.
length
,
point
:
testAry
}
};
//车道线
let
lineAry
=
[];
try
{
this
.
blueLines
.
forEach
((
ele
,
index
)
=>
{
let
points
=
ele
.
attrs
.
points
;
lineAry
.
push
({
line_seq
:
index
+
1
,
lane_no
:
1
,
line_type
:
ele
.
line_type
,
points
:
{
point_count
:
2
,
point
:
[
{
point_seq
:
1
,
x
:
(
points
[
0
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
1
]
/
500
).
toFixed
(
6
)
},
{
point_seq
:
2
,
x
:
(
points
[
2
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
3
]
/
500
).
toFixed
(
6
)
}
]
}
});
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
try
{
this
.
lineLayer
.
get
(
".line"
).
forEach
((
ele
,
index
)
=>
{
if
(
ele
.
line_type
!=
0
&&
ele
.
line_type
!=
1
&&
ele
.
line_type
!=
7
)
{
let
points
=
ele
.
attrs
.
points
;
let
ary
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
ary
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
lineAry
.
push
({
line_seq
:
lineAry
.
length
+
1
,
lane_no
:
1
,
line_type
:
ele
.
line_type
,
points
:
{
point_count
:
points
.
length
/
2
,
point
:
ary
}
});
}
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
this
.
roiBody
.
lane_line
=
{
line_count
:
lineAry
.
length
,
line
:
lineAry
};
//车道
let
roadAry
=
[];
let
lanaAry
=
[];
console
.
log
(
this
.
roads
);
try
{
console
.
log
(
this
.
roads
);
this
.
blueLines
.
forEach
((
ele
,
index
)
=>
{
if
(
index
!=
this
.
blueLines
.
length
-
1
)
{
let
midLine
=
this
.
roads
[
index
],
points
=
midLine
.
direct
!=
"1"
?
[
midLine
.
cPoints
[
2
],
midLine
.
cPoints
[
3
],
midLine
.
cPoints
[
0
],
midLine
.
cPoints
[
1
]
]
:
midLine
.
cPoints
,
rectPoints1
=
this
.
sortLinePoints
(
ele
.
attrs
.
points
),
rectPoints2
=
this
.
sortLinePoints
(
this
.
blueLines
[
index
+
1
].
attrs
.
points
);
let
options
=
{
lane_seq
:
index
+
1
,
lane_no
:
midLine
.
index
,
line
:
{
polygon_point_count
:
2
,
point
:
[
{
point_seq
:
1
,
x
:
points
?
(
points
[
0
]
/
800
).
toFixed
(
6
)
:
""
,
y
:
points
?
(
points
[
1
]
/
500
).
toFixed
(
6
)
:
""
},
{
point_seq
:
2
,
x
:
points
?
(
points
[
2
]
/
800
).
toFixed
(
6
)
:
""
,
y
:
points
?
(
points
[
3
]
/
500
).
toFixed
(
6
)
:
""
}
]
},
direction_polygon
:
{
polygon_point_count
:
2
,
point
:
[
{
point_seq
:
1
,
x
:
points
?
(
points
[
0
]
/
800
).
toFixed
(
6
)
:
""
,
y
:
points
?
(
points
[
1
]
/
500
).
toFixed
(
6
)
:
""
},
{
point_seq
:
2
,
x
:
points
?
(
points
[
2
]
/
800
).
toFixed
(
6
)
:
""
,
y
:
points
?
(
points
[
3
]
/
500
).
toFixed
(
6
)
:
""
}
]
},
lane_polygon
:
{
polygon_point_count
:
4
,
point
:
[
{
point_seq
:
1
,
x
:
(
rectPoints1
[
2
]
/
800
).
toFixed
(
6
),
y
:
(
rectPoints1
[
3
]
/
500
).
toFixed
(
6
)
},
{
point_seq
:
2
,
x
:
(
rectPoints1
[
0
]
/
800
).
toFixed
(
6
),
y
:
(
rectPoints1
[
1
]
/
500
).
toFixed
(
6
)
},
{
point_seq
:
3
,
x
:
(
rectPoints2
[
0
]
/
800
).
toFixed
(
6
),
y
:
(
rectPoints2
[
1
]
/
500
).
toFixed
(
6
)
},
{
point_seq
:
4
,
x
:
(
rectPoints2
[
2
]
/
800
).
toFixed
(
6
),
y
:
(
rectPoints2
[
3
]
/
500
).
toFixed
(
6
)
}
]
}
};
let
linetype
=
""
;
if
(
midLine
.
lane_use_type
==
0
)
{
// linetype = this.lanuse;
switch
(
midLine
.
lane_guiding_type
)
{
case
"0"
:
linetype
=
2
;
break
;
case
"1"
:
linetype
=
0
;
break
;
case
"2"
:
linetype
=
1
;
break
;
case
"3"
:
linetype
=
3
;
break
;
case
"4"
:
linetype
=
4
;
break
;
case
"5"
:
linetype
=
5
;
break
;
default
:
break
;
}
}
else
if
(
midLine
.
lane_use_type
!=
""
&&
midLine
.
lane_use_type
!=
0
)
{
// linetype = this.lanuse;
switch
(
midLine
.
lane_use_type
)
{
case
"1"
:
linetype
=
8
;
break
;
case
"2"
:
linetype
=
9
;
break
;
case
"3"
:
linetype
=
10
;
break
;
case
"4"
:
linetype
=
""
;
break
;
case
"5"
:
linetype
=
""
;
break
;
default
:
break
;
}
}
options
.
lane_type
=
linetype
;
roadAry
.
push
(
options
);
//新增
let
L
=
JSON
.
stringify
(
options
);
let
lanaOptions
=
JSON
.
parse
(
L
);
console
.
log
(
this
.
lanuse
);
lanaOptions
.
lane_use_type
=
midLine
.
lane_use_type
;
lanaOptions
.
lane_guiding_type
=
midLine
.
lane_guiding_type
;
lanaOptions
.
lane_type
=
linetype
;
lanaOptions
.
lane_user_id
=
options
.
lane_no
;
lanaOptions
.
lane_middle_line
=
{
polygon_point_count
:
2
,
point1
:
{
x
:
points
?
(
points
[
0
]
/
800
).
toFixed
(
6
)
:
""
,
y
:
points
?
(
points
[
1
]
/
500
).
toFixed
(
6
)
:
""
},
point2
:
{
x
:
points
?
(
points
[
2
]
/
800
).
toFixed
(
6
)
:
""
,
y
:
points
?
(
points
[
3
]
/
500
).
toFixed
(
6
)
:
""
}
};
lanaOptions
.
lane_directions
=
{
lane_direction_count
:
"1"
,
lane_direction
:
{
lane_direction_type
:
midLine
.
direct
,
lane_direction_time
:
"00:00:00-23:59:59"
}
};
lanaAry
.
push
(
lanaOptions
);
}
});
}
catch
(
error
)
{
console
.
log
(
error
);
}
console
.
log
(
"#######################"
);
console
.
log
(
lanaAry
);
console
.
log
(
"#######################"
);
this
.
roiBody
.
lanes
=
{
lane_count
:
lanaAry
.
length
?
lanaAry
.
length
:
0
,
lane
:
lanaAry
?
lanaAry
:
[]
}
//对向车道
try
{
this
.
subtendLayer
.
get
(
".rect"
).
forEach
((
el
,
index
)
=>
{
let
bicAry
=
[];
let
points
=
el
.
attrs
.
points
;
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
bicAry
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
roadAry
.
push
({
lane_no
:
1
,
lane_seq
:
roadAry
.
length
+
1
,
lane_type
:
11
,
lane_polygon
:
{
polygon_point_count
:
bicAry
.
length
,
point
:
bicAry
}
});
lanaAry
.
push
({
lane_no
:
1
,
lane_seq
:
roadAry
.
length
+
1
,
lane_use_type
:
6
,
lane_type
:
11
,
lane_polygon
:
{
polygon_point_count
:
bicAry
.
length
,
point
:
bicAry
}
});
});
}
catch
(
error
)
{}
// 红绿灯区域
let
lightAry
=
[];
try
{
this
.
lightLayer
.
get
(
".rect"
).
forEach
((
ele
,
index
)
=>
{
lightAry
.
push
({
light_seq
:
index
+
1
,
light_type
:
ele
.
light_type
,
light_id
:
ele
.
light_type
,
light_distribute
:
ele
.
light_distribute
,
light_number_type
:
ele
.
light_distribute
,
light_yellow_delay
:
Number
(
ele
.
light_delay
),
light_yellow_interval
:
Number
(
ele
.
light_delay
),
light_shape
:
ele
.
light_shape
,
light_shape_type
:
ele
.
light_shape
,
light_regions
:
ele
.
light_regions
,
});
});
}
catch
(
error
)
{}
this
.
roiBody
.
lights
=
{
light_count
:
lightAry
.
length
,
light
:
lightAry
};
//违停区域
let
noStopRois
=
this
.
noStopLayer
.
get
(
".rect"
);
let
noStopAry
=
[];
try
{
noStopRois
.
forEach
((
el
,
index
)
=>
{
let
points
=
el
.
attrs
.
points
;
let
ary
=
[];
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
ary
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
noStopAry
.
push
({
polygon_seq
:
index
+
1
,
polygon_point_count
:
ary
.
length
,
point
:
ary
});
});
}
catch
(
error
)
{}
this
.
roiBody
.
no_stop_region
=
{
region_count
:
noStopAry
.
length
,
no_stop_polygon
:
noStopAry
};
//行人检测区域
let
bicArys
=
[];
try
{
this
.
bicyLayer
.
get
(
".rect"
).
forEach
((
el
,
index
)
=>
{
let
bicAry
=
[];
let
points
=
el
.
attrs
.
points
;
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
bicAry
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
roadAry
.
push
({
lane_no
:
1
,
lane_seq
:
roadAry
.
length
+
1
,
lane_type
:
12
,
lane_polygon
:
{
polygon_point_count
:
bicAry
.
length
,
point
:
bicAry
}
});
bicArys
.
push
({
polygon_id
:
el
.
polygon_id
,
polygon_name
:
el
.
polygon_name
,
polygon_point_count
:
bicAry
.
length
,
point
:
bicAry
});
});
}
catch
(
error
)
{}
this
.
roiBody
.
pedestrian_detection_region
=
{
region_count
:
bicArys
.
length
,
polygon
:
bicArys
};
this
.
roiBody
.
median_lines
=
{
lane_count
:
roadAry
.
length
?
roadAry
.
length
:
0
,
lane
:
roadAry
?
roadAry
:
[]
};
//行人密度检测区域
let
densityAry
=
[];
try
{
this
.
densityLayer
.
get
(
".rect"
).
forEach
((
el
,
index
)
=>
{
let
denAry
=
[];
let
points
=
el
.
attrs
.
points
;
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
denAry
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
densityAry
.
push
({
polygon_id
:
el
.
polygon_id
,
polygon_name
:
el
.
polygon_name
,
polygon_point_count
:
denAry
.
length
,
point
:
denAry
});
});
}
catch
(
error
)
{}
this
.
roiBody
.
pedestrian_density_region
=
{
region_count
:
densityAry
.
length
,
polygon
:
densityAry
};
//异物检测区域
let
foreignAry
=
[];
try
{
this
.
foreignLayer
.
get
(
".rect"
).
forEach
((
el
,
index
)
=>
{
let
foAry
=
[];
let
points
=
el
.
attrs
.
points
;
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
foAry
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
foreignAry
.
push
({
polygon_id
:
el
.
polygon_id
,
polygon_name
:
el
.
polygon_name
,
polygon_point_count
:
foAry
.
length
,
point
:
foAry
});
});
}
catch
(
error
)
{}
this
.
roiBody
.
foreign_detection_region
=
{
region_count
:
foreignAry
.
length
,
polygon
:
foreignAry
};
//测试检测区域
let
testRegion
=
[];
try
{
this
.
testRegionLayer
.
get
(
".rect"
).
forEach
((
el
,
index
)
=>
{
let
foAry
=
[];
let
points
=
el
.
attrs
.
points
;
for
(
let
i
=
0
;
i
<
points
.
length
;
i
+=
2
)
{
foAry
.
push
({
point_seq
:
i
/
2
+
1
,
x
:
(
points
[
i
]
/
800
).
toFixed
(
6
),
y
:
(
points
[
i
+
1
]
/
500
).
toFixed
(
6
)
});
}
testRegion
.
push
({
polygon_id
:
el
.
polygon_id
,
polygon_name
:
el
.
polygon_name
,
polygon_point_count
:
foAry
.
length
,
point
:
foAry
});
});
}
catch
(
error
)
{}
this
.
roiBody
.
test_result_region
=
{
region_count
:
foreignAry
.
length
,
polygon
:
testRegion
};
console
.
log
(
this
.
roiBody
);
return
this
.
oParse
.
writeXML
({
roi
:
this
.
roiBody
});
},
clear
:
function
()
{
(
this
.
blueLines
=
[]),
(
this
.
roads
=
[]),
(
this
.
drawState
=
-
1
),
(
this
.
smallWindow
=
false
),
(
this
.
roadFlag
=
""
),
(
this
.
needRect
=
false
),
(
this
.
needLine
=
false
),
(
this
.
canvasState
=
0
),
(
this
.
polygon_name
=
''
),
(
this
.
polygon_id
=
''
),
(
this
.
polyline
=
0
);
$
(
".modal-lt button"
).
removeClass
(
"active"
);
},
sortLinePoints
(
pointarr
){
try
{
let
newpoint
=
[];
if
((
pointarr
[
1
]
-
pointarr
[
3
])
>
0
){
newpoint
[
0
]
=
pointarr
[
2
]
newpoint
[
1
]
=
pointarr
[
3
]
newpoint
[
2
]
=
pointarr
[
0
]
newpoint
[
3
]
=
pointarr
[
1
]
}
else
{
newpoint
=
pointarr
}
return
newpoint
}
catch
(
err
){
console
.
log
(
err
)
}
},
changetestid
(){
this
.
eventData
.
forEach
(
ele
=>
{
if
(
ele
.
value
==
this
.
polygon_id
){
this
.
polygon_name
=
ele
.
name
}
})
}
},
mounted
()
{
console
.
log
(
eventJson
)
this
.
eventData
=
eventJson
// this.stageInit()
key
(
'alt+1'
,()
=>
{
if
(
this
.
istest
)
{
this
.
istest
=
false
}
else
{
this
.
istest
=
true
}
})
}
};
</
script
>
<
style
scoped
>
button
{
cursor
:
pointer
;
}
.modal-title
{
float
:
left
;
width
:
93%
;
overflow
:
hidden
;
}
.modal-body
{
height
:
540px
!important
;
}
.modal-lt
{
width
:
100%
;
margin-bottom
:
10px
;
text-align
:
center
;
overflow
:
hidden
;
}
.modal-lt
button
{
outline
:
none
;
height
:
30px
;
line-height
:
30px
;
float
:
left
;
padding
:
0
10px
;
border-radius
:
15px
;
margin
:
0
0px
10px
15px
;
background
:
#d7edff
;
border
:
1px
solid
rgba
(
59
,
183
,
255
,
1
);
cursor
:
pointer
;
color
:
#666666
;
}
.modal-lt
.curmodal
{
background
:
#d7edff
!important
;
border
:
1px
solid
rgba
(
59
,
183
,
255
,
1
);
color
:
#3bb7ff
;
}
.modal-editbox
{
position
:
relative
;
float
:
right
;
min-height
:
450px
;
width
:
22%
;
color
:
#fff
;
}
.modal-editbox
.modal-lb
{
position
:
absolute
;
bottom
:
0
;
}
.modal-right
{
position
:
relative
;
float
:
left
;
text-align
:
center
;
}
.modal-editbox
button
{
display
:
block
;
margin
:
10px
;
}
.modal-lb
button
{
float
:
left
;
width
:
90px
;
margin-left
:
15px
;
}
#zone_list
button
.active
{
background
:
#fff
;
color
:
#3d6797
;
}
#line_type
{
display
:
none
;
position
:
fixed
;
top
:
50%
;
left
:
50%
;
width
:
500px
;
height
:
340px
;
margin-left
:
-250px
;
margin-top
:
-150px
;
z-index
:
52
;
color
:
#fff
;
text-align
:
center
;
line-height
:
35px
;
/* background: #409eff; */
background
:
rgba
(
1
,
20
,
51
,
0.9
);
}
#line_type
.active
{
display
:
block
;
z-index
:
1001
;
opacity
:
1
;
}
#line_type
p
{
padding
:
15px
;
font-size
:
17px
;
font-weight
:
bold
;
}
#line_type
input
{
width
:
150px
;
}
el-select
{
width
:
90px
!important
;
}
#line_type
button
{
color
:
#fff
;
margin
:
50px
2%
;
width
:
100px
;
height
:
35px
;
line-height
:
35px
;
background
:
#3a51f2
f7
;
color
:
#fff
;
border
:
0
;
}
#c1
{
position
:
absolute
;
top
:
0
;
left
:
0
;
}
.pic
{
position
:
absolute
;
top
:
0
;
left
:
0
;
}
.pic
img
{
width
:
800px
;
height
:
500px
;
margin
:
0
;
padding
:
0
;
}
canvas
{
margin
:
0
;
padding
:
0
;
}
.title
{
/*background: url('../../../assets/18.png') no-repeat;*/
width
:
24%
;
height
:
70px
;
line-height
:
50px
;
margin
:
0
;
margin-left
:
3.5%
;
font-size
:
25px
;
letter-spacing
:
10px
;
display
:
inline-block
;
}
.shadow
{
display
:
none
;
position
:
fixed
;
left
:
0
;
top
:
0
;
z-index
:
1000
;
width
:
100%
;
height
:
100%
;
background
:
#000
;
filter
:
alpha
(
opacity
=
50
);
-moz-opacity
:
0.5
;
opacity
:
0.5
;
}
ul
{
padding
:
10px
;
}
li
{
width
:
130px
;
text-align
:
center
;
}
.item
{
width
:
50%
;
margin
:
10px
auto
;
}
.item
span
{
display
:
inline-block
;
width
:
28%
;
text-align
:
right
;
}
.item
div
{
display
:
inline-block
;
width
:
70%
;
}
.w120
{
width
:
120px
;
}
.mt10
{
margin-top
:
10px
;
}
.pedestrian-area-attr
{
position
:
fixed
;
top
:
50%
;
left
:
50%
;
width
:
500px
;
height
:
300px
;
margin-left
:
-250px
;
margin-top
:
-150px
;
z-index
:
52
;
color
:
#fff
;
text-align
:
center
;
line-height
:
35px
;
}
.pedestrian-area-attr
.label
{
width
:
80px
;
}
.pedestrian-area-attr
input
{
width
:
200px
!important
;
opacity
:
0.8
;
height
:
30px
;
line-height
:
30px
;
border
:
0px
;
}
.mt40
{
margin-top
:
40px
;
}
.btn-box
button
{
height
:
30px
;
line-height
:
30px
;
width
:
100px
;
border
:
0
;
cursor
:
pointer
;
background
:
#145b93
;
color
:
#ffffff
;
}
.delbtn
{
color
:
#fff
;
background
:
#e5e5e5
;
}
</
style
>
b
src/views/taskManage/back.vue
0 → 100644
View file @
4aaf34a
<
template
>
<div
class=
"expande-table-row"
>
<span
class=
"label"
>
视频源文件
</span>
<span
class=
"subtask-info"
>
{{
subTaskData
.
vchan_name
}}
</span>
<span
class=
"label"
>
设备地址
</span>
<span
class=
"subtask-info"
>
192.178.99.99
</span>
<span
class=
"label"
>
已用资源
</span>
<span
class=
"subtask-info"
>
22
</span>
<span
class=
"label"
>
设备容量
</span>
<span
class=
"subtask-info"
>
33
</span>
<span
class=
"label"
>
指定设备下发
</span>
<span
class=
"subtask-info"
>
<el-select
v-model=
"assign_id"
>
<el-option
v-for=
"(item, index) in freeList"
:key=
"index"
:value=
"item.device_id"
>
{{
item
.
in_ip
}}
</el-option>
</el-select>
</span>
<span
class=
"label sub-btn"
@
click=
"subMove"
>
确定
</span>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
assign_id
:
""
};
},
props
:
[
"subTaskData"
,
"freeList"
,
"taskData"
],
methods
:
{
subMove
()
{
let
taskID
=
this
.
taskData
.
task_id
;
let
subTaksID
=
this
.
subTaskData
.
subtask_id
;
this
.
$api
.
task
.
getTaskParams
(
taskID
,
subTaksID
).
then
(
res
=>
{
let
obj
=
{};
obj
.
mtasks
=
res
.
mtasks
;
obj
.
assign_to
=
{
id
:
this
.
assign_id
,
flag
:
0
};
this
.
subRoi
(
taskID
,
subTaksID
,
obj
);
});
},
subRoi
(
taskid
,
subtaskid
,
postObj
)
{
this
.
$api
.
task
.
editRoi
(
taskid
,
subtaskid
,
postObj
,
{
headers
:
{
authorization
:
localStorage
.
getItem
(
"atoken"
)
}
})
.
then
(
m
=>
{
if
(
m
.
ecode
==
"200"
)
{
this
.
$message
({
message
:
"设置成功!"
,
type
:
"success"
});
}
});
}
},
created
()
{},
watch
:
{
subTaskData
(
val
)
{
console
.
log
(
val
);
}
},
mounted
()
{
this
.
assign_id
=
this
.
subTaskData
.
assign_id
?
this
.
subTaskData
.
assign_id
:
""
;
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.expande-table-row
{
span
{
float
:
left
;
border-bottom
:
1px
solid
#ccc
;
overflow
:
hidden
;
}
.label
{
width
:
6vw
;
text-align
:
center
;
border-left
:
1px
solid
$
border-color
;
background
:
#f0f0f0
;
height
:
40px
;
line-height
:
40px
;
}
.subtask-info
{
border-left
:
1px
solid
#f0f0f0
;
text-align
:
center
;
overflow
:
hidden
;
height
:
40px
;
line-height
:
40px
;
}
.subtask-info
:nth-child
(
2
)
{
width
:
9vw
;
overflow
:
hidden
;
}
.subtask-info
:nth-child
(
4
)
{
width
:
6vw
;
}
.subtask-info
:nth-child
(
6
)
{
width
:
4.5vw
;
}
.subtask-info
:nth-child
(
8
)
{
width
:
4vw
;
}
.subtask-info
:nth-child
(
10
)
{
width
:
12vw
;
}
.sub-btn
{
cursor
:
pointer
;
}
}
</
style
>
src/views/taskManage/editVideo.vue
View file @
4aaf34a
...
...
@@ -74,7 +74,7 @@
:visible-arrow=
"false"
>
<span
class=
"
el-icon-copy-document
moveIcon"
class=
"
icon-fanxing-qianyi
moveIcon"
@
click=
"moveFun(scope.$index, scope.row)"
></span>
</el-tooltip>
...
...
@@ -115,6 +115,7 @@ export default {
user_unid
:
""
,
formData
:
{},
editData
:
{},
taskData
:{},
setvisible
:
false
,
props
:
{
id
:
"vchan_refid"
,
...
...
@@ -152,6 +153,7 @@ export default {
},
methods
:
{
showModal
(
val
)
{
this
.
taskData
=
val
;
this
.
tableData
=
[];
this
.
setvisible
=
true
;
this
.
$store
.
commit
(
"setocxstate"
,
1
);
...
...
@@ -160,7 +162,6 @@ export default {
let
ary
=
[];
let
data
=
res
.
list_data
;
for
(
let
i
in
data
)
{
debugger
if
(
data
[
i
].
vchan
)
{
data
[
i
].
vchan
.
subtask_id
=
data
[
i
].
subtask_id
;
data
[
i
].
vchan
.
refid
=
data
[
i
].
vchan
.
vchan_refid
;
...
...
@@ -199,6 +200,12 @@ export default {
staus
=
false
;
}
},
editTask
(
data
)
{
// let data = this.taskData;
this
.
$api
.
task
.
editTask
(
data
,
data
.
task_id
).
then
(
res
=>
{
this
.
$emit
(
"refresh"
);
});
},
editsubTask
(
vchan
)
{
let
data
=
{
is_dome
:
false
,
...
...
@@ -210,6 +217,7 @@ export default {
vchan_name
:
vchan
.
name
}
};
this
.
$api
.
task
.
editSubTask
(
this
.
editData
.
task_id
,
data
).
then
(
res
=>
{
this
.
tableData
.
push
(
vchan
);
});
...
...
@@ -222,9 +230,12 @@ export default {
.
deleteSubTask
(
this
.
editData
.
task_id
,
data
.
subtask_id
)
.
then
(
res
=>
{
this
.
tableData
.
splice
(
index
,
1
);
this
.
checkvckan
();
});
if
(
action
!=
"tree"
)
{
this
.
checkvckan
();
setTimeout
(()
=>
{
this
.
checkvckan
();
},
0
);
}
},
append
(
data
)
{
...
...
src/views/taskManage/index.vue
View file @
4aaf34a
...
...
@@ -71,36 +71,20 @@
:data=
"tableData"
stripe
border
ref=
"table"
ref=
"table"
style=
"width: 100%"
@
expand-change=
"expandchange"
:expand-row-keys=
"rowkey"
>
<el-table-column
type=
"expand"
>
<template
slot-scope=
"props"
>
<
div
<
subTaskInfo
v-for=
"(item, index) in props.row.subTaskData"
:key=
"index"
class=
"expande-table-row"
:subTaskData=
"item"
:taskData=
"props.row"
:freeList=
"freeList"
>
<span
class=
"label"
>
视频源文件
</span>
<span
class=
"subtask-info"
>
{{
item
.
vchan_name
}}
</span>
<span
class=
"label"
>
设备地址
</span>
<span
class=
"subtask-info"
>
192.178.99.99
</span>
<span
class=
"label"
>
已用资源
</span>
<span
class=
"subtask-info"
>
22
</span>
<span
class=
"label"
>
设备容量
</span>
<span
class=
"subtask-info"
>
33
</span>
<span
class=
"label"
>
指定设备下发
</span>
<span
class=
"subtask-info"
>
<el-select
v-model=
"assign_ip"
>
<el-option
v-for=
"(item,index) in freeList"
:key=
"index"
:value=
"item.in_ip"
>
{{
item
.
in_ip
}}
</el-option>
</el-select>
</span>
<span
class=
"label"
>
确定
</span>
</div>
</subTaskInfo>
</
template
>
</el-table-column>
<el-table-column
...
...
@@ -255,6 +239,7 @@
<
script
>
import
editset
from
"./editSet"
;
import
editvideo
from
"./editVideo"
;
import
subTaskInfo
from
"./subtask.vue"
;
export
default
{
data
()
{
return
{
...
...
@@ -263,22 +248,23 @@ export default {
task_algo_type
:
""
,
total
:
0
,
page
:
1
,
freeList
:
[],
pageSize
:
30
,
setShow
:
false
,
videoShow
:
false
,
editForm
:
{},
tableData
:
[],
subTaskData
:
[],
freeList
:
[],
pedittype
:
"add"
,
currentRow
:
{},
rowkey
:
[
"1"
],
pedittype
:
"add"
,
currentRow
:
{},
assign_ip
:
""
};
},
components
:
{
editset
,
editvideo
editvideo
,
subTaskInfo
},
mounted
()
{
this
.
getTaskList
();
...
...
@@ -297,12 +283,14 @@ export default {
data
[
i
].
vchan
.
subtask_id
=
data
[
i
].
subtask_id
;
data
[
i
].
vchan
.
refid
=
data
[
i
].
vchan
.
vchan_refid
;
data
[
i
].
vchan
.
name
=
data
[
i
].
vchan
.
vchan_name
;
data
[
i
].
vchan
.
assign_id
=
data
[
i
].
assign_to
?
data
[
i
].
assign_to
.
id
:
""
;
}
else
{
data
.
vchan
=
{
subtask_id
:
data
[
i
].
subtask_id
,
refid
:
""
,
vchan_name
:
data
[
i
].
subtask_name
,
name
:
data
[
i
].
subtask_name
name
:
data
[
i
].
subtask_name
,
assign_id
:
data
[
i
].
assign_id
?
data
[
i
].
assign_to
.
id
:
""
};
}
ary
.
push
(
data
[
i
].
vchan
);
...
...
@@ -340,6 +328,12 @@ export default {
return
"未知"
;
}
},
getFreelist
()
{
this
.
$api
.
device
.
getFreelist
(
this
.
dev_unid
).
then
(
res
=>
{
this
.
freeList
=
res
.
list_data
;
});
// /
},
dateFormatter
(
row
,
column
,
cellValue
,
index
)
{
let
startDate
=
cellValue
?
cellValue
.
split
(
" "
)[
0
]
:
""
;
let
endDate
=
row
.
end_dt
?
row
.
end_dt
.
split
(
" "
)[
0
]
:
""
;
...
...
@@ -395,7 +389,7 @@ export default {
this
.
tableData
=
[];
}
else
{
res
.
list_data
.
forEach
(
item
=>
{
item
.
subTaskData
=
[]
item
.
subTaskData
=
[];
if
(
item
.
start_dt
)
{
//先转utc格式
let
date
=
this
.
$moment
.
utc
(
item
.
start_dt
).
format
();
...
...
@@ -418,12 +412,6 @@ export default {
})
.
catch
(
error
=>
{});
},
getFreelist
()
{
this
.
$api
.
device
.
getFreelist
(
this
.
dev_unid
).
then
(
res
=>
{
this
.
freeList
=
res
.
list_data
;
});
// /
},
editVideo
(
index
,
row
)
{
this
.
$refs
.
editvideo
.
showModal
(
row
);
},
...
...
@@ -595,38 +583,20 @@ export default {
color
:
#f2365a
;
font-size
:
16px
;
}
.expande-table-row
{
span
{
display
:
inline-block
;
}
.label
{
width
:
6vw
;
text-align
:
center
;
border-left
:
1px
solid
$
border-color
;
background
:
#f0f0f0
;
}
.subtask-info
{
border-left
:
1px
solid
#f0f0f0
;
text-align
:
center
;
}
.subtask-info
:nth-child
(
2
)
{
width
:
8vw
;
}
.subtask-info
:nth-child
(
4
)
{
width
:
6vw
;
}
.subtask-info
:nth-child
(
6
)
{
width
:
4.5vw
;
}
.subtask-info
:nth-child
(
8
)
{
width
:
4vw
;
}
.subtask-info
:nth-child
(
10
)
{
width
:
12vw
;
}
line-height
:
40px
;
border-bottom
:
1px
solid
#f0f0f0
;
.subtask-info
:nth-child
(
2
)
{
width
:
8vw
;
}
.subtask-info
:nth-child
(
4
)
{
width
:
6vw
;
}
.subtask-info
:nth-child
(
6
)
{
width
:
4.5vw
;
}
.subtask-info
:nth-child
(
8
)
{
width
:
4vw
;
}
.subtask-info
:nth-child
(
10
)
{
width
:
12vw
;
}
</
style
>
src/views/taskManage/subtask.vue
View file @
4aaf34a
<
template
>
<div
class=
"expande-table-row"
>
<span
class=
"label"
>
视频源文件
</span>
<span
class=
"subtask-info"
>
{{
subTaskData
.
vchan_name
}}
</span>
<span
class=
"label"
>
设备地址
</span>
<span
class=
"subtask-info"
>
192.178.99.99
</span>
<span
class=
"label"
>
已用资源
</span>
<span
class=
"subtask-info"
>
22
</span>
<span
class=
"label"
>
设备容量
</span>
<span
class=
"subtask-info"
>
33
</span>
<span
class=
"label"
>
指定设备下发
</span>
<span
class=
"subtask-info"
>
<el-select
v-model=
"assign_id"
>
<el-option
v-for=
"(item, index) in freeList"
:key=
"index"
:value=
"item.device_id"
>
{{
item
.
in_ip
}}
</el-option>
</el-select>
</span>
<span
class=
"label sub-btn"
@
click=
"subMove"
>
确定
</span>
</div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
assign_id
:
""
};
},
props
:
[
"subTaskData"
,
"freeList"
,
"taskData"
],
methods
:
{
subMove
()
{
let
taskID
=
this
.
taskData
.
task_id
;
let
subTaksID
=
this
.
subTaskData
.
subtask_id
;
this
.
$api
.
task
.
getTaskParams
(
taskID
,
subTaksID
).
then
(
res
=>
{
let
obj
=
{};
obj
.
mtasks
=
res
.
mtasks
;
obj
.
assign_to
=
{
id
:
this
.
assign_id
,
flag
:
0
};
this
.
subRoi
(
taskID
,
subTaksID
,
obj
);
});
},
subRoi
(
taskid
,
subtaskid
,
postObj
)
{
this
.
$api
.
task
.
editRoi
(
taskid
,
subtaskid
,
postObj
,
{
headers
:
{
authorization
:
localStorage
.
getItem
(
"atoken"
)
}
})
.
then
(
m
=>
{
if
(
m
.
ecode
==
"200"
)
{
this
.
$message
({
message
:
"设置成功!"
,
type
:
"success"
});
}
});
}
},
created
()
{},
watch
:
{
},
mounted
()
{
this
.
assign_id
=
this
.
subTaskData
.
assign_id
?
this
.
subTaskData
.
assign_id
:
""
;
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.expande-table-row
{
span
{
float
:
left
;
border-bottom
:
1px
solid
#ccc
;
overflow
:
hidden
;
}
.label
{
width
:
6vw
;
text-align
:
center
;
border-left
:
1px
solid
$
border-color
;
background
:
#f0f0f0
;
height
:
40px
;
line-height
:
40px
;
}
.subtask-info
{
border-left
:
1px
solid
#f0f0f0
;
text-align
:
center
;
overflow
:
hidden
;
height
:
40px
;
line-height
:
40px
;
}
.subtask-info
:nth-child
(
2
)
{
width
:
9vw
;
overflow
:
hidden
;
}
.subtask-info
:nth-child
(
4
)
{
width
:
6vw
;
}
.subtask-info
:nth-child
(
6
)
{
width
:
4.5vw
;
}
.subtask-info
:nth-child
(
8
)
{
width
:
4vw
;
}
.subtask-info
:nth-child
(
10
)
{
width
:
12vw
;
}
.sub-btn
{
cursor
:
pointer
;
}
}
</
style
>
src/views/trafficShow/alarmEvent.vue
View file @
4aaf34a
...
...
@@ -2,12 +2,29 @@
<div
class=
"alarm-event-box"
>
<el-table
:data=
"tableData"
height=
"30vh"
>
<el-table-column
type=
"index"
align=
"center"
label=
"#"
></el-table-column>
<el-table-column
align=
"center"
prop=
"camername"
label=
"事件地点"
></el-table-column>
<el-table-column
align=
"center"
prop=
"illname"
label=
"抓拍类型"
></el-table-column>
<el-table-column
align=
"center"
prop=
"illdt"
label=
"发生时间"
></el-table-column>
<el-table-column
align=
"center"
prop=
"camername"
label=
"事件地点"
></el-table-column>
<el-table-column
align=
"center"
prop=
"illname"
label=
"抓拍类型"
></el-table-column>
<el-table-column
align=
"center"
prop=
"illdt"
label=
"发生时间"
></el-table-column>
<el-table-column
align=
"center"
prop=
"operation"
label=
"操作"
>
<template
slot-scope=
"scope"
>
<el-tooltip
content=
"查看"
placement=
"bottom"
effect=
"light"
:visible-arrow=
"false"
>
<el-tooltip
content=
"查看"
placement=
"bottom"
effect=
"light"
:visible-arrow=
"false"
>
<img
src=
"../../assets/img/home/look.png"
alt
...
...
@@ -16,7 +33,12 @@
/>
</el-tooltip>
<span
class=
"tableSpanBorder"
></span>
<el-tooltip
content=
"删除"
placement=
"bottom"
effect=
"light"
:visible-arrow=
"false"
>
<el-tooltip
content=
"删除"
placement=
"bottom"
effect=
"light"
:visible-arrow=
"false"
>
<img
src=
"../../assets/img/home/del.png"
alt
...
...
@@ -34,93 +56,104 @@
export
default
{
data
()
{
return
{
tableData
:[]
}
tableData
:
[]
}
;
},
methods
:{
methods
:
{
delFun
(
index
,
rows
)
{
rows
.
splice
(
index
,
1
);
},
editVideo
(
index
,
rows
){
this
.
$emit
(
'event'
,
rows
)
}
,
editVideo
(
index
,
rows
)
{
this
.
$emit
(
"event"
,
rows
);
}
},
beforeMount
(){
let
that
=
this
;
this
.
connect_id
=
new
Date
().
getTime
()
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this
.
cws
=
new
WebSocket
(
`ws://
${
this
.
$api
.
wsIP
}
/websocket/api/v1/datahandle/connects/
${
this
.
connect_id
}
`
)
beforeMount
()
{
try
{
let
that
=
this
;
this
.
connect_id
=
new
Date
().
getTime
();
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this
.
cws
=
new
WebSocket
(
`ws://
${
this
.
$api
.
wsIP
}
/websocket/api/v1/datahandle/connects/
${
this
.
connect_id
}
`
);
this
.
cws
.
onopen
=
()
=>
{
console
.
log
(
'ws事件推送服务连接成功'
)
}
//事件断开
this
.
cws
.
onclose
=
()
=>
{
window
.
clearTimeout
(
that
.
keepAlive
)
console
.
log
(
'ws事件推送服务断开'
)
that
.
connect_id
=
new
Date
().
getTime
()
that
.
cws
=
new
WebSocket
(
`ws://
${
this
.
$api
.
wsIP
}
/websocket/api/v1/datahandle/connects/
${
this
.
connect_id
}
`
)
this
.
cws
.
onopen
=
()
=>
{
console
.
log
(
"ws事件推送服务连接成功"
);
};
//事件断开
this
.
cws
.
onclose
=
()
=>
{
window
.
clearTimeout
(
that
.
keepAlive
);
console
.
log
(
"ws事件推送服务断开"
);
that
.
connect_id
=
new
Date
().
getTime
();
that
.
cws
=
new
WebSocket
(
`ws://
${
this
.
$api
.
wsIP
}
/websocket/api/v1/datahandle/connects/
${
this
.
connect_id
}
`
);
that
.
keepAlive
=
setInterval
(()
=>
{
let
message
=
{
type
:
'request'
,
type
:
"request"
,
id
:
new
Date
().
getTime
(),
mts
:
new
Date
().
getTime
(),
command
:
'get /websocket/v1/recv_data/connects/'
+
this
.
connect_id
+
'/keep_alive'
}
this
.
cws
.
send
(
JSON
.
stringify
(
message
))
command
:
"get /websocket/v1/recv_data/connects/"
+
this
.
connect_id
+
"/keep_alive"
};
this
.
cws
.
send
(
JSON
.
stringify
(
message
));
},
20000
);
}
//事件推送信息
let
_this
=
this
;
this
.
cws
.
onmessage
=
(
evt
)
=>
{
let
data
=
JSON
.
parse
(
evt
.
data
)
try
{
if
(
data
.
event_data
.
illegal
.
state
==
1
){
let
illname
=
_this
.
getCode
(
'违法类型'
,
data
.
event_data
.
illegal
.
code
)
||
''
;
let
camername
=
data
.
event_data
.
location
.
name
let
dt
=
this
.
showLocalTime
(
data
.
event_dt
).
split
(
' '
)[
1
];
console
.
log
(
data
.
pics
[
0
].
src_url
)
let
pics
=
data
.
pics
[
0
].
src_url
let
pos
=
data
.
event_data
.
location
.
pos
let
obj
=
{
illname
:
illname
,
illdt
:
dt
,
camername
:
camername
,
pics
:
pics
,
pos
:
pos
}
if
(
that
.
tableData
.
length
>
40
)
{
that
.
tableData
.
pop
(
obj
)
};
//事件推送信息
let
_this
=
this
;
this
.
cws
.
onmessage
=
evt
=>
{
let
data
=
JSON
.
parse
(
evt
.
data
);
try
{
if
(
data
.
event_data
.
illegal
.
state
==
1
)
{
let
illname
=
_this
.
getCode
(
"违法类型"
,
data
.
event_data
.
illegal
.
code
)
||
""
;
let
camername
=
data
.
event_data
.
location
.
name
;
let
dt
=
this
.
showLocalTime
(
data
.
event_dt
).
split
(
" "
)[
1
];
console
.
log
(
data
.
pics
[
0
].
src_url
);
let
pics
=
data
.
pics
[
0
].
src_url
;
let
pos
=
data
.
event_data
.
location
.
pos
;
let
obj
=
{
illname
:
illname
,
illdt
:
dt
,
camername
:
camername
,
pics
:
pics
,
pos
:
pos
};
if
(
that
.
tableData
.
length
>
40
)
{
that
.
tableData
.
pop
(
obj
);
}
else
{
that
.
tableData
.
unshift
(
obj
)
}
that
.
tableData
.
unshift
(
obj
)
}
else
{
that
.
tableData
.
unshift
(
obj
);
}
that
.
tableData
.
unshift
(
obj
);
}
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
catch
(
error
)
{
}
if
(
data
.
command
)
{
console
.
log
(
'推送服务连接正常'
)
}
else
if
(
data
.
type
==
'response'
)
{
console
.
log
(
'请求任务推送成功'
)
if
(
data
.
command
)
{
console
.
log
(
"推送服务连接正常"
);
}
else
if
(
data
.
type
==
"response"
)
{
console
.
log
(
"请求任务推送成功"
);
}
}
};
this
.
keepAlive
=
setInterval
(()
=>
{
let
message
=
{
type
:
'request'
,
id
:
new
Date
().
getTime
(),
mts
:
new
Date
().
getTime
(),
command
:
'get /websocket/v1/recv_data/connects/'
+
this
.
connect_id
+
'/keep_alive'
}
this
.
cws
.
send
(
JSON
.
stringify
(
message
))
},
50000
);
let
message
=
{
type
:
"request"
,
id
:
new
Date
().
getTime
(),
mts
:
new
Date
().
getTime
(),
command
:
"get /websocket/v1/recv_data/connects/"
+
this
.
connect_id
+
"/keep_alive"
};
this
.
cws
.
send
(
JSON
.
stringify
(
message
));
},
50000
);
}
catch
(
error
)
{
console
.
log
(
error
);
}
}
};
</
script
>
<
style
>
</
style
>
>
\ No newline at end of file
<
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