feat: 历史回溯-相机添加流媒体添加新增非必填字段“相机IP地址”

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

@@ -1,83 +1,44 @@
 <template>
   <div>
     <div style="margin-bottom: 120px">
-      <el-form
-        ref="IPFormRef"
-        class="ip-form"
-        :inline="true"
-        :model="CameraSRSData"
-        :rules="rules"
-        label-width="114px"
-        label-position="left"
-      >
+      <el-form ref="IPFormRef" class="ip-form" :inline="true" :model="CameraSRSData" :rules="rules" label-width="114px"
+        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="props.formData ? true : false"
-            check-strictly
-            placeholder="请输入场景名称"
-            style="width: 200px"
-            @node-click="handleTreeSelect"
-          />
+          <el-tree-select v-model="CameraSRSData.workspaceCode" :data="scenesTree" :render-after-expand="false"
+            :default-expand-all="props.formData ? true : false" check-strictly placeholder="请输入场景名称"
+            style="width: 200px" @node-click="handleTreeSelect" />
         </el-form-item>
         <el-form-item label="设备ID号：" prop="code">
-          <el-input
-            v-model="CameraSRSData.code"
-            placeholder="自定义ID，不能重复"
-            style="width: 200px"
-          />
+          <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"
-            :disabled="true"
-          />
+          <el-input v-model="CameraSRSData.principal" placeholder="请输入工位负责人" style="width: 200px" :disabled="true" />
         </el-form-item>
         <el-form-item label="rtsp地址：" prop="rtspurl">
-          <el-input
-            v-model="CameraSRSData.rtspurl"
-            placeholder="rtsp://192.168.0.249:557/34020000000_00000000000001"
-            style="width: 685px"
-          />
+          <el-input v-model="CameraSRSData.rtspurl" 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 label="相机IP地址：" prop="cameraIp">
+          <el-input v-model="CameraSRSData.cameraIp" placeholder="请输入IP地址" 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 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 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-item label="备注：" prop="remark">
+          <el-input v-model="CameraSRSData.remark" placeholder="请输入备注" style="width: 200px" />
+        </el-form-item>
       </el-form>
     </div>
     <span class="pop-footer">
@@ -88,99 +49,100 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount, ref } from 'vue';
-  import { CameraSRS } from '../type';
-  import useSceneInfos from '@/hooks/useSceneInfos';
-  import { cloneDeep } from 'lodash-es';
-  import { serviceTypeSelect, standardTypeSelect } from '../constant';
-  import { ElMessage } from 'element-plus';
-
-  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' }],
-    rtspurl: [{ required: true, message: '请输入流媒体地址', trigger: 'blur' }],
-    videoServiceType: [{ required: false }],
-    videoStandard: [{ 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;
-        delete (copyData as any).principal;
-        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;
-  // };
-
-  const handleTreeSelect = (node) => {
-    const space = flattendWorkspaces.value.find((item) => item.code === node.value);
-    CameraSRSData.value.workspaceId = space?.id;
-    CameraSRSData.value.principal = space?.principal;
-    if (node.disabled && node.children.length < 1) {
-      ElMessage.error('请先添加工位');
-    }
-  };
+import { onBeforeMount, ref } from 'vue';
+import { CameraSRS } from '../type';
+import useSceneInfos from '@/hooks/useSceneInfos';
+import { cloneDeep } from 'lodash-es';
+import { serviceTypeSelect, standardTypeSelect } from '../constant';
+import { ElMessage } from 'element-plus';
+
+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' }],
+  rtspurl: [{ required: true, message: '请输入流媒体地址', trigger: 'blur' }],
+  videoServiceType: [{ required: false }],
+  videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
+};
 
-  onBeforeMount(() => {
-    getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
-    if (props.formData) {
-      CameraSRSData.value = props.formData;
+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;
+      delete (copyData as any).principal;
+      emits('confirm-execute', copyData);
     }
   });
-</script>
+};
 
-<style scoped>
-  .ip-form {
-    width: 768px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: space-around;
-  }
+// const handleTreeSelect = (code: string) => {
+//   const space = flattendWorkspaces.value.find((item) => item.code === code);
+//   CameraSRSData.value.workspaceId = space?.id;
+//   CameraSRSData.value.principal = space?.principal;
+// };
 
-  .pop-footer {
-    position: absolute;
-    right: 24px;
-    bottom: 27px;
-    display: flex;
-    justify-content: flex-end;
+const handleTreeSelect = (node) => {
+  const space = flattendWorkspaces.value.find((item) => item.code === node.value);
+  CameraSRSData.value.workspaceId = space?.id;
+  CameraSRSData.value.principal = space?.principal;
+  if (node.disabled && node.children.length < 1) {
+    ElMessage.error('请先添加工位');
   }
+};
 
-  :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;
+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/type.ts

@@ -85,6 +85,8 @@ export interface CameraShareItem {
 }
 
 export interface CameraSRS {
+  /** 相机IP */
+  cameraIp: string;
   name: string;
   /** 相机ID */
   code: string;