You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
2.0 KiB
46 lines
2.0 KiB
import React, { useEffect, useState } from 'react'
|
|
import Box from './public/table-card';
|
|
import CarouselList from './public/carousel-list';
|
|
import { Tooltip } from 'antd';
|
|
|
|
function AlarmList(props) {
|
|
const { cardContentHeight } = props;
|
|
|
|
const data = [
|
|
['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
|
|
['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
|
|
]
|
|
const renderBody = () => {
|
|
return <CarouselList
|
|
header={['预警内容', '预警等级', '预警时间']}
|
|
data={data?.map(s => {
|
|
return [
|
|
<Tooltip placement="top" title={s[0]}>
|
|
{s[0].length > 20 ? s[0]?.taskNamesubstring(0, 20) + '...' : s[0]}
|
|
</Tooltip>,
|
|
<div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>,
|
|
s[2]
|
|
]
|
|
})}
|
|
rowNum={6}
|
|
height={cardContentHeight}
|
|
multiellipsis
|
|
columnWidth={[180, 80, 150]}
|
|
/>
|
|
}
|
|
|
|
return <Box title={"预警列表"}>
|
|
{renderBody()}
|
|
</Box>
|
|
}
|
|
|
|
export default AlarmList;
|
|
|
|
|
|
|