From 32feaeb0b50df7a94f214f99fee3c135446ea4ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Fri, 25 Oct 2024 16:55:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E4=B8=BB=E9=A1=B5=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E9=A2=9C=E8=89=B2=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/html/Home.vue | 416 +++++++++++++++++++++++++++++++---------------
 1 file changed, 280 insertions(+), 136 deletions(-)

diff --git a/src/html/Home.vue b/src/html/Home.vue
index 32f3dd5..ac7be23 100644
--- a/src/html/Home.vue
+++ b/src/html/Home.vue
@@ -1,8 +1,15 @@
 <template>
   <div class="camera-container">
-    <!-- 左侧摄像头列表 -->
+    <!-- 左侧：摄像头列表 -->
     <div class="camera-list">
-      <el-card v-for="camera in cameras" :key="camera.id" class="camera-item" @click="selectCamera(camera)">
+      <el-input
+        v-model="searchQuery"
+        placeholder="搜索摄像头名称"
+        prefix-icon="el-icon-search"
+        clearable
+        class="search-input"
+      />
+      <el-card v-for="camera in filteredCameras" :key="camera.id" class="camera-item" @click="selectCamera(camera)">
         <div class="camera-header">
           <span>ID: {{ camera.id }}</span>
           <span class="status" :class="{ 'online': camera.status === 'online', 'offline': camera.status !== 'online' }">
@@ -16,208 +23,232 @@
       </el-card>
     </div>
 
-    <!-- 右侧摄像头详情和播放控制 -->
-    <div class="camera-details" v-if="selectedCamera">
-      <el-card>
-        <div class="stream-control">
-          <p>{{ selectedCamera.name }}</p>
-        </div>
+    <!-- 右侧：摄像头详情栅格 -->
+    <div class="camera-grid">
+      <div v-for="camera in selectedCameras" :key="camera.id" class="camera-details">
+        <el-card class="camera-card">
+          <div class="stream-control">
+            <p class="camera-name-title">{{ camera.name }}</p>
+            <el-button @click="closeStream(camera)" class="close-button" circle size="mini">X</el-button>
+          </div>
 
-        <!-- 在未播放时显示播放按钮 -->
-        <div class="play-button-container" @mouseenter="showButton = true" @mouseleave="showButton = false">
-          <img v-show="!playing && selectedCamera.snapshot" :src="selectedCamera.snapshot" alt="camera snapshot"
-            class="camera-snapshot" />
-          <canvas v-show="playing" ref="canvasRef" class="camera-large"></canvas>
+          <!-- 视频播放和快照部分 -->
+          <div class="play-button-container" @mouseenter="showButton = true" @mouseleave="showButton = false">
+            <!-- 未播放时显示快照或占位符 -->
+            <div class="camera-placeholder" v-if="!camera.playing && !camera.snapshot">
+              <el-icon size="48">
+                <VideoCameraFilled />
+              </el-icon>
+            </div>
 
-          <!-- 播放按钮 -->
-          <el-button v-show="!playing || showButton" class="play-button" type="primary" circle size="large"
-            @click="handlePlayPause">
-            <el-icon>
-              <VideoPlay v-if="!playing" />
-              <VideoPause v-if="playing" />
-            </el-icon>
-          </el-button>
-        </div>
-      </el-card>
+            <img v-if="!camera.playing && camera.snapshot" :src="camera.snapshot" alt="camera snapshot"
+              class="camera-snapshot" />
+
+            <!-- 播放视频流的 canvas -->
+            <canvas v-show="camera.playing" :ref="el => setCanvasRef(camera.id, el)" class="camera-large"></canvas>
+
+            <!-- 播放和暂停按钮 -->
+            <el-button v-show="!camera.playing || showButton" class="play-button" type="primary" circle size="large"
+              @click="handlePlayPause(camera)">
+              <el-icon>
+                <VideoPlay v-if="!camera.playing" />
+                <VideoPause v-if="camera.playing" />
+              </el-icon>
+            </el-button>
+          </div>
+        </el-card>
+      </div>
     </div>
   </div>
 </template>
 
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick,computed } from 'vue';
 import { BoxApi } from '@/utils/boxApi.ts';
-import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
+import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
 
+// 存储所有摄像头列表
 const cameras = ref([]);
-const selectedCamera = ref(null);
-const playing = ref(false);
-const streamPort = ref(null);
-const canvasRef = ref(null);
-const playerRef = ref(null);
-const showButton = ref(false); // 用于控制按钮的显示和隐藏
-
+// 存储已选择并展示的摄像头
+const selectedCameras = ref([]);
+// 控制播放按钮的显示状态
+const showButton = ref(false);
+// API 实例
 const apiInstance = new BoxApi();
+// 存储 canvas 引用
+const canvasRefs = ref({});
 
