sl-sfy-safety/src/views/cameras/overview/components/AddCameraByNVR.vue

<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="props.formData ? true : false"
            check-strictly
            placeholder="请输入场景名称"
            style="width: 200px"
            @node-click="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>
    </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 { 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 { ElMessage } from 'element-plus';

  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: false }],
    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 = (node) => {
    const space = flattendWorkspaces.value.find((item) => item.code === node.value);
    cameraNVRData.value.workspaceId = space?.id;
    cameraNVRData.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) {
      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>