You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
1 year ago
|
/*
|
||
|
|
* @Author: donghao donghao@supervision.ltd
|
||
|
|
* @Date: 2024-04-08 16:57:30
|
||
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
||
|
|
* @LastEditTime: 2024-05-10 14:26:02
|
||
|
|
* @FilePath: \general-ai-manage\src\pages\Business\BusinessState\components\deviceStateCard.tsx
|
||
|
|
* @Description: 设备状态项卡片
|
||
|
|
*/
|
||
|
|
import { AnimatePic } from '@/components/Animate';
|
||
|
|
import TableActionCard, { actionsProps } from '@/components/TableActionCard';
|
||
|
|
import { deviceStateEnums } from '@/enums/device';
|
||
|
|
import { Progress } from 'antd';
|
||
|
|
import json01 from '../../../../../public/animate/device/01.json'; //引入下载的动效json
|
||
|
|
|
||
|
|
type DeviceStateCardProps = {
|
||
|
|
info: Record<string, any>;
|
||
|
|
renderActions: actionsProps[];
|
||
|
|
fetchDetail: () => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const DeviceStateCard: React.FC<DeviceStateCardProps> = ({ info, renderActions, fetchDetail }) => {
|
||
|
|
const formatStateByVal = (record: string): DICTENUM.DICT_TAB_ITEM => {
|
||
|
|
return deviceStateEnums.find((item: DICTENUM.DICT_TAB_ITEM) => item.key === record);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => {
|
||
|
|
console.log('服务器详情展示');
|
||
|
|
fetchDetail();
|
||
|
|
}}
|
||
|
|
className={`bs_card_box ${formatStateByVal(info?.state)?.className}`}
|
||
|
|
>
|
||
|
|
<div className="flex justify-between w-full p-[12px] bs_card_header">
|
||
|
|
<div className="flex items-center title_box">
|
||
|
|
<div className="bs_card_name single_line head4">{info?.deviceSort}</div>
|
||
|
|
<div
|
||
|
|
className={`gn_card_tag ml-[8px] text-white ${
|
||
|
|
info?.state === '1' ? 'bg_active_1' : ''
|
||
|
|
} ${info?.state === '2' ? 'bg_gray_color_1' : ''} ${
|
||
|
|
info?.state === '3' ? 'bg_active_3' : ''
|
||
|
|
} ${info?.state === '4' ? 'bg_active_2' : ''}`}
|
||
|
|
>
|
||
|
|
{formatStateByVal(info?.state)?.label}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span>
|
||
|
|
<TableActionCard renderActions={renderActions} maxActionCount={3}></TableActionCard>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex bs_card_content px-[12px] py-[6px] items-center">
|
||
|
|
<div className="device-content-left w-[100px] mr-[10px]">
|
||
|
|
<AnimatePic value={json01} />
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<ul className="w-full">
|
||
|
|
{info?.progressData?.map((v, k) => {
|
||
|
|
return (
|
||
|
|
<li key={k}>
|
||
|
|
<div className="flex rectProgress_box my-[6px]">
|
||
|
|
<div className="pr-[4px] text3 pt-[5px]">{v.label}</div>
|
||
|
|
<div className="flex items-center flex-1">
|
||
|
|
<Progress
|
||
|
|
style={{ padding: 0, margin: 0, borderRadius: 0 }}
|
||
|
|
size={['100%', 10]}
|
||
|
|
height={46}
|
||
|
|
percent={v.percent * 100}
|
||
|
|
strokeColor={v.strokeColor}
|
||
|
|
showInfo={false}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DeviceStateCard;
|