refactor(alarm): handle alarm

src/pages/device/components/Alarm/Record/index.tsx

@@ -1,9 +1,12 @@
 import type { AlarmRecord } from '@/pages/device/Product/typings';
-import type { ProColumns } from '@jetlinks/pro-table';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
 import ProTable from '@jetlinks/pro-table';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { service } from '@/pages/device/components/Alarm';
 import { useParams } from 'umi';
+import { Input, Modal, Tag, Tooltip } from 'antd';
+import { AuditOutlined, EyeOutlined } from '@ant-design/icons';
+import { useRef, useState } from 'react';
 
 interface Props {
   type: 'device' | 'product';
@@ -12,6 +15,10 @@ interface Props {
 const Record = (props: Props) => {
   const { type } = props;
   const intl = useIntl();
+  const [handleText, setText] = useState<string>('');
+  const [visible, setVisible] = useState<boolean>(false);
+  const [id, setId] = useState<string>('');
+  const actionRef = useRef<ActionType>();
   const columns: ProColumns<AlarmRecord>[] = [
     {
       dataIndex: 'index',
@@ -48,23 +55,83 @@ const Record = (props: Props) => {
         defaultMessage: '处理状态',
       }),
       dataIndex: 'state',
+      render: (text) =>
+        text === 'solve' ? <Tag color="#87d068">已处理</Tag> : <Tag color="#f50">未处理</Tag>,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.data.option',
+        defaultMessage: '操作',
+      }),
+      valueType: 'option',
+      align: 'center',
+      width: 200,
+      render: (_, record) => [
+        <a
+          key="info"
+          onClick={async () =>
+            Modal.info({
+              title: '告警数据',
+              width: 600,
+              content: <pre>{JSON.stringify(record.alarmData, null, 2)}</pre>,
+            })
+          }
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '详情',
+            })}
+          >
+            <EyeOutlined />
+          </Tooltip>
+        </a>,
+        <a
+          key="handle"
+          onClick={() => {
+            setVisible(true);
+            setId(record.id);
+          }}
+        >
+          <Tooltip title="处理告警">
+            <AuditOutlined />
+          </Tooltip>
+        </a>,
+      ],
     },
   ];
 
   const params = useParams<{ id: string }>();
   return (
-    <ProTable
-      columns={columns}
-      rowKey="id"
-      request={(param) => service.record(param)}
-      pagination={{
-        pageSize: 10,
-      }}
-      defaultParams={{
-        [`${type}Id`]: params.id,
-      }}
-      search={false}
-    />
+    <>
+      <ProTable
+        actionRef={actionRef}
+        columns={columns}
+        rowKey="id"
+        request={(param) => service.record(param)}
+        pagination={{
+          pageSize: 10,
+        }}
+        defaultParams={{
+          [`${type}Id`]: params.id,
+        }}
+        search={false}
+      />
+      <Modal
+        title="处理告警"
+        visible={visible}
+        onOk={async () => {
+          const resp = await service.solve(id, handleText);
+          if (resp.status === 200) {
+            setVisible(false);
+            setText('');
+            actionRef.current?.reload();
+          }
+        }}
+      >
+        <Input.TextArea rows={5} value={handleText} onChange={(e) => setText(e.target.value)} />
+      </Modal>
+    </>
   );
 };
 export default Record;

src/pages/device/components/Alarm/Setting/index.tsx

@@ -1,18 +1,19 @@
 import type { ProColumns } from '@jetlinks/pro-table';
-import ProTable from '@jetlinks/pro-table';
+import ProTable, { ActionType } from '@jetlinks/pro-table';
 import type { AlarmSetting } from '@/pages/device/Product/typings';
