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

<template>
  <div>
    <div>
      <el-form
        ref="IPFormRef"
        class="ip-form"
        :inline="true"
        :model="cameraIPData"
        :rules="rules"
        label-width="114px"
        label-position="left"
      >
        <el-form-item label="名称：" prop="name">
          <el-input v-model="cameraIPData.name" placeholder="请输入名称" style="width: 200px" />
        </el-form-item>
        <el-form-item label="设备ID：" prop="code">
          <el-input v-model="cameraIPData.code" placeholder="自定义ID，不能重复" style="width: 200px" />
        </el-form-item>
        <el-form-item label="IP地址：" prop="cameraIp">
          <el-input v-model="cameraIPData.cameraIp" placeholder="请输入IP地址" style="width: 200px" />
        </el-form-item>
        <el-form-item label="端口：" prop="cameraPort">
          <el-input v-model="cameraIPData.cameraPort" placeholder="请输入端口号" style="width: 200px" />
        </el-form-item>
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="cameraIPData.username" placeholder="请输入用户名" style="width: 200px" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="cameraIPData.password" placeholder="请输入用户名密码" style="width: 200px" />
        </el-form-item>
        <el-form-item label="视频编码标准：" prop="videoStandard">
          <el-select v-model="cameraIPData.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="videoServiceType">
          <el-select v-model="cameraIPData.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="NVR设备：" prop="nvrId">
          <el-select v-model="cameraIPData.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 style="margin-left: 10px; position: relative; width: 20px; height: 32px">
            <el-tooltip content="选择已添加在【NVR设备管理】中的设备编号">
              <el-icon :size="16" style="position: absolute; top: 8px"><InfoFilled /></el-icon>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="协议类型：" prop="cameraType">
          <el-select v-model="cameraIPData.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="所属工位：" prop="workspaceIdStr">
          <el-tree-select
            v-model="cameraIPData.workspaceIdStr"
            :data="workspaceInfo"
            :render-after-expand="false"
            :default-expand-all="true"
            placeholder="请选择工位"
            style="width: 200px"
            @node-click="handleTreeSelect"
          />
        </el-form-item>
        <el-form-item label="工位负责人：" prop="principal">
          <el-input
            v-model="cameraIPData.principal"
            placeholder="请选择工位，该项自动填充"
            disabled
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="业务场景：" prop="sceneTemplateList" style="width: 766px">
          <sysConfigItemOfAddCamera
            :origin-scene-checked-list="cameraIPData.sceneTemplateList"
            @update:scene-checked-list="handleUpdateSceneTemplateList"
          />
        </el-form-item>
        <el-form-item label="备注：" prop="remark" style="width: 766px">
          <el-input v-model="cameraIPData.remark" placeholder="请输入备注" style="width: 655px" />
        </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 { ElIcon } from 'element-plus';
  import { InfoFilled } from '@element-plus/icons-vue';
  import { CameraDetailServer } from '@/types/camera/type';
  import { protocalTypeSelect, serviceTypeSelect, standardTypeSelect } from '@/types/camera/constant';
  import useNvrDevice from '../hooks/useNvrDevice';
  import useTreeWorkspaceInfo from '../hooks/useTreeWorkspaceInfo';
  import { cloneDeep } from 'lodash-es';
  import sysConfigItemOfAddCamera, { getSceneCheckedValues } from './sysConfigItemOfAddCamera.vue';

  const props = defineProps<{ formData?: CameraDetailServer | null }>();
  const emits = defineEmits(['cancel-execute', 'confirm-execute']);

  const treeWorkspaceInfo = useTreeWorkspaceInfo();
  const { workspaceInfo, getWorkspaceFromTreeInfo, getWorkspaceIdFromTreeNode } = treeWorkspaceInfo;

  const nvrDeviceInfo = useNvrDevice();
  const { nvrDevice, getNvrDevice } = nvrDeviceInfo;

  const IPFormRef = ref();

  type CameraDetailForm = CameraDetailServer & { workspaceIdStr?: string };
  const cameraIPData = ref<CameraDetailForm>({} as CameraDetailForm);

  const validateSceneTemplate = (_rule, value, callback) => {
    if (Object.keys(sceneCheckedDataRef.value).length === 0)
      callback(new Error('请至少选择一个业务场景及对应应用模版'));
    else if (value && Object.keys(sceneCheckedDataRef.value).length > value.length)
      callback(new Error('请完成已选业务场景中的应用模版选择'));
    else callback();
  };

  const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入设备ID', trigger: 'blur' }],
    cameraIp: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
    cameraPort: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入用户名密码', trigger: 'blur' }],
    videoStandard: [{ required: true, message: '请选择视频编码标准', trigger: 'blur' }],
    cameraType: [{ required: true, message: '请选择协议类型', trigger: 'blur' }],
    workspaceIdStr: [{ required: true, message: '请选择工位', trigger: 'blur' }],
    sceneTemplateList: [{ required: true, validator: validateSceneTemplate, trigger: 'blur' }],
  };

  const sceneCheckedDataRef = ref({} as Record<number, boolean>);
  const handleUpdateSceneTemplateList = (sceneTemplateData, sceneCheckedData) => {
    sceneCheckedDataRef.value = sceneCheckedData;
    cameraIPData.value.sceneTemplateList = sceneTemplateData;
  };

  const handleCancel = () => {
    emits('cancel-execute');
  };

  const handleConfirm = () => {
    IPFormRef.value.validate((valid) => {
      if (valid) {
        const copyData = cloneDeep(cameraIPData.value);
        if (cameraIPData.value.workspaceIdStr)
          copyData.workspaceId = Number(getWorkspaceIdFromTreeNode(cameraIPData.value.workspaceIdStr));
        delete (copyData as any).principal;
        copyData.sourceType = 'IP';
        emits('confirm-execute', copyData);
      }
    });
  };

  const handleTreeSelect = (node) => {
    if (node.disabled) return;
    cameraIPData.value.principal = node.principalName ? node.principalName : '该工位暂无负责人';
    cameraIPData.value.workshopId = node.workshopId;
  };

  onBeforeMount(() => {
    getNvrDevice();
    getWorkspaceFromTreeInfo();
    if (props.formData) {
      cameraIPData.value = props.formData;
      cameraIPData.value.workspaceIdStr = `workspace-${props.formData.workspaceId}`;
      sceneCheckedDataRef.value = getSceneCheckedValues(props.formData.sceneTemplateList);
    }
  });
</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>