diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue index 3d21007..37869b5 100644 --- a/src/views/monitor/components/box-2.vue +++ b/src/views/monitor/components/box-2.vue @@ -142,7 +142,7 @@ let loading = ref(false) let params = reactive({ pageNum: 1, - pageSize: 16, + pageSize: 7, businessScenicArea: '', businessVideoDisplayPosition: '' }) @@ -215,39 +215,46 @@ videoSrc.value = res.data.url } const getVideoList = async () => { - params.businessVideoDisplayPosition = navList.value[current.value].dictValue - let res = await getVideoListApi(params) - 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() - nextTick(() => { - videoList.value.forEach(async (x, index) => { - const video = document.getElementById(`monitorVideo${index}`) - const hls = new Hls({ - maxBufferLength: 10, // 最大缓冲长度(秒) - maxMaxBufferLength: 15, // 缓冲区长度的上限 - maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小(字节) + try { + if (loading.value) return + loading.value = true + params.businessVideoDisplayPosition = navList.value[current.value].dictValue + let res = await getVideoListApi(params) + 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 }) - hls.loadSource(x.hlsUrl) - hls.attachMedia(video) - hls.on(Hls.Events.MANIFEST_PARSED, () => { - video.play() + return { + ...i, + hlsUrl: res.data.hlsUrl + } + }) + videoList.value = [...videoList.value, ...res.data] + params.pageNum++ + // postVideoRemain() + nextTick(() => { + videoList.value.forEach(async (x, index) => { + const video = document.getElementById(`monitorVideo${index}`) + const hls = new Hls({ + maxBufferLength: 10, // 最大缓冲长度(秒) + maxMaxBufferLength: 15, // 缓冲区长度的上限 + maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小(字节) + }) + hls.loadSource(x.hlsUrl) + hls.attachMedia(video) + hls.on(Hls.Events.MANIFEST_PARSED, () => { + video.play() + }) }) }) - }) + } + loading.value = false + } catch (error) { + loading.value = false } } const getVideoType = async (id) => { @@ -263,17 +270,10 @@ } } const getVideoRegions = async () => { - if (loading.value) return - loading.value = true - try { - let res = await getVideoRegionsApi({ - businessScenicArea: params.businessScenicArea - }) - regionList.value = res.data - loading.value = false - } catch (error) { - loading.value = false - } + let res = await getVideoRegionsApi({ + businessScenicArea: params.businessScenicArea + }) + regionList.value = res.data } const onMonitorChange = () => { monitorChange = PubSub.subscribe('monitorChange', (res, data) => { @@ -486,12 +486,12 @@ } } &-item { - width: vw(406); - height: vh(300); + width: vw(686); + height: vh(460); padding: vw(10); background-image: url('/src/assets/images/item-primary.png'); background-size: 100% 100%; - &:nth-child(5n) { + &:nth-child(3n) { margin-right: 0; } } @@ -521,7 +521,7 @@ } &-item__video { width: 100%; - height: vh(286); + height: vh(446); } &-detail {