Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
蒋秀川
/
miniProject
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 c2cb1096
authored
Sep 25, 2023
by
李乾广
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
修改bug
1 parent
a1fdcce6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
103 additions
and
68 deletions
h5/public/index.html
h5/public/jessibuca-pro/jessibuca-pro-demo.js
h5/src/components/vionPlayer/index.vue
h5/src/views/extension/index.vue
h5/src/views/extension/timeline-canvas-wx.vue
h5/src/views/extension/videoTime.vue
h5/public/index.html
View file @
c2cb109
...
@@ -6,8 +6,9 @@
...
@@ -6,8 +6,9 @@
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title>
<
%= htmlWebpackPlugin.options.title %>
</title>
<title>
<
%= htmlWebpackPlugin.options.title %>
</title>
<script
src=
"./jessibuca-pro/jessibuca-pro-demo.js"
></script>
<script
src=
"/jessibuca-pro/jessibuca-pro-demo.js"
></script>
<script
src=
"./jessibuca-pro/jessibuca-pro-talk-demo.js"
></script>
<script
src=
"/jessibuca-pro/jessibuca-pro-talk-demo.js"
></script>
<script
type=
"text/javascript"
src=
"https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>
</head>
</head>
<body>
<body>
<noscript>
<noscript>
...
...
h5/public/jessibuca-pro/jessibuca-pro-demo.js
View file @
c2cb109
This diff could not be displayed because it is too large.
h5/src/components/vionPlayer/index.vue
View file @
c2cb109
...
@@ -25,6 +25,10 @@ export default {
...
@@ -25,6 +25,10 @@ export default {
type
:
Boolean
,
type
:
Boolean
,
default
:
true
,
default
:
true
,
},
},
isXCXPage
:
{
type
:
Boolean
,
default
:
false
,
},
},
},
data
()
{
data
()
{
return
{
return
{
...
@@ -52,9 +56,9 @@ export default {
...
@@ -52,9 +56,9 @@ export default {
},
},
methods
:{
methods
:{
init
(
url
,
params
=
{})
{
init
(
url
,
params
=
{})
{
cons
t
options
=
Object
.
assign
({
le
t
options
=
Object
.
assign
({
container
:
this
.
$refs
.
container
,
container
:
this
.
$refs
.
container
,
decoder
:
'jessibuca-pro/decoder-pro.js'
,
decoder
:
'
/
jessibuca-pro/decoder-pro.js'
,
text
:
''
,
// TODO: 功能暂不清楚
text
:
''
,
// TODO: 功能暂不清楚
keepScreenOn
:
true
,
// 屏幕常亮
keepScreenOn
:
true
,
// 屏幕常亮
isResize
:
false
,
isResize
:
false
,
...
@@ -70,7 +74,7 @@ export default {
...
@@ -70,7 +74,7 @@ export default {
// useWCS: false,
// useWCS: false,
// useSIMD: checkSupportSIMD(),
// useSIMD: checkSupportSIMD(),
// wcsUseVideoRender: checkSupportWCSHevc(),
// wcsUseVideoRender: checkSupportWCSHevc(),
// useWebFullScreen: tru
e, // ios可能不支持系统级别全屏,可能要使用此配置
useWebFullScreen
:
this
.
isXCXPag
e
,
// ios可能不支持系统级别全屏,可能要使用此配置
timeout
:
10
,
// 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
timeout
:
10
,
// 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
// 按钮和界面
// 按钮和界面
...
@@ -84,13 +88,13 @@ export default {
...
@@ -84,13 +88,13 @@ export default {
operateBtns
:
{
operateBtns
:
{
fullscreen
:
true
,
fullscreen
:
true
,
screenshot
:
false
,
screenshot
:
false
,
play
:
tru
e
,
play
:
!
this
.
isXCXPag
e
,
audio
:
tru
e
,
audio
:
!
this
.
isXCXPag
e
,
ptz
:
this
.
showPtz
,
// 云台
ptz
:
this
.
showPtz
,
// 云台
zoom
:
true
,
zoom
:
!
this
.
isXCXPage
,
// 电子放大
performance
:
true
,
performance
:
!
this
.
isXCXPage
,
// 视频流信息展示
record
:
tru
e
,
// 录制
record
:
!
this
.
isXCXPag
e
,
// 录制
scale
:
tru
e
,
// 显示模式:拉伸、缩放、正常
scale
:
!
this
.
isXCXPag
e
,
// 显示模式:拉伸、缩放、正常
quality
:
false
,
// 视频清晰度
quality
:
false
,
// 视频清晰度
},
},
extendOperateBtns
:
[],
extendOperateBtns
:
[],
...
@@ -105,7 +109,7 @@ export default {
...
@@ -105,7 +109,7 @@ export default {
// ptzApertureShow: true, // 光圈
// ptzApertureShow: true, // 光圈
ptzFocusShow
:
true
,
ptzFocusShow
:
true
,
});
});
console
.
log
(
'init-options'
,
options
);
console
.
log
(
'init-options'
,
options
);
this
.
_jessibuca
=
new
window
.
JessibucaPro
(
options
);
this
.
_jessibuca
=
new
window
.
JessibucaPro
(
options
);
...
...
h5/src/views/extension/index.vue
View file @
c2cb109
<
template
>
<
template
>
<div
class=
"extension-page"
>
<div
class=
"extension-page"
>
<div
class=
"j-player-wrapper"
>
<div
class=
"j-player-wrapper"
>
<vion-player
ref=
"vionPlayer"
:watermarkText=
"params.watermarkText"
:hideControls=
"true"
:showPtz=
"false"
/>
<vion-player
ref=
"vionPlayer"
:watermarkText=
"params.watermarkText"
:hideControls=
"false"
:showPtz=
"false"
:isXCXPage=
"true"
/>
<!--
<img
src=
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg=="
alt=
""
@
click=
"screenshot"
class=
"screen-shot-img"
>
-->
</div>
</div>
<!-- 时间线组件 -->
<!-- 时间线组件 -->
<div
class=
"extension-time-box"
>
<div
class=
"extension-time-box"
>
<videoTime
ref=
"videoTime"
@
videoTimeChange=
"videoTimeChange"
@
ptzControlClick=
"ptzControlClick"
/>
<videoTime
ref=
"videoTime"
@
videoTimeChange=
"videoTimeChange"
@
ptzControlClick=
"ptzControlClick"
:dateFormatType=
"dateFormatType"
/>
</div>
</div>
</div>
</div>
...
@@ -56,6 +57,8 @@ export default {
...
@@ -56,6 +57,8 @@ export default {
stop
:
-
1
stop
:
-
1
},
},
nowPanTilt
:
''
,
nowPanTilt
:
''
,
terminalType
:
''
,
dateFormatType
:
'YYYY-MM-DD'
,
}
}
},
},
created
()
{
created
()
{
...
@@ -69,13 +72,13 @@ export default {
...
@@ -69,13 +72,13 @@ export default {
methods
:
{
methods
:
{
// 时间线改变
// 时间线改变
videoTimeChange
(
val
)
{
videoTimeChange
(
val
)
{
let
startTime
=
null
let
valTime
=
moment
(
val
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
let
stopTime
=
null
let
nowTime
=
moment
().
format
(
'YYYY-MM-DD HH:mm:ss'
)
if
(
moment
(
val
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
!=
moment
().
format
(
'YYYY-MM-DD HH:mm:ss'
)){
if
(
valTime
!=
nowTime
){
startTime
=
moment
(
val
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
this
.
getVideoAddress
(
valTime
,
nowTime
)
stopTime
=
moment
().
format
(
'YYYY-MM-DD HH:mm:ss'
)
}
else
{
this
.
getVideoAddress
()
}
}
this
.
getVideoAddress
(
startTime
,
stopTime
)
},
},
// 云台控制
// 云台控制
ptzControlClick
(
type
)
{
ptzControlClick
(
type
)
{
...
@@ -97,7 +100,7 @@ export default {
...
@@ -97,7 +100,7 @@ export default {
tourApi
.
ptzStart
(
par
).
then
(
res
=>
{
tourApi
.
ptzStart
(
par
).
then
(
res
=>
{
console
.
log
(
res
)
console
.
log
(
res
)
if
(
res
.
data
&&
res
.
data
.
code
!=
200
)
{
if
(
res
.
data
&&
res
.
data
.
code
!=
200
)
{
Toast
.
fail
(
res
.
data
.
msg
||
'云台当前操作失败'
);
Toast
.
fail
(
'云台当前操作失败'
);
}
}
})
})
}
}
...
@@ -112,6 +115,10 @@ export default {
...
@@ -112,6 +115,10 @@ export default {
}
}
});
});
// this.params = obj
// this.params = obj
console
.
log
(
this
.
params
)
document
.
title
=
this
.
params
.
gateName
||
'视频详情'
this
.
terminalType
=
this
.
params
.
terminalType
this
.
dateFormatType
=
this
.
terminalType
==
'ios'
||
this
.
terminalType
==
'mac'
?
'YYYY/MM/DD'
:
'YYYY-MM-DD'
;
if
(
this
.
params
.
gateUnid
)
{
if
(
this
.
params
.
gateUnid
)
{
this
.
getVideoAddress
()
this
.
getVideoAddress
()
}
}
...
@@ -146,10 +153,13 @@ export default {
...
@@ -146,10 +153,13 @@ export default {
// 暴露方法
// 暴露方法
// 截图方法
// 截图方法
screenshot
()
{
screenshot
()
{
return
this
.
$refs
.
vionPlayer
.
screenshot
().
then
(
data
=>
{
this
.
$refs
.
vionPlayer
.
screenshot
().
then
(
data
=>
{
return
data
;
console
.
log
(
data
)
wx
.
miniProgram
.
postMessage
({
data
:{
src
:
data
}
})
// Toast.success('截图成功');
}).
catch
(
err
=>
{
}).
catch
(
err
=>
{
})
})
},
},
// 关闭视频播放
// 关闭视频播放
stopPlay
()
{
stopPlay
()
{
...
@@ -164,5 +174,15 @@ export default {
...
@@ -164,5 +174,15 @@ export default {
width
:
100vw
;
width
:
100vw
;
height
:
56vw
;
height
:
56vw
;
overflow
:
hidden
;
overflow
:
hidden
;
position
:
relative
;
z-index
:
1
;
}
.screen-shot-img
{
position
:
absolute
;
right
:
53px
;
bottom
:
10px
;
width
:
16px
;
height
:
16px
;
z-index
:
1000
;
}
}
</
style
>
</
style
>
h5/src/views/extension/timeline-canvas-wx.vue
View file @
c2cb109
...
@@ -45,6 +45,8 @@ export default {
...
@@ -45,6 +45,8 @@ export default {
},
},
// 中间的时间,
// 中间的时间,
startMeddleTime
:
String
,
startMeddleTime
:
String
,
// 日期格式
dateFormatType
:
String
,
// 时间范围
// 时间范围
timeRange
:
{
timeRange
:
{
type
:
[
Array
,
String
],
type
:
[
Array
,
String
],
...
@@ -209,7 +211,7 @@ export default {
...
@@ -209,7 +211,7 @@ export default {
}
}
this
.
interval_play
=
setInterval
(()
=>
{
this
.
interval_play
=
setInterval
(()
=>
{
//中间时间增加1s
//中间时间增加1s
this
.
meddleTime
=
moment
(
this
.
meddleTime
).
add
(
1
,
"s"
).
format
(
"YYYY-MM-DD
HH:mm:ss"
);
this
.
meddleTime
=
moment
(
this
.
meddleTime
).
add
(
1
,
"s"
).
format
(
this
.
dateFormatType
+
"
HH:mm:ss"
);
let
status
=
let
status
=
this
.
realTimeRange
[
1
]
&&
new
Date
(
this
.
meddleTime
).
getTime
()
>=
new
Date
(
this
.
realTimeRange
[
1
]).
getTime
()
this
.
realTimeRange
[
1
]
&&
new
Date
(
this
.
meddleTime
).
getTime
()
>=
new
Date
(
this
.
realTimeRange
[
1
]).
getTime
()
?
"end"
?
"end"
...
@@ -302,7 +304,7 @@ export default {
...
@@ -302,7 +304,7 @@ export default {
if
(
!
this
.
isMove
)
{
if
(
!
this
.
isMove
)
{
let
date
=
e
.
offsetX
*
this
.
px_second
*
1000
+
this
.
firstTime
;
let
date
=
e
.
offsetX
*
this
.
px_second
*
1000
+
this
.
firstTime
;
date
=
this
.
boundary_time
(
date
);
date
=
this
.
boundary_time
(
date
);
let
_date
=
moment
(
date
).
format
(
"YYYY-MM-DD
HH:mm:ss"
);
let
_date
=
moment
(
date
).
format
(
this
.
dateFormatType
+
"
HH:mm:ss"
);
this
.
meddleTime
=
_date
;
this
.
meddleTime
=
_date
;
this
.
drow
();
this
.
drow
();
}
}
...
@@ -326,7 +328,7 @@ export default {
...
@@ -326,7 +328,7 @@ export default {
// 点击时的中间时间 + 坐标距离差转换后的时间 = 移动后的中间时间
// 点击时的中间时间 + 坐标距离差转换后的时间 = 移动后的中间时间
let
date
=
new
Date
(
this
.
mouseDownMeddleTime
).
getTime
()
+
offset
*
this
.
px_second
*
1000
;
let
date
=
new
Date
(
this
.
mouseDownMeddleTime
).
getTime
()
+
offset
*
this
.
px_second
*
1000
;
date
=
this
.
boundary_time
(
date
);
date
=
this
.
boundary_time
(
date
);
this
.
meddleTime
=
moment
(
date
).
format
(
"YYYY-MM-DD
HH:mm:ss"
);
this
.
meddleTime
=
moment
(
date
).
format
(
this
.
dateFormatType
+
"
HH:mm:ss"
);
this
.
$emit
(
"mouseMove"
,
this
.
meddleTime
);
this
.
$emit
(
"mouseMove"
,
this
.
meddleTime
);
},
},
drow
()
{
drow
()
{
...
@@ -389,10 +391,9 @@ export default {
...
@@ -389,10 +391,9 @@ export default {
this
.
ctx
.
fillStyle
=
this
.
colors
.
scaleLine
;
this
.
ctx
.
fillStyle
=
this
.
colors
.
scaleLine
;
this
.
ctx
.
font
=
`12px serif`
;
this
.
ctx
.
font
=
`12px serif`
;
if
(
i
==
0
&&
time
==
"00:00"
)
{
if
(
i
==
0
&&
time
==
"00:00"
)
{
// let show_time = moment(date).format("YYYY-MM-DD");
this
.
ctx
.
fillText
(
time
,
i
,
32
);
this
.
ctx
.
fillText
(
time
,
i
,
32
);
}
else
if
(
time
==
"00:00"
)
{
}
else
if
(
time
==
"00:00"
)
{
// let show_time = moment(date).format("YYYY-MM-DD");
this
.
ctx
.
fillText
(
time
,
i
-
30
,
32
);
this
.
ctx
.
fillText
(
time
,
i
-
30
,
32
);
}
else
if
(
this
.
showTime
(
time
))
{
}
else
if
(
this
.
showTime
(
time
))
{
this
.
ctx
.
fillText
(
time
,
i
-
15
,
32
);
this
.
ctx
.
fillText
(
time
,
i
-
15
,
32
);
...
@@ -407,10 +408,10 @@ export default {
...
@@ -407,10 +408,10 @@ export default {
if
(
this
.
realTimeRange
[
0
]
&&
this
.
realTimeRange
[
1
])
{
if
(
this
.
realTimeRange
[
0
]
&&
this
.
realTimeRange
[
1
])
{
time
=
moment
(
time
=
moment
(
(
new
Date
(
this
.
realTimeRange
[
0
]).
getTime
()
+
new
Date
(
this
.
realTimeRange
[
1
]).
getTime
())
/
2
(
new
Date
(
this
.
realTimeRange
[
0
]).
getTime
()
+
new
Date
(
this
.
realTimeRange
[
1
]).
getTime
())
/
2
).
format
(
"YYYY-MM-DD
HH:mm:ss"
);
).
format
(
this
.
dateFormatType
+
"
HH:mm:ss"
);
}
}
//设置默认中间时间(优先级:startMeddleTime参数指定>按有可活动时间范围计算>当前时间)
//设置默认中间时间(优先级:startMeddleTime参数指定>按有可活动时间范围计算>当前时间)
this
.
meddleTime
=
this
.
startMeddleTime
||
time
||
moment
(
new
Date
()).
format
(
"YYYY-MM-DD
HH:mm:ss"
);
this
.
meddleTime
=
this
.
startMeddleTime
||
time
||
moment
(
new
Date
()).
format
(
this
.
dateFormatType
+
"
HH:mm:ss"
);
},
},
//获取刻度上的第一个时间
//获取刻度上的第一个时间
getFirstLineTime
()
{
getFirstLineTime
()
{
...
@@ -418,7 +419,7 @@ export default {
...
@@ -418,7 +419,7 @@ export default {
//第一个时间不一定刚好落在刻度上,计算少了多少分才能到第一个刻度上(开始位置留白)
//第一个时间不一定刚好落在刻度上,计算少了多少分才能到第一个刻度上(开始位置留白)
let
remainder
=
this
.
scaleLine_minute
-
(
start
.
minute
()
%
this
.
scaleLine_minute
);
let
remainder
=
this
.
scaleLine_minute
-
(
start
.
minute
()
%
this
.
scaleLine_minute
);
remainder
=
remainder
==
this
.
scaleLine_minute
?
0
:
remainder
;
remainder
=
remainder
==
this
.
scaleLine_minute
?
0
:
remainder
;
return
start
.
add
(
remainder
,
"minutes"
).
format
(
"YYYY-MM-DD
HH:mm"
);
return
start
.
add
(
remainder
,
"minutes"
).
format
(
this
.
dateFormatType
+
"
HH:mm"
);
},
},
// 刻度时间显示(按级别显示)
// 刻度时间显示(按级别显示)
showTime
(
time
)
{
showTime
(
time
)
{
...
@@ -563,7 +564,6 @@ export default {
...
@@ -563,7 +564,6 @@ export default {
// setTimeRange(timeRange) {
// setTimeRange(timeRange) {
// this.realTimeRange = timeRange || this.timeRange;
// this.realTimeRange = timeRange || this.timeRange;
// if (typeof this.realTimeRange == "string") {
// if (typeof this.realTimeRange == "string") {
// let date = this.realTimeRange ? moment(this.realTimeRange).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD");
// this.realTimeRange = [date + " 00:00:00", date + " 23:59:59:59"];
// this.realTimeRange = [date + " 00:00:00", date + " 23:59:59:59"];
// }
// }
// },
// },
...
@@ -587,7 +587,7 @@ export default {
...
@@ -587,7 +587,7 @@ export default {
// 计算timeRange 兼容string |Array转换
// 计算timeRange 兼容string |Array转换
realTimeRange
()
{
realTimeRange
()
{
if
(
typeof
this
.
timeRange
==
"string"
)
{
if
(
typeof
this
.
timeRange
==
"string"
)
{
let
date
=
this
.
timeRange
?
moment
(
this
.
timeRange
).
format
(
"YYYY-MM-DD"
)
:
moment
().
format
(
"YYYY-MM-DD"
);
let
date
=
this
.
timeRange
?
moment
(
this
.
timeRange
).
format
(
this
.
dateFormatType
)
:
moment
().
format
(
this
.
dateFormatType
);
return
[
date
+
" 00:00:00"
,
date
+
" 23:59:59:59"
];
return
[
date
+
" 00:00:00"
,
date
+
" 23:59:59:59"
];
}
else
{
}
else
{
return
this
.
timeRange
;
return
this
.
timeRange
;
...
...
h5/src/views/extension/videoTime.vue
View file @
c2cb109
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
<!-- 时间轴 -->
<!-- 时间轴 -->
<div
class=
"time-axis"
>
<div
class=
"time-axis"
>
<div
class=
"timeline-canvas-box"
>
<div
class=
"timeline-canvas-box"
>
<TimeLineCanvas
id=
"timeline-canvas"
ref=
"time_line"
@
click=
"clickCanvas"
@
change=
"changeDate"
:mark-time=
"markTime"
:time-range=
"timeRange"
:isAutoPlay=
"isAutoPlay"
:startMeddleTime=
"startMeddleTime"
@
mouseMove=
"mouseMoveDate"
/>
<TimeLineCanvas
id=
"timeline-canvas"
ref=
"time_line"
@
click=
"clickCanvas"
@
change=
"changeDate"
:mark-time=
"markTime"
:time-range=
"timeRange"
:isAutoPlay=
"isAutoPlay"
:startMeddleTime=
"startMeddleTime"
@
mouseMove=
"mouseMoveDate"
:dateFormatType=
"dateFormatType"
/>
</div>
</div>
</div>
</div>
<!-- 日期操作区 -->
<!-- 日期操作区 -->
...
@@ -64,6 +64,7 @@
...
@@ -64,6 +64,7 @@
<
script
>
<
script
>
import
TimeLineCanvas
from
"./timeline-canvas-wx.vue"
;
import
TimeLineCanvas
from
"./timeline-canvas-wx.vue"
;
import
moment
from
"moment"
;
import
moment
from
"moment"
;
import
tourApi
from
'@/api'
;
export
default
{
export
default
{
name
:
'videoTime'
,
name
:
'videoTime'
,
data
()
{
data
()
{
...
@@ -72,7 +73,7 @@ export default {
...
@@ -72,7 +73,7 @@ export default {
selectableRange
:
'00:00:00 - 00:00:01'
selectableRange
:
'00:00:00 - 00:00:01'
},
},
showDayStr
:
moment
().
format
(
'MM月DD日'
),
showDayStr
:
moment
().
format
(
'MM月DD日'
),
showDay
:
moment
().
format
(
'YYYY-MM-DD'
)
,
showDay
:
''
,
showDaySelectShow
:
false
,
showDaySelectShow
:
false
,
showTimeSelectShow
:
false
,
showTimeSelectShow
:
false
,
defaultIndex
:
''
,
defaultIndex
:
''
,
...
@@ -90,59 +91,68 @@ export default {
...
@@ -90,59 +91,68 @@ export default {
isNoBack
:
true
,
isNoBack
:
true
,
maxDay
:
new
Date
(),
maxDay
:
new
Date
(),
minDay
:
new
Date
(
202
2
,
1
,
1
),
minDay
:
new
Date
(
202
3
,
8
,
1
),
ptzControlShow
:
false
,
ptzControlShow
:
false
,
isCanFastRight
:
false
,
isCanFastRight
:
false
,
timeColumns
:[],
timeColumns
:[],
ptzControlType
:
''
,
ptzControlType
:
''
,
playDateArr
:[],
}
}
},
},
props
:[
'dateFormatType'
],
components
:
{
components
:
{
TimeLineCanvas
,
TimeLineCanvas
,
},
},
mounted
()
{
mounted
()
{
let
that
=
this
let
that
=
this
this
.
timeRange
=
[
moment
().
format
(
'YYYY-MM-DD 00:00:00'
),
moment
().
format
(
'YYYY-MM-DD 23:59:59'
)]
this
.
showDay
=
moment
().
format
(
this
.
dateFormatType
)
this
.
timeRange
=
[
moment
().
format
(
this
.
dateFormatType
+
' 00:00:00'
),
moment
().
format
(
this
.
dateFormatType
+
' 23:59:59'
)]
this
.
startTimePickerOptions
.
selectableRange
=
'00:00:00 - '
+
moment
().
format
(
'HH:mm:ss'
)
this
.
startTimePickerOptions
.
selectableRange
=
'00:00:00 - '
+
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
nowPlayTime
=
this
.
startTime
this
.
nowPlayTime
=
this
.
startTime
this
.
startMeddleTime
=
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
startMeddleTime
=
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
this
.
proTimeColumns
()
this
.
proTimeColumns
()
},
},
beforeDestroy
()
{
beforeDestroy
()
{
this
.
stopPlay
()
this
.
stopPlay
()
},
},
methods
:
{
methods
:
{
// 获取可播放日期列表
getPlayDate
()
{
tourApi
.
ptzStop
(
par
).
then
(
res
=>
{
console
.
log
(
res
)
})
},
startPlay
()
{
startPlay
()
{
if
(
this
.
isAutoPlay
)
{
if
(
this
.
isAutoPlay
)
{
this
.
stopPlay
()
this
.
stopPlay
()
}
}
this
.
isNoBack
=
true
this
.
isNoBack
=
true
this
.
timeRange
=
[
moment
().
format
(
'YYYY-MM-DD 00:00:00'
),
moment
().
format
(
'YYYY-MM-DD
23:59:59'
)]
this
.
timeRange
=
[
moment
().
format
(
this
.
dateFormatType
+
' 00:00:00'
),
moment
().
format
(
this
.
dateFormatType
+
'
23:59:59'
)]
this
.
markTime
=
[{
this
.
markTime
=
[{
beginTime
:
moment
().
format
(
'YYYY-MM-DD
00:00:00'
),
beginTime
:
moment
().
format
(
this
.
dateFormatType
+
'
00:00:00'
),
endTime
:
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
),
endTime
:
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
),
bgColor
:
"rgba(255,153,0,0.4)"
,
bgColor
:
"rgba(255,153,0,0.4)"
,
text
:
""
,
text
:
""
,
}]
}]
this
.
startTimePickerOptions
.
selectableRange
=
'00:00:00 - '
+
moment
().
format
(
'HH:mm:ss'
)
this
.
startTimePickerOptions
.
selectableRange
=
'00:00:00 - '
+
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
showDayStr
=
moment
().
format
(
'MM月DD日'
)
this
.
showDayStr
=
moment
().
format
(
'MM月DD日'
)
this
.
showDay
=
moment
().
format
(
'YYYY-MM-DD'
)
this
.
showDay
=
moment
().
format
(
this
.
dateFormatType
)
this
.
startMeddleTime
=
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
startMeddleTime
=
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
this
.
$refs
.
time_line
.
play
(
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
));
this
.
$refs
.
time_line
.
play
(
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
));
this
.
isAutoPlay
=
true
this
.
isAutoPlay
=
true
},
},
stopPlay
()
{
stopPlay
()
{
this
.
isAutoPlay
=
false
this
.
isAutoPlay
=
false
this
.
isNoBack
=
true
this
.
isNoBack
=
true
this
.
markTime
=
[]
this
.
markTime
=
[]
this
.
timeRange
=
[
moment
().
format
(
'YYYY-MM-DD 00:00:00'
),
moment
().
format
(
'YYYY-MM-DD
23:59:59'
)]
this
.
timeRange
=
[
moment
().
format
(
this
.
dateFormatType
+
' 00:00:00'
),
moment
().
format
(
this
.
dateFormatType
+
'
23:59:59'
)]
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
showDayStr
=
moment
().
format
(
'MM月DD日'
)
this
.
showDayStr
=
moment
().
format
(
'MM月DD日'
)
this
.
showDay
=
moment
().
format
(
'YYYY-MM-DD'
)
this
.
showDay
=
moment
().
format
(
this
.
dateFormatType
)
this
.
startMeddleTime
=
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
startMeddleTime
=
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
if
(
this
.
$refs
.
time_line
)
{
if
(
this
.
$refs
.
time_line
)
{
this
.
$refs
.
time_line
.
stop
();
this
.
$refs
.
time_line
.
stop
();
}
}
...
@@ -151,14 +161,14 @@ export default {
...
@@ -151,14 +161,14 @@ export default {
console
.
log
(
val
)
console
.
log
(
val
)
this
.
showDaySelectShow
=
false
this
.
showDaySelectShow
=
false
this
.
showDayStr
=
moment
(
val
).
format
(
'MM月DD日'
)
this
.
showDayStr
=
moment
(
val
).
format
(
'MM月DD日'
)
this
.
showDay
=
moment
(
val
).
format
(
'YYYY-MM-DD'
)
this
.
showDay
=
moment
(
val
).
format
(
this
.
dateFormatType
)
if
(
this
.
showDay
==
moment
().
format
(
'YYYY-MM-DD'
)
&&!
type
)
{
if
(
this
.
showDay
==
moment
().
format
(
this
.
dateFormatType
)
&&!
type
)
{
this
.
isNoBack
=
true
this
.
isNoBack
=
true
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
startTimePickerOptions
.
selectableRange
=
'00:00:00 - '
+
moment
().
format
(
'HH:mm:ss'
)
this
.
startTimePickerOptions
.
selectableRange
=
'00:00:00 - '
+
moment
().
format
(
'HH:mm:ss'
)
this
.
markTime
=
[{
this
.
markTime
=
[{
beginTime
:
moment
().
format
(
'YYYY-MM-DD
00:00:00'
),
beginTime
:
moment
().
format
(
this
.
dateFormatType
+
'
00:00:00'
),
endTime
:
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
),
endTime
:
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
),
bgColor
:
"rgba(255,153,0,0.4)"
,
bgColor
:
"rgba(255,153,0,0.4)"
,
text
:
""
,
text
:
""
,
}]
}]
...
@@ -172,17 +182,17 @@ export default {
...
@@ -172,17 +182,17 @@ export default {
text
:
""
,
text
:
""
,
}]
}]
}
}
this
.
startMeddleTime
=
moment
(
this
.
showDay
+
' '
+
this
.
startTime
).
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
startMeddleTime
=
moment
(
this
.
showDay
+
' '
+
this
.
startTime
).
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
if
(
!
type
)
{
if
(
!
type
)
{
this
.
$emit
(
'videoTimeChange'
,
this
.
startMeddleTime
)
this
.
$emit
(
'videoTimeChange'
,
this
.
startMeddleTime
)
}
}
if
(
this
.
timeAccuracy
==
'24'
)
{
if
(
this
.
timeAccuracy
==
'24'
)
{
this
.
timeRange
=
[
this
.
showDay
+
' 00:00:00'
,
this
.
showDay
+
' 23:59:59'
]
this
.
timeRange
=
[
this
.
showDay
+
' 00:00:00'
,
this
.
showDay
+
' 23:59:59'
]
}
else
{
}
else
{
let
startTime
=
moment
(
this
.
startMeddleTime
).
subtract
((
this
.
timeAccuracy
/
2
),
"hours"
).
format
(
'YYYY-MM-DD
HH:mm:ss'
)
let
startTime
=
moment
(
this
.
startMeddleTime
).
subtract
((
this
.
timeAccuracy
/
2
),
"hours"
).
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
let
endTime
=
moment
(
this
.
startMeddleTime
).
add
((
this
.
timeAccuracy
/
2
),
"hours"
).
format
(
'YYYY-MM-DD
HH:mm:ss'
)
let
endTime
=
moment
(
this
.
startMeddleTime
).
add
((
this
.
timeAccuracy
/
2
),
"hours"
).
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
startTime
=
moment
(
startTime
).
format
(
'YYYY-MM-DD'
)
!=
this
.
showDay
?
this
.
showDay
+
' 00:00:00'
:
startTime
;
startTime
=
moment
(
startTime
).
format
(
this
.
dateFormatType
)
!=
this
.
showDay
?
this
.
showDay
+
' 00:00:00'
:
startTime
;
endTime
=
moment
(
endTime
).
format
(
'YYYY-MM-DD'
)
!=
this
.
showDay
?
this
.
showDay
+
' 23:59:59'
:
endTime
;
endTime
=
moment
(
endTime
).
format
(
this
.
dateFormatType
)
!=
this
.
showDay
?
this
.
showDay
+
' 23:59:59'
:
endTime
;
this
.
timeRange
=
[
startTime
,
endTime
]
this
.
timeRange
=
[
startTime
,
endTime
]
}
}
this
.
nowPlayTime
=
moment
(
this
.
startMeddleTime
).
format
(
'HH:mm:ss'
)
this
.
nowPlayTime
=
moment
(
this
.
startMeddleTime
).
format
(
'HH:mm:ss'
)
...
@@ -194,10 +204,10 @@ export default {
...
@@ -194,10 +204,10 @@ export default {
startTimeChange
(
val
)
{
startTimeChange
(
val
)
{
this
.
showTimeSelectShow
=
false
this
.
showTimeSelectShow
=
false
this
.
startTime
=
val
this
.
startTime
=
val
this
.
startMeddleTime
=
moment
(
this
.
showDay
+
' '
+
val
).
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
startMeddleTime
=
moment
(
this
.
showDay
+
' '
+
val
).
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
this
.
$emit
(
'videoTimeChange'
,
this
.
startMeddleTime
)
this
.
$emit
(
'videoTimeChange'
,
this
.
startMeddleTime
)
this
.
nowPlayTime
=
moment
(
val
).
format
(
'HH:mm:ss'
)
this
.
nowPlayTime
=
moment
(
val
).
format
(
'HH:mm:ss'
)
this
.
isNoBack
=
this
.
startMeddleTime
==
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
isNoBack
=
this
.
startMeddleTime
==
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
this
.
ptzControlShow
=
false
this
.
ptzControlShow
=
false
this
.
isCanFast
()
this
.
isCanFast
()
...
@@ -218,7 +228,7 @@ export default {
...
@@ -218,7 +228,7 @@ export default {
// 返回实时
// 返回实时
backRealTime
()
{
backRealTime
()
{
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
().
format
(
'HH:mm:ss'
)
this
.
showDayChange
(
moment
().
format
(
'YYYY-MM-DD'
))
this
.
showDayChange
(
moment
().
format
(
this
.
dateFormatType
))
this
.
ptzControlShow
=
false
this
.
ptzControlShow
=
false
this
.
isCanFastRight
=
false
this
.
isCanFastRight
=
false
},
},
...
@@ -227,9 +237,9 @@ export default {
...
@@ -227,9 +237,9 @@ export default {
clickCanvas
(
date
)
{
clickCanvas
(
date
)
{
// console.log(date);
// console.log(date);
this
.
startTime
=
moment
(
date
).
format
(
'HH:mm:ss'
)
this
.
startTime
=
moment
(
date
).
format
(
'HH:mm:ss'
)
this
.
isNoBack
=
moment
(
date
).
format
(
'YYYY-MM-DD HH:mm:ss'
)
==
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
)
this
.
isNoBack
=
moment
(
date
).
format
(
this
.
dateFormatType
+
' HH:mm:ss'
)
==
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
)
this
.
ptzControlShow
=
false
this
.
ptzControlShow
=
false
this
.
$emit
(
'videoTimeChange'
,
moment
(
date
).
format
(
'YYYY-MM-DD
HH:mm:ss'
))
this
.
$emit
(
'videoTimeChange'
,
moment
(
date
).
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
))
this
.
isCanFast
()
this
.
isCanFast
()
},
},
changeDate
(
date
,
status
)
{
changeDate
(
date
,
status
)
{
...
@@ -243,16 +253,16 @@ export default {
...
@@ -243,16 +253,16 @@ export default {
if
(
this
.
startTime
==
'23:59:59'
)
{
if
(
this
.
startTime
==
'23:59:59'
)
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
startTime
=
'00:00:00'
this
.
startTime
=
'00:00:00'
this
.
showDayChange
(
moment
(
date
).
add
(
1
,
'days'
).
format
(
'YYYY-MM-DD'
),
'start'
)
this
.
showDayChange
(
moment
(
date
).
add
(
1
,
'days'
).
format
(
this
.
dateFormatType
),
'start'
)
this
.
$refs
.
time_line
.
play
(
moment
(
date
).
add
(
1
,
'days'
).
format
(
'YYYY-MM-DD
00:00:00'
));
this
.
$refs
.
time_line
.
play
(
moment
(
date
).
add
(
1
,
'days'
).
format
(
this
.
dateFormatType
+
'
00:00:00'
));
},
900
)
},
900
)
}
else
{
}
else
{
this
.
proTimeColumns
()
this
.
proTimeColumns
()
}
}
if
(
moment
(
date
).
format
(
'YYYY-MM-DD'
)
==
moment
().
format
(
'YYYY-MM-DD'
))
{
if
(
moment
(
date
).
format
(
this
.
dateFormatType
)
==
moment
().
format
(
this
.
dateFormatType
))
{
this
.
markTime
=
[{
this
.
markTime
=
[{
beginTime
:
moment
().
format
(
'YYYY-MM-DD
00:00:00'
),
beginTime
:
moment
().
format
(
this
.
dateFormatType
+
'
00:00:00'
),
endTime
:
moment
().
format
(
'YYYY-MM-DD
HH:mm:ss'
),
endTime
:
moment
().
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
),
bgColor
:
"rgba(255,153,0,0.4)"
,
bgColor
:
"rgba(255,153,0,0.4)"
,
text
:
""
,
text
:
""
,
}]
}]
...
@@ -270,7 +280,7 @@ export default {
...
@@ -270,7 +280,7 @@ export default {
let
maxHour
=
23
let
maxHour
=
23
let
maxMin
=
59
let
maxMin
=
59
let
maxSec
=
59
let
maxSec
=
59
if
(
this
.
showDay
==
moment
().
format
(
'YYYY-MM-DD'
))
{
if
(
this
.
showDay
==
moment
().
format
(
this
.
dateFormatType
))
{
let
nowDate
=
new
Date
()
let
nowDate
=
new
Date
()
maxHour
=
nowDate
.
getHours
()
maxHour
=
nowDate
.
getHours
()
maxMin
=
nowDate
.
getMinutes
()
maxMin
=
nowDate
.
getMinutes
()
...
@@ -330,7 +340,7 @@ export default {
...
@@ -330,7 +340,7 @@ export default {
// 快退/快进
// 快退/快进
fastChangeStartTime
(
val
)
{
fastChangeStartTime
(
val
)
{
let
newTime
=
val
>
0
?
moment
(
this
.
showDay
+
' '
+
this
.
startTime
).
add
(
val
,
"seconds"
).
format
(
'YYYY-MM-DD HH:mm:ss'
):
moment
(
this
.
showDay
+
' '
+
this
.
startTime
).
subtract
(
val
*-
1
,
"seconds"
).
format
(
'YYYY-MM-DD
HH:mm:ss'
);
let
newTime
=
val
>
0
?
moment
(
this
.
showDay
+
' '
+
this
.
startTime
).
add
(
val
,
"seconds"
).
format
(
this
.
dateFormatType
+
' HH:mm:ss'
):
moment
(
this
.
showDay
+
' '
+
this
.
startTime
).
subtract
(
val
*-
1
,
"seconds"
).
format
(
this
.
dateFormatType
+
'
HH:mm:ss'
);
let
newDay
=
newTime
.
slice
(
0
,
10
)
let
newDay
=
newTime
.
slice
(
0
,
10
)
if
(
newDay
==
this
.
showDay
)
{
if
(
newDay
==
this
.
showDay
)
{
this
.
startTimeChange
(
newTime
.
slice
(
11
))
this
.
startTimeChange
(
newTime
.
slice
(
11
))
...
...
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