Răsfoiți Sursa

refactor(lss): update LSS node status types and enhance search form functionality

- Changed LSS node status types from 'ONLINE', 'OFFLINE', 'BUSY', 'MAINTENANCE' to 'hold', 'active', 'dead' for better clarity.
- Modified the search form to include separate fields for LSS ID and name, improving user input experience.
- Streamlined the status selection in the search form to reflect updated status types, enhancing consistency across the application.
yb 1 săptămână în urmă
părinte
comite
d286e84c5c
2 a modificat fișierele cu 55 adăugiri și 37 ștergeri
  1. 1 1
      src/types/index.ts
  2. 54 36
      src/views/lss/index.vue

+ 1 - 1
src/types/index.ts

@@ -351,7 +351,7 @@ export interface RecordItem {
 // ==================== LSS 节点相关类型 ====================
 
 // LSS 节点状态
-export type LssNodeStatus = 'ONLINE' | 'OFFLINE' | 'BUSY' | 'MAINTENANCE'
+export type LssNodeStatus = 'hold' | 'active' | 'dead'
 
 // LSS 节点信息 (新 API)
 export interface LssNodeDTO {

+ 54 - 36
src/views/lss/index.vue

@@ -5,27 +5,28 @@
       <el-form :model="searchForm" inline data-id="search-form">
         <el-form-item>
           <el-input
-            v-model.trim="searchForm.keyword"
-            placeholder="LSS ID / 名称"
+            v-model.trim="searchForm.lssId"
+            placeholder="LSS ID"
             clearable
             data-id="search-keyword"
             @keyup.enter="handleSearch"
           />
         </el-form-item>
         <el-form-item>
-          <el-select v-model="searchForm.status" placeholder="状态" clearable data-id="search-status">
-            <el-option label="全部" value="" />
-            <el-option label="在线" value="ONLINE" />
-            <el-option label="离线" value="OFFLINE" />
-            <el-option label="繁忙" value="BUSY" />
-            <el-option label="维护" value="MAINTENANCE" />
-          </el-select>
+          <el-input
+            v-model.trim="searchForm.lssName"
+            placeholder="名称"
+            clearable
+            data-id="search-keyword"
+            @keyup.enter="handleSearch"
+          />
         </el-form-item>
         <el-form-item>
-          <el-select v-model="searchForm.enabled" placeholder="启用状态" clearable data-id="search-enabled">
-            <el-option label="全部" :value="null" />
-            <el-option label="已启用" :value="true" />
-            <el-option label="已禁用" :value="false" />
+          <el-select v-model="searchForm.status" placeholder="心跳" clearable data-id="search-enabled">
+            <el-option label="全部" value="" />
+            <el-option label="active" :value="1" />
+            <el-option label="hold" :value="2" />
+            <el-option label="dead" :value="3" />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -53,37 +54,46 @@
         <el-table-column prop="lssName" :label="t('名称')" min-width="140" sortable="custom" show-overflow-tooltip />
         <el-table-column prop="address" :label="t('地址')" min-width="180" sortable="custom" show-overflow-tooltip />
         <el-table-column prop="ip" :label="t('IP')" min-width="180" sortable="custom" show-overflow-tooltip />
-        <el-table-column label="心跳" align="center">
+        <el-table-column label="心跳" width="220" align="center">
           <template #default="{ row }">
+            {{
+              row.status === 'active' ? '活跃' : row.status === 'hold' ? 'hold' : row.status === 'dead' ? '离线' : '-'
+            }}
+            |
             {{ formatTime(row.lastHeartbeatAt) }}
           </template>
         </el-table-column>
-        <el-table-column prop="status" :label="t('状态')" min-width="100" sortable="custom">
+        <el-table-column :label="t('设备列表')" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleCameraList(row)">
+              <Icon icon="mdi:cctv" />
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('ably信息')" align="center" fixed="right">
+          <template #default="{ row }">
+            {{ row.ablyInfo || '-' }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="status" :label="t('状态')" min-width="100" sortable="custom">
           <template #default="{ row }">
             <el-tag :type="getStatusTagType(row.status)" size="small">
               {{ formatStatus(row.status) }}
             </el-tag>
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <!-- <el-table-column prop="currentTasks" :label="t('当前任务')" min-width="100" sortable="custom" align="center">
           <template #default="{ row }">{{ row.currentTasks }} / {{ row.maxTasks }}</template>
         </el-table-column> -->
-        <el-table-column prop="enabled" :label="t('启用')" min-width="80" align="center">
-          <template #default="{ row }">
-            <el-switch
-              v-model="row.enabled"
-              :loading="row._switching"
-              @change="(val: boolean) => handleToggleEnabled(row, val)"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column prop="ffmpegVersion" label="FFmpeg" show-overflow-tooltip />
-        <el-table-column :label="t('设备列表')" align="center">
+        <!-- <el-table-column prop="enabled" :label="t('启用')" min-width="80" align="center">
           <template #default="{ row }">
-            <el-button type="primary" link :icon="VideoCamera" @click="handleCameraList(row)" />
+            <el-switch v-model="row.enabled" :loading="row._switching"
+              @change="(val: boolean) => handleToggleEnabled(row, val)" />
           </template>
-        </el-table-column>
-        <el-table-column label="詳情" align="center">
+        </el-table-column> -->
+        <!-- <el-table-column prop="ffmpegVersion" label="FFmpeg" show-overflow-tooltip /> -->
+
+        <!-- <el-table-column label="詳情" align="center">
           <template #default="{ row }">
             <el-button type="primary" link :icon="View" @click="handleViewDetail(row)" />
           </template>
@@ -93,10 +103,13 @@
           <template #default="{ row }">
             {{ row.status === 'ONLINE' ? '在线' : '离线' }}
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column :label="t('操作')" align="center" fixed="right">
           <template #default="{ row }">
             <el-button type="primary" link :icon="Edit" @click="handleEdit(row)" />
+            <el-button type="primary" link @click="handleScanDevices(row)">
+              <Icon icon="mdi:scan" />
+            </el-button>
             <el-button type="danger" link :icon="Delete" @click="handleDelete(row)" />
           </template>
         </el-table-column>
@@ -504,6 +517,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { listLssNodes, deleteLssNode, setLssNodeEnabled, updateLssNode } from '@/api/lss'
 import { adminListCameras, adminAddCamera, adminUpdateCamera, adminDeleteCamera } from '@/api/camera'
 import { listCameraVendors } from '@/api/camera-vendor'
+import { Icon } from '@iconify/vue'
 import type {
   LssNodeDTO,
   LssNodeStatus,
@@ -755,13 +769,13 @@ const sortState = reactive<{
 
 // 搜索表单
 const searchForm = reactive<{
-  keyword: string
+  lssId: string
+  lssName: string
   status: LssNodeStatus | ''
-  enabled: boolean | null
 }>({
-  keyword: '',
-  status: '',
-  enabled: null
+  lssId: '',
+  lssName: '',
+  status: ''
 })
 
 // 分页相关
@@ -842,6 +856,10 @@ function handleViewDetail(row: LssNodeDTO) {
   detailDrawerVisible.value = true
 }
 
+function handleScanDevices(row: LssNodeDTO) {
+  console.log(row)
+}
+
 function handleEdit(row: LssNodeDTO) {
   currentLss.value = row
   lssEditForm.lssName = row.lssName || ''