国际化

2024-12-23 17:35:19 +08:00
parent 660c7f9d8f
commit bfdb74718b
13 changed files with 306 additions and 135 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue": "^2.5.2",
+    "vue-i18n": "8.2.1",
    "vue-particles": "^1.0.9",
    "vue-router": "^3.0.1",
    "vue-seamless-scroll": "^1.1.16",
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -2,7 +2,7 @@
 <div class="n_header">
  <div class="n_header_h1">
    <slot></slot>
-    <h1 v-if="type === '1'">{{ title1 }}</h1>
+    <h1 v-if="type === '1'" :style="{'font-size': $i18n.locale !== 'zh' ? '.15rem' : '.19rem'}">{{ title1 }}</h1>
  </div>
  <p class="p_title">{{ title2 }}</p>
  <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
@@ -46,37 +46,36 @@ export default {
  left 0
  top 0
  width 100%
-  height 88px
+  height .88rem
  background center / 100% url('../images/header_bg_s.png') no-repeat
 .n_header_h1
  width: 100%;
  height: 100%;
-  // padding-top 12px
  text-align center
  h1
-    font-size: 19px;
+    font-size: .19rem;
    font-weight: 700;
    color: #fff;
-    line-height: 40px;
-    height: 40px;
+    line-height: .4rem;
+    height: .4rem;
    text-align center;
-    letter-spacing 3px
-    padding-left 3px
+    letter-spacing .03rem
+    padding-left .03rem
 .p_title
  position absolute
  left 1%
  top 11%
-  font-size 14px
+  font-size .14rem
  color #AECAF5
 .exit_btn
  position absolute
  right 1%
  top 11%
  z-index 100
-  height 16px
-  width 16px
-  line-height 16px
-  font-size 16px
+  height .16rem
+  width .16rem
+  line-height .16rem
+  font-size .16rem
  color #AECAF5
  text-align center
 </style>
--- a/src/config/rem.js
+++ b/src/config/rem.js
@@ -4,10 +4,9 @@
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
-    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
+    docEl.style.fontSize = 100 * (clientWidth / 960) + 'px'
    document.body.style.display = 'block'
  }
  if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
 })(document, window)
