feat(视频监控): 实现萤石云视频播放功能并优化布局交互

- 添加ezuikit-js依赖用于视频播放
- 实现视频播放器初始化、销毁和切换逻辑
- 优化视频布局交互，支持扩展/普通视图切换
- 添加视频控制按钮和悬停效果
- 更新开发环境API地址

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源场站智慧运维平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.149:18899'
+VITE_APP_BASE_API = 'http://192.168.110.194:18899'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

package.json

@@ -31,6 +31,7 @@
     "echarts": "5.6.0",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
+    "ezuikit-js": "^8.1.10",
     "file-saver": "2.0.5",
     "highlight.js": "11.9.0",
     "image-conversion": "2.1.1",

src/api/securitySurveillance/index.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+// 获取萤石云Token
+export function getToken() {
+    return request({
+        url: '/ops/monitoriing/getToken',
+        method: 'get',
+    })
+}

src/views/securitySurveillance/components/spjk.vue

@@ -14,13 +14,13 @@
                 </span>
             </div>
             <div class="video-container">
-                <el-row gutter="20">
+                <el-row :gutter="20">
                     <!-- 扩展布局：左侧大视频 + 右侧小视频列 -->
                     <template v-if="isExpanded">
                         <!-- 左侧大视频（占 16 列） -->
-                        <el-col :span="16">
+                        <el-col :span="16" class="video-wrapper">
-                            <div class="item large" @click="() => { isExpanded = false; }">
+                            <div class="item large" @click="() => { isExpanded = false; }" ref="bigVideoRef"
-                                <img :src="videoList[activeIndex].url" alt="">
+                                :id="`bigVideo`">
                                 <div class="title" v-if="isExpanded"
                                     style="display: flex;justify-content: space-between;">
                                     <div class="text">
@@ -32,22 +32,35 @@
                                         <img src="/assets/svg/jietu.svg" alt="">
                                     </div>
                                 </div>
-                                <div class="title" v-else>{{ videoList[activeIndex].name }}</div>
+                            </div>
+                            <!-- 大视频的切换视图按钮 -->
+                            <div class="video-action-btn">
+                                <el-button type="primary" @click.stop="() => {
+                                    isExpanded = false;
+                                }">切换视图</el-button>
                             </div>
                         </el-col>
                         <!-- 右侧小视频列（占 8 列） -->
                         <el-col :span="8">
-                            <el-row gutter="20">
+                            <el-row :gutter="20">
-                                <el-col :span="24" v-for="i in 3" :key="i">
+                                <el-col :span="24" v-for="i in 3" :key="i" class="video-wrapper">
                                     <div class="item small" @click="() => {
                                         // 计算要显示的视频索引 - 按照当前视频后面三个排序
                                         const displayIndex = (activeIndex + i) % videoList.length;
                                         activeIndex = displayIndex;
-                                    }">
+                                    }" :id="`smallVideo-expanded-${i}`">
-                                        <img :src="videoList[(activeIndex + i) % videoList.length].url" alt="">
                                         <div class="title">{{ videoList[(activeIndex + i) % videoList.length].name }}
                                         </div>
                                     </div>
+                                    <!-- 小视频的两个按钮：切换视图和查看视频 -->
+                                    <div class="video-action-btn expanded">
+
+                                        <el-button type="success" size="small" @click.stop="() => {
+                                            const displayIndex = (activeIndex + i) % videoList.length;
+                                            activeIndex = displayIndex;
+                                            // 不需要改变isExpanded，因为已经在扩展布局
+                                        }">查看视频</el-button>
+                                    </div>
                                 </el-col>
                             </el-row>
                         </el-col>
@@ -55,16 +68,19 @@
 
                     <!-- 普通布局：所有视频均匀排列 -->
                     <template v-else>
-                        <el-col :span="8" v-for="(item, index) in videoList" :key="index">
+                        <el-col :span="8" v-for="(item, index) in videoList" :key="index" class="video-wrapper">
-                            <div class="item" @click="() => {
+                            <!-- 视频容器 -->
-                                activeIndex = index;
+                            <div class="item" :id="`smallVideo-${index + 1}`" ref="smallVideoRef">
-                                isExpanded = true;
-                            }">
-                                <img :src="item.url" alt="">
                                 <div class="title">{{ item.name }}</div>
                             </div>
+                            <!-- 按钮放在最外层，与视频容器同级 -->
+                            <div class="video-action-btn">
+                                <el-button type="primary" @click.stop="() => {
+                                    activeIndex = index;
+                                    isExpanded = true;
+                                }">切换视图</el-button>
+                            </div>
                         </el-col>
-
                     </template>
                 </el-row>
                 <el-row v-if="!isExpanded">
@@ -79,14 +95,22 @@
     </el-row>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue';
 import { Refresh } from '@element-plus/icons-vue';
+import EZUIKit from 'ezuikit-js';
 import TitleComponent from '@/components/TitleComponent';
-const activeIndex = ref(-1); // 初始无选中，选中后为对应索引
+import { getToken } from '@/api/securitySurveillance/index.js';
-const isExpanded = ref(false); // 初始为普通布局
+const activeIndex = ref(0); // 初始选中第一个视频
+const isExpanded = ref(true); // 初始为普通布局
 const pageSize = ref(20);
 const totalRecords = ref(100);
