From a13d627315176e43042d2e5351773f610a6bf1c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Thu, 21 Nov 2024 15:15:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=B4=E4=BB=A3=E7=A0=81=E5=A4=87=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bk/CenterTop警戒点位.vue      |   2 +-
 src/bk/StaticData图表简易版.vue   | 205 ++++++++++
 src/bk/点播页面原版.vue           |   2 +-
 src/bk/设置页面点播墙组件代码.vue | 595 ++++++++++++++++++++++++++++++
 4 files changed, 802 insertions(+), 2 deletions(-)
 create mode 100644 src/bk/StaticData图表简易版.vue
 create mode 100644 src/bk/设置页面点播墙组件代码.vue

diff --git a/src/bk/CenterTop警戒点位.vue b/src/bk/CenterTop警戒点位.vue
index 443637b..90412a1 100644
--- a/src/bk/CenterTop警戒点位.vue
+++ b/src/bk/CenterTop警戒点位.vue
@@ -72,7 +72,7 @@
   const fetchCameras = async () => {
     try {
       const token = localStorage.getItem('alertToken');
-      const cameraData = await apiInstance.getMinCameras(token);
+      const cameraData = await apiInstance.getAllCameras(token);
   
       // 根据 filterStatus 筛选摄像头状态
       if (filterStatus.value === "online") {
diff --git a/src/bk/StaticData图表简易版.vue b/src/bk/StaticData图表简易版.vue
new file mode 100644
index 0000000..d73fa45
--- /dev/null
+++ b/src/bk/StaticData图表简易版.vue
@@ -0,0 +1,205 @@
+<template>
+    <div>
+      <el-card class="stats-card">
+        <div class="stats-header">告警数量和类型分布</div>
+        <el-row :gutter="20" class="stats-row">
+          <el-col :span="24">
+            <div ref="chart" class="chart"></div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted } from 'vue';
+  import * as echarts from 'echarts';
+  import { BoxApi } from '@/utils/boxApi.ts'; // 引入 BoxApi 类
+  
+  // 响应式数据
+  const chart = ref(null);
+  const seriesData = ref([]);
+  
+  // BoxApi 实例
+  const apiInstance = new BoxApi();
+  
+  // 获取告警类型的映射
+  const fetchTypeMapping = async (token) => {
+    const algorithms = await apiInstance.getAlgorithms(token);
+    let mapping = algorithms.map(algorithm => ({
+      value: 0,
+      code_name: algorithm.code_name,
+      name: algorithm.name
+    }));
+  
+    // 添加额外的类型
+    const newMapping = [
+      { code_name: "minizawu:532", name: "杂物堆积", value: 0 }
+    ];
+  
+    seriesData.value = mapping.concat(newMapping);
+  };
+  
+  // 分批次获取全量告警数据并更新 seriesData
+  const fetchAndProcessEvents = async (token) => {
+    try {
+      let currentPage = 1;
+      const pageSize = 1000;  // 每次加载 2000 条
+      let allEvents = [];
+  
+      // 第一次请求，获取告警总数和首批数据
+      const { tableData: firstBatch, totalItems } = await apiInstance.getEvents(token, pageSize, currentPage);
+      allEvents = [...firstBatch];
+  
+      // 根据告警总数计算总页数
+      const totalPages = Math.ceil(totalItems / pageSize);
+  
+      // 循环分页加载剩余的数据
+      while (currentPage < totalPages) {
+        currentPage++;
+        const { tableData: nextBatch } = await apiInstance.getEvents(token, pageSize, currentPage);
+        allEvents = [...allEvents, ...nextBatch];
+  
+        // 每次加载数据后逐步更新图表
+        processEventData(allEvents);
+        updateChart();  // 逐步更新图表
+      }
+  
+      // 最终处理全部数据
+      processEventData(allEvents);
+      updateChart();  // 最终更新图表
+    } catch (error) {
+      console.error("Error fetching events:", error);
+    }
+  };
+  
+  // 处理告警事件数据并更新 seriesData
+  const processEventData = (events) => {
+    // 重置数据，防止累计错误
+    seriesData.value.forEach(item => {
+      item.value = 0;
+    });
+  
+    // 遍历事件并统计告警类型数量
+    events.forEach(event => {
+      const matchAlgorithm = seriesData.value.find(item => item.code_name === event.types);
+      if (matchAlgorithm) {
+        matchAlgorithm.value += 1;
+      }
+    });
+  };
+  
+  // 初始化图表
+  const initChart = () => {
+    // 初始化 ECharts 实例
+    if (!chart.value) {
+      console.error("Chart DOM element is not available");
+      return;
+    }
+  
+    chart.value = echarts.init(chart.value);
+    const option = {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        orient: 'horizontal',
+        bottom: 10,
+        textStyle: {
+          color: '#fff',
+        },
+        itemGap: 20,
+        data: seriesData.value.map(item => item.name),
+        show : true
+      },
+      series: [
+        {
+          name: '告警类型',
+          type: 'pie',
+          radius: '50%',
+          center: ['50%', '50%'],
+          data: seriesData.value,
+          data: [],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            }
+          },
+          label: {
+            show: false,
+          },
+          stillShowZeroSum: false,
+        }
+      ]
+    };
+    chart.value.setOption(option);
+  };
+  
+  // 更新图表数据
+  const updateChart = () => {
+    if (chart.value && typeof chart.value.setOption === 'function') {
+      chart.value.setOption({
+        series: [
+          {
+            data: seriesData.value
+          }
+        ]
+      });
+    } else {
+      console.error("ECharts instance is not initialized properly");
+    }
+  };
+  
+  // 生命周期钩子
+  onMounted(async () => {
+    try {
+      const token = localStorage.getItem('alertToken');
+  
+      // 获取告警类型映射
+      await fetchTypeMapping(token);
+  
+      // 初始化图表
+      initChart();
+  
+      // 分批次获取告警数据并更新图表
+      await fetchAndProcessEvents(token);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  });
+  </script>
+  
+  <style scoped>
+  .stats-card {
+    background-color: #304555;
+    /* background: linear-gradient(to top, rgba(16, 84, 194, 0.6), rgba(31, 48, 207, 0.7)); */
+    color: #fff;
+    border-radius: 8px;
+    /* margin: 10px; */
+    /* padding: 10px; */
+    /* height: 100vh; */
+  }
+  
+  .stats-header {
+    font-size: 18px;
+    font-weight: bold;
+    border-bottom: 1px solid #3a4b5c;
+    padding-bottom: 10px;
+  }
+  
+  .stats-row {
+    margin-top: 10px;
+    margin-bottom: 34px;
+  }
+  
+  .chart {
+    width: 100%;
+    /* min-height: 365px; */
+    height: 41vh;
+    min-width: 40vw;
+    /* height: 445px; */
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/bk/点播页面原版.vue b/src/bk/点播页面原版.vue
index 6365a5b..f069240 100644
--- a/src/bk/点播页面原版.vue
+++ b/src/bk/点播页面原版.vue
@@ -93,7 +93,7 @@
   const fetchCameras = async () => {
     try {
       const token = localStorage.getItem('alertToken');
-      const cameraData = await apiInstance.getMinCameras(token);
+      const cameraData = await apiInstance.getAllCameras(token);
       cameras.value = cameraData;
     } catch (error) {
       console.error('获取摄像头列表失败:', error);
diff --git a/src/bk/设置页面点播墙组件代码.vue b/src/bk/设置页面点播墙组件代码.vue
new file mode 100644
index 0000000..1bf720a
--- /dev/null
+++ b/src/bk/设置页面点播墙组件代码.vue
@@ -0,0 +1,595 @@
+<template>
+    <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>
+              <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)">
+                <el-icon>
+                  <VideoPlay v-if="!camera.playing" />
+                  <VideoPause v-if="camera.playing" />
+                </el-icon>
+              </el-button>
+            </div>
+          </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>
+  
+  
+      <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');
+      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);
+      }
+      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');
+      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');
+    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 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();
+      }
+    });
+  });
+  </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;
+    
+  }
+  .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