-// 晟华大屏尺寸2560*1440，屏幕太大用rem样式会错乱，现在使用px、%
--- a/src/i18n/i18n.js
+++ b/src/i18n/i18n.js
@@ -0,0 +1,46 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import caLocale from 'element-ui/lib/locale/lang/ca'
+import locale from 'element-ui/lib/locale'
+import zh from './langs/zh'
+import en from './langs/en'
+import es from './langs/es'
+
+Vue.use(VueI18n)
+
+// 引入本地包
+const messages = {
+  'en': Object.assign(en, enLocale),
+  'zh': Object.assign(zh, zhLocale),
+  'es': Object.assign(es, caLocale)
+}
+
+// 获取当前系统使用语言字符串
+export const getLanguage = () => {
+  // 本地缓存获取
+  let language = window.localStorage.getItem('lang')
+  if (language) {
+    return language
+  }
+  // 返回当前浏览器的语言设置
+  language = (navigator.language || navigator.browserLanguage).toLowerCase()
+  const locales = Object.keys(messages)
+  for (const local of locales) {
+    if (local.indexOf(language) > -1) {
+      return local
+    }
+  }
+  return 'zh'
+}
+
+// 创建国际化实例
+const i18n = new VueI18n({
+  locale: getLanguage(),
+  messages
+})
+
+locale.i18n((key, value) => i18n.t(key, value)) // 为了实现element插件的多语言切换
+
+export default i18n
--- a/src/i18n/langs/en.js
+++ b/src/i18n/langs/en.js
@@ -0,0 +1,23 @@
+module.exports = {
+  page: {
+    title: 'Warehouse monitoring',
+    logo: 'Hengshen WMS',
+    lxkjk: 'Monitoring of material box warehouse',
+    hwsy: 'Location usage',
+    lxtotal: 'Total',
+    lxused: 'Used',
+    lxfree: 'Free',
+    unit: 'piece',
+    unit1: '',
+    jrcrk: 'Today in / out Warehouse',
+    rk: 'IN',
+    ck: 'OUT',
+    total: 'Total',
+    box: 'Box',
+    time: 'Time',
+    sskcfx: 'Real time inventory analysis',
+    crkqs: 'In / out Warehouse',
+    tpkjk: 'Tray warehouse monitoring',
+    total1: 'Total'
+  }
+}
--- a/src/i18n/langs/es.js
+++ b/src/i18n/langs/es.js
@@ -0,0 +1,23 @@
+module.exports = {
+  page: {
+    title: 'Monitoreo de almacenes',
+    logo: 'Hengshen WMS',
+    lxkjk: 'Monitoreo del almacén de cajas de materiales',
+    hwsy: 'Uso de plazas',
+    lxtotal: 'Todo',
+    lxused: 'Se ha utilizado',
+    lxfree: 'Gratis',
+    unit: 'Bloque',
+    unit1: '',
+    jrcrk: 'Salir y entrar en el almacén hoy',
+    rk: 'In',
+    ck: 'Salir',
+    total: 'Todo',
+    box: 'Caja',
+    time: 'Tiempo',
+    sskcfx: 'Análisis de inventario en tiempo real',
+    crkqs: 'Tendencia de entrada y salida',
+    tpkjk: 'Monitoreo de la Biblioteca de paletas',
+    total1: 'Cantidad total'
+  }
+}
--- a/src/i18n/langs/zh.js
+++ b/src/i18n/langs/zh.js
@@ -0,0 +1,23 @@
+module.exports = {
+  page: {
+    title: '仓储监控',
+    logo: '恒森集团WMS仓储看板',
+    lxkjk: '料箱库监控',
+    hwsy: '货位使用',
+    lxtotal: '总货位数',
+    lxused: '已用货位',
+    lxfree: '空余货位',
+    unit: '个',
+    unit1: '箱',
+    jrcrk: '今日出入库',
+    rk: '入库',
+    ck: '出库',
+    total: '总数量',
+    box: '箱数',
+    time: '耗时',
+    sskcfx: '实时库存分析',
+    crkqs: '出入库趋势',
+    tpkjk: '托盘库监控',
+    total1: '总数'
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,8 @@ import store from './vuex/store'
 import './style/reset.css'
 import './style/iconfont.styl'
 import './style/layout.styl'
+import i18n from './i18n/i18n'
+import './config/rem.js'
 import * as echarts from 'echarts'
 import 'default-passive-events'
 import scroll from 'vue-seamless-scroll'
@@ -17,11 +19,13 @@ Vue.prototype.$message = Message
 Vue.use(Select)
 Vue.use(Option)
 Vue.config.productionTip = false
+
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
  router,
  store,
+  i18n,
  components: { App },
  template: '<App/>'
 })
--- a/src/pages/modules/index2.vue
+++ b/src/pages/modules/index2.vue
@@ -1,10 +1,11 @@
 <template>
  <div class="box relative">
-    <t-header type="1" title1="仓储监控" title2="恒森集团WMS仓储看板"></t-header>
+    <t-header type="1" :title1="$t('page.title')" :title2="$t('page.logo')"></t-header>
    <div class="box body_container">
      <div class="relative b_title">
        <span class="absolute sj_icon"></span>
-        <p>料箱库监控</p>
+        <p>{{$t('page.lxkjk')}}</p>
+        <!-- <p>料箱库监控</p> -->
      </div>
      <div class="zd-row wraper_1 mgb8">
        <div class="box zd-col-7 mgr8">
