Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
卡
卡车调度系统
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
caicaicai
卡车调度系统
Commits
f5f94c66
Commit
f5f94c66
authored
Oct 17, 2022
by
xxx
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
1
parent
6a1ce0fb
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
223 additions
and
41 deletions
+223
-41
carsEZUIKitJs.vue
src/components/ezuikit/carsEZUIKitJs.vue
+220
-39
index.vue
src/views/MLargeScreen/index.vue
+3
-2
No files found.
src/components/ezuikit/carsEZUIKitJs.vue
View file @
f5f94c66
...
...
@@ -17,12 +17,12 @@
</el-tree>
</el-aside>
<div
id=
"elMain"
class=
"el-mains"
style=
"height: 94.5vh;"
v-show=
"elmainShow1"
>
<div
id=
"elMain"
class=
"el-mains"
style=
"height: 94.5vh;"
v-show=
"elmainShow1"
>
<div
v-if=
"isChildren1"
class=
"iframeList"
>
<div
v-for=
"(item,index) in itemList"
:key=
"index"
class=
"videoChildren"
>
<
!--
<
div
v-for=
"(item,index) in itemList"
:key=
"index"
class=
"videoChildren"
>
<video
:ref=
"item.ref"
width=
"433"
height=
"289"
muted
autoplay
class=
"twelveVideo"
></video>
</div>
</div>
-->
</div>
<div
v-if=
"btnChildren"
class=
"btn1"
>
...
...
@@ -64,7 +64,16 @@
<span>
AI报警总数:23
</span><span
style=
"margin-left:30px;"
>
处理数:10
</span>
</div>
<div
class=
"aiAnalysisViews_1"
>
处理率:10/23*100%
</div>
<div></div>
<div
id=
"echarts1"
class=
"echarts1"
></div>
<div
class=
"aiAnalysisViews_1"
>
报警车辆排行榜
</div>
<div
id=
"echarts2"
class=
"echarts2"
style=
"margin-top:1vh"
></div>
<div
class=
"aiAnalysisViews_1"
>
报警车辆信息
</div>
<el-table
:data=
"aiAnalysisTableData"
border
style=
"width: 98%"
height=
"24.5vh"
>
<el-table-column
prop=
"carNo"
label=
"车牌号"
align=
"center"
></el-table-column>
<el-table-column
prop=
"type"
label=
"报警类型"
align=
"center"
></el-table-column>
<el-table-column
prop=
"createTime"
label=
"报警时间"
align=
"center"
></el-table-column>
<el-table-column
label=
"查看"
align=
"center"
></el-table-column>
</el-table>
</div>
</el-container>
...
...
@@ -76,10 +85,13 @@
import
Hls
from
"
hls.js
"
//import EZUIKit from "ezuikit-js";
import
{
Tools
,
HttpReq
,
Dates
}
from
'
@/assets/js/common.js
'
;
import
*
as
echarts
from
'
echarts
'
;
var
noPtzhls
=
null
;
export
default
{
data
()
{
return
{
aiAnalysisTableData
:[],
videoData
:
[],
defaultProps
:
{
children
:
"
children
"
,
...
...
@@ -93,8 +105,6 @@ export default {
isChildren3
:
false
,
btnChildren
:
false
,
isIP
:
""
,
// url: "http://127.0.0.1:5500/webs/cn/demo.html",
// url1: "http://127.0.0.1:5500/webs/cn/demo1.html",
url
:
"
http://192.168.9.2:85/cn/demo.html?ip=
"
,
url1
:
"
http://192.168.9.2:85/cn/demo
"
,
dahuaData
:
[],
...
...
@@ -104,12 +114,22 @@ export default {
noPtz
:
false
,
elmainShow1
:
false
,
aiTabPosition
:
'
今天
'
,
echarts1Data
:[{
value
:
1048
,
name
:
'
接打电话
'
},
{
value
:
735
,
name
:
'
分神驾驶
'
},
{
value
:
580
,
name
:
'
前向碰撞
'
},],
echarts2Data
:{
name
:[
'
鲁A11111
'
,
'
鲁A11111
'
,
'
鲁A11111
'
,
'
鲁A11111
'
,
'
鲁A11111
'
,
'
鲁A11111
'
,],
kache1
:[
20
,
20
,
20
,
20
,
20
,
20
,],
kache2
:[
20
,
20
,
20
,
20
,
20
,
20
,],
kache3
:[
20
,
20
,
20
,
20
,
20
,
20
,],
},
};
},
mounted
()
{
this
.
getCode
();
//this.getDaHua();
//this.getAccessToken();
this
.
echarts1Fn
();
this
.
echarts2Fn
();
},
methods
:
{
getAccessToken
()
{
...
...
@@ -168,41 +188,41 @@ export default {
this
.
itemListNext
=
temporaryData2
;
this
.
btnChildren
=
true
;
this
.
$nextTick
(()
=>
{
this
.
itemList
.
forEach
(
function
(
item
,
index
){
item
.
hls
=
new
Hls
();
//item.hls.loadSource(item.url)
item
.
hls
.
loadSource
(
'
http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8
'
)
item
.
hls
.
attachMedia
(
that
.
$refs
[
item
.
ref
][
0
]);
item
.
hls
.
on
(
Hls
.
Events
.
MANIFEST_PARSED
,
function
()
{
that
.
$refs
[
item
.
ref
][
0
].
play
();
});
})
})
//
this.$nextTick(()=>{
//
this.itemList.forEach(function(item,index){
//
item.hls = new Hls();
//
//item.hls.loadSource(item.url)
//
item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
//
item.hls.attachMedia(that.$refs[item.ref][0]);
//
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
//
that.$refs[item.ref][0].play();
//
});
//
})
//
})
if
(
noPtzhls
!=
null
){
noPtzhls
.
destroy
();
}
//
if(noPtzhls != null){
//
noPtzhls.destroy();
//
}
}
else
{
this
.
btnChildren
=
false
;
this
.
itemList
=
data
.
children
;
this
.
$nextTick
(()
=>
{
this
.
itemList
.
forEach
(
function
(
item
,
index
){
item
.
hls
=
new
Hls
();
//item.hls.loadSource(item.url)
item
.
hls
.
loadSource
(
'
http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8
'
)
item
.
hls
.
attachMedia
(
that
.
$refs
[
item
.
ref
][
0
]);
item
.
hls
.
on
(
Hls
.
Events
.
MANIFEST_PARSED
,
function
()
{
that
.
$refs
[
item
.
ref
][
0
].
play
();
});
})
})
//
this.$nextTick(()=>{
//
this.itemList.forEach(function(item,index){
//
item.hls = new Hls();
//
//item.hls.loadSource(item.url)
//
item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
//
item.hls.attachMedia(that.$refs[item.ref][0]);
//
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
//
that.$refs[item.ref][0].play();
//
});
//
})
//
})
if
(
noPtzhls
!=
null
){
noPtzhls
.
destroy
();
}
//
if(noPtzhls != null){
//
noPtzhls.destroy();
//
}
}
...
...
@@ -211,7 +231,7 @@ export default {
this
.
isChildren3
=
false
;
this
.
up
=
true
;
this
.
down
=
false
;
this
.
noPtz
=
false
;
//
this.noPtz = false;
//改变视频大小
// this.$nextTick(()=>{
...
...
@@ -302,9 +322,154 @@ export default {
},
aiTabPositionFn
(){
console
.
log
(
this
.
aiTabPosition
);
}
},
//饼图1
echarts1Fn
(){
echarts
.
init
(
document
.
getElementById
(
'
echarts1
'
)).
dispose
();
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
echarts1
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
item
'
},
legend
:
{
top
:
'
1%
'
,
left
:
'
center
'
},
color
:[
'
rgb(84,112,198)
'
,
'
rgb(145,204,117)
'
,
'
rgb(250,200,88)
'
,
'
rgb(84,112,198)
'
,
'
rgb(145,204,117)
'
,
'
rgb(250,200,88)
'
,
'
rgb(84,112,198)
'
,
'
rgb(145,204,117)
'
,
'
rgb(250,200,88)
'
,
'
rgb(84,112,198)
'
,
'
rgb(145,204,117)
'
,
'
rgb(250,200,88)
'
,
'
rgb(84,112,198)
'
,
'
rgb(145,204,117)
'
,
'
rgb(250,200,88)
'
,],
series
:
[
{
type
:
'
pie
'
,
radius
:
[
'
40%
'
,
'
70%
'
],
avoidLabelOverlap
:
false
,
itemStyle
:
{
borderRadius
:
20
,
borderColor
:
'
#fff
'
,
borderWidth
:
2
,
},
label
:
{
show
:
false
,
position
:
'
center
'
},
emphasis
:
{
label
:
{
show
:
true
,
fontSize
:
'
35
'
,
fontWeight
:
'
bold
'
,
color
:
'
black
'
,
}
},
labelLine
:
{
show
:
false
},
data
:
this
.
echarts1Data
,
}
]
};
option
&&
myChart
.
setOption
(
option
);
},
//柱状图2
echarts2Fn
(){
echarts
.
init
(
document
.
getElementById
(
'
echarts2
'
)).
dispose
();
var
myChart
=
echarts
.
init
(
document
.
getElementById
(
'
echarts2
'
));
var
option
=
{
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
shadow
'
}
},
legend
:
{
textStyle
:{
color
:
'
black
'
,
fontSize
:
14
,
},
},
grid
:
{
top
:
'
15%
'
,
left
:
'
1%
'
,
right
:
'
5%
'
,
bottom
:
'
3%
'
,
containLabel
:
true
},
yAxis
:
{
type
:
'
category
'
,
data
:
this
.
echarts2Data
.
name
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
black
'
,
fontSize
:
14
,
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
black
'
,
width
:
1
}
},
},
xAxis
:
{
type
:
'
value
'
,
axisLabel
:
{
show
:
true
,
textStyle
:
{
color
:
'
black
'
,
fontSize
:
14
,
}
},
axisLine
:
{
lineStyle
:
{
color
:
'
black
'
,
width
:
0
}
},
},
series
:
[
{
name
:
'
接打电话
'
,
type
:
'
bar
'
,
stack
:
'
total
'
,
label
:
{
show
:
true
},
data
:
this
.
echarts2Data
.
kache1
,
barWidth
:
20
,
itemStyle
:
{
color
:
'
rgb(84,112,198)
'
},
},
{
name
:
'
分神驾驶
'
,
type
:
'
bar
'
,
stack
:
'
total
'
,
label
:
{
show
:
true
},
data
:
this
.
echarts2Data
.
kache2
,
barWidth
:
20
,
itemStyle
:
{
color
:
'
rgb(145,204,117)
'
},
},
{
name
:
'
前向碰撞
'
,
type
:
'
bar
'
,
stack
:
'
total
'
,
label
:
{
show
:
true
},
data
:
this
.
echarts2Data
.
kache3
,
barWidth
:
20
,
itemStyle
:
{
color
:
'
rgb(250,200,88)
'
},
}
]
};
option
&&
myChart
.
setOption
(
option
);
},
},
//
销毁
//销毁
beforeDestroy
()
{
this
.
itemList
.
forEach
(
function
(
item
,
index
){
item
.
hls
.
destroy
();
...
...
@@ -318,8 +483,12 @@ export default {
</
script
>
<
style
>
.noPtzVideo1
{
padding-top
:
5vh
;
width
:
100%
;
height
:
100%
;
background-color
:
white
;
padding-top
:
10vh
;
box-sizing
:
border-box
;
position
:
relative
;
}
.mianBodysSon
{
width
:
100%
;
...
...
@@ -371,12 +540,13 @@ export default {
}
.video111
.el-mains
{
background-color
:
rgba
(
255
,
255
,
255
,
1
);
background-color
:
rgba
(
255
,
255
,
255
,
0
);
color
:
#333
;
text-align
:
center
;
overflow
:
hidden
;
width
:
68vw
;
z-index
:
3
;
border-left
:
1px
solid
gainsboro
;
}
.el-tree-node__content
{
...
...
@@ -428,6 +598,7 @@ export default {
background-color
:
white
;
padding
:
1vh
0px
0px
1vh
;
box-sizing
:
border-box
;
border-left
:
1px
solid
gainsboro
;
}
.aiAnalysisViews_Title
{
font-size
:
24px
;
...
...
@@ -438,4 +609,14 @@ export default {
font-size
:
18px
;
font-weight
:
600
;
}
.echarts1
{
width
:
99%
;
height
:
20vh
;
overflow
:
hidden
;
}
.echarts2
{
width
:
99%
;
height
:
27vh
;
overflow
:
hidden
;
}
</
style
>
src/views/MLargeScreen/index.vue
View file @
f5f94c66
...
...
@@ -18,8 +18,8 @@
<div
class=
"currentTimeStyle"
>
{{
currentTime
}}
</div>
</div>
<div
class=
"videoSelectView"
v-show=
"videoSelect1"
>
<div
@
click=
"lookFn1()"
:class=
"videoSelectStyle == 1 ? 'videoSelectStyle1' : ''"
>
矿山视频监控
</div>
<div
@
click=
"lookFn2()"
:class=
"videoSelectStyle == 2 ? 'videoSelectStyle1' : ''"
>
车辆视频监控
</div>
<div
@
click=
"lookFn1()"
:class=
"videoSelectStyle == 1 ? 'videoSelectStyle1' : ''"
>
矿山视频监控
</div>
</div>
<!-- 内容 -->
<div
class=
"content_view"
>
...
...
@@ -90,7 +90,7 @@ export default {
//单个车辆视频展示
monitorCover1Show
:
false
,
//视频监控配置
videoSelectStyle
:
1
,
videoSelectStyle
:
2
,
}
},
mounted
()
{
...
...
@@ -228,6 +228,7 @@ export default {
this
.
$refs
.
dataAnalysisMethod
.
loadData
(
false
);
if
(
this
.
videoSelect1
==
false
){
this
.
videoSelect1
=
true
;
this
.
lookFn2
();
}
else
{
this
.
videoSelect1
=
false
;
this
.
kaungEZUIKitJsShow
=
false
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
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 comment