index.tsx 7.56 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Avatar, Card, Col, List, Row } from 'antd';
2
import React, { PureComponent } from 'react';
愚道's avatar
愚道 committed
3

陈帅's avatar
陈帅 committed
4 5
import { Dispatch } from 'redux';
import Link from 'umi/link';
陈帅's avatar
陈帅 committed
6
import { PageHeaderWrapper } from '@ant-design/pro-layout';
陈帅's avatar
陈帅 committed
7 8
import { connect } from 'dva';
import moment from 'moment';
愚道's avatar
愚道 committed
9
import Radar from './components/Radar';
愚道's avatar
愚道 committed
10
import { ModalState } from './model';
陈帅's avatar
陈帅 committed
11
import EditableLinkGroup from './components/EditableLinkGroup';
12
import styles from './style.less';
陈帅's avatar
陈帅 committed
13
import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
14

15 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
const links = [
  {
    title: '操作一',
    href: '',
  },
  {
    title: '操作二',
    href: '',
  },
  {
    title: '操作三',
    href: '',
  },
  {
    title: '操作四',
    href: '',
  },
  {
    title: '操作五',
    href: '',
  },
  {
    title: '操作六',
    href: '',
  },
];

愚道's avatar
愚道 committed
42
interface BLOCK_NAME_CAMEL_CASEProps {
陈帅's avatar
陈帅 committed
43 44 45 46
  currentUser: CurrentUser;
  projectNotice: NoticeType[];
  activities: ActivitiesType[];
  radarData: RadarDataType[];
陈帅's avatar
陈帅 committed
47
  dispatch: Dispatch<any>;
愚道's avatar
愚道 committed
48 49 50 51 52
  currentUserLoading: boolean;
  projectLoading: boolean;
  activitiesLoading: boolean;
}

陈帅's avatar
陈帅 committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
@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
68
  }),
陈帅's avatar
陈帅 committed
69
)
愚道's avatar
愚道 committed
70
class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<BLOCK_NAME_CAMEL_CASEProps> {
71 72
  componentDidMount() {
    const { dispatch } = this.props;
ddcat1115's avatar
ddcat1115 committed
73
    dispatch({
74
      type: 'BLOCK_NAME_CAMEL_CASE/init',
75 76 77 78 79 80
    });
  }

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

陈帅's avatar
陈帅 committed
85
  renderActivities = (item: ActivitiesType) => {
陈帅's avatar
陈帅 committed
86 87 88 89 90 91 92 93 94
    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
95
    });
陈帅's avatar
陈帅 committed
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
    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>
    );
陈帅's avatar
陈帅 committed
115
  };
afc163's avatar
afc163 committed
116

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

127 128 129 130 131 132 133
    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}>
134 135 136 137 138
            <div className={styles.contentTitle}>
              早安,
              {currentUser.name}
              ,祝你开心每一天!
            </div>
139
            <div>
140
              {currentUser.title} |{currentUser.group}
ddcat1115's avatar
ddcat1115 committed
141
            </div>
jim's avatar
jim committed
142
          </div>
143 144
        </div>
      ) : null;
145

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

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

263
export default PAGE_NAME_UPPER_CAMEL_CASE;