diff --git a/config/routes.ts b/config/routes.ts
index 91bafa4..9b973f0 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -126,6 +126,16 @@ export default [
     name: 'DCSDevice',
     path: '/DCSDevice',
     routes: [{
+      'name': 'DCSDevice-device-group-list',
+      'path': '/DCSDevice/device-group-list',
+      'component': 'DCSDevice/DeviceGroupList',
+      'access': 'canReadMenu'
+    },{
+      'name': 'DCSDevice-device-category-list',
+      'path': '/DCSDevice/device-category-list',
+      'component': 'DCSDevice/DeviceCategoryList',
+      'access': 'canReadMenu'
+    },{
       'name': 'DCSDevice-device-list',
       'path': '/DCSDevice/device-list',
       'component': 'DCSDevice/DeviceList',
diff --git a/src/locales/zh-CN/DCSDevice.ts b/src/locales/zh-CN/DCSDevice.ts
index bd9921a..8d86d06 100644
--- a/src/locales/zh-CN/DCSDevice.ts
+++ b/src/locales/zh-CN/DCSDevice.ts
@@ -7,6 +7,15 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
+// 设备类别
+export const DCSDevice_group_list: { [key: string]: string } = {
+    'DCSDeviceList.device_group.table.list.name': '设备名称'
+}
+
+// 设备类别
+export const DCSDevice_category_list: { [key: string]: string } = {
+    'DCSDeviceList.device_category.table.list.name': '设备名称'
+}
 
 // 设备列表
 export const DCSDevice_list: { [key: string]: string } = {
diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts
index 8c231ec..569de68 100644
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
@@ -72,5 +72,7 @@ export default {
   'menu.device.device-relation-list': '设备版本列表',
   'menu.resource.algorithm-model-detail': '模型详情',
   'menu.DCSDevice.DCSDevice-device-status': '设备状态',
-  'menu.DCSDevice.DCSDevice-device-list': '设备列表'
+  'menu.DCSDevice.DCSDevice-device-list': '设备列表',
+  'menu.DCSDevice.DCSDevice-device-category-list': '设备类别',
+  'menu.DCSDevice.DCSDevice-device-group-list': '设备组'
 };
diff --git a/src/pages/DCSDevice/DeviceCategoryList/components/ColumnDrawer.tsx b/src/pages/DCSDevice/DeviceCategoryList/components/ColumnDrawer.tsx
new file mode 100644
index 0000000..208d446
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceCategoryList/components/ColumnDrawer.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {Drawer} from "antd";
+import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
+
+export type ColumnDrawProps = {
+  handleDrawer: (id?: any)=>void;
+  isShowDetail: boolean;
+  columns: ProColumns<API.DeviceCategory>[];
+  currentRow: API.DeviceCategory | undefined;
+};
+
+
+const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
+
+  return (
+    <Drawer
+      width={500}
+      open={props.isShowDetail}
+      onClose={() => {
+        props.handleDrawer();
+      }}
+      closable={true}
+    >
+      {props.currentRow?.id && (
+        <ProDescriptions<API.DeviceCategory>
+          column={2}
+          title={props.currentRow?.id}
+          request={async () => ({
+            data: props.currentRow || {},
+          })}
+          params={{
+            id: props.currentRow?.id,
+          }}
+          columns={props.columns as ProDescriptionsItemProps<API.DeviceCategory>[]}
+        />
+      )}
+    </Drawer>
+  )
+}
+export {ColumnDrawer}
+
diff --git a/src/pages/DCSDevice/DeviceCategoryList/components/Columns.tsx b/src/pages/DCSDevice/DeviceCategoryList/components/Columns.tsx
new file mode 100644
index 0000000..45d6c35
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceCategoryList/components/Columns.tsx
@@ -0,0 +1,32 @@
+import { FormattedMessage} from '@umijs/max';
+export const DeviceCategoryColumns = [{
+           title: (<FormattedMessage
+               id="device.device_category.table.list.id"
+               defaultMessage="$$$"/>),
+           dataIndex: "id",
+       },{
+           title: (<FormattedMessage
+               id="device.device_category.table.list.name"
+               defaultMessage="$$$"/>),
+           dataIndex: "name",
+       },{
+           title: (<FormattedMessage
+               id="device.device_category.table.list.code"
+               defaultMessage="$$$"/>),
+           dataIndex: "code",
+       },{
+           title: (<FormattedMessage
+               id="device.device_category.table.list.remark"
+               defaultMessage="$$$"/>),
+           dataIndex: "remark",
+       },{
+           title: (<FormattedMessage
+               id="device.device_category.table.list.createTime"
+               defaultMessage="$$$"/>),
+           dataIndex: "create_time",
+       },{
+           title: (<FormattedMessage
+               id="device.device_category.table.list.updateTime"
+               defaultMessage="$$$"/>),
+           dataIndex: "update_time",
+       },]
diff --git a/src/pages/DCSDevice/DeviceCategoryList/components/CreateForm.tsx b/src/pages/DCSDevice/DeviceCategoryList/components/CreateForm.tsx
new file mode 100644
index 0000000..abf8d84
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceCategoryList/components/CreateForm.tsx
@@ -0,0 +1,143 @@
+import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory';
+import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, Switch, message } from 'antd';
+import React, { useState } from 'react';
+import {
+  proFormSmallItemStyleProps,
+  proFormSmallModelWidth,
+} from '../../../../../config/defaultForm';
+export type FormValueType = {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
+} & Partial<API.DeviceCategory>;
+
+export type CreateFormProps = {
+  createModalOpen: boolean;
+  handleModal: () => void;
+  values: Partial<API.DeviceCategory>;
+  reload: any;
+};
+const CreateForm: React.FC<CreateFormProps> = (props) => {
+  const intl = useIntl();
+  const [isAuto, setIsAuto] = useState(true);
+  const [form] = Form.useForm<API.DeviceCategory>();
+
+  return (
+    <ModalForm<API.DeviceCategory>
+      width={proFormSmallModelWidth}
+      title={intl.formatMessage({
+        id: 'device.device_category.table.list.add',
+        defaultMessage: '$$$',
+      })}
+      open={props.createModalOpen}
+      form={form}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => props.handleModal(),
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        postDeviceCategoryCreateDeviceCategory(values)
+          .then(() => {
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+            props.reload();
+          })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
+        props.handleModal();
+        return true;
+      }}
+    >
+      <ProForm.Group>
+        <ProFormText
+          width={proFormSmallItemStyleProps.width}
+          name="name"
+          label={
+            <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="device.device_category.table.rule.required.name"
+                  defaultMessage="name is required"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          width="lg"
+          name="code"
+          label={
+            <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={!isAuto}
+          initialValue=""
+          disabled={isAuto}
+          rules={
+            isAuto
+              ? []
+              : [
+                  {
+                    required: true,
+                    message: (
+                      <FormattedMessage
+                        id="device.device_category.table.rule.required.code"
+                        defaultMessage="code is required"
+                      />
+                    ),
+                  },
+                ]
+          }
+          addonAfter={
+            <Switch
+              checked={isAuto}
+              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
+              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
+              onChange={setIsAuto}
+            />
+          }
+        />
+        <ProFormText
+          width={proFormSmallItemStyleProps.width}
+          name="remark"
+          label={
+            <FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
+export default CreateForm;
diff --git a/src/pages/DCSDevice/DeviceCategoryList/components/UpdateForm.tsx b/src/pages/DCSDevice/DeviceCategoryList/components/UpdateForm.tsx
new file mode 100644
index 0000000..4be2c5b
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceCategoryList/components/UpdateForm.tsx
@@ -0,0 +1,187 @@
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-11-01 13:56:33
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-11-17 10:12:53
+ * @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
+import { ModalForm, ProForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import React from 'react';
+export type FormValueType = {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
+} & Partial<API.DeviceCategory>;
+
+export type UpdateFormProps = {
+  updateModalOpen: boolean;
+  handleModal: () => void;
+  values: Partial<API.DeviceCategory>;
+  reload: any;
+};
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const intl = useIntl();
+  const [form] = Form.useForm<API.DeviceCategory>();
+
+  return (
+    <ModalForm<API.DeviceCategory>
+    width={proFormModelWidth}
+      title={intl.formatMessage({
+        id: 'device.device_category.table.list.update',
+        defaultMessage: '$$$',
+      })}
+      open={props.updateModalOpen}
+      form={form}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => props.handleModal(),
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        putDeviceCategoryUpdateDeviceCategory(values)
+          .then(() => {
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+            props.reload();
+          })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
+
+        props.handleModal();
+        return true;
+      }}
+    >
+      <ProForm.Group>
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="id"
+          label="id"
+          disabled={true}
+          initialValue={props.values.id}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="name"
+          label={
+            <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.name}
+          disabled={false}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="device.device_category.table.rule.required.name"
+                  defaultMessage="name is required"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="code"
+          label={
+            <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.code}
+          disabled={false}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="device.device_category.table.rule.required.code"
+                  defaultMessage="code is required"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="remark"
+          label={
+            <FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.remark}
+          disabled={false}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="createTime"
+          label={
+            <FormattedMessage
+              id="device.device_category.table.list.createTime"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.createTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.createTime}
+          disabled={true}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="updateTime"
+          label={
+            <FormattedMessage
+              id="device.device_category.table.list.updateTime"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.updateTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.updateTime}
+          disabled={true}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
+export default UpdateForm;
diff --git a/src/pages/DCSDevice/DeviceCategoryList/index.tsx b/src/pages/DCSDevice/DeviceCategoryList/index.tsx
new file mode 100644
index 0000000..2344320
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceCategoryList/index.tsx
@@ -0,0 +1,291 @@
+import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
+import TableActionCard from '@/components/TableActionCard';
+import IsDelete from '@/components/TableActionCard/isDelete';
+import {
+  deleteDeviceCategoryDeleteDeviceCategory,
+  deleteDeviceCategoryDeleteDeviceCategoryByIds,
+  postDeviceCategoryGetDeviceCategoryList,
+} from '@/services/device/DeviceCategory';
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { PageContainer, ProTable } from '@ant-design/pro-components';
+import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
+import { Button, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
+import { ColumnDrawer } from './components/ColumnDrawer';
+import CreateForm from './components/CreateForm';
+import UpdateForm from './components/UpdateForm';
+const DeviceCategoryList: React.FC = () => {
+  /**
+   * @en-US Pop-up window of new window
+   * @zh-CN 新建窗口的弹窗
+   *  */
+  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
+  /**
+   * @en-US The pop-up window of the distribution update window
+   * @zh-CN 分布更新窗口的弹窗
+   * */
+  const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
+  const [showDetail, setShowDetail] = useState<boolean>(false);
+  /**
+   * @en-US International configuration
+   * @zh-CN 国际化配置
+   * */
+  const access = useAccess();
+  const intl = useIntl();
+  const actionRef = useRef<ActionType>();
+  //  动态设置每页数量
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
+  const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
+
+  const handleUpdateModal = () => {
+    if (updateModalOpen) {
+      setUpdateModalOpen(false);
+      setCurrentRow(undefined);
+    } else {
+      setUpdateModalOpen(true);
+    }
+  };
+  const handleCreateModal = () => {
+    if (createModalOpen) {
+      setCreateModalOpen(false);
+      setCurrentRow(undefined);
+    } else {
+      setCreateModalOpen(true);
+    }
+  };
+  const handleColumnDrawer = () => {
+    if (showDetail) {
+      setShowDetail(false);
+      setCurrentRow(undefined);
+    } else {
+      setShowDetail(true);
+    }
+  };
+  const handleDestroy = async (selectedRow: API.DeviceCategory) => {
+    deleteDeviceCategoryDeleteDeviceCategory({ id: selectedRow.id })
+      .then(() => {
+        message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+        actionRef.current?.reload();
+      })
+      .catch(() => {
+        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+      });
+  };
+
+  const columns: ProColumns<API.DeviceCategory>[] = [
+    {
+      title: <FormattedMessage id="device.device_category.table.list.id" defaultMessage="id" />,
+      dataIndex: 'id',
+      sorter: true,
+      render: (dom, entity) => {
+        return (
+          <a
+            onClick={() => {
+              setCurrentRow(entity);
+              setShowDetail(true);
+            }}
+          >
+            {dom}
+          </a>
+        );
+      },
+    },
+
+    {
+      title: <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />,
+      dataIndex: 'name',
+      hideInSearch: true,
+    },
+
+    {
+      title: <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />,
+      dataIndex: 'code',
+      hideInSearch: true,
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
+      ),
+      dataIndex: 'remark',
+      hideInSearch: true,
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_category.table.list.createTime" defaultMessage="$$$" />
+      ),
+      dataIndex: 'createTime',
+      sorter: true,
+      hideInSearch: true,
+      valueType: 'dateTime',
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_category.table.list.updateTime" defaultMessage="$$$" />
+      ),
+      dataIndex: 'updateTime',
+      sorter: true,
+      hideInSearch: true,
+      valueType: 'dateTime',
+    },
+
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
+      dataIndex: 'option',
+      valueType: 'option',
+      fixed: 'right',
+      render: (_, record) => [
+        <TableActionCard
+          key="TableActionCardRef"
+          renderActions={[
+            {
+              key: 'update',
+              renderDom: (
+                <Button
+                  key="update"
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setUpdateModalOpen(true);
+                    setCurrentRow(record);
+                  }}
+                >
+                  <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
+                </Button>
+              ),
+            },
+            {
+              key: 'destroy',
+              renderDom: (
+                <IsDelete
+                  deleteApi={() => {
+                    handleDestroy(record).then(() => {});
+                  }}
+                ></IsDelete>
+              ),
+            },
+          ]}
+        ></TableActionCard>,
+      ],
+    },
+  ];
+  return (
+    <PageContainer>
+      <ProTable<API.DeviceCategory>
+        headerTitle={intl.formatMessage({
+          id: 'pages.searchTable.title',
+          defaultMessage: '$$$',
+        })}
+        options={{ fullScreen: true, setting: true, density: true, reload: true }}
+        actionRef={actionRef}
+        rowKey="key"
+        search={{
+          labelWidth: proTableCommonOptions.searchLabelWidth,
+        }}
+        onDataSourceChange={(data) => {}}
+        pagination={{
+          ...proTablePaginationOptions,
+          pageSize: currentPageSize,
+          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
+        }}
+        columnsState={{
+          persistenceKey: 'device_category_list',
+          persistenceType: 'localStorage',
+        }}
+        tableAlertOptionRender={() => {
+          return (
+            <>
+              {selectedRowsState?.length > 0 && (
+                <IsBatchDelete
+                  deleteApi={() => {
+                    // TODO 需要；联调删除接口
+                    deleteDeviceCategoryDeleteDeviceCategoryByIds({
+                      ids: selectedRowsState.map((v: API.DeviceCategory) => {
+                        return v.id as number;
+                      }),
+                    }).then(() => {
+                      actionRef.current?.reloadAndRest?.();
+                    });
+                  }}
+                />
+              )}
+            </>
+          );
+        }}
+        toolBarRender={() => [
+          <Access
+            accessible={access.canUpdate(history.location.pathname)}
+            key={`${history.location.pathname}-add`}
+          >
+            <Button
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setCreateModalOpen(true);
+              }}
+            >
+              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
+            </Button>
+          </Access>,
+        ]}
+        request={async (params = {}, sort) => {
+          const { current, ...rest } = params;
+          const reqParams = {
+            page: current,
+            desc: false,
+            orderKey: '',
+            ...rest,
+          };
+          if (sort && Object.keys(sort).length) {
+            reqParams.orderKey = Object.keys(sort)[0];
+            let sort_select = sort[reqParams.orderKey];
+            reqParams.desc = sort_select === 'descend';
+          }
+          let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams });
+          return {
+            data: resp.data.list.map((v: API.DeviceCategory) => {
+              return { ...v, key: v.id };
+            }),
+            success: resp.success,
+            total: resp.data.total,
+            current: resp.data.page,
+            pageSize: resp.data.pageSize,
+          };
+        }}
+        columns={columns}
+        rowSelection={{
+          onChange: (_, selectedRows) => {
+            setSelectedRows(selectedRows);
+          },
+        }}
+      />
+
+      <CreateForm
+        createModalOpen={createModalOpen}
+        values={currentRow || {}}
+        handleModal={handleCreateModal}
+        reload={actionRef.current?.reload}
+      />
+      <UpdateForm
+        updateModalOpen={updateModalOpen}
+        values={currentRow || {}}
+        handleModal={handleUpdateModal}
+        reload={actionRef.current?.reload}
+      />
+
+      <ColumnDrawer
+        handleDrawer={handleColumnDrawer}
+        isShowDetail={showDetail}
+        columns={columns}
+        currentRow={currentRow}
+      />
+    </PageContainer>
+  );
+};
+
+export default DeviceCategoryList;
diff --git a/src/pages/DCSDevice/DeviceGroupList/components/ColumnDrawer.tsx b/src/pages/DCSDevice/DeviceGroupList/components/ColumnDrawer.tsx
new file mode 100644
index 0000000..3a4a93f
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceGroupList/components/ColumnDrawer.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {Drawer} from "antd";
+import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
+
+export type ColumnDrawProps = {
+  handleDrawer: (id?: any)=>void;
+  isShowDetail: boolean;
+  columns: ProColumns<API.DeviceGroup>[];
+  currentRow: API.DeviceGroup | undefined;
+};
+
+
+const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
+
+  return (
+    <Drawer
+      width={500}
+      open={props.isShowDetail}
+      onClose={() => {
+        props.handleDrawer();
+      }}
+      closable={true}
+    >
+      {props.currentRow?.id && (
+        <ProDescriptions<API.DeviceGroup>
+          column={2}
+          title={props.currentRow?.id}
+          request={async () => ({
+            data: props.currentRow || {},
+          })}
+          params={{
+            id: props.currentRow?.id,
+          }}
+          columns={props.columns as ProDescriptionsItemProps<API.DeviceGroup>[]}
+        />
+      )}
+    </Drawer>
+  )
+}
+export {ColumnDrawer}
+
diff --git a/src/pages/DCSDevice/DeviceGroupList/components/Columns.tsx b/src/pages/DCSDevice/DeviceGroupList/components/Columns.tsx
new file mode 100644
index 0000000..b2631bf
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceGroupList/components/Columns.tsx
@@ -0,0 +1,72 @@
+import { FormattedMessage} from '@umijs/max';
+export const DeviceGroupColumns = [{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.id"
+               defaultMessage="$$$"/>),
+           dataIndex: "id",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.name"
+               defaultMessage="$$$"/>),
+           dataIndex: "name",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.code"
+               defaultMessage="$$$"/>),
+           dataIndex: "code",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.address"
+               defaultMessage="$$$"/>),
+           dataIndex: "address",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.telephone"
+               defaultMessage="$$$"/>),
+           dataIndex: "telephone",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.lon"
+               defaultMessage="$$$"/>),
+           dataIndex: "lon",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.lat"
+               defaultMessage="$$$"/>),
+           dataIndex: "lat",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.managerName"
+               defaultMessage="$$$"/>),
+           dataIndex: "manager_name",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.managerPhone"
+               defaultMessage="$$$"/>),
+           dataIndex: "manager_phone",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.isEnable"
+               defaultMessage="$$$"/>),
+           dataIndex: "is_enable",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.parentFkId"
+               defaultMessage="$$$"/>),
+           dataIndex: "parent_fk_id",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.remark"
+               defaultMessage="$$$"/>),
+           dataIndex: "remark",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.createTime"
+               defaultMessage="$$$"/>),
+           dataIndex: "create_time",
+       },{
+           title: (<FormattedMessage
+               id="device.device_group.table.list.updateTime"
+               defaultMessage="$$$"/>),
+           dataIndex: "update_time",
+       },]
diff --git a/src/pages/DCSDevice/DeviceGroupList/components/CreateForm.tsx b/src/pages/DCSDevice/DeviceGroupList/components/CreateForm.tsx
new file mode 100644
index 0000000..d407433
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceGroupList/components/CreateForm.tsx
@@ -0,0 +1,273 @@
+import { postDeviceGroupCreateDeviceGroup } from '@/services/device/DeviceGroup';
+import {
+  ModalForm,
+  ProForm,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, Switch, message } from 'antd';
+import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import React, { useEffect, useState } from 'react';
+export type FormValueType = {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
+} & Partial<API.DeviceGroup>;
+
+export type CreateFormProps = {
+  createModalOpen: boolean;
+  handleModal: () => void;
+  values: Partial<API.DeviceGroup>;
+  reload: any;
+};
+const CreateForm: React.FC<CreateFormProps> = (props) => {
+  const intl = useIntl();
+  const [isAuto, setIsAuto] = useState(true);
+  const [form] = Form.useForm<API.DeviceGroup>();
+
+  const [parentId, setParentId] = useState<number>(0);
+  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
+    { label: '根节点', value: 0 },
+  ]);
+
+  useEffect(() => {
+    if (props.values.id !== undefined && props.values.id !== 0) {
+      setParentId(props.values.id as number);
+      setParentSelectOptions([{ label: props.values.name, value: props.values.id }]);
+    }
+  }, [props.createModalOpen]);
+
+  return (
+    <ModalForm<API.DeviceGroup>
+    width={proFormModelWidth}
+      title={intl.formatMessage({
+        id: 'device.device_group.table.list.add',
+        defaultMessage: '$$$',
+      })}
+      open={props.createModalOpen}
+      form={form}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => props.handleModal(),
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        postDeviceGroupCreateDeviceGroup(values)
+          .then(() => {
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+            props.reload();
+          })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
+        props.handleModal();
+        return true;
+      }}
+    >
+      <ProForm.Group>
+        <ProFormSelect
+          width={proFormItemStyleProps.column2Width}
+          name="parentFkId"
+          initialValue={parentId}
+          disabled={true}
+          label={
+            <FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_select',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.parentFkId',
+            defaultMessage: '$$$',
+          })}`}
+          request={async () => parentSelectOptions}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="name"
+          label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="device.device_group.table.rule.required.name"
+                  defaultMessage="name is required"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="code"
+          label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={!isAuto}
+          initialValue=""
+          disabled={isAuto}
+          rules={
+            isAuto
+              ? []
+              : [
+                  {
+                    required: true,
+                    message: (
+                      <FormattedMessage
+                        id="device.device_group.table.rule.required.code"
+                        defaultMessage="code is required"
+                      />
+                    ),
+                  },
+                ]
+          }
+          addonAfter={
+            <Switch
+              checked={isAuto}
+              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
+              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
+              onChange={setIsAuto}
+            />
+          }
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="address"
+          label={
+            <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.address',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="telephone"
+          label={
+            <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.telephone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lon"
+          label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lon',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lat"
+          label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lat',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerName"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerName"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerName',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerPhone"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerPhone"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerPhone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+
+
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="remark"
+          label={
+            <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+                <ProFormSwitch
+          width={proFormItemStyleProps.column2Width}
+          name="isEnable"
+          label={
+            <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
+          }
+          initialValue={true}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
+export default CreateForm;
diff --git a/src/pages/DCSDevice/DeviceGroupList/components/UpdateForm.tsx b/src/pages/DCSDevice/DeviceGroupList/components/UpdateForm.tsx
new file mode 100644
index 0000000..e090ff1
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceGroupList/components/UpdateForm.tsx
@@ -0,0 +1,291 @@
+import { putDeviceGroupUpdateDeviceGroup } from '@/services/device/DeviceGroup';
+import {
+  ModalForm,
+  ProForm,
+  ProFormDateTimePicker,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import React from 'react';
+export type FormValueType = {
+  target?: string;
+  template?: string;
+  type?: string;
+  time?: string;
+  frequency?: string;
+} & Partial<API.DeviceGroup>;
+
+export type UpdateFormProps = {
+  updateModalOpen: boolean;
+  handleModal: () => void;
+  values: Partial<API.DeviceGroup>;
+  reload: any;
+};
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const intl = useIntl();
+  const [form] = Form.useForm<API.DeviceGroup>();
+
+  return (
+    <ModalForm<API.DeviceGroup>
+      width={proFormModelWidth}
+      title={intl.formatMessage({
+        id: 'device.device_group.table.list.update',
+        defaultMessage: '$$$',
+      })}
+      open={props.updateModalOpen}
+      form={form}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => props.handleModal(),
+      }}
+      submitTimeout={2000}
+      onFinish={async (values) => {
+        putDeviceGroupUpdateDeviceGroup(values)
+          .then(() => {
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+            props.reload();
+          })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
+
+        props.handleModal();
+        return true;
+      }}
+    >
+      <ProForm.Group>
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="id"
+          label="id"
+          disabled={true}
+          initialValue={props.values.id}
+        />
+        {/*<ProFormSelect width={proFormItemStyleProps.column2Width} name="parentFkId" label={<FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.parentFkId', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.parentFkId}*/}
+        {/*               disabled={true} />*/}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="name"
+          label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.name}
+          disabled={false}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="device.device_group.table.rule.required.name"
+                  defaultMessage="name is required"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="code"
+          label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.code}
+          disabled={false}
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="device.device_group.table.rule.required.code"
+                  defaultMessage="code is required"
+                />
+              ),
+            },
+          ]}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="address"
+          label={
+            <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.address',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.address}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="telephone"
+          label={
+            <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.telephone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.telephone}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lon"
+          label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lon',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.lon}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lat"
+          label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lat',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.lat}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerName"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerName"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerName',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.managerName}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerPhone"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerPhone"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerPhone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.managerPhone}
+          disabled={false}
+        />
+        <ProFormSwitch
+          width={proFormItemStyleProps.column2Width}
+          name="isEnable"
+          label={
+            <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
+          }
+          initialValue={props.values.isEnable}
+          disabled={false}
+        />
+
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="remark"
+          label={
+            <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.remark}
+          disabled={false}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="createTime"
+          label={
+            <FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.createTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.createTime}
+          disabled={true}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="updateTime"
+          label={
+            <FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.updateTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.updateTime}
+          disabled={true}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
+export default UpdateForm;
diff --git a/src/pages/DCSDevice/DeviceGroupList/index.tsx b/src/pages/DCSDevice/DeviceGroupList/index.tsx
new file mode 100644
index 0000000..7fc2103
--- /dev/null
+++ b/src/pages/DCSDevice/DeviceGroupList/index.tsx
@@ -0,0 +1,417 @@
+import TableActionCard from '@/components/TableActionCard';
+import IsDelete from '@/components/TableActionCard/isDelete';
+import {
+  deleteDeviceGroupDeleteDeviceGroup,
+  deleteDeviceGroupDeleteDeviceGroupByIds,
+  postDeviceGroupGetDeviceGroupList,
+} from '@/services/device/DeviceGroup';
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
+import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
+import { Button, message } from 'antd';
+import React, { useRef, useState } from 'react';
+import { ColumnDrawer } from './components/ColumnDrawer';
+import CreateForm from './components/CreateForm';
+import UpdateForm from './components/UpdateForm';
+import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
+import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
+
+const DeviceGroupList: React.FC = () => {
+  /**
+   * @en-US Pop-up window of new window
+   * @zh-CN 新建窗口的弹窗
+   *  */
+  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
+  /**
+   * @en-US The pop-up window of the distribution update window
+   * @zh-CN 分布更新窗口的弹窗
+   * */
+  const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
+  const [showDetail, setShowDetail] = useState<boolean>(false);
+  /**
+   * @en-US International configuration
+   * @zh-CN 国际化配置
+   * */
+  const access = useAccess();
+  const intl = useIntl();
+  const actionRef = useRef<ActionType>();
+    //  动态设置每页数量
+    const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
+  const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
+
+  // const handle_parent_fk_id = (id: any)=>{
+  //       if (parent_fk_id_open) {
+  //           set_parent_fk_id(undefined);
+  //           set_parent_fk_id_open(false)
+  //       }else {
+  //         postDeviceGroupGetDeviceGroupById({id: id}).then((resp)=>{
+  //         set_parent_fk_id(resp.data.deviceGroup)
+  //         set_parent_fk_id_open(true)
+  //       })
+  //       }
+  //     }
+  // const handle_parent_fk_id_column_open = ()=>{
+  //   if (parent_fk_id_column_open) {
+  //       set_parent_fk_id_column_open(false)
+  //   }else {
+  //     postDeviceGroupGetDeviceGroupNames({ids: parentFkIdIds}).then((resp)=>{
+  //       let a: any = {}
+  //       resp.data.list.forEach((v: any)=>{
+  //         if (v.id) {
+  //           a[v.id] = v.name
+  //         }
+  //       })
+  //       setParentFkIdMap(a)
+  //     })
+  //     set_parent_fk_id_column_open(true)
+  //   }
+  // }
+
+  const handleUpdateModal = () => {
+    if (updateModalOpen) {
+      setUpdateModalOpen(false);
+      setCurrentRow(undefined);
+    } else {
+      setUpdateModalOpen(true);
+    }
+  };
+  const handleCreateModal = () => {
+    if (createModalOpen) {
+      setCreateModalOpen(false);
+      setCurrentRow(undefined);
+    } else {
+      setCreateModalOpen(true);
+    }
+  };
+  const handleColumnDrawer = () => {
+    if (showDetail) {
+      setShowDetail(false);
+      setCurrentRow(undefined);
+    } else {
+      setShowDetail(true);
+    }
+  };
+  const handleDestroy = async (selectedRow: API.DeviceGroup) => {
+    deleteDeviceGroupDeleteDeviceGroup({ id: selectedRow.id })
+      .then(() => {
+        message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
+        actionRef.current?.reload();
+      })
+      .catch(() => {
+        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+      });
+  };
+
+  const columns: ProColumns<API.DeviceGroup>[] = [
+    // TODO 确认是否需要和一级内容对齐
+    {
+      title: <span style={{paddingLeft: 0}}><FormattedMessage id="device.device_group.table.list.name" defaultMessage="id" /></span>,
+      dataIndex: 'name',
+      sorter: true,
+      render: (dom, entity) => {
+        return (
+          <a
+            onClick={() => {
+              setCurrentRow(entity);
+              setShowDetail(true);
+            }}
+          >
+            {dom}
+          </a>
+        );
+      },
+      key: 'fixedName',
+      fixed: 'left',
+    },
+    {
+      title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
+      dataIndex: 'code',
+      hideInSearch: true,
+    },
+
+    {
+      title: <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />,
+      dataIndex: 'address',
+      hideInSearch: true,
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
+      ),
+      dataIndex: 'telephone',
+      hideInSearch: true,
+    },
+
+    {
+      title: <FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />,
+      dataIndex: 'lon',
+      hideInSearch: true,
+    },
+
+    {
+      title: <FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />,
+      dataIndex: 'lat',
+      hideInSearch: true,
+    },
+    {
+      title: (
+        <FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
+      ),
+      dataIndex: 'managerName',
+      hideInSearch: true,
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$" />
+      ),
+      dataIndex: 'managerPhone',
+      hideInSearch: true,
+    },
+
+    {
+      title: <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />,
+      dataIndex: 'isEnable',
+      filters: true,
+      onFilter: true,
+      hideInSearch: true,
+      valueType: 'switch',
+    },
+
+    //
+    // {
+    //     title: (<FormattedMessage
+    //         id="device.device_group.table.list.parentFkId"
+    //         defaultMessage="$$$"/>),
+    //     dataIndex: "parentFkId",
+    //     hideInSearch: false,
+    //     render: (text, record) => {
+    //             if (parent_fk_id_column_open) {
+    //                 return ( <a onClick={()=>{handle_parent_fk_id(record.parentFkId)}}>{record?.parentFkId ? parentFkIdMap[record.parentFkId] : undefined}</a>)
+    //             } else {
+    //                 return (<a onClick={()=>{handle_parent_fk_id(record.parentFkId)}}>{record.parentFkId}</a>)
+    //             }
+    //     },
+    //     renderFormItem: () => {
+    //         return (
+    //           // value 和 onchange 会通过 form 自动注入。
+    //           <ProFormSelect
+    //             placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`}
+    //             required={false} showSearch debounceTime={1000}
+    //             request={async (keyWord)=>{
+    //               const resp = await postDeviceGroupGetDeviceGroupFkSelect({keyword: keyWord?.keyWords || ''})
+    //               return resp.data.list.map((v: any)=>{
+    //                 return {
+    //                   label: v.name,
+    //                   value: v.id
+    //                 }
+    //               })
+    //             }}
+    //           />
+    //         );
+    //   },
+    // },
+
+    {
+      title: <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />,
+      dataIndex: 'remark',
+      hideInSearch: true,
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
+      ),
+      dataIndex: 'createTime',
+      sorter: true,
+      hideInSearch: true,
+      valueType: 'dateTime',
+    },
+
+    {
+      title: (
+        <FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
+      ),
+      dataIndex: 'updateTime',
+      sorter: true,
+      hideInSearch: true,
+      valueType: 'dateTime',
+    },
+
+    {
+      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
+      dataIndex: 'option',
+      valueType: 'option',
+      fixed: 'right',
+      render: (_, record) => [
+        <TableActionCard
+          key="TableActionCardRef"
+          renderActions={[
+            {
+              key: 'create',
+              renderDom: (
+                <Button
+                  key="create"
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setCreateModalOpen(true);
+                    setCurrentRow(record);
+                    // setShowDetail(true);
+                  }}
+                >
+                  <FormattedMessage id="common.create_son" defaultMessage="Create" />
+                </Button>
+              ),
+            },
+            {
+              key: 'update',
+              renderDom: (
+                <Button
+                  key="update"
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setUpdateModalOpen(true);
+                    setCurrentRow(record);
+                  }}
+                >
+                  <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
+                </Button>
+              ),
+            },
+            {
+              key: 'destroy',
+              renderDom: (
+                <IsDelete
+                  deleteApi={() => {
+                    handleDestroy(record).then(() => {});
+                  }}
+                ></IsDelete>
+              ),
+            },
+          ]}
+        ></TableActionCard>,
+      ],
+    },
+  ];
+  return (
+    <PageContainer>
+      <ProTable<API.DeviceGroup>
+        headerTitle={intl.formatMessage({
+          id: 'pages.searchTable.title',
+          defaultMessage: '$$$',
+        })}
+        options={{ fullScreen: true, setting: true, density: true, reload: true }}
+        actionRef={actionRef}
+        rowKey="key"
+        scroll={{ y: proTableCommonOptions.commscrollY, x: 1800}}
+        search={{
+          labelWidth: proTableCommonOptions.searchLabelWidth,
+        }}
+        pagination={{
+          ...proTablePaginationOptions,
+          pageSize: currentPageSize,
+          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
+        }}
+        columnsState={{
+          persistenceKey: 'device_group_list',
+          persistenceType: 'localStorage',
+        }}
+        tableAlertOptionRender={() => {
+          return (
+            <>
+              {selectedRowsState?.length > 0 && (
+                <IsBatchDelete
+                  deleteApi={() => {
+                    // TODO 需联调批量删除接口
+                    deleteDeviceGroupDeleteDeviceGroupByIds({
+                      ids: selectedRowsState.map((v: API.DeviceGroup) => {
+                        return v.id as number;
+                      }),
+                    }).then(() => {
+                      actionRef.current?.reloadAndRest?.();
+                    });
+                  }}
+                />
+              )}
+            </>
+          );
+        }}
+        toolBarRender={() => [
+          <Access
+            accessible={access.canUpdate(history.location.pathname)}
+            key={`${history.location.pathname}-add`}
+          >
+            <Button
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setCurrentRow(undefined);
+                setCreateModalOpen(true);
+              }}
+            >
+              <PlusOutlined />{' '}
+              <FormattedMessage id="device.device_group.table.list.treeAdd" defaultMessage="New" />
+            </Button>
+          </Access>,
+        ]}
+        request={async (params = {}, sort) => {
+          const { current, ...rest } = params;
+          const reqParams = {
+            page: current,
+            desc: false,
+            orderKey: '',
+            ...rest,
+          };
+          if (sort && Object.keys(sort).length) {
+            reqParams.orderKey = Object.keys(sort)[0];
+            let sort_select = sort[reqParams.orderKey];
+            reqParams.desc = sort_select === 'descend';
+          }
+          let resp = await postDeviceGroupGetDeviceGroupList({ ...reqParams });
+          return {
+            data: resp.data.list.map((v: API.DeviceGroup) => {
+              return { ...v, key: v.id };
+            }),
+            success: resp.success,
+            total: resp.data.total,
+            current: resp.data.page,
+            pageSize: resp.data.pageSize,
+          };
+        }}
+        columns={columns}
+        rowSelection={{
+          onChange: (_, selectedRows) => {
+            setSelectedRows(selectedRows);
+          },
+          checkStrictly: false
+        }}
+      />
+      <CreateForm
+        createModalOpen={createModalOpen}
+        values={currentRow || {}}
+        handleModal={handleCreateModal}
+        reload={actionRef.current?.reload}
+      />
+      <UpdateForm
+        updateModalOpen={updateModalOpen}
+        values={currentRow || {}}
+        handleModal={handleUpdateModal}
+        reload={actionRef.current?.reload}
+      />
+
+      <ColumnDrawer
+        handleDrawer={handleColumnDrawer}
+        isShowDetail={showDetail}
+        columns={columns}
+        currentRow={currentRow}
+      />
+    </PageContainer>
+  );
+};
+
+export default DeviceGroupList;
diff --git a/src/pages/Welcome/components/NavInfoCardList.tsx b/src/pages/Welcome/components/NavInfoCardList.tsx
index 00d5bc0..5389737 100644
--- a/src/pages/Welcome/components/NavInfoCardList.tsx
+++ b/src/pages/Welcome/components/NavInfoCardList.tsx
@@ -17,10 +17,10 @@ const { Statistic } = StatisticCard;
 
 /**styles 组件样式配置 */
 const topColSpanProps = { sm: 24, md: 12, lg: 6 }; // 每个卡片项栅格配置