+const accessToken = ref('')
+const currentPage = ref(1);
+const activeTab = ref('live');
+const bigVideoRef = ref<HTMLDivElement>(null);
+const smallVideoRef = ref<HTMLDivElement>(null);
+
 const videoList = ref([
     {
         name: 'A区d厂',
@@ -125,9 +149,130 @@ const videoList = ref([
         url: 'https://img.js.design/assets/img/68c1462dcbf9ed2271880b95.webp#ae7ae94ca84ce980e2d2281869335f06'
     }
 ]);
+
+const StructureEZUIKitPlayer = (item: any, index: number, isBig = false) => {
+    const containerId = isBig ? 'bigVideo' : isExpanded.value ? `smallVideo-expanded-${index + 1}` : `smallVideo-${index + 1}`;
+    const container = document.getElementById(containerId);
+
+    // 先销毁旧的播放器实例（如果存在）
+    if (item.player) {
+        try {
+            item.player.destroy();
+        } catch (error) {
+            console.error('销毁播放器失败:', error);
+        }
+        item.player = null;
+    }
+
+    if (container) {
+        item.player = new EZUIKit.EZUIKitPlayer({
+            audio: '0',
+            id: containerId,
+            accessToken: accessToken.value,
+            url: "ezopen://open.ys7.com/GA1044316/1.hd.live",
+            template: "pcLive",
+            width: container.clientWidth,
+            height: container.clientHeight,
+            plugin: ['talk']
+        });
+    }
+};
+
+// 获取萤石云Token
+const getTokenData = async () => {
+    const { data } = await getToken()
+    accessToken.value = data
+    initVideo()
+}
+
+const getData = async () => {
+    await getTokenData()
+}
+
+const initVideo = () => {
+    // 先清理所有视频容器的内容，避免残留
+    if (bigVideoRef.value) {
+        bigVideoRef.value.innerHTML = '';
+    }
+
+    if (isExpanded.value) {
+        // 扩展布局：初始化大视频和右侧3个小视频
+        StructureEZUIKitPlayer(videoList.value[activeIndex.value], 0, true);
+        for (let i = 0; i < 3; i++) {
+            const displayIndex = (activeIndex.value + i + 1) % videoList.value.length;
+            StructureEZUIKitPlayer(videoList.value[displayIndex], i);
+        }
+    } else {
+        // 普通布局：初始化所有视频
+        videoList.value.forEach((item, index) => {
+            StructureEZUIKitPlayer(item, index);
+        });
+    }
+}
+
+const handlePageChange = (page: number) => {
+    currentPage.value = page;
+    // 这里可以添加分页逻辑
+}
+
+const handleSizeChange = (size: number) => {
+    pageSize.value = size;
+    currentPage.value = 1;
+    // 这里可以添加分页逻辑
+}
+
+// 清理所有播放器实例
+const cleanupPlayers = () => {
+    videoList.value.forEach(item => {
+        console.log(item);
+
+        if (item.player) {
+            try {
+                item.player.destroy();
+            } catch (error) {
+                console.error('销毁播放器失败:', error);
+            }
+            item.player = null;
+        }
+    });
+}
+
+// 监听isExpanded变化，重新初始化视频
+watch(isExpanded, async (newValue, oldValue) => {
+    // 确保DOM已经更新
+    await nextTick();
+    // 重新初始化视频，确保在切换布局时正确显示
+    initVideo();
+});
+
+watch(activeIndex, (newIndex) => {
+    if (isExpanded.value) {
+        // 当activeIndex变化时，重新初始化扩展布局中的视频
+        initVideo();
+    }
+});
+
+onMounted(() => {
+    getData()
+});
+
+// 组件卸载时销毁所有播放器
+onUnmounted(() => {
+    cleanupPlayers();
+});
 </script>
 
 <style scoped lang="scss">
+.el-col {
+    margin-bottom: 20px;
+}
+
+// 视频包装器样式
+.video-wrapper {
+    position: relative;
+    // 确保按钮在视频容器上方
+}
+
 .video-container {
     .item {
         height: 220px;
@@ -135,6 +280,8 @@ const videoList = ref([
         position: relative;
         border: 2px solid rgba(45, 119, 249, 1);
         cursor: pointer;
+        // 确保子元素正确定位
+        overflow: hidden;
 
         img {
             width: 100%;
@@ -152,12 +299,53 @@ const videoList = ref([
             width: 100%;
             bottom: 0;
             color: #fff;
+            z-index: 15;
         }
     }
 
+    // 视频动作按钮样式（放在最外层）
+    .video-action-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: 20;
+        pointer-events: none; // 防止按钮阻止鼠标悬停事件
+    }
+
+    // 右侧小视频的按钮容器样式
+    .video-action-btn.expanded {
+        display: flex;
+        gap: 10px;
+    }
+
+    // 鼠标悬停在视频包装器上时显示按钮
+    .video-wrapper:hover .video-action-btn {
+        opacity: 1;
+    }
+
+    // 鼠标悬停在视频上时添加半透明背景效果
+    .video-wrapper:hover .item::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        z-index: 5;
+    }
+
+    // 按钮本身需要有点击事件
+    .video-action-btn button {
+        pointer-events: auto;
+    }
+
     // 大视频样式（高度与右侧三个小视频总高度对齐，考虑间距）
     .large {
-        height: calc(220px * 3 + 20px * 2); // 高度为3个小视频高度加上2个间距
+        height: calc(220px * 3 + 20px * 2 + 40px); // 高度为3个小视频高度加上2个间距
 
         .tools {
             display: flex;
@@ -173,7 +361,7 @@ const videoList = ref([
 
     // 小视频样式（保持原高度，适配右侧单列）
     .small {
-        height: 220px;
+        height: 235px;
     }
 }
 </style>