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

<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-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>
        <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>
        <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>
        </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>
        </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">
      <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 { 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('请先添加工位');
  }
};

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>