-
@@ -145,9 +148,10 @@
let videoSrc = ref('')
let show = ref(false)
let loading = ref(false)
+ let total = ref(0)
let params = reactive({
pageNum: 1,
- pageSize: 7,
+ pageSize: 6,
businessScenicArea: '',
businessVideoDisplayPosition: ''
})
@@ -164,18 +168,12 @@
nextTick(() => {
videoList.value.forEach(async (item, index) => {
const video = document.getElementById(`monitorVideo${index}`)
- let res = await postRefreshApi({
- type: 'hls',
- businessVideoDisplayPosition: item.businessVideoDisplayPosition,
- cameraIndexCode: item.cameraIndexCode
- })
- item.hlsUrl = res.data.hlsUrl
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
})
- hls.loadSource(res.data.hlsUrl)
+ hls.loadSource(item.hlsUrl)
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
@@ -183,11 +181,16 @@
})
})
}
+ const currentChange = (e) => {
+ videoList.value = []
+ getVideoList()
+ }
const handleNav = (e) => {
if (current.value == e) return
videoLog.value = 1
params.pageNum = 1
videoList.value = []
+ total.value = 0
current.value = e
getVideoList()
}
@@ -197,7 +200,7 @@
}
const handleItemVideo = (url, type) => {
videoLog.value = 2
- nextTick(() => {
+ setTimeout(() => {
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -209,7 +212,20 @@
videoRef.value.play()
})
if (type == 100) initVideo()
- })
+ }, 1000)
+ // nextTick(() => {
+ // const hls = new Hls({
+ // maxBufferLength: 10, // 最大缓冲长度（秒）
+ // maxMaxBufferLength: 15, // 缓冲区长度的上限
+ // maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+ // })
+ // hls.loadSource(url)
+ // hls.attachMedia(videoRef.value)
+ // hls.on(Hls.Events.MANIFEST_PARSED, () => {
+ // videoRef.value.play()
+ // })
+ // if (type == 100) initVideo()
+ // })
}
const handleCamera = async (cameraIndexCode) => {
show.value = true
@@ -225,22 +241,9 @@
loading.value = true
params.businessVideoDisplayPosition = navList.value[current.value].dictValue
let res = await getVideoListApi(params)
+ total.value = res.total
if (res.data.length > 0) {
- let list = res.data
- list.forEach(async (i) => {
- let res = await postRefreshApi({
- type: 'hls',
- businessVideoDisplayPosition: i.businessVideoDisplayPosition,
- cameraIndexCode: i.cameraIndexCode
- })
- return {
- ...i,
- hlsUrl: res.data.hlsUrl
- }
- })
- videoList.value = [...videoList.value, ...res.data]
- params.pageNum++
- // postVideoRemain()
+ videoList.value = res.data
nextTick(() => {
videoList.value.forEach(async (x, index) => {
const video = document.getElementById(`monitorVideo${index}`)
@@ -275,22 +278,23 @@
}
}
const getVideoRegions = async () => {
- if(params.businessScenicArea=='三峡之巅'){
- regionList.value = [{
- "regions": "调试中",
- "videoResources": []
- },
+ if (params.businessScenicArea == '三峡之巅') {
+ regionList.value = [
{
- "regions": "调试中",
- "videoResources": []
- }];
- }else{
+ regions: '调试中',
+ videoResources: []
+ },
+ {
+ regions: '调试中',
+ videoResources: []
+ }
+ ]
+ } else {
let res = await getVideoRegionsApi({
businessScenicArea: params.businessScenicArea
})
regionList.value = res.data
}
-
}
const onMonitorChange = () => {
monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
@@ -474,37 +478,29 @@
.video {
&-wrapper {
+ position: relative;
width: 100%;
height: vh(960);
padding: vh(30) vw(20);
+ box-sizing: border-box;
background-image: url('/src/assets/images/log-v-bg.png');
background-size: 100% 100%;
+ .pagination {
+ padding: vh(10) vw(30);
+ position: absolute;
+ right: vw(30);
+ bottom: vh(20);
+ }
}
&-list {
- overflow-y: auto;
- width: 100%;
- height: 100%;
gap: vw(8);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
-
- &::-webkit-scrollbar {
- width: vw(4); /* 滚动条的宽度 */
- }
- /* 滚动条轨道 */
- &::-webkit-scrollbar-track {
- background: 'transparent'; /* 轨道的背景色 */
- }
- /* 滚动条滑块 */
- &::-webkit-scrollbar-thumb {
- background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
- border-radius: 5px; /* 滑块的圆角 */
- }
}
&-item {
width: vw(686);
- height: vh(460);
+ height: vh(420);
padding: vw(10);
background-image: url('/src/assets/images/item-primary.png');
background-size: 100% 100%;
@@ -538,7 +534,7 @@
}
&-item__video {
width: 100%;
- height: vh(446);
+ height: vh(406);
}
&-detail {