General-AI-Platform-Web/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx

/* eslint-disable eqeqeq */
/* eslint-disable react/no-unknown-property */
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Image } from 'antd';
import React from 'react';

// type
import { ComputePowerPoolItem } from './typing';

// TODO 整个页面的字体、颜色、间距处理

// state

const poolsData: ComputePowerPoolItem[] = [
  {
    name: '玩手机监控',
    type: 0,
    proportion: 39,
    PretreatmentEfficiency: 15,
    color: '#FAA90B',
  },
  {
    name: '离岗监控',
    type: 1,
    proportion: 60,
    PretreatmentEfficiency: 20,
    color: '#3879FE',
  },
  {
    name: '空闲算力',
    type: 2,
    proportion: 1,
    PretreatmentEfficiency: 0,
  },
];

/**子组件 */
// 参数信息项
const InfoPreview: React.FC<{
  name: string;
  des: string;
}> = ({ name, des }) => {
  return (
    <div
      style={{
        padding: 0,
        margin: 0,
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
        minWidth: '13vw',
      }}
    >
      <h6 style={{ color: '#333333', fontSize: 14, fontWeight: 700 }}>{name}</h6>
      <div style={{ color: '#666666', fontSize: 14 }}>{des}</div>
    </div>
  );
};

// 占比信息
const OccupyProportion: React.FC<{
  pools: ComputePowerPoolItem[];
}> = ({ pools }) => {
  return (
    <div className="occupyProportion_box">
      <div className="occupy_up" style={{ marginTop: 24, marginBottom: 20, padding: 0, position: 'relative', width: '100%' }}>
        <ul
          className="occupy_progress"
          style={{
            width: '100%',
            height: 32,
            backgroundColor: '#E5E5E5',
            borderRadius: 16,
            padding: 0,
            overflow: 'hidden',
            display: 'flex',
          }}
        >
          {pools.map((item, index) => {
            return (
              <li
                key={index}
                style={{
                  height: 32,
                  width: `${item.proportion}%`,
                  padding: 0,
                  backgroundColor: item?.color || '#E5E5E5',
                }}
              ></li>
            );
          })}
        </ul>
        <ul>
          <li
            style={{
              position: 'absolute',
              left: `calc(${pools[0].proportion - 0.8}% )`,
              top: -4,
              padding: 0,
              width: 20,
            }}
          >
            <Image width={20} src={'/images/computePowerAllocation/slideBtn1.png'} preview={false}></Image>
          </li>
          <li
            style={{
              position: 'absolute',
              left: `${pools[0].proportion + pools[1].proportion - 0.8}%`,
              top: -4,
              width: 20,
            }}
          >
            <Image width={20} src={'/images/computePowerAllocation/slideBtn2.png'} preview={false}></Image>
          </li>
        </ul>
      </div>

      <div className="occupy_des">
        <ul
          style={{
            display: 'flex',
            paddingLeft: 0,
            paddingBottom: 24,
            margin: 0
          }}
        >
          {pools.map((item, index) => {
            return (
              <li key={index} style={{marginRight: 35}}>
                <span
                  style={{
                    width: 12,
                    height: 12,
                    display: 'inline-block',
                    background: item?.color || '#E5E5E5',
                  }}
                ></span>
                <span style={{ paddingLeft: 8 }}>
                  {item.name}：{item.proportion}%
                </span>
                {item.type != 2 ? (
                  <span style={{ paddingLeft: 8 }}>
                    预计处理效率：<span style={{ fontWeight: 700 }} >{item.PretreatmentEfficiency} 帧/秒</span>
                  </span>
                ) : (
                  <></>
                )}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

/**
 * @算力资源池页面组件
 * @returns
 */
const ComputePowerAllocation: React.FC = () => {
  return (
    <PageContainer>
      <ProCard
        title="算力资源池"
        style={{ background: 'white' }}
        headStyle={{ padding: 20, borderBottom: '1px solid #E0E0E0' }}
        bodyStyle={{
          paddingLeft: 9,
          paddingRight: 9,
          paddingTop: 0,
          paddingBottom: 0,
          margin: 0,


        }}
        gutter={24}
        wrap
        ghost
      >
        {/* 参数信息 */}
        <ProCard
          gutter={24}
          style={{ padding: 0, margin: 0 }}
          bodyStyle={{
            paddingTop: 24,
            paddingBottom: 24,
            paddingLeft: 0,
            paddingRight: 0,
            margin: 0,
            display: 'flex',
            alignItems: 'center',
            borderBottom: '1px solid #E0E0E0',
          }}
        >
          <Image
            width={62}
            src={'/images/computePowerAllocation/icon1.png'}
            placeholder={<Image preview={false} src={'/images/computePowerAllocation/icon1.png'} width={62} />}
          />
          <div
            style={{
              paddingLeft: 17,
              paddingRight: 17,
              margin: 0,
              display: 'flex',
              justifyContent: 'center',
              flexDirection: 'column',
            }}
          >
            <InfoPreview name="徐州农商行算力资源池" des="算力资源999Tops"></InfoPreview>
          </div>
          <InfoPreview
            name="硬件组成"
            des="NVIDIA GeForce 4090 | NVIDIA GeForce 4090 | NVIDIA GeForce 4090 |"
          ></InfoPreview>
        </ProCard>
        {/* 占比信息 */}
        <ProCard
          gutter={24}
          style={{ padding: 0, margin: 0 }}
          bodyStyle={{ padding: 0, margin: 0 }}
        >
          <OccupyProportion pools={poolsData as ComputePowerPoolItem[]} />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};

export default ComputePowerAllocation;