@@ -13,23 +14,27 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">货位使用</p>
+            <p class="title">{{$t('page.hwsy')}}</p>
+            <!-- <p class="title">货位使用</p> -->
            <div class="zd-row wraper_4">
              <div class="box percent_item">
                <p>{{ lx_used.percent }}</p>
              </div>
              <div class="box zd-col-16 zd-row flexcol jccenter">
                <div class="zd-row mgb8">
-                  <p class="zd-col-8 item_label">总货位数</p>
-                  <p class="zd-col-16 item_value">{{ lx_used.total }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-8 item_label">{{$t('page.lxtotal')}}</p>
+                  <!-- <p class="zd-col-8 item_label">总货位数</p> -->
+                  <p class="zd-col-16 item_value">{{ lx_used.total }}<span class="item_unit">{{$t('page.unit')}}</span></p>
                </div>
                <div class="zd-row mgb8">
-                  <p class="zd-col-8 item_label">已用货位</p>
-                  <p class="zd-col-16 item_value">{{ lx_used.used }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-8 item_label">{{$t('page.lxused')}}</p>
+                  <!-- <p class="zd-col-8 item_label">已用货位</p> -->
+                  <p class="zd-col-16 item_value">{{ lx_used.used }}<span class="item_unit">{{$t('page.unit')}}</span></p>
                </div>
                <div class="zd-row">
-                  <p class="zd-col-8 item_label">空余货位</p>
-                  <p class="zd-col-16 item_value">{{ lx_used.free }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-8 item_label">{{$t('page.lxfree')}}</p>
+                  <!-- <p class="zd-col-8 item_label">空余货位</p> -->
+                  <p class="zd-col-16 item_value">{{ lx_used.free }}<span class="item_unit">{{$t('page.unit')}}</span></p>
                </div>
              </div>
            </div>
@@ -39,31 +44,40 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">今日出入库</p>
+            <p class="title">{{$t('page.jrcrk')}}</p>
+            <!-- <p class="title">今日出入库</p> -->
            <div v-if="lx_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
              <div class="zd-row flexstart mgb8">
-                <div class="zd-col-3 item_label">入库</div>
+                <div class="zd-col-3 item_label">{{$t('page.rk')}}</div>
+                <!-- <div class="zd-col-3 item_label">入库</div> -->
                <div class="zd-col-20">
                  <div class="percent_line">
                    <div class="percent_i" :style="{'width': lx_task[0].total !== 0 ? lx_task[0].box / lx_task[0].total * 100 + '%' : 0}"></div>
                  </div>
                  <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[0].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.total')}}:<span class="c_y">{{ lx_task[0].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.box')}}:<span class="c_y">{{ lx_task[0].box }}</span>{{$t('page.unit1')}}</p>
+                    <p class="item_label font_2">{{$t('page.time')}}:<span class="c_y">{{ lx_task[0].time }}</span></p>
+                    <!-- <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[0].total }}</span></p>
                    <p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[0].box }}</span>箱</p>
-                    <p class="item_label font_2">耗时:<span class="c_y">{{ lx_task[0].time }}</span></p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ lx_task[0].time }}</span></p> -->
                  </div>
                </div>
              </div>
              <div class="zd-row flexstart">
-                <div class="zd-col-3 item_label">出库</div>
+                <div class="zd-col-3 item_label">{{$t('page.ck')}}</div>
+                <!-- <div class="zd-col-3 item_label">出库</div> -->
                <div class="zd-col-20">
                  <div class="percent_line percent_line_c">
                    <div class="percent_i percent_i_c" :style="{'width': lx_task[1].total !== 0 ? lx_task[1].box / lx_task[1].total * 100 + '%' : 0}"></div>
                  </div>
                  <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[1].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.total')}}:<span class="c_y">{{ lx_task[1].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.box')}}:<span class="c_y">{{ lx_task[1].box }}</span>{{$t('page.unit1')}}</p>
+                    <p class="item_label font_2">{{$t('page.time')}}:<span class="c_y">{{ lx_task[1].time }}</span></p>
+                    <!-- <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[1].total }}</span></p>
                    <p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[1].box }}</span>箱</p>
