locale(src): update option

src/locales/en-US/pages.ts

@@ -12,9 +12,9 @@ export default {
 
   // 通用的数据操作
   'pages.data.option': 'Option',
-  'pages.data.option.remove': 'delete',
+  'pages.data.option.remove': 'Delete',
   'pages.data.option.remove.tips': 'Confirm to delete?',
-  'pages.data.option.disabled': 'disable',
+  'pages.data.option.disabled': 'Disable',
   'pages.data.option.disabled.tips': 'Confirm to disable?',
   'pages.data.option.enabled': 'enable',
   'pages.data.option.enabled.tips': 'Confirm to enable?',
@@ -95,6 +95,7 @@ export default {
   'pages.device.category.id': 'Classification ID',
   'pages.device.category.logotype': 'Logotype',
   'pages.device.category.name': 'Classification Name',
+  'pages.device.category.addClass': 'Add subclasses',
   // 设备管理-设备
   'pages.device.instance': 'Equipment',
   'pages.device.instance.management': 'Equipment Management',
@@ -106,11 +107,12 @@ export default {
   'pages.device.instance.describe': 'Explain',
   // 设备管理-指令下发
   'pages.device.command': 'Command',
-  'pages.device.command.deviceID': 'Device ID',
-  'pages.device.command.instructionType': 'Instruction Type',
-  'pages.device.command.instructionType.readAttributes': 'Read Attributes',
-  'pages.device.command.instructionType.setProperties': 'Set Properties',
-  'pages.device.command.instructionType.callAttribute': 'Call Attribute',
+  'pages.device.command.id': 'Device ID',
+  'pages.device.command.type': 'Instruction Type',
+  'pages.device.command.type.readAttributes': 'Read Attributes',
+  'pages.device.command.type.setProperties': 'Set Properties',
+  'pages.device.command.type.callAttribute': 'Call Attribute',
+  'pages.device.command.option.send': 'Resend',
   'pages.device.command.status.waiting': 'Waiting',
   'pages.device.command.status.failed ': 'Failed to send',
   'pages.device.command.status.succeed': 'Sent successfully',
@@ -125,11 +127,12 @@ export default {
   'pages.device.firmware.creationTime': 'Creation Time',
   // 设备管理-告警记录
   'pages.device.alarm': 'Alarm',
-  'pages.device.alarm.deviceID': 'Device ID',
+  'pages.device.alarm.id': 'Device ID',
   'pages.device.alarm.name': 'Alarm Name',
   'pages.device.alarm.time': 'Alarm Time',
   'pages.device.alarm.status': 'Processing State',
-
+  'pages.device.alarm.option.dispose': 'Dispose',
+  'pages.device.alarm.option.data': 'Alarm Data',
   // 设备接入
   'pages.link.certificate': 'Certificate',
   'pages.link.protocol': 'protocol',
@@ -142,6 +145,9 @@ export default {
   'pages.notice.config.service': 'Service',
   'pages.notice.config.type': 'Type',
   'pages.notice.template': 'Template',
+  'pages.notice.option.download': 'Download Configuration',
+  'pages.notice.option.debug': 'Debug',
+  'pages.notice.option.record': 'Notification Records',
 
   // 规则引擎
   'pages.ruleEngine.instance': 'Instance',
@@ -149,6 +155,10 @@ export default {
   'pages.ruleEngine.sqlRule.time': 'Create Time',
   'pages.ruleEngine.scene': 'Scene',
   'pages.ruleEngine.scene.trigger': 'Trigger',
+  'pages.ruleEngine.option.detail': 'Detail',
+  'pages.ruleEngine.option.start': 'Start',
+  'pages.ruleEngine.option.restart': 'Restart',
+  'pages.ruleEngine.option.stop': 'Stop',
 
   // 可视化
   'pages.visualization.category': 'Category',

src/locales/zh-CN/pages.ts

@@ -95,6 +95,7 @@ export default {
   'pages.device.category.id': '分类ID',
   'pages.device.category.logotype': '标识',
   'pages.device.category.name': '分类名称',
+  'pages.device.category.addClass': '添加子分类',
   // 设备管理-设备
   'pages.device.instance': '设备',
   'pages.device.instance.management': '设备管理',
@@ -105,11 +106,12 @@ export default {
   'pages.device.instance.status.onLine': '在线',
   // 设备管理-指令下发
   'pages.device.command': '指令下发',
-  'pages.device.command.deviceID': '设备ID',
-  'pages.device.command.instructionType': '指令类型',
-  'pages.device.command.instructionType.readAttributes': '读取属性',
-  'pages.device.command.instructionType.setProperties': '设置属性',
-  'pages.device.command.instructionType.callAttribute': '调用属性',
+  'pages.device.command.id': '设备ID',
+  'pages.device.command.type': '指令类型',
+  'pages.device.command.type.readAttributes': '读取属性',
+  'pages.device.command.type.setProperties': '设置属性',
+  'pages.device.command.type.callAttribute': '调用属性',
+  'pages.device.command.option.send': '重新发送',
   'pages.device.command.status.waiting': '等待中',
   'pages.device.command.status.failed ': '发送失败',
   'pages.device.command.status.succeed': '发送成功',
@@ -124,11 +126,12 @@ export default {
   'pages.device.firmware.creationTime': '创建时间',
   // 设备管理-告警记录
   'pages.device.alarm': '告警记录',
-  'pages.device.alarm.deviceID': '设备ID',
+  'pages.device.alarm.id': '设备ID',
   'pages.device.alarm.name': '告警名称',
   'pages.device.alarm.time': '告警时间',
   'pages.device.alarm.status': '处理状态',
-
+  'pages.device.alarm.option.dispose': '处理',
+  'pages.device.alarm.option.data': '告警数据',
   // 设备接入
   'pages.link.certificate': '证书管理',
   'pages.link.protocol': '协议管理',
@@ -141,6 +144,8 @@ export default {
   'pages.notice.config.service': '服务商',
   'pages.notice.config.type': '通知类型',
   'pages.notice.template': '通知模板',
+  'pages.notice.option.debug': '调试',
+  'pages.notice.option.record': '通知记录',
 
   // 规则引擎
   'pages.ruleEngine.instance': '规则实例',
@@ -148,6 +153,10 @@ export default {
   'pages.ruleEngine.sqlRule.time': '创建时间',
   'pages.ruleEngine.scene': '场景联动',
   'pages.ruleEngine.scene.trigger': '触发方式',
+  'pages.ruleEngine.option.detail': '查看',
+  'pages.ruleEngine.option.start': '启动',
+  'pages.ruleEngine.option.restart': '重启',
+  'pages.ruleEngine.option.stop': '停止',
 
   // 可视化
   'pages.visualization.category': '分类管理',

src/pages/cloud/Aliyun/index.tsx

@@ -93,8 +93,6 @@ const Aliyun = () => {
               defaultMessage: `确认${record.state.value === 'disabled' ? '启' : '禁'}用？`,
             })}
             onConfirm={async () => {
-              // const state = record.state.value === 'disabled' ? 'enable' : 'disable';
-              // await service.changeStatus(record.id, state);
               message.success(
                 intl.formatMessage({
                   id: 'pages.data.option.success',

src/pages/device/Alarm/index.tsx

@@ -21,7 +21,7 @@ const Alarm = () => {
     },
     {
       title: intl.formatMessage({
-        id: 'pages.device.alarm.deviceID',
+        id: 'pages.device.alarm.id',
         defaultMessage: '设备ID',
       }),
       dataIndex: 'deviceId',
@@ -81,7 +81,10 @@ const Alarm = () => {
             }
             Modal.confirm({
               width: '40VW',
-              title: '告警数据',
+              title: intl.formatMessage({
+                id: 'pages.device.alarm.option.data',
+                defaultMessage: '告警数据',
+              }),
               content: (
                 <pre>
                   {content}
@@ -114,7 +117,12 @@ const Alarm = () => {
         <>
           {record.state !== 'solve' && (
             <a onClick={() => {}}>
-              <Tooltip title={'处理'}>
+              <Tooltip
+                title={intl.formatMessage({
+                  id: 'pages.device.alarm.option.dispose',
+                  defaultMessage: '处理',
+                })}
+              >
                 <CheckOutlined />
               </Tooltip>
             </a>

src/pages/device/Category/index.tsx

@@ -73,7 +73,12 @@ const Category = () => {
           </Tooltip>
         </a>,
         <a onClick={() => {}}>
-          <Tooltip title="添加子分类">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.device.category.addClass',
+              defaultMessage: '添加子分类',
+            })}
+          >
             <PlusOutlined />
           </Tooltip>
         </a>,

src/pages/device/Command/index.tsx

@@ -22,7 +22,7 @@ const Command = () => {
     },
     {
       title: intl.formatMessage({
-        id: 'pages.device.command.deviceID',
+        id: 'pages.device.command.id',
         defaultMessage: '设备ID',
       }),
       dataIndex: 'deviceId',
@@ -36,28 +36,28 @@ const Command = () => {
     },
     {
       title: intl.formatMessage({
-        id: 'pages.device.command.instructionType',
+        id: 'pages.device.command.type',
         defaultMessage: '指令类型',
       }),
       dataIndex: 'messageType',
       filters: [
         {
           text: intl.formatMessage({
-            id: 'pages.device.command.instructionType.readAttributes',
+            id: 'pages.device.command.type.readAttributes',
             defaultMessage: '读取属性',
           }),
           value: 'READ_PROPERTY',
         },
         {
           text: intl.formatMessage({
-            id: 'pages.device.command.instructionType.setProperties',
+            id: 'pages.device.command.type.setProperties',
             defaultMessage: '设置属性',
           }),
           value: 'WRITE_PROPERTY',
         },
         {
           text: intl.formatMessage({
-            id: 'pages.device.command.instructionType.callAttribute',
+            id: 'pages.device.command.type.callAttribute',
             defaultMessage: '调用属性',
           }),
           value: 'INVOKE_FUNCTION',
@@ -150,7 +150,12 @@ const Command = () => {
                 // );
               }}
             >
-              <Tooltip title="重新发送">
+              <Tooltip
+                title={intl.formatMessage({
+                  id: 'pages.device.command.option.send',
+                  defaultMessage: '重新发送',
+                })}
+              >
                 <SyncOutlined />
               </Tooltip>
             </a>
@@ -166,7 +171,10 @@ const Command = () => {
       <BaseCrud<CommandItem>
         columns={columns}
         service={service}
-        title={'指令下发'}
+        title={intl.formatMessage({
+          id: 'pages.device.command',
+          defaultMessage: '指令下发',
+        })}
         schema={schema}
         actionRef={actionRef}
       />

src/pages/notice/Config/index.tsx

@@ -56,27 +56,52 @@ const Config = () => {
       width: 200,
       render: (text, record) => [
         <a onClick={() => console.log(record)}>
-          <Tooltip title="编辑">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
             <EditOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="删除">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.remove',
+              defaultMessage: '删除',
+            })}
+          >
             <MinusOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="下载配置">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.download',
+              defaultMessage: '下载配置',
+            })}
+          >
             <ArrowDownOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="调试">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.notice.option.debug',
+              defaultMessage: '调试',
+            })}
+          >
             <BugOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="通知记录">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.notice.option.record',
+              defaultMessage: '通知记录',
+            })}
+          >
             <BarsOutlined />
           </Tooltip>
         </a>,

src/pages/notice/Template/index.tsx

@@ -49,22 +49,42 @@ const Template = () => {
       width: 200,
       render: (text, record) => [
         <a onClick={() => console.log(record)}>
-          <Tooltip title="编辑">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
             <EditOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="删除">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.remove',
+              defaultMessage: '删除',
+            })}
+          >
             <MinusOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="下载配置">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.download',
+              defaultMessage: '下载配置',
+            })}
+          >
             <ArrowDownOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="调试">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.notice.option.debug',
+              defaultMessage: '调试',
+            })}
+          >
             <BugOutlined />
           </Tooltip>
         </a>,

src/pages/rule-engine/Instance/index.tsx

@@ -57,28 +57,53 @@ const Instance = () => {
       width: 200,
       render: (text, record) => [
         <a>
-          <Tooltip title="查看">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.detail',
+              defaultMessage: '查看',
+            })}
+          >
             <EyeOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="编辑">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
             <EditOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="启动">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.start',
+              defaultMessage: '启动',
+            })}
+          >
             <CaretRightOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="重启">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.restart',
+              defaultMessage: '重启',
+            })}
+          >
             <ReloadOutlined />
           </Tooltip>
         </a>,
 
         <a>
