Selaa lähdekoodia

feat(live-stream, lss): add stream serial number and enhance URL handling

- Introduced a new optional field `streamSn` in the CameraInfoDTO interface to store the streaming serial number.
- Updated the Live Stream component to clear specific URL query parameters (`lssId` and `action`) after successful submission, improving navigation and user experience.
- Enhanced component formatting for better readability and maintainability across the live-stream and LSS views.
yb 6 päivää sitten
vanhempi
commit
8df16b11a5
3 muutettua tiedostoa jossa 33 lisäystä ja 16 poistoa
  1. 3 0
      src/types/index.ts
  2. 9 1
      src/views/live-stream/index.vue
  3. 21 15
      src/views/lss/index.vue

+ 3 - 0
src/types/index.ts

@@ -170,6 +170,9 @@ export interface CameraInfoDTO extends CameraAddRequest {
   createdAt?: string
   /* 更新时间(ISO) */
   updatedAt?: string
+
+  /* 推流序列号 */
+  streamSn?: string
 }
 
 // 添加摄像头请求

+ 9 - 1
src/views/live-stream/index.vue

@@ -393,7 +393,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import {
   Search,
@@ -427,6 +427,7 @@ import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n({ useScope: 'global' })
 const route = useRoute()
+const router = useRouter()
 
 // 格式化时间
 function formatDateTime(dateStr: string | undefined): string {
@@ -740,6 +741,13 @@ async function handleSubmit() {
           if (res.success) {
             ElMessage.success(t('新增成功'))
             drawerVisible.value = false
+            // 清除 URL 上的 lssId 和 action 参数
+            if (route.query.action || route.query.lssId) {
+              const newQuery = { ...route.query }
+              delete newQuery.lssId
+              delete newQuery.action
+              router.replace({ path: '/live-stream', query: newQuery })
+            }
             getList()
           } else {
             ElMessage.error(res.errMessage || t('新增失败'))

+ 21 - 15
src/views/lss/index.vue

@@ -268,17 +268,18 @@
                   <el-button type="primary" link @click="handleEditCamera(row)">
                     <Icon icon="mdi:note-edit-outline" width="20" height="20" />
                   </el-button>
+                  <!-- :tooltip="t('查看Cloudflare Stream')" -->
+                  <el-button type="primary" link @click="handleViewCamera(row)">
+                    <Icon
+                      icon="mdi:controller-right"
+                      :class="['crosshairs-btn', { active: row.streamSn }]"
+                      width="20"
+                      height="20"
+                    />
+                  </el-button>
                   <el-button type="danger" link @click="handleDeleteCamera(row)">
                     <Icon icon="mdi:delete" width="20" height="20" />
                   </el-button>
-                  <el-button
-                    :tooltip="t('查看Cloudflare Stream')"
-                    link
-                    :class="['crosshairs-btn', { active: row.streamSn }]"
-                    @click="handleViewCamera(row)"
-                  >
-                    <Icon icon="mdi:controller-right" width="20" height="20" />
-                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -608,14 +609,12 @@ function formatStatus(status: LssNodeStatus | undefined): string {
 // 获取状态标签类型
 function getStatusTagType(status: LssNodeStatus | undefined): 'success' | 'danger' | 'warning' | 'info' {
   switch (status) {
-    case 'ONLINE':
+    case 'active':
       return 'success'
-    case 'OFFLINE':
+    case 'hold':
       return 'danger'
-    case 'BUSY':
+    case 'dead':
       return 'warning'
-    case 'MAINTENANCE':
-      return 'info'
     default:
       return 'info'
   }
@@ -652,9 +651,16 @@ async function handleViewCamera(row: CameraInfoDTO) {
         confirmButtonText: t('新增 Live Stream'),
         cancelButtonText: t('取消'),
         type: 'warning',
-        center: true
+        center: true,
+        customClass: 'custom-dialog',
+        customStyle: {
+          height: '300px',
+          display: 'inline-flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }
       })
-      // 用户点击了"新增 Live Stream",跳转到直播管理页面
       router.push(`/live-stream?cameraId=${row.cameraId}&lssId=${row.lssId}&action=create`)
     } catch {
       // 用户点击了取消,不做任何操作