-                    <p class="item_label font_2">耗时:<span class="c_y">{{ lx_task[1].time }}</span></p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ lx_task[1].time }}</span></p> -->
                  </div>
                </div>
              </div>
@@ -76,7 +90,8 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">实时库存分析</p>
+            <p class="title">{{ $t('page.sskcfx') }}</p>
+            <!-- <p class="title">实时库存分析</p> -->
            <div class="zd-row wraper_4">
              <div class="box zd-col-8 mgr8">
                <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
@@ -102,7 +117,8 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">出入库趋势</p>
+            <p class="title">{{$t('page.crkqs')}}</p>
+            <!-- <p class="title">出入库趋势</p> -->
            <div class="zd-row wraper_4">
              <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
            </div>
@@ -111,7 +127,8 @@
      </div>
      <div class="relative b_title">
        <span class="absolute sj_icon"></span>
-        <p>托盘库监控</p>
+        <p>{{$t('page.tpkjk')}}</p>
+        <!-- <p>托盘库监控</p> -->
      </div>
      <div class="zd-row wraper_1">
        <div class="box zd-col-7 mgr8">
@@ -120,23 +137,27 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">货位使用</p>
+            <p class="title">{{$t('page.hwsy')}}</p>
+            <!-- <p class="title">货位使用</p> -->
            <div class="zd-row wraper_4">
              <div class="box percent_item">
                <p>{{ tp_used.percent }}</p>
              </div>
              <div class="box zd-col-16 zd-row flexcol jccenter">
                <div class="zd-row mgb8">
-                  <p class="zd-col-8 item_label">总货位数</p>
-                  <p class="zd-col-16 item_value">{{ tp_used.total }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-8 item_label">{{$t('page.lxtotal')}}</p>
+                  <!-- <p class="zd-col-8 item_label">总货位数</p> -->
+                  <p class="zd-col-16 item_value">{{ tp_used.total }}<span class="item_unit">{{$t('page.unit')}}</span></p>
                </div>
                <div class="zd-row mgb8">
-                  <p class="zd-col-8 item_label">已用货位</p>
-                  <p class="zd-col-16 item_value">{{ tp_used.used }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-8 item_label">{{$t('page.lxused')}}</p>
+                  <!-- <p class="zd-col-8 item_label">已用货位</p> -->
+                  <p class="zd-col-16 item_value">{{ tp_used.used }}<span class="item_unit">{{$t('page.unit')}}</span></p>
                </div>
                <div class="zd-row">
-                  <p class="zd-col-8 item_label">空余货位</p>
-                  <p class="zd-col-16 item_value">{{ tp_used.free }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-8 item_label">{{$t('page.lxfree')}}</p>
+                  <!-- <p class="zd-col-8 item_label">空余货位</p> -->
+                  <p class="zd-col-16 item_value">{{ tp_used.free }}<span class="item_unit">{{$t('page.unit')}}</span></p>
                </div>
              </div>
            </div>
@@ -146,31 +167,40 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">今日出入库</p>
+            <p class="title">{{$t('page.jrcrk')}}</p>
+            <!-- <p class="title">今日出入库</p> -->
            <div v-if="tp_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
              <div class="zd-row flexstart mgb8">
-                <div class="zd-col-3 item_label">入库</div>
+                <div class="zd-col-3 item_label">{{$t('page.rk')}}</div>
+                <!-- <div class="zd-col-3 item_label">入库</div> -->
                <div class="zd-col-20">
                  <div class="percent_line">
                    <div class="percent_i" :style="{'width': tp_task[0].total !== 0 ? tp_task[0].box / tp_task[0].total * 100 + '100%' : 0}"></div>
                  </div>
                  <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[0].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.total')}}:<span class="c_y">{{ tp_task[0].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.box')}}:<span class="c_y">{{ tp_task[0].box }}</span>{{$t('page.unit1')}}</p>
