feat(visualization): add Category\Configuration\Screen module

src/pages/visualization/Category/index.tsx

@@ -1,6 +1,75 @@
 import { PageContainer } from '@ant-design/pro-layout';
+import BaseService from '@/utils/BaseService';
+import { useRef } from 'react';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import type { CategoryItem } from '@/pages/visualization/Category/typings';
+import { Tooltip } from 'antd';
+import { EditOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import BaseCrud from '@/components/BaseCrud';
 
+export const service = new BaseService<CategoryItem>('visualization/catalog');
 const Category = () => {
-  return <PageContainer>Category</PageContainer>;
+  const actionRef = useRef<ActionType>();
+
+  const columns: ProColumns<CategoryItem>[] = [
+    {
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      width: 48,
+    },
+    {
+      dataIndex: 'id',
+      title: 'ID',
+    },
+    {
+      dataIndex: 'name',
+      title: '名称',
+    },
+    {
+      dataIndex: 'description',
+      title: '描述',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (text, record) => [
+        <a
+          onClick={() => {
+            console.log(record);
+          }}
+        >
+          <Tooltip title="编辑">
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="添加子分类">
+            <PlusOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="删除">
+            <MinusOutlined />
+          </Tooltip>
+        </a>,
+      ],
+    },
+  ];
+
+  const schema = {};
+
+  return (
+    <PageContainer>
+      <BaseCrud
+        columns={columns}
+        service={service}
+        title="分类管理"
+        schema={schema}
+        actionRef={actionRef}
+      />
+    </PageContainer>
+  );
 };
 export default Category;

src/pages/visualization/Category/typings.d.ts

@@ -1,4 +1,10 @@
-type Item = {
-  id: string;
-  name: string;
-};
+import type { BaseItem } from '@/utils/typings';
+
+type CategoryItem = {
+  level: number;
+  parentId: string;
+  description: string;
+  path: string;
+  sortIndex: number;
+  children: CategoryItem[];
+} & BaseItem;

src/pages/visualization/Configuration/index.tsx

@@ -1,6 +1,95 @@
 import { PageContainer } from '@ant-design/pro-layout';
+import BaseService from '@/utils/BaseService';
+import type { ConfigurationItem } from '@/pages/visualization/Configuration/typings';
+import { useRef } from 'react';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import { Tooltip } from 'antd';
+import {
+  ArrowDownOutlined,
+  BarsOutlined,
+  CopyOutlined,
+  EditOutlined,
+  EyeOutlined,
+  MinusOutlined,
+} from '@ant-design/icons';
+import BaseCrud from '@/components/BaseCrud';
 
+export const service = new BaseService<ConfigurationItem>('visualization');
 const Configuration = () => {
-  return <PageContainer>Configuration</PageContainer>;
+  const actionRef = useRef<ActionType>();
+
+  const columns: ProColumns<ConfigurationItem>[] = [
+    {
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      width: 48,
+    },
+    {
+      dataIndex: 'name',
+      title: '名称',
+    },
+    {
+      dataIndex: 'state',
+      title: '状态',
+      render: (text, record) => record.state.value,
+    },
+    {
+      dataIndex: 'description',
+      title: '描述',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (text, record) => [
+        <a onClick={() => console.log(record)}>
+          <Tooltip title="编辑">
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="预览">
+            <EyeOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="下载配置">
+            <ArrowDownOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="复制">
+            <CopyOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="通知记录">
+            <BarsOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="删除">
+            <MinusOutlined />
+          </Tooltip>
+        </a>,
+      ],
+    },
+  ];
+
+  const schema = {};
+
+  return (
+    <PageContainer>
+      <BaseCrud
+        defaultParams={{ type: 'vis_configuration' }}
+        columns={columns}
+        service={service}
+        title="组态管理"
+        schema={schema}
+        actionRef={actionRef}
+      />
+    </PageContainer>
+  );
 };
 export default Configuration;

src/pages/visualization/Configuration/typings.d.ts

@@ -1,4 +1,3 @@
-type Item = {
-  id: string;
-  name: string;
-};
+import type { ScreenItem } from '@/pages/visualization/Screen/typings';
+
+type ConfigurationItem = ScreenItem;

src/pages/visualization/Screen/index.tsx

@@ -1,6 +1,97 @@
 import { PageContainer } from '@ant-design/pro-layout';
+import BaseService from '@/utils/BaseService';
+import type { ScreenItem } from '@/pages/visualization/Screen/typings';
+import { useRef } from 'react';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import type { ConfigurationItem } from '@/pages/visualization/Configuration/typings';
+import { Tooltip } from 'antd';
+import {
+  ArrowDownOutlined,
+  BarsOutlined,
+  CopyOutlined,
+  EditOutlined,
+  EyeOutlined,
+  MinusOutlined,
+} from '@ant-design/icons';
+import BaseCrud from '@/components/BaseCrud';
+
+export const service = new BaseService<ScreenItem>('visualization');
 
 const Screen = () => {
-  return <PageContainer>Screen</PageContainer>;
+  const actionRef = useRef<ActionType>();
+
+  const columns: ProColumns<ConfigurationItem>[] = [
+    {
+      dataIndex: 'index',
+      valueType: 'indexBorder',
+      width: 48,
+    },
+    {
+      dataIndex: 'name',
+      title: '名称',
+    },
+    {
+      dataIndex: 'state',
+      title: '状态',
+      render: (text, record) => record.state.value,
+    },
+    {
+      dataIndex: 'description',
+      title: '描述',
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (text, record) => [
+        <a onClick={() => console.log(record)}>
+          <Tooltip title="编辑">
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="预览">
+            <EyeOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="下载配置">
+            <ArrowDownOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="复制">
+            <CopyOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="通知记录">
+            <BarsOutlined />
+          </Tooltip>
+        </a>,
+        <a>
+          <Tooltip title="删除">
+            <MinusOutlined />
+          </Tooltip>
+        </a>,
+      ],
+    },
+  ];
+
+  const schema = {};
+
+  return (
+    <PageContainer>
+      <BaseCrud
+        defaultParams={{ type: 'big_screen' }}
+        columns={columns}
+        service={service}
+        title="大屏管理"
+        schema={schema}
+        actionRef={actionRef}
+      />
+    </PageContainer>
+  );
 };
 export default Screen;

src/pages/visualization/Screen/typings.d.ts

@@ -1,4 +1,9 @@
-type Item = {
-  id: string;
-  name: string;
-};
+import type { BaseItem, State } from '@/utils/typings';
+
+type ScreenItem = {
+  catalogId: string;
+  metadata: string;
+  state: State;
+  target: string;
+  type: string;
+} & BaseItem;

src/utils/typings.d.ts

@@ -11,3 +11,13 @@ export type Response<T> = {
   status: number;
   timestamp: number;
 };
+
+type BaseItem = {
+  id: string;
+  name: string;
+};
+
+type State = {
+  value: string;
+  text: string;
+};