فهرست منبع

refactor(views): optimize input and drawer components in lss/index.vue

- Consolidated attributes in input components for improved readability and consistency.
- Enhanced layout of table and pagination components for better user experience.
- Streamlined drawer component structures to maintain visual consistency across the application.
yb 3 روز پیش
والد
کامیت
7a5c8d0baf
1فایلهای تغییر یافته به همراه64 افزوده شده و 58 حذف شده
  1. 64 58
      src/views/lss/index.vue

+ 64 - 58
src/views/lss/index.vue

@@ -505,81 +505,83 @@
       class="camera-edit-drawer"
     >
       <el-form ref="cameraFormRef" :model="cameraForm" :rules="cameraRules" label-width="auto">
-        <!-- <el-form-item label="IP 地址" prop="ip">
+        <div class="camera-form-container">
+          <!-- <el-form-item label="IP 地址" prop="ip">
           <el-input v-model="cameraForm.ip" :disabled="isEditCamera" placeholder="请输入 IP 地址" />
         </el-form-item> -->
-        <el-form-item :label="t('设备ID') + ':'" prop="cameraId">
-          <el-input v-model="cameraForm.cameraId" :disabled="isEditCamera" :placeholder="t('请输入设备ID')" />
-        </el-form-item>
-        <el-form-item :label="t('设备名称') + ':'" prop="cameraName">
-          <el-input v-model="cameraForm.cameraName" :placeholder="t('请输入设备名称')" />
-        </el-form-item>
-        <el-form-item :label="t('厂商') + ':'" prop="vendorName">
-          <el-select
-            v-model="cameraForm.vendorName"
-            :placeholder="t('请选择摄像头')"
-            style="width: 100%"
-            filterable
-            @change="handleVendorSelect"
-          >
-            <el-option
-              v-for="vendor in [
-                { id: 'hikvision', name: '海康威视' },
-                { id: 'dahua', name: '大华' },
-                { id: 'uniview', name: '宇视' },
-                { id: 'other', name: '其他' }
-              ]"
-              :key="vendor.id"
-              :label="vendor.name"
-              :value="vendor.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="t('型号') + ':'" prop="model">
-          <el-input v-model="cameraForm.model" :placeholder="t('请输入型号')" />
-        </el-form-item>
-        <el-form-item v-if="isEditCamera" :label="t('添加时间') + ':'">
-          <span class="form-value">{{ formatTime(currentCamera?.createdAt) }}</span>
-        </el-form-item>
-        <!-- <el-form-item label="摄像头型号" prop="cameraId">
+          <el-form-item :label="t('设备ID') + ':'" prop="cameraId">
+            <el-input v-model="cameraForm.cameraId" :disabled="isEditCamera" :placeholder="t('请输入设备ID')" />
+          </el-form-item>
+          <el-form-item :label="t('设备名称') + ':'" prop="cameraName">
+            <el-input v-model="cameraForm.cameraName" :placeholder="t('请输入设备名称')" />
+          </el-form-item>
+          <el-form-item :label="t('厂商') + ':'" prop="vendorName">
+            <el-select
+              v-model="cameraForm.vendorName"
+              :placeholder="t('请选择摄像头')"
+              style="width: 100%"
+              filterable
+              @change="handleVendorSelect"
+            >
+              <el-option
+                v-for="vendor in [
+                  { id: 'hikvision', name: '海康威视' },
+                  { id: 'dahua', name: '大华' },
+                  { id: 'uniview', name: '宇视' },
+                  { id: 'other', name: '其他' }
+                ]"
+                :key="vendor.id"
+                :label="vendor.name"
+                :value="vendor.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('型号') + ':'" prop="model">
+            <el-input v-model="cameraForm.model" :placeholder="t('请输入型号')" />
+          </el-form-item>
+          <el-form-item v-if="isEditCamera" :label="t('添加时间') + ':'">
+            <span class="form-value">{{ formatTime(currentCamera?.createdAt) }}</span>
+          </el-form-item>
+          <!-- <el-form-item label="摄像头型号" prop="cameraId">
           <el-select v-model="cameraForm.selectedVendorId" placeholder="请选择摄像头" style="width: 100%" filterable
             @change="handleVendorSelect">
             <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="名称" prop="name">
+          <!-- <el-form-item label="名称" prop="name">
           <el-input v-model="cameraForm.name" placeholder="请输入名称" />
         </el-form-item> -->
-        <!-- <el-form-item label="端口" prop="port">
+          <!-- <el-form-item label="端口" prop="port">
           <el-input-number v-model="cameraForm.port" :min="1" :max="65535" style="width: 100%" />
         </el-form-item> -->
-        <!-- <el-form-item label="用户名" prop="username">
+          <!-- <el-form-item label="用户名" prop="username">
           <el-input v-model="cameraForm.username" placeholder="请输入用户名" />
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input v-model="cameraForm.password" type="password" show-password placeholder="请输入密码" />
         </el-form-item> -->
-        <el-form-item :label="t('参数配置') + ':'">
-          <CodeEditor
-            v-model="cameraForm.paramConfig"
-            language="json"
-            height="200px"
-            :placeholder="t('请输入参数配置 (JSON)')"
-          />
-        </el-form-item>
-        <br />
-        <el-form-item :label="t('运行参数') + ':'">
-          <CodeEditor
-            v-model="cameraForm.runtimeParams"
-            language="json"
-            height="200px"
-            :placeholder="t('设备运行参数 (JSON)')"
-          />
-        </el-form-item>
+          <el-form-item :label="t('参数配置') + ':'">
+            <CodeEditor
+              v-model="cameraForm.paramConfig"
+              language="json"
+              height="200px"
+              :placeholder="t('请输入参数配置 (JSON)')"
+            />
+          </el-form-item>
+          <br />
+          <el-form-item :label="t('运行参数') + ':'">
+            <CodeEditor
+              v-model="cameraForm.runtimeParams"
+              language="json"
+              height="200px"
+              :placeholder="t('设备运行参数 (JSON)')"
+            />
+          </el-form-item>
 
-        <el-form-item :label="t('添加时间') + ':'">
-          {{ formatTime(cameraForm.createdAt) }}
-        </el-form-item>
+          <el-form-item :label="t('添加时间') + ':'">
+            {{ formatTime(cameraForm.createdAt) }}
+          </el-form-item>
+        </div>
       </el-form>
 
       <template #footer>
@@ -1408,6 +1410,10 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.camera-form-container {
+  padding: 0 20px;
+}
+
 .search-form {
   flex-shrink: 0;
   margin-bottom: 16px;