+                    <p class="item_label font_2">{{$t('page.time')}}:<span class="c_y">{{ tp_task[0].time }}</span></p>
+                    <!-- <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[0].total }}</span></p>
                    <p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[0].box }}</span>箱</p>
-                    <p class="item_label font_2">耗时:<span class="c_y">{{ tp_task[0].time }}</span></p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ tp_task[0].time }}</span></p> -->
                  </div>
                </div>
              </div>
              <div class="zd-row flexstart">
-                <div class="zd-col-3 item_label">出库</div>
+                <div class="zd-col-3 item_label">{{$t('page.ck')}}</div>
+                <!-- <div class="zd-col-3 item_label">出库</div> -->
                <div class="zd-col-20">
                  <div class="percent_line percent_line_c">
                    <div class="percent_i percent_i_c" :style="{'width': tp_task[1].total !== 0 ? tp_task[1].box / tp_task[1].total * 100 + '100%' : 0}"></div>
                  </div>
                  <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[1].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.total')}}:<span class="c_y">{{ tp_task[1].total }}</span></p>
+                    <p class="item_label font_2">{{$t('page.box')}}:<span class="c_y">{{ tp_task[1].box }}</span>{{$t('page.unit1')}}</p>
+                    <p class="item_label font_2">{{$t('page.time')}}:<span class="c_y">{{ tp_task[1].time }}</span></p>
+                    <!-- <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[1].total }}</span></p>
                    <p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[1].box }}</span>箱</p>
-                    <p class="item_label font_2">耗时:<span class="c_y">{{ tp_task[1].time }}</span></p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ tp_task[1].time }}</span></p> -->
                  </div>
                </div>
              </div>
@@ -183,7 +213,8 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">实时库存分析</p>
+            <p class="title">{{ $t('page.sskcfx') }}</p>
+            <!-- <p class="title">实时库存分析</p> -->
            <div class="zd-row wraper_4">
              <div class="box zd-col-8 mgr8">
                <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
@@ -209,7 +240,8 @@
            <div class="absolute bg_j bg_j_2"></div>
            <div class="absolute bg_j bg_j_3"></div>
            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">出入库趋势</p>
+            <p class="title">{{$t('page.crkqs')}}</p>
+            <!-- <p class="title">出入库趋势</p> -->
            <div class="zd-row wraper_4">
              <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
            </div>
