feat：pc端新增报表管理 未调服务端接口

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="55rem"
+      :height="heightNum"
+      @register="register"
+      title="执行设备及属性"
+      @cancel="handleCancel"
+      :showOkBtn="false"
+    >
+      <div>
+        <BasicTable @register="registerTable" :dataSource="tableData" />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { viewDeviceColumn } from './config.data';
+
+  const heightNum = ref(800);
+  const tableData: any = ref([]);
+  const [registerTable] = useTable({
+    title: '执行设备及属性',
+    columns: viewDeviceColumn,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+  const [register] = useModalInner((data) => {
+    console.log(data);
+    const getTableData = () => {
+      for (let i = 0; i < 100; i++) {
+        tableData.value.push({
+          tdDevice: `设备${i}`,
+          attr: `CO${i}、Temp${i}`,
+        });
+      }
+    };
+    nextTick(() => {
+      getTableData();
+    });
+  });
+  const handleCancel = () => {};
+</script>
+<style></style>

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, nextTick } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const editId = ref('');
+  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      await nextTick();
+      editId.value = data.record.id;
+      await setFieldsValue(data.record);
+    } else {
+      editId.value = '';
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
+
+  async function handleSubmit() {
+    setDrawerProps({ confirmLoading: true });
+    try {
+      const { createMessage } = useMessage();
+      const values = await validate();
+      if (!values) return;
+      let saveMessage = '添加成功';
+      let updateMessage = '修改成功';
+      await createOrEditCameraManage(values);
+      closeDrawer();
+      emit('success');
+      createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+    } finally {
+      setTimeout(() => {
+        setDrawerProps({ confirmLoading: false });
+      }, 300);
+    }
+  }
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import type { FormSchema as QFormSchema } from '/@/components/Form/index';
+import moment from 'moment';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
+import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
+
+export enum TypeEnum {
+  IS_TIMING = 'TIMING',
+  IS_WEEK = 'week',
+  IS_MONTH = 'month',
+}
+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 enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '配置名称',
+    dataIndex: '1',
+    width: 80,
+  },
+  {
+    title: '所属组织',
+    dataIndex: '2',
+    width: 120,
+  },
+  {
+    title: '数据类型',
+    dataIndex: '3',
+    width: 120,
+  },
+  {
+    title: '配置状态',
+    dataIndex: '4',
+    width: 120,
+  },
+  {
+    title: '执行方式',
+    dataIndex: '5',
+    width: 160,
+  },
+  {
+    title: '执行设备',
+    dataIndex: '6',
+    width: 160,
+    slots: { customRender: 'doDeviceSlot' },
+  },
+  {
+    title: '创建人',
+    dataIndex: '7',
+    width: 180,
+  },
+  {
+    title: '创建日期',
+    dataIndex: '8',
+    width: 180,
+  },
+];
+export const viewDeviceColumn: BasicColumn[] = [
+  {
+    title: '设备',
+    dataIndex: 'tdDevice',
+    width: 80,
+  },
+  {
+    title: '属性',
+    dataIndex: 'attr',
+    width: 120,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: '1',
+    label: '配置名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: '2',
+    label: '配置状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '启用',
+          value: 1,
+        },
+        {
+          label: '禁用',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择配置状态',
+    },
+  },
+  {
+    field: '3',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];
+
+// 新增编辑配置
+export const formSchema: QFormSchema[] = [
+  {
+    field: '1',
+    label: '报表名称',
+    colProps: { span: 24 },
+    helpMessage: ['报表配置', '只对拥有数值型属性', '的设备才能配置'],
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入报表名称',
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    colProps: { span: 24 },
+    component: 'ApiTreeSelect',
+    required: true,
+    componentProps: ({ formActionType }) => {
+      const { updateSchema } = formActionType;
+      return {
+        async onChange(e) {
+          if (e) {
+            //获取该组织下的设备
+            const { items } = await screenLinkPageByDeptIdGetDevice({
+              organizationId: e,
+            });
+            const options = items.map((item) => {
+              return {
+                label: item.name,
+                value: item.tbDeviceId,
+              };
+            });
+            updateSchema({
+              field: 'entityId',
+              componentProps: {
+                options,
+                async onChange(e1) {
+                  if (e1) {
+                    const res = await getAttribute(e, e1.join(','));
+                    const attr = res.map((item) => {
+                      return {
+                        label: item,
+                        value: item,
+                      };
+                    });
+                    updateSchema({
+                      field: 'attr',
+                      componentProps: {
+                        options: attr,
+                      },
+                    });
+                  }
+                },
+              },
+            });
+          }
+        },
+        maxLength: 250,
+        placeholder: '请选择所属组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
+          return data;
+        },
+      };
+    },
+  },
+  {
+    field: '3',
+    label: '描述',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+  {
+    field: 'actionS',
+    component: 'RadioGroup',
+    label: '执行方式',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择执行方式',
+      options: [
+        {
+          label: '立即执行',
+          value: '1',
+        },
+        {
+          label: '定时执行',
+          value: 'TIMING',
+        },
+      ],
+    },
+  },
+  {
+    field: 'timeWeek',
+    component: 'Select',
+    label: '周期',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '每日', value: 'day' },
+        { label: '每周', value: 'week' },
+        { label: '每月', value: 'month' },
+      ],
+    },
+    ifShow: ({ values }) => isTiming(values.actionS),
+  },
+  {
+    field: '5',
+    component: 'Select',
+    label: '每周',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '星期一', value: '1' },
+        { label: '星期二', value: '2' },
+        { label: '星期三', value: '3' },
+        { label: '星期四', value: '3' },
+        { label: '星期五', value: '3' },
+      ],
+    },
+    ifShow: ({ values }) => isWeek(values.timeWeek),
+  },
+  {
+    field: '5',
+    component: 'Select',
+    label: '每月',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '1日', value: '1' },
+        { label: '2日', value: '7' },
+        { label: '3日', value: '30' },
+      ],
+    },
+    ifShow: ({ values }) => isMonth(values.timeWeek),
+  },
+  {
+    field: '6',
+    component: 'Select',
+    label: '时间',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择时间',
+      options: [
+        { label: '00点', value: '1' },
+        { label: '01点', value: '2' },
+        { label: '02点', value: '3' },
+      ],
+    },
+    ifShow: ({ values }) => isTiming(values.actionS),
+  },
+  {
+    field: 'entityId',
+    label: '设备',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择设备',
+      mode: 'multiple',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '7',
+    component: 'RadioGroup',
+    label: '属性性质',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择属性性质',
+      options: [
+        {
+          label: '共有',
+          value: '1',
+        },
+        {
+          label: '全部',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'attr',
+    label: '设备属性',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择设备属性',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '9',
+    label: '数据类型',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择数据类型',
+      options: [
+        { label: '历史数据', value: '1' },
+        { label: '同比', value: '2' },
+        { label: '环比', value: '2' },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '10',
+    label: '聚合条件',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择聚合条件',
+      options: [
+        {
+          label: '平均值',
+          value: AggregateDataEnum.AVG,
+        },
+        {
+          label: '总和',
+          value: AggregateDataEnum.SUM,
+        },
+        {
+          label: '最大值',
+          value: AggregateDataEnum.MAX,
+        },
+        {
+          label: '最小值',
+          value: AggregateDataEnum.MIN,
+        },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '9',
+    label: '查询周期',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择查询周期',
+      options: [
+        { label: '1分钟', value: '60000' },
+        { label: '2分钟', value: '120000' },
+        { label: '3分钟', value: '180000' },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '10',
+    label: '间隔时间',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择间隔时间',
+      options: [
+        { label: '1秒', value: '1000' },
+        { label: '5秒', value: '5000' },
+        { label: '10秒', value: '10000' },
+        { label: '15秒', value: '150000' },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="api:yt:report:post">
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增报表 </a-button>
+        </Authority>
+        <Authority value="api:yt:report:get">
+          <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button>
+        </Authority>
+        <Authority value="api:yt:report:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #doDeviceSlot="{ record }">
+        <a-button type="text" @click="handleDeviceView(record)">
+          <span style="color: #377dff">查看设备</span>
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:report:update',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: 'api:yt:report:delete',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" />
+    <DevicePreviewModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick } 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 { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, setProps }] = useTable({
+    title: '报表列表',
+    api: cameraPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  // 弹框
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  // 刷新
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteCameraManage,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  // 新增或编辑
+  const handleCreateOrEdit = (record: Recordable | null) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record,
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  //查看设备
+  const [registerModal, { openModal }] = useModal();
+  const handleDeviceView = (record) => {
+    openModal(true, {
+      isUpdate: true,
+      record,
+    });
+  };
+  const go = useGo();
+</script>

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="55rem"
+      :height="heightNum"
+      @register="register"
+      title="报表趋势图"
+      @cancel="handleCancel"
+      :showOkBtn="false"
+    >
+      <div ref="chartRef" :style="{ height, width }"></div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, PropType, Ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  defineProps({
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: 'calc(100vh - 378px)',
+    },
+  });
+  defineEmits(['register']);
+  const heightNum = ref(800);
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const [register] = useModalInner((data) => {
+    console.log(data);
+    nextTick(() => {
+      setOptions({
+        title: {
+          text: '报表趋势图',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          data: ['CO', 'CO2'],
+        },
+        toolbox: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: false,
+        },
+        series: [
+          {
+            name: 'CO',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 230, 224, 218, 135, 147, 260],
+          },
+          {
+            name: 'CO2',
+            type: 'line',
+            stack: 'Total',
+            data: [15, 23, 22, 28, 15, 17, 20],
+          },
+        ],
+      });
+    });
+  });
+
+  const handleCancel = () => {};
+</script>
+<style>
+  .video-sty {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '配置名称',
+    dataIndex: '1',
+    width: 80,
+  },
+  {
+    title: '所属组织',
+    dataIndex: '2',
+    width: 120,
+  },
+  {
+    title: '数据类型',
+    dataIndex: '3',
+    width: 120,
+  },
+  {
+    title: '执行状态',
+    dataIndex: '4',
+    width: 120,
+  },
+  {
+    title: '执行日期',
+    dataIndex: '8',
+    width: 180,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: '1',
+    label: '配置名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: '2',
+    label: '执行状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '进行中',
+          value: 1,
+        },
+        {
+          label: '成功',
+          value: 0,
+        },
+        {
+          label: '失败',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择执行状态',
+    },
+  },
+  {
+    field: '3',
+    label: '执行时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="api:yt:reportExport:export">
+          <a-button type="primary" @click="exportCharts"> 导出报表 </a-button>
+        </Authority>
+        <Authority value="api:yt:reportExport:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:reportExport:get',
+              onClick: handleView.bind(null, record),
+            },
+            {
+              label: '导出报表',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:reportExport:export',
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: 'api:yt:reportExport:delete',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ReportPreviewModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
+  import { searchFormSchema, columns } from './config.data';
+  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';
+
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, setProps }] = useTable({
+    title: '报表导出列表',
+    api: cameraPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteCameraManage,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+  const handleView = (_, record) => {
+    openModal(true, {
+      isUpdate: true,
+      record,
+    });
+  };
+  const exportCharts = () => {};
+</script>