|
|
@@ -1,39 +1,91 @@
|
|
|
<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">
|
|
|
+ <div>
|
|
|
+ <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-form-item label="设备ID:" prop="code">
|
|
|
+ <el-input
|
|
|
+ v-model="CameraSRSData.code"
|
|
|
+ placeholder="自定义ID,不能重复"
|
|
|
+ style="width: 200px"
|
|
|
+ />
|
|
|
</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" :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-form-item label="rtsp地址:" prop="rtspUrl">
|
|
|
+ <el-input
|
|
|
+ v-model="CameraSRSData.rtspUrl"
|
|
|
+ placeholder="rtsp://192.168.0.249:557/34020000000_00000000000001"
|
|
|
+ style="width: 655px"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="相机IP地址:" prop="cameraIp">
|
|
|
- <el-input v-model="CameraSRSData.cameraIp" placeholder="请输入IP地址" style="width: 200px" />
|
|
|
+ <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="sceneTemplateList" style="width: 766px">
|
|
|
+ <sysConfigItemOfAddCamera
|
|
|
+ :origin-scene-checked-list="CameraSRSData.sceneTemplateList"
|
|
|
+ @update:scene-checked-list="handleUpdateSceneTemplateList"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属工位:" prop="workspaceId">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="CameraSRSData.workspaceId"
|
|
|
+ :data="workspaceInfo"
|
|
|
+ :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="工位负责人:" prop="principal">
|
|
|
+ <el-input
|
|
|
+ v-model="CameraSRSData.principal"
|
|
|
+ placeholder="请选择工位,该项自动填充"
|
|
|
+ style="width: 200px"
|
|
|
+ :disabled="true"
|
|
|
+ />
|
|
|
+ </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">
|
|
|
@@ -49,100 +101,97 @@
|
|
|
</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');
|
|
|
-};
|
|
|
+ import { onBeforeMount, ref } from 'vue';
|
|
|
+ import { CameraSRS } from '@/types/camera/type';
|
|
|
+ import { cloneDeep } from 'lodash-es';
|
|
|
+ import { serviceTypeSelect, standardTypeSelect } from '../../../../types/camera/constant';
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
+ import useTreeWorkspaceInfo from '../hooks/useTreeWorkspaceInfo';
|
|
|
+ import sysConfigItemOfAddCamera from './sysConfigItemOfAddCamera.vue';
|
|
|
+
|
|
|
+ const props = defineProps<{ formData?: CameraSRS | null }>();
|
|
|
+ const emits = defineEmits(['cancel-execute', 'confirm-execute']);
|
|
|
+
|
|
|
+ const treeWorkspaceInfo = useTreeWorkspaceInfo();
|
|
|
+ const { workspaceInfo, getWorkspaceFromTreeInfo } = treeWorkspaceInfo;
|
|
|
+
|
|
|
+ const IPFormRef = ref();
|
|
|
+ const CameraSRSData = ref<CameraSRS>({} as CameraSRS);
|
|
|
+
|
|
|
+ const rules = {
|
|
|
+ name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
|
+ code: [{ required: true, message: '请输入设备ID', trigger: 'blur' }],
|
|
|
+ rtspUrl: [{ required: true, message: '请输入流媒体地址', trigger: 'blur' }],
|
|
|
+ sceneTemplateList: [{ required: true, message: '请选择至少一个业务场景', trigger: 'blur' }],
|
|
|
+ workspaceId: [{ required: true, message: '请选择工位', trigger: 'blur' }],
|
|
|
+ videoStandard: [{ required: true, message: '请选择视频编码标准', trigger: 'blur' }],
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleUpdateSceneTemplateList = (data) => {
|
|
|
+ console.log('接收到的信息', data);
|
|
|
+ CameraSRSData.value.sceneTemplateList = data;
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleCancel = () => {
|
|
|
+ emits('cancel-execute');
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleConfirm = () => {
|
|
|
+ IPFormRef.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const copyData = cloneDeep(CameraSRSData.value);
|
|
|
+ delete (copyData as any).principal;
|
|
|
+ copyData.sourceType = 'RTSP';
|
|
|
+ emits('confirm-execute', copyData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleTreeSelect = (node) => {
|
|
|
+ console.log('点击选择车间', node);
|
|
|
+ CameraSRSData.value.workspaceId = node.value;
|
|
|
+ CameraSRSData.value.principal = node.principalName;
|
|
|
+ CameraSRSData.value.workshopId = node.workshopId;
|
|
|
+ if (node.disabled && node.children.length < 1) {
|
|
|
+ ElMessage.error('请先添加工位');
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
-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);
|
|
|
+ onBeforeMount(() => {
|
|
|
+ getWorkspaceFromTreeInfo();
|
|
|
+ if (props.formData) {
|
|
|
+ console.log('props.formData', props.formData);
|
|
|
+ CameraSRSData.value = props.formData;
|
|
|
}
|
|
|
});
|
|
|
-};
|
|
|
-
|
|
|
-// 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('请先添加工位');
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-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;
|
|
|
-}
|
|
|
+ .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;
|
|
|
-}
|
|
|
+ .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-item__label) {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #363636;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
|
|
|
-:deep(.el-form--inline .el-form-item) {
|
|
|
- display: flex;
|
|
|
- margin-right: 0;
|
|
|
- margin-bottom: 28px;
|
|
|
-}
|
|
|
+ :deep(.el-form--inline .el-form-item) {
|
|
|
+ display: flex;
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 28px;
|
|
|
+ }
|
|
|
</style>
|