-const topItemStyle = { marginBottom: 24, height: 190, backgroundColor: 'rgba(255, 233, 214, 1)' }; // 每个卡片独立样式
-const topItemStyle1 = { marginBottom: 24, height: 190, backgroundColor: 'rgba(214, 225, 255, 1)' }; // 每个卡片独立样式
-const topItemStyle2 = { marginBottom: 24, height: 190, backgroundColor: 'rgba(221, 213, 253, 1)' }; // 每个卡片独立样式
-const topItemStyle3 = { marginBottom: 24, height: 190, backgroundColor: 'rgba(214, 239, 255, 1)' }; // 每个卡片独立样式
+const topItemStyle = { marginBottom: 24, height: 190, backgroundColor: '#FFFAF5', border: '1px solid #FFE9D6', borderRadius: 4 }; // 每个卡片独立样式
+const topItemStyle1 = { marginBottom: 24, height: 190, backgroundColor: '#F5F8FF', border: '1px solid #D6E1FF', borderRadius: 4 }; // 每个卡片独立样式
+const topItemStyle2 = { marginBottom: 24, height: 190, backgroundColor: '#F5F3FD', border: '1px solid #DDD5FD', borderRadius: 4 }; // 每个卡片独立样式
+const topItemStyle3 = { marginBottom: 24, height: 190, backgroundColor: '#F5FBFF', border: '1px solid #D6EFFF', borderRadius: 4 }; // 每个卡片独立样式
 const topItemHeadStyle = { padding: 15 };
 const chartsStyle = {
   height: 84
@@ -49,10 +49,10 @@ const NavInfoCardList: React.FC = () => {
           }
           colSpan={topColSpanProps}
           style={topItemStyle}
-          boxShadow
+          
         >
           <StatisticCard
-            bodyStyle={{ padding: 0, backgroundColor: 'rgba(255, 233, 214, 1)' }}
+            bodyStyle={{ padding: 0, backgroundColor: '#FFFAF5' }}
             statistic={{
               value: 1102893,
               style: chartsStyle,
@@ -67,7 +67,7 @@ const NavInfoCardList: React.FC = () => {
               <>
                 <Divider style={{ margin: 5 }} />
                 <Space>
-                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: 'rgba(255, 233, 214, 1)' }}>
+                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: '#FFFAF5' }}>
                     <Statistic title="日异常量" value="0.00%" />
                   </StatisticCard>
                 </Space>
