Merge branch 'bugFix' into 'master'

相机管理页面i新增NVR添加方式

See merge request tian-group/skyeye-admin-fe!70

.env.development

@@ -17,8 +17,7 @@ VITE_DROP_CONSOLE = true
 #VITE_PROXY=[["/skyeye-admin-api","http://58.144.197.158:19980/skyeye-admin-api"],["/eye_api","http://58.144.197.158:19980/eye_api"],["/push_stream_host","http://58.144.197.158:19980/push_stream_host"],["/skyeye-login","http://58.144.197.158:19980/skyeye-login"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://36.133.176.76:19980/skyeye-admin-api"],["/eye_api","http://36.133.176.76:19980/eye_api"],["/push_stream_host","http://36.133.176.76:19980/push_stream_host"],["/skyeye-login","http://36.133.176.76:19980/skyeye-login"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://172.16.23.144/skyeye-admin-api"],["/eye_api","http://172.16.23.144/eye_api"],["/push_stream_host","http://172.16.23.144/push_stream_host"],["/skyeye-login","http://172.16.23.144/skyeye-login"]]
-VITE_PROXY=[["/skyeye-admin-api","http://192.168.32.47/skyeye-admin-api"],["/eye_api","http://192.168.32.47/eye_api"],["/push_stream_host","http://192.168.32.47/push_stream_host"],["/skyeye-login","http://192.168.32.47/skyeye-login"]]
-
+VITE_PROXY=[["/skyeye-admin-api","http://192.168.32.47/skyeye-admin-api"],["/eye_api","http://192.168.32.47/eye_api"],["/push_stream_host","http:/192.168.32.47/push_stream_host"],["/skyeye-login","http://192.168.32.47/skyeye-login"]]
 # API 接口地址
 VITE_GLOB_API_URL = 
 # 图片上传地址

src/api/camera/camera-overview.ts

@@ -4,6 +4,7 @@ import {
   CameraShowItem,
   CameraRangeItem,
   CameraSRS,
+  CameraNVRItem,
 } from '@/views/cameras/overview/type';
 
 export type PaginationArrayData<T> = {
@@ -25,6 +26,7 @@ export type CameraQueryParams = {
   sceneCode?: string;
   pageNumber?: number;
   pageSize?: number;
+  sourceType?: string;
 };
 
 export enum IsPtz {
@@ -157,3 +159,12 @@ export const addSRSCameraItem = (data: CameraSRS) => {
     data,
   });
 };
+
+/** 添加NVR相机 */
+export const addNVRCameraItem = (data: CameraNVRItem) => {
+  return http.request({
+    url: '/cameraConfig/saveByNVR',
+    method: 'post',
+    data,
+  });
+};

src/views/cameras/overview/CamerasOverview.vue

@@ -39,6 +39,11 @@
     <AddCamera class="add-popover" v-model="showAddPopover" />
     <EditCamera class="add-popover" v-model="showEditPopover" :edit-data="editCameraData" />
     <EditSRSCamera class="add-popover" v-model="showEditSRSPopover" :edit-data="editCameraData!" />
+    <EditNVRCamera
+      class="add-popover"
+      v-model="showEditNVRPopover"
+      :edit-data="editCameraData! as any as CameraNVRItem"
+    />
     <ShareCamera class="add-popover" v-model="addSharedPopover" :share-data="shareCameraData" />
     <EditSharedCamera
       class="add-popover"
@@ -58,6 +63,7 @@
   import ShareCamera from './components/CameraSharePopover.vue';
   import EditCamera from './components/CameraEditPopover.vue';
   import EditSRSCamera from './components/CameraEditSRSPopover.vue';
+  import EditNVRCamera from './components/CameraEditNVRPopover.vue';
   import EditSharedCamera from './components/CameraSharedEdit.vue';
   import emptyImg from '@/assets/images/table/table-empty.png';
   import { Plus } from '@element-plus/icons-vue';
@@ -67,11 +73,12 @@
   import deleteIcon from '@/assets/images/table/table-delete.png';
   import useCameraOverview from './stores/useCameraOverview';
   import { storeToRefs } from 'pinia';
