index.tsx 7.53 KB
Newer Older
1 2 3
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
zinkey's avatar
zinkey committed
4
import Link from 'umi/link';
5
import { Row, Col, Card, List, Avatar } from 'antd';
愚道's avatar
愚道 committed
6
import { Dispatch } from 'redux';
愚道's avatar
愚道 committed
7

陈帅's avatar
陈帅 committed
8
import { PageHeaderWrapper } from '@ant-design/pro-layout';
9
import EditableLinkGroup from './components/EditableLinkGroup';
愚道's avatar
愚道 committed
10
import Radar from './components/Radar';
愚道's avatar
愚道 committed
11
import { ModalState } from './model';
陈帅's avatar
陈帅 committed
12
import { ICurrentUser, IActivities, IRadarData, INotice } from './data';
13

14 15
import styles from './style.less';

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
const links = [
  {
    title: '操作一',
    href: '',
  },
  {
    title: '操作二',
    href: '',
  },
  {
    title: '操作三',
    href: '',
  },
  {
    title: '操作四',
    href: '',
  },
  {
    title: '操作五',
    href: '',
  },
  {
    title: '操作六',
    href: '',
  },
];

愚道's avatar
愚道 committed
43
interface BLOCK_NAME_CAMEL_CASEProps {
陈帅's avatar
陈帅 committed
44 45 46 47
  currentUser: ICurrentUser;
  projectNotice: INotice[];
  activities: IActivities[];
  radarData: IRadarData[];
陈帅's avatar
陈帅 committed
48
  dispatch: Dispatch<any>;
愚道's avatar
愚道 committed
49 50 51 52 53
  currentUserLoading: boolean;
  projectLoading: boolean;
  activitiesLoading: boolean;
}

陈帅's avatar
陈帅 committed
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
@connect(
  ({
    BLOCK_NAME_CAMEL_CASE: { currentUser, projectNotice, activities, radarData },
    loading,
  }: {
    BLOCK_NAME_CAMEL_CASE: ModalState;
    loading: { effects: any };
  }) => ({
    currentUser,
    projectNotice,
    activities,
    radarData,
    currentUserLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchUserCurrent'],
    projectLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchProjectNotice'],
    activitiesLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchActivitiesList'],
陈帅's avatar
陈帅 committed
69
  }),
陈帅's avatar
陈帅 committed
70
)
愚道's avatar
愚道 committed
71
class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProps> {
72 73
  componentDidMount() {
    const { dispatch } = this.props;
ddcat1115's avatar
ddcat1115 committed
74
    dispatch({
75
      type: 'BLOCK_NAME_CAMEL_CASE/init',
76 77 78 79 80 81
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
82
      type: 'BLOCK_NAME_CAMEL_CASE/clear',
83 84 85
    });
  }

陈帅's avatar
陈帅 committed
86 87 88 89 90 91 92 93 94 95
  renderActivities(item: IActivities) {
    const events = item.template.split(/@\{([^{}]*)\}/gi).map(key => {
      if (item[key]) {
        return (
          <a href={item[key].link} key={item[key].name}>
            {item[key].name}
          </a>
        );
      }
      return key;
afc163's avatar
afc163 committed
96
    });
陈帅's avatar
陈帅 committed
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
    return (
      <List.Item key={item.id}>
        <List.Item.Meta
          avatar={<Avatar src={item.user.avatar} />}
          title={
            <span>
              <a className={styles.username}>{item.user.name}</a>
              &nbsp;
              <span className={styles.event}>{events}</span>
            </span>
          }
          description={
            <span className={styles.datetime} title={item.updatedAt}>
              {moment(item.updatedAt).fromNow()}
            </span>
          }
        />
      </List.Item>
    );
afc163's avatar
afc163 committed
116 117
  }

118 119
  render() {
    const {
ddcat1115's avatar
ddcat1115 committed
120
      currentUser,
陈帅's avatar
陈帅 committed
121
      activities,
愚道's avatar
愚道 committed
122
      projectNotice,
Andreas Cederström's avatar
Andreas Cederström committed
123 124
      projectLoading,
      activitiesLoading,
愚道's avatar
愚道 committed
125
      radarData,
126 127
    } = this.props;

128 129 130 131 132 133 134
    const pageHeaderContent =
      currentUser && Object.keys(currentUser).length ? (
        <div className={styles.pageHeaderContent}>
          <div className={styles.avatar}>
            <Avatar size="large" src={currentUser.avatar} />
          </div>
          <div className={styles.content}>
135 136 137 138 139
            <div className={styles.contentTitle}>
              早安,
              {currentUser.name}
              ,祝你开心每一天!
            </div>
140
            <div>
141
              {currentUser.title} |{currentUser.group}
ddcat1115's avatar
ddcat1115 committed
142
            </div>
jim's avatar
jim committed
143
          </div>
144 145
        </div>
      ) : null;
146

afc163's avatar
afc163 committed
147 148 149
    const extraContent = (
      <div className={styles.extraContent}>
        <div className={styles.statItem}>
niko's avatar
niko committed
150
          <p>项目数</p>
151 152
          <p>56</p>
        </div>
afc163's avatar
afc163 committed
153
        <div className={styles.statItem}>
niko's avatar
niko committed
154
          <p>团队内排名</p>
jim's avatar
jim committed
155
          <p>
156
            8<span> / 24</span>
jim's avatar
jim committed
157
          </p>
158
        </div>
afc163's avatar
afc163 committed
159
        <div className={styles.statItem}>
niko's avatar
niko committed
160
          <p>项目访问</p>
161 162 163 164 165 166
          <p>2,223</p>
        </div>
      </div>
    );

    return (
陈帅's avatar
陈帅 committed
167
      <PageHeaderWrapper content={pageHeaderContent} extraContent={extraContent}>
168
        <Row gutter={24}>
169
          <Col xl={16} lg={24} md={24} sm={24} xs={24}>
170 171 172 173 174 175 176 177 178
            <Card
              className={styles.projectList}
              style={{ marginBottom: 24 }}
              title="进行中的项目"
              bordered={false}
              extra={<Link to="/">全部项目</Link>}
              loading={projectLoading}
              bodyStyle={{ padding: 0 }}
            >
愚道's avatar
愚道 committed
179
              {projectNotice.map(item => (
jim's avatar
jim committed
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201
                <Card.Grid className={styles.projectGrid} key={item.id}>
                  <Card bodyStyle={{ padding: 0 }} bordered={false}>
                    <Card.Meta
                      title={
                        <div className={styles.cardTitle}>
                          <Avatar size="small" src={item.logo} />
                          <Link to={item.href}>{item.title}</Link>
                        </div>
                      }
                      description={item.description}
                    />
                    <div className={styles.projectItemContent}>
                      <Link to={item.memberLink}>{item.member || ''}</Link>
                      {item.updatedAt && (
                        <span className={styles.datetime} title={item.updatedAt}>
                          {moment(item.updatedAt).fromNow()}
                        </span>
                      )}
                    </div>
                  </Card>
                </Card.Grid>
              ))}
202 203 204 205
            </Card>
            <Card
              bodyStyle={{ padding: 0 }}
              bordered={false}
nikogu's avatar
nikogu committed
206
              className={styles.activeCard}
207 208 209
              title="动态"
              loading={activitiesLoading}
            >
陈帅's avatar
陈帅 committed
210 211
              <List<IActivities>
                loading={activitiesLoading}
陈帅's avatar
陈帅 committed
212
                renderItem={item => this.renderActivities(item)}
陈帅's avatar
陈帅 committed
213 214 215 216
                dataSource={activities}
                className={styles.activitiesList}
                size="large"
              />
217 218
            </Card>
          </Col>
219
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
220 221 222 223 224 225
            <Card
              style={{ marginBottom: 24 }}
              title="快速开始 / 便捷导航"
              bordered={false}
              bodyStyle={{ padding: 0 }}
            >
jim's avatar
jim committed
226
              <EditableLinkGroup onAdd={() => {}} links={links} linkElement={Link} />
227 228 229 230
            </Card>
            <Card
              style={{ marginBottom: 24 }}
              bordered={false}
afc163's avatar
afc163 committed
231
              title="XX 指数"
nikogu's avatar
nikogu committed
232
              loading={radarData.length === 0}
233 234
            >
              <div className={styles.chart}>
235
                <Radar hasLegend height={343} data={radarData} />
236 237 238
              </div>
            </Card>
            <Card
afc163's avatar
afc163 committed
239
              bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
240 241
              bordered={false}
              title="团队"
ddcat1115's avatar
ddcat1115 committed
242
              loading={projectLoading}
243 244 245
            >
              <div className={styles.members}>
                <Row gutter={48}>
愚道's avatar
愚道 committed
246
                  {projectNotice.map(item => (
jim's avatar
jim committed
247 248 249 250 251 252 253
                    <Col span={12} key={`members-item-${item.id}`}>
                      <Link to={item.href}>
                        <Avatar src={item.logo} size="small" />
                        <span className={styles.member}>{item.member}</span>
                      </Link>
                    </Col>
                  ))}
254 255 256 257 258
                </Row>
              </div>
            </Card>
          </Col>
        </Row>
259
      </PageHeaderWrapper>
260 261 262
    );
  }
}
陈帅's avatar
陈帅 committed
263

264
export default PAGE_NAME_UPPER_CAMEL_CASE;