From 1c0a51ed5e5aa251c14d28b839cad9ff52dc751d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Fri, 22 Nov 2024 17:48:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=A4=A7=E6=94=B9=EF=BC=8CCa?=
 =?UTF-8?q?meraRules=E8=A7=84=E5=88=99=E5=BC=B9=E7=AA=97=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Channel.vue | 885 ++++++++++++++++++++++++-------------
 1 file changed, 568 insertions(+), 317 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 4efba4e..5fae391 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -1,36 +1,71 @@
 <template>
-    <div class="camera-container">
-      <div class="top-header">
-        <el-select v-model="filterStatus" placeholder="筛选状态" @change="fetchCameras" class="status-filter" >
-          <el-option label="全部" value="all"></el-option>
-          <el-option label="在线" value="online"></el-option>
-          <el-option label="离线" value="offline"></el-option>
-        </el-select>
-        <div class="top-text">警戒点位</div>
-        <el-select v-model="selectedCameraId" placeholder="搜索摄像头名称" @change="selectCameraById" clearable filterable
-          class="camera-select" >
-          <el-option v-for="camera in cameras" :key="camera.id" :label="camera.name" :value="camera.id">
-            <span>{{ camera.id }}.</span> &nbsp;名称: {{ camera.name }}
-          </el-option>
-        </el-select>
-  
+  <div class="camera-container">
+    <div class="top-header">
+      <div class="search-row">
+        <el-input v-model="searchKeyword" placeholder="搜索摄像头名称" @input="filterCameras" class="search-input" />
       </div>
-  
-      <!-- 播放列表，设置为可滚动 -->
+      <el-select v-model="filterStatus" placeholder="筛选状态" @change="fetchCameras" class="status-filter">
+        <el-option label="全部" value="all"></el-option>
+        <el-option label="在线" value="online"></el-option>
+        <el-option label="离线" value="offline"></el-option>
+      </el-select>
+      <!-- <div class="top-text">警戒点位</div>
+      <el-select v-model="selectedCameraId" placeholder="搜索摄像头名称" @change="selectCameraById" clearable filterable
+        class="camera-select">
+        <el-option v-for="camera in cameras" :key="camera.id" :label="camera.name" :value="camera.id">
+          <span>{{ camera.id }}.</span> &nbsp;名称: {{ camera.name }}
+        </el-option>
+      </el-select> -->
+    </div>
+    <div class="content-container">
+      <div class="left-part">
+        <div class="camera-list">
+          <el-card v-for="camera in filteredCameras" :key="camera.id" class="camera-item"
+            @click="selectCameraById(camera.id)">
+            <template #header>
+              <el-row class="row-id-name">
+                <el-col :span="14" class="col-camera-id">
+                  {{ camera.name }}
+                </el-col>
+                <!-- <el-col :span="8" class="col-camera-name">
+                  {{ camera.name }}
+                </el-col> -->
+                <el-col :span="10" class="col-camera-setting">
+                  <el-button type="text" icon="el-icon-setting" class="settings-button"
+                    @click.stop="handleSettings(camera.id)">设置</el-button>
+                </el-col>
+              </el-row>
+            </template>
+            <div class="div-content">
+              <el-row class="row-content">
+                <el-col :span="10" class="col-camera-snapshot">
+                  通道{{ camera.id }}
+                </el-col>
+                <el-col :span="14" class="col-camera-snapshot">
+                  <el-image :src="camera.snapshot" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
+                    :preview-src-list="camera.snapshot" class="camera-img" />
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+        </div>
+      </div>
+
+
       <div class="camera-grid">
         <div v-for="(camera, index) in selectedCameras" :key="camera.id" class="grid-item">
           <div class="stream-control">
             <p class="camera-name-title">{{ camera.name }}</p>
             <div class="close-button" @click="closeStream(camera)">×</div>
           </div>
-  
+
           <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>
-            <img v-if="!camera.playing && camera.snapshot" :src="camera.snapshot" alt="camera snapshot"
+            <el-image v-if="!camera.playing && camera.snapshot" :src="camera.snapshot" alt="camera snapshot"
               class="camera-snapshot" />
             <el-button v-show="!camera.playing || showButton" class="play-button" type="primary" circle size="large"
               @click="openDialog(camera)">
@@ -42,309 +77,525 @@
           </div>
         </div>
       </div>
