init i18n

src/i18n/en.js

@@ -0,0 +1,6 @@
+const t = {}
+
+t.loading = 'Loading...'
+t.createTime = 'Create Time'
+
+export default t

src/i18n/index.js

@@ -2,8 +2,9 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import Cookies from 'js-cookie'
 import zhCNLocale from 'element-ui/lib/locale/lang/zh-CN'
+import enLocale from 'element-ui/lib/locale/lang/en'
 import zhCN from './zh-CN'
-
+import en from './en'
 Vue.use(VueI18n)
 
 export const messages = {
@@ -11,11 +12,33 @@ export const messages = {
     '_lang': '简体中文',
     ...zhCN,
     ...zhCNLocale
+  },
+  'en': {
+    '_lang': 'English',
+    ...en,
+    ...enLocale
   }
 }
 
+export function getLanguage() {
+  const chooseLanguage = Cookies.get('language')
+  if (chooseLanguage) return chooseLanguage
+
+  // if has not choose language
+  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
+  const locales = Object.keys(messages)
+  for (const locale of locales) {
+    if (language.indexOf(locale) > -1) {
+      Cookies.set('language', locale)
+      return locale
+    }
+  }
+  Cookies.set('language', 'zh-CN')
+  return 'zh-CN'
+}
+
 export default new VueI18n({
   // locale: Cookies.get('language') || 'zh-CN',
-  locale: 'zh-CN', // 先默认中文
+  locale: getLanguage(), // 先默认中文
   messages
 })

src/i18n/zh-CN.js

@@ -1,6 +1,7 @@
 const t = {}
 
 t.loading = '加载中...'
+t.createTime = '添加时间'
 
 t.brand = {}
 t.brand.lg = '生产监控系统'

src/views/main-navbar.vue

@@ -1,18 +1,38 @@
 <template>
-	<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
+	<nav
+		class="aui-navbar"
+		:class="`aui-navbar--${$store.state.navbarLayoutType}`"
+	>
 		<div class="aui-navbar__header">
 			<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })">
-				<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a>
+				<a class="aui-navbar__brand-lg" href="javascript:;">{{
-				<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
+					$t('brand.lg')
+				}}</a>
+				<a class="aui-navbar__brand-mini" href="javascript:;">{{
+					$t('brand.mini')
+				}}</a>
 			</h1>
 		</div>
 		<div class="aui-navbar__body">
 			<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
-				<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold">
+				<el-menu-item
-					<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true"><use xlink:href="#icon-outdent"></use></svg>
+					index="1"
+					@click="$store.state.sidebarFold = !$store.state.sidebarFold"
+				>
+					<svg
+						class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
+						aria-hidden="true"
+					>
+						<use xlink:href="#icon-outdent"></use>
+					</svg>
 				</el-menu-item>
 				<el-menu-item index="2" @click="refresh()">
-					<svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
+					<svg
+						class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh"
+						aria-hidden="true"
+					>
+						<use xlink:href="#icon-sync"></use>
+					</svg>
 				</el-menu-item>
 			</el-menu>
 			<el-menu class="aui-navbar__menu" mode="horizontal">
@@ -26,8 +46,32 @@
 						<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#gitee"></use></svg>
 					</a>
 				</el-menu-item> -->
+				<el-menu-item index="3">
+					<el-dropdown
+						placement="bottom"
+						:show-timeout="0"
+						@command="handleCommand"
+					>
+						<span class="el-dropdown-link">
+							<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+								<use xlink:href="#icon-earth"></use>
+							</svg>
+							<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
+						</span>
+						<el-dropdown-menu slot="dropdown">
+							<el-dropdown-item :disabled="getLang() === 'zh-CN'" command="toCN"
+								>中文</el-dropdown-item
+							>
+							<el-dropdown-item :disabled="getLang() === 'en'" command="toEN"
+								>En</el-dropdown-item
+							>
+						</el-dropdown-menu>
+					</el-dropdown>
+				</el-menu-item>
 				<el-menu-item index="4" @click="fullscreenHandle()">
-					<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
+					<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
+						<use xlink:href="#icon-fullscreen"></use>
+					</svg>
 				</el-menu-item>
 				<el-menu-item index="5" class="aui-navbar__avatar">
 					<el-dropdown placement="bottom" :show-timeout="0">
@@ -37,18 +81,26 @@
 							<i class="el-icon-arrow-down"></i>
 						</span>
 						<el-dropdown-menu slot="dropdown">
-							<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
+							<el-dropdown-item @click.native="updatePasswordHandle()">{{
-							<el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
+								$t('updatePassword.title')
+							}}</el-dropdown-item>
+							<el-dropdown-item @click.native="logoutHandle()">{{
+								$t('logout')
+							}}</el-dropdown-item>
 						</el-dropdown-menu>
 					</el-dropdown>
 				</el-menu-item>
 			</el-menu>
 		</div>
 		<!-- 弹窗, 修改密码 -->
-		<update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
+		<update-password
+			v-if="updatePasswordVisible"
+			ref="updatePassword"
+		></update-password>
 	</nav>
 </template>
 <script>
