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