-  import { CameraIPItem, CameraShowItem } from './type';
+  import { CameraIPItem, CameraNVRItem, CameraShowItem } from './type';
   import { deleteCameraItem } from '@/api/camera/camera-overview';
   import { ElMessage, ElMessageBox } from 'element-plus';
   import useCameraShare from './stores/useCameraShare';
   import router from '@/router';
+  import { AddType } from './constant';
 
   const useShare = useCameraShare();
   const { totalRow, queryToTenantId, isAddState, conditionSearch } = useShare;
@@ -95,6 +102,7 @@
 
   const showEditPopover = ref(false);
   const showEditSRSPopover = ref(false);
+  const showEditNVRPopover = ref(false);
   const editCameraData = ref<CameraIPItem | null>();
   const shareCameraData = ref<CameraShowItem | null>();
 
@@ -184,10 +192,12 @@
   };
 
   const handleEdit = (row) => {
-    if (row.rtspurl) {
+    if (row.sourceType === AddType.srs) {
       showEditSRSPopover.value = true;
-    } else {
+    } else if (row.sourceType === AddType.ip) {
       showEditPopover.value = true;
+    } else {
+      showEditNVRPopover.value = true;
     }
     editCameraData.value = row;
   };

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

@@ -1,55 +1,119 @@
 <template>
   <div>
-    <div style="margin-bottom: 120px">
+    <div style="margin-bottom: 60px">
       <el-form
         ref="IPFormRef"
         class="ip-form"
         :inline="true"
         :model="cameraIPData"
         :rules="rules"
-        label-width="84px"
+        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');
@@ -114,6 +183,8 @@
   onBeforeMount(() => {
     getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
     if (props.formData) {
+      console.log('props.formData', props.formData);
+
       cameraIPData.value = props.formData;
     }
   });

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

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <div>
+      <el-form
+        ref="NVRFormRef"
+        class="ip-form"
+        :inline="true"
+        :model="cameraNVRData"
+        :rules="rules"
+        label-width="124px"
+        label-position="left"
+      >
+        <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"
+          :prop="item.prop"
+        >
+          <el-input
+            v-if="item.type === 'input'"
+            v-model="cameraNVRData[item.prop]"
+            :placeholder="item.placeholder"
+            style="width: 200px"
+            :type="item.prop === 'password' ? 'password' : ''"
+            :show-password="item.prop === 'password'"
+            :disabled="item.prop === 'principal'"
+          />
+          <el-select
+            v-if="item.type === 'select'"
+            v-model="cameraNVRData[item.prop]"
+            :placeholder="item.placeholder"
+            style="width: 200px"
+          >
+            <el-option
+              v-for="protocal in item.option"
+              :key="protocal.value"
+              :label="protocal.label"
+              :value="protocal.value"
+            />
+          </el-select>
+          <el-tree-select
+            v-if="item.type === 'tree-select'"
+            v-model="cameraNVRData[item.prop]"
+            :data="scenesTree"
+            :render-after-expand="false"
+            :default-expand-all="true"
+            check-strictly
+            :placeholder="item.placeholder"
+            style="width: 200px"
+            @change="handleTreeSelect"
+          />
+        </el-form-item> -->
+      </el-form>
+    </div>
+    <span class="pop-footer">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onBeforeMount, ref } from 'vue';
+  import { CameraNVRItem } from '../type';
+  import {
+    cameraNVRAddForm,
+    protocalTypeSelect,
+    serviceTypeSelect,
+    standardTypeSelect,
+  } from '../constant';
+  import useSceneInfos from '@/hooks/useSceneInfos';
+  import { cloneDeep } from 'lodash-es';
+
+  const props = defineProps<{ formData?: CameraNVRItem | null }>();
+
+  const emits = defineEmits(['cancel-execute', 'confirm-execute']);
+
+  const sceneInfos = useSceneInfos();
+  const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;
+
+  const NVRFormRef = ref();
+
+  const cameraNVRData = ref<CameraNVRItem>({} as CameraNVRItem);
+
+  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');
+  };
+
+  const handleConfirm = () => {
+    NVRFormRef.value.validate((valid) => {
+      if (valid) {
+        const copyData = cloneDeep(cameraNVRData.value);
+        console.log();
+
+        copyData.workspaceId = flattendWorkspaces.value.find(
+          (item) => item.code === cameraNVRData.value.workspaceCode,
+        ).id;
+        delete (copyData as any).workspaceCode;
+        delete (copyData as any).principal;
+        emits('confirm-execute', copyData);
+      }
+    });
+  };
+
+  const handleTreeSelect = (code: string) => {
+    const space = flattendWorkspaces.value.find((item) => item.code === code);
+    cameraNVRData.value.workspaceId = space?.id;
+    cameraNVRData.value.principal = space?.principal;
+  };
+
+  onBeforeMount(() => {
+    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
+    if (props.formData) {
+      cameraNVRData.value = props.formData;
+    }
+  });
+</script>
+
+<style scoped>
+  .ip-form {
+    width: 768px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-around;
+  }
+
+  .pop-footer {
+    position: absolute;
+    right: 24px;
+    bottom: 27px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :deep(.el-form-item__label) {
+    font-size: 14px;
+    color: #363636;
+    padding: 0;
+  }
+  :deep(.el-form--inline .el-form-item) {
+    display: flex;
+    margin-right: 0;
+    margin-bottom: 28px;
+  }
+</style>

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

@@ -7,7 +7,7 @@
         :inline="true"
         :model="CameraSRSData"
         :rules="rules"
-        label-width="84px"
+        label-width="114px"
         label-position="left"
       >
         <el-form-item label="名称：" prop="name">
@@ -50,6 +50,34 @@
         <el-form-item label="备注：" prop="remark">
           <el-input v-model="CameraSRSData.remark" placeholder="请输入备注" style="width: 200px" />
         </el-form-item>
+        <el-form-item label="服务类型：" prop="videoServiceType">
+          <el-select
+            v-model="CameraSRSData.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="CameraSRSData.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">
@@ -64,6 +92,7 @@
   import { CameraSRS } from '../type';
   import useSceneInfos from '@/hooks/useSceneInfos';
   import { cloneDeep } from 'lodash-es';
+  import { serviceTypeSelect, standardTypeSelect } from '../constant';
 
   const props = defineProps<{ formData?: CameraSRS | null }>();
 

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

@@ -23,6 +23,11 @@
         @cancel-execute="updateValue(false)"
         @confirm-execute="onAddCamera"
       />
+      <NVRAddCamera
+        v-if="addType === 'nvr'"
+        @cancel-execute="updateValue(false)"
+        @confirm-execute="onAddNVRCamera"
+      />
       <SRSAddCamera
         v-if="addType === 'srs'"
         @cancel-execute="updateValue(false)"
@@ -40,6 +45,7 @@
   import IPAddCamera from './AddCameraByIP.vue';
   import SRSAddCamera from './AddCameraBySRS.vue';
   import RangeAddCamera from './AddCameraByRange.vue';
+  import NVRAddCamera from './AddCameraByNVR.vue';
   import useCameraOverview from '../stores/useCameraOverview';
 
   const props = defineProps<{ modelValue: boolean }>();
@@ -47,7 +53,7 @@
   const emits = defineEmits(['update:modelValue']);
 
   const cameraOverview = useCameraOverview();
-  const { addCamera, addSRSCamera } = cameraOverview;
+  const { addCamera, addNVRCamera, addSRSCamera } = cameraOverview;
 
   const addType = ref(cameraAddType[0].value);
 
@@ -62,6 +68,12 @@
     });
   };
 