+import Cookies from 'js-cookie'
 import screenfull from 'screenfull'
 import UpdatePassword from './main-navbar-update-password'
 import { clearLoginInfo } from '@/utils'
@@ -64,6 +116,24 @@ export default {
 		UpdatePassword
 	},
 	methods: {
+		// 获取当前语言环境
+		getLang() {
+			return Cookies.get('language')
+		},
+		// 切换语言环境
+		handleCommand(command) {
+			// 切换语言选项时，可能需要手动刷新页面
+			switch (command) {
+				case 'toCN':
+					this.$root.$i18n.locale = 'zh-CN'
+					break
+				case 'toEN':
+					console.log('root', this.$root.$i18n.locale)
+					this.$root.$i18n.locale = 'en'
+					location.reload()
+					break
+			}
+		},
 		// 全屏
 		fullscreenHandle() {
 			if (!screenfull.enabled) {
@@ -84,11 +154,15 @@ export default {
 		},
 		// 退出
 		logoutHandle() {
-			this.$confirm(this.$t('prompt.info', { handle: this.$t('logout') }), this.$t('prompt.title'), {
+			this.$confirm(
-				confirmButtonText: this.$t('confirm'),
+				this.$t('prompt.info', { handle: this.$t('logout') }),
-				cancelButtonText: this.$t('cancel'),
+				this.$t('prompt.title'),
-				type: 'warning'
+				{
-			})
+					confirmButtonText: this.$t('confirm'),
+					cancelButtonText: this.$t('cancel'),
+					type: 'warning'
+				}
+			)
 				.then(() => {
 					this.$http
 						.post(this.$http.adornUrl('/logout'))

src/views/modules/monitoring/equipment.vue

@@ -1,17 +1,36 @@
 <template>
 	<div class="mod-config">
-		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+		<el-form
+			:inline="true"
+			:model="dataForm"
+			@keyup.enter.native="getDataList()"
+		>
 			<el-form-item>
-				<el-input v-model="dataForm.key" placeholder="设备名称/设备编码" clearable></el-input>
+				<el-input
+					v-model="dataForm.key"
+					placeholder="设备名称/设备编码"
+					clearable
+				></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button @click="getDataList()">查询</el-button>
+				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
-				<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+				<el-button
+					v-if="$hasPermission('monitoring:equipment:save')"
+					type="primary"
+					@click="addOrUpdateHandle()"
+					>{{ $t('add') }}</el-button
+				>
 				<el-button @click="exportHandle()">导出</el-button>
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<base-table
+			:data="dataList"
+			:table-head-configs="tableConfigs"
+			:max-height="500"
+			@operate-event="handleOperations"
+			@refreshDataList="getDataList"
+		/>
 		<el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
@@ -22,11 +41,18 @@
 			layout="total, sizes, prev, pager, next, jumper"
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
+		<add-or-update
+			v-if="addOrUpdateVisible"
+			ref="addOrUpdate"
+			:configs="addOrUpdateConfigs"
+			@refreshDataList="getDataList"
+			@destory-dialog="addOrUpdateVisible = false"
+		/>
 	</div>
 </template>
 
 <script>
+import i18n from '@/i18n'
 import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
 // import AddOrUpdate from './equipment-add-or-update'
 import BaseTable from '@/components/base-table'
@@ -45,15 +71,31 @@ const tableConfigs = [
 		// 	}
 		// }
 	},
-	{ prop: 'createTime', name: '添加时间', filter: val => moment(val).format('YYYY-MM-DD HH:mm:ss') },
+	{
+		prop: 'createTime',
+		name: i18n.t('createTime'),
+		filter: val => moment(val).format('YYYY-MM-DD HH:mm:ss')
+	},
 	{ prop: 'name', name: '设备名称' },
 	{ prop: 'code', name: '设备编码' },
 	{ prop: 'equipmentTypeName', name: '设备类型' },
 	{ prop: 'groupName', name: '设备分组' },
 	{ prop: 'enName', name: '英文名称' },
 	{ prop: 'abbr', name: '缩写' },
-	{ prop: 'details', name: '详情', subcomponent: TableTextComponent, actionName: 'view-detail' },
+	{
-	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		prop: 'details',
+		name: '详情',
+		subcomponent: TableTextComponent,
+		actionName: 'view-detail'
+	},
+	{
+		prop: 'operations',
+		name: '操作',
+		fixed: 'right',
+		width: 180,
+		subcomponent: TableOperateComponent,
+		options: ['edit', 'delete']
+	}
 ]
 
 const addOrUpdateConfigs = {
@@ -64,8 +106,20 @@ const addOrUpdateConfigs = {
 		{ name: 'code', label: '设备编码' },
 		{ name: 'enName', label: '英文名称' },
 		{ name: 'abbr', label: '缩写' },
-		{ name: 'equipmentTypeId', label: '设备类型', required: true, type: 'select', options: [] },
+		{
-		{ name: 'groupId', label: '设备分组', required: true, type: 'select', options: [] },
+			name: 'equipmentTypeId',
+			label: '设备类型',
+			required: true,
+			type: 'select',
+			options: []
+		},
+		{
+			name: 'groupId',
+			label: '设备分组',
+			required: true,
+			type: 'select',
+			options: []
+		},
 		{
 			name: 'productionTime',
 			label: '生产日期',
@@ -92,8 +146,31 @@ const addOrUpdateConfigs = {
 				}
 			}
 		},
-		{ name: 'tvalue', label: '设备TT值', required: true, rules: [{ type: 'number', message: '请输入正确的浮点值', trigger: 'blur', transform: val => Number(val) }] },
+		{
-		{ name: 'processingTime', label: '单件产品加工时间(秒)', rules: [{ type: 'number', message: '请输入正确的数值', trigger: 'blur', transform: val => Number(val) }] },
+			name: 'tvalue',
+			label: '设备TT值',
+			required: true,
+			rules: [
+				{
+					type: 'number',
+					message: '请输入正确的浮点值',
+					trigger: 'blur',
+					transform: val => Number(val)
+				}
+			]
+		},
+		{
+			name: 'processingTime',
+			label: '单件产品加工时间(秒)',
+			rules: [
+				{
+					type: 'number',
+					message: '请输入正确的数值',
+					trigger: 'blur',
+					transform: val => Number(val)
+				}
+			]
+		},
 		{ name: 'manufacturer', label: '制造商' },
 		{ name: 'spec', label: '设备规格' },
 		{
@@ -163,17 +240,42 @@ const addOrUpdateConfigs = {
 			{ prop: 'createTime', name: '创建时间' },
 			{ prop: 'attrName', name: '属性名称', formField: true },
 			{ prop: 'attrValue', name: '属性值', formField: true },
-			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+			{
+				prop: 'operations',
+				name: '操作',
+				fixed: 'right',
+				width: 180,
+				subcomponent: TableOperateComponent,
+				options: ['edit', 'delete']
+			}
 		]
 	},
 	operations: [
 		{ name: 'cancel', showAlways: true },
-		{ name: 'save', url: '/monitoring/equipment', permission: '', showOnEdit: false },
+		{
-		{ name: 'update', url: '/monitoring/equipment', permission: '', showOnEdit: true }
+			name: 'save',
+			url: '/monitoring/equipment',
+			permission: '',
+			showOnEdit: false
+		},
+		{
+			name: 'update',
+			url: '/monitoring/equipment',
+			permission: '',
+			showOnEdit: true
+		}
 	]
 }
 
+const i18nLocal = {
+	messages: {
+		'en': { search: 'Search', add: 'Add', createTime: 'create time' },
+		'zh-CN': { search: '查询', add: '新建', createTime: '创建时间' }
+	}
+}
+
 export default {
+	i18n: i18nLocal,
 	data() {
 		return {
 			tableConfigs,
@@ -212,8 +314,14 @@ export default {
 					// key: this.dataForm.key
 				})
 			}).then(({ data }) => {
-				const eqTypeConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentTypeId')
+				const eqTypeConfig = this.addOrUpdateConfigs.fields.find(
-				eqTypeConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+					item => item.name === 'equipmentTypeId'
+				)
+				eqTypeConfig.options =
+					data.data?.list?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
 			})
 		},
 		// 获取设备分组列表
@@ -227,8 +335,14 @@ export default {
 					// key: this.dataForm.key
 				})
 			}).then(({ data }) => {
-				const groupConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'groupId')
+				const groupConfig = this.addOrUpdateConfigs.fields.find(
-				groupConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+					item => item.name === 'groupId'
+				)
+				groupConfig.options =
+					data.data?.list?.map(item => ({
+						value: item.id,
+						label: item.name
+					})) || []
 			})
 		},
 		// 获取数据列表
@@ -289,13 +403,19 @@ export default {
 		},
 		exportHandle() {
 			// this.$http.get(this.$http.adornUrl('/monitoring/equipment/export')).then(({ data: res }) => {
-			this.$http({ url: this.$http.adornUrl('/monitoring/equipment/export'), method: 'get', responseType: 'blob' }).then(res => {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/export'),
+				method: 'get',
+				responseType: 'blob'
+			}).then(res => {
 				let fileName = 'equipment-list.xls'
 				if (res.headers['content-disposition']) {
 					const contentDisposition = res.headers['content-disposition']
-					fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
+					fileName = contentDisposition.slice(
+						contentDisposition.indexOf('filename=') + 9
+					)
 				}
-				
+
 				fileName = decodeURIComponent(fileName)
 
 				const blob = new Blob([res.data])
@@ -335,11 +455,15 @@ export default {
 				: this.dataListSelections.map(item => {
 						return item.id
 				  })
-			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+			this.$confirm(
-				confirmButtonText: '确定',
+				`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
-				cancelButtonText: '取消',
+				'提示',
-				type: 'warning'
+				{
-			}).then(() => {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}
+			).then(() => {
 				this.$http({
 					url: this.$http.adornUrl('/monitoring/equipment'),
 					method: 'delete',