refactor: 替换之前重构好的报表配置相关代码

-<template>
-  <BasicDrawer
-    :maskClosable="true"
-    @close="handleClose"
-    destroyOnClose
-    v-bind="$attrs"
-    @register="registerDrawer"
-    showFooter
-    :title="getTitle"
-    width="30%"
-    @ok="handleSubmit"
-  >
-    <BasicForm @register="registerForm">
-      <template #devices="{ model, field }">
-        <p style="display: none">{{ field }}</p>
-        <p>{{ queryModeFunc(model['queryMode']) }}</p>
-        <p>{{ orgFunc(model['organizationId']) }}</p>
-        <p>{{ dataTypeFunc(model['dataType']) }}</p>
-        <Select
-          placeholder="请选择设备"
-          v-model:value="selectDevice"
-          style="width: 100%"
-          :options="selectOptions"
-          @change="handleDeviceChange"
-          @deselect="handleDeselect"
-          mode="multiple"
-          labelInValue
-          notFoundContent="请选择设备"
-        />
-        <div style="margin-top: 1.5vh"></div>
-        <template v-for="(item, index) in deviceList" :key="item.value">
-          <p style="display: none">{{ index }}</p>
-          <DeviceAttrCpns
-            :ref="bindDeviceRefObj.deviceAttrRef"
-            :value="item"
-            :orgId="organizationId || orgId"
-          />
-        </template>
-      </template>
-    </BasicForm>
-  </BasicDrawer>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, unref, reactive, watch, Ref, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { DataTypeEnum, formSchema, organizationId } from './config.data';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import {
-    createOrEditReportManage,
-    putReportConfigManage,
-    reportEditDetailPage,
-  } from '/@/api/report/reportManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import moment from 'moment';
-  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
-  import { Select } from 'ant-design-vue';
-  import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
-  import { SchemaFiled } from './config.data';
-  import { QueryWay } from '../../device/localtion/cpns/TimePeriodForm/config';
-  import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
-
-  type TDeviceList = {
-    key?: string;
-    value?: string;
-    label?: string;
-    attribute?: string;
-    device?: string;
-    name?: string;
-    attributes?: string | undefined;
-    deviceProfileId?: string;
-    id?: string;
-  };
-  type TSelectOption = {
-    value?: string;
-    label?: string;
-    deviceProfileId?: string;
-    id?: string;
-  };
-  const emit = defineEmits(['success', 'register']);
-  const bindDeviceRefObj = {
-    deviceAttrRef: ref([]),
-  };
-  const isUpdate = ref(true);
-  const editId = ref('');
-  const orgId = ref('');
-  const selectOptions: Ref<TSelectOption[]> = ref([]);
-  const selectDevice = ref([]);
-  const deviceList: Ref<TDeviceList[]> = ref([]);
-  const editDeviceList: Ref<TDeviceList[]> = ref([]);
-  let editResData: any = reactive({});
-  const editDeviceAttr: any = ref([]);
-  const orgFuncId = ref('');
-  const queryModeStr = ref('');
-  const dataTypeStr = ref(0);
-  const orgFunc = (e) => {
-    orgFuncId.value = e;
-  };
-  const queryModeFunc = (e) => {
-    queryModeStr.value = e;
-  };
-  const dataTypeFunc = (e) => {
-    dataTypeStr.value = e;
-  };
-  watch(
-    () => dataTypeStr.value,
-    (newValue) => {
-      if (newValue == 0) {
-        setFieldsValue({ limit: 100 });
-      } else {
-      }
-    }
-  );
-  watch(
-    () => queryModeStr.value,
-    (newValue: string) => {
-      if (newValue == 'latest') {
-        setFieldsValue({ startTs: 1000 });
-        setFieldsValue({ interval: 1000 });
-      } else {
-      }
-    }
-  );
-  watch(
-    () => orgFuncId.value,
-    async (newValue: string) => {
-      if (newValue) {
-        //获取设备
-        const { items } = await screenLinkPageByDeptIdGetDevice({
-          organizationId: newValue,
-        });
-        selectOptions.value = items.map((item) => {
-          if (item.deviceType !== 'GATEWAY')
-            return {
-              label: item.alias ? item.alias : item.name,
-              value: item.tbDeviceId,
-              id: item.id,
-              deviceProfileId: item.deviceProfileId,
-            };
-        });
-      }
-    }
-  );
-  //设备Select选中
-  const handleDeviceChange = (_, o) => {
-    if (unref(isUpdate)) {
-      //编辑
-      let temp: any = [];
-      editDeviceAttr.value.forEach((f) => {
-        temp = [f, ...o];
-      });
-      let deWeightThree = () => {
-        let map = new Map();
-        for (let item of deviceList.value) {
-          if (!map.has(item.value)) {
-            map.set(item.value, item);
-          }
-        }
-        return [...map.values()];
-      };
-      temp = deWeightThree();
-      deviceList.value = temp;
-      if (o.length !== 0) {
-        deviceList.value = o;
-      }
-    } else {
-      deviceList.value = o;
-    }
-  };
-  //设备取消删除
-  const handleDeselect = (e) => {
-    if (unref(isUpdate)) {
-      //编辑
-      let deWeightThree = () => {
-        let map = new Map();
-        for (let item of deviceList.value) {
-          if (!map.has(item.value)) {
-            map.set(item.value, item);
-          }
-        }
-        return [...map.values()];
-      };
-      deviceList.value = deWeightThree();
-      const findEditValue = deviceList.value.findIndex((f) => f.value == e.value);
-      if (findEditValue !== -1) deviceList.value.splice(findEditValue, 1);
-    } else {
-      const eDevice = e.key || e.value;
-      const findValue = deviceList.value.findIndex((f) => f.value == eDevice);
-      if (findValue !== -1) deviceList.value.splice(findValue, 1);
-    }
-  };
-  const [registerForm, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
-    useForm({
-      labelWidth: 120,
-      schemas: formSchema,
-      showActionButtonGroup: false,
-      fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
-    });
-  const isViewDetail = ref(false);
-
-  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-    await nextTick();
-    await resetFields();
-    setDrawerProps({ confirmLoading: false });
-    isUpdate.value = !!data?.isUpdate;
-    isViewDetail.value = !!data?.isView;
-    if (unref(isViewDetail)) {
-      setDrawerProps({ showFooter: true });
-      if (unref(isUpdate)) {
-        setDrawerProps({ title: '编辑报表配置' });
-      } else {
-        setDrawerProps({ title: '新增报表配置' });
-      }
-    } else {
-      setDrawerProps({ showFooter: false });
-      setDrawerProps({ title: '查看报表配置' });
-    }
-    if (unref(isUpdate)) {
-      //编辑回显数据
-      editResData = await reportEditDetailPage(data.record.id);
-      //回显基础数据
-      editId.value = editResData.data.id;
-      const spanDisance = editResData.data.executeContent?.split(' ');
-      await setFieldsValue(editResData.data);
-      //回显嵌套数据
-      await setFieldsValue({
-        dateGroupGap:
-          editResData.data.queryCondition?.queryMode === 1
-            ? editResData.data.queryCondition?.interval
-            : null,
-        agg: editResData.data.queryCondition?.agg,
-        interval: editResData.data.queryCondition?.interval,
-        limit: editResData.data.queryCondition?.limit,
-        orderBy: editResData.data.queryCondition?.orderBy,
-        useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes,
-        startTs: editResData.data.queryCondition?.startTs,
-        endTs: editResData.data.queryCondition?.endTs,
-        way: editResData.data?.way,
-        queryMode: editResData.data.queryCondition?.queryMode === 0 ? 'latest' : 'timePeriod',
-        cronTime:
-          editResData.data?.cycle?.cycleType === 2
-            ? spanDisance[2] < 10
-              ? editResData.data.executeContent.slice(0, 7) + '* * ?'
-              : editResData.data.executeContent.slice(0, 7) + ' ' + '* * ?'
-            : editResData.data?.cycle?.cycleType === 1
-            ? spanDisance[2] < 10
-              ? editResData.data.executeContent.slice(0, 5) + ' ' + ' * * ?'
-              : editResData.data.executeContent.slice(0, 6) + ' ' + ' * * ?'
-            : editResData.data.executeContent,
-        currentCycle: editResData.data?.cycle?.currentCycle,
-        cycleTime: editResData.data?.cycle?.cycleTime,
-        cycleType: editResData.data?.cycle?.cycleType,
-      });
-      const endTsTime = editResData.data.queryCondition?.endTs;
-      const startTsTime = editResData.data.queryCondition?.startTs;
-      const mathFloor = (endTsTime - startTsTime) / 10;
-      const multTen = Math.floor(mathFloor) * 10;
-      await setFieldsValue({
-        startTs: multTen,
-      });
-      if (editResData.data.queryCondition?.queryMode == 1) {
-        await setFieldsValue({
-          dataRange: [
-            editResData.data.queryCondition?.startTs,
-            editResData.data.queryCondition?.endTs,
-          ],
-        });
-      }
-      //回显聚合条件
-      const dataCompareOpions = [
-        { label: '最小值', value: AggregateDataEnum.MIN },
-        { label: '最大值', value: AggregateDataEnum.MAX },
-        { label: '平均值', value: AggregateDataEnum.AVG },
-        { label: '求和', value: AggregateDataEnum.SUM },
-        { label: '计数', value: AggregateDataEnum.COUNT },
-        { label: '空', value: AggregateDataEnum.NONE },
-      ];
-      const updateSchemaAgg = (options: {}) => {
-        updateSchema({
-          field: SchemaFiled.AGG,
-          componentProps: {
-            options,
-          },
-        });
-      };
-      if (editResData.data.dataType == 1) updateSchemaAgg(dataCompareOpions.slice(0, 5));
-      else updateSchemaAgg(dataCompareOpions.slice(5, 6));
-      //回显执行方式和查询周期
-      const dataQueryOpions = [
-        { label: '固定周期', value: QueryWay.LATEST },
-        { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-      ];
-      const updateSchemaQuery = (options: {}) => {
-        updateSchema({
-          field: SchemaFiled.WAY,
-          componentProps: {
-            options,
-          },
-        });
-      };
-      if (editResData.data.executeWay == 0) updateSchemaQuery(dataQueryOpions);
-      else updateSchemaQuery(dataQueryOpions.slice(0, 1));
-      //回显设备
-      orgId.value = editResData.data.organizationId;
-      const { items } = await screenLinkPageByDeptIdGetDevice({
-        organizationId: editResData.data.organizationId,
-      });
-      selectOptions.value = items.map((item) => {
-        if (item.deviceType !== 'GATEWAY')
-          return {
-            label: item.alias ? item.alias : item.name,
-            value: item.tbDeviceId,
-            id: item.id,
-            deviceProfileId: item.deviceProfileId,
-          };
-      });
-      const deviceIds = editResData.data.executeAttributes.map((m) => {
-        return {
-          label: m.name,
-          key: m.device,
-        };
-      });
-      selectDevice.value = deviceIds;
-      //回显设备属性
-      editDeviceAttr.value = editResData.data.executeAttributes?.map((item) => {
-        const T = selectOptions.value.find((o) => {
-          if (item.device === o.value) {
-            return {
-              id: o.id,
-              deviceProfileId: o.deviceProfileId,
-            };
-          }
-        });
-        return {
-          ...T,
-          label: item.alias ? item.alias : item.name,
-          value: item.device,
-          attributes: item.attributes,
-        };
-      });
-      deviceList.value = editDeviceAttr.value;
-      editDeviceList.value = editResData.data.executeAttributes;
-    } else {
-      setFieldsValue({
-        startTs: 1000,
-        interval: 1000,
-      });
-      editId.value = '';
-      orgId.value = '';
-      selectDevice.value = [];
-      selectOptions.value = [];
-      deviceList.value = [];
-      getAttrDevice.value = [];
-      editDeviceList.value = [];
-      editDeviceAttr.value = [];
-      updateSchema({
-        field: SchemaFiled.AGG,
-        componentProps: {
-          options: [],
-        },
-      });
-      //新增显示执行方式和查询周期
-      const dataQueryOpions = [
-        { label: '固定周期', value: QueryWay.LATEST },
-        { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-      ];
-      const updateSchemaQuery = (options: {}) => {
-        updateSchema({
-          field: SchemaFiled.WAY,
-          componentProps: {
-            options,
-          },
-        });
-      };
-      if (getFieldsValue().executeWay == 0) updateSchemaQuery(dataQueryOpions);
-    }
-  });
-  const handleClose = () => {
-    deviceList.value = [];
-    editId.value = '';
-    orgId.value = '';
-    selectDevice.value = [];
-    selectOptions.value = [];
-    getAttrDevice.value = [];
-    editDeviceList.value = [];
-    editDeviceAttr.value = [];
-  };
-  const getAttrDevice: Ref<TDeviceList[]> = ref([]);
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
-  let postObj: any = reactive({});
-  let queryCondition: any = reactive({});
-  let executeContent: any = reactive({});
-  const startTs = ref(0);
-  const endTs = ref(0);
-
-  const getFormValueFunc = () => {
-    const item: any = unref(bindDeviceRefObj.deviceAttrRef)?.map((item: any) => item.emitChange());
-    getAttrDevice.value = item;
-  };
-
-  async function handleSubmit() {
-    setDrawerProps({ confirmLoading: true });
-    try {
-      const { createMessage } = useMessage();
-      const values = await validate();
-      if (!values) return;
-      getFormValueFunc();
-      let hasAttr = false;
-      if (!unref(isUpdate)) {
-        if (getAttrDevice.value.length === 0) {
-          return createMessage.error('请选择设备及其属性');
-        } else {
-          getAttrDevice.value.forEach((f: any) => {
-            if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true;
-          });
-        }
-      } else {
-        if (getAttrDevice.value.length === 0) {
-          return createMessage.error('请选择设备及其属性');
-        } else {
-          getAttrDevice.value.forEach((f: any) => {
-            if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true;
-          });
-        }
-      }
-      if (hasAttr) return createMessage.error('请选择设备属性');
-      if (values.executeWay == 0) {
-        executeContent = null;
-      } else {
-        //拼接corn
-        let joinCorn = '';
-        if (values.cycleType === 1) {
-          joinCorn = values.cronTime.slice(0, 6) + values.currentCycle.slice(5);
-          executeContent = joinCorn;
-        } else if (values.cycleType === 0) {
-          executeContent = values.cronTime;
-        } else if (values.cycleType === 2) {
-          joinCorn = values.cronTime.slice(0, 6) + values.cycleTime.slice(5);
-          executeContent = joinCorn;
-        }
-      }
-      if (values.queryMode === QueryWay.LATEST) {
-        startTs.value = moment().subtract(values.startTs, 'ms').valueOf();
-        endTs.value = Date.now();
-      } else {
-        const fT = JSON.parse(JSON.stringify(values.dataRange));
-        startTs.value = moment(fT[0]).valueOf();
-        endTs.value = moment(fT[1]).valueOf();
-      }
-      queryCondition = {
-        agg: values.agg,
-        ...(values?.queryMode === QueryWay.LATEST && values?.dataType != DataTypeEnum.ORIGINAL
-          ? { interval: values?.queryMode === 'latest' ? values.interval : values.dateGroupGap }
-          : {}),
-        limit: values.limit,
-        ...{
-          startTs: startTs.value,
-        },
-        ...{
-          endTs: endTs.value,
-        },
-        queryMode: values?.queryMode === 'latest' ? 0 : 1,
-      };
-      const cycle: any = {};
-      if (values.cycleType === 0) {
-        cycle.cycleType = values.cycleType;
-        cycle.cronTime = values.cronTime;
-      }
-      if (values.cycleType === 1) {
-        cycle.cycleType = values.cycleType;
-        cycle.currentCycle = values.currentCycle;
-        cycle.cronTime = values.cronTime;
-      }
-      if (values.cycleType === 2) {
-        cycle.cycleType = values.cycleType;
-        cycle.cycleTime = values.cycleTime;
-        cycle.cronTime = values.cronTime;
-      }
-      // const cycle = {
-      //   currentCycle: values.currentCycle,
-      //   cycleTime: values.cycleTime,
-      //   cronTime: values.cronTime,
-      //   cycleType: values.cycleType,
-      // };
-      delete values.devices;
-      delete values.agg;
-      delete values.interval;
-      delete values.timeZone;
-      delete values.cronTime;
-      delete values.currentCycle;
-      delete values.cycleTime;
-      delete values.limit1;
-      delete values.startTs;
-      delete values.queryMode;
-      delete values.cycleType;
-      postObj = {
-        ...values,
-        ...{
-          executeAttributes:
-            getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value,
-        },
-        ...{ queryCondition },
-        ...{ cycle },
-        ...{ executeContent },
-        ...{ id: editId.value !== '' ? editId.value : '' },
-      };
-      let saveMessage = '添加成功';
-      let updateMessage = '修改成功';
-      editId.value !== ''
-        ? await putReportConfigManage(postObj)
-        : await createOrEditReportManage(postObj);
-
-      closeDrawer();
-      emit('success');
-      createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
-      handleClose();
-    } finally {
-      setTimeout(() => {
-        setDrawerProps({ confirmLoading: false });
-      }, 300);
-    }
-  }
-</script>

@@ -6,7 +6,6 @@
       width="55rem"
       @register="register"
       title="执行设备及属性"
-      @cancel="handleCancel"
       :showOkBtn="false"
     >
       <div>
@@ -19,10 +18,11 @@
   import { ref, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicTable, useTable } from '/@/components/Table';
-  import { viewDeviceColumn } from './config.data';
+  import { viewDeviceColumn } from '../config';
   import { reportEditDetailPage } from '/@/api/report/reportManager';
 
-  const tableData: any = ref([]);
+  const tableData = ref([]);
+
   const [registerTable] = useTable({
     columns: viewDeviceColumn,
     showIndexColumn: false,
@@ -30,22 +30,20 @@
     showTableSetting: false,
     bordered: true,
   });
+
   const [register] = useModalInner((data) => {
     const getTableData = async () => {
-      const res: any = await reportEditDetailPage(data.record.id);
-      const resMap = res.data.executeAttributes.map((d) => {
-        return {
-          device: d.name,
-          attribute: d.attributes.join(','),
-        };
-      });
+      const res = (await reportEditDetailPage(data.record?.id)) as any;
+      const resMap = res?.data?.executeAttributes?.map((item) => ({
+        device: item.name,
+        attribute: item.attributes.join(','),
+      }));
       tableData.value = resMap;
     };
     nextTick(() => {
       getTableData();
     });
   });
-  const handleCancel = () => {};
 </script>
 <style lang="less" scoped>
   :deep(.ant-table-body) {

+<template>
+  <BasicDrawer
+    destroyOnClose
+    v-bind="$attrs"
+    showFooter
+    width="35%"
+    :maskClosable="true"
+    :title="businessText"
+    @register="registerDrawer"
+    @ok="handleSubmit"
+    @close="handleClose"
+  >
+    <BasicForm @register="registerForm">
+      <!-- 设备选择 -->
+      <template #devices="{ model }">
+        <span class="hidden">{{ handleChangeOrg(model['organizationId']) }}</span>
+        <SelectDevice ref="selectDeviceRef" :selectOptions="selectOptions" />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, Ref, nextTick, watch } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from '../config';
+  import { SchemaFiled, BusinessReportConfigTextEnum, BusinessExecutewayEnum } from '../enum';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import {
+    createOrEditReportManage,
+    putReportConfigManage,
+    reportEditDetailPage,
+  } from '/@/api/report/reportManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { TSelectOption } from '../type';
+  import { SelectDevice } from './index';
+  import { useHooks } from '../hooks/index.hooks';
+  import { useThrottleFn } from '@vueuse/shared';
+
+  const emits = defineEmits(['success', 'register']);
+
+  const selectDeviceRef = ref<InstanceType<typeof SelectDevice>>();
+
+  const { createMessage } = useMessage();
+
+  const {
+    getDeviceList,
+    getQueryCondition,
+    removeFields,
+    setDefaultTime,
+    setQueryCondition,
+    setAggByDateType,
+    disableCustomWeekly,
+    setPropsForModal,
+    validateSelectDevice,
+  } = useHooks();
+
+  const selectOptions: Ref<TSelectOption[]> = ref([]);
+
+  const orgId = ref('');
+
+  const handleChangeOrg = (e) => {
+    orgId.value = e;
+    //放在这里的话，会造成发出很多请求，原因不是很清楚
+    // getDeviceListByOrg(orgId.value);
+  };
+
+  const getDeviceListByOrg = async (organizationId) => {
+    selectOptions.value = await getDeviceList(organizationId);
+  };
+
+  watch(
+    () => orgId.value,
+    (newValue: string) => {
+      if (newValue) {
+        //获取设备
+        selectDeviceRef.value?.resetValue();
+        getDeviceListByOrg(newValue);
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
+  });
+
+  const businessText = ref('');
+
+  const restData = reactive({
+    data: {},
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    try {
+      await nextTick();
+      handleClose();
+      businessText.value = data.text;
+      setFieldsValue(setDefaultTime());
+      updateSchema(disableCustomWeekly(BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE));
+      setDrawerProps(setPropsForModal(businessText.value));
+      if (businessText.value === BusinessReportConfigTextEnum.BUSINESS_ADD_TEXT) return;
+      const rest = await reportEditDetailPage(data.record?.id);
+      restData.data = rest['data'] ?? {};
+      const {
+        organizationId,
+        executeAttributes,
+        queryCondition,
+        dataType,
+        executeWay,
+        cycle,
+        executeContent,
+      } = restData.data as any;
+      await setFieldsValue({
+        ...restData.data,
+        ...setQueryCondition(queryCondition, cycle, executeContent),
+      });
+      if (organizationId) {
+        await getDeviceListByOrg(organizationId);
+        selectDeviceRef.value?.setValue(executeAttributes);
+      }
+      await updateSchema(setAggByDateType(dataType));
+      await updateSchema(disableCustomWeekly(executeWay));
+    } finally {
+      setDrawerProps({ loading: false });
+    }
+  });
+
+  const handleClose = () => resetValue();
+
+  const useThrottle = useThrottleFn(() => {
+    getValue();
+  }, 2000);
+
+  const handleSubmit = () => {
+    useThrottle();
+  };
+
+  const getValue = async () => {
+    try {
+      setDrawerProps({ confirmLoading: true });
+      const values = await validate();
+      if (!values) return;
+      const [queryCondition, cycle, executeContent] = getQueryCondition(values);
+      const executeAttributes = selectDeviceRef.value?.getSelectAttributes();
+      validateSelectDevice(executeAttributes);
+      const data = {
+        ...values,
+        executeAttributes,
+        queryCondition,
+        cycle,
+        executeContent,
+      };
+      removeFields.forEach((item) => {
+        Reflect.deleteProperty(data, item);
+      });
+      businessText.value === BusinessReportConfigTextEnum.BUSINESS_ADD_TEXT
+        ? await createOrEditReportManage(data)
+        : putReportConfigManage({ ...restData.data, ...data });
+      emits('success');
+      createMessage.success(`${businessText.value}成功`);
+      closeDrawer();
+      handleClose();
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  };
+
+  //重置表单
+  const resetValue = () => {
+    resetFields();
+    selectOptions.value = [];
+    selectDeviceRef.value?.resetValue();
+  };
+</script>

 <template>
   <div
+    class="flex"
     v-for="param in dynamicInput.params"
     :key="param.key"
-    style="display: flex; margin-top: 0.25vh"
+    style="margin-top: 1.25vh"
   >
-    <a-input
-      :disabled="true"
-      v-model:value="param.name"
-      style="width: 38%; margin-bottom: 5px; margin-left: 1vh"
-      @change="emitChange"
-    />
+    <a-input :disabled="true" v-model:value="param.name" style="width: 38%; margin-bottom: 5px" />
     <Select
       placeholder="请选择设备属性"
       v-model:value="param.attributes"
-      style="width: 160px; margin-left: 1.8vw"
+      style="width: 38%; margin-left: 1.8vw"
       :options="selectOptions"
       @change="emitChange"
       mode="multiple"
@@ -26,72 +22,66 @@
     inheritAttrs: false,
   };
 </script>
-<script lang="ts" setup>
+<script lang="ts" setup name="SelectAttributes">
   import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
   import { propTypes } from '/@/utils/propTypes';
   import { Select } from 'ant-design-vue';
-  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
+  import { Params } from '../type/';
+  import { useHooks } from '../hooks/index.hooks';
 
-  interface Params {
-    [x: string]: string;
-    attributes: any;
-    device: string;
-  }
   const props = defineProps({
     value: propTypes.object.def({}),
-    orgId: propTypes.string.def(''),
   });
+
   const selectOptions: any = ref([]);
-  //获取对应设备属性
-  const getAttr = async (orgId, _) => {
-    if (orgId) {
-      const res = await getAttribute(orgId);
-      if (Array.isArray(res)) {
-        selectOptions.value = res.map((o) => {
-          let obj: any = {};
-          if (o?.identifier !== null) {
-            obj = {
-              label: o?.identifier,
-              value: o?.identifier,
-            };
-            return obj;
-          }
-        });
-        //如果服务端返回的数组里含有null 过滤null值
-        const excludeNull = selectOptions.value.filter(Boolean);
-        selectOptions.value = excludeNull;
-      }
-    }
-  };
+
+  const { getDeviceAttr } = useHooks();
+
   //动态数据
   const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
-  const rEffect = watchEffect(() => {
-    initVal();
-  });
-  rEffect();
-  /**
-   * 初始化数值
-   */
-  async function initVal() {
+
+  const initVal = async () => {
     if (props.value) {
-      await getAttr(props.value?.deviceProfileId, props.value?.id);
+      selectOptions.value = await getDeviceAttr(props.value?.deviceProfileId);
       dynamicInput.params.push({
         name: props.value.label,
         device: props.value.value,
-        attributes: props.value?.attributes == [] ? [] : props.value.attributes,
+        attributes: props.value.attributes,
       });
     }
-  }
-  /**
-   * 数值改变
-   */
-  function emitChange() {
+  };
+
+  //数值改变
+  const valEffect = watchEffect(() => {
+    initVal();
+  });
+
+  valEffect();
+
+  //chang改变
+  const emitChange = () => {
     return dynamicInput.params[0];
-  }
+  };
   defineExpose({
     emitChange,
   });
 </script>
 <style scoped lang="css">
-  @import './deviceAttrCpns.css';
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 </style>

+<template>
+  <Select
+    placeholder="请选择设备"
+    v-model:value="selectValue"
+    style="width: 100%"
+    :options="selectOptions"
+    @change="handleDeviceChange"
+    mode="multiple"
+    labelInValue
+  />
+  <template v-for="(item, index) in deviceList" :key="item.value">
+    <SelectAttributes :ref="bindDeviceRef.deviceAttrRef" :value="item" :index="index" />
+  </template>
+</template>
+<script lang="ts" setup name="SelectDevice">
+  import { ref, Ref, PropType, unref } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import SelectAttributes from './SelectAttributes.vue';
+  import { TDeviceList, TSelectOption } from '../type';
+
+  const props = defineProps({
+    selectOptions: {
+      type: Array as PropType<TSelectOption[]>,
+      required: true,
+    },
+  });
+
+  const selectValue = ref([]);
+
+  const bindDeviceRef = {
+    deviceAttrRef: ref([]),
+  };
+
+  const deviceList: Ref<TDeviceList[]> = ref([]);
+
+  const getSelectAttributes = () => {
+    return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange());
+  };
+
+  const handleDeviceChange = (_, options) => {
+    deviceList.value = options;
+  };
+
+  const setValue = (value) => {
+    selectValue.value = value.map((item) => ({
+      label: item.name,
+      key: item.device,
+    }));
+    deviceList.value = value?.map((item) => {
+      const T = props.selectOptions.find((o) => {
+        if (item.device === o.value) {
+          return {
+            id: o.id,
+            deviceProfileId: o.deviceProfileId,
+          };
+        }
+      });
+      return {
+        ...T,
+        label: item.alias ? item.alias : item.name,
+        value: item.device,
+        attributes: item.attributes,
+      };
+    });
+  };
+
+  const resetValue = () => {
+    selectValue.value = [];
+    deviceList.value = [];
+  };
+  defineExpose({
+    getSelectAttributes,
+    setValue,
+    resetValue,
+  });
+</script>
+<style scoped lang="css"></style>

+import SelectDevice from './SelectDevice.vue';
+import SelectAttributes from './SelectAttributes.vue';
+import DevicePreviewModal from './DevicePreviewModal.vue';
+import ReportConfigDrawer from './ReportConfigDrawer.vue';
+
+export { SelectDevice, SelectAttributes, DevicePreviewModal, ReportConfigDrawer };

-import { ref } from 'vue';
-import { BasicColumn, FormSchema } from '/@/components/Table';
-import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index';
+import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
+import { FormSchema as BFormSchema, useComponentRegister } from '/@/components/Form/index';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { isTiming, isWeek, isMonth, isFixedTime } from './timeConfig';
-import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
+import { AggregateDataEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
 import {
   getPacketIntervalByRange,
   getPacketIntervalByValue,
   intervalOption,
-} from '../../device/localtion/cpns/TimePeriodForm/helper';
+} from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
 import moment, { Moment } from 'moment';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import {
+  BusinessExecutewayEnum,
+  BusinessReportConfigTextEnum,
+  CycleTypeEnum,
+  DataTypeEnum,
+  DataTypeNameEnum,
+  ExecuteWayNameEnum,
+  QueryWay,
+  SchemaFiled,
+  businesAggOptions,
+  businesCycleTypeOptions,
+  businesDataTypeOptions,
+  businesLimitValue,
+  businesQueryCycleOptions,
+  businesWayOptions,
+  businessExecuteWayOptions,
+  cycleTypeIsMonthly,
+  cycleTypeIsWeekly,
+  cycleTypeSetDefault,
+  exectueIsImmed,
+  exectueIsSchedule,
+} from './enum';
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
-export enum QueryWay {
-  LATEST = 'latest',
-  TIME_PERIOD = 'timePeriod',
-}
-export enum SchemaFiled {
-  WAY = 'queryMode',
-  TIME_PERIOD = 'timePeriod',
-  KEYS = 'keys',
-  DATE_RANGE = 'dataRange',
-  START_TS = 'startTs',
-  END_TS = 'endTs',
-  INTERVAL = 'interval',
-  LIMIT = 'limit',
-  AGG = 'agg',
-  ORDER_BY = 'orderBy',
-  DATA_TYPE = 'dataType',
-}
-
-export enum DataTypeEnum {
-  ORIGINAL = 0,
-  AGG = 1,
-}
-
-export enum DataTypeNameEnum {
-  ORIGINAL = '原始数据',
-  AGG = '聚合数据',
-}
-
-export const organizationId = ref('');
 
-// 表格配置
+// 表格列配置
 export const columns: BasicColumn[] = [
   {
     title: '配置名称',
@@ -75,7 +66,9 @@ export const columns: BasicColumn[] = [
     dataIndex: 'executeWay',
     width: 160,
     format: (_text: string, record: Recordable) => {
-      return record.executeWay === 0 ? '立即执行' : '定时执行';
+      return record.executeWay === BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE
+        ? ExecuteWayNameEnum.EXECUTEWAY_IMMEDIATE
+        : ExecuteWayNameEnum.EXECUTEWAY_SCHEDULED;
     },
   },
   {
@@ -95,20 +88,8 @@ export const columns: BasicColumn[] = [
     width: 180,
   },
 ];
-export const viewDeviceColumn: BasicColumn[] = [
-  {
-    title: '设备',
-    dataIndex: 'device',
-    width: 80,
-  },
-  {
-    title: '属性',
-    dataIndex: 'attribute',
-    width: 120,
-  },
-];
 
-// 查询配置
+// 表格查询配置
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'name',
@@ -152,8 +133,45 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
-// 新增编辑配置
-export const formSchema: QFormSchema[] = [
+//表格通用属性配置
+export const defaultTableAttribtes: BasicTableProps = {
+  title: '报表列表',
+  columns,
+  showIndexColumn: false,
+  clickToRowSelect: false,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  rowKey: 'id',
+  actionColumn: {
+    width: 200,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+};
+
+export const viewDeviceColumn: BasicColumn[] = [
+  {
+    title: '设备',
+    dataIndex: 'device',
+    width: 80,
+  },
+  {
+    title: '属性',
+    dataIndex: 'attribute',
+    width: 120,
+  },
+];
+
+// 表单配置
+export const formSchema: BFormSchema[] = [
   {
     field: 'name',
     label: '报表名称',
@@ -171,13 +189,6 @@ export const formSchema: QFormSchema[] = [
     colProps: { span: 24 },
     component: 'OrgTreeSelect',
     required: true,
-    componentProps: () => {
-      return {
-        async onChange(e) {
-          organizationId.value = e;
-        },
-      };
-    },
   },
   {
     field: 'remark',
@@ -192,64 +203,48 @@ export const formSchema: QFormSchema[] = [
   {
     field: 'executeWay',
     component: 'RadioGroup',
-    helpMessage: [
-      `立即执行，在创建完报表配置后，启用配置即执行。
-    定时执行，用户定义执行时间，启用后，
-    在满足执行时间条件后，自动执行。`,
-    ],
+    helpMessage: [BusinessReportConfigTextEnum.BUSINESS_EXECUTEWAY_HELPMESSAGE_TEXT],
     label: '执行方式',
     colProps: {
       span: 24,
     },
-    defaultValue: 0,
+    defaultValue: BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE,
     componentProps: ({ formActionType }) => {
       const { updateSchema, setFieldsValue } = formActionType;
-      const options = [
-        {
-          label: '立即执行',
-          value: 0,
-        },
-        {
-          label: '定时执行',
-          value: 1,
-        },
-      ];
       return {
-        options,
+        options: businessExecuteWayOptions,
         placeholder: '请选择执行方式',
         onChange(e) {
-          let dataCompareOpions: any = [];
-          setFieldsValue({
-            startTs: 1000,
-            interval: 1000,
-          });
-          if (e.target.value == 0) {
-            setFieldsValue({ queryMode: QueryWay.LATEST });
-            dataCompareOpions = [
-              { label: '固定周期', value: QueryWay.LATEST },
-              { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-            ];
+          //动态切换 最近时间 间隔时间变化
+          const setDefaultTime = (startTs, interval, queryMode) => {
+            setFieldsValue({
+              startTs,
+              interval,
+              queryMode,
+            });
+          };
+          //动态切换 查询周期变化
+          const setQueryMode = (defaultValue, field = SchemaFiled.WAY, comObJ) => {
             updateSchema({
-              field: SchemaFiled.WAY,
-              componentProps: {
-                options: dataCompareOpions,
-              },
+              defaultValue,
+              field,
+              componentProps: comObJ,
+            });
+          };
+          if (e.target.value == BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE) {
+            //业务 选择立即执行
+            setDefaultTime(1000, 1000, QueryWay.LATEST);
+            setQueryMode(null, SchemaFiled.WAY, {
+              options: businesQueryCycleOptions,
             });
           } else {
-            setFieldsValue({ queryMode: QueryWay.LATEST });
-            setFieldsValue({ startTs: 5000 });
-            setFieldsValue({ interval: 1000 });
-            dataCompareOpions = [{ label: '固定周期', value: QueryWay.LATEST }];
-            updateSchema({
-              defaultValue: QueryWay.LATEST,
-              field: SchemaFiled.WAY,
-              componentProps: {
-                options: dataCompareOpions,
-              },
+            //业务 选择定时执行
+            setDefaultTime(5000, 1000, QueryWay.LATEST);
+            setQueryMode(QueryWay.LATEST, SchemaFiled.WAY, {
+              options: businesQueryCycleOptions.filter((item) => item.value === QueryWay.LATEST),
             });
           }
         },
-        maxLength: 250,
       };
     },
   },
@@ -259,16 +254,12 @@ export const formSchema: QFormSchema[] = [
     label: '周期',
     required: true,
     colProps: { span: 24 },
-    defaultValue: 0,
+    defaultValue: CycleTypeEnum.DAILY,
     componentProps: {
       placeholder: '请选择周期',
-      options: [
-        { label: '每日', value: 0 },
-        { label: '每周', value: 1 },
-        { label: '每月', value: 2 },
-      ],
+      options: businesCycleTypeOptions,
     },
-    ifShow: ({ values }) => isTiming(values.executeWay),
+    ifShow: ({ values }) => exectueIsSchedule(values.executeWay),
   },
   {
     field: 'currentCycle',
@@ -276,7 +267,7 @@ export const formSchema: QFormSchema[] = [
     label: '每周',
     required: true,
     colProps: { span: 24 },
-    defaultValue: '0 0 0 ? * MON',
+    defaultValue: cycleTypeSetDefault.WEEKLY,
     componentProps: {
       placeholder: '请选择周期',
       api: findDictItemByCode,
@@ -286,7 +277,8 @@ export const formSchema: QFormSchema[] = [
       labelField: 'itemText',
       valueField: 'itemValue',
     },
-    ifShow: ({ values }) => isWeek(values.cycleType),
+    ifShow: ({ values }) =>
+      exectueIsSchedule(values.executeWay) && cycleTypeIsWeekly(values.cycleType),
   },
   {
     field: 'cycleTime',
@@ -294,7 +286,7 @@ export const formSchema: QFormSchema[] = [
     label: '每月',
     required: true,
     colProps: { span: 24 },
-    defaultValue: '0 0 0 1 * ? *',
+    defaultValue: cycleTypeSetDefault.MONTHLY,
     componentProps: {
       placeholder: '请选择月份',
       api: findDictItemByCode,
@@ -304,7 +296,8 @@ export const formSchema: QFormSchema[] = [
       labelField: 'itemText',
       valueField: 'itemValue',
     },
-    ifShow: ({ values }) => isMonth(values.cycleType),
+    ifShow: ({ values }) =>
+      exectueIsSchedule(values.executeWay) && cycleTypeIsMonthly(values.cycleType),
   },
   {
     field: 'cronTime',
@@ -312,7 +305,7 @@ export const formSchema: QFormSchema[] = [
     label: '时间',
     required: true,
     colProps: { span: 24 },
-    defaultValue: '0 0 0  * * ?',
+    defaultValue: cycleTypeSetDefault.DAILY,
     componentProps: {
       placeholder: '请选择时间',
       api: findDictItemByCode,
@@ -322,12 +315,13 @@ export const formSchema: QFormSchema[] = [
       labelField: 'itemText',
       valueField: 'itemValue',
     },
-    ifShow: ({ values }) => isTiming(values.executeWay),
+    ifShow: ({ values }) =>
+      exectueIsSchedule(values.executeWay) && exectueIsSchedule(values.executeWay),
   },
   {
     field: 'devices',
     label: '设备',
-    component: 'Select',
+    component: 'Input',
     slot: 'devices',
     colProps: { span: 24 },
   },
@@ -338,42 +332,37 @@ export const formSchema: QFormSchema[] = [
     component: 'Select',
     componentProps: ({ formActionType }) => {
       const { updateSchema, setFieldsValue } = formActionType;
-      const options = [
-        { label: DataTypeNameEnum.ORIGINAL, value: DataTypeEnum.ORIGINAL },
-        { label: DataTypeNameEnum.AGG, value: DataTypeEnum.AGG },
-      ];
       return {
-        options,
+        options: businesDataTypeOptions,
         onSelect(e) {
-          let dataCompareOpions: any = [];
-          if (e == 0) {
-            setFieldsValue({ agg: 'NONE' });
-            dataCompareOpions = [{ label: '空', value: AggregateDataEnum.NONE }];
+          setFieldsValue({
+            [SchemaFiled.DATE_RANGE]: [],
+            [SchemaFiled.START_TS]: null,
+            [SchemaFiled.END_TS]: null,
+            [SchemaFiled.INTERVAL]: null,
+            dateGroupGap: null,
+          });
+          const setAgg = (agg, field = SchemaFiled.AGG, comObj) => {
+            setFieldsValue({ agg });
             updateSchema({
-              field: SchemaFiled.AGG,
-              componentProps: {
-                options: dataCompareOpions,
-              },
+              field,
+              componentProps: comObj,
+            });
+          };
+          if (e == DataTypeEnum.ORIGINAL) {
+            //业务 选择原始数据
+            setAgg('NONE', SchemaFiled.AGG, {
+              options: businesAggOptions.filter((item) => item.value === AggregateDataEnum.NONE),
             });
+            setFieldsValue({ limit: businesLimitValue.default });
           } else {
-            setFieldsValue({ agg: '' });
-            dataCompareOpions = [
-              { label: '最小值', value: AggregateDataEnum.MIN },
-              { label: '最大值', value: AggregateDataEnum.MAX },
-              { label: '平均值', value: AggregateDataEnum.AVG },
-              { label: '求和', value: AggregateDataEnum.SUM },
-              { label: '计数', value: AggregateDataEnum.COUNT },
-            ];
-            updateSchema({
-              field: SchemaFiled.AGG,
-              componentProps: {
-                options: dataCompareOpions,
-              },
+            //业务 选择聚合数据
+            setAgg('', SchemaFiled.AGG, {
+              options: businesAggOptions.filter((item) => item.value !== AggregateDataEnum.NONE),
             });
           }
         },
-        maxLength: 250,
-        placeholder: '请选择属性性质',
+        placeholder: '请选择数据类型',
       };
     },
     colProps: { span: 24 },
@@ -393,15 +382,15 @@ export const formSchema: QFormSchema[] = [
     required: true,
     label: '最大条数',
     component: 'InputNumber',
-    defaultValue: 100,
+    defaultValue: businesLimitValue.default,
     ifShow({ values }) {
       return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
     },
-    colProps: { span: 12 },
     componentProps: {
+      style: { width: '10vw' },
       placeholder: '请输入最大条数',
-      min: 7,
-      max: 50000,
+      min: businesLimitValue.min,
+      max: businesLimitValue.max,
     },
   },
   {
@@ -414,18 +403,20 @@ export const formSchema: QFormSchema[] = [
       const { setFieldsValue } = formActionType;
       return {
         placeholder: '请选择查询周期',
-        options: [
-          { label: '固定周期', value: QueryWay.LATEST },
-          { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-        ],
+        options: businesWayOptions,
         onChange(value) {
           value === QueryWay.LATEST
             ? setFieldsValue({
                 [SchemaFiled.DATE_RANGE]: [],
                 [SchemaFiled.START_TS]: null,
                 [SchemaFiled.END_TS]: null,
+                [SchemaFiled.INTERVAL]: null,
+                dateGroupGap: null,
               })
-            : setFieldsValue({ [SchemaFiled.START_TS]: null });
+            : setFieldsValue({
+                [SchemaFiled.START_TS]: null,
+                [SchemaFiled.INTERVAL]: null,
+              });
         },
       };
     },
@@ -436,7 +427,7 @@ export const formSchema: QFormSchema[] = [
     component: 'RangePicker',
     required: true,
     ifShow({ values }) {
-      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && !isFixedTime(values.executeWay);
+      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && exectueIsImmed(values.executeWay);
     },
     componentProps({ formActionType }) {
       const { setFieldsValue } = formActionType;
@@ -462,14 +453,12 @@ export const formSchema: QFormSchema[] = [
         getPopupContainer: () => document.body,
       };
     },
-    colProps: {
-      span: 10,
-    },
   },
   {
     field: 'dateGroupGap',
     label: '分组间隔',
     component: 'Select',
+    colProps: { span: 24 },
     dynamicRules: ({ model }) => {
       return [
         {
@@ -480,7 +469,7 @@ export const formSchema: QFormSchema[] = [
       ];
     },
     ifShow({ values }) {
-      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && !isFixedTime(values.executeWay);
+      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && exectueIsImmed(values.executeWay);
     },
     componentProps({ formModel, formActionType }) {
       const options =
@@ -542,3 +531,5 @@ export const formSchema: QFormSchema[] = [
     },
   },
 ];
+
+export { SchemaFiled };

-.dynamic-delete-button {
-  cursor: pointer;
-  position: relative;
-  top: 4px;
-  font-size: 24px;
-  color: #999;
-  transition: all 0.3s;
-}
-
-.dynamic-delete-button:hover {
-  color: #777;
-}
-
-.dynamic-delete-button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}

+/**
+ * 报表配置相关枚举值定义
+ */
+import { AggregateDataEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
+
+//业务权限配置枚举
+export enum PermissionReportConfigEnum {
+  PERMISSION_POST = 'api:yt:report_form:config:post',
+  PERMISSION_GET = 'api:yt:report:get',
+  PERMISSION_DELETE = 'api:yt:report_form:config:delete',
+  PERMISSION_UPDATE = 'api:yt:report_form:config:update',
+}
+
+//业务文字描述配置枚举
+export enum BusinessReportConfigTextEnum {
+  BUSINESS_ADD_TEXT = '新增报表',
+  BUSINESS_EXPORT_TEXT = '下载报表',
+  BUSINESS_DELETE_TEXT = '批量删除',
+  BUSINESS_VIEW_DEVICE_TEXT = '查看设备',
+  BUSINESS_UPDATE_TEXT = '编辑报表',
+  BUSINESS_ENABLE_TEXT = '启用',
+  BUSINESS_DISABLE_TEXT = '禁用',
+  BUSINESS_VIEW_TEXT = '查看报表',
+  BUSINESS_EXECUTEWAY_HELPMESSAGE_TEXT = `立即执行，在创建完报表配置后，启用配置即执行;
+    定时执行，用户定义执行时间，启用后，
+    在满足执行时间条件后，自动执行。
+    `,
+}
+
+//业务表格状态配置枚举
+export enum BusinessReportConfigStatusEnum {
+  BUSINESS_ENABLE = 0,
+  BUSINESS_DISABLE = 1,
+}
+
+//业务表单执行方式配置枚举
+export enum BusinessExecutewayEnum {
+  BUSINESS_EXECUTEWAY_IMMEDIATE = 0,
+  BUSINESS_EXECUTEWAY_SCHEDULED = 1,
+}
+
+//业务表单查询周期配置枚举
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+//业务表单周期配置枚举
+export enum CycleTypeEnum {
+  DAILY = 0,
+  WEEKLY = 1,
+  MONTHLY = 2,
+}
+
+export enum SchemaFiled {
+  WAY = 'queryMode',
+  TIME_PERIOD = 'timePeriod',
+  KEYS = 'keys',
+  DATE_RANGE = 'dataRange',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  INTERVAL = 'interval',
+  LIMIT = 'limit',
+  AGG = 'agg',
+  ORDER_BY = 'orderBy',
+  DATA_TYPE = 'dataType',
+}
+
+export enum DataTypeEnum {
+  ORIGINAL = 0,
+  AGG = 1,
+}
+
+export enum DataTypeNameEnum {
+  ORIGINAL = '原始数据',
+  AGG = '聚合数据',
+}
+
+//映射执行方式文本值
+export enum ExecuteWayNameEnum {
+  EXECUTEWAY_IMMEDIATE = '立即执行',
+  EXECUTEWAY_SCHEDULED = '定时执行',
+}
+
+//业务表单执行方式配置项
+export const businessExecuteWayOptions = [
+  {
+    label: '立即执行',
+    value: BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE,
+  },
+  {
+    label: '定时执行',
+    value: BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_SCHEDULED,
+  },
+];
+
+//业务表单查询周期配置项
+export const businesQueryCycleOptions = [
+  {
+    label: '固定周期',
+    value: QueryWay.LATEST,
+  },
+  {
+    label: '自定义周期',
+    value: QueryWay.TIME_PERIOD,
+  },
+];
+
+//业务表单周期配置项
+export const businesCycleTypeOptions = [
+  { label: '每日', value: CycleTypeEnum.DAILY },
+  { label: '每周', value: CycleTypeEnum.WEEKLY },
+  { label: '每月', value: CycleTypeEnum.MONTHLY },
+];
+
+//业务表单动态判断是否为定时执行配置项
+export const exectueIsSchedule = (type: number) => {
+  return type === BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_SCHEDULED;
+};
+
+//业务表单动态判断是否为立即执行配置项
+export const exectueIsImmed = (type: number) => {
+  return type === BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE;
+};
+
+//业务表单动态判断是否为每周配置项
+export const cycleTypeIsWeekly = (type: number) => {
+  return type === CycleTypeEnum.WEEKLY;
+};
+
+//业务表单动态判断是否为每月配置项
+export const cycleTypeIsMonthly = (type: number) => {
+  return type === CycleTypeEnum.MONTHLY;
+};
+
+//业务表单每周每日每月默认值配置
+export const cycleTypeSetDefault = {
+  DAILY: '0 0 0  * * ?',
+  WEEKLY: '0 0 0 ? * MON',
+  MONTHLY: '0 0 0 1 * ? *',
+};
+
+//业务表单数据类型配置项
+export const businesDataTypeOptions = [
+  { label: DataTypeNameEnum.ORIGINAL, value: DataTypeEnum.ORIGINAL },
+  { label: DataTypeNameEnum.AGG, value: DataTypeEnum.AGG },
+];
+
+//业务表单聚合条件配置项
+export const businesAggOptions = [
+  { label: '最小值', value: AggregateDataEnum.MIN },
+  { label: '最大值', value: AggregateDataEnum.MAX },
+  { label: '平均值', value: AggregateDataEnum.AVG },
+  { label: '求和', value: AggregateDataEnum.SUM },
+  { label: '计数', value: AggregateDataEnum.COUNT },
+  { label: '空', value: AggregateDataEnum.NONE },
+];
+
+//业务表单最大条数配置项
+export const businesLimitValue = {
+  default: 100,
+  min: 7,
+  max: 50000,
+};
+
+//业务查询周期配置项
+export const businesWayOptions = [
+  { label: '固定周期', value: QueryWay.LATEST },
+  { label: '自定义周期', value: QueryWay.TIME_PERIOD },
+];

+/**
+ * 报表配置所需hooks
+ */
+
+import { ref } from 'vue';
+import {
+  DataTypeEnum,
+  QueryWay,
+  SchemaFiled,
+  businesAggOptions,
+  BusinessExecutewayEnum,
+  businesWayOptions,
+  CycleTypeEnum,
+  BusinessReportConfigTextEnum,
+} from '../enum';
+import moment from 'moment';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { getAttribute, screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
+import { TSelectOption } from '../type';
+import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const useHooks = () => {
+  const { createMessage } = useMessage();
+
+  //获取设备
+  const getDeviceList = async (organizationId) => {
+    const { items } = await screenLinkPageByDeptIdGetDevice({
+      organizationId,
+    });
+    return items?.map((item) => {
+      if (item.deviceType !== DeviceTypeEnum.GATEWAY)
+        return {
+          label: item.alias ? item.alias : item.name,
+          value: item.tbDeviceId,
+          id: item.id,
+          deviceProfileId: item.deviceProfileId,
+        };
+    });
+  };
+
+  //获取对应设备属性
+  const getDeviceAttr = async (deviceProfileId) => {
+    //业务 根据产品id
+    if (!deviceProfileId) return;
+    const res = await getAttribute(deviceProfileId);
+    if (!Array.isArray(res)) return;
+    return res.map((items) => {
+      const item = ref<TSelectOption>();
+      if (items?.identifier !== null) {
+        item.value = {
+          label: items?.identifier,
+          value: items?.identifier,
+        };
+        return item.value;
+      }
+    });
+  };
+
+  //映射查询周期值
+  const mapQueryMode = (queryMode) => {
+    return queryMode === QueryWay.LATEST ? 0 : 1;
+  };
+
+  //映射查询周期文本
+  const mapQueryModeText = (queryMode) => {
+    return queryMode === 0 ? QueryWay.LATEST : QueryWay.TIME_PERIOD;
+  };
+
+  //要删除的字段，不需要传给服务端
+  const removeFields = [
+    'agg',
+    'interval',
+    'queryMode',
+    'startTs',
+    'devices',
+    'dataRange',
+    'cycleType',
+    'currentCycle',
+    'cycleTime',
+    'cronTime',
+    'limit',
+    'dateGroupGap',
+  ];
+
+  //获取表单部分字段组合成queryCondition和cycle对象和根据cron表达式生成executeContent
+  const getQueryCondition = (values) => {
+    const {
+      agg,
+      queryMode,
+      startTs,
+      interval,
+      dateGroupGap,
+      cycleType,
+      currentCycle,
+      cycleTime,
+      cronTime,
+      limit,
+    } = values;
+    const startTsValue = ref();
+    const endTsValue = ref();
+    const intervalValue = ref();
+    if (queryMode === QueryWay.LATEST) {
+      //业务 查询周期为固定周期
+      startTsValue.value = moment().subtract(startTs, 'ms').valueOf();
+      endTsValue.value = Date.now();
+      intervalValue.value = interval;
+    } else {
+      //业务 查询周期为自定义周期
+      const defineDate = JSON.parse(JSON.stringify(values.dataRange));
+      startTsValue.value = moment(defineDate[0]).valueOf();
+      endTsValue.value = moment(defineDate[1]).valueOf();
+      intervalValue.value = dateGroupGap;
+    }
+    const executeContent = ref('');
+    if (cycleType === CycleTypeEnum.WEEKLY) {
+      executeContent.value = cronTime.slice(0, 6) + currentCycle.slice(5);
+    } else if (cycleType === CycleTypeEnum.DAILY) {
+      executeContent.value = cronTime;
+    } else if (cycleType === CycleTypeEnum.MONTHLY) {
+      executeContent.value = cronTime.slice(0, 6) + cycleTime.slice(5);
+    }
+    return [
+      {
+        limit,
+        agg,
+        interval: intervalValue.value,
+        queryMode: mapQueryMode(queryMode),
+        startTs: startTsValue.value,
+        endTs: endTsValue.value,
+      },
+      {
+        cycleType,
+        currentCycle,
+        cycleTime,
+        cronTime,
+      },
+      executeContent.value,
+    ];
+  };
+
+  //新增默认设置部分字段（执行方式，查询周期，最近时间，间隔时间）
+  const setDefaultTime = () => {
+    return {
+      executeWay: BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE,
+      [SchemaFiled.WAY]: QueryWay.LATEST,
+      [SchemaFiled.START_TS]: 1000,
+      [SchemaFiled.INTERVAL]: 1000,
+    };
+  };
+
+  //编辑回显queryCondition和cycle对象
+  const setQueryCondition = (value, cycle, executeContent) => {
+    const conditionObj = ref({});
+    //业务 查询周期是固定周期
+    if (value?.queryMode === 0) {
+      const formatNumber = (value?.endTs - value?.startTs) / 10;
+      const transNumber = Math.floor(formatNumber) * 10;
+      conditionObj.value = {
+        interval: value?.interval,
+        startTs: transNumber,
+        endTs: value?.endTs,
+      };
+    } else {
+      conditionObj.value = {
+        dataRange: [value?.startTs, value?.endTs],
+        dateGroupGap: value?.interval,
+      };
+    }
+    const spanDisance = executeContent?.split(' ');
+    const cronTime =
+      cycle?.cycleType === 2
+        ? spanDisance[2] < 10
+          ? executeContent.slice(0, 7) + '* * ?'
+          : executeContent.slice(0, 7) + ' ' + '* * ?'
+        : cycle?.cycleType === 1
+        ? spanDisance[2] < 10
+          ? executeContent.slice(0, 5) + ' ' + ' * * ?'
+          : executeContent.slice(0, 6) + ' ' + ' * * ?'
+        : executeContent;
+    return {
+      ...value,
+      ...conditionObj.value,
+      ...cycle,
+      cronTime,
+      queryMode: mapQueryModeText(value?.queryMode),
+    };
+  };
+
+  //业务 回显聚合条件如果数据类型是原始数据则只有空
+  const setAggByDateType = (dataType) => {
+    const options = ref([]);
+    if (dataType === DataTypeEnum.ORIGINAL) {
+      options.value = businesAggOptions.filter(
+        (item) => item.value === AggregateDataEnum.NONE
+      ) as any;
+    } else
+      options.value = businesAggOptions.filter(
+        (item) => item.value !== AggregateDataEnum.NONE
+      ) as any;
+    return {
+      field: SchemaFiled.AGG,
+      componentProps: {
+        options: options.value,
+      },
+    };
+  };
+
+  //业务 执行方式为定时执行 查询周期只有固定周期
+  const disableCustomWeekly = (type) => {
+    const options = ref([]);
+    if (type === BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_SCHEDULED) {
+      options.value = businesWayOptions.filter((item) => item.value === QueryWay.LATEST) as any;
+    } else {
+      options.value = businesWayOptions as any;
+    }
+    return {
+      field: SchemaFiled.WAY,
+      componentProps: {
+        options: options.value,
+      },
+    };
+  };
+
+  //Modal弹窗属性
+  const setPropsForModal = (text) => {
+    return {
+      loading: true,
+      title: text,
+      showOkBtn: text !== BusinessReportConfigTextEnum.BUSINESS_VIEW_TEXT,
+      showCancelBtn: text !== BusinessReportConfigTextEnum.BUSINESS_VIEW_TEXT,
+    };
+  };
+
+  //验证设备以及所选属性
+  const validateSelectDevice = (values) => {
+    const throwErrorMsg = () => {
+      createMessage.error('请选择设备及其属性');
+      throw new Error('请选择设备及其属性');
+    };
+    if (Array.isArray(values) && values.length === 0) throwErrorMsg();
+    else {
+      values.forEach((f) => {
+        if (!f.attributes || f.attributes.length == 0) throwErrorMsg();
+      });
+    }
+  };
+
+  return {
+    getDeviceList,
+    getQueryCondition,
+    removeFields,
+    setDefaultTime,
+    getDeviceAttr,
+    setQueryCondition,
+    setAggByDateType,
+    disableCustomWeekly,
+    setPropsForModal,
+    validateSelectDevice,
+  };
+};

 <template>
   <div>
-    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
       <template #toolbar>
-        <Authority value="api:yt:report_form:config:post">
-          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增报表 </a-button>
+        <Authority :value="PermissionReportConfigEnum.PERMISSION_POST">
+          <a-button
+            type="primary"
+            @click="handleBussinessDrawer(BusinessReportConfigTextEnum.BUSINESS_ADD_TEXT, null)"
+          >
+            {{ BusinessReportConfigTextEnum.BUSINESS_ADD_TEXT }}
+          </a-button>
         </Authority>
-        <Authority value="api:yt:report:get">
-          <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button>
+        <Authority :value="PermissionReportConfigEnum.PERMISSION_GET">
+          <a-button type="primary" @click="go('/report/export')">
+            {{ BusinessReportConfigTextEnum.BUSINESS_EXPORT_TEXT }}
+          </a-button>
         </Authority>
-        <Authority value="api:yt:report_form:config:delete">
+        <Authority :value="PermissionReportConfigEnum.PERMISSION_DELETE">
           <Popconfirm
             title="您确定要批量删除数据"
             ok-text="确定"
             cancel-text="取消"
             @confirm="handleDeleteOrBatchDelete(null)"
           >
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+            <a-button type="primary" color="error" :disabled="hasBatchDelete">
+              {{ BusinessReportConfigTextEnum.BUSINESS_DELETE_TEXT }}
+            </a-button>
           </Popconfirm>
         </Authority>
       </template>
       <template #doDeviceSlot="{ record }">
         <a-button type="text" @click="handleDeviceView(record)">
-          <span style="color: #377dff">查看设备</span>
+          <span style="color: #377dff">{{
+            BusinessReportConfigTextEnum.BUSINESS_VIEW_DEVICE_TEXT
+          }}</span>
         </a-button>
       </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
             {
-              label: '查看',
+              label: BusinessReportConfigTextEnum.BUSINESS_VIEW_TEXT.slice(0, 2),
               icon: 'ant-design:eye-outlined',
-              onClick: handleViewDetail.bind(null, record),
+              onClick: handleBussinessDrawer.bind(
+                null,
+                BusinessReportConfigTextEnum.BUSINESS_VIEW_TEXT,
+                record
+              ),
               ifShow: record.status === 1,
             },
             {
-              label: '编辑',
+              label: BusinessReportConfigTextEnum.BUSINESS_UPDATE_TEXT.slice(0, 2),
               icon: 'clarity:note-edit-line',
-              auth: 'api:yt:report_form:config:update',
-              onClick: handleCreateOrEdit.bind(null, record),
+              auth: PermissionReportConfigEnum.PERMISSION_UPDATE,
+              onClick: handleBussinessDrawer.bind(
+                null,
+                BusinessReportConfigTextEnum.BUSINESS_UPDATE_TEXT,
+                record
+              ),
               ifShow: record.status === 0,
             },
             {
-              label: '删除',
+              label: BusinessReportConfigTextEnum.BUSINESS_DELETE_TEXT.slice(2),
               icon: 'ant-design:delete-outlined',
-              auth: 'api:yt:report_form:config:delete',
+              auth: PermissionReportConfigEnum.PERMISSION_DELETE,
               color: 'error',
               ifShow: record.status === 0,
               popConfirm: {
@@ -59,8 +78,8 @@
           :disabled="disabledSwitch"
           :checked="record.status === 1"
           :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
+          :checkedChildren="BusinessReportConfigTextEnum.BUSINESS_ENABLE_TEXT"
+          :unCheckedChildren="BusinessReportConfigTextEnum.BUSINESS_DISABLE_TEXT"
           @change="(checked: boolean) => statusChange(checked, record)"
         />
       </template>
@@ -71,130 +90,96 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, nextTick, ref } from 'vue';
+  import { nextTick, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
-  import ReportConfigDrawer from './ReportConfigDrawer.vue';
-  import DevicePreviewModal from './DevicePreviewModal.vue';
   import {
     reportPage,
     deleteReportManage,
     putReportByidAndStatusManage,
   } from '/@/api/report/reportManager';
-  import { searchFormSchema, columns } from './config.data';
+  import { defaultTableAttribtes } from './config';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm, Switch } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import { useGo } from '/@/hooks/web/usePage';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { ReportConfigDrawer, DevicePreviewModal } from './components';
+  import {
+    PermissionReportConfigEnum,
+    BusinessReportConfigTextEnum,
+    BusinessReportConfigStatusEnum,
+  } from './enum';
 
-  const searchInfo = reactive<Recordable>({});
   const disabledSwitch = ref(false);
 
   const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
-    title: '报表列表',
     api: reportPage,
-    columns,
-    showIndexColumn: false,
-    clickToRowSelect: false,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    rowKey: 'id',
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
+    ...defaultTableAttribtes,
   });
 
-  // 弹框
+  // 业务弹窗
   const [registerDrawer, { openDrawer }] = useDrawer();
+
   const { createMessage } = useMessage();
 
-  // 刷新
   const handleSuccess = () => {
     reload();
   };
 
   const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-    useBatchDelete(deleteReportManage, handleSuccess, setProps);
+    useBatchDelete(deleteReportManage, handleSuccess, setProps) as any;
   selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-    // Demo:status为1的选择框禁用
-    if (record.status === 1) {
+    //业务 status为1 选择框则禁用
+    if (record.status === BusinessReportConfigStatusEnum.BUSINESS_DISABLE)
       return { disabled: true };
-    } else {
-      return { disabled: false };
-    }
+    else return { disabled: false };
   };
 
   nextTick(() => {
     setProps(selectionOptions);
   });
 
-  // 新增或编辑
-  const handleCreateOrEdit = (record: Recordable | null) => {
-    if (record) {
-      openDrawer(true, {
-        isUpdate: true,
-        record,
-        isView: true,
-      });
-    } else {
-      openDrawer(true, {
-        isUpdate: false,
-        isView: true,
-      });
-    }
-  };
-  const handleViewDetail = (record: Recordable) => {
-    if (record) {
-      openDrawer(true, {
-        isUpdate: true,
-        record,
-        isView: false,
-      });
-    }
+  // 业务弹窗
+  const handleBussinessDrawer = (text, record) => {
+    const modalParams = {
+      text,
+      record,
+    };
+    openDrawer(true, modalParams);
   };
 
   //查看设备
   const [registerModal, { openModal }] = useModal();
+
   const handleDeviceView = (record) => {
     openModal(true, {
       isUpdate: true,
       record,
     });
   };
+
+  const setPropsLoading = (loading) => {
+    setProps({
+      loading,
+    });
+    setSelectedRowKeys([]);
+    resetSelectedRowKeys();
+  };
+
   const statusChange = async (checked, record) => {
     try {
-      setProps({
-        loading: true,
-      });
-      setSelectedRowKeys([]);
-      resetSelectedRowKeys();
+      setPropsLoading(true);
       disabledSwitch.value = true;
       const newStatus = checked ? 1 : 0;
       const res = await putReportByidAndStatusManage(record.id, newStatus);
-      if (res && newStatus) {
-        createMessage.success(`启用成功`);
-      } else {
-        createMessage.success('禁用成功');
-      }
+      if (res && newStatus)
+        createMessage.success(`${BusinessReportConfigTextEnum.BUSINESS_ENABLE_TEXT}成功`);
+      else createMessage.success(`${BusinessReportConfigTextEnum.BUSINESS_DISABLE_TEXT}成功`);
     } finally {
-      setTimeout(() => {
-        setProps({
-          loading: false,
-        });
-        disabledSwitch.value = false;
-      }, 500);
+      setPropsLoading(false);
+      disabledSwitch.value = false;
       reload();
     }
   };

-interface IOptionConfig {
-  label: string;
-  value: number;
-}
-
-export const optionsConfig: IOptionConfig[] = [
-  {
-    label: '1秒',
-    value: 1000,
-  },
-  {
-    label: '5秒',
-    value: 5000,
-  },
-  {
-    label: '10秒',
-    value: 10000,
-  },
-  {
-    label: '15秒',
-    value: 15000,
-  },
-  {
-    label: '30秒',
-    value: 30000,
-  },
-  {
-    label: '1分钟',
-    value: 60000,
-  },
-  {
-    label: '2分钟',
-    value: 120000,
-  },
-  {
-    label: '5分钟',
-    value: 300000,
-  },
-  {
-    label: '10分钟',
-    value: 600000,
-  },
-  {
-    label: '15分钟',
-    value: 900000,
-  },
-  {
-    label: '30分钟',
-    value: 1800000,
-  },
-  {
-    label: '1小时',
-    value: 3600000,
-  },
-  {
-    label: '2小时',
-    value: 7200000,
-  },
-  {
-    label: '5小时',
-    value: 18000000,
-  },
-  {
-    label: '10小时',
-    value: 36000000,
-  },
-  {
-    label: '12小时',
-    value: 43200000,
-  },
-  {
-    label: '1天',
-    value: 86400000,
-  },
-];
-
-export enum TypeEnum {
-  IS_TIMING = 1,
-  IS_WEEK = 1,
-  IS_MONTH = 2,
-  IS_EMPTY = 'NONE',
-  IS_DEFAULT_WEEK = 'defaultIsWeek',
-  IS_FIXED_WEEK = '2',
-  IS_MIN = 'MIN',
-  IS_MAX = 'MAX',
-  IS_AVG = 'AVG',
-  IS_SUM = 'SUM',
-  COUNT = 'COUNT',
-  IS_FIXED_TIME = 1,
-}
-
-export enum AggregateDataEnum {
-  MIN = 'MIN',
-  MAX = 'MAX',
-  AVG = 'AVG',
-  SUM = 'SUM',
-  COUNT = 'COUNT',
-  NONE = 'NONE',
-}
-export const isFixedTime = (type: string) => {
-  return type === TypeEnum.IS_FIXED_TIME;
-};
-
-export const isTiming = (type: string) => {
-  return type === TypeEnum.IS_TIMING;
-};
-
-export const isWeek = (type: string) => {
-  return type === TypeEnum.IS_WEEK;
-};
-
-export const isMonth = (type: string) => {
-  return type === TypeEnum.IS_MONTH;
-};
-
-export const isEmpty = (type: string) => {
-  return type === TypeEnum.IS_EMPTY;
-};
-
-export const isDefultWeek = (type: string) => {
-  return type === TypeEnum.IS_DEFAULT_WEEK;
-};
-export const isFixedWeek = (type: string) => {
-  return type === TypeEnum.IS_FIXED_WEEK;
-};
-
-export const isMin = (type: string) => {
-  return type === TypeEnum.IS_MIN;
-};
-
-export const isMax = (type: string) => {
-  return type === TypeEnum.IS_MAX;
-};
-
-export const isAvg = (type: string) => {
-  return type === TypeEnum.IS_AVG;
-};
-export const isSum = (type: string) => {
-  return type === TypeEnum.IS_SUM;
-};
-
-export const isCountAll = (type: string) => {
-  return type === TypeEnum.COUNT;
-};

+/**
+ * 报表配置相关类型定义
+ */
+
+//设备列表类型定义
+export type TDeviceList = {
+  key?: string;
+  value?: string;
+  label?: string;
+  attribute?: string;
+  device?: string;
+  name?: string;
+  attributes?: string | undefined;
+  deviceProfileId?: string;
+  id?: string;
+};
+
+//设备下拉框类型定义
+export type TSelectOption = {
+  label: string;
+  value: string;
+  deviceProfileId?: string;
+  id?: string;
+};
+
+//设备属性
+export interface Params {
+  [x: string]: string;
+  attributes: any;
+  device: string;
+}

-.wrapper {
-  margin: 10px 60px 60px 60px;
-}
-
-.inner {
-  width: 400px;
-  height: 400px;
-}
-
-.item {
-  text-align: center;
-  font-size: 200%;
-  color: #fff;
-}

@@ -306,7 +306,20 @@
   });
 </script>
 <style lang="less" scoped>
-  @import url('./ReportPreviewModal.less');
+  .wrapper {
+    margin: 10px 60px 60px 60px;
+  }
+
+  .inner {
+    width: 400px;
+    height: 400px;
+  }
+
+  .item {
+    text-align: center;
+    font-size: 200%;
+    color: #fff;
+  }
 
   .chart-style {
     display: flex;

+import ReportPreviewModal from './ReportPreviewModal.vue';
+
+export { ReportPreviewModal };

-import { BasicColumn, FormSchema } from '/@/components/Table';
+import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
 import moment from 'moment';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
+import { DataTypeNameEnum, ExecuteWayNameEnum } from '../config/enum';
 
 // 表格配置
 export const columns: BasicColumn[] = [
@@ -20,7 +21,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'dataType',
     width: 120,
     format: (_text: string, record: Recordable) => {
-      return record.dataCompare === 0 ? '原始数据' : '聚合数据';
+      return record.dataCompare === 0 ? DataTypeNameEnum.ORIGINAL : DataTypeNameEnum.AGG;
     },
   },
   {
@@ -28,7 +29,9 @@ export const columns: BasicColumn[] = [
     dataIndex: 'executeWay',
     width: 120,
     format: (_text: string, record: Recordable) => {
-      return record.executeWay === 0 ? '立即执行' : '定时执行';
+      return record.executeWay === 0
+        ? ExecuteWayNameEnum.EXECUTEWAY_IMMEDIATE
+        : ExecuteWayNameEnum.EXECUTEWAY_SCHEDULED;
     },
   },
   {
@@ -49,7 +52,7 @@ export const columns: BasicColumn[] = [
   },
 ];
 
-// 查询配置
+// 表格查询配置
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'reportConfigName',
@@ -96,3 +99,27 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 6 },
   },
 ];
+
+//表格通用属性配置
+export const defaultTableAttribtes: BasicTableProps = {
+  title: '报表导出列表',
+  columns,
+  showIndexColumn: false,
+  clickToRowSelect: false,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  rowKey: 'id',
+  actionColumn: {
+    width: 200,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+};

+/**
+ * 报表导出相关枚举值定义
+ */
+
+//业务权限配置枚举
+export enum PermissionReportExportEnum {
+  PERMISSION_GET = 'api:yt:reportExport:get',
+  PERMISSION_EXPORT = 'api:yt:reportExport:export',
+  PERMISSION_DELETE = 'api:yt:report:generate:record:delete',
+}
+
+//业务文字描述配置枚举
+export enum BusinessReportExportTextEnum {
+  BUSINESS_EXPORT_TEXT = '报表导出',
+  BUSINESS_DELETE_TEXT = '批量删除',
+  BUSINESS_VIEW_TEXT = '报表查看',
+}

 <template>
   <div>
-    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
       <template #toolbar>
-        <Authority value="api:yt:report:generate:record:delete">
+        <Authority :value="PermissionReportExportEnum.PERMISSION_DELETE">
           <Popconfirm
             title="您确定要批量删除数据"
             ok-text="确定"
             cancel-text="取消"
             @confirm="handleDeleteOrBatchDelete(null)"
           >
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+            <a-button type="primary" color="error" :disabled="hasBatchDelete">
+              {{ BusinessReportExportTextEnum.BUSINESS_DELETE_TEXT }}
+            </a-button>
           </Popconfirm>
         </Authority>
       </template>
@@ -17,9 +19,9 @@
         <TableAction
           :actions="[
             {
-              label: '报表导出',
+              label: BusinessReportExportTextEnum.BUSINESS_EXPORT_TEXT,
               icon: 'ant-design:dot-chart-outlined',
-              auth: 'api:yt:reportExport:export',
+              auth: PermissionReportExportEnum.PERMISSION_EXPORT,
               ifShow: record.executeStatus === 1,
               popConfirm: {
                 title: '是否需要导出',
@@ -27,15 +29,15 @@
               },
             },
             {
-              label: '报表查看',
+              label: BusinessReportExportTextEnum.BUSINESS_VIEW_TEXT,
               icon: 'clarity:note-edit-line',
-              auth: 'api:yt:reportExport:get',
+              auth: PermissionReportExportEnum.PERMISSION_GET,
               onClick: handleView.bind(null, record),
             },
             {
-              label: '删除',
+              label: BusinessReportExportTextEnum.BUSINESS_DELETE_TEXT.slice(2),
               icon: 'ant-design:delete-outlined',
-              auth: 'api:yt:report:generate:record:delete',
+              auth: PermissionReportExportEnum.PERMISSION_DELETE,
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
@@ -51,40 +53,21 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, nextTick } from 'vue';
+  import { nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { searchFormSchema, columns } from './config.data';
+  import { defaultTableAttribtes } from './config';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
-  import ReportPreviewModal from './ReportPreviewModal.vue';
+  import { ReportPreviewModal } from './components';
   import { exportPage, deleteExportManage } from '/@/api/export/exportManager';
   import { downloadByUrl } from '/@/utils/file/download';
+  import { PermissionReportExportEnum, BusinessReportExportTextEnum } from './enum';
 
-  const searchInfo = reactive<Recordable>({});
   const [registerTable, { reload, setProps }] = useTable({
-    title: '报表导出列表',
     api: exportPage,
-    columns,
-    showIndexColumn: false,
-    clickToRowSelect: false,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    rowKey: 'id',
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
+    ...defaultTableAttribtes,
   });
 
   const handleSuccess = () => {
@@ -101,19 +84,23 @@
     setProps(selectionOptions);
   });
 
+  //业务弹窗
   const [registerModal, { openModal }] = useModal();
+
   const handleView = (record) => {
     openModal(true, {
       isUpdate: true,
       record,
     });
   };
+
   const exportUrlsFunc = (fUrl) => {
     const options: any = {
       url: fUrl,
     };
     downloadByUrl(options);
   };
+
   const handleExport = (record) => {
     if (record.reportPath) {
       const urls = record.reportPath.split(',');