增加预览

src/views/safe/camera/CameraViewForm.vue

@@ -0,0 +1,41 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    
+    <template #footer>
+      <el-button @click="dialogVisible = false">关 闭</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { CameraApi } from '@/api/safe/camera'
+import { ServerApi } from '@/api/safe/server'
+
+defineOptions({ name: 'CameraViewForm' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+let webrtcUrl = ''
+let webrtcAiUrl = ''
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  if (id) {
+    formLoading.value = true
+    try {
+      const camera = await CameraApi.getCamera(id)
+      if(camera && camera.serverId){
+        const server = await ServerApi.getServer(camera.serverId);
+        dialogTitle.value = server.name + ' - ' + camera.name + ' 监视预览'
+        
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+
+defineExpose({ open}) // 提供 open 方法，用于打开弹窗
+
+</script>

src/views/safe/camera/index.vue

@@ -122,6 +122,14 @@
         <template #default="scope">
           <el-button
             link
+            type="success"
+            @click="openViewForm(scope.row.id)"
+            v-hasPermi="['safe:camera:query']"
+          >
+            预览
+          </el-button>
+          <el-button
+            link
             type="primary"
             @click="openForm('update', scope.row.id)"
             v-hasPermi="['safe:camera:update']"
@@ -150,6 +158,7 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <CameraForm ref="formRef" @success="getList" />
+  <CameraViewForm  ref="viewFormRef"/>
 </template>
 
 <script setup lang="ts">
@@ -158,6 +167,7 @@ import download from '@/utils/download'
 import { CameraApi, CameraVO } from '@/api/safe/camera'
 import { ServerApi } from '@/api/safe/server'
 import CameraForm from './CameraForm.vue'
+import CameraViewForm from './CameraViewForm.vue'
 
 /** 安防前端设备 列表 */
 defineOptions({ name: 'SafeCamera' })
@@ -212,6 +222,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 预览操作 */
+const viewFormRef = ref()
+const openViewForm = (id?: number) => {
+  viewFormRef.value.open(id)
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {