فهرست منبع

fix(layout): update camera vendor icon and streamline input components

- Changed the icon for the camera vendor menu item from 'mdi:domain' to 'mdi:cctv' for better representation.
- Consolidated input component attributes in the LSS and camera management views for improved readability and consistency.
- Replaced multiple lines of input attributes with single-line definitions to enhance code clarity and maintainability.
yb 1 هفته پیش
والد
کامیت
d39f2edc6c
2فایلهای تغییر یافته به همراه34 افزوده شده و 25 حذف شده
  1. 1 1
      src/layout/index.vue
  2. 33 24
      src/views/lss/index.vue

+ 1 - 1
src/layout/index.vue

@@ -222,7 +222,7 @@ const menuItems: MenuItem[] = [
   { path: '/cc', title: 'Cloudflare Stream', icon: 'mdi:cloud' },
   { path: '/webrtc', title: 'WebRTC 流', icon: 'mdi:wifi' },
   { path: '/monitor', title: '多视频监控', icon: 'mdi:video' },
-  { path: '/camera-vendor', title: '摄像头配置', icon: 'mdi:domain' },
+  { path: '/camera-vendor', title: '摄像头配置', icon: 'mdi:cctv' },
   {
     path: '/demo',
     title: '视频测试',

+ 33 - 24
src/views/lss/index.vue

@@ -414,32 +414,31 @@
       </el-tabs>
     </el-drawer>
 
-    <!-- 摄像头编辑弹窗 -->
-    <el-dialog
+    <!-- 摄像头编辑抽屉 -->
+    <el-drawer
       v-model="cameraDialogVisible"
       :title="isEditCamera ? '编辑摄像头' : '添加摄像头'"
-      width="500px"
+      direction="rtl"
+      size="500px"
       :close-on-click-modal="false"
+      destroy-on-close
+      class="camera-edit-drawer"
     >
       <el-form ref="cameraFormRef" :model="cameraForm" :rules="cameraRules" label-width="100px">
-        <!-- 新增时显示厂商选择下拉 -->
-        <el-form-item v-if="!isEditCamera" label="选择厂商" prop="selectedVendorId">
+        <el-form-item label="IP 地址" prop="ip">
+          <el-input v-model="cameraForm.ip" :disabled="isEditCamera" placeholder="请输入 IP 地址" />
+        </el-form-item>
+        <el-form-item label="摄像头型号" prop="cameraId">
           <el-select
             v-model="cameraForm.selectedVendorId"
-            placeholder="请选择厂商"
+            placeholder="请选择摄像头"
             style="width: 100%"
             filterable
             @change="handleVendorSelect"
           >
-            <el-option v-for="vendor in availableVendors" :key="vendor.id" :label="vendor.name" :value="vendor.id" />
+            <el-option v-for="vendor in cameraVendorList" :key="vendor.id" :label="vendor.name" :value="vendor.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="IP 地址" prop="ip">
-          <el-input v-model="cameraForm.ip" :disabled="isEditCamera" placeholder="请输入 IP 地址" />
-        </el-form-item>
-        <el-form-item label="摄像头 ID" prop="cameraId">
-          <el-input v-model="cameraForm.cameraId" :disabled="isEditCamera" placeholder="请输入摄像头 ID" />
-        </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="cameraForm.name" placeholder="请输入名称" />
         </el-form-item>
@@ -460,10 +459,12 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="cameraDialogVisible = false">{{ t('取消') }}</el-button>
-        <el-button type="primary" :loading="cameraSubmitting" @click="handleSubmitCamera">{{ t('确定') }}</el-button>
+        <div class="drawer-footer">
+          <el-button @click="cameraDialogVisible = false">{{ t('取消') }}</el-button>
+          <el-button type="primary" :loading="cameraSubmitting" @click="handleSubmitCamera">{{ t('确定') }}</el-button>
+        </div>
       </template>
-    </el-dialog>
+    </el-drawer>
 
     <!-- 参数配置/运行参数弹窗 -->
     <el-dialog v-model="paramsDialogVisible" :title="paramsDialogTitle" width="600px" :close-on-click-modal="false">
@@ -691,6 +692,7 @@ const cameraDrawerVisible = ref(false)
 const cameraLoading = ref(false)
 const deviceActiveTab = ref('camera')
 const cameraList = ref<CameraInfoDTO[]>([])
+const cameraVendorList = ref<CameraVendorDTO[]>([])
 
 // 摄像头搜索表单
 const cameraSearchForm = reactive({
@@ -704,7 +706,6 @@ const cameraFormRef = ref<FormInstance>()
 const isEditCamera = ref(false)
 const cameraSubmitting = ref(false)
 const currentCamera = ref<CameraInfoDTO | null>(null)
-const availableVendors = ref<CameraVendorDTO[]>([])
 
 // 参数配置/运行参数弹窗状态
 const paramsDialogVisible = ref(false)
@@ -729,7 +730,9 @@ const cameraForm = reactive({
   model: '',
   channelNo: '',
   remark: '',
-  enabled: true
+  enabled: true,
+  configParams: '',
+  runParams: ''
 })
 
 // 摄像头表单验证规则(动态)
@@ -935,14 +938,16 @@ function resetCameraForm() {
   cameraForm.channelNo = ''
   cameraForm.remark = ''
   cameraForm.enabled = true
+  cameraForm.configParams = ''
+  cameraForm.runParams = ''
   cameraFormRef.value?.clearValidate()
 }
 
-async function loadAvailableVendors() {
+async function loadCameraVendorList() {
   try {
     const res = await listCameraVendors({ enabled: true })
     if (res.success && res.data) {
-      availableVendors.value = res.data.list || []
+      cameraVendorList.value = res.data.list || []
     }
   } catch (error) {
     console.error('获取厂商列表失败', error)
@@ -950,7 +955,7 @@ async function loadAvailableVendors() {
 }
 
 function handleVendorSelect(vendorId: number) {
-  const vendor = availableVendors.value.find((v) => v.id === vendorId)
+  const vendor = cameraVendorList.value.find((v) => v.id === vendorId)
   if (vendor) {
     cameraForm.brand = vendor.code
     // 设置厂商默认端口
@@ -966,7 +971,7 @@ async function handleAddCamera() {
   isEditCamera.value = false
   currentCamera.value = null
   resetCameraForm()
-  await loadAvailableVendors()
+  await loadCameraVendorList()
   cameraDialogVisible.value = true
 }
 
@@ -987,7 +992,9 @@ async function handleEditCamera(row: CameraInfoDTO) {
   cameraForm.channelNo = row.channelNo || ''
   cameraForm.remark = row.remark || ''
   cameraForm.enabled = row.enabled
-  await loadAvailableVendors()
+  cameraForm.configParams = row.configParams || ''
+  cameraForm.runParams = row.runParams || ''
+  await loadCameraVendorList()
   cameraDialogVisible.value = true
 }
 
@@ -1017,7 +1024,9 @@ async function handleSubmitCamera() {
           model: cameraForm.model,
           channelNo: cameraForm.channelNo,
           remark: cameraForm.remark,
-          enabled: cameraForm.enabled
+          enabled: cameraForm.enabled,
+          configParams: cameraForm.configParams,
+          runParams: cameraForm.runParams
         }
         if (cameraForm.password) {
           data.password = cameraForm.password