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 b7b9eada
authored
Feb 10, 2020
by
潘建波
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
提交视频播放
1 parent
df80f342
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
908 additions
and
708 deletions
src/api/baseUrl.js
src/views/behaviorShow/alarmEvent.vue
src/views/behaviorShow/index.vue
src/views/sceneManage/setting/ytconfig.vue
src/views/taskManage/editSet.vue
src/views/trafficShow/illegaltrend.vue
src/views/trafficShow/index.vue
src/views/trafficShow/map.vue
src/api/baseUrl.js
View file @
b7b9ead
...
...
@@ -3,7 +3,7 @@ import axios from "axios";
console
.
log
(
process
.
env
.
NODE_ENV
);
switch
(
process
.
env
.
NODE_ENV
)
{
case
"development"
:
baseUrl
=
"http://
192.168.9.133:2008
0"
;
// 测试环境url
baseUrl
=
"http://
vion-panda.51vip.biz:5251
0"
;
// 测试环境url
// baseUrl = "http://192.168.9.61:8086";
break
;
case
"pre"
:
...
...
src/views/behaviorShow/alarmEvent.vue
View file @
b7b9ead
...
...
@@ -2,12 +2,30 @@
<div>
<el-table
:data=
"tableData"
>
<el-table-column
type=
"index"
align=
"center"
label=
"#"
></el-table-column>
<el-table-column
align=
"center"
prop=
"eventType"
label=
"事件地点"
:formatter=
"eventFormatter"
></el-table-column>
<el-table-column
align=
"center"
prop=
"locationName"
label=
"抓拍类型"
></el-table-column>
<el-table-column
align=
"center"
prop=
"startDt"
label=
"发生时间"
></el-table-column>
<el-table-column
align=
"center"
prop=
"eventType"
label=
"事件地点"
:formatter=
"eventFormatter"
></el-table-column>
<el-table-column
align=
"center"
prop=
"locationName"
label=
"抓拍类型"
></el-table-column>
<el-table-column
align=
"center"
prop=
"startDt"
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 +34,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,91 +57,104 @@
export
default
{
data
()
{
return
{
tableData
:[]
}
tableData
:
[]
}
;
},
methods
:{
methods
:
{
delFun
(
index
,
rows
)
{
rows
.
splice
(
index
,
1
);
},
eventFormatter
(
row
,
column
,
cellValue
,
index
){
let
value
=
''
this
.
eventTypeList
.
forEach
(
item
=>
{
if
(
item
.
code
==
cellValue
)
{
value
=
item
.
name
;
eventFormatter
(
row
,
column
,
cellValue
,
index
)
{
let
value
=
""
;
this
.
eventTypeList
.
forEach
(
item
=>
{
if
(
item
.
code
==
cellValue
)
{
value
=
item
.
name
;
}
})
});
return
value
;
}
},
},
beforeMount
()
{
beforeMount
()
{
try
{
let
that
=
this
;
this
.
connect_id
=
new
Date
().
getTime
()
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/integrated/connects/
${
this
.
connect_id
}
`
)
this
.
cws
=
new
WebSocket
(
`ws://
${
this
.
$api
.
wsIP
}
/websocket/api/v1/integrated/connects/
${
this
.
connect_id
}
`
);
this
.
cws
.
onopen
=
()
=>
{
console
.
log
(
'ws事件推送服务连接成功'
)
}
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/integrated/connects/
${
this
.
connect_id
}
`
)
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/integrated/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
);
}
};
//事件推送信息
this
.
cws
.
onmessage
=
(
evt
)
=>
{
let
data
=
JSON
.
parse
(
evt
.
data
)
this
.
cws
.
onmessage
=
evt
=>
{
let
data
=
JSON
.
parse
(
evt
.
data
);
try
{
if
(
data
.
event_cate
==
'behavior'
){
let
illame
=
this
.
getCode
(
'安防事件'
,
data
.
event_type
);
let
camername
=
data
.
event_data
.
device
?
data
.
event_data
.
device
.
name
:
''
let
addressname
=
data
.
event_data
.
location
?
data
.
event_data
.
location
.
name
:
''
let
dt
=
this
.
showLocalTime
(
data
.
event_dt
).
split
(
' '
)[
1
];
let
pics
=
'data:image/jpeg;base64,'
+
data
.
pics
[
0
].
pic_base64
if
(
data
.
event_cate
==
"behavior"
)
{
let
illame
=
this
.
getCode
(
"安防事件"
,
data
.
event_type
);
let
camername
=
data
.
event_data
.
device
?
data
.
event_data
.
device
.
name
:
""
;
let
addressname
=
data
.
event_data
.
location
?
data
.
event_data
.
location
.
name
:
""
;
let
dt
=
this
.
showLocalTime
(
data
.
event_dt
).
split
(
" "
)[
1
];
let
pics
=
"data:image/jpeg;base64,"
+
data
.
pics
[
0
].
pic_base64
;
let
obj
=
{
illame
:
illame
,
illdt
:
dt
,
addressname
:
addressname
,
camername
:
camername
,
pics
:
pics
}
that
.
tableData
.
unshift
(
obj
)
}
}
catch
(
error
)
{
}
if
(
data
.
command
){
console
.
log
(
'推送服务连接正常'
)
}
else
if
(
data
.
type
==
'response'
){
console
.
log
(
'请求任务推送成功'
)
illame
:
illame
,
illdt
:
dt
,
addressname
:
addressname
,
camername
:
camername
,
pics
:
pics
};
that
.
tableData
.
unshift
(
obj
);
}
}
catch
(
error
)
{}
if
(
data
.
command
)
{
console
.
log
(
"推送服务连接正常"
);
}
else
if
(
data
.
type
==
"response"
)
{
console
.
log
(
"请求任务推送成功"
);
}
};
this
.
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
));
},
50000
);
}
catch
(
err
)
{
console
.
log
(
err
);
}
}
};
</
script
>
<
style
>
</
style
>
>
\ No newline at end of file
<
style
></
style
>
>
src/views/behaviorShow/index.vue
View file @
b7b9ead
...
...
@@ -3,20 +3,20 @@
:gutter=
"10"
style=
"padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
>
<el-col
:span=
"1
3
"
>
<el-col
:span=
"1
5
"
>
<div
id=
"map"
class=
"maps"
>
<showmap></showmap>
<div
class=
"eventlist-box"
>
<devInfo></devInfo>
</div>
</div>
<div
style=
"clear: both;"
></div>
</el-col>
<el-col
:span=
"11"
>
<div
class=
"video-box"
>
<videoPlay
ref=
"ocx"
></videoPlay>
</div>
<div
class=
"collect-box"
>
</div>
<div
style=
"clear: both;"
></div>
</el-col>
<el-col
:span=
"9"
>
<el-row
class=
"collect-box"
>
<div
class=
"header-title"
>
今日抓拍量
</div>
<div
class=
"collect-content"
>
<el-col
:span=
"6"
class=
"content-item"
>
...
...
@@ -36,28 +36,24 @@
<div>
本月单项总量
</div>
</el-col>
</div>
</div>
<div
style=
"clear: both;"
></div>
</el-col>
<el-col
:span=
"24"
class=
"clearpright"
>
<el-row
:gutter=
"10"
class=
"bottom-box"
>
<el-col
:span=
"8"
>
</el-row>
<el-row
class=
"bottom-box"
style=
"margin-top:1vh"
>
<div
class=
"bottom-item-box"
>
<behaviortrend></behaviortrend>
</div>
</el-col
>
<el-col
:span=
"5
"
>
</el-row
>
<el-row
style=
"margin-top:1vh
"
>
<div
class=
"bottom-item-box"
>
<behaviordis></behaviordis>
</div>
</el-col
>
<el-col
:span=
"11"
class=
"clearpright
"
>
</el-row
>
<el-row
style=
"margin-top:1vh
"
>
<div
class=
"bottom-item-box"
>
<div
class=
"title"
>
实时事件
</div>
<alarmEvent></alarmEvent>
</div>
</el-col>
</el-row>
<div
style=
"clear: both;"
></div>
</el-col>
</el-row>
</
template
>
...
...
@@ -125,197 +121,245 @@ export default {
</
script
>
<
style
scoped=
"scoped"
lang=
"stylus"
>
.video-box
{
.video-box
{
height
:
46.5vh
;
margin-bottom
:
1vh
;
background
:
#444444
;
}
.collect-box
{
height
:
11.8vh
;
background
:
#fff
;
.header-title
{
padding
:
10px
0px
0
20px
;
}
.collect-box
{
height
11.8vh
background
#fff
.header-title{
padding
10px
0px
0
20px
}
.collect-content
{
margin-top
1.6vh
.content-item{
text-align
center
border-right
1px
solid
#E5E5E5
}
.content-item
:last-child
{
border-right
0
}
.collect-content
{
margin-top
:
1.6vh
;
.content-item
{
text-align
:
center
;
border-right
:
1px
solid
#E5E5E5
;
}
.item-num
{
font-size
16px
color
#444444
.content-item
:last-child
{
border-right
:
0
;
}
}
.left-box
{
.item-num
{
font-size
:
16px
;
color
:
#444444
;
}
.infoBox
{
}
.left-box
{
}
.infoBox
{
margin-bottom
:
1vh
;
}
.infoChild
{
}
.infoChild
{
height
:
8.5vh
;
display
:
inline-block
;
}
.info-item-box
{
height
100%
}
.info-item-box
{
height
:
100%
;
background
:
#FFFFFF
;
}
.infoChild
:nth-child
(
1
)
img
{
}
.infoChild
:nth-child
(
1
)
img
{
width
:
27px
;
height
:
27px
;
margin
:
22px
20px
21px
40px
;
}
.infoChild
:nth-child
(
2
)
img
{
}
.infoChild
:nth-child
(
2
)
img
{
width
:
30px
;
height
:
27px
;
margin
:
22px
22px
21px
37px
;
}
.infoChild
:nth-child
(
3
)
img
{
}
.infoChild
:nth-child
(
3
)
img
{
width
:
28px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.infoChild
:nth-child
(
4
)
img
{
}
.infoChild
:nth-child
(
4
)
img
{
width
:
27px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.textCon
{
}
.textCon
{
display
:
inline-block
;
vertical-align
:
top
;
font-size
:
12px
;
color
:
#666666
;
margin-top
:
14px
;
}
.textCon
span
{
}
.textCon
span
{
font-size
:
20px
;
margin-right
:
2px
;
}
.colorText
{
}
.colorText
{
margin-top
:
6px
;
color
:
#444444
;
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
}
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
;
}
.pop-info
{
.pop-info
{
float
:
left
;
padding-left
:
20px
;
width
:
100px
}
width
:
100px
;
}
.numBox
{
.numBox
{
width
:
307px
;
height
:
125px
;
background
:
#FFFFFF
;
color
:
#444444
;
position
:
relative
;
}
.numBox
:nth-child
(
1
)
{
}
.numBox
:nth-child
(
1
)
{
margin-bottom
:
6px
;
}
.num
{
}
.num
{
font-size
:
30px
;
margin
:
27px
0
0
13px
;
display
:
inline-block
;
font-weight
:
bold
;
}
.catch
{
font-weight
:
bold
;
}
.catch
{
width
:
57px
;
position
:
absolute
;
top
:
59px
;
top
:
59px
;
right
:
16px
;
}
.backSea
{
}
.backSea
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
}
.ltext
{
.ltext
{
width
:
71px
;
height
:
100%
;
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
width
:
37px
;
}
.maps
{
}
.maps
{
height
:
59.5vh
;
width
:
100%
;
width
:
100%
;
margin-bottom
:
8px
;
position
:
relative
;
}
}
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.bottom-box
{
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.bottom-box
{
width
:
100%
;
height
:
26.5vh
;
overflow
:
hidden
;
}
.bottom-item-box
{
}
.bottom-item-box
{
height
:
27vh
;
background
:
#fff
;
overflow
:
hidden
;
}
.bottom-item-box
.title
{
}
.bottom-item-box
.title
{
padding-left
:
5px
;
line-height
3vh
}
.car-dis-info
{
display
flex
flex-direction
row
margin
1vh
.3vw
line-height
:
3vh
;
}
.car-dis-info
{
display
:
flex
;
flex-direction
:
row
;
margin
:
1vh
0.3vw
;
.left-icon
{
width
3vw
height
6vh
line-height
6vh
text-align
center
span{
font-size
30px
}
width
:
3vw
;
height
:
6vh
;
line-height
:
6vh
;
text-align
:
center
;
span
{
font-size
:
30px
;
}
}
.car-dis-info
:nth-child
(
2
)
{
}
.car-dis-info
:nth-child
(
2
)
{
.left-icon
{
span{
color
#FF9630
}
span
{
color
:
#FF9630
;
}
}
.car-dis-info
:nth-child
(
3
)
{
}
.car-dis-info
:nth-child
(
3
)
{
.left-icon
{
span
{
color
#F56C6C
span
{
color
:
#F56C6C
;
}
}
}
.car-dis-info
:nth-child
(
4
)
{
}
.car-dis-info
:nth-child
(
4
)
{
.left-icon
{
span{
color
#36BEA6
}
span
{
color
:
#36BEA6
;
}
}
.car-num
{
font-size
22px
font-weight
600
padding-right
5px
}
.eventlist-box
{
position
absolute
left
10px
top
10px
z-index
1000
}
.car-num
{
font-size
:
22px
;
font-weight
:
600
;
padding-right
:
5px
;
}
.eventlist-box
{
position
:
absolute
;
left
:
10px
;
top
:
10px
;
z-index
:
1000
;
}
.video-box
{
position
:
absolute
;
height
:
46.5vh
;
width
:
30vw
;
margin-bottom
:
1vh
;
background
:
#444444
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
margin
:
auto
;
z-index
:
1000
;
}
</
style
>
src/views/sceneManage/setting/ytconfig.vue
View file @
b7b9ead
...
...
@@ -2,14 +2,38 @@
<div
class=
"control-box"
v-show=
"showyt"
>
<div
class=
"control-let-box"
>
<div>
<span
@
mousedown=
"Ytontroller('36')"
@
mouseup=
"stopYtontroller('36')"
class=
"control-btn el-icon-top-left"
></span>
<span
@
mousedown=
"Ytontroller('38')"
@
mouseup=
"stopYtontroller('38')"
class=
"control-btn el-icon-top"
></span>
<span
@
mousedown=
"Ytontroller('33')"
@
mouseup=
"stopYtontroller('33')"
class=
"control-btn el-icon-top-right"
></span>
<span
@
mousedown=
"Ytontroller('36')"
@
mouseup=
"stopYtontroller('36')"
class=
"control-btn el-icon-top-left"
></span>
<span
@
mousedown=
"Ytontroller('38')"
@
mouseup=
"stopYtontroller('38')"
class=
"control-btn el-icon-top"
></span>
<span
@
mousedown=
"Ytontroller('33')"
@
mouseup=
"stopYtontroller('33')"
class=
"control-btn el-icon-top-right"
></span>
</div>
<div>
<span
@
mousedown=
"Ytontroller('37')"
@
mouseup=
"stopYtontroller('37')"
class=
"control-btn el-icon-back"
></span>
<span
@
mousedown=
"Ytontroller('12')"
@
mouseup=
"stopYtontroller('12')"
class=
"control-btn el-icon-refresh"
></span>
<span
@
mousedown=
"Ytontroller('39')"
@
mouseup=
"stopYtontroller('39')"
class=
"control-btn el-icon-right"
></span>
<span
@
mousedown=
"Ytontroller('37')"
@
mouseup=
"stopYtontroller('37')"
class=
"control-btn el-icon-back"
></span>
<span
@
mousedown=
"Ytontroller('12')"
@
mouseup=
"stopYtontroller('12')"
class=
"control-btn el-icon-refresh"
></span>
<span
@
mousedown=
"Ytontroller('39')"
@
mouseup=
"stopYtontroller('39')"
class=
"control-btn el-icon-right"
></span>
</div>
<div>
<span
class=
"control-btn el-icon-bottom-left"
></span>
...
...
@@ -20,35 +44,19 @@
<div
class=
"control-right-box"
>
<div
class=
"slider-box"
>
<span
class=
"title"
>
光圈
</span>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
>
</el-slider>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
></el-slider>
</div>
<div
class=
"slider-box"
>
<span
class=
"title"
>
光倍
</span>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
>
</el-slider>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
></el-slider>
</div>
<div
class=
"slider-box"
>
<span
class=
"title"
>
焦距
</span>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
>
</el-slider>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
></el-slider>
</div>
<div
class=
"slider-box"
>
<span
class=
"title"
>
速度
</span>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
>
</el-slider>
<el-slider
class=
"slider-item"
v-model=
"value"
show-input
></el-slider>
</div>
<div
class=
"right-bottom-box"
>
<div
class=
"setyzw item-box"
>
...
...
@@ -66,30 +74,36 @@
</
template
>
<
script
>
import
{
StopControlCamera
,
controlDevice
,
getControlParam
,
setCameraSpeed
,
connectCamera
}
from
'../../../assets/js/YtContronByVionVideo.js'
;
import
{
CameraController
}
from
'../../../assets/js/positionOperateByVido.js'
;
import
{
StopControlCamera
,
controlDevice
,
getControlParam
,
setCameraSpeed
,
connectCamera
}
from
"../../../assets/js/YtContronByVionVideo.js"
;
import
{
CameraController
}
from
"../../../assets/js/positionOperateByVido.js"
;
const
optionController
=
new
CameraController
();
export
default
{
data
()
{
return
{
showyt
:
false
,
value
:
''
}
showyt
:
false
,
value
:
""
}
;
},
methods
:{
openyt
(){
this
.
showyt
=
true
methods
:
{
openyt
()
{
this
.
showyt
=
true
;
},
closeyt
(){
this
.
showyt
=
false
closeyt
()
{
this
.
showyt
=
false
;
},
/**
* 控制云台
* @param {code}
*/
Ytontroller
(
code
){
Ytontroller
(
code
)
{
var
param
=
getControlParam
(
code
);
setCameraSpeed
(
this
.
ballspeed
)
setCameraSpeed
(
this
.
ballspeed
)
;
// VionVideo.PtzSendCmd(param, pvalue, "");
controlDevice
(
param
);
},
...
...
@@ -97,88 +111,98 @@ export default {
* 停止云台控制
* @param {code}
*/
stopYtontroller
(
code
){
StopControlCamera
()
stopYtontroller
(
code
)
{
StopControlCamera
()
;
},
subset
(){
subset
()
{
let
mtasks
=
this
.
allMask
.
mtasks
;
this
.
allMask
.
mtasks
.
forEach
(
ele
=>
{
ele
.
scenes
[
this
.
curindex
].
algo_type
=
this
.
algo_type
ele
.
scenes
[
this
.
curindex
].
position_name
=
this
.
position_name
ele
.
scenes
[
this
.
curindex
].
position_num
=
this
.
position_num
ele
.
scenes
[
this
.
curindex
].
algo_type
=
this
.
algo_type
;
ele
.
scenes
[
this
.
curindex
].
position_name
=
this
.
position_name
;
ele
.
scenes
[
this
.
curindex
].
position_num
=
this
.
position_num
;
});
let
reqObj
=
{
subtask_id
:
this
.
curentSubTaskId
,
mtasks
:
this
.
allMask
.
mtasks
,
}
this
.
$api
.
task
.
editRoi
(
this
.
curentTaskId
,
this
.
curentSubTaskId
,
reqObj
).
then
(
res
=>
{
if
(
data
.
ecode
==
'200'
)
{
this
.
closeyt
()
mtasks
:
this
.
allMask
.
mtasks
};
this
.
$api
.
task
.
editRoi
(
this
.
curentTaskId
,
this
.
curentSubTaskId
,
reqObj
)
.
then
(
res
=>
{
if
(
data
.
ecode
==
"200"
)
{
this
.
closeyt
();
}
})
});
}
}
}
}
;
</
script
>
<
style
lang=
"stylus"
scoped
>
.control-box
{
position
absolute
top
0
left
0
right
0
margin
auto
color
#333
z-index
100
height
24vh
width
31vw
margin-top
.5vh
background
#ffffff
box-shadow
:
1px
0px
4px
3px
rgba
(
74
,
74
,
74
,
0.14
);
}
.control-let-box
{
float
left
width
12vw
.control-btn{
height
5vh
margin-top
2vh
width
3.5vw
overflow
hidden
font-size
30px
text-align
center
color
#cccccc
font-weight
600
}
}
.control-right-box
{
float
left
width
18.5vw
}
.slider-box
{
overflow
hidden
margin-top
1vh
.title{
float
left
width
2vw
line-height
35px;
}
.slider-item
{
float
left
width
16vw
}
.control-box
{
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
margin
:
auto
;
color
:
#333
;
z-index
:
100
;
height
:
24vh
;
width
:
31vw
;
margin-top
:
0.5vh
;
background
:
#ffffff
;
box-shadow
:
1px
0px
4px
3px
rgba
(
74
,
74
,
74
,
0.14
);
}
.control-let-box
{
float
:
left
;
width
:
12vw
;
.control-btn
{
height
:
5vh
;
margin-top
:
2vh
;
width
:
3.5vw
;
overflow
:
hidden
;
font-size
:
30px
;
text-align
:
center
;
color
:
#cccccc
;
font-weight
:
600
;
}
.item-box
{
float
left
margin-top
1vh
}
.item-box
:nth-child
(
1
)
{
margin-left
0
}
.setyzw
{
width
6vw
}
.control-right-box
{
float
:
left
;
width
:
18.5vw
;
}
.slider-box
{
overflow
:
hidden
;
.title
{
float
:
left
;
width
:
2vw
;
line-height
:
35px
;
}
.subbtn
{
margin
1vh
.3vw
0
2vw
.slider-item
{
float
:
left
;
width
:
16vw
;
}
}
.item-box
{
float
:
left
;
margin-top
:
1vh
;
}
.item-box
:nth-child
(
1
)
{
margin-left
:
0
;
}
.setyzw
{
width
:
6vw
;
}
.subbtn
{
margin
:
1vh
0.3vw
0
2vw
;
}
</
style
>
\ No newline at end of file
src/views/taskManage/editSet.vue
View file @
b7b9ead
...
...
@@ -4,15 +4,23 @@
title=
"任务配置修改"
:visible
.
sync=
"setvisible"
width=
"450px"
:before-close=
"handleClose"
>
:before-close=
"handleClose"
>
<div>
<el-form
label-position=
"left"
label-width=
"80px"
:model=
"formData"
>
<el-form-item
label=
"任务名称"
>
<el-input
v-model=
"formData.task_name"
placeholder=
"请输入任务名称"
></el-input>
<el-input
v-model=
"formData.task_name"
placeholder=
"请输入任务名称"
></el-input>
</el-form-item>
<el-form-item
label=
"算法类型"
>
<el-select
v-model=
"formData.task_algo_type"
placeholder=
"请选择"
:popper-append-to-body=
false
>
<el-option
value=
""
label=
"--"
></el-option>
<el-select
v-model=
"formData.task_algo_type"
placeholder=
"请选择"
:popper-append-to-body=
"false"
>
<el-option
value
label=
"--"
></el-option>
<el-option
value=
"0"
label=
"交通"
></el-option>
<el-option
value=
"1"
label=
"客流"
></el-option>
<el-option
value=
"2"
label=
"行为分析"
></el-option>
...
...
@@ -20,17 +28,13 @@
</el-select>
</el-form-item>
<el-form-item
label=
"场景占用"
>
<el-select
v-model=
"formData.type"
placeholder=
"请选择"
:popper-append-to-body=
false
>
<el-option
key=
"1"
label=
"全部"
value=
""
>
</el-option>
<el-option
key=
"2"
label=
"222"
value=
"2"
>
</el-option>
<el-select
v-model=
"formData.type"
placeholder=
"请选择"
:popper-append-to-body=
"false"
>
<el-option
key=
"1"
label=
"全部"
value
></el-option>
<el-option
key=
"2"
label=
"222"
value=
"2"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"时间计划"
>
...
...
@@ -38,23 +42,37 @@
</el-form-item>
<el-form-item
label=
"时间"
>
<el-date-picker
style=
"width:100%"
v-model=
"formData.timer"
value-format=
"yyyy-MM-dd"
type=
"daterange"
range-separator=
"至"
start-placeholder=
"开始日期"
end-placeholder=
"结束日期"
>
</el-date-picker>
end-placeholder=
"结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item
label=
"存储配置"
>
<el-select
v-model=
"formData.store_conf.unid"
placeholder=
"请选择"
:popper-append-to-body=
false
>
<el-option
:value=
"store.unid"
:label=
"store.name"
v-for=
"store in store_confs"
:key=
"store.unid"
></el-option>
<el-select
v-model=
"formData.store_conf.unid"
placeholder=
"请选择"
:popper-append-to-body=
"false"
>
<el-option
:value=
"store.unid"
:label=
"store.name"
v-for=
"store in store_confs"
:key=
"store.unid"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"优先级"
>
<el-select
v-model=
"formData.priority"
placeholder=
"请选择"
:popper-append-to-body=
false
>
<el-select
v-model=
"formData.priority"
placeholder=
"请选择"
:popper-append-to-body=
"false"
>
<el-option
value=
"high"
label=
"高"
></el-option>
<el-option
value=
"normal"
selected=
""
label=
"中"
></el-option>
<el-option
value=
"normal"
selected
label=
"中"
></el-option>
<el-option
value=
"low"
label=
"低"
></el-option>
</el-select>
</el-form-item>
...
...
@@ -69,87 +87,85 @@
</
template
>
<
script
>
export
default
{
data
()
{
return
{
setvisible
:
false
,
formData
:
{
task_name
:
''
,
task_algo_type
:
''
,
timer
:
''
,
store_conf
:
{
unid
:
''
export
default
{
data
()
{
return
{
setvisible
:
false
,
formData
:
{
task_name
:
""
,
task_algo_type
:
""
,
timer
:
""
,
store_conf
:
{
unid
:
""
},
priority
:
''
,
},
vchanAry
:[],
sessionData
:{},
store_confs
:[]
}
priority
:
""
},
props
:{
pedittype
:{
type
:
String
,
default
:
'add'
},
vchanAry
:
[],
sessionData
:
{},
store_confs
:
[]
};
},
watch
:{
props
:
{
pedittype
:
{
type
:
String
,
default
:
"add"
}
},
mounted
(){
console
.
log
(
'mounted'
,
this
.
formData
)
watch
:
{},
mounted
()
{
console
.
log
(
"mounted"
,
this
.
formData
);
},
methods
:
{
initData
(
type
,
pdata
)
{
debugger
methods
:
{
initData
(
type
,
pdata
)
{
debugger
;
this
.
setvisible
=
true
;
if
(
type
==
'add'
)
{
if
(
type
==
"add"
)
{
this
.
formData
=
{
task_name
:
''
,
task_algo_type
:
''
,
timer
:
''
,
store_conf
:
{
unid
:
''
task_name
:
""
,
task_algo_type
:
""
,
timer
:
""
,
store_conf
:
{
unid
:
""
},
priority
:
''
,
priority
:
""
};
}
if
(
type
==
'edit'
)
{
pdata
.
timer
=
[
pdata
.
start_dt
,
pdata
.
end_dt
]
if
(
type
==
"edit"
)
{
pdata
.
timer
=
[
pdata
.
start_dt
,
pdata
.
end_dt
];
this
.
formData
=
pdata
;
this
.
$api
.
task
.
getSubTask
(
pdata
.
task_id
).
then
(
res
=>
{
let
ary
=
[]
let
data
=
res
.
list_data
for
(
let
i
in
data
)
{
let
ary
=
[];
let
data
=
res
.
list_data
;
for
(
let
i
in
data
)
{
if
(
data
[
i
].
vchan
)
{
data
[
i
].
vchan
.
subtask_id
=
data
[
i
].
subtask_id
data
[
i
].
vchan
.
refid
=
data
[
i
].
vchan
.
vchan_refid
}
else
{
data
[
i
].
vchan
.
subtask_id
=
data
[
i
].
subtask_id
;
data
[
i
].
vchan
.
refid
=
data
[
i
].
vchan
.
vchan_refid
;
}
else
{
data
.
vchan
=
{
subtask_id
:
data
[
i
].
subtask_id
,
refid
:
''
,
vchan_name
:
data
[
i
].
subtask_name
}
refid
:
""
,
vchan_name
:
data
[
i
].
subtask_name
};
}
ary
.
push
(
data
[
i
].
vchan
)
ary
.
push
(
data
[
i
].
vchan
);
}
// this.$refs.edit.editData = confile;
// this.$refs.edit.vchanAry = ary;
this
.
vchanAry
=
ary
;
})
});
}
},
handleClose
()
{
handleClose
()
{
this
.
setvisible
=
false
;
},
closeVisible
()
{
for
(
var
key
in
this
.
sessionData
)
{
this
.
formData
[
key
]
=
this
.
sessionData
[
key
]
closeVisible
()
{
for
(
var
key
in
this
.
sessionData
)
{
this
.
formData
[
key
]
=
this
.
sessionData
[
key
];
}
this
.
setvisible
=
false
;
},
save
()
{
this
.
sessionData
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
formData
));
save
()
{
this
.
sessionData
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
formData
));
this
.
setvisible
=
false
;
//
let
postData
=
{
...
...
@@ -162,7 +178,7 @@
end_dt
:
this
.
setUtcTime
(
this
.
formData
.
timer
[
1
]),
priority
:
this
.
formData
.
priority
,
store_conf_unid
:
this
.
formData
.
store_conf
.
unid
,
task_type
:
"normal"
,
task_type
:
"normal"
// algo_comb_unid: this.formData.store_conf,
};
...
...
@@ -170,41 +186,42 @@
for
(
let
i
in
postData
)
{
formData
.
append
(
i
,
postData
[
i
]);
}
if
(
this
.
pedittype
==
"add"
)
{
this
.
addTask
(
formData
)
if
(
this
.
pedittype
==
"add"
)
{
this
.
addTask
(
formData
);
}
if
(
this
.
pedittype
==
"edit"
)
{
this
.
editTask
(
formData
)
if
(
this
.
pedittype
==
"edit"
)
{
this
.
editTask
(
formData
);
}
},
addTask
(
data
)
{
this
.
$api
.
task
.
addTask
(
data
,{
this
.
$api
.
task
.
addTask
(
data
,
{
"content-type"
:
"multipart/form-data"
}).
then
(
res
=>
{
console
.
log
(
res
)
this
.
$emit
(
'refresh'
)
})
.
then
(
res
=>
{
console
.
log
(
res
);
this
.
$emit
(
"refresh"
);
});
},
editTask
(
data
)
{
this
.
$api
.
task
.
editTask
(
data
,
this
.
formData
.
task_id
).
then
(
res
=>
{
this
.
$emit
(
'refresh'
)
})
this
.
$api
.
task
.
editTask
(
data
,
this
.
formData
.
task_id
).
then
(
res
=>
{
this
.
$emit
(
"refresh"
);
});
},
getStore
()
{
let
params
=
{
offset
:
0
,
limit
:
''
}
this
.
$api
.
device
.
getStore
(
params
).
then
(
res
=>
{
limit
:
""
};
this
.
$api
.
device
.
getStore
(
params
).
then
(
res
=>
{
this
.
store_confs
=
res
.
list_data
;
})
});
}
},
created
(){
this
.
getStore
()
}
created
()
{
this
.
getStore
();
}
};
</
script
>
<
style
>
</
style
>
<
style
></
style
>
src/views/trafficShow/illegaltrend.vue
View file @
b7b9ead
...
...
@@ -9,8 +9,8 @@
v-for=
"item in illageList"
:key=
"item.value"
:label=
"item.name"
:value=
"item.code"
>
</el-option>
:value=
"item.code"
>
</el-option>
</el-select>
</div>
<span
class=
"header-label"
>
事件
</span>
...
...
@@ -20,17 +20,17 @@
v-for=
"item in eventList"
:key=
"item.value"
:label=
"item.name"
:value=
"item.code"
>
</el-option>
:value=
"item.code"
>
</el-option>
</el-select>
</div>
<span
class=
"header-label"
>
重点车辆
</span>
<div
class=
"header-select"
>
<el-select
v-model=
"special_type"
@
change=
"getTrafficHour"
>
<el-option
value=
""
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
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-select>
</div>
</div>
...
...
@@ -42,19 +42,46 @@
export
default
{
data
()
{
return
{
illtype
:
''
,
eventtype
:
''
,
special_type
:
''
,
options
:[],
illtype
:
""
,
eventtype
:
""
,
special_type
:
""
,
options
:
[],
illageList
:
[],
eventList
:[]
eventList
:
[]
};
},
methods
:
{
initchart
(
cdata
)
{
let
xData
=
[
"00"
,
"01"
,
"02"
,
"03"
,
"04"
,
"05"
,
"06"
,
"07"
,
"08"
,
"09"
,
"10"
,
"11"
,
"12"
,
"13"
,
"14"
,
"15"
,
"16"
,
"17"
,
"18"
,
"19"
,
"20"
,
"21"
,
"22"
,
"23"
,
"24"
]
let
maychart
=
this
.
$echarts
.
init
(
document
.
getElementById
(
"illtrendchart"
));
let
xData
=
[
"00"
,
"01"
,
"02"
,
"03"
,
"04"
,
"05"
,
"06"
,
"07"
,
"08"
,
"09"
,
"10"
,
"11"
,
"12"
,
"13"
,
"14"
,
"15"
,
"16"
,
"17"
,
"18"
,
"19"
,
"20"
,
"21"
,
"22"
,
"23"
,
"24"
];
let
maychart
=
this
.
$echarts
.
init
(
document
.
getElementById
(
"illtrendchart"
)
);
let
option
=
{
tooltip
:
{
trigger
:
"axis"
,
...
...
@@ -74,7 +101,7 @@ export default {
itemHeight
:
10
},
grid
:
{
top
:
"10%"
,
top
:
"10%"
,
left
:
"3%"
,
right
:
"10%"
,
bottom
:
"10%"
,
...
...
@@ -83,7 +110,7 @@ export default {
xAxis
:
[
{
type
:
"category"
,
data
:
xData
,
data
:
xData
,
axisLine
:
{
show
:
true
,
lineStyle
:
{
...
...
@@ -122,7 +149,7 @@ export default {
show
:
true
,
lineStyle
:
{
color
:
"#D9D9D9"
,
width
:
1
,
width
:
1
,
type
:
"solid"
}
},
...
...
@@ -141,16 +168,16 @@ export default {
name
:
"违法"
,
type
:
"line"
,
data
:
(
function
()
{
let
d
=
[]
let
d
=
[]
;
cdata
.
illegal
.
map
(
ele
=>
{
for
(
let
i
=
0
;
i
<
xData
.
length
;
i
++
)
{
if
(
ele
.
hour
==
xData
[
i
])
{
d
.
push
(
ele
.
total_num
)
for
(
let
i
=
0
;
i
<
xData
.
length
;
i
++
)
{
if
(
ele
.
hour
==
xData
[
i
])
{
d
.
push
(
ele
.
total_num
)
;
}
else
{
d
.
push
(
0
)
d
.
push
(
0
)
;
}
}
})
})
;
return
d
;
})(),
itemStyle
:
{
...
...
@@ -171,16 +198,16 @@ export default {
name
:
"事件"
,
type
:
"line"
,
data
:
(
function
()
{
let
d
=
[]
let
d
=
[]
;
cdata
.
event_type
.
map
(
ele
=>
{
for
(
let
i
=
0
;
i
<
xData
.
length
;
i
++
)
{
if
(
ele
.
hour
==
xData
[
i
])
{
d
.
push
(
ele
.
total_num
)
for
(
let
i
=
0
;
i
<
xData
.
length
;
i
++
)
{
if
(
ele
.
hour
==
xData
[
i
])
{
d
.
push
(
ele
.
total_num
)
;
}
else
{
d
.
push
(
0
)
d
.
push
(
0
)
;
}
}
})
})
;
return
d
;
})(),
itemStyle
:
{
...
...
@@ -201,16 +228,16 @@ export default {
name
:
"重点车辆"
,
type
:
"line"
,
data
:
(
function
()
{
let
d
=
[]
let
d
=
[]
;
cdata
.
key_vehicle
.
map
(
ele
=>
{
for
(
let
i
=
0
;
i
<
xData
.
length
;
i
++
)
{
if
(
ele
.
hour
==
xData
[
i
])
{
d
.
push
(
ele
.
total_num
)
for
(
let
i
=
0
;
i
<
xData
.
length
;
i
++
)
{
if
(
ele
.
hour
==
xData
[
i
])
{
d
.
push
(
ele
.
total_num
)
;
}
else
{
d
.
push
(
0
)
d
.
push
(
0
)
;
}
}
})
})
;
return
d
;
})(),
itemStyle
:
{
...
...
@@ -226,65 +253,65 @@ export default {
shadowOffsetY
:
10
}
}
}
,
}
]
};
maychart
.
setOption
(
option
)
maychart
.
setOption
(
option
);
},
getillageList
(){
this
.
illageList
=
JSON
.
parse
(
localStorage
.
getItem
(
'违法类型'
))
;
getillageList
()
{
this
.
illageList
=
JSON
.
parse
(
localStorage
.
getItem
(
"违法类型"
))
;
},
getTrafficHour
(){
getTrafficHour
()
{
let
data
=
{
"illegal_type"
:
this
.
illtype
,
"event_type"
:
this
.
eventtype
,
"key_vehicle_type"
:
this
.
special_type
}
illegal_type
:
this
.
illtype
,
event_type
:
this
.
eventtype
,
key_vehicle_type
:
this
.
special_type
}
;
this
.
$api
.
show
.
getTrafficHour
(
data
).
then
(
res
=>
{
this
.
initchart
(
res
)
})
this
.
initchart
(
res
);
})
;
},
getEvents
(){
getEvents
()
{
this
.
$api
.
show
.
getEventType
().
then
(
res
=>
{
this
.
eventList
=
res
.
list_data
})
},
},
created
(){
this
.
eventList
=
res
.
list_data
;
});
}
},
created
()
{},
mounted
()
{
this
.
getillageList
()
this
.
getTrafficHour
()
this
.
getEvents
()
},
this
.
getillageList
();
this
.
getTrafficHour
();
this
.
getEvents
();
}
};
</
script
>
<
style
lang=
"stylus"
scoped
>
.chart-header-box
{
height
3vh
overflow
hidden
font-size
14px
.chart-header-box
{
height
:
3vh
;
overflow
:
hidden
;
font-size
:
14px
;
}
.header-title
{
line-height
3vh
line-height
:
3vh
;
}
.illtrendchart
{
height
22vh
width
30vw
}
.header-label
{
font-size
12px
line-height
3vh
float
left
.illtrendchart
{
height
:
22vh
;
width
:
30vw
;
}
.header-select
{
width
4.5vw
margin
.2vh
.5vw
0
.2vw
float
left
.header-label
{
font-size
:
12px
;
line-height
:
3vh
;
float
:
left
;
}
.header-select
{
width
:
4.5vw
;
margin
:
0.2vh
0.5vw
0
0.2vw
;
float
:
left
;
}
</
style
>
\ No newline at end of file
src/views/trafficShow/index.vue
View file @
b7b9ead
<
template
>
<el-row
:gutter=
"10"
style=
"padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
>
<el-row
:gutter=
"10"
style=
"padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
>
<el-col
:span=
"15"
>
<div
id=
"map"
class=
"maps"
>
<showmap
ref=
"map"
@
playvideo=
"playvideo"
></showmap>
<showmap
ref=
"map"
></showmap>
<div
class=
"eventlist-box"
>
<!--
<eventList></eventList>
-->
<devInfo></devInfo>
</div>
<div
class=
"video-box"
>
<videoPlay
ref=
"ocx"
:playurl=
"playurl"
></videoPlay>
</div>
<!--
<div
class=
"video-box"
>
</div>
-->
</div>
<div
style=
"clear: both;"
></div>
</el-col>
...
...
@@ -34,9 +30,7 @@
<div>
违法总量
</div>
</el-col>
<el-col
:span=
"6"
class=
"content-item"
>
<div
class=
"item-num"
>
{{
snapData
.
key_vehicle_total_snap_num
}}
</div>
<div
class=
"item-num"
>
{{
snapData
.
key_vehicle_total_snap_num
}}
</div>
<div>
特殊车辆总量
</div>
</el-col>
</div>
...
...
@@ -56,7 +50,9 @@
<span
class=
"icon-fanxin-bianzu2"
></span>
</div>
<div
class=
"right-content"
>
<div
class=
""
><span
class=
"car-num"
>
10
</span>
辆
</div>
<div
class
>
<span
class=
"car-num"
>
10
</span>
辆
</div>
<div>
渣土车抓拍
</div>
</div>
</div>
...
...
@@ -65,7 +61,9 @@
<span
class=
"icon-fanxin-bianzu2"
></span>
</div>
<div
class=
"right-content"
>
<div
class=
""
><span
class=
"car-num"
>
10
</span>
辆
</div>
<div
class
>
<span
class=
"car-num"
>
10
</span>
辆
</div>
<div>
危险品车
</div>
</div>
</div>
...
...
@@ -74,7 +72,9 @@
<span
class=
"icon-fanxin-bianzu2"
></span>
</div>
<div
class=
"right-content"
>
<div
class=
""
><span
class=
"car-num"
>
29
</span>
辆
</div>
<div
class
>
<span
class=
"car-num"
>
29
</span>
辆
</div>
<div>
重型罐式车
</div>
</div>
</div>
...
...
@@ -82,7 +82,7 @@
</el-col>
</el-row>
<el-row
style=
"margin-top:1vh;background:#fff"
>
<div
class
=
""
>
<div
class
>
<illegaltrend></illegaltrend>
</div>
</el-row>
...
...
@@ -99,7 +99,6 @@
<
script
>
import
showmap
from
"./map"
;
import
videoPlay
from
"../public/videoPlay"
;
import
illegaltrend
from
"./illegaltrend"
;
import
eventTypedis
from
"./eventTypedis"
;
import
eventList
from
"./eventList"
;
...
...
@@ -128,7 +127,6 @@ export default {
},
components
:
{
showmap
,
videoPlay
,
illegaltrend
,
eventTypedis
,
alarmEvent
,
...
...
@@ -141,43 +139,6 @@ export default {
//移动地图
this
.
$refs
.
map
.
movemap
(
data
);
},
playvideo
(
data
)
{
let
obj
=
{};
if
(
data
.
vchan_name
==
"视频1"
)
{
obj
.
rtsp_url
=
"rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d"
;
}
else
if
(
data
.
vchan_name
==
"视频2"
)
{
obj
.
rtsp_url
=
"rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac"
;
}
this
.
playurl
=
obj
;
setTimeout
(()
=>
{
this
.
$refs
.
ocx
.
videoPlay
();
},
0
);
// this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
// debugger
// if(res.task_list.length >0) {
// var taskarr = res.task_list;
// let obj = {};
// for(let i = 0; i < taskarr.length; i++){
// if(taskarr[i].rtsp_url !=''){
// obj.rtsp_url = res.task_list[i].rtsp_url
// break;
// }
// }
// this.playurl = obj
// this.$refs.ocx.videoPlay()
// } else {
// this.$message({
// message: '该相机下没有分析任务',
// type: 'error'
// });
// }
// })
},
getTrafficSnap
()
{
this
.
$api
.
show
.
getTrafficSnap
().
then
(
res
=>
{
this
.
snapData
=
res
;
...
...
@@ -197,203 +158,235 @@ export default {
</
script
>
<
style
scoped=
"scoped"
lang=
"stylus"
>
.collect-box
{
height
11.8vh
background
#fff
.header-title{
padding
10px
0px
0
20px
}
.collect-content
{
margin-top
1.6vh
.content-item{
text-align
center
border-right
1px
solid
#E5E5E5
}
.content-item
:last-child
{
border-right
0
.collect-box
{
height
:
11.8vh
;
background
:
#fff
;
.header-title
{
padding
:
10px
0px
0
20px
;
}
.collect-content
{
margin-top
:
1.6vh
;
.content-item
{
text-align
:
center
;
border-right
:
1px
solid
#E5E5E5
;
}
.item-num
{
font-size
16px
color
#444444
.content-item
:last-child
{
border-right
:
0
;
}
}
.left-box
{
.item-num
{
font-size
:
16px
;
color
:
#444444
;
}
.infoChild
{
}
.left-box
{
}
.infoChild
{
height
:
8.5vh
;
display
:
inline-block
;
}
.info-item-box
{
height
100%;
}
.info-item-box
{
height
:
100%
;
background
:
#FFFFFF
;
}
.infoChild
:nth-child
(
1
)
img
{
}
.infoChild
:nth-child
(
1
)
img
{
width
:
27px
;
height
:
27px
;
margin
:
22px
20px
21px
40px
;
}
.infoChild
:nth-child
(
2
)
img
{
}
.infoChild
:nth-child
(
2
)
img
{
width
:
30px
;
height
:
27px
;
margin
:
22px
22px
21px
37px
;
}
.infoChild
:nth-child
(
3
)
img
{
}
.infoChild
:nth-child
(
3
)
img
{
width
:
28px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.infoChild
:nth-child
(
4
)
img
{
}
.infoChild
:nth-child
(
4
)
img
{
width
:
27px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.textCon
{
}
.textCon
{
display
:
inline-block
;
vertical-align
:
top
;
font-size
:
12px
;
color
:
#666666
;
margin-top
:
14px
;
}
.textCon
span
{
}
.textCon
span
{
font-size
:
20px
;
margin-right
:
2px
;
}
.colorText
{
}
.colorText
{
margin-top
:
6px
;
color
:
#444444
;
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
}
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
;
}
.pop-info
{
.pop-info
{
float
:
left
;
padding-left
:
20px
;
width
:
100px
}
width
:
100px
;
}
.numBox
{
.numBox
{
width
:
307px
;
height
:
125px
;
background
:
#FFFFFF
;
color
:
#444444
;
position
:
relative
;
}
.numBox
:nth-child
(
1
)
{
}
.numBox
:nth-child
(
1
)
{
margin-bottom
:
6px
;
}
.num
{
}
.num
{
font-size
:
30px
;
margin
:
27px
0
0
13px
;
display
:
inline-block
;
font-weight
:
bold
;
}
.catch
{
font-weight
:
bold
;
}
.catch
{
width
:
57px
;
position
:
absolute
;
top
:
59px
;
top
:
59px
;
right
:
16px
;
}
.backSea
{
}
.backSea
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
}
.ltext
{
.ltext
{
width
:
71px
;
height
:
100%
;
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
width
:
37px
;
}
.maps
{
}
.maps
{
height
:
89.3vh
;
width
:
100%
;
width
:
100%
;
margin-bottom
:
8px
;
position
:
relative
;
background
red
}
}
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.event-type-box
{
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.event-type-box
{
width
:
100%
;
height
:
26.5vh
;
overflow
:
hidden
;
}
.right-item-box
{
}
.right-item-box
{
height
:
27vh
;
background
:
#fff
;
overflow
:
hidden
;
}
.right-item-box
.title
{
}
.right-item-box
.title
{
padding-left
:
5px
;
line-height
3vh
}
.car-dis-info
{
display
flex
flex-direction
row
margin
1vh
.3vw
line-height
:
3vh
;
}
.car-dis-info
{
display
:
flex
;
flex-direction
:
row
;
margin
:
1vh
0.3vw
;
.left-icon
{
width
3vw
height
6vh
line-height
6vh
text-align
center
span{
font-size
30px
}
width
:
3vw
;
height
:
6vh
;
line-height
:
6vh
;
text-align
:
center
;
span
{
font-size
:
30px
;
}
}
.car-dis-info
:nth-child
(
2
)
{
}
.car-dis-info
:nth-child
(
2
)
{
.left-icon
{
span{
color
#FF9630
}
span
{
color
:
#FF9630
;
}
}
.car-dis-info
:nth-child
(
3
)
{
}
.car-dis-info
:nth-child
(
3
)
{
.left-icon
{
span{
color
#F56C6C
}
span
{
color
:
#F56C6C
;
}
}
.car-dis-info
:nth-child
(
4
)
{
}
.car-dis-info
:nth-child
(
4
)
{
.left-icon
{
span{
color
#36BEA6
}
}
span
{
color
:
#36BEA6
;
}
.car-num
{
font-size
22px
font-weight
600
padding-right
5px
}
.eventlist-box
{
position
absolute
left
10px
top
10px
z-index
1000
}
.video-box
{
position
absolute
}
.car-num
{
font-size
:
22px
;
font-weight
:
600
;
padding-right
:
5px
;
}
.eventlist-box
{
position
:
absolute
;
left
:
10px
;
top
:
10px
;
z-index
:
1000
;
}
.video-box
{
position
:
absolute
;
height
:
46.5vh
;
width
30vw
width
:
30vw
;
margin-bottom
:
1vh
;
background
:
#444444
;
left
0
right
0
top
0
bottom
0
margin
auto
z-index
1000
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
margin
:
auto
;
z-index
:
1000
;
}
</
style
>
src/views/trafficShow/map.vue
View file @
b7b9ead
...
...
@@ -2,13 +2,30 @@
<div>
<div
id=
"map"
class=
"maps"
></div>
<div
id=
"popup"
class=
"ol-popup"
>
<a
href=
"#"
id=
"popup-closer"
class=
"ol-popup-closer"
@
click=
"closepopup"
></a>
<a
href=
"#"
id=
"popup-closer"
class=
"ol-popup-closer"
@
click=
"closepopup"
></a>
<div
id=
"t-popup-content"
></div>
</div>
<div
id=
"videopopup"
class=
"ol-popup"
>
<a
href=
"#"
id=
"popup-closer"
class=
"ol-popup-closer"
@
click=
"closevideopopup"
></a>
<div
id=
""
>
<videoPlay
ref=
"ocx"
:playurl=
"playurl"
></videoPlay>
</div>
</div>
</div>
</
template
>
<
script
>
import
videoPlay
from
"../public/videoPlay"
;
import
{
inherits
}
from
"ol/util.js"
;
import
Map
from
"ol/Map"
;
import
View
from
"ol/View"
;
...
...
@@ -47,16 +64,21 @@ import GeoJSON from "ol/format/GeoJSON.js";
import
"ol/ol.css"
;
//地图默认样式
var
map
=
""
;
var
Views
=
""
;
var
container
=
''
;
var
container
=
""
;
var
videocontainer
=
""
;
var
content
=
""
;
var
voideocontent
=
""
;
var
closer
=
""
;
var
overlay
=
""
;
export
default
{
data
()
{
return
{
devList
:[]
devList
:
[]
};
},
components
:
{
videoPlay
},
methods
:
{
InitMap
()
{
let
_this
=
this
;
...
...
@@ -140,12 +162,15 @@ export default {
// 添加一个使用离线瓦片地图的层
this
.
devList
.
map
(
ele
=>
{
console
.
log
(
ele
.
longitude
)
console
.
log
(
ele
.
longitude
)
;
var
CameraVertorlayer
=
new
VectorLayer
({
source
:
_this
.
addCameraLayer
([
Number
(
ele
.
longitude
),
Number
(
ele
.
latitude
)],
ele
)
source
:
_this
.
addCameraLayer
(
[
Number
(
ele
.
longitude
),
Number
(
ele
.
latitude
)],
ele
)
});
map
.
addLayer
(
CameraVertorlayer
);
})
});
let
that
=
this
;
...
...
@@ -159,40 +184,51 @@ export default {
// Overlay.setPosition(coodinate);
// map.addOverlay(Overlay);
//播放视频操作
let
data
=
feature
.
getProperties
().
cameraInfo
that
.
$emit
(
'playvideo'
,
data
)
console
.
log
(
'视频播放地址'
+
data
)
let
data
=
feature
.
getProperties
().
cameraInfo
;
that
.
playvideo
(
data
);
console
.
log
(
"视频播放地址"
+
data
);
});
});
},
movemap
(
data
){
let
pos
=
[
120.324447
,
36.074594
]
movemap
(
data
)
{
let
pos
=
[
120.324447
,
36.074594
]
;
Views
.
animate
({
center
:
pos
,
duration
:
400
,
zoom
:
14
zoom
:
14
});
this
.
addLayer
(
data
,
pos
)
this
.
addLayer
(
data
,
pos
);
},
closepopup
()
{
overlay
.
setPosition
(
undefined
);
closer
.
blur
();
return
false
;
},
closepopup
(){
closevideopopup
()
{
let
video_ocx
=
document
.
getElementById
(
"VionVideo"
);
let
stopRes
=
video_ocx
.
StopPlaySip
(
0
);
let
stopRtspRes
=
video_ocx
.
StopPlay
(
0
);
overlay
.
setPosition
(
undefined
);
closer
.
blur
();
return
false
;
},
addLayer
(
pdata
,
pos
)
{
document
.
getElementById
(
'popup'
).
style
.
display
=
'block'
;
addLayer
(
pdata
,
pos
)
{
document
.
getElementById
(
"popup"
).
style
.
display
=
"block"
;
console
.
log
(
pdata
)
if
(
pdata
.
pics
)
{
content
.
innerHTML
=
'<div class="content-box"><div class="img-box"><img src='
+
pdata
.
pics
+
'></div></div>'
console
.
log
(
pdata
);
if
(
pdata
.
pics
)
{
content
.
innerHTML
=
'<div class="content-box"><div class="img-box"><img src='
+
pdata
.
pics
+
"></div></div>"
;
}
else
{
content
.
innerHTML
=
'<div class="content-box"><div class="img-box"><img src=""></div></div>'
content
.
innerHTML
=
'<div class="content-box"><div class="img-box"><img src=""></div></div>'
;
}
overlay
=
new
Overlay
({
element
:
container
,
autoPan
:
true
,
position
:
pos
,
position
:
pos
,
autoPanAnimation
:
{
duration
:
500
}
...
...
@@ -204,7 +240,7 @@ export default {
let
icon
=
new
Feature
({
geometry
:
new
Point
(
coordinate
),
unid
:
"1"
,
cameraInfo
:
data
cameraInfo
:
data
});
let
color
=
"#156BB1"
;
//设置气泡颜色
//添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
...
...
@@ -224,9 +260,9 @@ export default {
// imgSize: [38, 38],
// marginTop: 100
anchor
:
[
0.5
,
36
],
anchorXUnits
:
'fraction'
,
anchorYUnits
:
'pixels'
,
src
:
require
(
'./bioazhu.png'
)
anchorXUnits
:
"fraction"
,
anchorYUnits
:
"pixels"
,
src
:
require
(
"./bioazhu.png"
)
}),
text
:
new
Text
({
text
:
data
.
vchan_name
,
...
...
@@ -248,56 +284,79 @@ export default {
return
vectorSource
;
},
// addFeature() {
// function createStyle(src, img) {
// return new Style({
// image: new Icon(
// /** @type {module:ol/style/Icon~Options} */ ({
// anchor: [0.5, 0.96],
// crossOrigin: "anonymous",
// src: src,
// img: img,
// imgSize: img ? [img.width, img.height] : undefined
// })
// )
playvideo
(
data
)
{
let
pos
=
[
data
.
longitude
,
data
.
latitude
];
document
.
getElementById
(
"videopopup"
).
style
.
display
=
"block"
;
overlay
=
new
Overlay
({
element
:
videocontainer
,
autoPan
:
true
,
position
:
pos
,
autoPanAnimation
:
{
duration
:
500
}
});
map
.
addOverlay
(
overlay
);
let
obj
=
{};
if
(
data
.
vchan_name
==
"视频1"
)
{
obj
.
rtsp_url
=
"rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d"
;
}
else
if
(
data
.
vchan_name
==
"视频2"
)
{
obj
.
rtsp_url
=
"rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac"
;
}
this
.
playurl
=
obj
;
setTimeout
(()
=>
{
this
.
$refs
.
ocx
.
videoPlay
();
},
0
);
//获取视频流
// this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
// debugger
// if(res.task_list.length >0) {
// var taskarr = res.task_list;
// let obj = {};
// for(let i = 0; i < taskarr.length; i++){
// if(taskarr[i].rtsp_url !=''){
// obj.rtsp_url = res.task_list[i].rtsp_url
// break;
// }
// }
// this.playurl = obj
// this.$refs.ocx.videoPlay()
// } else {
// this.$message({
// message: '该相机下没有分析任务',
// type: 'error'
// });
// }
// var iconFeature = new Feature(new Point([113.338591, 34.50691]));
// iconFeature.set(
// "style",
// createStyle("../../../assets/img/dianli.png", undefined)
// );
// var CameraVertorlayer = new VectorLayer({
// source: iconFeature,
// id: 1
// });
// map.addLayer(this.CameraVertorlayer);
// },
getDevList
(){
// })
},
getDevList
()
{
this
.
$api
.
show
.
getDevList
(
this
.
dev_unid
).
then
(
res
=>
{
let
devlist
=
[];
res
.
list_data
.
map
(
ele
=>
{
if
(
ele
.
vchan_type
==
'camera'
)
{
devlist
.
push
(
ele
)
if
(
ele
.
vchan_type
==
"camera"
)
{
devlist
.
push
(
ele
)
;
}
})
this
.
devList
=
devlist
})
;
this
.
devList
=
devlist
;
setTimeout
(()
=>
{
this
.
InitMap
();
},
200
);
})
})
;
}
},
mounted
(){
setTimeout
(()
=>
{
this
.
getDevList
()
},
1000
)
container
=
document
.
getElementById
(
'popup'
);
content
=
document
.
getElementById
(
't-popup-content'
);
closer
=
document
.
getElementById
(
'popup-closer'
);
},
mounted
()
{
setTimeout
(()
=>
{
this
.
getDevList
();
},
1000
);
container
=
document
.
getElementById
(
"popup"
);
videocontainer
=
document
.
getElementById
(
"videopopup"
);
content
=
document
.
getElementById
(
"t-popup-content"
);
voideocontent
=
document
.
getElementById
(
"video-popup-content"
);
closer
=
document
.
getElementById
(
"popup-closer"
);
}
};
</
script
>
...
...
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