123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- 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, text, subtext) {
- return {
- title: {
- text,
- textAlign: 'center',
- textVerticalAlign: 'middle',
- subtext,
- top: '28%',
- left: '48%',
- },
- tooltip: {
- show: false,
- },
- // value < 50 ? '#f19057' :
- color: ['#6966fb', '#f7f7f7'],
- series: [
- {
- type: 'pie',
- radius: ['90%', '100%'],
- label: {
- show: false,
- },
- data: [value, 100 - value],
- silent: true,
- },
- ],
- };
- }
- 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(data.pieValue, data.pieText, data.pieSubText)} 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 ws-n"
- 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 { expireTime, 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(data.pieValue, data.pieText, data.pieSubText)} 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">有效期至:{expireTime && formatDate(expireTime, '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>
- );
- }
|