General-AI-Platform-Web/src/pages/Resource/ResourceDeviceStatus/components/DeviceStatusCard.tsx

/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-06 16:12:17
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-15 14:00:33
 * @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';

import { Progress } from 'antd';
// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';

// const [tabs, setTabs] = useState([]);
// const [projectData, setProjectData] = useState<any>({});
// const [tab, setTab] = useState('');
// const [modelVersionData, setModelVersionData] = useState<any[]>([]);

/**styles */
const listItemStyle = {
  display: 'flex',
  fontSize: 14,
  color: '#333333',
  width: '100%',
  alignItems: 'center',
  padding: '4px 0 0',
};

const listItemLabelStyle = {
  display: 'flex',
  alignItems: 'center',
  fontSize: 12,
  color: '#666666',
  minWidth: 53
};

const listItemTextStyle = {
  fontSize: 14,
  margin: 0,
};
// 卡片
export type UpdateProjectProps = {
  info: Record<string, any>;
  // reload: any;
};

type DeviceItemProgress = {
  label: string;
  percent: number;
};

// 进度条
// TODO 进度条的边框圆角调整为矩形
const DeviceItemProgress: React.FC<DeviceItemProgress> = (props) => {
  let strokeColor = 'rgb(243,48,5)';
  switch (props.label) {
    case '存储告警':
      strokeColor = 'rgb(243,48,5)';
      break;
    case 'GPU告警':
    case '内存告警':
      strokeColor = 'rgb(33,169,122)';
      break;
    case 'CPU告警':
      strokeColor = 'rgb(250,173,20)';
      break;
  }

  return (
    <div style={{ width: '100%', display: 'flex' }} className="rectProgress_box">
      <span style={listItemLabelStyle}>{props.label}</span>
      <Progress
        style={{ padding: 0, margin: 0, borderRadius: 0 }}
        size={['100%', 10]}
        percent={props.percent * 100}
        strokeColor={strokeColor}
        showInfo={false}
      />
    </div>
  );
};

const DeviceStatusCard: React.FC<UpdateProjectProps> = ({
  info,
}: {
  info: Record<string, any>;
}) => {
  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'left',
        paddingLeft: 8,
        paddingRight: 8,
      }}
    >
      {/* <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 10 }}>
        <span style={{ fontWeight: 700, fontSize: 14, paddingRight: 10 }}>苏胜天算法模型</span>
        <Tag color="#44AEF5">经典算法</Tag>
      </div> */}
      <ul
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          fontSize: 12,
          color: '#E80D0D',
          padding: '8px 0 0',
          lineHeight: '18px',
          margin: 0,
        }}
      >
        <li>
          <span
            style={{
              display: 'inline-block',
              width: 8,
              height: 8,
              borderRadius: '50%',
              backgroundColor: '#E80D0D',
            }}
          ></span>
          <span style={{ paddingLeft: 8 }}>代码出错</span>
        </li>
        <li>
          <span
            style={{
              display: 'inline-block',
              width: 8,
              height: 8,
              borderRadius: '50%',
              backgroundColor: '#E80D0D',
            }}
          ></span>
          <span style={{ paddingLeft: 8 }}>服务超时</span>
        </li>
      </ul>
      <ul style={{ width: '100%', marginBottom: 8 }}>
        <li style={listItemStyle}>
          <DeviceItemProgress label="存储告警" percent={0.79}></DeviceItemProgress>
        </li>
        <li style={listItemStyle}>
          <DeviceItemProgress label="GPU告警" percent={0.18}></DeviceItemProgress>
        </li>
        <li style={listItemStyle}>
          <DeviceItemProgress label="内存告警" percent={0.16}></DeviceItemProgress>
        </li>
        <li style={listItemStyle}>
          <DeviceItemProgress label="CPU告警" percent={0.58}></DeviceItemProgress>
        </li>
      </ul>
    </div>
  );
};

export default DeviceStatusCard;