From 8954db4cf4969166961c72569dfa24645276b947 Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期日, 30 八月 2026 11:48:15 +0800
Subject: [PATCH] 修复首页问题
---
src/modules/monitor/views/cameras.vue | 117 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 91 insertions(+), 26 deletions(-)
diff --git a/src/modules/monitor/views/cameras.vue b/src/modules/monitor/views/cameras.vue
index 19fe750..94372c4 100644
--- a/src/modules/monitor/views/cameras.vue
+++ b/src/modules/monitor/views/cameras.vue
@@ -1,17 +1,17 @@
<template>
<div class="camera-page">
<div class="scroll-wrapper">
- <el-button class="arrow left" @click="scrollLeft" :disabled="canScrollLeft" circle>
+ <el-button class="arrow left" @click="scrollLeftManual" :disabled="canScrollLeft" circle>
<el-icon><ArrowLeft /></el-icon>
</el-button>
- <div class="scroll-viewport" ref="viewportRef">
+ <div class="scroll-viewport" ref="viewportRef" @mouseenter="pauseAuto" @mouseleave="resumeAuto">
<div class="scroll-track" :style="{ transform: `translateX(${-scrollPos}px)` }">
<div v-for="dev in deviceList" :key="dev.id" class="player-card">
<ezuikit-player
v-if="ysToken"
- :key="'p_' + dev.id + '_' + ysToken"
- :container-id="'player_' + dev.id"
+ :key="'p_' + dev.id + '_' + ysToken + '_' + playerRemountKey"
+ :container-id="'player_' + dev.id + '_' + playerRemountKey"
:access-token="ysToken"
:url="`ezopen://open.ys7.com/${dev.iotCode || dev.code}/1.hd.live`"
:pause-after-first-frame="true"
@@ -20,7 +20,7 @@
</div>
</div>
- <el-button class="arrow right" @click="scrollRight" :disabled="canScrollRight" circle>
+ <el-button class="arrow right" @click="scrollRightManual" :disabled="canScrollRight" circle>
<el-icon><ArrowRight /></el-icon>
</el-button>
</div>
@@ -44,42 +44,100 @@
const loading = ref(false);
const scrollPos = ref(0);
const viewportRef = ref<HTMLElement | null>(null);
+/** 鍏ㄥ睆鍒囨崲鍚庨�掑锛屽己鍒堕噸寤鸿悿鐭虫挱鏀惧櫒 */
+const playerRemountKey = ref(0);
-// 姣忔婊氬姩鐨勮窛绂伙紙涓�涓憚鍍忓ご鐨勫搴� + 闂磋窛锛�
+function onScreenFullscreenChange() {
+ playerRemountKey.value += 1;
+}
+
+// 鑷姩婊氬姩鎺у埗
+const AUTO_INTERVAL = 3000; // 姣忔婊氬姩闂撮殧(ms)
+const autoPlay = ref(true); // 鏄惁鑷姩婊氬姩
+let autoTimer: ReturnType<typeof setInterval> | null = null;
+
+// 姣忔婊氬姩鐨勮窛绂�
const scrollStep = computed(() => {
- const cardWidth = 312; // 300px 瀹藉害 + 12px 闂磋窛鐨勪竴鍗�
+ const cardWidth = 300; // 涓� player-card 瀹藉害涓�鑷�
const gap = 12;
return cardWidth + gap;
});
-// 鏄惁鍙互鍚戝乏婊氬姩
-const canScrollLeft = computed(() => scrollPos.value <= 0);
-
-// 鏄惁鍙互鍚戝彸婊氬姩
-const canScrollRight = computed(() => {
- if (!viewportRef.value) return true;
+// 鍙粴鍔ㄧ殑鏈�澶ц窛绂�
+const maxScroll = computed(() => {
+ if (!viewportRef.value) return 0;
const viewportWidth = viewportRef.value.clientWidth;
const trackWidth = deviceList.value.length * scrollStep.value;
- // 澧炲姞 2px 瀹瑰樊
- return scrollPos.value >= trackWidth - viewportWidth - 2;
+ return Math.max(0, trackWidth - viewportWidth);
});
+
+// 鏄惁鍙互鍚戝乏/鍚戝彸婊氬姩锛堟墜鍔ㄧ澶寸敤锛�
+const canScrollLeft = computed(() => scrollPos.value <= 0);
+const canScrollRight = computed(() => scrollPos.value >= maxScroll.value - 2);
+
+// 鑷姩婊氬姩鏂瑰悜: 1 鍚戝彸, -1 鍚戝乏
+const direction = ref(1);
function scrollLeft() {
scrollPos.value = Math.max(0, scrollPos.value - scrollStep.value);
}
function scrollRight() {
- if (!viewportRef.value) return;
- const viewportWidth = viewportRef.value.clientWidth;
- const trackWidth = deviceList.value.length * scrollStep.value;
- const maxScroll = trackWidth - viewportWidth;
-
- // 濡傛灉鍓╀綑璺濈灏忎簬涓�涓闀匡紝鐩存帴婊氬姩鍒板簳閮�
- if (scrollPos.value + scrollStep.value >= maxScroll) {
- scrollPos.value = maxScroll;
+ const max = maxScroll.value;
+ if (scrollPos.value + scrollStep.value >= max) {
+ scrollPos.value = max;
} else {
scrollPos.value += scrollStep.value;
}
+}
+
+// 鎵ц涓�姝ヨ嚜鍔ㄦ粴鍔紙鍒拌竟鐣岃嚜鍔ㄦ崲鍚戯紝鍥炲埌璧风偣寰幆锛�
+function autoTick() {
+ if (deviceList.value.length === 0) return;
+ if (maxScroll.value <= 0) return; // 涓�灞忚涓嬪叏閮紝涓嶆粴鍔�
+
+ scrollPos.value += scrollStep.value * direction.value;
+
+ if (scrollPos.value >= maxScroll.value) {
+ scrollPos.value = maxScroll.value;
+ direction.value = -1; // 鍒版渶鍙筹紝鍥炲ご鍚戝乏
+ } else if (scrollPos.value <= 0) {
+ scrollPos.value = 0;
+ direction.value = 1; // 鍥炲埌璧风偣锛屽惊鐜悜鍙�
+ pauseAuto(); // 鍥炲埌璧风偣鍋滀竴涓嬶紙鍙�夛紝瑙佷笅鏂� startAuto锛�
+ startAuto(); // 绔嬪嵆寮�濮嬫柊涓�杞�
+ }
+}
+
+function startAuto() {
+ stopAuto();
+ if (!autoPlay.value) return;
+ autoTimer = setInterval(autoTick, AUTO_INTERVAL);
+}
+
+function stopAuto() {
+ if (autoTimer) {
+ clearInterval(autoTimer);
+ autoTimer = null;
+ }
+}
+
+// 榧犳爣鎮仠鏆傚仠锛岀Щ寮�缁х画
+function pauseAuto() {
+ stopAuto();
+}
+function resumeAuto() {
+ startAuto();
+}
+
+// 鎵嬪姩鐐瑰嚮绠ご锛氶噸缃嚜鍔ㄦ粴鍔ㄥ畾鏃跺櫒锛岄伩鍏嶄笌鑷姩鑺傚鍐茬獊
+function scrollLeftManual() {
+ scrollLeft();
+ startAuto();
+}
+function scrollRightManual() {
+ scrollRight();
+ startAuto();
}
async function fetchYsToken() {
@@ -98,6 +156,9 @@
const res = await service.basicdata.iot.getCameras();
deviceList.value = (res || []) as any[];
scrollPos.value = 0;
+ direction.value = 1;
+ // 鏁版嵁鍔犺浇瀹屽啀鍚姩鑷姩婊氬姩
+ startAuto();
} catch (e: any) {
console.error('鑾峰彇鎽勫儚澶村垪琛ㄥけ璐�', e?.response?.data?.message || e.message);
deviceList.value = [];
@@ -107,22 +168,26 @@
}
async function refreshDevices() {
+ stopAuto();
await fetchDevices();
}
function handleKeydown(e: KeyboardEvent) {
- if (e.key === 'ArrowLeft') scrollLeft();
- if (e.key === 'ArrowRight') scrollRight();
+ if (e.key === 'ArrowLeft') { scrollLeftManual(); }
+ if (e.key === 'ArrowRight') { scrollRightManual(); }
}
onMounted(async () => {
window.addEventListener('keydown', handleKeydown);
+ window.addEventListener('report-screen-fullscreen-change', onScreenFullscreenChange);
await fetchYsToken();
- await fetchDevices();
+ await fetchDevices(); // 鍐呴儴浼氬湪鏁版嵁灏辩华鍚� startAuto
});
onUnmounted(() => {
+ stopAuto();
window.removeEventListener('keydown', handleKeydown);
+ window.removeEventListener('report-screen-fullscreen-change', onScreenFullscreenChange);
});
</script>
--
Gitblit v1.9.1