mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
feat: add international language support for analysis page; 🌟
新增：分析页面增加国际化语言支持；
This commit is contained in:
iczer
parent
2cb54136b5
commit
2f34d7ac52
@ -2,50 +2,50 @@
|
||||
<div class="analysis">
|
||||
<a-row :gutter="24">
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<chart-card :title="$t('totalSales')" total="￥ 189,345">
|
||||
<a-tooltip :title="$t('introduce')" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
|
||||
<trend term="日环比" :target="100" :value="89" :scale="0" />
|
||||
<trend style="margin-right: 16px" :term="$t('wow')" :percent="12" :is-increase="true" :scale="0" />
|
||||
<trend :term="$t('dod')" :target="100" :value="89" :scale="0" />
|
||||
</div>
|
||||
<div slot="footer">日均销售额<span> ￥234.56</span></div>
|
||||
<div slot="footer">{{$ta('daily|sales', 'p')}}<span> ￥234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<chart-card :title="$t('visits')" total="￥ 189,345">
|
||||
<a-tooltip :title="$t('introduce')" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-area />
|
||||
</div>
|
||||
<div slot="footer">日访问量<span> 123,4</span></div>
|
||||
<div slot="footer">{{$ta('daily|visits', 'p')}}<span> 123,4</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<chart-card :title="$t('payments')" total="￥ 189,345">
|
||||
<a-tooltip :title="$t('introduce')" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-bar />
|
||||
</div>
|
||||
<div slot="footer">转化率 <span>60%</span></div>
|
||||
<div slot="footer">{{$t('conversion')}} <span>60%</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="运营活动效果" total="73%">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<chart-card :title="$t('operating')" total="73%">
|
||||
<a-tooltip :title="$t('introduce')" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
</a-tooltip>
|
||||
<div>
|
||||
<mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
|
||||
<trend term="日环比" :target="100" :value="89" :scale="0" />
|
||||
<trend style="margin-right: 16px" :term="$t('wow')" :percent="12" :is-increase="true" :scale="0" />
|
||||
<trend :term="$t('dod')" :target="100" :value="89" :scale="0" />
|
||||
</div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
@ -55,29 +55,29 @@
|
||||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||
<div class="extra-wrap" slot="tabBarExtraContent">
|
||||
<div class="extra-item">
|
||||
<a>今日</a>
|
||||
<a>本周</a>
|
||||
<a>本月</a>
|
||||
<a>本年</a>
|
||||
<a>{{$t('day')}}</a>
|
||||
<a>{{$t('week')}}</a>
|
||||
<a>{{$t('month')}}</a>
|
||||
<a>{{$t('year')}}</a>
|
||||
</div>
|
||||
<a-range-picker :style="{width: '256px'}"></a-range-picker>
|
||||
</div>
|
||||
<a-tab-pane loading="true" tab="销售额" key="1">
|
||||
<a-tab-pane loading="true" :tab="$t('sales')" key="1">
|
||||
<a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<bar title="销售额趋势" />
|
||||
<bar :title="$ta('stores|sales|trend', 'p')" />
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<ranking-list title="门店销售排行榜" :list="rankList"/>
|
||||
<ranking-list :title="$ta('stores|sales|ranking', 'p')" :list="rankList"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="访问量" key="2"><a-row>
|
||||
<a-tab-pane :tab="$t('visits')" key="2"><a-row>
|
||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<bar title="销售额趋势" />
|
||||
<bar :title="$ta('visits|trend', 'p')" />
|
||||
</a-col>
|
||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||
<ranking-list title="门店销售排行榜" :list="rankList"/>
|
||||
<ranking-list :title="$ta('stores|visits|ranking', 'p')" :list="rankList"/>
|
||||
</a-col>
|
||||
</a-row></a-tab-pane>
|
||||
</a-tabs>
|
||||
@ -85,16 +85,18 @@
|
||||
</a-card>
|
||||
<a-row style="margin: 0 -12px">
|
||||
<a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" style="margin-top: 24px" title="热门搜索">
|
||||
<a-card :bordered="false" style="margin-top: 24px" :title="$t('search')">
|
||||
<hot-search />
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card :bordered="false" style="margin-top: 24px;" title="销售额占比">
|
||||
<a-card :bordered="false" style="margin-top: 24px;" :title="$t('proportion')">
|
||||
<sales-data />
|
||||
<div slot="extra">
|
||||
<div>...</div>
|
||||
</div>
|
||||
<a-radio-group slot="extra" style="margin: -12px 0">
|
||||
<a-radio-button value="a">{{$t('all')}}</a-radio-button>
|
||||
<a-radio-button value="b">{{$t('online')}}</a-radio-button>
|
||||
<a-radio-button value="c">{{$t('stores')}}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -102,15 +104,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartCard from '../../components/card/ChartCard'
|
||||
import MiniArea from '../../components/chart/MiniArea'
|
||||
import MiniBar from '../../components/chart/MiniBar'
|
||||
import MiniProgress from '../../components/chart/MiniProgress'
|
||||
import Bar from '../../components/chart/Bar'
|
||||
import RankingList from '../../components/chart/RankingList'
|
||||
import HotSearch from '../../components/analysis/HotSearch'
|
||||
import SalesData from '../../components/analysis/SalesData'
|
||||
import Trend from '../../components/chart/Trend'
|
||||
import ChartCard from '../../../components/card/ChartCard'
|
||||
import MiniArea from '../../../components/chart/MiniArea'
|
||||
import MiniBar from '../../../components/chart/MiniBar'
|
||||
import MiniProgress from '../../../components/chart/MiniProgress'
|
||||
import Bar from '../../../components/chart/Bar'
|
||||
import RankingList from '../../../components/chart/RankingList'
|
||||
import HotSearch from './HotSearch'
|
||||
import SalesData from './SalesData'
|
||||
import Trend from '../../../components/chart/Trend'
|
||||
|
||||
const rankList = []
|
||||
|
||||
@ -123,6 +125,7 @@ for (let i = 0; i < 8; i++) {
|
||||
|
||||
export default {
|
||||
name: 'analysis',
|
||||
i18n: require('./i18n'),
|
||||
data () {
|
||||
return {
|
||||
rankList
|
||||
@ -3,7 +3,12 @@
|
||||
<a-row style="margin: 0 -34px">
|
||||
<a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
|
||||
<div class="num-info">
|
||||
<span class="title">搜索用户数</span>
|
||||
<span class="title">
|
||||
{{$t('search')}}
|
||||
<a-tooltip :title="$t('introduce')">
|
||||
<a-icon type="info-circle" style="font-size: 14px; margin-left: 8px" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<div class="value">
|
||||
<span class="total">12321</span>
|
||||
<span class="subtotal">71.2<a-icon type="caret-up" /></span>
|
||||
@ -13,7 +18,12 @@
|
||||
</a-col>
|
||||
<a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
|
||||
<div class="num-info">
|
||||
<span class="title">搜索用户数</span>
|
||||
<span class="title">
|
||||
{{$t('capita')}}
|
||||
<a-tooltip :title="$t('introduce')">
|
||||
<a-icon type="info-circle" style="font-size: 14px; margin-left: 8px" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<div class="value">
|
||||
<span class="total">2.7</span>
|
||||
<span class="subtotal">71.2<a-icon type="caret-down" /></span>
|
||||
@ -24,8 +34,9 @@
|
||||
</a-row>
|
||||
<a-table
|
||||
:dataSource="searchData"
|
||||
:columns="columns" size="small"
|
||||
:columns="tableColumns"
|
||||
:pagination="{style: { marginBottom: 0 }, pageSize: 5}"
|
||||
size="small"
|
||||
rowKey="index"
|
||||
>
|
||||
<a href="#/" slot="keyword" slot-scope="text">{{text}}</a>
|
||||
@ -35,7 +46,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MiniArea from '../chart/MiniArea'
|
||||
import MiniArea from '../../../components/chart/MiniArea'
|
||||
|
||||
const searchData = []
|
||||
for (let i = 0; i < 50; i++) {
|
||||
@ -50,20 +61,17 @@ for (let i = 0; i < 50; i++) {
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '排名',
|
||||
dataIndex: 'index',
|
||||
key: 'index'
|
||||
key: 'rank'
|
||||
},
|
||||
{
|
||||
title: '搜索关键词',
|
||||
dataIndex: 'keyword',
|
||||
key: 'keyword',
|
||||
scopedSlots: {customRender: 'keyword'}
|
||||
},
|
||||
{
|
||||
title: '用户数',
|
||||
dataIndex: 'count',
|
||||
key: 'count',
|
||||
key: 'users',
|
||||
sorter: (a, b) => a.count - b.count
|
||||
},
|
||||
{
|
||||
@ -77,11 +85,21 @@ const columns = [
|
||||
export default {
|
||||
name: 'HotSearch',
|
||||
components: {MiniArea},
|
||||
i18n: require('./i18n-search'),
|
||||
data () {
|
||||
return {
|
||||
searchData,
|
||||
columns
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tableColumns() {
|
||||
let columns = this.columns
|
||||
return columns.map(item => {
|
||||
item.title = this.$t(item.key)
|
||||
return item
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<div style="">
|
||||
<a-radio-group>
|
||||
<a-radio-button value="a">全渠道</a-radio-button>
|
||||
<a-radio-button value="b">线上</a-radio-button>
|
||||
<a-radio-button value="c">门店</a-radio-button>
|
||||
</a-radio-group>
|
||||
<v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
||||
<v-tooltip :showTitle="false" dataKey="item*percent" />
|
||||
<v-axis />
|
||||
@ -46,7 +41,7 @@ export default {
|
||||
return {
|
||||
data,
|
||||
scale,
|
||||
height: 356,
|
||||
height: 385,
|
||||
pieStyle: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 1
|
||||
31
src/pages/dashboard/analysis/i18n-search.js
Normal file
31
src/pages/dashboard/analysis/i18n-search.js
Normal file
@ -0,0 +1,31 @@
|
||||
module.exports = {
|
||||
messages: {
|
||||
CN: {
|
||||
search: '搜索用户数',
|
||||
capita: '人均搜索次数',
|
||||
rank: '排名',
|
||||
keyword: '搜索关键词',
|
||||
count: '用户数',
|
||||
range: '周涨幅',
|
||||
introduce: '指标说明'
|
||||
},
|
||||
HK: {
|
||||
search: '搜索用戶數',
|
||||
capita: '人均搜索次數',
|
||||
rank: '排名',
|
||||
keyword: '搜索關鍵詞',
|
||||
count: '用戶數',
|
||||
range: '周漲幅',
|
||||
introduce: '指標說明'
|
||||
},
|
||||
US: {
|
||||
search: 'Search Users',
|
||||
capita: 'Per Capita Search',
|
||||
rank: 'Rank',
|
||||
keyword: 'Keyword',
|
||||
users: 'Users',
|
||||
range: 'Weekly Range',
|
||||
introduce: 'Introduce'
|
||||
},
|
||||
}
|
||||
}
|
||||
73
src/pages/dashboard/analysis/i18n.js
Normal file
73
src/pages/dashboard/analysis/i18n.js
Normal file
@ -0,0 +1,73 @@
|
||||
module.exports = {
|
||||
messages: {
|
||||
CN: {
|
||||
introduce: '指标说明',
|
||||
totalSales: '总销售额',
|
||||
visits: '访问量',
|
||||
payments: '支付笔数',
|
||||
operating: '运营活动效果',
|
||||
wow: '同周比',
|
||||
dod: '日环比',
|
||||
sales: '销售额',
|
||||
daily: '日均',
|
||||
day: '今日',
|
||||
week: '本周',
|
||||
month: '本月',
|
||||
year: '本年',
|
||||
search: '热门搜索',
|
||||
proportion: '销售额占比',
|
||||
conversion: '转化率',
|
||||
trend: '趋势',
|
||||
ranking: '排行榜',
|
||||
all: '全渠道',
|
||||
online: '线上',
|
||||
stores: '门店',
|
||||
},
|
||||
HK: {
|
||||
introduce: '指標說明',
|
||||
totalSales: '總銷售額',
|
||||
visits: '訪問量',
|
||||
payments: '支付筆數',
|
||||
operating: '運營活動效果',
|
||||
wow: '通周比',
|
||||
dod: '日環比',
|
||||
sales: '銷售額',
|
||||
daily: '日均',
|
||||
day: '今日',
|
||||
week: '本週',
|
||||
month: '本月',
|
||||
year: '本年',
|
||||
search: '熱門搜索',
|
||||
proportion: '銷售額佔比',
|
||||
conversion: '轉化率',
|
||||
trend: '趨勢',
|
||||
ranking: '排行榜',
|
||||
all: '全渠道',
|
||||
online: '線上',
|
||||
stores: '門店',
|
||||
},
|
||||
US: {
|
||||
introduce: 'Introduce',
|
||||
totalSales: 'Total Sales',
|
||||
visits: 'Visits',
|
||||
payments: 'Payments',
|
||||
operating: 'Operational Effect',
|
||||
wow: 'WoW Change',
|
||||
dod: 'DoD Change',
|
||||
sales: 'Sales',
|
||||
daily: 'Daily',
|
||||
day: 'All Day',
|
||||
week: 'All Week',
|
||||
month: 'All Month',
|
||||
year: 'All Year',
|
||||
search: 'Hot Search',
|
||||
proportion: 'The Proportion Of Sales',
|
||||
conversion: 'Conversion Rate',
|
||||
trend: 'Trend',
|
||||
ranking: 'Ranking',
|
||||
all: 'All',
|
||||
online: 'Online',
|
||||
stores: 'Stores',
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Dashboard from '@/pages/dashboard/Analysis'
|
||||
import Dashboard from '@/pages/dashboard/analysis/Analysis'
|
||||
import NotFound from '@/pages/exception/404'
|
||||
import NotPermit from '@/pages/exception/403'
|
||||
import ServerError from '@/pages/exception/500'
|
||||
|
||||
@ -37,7 +37,7 @@ export default new Router({
|
||||
{
|
||||
path: 'analysis',
|
||||
name: '分析页',
|
||||
component: () => import('@/pages/dashboard/Analysis'),
|
||||
component: () => import('@/pages/dashboard/analysis/Analysis'),
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user