root/screenkb-hengsen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

国际化

Browse Source
This commit is contained in:
蔡玲
2024-12-23 17:35:19 +08:00
parent 660c7f9d8f
commit bfdb74718b
13 changed files with 306 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -22,6 +22,7 @@
"stylus": "^0.54.5", "stylus": "^0.54.5",
"stylus-loader": "^3.0.2", "stylus-loader": "^3.0.2",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-i18n": "8.2.1",
"vue-particles": "^1.0.9", "vue-particles": "^1.0.9",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-seamless-scroll": "^1.1.16", "vue-seamless-scroll": "^1.1.16",

25
src/components/header.vue
View File

@@ -2,7 +2,7 @@
<div class="n_header"> <div class="n_header">
<div class="n_header_h1"> <div class="n_header_h1">
<slot></slot> <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> </div>
<p class="p_title">{{ title2 }}</p> <p class="p_title">{{ title2 }}</p>
<div class="exit_btn iconfont" @click="back">&#xe85b;</div> <div class="exit_btn iconfont" @click="back">&#xe85b;</div>
@@ -46,37 +46,36 @@ export default {
left 0 left 0
top 0 top 0
width 100% width 100%
height 88px height .88rem
background center / 100% url('../images/header_bg_s.png') no-repeat background center / 100% url('../images/header_bg_s.png') no-repeat
.n_header_h1 .n_header_h1
width: 100%; width: 100%;
height: 100%; height: 100%;
// padding-top 12px
text-align center text-align center
h1 h1
font-size: 19px; font-size: .19rem;
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
line-height: 40px; line-height: .4rem;
height: 40px; height: .4rem;
text-align center; text-align center;
letter-spacing 3px letter-spacing .03rem
padding-left 3px padding-left .03rem
.p_title .p_title
position absolute position absolute
left 1% left 1%
top 11% top 11%
font-size 14px font-size .14rem
color #AECAF5 color #AECAF5
.exit_btn .exit_btn
position absolute position absolute
right 1% right 1%
top 11% top 11%
z-index 100 z-index 100
height 16px height .16rem
width 16px width .16rem
line-height 16px line-height .16rem
font-size 16px font-size .16rem
color #AECAF5 color #AECAF5
text-align center text-align center
</style> </style>

3
src/config/rem.js
View File

@@ -4,10 +4,9 @@
var recalc = function () { var recalc = function () {
var clientWidth = docEl.clientWidth var clientWidth = docEl.clientWidth
if (!clientWidth) return if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px' docEl.style.fontSize = 100 * (clientWidth / 960) + 'px'
document.body.style.display = 'block' document.body.style.display = 'block'
} }
if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false) if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false) doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window) })(document, window)
// 晟华大屏尺寸2560*1440，屏幕太大用rem样式会错乱，现在使用px、%

46
src/i18n/i18n.js Normal file
View File

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

23
src/i18n/langs/en.js Normal file
View File

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

23
src/i18n/langs/es.js Normal file
View File

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

23
src/i18n/langs/zh.js Normal file
View File

@@ -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: '总数'
}
}

4
src/main.js
View File

@@ -6,6 +6,8 @@ import store from './vuex/store'
import './style/reset.css' import './style/reset.css'
import './style/iconfont.styl' import './style/iconfont.styl'
import './style/layout.styl' import './style/layout.styl'
import i18n from './i18n/i18n'
import './config/rem.js'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import 'default-passive-events' import 'default-passive-events'
import scroll from 'vue-seamless-scroll' import scroll from 'vue-seamless-scroll'
@@ -17,11 +19,13 @@ Vue.prototype.$message = Message
Vue.use(Select) Vue.use(Select)
Vue.use(Option) Vue.use(Option)
Vue.config.productionTip = false Vue.config.productionTip = false
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
store, store,
i18n,
components: { App }, components: { App },
template: '<App/>' template: '<App/>'
}) })

212
src/pages/modules/index2.vue
View File