-  
-      <!-- 弹窗播放视频 -->
-      <el-dialog v-model="dialogVisible" width="50%" @close="closeDialog">
-        <template #title>播放摄像头: {{ currentCamera?.name }}</template>
-        <canvas v-show="dialogVisible" ref="dialogCanvas" class="dialog-canvas"></canvas>
-      </el-dialog>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
-  import { BoxApi } from '@/utils/boxApi.ts';
-  import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
-  
-  const cameras = ref([]);
-  const selectedCameras = ref([]);
-  const showButton = ref(false);
-  const apiInstance = new BoxApi();
-  const canvasRefs = ref({});
-  const selectedCameraId = ref(null);
-  const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
-  const currentCamera = ref(null); // 当前选中的摄像头
-  
-  // 弹窗中的canvas引用
-  const dialogCanvas = ref(null);
-  const filterStatus = ref("all");
-  
-  const fetchCameras = async () => {
-    try {
-      const token = localStorage.getItem('alertToken');
-      const cameraData = await apiInstance.getMinCameras(token);
-  
-      // 根据 filterStatus 筛选摄像头状态
-      if (filterStatus.value === "online") {
-        cameras.value = cameraData.filter(camera => camera.status === "online");
-      } else if (filterStatus.value === "offline") {
-        cameras.value = cameraData.filter(camera => camera.status === "offline");
-      } else {
-        cameras.value = cameraData; // 默认 "all" 显示全部摄像头
-      }
-    } catch (error) {
-      console.error('获取摄像头列表失败:', error);
-    }
-  };
-  
-  const selectCameraById = (cameraId) => {
-    const camera = cameras.value.find(c => c.id === cameraId);
-    if (camera && !selectedCameras.value.some(c => c.id === camera.id)) {
-      selectedCameras.value.push({ ...camera, playing: false, streamPort: null });
-    }
-  };
-  
-  // 打开弹窗并开始播放
-  const openDialog = async (camera) => {
-    currentCamera.value = camera;
-    dialogVisible.value = true;
-    await nextTick();
-    startStreamInDialog(camera);
-  };
-  
-  // 在弹窗中播放视频
-  const startStreamInDialog = async (camera) => {
-    const canvas = dialogCanvas.value;
-  
-    if (!camera || !canvas) {
-      console.error('未找到对应的 canvas');
-      return;
-    }
-  
+
+    <el-dialog v-model="dialogVisible" width="50%" @close="closeDialog">
+      <template #title>播放摄像头: {{ currentCamera?.name }}</template>
+      <canvas v-show="dialogVisible" ref="dialogCanvas" class="dialog-canvas"></canvas>
+    </el-dialog>
+
+
+    <CameraRules :visible="rulesDialogVisible" :cameraData="currentCameraData"
+      @update:visible="rulesDialogVisible = $event" @save-result="handleSaveResult" />
+
+
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { BoxApi } from '@/utils/boxApi.ts';
+import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
+import CameraRules from '@/html/CameraRules.vue';
+import { ElMessage } from 'element-plus';
+
+const cameras = ref([]);
+const selectedCameras = ref([]);
+const showButton = ref(false);
+const apiInstance = new BoxApi();
+const canvasRefs = ref({});
+const selectedCameraId = ref(null);
+const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
+const currentCamera = ref(null); // 当前选中的摄像头
+
+// 弹窗中的canvas引用
+const dialogCanvas = ref(null);
+const filterStatus = ref("all");
+
+const filteredCameras = ref([]);
+const searchKeyword = ref('');
+
+const currentCameraData = ref(null);
+const rulesDialogVisible = ref(false);
+
+
+const fetchCameras = async () => {
+  try {
     const token = localStorage.getItem('alertToken');
-    try {
-      const response = await apiInstance.startCameraStream(token, camera.id);
-      camera.streamPort = response.port;
-      camera.playing = true;
-  
-      const url = `ws://192.168.28.33:${camera.streamPort}/`;
-      console.log('播放路径:', url);
-  
-      if (window.JSMpeg) {
-        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 未加载');
-      }
-    } catch (error) {
-      console.error('启动视频流失败:', error);
+    const cameraData = await apiInstance.getAllCameras(token);
+    // console.log("cameraData>>>>>>>>>>>>>>>", cameraData);
+
+    // 根据 filterStatus 筛选摄像头状态
+    if (filterStatus.value === "online") {
+      cameras.value = cameraData.filter(camera => camera.status === "online");
+    } else if (filterStatus.value === "offline") {
+      cameras.value = cameraData.filter(camera => camera.status === "offline");
+    } else {
+      cameras.value = cameraData;
+      // console.log("all cameras:", cameras.value);
     }
-  };
-  
-  // 关闭弹窗并停止视频播放
-  const closeDialog = () => {
-    if (currentCamera.value) {
-      handleStopStream(currentCamera.value);
-    }
-    dialogVisible.value = false;
-    currentCamera.value = null;
-  };
-  
-  const handleStopStream = async (camera) => {
+    filteredCameras.value = [...cameras.value];
+  } catch (error) {
+    console.error('获取摄像头列表失败:', error);
+  }
+};
+
+const filterCameras = () => {
+  if (!searchKeyword.value.trim()) {
+    filteredCameras.value = [...cameras.value];
+  } else {
+    filteredCameras.value = cameras.value.filter(camera =>
+      camera.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    );
+  }
+  // console.log("filteredCameras>>:", filteredCameras.value);
+};
+
+const selectCameraById = (cameraId) => {
+  const camera = cameras.value.find(c => c.id === cameraId);
+  if (camera && !selectedCameras.value.some(c => c.id === camera.id)) {
+    selectedCameras.value.push({ ...camera, playing: false, streamPort: null });
+    // console.log("搜索摄像头的数组内含有", selectedCameras.value)
+  }
+};
+
+
+
+const handleSettings = async (cameraId) => {
+  try {
     const token = localStorage.getItem('alertToken');
-    try {
-      await apiInstance.stopCameraStream(token, camera.id);
-      camera.playing = false;
-  
-      if (camera.player) {
-        camera.player.destroy();
-        camera.player = null;
-      }
-    } catch (error) {
-      console.error('停止视频流失败:', error);
+    const cameraData = await apiInstance.getCameraById(token, cameraId);
+    // console.log("获取到的 cameraData:", cameraData); 
+    currentCameraData.value = cameraData;
+    rulesDialogVisible.value = true;
+  } catch (error) {
+    console.error('获取摄像头规则失败:', error);
+  }
+};
+
+const handleSaveResult = ({ success, message }) => {
+  console.log('收到子组件保存结果事件:', { success, message });
+
+  ElMessage({
+    message,
+    type: success ? 'success' : 'error',
+    duration: 2000,
+  });
+
+  if (success) {
+    rulesDialogVisible.value = false; // 关闭规则对话框
+  }
+};
+
+// 打开弹窗并开始播放
+const openDialog = async (camera) => {
+  currentCamera.value = camera;
+  dialogVisible.value = true;
+  await nextTick();
+  startStreamInDialog(camera);
+};
+
+// 在弹窗中播放视频
+const startStreamInDialog = async (camera) => {
+  const canvas = dialogCanvas.value;
+
+  if (!camera || !canvas) {
+    console.error('未找到对应的 canvas');
+    return;
+  }
+
+  const token = localStorage.getItem('alertToken');
+  const rememberedAddress = localStorage.getItem('rememberedAddress');
+
+  if (!rememberedAddress) {
+    alert('主机地址获取异常，请确认地址配置');
+    console.error('主机地址获取异常');
+    return;
+  }
+  try {
+    const response = await apiInstance.startCameraStream(token, camera.id);
+    camera.streamPort = response.port;
+    camera.playing = true;
+    const url = `ws://${rememberedAddress}:${camera.streamPort}/`;
+    // const url = `ws://192.168.28.33:${camera.streamPort}/`;
+    // console.log('播放路径:', url);
+
+    if (window.JSMpeg) {
+      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 未加载');
+    }
+  } catch (error) {
+    console.error('启动视频流失败:', error);
+  }
+};
+
+// 关闭弹窗并停止视频播放
+const closeDialog = () => {
+  if (currentCamera.value) {
+    handleStopStream(currentCamera.value);
+  }
+  dialogVisible.value = false;
+  currentCamera.value = null;
+};
+
+const handleStopStream = async (camera) => {
+  const token = localStorage.getItem('alertToken');
+  try {
+    await apiInstance.stopCameraStream(token, camera.id);
+    camera.playing = false;
+
+    if (camera.player) {
+      camera.player.destroy();
+      camera.player = null;
+    }
+  } catch (error) {
+    console.error('停止视频流失败:', error);
+  }
+};
+
+const closeStream = (camera) => {
+  handleStopStream(camera);
+  selectedCameras.value = selectedCameras.value.filter(c => c.id !== camera.id);
+};
+
+onMounted(() => {
+  fetchCameras();
+});
+
+onBeforeUnmount(() => {
+  selectedCameras.value.forEach(camera => {
+    if (camera.player) {
+      camera.player.destroy();
     }
-  };
-  
-  const closeStream = (camera) => {
-    handleStopStream(camera);
-    selectedCameras.value = selectedCameras.value.filter(c => c.id !== camera.id);
-  };
-  
-  onMounted(() => {
-    fetchCameras();
   });
+});
+</script>
+
+<style  scoped>
+.camera-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #F1F1F1;
+  border-radius: 20px;
+  width: 80vw;
+}
+
+.top-header {
+  /* width: 100%; */
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+}
+.search-row {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+  position: relative;
+  top: 0vh;
+  left: 0vw;
+  width: 10vw;
+  margin-left: 1vh;
+  margin: 1vh;
+}
+
+::v-deep .search-row input{
+  color: #fffefe;
+}
+
+::v-deep .search-input .el-input__inner{ 
+  background-color: #001529;
+  /* background-color:red; */
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+}
+::v-deep .search-input .el-input__wrapper{
+  background-color: #001529;
+  /* background-color: red;  */
+  box-shadow: 0 0 0 0px
+}
+
+::v-deep .search-input .el-input__inner::placeholder{
+  color: #fffefe;
+}
+
+
+.status-filter {
+  position: relative;
+  top: 0vh;
+  left: 0vw;
+  width: 10vw;
+  margin-left: 1vh;
+  margin: 1vh;
+}
+
+.content-container {
+  display: flex;
+  height: 58vh;
+  width: 80vw;
+}
+
+.left-part {
+  display: flex;
+  flex-direction: column;
+  min-width: 12vw;
+  overflow-y: auto;
+}
+
+.camera-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 1vh;
+}
+
+.camera-item {
+  display: flex;
+  flex-direction: column;
+  flex: 40%;
+  background-color: #001529;
+  border-radius: 10px;
+  border: none;
+}
+
+::v-deep .camera-item .el-card__header {
+  border-radius: 10px 10px 0 0 ;
+  /* background-color: rgb(41, 12, 150); */
+  background: linear-gradient(to left top, rgb(18, 110, 196), rgba(3, 55, 153, 0.3));
+  height: 4vh;
+  /* min-height: 3vh;
+  min-width: 13vw; */
+  min-height: 50px;
+  min-width: 300px;
+  color: #ffffff;
+  padding: 0;
+  border: none;
+  display: flex;
+  border: none;
+  /* align-items: center; */
+}
+
+.row-id-name {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.col-camera-id {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.col-camera-name {
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+
+.col-camera-setting {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: start;
   
-  onBeforeUnmount(() => {
-    selectedCameras.value.forEach(camera => {
-      if (camera.player) {
-        camera.player.destroy();
-      }
-    });
-  });
-  </script>
-  
-  <style  scoped>
-  .camera-container {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .top-header {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    margin: 0;
-  }
-  
-  .status-filter {
-    position: relative;
-    top: 0vh;
-    left: 0vw;
-    width: 5vw;
-    margin-left: 1vh;
-    margin-top: 1vh;
-  
-  }
-  ::v-deep .status-filter .el-select__wrapper{
-    background-color: #001529;
-    box-shadow: 0 0 0 0 !important;
-    border-radius: 0;
-  }
-  
-  ::v-deep .camera-select .el-select__wrapper{
-    background-color: #001529;
-    box-shadow: 0 0 0 0 !important;
-    border-radius: 0;
-  }
-  
-  ::v-deep .camera-select .el-select__selected-item {
-    color: #ffffff !important; 
-  }
-  
-  ::v-deep .status-filter .el-select__selected-item {
-    color: #ffffff !important; 
-  }
-  
-  .camera-select {
-    position: relative;
-    top: 0vh;
-    left: 0vw;
-    width: 12vw;
-    margin-left: 0vh;
-    margin-top: 1vh;
-  }
-  
-  
-  
-  
-  .top-text {
-    display: block;
-    font-size: 15px;
-    width: 7vw;
-    margin: 1vh 0 0 0;
-    padding: 0 0 0 10vw;
-    /* justify-content: center; */
-    align-content: center;
-    background-color: #001529;
-    line-height: 0px;
-    color: aliceblue;
-    font-weight: bold;
-  }
-  
-  .stream-control {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    background-color: black;
-  }
-  
-  .camera-name-title {
-    padding: 0.2vh;
-    margin: 0;
-    font-size: 13px;
-    display: block;
-    color: white;
-  }
-  
-  .camera-grid {
-    margin: 0vh 1vh;
-    padding: 0 0 2vh 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1vh 0vh;
-    /* height: 39vh;
-    width: 34vw; */
-    width: 68vw;
-    height: 55vh;
-    max-height: 58vh;
-    overflow-y: scroll;
-    scrollbar-width: none;
-    /* background-color: #001529; */
-    background-color: #001529;
-  }
-  
-  .camera-grid::-webkit-scrollbar {
-    display: none;
-  }
-  
-  .grid-item {
-    margin: 1vh;
-    position: relative;
-    height: 25vh;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .camera-snapshot,
-  .camera-large {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  
-  .close-button {
-    position: absolute;
-    top: 1px;
-    right: 1px;
-    width: 15px;
-    height: 15px;
-    background-color: #000000;
-    color: aliceblue;
-    padding: 0 2px 2px 0;
-    border-radius: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-  }
-  
-  .close-button:hover {
-    background-color: red;
-  }
-  
-  .play-button-container {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .play-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 10;
-    opacity: 0.4;
-    transition: opacity 0.2s ease-in-out;
-  }
-  
-  .play-button:hover {
-    opacity: 1;
-  }
-  
-  .dialog-canvas {
-    width: 100%;
-    height: 100%;
-  }
+}
+.settings-button{
+  color: #fffefe;
+}
+
+::v-deep .camera-item .el-card__body {
+  /* min-height: 10vh;
+  min-width: 13vw; */
+  border-radius: 0 0 10px 10px;
+  background-color: #001529;
+  padding: 1vh;
+}
+
+.div-content,
+.row-content {
+  display: flex;
+}
+
+.col-camera-snapshot {
+  text-align: center;
+  background-color: #001529;
+  width: 10vw;
+  align-content: center;
+  color: #ffffff;
+}
+
+.camera-img {
+  /* object-fit: cover; */
+  cursor: pointer;
+  padding: 1vh;
+  max-height: 100px;
+}
+
+
+
+::v-deep .status-filter .el-select__wrapper {
+  background-color: #001529;
+  box-shadow: 0 0 0 0 !important;
+  border-radius: 0;
+}
+
+::v-deep .camera-select .el-select__wrapper {
+  background-color: #001529;
+  box-shadow: 0 0 0 0 !important;
+  border-radius: 0;
+}
+
+::v-deep .camera-select .el-select__selected-item {
+  color: #ffffff !important;
+}
+
+::v-deep .status-filter .el-select__selected-item {
+  color: #ffffff !important;
+}
+
+.camera-select {
+  position: relative;
+  top: 0vh;
+  left: 0vw;
+  width: 12vw;
+  margin-left: 0vh;
+  margin-top: 1vh;
+}
+
+
+
+
+.top-text {
+  display: block;
+  font-size: 15px;
+  width: 7vw;
+  margin: 1vh 0 0 0;
+  padding: 0 0 0 10vw;
+  /* justify-content: center; */
+  align-content: center;
+  background-color: #001529;
+  line-height: 0px;
+  color: aliceblue;
+  font-weight: bold;
+}
+
+.stream-control {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background-color: black;
+}
+
+.camera-name-title {
+  padding: 0.2vh;
+  margin: 0;
+  font-size: 13px;
+  display: block;
+  color: white;
+}
+
+.camera-grid {
+  margin: 0vh 1vh;
+  padding: 0 0 2vh 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1vh 0vh;
+  /* height: 39vh;
+  width: 34vw; */
+  width: 68vw;
+  height: 55vh;
+  max-height: 58vh;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  /* background-color: #ffffff; */
+  background-color: #F1F1F1;
+  /* background-color: #c71515; */
+}
+
+.camera-grid::-webkit-scrollbar {
+  display: none;
+}
+
+.grid-item {
+  margin: 1vh;
+  position: relative;
+  height: 25vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.camera-snapshot,
+.camera-large {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.close-button {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 15px;
+  height: 15px;
+  background-color: #000000;
+  color: aliceblue;
+  padding: 0 2px 2px 0;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.close-button:hover {
+  background-color: red;
+}
+
+.play-button-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  opacity: 0.4;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.play-button:hover {
+  opacity: 1;
+}
+
+.dialog-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.rule-card {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background-color: #f9f9f9;
+}
 </style>
-  
\ No newline at end of file