|
@@ -10,97 +10,85 @@
|
|
|
label-width="124px"
|
|
label-width="124px"
|
|
|
label-position="left"
|
|
label-position="left"
|
|
|
>
|
|
>
|
|
|
|
|
+ <el-form-item label="NVR设备:" prop="nvrId" style="width: 766px">
|
|
|
|
|
+ <el-select v-model="cameraNVRData.nvrId" placeholder="请选择NVR设备" style="width: 200px">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in nvrDevice"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ :label="item.label"
|
|
|
|
|
+ :value="item.id"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-icon><InfoFilled /></el-icon>
|
|
|
|
|
+ 选择已添加在【NVR设备管理】中的设备编号
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="名称:" prop="name">
|
|
<el-form-item label="名称:" prop="name">
|
|
|
<el-input v-model="cameraNVRData.name" placeholder="请输入名称" style="width: 200px" />
|
|
<el-input v-model="cameraNVRData.name" placeholder="请输入名称" style="width: 200px" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="NVR平台IP地址:" prop="nvrIp">
|
|
|
|
|
|
|
+ <el-form-item label="设备ID:" prop="code">
|
|
|
<el-input
|
|
<el-input
|
|
|
- v-model="cameraNVRData.nvrIp"
|
|
|
|
|
- placeholder="请输入NVR平台地址"
|
|
|
|
|
|
|
+ v-model="cameraNVRData.code"
|
|
|
|
|
+ placeholder="自定义ID,不能重复"
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="端口:" prop="cameraPort">
|
|
|
|
|
|
|
+ <el-form-item label="NVR平台通道号:" prop="nvrChannel">
|
|
|
<el-input
|
|
<el-input
|
|
|
- v-model="cameraNVRData.cameraPort"
|
|
|
|
|
- placeholder="请输入端口号"
|
|
|
|
|
|
|
+ v-model="cameraNVRData.nvrChannel"
|
|
|
|
|
+ placeholder="请输入NVR平台通道号"
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="协议类型:" prop="cameraType">
|
|
|
|
|
|
|
+ <el-form-item label="服务类型:" prop="videoServiceType">
|
|
|
<el-select
|
|
<el-select
|
|
|
- v-model="cameraNVRData.cameraType"
|
|
|
|
|
- placeholder="请输入协议类型"
|
|
|
|
|
|
|
+ v-model="cameraNVRData.videoServiceType"
|
|
|
|
|
+ placeholder="请选择服务类型"
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
>
|
|
>
|
|
|
<el-option
|
|
<el-option
|
|
|
- v-for="protocal in protocalTypeSelect"
|
|
|
|
|
|
|
+ v-for="protocal in serviceTypeSelect"
|
|
|
:key="protocal.value"
|
|
:key="protocal.value"
|
|
|
:label="protocal.label"
|
|
:label="protocal.label"
|
|
|
:value="protocal.value"
|
|
:value="protocal.value"
|
|
|
/>
|
|
/>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="NVR平台用户名:" prop="nvrUsername">
|
|
|
|
|
- <el-input
|
|
|
|
|
- v-model="cameraNVRData.nvrUsername"
|
|
|
|
|
- placeholder="请输入NVR平台用户名"
|
|
|
|
|
- style="width: 200px"
|
|
|
|
|
|
|
+ <el-form-item label="业务场景:" prop="sceneTemplateList" style="width: 766px">
|
|
|
|
|
+ <sysConfigItemOfAddCamera
|
|
|
|
|
+ :origin-scene-checked-list="cameraNVRData.sceneTemplateList"
|
|
|
|
|
+ @update:scene-checked-list="handleUpdateSceneTemplateList"
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
- <el-form-item label="场景:" prop="workspaceCode">
|
|
|
|
|
|
|
+ <el-form-item label="所属工位:" prop="workspaceId">
|
|
|
<el-tree-select
|
|
<el-tree-select
|
|
|
- v-model="cameraNVRData.workspaceCode"
|
|
|
|
|
- :data="scenesTree"
|
|
|
|
|
|
|
+ v-model="cameraNVRData.workspaceId"
|
|
|
|
|
+ :data="workspaceInfo"
|
|
|
:render-after-expand="false"
|
|
:render-after-expand="false"
|
|
|
:default-expand-all="props.formData ? true : false"
|
|
:default-expand-all="props.formData ? true : false"
|
|
|
check-strictly
|
|
check-strictly
|
|
|
- placeholder="请输入场景名称"
|
|
|
|
|
|
|
+ placeholder="请选择工位"
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
@node-click="handleTreeSelect"
|
|
@node-click="handleTreeSelect"
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</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-form-item label="工位负责人:" prop="principal">
|
|
|
<el-input
|
|
<el-input
|
|
|
v-model="cameraNVRData.principal"
|
|
v-model="cameraNVRData.principal"
|
|
|
- placeholder="请输入工位负责人"
|
|
|
|
|
|
|
+ placeholder="请选择工位,该项自动填充"
|
|
|
disabled
|
|
disabled
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</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-form-item label="协议类型:" prop="cameraType">
|
|
|
<el-select
|
|
<el-select
|
|
|
- v-model="cameraNVRData.videoServiceType"
|
|
|
|
|
- placeholder="请输入服务类型"
|
|
|
|
|
|
|
+ v-model="cameraNVRData.cameraType"
|
|
|
|
|
+ placeholder="请选择协议类型"
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
>
|
|
>
|
|
|
<el-option
|
|
<el-option
|
|
|
- v-for="protocal in serviceTypeSelect"
|
|
|
|
|
|
|
+ v-for="protocal in protocalTypeSelect"
|
|
|
:key="protocal.value"
|
|
:key="protocal.value"
|
|
|
:label="protocal.label"
|
|
:label="protocal.label"
|
|
|
:value="protocal.value"
|
|
:value="protocal.value"
|
|
@@ -110,7 +98,7 @@
|
|
|
<el-form-item label="视频编码标准:" prop="videoStandard">
|
|
<el-form-item label="视频编码标准:" prop="videoStandard">
|
|
|
<el-select
|
|
<el-select
|
|
|
v-model="cameraNVRData.videoStandard"
|
|
v-model="cameraNVRData.videoStandard"
|
|
|
- placeholder="请输入视频编码标准"
|
|
|
|
|
|
|
+ placeholder="请选择视频编码标准"
|
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
|
>
|
|
>
|
|
|
<el-option
|
|
<el-option
|
|
@@ -121,6 +109,9 @@
|
|
|
/>
|
|
/>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
+ <el-form-item label="备注:" prop="remark">
|
|
|
|
|
+ <el-input v-model="cameraNVRData.remark" placeholder="请输入备注" style="width: 200px" />
|
|
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
</div>
|
|
</div>
|
|
|
<span class="pop-footer">
|
|
<span class="pop-footer">
|
|
@@ -132,37 +123,45 @@
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { onBeforeMount, ref } from 'vue';
|
|
|
- import { CameraNVRItem } from '../type';
|
|
|
|
|
- import { protocalTypeSelect, serviceTypeSelect, standardTypeSelect } from '../constant';
|
|
|
|
|
- import useSceneInfos from '@/hooks/useSceneInfos';
|
|
|
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
- import { ElMessage } from 'element-plus';
|
|
|
|
|
|
|
+ import { ElMessage, ElIcon } from 'element-plus';
|
|
|
|
|
+ import { InfoFilled } from '@element-plus/icons-vue';
|
|
|
|
|
+ import { CameraNVRItem } from '@/types/camera/type';
|
|
|
|
|
+ import {
|
|
|
|
|
+ protocalTypeSelect,
|
|
|
|
|
+ serviceTypeSelect,
|
|
|
|
|
+ standardTypeSelect,
|
|
|
|
|
+ } from '@/types/camera/constant';
|
|
|
|
|
+ import useNvrDevice from '../hooks/useNvrDevice';
|
|
|
|
|
+ import useTreeWorkspaceInfo from '../hooks/useTreeWorkspaceInfo';
|
|
|
|
|
+ import sysConfigItemOfAddCamera from './sysConfigItemOfAddCamera.vue';
|
|
|
|
|
|
|
|
const props = defineProps<{ formData?: CameraNVRItem | null }>();
|
|
const props = defineProps<{ formData?: CameraNVRItem | null }>();
|
|
|
-
|
|
|
|
|
const emits = defineEmits(['cancel-execute', 'confirm-execute']);
|
|
const emits = defineEmits(['cancel-execute', 'confirm-execute']);
|
|
|
|
|
|
|
|
- const sceneInfos = useSceneInfos();
|
|
|
|
|
- const { scenesTree, flattendWorkspaces, getScenesTree } = sceneInfos;
|
|
|
|
|
|
|
+ const nvrDeviceInfo = useNvrDevice();
|
|
|
|
|
+ const { nvrDevice, getNvrDevice } = nvrDeviceInfo;
|
|
|
|
|
|
|
|
- const NVRFormRef = ref();
|
|
|
|
|
|
|
+ const treeWorkspaceInfo = useTreeWorkspaceInfo();
|
|
|
|
|
+ const { workspaceInfo, getWorkspaceFromTreeInfo } = treeWorkspaceInfo;
|
|
|
|
|
|
|
|
|
|
+ const NVRFormRef = ref();
|
|
|
const cameraNVRData = ref<CameraNVRItem>({} as CameraNVRItem);
|
|
const cameraNVRData = ref<CameraNVRItem>({} as CameraNVRItem);
|
|
|
|
|
|
|
|
const rules = {
|
|
const rules = {
|
|
|
|
|
+ nvrId: [{ required: true, message: '请选择NVR设备', trigger: 'blur' }],
|
|
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
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 }],
|
|
|
|
|
|
|
+ code: [{ required: true, message: '请输入设备ID', trigger: 'blur' }],
|
|
|
nvrChannel: [{ required: true, message: '请输入NVR平台通道号', trigger: 'blur' }],
|
|
nvrChannel: [{ required: true, message: '请输入NVR平台通道号', trigger: 'blur' }],
|
|
|
- videoServiceType: [{ required: false }],
|
|
|
|
|
- videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
|
|
|
|
|
|
|
+ sceneTemplateList: [{ required: true, message: '请选择至少一个业务场景', trigger: 'blur' }],
|
|
|
|
|
+ workspaceId: [{ required: true, message: '请选择工位', trigger: 'blur' }],
|
|
|
|
|
+ cameraType: [{ required: true, message: '请选择协议类型', trigger: 'blur' }],
|
|
|
|
|
+ videoStandard: [{ required: true, message: '请选择视频编码标准', trigger: 'blur' }],
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const handleUpdateSceneTemplateList = (data) => {
|
|
|
|
|
+ console.log('接收到的信息', data);
|
|
|
|
|
+ cameraNVRData.value.sceneTemplateList = data;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleCancel = () => {
|
|
const handleCancel = () => {
|
|
@@ -173,30 +172,28 @@
|
|
|
NVRFormRef.value.validate((valid) => {
|
|
NVRFormRef.value.validate((valid) => {
|
|
|
if (valid) {
|
|
if (valid) {
|
|
|
const copyData = cloneDeep(cameraNVRData.value);
|
|
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;
|
|
delete (copyData as any).principal;
|
|
|
|
|
+ copyData.sourceType = 'NVR';
|
|
|
emits('confirm-execute', copyData);
|
|
emits('confirm-execute', copyData);
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleTreeSelect = (node) => {
|
|
const handleTreeSelect = (node) => {
|
|
|
- const space = flattendWorkspaces.value.find((item) => item.code === node.value);
|
|
|
|
|
- cameraNVRData.value.workspaceId = space?.id;
|
|
|
|
|
- cameraNVRData.value.principal = space?.principal;
|
|
|
|
|
|
|
+ console.log('点击选择车间', node);
|
|
|
|
|
+ cameraNVRData.value.workspaceId = node.value;
|
|
|
|
|
+ cameraNVRData.value.principal = node.principalName;
|
|
|
|
|
+ cameraNVRData.value.workshopId = node.workshopId;
|
|
|
if (node.disabled && node.children.length < 1) {
|
|
if (node.disabled && node.children.length < 1) {
|
|
|
ElMessage.error('请先添加工位');
|
|
ElMessage.error('请先添加工位');
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
onBeforeMount(() => {
|
|
onBeforeMount(() => {
|
|
|
- getScenesTree({ level: 3, valueKey: 'code', labelKey: 'name', disabled: true });
|
|
|
|
|
|
|
+ getNvrDevice();
|
|
|
|
|
+ getWorkspaceFromTreeInfo();
|
|
|
if (props.formData) {
|
|
if (props.formData) {
|
|
|
|
|
+ console.log('props.formData', props.formData);
|
|
|
cameraNVRData.value = props.formData;
|
|
cameraNVRData.value = props.formData;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|