Skip to content

GitLab

A
ant-design-pro
Commit 57eb03fd authored by Ilan's avatar Ilan Committed by 陈帅
Browse files
Options

Localized: Dashboard Monitor Page (#2463) 

* 🌐localization of dashboard monitor page

* 🔥 remove umi/plugin localization from components
parent 55676bee
Show whitespace changes
Inline Side-by-side
Showing with 137 additions and 16 deletions
src/locales/en-US.js
View file @ 57eb03fd
......@@ -155,6 +155,22 @@ export default {
'app.forms.basic.title': 'Basic form',
'app.forms.basic.description':
'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
'app.monitor.trading-activity': 'Real-Time Trading Activity',
'app.monitor.total-transactions-today': 'Total transactions today',
'app.monitor.sales-target': 'Sales target completion rate',
'app.monitor.remaining-time': 'Remaining time of activity',
'app.monitor.total-transactions-per-second': 'Total transactions per second',
'app.monitor.activity-forecast': 'Activity forecast',
'app.monitor.efficiency': 'Efficiency',
'app.monitor.ratio': 'Ratio',
'app.monitor.proportion-per-category': 'Proportion Per Category',
'app.monitor.fast-food': 'Fast food',
'app.monitor.western-food': 'Western food',
'app.monitor.hot-pot': 'Hot pot',
'app.monitor.waiting-for-implementation': 'Waiting for implementation',
'app.monitor.popular-searches': 'Popular Searches',
'app.monitor.resource-surplus': 'Resource Surplus',
'app.monitor.fund-surplus': 'Fund Surplus',
'app.settings.menuMap.basic': 'Basic Settings',
'app.settings.menuMap.security': 'Security Settings',
'app.settings.menuMap.binding': 'Account Binding',
......
src/locales/zh-CN.js
View file @ 57eb03fd
......@@ -155,6 +155,22 @@ export default {
'app.forms.basic.title': '基础表单',
'app.forms.basic.description':
'表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
'app.monitor.trading-activity': '活动实时交易情况',
'app.monitor.total-transactions': '今日交易总额',
'app.monitor.sales-target': '销售目标完成率',
'app.monitor.remaining-time': '活动剩余时间',
'app.monitor.total-transactions-per-second': '每秒交易总额',
'app.monitor.activity-forecast': '活动情况预测',
'app.monitor.efficiency': '券核效率',
'app.monitor.ratio': '跳出率',
'app.monitor.proportion-per-category': '各品类占比',
'app.monitor.fast-food': '中式快餐',
'app.monitor.western-food': '西餐',
'app.monitor.hot-pot': '火锅',
'app.monitor.waiting-for-implementation': 'Waiting for implementation',
'app.monitor.popular-searches': '热门搜索',
'app.monitor.resource-surplus': '资源剩余',
'app.monitor.fund-surplus': '补贴资金剩余',
'app.settings.menuMap.basic': '基本设置',
'app.settings.menuMap.security': '安全设置',
'app.settings.menuMap.binding': '账号绑定',
......
src/pages/Dashboard/Monitor.js
View file @ 57eb03fd
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { Row, Col, Card, Tooltip } from 'antd';
import { Pie, WaterWave, Gauge, TagCloud } from '@/components/Charts';
import NumberInfo from '@/components/NumberInfo';
......@@ -42,31 +43,72 @@ class Monitor extends PureComponent {
<GridContent>
<Row gutter={24}>
<Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="活动实时交易情况" bordered={false}>
<Card
title={
<FormattedMessage
id="app.monitor.trading-activity"
defaultMessage="Real-Time Trading Activity"
/>
}
bordered={false}
>
<Row>
<Col md={6} sm={12} xs={24}>
<NumberInfo
subTitle="今日交易总额"
subTitle={
<FormattedMessage
id="app.monitor.total-transactions"
defaultMessage="Total transactions today"
/>
}
suffix="元"
total={numeral(124543233).format('0,0')}
/>
</Col>
<Col md={6} sm={12} xs={24}>
<NumberInfo subTitle="销售目标完成率" total="92%" />
<NumberInfo
subTitle={
<FormattedMessage
id="app.monitor.sales-target"
defaultMessage="Sales target completion rate"
/>
}
total="92%"
/>
</Col>
<Col md={6} sm={12} xs={24}>
<NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} />
<NumberInfo
subTitle={
<FormattedMessage
id="app.monitor.remaining-time"
defaultMessage="Remaining time of activity"
/>
}
total={<CountDown target={targetTime} />}
/>
</Col>
<Col md={6} sm={12} xs={24}>
<NumberInfo
subTitle="每秒交易总额"
subTitle={
<FormattedMessage
id="app.monitor.total-transactions-per-second"
defaultMessage="Total transactions per second"
/>
}
suffix="元"
total={numeral(234).format('0,0')}
/>
</Col>
</Row>
<div className={styles.mapChart}>
<Tooltip title="等待后期实现">
<Tooltip
title={
<FormattedMessage
id="app.monitor.waiting-for-implementation"
defaultMessage="Waiting for implementation"
/>
}
>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
alt="map"
......@@ -76,28 +118,52 @@ class Monitor extends PureComponent {
</Card>
</Col>
<Col xl={6} lg={24} md={24} sm={24} xs={24}>
<Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
<Card
title={
<FormattedMessage
id="app.monitor.total-activity-forecast"
defaultMessage="Activity forecast"
/>
}
style={{ marginBottom: 24 }}
bordered={false}
>
<ActiveChart />
</Card>
<Card
title="券核效率"
title={<FormattedMessage id="app.monitor.efficiency" defaultMessage="Efficiency" />}
style={{ marginBottom: 24 }}
bodyStyle={{ textAlign: 'center' }}
bordered={false}
>
<Gauge title="跳出率" height={180} percent={87} />
<Gauge
title={formatMessage({ id: 'app.monitor.ratio', defaultMessage: 'Ratio' })}
height={180}
percent={87}
/>
</Card>
</Col>
</Row>
<Row gutter={24}>
<Col xl={12} lg={24} sm={24} xs={24}>
<Card title="各品类占比" bordered={false} className={styles.pieCard}>
<Card
title={
<FormattedMessage
id="app.monitor.proportion-per-category"
defaultMessage="Proportion Per Category"
/>
}
bordered={false}
className={styles.pieCard}
>
<Row style={{ padding: '16px 0' }}>
<Col span={8}>
<Pie
animate={false}
percent={28}
subTitle="中式快餐"
subTitle={
<FormattedMessage id="app.monitor.fast-food" defaultMessage="Fast food" />
}
total="28%"
height={128}
lineWidth={2}
......@@ -108,7 +174,12 @@ class Monitor extends PureComponent {
animate={false}
color="#5DDECF"
percent={22}
subTitle="西餐"
subTitle={
<FormattedMessage
id="app.monitor.western-food"
defaultMessage="Western food"
/>
}
total="22%"
height={128}
lineWidth={2}
......@@ -119,7 +190,9 @@ class Monitor extends PureComponent {
animate={false}
color="#2FC25B"
percent={32}
subTitle="火锅"
subTitle={
<FormattedMessage id="app.monitor.hot-pot" defaultMessage="Hot pot" />
}
total="32%"
height={128}
lineWidth={2}
......@@ -130,7 +203,12 @@ class Monitor extends PureComponent {
</Col>
<Col xl={6} lg={12} sm={24} xs={24}>
<Card
title="热门搜索"
title={
<FormattedMessage
id="app.monitor.popular-searches"
defaultMessage="Popular Searches"
/>
}
loading={loading}
bordered={false}
bodyStyle={{ overflow: 'hidden' }}
......@@ -140,11 +218,22 @@ class Monitor extends PureComponent {
</Col>
<Col xl={6} lg={12} sm={24} xs={24}>
<Card
title="资源剩余"
title={
<FormattedMessage
id="app.monitor.resource-surplus"
defaultMessage="Resource Surplus"
/>
}
bodyStyle={{ textAlign: 'center', fontSize: 0 }}
bordered={false}
>
<WaterWave height={161} title="补贴资金剩余" percent={34} />
<WaterWave
height={161}
title={
<FormattedMessage id="app.monitor.fund-surplus" defaultMessage="Fund Surplus" />
}
percent={34}
/>
</Card>
</Col>
</Row>
......
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