@@ -91,10 +91,10 @@ const NavInfoCardList: React.FC = () => {
           }
           colSpan={topColSpanProps}
           style={topItemStyle1}
-          boxShadow
+          
         >
           <StatisticCard
-            bodyStyle={{ padding: 0, backgroundColor: 'rgba(214, 225, 255, 1)' }}
+            bodyStyle={{ padding: 0, backgroundColor: '#F5F8FF' }}
             statistic={{
               value: 467,
               style: chartsStyle,
@@ -117,7 +117,7 @@ const NavInfoCardList: React.FC = () => {
               <>
                 <Divider style={{ margin: 5 }} />
                 <Space>
-                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: 'rgba(214, 225, 255, 1)' }}>
+                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: '#F5F8FF' }}>
                     <Statistic title="设备量" value="0.00%" />
                   </StatisticCard>
                 </Space>
@@ -141,10 +141,10 @@ const NavInfoCardList: React.FC = () => {
           }
           colSpan={topColSpanProps}
           style={topItemStyle2}
-          boxShadow
+          
         >
           <StatisticCard
-            bodyStyle={{ padding: 0, backgroundColor: 'rgba(221, 213, 253, 1)' }}
+            bodyStyle={{ padding: 0, backgroundColor: '#F5F3FD' }}
             statistic={{
               value: 3048,
               style:chartsStyle,
@@ -165,7 +165,7 @@ const NavInfoCardList: React.FC = () => {
               <>
                 <Divider style={{ margin: 5 }} />
                 <Space>
-                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: 'rgba(221, 213, 253, 1)' }}>
+                  <StatisticCard bodyStyle={{ padding: 0, backgroundColor: '#F5F3FD' }}>
                     <Statistic title="覆盖网点率" value="0.00%" />
                   </StatisticCard>
                 </Space>
@@ -189,10 +189,10 @@ const NavInfoCardList: React.FC = () => {
           }
           colSpan={topColSpanProps}
           style={topItemStyle3}
-          boxShadow
+          
         >
           <StatisticCard
-            bodyStyle={{ padding: 0, backgroundColor: 'rgba(214, 239, 255, 1)' }}
+            bodyStyle={{ padding: 0, backgroundColor: '#F5FBFF' }}
             statistic={{
               value: 893,
               style:chartsStyle,
@@ -221,7 +221,7 @@ const NavInfoCardList: React.FC = () => {
             chart={
               <>
                 <Divider style={{ margin: 5 }} />
-                <Space style={{ marginTop: 0, backgroundColor: 'rgba(214, 239, 255, 1)' }}>
+                <Space style={{ marginTop: 0, backgroundColor: '#F5FBFF' }}>
                   <Statistic title="周同比" value="12%" trend="up" />
                   <Statistic title="日同比" value="11%" trend="down" />
                 </Space>
diff --git a/src/pages/Welcome/styles/bannerInfoCard.less b/src/pages/Welcome/styles/bannerInfoCard.less
index 4c5b978..c510444 100644
--- a/src/pages/Welcome/styles/bannerInfoCard.less
+++ b/src/pages/Welcome/styles/bannerInfoCard.less
@@ -46,7 +46,8 @@
       font-size: 12px;
       line-height: 20px;
       text-align: center;
-      background-color: @tag-default-bg;
+      // background-color: @tag-default-bg;
+      background-color: #E7E9EF;
       // border-radius: 20px;
       border-radius: 2px;
       &.active {
@@ -172,7 +173,7 @@
   font-size: 12px;
   line-height: 20px;
   text-align: center;
-  background-color: @tag-default-bg;
+  background-color: #E7E9EF;
   border-radius: 2px;
 }