Commit c9a09d85 authored by 陈帅's avatar 陈帅

add analysis locale

parent 4caebc00
...@@ -40,77 +40,77 @@ for (let i = 0; i < 50; i += 1) { ...@@ -40,77 +40,77 @@ for (let i = 0; i < 50; i += 1) {
} }
const salesTypeData = [ const salesTypeData = [
{ {
x: '家用电器', x: 'House appliances',
y: 4544, y: 4544,
}, },
{ {
x: '食用酒水', x: 'Drink & wine',
y: 3321, y: 3321,
}, },
{ {
x: '个护健康', x: 'Health & care',
y: 3113, y: 3113,
}, },
{ {
x: '服饰箱包', x: 'Clothing & bags',
y: 2341, y: 2341,
}, },
{ {
x: '母婴产品', x: 'Mother-baby',
y: 1231, y: 1231,
}, },
{ {
x: '其他', x: 'Other',
y: 1231, y: 1231,
}, },
]; ];
const salesTypeDataOnline = [ const salesTypeDataOnline = [
{ {
x: '家用电器', x: 'House appliances',
y: 244, y: 244,
}, },
{ {
x: '食用酒水', x: 'Drink & wine',
y: 321, y: 321,
}, },
{ {
x: '个护健康', x: 'Health & care',
y: 311, y: 311,
}, },
{ {
x: '服饰箱包', x: 'Clothing & bags',
y: 41, y: 41,
}, },
{ {
x: '母婴产品', x: 'Mother-baby',
y: 121, y: 121,
}, },
{ {
x: '其他', x: 'Other',
y: 111, y: 111,
}, },
]; ];
const salesTypeDataOffline = [ const salesTypeDataOffline = [
{ {
x: '家用电器', x: 'House appliances',
y: 99, y: 99,
}, },
{ {
x: '个护健康', x: 'Drink & wine',
y: 188, y: 188,
}, },
{ {
x: '服饰箱包', x: 'Health & care',
y: 344, y: 344,
}, },
{ {
x: '母婴产品', x: 'Clothing & bags',
y: 255, y: 255,
}, },
{ {
x: '其他', x: 'Other',
y: 65, y: 65,
}, },
]; ];
...@@ -118,7 +118,7 @@ const salesTypeDataOffline = [ ...@@ -118,7 +118,7 @@ const salesTypeDataOffline = [
const offlineData = []; const offlineData = [];
for (let i = 0; i < 10; i += 1) { for (let i = 0; i < 10; i += 1) {
offlineData.push({ offlineData.push({
name: `门店${i}`, name: `Stores ${i}`,
cvr: Math.ceil(Math.random() * 9) / 10, cvr: Math.ceil(Math.random() * 9) / 10,
}); });
} }
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd'; import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd';
import moment from 'moment'; import moment from 'moment';
import groupBy from 'lodash/groupBy'; import groupBy from 'lodash/groupBy';
...@@ -51,13 +52,16 @@ export default class GlobalHeaderRight extends PureComponent { ...@@ -51,13 +52,16 @@ export default class GlobalHeaderRight extends PureComponent {
const menu = ( const menu = (
<Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}> <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
<Menu.Item key="userCenter"> <Menu.Item key="userCenter">
<Icon type="user" />个人中心 <Icon type="user" />
<FormattedMessage id="menu.account.center" defaultMessage="account center" />
</Menu.Item> </Menu.Item>
<Menu.Item key="userinfo"> <Menu.Item key="userinfo">
<Icon type="setting" />设置 <Icon type="setting" />
<FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
</Menu.Item> </Menu.Item>
<Menu.Item key="triggerError"> <Menu.Item key="triggerError">
<Icon type="close-circle" />触发报错 <Icon type="close-circle" />
<FormattedMessage id="menu.account.trigger" defaultMessage="Trigger Error" />
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item key="logout"> <Menu.Item key="logout">
......
...@@ -15,6 +15,7 @@ export interface IPageHeaderProps { ...@@ -15,6 +15,7 @@ export interface IPageHeaderProps {
tabBarExtraContent?: React.ReactNode; tabBarExtraContent?: React.ReactNode;
linkElement?: React.ReactNode; linkElement?: React.ReactNode;
style?: React.CSSProperties; style?: React.CSSProperties;
home?: React.ReactNode;
} }
export default class PageHeader extends React.Component<IPageHeaderProps, any> {} export default class PageHeader extends React.Component<IPageHeaderProps, any> {}
...@@ -105,7 +105,7 @@ export default class PageHeader extends PureComponent { ...@@ -105,7 +105,7 @@ export default class PageHeader extends PureComponent {
{ {
[linkElement === 'a' ? 'href' : 'to']: '/', [linkElement === 'a' ? 'href' : 'to']: '/',
}, },
'首页' this.props.home || 'Home'
)} )}
</Breadcrumb.Item> </Breadcrumb.Item>
); );
......
...@@ -16,6 +16,7 @@ order: 11 ...@@ -16,6 +16,7 @@ order: 11
| title | title 区域 | ReactNode | - | | title | title 区域 | ReactNode | - |
| logo | logo区域 | ReactNode | - | | logo | logo区域 | ReactNode | - |
| action | 操作区,位于 title 行的行尾 | ReactNode | - | | action | 操作区,位于 title 行的行尾 | ReactNode | - |
| home | 默认的主页说明文字 | ReactNode | - |
| content | 内容区 | ReactNode | - | | content | 内容区 | ReactNode | - |
| extraContent | 额外内容区,位于content的右侧 | ReactNode | - | | extraContent | 额外内容区,位于content的右侧 | ReactNode | - |
| breadcrumbList | 面包屑数据,配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - | | breadcrumbList | 面包屑数据,配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - |
......
...@@ -7,9 +7,70 @@ export default { ...@@ -7,9 +7,70 @@ export default {
data: appLocaleData, data: appLocaleData,
antd: antdEn, antd: antdEn,
messages: { messages: {
'menu.home': 'home',
'menu.dashboard': 'Dashboard',
'menu.dashboard.analysis': 'Analysis',
'menu.dashboard.monitor': 'Monitor',
'menu.dashboard.workplace': 'Workplace',
'menu.form': 'Form',
'menu.form.basicform': 'Basic Form',
'menu.form.stepform': 'Step Form',
'menu.form.advancedform': 'Advanced Form',
'menu.list': 'List',
'menu.list.searchlist': 'Search List',
'menu.list.basiclist': 'Basic List',
'menu.list.cardlist': 'Card List',
'menu.list.searchlist.articles': 'Search List(articles)',
'menu.list.searchlist.projects': 'Search List(projects)',
'menu.list.searchlist.applications': 'Search List(applications)',
'menu.profile': 'Profile',
'menu.profile.basic': 'Basic',
'menu.profile.advanced': 'Advanced',
'menu.result': 'Result',
'menu.result.success': 'Success',
'menu.result.fail': 'Fail',
'menu.exception': 'Exception',
'menu.exception.not-permission': '403',
'menu.exception.not-find': '404',
'menu.exception.server-error': '500',
'menu.exception.trigger': 'Trigger',
'menu.account': 'Account',
'menu.account.center': 'Account Center',
'menu.account.settings': 'Account Settings',
'menu.account.trigger': 'Trigger Error',
'app.home.introduce': 'introduce', 'app.home.introduce': 'introduce',
'app.analysis.test': 'Gongzhuan road No.{no} shop', 'app.analysis.test': 'Gongzhuan road No.{no} shop',
'app.analysis.introduce': 'Introduce',
'app.analysis.total-sales': 'total sales',
'app.analysis.day-sales': 'Day Sales',
'app.analysis.visits': 'Visits',
'app.analysis.visits-trend': 'Visits Trend',
'app.analysis.visits-ranking': 'Visits Ranking',
'app.analysis.day-visits': 'Day Visits',
'app.analysis.week': 'week ratio',
'app.analysis.day': 'day ratio',
'app.analysis.payments': 'Payments',
'app.analysis.conversion-rate': 'Conversion Rate',
'app.analysis.operational-effect': 'Operational Effect',
'app.analysis.sales-trend': 'Stores Sales Trend',
'app.analysis.sales-ranking': 'sales ranking',
'app.analysis.all-year': 'All Year',
'app.analysis.all-month': 'All Month',
'app.analysis.all-week': 'All Week',
'app.analysis.all-day': 'All day',
'app.analysis.search-users': 'Search Users',
'app.analysis.per-capita-search': 'Per Capita Search',
'app.analysis.online-top-search': 'Online Top Search',
'app.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
'app.analysis.channel.all': 'ALL',
'app.analysis.channel.online': 'Online',
'app.analysis.channel.stores': 'Stores',
'app.analysis.sales': 'Sales',
'app.analysis.traffic': 'Traffic',
'app.analysis.table.rank': 'Rank',
'app.analysis.table.search-keyword': 'Keyword',
'app.analysis.table.users': 'Users',
'app.analysis.table.weekly-range': 'Weekly Range',
// ...enMessages, // ...enMessages,
}, },
}; };
...@@ -7,9 +7,8 @@ export default { ...@@ -7,9 +7,8 @@ export default {
data: appLocaleData, data: appLocaleData,
antd: antdZh, antd: antdZh,
messages: { messages: {
'app.home.introduce': '介绍', 'menu.home': '首页',
'app.analysis.test': '工专路 {no} 号店', 'menu.dashboard': 'Dashboard',
'menu.dashboard': '仪表盘',
'menu.dashboard.analysis': '分析页', 'menu.dashboard.analysis': '分析页',
'menu.dashboard.monitor': '监控页', 'menu.dashboard.monitor': '监控页',
'menu.dashboard.workplace': '工作台', 'menu.dashboard.workplace': '工作台',
...@@ -23,13 +22,13 @@ export default { ...@@ -23,13 +22,13 @@ export default {
'menu.list.cardlist': '卡片列表', 'menu.list.cardlist': '卡片列表',
'menu.list.searchlist.articles': '搜索列表(文章)', 'menu.list.searchlist.articles': '搜索列表(文章)',
'menu.list.searchlist.projects': '搜索列表(项目)', 'menu.list.searchlist.projects': '搜索列表(项目)',
'menu.list.searchlist.applications': '搜索列表(列表', 'menu.list.searchlist.applications': '搜索列表(应用',
'menu.profile': '详情页', 'menu.profile': '详情页',
'menu.profile.basic': '详情页', 'menu.profile.basic': '详情页',
'menu.profile.advanced': '详情页', 'menu.profile.advanced': '详情页',
'menu.result': '结果页', 'menu.result': '结果页',
'menu.result.success': '成功页', 'menu.result.success': '成功页',
'menu.result.fail': '成功', 'menu.result.fail': '失败',
'menu.exception': '异常页', 'menu.exception': '异常页',
'menu.exception.not-permission': '403', 'menu.exception.not-permission': '403',
'menu.exception.not-find': '404', 'menu.exception.not-find': '404',
...@@ -38,6 +37,40 @@ export default { ...@@ -38,6 +37,40 @@ export default {
'menu.account': '个人页', 'menu.account': '个人页',
'menu.account.center': '个人中心', 'menu.account.center': '个人中心',
'menu.account.settings': '个人设置', 'menu.account.settings': '个人设置',
'menu.account.trigger': '触发报错',
'app.home.introduce': '介绍',
'app.analysis.test': '工专路 {no} 号店',
'app.analysis.introduce': '指标说明',
'app.analysis.total-sales': '总销售额',
'app.analysis.day-sales': '日销售额',
'app.analysis.visits': '访问量',
'app.analysis.visits-trend': '访问量趋势',
'app.analysis.visits-ranking': '门店访问量排名',
'app.analysis.day-visits': '日访问量',
'app.analysis.week': '周同比',
'app.analysis.day': '日同比',
'app.analysis.payments': '支付笔数',
'app.analysis.conversion-rate': '转化率',
'app.analysis.operational-effect': '运营活动效果',
'app.analysis.sales-trend': '销售趋势',
'app.analysis.sales-ranking': '门店销售额排名',
'app.analysis.all-year': '全年',
'app.analysis.all-month': '本月',
'app.analysis.all-week': '本周',
'app.analysis.all-day': '今日',
'app.analysis.search-users': '搜索用户数',
'app.analysis.per-capita-search': '人均搜索次数',
'app.analysis.online-top-search': '线上热门搜索',
'app.analysis.the-proportion-of-sales': '销售额类别占比',
'app.analysis.channel.all': '全部渠道',
'app.analysis.channel.online': '线上',
'app.analysis.channel.stores': '门店',
'app.analysis.sales': '销售额',
'app.analysis.traffic': '客流量',
'app.analysis.table.rank': '排名',
'app.analysis.table.search-keyword': '搜索关键词',
'app.analysis.table.users': '用户数',
'app.analysis.table.weekly-range': '周涨幅',
// ...zhMessages, // ...zhMessages,
}, },
}; };
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { injectIntl } from 'react-intl'; import { injectIntl, FormattedMessage } from 'react-intl';
import { import {
Row, Row,
Col, Col,
...@@ -65,6 +65,7 @@ class Analysis extends Component { ...@@ -65,6 +65,7 @@ class Analysis extends Component {
rangePickerValue: getTimeDistance('year'), rangePickerValue: getTimeDistance('year'),
}; };
} }
state = { state = {
salesType: 'all', salesType: 'all',
currentTabKey: '', currentTabKey: '',
...@@ -174,16 +175,16 @@ class Analysis extends Component { ...@@ -174,16 +175,16 @@ class Analysis extends Component {
<div className={styles.salesExtraWrap}> <div className={styles.salesExtraWrap}>
<div className={styles.salesExtra}> <div className={styles.salesExtra}>
<a className={this.isActive('today')} onClick={() => this.selectDate('today')}> <a className={this.isActive('today')} onClick={() => this.selectDate('today')}>
今日 <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day" />
</a> </a>
<a className={this.isActive('week')} onClick={() => this.selectDate('week')}> <a className={this.isActive('week')} onClick={() => this.selectDate('week')}>
本周 <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week" />
</a> </a>
<a className={this.isActive('month')} onClick={() => this.selectDate('month')}> <a className={this.isActive('month')} onClick={() => this.selectDate('month')}>
本月 <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month" />
</a> </a>
<a className={this.isActive('year')} onClick={() => this.selectDate('year')}> <a className={this.isActive('year')} onClick={() => this.selectDate('year')}>
全年 <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year" />
</a> </a>
</div> </div>
<RangePicker <RangePicker
...@@ -196,25 +197,32 @@ class Analysis extends Component { ...@@ -196,25 +197,32 @@ class Analysis extends Component {
const columns = [ const columns = [
{ {
title: '排名', title: <FormattedMessage id="app.analysis.table.rank" defaultMessage="Rank" />,
dataIndex: 'index', dataIndex: 'index',
key: 'index', key: 'index',
}, },
{ {
title: '搜索关键词', title: (
<FormattedMessage
id="app.analysis.table.search-keyword"
defaultMessage="Search keyword"
/>
),
dataIndex: 'keyword', dataIndex: 'keyword',
key: 'keyword', key: 'keyword',
render: text => <a href="/">{text}</a>, render: text => <a href="/">{text}</a>,
}, },
{ {
title: '用户数', title: <FormattedMessage id="app.analysis.table.users" defaultMessage="Users" />,
dataIndex: 'count', dataIndex: 'count',
key: 'count', key: 'count',
sorter: (a, b) => a.count - b.count, sorter: (a, b) => a.count - b.count,
className: styles.alignRight, className: styles.alignRight,
}, },
{ {
title: '周涨幅', title: (
<FormattedMessage id="app.analysis.table.weekly-range" defaultMessage="Weekly Range" />
),
dataIndex: 'range', dataIndex: 'range',
key: 'range', key: 'range',
sorter: (a, b) => a.range - b.range, sorter: (a, b) => a.range - b.range,
...@@ -237,7 +245,12 @@ class Analysis extends Component { ...@@ -237,7 +245,12 @@ class Analysis extends Component {
<Col span={12}> <Col span={12}>
<NumberInfo <NumberInfo
title={data.name} title={data.name}
subTitle="转化率" subTitle={
<FormattedMessage
id="app.analysis.conversion-rate"
defaultMessage="Conversion Rate"
/>
}
gap={2} gap={2}
total={`${data.cvr * 100}%`} total={`${data.cvr * 100}%`}
theme={currentKey !== data.name && 'light'} theme={currentKey !== data.name && 'light'}
...@@ -272,23 +285,36 @@ class Analysis extends Component { ...@@ -272,23 +285,36 @@ class Analysis extends Component {
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
title="总销售额" title={
<FormattedMessage id="app.analysis.total-sales" defaultMessage="Total Sales" />
}
action={ action={
<Tooltip title="指标说明"> <Tooltip
title={
<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />
}
>
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
loading={loading} loading={loading}
total={() => <Yuan>126560</Yuan>} total={() => <Yuan>126560</Yuan>}
footer={<Field label="日均销售额" value={`¥${numeral(12423).format('0,0')}`} />} footer={
<Field
label={
<FormattedMessage id="app.analysis.day-sales" defaultMessage="Day Sales" />
}
value={`¥${numeral(12423).format('0,0')}`}
/>
}
contentHeight={46} contentHeight={46}
> >
<Trend flag="up" style={{ marginRight: 16 }}> <Trend flag="up" style={{ marginRight: 16 }}>
周同比 <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
<span className={styles.trendText}>12%</span> <span className={styles.trendText}>12%</span>
</Trend> </Trend>
<Trend flag="down"> <Trend flag="down">
日环比 <FormattedMessage id="app.analysis.day" defaultMessage="Daily Changes" />
<span className={styles.trendText}>11%</span> <span className={styles.trendText}>11%</span>
</Trend> </Trend>
</ChartCard> </ChartCard>
...@@ -296,15 +322,25 @@ class Analysis extends Component { ...@@ -296,15 +322,25 @@ class Analysis extends Component {
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
loading={loading} title={<FormattedMessage id="app.analysis.visits" defaultMessage="visits" />}
title="访问量"
action={ action={
<Tooltip title="指标说明"> <Tooltip
title={
<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />
}
>
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
total={numeral(8846).format('0,0')} total={numeral(8846).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />} footer={
<Field
label={
<FormattedMessage id="app.analysis.day-visits" defaultMessage="Day Visits" />
}
value={numeral(1234).format('0,0')}
/>
}
contentHeight={46} contentHeight={46}
> >
<MiniArea color="#975FE4" data={visitData} /> <MiniArea color="#975FE4" data={visitData} />
...@@ -313,15 +349,28 @@ class Analysis extends Component { ...@@ -313,15 +349,28 @@ class Analysis extends Component {
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
<ChartCard <ChartCard
bordered={false} bordered={false}
loading={loading} title={<FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />}
title="支付笔数"
action={ action={
<Tooltip title="指标说明"> <Tooltip
title={
<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />
}
>
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
total={numeral(6560).format('0,0')} total={numeral(6560).format('0,0')}
footer={<Field label="转化率" value="60%" />} footer={
<Field
label={
<FormattedMessage
id="app.analysis.conversion-rate"
defaultMessage="Conversion Rate"
/>
}
value="60%"
/>
}
contentHeight={46} contentHeight={46}
> >
<MiniBar data={visitData} /> <MiniBar data={visitData} />
...@@ -331,9 +380,18 @@ class Analysis extends Component { ...@@ -331,9 +380,18 @@ class Analysis extends Component {
<ChartCard <ChartCard
loading={loading} loading={loading}
bordered={false} bordered={false}
title="运营活动效果" title={
<FormattedMessage
id="app.analysis.operational-effect"
defaultMessage="Operational Effect"
/>
}
action={ action={
<Tooltip title="指标说明"> <Tooltip
title={
<FormattedMessage id="app.analysis.introduce" defaultMessage="introduce" />
}
>
<Icon type="info-circle-o" /> <Icon type="info-circle-o" />
</Tooltip> </Tooltip>
} }
...@@ -341,11 +399,11 @@ class Analysis extends Component { ...@@ -341,11 +399,11 @@ class Analysis extends Component {
footer={ footer={
<div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}> <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
<Trend flag="up" style={{ marginRight: 16 }}> <Trend flag="up" style={{ marginRight: 16 }}>
周同比 <FormattedMessage id="app.analysis.week" defaultMessage="Weekly changes" />
<span className={styles.trendText}>12%</span> <span className={styles.trendText}>12%</span>
</Trend> </Trend>
<Trend flag="down"> <Trend flag="down">
日环比 <FormattedMessage id="app.analysis.day" defaultMessage="Weekly changes" />
<span className={styles.trendText}>11%</span> <span className={styles.trendText}>11%</span>
</Trend> </Trend>
</div> </div>
...@@ -360,16 +418,33 @@ class Analysis extends Component { ...@@ -360,16 +418,33 @@ class Analysis extends Component {
<Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}> <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
<div className={styles.salesCard}> <div className={styles.salesCard}>
<Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}> <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
<TabPane tab="销售额" key="sales"> <TabPane
tab={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
key="sales"
>
<Row> <Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}> <Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}> <div className={styles.salesBar}>
<Bar height={295} title="销售额趋势" data={salesData} /> <Bar
height={295}
title={
<FormattedMessage
id="app.analysis.sales-trend"
defaultMessage="Sales Trend"
/>
}
data={salesData}
/>
</div> </div>
</Col> </Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}> <Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}> <div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店销售额排名</h4> <h4 className={styles.rankingTitle}>
<FormattedMessage
id="app.analysis.sales-ranking"
defaultMessage="Sales Ranking"
/>
</h4>
<ul className={styles.rankingList}> <ul className={styles.rankingList}>
{this.rankingListData.map((item, i) => ( {this.rankingListData.map((item, i) => (
<li key={item.title}> <li key={item.title}>
...@@ -383,16 +458,33 @@ class Analysis extends Component { ...@@ -383,16 +458,33 @@ class Analysis extends Component {
</Col> </Col>
</Row> </Row>
</TabPane> </TabPane>
<TabPane tab="访问量" key="views"> <TabPane
tab={<FormattedMessage id="app.analysis.visits" defaultMessage="Visits" />}
key="views"
>
<Row> <Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}> <Col xl={16} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesBar}> <div className={styles.salesBar}>
<Bar height={292} title="访问量趋势" data={salesData} /> <Bar
height={292}
title={
<FormattedMessage
id="app.analysis.visits-trend"
defaultMessage="Visits Trend"
/>
}
data={salesData}
/>
</div> </div>
</Col> </Col>
<Col xl={8} lg={12} md={12} sm={24} xs={24}> <Col xl={8} lg={12} md={12} sm={24} xs={24}>
<div className={styles.salesRank}> <div className={styles.salesRank}>
<h4 className={styles.rankingTitle}>门店访问量排名</h4> <h4 className={styles.rankingTitle}>
<FormattedMessage
id="app.analysis.visits-ranking"
defaultMessage="Visits Ranking"
/>
</h4>
<ul className={styles.rankingList}> <ul className={styles.rankingList}>
{this.rankingListData.map((item, i) => ( {this.rankingListData.map((item, i) => (
<li key={item.title}> <li key={item.title}>
...@@ -415,7 +507,12 @@ class Analysis extends Component { ...@@ -415,7 +507,12 @@ class Analysis extends Component {
<Card <Card
loading={loading} loading={loading}
bordered={false} bordered={false}
title="线上热门搜索" title={
<FormattedMessage
id="app.analysis.online-top-search"
defaultMessage="Online Top Search"
/>
}
extra={iconGroup} extra={iconGroup}
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
> >
...@@ -424,8 +521,18 @@ class Analysis extends Component { ...@@ -424,8 +521,18 @@ class Analysis extends Component {
<NumberInfo <NumberInfo
subTitle={ subTitle={
<span> <span>
搜索用户数 <FormattedMessage
<Tooltip title="指标文案"> id="app.analysis.search-users"
defaultMessage="search users"
/>
<Tooltip
title={
<FormattedMessage
id="app.analysis.introduce"
defaultMessage="introduce"
/>
}
>
<Icon style={{ marginLeft: 8 }} type="info-circle-o" /> <Icon style={{ marginLeft: 8 }} type="info-circle-o" />
</Tooltip> </Tooltip>
</span> </span>
...@@ -439,7 +546,12 @@ class Analysis extends Component { ...@@ -439,7 +546,12 @@ class Analysis extends Component {
</Col> </Col>
<Col sm={12} xs={24} style={{ marginBottom: 24 }}> <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
<NumberInfo <NumberInfo
subTitle="人均搜索次数" subTitle={
<FormattedMessage
id="app.analysis.per-capita-search"
defaultMessage="Per Capita Search"
/>
}
total={2.7} total={2.7}
status="down" status="down"
subTotal={26.2} subTotal={26.2}
...@@ -465,26 +577,45 @@ class Analysis extends Component { ...@@ -465,26 +577,45 @@ class Analysis extends Component {
loading={loading} loading={loading}
className={styles.salesCard} className={styles.salesCard}
bordered={false} bordered={false}
title="销售额类别占比" title={
<FormattedMessage
id="app.analysis.the-proportion-of-sales"
defaultMessage="The Proportion of Sales"
/>
}
bodyStyle={{ padding: 24 }} bodyStyle={{ padding: 24 }}
extra={ extra={
<div className={styles.salesCardExtra}> <div className={styles.salesCardExtra}>
{iconGroup} {iconGroup}
<div className={styles.salesTypeRadio}> <div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={this.handleChangeSalesType}> <Radio.Group value={salesType} onChange={this.handleChangeSalesType}>
<Radio.Button value="all">全部渠道</Radio.Button> <Radio.Button value="all">
<Radio.Button value="online">线上</Radio.Button> <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
<Radio.Button value="offline">门店</Radio.Button> </Radio.Button>
<Radio.Button value="online">
<FormattedMessage
id="app.analysis.channel.online"
defaultMessage="Online"
/>
</Radio.Button>
<Radio.Button value="stores">
<FormattedMessage
id="app.analysis.channel.stores"
defaultMessage="Stores"
/>
</Radio.Button>
</Radio.Group> </Radio.Group>
</div> </div>
</div> </div>
} }
style={{ marginTop: 24, minHeight: 509 }} style={{ marginTop: 24, minHeight: 509 }}
> >
<h4 style={{ marginTop: 8, marginBottom: 32 }}>销售额</h4> <h4 style={{ marginTop: 8, marginBottom: 32 }}>
<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />
</h4>
<Pie <Pie
hasLegend hasLegend
subTitle="销售额" subTitle={<FormattedMessage id="app.analysis.sales" defaultMessage="Sales" />}
total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>} total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
data={salesPieData} data={salesPieData}
valueFormat={value => <Yuan>{value}</Yuan>} valueFormat={value => <Yuan>{value}</Yuan>}
...@@ -509,7 +640,10 @@ class Analysis extends Component { ...@@ -509,7 +640,10 @@ class Analysis extends Component {
<TimelineChart <TimelineChart
height={400} height={400}
data={offlineChartData} data={offlineChartData}
titleMap={{ y1: '客流量', y2: '支付笔数' }} titleMap={{
y1: <FormattedMessage id="app.analysis.traffic" defaultMessage="Traffic" />,
y2: <FormattedMessage id="app.analysis.payments" defaultMessage="Payments" />,
}}
/> />
</div> </div>
</TabPane> </TabPane>
......
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'dva/router'; import { Link } from 'dva/router';
import PageHeader from '../../components/PageHeader'; import PageHeader from '../../components/PageHeader';
import GridContent from './GridContent'; import GridContent from './GridContent';
...@@ -10,7 +11,15 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) => ...@@ -10,7 +11,15 @@ const PageHeaderLayout = ({ children, wrapperClassName, top, ...restProps }) =>
{top} {top}
<MenuContext.Consumer> <MenuContext.Consumer>
{value => { {value => {
return <PageHeader {...value} key="pageheader" {...restProps} linkElement={Link} />; return (
<PageHeader
home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
{...value}
key="pageheader"
{...restProps}
linkElement={Link}
/>
);
}} }}
</MenuContext.Consumer> </MenuContext.Consumer>
{children ? ( {children ? (
......
...@@ -18,6 +18,9 @@ dynamic.setDefaultLoadingComponent(() => { ...@@ -18,6 +18,9 @@ dynamic.setDefaultLoadingComponent(() => {
}); });
function getLang() { function getLang() {
if (window) {
return 'en-US';
}
return (window.localStorage && localStorage.getItem('locale')) || return (window.localStorage && localStorage.getItem('locale')) ||
(navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us' (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
? 'en-US' ? 'en-US'
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment