表单格式修改

src/views/cameras/overview/components/AddCameraByIP.vue

@@ -10,46 +10,110 @@
         label-width="114px"
         label-position="left"
       >
-        <el-form-item
-          v-for="item in cameraIPAddForm"
-          :key="item.prop"
-          :label="item.label"
-          :prop="item.prop"
-        >
+        <el-form-item label="名称：" prop="name">
+          <el-input v-model="cameraIPData.name" placeholder="请输入名称" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="IP地址：" prop="cameraIp">
           <el-input
-            v-if="item.type === 'input'"
-            v-model="cameraIPData[item.prop]"
-            :placeholder="item.placeholder"
+            v-model="cameraIPData.cameraIp"
+            placeholder="请输入IP地址"
             style="width: 200px"
-            :type="item.prop === 'password' ? 'password' : ''"
-            :show-password="item.prop === 'password'"
-            :disabled="item.prop === 'principal'"
           />
+        </el-form-item>
+        <el-form-item label="端口：" prop="cameraPort">
+          <el-input
+            v-model="cameraIPData.cameraPort"
+            placeholder="请输入端口号"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="协议类型：" prop="cameraType">
           <el-select
-            v-if="item.type === 'select'"
-            v-model="cameraIPData[item.prop]"
-            :placeholder="item.placeholder"
+            v-model="cameraIPData.cameraType"
+            placeholder="请输入协议类型"
             style="width: 200px"
           >
             <el-option
-              v-for="protocal in item.option"
+              v-for="protocal in protocalTypeSelect"
               :key="protocal.value"
               :label="protocal.label"
               :value="protocal.value"
             />
           </el-select>
+        </el-form-item>
+        <el-form-item label="用户名：" prop="username">
+          <el-input
+            v-model="cameraIPData.username"
+            placeholder="请输入用户名"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="场景：" prop="workspaceCode">
           <el-tree-select
-            v-if="item.type === 'tree-select'"
-            v-model="cameraIPData[item.prop]"
+            v-model="cameraIPData.workspaceCode"
             :data="scenesTree"
             :render-after-expand="false"
             :default-expand-all="true"
             check-strictly
-            :placeholder="item.placeholder"
+            placeholder="请输入场景名称"
             style="width: 200px"
             @change="handleTreeSelect"
           />
         </el-form-item>
+        <el-form-item label="密码：" prop="password">
+          <el-input
+            v-model="cameraIPData.password"
+            placeholder="请输入用户名密码"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="工位负责人：" prop="principal">
+          <el-input
+            v-model="cameraIPData.principal"
+            placeholder="请输入工位负责人"
+            disabled
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备ID号：" prop="code">
+          <el-input
+            v-model="cameraIPData.code"
+            placeholder="自定义ID，不能重复"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input v-model="cameraIPData.remark" placeholder="请输入备注" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="服务类型：" prop="videoServiceType">
+          <el-select
+            v-model="cameraIPData.videoServiceType"
+            placeholder="请输入服务类型"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="protocal in serviceTypeSelect"
+              :key="protocal.value"
+              :label="protocal.label"
+              :value="protocal.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="视频编码标准：" prop="videoStandard">
+          <el-select
+            v-model="cameraIPData.videoStandard"
+            placeholder="请输入视频编码标准"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="protocal in standardTypeSelect"
+              :key="protocal.value"
+              :label="protocal.label"
+              :value="protocal.value"
+            />
+          </el-select>
+        </el-form-item>
       </el-form>
     </div>
     <span class="pop-footer">
@@ -60,9 +124,9 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onBeforeMount, ref } from 'vue';
+  import { onBeforeMount, ref } from 'vue';
   import { CameraIPItem } from '../type';
-  import { cameraIPAddForm } from '../constant';
+  import { protocalTypeSelect, serviceTypeSelect, standardTypeSelect } from '../constant';
   import useSceneInfos from '@/hooks/useSceneInfos';
   import { cloneDeep } from 'lodash-es';
 
@@ -77,15 +141,20 @@
 
   const cameraIPData = ref<CameraIPItem>({} as CameraIPItem);
 
