Skip to content

Commit b954312

Browse files
msgill2017sendya
msgill2017
authored and
sendya
committed
refactor 'views-dashboard-analysis' from hardcoded to locale support
1 parent 7609048 commit b954312

File tree

7 files changed

+153
-64
lines changed

7 files changed

+153
-64
lines changed

‎src/locales/lang/en-US.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import antdEnUS from 'ant-design-vue/es/locale-provider/en_US'
22
import momentEU from 'moment/locale/eu'
33
import menu from './en-US/menu'
44
import setting from './en-US/setting'
5+
import dashboard from './en-US/dashboard'
56

67
const components = {
78
antLocale: antdEnUS,
@@ -17,5 +18,6 @@ export default {
1718

1819
...components,
1920
...menu,
20-
...setting
21+
...setting,
22+
...dashboard
2123
}

‎src/locales/lang/en-US/dashboard.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import analysis from './dashboard/analysis'
2+
3+
export default {
4+
...analysis
5+
}

‎src/locales/lang/en-US/dashboard/analysis.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default {
2+
'dashboard.analysis.test': 'Gongzhuan No.{no} shop',
3+
'dashboard.analysis.introduce': 'Introduce',
4+
'dashboard.analysis.total-sales': 'Total Sales',
5+
'dashboard.analysis.day-sales': 'Daily Sales',
6+
'dashboard.analysis.visits': 'Visits',
7+
'dashboard.analysis.visits-trend': 'Visits Trend',
8+
'dashboard.analysis.visits-ranking': 'Visits Ranking',
9+
'dashboard.analysis.day-visits': 'Daily Visits',
10+
'dashboard.analysis.week': 'WoW Change',
11+
'dashboard.analysis.day': 'DoD Change',
12+
'dashboard.analysis.payments': 'Payments',
13+
'dashboard.analysis.conversion-rate': 'Conversion Rate',
14+
'dashboard.analysis.operational-effect': 'Operational Effect',
15+
'dashboard.analysis.sales-trend': 'Stores Sales Trend',
16+
'dashboard.analysis.sales-ranking': 'Sales Ranking',
17+
'dashboard.analysis.all-year': 'All Year',
18+
'dashboard.analysis.all-month': 'All Month',
19+
'dashboard.analysis.all-week': 'All Week',
20+
'dashboard.analysis.all-day': 'All day',
21+
'dashboard.analysis.search-users': 'Search Users',
22+
'dashboard.analysis.per-capita-search': 'Per Capita Search',
23+
'dashboard.analysis.online-top-search': 'Online Top Search',
24+
'dashboard.analysis.the-proportion-of-sales': 'The Proportion Of Sales',
25+
'dashboard.analysis.dropdown-option-one': 'Operation one',
26+
'dashboard.analysis.dropdown-option-two': 'Operation two',
27+
'dashboard.analysis.channel.all': 'ALL',
28+
'dashboard.analysis.channel.online': 'Online',
29+
'dashboard.analysis.channel.stores': 'Stores',
30+
'dashboard.analysis.sales': 'Sales',
31+
'dashboard.analysis.traffic': 'Traffic',
32+
'dashboard.analysis.table.rank': 'Rank',
33+
'dashboard.analysis.table.search-keyword': 'Keyword',
34+
'dashboard.analysis.table.users': 'Users',
35+
'dashboard.analysis.table.weekly-range': 'Weekly Range'
36+
}

‎src/locales/lang/zh-CN.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import antd from 'ant-design-vue/es/locale-provider/zh_CN'
22
import momentCN from 'moment/locale/zh-cn'
33
import menu from './zh-CN/menu'
4+
import dashboard from './zh-CN/dashboard'
45

56
const components = {
67
antLocale: antd,
@@ -15,5 +16,6 @@ export default {
1516
'layouts.usermenu.dialog.content': '您确定要注销吗？',
1617

1718
...components,
18-
...menu
19+
...menu,
20+
...dashboard
1921
}

‎src/locales/lang/zh-CN/dashboard.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import analysis from './dashboard/analysis'
2+
3+
export default {
4+
...analysis
5+
}

‎src/locales/lang/zh-CN/dashboard/analysis.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default {
2+
'dashboard.analysis.test': '工专路 {no} 号店',
3+
'dashboard.analysis.introduce': '指标说明',
4+
'dashboard.analysis.total-sales': '总销售额',
5+
'dashboard.analysis.day-sales': '日均销售额￥',
6+
'dashboard.analysis.visits': '访问量',
7+
'dashboard.analysis.visits-trend': '访问量趋势',
8+
'dashboard.analysis.visits-ranking': '门店访问量排名',
9+
'dashboard.analysis.day-visits': '日访问量',
10+
'dashboard.analysis.week': '周同比',
11+
'dashboard.analysis.day': '日同比',
12+
'dashboard.analysis.payments': '支付笔数',
13+
'dashboard.analysis.conversion-rate': '转化率',
14+
'dashboard.analysis.operational-effect': '运营活动效果',
15+
'dashboard.analysis.sales-trend': '销售趋势',
16+
'dashboard.analysis.sales-ranking': '门店销售额排名',
17+
'dashboard.analysis.all-year': '全年',
18+
'dashboard.analysis.all-month': '本月',
19+
'dashboard.analysis.all-week': '本周',
20+
'dashboard.analysis.all-day': '今日',
21+
'dashboard.analysis.search-users': '搜索用户数',
22+
'dashboard.analysis.per-capita-search': '人均搜索次数',
23+
'dashboard.analysis.online-top-search': '线上热门搜索',
24+
'dashboard.analysis.the-proportion-of-sales': '销售额类别占比',
25+
'dashboard.analysis.dropdown-option-one': '操作一',
26+
'dashboard.analysis.dropdown-option-two': '操作二',
27+
'dashboard.analysis.channel.all': '全部渠道',
28+
'dashboard.analysis.channel.online': '线上',
29+
'dashboard.analysis.channel.stores': '门店',
30+
'dashboard.analysis.sales': '销售额',
31+
'dashboard.analysis.traffic': '客流量',
32+
'dashboard.analysis.table.rank': '排名',
33+
'dashboard.analysis.table.search-keyword': '搜索关键词',
34+
'dashboard.analysis.table.users': '用户数',
35+
'dashboard.analysis.table.weekly-range': '周涨幅'
36+
}

‎src/views/dashboard/Analysis.vue

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,60 @@
22
<div>
33
<a-row :gutter="24">
44
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
5-
<chart-card :loading="loading" title="总销售额" total="￥126,560">
6-
<a-tooltip title="指标说明" slot="action">
5+
<chart-card :loading="loading" :title="$t('dashboard.analysis.total-sales')" total="￥126,560">
6+
<a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
77
<a-icon type="info-circle-o" />
88
</a-tooltip>
99
<div>
1010
<trend flag="up" style="margin-right: 16px;">
11-
<span slot="term">周同比</span>
11+
<span slot="term">{{ $t('dashboard.analysis.week') }}</span>
1212
12%
1313
</trend>
1414
<trend flag="down">
15-
<span slot="term">日同比</span>
15+
<span slot="term">{{ $t('dashboard.analysis.day') }}</span>
1616
11%
1717
</trend>
1818
</div>
19-
<template slot="footer">日均销售额<span>￥ 234.56</span></template>
19+
<template slot="footer">{{ $t('dashboard.analysis.day-sales') }}<span>￥ 234.56</span></template>
2020
</chart-card>
2121
</a-col>
2222
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
23-
<chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
24-
<a-tooltip title="指标说明" slot="action">
23+
<chart-card :loading="loading" :title="$t('dashboard.analysis.visits')" :total="8846 | NumberFormat">
24+
<a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
2525
<a-icon type="info-circle-o" />
2626
</a-tooltip>
2727
<div>
2828
<mini-area />
2929
</div>
30-
<template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
30+
<template slot="footer">{{ $t('dashboard.analysis.day-visits') }}<span> {{ '1234' | NumberFormat }}</span></template>
3131
</chart-card>
3232
</a-col>
3333
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
34-
<chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
35-
<a-tooltip title="指标说明" slot="action">
34+
<chart-card :loading="loading" :title="$t('dashboard.analysis.payments')" :total="6560 | NumberFormat">
35+
<a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
3636
<a-icon type="info-circle-o" />
3737
</a-tooltip>
3838
<div>
3939
<mini-bar />
4040
</div>
41-
<template slot="footer">转化率 <span>60%</span></template>
41+
<template slot="footer">{{ $t('dashboard.analysis.conversion-rate') }} <span>60%</span></template>
4242
</chart-card>
4343
</a-col>
4444
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
45-
<chart-card :loading="loading" title="运营活动效果" total="78%">
46-
<a-tooltip title="指标说明" slot="action">
45+
<chart-card :loading="loading" :title="$t('dashboard.analysis.operational-effect')" total="78%">
46+
<a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
4747
<a-icon type="info-circle-o" />
4848
</a-tooltip>
4949
<div>
5050
<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
5151
</div>
5252
<template slot="footer">
5353
<trend flag="down" style="margin-right: 16px;">
54-
<span slot="term">同周比</span>
54+
<span slot="term">{{ $t('dashboard.analysis.week') }}</span>
5555
12%
5656
</trend>
5757
<trend flag="up">
58-
<span slot="term">日环比</span>
58+
<span slot="term">{{ $t('dashboard.analysis.day') }}</span>
5959
80%
6060
</trend>
6161
</template>
@@ -68,30 +68,30 @@
6868
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
6969
<div class="extra-wrapper" slot="tabBarExtraContent">
7070
<div class="extra-item">
71-
<a>今日</a>
72-
<a>本周</a>
73-
<a>本月</a>
74-
<a>本年</a>
71+
<a>{{ $t('dashboard.analysis.all-day') }}</a>
72+
<a>{{ $t('dashboard.analysis.all-week') }}</a>
73+
<a>{{ $t('dashboard.analysis.all-month') }}</a>
74+
<a>{{ $t('dashboard.analysis.all-year') }}</a>
7575
</div>
7676
<a-range-picker :style="{width: '256px'}" />
7777
</div>
78-
<a-tab-pane loading="true" tab="销售额" key="1">
78+
<a-tab-pane loading="true" :tab="$t('dashboard.analysis.sales')" key="1">
7979
<a-row>
8080
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
81-
<bar :data="barData" title="销售额排行" />
81+
<bar :data="barData" :title="$t('dashboard.analysis.sales-trend')" />
8282
</a-col>
8383
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
84-
<rank-list title="门店销售排行榜" :list="rankList"/>
84+
<rank-list :title="$t('dashboard.analysis.sales-ranking')" :list="rankList"/>
8585
</a-col>
8686
</a-row>
8787
</a-tab-pane>
88-
<a-tab-pane tab="访问量" key="2">
88+
<a-tab-pane :tab="$t('dashboard.analysis.visits')" key="2">
8989
<a-row>
9090
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
91-
<bar :data="barData2" title="销售额趋势" />
91+
<bar :data="barData2" :title="$t('dashboard.analysis.visits-trend')" />
9292
</a-col>
9393
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
94-
<rank-list title="门店销售排行榜" :list="rankList"/>
94+
<rank-list :title="$t('dashboard.analysis.visits-ranking')" :list="rankList"/>
9595
</a-col>
9696
</a-row>
9797
</a-tab-pane>
@@ -102,26 +102,26 @@
102102
<div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
103103
<a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
104104
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
105-
<a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
105+
<a-card :loading="loading" :bordered="false" :title="$t('dashboard.analysis.online-top-search')" :style="{ height: '100%' }">
106106
<a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
107107
<a class="ant-dropdown-link" href="#">
108108
<a-icon type="ellipsis" />
109109
</a>
110110
<a-menu slot="overlay">
111111
<a-menu-item>
112-
<a href="javascript:;">操作一</a>
112+
<a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
113113
</a-menu-item>
114114
<a-menu-item>
115-
<a href="javascript:;">操作二</a>
115+
<a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
116116
</a-menu-item>
117117
</a-menu>
118118
</a-dropdown>
119119
<a-row :gutter="68">
120120
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
121121
<number-info :total="12321" :sub-total="17.1">
122122
<span slot="subtitle">
123-
<span>搜索用户数</span>
124-
<a-tooltip title="指标说明" slot="action">
123+
<span>{{ $t('dashboard.analysis.search-users') }}</span>
124+
<a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
125125
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
126126
</a-tooltip>
127127
</span>
@@ -134,8 +134,8 @@
134134
<a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
135135
<number-info :total="2.7" :sub-total="26.2" status="down">
136136
<span slot="subtitle">
137-
<span>人均搜索次数</span>
138-
<a-tooltip title="指标说明" slot="action">
137+
<span>{{ $t('dashboard.analysis.per-capita-search') }}</span>
138+
<a-tooltip :title="$t('dashboard.analysis.introduce')" slot="action">
139139
<a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
140140
</a-tooltip>
141141
</span>
@@ -164,32 +164,32 @@
164164
</a-card>
165165
</a-col>
166166
<a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
167-
<a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }">
167+
<a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" :title="$t('dashboard.analysis.the-proportion-of-sales')" :style="{ height: '100%' }">
168168
<div slot="extra" style="height: inherit;">
169169
<!-- style="bottom: 12px;display: inline-block;" -->
170170
<span class="dashboard-analysis-iconGroup">
171171
<a-dropdown :trigger="['click']" placement="bottomLeft">
172172
<a-icon type="ellipsis" class="ant-dropdown-link" />
173173
<a-menu slot="overlay">
174174
<a-menu-item>
175-
<a href="javascript:;">操作一</a>
175+
<a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
176176
</a-menu-item>
177177
<a-menu-item>
178-
<a href="javascript:;">操作二</a>
178+
<a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
179179
</a-menu-item>
180180
</a-menu>
181181
</a-dropdown>
182182
</span>
183183
<div class="analysis-salesTypeRadio">
184184
<a-radio-group defaultValue="a">
185-
<a-radio-button value="a">全部渠道</a-radio-button>
186-
<a-radio-button value="b">线上</a-radio-button>
187-
<a-radio-button value="c">门店</a-radio-button>
185+
<a-radio-button value="a">{{ $t('dashboard.analysis.channel.all') }}</a-radio-button>
186+
<a-radio-button value="b">{{ $t('dashboard.analysis.channel.online') }}</a-radio-button>
187+
<a-radio-button value="c">{{ $t('dashboard.analysis.channel.stores') }}</a-radio-button>
188188
</a-radio-group>
189189
</div>
190190

191191
</div>
192-
<h4>销售额</h4>
192+
<h4>{{ $t('dashboard.analysis.sales') }}</h4>
193193
<div>
194194
<!-- style="width: calc(100% - 240px);" -->
195195
<div>
@@ -266,28 +266,6 @@ const searchUserScale = [
266266
max: 10
267267
}]
268268
269-
const searchTableColumns = [
270-
{
271-
dataIndex: 'index',
272-
title: '排名',
273-
width: 90
274-
},
275-
{
276-
dataIndex: 'keyword',
277-
title: '搜索关键词'
278-
},
279-
{
280-
dataIndex: 'count',
281-
title: '用户数'
282-
},
283-
{
284-
dataIndex: 'range',
285-
title: '周涨幅',
286-
align: 'right',
287-
sorter: (a, b) => a.range - b.range,
288-
scopedSlots: { customRender: 'range' }
289-
}
290-
]
291269
const searchData = []
292270
for (let i = 0; i < 50; i += 1) {
293271
searchData.push({
@@ -347,7 +325,6 @@ export default {
347325
// 搜索用户数
348326
searchUserData,
349327
searchUserScale,
350-
searchTableColumns,
351328
searchData,
352329
353330
barData,
@@ -363,6 +340,32 @@ export default {
363340
}
364341
}
365342
},
343+
computed: {
344+
searchTableColumns () {
345+
return [
346+
{
347+
dataIndex: 'index',
348+
title: this.$t('dashboard.analysis.table.rank'),
349+
width: 90
350+
},
351+
{
352+
dataIndex: 'keyword',
353+
title: this.$t('dashboard.analysis.table.search-keyword')
354+
},
355+
{
356+
dataIndex: 'count',
357+
title: this.$t('dashboard.analysis.table.users')
358+
},
359+
{
360+
dataIndex: 'range',
361+
title: this.$t('dashboard.analysis.table.weekly-range'),
362+
align: 'right',
363+
sorter: (a, b) => a.range - b.range,
364+
scopedSlots: { customRender: 'range' }
365+
}
366+
]
367+
}
368+
},
366369
created () {
367370
setTimeout(() => {
368371
this.loading = !this.loading

0 commit comments

Comments
 (0)