From 25aad646f6e19a23b1903c5d2e1f2cacf3142a9d Mon Sep 17 00:00:00 2001
From: wangrong <wangrong@shsening.com>
Date: 星期四, 13 八月 2026 11:59:24 +0800
Subject: [PATCH] 修改监控摄像头自动播放1秒
---
src/modules/monitor/views/device.vue | 101 +++++++++++++++++++++++++++++++-------------------
1 files changed, 62 insertions(+), 39 deletions(-)
diff --git a/src/modules/monitor/views/device.vue b/src/modules/monitor/views/device.vue
index 4f9edfb..1eece8a 100644
--- a/src/modules/monitor/views/device.vue
+++ b/src/modules/monitor/views/device.vue
@@ -1,27 +1,28 @@
<template>
- <div class="monitor-page" style="height:100%;display:flex;gap:12px;">
- <!-- 宸︿晶鏍戝舰 -->
- <div class="left-tree" style="width:280px;border:1px solid var(--el-border-color);border-radius:6px;">
- <site-tree @select="handleTreeSelect" />
- </div>
+ <div class="monitor-page">
+ <!-- 宸︿晶鏍戝舰 -->
+ <div class="left-tree">
+ <site-tree @select="handleTreeSelect" />
+ </div>
- <!-- 鍙充晶鐩戞帶鍖哄煙 -->
- <div class="right-player" style="flex:1;border:1px solid var(--el-border-color);border-radius:6px;padding:12px;overflow:auto;">
- <el-empty v-if="deviceList.length === 0" description="璇峰乏渚ч�夋嫨绔欑偣鍔犺浇鐩戞帶璁惧" />
- <div class="player-grid" v-if="deviceList.length">
- <div v-for="dev in deviceList" :key="dev.id" class="player-card">
- <div class="title">{{ dev.iotName }}</div>
- <EzuikitPlayer
- v-if="ysToken"
- :key="'p_' + dev.id + '_' + ysToken"
- :container-id="'player_' + dev.id"
- :access-token="ysToken"
- :url="`ezopen://open.ys7.com/${dev.iotCode}/1.hd.live`"
- />
- </div>
- </div>
- </div>
- </div>
+ <!-- 鍙充晶鐩戞帶鍖哄煙 -->
+ <div class="right-player">
+ <el-empty v-if="deviceList.length === 0" description="璇峰乏渚ч�夋嫨绔欑偣鍔犺浇鐩戞帶璁惧" />
+ <div v-else class="player-grid" :style="gridStyle">
+ <div v-for="dev in deviceList" :key="dev.id" class="player-card">
+ <!-- <div class="title">{{ dev.iotName }}</div> -->
+ <ezuikit-player
+ v-if="ysToken"
+ :key="'p_' + dev.id + '_' + ysToken"
+ :container-id="'player_' + dev.id"
+ :access-token="ysToken"
+ :url="`ezopen://open.ys7.com/${dev.iotCode}/1.hd.live`"
+ :pause-at-first-frame="true"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts" setup>
@@ -29,7 +30,7 @@
name: 'monitor-device',
});
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
import { useCool } from '/@/cool';
import SiteTree from '../components/site-tree.vue';
import EzuikitPlayer from '../../ezuikit/components/ezuikit-player.vue';
@@ -37,20 +38,33 @@
const { service } = useCool();
const deviceList = ref<any[]>([]);
-let ysToken = ref('');
+const ysToken = ref('');
+
+// 鉁� 鏍规嵁璁惧鏁伴噺鑷姩璁＄畻缃戞牸鍒楁暟
+const gridCols = computed(() => {
+ const n = deviceList.value.length;
+ if (n <= 1) return 1;
+ if (n <= 4) return 2; // 2~4 涓� 鈫� 2 鍒�
+ if (n <= 6) return 3; // 5~6 涓� 鈫� 3 鍒�
+ if (n <= 8) return 4; // 7~8 涓� 鈫� 4 鍒�
+ return 4;
+});
+
+const gridStyle = computed(() => ({
+ gridTemplateColumns: `repeat(${gridCols.value}, 1fr)`,
+}));
async function fetchYsToken() {
if (ysToken.value) return;
try {
- //const res = await service.monitor.ys7.getToken();
- const res = await service.base.sys.param.stringbykey({key:"ys7.accessToken"});
- ysToken = res;
+ const res = await service.base.sys.param.stringbykey({ key: 'ys7.accessToken' });
+ ysToken.value = res as string; // 鉁� 淇锛氳祴鍊肩粰 .value
} catch (e: any) {
console.error('钀ょ煶 Token 鑾峰彇澶辫触', e?.response?.data?.message || e.message);
}
}
-onMounted(fetchYsToken);
+onMounted(fetchYsToken); // 鉁� 淇锛歰nMounted
async function handleTreeSelect(businessId: string | number | null) {
if (!businessId) {
@@ -60,7 +74,7 @@
if (!ysToken.value) await fetchYsToken();
try {
const res = await service.basicdata.iot.getYsDevices({ businessId });
- deviceList.value = res || [];
+ deviceList.value = (res || []) as any[];
} catch {
deviceList.value = [];
}
@@ -69,23 +83,32 @@
<style lang="scss" scoped>
.monitor-page {
- height: 100%;
+ height: 100%;
+ display: flex;
+ gap: 12px;
}
.left-tree {
- height: 100%;
+ width: 280px;
+ height: 100%;
+ border: 1px solid var(--el-border-color);
+ border-radius: 6px;
}
.right-player {
- height: 100%;
+ flex: 1;
+ height: 100%;
+ border: 1px solid var(--el-border-color);
+ border-radius: 6px;
+ padding: 12px;
+ overflow: auto;
}
.player-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
- gap: 16px;
+ display: grid;
+ gap: 16px;
}
.player-card {
- .title {
- padding: 6px 0;
- font-weight: 500;
- }
+ .title {
+ padding: 6px 0;
+ font-weight: 500;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1