-  const rules = computed(() => {
-    const newRule = {};
-    cameraIPAddForm.forEach((item) => {
-      if (item.required) {
-        newRule[item.prop] = item.rule;
-      }
-    });
-    return newRule;
-  });
+  const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    cameraIp: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
+    cameraPort: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
+    cameraType: [{ required: true, message: '请输入协议类型', trigger: 'blur' }],
+    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+    workspaceCode: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
+    password: [{ required: true, message: '请输入用户名密码', trigger: 'blur' }],
+    principal: [{ required: false }],
+    code: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
+    remark: [{ required: false }],
+    videoServiceType: [{ required: true, message: '请输入服务类型', trigger: 'blur' }],
+    videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
+  };
 
   const handleCancel = () => {
     emits('cancel-execute');

src/views/cameras/overview/components/AddCameraByNVR.vue

@@ -10,7 +10,118 @@
         label-width="124px"
         label-position="left"
       >
-        <el-form-item
+        <el-form-item label="名称：" prop="name">
+          <el-input v-model="cameraNVRData.name" placeholder="请输入名称" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="NVR平台IP地址：" prop="nvrIp">
+          <el-input
+            v-model="cameraNVRData.nvrIp"
+            placeholder="请输入NVR平台地址"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="端口：" prop="cameraPort">
+          <el-input
+            v-model="cameraNVRData.cameraPort"
+            placeholder="请输入端口号"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="协议类型：" prop="cameraType">
+          <el-select
+            v-model="cameraNVRData.cameraType"
+            placeholder="请输入协议类型"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="protocal in protocalTypeSelect"
+              :key="protocal.value"
+              :label="protocal.label"
+              :value="protocal.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="NVR平台用户名：" prop="nvrUsername">
+          <el-input
+            v-model="cameraNVRData.nvrUsername"
+            placeholder="请输入NVR平台用户名"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="场景：" prop="workspaceCode">
+          <el-tree-select
+            v-model="cameraNVRData.workspaceCode"
+            :data="scenesTree"
+            :render-after-expand="false"
+            :default-expand-all="true"
+            check-strictly
+            placeholder="请输入场景名称"
+            style="width: 200px"
+            @change="handleTreeSelect"
+          />
+        </el-form-item>
+        <el-form-item label="NVR平台密码：" prop="nvrPassword">
+          <el-input
+            v-model="cameraNVRData.nvrPassword"
+            placeholder="请输入NVR平台密码"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="工位负责人：" prop="principal">
+          <el-input
+            v-model="cameraNVRData.principal"
+            placeholder="请输入工位负责人"
+            disabled
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="设备ID号：" prop="code">
+          <el-input
+            v-model="cameraNVRData.code"
+            placeholder="自定义ID，不能重复"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input v-model="cameraNVRData.remark" placeholder="请输入备注" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="NVR平台通道号：" prop="nvrChannel">
+          <el-input
+            v-model="cameraNVRData.nvrChannel"
+            placeholder="请输入NVR平台通道号"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="服务类型：" prop="videoServiceType">
+          <el-select
+            v-model="cameraNVRData.videoServiceType"
+            placeholder="请输入服务类型"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="protocal in serviceTypeSelect"
+              :key="protocal.value"
+              :label="protocal.label"
+              :value="protocal.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="视频编码标准：" prop="videoStandard">
+          <el-select
+            v-model="cameraNVRData.videoStandard"
+            placeholder="请输入视频编码标准"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="protocal in standardTypeSelect"
+              :key="protocal.value"
+              :label="protocal.label"
+              :value="protocal.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item
           v-for="item in cameraNVRAddForm"
           :key="item.prop"
           :label="item.label"
@@ -49,7 +160,7 @@
             style="width: 200px"
             @change="handleTreeSelect"
           />
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
     </div>
     <span class="pop-footer">
@@ -62,7 +173,12 @@
 <script setup lang="ts">
   import { computed, onBeforeMount, ref } from 'vue';
   import { CameraNVRItem } from '../type';
-  import { cameraNVRAddForm } from '../constant';
+  import {
+    cameraNVRAddForm,
+    protocalTypeSelect,
+    serviceTypeSelect,
+    standardTypeSelect,
+  } from '../constant';
   import useSceneInfos from '@/hooks/useSceneInfos';
   import { cloneDeep } from 'lodash-es';
 
@@ -77,15 +193,21 @@
 
   const cameraNVRData = ref<CameraNVRItem>({} as CameraNVRItem);
 
-  const rules = computed(() => {
-    const newRule = {};
-    cameraNVRAddForm.forEach((item) => {
-      if (item.required) {
-        newRule[item.prop] = item.rule;
-      }
-    });
-    return newRule;
-  });
+  const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    nvrIp: [{ required: true, message: '请输入NVR平台地址', trigger: 'blur' }],
+    cameraPort: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
+    cameraType: [{ required: true, message: '请输入协议类型', trigger: 'blur' }],
+    nvrUsername: [{ required: true, message: '请输入NVR平台用户名', trigger: 'blur' }],
+    workspaceCode: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
+    nvrPassword: [{ required: true, message: '请输入NVR平台密码', trigger: 'blur' }],
+    principal: [{ required: false }],
+    code: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
+    remark: [{ required: false }],
+    nvrChannel: [{ required: true, message: '请输入NVR平台通道号', trigger: 'blur' }],
+    videoServiceType: [{ required: true, message: '请输入服务类型', trigger: 'blur' }],
+    videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
+  };
 
   const handleCancel = () => {
     emits('cancel-execute');

src/views/cameras/preview/components/CameraViewSetting/CameraViewSetting.vue

@@ -7,7 +7,7 @@
           <FullscreenExitOutlined role="full" @click="enterFullscreen" />
         </el-icon>
       </el-tooltip>
-
+      <RenderSwitch />
       <FenceToolbar
         :style="{ visibility: drawable ? 'visible' : 'hidden' }"
         @remove="handleRemove"
@@ -73,6 +73,7 @@
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import AlgorithmsSetting from '../AlgorithmsSetting/AlgorithmsSetting.vue';
+  import RenderSwitch from '../RenderSwitch/RenderSwitch.vue';
   import { FullscreenExitOutlined } from '@vicons/antd';
 
   import { ElMessage } from 'element-plus';

src/views/cameras/preview/components/RenderSwitch/RenderSwitch.vue

@@ -0,0 +1,5 @@
+<template>
+  <div style="margin-left: 8px"><div>111</div></div>
+</template>
+<script lang="ts" setup></script>
+<style scoped></style>