fix: ip添加做表单校验+srs添加UI完成

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

@@ -2,6 +2,7 @@
   <div>
     <div style="margin-bottom: 120px">
       <el-form
+        ref="IPFormRef"
         class="ip-form"
         :inline="true"
         :model="cameraIPData"
@@ -22,7 +23,7 @@
             style="width: 200px"
             :type="item.prop === 'password' ? 'password' : ''"
             :show-password="item.prop === 'password'"
-            :disabled="item.prop === 'principal' && props.formData !== undefined"
+            :disabled="item.prop === 'principal'"
           />
           <el-select
             v-if="item.type === 'select'"
@@ -72,6 +73,8 @@
   const sceneInfos = useSceneInfos();
   const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;
 
+  const IPFormRef = ref();
+
   const cameraIPData = ref<CameraIPItem>({} as CameraIPItem);
 
   const rules = computed(() => {
@@ -89,16 +92,22 @@
   };
 
   const handleConfirm = () => {
-    const copyData = cloneDeep(cameraIPData.value);
-    copyData.workspaceId = flattendWorkspaces.value.find(
-      (item) => item.code === cameraIPData.value.workspaceCode,
-    ).id;
-    delete (copyData as any).workspaceCode;
-    emits('confirm-execute', copyData);
+    IPFormRef.value.validate((valid) => {
+      if (valid) {
+        const copyData = cloneDeep(cameraIPData.value);
+        copyData.workspaceId = flattendWorkspaces.value.find(
+          (item) => item.code === cameraIPData.value.workspaceCode,
+        ).id;
+        delete (copyData as any).workspaceCode;
+        emits('confirm-execute', copyData);
+      }
+    });
   };
 
   const handleTreeSelect = (code: string) => {
-    cameraIPData.value.workspaceId = flattendWorkspaces.value.find((item) => item.code === code).id;
+    const space = flattendWorkspaces.value.find((item) => item.code === code);
+    cameraIPData.value.workspaceId = space?.id;
+    cameraIPData.value.principal = space?.principal;
   };
 
   onBeforeMount(() => {

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

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div style="margin-bottom: 120px">
+      <el-form
+        ref="IPFormRef"
+        class="ip-form"
+        :inline="true"
+        :model="CameraSRSData"
+        :rules="rules"
+        label-width="84px"
+        label-position="left"
+      >
+        <el-form-item label="名称：" prop="name">
+          <el-input v-model="CameraSRSData.name" placeholder="请输入名称" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="场景：" prop="workspaceCode">
+          <el-tree-select
+            v-model="CameraSRSData.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="设备ID号：" prop="code">
+          <el-input
+            v-model="CameraSRSData.code"
+            placeholder="自定义ID，不能重复"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="工位负责人：" prop="principal">
+          <el-input
+            v-model="CameraSRSData.principal"
+            placeholder="请输入工位负责人"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="rsp地址：" prop="srsStream">
+          <el-input
+            v-model="CameraSRSData.srsStream"
+            placeholder="rtsp://192.168.0.249:557/34020000000_00000000000001"
+            style="width: 685px"
+          />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input v-model="CameraSRSData.remark" placeholder="请输入备注" style="width: 200px" />
+        </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 { CameraSRS } from '../type';
+  import { cameraIPAddForm } from '../constant';
+  import useSceneInfos from '@/hooks/useSceneInfos';
+  import { cloneDeep } from 'lodash-es';
+
+  const props = defineProps<{ formData?: CameraSRS | null }>();
+
+  const emits = defineEmits(['cancel-execute', 'confirm-execute']);
+
+  const sceneInfos = useSceneInfos();
+  const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;
+
+  const IPFormRef = ref();
+
+  const CameraSRSData = ref<CameraSRS>({} as CameraSRS);
+
+  const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    workspaceCode: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
+    code: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
+    srsStream: [{ required: true, message: '请输入流媒体地址', trigger: 'blur' }],
+  };
+
+  const handleCancel = () => {
+    emits('cancel-execute');
+  };
+
+  const handleConfirm = () => {
+    IPFormRef.value.validate((valid) => {
+      if (valid) {
+        const copyData = cloneDeep(CameraSRSData.value);
+        copyData.workspaceId = flattendWorkspaces.value.find(
+          (item) => item.code === CameraSRSData.value.workspaceCode,
+        ).id;
+        delete (copyData as any).workspaceCode;
+        emits('confirm-execute', copyData);
+      }
+    });
+  };
+
+  const handleTreeSelect = (code: string) => {
+    const space = flattendWorkspaces.value.find((item) => item.code === code);
+    CameraSRSData.value.workspaceId = space?.id;
+    CameraSRSData.value.principal = space?.principal;
+  };
+
+  onBeforeMount(() => {
+    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
+    if (props.formData) {
+      CameraSRSData.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/CameraAddPopover.vue

@@ -23,6 +23,11 @@
         @cancel-execute="updateValue(false)"
         @confirm-execute="onAddCamera"
       />
+      <SRSAddCamera
+        v-if="addType === 'srs'"
+        @cancel-execute="updateValue(false)"
+        @confirm-execute="onAddCamera"
+      />
       <RangeAddCamera v-if="addType === 'ipRange'" @cancel-execute="updateValue(false)" />
     </div>
   </el-card>
@@ -33,6 +38,7 @@
   import { cameraAddType } from '../constant';
   import { Close } from '@element-plus/icons-vue';
   import IPAddCamera from './AddCameraByIP.vue';
+  import SRSAddCamera from './AddCameraBySRS.vue';
   import RangeAddCamera from './AddCameraByRange.vue';
   import useCameraOverview from '../stores/useCameraOverview';
 

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

@@ -15,6 +15,7 @@
           v-model="queryTypeContent"
           clearable
           placeholder="请输入查找内容"
+          :disabled="queryType"
         />
       </div>
       <div>

src/views/cameras/overview/constant.ts

@@ -40,9 +40,13 @@ export const cameraAddType = [
     label: 'IP/域名',
   },
   {
-    value: 'ipRange',
-    label: 'IP段',
+    value: 'srs',
+    label: '流媒体地址',
   },
+  // {
+  //   value: 'ipRange',
+  //   label: 'IP段',
+  // },
 ];
 
 type CameraAddFormItem = {

src/views/cameras/overview/type.ts

@@ -82,3 +82,19 @@ export interface CameraShareItem {
   //分享的结束时间
   endTime: string;
 }
+
+export interface CameraSRS {
+  name: string;
+  /** 相机ID */
+  code: string;
+  /** 工位场景Id */
+  workspaceId: string;
+  /** 相机工位code */
+  workspaceCode?: string;
+  /** 流媒体地址 */
+  srsStream: string;
+  /** 工位负责人 */
+  principal?: string;
+  /** 描述 */
+  remark?: string;
+}

src/views/map-config/mini-map/MapBase/KonvaMap.vue

@@ -337,15 +337,15 @@
             transformerNode.nodes([]);
           })
           .catch(() => {});
-      }
-
-      const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
-      index >= 0 && cameras.value.splice(index, 1);
-      lastClickedGroupId.value = '';
+      } else {
+        const index = cameras.value.findIndex((item) => item.id === lastClickedGroupId.value);
+        index >= 0 && cameras.value.splice(index, 1);
+        lastClickedGroupId.value = '';
 
-      //取消transformer
-      const transformerNode = transformer.value.getNode();
-      transformerNode.nodes([]);
+        //取消transformer
+        const transformerNode = transformer.value.getNode();
+        transformerNode.nodes([]);
+      }
     }
   };