-          <Tooltip title="删除">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.remove',
+              defaultMessage: '删除',
+            })}
+          >
             <MinusOutlined />
           </Tooltip>
         </a>,

src/pages/rule-engine/SQLRule/index.tsx

@@ -57,32 +57,62 @@ const SQLRule = () => {
       width: 200,
       render: (text, record) => [
         <a onClick={() => console.log(record)}>
-          <Tooltip title="编辑">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
             <EditOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="启动">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.start',
+              defaultMessage: '启动',
+            })}
+          >
             <CaretRightOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="重启">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.restart',
+              defaultMessage: '重启',
+            })}
+          >
             <ReloadOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="停止">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.stop',
+              defaultMessage: '停止',
+            })}
+          >
             <StopOutlined />
           </Tooltip>
         </a>,
         <a>
-          <Tooltip title="删除">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.remove',
+              defaultMessage: '删除',
+            })}
+          >
             <MinusOutlined />
           </Tooltip>
         </a>,
         <a key="download">
-          <Tooltip title="下载配置">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.download',
+              defaultMessage: '下载配置',
+            })}
+          >
             <DownloadOutlined
               onClick={() => {
                 message.success('下载');

src/pages/rule-engine/Scene/index.tsx

@@ -59,33 +59,63 @@ const Scene = () => {
       width: 200,
       render: (text, record) => [
         <a>
-          <Tooltip title="查看">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.detail',
+              defaultMessage: '查看',
+            })}
+          >
             <EyeOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="编辑">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
             <EditOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="启动">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.start',
+              defaultMessage: '启动',
+            })}
+          >
             <CaretRightOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="启动">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.stop',
+              defaultMessage: '停止',
+            })}
+          >
             <StopOutlined />
           </Tooltip>
         </a>,
         <a onClick={() => console.log(record)}>
-          <Tooltip title="执行">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.ruleEngine.option.restart',
+              defaultMessage: '重启',
+            })}
+          >
             <ReloadOutlined />
           </Tooltip>
         </a>,
 
         <a>
-          <Tooltip title="删除">
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.remove',
+              defaultMessage: '删除',
+            })}
+          >
             <MinusOutlined />
           </Tooltip>
         </a>,

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;
+};