-// 请求摄像头数据
+// 搜索输入的查询字符串
+const searchQuery = ref('');
+
+// 计算属性：根据搜索关键词过滤摄像头列表
+const filteredCameras = computed(() =>
+  cameras.value.filter(camera =>
+    camera.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+);
+
+// 获取摄像头列表
 const fetchCameras = async () => {
   try {
     const token = localStorage.getItem('alertToken');
-    const cameraData = await apiInstance.getMinCameras(token); // 调用 getMinCameras 方法
-    cameras.value = cameraData;  // 保存摄像头列表数据
+    const cameraData = await apiInstance.getMinCameras(token);
+    cameras.value = cameraData;
   } catch (error) {
-    console.error('Error fetching cameras:', error);
+    console.error('获取摄像头列表失败:', error);
   }
 };
 
-// 选择摄像头
+// 选择摄像头并展示详情
 const selectCamera = (camera) => {
-  selectedCamera.value = camera;  // 将点击的摄像头设为选中的摄像头
-  playing.value = false; // 重置播放状态
-  streamPort.value = null; // 重置流端口
-  showButton.value = true; // 重置按钮显示状态
-};
-
-// 启动或暂停播放
-const handlePlayPause = async () => {
-  if (playing.value) {
-    handleStopStream();
-  } else {
-    handleStartStream();
+  if (!selectedCameras.value.some(c => c.id === camera.id)) {
+    selectedCameras.value.push({ ...camera, playing: false, streamPort: null });
   }
 };
 
-// 启动流播放
-const handleStartStream = async () => {
-  console.log('Button clicked and playing is:', playing.value);
-  if (!selectedCamera.value || !canvasRef.value) {
+// 设置 canvas 引用
+const setCanvasRef = (cameraId, el) => {
+  if (el) {
+    canvasRefs.value[cameraId] = el;
+  }
+};
+
+// 播放/暂停摄像头视频流
+const handlePlayPause = async (camera) => {
+  if (camera.playing) {
+    handleStopStream(camera);
+  } else {
+    handleStartStream(camera);
+  }
+};
+
+// 启动视频流
+const handleStartStream = async (camera) => {
+  await nextTick(); // 确保 DOM 已渲染
+  const canvas = canvasRefs.value[camera.id];
+
+  if (!camera || !canvas) {
+    console.error('未找到对应的 canvas');
     return;
   }
 
   const token = localStorage.getItem('alertToken');
   try {
-    const response = await apiInstance.startCameraStream(token, selectedCamera.value.id);
-    streamPort.value = response.port;
-    playing.value = true;
+    const response = await apiInstance.startCameraStream(token, camera.id);
+    camera.streamPort = response.port;
+    camera.playing = true;
 
-    // 创建播放器
-    const url = `ws://192.168.28.33:${streamPort.value}/`;
-    console.log('Playing set to true:', playing.value);
-
-    if (playerRef.value) {
-      playerRef.value.destroy(); // 销毁旧播放器
-    }
+    const rememberedAddress = localStorage.getItem('rememberedAddress') || '127.0.0.1';
+    const url = `ws://${rememberedAddress}:${camera.streamPort}/`;
+    // const url = `ws://192.168.28.33:${camera.streamPort}/`;
+    console.log('播放路径:', url);
 
     if (window.JSMpeg) {
-      playerRef.value = new window.JSMpeg.Player(url, {
-        canvas: canvasRef.value,
+      const player = new window.JSMpeg.Player(url, {
+        canvas: canvas,
         autoplay: true,
         videoBufferSize: 15 * 1024 * 1024,
         audioBufferSize: 5 * 1024 * 1024,
       });
+      camera.player = player;
     } else {
-      console.error('JSMpeg is not available on window object.');
+      console.error('JSMpeg 未加载');
     }
   } catch (error) {
-    console.error('Error starting stream:', error);
+    console.error('启动视频流失败:', error);
   }
 };
 
-// 停止流播放
-const handleStopStream = async () => {
-  if (!selectedCamera.value) {
-    return;
-  }
-
+// 停止视频流
+const handleStopStream = async (camera) => {
   const token = localStorage.getItem('alertToken');
   try {
-    await apiInstance.stopCameraStream(token, selectedCamera.value.id);
-    playing.value = false;
+    await apiInstance.stopCameraStream(token, camera.id);
+    camera.playing = false;
 
-    // 销毁播放器
-    if (playerRef.value) {
-      playerRef.value.destroy();
-      playerRef.value = null;
+    if (camera.player) {
+      camera.player.destroy();
+      camera.player = null;
     }
   } catch (error) {
-    console.error('Error stopping stream:', error);
+    console.error('停止视频流失败:', error);
   }
 };
 
-// 组件卸载时清理播放器
-onBeforeUnmount(() => {
-  if (playerRef.value) {
-    playerRef.value.destroy();
-    playerRef.value = null;
-  }
+// 关闭摄像头流视图
+const closeStream = (camera) => {
+  handleStopStream(camera);
+  selectedCameras.value = selectedCameras.value.filter(c => c.id !== camera.id);
+};
+
+// 组件挂载时获取摄像头列表
+onMounted(() => {
+  fetchCameras();
 });
 
-onMounted(() => {
-  fetchCameras();  // 页面加载时请求摄像头数据
+// 组件卸载时清理资源
+onBeforeUnmount(() => {
+  selectedCameras.value.forEach(camera => {
+    if (camera.player) {
+      camera.player.destroy();
+    }
+  });
 });
 </script>
 
 <style scoped>
 .camera-container {
   display: flex;
+  height: 100vh;
+  background-color: #1E2E4A;
 }
 
+/* 左侧摄像头列表 */
 .camera-list {
   width: 20%;
   min-width: 215px;
-  max-height: 90vh;
+  max-height: 100vh;
   /* 限制高度为一屏 */
   overflow-y: auto;
   /* 超出时滚动 */
   box-sizing: border-box;
+  border-right: 1px solid #1E2E4A;
+  padding-right: 10px;
 }
 
+.search-input {
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+/* 每个摄像头项目的样式 */
 .camera-item {
-  margin-bottom: 5px;
+  margin-bottom: 8px;
   cursor: pointer;
-  padding: 10px;
+  padding: 12px;
+  border: 1px solid #458388;
+  border-radius: 4px;
+  transition: background-color 0.3s, box-shadow 0.3s;
 }
 
+.camera-item:hover {
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* 摄像头项目头部 */
 .camera-header {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
+  margin-bottom: 5px;
 }
 
+/* 摄像头状态标签 */
 .status {
   margin-left: 5px;
-}
-
-.camera-content {
-  display: flex;
-  align-items: center;
-}
-
-.camera-thumbnail {
-  width: 60px;
-  height: 40px;
-  margin-right: 10px;
-}
-
-.camera-name {
-  flex: 1;
-  word-break: break-word;
-}
-
-.camera-details {
-  width: 80%;
-  padding: 10px;
-}
-
-.camera-snapshot {
-  width: 100%;
-  height: 68vh;
-  object-fit: cover;
-}
-
-.camera-large {
-  width: 100%;
-  height: 68vh;
+  font-weight: bold;
 }
 
 .online {
@@ -228,28 +259,141 @@ onMounted(() => {
   color: red;
 }
 
+/* 摄像头内容：缩略图和名称 */
+.camera-content {
+  display: flex;
+  align-items: center;
+}
+
+.camera-thumbnail {
+  width: 70px;
+  height: 50px;
+  margin-right: 10px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid #12d1df;
+}
+
+.camera-name {
+  flex: 1;
+  word-break: break-word;
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* 右侧摄像头详情展示 */
+.camera-grid {
+  width: 80%; 
+  height: 95vh; /* 占满页面右侧区域 */
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 两列 */
+  grid-template-rows: repeat(2, 1fr); /* 两行 */
+  gap: 5px; /* 栅格块之间的间距 */
+  padding: 10px;
+  /* background-color: #1E2E4A;  */
+  background: linear-gradient(to top, rgba(0, 3, 3, 0.4), rgba(9, 21, 196, 0.3));
+  /* background: linear-gradient(to top, rgba(8, 53, 61, 0.4), rgba(9, 21, 196, 0.3)); */
+  /* border: 2px solid #ece9e9;  */
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.camera-details {
+  height: 45vh;
+  /* background-color: #3b2c2c;  */
+  /* background: linear-gradient(to top, rgba(8, 53, 61, 0.4), rgba(9, 21, 196, 0.3)); */
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* overflow-y: auto; */
+}
+.camera-card {
+  width: 100%; 
+  height: 100%;
+  /* background-color: #1E2E4A;  */
+  background: linear-gradient(to top, rgba(64, 226, 255, 0.7), rgba(211, 64, 248, 0.7));
+  /* background: linear-gradient(to top, rgba(0, 7, 8, 0.9), rgba(12, 2, 155, 0.7)); */
+  border: 2px solid #0b4c5f; 
+  border-radius: 8px;
+  position: relative;
+  /* padding: 10px; */
+  box-sizing: border-box;
+}
 .stream-control {
   display: flex;
-  margin-top: 20px;
-  text-align: center;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+/* .stream-control p {
+  color: #f5f7fa;
+  font-size: 18px;
+  margin: 0;
+  line-height: 1;
+  font-weight: bold;
+} */
+
+.camera-name-title {
+  font-size: 18px;
+  color: white;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  z-index: 10;
+}
+
+.camera-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #6b6b6b;
+  border: 2px dashed rgba(109, 109, 109, 0.7);
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background-color: rgba(50, 50, 50, 0.5);
+}
+
+/* 播放中的 canvas 样式 */
+.camera-large {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 2px solid rgba(109, 109, 109, 0.3);
+}
+
+/* 摄像头大图和快照 */
+.camera-snapshot {
+  width: 100%;
+  height: 40vh;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid #dcdcdc;
 }
 
 
-.stream-control p {
-  margin-right: 20px;
-  font-size: 15px;
-  line-height: 5px;
-}
-
-.stream-control el-button {
-  height: 40px;
-  line-height: 40px;
-}
-
+/* 播放按钮容器 */
 .play-button-container {
   position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+/* 播放按钮 */
 .play-button {
   position: absolute;
   top: 50%;