From bfdb74718bf9a5442fd349207b9684c3f4cd6aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=B2?=
 <8702040+cai-ling@user.noreply.gitee.com>
Date: Mon, 23 Dec 2024 17:35:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |   1 +
 src/components/header.vue      |  25 ++--
 src/config/rem.js              |   3 +-
 src/i18n/i18n.js               |  46 +++++++
 src/i18n/langs/en.js           |  23 ++++
 src/i18n/langs/es.js           |  23 ++++
 src/i18n/langs/zh.js           |  23 ++++
 src/main.js                    |   4 +
 src/pages/modules/index2.vue   | 212 ++++++++++++++++++++-------------
 src/pages/modules/style.stylus |  70 +++++------
 src/router/index.js            |   2 +-
 src/vuex/modules/com.js        |   4 +-
 yarn.lock                      |   5 +
 13 files changed, 306 insertions(+), 135 deletions(-)
 create mode 100644 src/i18n/i18n.js
 create mode 100644 src/i18n/langs/en.js
 create mode 100644 src/i18n/langs/es.js
 create mode 100644 src/i18n/langs/zh.js

diff --git a/package.json b/package.json
index 1e77821..7650e0c 100644
--- 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",
diff --git a/src/components/header.vue b/src/components/header.vue
index 2975c30..eb4ac1d 100644
--- 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>
diff --git a/src/config/rem.js b/src/config/rem.js
index 1d082b1..7215f85 100644
--- 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、%
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
new file mode 100644
index 0000000..575f46d
--- /dev/null
+++ 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
diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
new file mode 100644
index 0000000..564dafb
--- /dev/null
+++ 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'
+  }
+}
diff --git a/src/i18n/langs/es.js b/src/i18n/langs/es.js
new file mode 100644
index 0000000..a72f2ec
--- /dev/null
+++ 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'
+  }
+}
diff --git a/src/i18n/langs/zh.js b/src/i18n/langs/zh.js
new file mode 100644
index 0000000..c1d57f0
--- /dev/null
+++ 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: '总数'
+  }
+}
diff --git a/src/main.js b/src/main.js
index fd6664d..6490f20 100644
--- 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/>'
 })
diff --git a/src/pages/modules/index2.vue b/src/pages/modules/index2.vue
index b0abc33..6585667 100644
--- 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
diff --git a/src/pages/modules/style.stylus b/src/pages/modules/style.stylus
index ee660bb..ff4a62b 100644
--- 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
diff --git a/src/router/index.js b/src/router/index.js
index e185a0a..d6eeab5 100644
--- 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',
diff --git a/src/vuex/modules/com.js b/src/vuex/modules/com.js
index 5a013d9..fc57e3c 100644
--- 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
 }
 
diff --git a/yarn.lock b/yarn.lock
index f902f20..36de115 100644
--- 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"