id9大数据页面修改/加入i18n翻译
This commit is contained in:
parent
f56010172c
commit
9763b320eb
7
package-lock.json
generated
7
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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: [
|
||||
|
||||
25
src/i18n/index.js
Normal file
25
src/i18n/index.js
Normal file
@ -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;
|
||||
69
src/i18n/lang/en.js
Normal file
69
src/i18n/lang/en.js
Normal file
@ -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",
|
||||
|
||||
}
|
||||
};
|
||||
67
src/i18n/lang/zh.js
Normal file
67
src/i18n/lang/zh.js
Normal file
@ -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: "数据采集器"
|
||||
}
|
||||
};
|
||||
@ -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')
|
||||
|
||||
54
src/utils/language.js
Normal file
54
src/utils/language.js
Normal file
@ -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);
|
||||
};
|
||||
@ -23,10 +23,15 @@
|
||||
<div class="header-right" v-if="userInfo">
|
||||
<img src="../assets/image/avatar.png" alt="">
|
||||
<div class="user-data">
|
||||
<div class="name">欢迎，{{ userInfo.nickName }}
|
||||
<div class="name">{{$t('index.welcome')}}{{ userInfo.nickName }}
|
||||
</div>
|
||||
<div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
|
||||
</div>
|
||||
<!-- <el-button
|
||||
@click="changeLanguage()"
|
||||
>
|
||||
{{ currentLanguage === 'zh' ? 'EN' : '中' }}
|
||||
</el-button> -->
|
||||
<div class="login-out" @click="loginOut"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,7 +49,7 @@
|
||||
v-for="item1, index1 in item.list" :key="index1">{{ item1.deviceTypeName }} <div
|
||||
class="status" :class="item1.deviceState == 0 ? 'outline' : 'online'"
|
||||
v-if="item1.deviceState >= 0 && item1.deviceState">{{
|
||||
item1.deviceState == 0 ? '离线' : '在线' }}</div>
|
||||
item1.deviceState == 0 ? $t('index.offline') : $t('index.online') }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
@ -88,29 +93,17 @@
|
||||
|
||||
<script>
|
||||
import { getnowtime } from '../assets/js/nowTime'
|
||||
//切换中英文
|
||||
import { changeLanguage, getLanguage } from '@/utils/language'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
currentLanguage: getLanguage(),//切换中英文
|
||||
time: null,//当前时间
|
||||
headerActive: 0,
|
||||
headerList: [
|
||||
{ name: '实时数据', router: 'realTime', routerList: ['realTime'], img: require('../assets/image/header-img1.png') },
|
||||
// { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
|
||||
{ name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'status', 'exitSettings', 'skylight', 'systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'alarmSettings', 'synthesis-con', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet",], img: require('../assets/image/header-img0.png') },
|
||||
{ name: '图库数据', router: 'imageData', routerList: ['imageData'], img: require('../assets/image/header-img1.png') },
|
||||
{ name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
|
||||
// history history
|
||||
{ name: '历史数据', router: 'historyData', index: 1, routerList: ['historyData'], img: require('../assets/image/header-img3.png') },
|
||||
//dataAnalysis dataAnalysis
|
||||
{ name: '数据分析', router: 'dataAnalysis', index: 1, routerList: ['dataAnalysis'], img: require('../assets/image/header-img4.png') },
|
||||
// { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
|
||||
//systemManage systemManage
|
||||
// manage
|
||||
{ name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteDetail','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
|
||||
|
||||
{ name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
|
||||
],
|
||||
|
||||
activeNames: [3],
|
||||
leftList: [
|
||||
@ -163,6 +156,27 @@ export default {
|
||||
mainData:null,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
headerList(){
|
||||
return [
|
||||
{ name: this.$t('index.realTimeData'), router: 'realTime', routerList: ['realTime'], img: require('../assets/image/header-img1.png') },
|
||||
// { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
|
||||
{ name:this.$t('index.setParams') , router: 'status', index: 1, routerList: ['formula', 'status', 'exitSettings', 'skylight', 'systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'alarmSettings', 'synthesis-con', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet",], img: require('../assets/image/header-img0.png') },
|
||||
{ name:this.$t('index.galleryData'), router: 'imageData', routerList: ['imageData'], img: require('../assets/image/header-img1.png') },
|
||||
{ name:this.$t('index.videoMonitor'), router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
|
||||
// history history
|
||||
{ name:this.$t('index.historyData'), router: 'historyData', index: 1, routerList: ['historyData'], img: require('../assets/image/header-img3.png') },
|
||||
//dataAnalysis dataAnalysis
|
||||
{ name:this.$t('index.dataAnalysis'), router: 'dataAnalysis', index: 1, routerList: ['dataAnalysis'], img: require('../assets/image/header-img4.png') },
|
||||
// { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
|
||||
//systemManage systemManage
|
||||
// manage
|
||||
{ name:this.$t('index.management'), router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteDetail','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
|
||||
|
||||
{ name:this.$t('index.bigData') , router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"$route"(newName, oldName) {
|
||||
this.gerRouter();
|
||||
@ -732,6 +746,13 @@ var iccidList=[]
|
||||
that.time = getnowtime()
|
||||
}, 1000);
|
||||
},
|
||||
changeLanguage() {
|
||||
const newLang = this.currentLanguage === 'zh' ? 'en' : 'zh'
|
||||
changeLanguage(newLang, this)
|
||||
this.$forceUpdate()
|
||||
this.currentLanguage = newLang
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-header">
|
||||
<!-- <div class="login-header">
|
||||
<img src="../assets/image/logo.png" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="login-view">
|
||||
<div class="login-title">
|
||||
<img src="../assets/image/login-icon.png" alt="" />
|
||||
<span>用户登录</span>
|
||||
<!-- <span>用户登录</span> -->
|
||||
|
||||
<span>{{ $t("login.title") }}</span>
|
||||
</div>
|
||||
<div class="login-input username" :class="usernameAct ? 'active' : ''">
|
||||
<img src="../assets/image/username.png" alt="" />
|
||||
@ -15,7 +17,7 @@
|
||||
@focus="usernameAct = true"
|
||||
@blur="usernameAct = false"
|
||||
type="text"
|
||||
placeholder="用户名"
|
||||
:placeholder="$t('login.username')"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-input password" :class="passwordAct ? 'active' : ''">
|
||||
@ -25,20 +27,22 @@
|
||||
@focus="passwordAct = true"
|
||||
@blur="passwordAct = false"
|
||||
type="password"
|
||||
placeholder="密 码"
|
||||
:placeholder="$t('login.password')"
|
||||
/>
|
||||
</div>
|
||||
<div class="save" @click="save = !save">
|
||||
<div>
|
||||
<div><i v-if="save" class="el-icon-check"></i></div>
|
||||
记住密码
|
||||
{{$t("login.rememberPassword")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-btn" @click="login">登 录</div>
|
||||
<div class="login-btn" @click="login">{{$t("login.login")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
//切换中英文
|
||||
import { changeLanguage, getLanguage } from '@/utils/language'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -49,6 +53,8 @@ export default {
|
||||
username: "",
|
||||
loading:null,
|
||||
isLoad:false,
|
||||
|
||||
currentLanguage: getLanguage()//切换中英文
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -69,12 +75,18 @@ export default {
|
||||
window.removeEventListener('keyup', this.handleKeyUp);
|
||||
},
|
||||
methods: {
|
||||
changeLanguage() {
|
||||
const newLang = this.currentLanguage === 'zh' ? 'en' : 'zh'
|
||||
changeLanguage(newLang, this)
|
||||
this.currentLanguage = newLang
|
||||
},
|
||||
|
||||
handleKeyUp() {
|
||||
if (event.key === 'Enter'&&this.isLoad==false) {
|
||||
this.isLoad=true
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: '登录中',
|
||||
text: this.$t("login.loggingIn"),
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
@ -97,18 +109,20 @@ export default {
|
||||
var store = this.$store.state;
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: '登录中',
|
||||
text: this.$t("login.loggingIn"),
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
// "username": "xiaomeng",
|
||||
// "password": "lihe12345"
|
||||
if (!this.username) {
|
||||
this.$message.error("用户名未填写");
|
||||
this.$message.error(this.$t("login.usernamePlaceholder"));
|
||||
this.loading.close()
|
||||
return;
|
||||
}
|
||||
if (!this.password) {
|
||||
this.$message.error("密码未填写");
|
||||
this.$message.error(this.$t("login.passwordPlaceholder"));
|
||||
this.loading.close()
|
||||
return;
|
||||
}
|
||||
|
||||
@ -132,9 +146,10 @@ export default {
|
||||
}
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: "登陆成功",
|
||||
message: this.$t("login.loginSuccess"),
|
||||
type: "success",
|
||||
});
|
||||
this.loading.close()
|
||||
store.equipmentIndex = 1;
|
||||
localStorage.setItem("token", res.data.data.token);
|
||||
localStorage.setItem("userInfo", JSON.stringify(res.data.data));
|
||||
|
||||
@ -40,9 +40,9 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left" v-show="limitUserId != 5">
|
||||
<div class="weatherStation" v-show="limitUserId != 12"></div>
|
||||
<div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>
|
||||
|
||||
<div class="weather" v-show="limitUserId != 12">
|
||||
<div class="weather" v-if="limitUserId != 12&&limitUserId != 9">
|
||||
<div>
|
||||
<marquee behavior="" direction="" scrollamount="3">
|
||||
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
|
||||
@ -58,7 +58,8 @@
|
||||
</div>
|
||||
|
||||
<div class="weather_echart" id="weather_echart" v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></div>
|
||||
<div class="weather_echart" v-if="limitUserId==9">
|
||||
<div class="e_title" v-if="limitUserId == 9">作物模型</div>
|
||||
<div class="weather_echart weather_img" v-if="limitUserId==9">
|
||||
<img class="img" src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E8%A5%BF%E7%BA%A2%E6%9F%BF%E7%94%9F%E9%95%BF%E5%9B%BE.gif" alt="">
|
||||
</div>
|
||||
<div class="e_title" v-show="limitUserId == 12">实时数据</div>
|
||||
@ -267,12 +268,47 @@
|
||||
<!-- 甘井设施农业大数据云平台 -->
|
||||
<div class="right" v-else-if="limitUserId == 9">
|
||||
<div class="liveVideo"></div>
|
||||
<div class="liveVideo_content">
|
||||
|
||||
<div class="liveVideo_content">
|
||||
<div class="swiper-container mySwiper_video">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
|
||||
<div class="monitor" :id="'monitor' + item.number">
|
||||
<div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
|
||||
</div>
|
||||
<div class="c_bottom">{{ item.deviceTypeName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next swiper-button-next_video">
|
||||
<img src="../../assets/img/right_video.png" alt="" />
|
||||
</div>
|
||||
<div class="swiper-button-prev swiper-button-prev_video">
|
||||
<img src="../../assets/img/left_video.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weather" v-if="limitUserId == 9">
|
||||
<div>
|
||||
<marquee behavior="" direction="" scrollamount="3">
|
||||
<div class="item" v-for="(item, index) in weatherDataList" :key="index">
|
||||
<img :src="require(`../../assets/image/real-time-${item.formula}.png`)
|
||||
" alt="" />
|
||||
<span>{{ item.environmentDataId }} : </span>
|
||||
<span>{{
|
||||
item.environmentData + getTypeList(item.formula)
|
||||
}}</span>
|
||||
</div>
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e_title">温室实时数据</div>
|
||||
<div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
|
||||
<div class="e_title">薄膜温室番茄</div>
|
||||
|
||||
<div class="liveVideo_content liveVideo_content_9">
|
||||
<video class="video" controls muted loop autoplay src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E7%95%AA%E8%8C%84%E7%94%9F%E9%95%BF%E8%A7%86%E9%A2%91.mp4"></video>
|
||||
</div>
|
||||
|
||||
<div class="e_title">温室实时数据</div>
|
||||
<div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
|
||||
</div>
|
||||
<div class="right" v-else>
|
||||
<!-- 监控 -->
|
||||
@ -826,7 +862,7 @@ export default {
|
||||
this.api.getControlFsdata(data1).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
var chartsData = res.data.data
|
||||
realTimeLine2('realTime-line', chartsData, data1)
|
||||
realTimeLine2('realTime-line', chartsData, data1,0)
|
||||
} else {
|
||||
// this.$message.error(res.data.msg);
|
||||
}
|
||||
@ -1037,11 +1073,12 @@ export default {
|
||||
res.data.data.forEach((item, index) => {
|
||||
//规定 指定id获取监控
|
||||
//规定 id为1(丽水) 并且使用第一个设备ID的监控
|
||||
// item.deviceId == 2024070113400048 甘井设施农业大数据云平台监控
|
||||
// 甘井设施农业大数据云平台监控
|
||||
if (
|
||||
item.cameraSerialNumber != null &&
|
||||
(item.deviceId == 2023042214250027 ||
|
||||
item.deviceId == 2023120613270115 ||
|
||||
item.deviceId == 2024070113400047 ||
|
||||
item.deviceId == 2023042214250017||
|
||||
item.deviceId == 2023120613270053|| (this.limitUserId==1&&index==0)
|
||||
)
|
||||
@ -2182,42 +2219,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.66rem;
|
||||
|
||||
.e_title {
|
||||
width: 3.98rem;
|
||||
height: 0.19rem;
|
||||
background: url("../../assets/img/environmentData_bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.18rem;
|
||||
font-family: AlibabaPuHuiTiM;
|
||||
font-weight: 500;
|
||||
color: #83ccff;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.32rem;
|
||||
line-height: 0.19rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 4rem;
|
||||
height: calc(100% - 0.66rem);
|
||||
box-sizing: border-box;
|
||||
// padding-top: 0.56rem;
|
||||
position: relative;
|
||||
// top: 0.56rem;
|
||||
// left: 0.66rem;
|
||||
z-index: 999;
|
||||
.realTime-line{
|
||||
width: 100%;
|
||||
height: calc((100% - 3.5rem) / 2);
|
||||
}
|
||||
.weatherStation {
|
||||
width: 4rem;
|
||||
height: 0.43rem;
|
||||
background: url("../../assets/img/weatherStation.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.weather {
|
||||
.weather {
|
||||
width: 3.84rem;
|
||||
height: 0.34rem;
|
||||
|
||||
@ -2269,10 +2271,48 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.e_title {
|
||||
width: 3.98rem;
|
||||
height: 0.19rem;
|
||||
background: url("../../assets/img/environmentData_bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 0.18rem;
|
||||
font-family: AlibabaPuHuiTiM;
|
||||
font-weight: 500;
|
||||
color: #83ccff;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.32rem;
|
||||
line-height: 0.19rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 4rem;
|
||||
height: calc(100% - 0.66rem);
|
||||
box-sizing: border-box;
|
||||
// padding-top: 0.56rem;
|
||||
position: relative;
|
||||
// top: 0.56rem;
|
||||
// left: 0.66rem;
|
||||
z-index: 999;
|
||||
.realTime-line{
|
||||
width: 100%;
|
||||
height: calc((100% - 3.5rem) / 2);
|
||||
}
|
||||
.weatherStation {
|
||||
width: 4rem;
|
||||
height: 0.43rem;
|
||||
background: url("../../assets/img/weatherStation.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.weather_echart {
|
||||
width: 100%;
|
||||
height: calc((100% - 4.04rem) / 2);
|
||||
&.weather_img{
|
||||
height: calc((100% - 4.04rem) / 2 + 0.5rem);
|
||||
}
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -3308,7 +3348,7 @@ export default {
|
||||
// right: 0.66rem;
|
||||
z-index: 999;
|
||||
.weather_echart{
|
||||
height: calc(100% - 3.5rem);
|
||||
height: calc((100% - 4.5rem) * 0.4);
|
||||
}
|
||||
.right-image-list{
|
||||
padding: 20px 0;
|
||||
@ -3342,9 +3382,12 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.liveVideo_content_9{
|
||||
height: calc((100% - 4.5rem) * 0.6);
|
||||
}
|
||||
.video{
|
||||
width: 3.7rem;
|
||||
height: 2.6rem;
|
||||
height:80%;
|
||||
}
|
||||
.mySwiper_video {
|
||||
width: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user