feat: add international language support for analysis page; :star2: 新增：分析页面...

iczer

2020-06-24 2f34d7ac5222c48351b4c5fbd14fb0565bc7eb32

feat: add international language support for analysis page; :star2:
新增：分析页面增加国际化语言支持；

 src/pages/dashboard/Analysis.vue

File was deleted

 src/pages/dashboard/analysis/Analysis.vue

New file
@@ -0,0 +1,149 @@
<template>
  <div class="analysis">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6">
        <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="$t('wow')" :percent="12" :is-increase="true" :scale="0" />
            <trend :term="$t('dod')" :target="100" :value="89" :scale="0" />
          </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="$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">{{$ta('daily|visits', 'p')}}<span> 123,4</span></div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <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">{{$t('conversion')}} <span>60%</span></div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <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="$t('wow')" :percent="12" :is-increase="true" :scale="0" />
            <trend :term="$t('dod')" :target="100" :value="89" :scale="0" />
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-card style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
      <div class="salesCard">
        <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>{{$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="$t('sales')" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :title="$ta('stores|sales|trend', 'p')" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <ranking-list :title="$ta('stores|sales|ranking', 'p')" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane :tab="$t('visits')" key="2"><a-row>
            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
              <bar :title="$ta('visits|trend', 'p')" />
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <ranking-list :title="$ta('stores|visits|ranking', 'p')" :list="rankList"/>
            </a-col>
          </a-row></a-tab-pane>
        </a-tabs>
      </div>
    </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="$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="$t('proportion')">
          <sales-data />
          <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>
  </div>
</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 './HotSearch'
import SalesData from './SalesData'
import Trend from '../../../components/chart/Trend'

const rankList = []

for (let i = 0; i < 8; i++) {
  rankList.push({
    name: '桃源村' + i + '号店',
    total: 1234.56 - i * 100
  })
}

export default {
  name: 'analysis',
  i18n: require('./i18n'),
  data () {
    return {
      rankList
    }
  },
  components: {Trend, SalesData, HotSearch, RankingList, Bar, MiniProgress, MiniBar, MiniArea, ChartCard}
}
</script>

<style lang="less" scoped>
  .extra-wrap{

  }
  .extra-item{
    display: inline-block;
    margin-right: 24px;
    a{
      margin-left: 24px;
    }
  }
</style>

 src/pages/dashboard/analysis/HotSearch.vue

File was renamed from src/components/analysis/HotSearch.vue
@@ -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 @@

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 @@
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>

 src/pages/dashboard/analysis/SalesData.vue

File was renamed from src/components/analysis/SalesData.vue
@@ -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 @@
    return {
      data,
      scale,
      height: 356,
      height: 385,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1

 src/pages/dashboard/analysis/i18n-search.js

New 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'
    },
  }
}

 src/pages/dashboard/analysis/i18n.js

New 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',
    }
  }
}

 src/router/index.js

@@ -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'

 src/router/lazy.js

@@ -37,7 +37,7 @@
            {
              path: 'analysis',
              name: '分析页',
              component: () => import('@/pages/dashboard/Analysis'),
              component: () => import('@/pages/dashboard/analysis/Analysis'),
            }
          ]
        },