@@ -229,6 +261,7 @@ export default {
  },
  data () {
    return {
+      htmlFontSize: 0,
      interTime: this.$store.getters.setTime,
      timer: null,
      materList: [],
@@ -253,6 +286,7 @@ export default {
    this.refresh()
  },
  mounted () {
+    // window.localStorage.setItem('lang', 'es')
    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
    this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
@@ -303,6 +337,10 @@ export default {
      this.setEchart3()
      this.setEchart4()
    },
+    adjustFontSize (size) {
+      let fontSize = size * (window.innerWidth / 960)
+      return fontSize
+    },
    setEchart1 () {
      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
      let colorListIn = ['rgba(15, 45, 115,  .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
@@ -313,6 +351,7 @@ export default {
        el.name = el.name
      })
      let total = this.lx_inventory[0].total
+      let zs = this.$t('page.total1')
      let option = {
        color: colors,
        grid: {
@@ -325,20 +364,21 @@ export default {
        title: {
          left: '50%',
          top: '50%',
-          text: `{a|总数}\n{b|${total}}`,
+          text: `{a|${zs}}\n{b|${total}}`,
+          // text: `{a|总数}\n{b|${total}}`,
          textAlign: 'center',
          textVerticalAlign: 'middle',
          padding: 0,
          textStyle: {
            rich: {
              a: {
-                fontSize: 12,
-                lineHeight: 18,
+                fontSize: this.adjustFontSize(12),
+                lineHeight: this.adjustFontSize(18),
                color: '#A8C3E6'
              },
              b: {
-                fontSize: 17,
-                lineHeight: 17,
+                fontSize: this.adjustFontSize(17),
+                lineHeight: this.adjustFontSize(17),
                fontWeight: 'bold',
                color: '#DBE7F6'
              }
@@ -444,7 +484,7 @@ export default {
      })
      let option = {
        grid: {
-          top: 30,
+          top: this.adjustFontSize(30),
          left: 0,
          right: 0,
          bottom: 0,
@@ -456,13 +496,14 @@ export default {
          right: '0',
          textStyle: {
            color: '#9BB9DD',
-            fontSize: 12,
-            lineHeight: 16
+            fontSize: this.adjustFontSize(12),
+            lineHeight: this.adjustFontSize(16)
          },
-          itemGap: 16,
-          itemWidth: 8,
-          itemHeight: 8,
-          data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
+          itemGap: this.adjustFontSize(16),
+          itemWidth: this.adjustFontSize(8),
+          itemHeight: this.adjustFontSize(8),
+          data: [{name: this.$t('page.rk'), itemStyle: {color: '#67D470'}}, {name: this.$t('page.ck'), itemStyle: {color: '#1980EA'}}]
+          // data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
@@ -480,8 +521,8 @@ export default {
            interval: 0,
            rotate: 45,
            color: '#7591B2',
-            fontSize: 12,
-            lineHeight: 12
+            fontSize: this.adjustFontSize(12),
+            lineHeight: this.adjustFontSize(12)
          },
          data: barName
        },
@@ -497,7 +538,7 @@ export default {
          },
          axisLabel: {
            color: '#B5C5D4',
-            fontSize: 12
+            fontSize: this.adjustFontSize(12)
          },
          splitLine: {
            show: true,
@@ -510,7 +551,7 @@ export default {
        },
        series: [
          {
-            name: '入库',
+            name: this.$t('page.rk'),
            type: 'line',
            showSymbol: false,
            itemStyle: {
@@ -535,7 +576,7 @@ export default {
            data: barData1
          },
          {
-            name: '出库',
+            name: this.$t('page.ck'),
            type: 'line',
            showSymbol: false,
            itemStyle: {
@@ -573,6 +614,7 @@ export default {
        el.name = el.name
      })
      let total = this.tp_inventory[0].total
+      let zs = this.$t('page.total1')
      let option = {
        color: colors,
        grid: {
@@ -585,20 +627,21 @@ export default {
        title: {
          left: '50%',
          top: '50%',
-          text: `{a|总数}\n{b|${total}}`,
+          text: `{a|${zs}}\n{b|${total}}`,
+          // text: `{a|总数}\n{b|${total}}`,
          textAlign: 'center',
          textVerticalAlign: 'middle',
          padding: 0,
          textStyle: {
            rich: {
              a: {
-                fontSize: 12,
-                lineHeight: 18,
+                fontSize: this.adjustFontSize(12),
+                lineHeight: this.adjustFontSize(18),
                color: '#A8C3E6'
              },
              b: {
-                fontSize: 17,
-                lineHeight: 17,
+                fontSize: this.adjustFontSize(17),
+                lineHeight: this.adjustFontSize(17),
                fontWeight: 'bold',
                color: '#DBE7F6'
              }
@@ -704,7 +747,7 @@ export default {
      })
      let option = {
        grid: {
-          top: 30,
+          top: this.adjustFontSize(30),
          left: 0,
          right: 0,
          bottom: 0,
@@ -716,13 +759,14 @@ export default {
          right: '0',
          textStyle: {
            color: '#9BB9DD',
-            fontSize: 12,
-            lineHeight: 16
+            fontSize: this.adjustFontSize(12),
+            lineHeight: this.adjustFontSize(16)
          },
-          itemGap: 16,
-          itemWidth: 8,
-          itemHeight: 8,
-          data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
+          itemGap: this.adjustFontSize(16),
+          itemWidth: this.adjustFontSize(8),
+          itemHeight: this.adjustFontSize(8),
+          data: [{name: this.$t('page.rk'), itemStyle: {color: '#67D470'}}, {name: this.$t('page.ck'), itemStyle: {color: '#1980EA'}}]
+          // data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
        },
        xAxis: {
          type: 'category',
@@ -740,8 +784,8 @@ export default {
            interval: 0,
            rotate: 45,
            color: '#7591B2',
-            fontSize: 12,
-            lineHeight: 12
+            fontSize: this.adjustFontSize(12),
+            lineHeight: this.adjustFontSize(12)
          },
          data: barName
        },
@@ -757,7 +801,7 @@ export default {
          },
          axisLabel: {
            color: '#B5C5D4',
-            fontSize: 12
+            fontSize: this.adjustFontSize(12)
          },
          splitLine: {
            show: true,
@@ -769,7 +813,8 @@ export default {
        },
        series: [
          {
-            name: '入库',
+            name: this.$t('page.rk'),
+            // name: '入库',
            type: 'line',
            showSymbol: false,
            itemStyle: {
@@ -794,7 +839,8 @@ export default {
            data: barData1
          },
          {
-            name: '出库',
+            name: this.$t('page.ck'),
+            // name: '出库',
            type: 'line',
            showSymbol: false,
            itemStyle: {
@@ -829,39 +875,39 @@ export default {
 <style lang="stylus" scoped>
@import './style.stylus'
 .body_container
-  padding-top 38px
+  padding-top .38rem
 .mgr8
-  margin-right 8px
+  margin-right .08rem
 .mgb8
-  margin-bottom 8px
+  margin-bottom .08rem
 .wraper_1
  width 100%
-  height calc(50% - 28px)
+  height calc(50% - .28rem)
 .wraper_2
-  height calc(50% - 4px)
-  padding 4px 10px
+  height calc(50% - .04rem)
+  padding .04rem .1rem
  background-color rgba(15, 45, 115, 60%)
 .wraper_3
  height 100%
 .title
-  font-size 14px
-  line-height 16px
+  font-size .14rem
+  line-height .16rem
  color #fff
 .wraper_4
  width 100%
-  height calc(100% - 16px)
+  height calc(100% - .16rem)
 .percent_item
-  width 76px
+  width .76rem
  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
  p
-    font-size 12px
-    line-height 76px
+    font-size .12rem
+    line-height .76rem
    color #fff
    text-align center
 .font_1
-  font-size 13px
+  font-size .13rem
 .font_2
-  font-size 12px
+  font-size .12rem
  text-align left
  white-space nowrap
 .c_y
--- a/src/pages/modules/style.stylus
+++ b/src/pages/modules/style.stylus
@@ -1,5 +1,5 @@
 .body_container
-  padding 56px 10px 10px 10px
+  padding .56rem .1rem .1rem .1rem
  overflow hidden
 .n_wraper
  width 100%
@@ -87,9 +87,9 @@
  .item_unit
    font-size 16px
 .item_label
-  width 85px
-  font-size 13px
-  line-height 13px
+  width .85rem
+  font-size .13rem
+  line-height .13rem
  color #d2eff8
  text-align left
  text-shadow: 0 0 1px #5bd0f5,
@@ -97,17 +97,17 @@
               0 0 1px #5bd0f5,
               0 0 1px #5bd0f5;
 .item_value
-  width calc(100% - 85px)
-  font-size 15px
-  line-height 15px
+  width calc(100% - .85rem)
+  font-size .15rem
+  line-height .15rem
  color #fff
  font-weight 700
  text-align center
 .item_unit
-  font-size 12px
+  font-size .12rem
  color #fff
  font-weight 400
-  padding-left 5px
+  padding-left .05rem
 .item_value_input
  width calc(100% - 85px)
  font-size 14px
@@ -140,44 +140,46 @@
  font-size 20px
  text-align center
 .b_title
-  height 20px
-  padding-left 20px
+  height .2rem
+  padding-left .2rem
  border-bottom 1px solid #0c99ac
-  margin-bottom 4px
+  margin-bottom .04rem
  p
-    font-size 14px
+    font-size .14rem
    color #caffff
-    line-height 20px
+    line-height .2rem
 .sj_icon
-  top 8px
+  top .08rem
  left 0
  width 0
  height 0
-  border-top 4px solid transparent
-  border-left 4px solid transparent
-  border-right 4px solid #00d6ff
-  border-bottom 4px solid #00d6ff
+  border-top .04rem solid transparent
+  border-left .04rem solid transparent
+  border-right .04rem solid #00d6ff
+  border-bottom .04rem solid #00d6ff
 .pie_item_wrap
  &:nth-child(n+3)
    margin-top 10px
 .pie_legend_icon
-  width 8px
-  height 8px
+  width .08rem
+  height .08rem
  margin 0 auto
-  border-radius 2px
+  border-radius .02rem
 .pie_legend_txt_1
-  font-size: 12px;
-  line-height: 12px
+  font-size: .12rem;
+  line-height: .12rem
  color: #9BB9DD;
-  margin-bottom 4px
+  margin-bottom .04rem
+  word-break: break-all;
+  overflow-wrap: break-word;
 .pie_legend_txt_2
-  font-size 12px
-  line-height: 14px
+  font-size .12rem
+  line-height: .14rem
  color: #fff
-  margin-right 4px
+  margin-right .04rem
 .pie_legend_txt_3
-  font-size: 12px;
-  line-height: 12px
+  font-size: .12rem
+  line-height: .12rem
  color: #9BB9DD;
  opacity: 0.5;
 .bg_j
@@ -260,14 +262,14 @@
      &:nth-child(1)
        width 10%
 .percent_line
-  height 8px
+  height .08rem
  background-color rgba(35, 221, 103, .3)
-  border-radius 10px
-  margin-bottom 6px
+  border-radius .1rem
+  margin-bottom .06rem
 .percent_i
  height 100%
  background-color #23dd67
-  border-radius 10px
+  border-radius .1rem
 .percent_line_c
  background-color rgba(0 118 242, .3)
 .percent_i_c
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,7 +13,7 @@ export default new Router({
  routes: [
    {
      path: '/',
-      redirect: '/setup'
+      redirect: '/index2'
    },
    {
      path: '/setup',
--- a/src/vuex/modules/com.js
+++ b/src/vuex/modules/com.js
@@ -1,13 +1,13 @@
 import * as types from '../types'
 import { getStore, setStore } from '@js/mUtils.js'

-const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8099' : 'http://localhost:8099'
+const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8012' : 'http://localhost:8012'
 /**
 * App通用配置
 */
 const state = {
  baseUrl: getStore('baseUrl') || baseUrl,
-  setTime: getStore('setTime') || 10000,
+  setTime: getStore('setTime') || 5000,
  pageNo: getStore('pageNo') || 1
 }

--- a/yarn.lock
+++ b/yarn.lock
@@ -7108,6 +7108,11 @@ vue-hot-reload-api@^2.2.0:
  resolved "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"
  integrity sha512-AA86yKZ5uOKz87/q1UpngEXhbRkaYg1b7HMMVRobNV1IVKqZe8oLIzo6iMocVwZXnYitlGwf2k4ZRLOZlS8oPQ==

+vue-i18n@8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.2.1.tgz#7e21fed5f18dec6025992522500e9bd62cbe6668"
+  integrity sha512-eiqkUBP9uoADmHa1vz0jLS/JNvR+dODjn2nz14/ZD14hTaWpbOXoUZ0C5Nd2vbP6vOaxXjmkvkzJn/VISvX1BQ==
+
 vue-loader@^13.3.0:
  version "13.7.3"
  resolved "http://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"