From 8018774a29da5bac884fab0154feff2b249a7a6e Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Wed, 12 Mar 2025 21:00:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E6=97=B6=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable/src/baseTable.scss |   6 +-
 src/components/videoPlayer/RealPlayer.vue     |  12 +-
 src/components/videoPlayer/index.ts           |   0
 src/views/dashboard/DeviceStatus.vue          |  17 +--
 src/views/dashboard/PoleMonitor.vue           |  17 ++-
 .../components/HistoryVideoModal.vue          |  41 +-----
 .../dashboard/components/RealVideoModal.vue   | 127 ++++++++++++++++++
 7 files changed, 158 insertions(+), 62 deletions(-)
 delete mode 100644 src/components/videoPlayer/index.ts

diff --git a/src/components/CustomTable/src/baseTable.scss b/src/components/CustomTable/src/baseTable.scss
index 8eac7f7..3068280 100644
--- a/src/components/CustomTable/src/baseTable.scss
+++ b/src/components/CustomTable/src/baseTable.scss
@@ -49,7 +49,11 @@
         }
         &:hover {
           color: #37DBFF;
-          background: linear-gradient( 90deg, rgba(30,54,88,0) 0%, #0C4FAD 53%, rgba(65,117,190,0) 100%);;
+          background: linear-gradient( 90deg, rgba(30,54,88,0) 0%, #0C4FAD 53%, rgba(65,117,190,0) 100%);
+        }
+        &.selected-row{
+          color: #37DBFF;
+          background: linear-gradient( 90deg, rgba(30,54,88,0) 0%, #0C4FAD 53%, rgba(65,117,190,0) 100%);
         }
       }
     }
diff --git a/src/components/videoPlayer/RealPlayer.vue b/src/components/videoPlayer/RealPlayer.vue
index 9f094e1..dd5eabd 100644
--- a/src/components/videoPlayer/RealPlayer.vue
+++ b/src/components/videoPlayer/RealPlayer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="video-player">
+    <div class="real-video-player">
         <video ref="refPlayer" autoplay controls muted width="100%" height="100%" style="object-fit: fill;"></video>
         <!-- <iframe src="http://192.168.10.113:8889/cam/" frameborder="0"></iframe> -->
     </div>
@@ -35,12 +35,4 @@ onUnmounted(() => {
     webRtcServer.disconnect();
     webRtcServer.value = null;
 })
-</script>
-
-<style lang="scss">
-.video-player {
-    position: fixed;
-    width: 50%;
-    z-index: 999999999;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/videoPlayer/index.ts b/src/components/videoPlayer/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/dashboard/DeviceStatus.vue b/src/views/dashboard/DeviceStatus.vue
index a09da70..e961c75 100644
--- a/src/views/dashboard/DeviceStatus.vue
+++ b/src/views/dashboard/DeviceStatus.vue
@@ -9,7 +9,7 @@
             </ContentHeader>
         </div>
         <div class="px-[16px] device-status-content-box">
-            <HistoryVideoModal />
+
             <div class="mt-[16px] bg-transparent baseTable_wrap full_table" v-loading="dataLoading"
                 :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50">
                 <template v-if="pagination.total > 0">
@@ -44,9 +44,9 @@
                 </template>
             </div>
         </div>
+        <RealVideoModal v-model:value="isRealOpen" :info="currentRow" @close="isRealOpen = false" />
+        <HistoryVideoModal />
     </div>
-
-
 </template>
 
 
@@ -54,6 +54,7 @@
 import { BaseTable } from "@/components/CustomTable";
 import ContentHeader from '@/components/ContentHeader.vue';
 import HistoryVideoModal from './components/HistoryVideoModal.vue';
+import RealVideoModal from './components/RealVideoModal.vue';
 import onLineIcon from '@/assets/common/online_icon.png';
 import outLineIcon from '@/assets/common/outline_icon.png';
 import errorIcon from '@/assets/common/error_icon.png';
@@ -96,6 +97,7 @@ const deleteModel = reactive<{
 });
 
 const currentRow = ref<Record<string, any>>({});
+const isRealOpen = ref<Boolean>(false);
 
 
 
@@ -174,13 +176,6 @@ const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
 
 const listData = ref([]);
 
-// const searchValue = ref("");
-
-// const formData = reactive({
-//     name: "",
-//     status: ""
-// });
-
 const dataLoading = ref(true);
 
 const getList = async () => {
@@ -212,6 +207,8 @@ function handleTableChange(record) {
 function openCurrent(row) {
     console.log(row, "openCurrent");
     currentRow.value = row;
+    isRealOpen.value = true;
+
 }
 
 function openHistory(row) {
diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue
index b44a54d..5bfa23c 100644
--- a/src/views/dashboard/PoleMonitor.vue
+++ b/src/views/dashboard/PoleMonitor.vue
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 15:15:01
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-12 15:01:18
+ * @LastEditTime: 2025-03-12 20:57:12
  * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\PoleMonitor.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -75,7 +75,8 @@
                         <template v-if="pagination.total > 0">
                             <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
                                 :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
-                                :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
+                                :columns="columns" :page="pagination.currentPage" @change="handleTableChange" :row-class-name="handleRowClassName"
+                                @row-click="handleRowClick">
                             </BaseTable>
                         </template>
                     </div>
@@ -120,7 +121,8 @@ const onSwiper = (swiper) => {
 const onSlideChange = () => {
     console.log("slide change");
 };
-
+// 存储当前选中行的索引
+const currentRowIndex = ref(-1);
 // const currentRow = ref<Record<string, any>>({});
 const columns = [
     {
@@ -215,7 +217,16 @@ function handleTableChange(record) {
     };
     getList();
 }
+// TODO 点击选中效果
+// 定义行类名方法
+const handleRowClassName = ({ rowIndex }) => {
+  return rowIndex === currentRowIndex.value ? 'selected-row' : '';
+};
 
+// 行点击事件处理
+const handleRowClick = (row, event, rowIndex) => {
+  currentRowIndex.value = rowIndex;
+};
 onMounted(() => {
     getList();
 });
diff --git a/src/views/dashboard/components/HistoryVideoModal.vue b/src/views/dashboard/components/HistoryVideoModal.vue
index a6125e7..4936ee6 100644
--- a/src/views/dashboard/components/HistoryVideoModal.vue
+++ b/src/views/dashboard/components/HistoryVideoModal.vue
@@ -1,47 +1,12 @@
 <template>
-    <div class="video-player">
-        <video ref="refPlayer" autoplay controls muted width="100%" height="100%" style="object-fit: fill;"></video>
-        <!-- <iframe src="http://192.168.10.113:8889/cam/" frameborder="0"></iframe> -->
+    <div class="historyVideoModal-wrap">
+       
     </div>
 
-    <!-- http://192.168.10.113:8889/cam/ -->
 </template>
 
-<script setup lang="ts">
-import { nextTick } from 'vue';
 
-const webRtcServer = ref(null);
-const refPlayer = ref(null);
-const videoSrc = 'rtsp://192.168.10.63:8554/mystream';
 
+<style lang="scss" scoped>
 
-function initData() {
-    webRtcServer.value.connect(videoSrc || '', '',  "rtptransport=tcp&timeout=60&width=320&height=0");
-}
-
-onMounted(() => {
-    // 分别对应开发环境、生产环境视频流转码服务的地址
-    // let srvUrl = 'http://127.0.0.1:8000';
-    nextTick(() => {
-        console.log(location.protocol, "refPlayer");
-        // TODO 根据环境切换地址
-        webRtcServer.value = new WebRtcStreamer(refPlayer.value, `http://192.168.10.26:9988`);
-        nextTick(() => {
-            videoSrc && initData();
-        })
-    })
-
-})
-onUnmounted(() => {
-    webRtcServer.disconnect();
-    webRtcServer.value = null;
-})
-</script>
-
-<style lang="scss">
-.video-player {
-    position: fixed;
-    width: 50%;
-    z-index: 999999999;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/RealVideoModal.vue b/src/views/dashboard/components/RealVideoModal.vue
index e69de29..765b062 100644
--- a/src/views/dashboard/components/RealVideoModal.vue
+++ b/src/views/dashboard/components/RealVideoModal.vue
@@ -0,0 +1,127 @@
+<template>
+    <el-dialog v-model="show" @close="handleClose">
+        <!-- 自定义标题栏 -->
+        <template #header="{ close, titleId, titleClass }">
+            <div class="flex items-center justify-between video-dialog-header">
+                <div class="flex items-center justify-center header-left">
+                    <div class="header-icon mr-[12px]"></div>
+                    <span>{{ info.name }}</span>
+                </div>
+            </div>
+        </template>
+        <!-- 视频播放区域 -->
+        <div class="video-container">
+            <RealPlayer />
+        </div>
+    </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import RealPlayer from '@/components/videoPlayer/RealPlayer.vue'
+
+interface Props {
+    /** 弹窗显隐 */
+    value: boolean;
+    info: Record<string, any>;
+}
+interface Emits {
+    (e: "update:value", val: boolean): void;
+}
+
+// const props = withDefaults(defineProps<{
+//     isOpen: boolean;
+//     info: Record<string, any>;
+// }>(), {
+//     isOpen: false,
+//     info: {}
+// });
+const props = withDefaults(defineProps<Props>(), {
+    value: false,
+    info: {}
+});
+
+const emit = defineEmits<Emits>();
+
+
+const isPlaying = ref(false);
+
+const togglePlay = () => {
+    isPlaying.value = !isPlaying.value;
+};
+
+// 处理对话框关闭事件
+const handleClose = () => {
+    emits('close');
+};
+
+const show = computed({
+    get() {
+        return props.value;
+    },
+    set(val: boolean) {
+        emit("update:value", val);
+    }
+});
+</script>
+
+<style lang="scss">
+.el-dialog {
+    border: none;
+    overflow: hidden;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: url("@/assets/common/bg_real_dialog.png");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 805px;
+    height: 612px;
+    padding: 0;
+
+    .el-dialog__header.show-close {
+        padding: 0;
+    }
+
+    .el-dialog__close {
+        width: 56px;
+        height: 56px;
+        color: white;
+        font-size: 18px;
+        padding-top: 4px;
+        padding-right: 20px;
+    }
+
+    .video-dialog-header {
+        color: white;
+        padding: 0;
+        padding-top: 4px;
+
+        .header-left {
+            padding: 0 20px;
+            font-weight: bold;
+            font-size: 18px;
+
+            .header-icon {
+                margin-top: 8px;
+                width: 48px;
+                height: 48px;
+                background-image: url("@/assets/common/dialog_title_icon.png");
+                background-size: contain;
+                background-position: center;
+                background-repeat: no-repeat;
+            }
+        }
+    }
+
+    .video-container {
+        padding: 24px;
+
+        // background: red;
+        .real-video-player {
+            border-radius: 0px 0px 4px 4px;
+            overflow: hidden;
+        }
+    }
+}
+</style>
\ No newline at end of file