sourcecode/front/project/www/components/Panel/index.js

import React from 'react';
import { Tooltip } from 'antd';
import './index.less';
import Assets from '@src/components/Assets';
import PieChart from '@src/components/PieChart';
import { formatDate } from '@src/services/Tools';
import Module from '../Module';
import ProgressButton from '../ProgressButton';
import Button from '../Button';

function makePie(value) {
  return {
    title: {
      text: '30%',
      textAlign: 'center',
      textVerticalAlign: 'middle',
      subtext: '全站 60%',
      top: '28%',
      left: '48%',
    },
    color: [value < 50 ? '#f19057' : '#6966fb', '#f7f7f7'],
    series: [
      {
        type: 'pie',
        radius: ['90%', '100%'],
        label: {
          show: false,
        },
        data: [value, 100 - value],
      },
    ],
  };
}
export default function Panel(props) {
  const { style, message, data = {}, col = 3, title, onClick } = props;
  return (
    <Module style={style} className="panel">
      <div className="header">
        <span>{title}</span>
        {message && (
          <Tooltip title={message} trigger="click">
            <Assets className="qa" name="QA" svg />
          </Tooltip>
        )}
      </div>
      <div className="body">
        <div className="chart-info">
          <PieChart option={makePie(23)} width={110} height={110} />
          <div className="info">
            {(data.info || []).map(row => {
              return (
                <div className="item">
                  <div className="title">{row.title}</div>
                  <div className="data">
                    <span className="text">{row.number}</span>
                    {row.unit}
                  </div>
                </div>
              );
            })}
            {(data.desc || []).length > 0 && (
              <div className="desc-wrapper">
                {(data.desc || []).map(row => {
                  return <div className="desc">{row}</div>;
                })}
              </div>
            )}
          </div>
        </div>
        <div className={`list col-${col}`}>
          {(data.children || []).map(item => {
            return (
              <ProgressButton
                className="item"
                progress={item.progress}
                onClick={() => {
                  if (onClick) onClick(item);
                }}
              >
                {item.title}
              </ProgressButton>
            );
          })}
        </div>
      </div>
    </Module>
  );
}
export function WaitPanel(props) {
  const { style, message, data = {}, col = 3, title, onClick, onOpen } = props;
  return (
    <Module style={style} className="panel wait-panel">
      <div className="header">
        <span>{title}</span>
        {message && (
          <Tooltip title={message} trigger="click">
            <Assets className="qa" name="QA" svg />
          </Tooltip>
        )}
      </div>
      <div className="body">
        <div className="chart-info">
          <div className="info">
            <div className="text">您还未开通本月机经</div>
            {(data.desc || []).length > 0 && (
              <div className="desc-wrapper">
                {(data.desc || []).map(row => {
                  return <div className="desc">{row}</div>;
                })}
              </div>
            )}
            {(data.info || []).map(row => {
              return (
                <div className="item">
                  <div className="title">{row.title}</div>
                  <div className="data">
                    <span className="text">{row.number}</span>
                    {row.unit}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className={`list col-${col}`}>
          {(data.children || []).map(item => {
            return (
              <ProgressButton
                className="item"
                progress={item.progress}
                onClick={() => {
                  if (onClick) onClick(item);
                }}
              >
                {item.title}
              </ProgressButton>
            );
          })}
        </div>

        <Button size="lager" radius onClick={() => onOpen && onOpen()}>
          立即开通
        </Button>
      </div>
    </Module>
  );
}
export function BuyPanel(props) {
  const { style, message, title, onBuy } = props;
  return (
    <Module style={style} className="panel buy-panel">
      <div className="header">
        <span>{title}</span>
        {message && (
          <Tooltip title={message} trigger="click">
            <Assets className="qa" name="QA" svg />
          </Tooltip>
        )}
      </div>
      <div className="body">
        <Assets name="banner" />
        <div className="text">您还未购买本月机经</div>
        <Button radius size="small" width={80} onClick={() => onBuy && onBuy()}>
          立即购买
        </Button>
      </div>
    </Module>
  );
}

export function SmallPanel(props) {
  const { style, title, lock, data = {}, onClick } = props;
  const { useEndTime, needService } = data;
  return (
    <Module style={style} className="panel small-panel">
      <div className="header">
        <span>{title}</span>
        {lock && <Assets name="lock" />}
      </div>
      <div className="body" onClick={() => onClick && onClick()}>
        <div className="chart-info">
          <PieChart option={makePie(33)} width={110} height={110} />
          <div className="info">
            {(data.info || []).map(row => {
              return (
                <div className="item">
                  <div className="title">{row.title}</div>
                  <div className="data">
                    <span className="text">{row.number}</span>
                    {row.unit}
                  </div>
                </div>
              );
            })}
            {needService && <div className="date">有效期至：{useEndTime && formatDate(useEndTime, 'YYYY-MM-DD')}</div>}
          </div>
        </div>
      </div>
    </Module>
  );
}

export function SmallWaitPanel(props) {
  const { style, title, lock, data = {}, onOpen } = props;
  const { endTime } = data;
  return (
    <Module style={style} className="panel small-wait-panel">
      <div className="header">
        <span>{title}</span>
        {lock && <Assets name="lock" />}
      </div>
      <div className="body">
        <div className="title">请于{endTime && formatDate(endTime, 'YYYY-MM-DD')}前开通</div>
        <div className="btn">
          <Button size="lager" width={120} radius onClick={() => onOpen && onOpen()}>
            立即开通
          </Button>
        </div>
      </div>
    </Module>
  );
}

export function SmallBuyPanel(props) {
  const { style, title, lock, onBuy } = props;
  return (
    <Module style={style} className="panel small-buy-panel">
      <div className="header">
        <span>{title}</span>
        {lock && <Assets name="lock" />}
      </div>
      <div className="body">
        <Assets name="banner_1" />
        <Button radius size="small" width={80} onClick={() => onBuy && onBuy()}>
          立即购买
        </Button>
      </div>
    </Module>
  );
}