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
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
1016 additions
and
833 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
;
}
})
return
value
;
},
eventFormatter
(
row
,
column
,
cellValue
,
index
)
{
let
value
=
""
;
this
.
eventTypeList
.
forEach
(
item
=>
{
if
(
item
.
code
==
cellValue
)
{
value
=
item
.
name
;
}
});
return
value
;
}
},
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/integrated/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/integrated/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/integrated/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/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
)
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
let
obj
=
{
illame
:
illame
,
illdt
:
dt
,
addressname
:
addressname
,
camername
:
camername
,
pics
:
pics
}
that
.
tableData
.
unshift
(
obj
)
}
}
catch
(
error
)
{
}
};
//事件推送信息
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
;
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
(
'请求任务推送成功'
)
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
(
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
class=
"video-box"
>
<videoPlay
ref=
"ocx"
></videoPlay>
</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"
>
<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"
>
<div
class=
"bottom-item-box"
>
<behaviortrend></behaviortrend>
</div>
</el-col>
<el-col
:span=
"5"
>
<div
class=
"bottom-item-box"
>
<behaviordis></behaviordis>
</div>
</el-col>
<el-col
:span=
"11"
class=
"clearpright"
>
<div
class=
"bottom-item-box"
>
<div
class=
"title"
>
实时事件
</div>
<alarmEvent></alarmEvent>
</div>
</el-col>
</el-row>
<el-row
class=
"bottom-box"
style=
"margin-top:1vh"
>
<div
class=
"bottom-item-box"
>
<behaviortrend></behaviortrend>
</div>
</el-row>
<el-row
style=
"margin-top:1vh"
>
<div
class=
"bottom-item-box"
>
<behaviordis></behaviordis>
</div>
</el-row>
<el-row
style=
"margin-top:1vh"
>
<div
class=
"bottom-item-box"
>
<div
class=
"title"
>
实时事件
</div>
<alarmEvent></alarmEvent>
</div>
</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
{
height
:
46.5vh
;
margin-bottom
:
1vh
;
background
:
#444444
;
}
.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
}
}
.item-num
{
font-size
16px
color
#444444
}
}
.left-box
{
}
.infoBox
{
margin-bottom
:
1vh
;
}
.infoChild
{
height
:
8.5vh
;
display
:
inline-block
;
}
.info-item-box
{
height
100%
background
:
#FFFFFF
;
}
.infoChild
:nth-child
(
1
)
img
{
width
:
27px
;
height
:
27px
;
margin
:
22px
20px
21px
40px
;
}
.infoChild
:nth-child
(
2
)
img
{
width
:
30px
;
height
:
27px
;
margin
:
22px
22px
21px
37px
;
}
.infoChild
:nth-child
(
3
)
img
{
width
:
28px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.infoChild
:nth-child
(
4
)
img
{
width
:
27px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.textCon
{
display
:
inline-block
;
vertical-align
:
top
;
font-size
:
12px
;
color
:
#666666
;
margin-top
:
14px
;
}
.textCon
span
{
font-size
:
20px
;
margin-right
:
2px
;
}
.colorText
{
margin-top
:
6px
;
color
:
#444444
;
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
}
.pop-info
{
float
:
left
;
padding-left
:
20px
;
width
:
100px
}
.numBox
{
width
:
307px
;
height
:
125px
;
background
:
#FFFFFF
;
color
:
#444444
;
position
:
relative
;
}
.numBox
:nth-child
(
1
)
{
margin-bottom
:
6px
;
}
.num
{
font-size
:
30px
;
margin
:
27px
0
0
13px
;
display
:
inline-block
;
font-weight
:
bold
;
}
.catch
{
width
:
57px
;
position
:
absolute
;
top
:
59px
;
right
:
16px
;
}
.backSea
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
.ltext
{
width
:
71px
;
height
:
100%
;
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
width
:
37px
;
}
.maps
{
height
:
59.5vh
;
width
:
100%
;
margin-bottom
:
8px
;
position
:
relative
;
}
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.bottom-box
{
width
:
100%
;
height
:
26.5vh
;
overflow
:
hidden
;
}
.bottom-item-box
{
height
:
27vh
;
background
:
#fff
;
overflow
:
hidden
;
}
.bottom-item-box
.title
{
padding-left
:
5px
;
line-height
3vh
}
.car-dis-info
{
display
flex
flex-direction
row
margin
1vh
.3vw
.left-icon
{
width
3vw
height
6vh
line-height
6vh
text-align
center
span{
font-size
30px
}
}
}
.car-dis-info
:nth-child
(
2
)
{
.left-icon
{
span{
color
#FF9630
}
}
}
.car-dis-info
:nth-child
(
3
)
{
.left-icon
{
span{
color
#F56C6C
}
}
}
.car-dis-info
:nth-child
(
4
)
{
.left-icon
{
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
{
height
:
46.5vh
;
margin-bottom
:
1vh
;
background
:
#444444
;
}
.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
;
}
}
.item-num
{
font-size
:
16px
;
color
:
#444444
;
}
}
.left-box
{
}
.infoBox
{
margin-bottom
:
1vh
;
}
.infoChild
{
height
:
8.5vh
;
display
:
inline-block
;
}
.info-item-box
{
height
:
100%
;
background
:
#FFFFFF
;
}
.infoChild
:nth-child
(
1
)
img
{
width
:
27px
;
height
:
27px
;
margin
:
22px
20px
21px
40px
;
}
.infoChild
:nth-child
(
2
)
img
{
width
:
30px
;
height
:
27px
;
margin
:
22px
22px
21px
37px
;
}
.infoChild
:nth-child
(
3
)
img
{
width
:
28px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.infoChild
:nth-child
(
4
)
img
{
width
:
27px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.textCon
{
display
:
inline-block
;
vertical-align
:
top
;
font-size
:
12px
;
color
:
#666666
;
margin-top
:
14px
;
}
.textCon
span
{
font-size
:
20px
;
margin-right
:
2px
;
}
.colorText
{
margin-top
:
6px
;
color
:
#444444
;
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
;
}
.pop-info
{
float
:
left
;
padding-left
:
20px
;
width
:
100px
;
}
.numBox
{
width
:
307px
;
height
:
125px
;
background
:
#FFFFFF
;
color
:
#444444
;
position
:
relative
;
}
.numBox
:nth-child
(
1
)
{
margin-bottom
:
6px
;
}
.num
{
font-size
:
30px
;
margin
:
27px
0
0
13px
;
display
:
inline-block
;
font-weight
:
bold
;
}
.catch
{
width
:
57px
;
position
:
absolute
;
top
:
59px
;
right
:
16px
;
}
.backSea
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
.ltext
{
width
:
71px
;
height
:
100%
;
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
width
:
37px
;
}
.maps
{
height
:
59.5vh
;
width
:
100%
;
margin-bottom
:
8px
;
position
:
relative
;
}
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.bottom-box
{
width
:
100%
;
height
:
26.5vh
;
overflow
:
hidden
;
}
.bottom-item-box
{
height
:
27vh
;
background
:
#fff
;
overflow
:
hidden
;
}
.bottom-item-box
.title
{
padding-left
:
5px
;
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
;
}
}
}
.car-dis-info
:nth-child
(
2
)
{
.left-icon
{
span
{
color
:
#FF9630
;
}
}
}
.car-dis-info
:nth-child
(
3
)
{
.left-icon
{
span
{
color
:
#F56C6C
;
}
}
}
.car-dis-info
:nth-child
(
4
)
{
.left-icon
{
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
;
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,53 +2,61 @@
<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>
<span
class=
"control-btn el-icon-bottom"
></span>
<span
class=
"control-btn el-icon-bottom-right"
></span>
<span
class=
"control-btn el-icon-bottom"
></span>
<span
class=
"control-btn el-icon-bottom-right"
></span>
</div>
</div>
<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
}
}
.item-box
{
float
left
margin-top
1vh
}
.item-box
:nth-child
(
1
)
{
margin-left
0
.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
;
}
.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
This diff is collapsed.
Click to expand it.
src/views/trafficShow/illegaltrend.vue
View file @
b7b9ead
...
...
@@ -2,35 +2,35 @@
<div>
<div
class=
"chart-header-box"
>
<el-col
:span=
"5"
class=
"header-title"
>
违法事件趋势
</el-col>
<span
class=
"header-label"
>
违法
</span>
<div
class=
"header-select"
>
<el-select
v-model=
"illtype"
@
change=
"getTrafficHour"
>
<el-option
<span
class=
"header-label"
>
违法
</span>
<div
class=
"header-select"
>
<el-select
v-model=
"illtype"
@
change=
"getTrafficHour"
>
<el-option
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>
<div
class=
"header-select"
>
<el-select
v-model=
"eventtype"
@
change=
"getTrafficHour"
>
<el-option
</div>
<span
class=
"header-label"
>
事件
</span>
<div
class=
"header-select"
>
<el-select
v-model=
"eventtype"
@
change=
"getTrafficHour"
>
<el-option
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>
</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-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
:
{
...
...
@@ -200,17 +227,17 @@ export default {
{
name
:
"重点车辆"
,
type
:
"line"
,
data
:
(
function
()
{
let
d
=
[]
data
:
(
function
()
{
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,11 +82,11 @@
</el-col>
</el-row>
<el-row
style=
"margin-top:1vh;background:#fff"
>
<div
class
=
""
>
<div
class
>
<illegaltrend></illegaltrend>
</div>
</el-row>
<el-row
class=
"clearpright"
style=
"margin-top:1vh"
>
<el-row
class=
"clearpright"
style=
"margin-top:1vh"
>
<div
class=
"right-item-box"
>
<div
class=
"title"
>
实时事件
</div>
<alarmEvent
@
event=
"alarmevent"
></alarmEvent>
...
...
@@ -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
}
}
.item-num
{
font-size
16px
color
#444444
}
}
.left-box
{
}
.infoChild
{
height
:
8.5vh
;
display
:
inline-block
;
}
.info-item-box
{
height
100%;
background
:
#FFFFFF
;
}
.infoChild
:nth-child
(
1
)
img
{
width
:
27px
;
height
:
27px
;
margin
:
22px
20px
21px
40px
;
}
.infoChild
:nth-child
(
2
)
img
{
width
:
30px
;
height
:
27px
;
margin
:
22px
22px
21px
37px
;
}
.infoChild
:nth-child
(
3
)
img
{
width
:
28px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.infoChild
:nth-child
(
4
)
img
{
width
:
27px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.textCon
{
display
:
inline-block
;
vertical-align
:
top
;
font-size
:
12px
;
color
:
#666666
;
margin-top
:
14px
;
}
.textCon
span
{
font-size
:
20px
;
margin-right
:
2px
;
}
.colorText
{
margin-top
:
6px
;
color
:
#444444
;
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
}
.pop-info
{
float
:
left
;
padding-left
:
20px
;
width
:
100px
}
.numBox
{
width
:
307px
;
height
:
125px
;
background
:
#FFFFFF
;
color
:
#444444
;
position
:
relative
;
}
.numBox
:nth-child
(
1
)
{
margin-bottom
:
6px
;
}
.num
{
font-size
:
30px
;
margin
:
27px
0
0
13px
;
display
:
inline-block
;
font-weight
:
bold
;
}
.catch
{
width
:
57px
;
position
:
absolute
;
top
:
59px
;
right
:
16px
;
}
.backSea
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
.ltext
{
width
:
71px
;
height
:
100%
;
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
width
:
37px
;
}
.maps
{
height
:
89.3vh
;
width
:
100%
;
margin-bottom
:
8px
;
position
:
relative
;
background
red
}
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.event-type-box
{
width
:
100%
;
height
:
26.5vh
;
overflow
:
hidden
;
}
.right-item-box
{
height
:
27vh
;
background
:
#fff
;
overflow
:
hidden
;
}
.right-item-box
.title
{
padding-left
:
5px
;
line-height
3vh
}
.car-dis-info
{
display
flex
flex-direction
row
margin
1vh
.3vw
.left-icon
{
width
3vw
height
6vh
line-height
6vh
text-align
center
span{
font-size
30px
}
}
}
.car-dis-info
:nth-child
(
2
)
{
.left-icon
{
span{
color
#FF9630
}
}
}
.car-dis-info
:nth-child
(
3
)
{
.left-icon
{
span{
color
#F56C6C
}
}
}
.car-dis-info
:nth-child
(
4
)
{
.left-icon
{
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
height
:
46.5vh
;
width
30vw
margin-bottom
:
1vh
;
background
:
#444444
;
left
0
right
0
top
0
bottom
0
margin
auto
z-index
1000
.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
;
}
}
.item-num
{
font-size
:
16px
;
color
:
#444444
;
}
}
.left-box
{
}
.infoChild
{
height
:
8.5vh
;
display
:
inline-block
;
}
.info-item-box
{
height
:
100%
;
background
:
#FFFFFF
;
}
.infoChild
:nth-child
(
1
)
img
{
width
:
27px
;
height
:
27px
;
margin
:
22px
20px
21px
40px
;
}
.infoChild
:nth-child
(
2
)
img
{
width
:
30px
;
height
:
27px
;
margin
:
22px
22px
21px
37px
;
}
.infoChild
:nth-child
(
3
)
img
{
width
:
28px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.infoChild
:nth-child
(
4
)
img
{
width
:
27px
;
height
:
28px
;
margin
:
22px
22px
20px
34px
;
}
.textCon
{
display
:
inline-block
;
vertical-align
:
top
;
font-size
:
12px
;
color
:
#666666
;
margin-top
:
14px
;
}
.textCon
span
{
font-size
:
20px
;
margin-right
:
2px
;
}
.colorText
{
margin-top
:
6px
;
color
:
#444444
;
}
.ol-control
button
{
display
:
none
!important
;
background
:
red
!important
;
}
.pop-info
{
float
:
left
;
padding-left
:
20px
;
width
:
100px
;
}
.numBox
{
width
:
307px
;
height
:
125px
;
background
:
#FFFFFF
;
color
:
#444444
;
position
:
relative
;
}
.numBox
:nth-child
(
1
)
{
margin-bottom
:
6px
;
}
.num
{
font-size
:
30px
;
margin
:
27px
0
0
13px
;
display
:
inline-block
;
font-weight
:
bold
;
}
.catch
{
width
:
57px
;
position
:
absolute
;
top
:
59px
;
right
:
16px
;
}
.backSea
{
width
:
100%
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
.ltext
{
width
:
71px
;
height
:
100%
;
border-right
:
1px
solid
#E5E5E5
;
}
.lnum
{
width
:
37px
;
}
.maps
{
height
:
89.3vh
;
width
:
100%
;
margin-bottom
:
8px
;
position
:
relative
;
}
.el-table__body
tr
{
background
:
#FFFFFF
!important
;
}
.event-type-box
{
width
:
100%
;
height
:
26.5vh
;
overflow
:
hidden
;
}
.right-item-box
{
height
:
27vh
;
background
:
#fff
;
overflow
:
hidden
;
}
.right-item-box
.title
{
padding-left
:
5px
;
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
;
}
}
}
.car-dis-info
:nth-child
(
2
)
{
.left-icon
{
span
{
color
:
#FF9630
;
}
}
}
.car-dis-info
:nth-child
(
3
)
{
.left-icon
{
span
{
color
:
#F56C6C
;
}
}
}
.car-dis-info
:nth-child
(
4
)
{
.left-icon
{
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
;
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/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,14 +162,17 @@ export default {
// 添加一个使用离线瓦片地图的层
this
.
devList
.
map
(
ele
=>
{
console
.
log
(
ele
.
longitude
)
var
CameraVertorlayer
=
new
VectorLayer
({
source
:
_this
.
addCameraLayer
([
Number
(
ele
.
longitude
),
Number
(
ele
.
latitude
)],
ele
)
});
map
.
addLayer
(
CameraVertorlayer
);
})
let
that
=
this
;
console
.
log
(
ele
.
longitude
);
var
CameraVertorlayer
=
new
VectorLayer
({
source
:
_this
.
addCameraLayer
(
[
Number
(
ele
.
longitude
),
Number
(
ele
.
latitude
)],
ele
)
});
map
.
addLayer
(
CameraVertorlayer
);
});
let
that
=
this
;
map
.
on
(
"click"
,
e
=>
{
var
pixel
=
map
.
getEventPixel
(
e
.
originalEvent
);
...
...
@@ -159,52 +184,63 @@ 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
]
Views
.
animate
({
movemap
(
data
)
{
let
pos
=
[
120.324447
,
36.074594
]
;
Views
.
animate
({
center
:
pos
,
duration
:
400
,
zoom
:
14
zoom
:
14
});
this
.
addLayer
(
data
,
pos
)
},
closepopup
(){
this
.
addLayer
(
data
,
pos
);
},
closepopup
()
{
overlay
.
setPosition
(
undefined
);
closer
.
blur
();
return
false
;
},
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
,
autoPanAnimation
:
{
duration
:
500
}
});
map
.
addOverlay
(
overlay
);
overlay
=
new
Overlay
({
element
:
container
,
autoPan
:
true
,
position
:
pos
,
autoPanAnimation
:
{
duration
:
500
}
});
map
.
addOverlay
(
overlay
);
},
addCameraLayer
(
coordinate
,
data
)
{
let
vectorSource
=
new
VectorSource
({
id
:
1
});
let
icon
=
new
Feature
({
geometry
:
new
Point
(
coordinate
),
unid
:
"1"
,
cameraInfo
:
data
cameraInfo
:
data
});
let
color
=
"#156BB1"
;
//设置气泡颜色
//添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
...
...
@@ -224,11 +260,11 @@ 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
:
new
Text
({
text
:
data
.
vchan_name
,
textBaseline
:
"top"
,
font
:
"normal 12px 微软雅黑"
,
...
...
@@ -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
>
...
...
@@ -388,4 +447,4 @@ export default {
color
:
red
}
}
</
style
>
\ No newline at end of file
</
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