feat(core): sgw-device-ui

src/pages/Trip/components/AlarmTable.tsx

@@ -0,0 +1,103 @@
+import {
+  DATE_TIME_FORMAT,
+  DURATION_POLLING_PRESENTATIONS,
+  STATUS_DANGEROUS,
+  STATUS_NORMAL,
+  STATUS_SOS,
+  STATUS_WARNING,
+} from '@/utils/format';
+import { ProList, ProListMetas } from '@ant-design/pro-components';
+import { Badge, theme, Typography } from 'antd';
+import moment from 'moment';
+import { useRef } from 'react';
+
+const getBadgeLevel = (level: number) => {
+  switch (level) {
+    case STATUS_NORMAL:
+      return <Badge status="success" />;
+    case STATUS_WARNING:
+      return <Badge status="warning" />;
+    case STATUS_DANGEROUS:
+      return <Badge status="error" />;
+    case STATUS_SOS:
+      return <Badge status="error" />;
+    default:
+      return <Badge status="default" />;
+  }
+};
+
+interface AlarmTableProps {
+  alarmList?: API.Alarm[];
+  isLoading?: boolean;
+}
+
+export const AlarmTable: React.FC<AlarmTableProps> = ({
+  alarmList,
+  isLoading,
+}) => {
+  //   const intl = useIntl();
+  const actionRef = useRef();
+  const { token } = theme.useToken();
+  //   const [messageApi, contextHolder] = message.useMessage();
+  //   const [confirmModalVisible, handleConfirmModalVisible] = useState(false);
+  //   const [currentRow, setCurrentRow] = useState({});
+
+  const getTitleAlarmColor = (level: number) => {
+    switch (level) {
+      case STATUS_NORMAL:
+        return token.colorSuccess;
+      case STATUS_WARNING:
+        return token.colorWarning;
+      case STATUS_DANGEROUS:
+        return token.colorError;
+      case STATUS_SOS:
+        return token.colorError;
+      default:
+        return token.colorText;
+    }
+  };
+
+  const columns: ProListMetas<API.Alarm> = {
+    title: {
+      dataIndex: 'name',
+      render(_, item) {
+        return (
+          <Typography.Text style={{ color: getTitleAlarmColor(item.level) }}>
+            {item.name}
+          </Typography.Text>
+        );
+      },
+    },
+    avatar: {
+      render: (_, item) => getBadgeLevel(item.level),
+    },
+    description: {
+      dataIndex: 'time',
+      render: (_, item) => {
+        return (
+          <>
+            <div>{moment.unix(item?.t).format(DATE_TIME_FORMAT)}</div>
+          </>
+        );
+      },
+    },
+  };
+
+  return (
+    <>
+      <ProList<API.Alarm>
+        // bordered
+        actionRef={actionRef}
+        metas={columns}
+        polling={DURATION_POLLING_PRESENTATIONS}
+        loading={isLoading}
+        dataSource={alarmList}
+        search={false}
+        dateFormatter="string"
+        cardProps={{
+          bodyStyle: { paddingInline: 16, paddingBlock: 8 },
+        }}
+      />
+    </>
+  );
+};