+  const onAddNVRCamera = (data) => {
+    addNVRCamera(data).then(() => {
+      updateValue(false);
+    });
+  };
+
   const onAddSRSCamera = (data) => {
     addSRSCamera(data).then(() => {
       updateValue(false);

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

@@ -0,0 +1,82 @@
+<template>
+  <el-card v-if="props.modelValue" class="pop-card">
+    <template #header>
+      <div class="flex justify-between items-center pop-head">
+        <span class="pop-head-name">编辑相机</span>
+        <el-icon :size="16" class="mr-3" @click="updateValue(false)"><Close /></el-icon>
+      </div>
+    </template>
+    <div class="pop-content flex justify-center items-center">
+      <NVRAddCamera
+        :form-data="props.editData"
+        @cancel-execute="updateValue(false)"
+        @confirm-execute="onEditCamera"
+      />
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+  import { Close } from '@element-plus/icons-vue';
+  import NVRAddCamera from './AddCameraByNVR.vue';
+  import { CameraNVRItem } from '../type';
+  import useCameraOverview from '../stores/useCameraOverview';
+  import { cloneDeep } from 'lodash-es';
+
+  const props = defineProps<{
+    modelValue: boolean;
+    editData?: CameraNVRItem | null;
+    confirmEvent?: (data) => any;
+  }>();
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const cameraOverview = useCameraOverview();
+  const { editCamera } = cameraOverview;
+
+  const updateValue = (value) => {
+    emits('update:modelValue', value);
+  };
+
+  const onEditCamera = (data) => {
+    const temp = cloneDeep(data) as any;
+    delete temp.workshopName;
+    delete temp.workspaceName;
+    delete temp.principal;
+    editCamera(temp);
+    props.confirmEvent && props.confirmEvent(data);
+    updateValue(false);
+  };
+</script>
+
+<style scoped lang="scss">
+  .pop-card {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .pop-head {
+    height: 56px;
+
+    &-name {
+      margin-left: 24px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #252525;
+    }
+  }
+
+  .pop-content {
+    height: 566px;
+  }
+
+  :deep(.el-card__header) {
+    padding: 0;
+  }
+  :deep(.el-card__body) {
+    padding: 0;
+  }
+</style>

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

@@ -19,13 +19,13 @@
         />
       </div>
       <div>
-        <span>协议类型：</span>
-        <el-select v-model="queryCameraType" placeholder="请选择协议类型" class="protocal-select">
+        <span>添加方式：</span>
+        <el-select v-model="querySourceType" placeholder="请选择添加方式" class="protocal-select">
           <el-option
-            v-for="item in protocalTypeSelect"
+            v-for="item in cameraAddType"
             :key="item.value"
             :label="item.label"
-            :value="item.value"
+            :value="AddType[item.value]"
           />
         </el-select>
       </div>
@@ -51,7 +51,7 @@
 
 <script setup lang="ts">
   import { onMounted } from 'vue';
-  import { queryTypeSelect, protocalTypeSelect } from '../constant';
+  import { queryTypeSelect, cameraAddType, AddType } from '../constant';
   import useCameraOverview from '../stores/useCameraOverview';
   import useSceneInfos from '@/hooks/useSceneInfos';
   import { storeToRefs } from 'pinia';
@@ -60,7 +60,7 @@
   const { scenesTree, getScenesTree } = sceneInfos;
 
   const cameraOverview = useCameraOverview();
-  const { queryType, queryTypeContent, queryCameraType, queryWorkSpace } =
+  const { queryType, queryTypeContent, querySourceType, queryWorkSpace } =
     storeToRefs(cameraOverview);
   const { getCameraItems } = cameraOverview;
 
@@ -68,7 +68,7 @@
   const resetSearch = () => {
     queryType.value = '';
     queryTypeContent.value = '';
-    queryCameraType.value = '';
+    querySourceType.value = '';
     queryWorkSpace.value = '';
   };
 

src/views/cameras/overview/constant.ts

@@ -3,6 +3,7 @@ import { h } from 'vue';
 import connectedIcon from '@/assets/images/table/camera-netConnect.png';
 import unConnectedIcon from '@/assets/images/table/camera-netUnconnect.png';
 import { ElTag } from 'element-plus';
+import { VideoServiceType, VideoStandardType } from './type';
 
 export const queryTypeSelect = [
   {
@@ -39,6 +40,10 @@ export const cameraAddType = [
     value: 'ip',
     label: 'IP/域名',
   },
+  {
+    value: 'nvr',
+    label: 'NVR平台添加',
+  },
   {
     value: 'srs',
     label: '流媒体地址',
@@ -49,100 +54,50 @@ export const cameraAddType = [
   // },
 ];
 
-type CameraAddFormItem = {
-  label: string;
-  prop: string;
-  placeholder: string;
-  type: 'input' | 'select' | 'tree-select';
-  option?: { value: any; label: any }[];
-  required: boolean;
-  rule?: any[];
-  labelWidth?: string;
-  disabled?: boolean;
-};
+export enum AddType {
+  ip = 'IP地址/域名',
+  nvr = 'NVR平台添加',
+  srs = '流媒体地址',
+}
 
-export const cameraIPAddForm: CameraAddFormItem[] = [
-  {
-    label: '名称：',
-    prop: 'name',
-    placeholder: '请输入名称',
-    type: 'input',
-    required: true,
-    rule: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-  },
-  {
-    label: 'IP地址：',
-    prop: 'cameraIp',
-    placeholder: '请输入IP地址',
-    type: 'input',
-    required: true,
-    rule: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
-  },
-  {
-    label: '端口：',
-    prop: 'cameraPort',
-    placeholder: '请输入端口号',
-    type: 'input',
-    required: true,
-    rule: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
-  },
-  {
-    label: '协议类型：',
-    prop: 'cameraType',
-    placeholder: '请输入协议类型',
-    type: 'select',
-    required: true,
-    option: protocalTypeSelect,
-    rule: [{ required: true, message: '请输入协议类型', trigger: 'blur' }],
-  },
+export const serviceTypeSelect = [
   {
-    label: '用户名：',
-    prop: 'username',
-    placeholder: '请输入用户名',
-    type: 'input',
-    required: true,
-    rule: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+    value: VideoServiceType.UDP,
+    label: 'UDP',
   },
   {
-    label: '场景：',
-    prop: 'workspaceCode',
-    placeholder: '请输入场景名称',
-    type: 'tree-select',
-    required: true,
-    rule: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
+    value: VideoServiceType.TCP,
+    label: 'TCP',
   },
   {
-    label: '密码：',
-    prop: 'password',
-    placeholder: '请输入用户名密码',
-    type: 'input',
-    required: true,
-    rule: [{ required: true, message: '请输入用户名密码', trigger: 'blur' }],
-  },
-  {
-    label: '工位负责人：',
-    prop: 'principal',
-    placeholder: '请输入工位负责人',
-    type: 'input',
-    required: false,
+    value: VideoServiceType.AUTO,
+    label: '自动',
   },
+];
+
+export const standardTypeSelect = [
   {
-    label: '设备ID号：',
-    prop: 'code',
-    placeholder: '自定义ID，不能重复',
-    type: 'input',
-    required: true,
-    rule: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
+    value: VideoStandardType.H264,
+    label: 'H264',
   },
   {
-    label: '备注：',
-    prop: 'remark',
-    placeholder: '请输入备注',
-    type: 'input',
-    required: false,
+    value: VideoStandardType.H265,
+    label: 'H265',
   },
 ];
 
+type CameraAddFormItem = {
+  label: string;
+  prop: string;
+  placeholder: string;
+  type: 'input' | 'select' | 'tree-select';
+  option?: { value: any; label: any }[];
+  required: boolean;
+  rule?: any[];
+  labelWidth?: string;
+  disabled?: boolean;
+};
+
 export const cameraRangeAddForm: CameraAddFormItem[] = [
   {
     label: '启用IP地址：',

src/views/cameras/overview/overviewColumns.ts

@@ -28,35 +28,40 @@ export const columns: BasicColumn[] = [
     minWidth: 100,
   },
   {
-    label: 'IP地址',
-    prop: 'cameraIp',
-    minWidth: 140,
-  },
-  {
-    label: '协议类型',
-    prop: 'cameraType',
-    minWidth: 120,
-    render(record) {
-      return h(
-        'span',
-        {},
-        {
-          default: () =>
-            protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label,
-        },
-      );
-    },
-  },
-  {
-    label: '端口地址',
-    prop: 'cameraPort',
-    minWidth: 120,
-  },
-  {
-    label: 'MAC地址',
-    prop: 'cameraMac',
+    label: '添加方式',
+    prop: 'sourceType',
     minWidth: 140,
   },
+  // {
+  //   label: 'IP地址',
+  //   prop: 'cameraIp',
+  //   minWidth: 140,
+  // },
+  // {
+  //   label: '协议类型',
+  //   prop: 'cameraType',
+  //   minWidth: 120,
+  //   render(record) {
+  //     return h(
+  //       'span',
+  //       {},
+  //       {
+  //         default: () =>
+  //           protocalTypeSelect.find((item) => item.value === record.row.cameraType)?.label,
+  //       },
+  //     );
+  //   },
+  // },
+  // {
+  //   label: '端口地址',
+  //   prop: 'cameraPort',
+  //   minWidth: 120,
+  // },
+  // {
+  //   label: 'MAC地址',
+  //   prop: 'cameraMac',
+  //   minWidth: 140,
+  // },
   {
     label: '设备ID',
     prop: 'code',

src/views/cameras/overview/stores/useCameraOverview.ts

@@ -7,8 +7,9 @@ import {
   updateCameraItem,
   getCameraState,
   addSRSCameraItem,
+  addNVRCameraItem,
 } from '@/api/camera/camera-overview';
-import { CameraIPItem, CameraSRS, CameraShowItem } from '../type';
+import { CameraIPItem, CameraNVRItem, CameraSRS, CameraShowItem } from '../type';
 import { useRequest } from 'vue-hooks-plus';
 
 export const useCameraOverview = defineStore('camera-overview', () => {
@@ -16,6 +17,7 @@ export const useCameraOverview = defineStore('camera-overview', () => {
   const queryTypeContent = ref('');
   const queryCameraType = ref('');
   const queryWorkSpace = ref('');
+  const querySourceType = ref('');
   const total = ref(0);
   const page = ref(1);
   const size = ref(10);
@@ -47,6 +49,10 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     if (queryWorkSpace.value) {
       params.sceneCode = queryWorkSpace.value;
     }
+    if (querySourceType.value) {
+      console.log('queryCameraType.value', querySourceType.value);
+      params.sourceType = querySourceType.value;
+    }
     return getCameraList(params).then((res) => {
       return res;
     });
@@ -74,6 +80,12 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     });
   };
 
+  const addNVRCamera = (data: CameraNVRItem) => {
+    return addNVRCameraItem(data).then(() => {
+      getCameraItems();
+    });
+  };
+
   const editCamera = (data: Partial<CameraShowItem>) => {
     return updateCameraItem(data).then(() => {
       getCameraItems();
@@ -119,6 +131,7 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     queryType,
     queryTypeContent,
     queryCameraType,
+    querySourceType,
     queryWorkSpace,
     cameraItems,
     loading,
@@ -132,6 +145,7 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     closeInterval,
     getState,
     addSRSCamera,
+    addNVRCamera,
     reset,
   };
 });

src/views/cameras/overview/type.ts

@@ -26,6 +26,10 @@ export interface CameraIPItem {
   /** 推流地址 */
   pushstreamIp: string;
   rtspurl: string;
+  //服务类型
+  videoServiceType: VideoServiceType;
+  //视频编码类型
+  videoStandard: VideoStandardType;
 }
 
 export interface CameraShowItem extends CameraIPItem {
@@ -41,6 +45,8 @@ export interface CameraShowItem extends CameraIPItem {
   status: number;
   /** 工位code */
   workspaceCode: string;
+  //添加方式
+  sourceType: string;
 }
 
 export interface CameraRangeItem {
@@ -58,12 +64,6 @@ export interface CameraRangeItem {
   password: string;
 }
 
-// interface CompanyShareItem {
-//   name: string; //企业名字
-//   account: number; //企业账号
-//   networkingState?: number; //摄像机状态
-// }
-
 export interface CameraShareItem {
   /** 企业账号 */
   tenantCode: string | undefined;
@@ -98,4 +98,49 @@ export interface CameraSRS {
   principal?: string;
   /** 描述 */
   remark?: string;
+  //服务类型
+  videoServiceType: VideoServiceType;
+  //视频编码类型
+  videoStandard: VideoStandardType;
+}
+
+export enum VideoServiceType {
+  UDP = 'UDP',
+  TCP = 'TCP',
+  AUTO = 'AUTO',
+}
+
+export enum VideoStandardType {
+  H264 = 'H264',
+  H265 = 'H265',
+}
+
+export interface CameraNVRItem {
+  //名称
+  name: string;
+  //ip地址
+  nvrIp: string;
+  //端口
+  cameraPort: string;
+  //协议类型
+  cameraType: string;
+  //nvr平台用户名
+  nvrUsername: string;
+  //场景
+  workspaceCode: string;
+  workspaceId: string;
+  //nvr平台密码
+  nvrPassword: string;
+  //工位负责人
+  principal?: string;
+  //设备id号
+  code: string;
+  //备注
+  remark?: string;
+  //nvr平台通道号
+  nvrChannel: string;
+  //服务类型
+  videoServiceType: VideoServiceType;
+  //视频编码类型
+  videoStandard: VideoStandardType;
 }

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>