-import { Button, Space, Tooltip } from 'antd';
+import { Button, message, Popconfirm, Space, Tooltip } from 'antd';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { useParams } from 'umi';
 import {
   EditOutlined,
   MinusOutlined,
+  PauseCircleOutlined,
   PlayCircleOutlined,
   PlusOutlined,
   UnorderedListOutlined,
 } from '@ant-design/icons';
 import Edit from '../Edit';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { service } from '@/pages/device/components/Alarm';
 
 interface Props {
@@ -25,6 +26,15 @@ const Setting = (props: Props) => {
   const param = useParams<{ id: string }>();
   const [edit, setEdit] = useState<boolean>(false);
   const [data, setData] = useState<Record<string, unknown>>();
+  const actionRef = useRef<ActionType>();
+
+  const action = async (id: string, ac: 'start' | 'stop') => {
+    const resp = await service.action(id, ac);
+    if (resp.status === 200) {
+      message.success('操作成功');
+    }
+    actionRef.current?.reload();
+  };
   const columns: ProColumns<AlarmSetting>[] = [
     {
       dataIndex: 'index',
@@ -91,21 +101,40 @@ const Setting = (props: Props) => {
             <UnorderedListOutlined />
           </Tooltip>
         </a>,
-        <a key="start">
-          <Tooltip title="启动">
-            <PlayCircleOutlined />
-          </Tooltip>
-        </a>,
-        <a key="stop">
-          <Tooltip title="停止">
-            <PlayCircleOutlined />
-          </Tooltip>
-        </a>,
-        <a key="remove">
-          <Tooltip title="删除">
-            <MinusOutlined />
-          </Tooltip>
-        </a>,
+        record.state.value === 'stopped' ? (
+          <Popconfirm onConfirm={() => action(record.id, 'start')} title="启动此告警？">
+            <a key="start">
+              <Tooltip title="启动">
+                <PauseCircleOutlined />
+              </Tooltip>
+            </a>
+          </Popconfirm>
+        ) : (
+          <Popconfirm onConfirm={() => action(record.id, 'stop')} title="停止此告警？">
+            <a key="stop">
+              <Tooltip title="停止">
+                <PlayCircleOutlined />
+              </Tooltip>
+            </a>
+          </Popconfirm>
+        ),
+
+        <Popconfirm
+          onConfirm={async () => {
+            const resp = await service.remove(record.id);
+            if (resp.status === 200) {
+              message.success('操作成功');
+            }
+            actionRef.current?.reload();
+          }}
+          title="确认删除此告警设置？"
+        >
+          <a key="remove">
+            <Tooltip title="删除">
+              <MinusOutlined />
+            </Tooltip>
+          </a>
+        </Popconfirm>,
       ],
     },
   ];
@@ -113,6 +142,7 @@ const Setting = (props: Props) => {
   return (
     <>
       <ProTable
+        actionRef={actionRef}
         tableAlertOptionRender={() => (
           <Space size={16}>
             <Button onClick={() => {}}>新增告警</Button>

src/pages/device/components/Alarm/service.ts

@@ -25,7 +25,6 @@ class Service extends BaseService<any> {
       }),
   };
 
-  // 查询产品告警记录
   public record = (params: Record<string, unknown>) =>
     request(`/${SystemConst.API_BASE}/device/alarm/history/_query`, {
       method: 'GET',
@@ -42,6 +41,22 @@ class Service extends BaseService<any> {
     request(`/${SystemConst.API_BASE}/device/instance/${id}/detail`, {
       method: 'GET',
     });
+
+  public remove = (id: string) =>
+    request(`/${SystemConst.API_BASE}/device/alarm/${id}`, {
+      method: 'DELETE',
+    });
+
+  public action = (id: string, action: 'stop' | 'start') =>
+    request(`/${SystemConst.API_BASE}/device/alarm/${id}/_${action}`, {
+      method: 'POST',
+    });
+
+  public solve = (id: string, data: string) =>
+    request(`/${SystemConst.API_BASE}/device/alarm/history/${id}/_solve`, {
+      method: 'PUT',
+      data,
+    });
 }
 
 export default Service;