General-AI-Platform-Web/src/pages/Business/BusinessState/components/deviceStateCard.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-08 16:57:30
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-05-11 09:33:08
 * @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?.name}</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;