@@ -1,10 +1,11 @@
<template> <template>
<div class="box relative"> <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="box body_container">
<div class="relative b_title"> <div class="relative b_title">
<span class="absolute sj_icon"></span> <span class="absolute sj_icon"></span>
<p>料箱库监控</p> <p>{{$t('page.lxkjk')}}</p>
<!-- <p>料箱库监控</p> -->
</div> </div>
<div class="zd-row wraper_1 mgb8"> <div class="zd-row wraper_1 mgb8">
<div class="box zd-col-7 mgr8"> <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_2"></div>
<div class="absolute bg_j bg_j_3"></div> <div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></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="zd-row wraper_4">
<div class="box percent_item"> <div class="box percent_item">
<p>{{ lx_used.percent }}</p> <p>{{ lx_used.percent }}</p>
</div> </div>
<div class="box zd-col-16 zd-row flexcol jccenter"> <div class="box zd-col-16 zd-row flexcol jccenter">
<div class="zd-row mgb8"> <div class="zd-row mgb8">
<p class="zd-col-8 item_label">总货位数</p> <p class="zd-col-8 item_label">{{$t('page.lxtotal')}}</p>
<p class="zd-col-16 item_value">{{ lx_used.total }}<span class="item_unit">个</span></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>
<div class="zd-row mgb8"> <div class="zd-row mgb8">
<p class="zd-col-8 item_label">已用货位</p> <p class="zd-col-8 item_label">{{$t('page.lxused')}}</p>
<p class="zd-col-16 item_value">{{ lx_used.used }}<span class="item_unit">个</span></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>
<div class="zd-row"> <div class="zd-row">
<p class="zd-col-8 item_label">空余货位</p> <p class="zd-col-8 item_label">{{$t('page.lxfree')}}</p>
<p class="zd-col-16 item_value">{{ lx_used.free }}<span class="item_unit">个</span></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> </div>
</div> </div>
@@ -39,31 +44,40 @@
<div class="absolute bg_j bg_j_2"></div> <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_3"></div>
<div class="absolute bg_j bg_j_4"></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 v-if="lx_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row flexstart mgb8"> <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="zd-col-20">
<div class="percent_line"> <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 class="percent_i" :style="{'width': lx_task[0].total !== 0 ? lx_task[0].box / lx_task[0].total * 100 + '%' : 0}"></div>
</div> </div>
<div class="zd-row"> <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].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>
</div> </div>
<div class="zd-row flexstart"> <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="zd-col-20">
<div class="percent_line percent_line_c"> <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 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>
<div class="zd-row"> <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].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> </div>
</div> </div>
@@ -76,7 +90,8 @@
<div class="absolute bg_j bg_j_2"></div> <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_3"></div>
<div class="absolute bg_j bg_j_4"></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="zd-row wraper_4">
<div class="box zd-col-8 mgr8"> <div class="box zd-col-8 mgr8">
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div> <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_2"></div>
<div class="absolute bg_j bg_j_3"></div> <div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></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 class="zd-row wraper_4">
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div> <div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
</div> </div>
@@ -111,7 +127,8 @@
</div> </div>
<div class="relative b_title"> <div class="relative b_title">
<span class="absolute sj_icon"></span> <span class="absolute sj_icon"></span>
<p>托盘库监控</p> <p>{{$t('page.tpkjk')}}</p>
<!-- <p>托盘库监控</p> -->
</div> </div>
<div class="zd-row wraper_1"> <div class="zd-row wraper_1">
<div class="box zd-col-7 mgr8"> <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_2"></div>
<div class="absolute bg_j bg_j_3"></div> <div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></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="zd-row wraper_4">
<div class="box percent_item"> <div class="box percent_item">
<p>{{ tp_used.percent }}</p> <p>{{ tp_used.percent }}</p>
</div> </div>
<div class="box zd-col-16 zd-row flexcol jccenter"> <div class="box zd-col-16 zd-row flexcol jccenter">
<div class="zd-row mgb8"> <div class="zd-row mgb8">
<p class="zd-col-8 item_label">总货位数</p> <p class="zd-col-8 item_label">{{$t('page.lxtotal')}}</p>
<p class="zd-col-16 item_value">{{ tp_used.total }}<span class="item_unit">个</span></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>
<div class="zd-row mgb8"> <div class="zd-row mgb8">
<p class="zd-col-8 item_label">已用货位</p> <p class="zd-col-8 item_label">{{$t('page.lxused')}}</p>
<p class="zd-col-16 item_value">{{ tp_used.used }}<span class="item_unit">个</span></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>
<div class="zd-row"> <div class="zd-row">
<p class="zd-col-8 item_label">空余货位</p> <p class="zd-col-8 item_label">{{$t('page.lxfree')}}</p>
<p class="zd-col-16 item_value">{{ tp_used.free }}<span class="item_unit">个</span></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> </div>
</div> </div>
@@ -146,31 +167,40 @@
<div class="absolute bg_j bg_j_2"></div> <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_3"></div>
<div class="absolute bg_j bg_j_4"></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 v-if="tp_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row flexstart mgb8"> <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="zd-col-20">
<div class="percent_line"> <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 class="percent_i" :style="{'width': tp_task[0].total !== 0 ? tp_task[0].box / tp_task[0].total * 100 + '100%' : 0}"></div>
</div> </div>
<div class="zd-row"> <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].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>
</div> </div>
<div class="zd-row flexstart"> <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="zd-col-20">
<div class="percent_line percent_line_c"> <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 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>
<div class="zd-row"> <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].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> </div>
</div> </div>
@@ -183,7 +213,8 @@
<div class="absolute bg_j bg_j_2"></div> <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_3"></div>
<div class="absolute bg_j bg_j_4"></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="zd-row wraper_4">
<div class="box zd-col-8 mgr8"> <div class="box zd-col-8 mgr8">
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div> <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_2"></div>
<div class="absolute bg_j bg_j_3"></div> <div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></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 class="zd-row wraper_4">
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div> <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
</div> </div>
@@ -229,6 +261,7 @@ export default {
}, },
data () { data () {
return { return {
htmlFontSize: 0,
interTime: this.$store.getters.setTime, interTime: this.$store.getters.setTime,
timer: null, timer: null,
materList: [], materList: [],
@@ -253,6 +286,7 @@ export default {
this.refresh() this.refresh()
}, },
mounted () { mounted () {
// window.localStorage.setItem('lang', 'es')
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1) this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2) this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3) this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
@@ -303,6 +337,10 @@ export default {
this.setEchart3() this.setEchart3()
this.setEchart4() this.setEchart4()
}, },
adjustFontSize (size) {
let fontSize = size * (window.innerWidth / 960)
return fontSize
},
setEchart1 () { setEchart1 () {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'] 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'] 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 el.name = el.name
}) })
let total = this.lx_inventory[0].total let total = this.lx_inventory[0].total
let zs = this.$t('page.total1')
let option = { let option = {
color: colors, color: colors,
grid: { grid: {
@@ -325,20 +364,21 @@ export default {
title: { title: {
left: '50%', left: '50%',
top: '50%', top: '50%',
text: `{a|总数}\n{b|${total}}`, text: `{a|${zs}}\n{b|${total}}`,
// text: `{a|总数}\n{b|${total}}`,
textAlign: 'center', textAlign: 'center',
textVerticalAlign: 'middle', textVerticalAlign: 'middle',
padding: 0, padding: 0,
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: 12, fontSize: this.adjustFontSize(12),
lineHeight: 18, lineHeight: this.adjustFontSize(18),
color: '#A8C3E6' color: '#A8C3E6'
}, },
b: { b: {
fontSize: 17, fontSize: this.adjustFontSize(17),
lineHeight: 17, lineHeight: this.adjustFontSize(17),
fontWeight: 'bold', fontWeight: 'bold',
color: '#DBE7F6' color: '#DBE7F6'
} }
@@ -444,7 +484,7 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: 30, top: this.adjustFontSize(30),
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
@@ -456,13 +496,14 @@ export default {
right: '0', right: '0',
textStyle: { textStyle: {
color: '#9BB9DD', color: '#9BB9DD',
fontSize: 12, fontSize: this.adjustFontSize(12),
lineHeight: 16 lineHeight: this.adjustFontSize(16)
}, },
itemGap: 16, itemGap: this.adjustFontSize(16),
itemWidth: 8, itemWidth: this.adjustFontSize(8),
itemHeight: 8, itemHeight: this.adjustFontSize(8),
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}] 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: { xAxis: {
type: 'category', type: 'category',
@@ -480,8 +521,8 @@ export default {
interval: 0, interval: 0,
rotate: 45, rotate: 45,
color: '#7591B2', color: '#7591B2',
fontSize: 12, fontSize: this.adjustFontSize(12),
lineHeight: 12 lineHeight: this.adjustFontSize(12)
}, },
data: barName data: barName
}, },
@@ -497,7 +538,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#B5C5D4', color: '#B5C5D4',
fontSize: 12 fontSize: this.adjustFontSize(12)
}, },
splitLine: { splitLine: {
show: true, show: true,
@@ -510,7 +551,7 @@ export default {
}, },
series: [ series: [
{ {
name: '入库', name: this.$t('page.rk'),
type: 'line', type: 'line',
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
@@ -535,7 +576,7 @@ export default {
data: barData1 data: barData1
}, },
{ {
name: '出库', name: this.$t('page.ck'),
type: 'line', type: 'line',
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
@@ -573,6 +614,7 @@ export default {
el.name = el.name el.name = el.name
}) })
let total = this.tp_inventory[0].total let total = this.tp_inventory[0].total
let zs = this.$t('page.total1')
let option = { let option = {
color: colors, color: colors,
grid: { grid: {
@@ -585,20 +627,21 @@ export default {
title: { title: {
left: '50%', left: '50%',
top: '50%', top: '50%',
text: `{a|总数}\n{b|${total}}`, text: `{a|${zs}}\n{b|${total}}`,
// text: `{a|总数}\n{b|${total}}`,
textAlign: 'center', textAlign: 'center',
textVerticalAlign: 'middle', textVerticalAlign: 'middle',
padding: 0, padding: 0,
textStyle: { textStyle: {
rich: { rich: {
a: { a: {
fontSize: 12, fontSize: this.adjustFontSize(12),
lineHeight: 18, lineHeight: this.adjustFontSize(18),
color: '#A8C3E6' color: '#A8C3E6'
}, },
b: { b: {
fontSize: 17, fontSize: this.adjustFontSize(17),
lineHeight: 17, lineHeight: this.adjustFontSize(17),
fontWeight: 'bold', fontWeight: 'bold',
color: '#DBE7F6' color: '#DBE7F6'
} }
@@ -704,7 +747,7 @@ export default {
}) })
let option = { let option = {
grid: { grid: {
top: 30, top: this.adjustFontSize(30),
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
@@ -716,13 +759,14 @@ export default {
right: '0', right: '0',
textStyle: { textStyle: {
color: '#9BB9DD', color: '#9BB9DD',
fontSize: 12, fontSize: this.adjustFontSize(12),
lineHeight: 16 lineHeight: this.adjustFontSize(16)
}, },
itemGap: 16, itemGap: this.adjustFontSize(16),
itemWidth: 8, itemWidth: this.adjustFontSize(8),
itemHeight: 8, itemHeight: this.adjustFontSize(8),
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}] 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: { xAxis: {
type: 'category', type: 'category',
@@ -740,8 +784,8 @@ export default {
interval: 0, interval: 0,
rotate: 45, rotate: 45,
color: '#7591B2', color: '#7591B2',
fontSize: 12, fontSize: this.adjustFontSize(12),
lineHeight: 12 lineHeight: this.adjustFontSize(12)
}, },
data: barName data: barName
}, },
@@ -757,7 +801,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#B5C5D4', color: '#B5C5D4',
fontSize: 12 fontSize: this.adjustFontSize(12)
}, },
splitLine: { splitLine: {
show: true, show: true,
@@ -769,7 +813,8 @@ export default {
}, },
series: [ series: [
{ {
name: '入库', name: this.$t('page.rk'),
// name: '入库',
type: 'line', type: 'line',
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
@@ -794,7 +839,8 @@ export default {
data: barData1 data: barData1
}, },
{ {
name: '出库', name: this.$t('page.ck'),
// name: '出库',
type: 'line', type: 'line',
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
@@ -829,39 +875,39 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import './style.stylus' @import './style.stylus'
.body_container .body_container
padding-top 38px padding-top .38rem
.mgr8 .mgr8
margin-right 8px margin-right .08rem
.mgb8 .mgb8
margin-bottom 8px margin-bottom .08rem
.wraper_1 .wraper_1
width 100% width 100%
height calc(50% - 28px) height calc(50% - .28rem)
.wraper_2 .wraper_2
height calc(50% - 4px) height calc(50% - .04rem)
padding 4px 10px padding .04rem .1rem
background-color rgba(15, 45, 115, 60%) background-color rgba(15, 45, 115, 60%)
.wraper_3 .wraper_3
height 100% height 100%
.title .title
font-size 14px font-size .14rem
line-height 16px line-height .16rem
color #fff color #fff
.wraper_4 .wraper_4
width 100% width 100%
height calc(100% - 16px) height calc(100% - .16rem)
.percent_item .percent_item
width 76px width .76rem
background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
p p
font-size 12px font-size .12rem
line-height 76px line-height .76rem
color #fff color #fff
text-align center text-align center
.font_1 .font_1
font-size 13px font-size .13rem
.font_2 .font_2
font-size 12px font-size .12rem
text-align left text-align left
white-space nowrap white-space nowrap
.c_y .c_y

70
src/pages/modules/style.stylus
View File

@@ -1,5 +1,5 @@
.body_container .body_container
padding 56px 10px 10px 10px padding .56rem .1rem .1rem .1rem
overflow hidden overflow hidden
.n_wraper .n_wraper
width 100% width 100%
@@ -87,9 +87,9 @@
.item_unit .item_unit
font-size 16px font-size 16px
.item_label .item_label
width 85px width .85rem
font-size 13px font-size .13rem
line-height 13px line-height .13rem
color #d2eff8 color #d2eff8
text-align left text-align left
text-shadow: 0 0 1px #5bd0f5, text-shadow: 0 0 1px #5bd0f5,
@@ -97,17 +97,17 @@
0 0 1px #5bd0f5, 0 0 1px #5bd0f5,
0 0 1px #5bd0f5; 0 0 1px #5bd0f5;
.item_value .item_value
width calc(100% - 85px) width calc(100% - .85rem)
font-size 15px font-size .15rem
line-height 15px line-height .15rem
color #fff color #fff
font-weight 700 font-weight 700
text-align center text-align center
.item_unit .item_unit
font-size 12px font-size .12rem
color #fff color #fff
font-weight 400 font-weight 400
padding-left 5px padding-left .05rem
.item_value_input .item_value_input
width calc(100% - 85px) width calc(100% - 85px)
font-size 14px font-size 14px
@@ -140,44 +140,46 @@
font-size 20px font-size 20px
text-align center text-align center
.b_title .b_title
height 20px height .2rem
padding-left 20px padding-left .2rem
border-bottom 1px solid #0c99ac border-bottom 1px solid #0c99ac
margin-bottom 4px margin-bottom .04rem
p p
font-size 14px font-size .14rem
color #caffff color #caffff
line-height 20px line-height .2rem
.sj_icon .sj_icon
top 8px top .08rem
left 0 left 0
width 0 width 0
height 0 height 0
border-top 4px solid transparent border-top .04rem solid transparent
border-left 4px solid transparent border-left .04rem solid transparent
border-right 4px solid #00d6ff border-right .04rem solid #00d6ff
border-bottom 4px solid #00d6ff border-bottom .04rem solid #00d6ff
.pie_item_wrap .pie_item_wrap
&:nth-child(n+3) &:nth-child(n+3)
margin-top 10px margin-top 10px
.pie_legend_icon .pie_legend_icon
width 8px width .08rem
height 8px height .08rem
margin 0 auto margin 0 auto
border-radius 2px border-radius .02rem
.pie_legend_txt_1 .pie_legend_txt_1
font-size: 12px; font-size: .12rem;
line-height: 12px line-height: .12rem
color: #9BB9DD; color: #9BB9DD;
margin-bottom 4px margin-bottom .04rem
word-break: break-all;
overflow-wrap: break-word;
.pie_legend_txt_2 .pie_legend_txt_2
font-size 12px font-size .12rem
line-height: 14px line-height: .14rem
color: #fff color: #fff
margin-right 4px margin-right .04rem
.pie_legend_txt_3 .pie_legend_txt_3
font-size: 12px; font-size: .12rem
line-height: 12px line-height: .12rem
color: #9BB9DD; color: #9BB9DD;
opacity: 0.5; opacity: 0.5;
.bg_j .bg_j
@@ -260,14 +262,14 @@
&:nth-child(1) &:nth-child(1)
width 10% width 10%
.percent_line .percent_line
height 8px height .08rem
background-color rgba(35, 221, 103, .3) background-color rgba(35, 221, 103, .3)
border-radius 10px border-radius .1rem
margin-bottom 6px margin-bottom .06rem
.percent_i .percent_i
height 100% height 100%
background-color #23dd67 background-color #23dd67
border-radius 10px border-radius .1rem
.percent_line_c .percent_line_c
background-color rgba(0 118 242, .3) background-color rgba(0 118 242, .3)
.percent_i_c .percent_i_c

2
src/router/index.js
View File

@@ -13,7 +13,7 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
redirect: '/setup' redirect: '/index2'
}, },
{ {
path: '/setup', path: '/setup',

4
src/vuex/modules/com.js
View File

@@ -1,13 +1,13 @@
import * as types from '../types' import * as types from '../types'
import { getStore, setStore } from '@js/mUtils.js' 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通用配置 * App通用配置
*/ */
const state = { const state = {
baseUrl: getStore('baseUrl') || baseUrl, baseUrl: getStore('baseUrl') || baseUrl,
setTime: getStore('setTime') || 10000, setTime: getStore('setTime') || 5000,
pageNo: getStore('pageNo') || 1 pageNo: getStore('pageNo') || 1
} }

5
yarn.lock
View File

@@ -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" resolved "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"
integrity sha512-AA86yKZ5uOKz87/q1UpngEXhbRkaYg1b7HMMVRobNV1IVKqZe8oLIzo6iMocVwZXnYitlGwf2k4ZRLOZlS8oPQ== 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: vue-loader@^13.3.0:
version "13.7.3" version "13.7.3"
resolved "http://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f" resolved "http://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"