104 lines
2.5 KiB
TypeScript
104 lines
2.5 KiB
TypeScript
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 },
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|