diff --git a/package-lock.json b/package-lock.json index 624a9267..b5c5b40d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "videojs-contrib-hls": "^5.15.0", "videojs-contrib-hls.js": "^3.2.0", "vue": "^2.7.14", + "vue-i18n": "^8.27.0", "vue-router": "^3.5.1", "vue-seamless-scroll": "^1.1.23", "vuex": "^3.6.2", @@ -11017,6 +11018,12 @@ "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", "dev": true }, + "node_modules/vue-i18n": { + "version": "8.27.0", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.27.0.tgz", + "integrity": "sha512-SX35iJHL5PJ4Gfh0Mo/q0shyHiI2V6Zkh51c+k8E9O1RKv5BQyYrCxRzpvPrsIOJEnLaeiovet3dsUB0e/kDzw==", + "deprecated": "Vue I18n v8.x has reached EOL and is no longer actively maintained. About maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html" + }, "node_modules/vue-loader": { "version": "17.2.2", "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.2.2.tgz", diff --git a/package.json b/package.json index bedcb262..546f1872 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "videojs-contrib-hls": "^5.15.0", "videojs-contrib-hls.js": "^3.2.0", "vue": "^2.7.14", + "vue-i18n": "^8.27.0", "vue-router": "^3.5.1", "vue-seamless-scroll": "^1.1.23", "vuex": "^3.6.2", diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 95308729..6f8c7f82 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -385,14 +385,22 @@ textarea { margin-right: 5px; } +#app { + background-image: url(../image/index-background.png); + background-size: cover; + background-position: center bottom; + background-repeat: no-repeat; +} + .index { width: 100%; height: 100%; min-height: 900px; overflow: auto; - background: url(../image/index-background.png) no-repeat; + background-image: url(../image/index-background.png); background-size: cover; - background-position: center top; + background-position: center -100px; + background-repeat: no-repeat; color: #fff; } @@ -416,6 +424,10 @@ textarea { display: flex; align-items: center; justify-content: space-between; + background-image: url(../image/index-background.png); + background-size: 100% 1080px; + background-position: center top; + background-repeat: no-repeat; } .index .header .header-left { @@ -526,7 +538,7 @@ textarea { } .index .header .header-right { - width: 260px; + width: 300px; display: flex; align-items: center; padding-right: 20px; @@ -1960,7 +1972,7 @@ textarea { } .login .login-view .save > div { - width: 150px; + width: 300px; display: flex; font-size: 18px; font-family: Alibaba PuHuiTi; diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index ce15e806..a70b6b84 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -415,15 +415,21 @@ textarea { } } } - +#app{ + background-image: url(../image/index-background.png); + background-size:cover; + background-position: center bottom; + background-repeat: no-repeat; +} .index { width: 100%; height: 100%; min-height: 900px; overflow: auto; - background: url(../image/index-background.png) no-repeat; + background-image: url(../image/index-background.png); background-size: cover; - background-position: center top; + background-position: center -100px; + background-repeat: no-repeat; color: #fff; @@ -447,7 +453,10 @@ textarea { display: flex; align-items: center; justify-content: space-between; - + background-image: url(../image/index-background.png); + background-size: 100% 1080px; + background-position: center top; + background-repeat: no-repeat; .header-left { position: relative; width: 373px; @@ -558,7 +567,7 @@ textarea { } .header-right { - width: 260px; + width: 300px; display: flex; align-items: center; padding-right: 20px; @@ -2084,7 +2093,7 @@ textarea { width: 450px; >div { - width: 150px; + width: 300px; display: flex; font-size: 18px; font-family: Alibaba PuHuiTi; diff --git a/src/assets/js/charts.js b/src/assets/js/charts.js index 5e46403e..9ab53171 100644 --- a/src/assets/js/charts.js +++ b/src/assets/js/charts.js @@ -574,7 +574,7 @@ export function realTimeLine1(id, data,pageId) { }); } // 大数据页面金山吕港草莓显示 -export function realTimeLine2(id, data,pageId) { +export function realTimeLine2(id, data,pageId,legend) { var chartDom = document.getElementById(id); var myChart = echarts.init(chartDom); chartDom.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题 @@ -661,6 +661,7 @@ export function realTimeLine2(id, data,pageId) { extraCssText: 'z-index: 9999;', // 设置 z-index }, legend: { + show:legend===0?false:true, icon: "circle", itemWidth: 10, itemHeight: 10, @@ -685,7 +686,8 @@ export function realTimeLine2(id, data,pageId) { grid: { left: "8%", right: "10%", - bottom: "13%", + bottom: "5%", + top:legend===0?'5%':60, containLabel: true, }, xAxis: [ diff --git a/src/i18n/index.js b/src/i18n/index.js new file mode 100644 index 00000000..445fe266 --- /dev/null +++ b/src/i18n/index.js @@ -0,0 +1,25 @@ + +import Vue from "vue"; +import VueI18n from "vue-i18n"; +import zh from "element-ui/lib/locale/lang/zh-CN"; // element-ui的中文包 +import en from "element-ui/lib/locale/lang/en"; // element-ui的英语包 +import { getLanguage, DEFAULT_LANGUAGE } from "../utils/language"; + +Vue.use(VueI18n); // 全局挂载 +// 引入i18n +const i18n = new VueI18n({ + locale: getLanguage(), // 从localStorage中获取 默认中文 + fallbackLocale: DEFAULT_LANGUAGE, // 没有找到匹配的语言将回退到中文 + messages: { + zh: { + ...require("./lang/zh"), // 系统中文语言包模块 + ...zh, + }, // 中文语言包 + en: { + ...require("./lang/en"), // 系统英语语言包模块 + ...en, + }, // 英语语言包 + }, +}); + +export default i18n; diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js new file mode 100644 index 00000000..70a4f6ef --- /dev/null +++ b/src/i18n/lang/en.js @@ -0,0 +1,69 @@ +module.exports = { + login: { + title: "Login Form", + login: "Login", + username: "Username", + password: "Password", + rememberPassword: 'Remember password', + loggingIn: "Logging in...", + usernamePlaceholder: "Please enter username", + passwordPlaceholder: "Please enter password", + loginSuccess: "Login Success", + }, + index: { + // header + realTimeData: "Realtime", + setParams: "Params", + galleryData: "Gallery", + videoMonitor: "Monitor", + historyData: "History", + dataAnalysis: "Analytics", + management: "Admin", + bigData: "Dashboard", + qrTrace: "Trace" , + + // leftMenu + home: "Home", + greenhouse: "Greenhouse", + fertigation: "Fertigation", + smartIrrigation: "Smart Irrigation", + dataCollector: "Data Collector", + weatherStation: "Agro-Weather Station", + pestMonitor: "Pest Monitoring", + + // management + userMgmt: "User Management", + adminMgmt: "Admin Management", + deviceStatusConfig: "Device Status Settings", + deviceSetConfig: "Device Parameter Settings", + deviceInfoMgmt: "Device Management", + weatherBinding: "Weather Data Binding", + bigDataDevice: "Big Data Devices", + mobileControl: "Mobile Control", + userControl: "User Control", + deviceControl: "Device Management", + websiteBanner: "Website Banners", + websiteProducts: "Website Products", + websiteCases: "Case Studies", + companyProfile: "Company Profile", + websiteNews: "News Management", + + // status + online: "Online", + offline: "Offline", + + // system + welcome: "Welcome, ", + noPermission: "No access permission!", + developing: "Page under development", + noPageForDevice: "Not available for {device}", + logoutSuccess: "Logout successful", + + // devices + greenhouse: "Greenhouse", + fertigationMachine: "Fertigation Machine", + weatherStation: "Weather Station", + dataCollector: "Data Collector", + + } +}; diff --git a/src/i18n/lang/zh.js b/src/i18n/lang/zh.js new file mode 100644 index 00000000..91bd0aa8 --- /dev/null +++ b/src/i18n/lang/zh.js @@ -0,0 +1,67 @@ +module.exports = { + login: { + title: "用户登录", + login: "登录", + username: "用户名", + password: "密码", + rememberPassword: '记住密码', + loggingIn: "登录中", + usernamePlaceholder: "请输入用户名", + passwordPlaceholder: "请输入密码", + loginSuccess: "登录成功", + }, + index: { + // header + realTimeData: "实时数据", + setParams: "设定值参数", + galleryData: "图库数据", + videoMonitor: "视频监控", + historyData: "历史数据", + dataAnalysis: "数据分析", + management: "管理", + bigData: "大数据", + qrTrace: "二维码追溯", + + // leftMenu + home: "首页", + greenhouse: "温室", + fertigation: "施肥机", + smartIrrigation: "智能灌溉", + dataCollector: "数据采集器", + weatherStation: "生态气象站", + pestMonitor: "虫情", + + // management + userMgmt: "用户管理", + adminMgmt: "管理员管理", + deviceStatusConfig: "控制器设备状态值设置", + deviceSetConfig: "控制器设备设定值设置", + deviceInfoMgmt: "设备信息管理", + weatherBinding: "设备绑定气象站数据", + bigDataDevice: "大数据设备信息", + mobileControl: "手机控制模块信息", + userControl: "用户信息管理", + deviceControl: "设备管理", + websiteBanner: "官网顶部轮播图管理", + websiteProducts: "官网产品管理", + websiteCases: "官网案例管理", + companyProfile: "官网公司简介", + websiteNews: "官网新闻管理", + + // status + online: "在线", + offline: "离线", + + // system + welcome: "欢迎，", + noPermission: "您当前没有权限查看!", + developing: "当前页面正在努力开发中", + noPageForDevice: "{device}无该页面", + logoutSuccess: "退出登录成功", + // devices + greenhouse: "温室", + fertigationMachine: "施肥机", + weatherStation: "气象站", + dataCollector: "数据采集器" + } +}; diff --git a/src/main.js b/src/main.js index 9282955b..f4fa026d 100644 --- a/src/main.js +++ b/src/main.js @@ -18,6 +18,11 @@ Vue.use(ElementUI); import 'video.js/dist/video-js.css'; // 引入video.js的样式 import 'video.js'; import 'videojs-contrib-hls'; // 引入支持HLS的插件 +import i18n from "./i18n/index"; // 国际化模块 +// element-ui的国际化 +Vue.use(ElementUI, { + i18n: (key, value) => i18n.t(key, value), +}); new Vue({ router, store, @@ -25,4 +30,5 @@ new Vue({ beforeCreate(){ Vue.prototype.$bus=this }, + i18n, }).$mount('#app') diff --git a/src/utils/language.js b/src/utils/language.js new file mode 100644 index 00000000..98bb9041 --- /dev/null +++ b/src/utils/language.js @@ -0,0 +1,54 @@ + +// 语言选项缓存的key +const CACHE_KEY = "local"; + +// 缓存语言类型 +const SET_CACHE_LANGUAGE = (language) => { + localStorage.setItem(CACHE_KEY, language); +}; + +// 读取语言类型 +const GET_CACHE_LANGUAGE = () => { + return localStorage.getItem(CACHE_KEY); +}; + +// 默认语言选项 +export const DEFAULT_LANGUAGE = "zh"; + +// 可选语言列表 +export let languageOption = [ + { label: "中文", value: "zh" }, + { label: "英文", value: "en" }, +]; + +/** + * @desc 获取网站语言 + * @return {string} 语言类型 + */ +export const getLanguage = () => { + const { language } = navigator; + const lang = language && language.split("-")[0]; + + const isValidLanguage = languageOption.some((s) => s.value === lang); + const browserLanguage = isValidLanguage ? lang : DEFAULT_LANGUAGE; + + // TODO: 已设置vue-i18n默认值和兜底都是zh 所以这里没有缓存zh 可自行按需求缓存 + return GET_CACHE_LANGUAGE() || browserLanguage; +}; + +/** + * @param {string} language - 语言类型: en、ch + * @param {object} vm - 当前vue实例指向 + * @desc 改变网站语言 + * @example + * ```js + * changeLanguage("en",this); + * ``` + */ +export const changeLanguage = (language, vm) => { + if (!vm) { + throw "缺少 vm 实例入参"; + } + vm.$i18n.locale = language; + SET_CACHE_LANGUAGE(language); +}; diff --git a/src/views/index.vue b/src/views/index.vue index b463dab6..e1ecb012 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -23,10 +23,15 @@
-
欢迎，{{ userInfo.nickName }} +
{{$t('index.welcome')}}{{ userInfo.nickName }}
{{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}
+
@@ -44,7 +49,7 @@ v-for="item1, index1 in item.list" :key="index1">{{ item1.deviceTypeName }}
{{ - item1.deviceState == 0 ? '离线' : '在线' }}
+ item1.deviceState == 0 ? $t('index.offline') : $t('index.online') }} @@ -88,29 +93,17 @@