监控设备页面优化

src/views/iot/tplink/camera/camera.api.ts

@@ -8,6 +8,7 @@ enum Api {
   list = '/iot/tplink/cameraInfo/list',
   syncProjectIpcDevice = '/iot/tplink/cameraInfo/syncProjectIpcDevice',
   syncAllDevices = '/iot/tplink/cameraInfo/syncAllDevices',
+  syncDevicesStatus = '/iot/tplink/cameraInfo/syncDevicesStatus',
   ipcCapability = '/iot/tplink/cameraInfo/getIpcCapability',
   nuList = '/iot/tplink/cameraInfo/nuList',
   edit = '/iot/tplink/cameraInfo/edit',
@@ -42,6 +43,10 @@ enum Api {
   getUploadToServerProcess = '/iot/tplink/cameraInfo/getUploadToServerProcess',
   motionCtrl = '/iot/tplink/cameraInfo/motionCtrl',
 
+  getConfig = '/iot/tplink/config/getByCode',
+  addConfig = '/iot/tplink/config/add',
+  editConfig = '/iot/tplink/config/edit',
+
 }
 
 /**
@@ -87,6 +92,12 @@ export const syncProjectIpcDevice = (params) => defHttp.get({ url: Api.syncProje
  */
 export const syncAllDevices = (params) => defHttp.get({ url: Api.syncAllDevices, params });
 
+/**
+ * 同步设备在线状态
+ * @param params
+ */
+export const syncDevicesStatus = (params) => defHttp.get({ url: Api.syncDevicesStatus, params });
+
 /**
  * 获取IPC能力集
  * @param params
@@ -109,7 +120,7 @@ export const nuList = (params) => defHttp.get({ url: Api.nuList, params });
  * @param params
  */
 export const update = (params) => {
-  return defHttp.post({ url: Api.edit, params });
+  return defHttp.post({ url: Api.edit, params },{ isTransformResponse: false });
 }
 /**
  * 重启
@@ -287,4 +298,18 @@ export const getUploadToServerProcess = (params) => defHttp.get({ url: Api.getUp
  */
 export const motionCtrl = (params) => defHttp.get({ url: Api.motionCtrl, params });
 
+/**
+ * 获取配置数据
+ * @param params
+ */
+export const getConfig = (params) => defHttp.get({ url: Api.getConfig, params });
 
+/**
+ * 保存或者更新配置
+ * @param params
+ * @param isUpdate
+ */
+export const saveOrUpdateConfig = (params, isUpdate) => {
+  let url = isUpdate ? Api.editConfig : Api.addConfig;
+  return defHttp.post({ url: url, params }, { isTransformResponse: false });
+};

src/views/iot/tplink/camera/camera.data.ts

@@ -10,35 +10,61 @@ export const columns: BasicColumn[] = [
     dataIndex: 'deviceIndex'
   },
   {
-    title: 'SN',
+    title: '设备标识',
-    align: "center",
-    dataIndex: 'sn'
-  },
-  {
-    title: '设备名称',
     align: "center",
     dataIndex: 'deviceName'
   },
-  {
-    title: '设备状态',
-    align: "center",
-    dataIndex: 'deviceStatus_dictText'
-  },
   {
     title: '设备型号',
     align: "center",
     dataIndex: 'deviceModel'
   },
+  {
+    title: '设备类型',
+    align: "center",
+    dataIndex: 'deviceType',
+    customRender:({record})=>{
+      if(record.deviceType=='NETWORKVIDEORECORDER'){
+        return "录像机";
+      }
+      if(record.deviceType=='SURVEILLANCECAMERA'){
+        return "摄像头";
+      }
+    },
+  },
+  // {
+  //   title: 'SN',
+  //   align: "center",
+  //   dataIndex: 'sn'
+  // },
+
+  {
+    title: '在线状态',
+    align: "center",
+    dataIndex: 'deviceStatus_dictText'
+  },
+  {
+    title: '分配状态',
+    align: "center",
+    dataIndex: 'izAllocate',
+    customRender:({record})=>{
+      if(record.izAllocate=='Y'){
+        return "已分配";
+      }else{
+        return "未分配";
+      }
+    },
+  },
   // {
   //   title: 'IP地址',
   //   align: "center",
   //   dataIndex: 'ip'
   // },
-  // {
+  {
-  //   title: 'MAC地址',
+    title: 'MAC地址',
-  //   align: "center",
+    align: "center",
-  //   dataIndex: 'mac'
+    dataIndex: 'mac'
-  // },
+  },
   // {
   //   title: '区域名称',
   //   align: "center",
@@ -69,36 +95,41 @@ export const columns: BasicColumn[] = [
   //   align: "center",
   //   dataIndex: 'nuName'
   // },
-  {
+  // {
-    title: 'MAC地址',
+  //   title: 'MAC地址',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'mac'
+  //   dataIndex: 'mac'
-  },
+  // },
-  {
+  // {
-    title: 'FTP地址',
+  //   title: 'FTP地址',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'ftpIp'
+  //   dataIndex: 'ftpIp'
-  },
+  // },
-  {
+  // {
-    title: 'FTP端口',
+  //   title: 'FTP端口',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'ftpPort'
+  //   dataIndex: 'ftpPort'
-  },
+  // },
-  {
+  // {
-    title: 'FTP用户',
+  //   title: 'FTP用户',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'ftpUsername'
+  //   dataIndex: 'ftpUsername'
-  },
+  // },
-  {
+  // {
-    title: 'FTP密码',
+  //   title: 'FTP密码',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'ftpPassword'
+  //   dataIndex: 'ftpPassword'
-  },
+  // },
-  {
+  // {
-    title: 'FTP上传路径',
+  //   title: 'FTP上传路径',
-    align: "center",
+  //   align: "center",
-    dataIndex: 'ftpUploadpath'
+  //   dataIndex: 'ftpUploadpath'
-  },
+  // },
+  // {
+  //   title: '备注',
+  //   align: "center",
+  //   dataIndex: 'remarks'
+  // },
 ];
 
 export const formSchema: FormSchema[] = [
@@ -118,10 +149,23 @@ export const formSchema: FormSchema[] = [
     dynamicDisabled: true
   },
   {
-    label: 'SN',
+    label: '设备类型',
-    field: 'sn',
+    field: 'deviceType',
-    component: 'Input',
+    component: 'JDictSelectTag',
+    componentProps: {
+      placeholder: '请选择设备类型',
+      options: [
+        { label: '录像机', value: 'NETWORKVIDEORECORDER' },
+        { label: '摄像头', value: 'SURVEILLANCECAMERA' },
+      ],
     },
+    dynamicDisabled: true
+  },
+  // {
+  //   label: 'SN',
+  //   field: 'sn',
+  //   component: 'Input',
+  // },
   {
     label: '设备名称',
     field: 'deviceName',
@@ -199,32 +243,80 @@ export const formSchema: FormSchema[] = [
     label: 'FTP地址',
     field: 'ftpIp',
     component: 'Input',
+    show: ({model})=>{
+      if(model.deviceType == 'SURVEILLANCECAMERA'){
+        return true;
+      }else{
+        return false;
+      }
+    }
   },
   {
     label: 'FTP端口',
     field: 'ftpPort',
     component: 'Input',
+    show: ({model})=>{
+      if(model.deviceType == 'SURVEILLANCECAMERA'){
+        return true;
+      }else{
+        return false;
+      }
+    }
   },
   {
     label: 'FTP用户',
     field: 'ftpUsername',
     component: 'Input',
+    show: ({model})=>{
+      if(model.deviceType == 'SURVEILLANCECAMERA'){
+        return true;
+      }else{
+        return false;
+      }
+    }
   },
   {
     label: 'FTP密码',
     field: 'ftpPassword',
     component: 'Input',
+    show: ({model})=>{
+      if(model.deviceType == 'SURVEILLANCECAMERA'){
+        return true;
+      }else{
+        return false;
+      }
+    }
   },
   {
     label: 'FTP上传路径',
     field: 'ftpUploadpath',
     component: 'Input',
+    show: ({model})=>{
+      if(model.deviceType == 'SURVEILLANCECAMERA'){
+        return true;
+      }else{
+        return false;
+      }
+    }
   }
 ];
 
 export const searchFormSchema: FormSchema[] = [
   {
-    label: '设备状态',
+    label: '设备类型',
+    field: 'deviceType',
+    component: 'JDictSelectTag',
+    componentProps: {
+      placeholder: '请选择设备类型',
+      options: [
+        { label: '录像机', value: 'NETWORKVIDEORECORDER' },
+        { label: '摄像头', value: 'SURVEILLANCECAMERA' },
+      ],
+    },
+    //colProps: { span: 6 },
+  },
+  {
+    label: '在线状态',
     field: 'deviceStatus',
     component: 'JDictSelectTag',
     componentProps: {
@@ -234,6 +326,19 @@ export const searchFormSchema: FormSchema[] = [
     },
     //colProps: { span: 6 },
   },
+  {
+    label: '分配状态',
+    field: 'izAllocate',
+    component: 'JDictSelectTag',
+    componentProps: {
+      placeholder: '请选择分配状态',
+      options: [
+        { label: '已分配', value: 'Y' },
+        { label: '未分配', value: 'N' },
+      ],
+    },
+    //colProps: { span: 6 },
+  },
 ];
 
 //列表数据

src/views/iot/tplink/camera/components/CameraInfoForm.vue

@@ -0,0 +1,230 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="设备序号">
+                <a-input v-model:value="formData.deviceIndex" :disabled="true"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="设备类型">
+                <a-select v-model:value="formData.deviceType" :disabled="true">
+                  <a-select-option value="NETWORKVIDEORECORDER">录像机</a-select-option>
+                  <a-select-option value="SURVEILLANCECAMERA">摄像头</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="设备标识">
+                <a-input v-model:value="formData.deviceName" :disabled="true"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="设备状态">
+                <j-dict-select-tag v-model:value="formData.deviceStatus" dictCode="tplink_status" disabled
+                                   placeholder="请选择设备状态" allow-clear />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="设备型号">
+                <a-input v-model:value="formData.deviceModel" :disabled="true"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="formData.deviceType=='SURVEILLANCECAMERA'">
+            <a-col :span="24">
+              <a-form-item label="FTP地址">
+                <a-input v-model:value="formData.ftpIp"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="formData.deviceType=='SURVEILLANCECAMERA'">
+            <a-col :span="24">
+              <a-form-item label="FTP端口">
+                <a-input v-model:value="formData.ftpPort"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="formData.deviceType=='SURVEILLANCECAMERA'">
+            <a-col :span="24">
+              <a-form-item label="FTP用户">
+                <a-input v-model:value="formData.ftpUsername"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="formData.deviceType=='SURVEILLANCECAMERA'">
+            <a-col :span="24">
+              <a-form-item label="FTP密码">
+                <a-input v-model:value="formData.ftpPassword"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="formData.deviceType=='SURVEILLANCECAMERA'">
+            <a-col :span="24">
+              <a-form-item label="FTP上传路径">
+                <a-input v-model:value="formData.ftpUploadpath"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="备注">
+                <a-textarea v-model:value="formData.remarks" placeholder="请输入备注" :rows="4" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getValueType } from '/@/utils';
+import { update } from '../camera.api';
+import { Form } from 'ant-design-vue';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: ()=>{} },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  deviceIndex: '',
+  deviceType: '',
+  deviceName: '',
+  deviceStatus: '',
+  deviceModel: '',
+  ftpIp: undefined,
+  ftpPort: undefined,
+  ftpUsername: undefined,
+  ftpPassword: undefined,
+  ftpUploadpath: undefined,
+  remarks: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = {
+  // remarks: [{ required: true, message: '请输入备注!'},],
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
+
+// 表单禁用
+const disabled = computed(()=>{
+  if(props.formBpm === true){
+    if(props.formData.disabled === false){
+      return false;
+    }else{
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  let record = {};
+  edit(record);
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    //赋值
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if(record.hasOwnProperty(key)){
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await update(model)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/iot/tplink/camera/components/ConfigInfoForm.vue

@@ -0,0 +1,203 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="图门地址">
+                <a-input v-model:value="formData.tumsUrl"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="用户">
+                <a-input v-model:value="formData.tumsUsername"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="密码">
+                <a-input v-model:value="formData.tumsPassword"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="FTP地址">
+                <a-input v-model:value="formData.ftpIp"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="FTP端口">
+                <a-input v-model:value="formData.ftpPort"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="FTP用户">
+                <a-input v-model:value="formData.ftpUsername"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="FTP密码">
+                <a-input v-model:value="formData.ftpPassword"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="FTP上传路径">
+                <a-input v-model:value="formData.ftpUploadpath"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getValueType } from '/@/utils';
+import { saveOrUpdateConfig } from '../camera.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: ()=>{} },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  tumsUrl: '',
+  tumsUsername: '',
+  tumsPassword: '',
+  ftpIp: '',
+  ftpPort: '',
+  ftpUsername: '',
+  ftpPassword: '',
+  ftpUploadpath: ''
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = {
+  tumsUrl: [{ required: true, message: '请输入图门地址!'},],
+  tumsUsername: [{ required: true, message: '请输入账户!'},],
+  tumsPassword: [{ required: true, message: '请输入密码!'},],
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
+
+// 表单禁用
+const disabled = computed(()=>{
+  if(props.formBpm === true){
+    if(props.formData.disabled === false){
+      return false;
+    }else{
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  let record = {};
+  edit(record);
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    //赋值
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if(record.hasOwnProperty(key)){
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await saveOrUpdateConfig(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/iot/tplink/camera/components/DrawerModal.vue

@@ -0,0 +1,137 @@
+<template>
+  <a-drawer :title="title" :width="width" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
+   :bodyStyle="{ padding: '14px' }" @close="handleCancel">
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
+    </template>
+    <CameraInfoForm v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
+      :formBpm="false">
+    </CameraInfoForm>
+  </a-drawer>
+  <!-- 员工信息变更审核 -->
+  <a-drawer :title="title" :width="width" :visible="configVisible" :closable="true" :footer-style="{ textAlign: 'right' }"
+    :bodyStyle="{ padding: '14px' }" @close="handleConfigCancel">
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleConfigCancel">关闭</a-button>
+      <a-button type="primary" @click="handleConfigOk">确认</a-button>
+    </template>
+    <ConfigInfoForm v-if="configVisible" ref="configForm" @ok="handleConfigCancel" :formBpm="false">
+    </ConfigInfoForm>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineExpose } from 'vue';
+import CameraInfoForm from './CameraInfoForm.vue'
+import ConfigInfoForm from './ConfigInfoForm.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+import { getConfig } from '../camera.api';
+
+const title = ref<string>('');
+const width = ref<number>(800);
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref();
+const configForm = ref();
+const configVisible = ref<boolean>(false);
+const emit = defineEmits(['register', 'success']);
+/**
+ * 新增
+ */
+function add() {
+  title.value = '新增';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.add();
+  });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record);
+  });
+}
+
+/**
+ * 编辑配置
+ * @param
+ */
+async function configEdit() {
+  await getConfig({}).then((res) => {
+    console.log(res);
+    configVisible.value = true;
+    if(res!=null){
+      title.value = '编辑配置';
+      nextTick(() => {
+        configForm.value.edit(res);
+      });
+    }else{
+      title.value = '新增配置';
+      nextTick(() => {
+        configForm.value.add();
+      });
+    }
+  })
+
+
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+/**
+ * 员工信息变更-关闭
+ */
+function handleConfigCancel() {
+  configVisible.value = false
+  emit('success');
+}
+
+/**
+ * 员工信息变更确认
+ */
+function handleConfigOk() {
+  configForm.value.submitForm();
+}
+
+defineExpose({
+  add,
+  edit,
+  configEdit,
+  disableSubmit,
+});
+</script>
+
+<style lang="less">
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
+</style>
+<style lang="less" scoped></style>

src/views/iot/tplink/camera/index.vue

@@ -48,12 +48,15 @@
 -->
 
 <template>
+  <a-spin :spinning="confirmLoading">
   <div class="p-2">
     <!--引用表格-->
     <BasicTable @register="registerTable">
       <!--插槽:table标题-->
       <template #tableTitle>
         <a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSync"> 拉取设备</a-button>
+        <a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSyncStatus"> 更新状态</a-button>
+        <a-button type="primary" preIcon="ant-design:setting-outlined" @click="handleConfig"> 配置管理</a-button>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
@@ -65,8 +68,9 @@
     <!-- 表单区域 -->
     <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
     <CameraPictureConfigModal ref="cameraPictureConfigModal"></CameraPictureConfigModal>
-    <CameraInfoDrawer @register="registerDrawer" @success="handleSuccess" />
+    <DrawerModal ref="registerDrawer" @success="handleSuccess" />
   </div>
+  </a-spin>
 </template>
 
 <script lang="ts" name="iot-nuIotCameraInfo" setup>
@@ -74,24 +78,26 @@ import {ref, reactive, createVNode, h, onMounted, watch, unref,nextTick} from 'v
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { columns, searchFormSchema } from './camera.data';
-import {getImageCommon, list, syncAllDevices} from './camera.api';
+import {getImageCommon, list, syncAllDevices,syncDevicesStatus} from './camera.api';
 import { useUserStore } from '/@/store/modules/user';
-import { useDrawer } from "@/components/Drawer";
+// import { useDrawer } from "@/components/Drawer";
 import { useRouter } from 'vue-router';
 import CameraPreviewModal from './components/CameraPreviewModal.vue'
-import CameraInfoDrawer from './components/CameraInfoDrawer.vue'
+import DrawerModal from './components/DrawerModal.vue'
 import CameraPictureConfigModal from './components/CameraPictureConfigModal.vue';
 
 //注册drawer
-const [registerDrawer, { openDrawer }] = useDrawer();
+// const [registerDrawer, { openDrawer }] = useDrawer();
 let router = useRouter();
 const formRef = ref();
 const queryParam = reactive<any>({});
 const registerModal = ref();
 const previewModal = ref();
 const deviceModal = ref();
+const registerDrawer = ref();
 const cameraPictureConfigModal = ref();
 const userStore = useUserStore();
+const confirmLoading = ref<boolean>(false);
 //注册table数据
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   tableProps: {
@@ -128,12 +134,19 @@ const wrapperCol = reactive({
  * 编辑
  */
 function handleEdit(record: Recordable) {
-  openDrawer(true, {
+  // openDrawer(true, {
-    record,
+  //   record,
-    isUpdate: true,
+  //   isUpdate: true,
-    showFooter: true,
+  //   showFooter: true,
-    tenantSaas: false,
+  //   tenantSaas: false,
-  });
+  // });
+  registerDrawer.value.disableSubmit = false;
+  registerDrawer.value.edit(record);
+}
+
+function handleConfig(){
+  registerDrawer.value.disableSubmit = false;
+  registerDrawer.value.configEdit();
 }
 
 /**
@@ -198,6 +211,7 @@ function getTableAction(record) {
     {
       label: '画面配置',
       onClick: handlePicConfig.bind(null, record),
+      ifShow: record.deviceType == 'SURVEILLANCECAMERA'
     },
     {
       label: '编辑',
@@ -206,6 +220,7 @@ function getTableAction(record) {
     {
       label: '预览',
       onClick: handlePreview.bind(null, record),
+      ifShow: record.deviceType == 'SURVEILLANCECAMERA'
     },
   ];
 }
@@ -214,10 +229,28 @@ function getTableAction(record) {
  * 同步设备
  */
 async function handleSync(){
-  await syncAllDevices({});
+  confirmLoading.value = true;
+  //摄像头、录像机
+  await syncAllDevices({deviceType: "SURVEILLANCECAMERA,NETWORKVIDEORECORDER"}).then((res) => {
+    confirmLoading.value = false;
     reload();
+  });
 }
 
+
+/**
+ * 更新状态
+ */
+async function handleSyncStatus(){
+  confirmLoading.value = true;
+  await syncDevicesStatus({deviceType: "SURVEILLANCECAMERA,NETWORKVIDEORECORDER"}).then((res) => {
+    confirmLoading.value = false;
+    reload();
+  });
+}
+
+
+
 </script>
 
 <style lang="less" scoped>