From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/index/App.vue | 168 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 116 insertions(+), 52 deletions(-)
diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 22a9f70..2a3a431 100644
--- a/src/pages/index/App.vue
+++ b/src/pages/index/App.vue
@@ -1,8 +1,11 @@
<template>
<div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
<div class="web-site">
- <a href="http://www.aiotlink.com" target="_blank">www.aiotlink.com</a>
+ <a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
</div>
+
+ <!-- 鎺堟潈淇℃伅 -->
+ <lang-select class="lang-select"/>
<licence />
<div class="right-bg" style>
<particle-network />
@@ -12,7 +15,7 @@
<img src="/images/login-logo.png" alt width="105px" height="105px" />
</div>
<div class="login-com">
- <span>鍖椾含璐濇�濈鎶�鏈湁闄愬叕鍙�</span>
+ <span>{{ $t('login.company') }}</span>
</div>
<div class="login-form">
<el-form
@@ -24,7 +27,7 @@
class="demo-ruleForm"
>
<el-form-item prop="loginName">
- <el-input v-model="user.loginName" style="width:280px" placeholder="璇疯緭鍏ョ敤鎴峰悕">
+ <el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">
<i slot="prefix" class="iconfont iconyonghu1"></i>
</el-input>
</el-form-item>
@@ -35,25 +38,35 @@
v-model="user.password"
autocomplete="off"
style="width:280px"
- placeholder="璇疯緭鍏ュ瘑鐮�"
+ :placeholder="$t('placeholder.enterPassword')"
>
<i slot="prefix" class="iconfont iconmima"></i>
</el-input>
</el-form-item>
<el-form-item>
- <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">鐧诲綍</el-button>
+ <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>
</el-form-item>
</el-form>
</div>
- <p class="gradient-text gradient-text-one">鈥斺�斺�� {{serverTitle || '鏅� 鑳� 璁� 绠� 鑺� 鐐� 鈥� ReID'}} 鈥斺�斺��</p>
+ <!-- <p class="gradient-text gradient-text-one">鈥斺�斺�� {{serverTitle || 'SmartAI 鈥� ReID'}} 鈥斺�斺��</p> -->
+ <p class="gradient-text gradient-text-one">
+ 鈥斺��
+ <b>SmartAI</b> {{ $t('login.aios') }} 鈥斺��
+ </p>
+ <p
+ class="gradient-text gradient-text-one"
+ style="letter-spacing: 1.8px;font-size:15px;"
+ >V1.0.0</p>
</div>
</div>
</template>
<script>
-import { tologin, getLoginUserData, getServerName } from './api.ts'
+import { tologin, getLoginUserData, getServerName } from './api.ts';
import ParticleNetwork from './ParticleNetwork'
import Licence from '@/components/licence'
+import LangSelect from '@/components/langSelect'
+import { getMenuListData } from "@/api/utils";
export default {
name: 'login-pgae',
@@ -62,7 +75,16 @@
},
components: {
ParticleNetwork,
- Licence
+ Licence,
+ LangSelect
+ },
+ computed: {
+ rules() {
+ return {
+ loginName: [{ required: true, message: this.$t('placeholder.enterUsername'), trigger: 'change' } ],
+ password: [{ required: true, message: this.$t('placeholder.enterPassword'), trigger: 'change' }]
+ }
+ },
},
data: () => ({
serverTitle: "",
@@ -72,18 +94,47 @@
rememberMe: false
},
nullRule: {},
- rules: {
- loginName: [
- { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'change' }
- ],
- password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'change' }]
- },
+
loading: '',
vLoading: false,
currentHeight: 1057,
currentWidth: 1920
}),
+ created() {
+ this.getServerName()
+ this.getScreenHeight()
+ },
+ mounted() {
+ // 鑷姩鐧诲綍鎺ュ彛
+ this.loginRobot();
+ },
+ watch: {},
+ beforeDestroy() {
+ window.onresize = null
+ },
methods: {
+ loginRobot() {
+ // 瑙ｆ瀽璺敱鍙傛暟锛屽苟缂撳瓨
+ let user = this.getQueryVariable("username");
+ let passwd = this.getQueryVariable("password");
+ if (user.length && passwd.length) {
+ sessionStorage.setItem("autoLogin", JSON.stringify({ username: user, passwd: passwd }));
+
+ this.user.loginName = user;
+ this.user.password = passwd;
+ this.systemLogin();
+ return;
+ }
+
+ // 鐧婚檰瓒呮椂鍚庣殑閲嶆柊鐧婚檰
+ let sessionInfo = sessionStorage.getItem('autoLogin');
+ if (sessionInfo) {
+ let authority = JSON.parse(sessionInfo);
+ this.user.loginName = authority.username;
+ this.user.password = authority.passwd;
+ this.systemLogin();
+ }
+ },
systemLogin() {
this.nullRule = this.rules
this.$nextTick(() => {
@@ -96,7 +147,6 @@
background: 'rgba(0, 0, 0, 0.7)'
})
this.testLogin()
- // return false
} else {
this.nullRule = {}
}
@@ -105,9 +155,9 @@
})
},
async testLogin() {
+ // location.assign("/view/desktop/")
tologin({ username: this.user.loginName, password: this.user.password })
.then(json => {
- // console.log(json, "鐧诲綍璇锋眰");
const loginedInfo = {
access_token: json.token_type + ' ' + json.access_token,
refresh_token: json.refresh_token
@@ -118,48 +168,35 @@
this.getLoginUserData()
})
.catch(err => {
- // console.log(err, "鐧诲綍鎶ラ敊");
this.loading.close()
this.$notify({
title: '鎻愮ず',
type: 'error',
- message: err
+ message: err.msg
})
this.$refs.pwd.focus()
})
},
async getLoginUserData() {
- let json = await getLoginUserData()
- if (!json.error) {
- // this.loading.close()
- sessionStorage.setItem('userInfo', JSON.stringify(json))
- this.$notify({
- title: '鎻愮ず',
- type: 'success',
- message: '鐧诲綍鎴愬姛锛�'
- })
- // await this.getMenuList()
- // this.$router.push('/Layout/Video')
+ let res = await getLoginUserData()
+ if (res.success) {
+ sessionStorage.setItem('userInfo', JSON.stringify(res.data))
+ this.$notify.success("鐧诲綍鎴愬姛锛�")
+ // 鑾峰彇鏉冮檺
+ await this.getMenuList()
location.assign("/view/desktop/")
- return json
+ return res.data
} else {
- this.$notify({
- title: '鎻愮ず',
- type: 'error',
- message: '鐧诲綍澶辫触锛�'
- })
- // this.loading.close()
+ this.$notify.error("鐧诲綍澶辫触锛�")
}
},
getScreenHeight() {
this.currentHeight = document.documentElement.clientHeight
this.currentWidth = document.documentElement.clientWidth
- // console.log(this.currentHeight, "褰撳墠绐楀彛澶у皬");
window.onresize = () => {
this.currentHeight = document.documentElement.clientHeight
this.currentWidth = document.documentElement.clientWidth
- // console.log(this.currentHeight, "褰撳墠绐楀彛澶у皬2", this.currentWidth);
this.$forceUpdate()
}
},
@@ -169,19 +206,37 @@
this.serverTitle = res.data.serverName
window.document.title = res.data.serverName
? res.data.serverName
- : '鏅� 鑳� 璁� 绠� 鑺� 鐐�'
+ : 'SmartAI'
sessionStorage.setItem('title', res.data.serverName)
}
},
+ async getMenuList() {
+ let results = await getMenuListData({});
+ if (results && results.success) {
+ /* 瀛樺偍鏉冮檺 */
+ let buttonAuthoritys = results.data;
+ if (results && results.length && this.$route.query.is_login) {
+ this.$router.replace(results[0].url);
+ }
+ sessionStorage.setItem("buttonAuthoritys", "," + buttonAuthoritys + ",");
+ sessionStorage.setItem("menuInfo", JSON.stringify(results));
+ } else {
+ this.$toast({
+ type: "error",
+ message: "鑿滃崟鑾峰彇澶辫触"
+ });
+ }
+ },
+ getQueryVariable(variable) {
+ var query = window.location.search.substring(1);
+ var vars = query.split("&");
+ for (var i = 0; i < vars.length; i++) {
+ var pair = vars[i].split("=");
+ if (pair[0] == variable) { return pair[1]; }
+ }
+ return (false);
+ }
},
- created() {
- this.getServerName()
- this.getScreenHeight()
- },
- watch: {},
- beforeDestroy() {
- window.onresize = null
- }
}
</script>
<style lang="scss">
@@ -212,12 +267,19 @@
color: #6170e1;
letter-spacing: 6.15px;
}
+.lang-select {
+ float: right;
+ color: white !important;
+ font-size: 14px;
+ margin: 13px;
+ cursor: pointer;
+}
.left-bg {
position: absolute;
- top: 30%;
+ top: 29%;
right: 18%;
width: 390px;
- height: 402px;
+ height: 426px;
background: rgba(146, 208, 255, 0.23);
border-radius: 4px;
text-align: center;
@@ -234,14 +296,16 @@
}
.login-form {
margin: 40px 10px;
- // margin: 24px 10px 40px 10px;
}
.gradient-text {
- line-height: 50px;
- font-size: 20px;
+ line-height: 36px;
+ font-size: 17px;
font-family: -webkit-pictograph;
font-weight: bolder;
position: relative;
+ b {
+ font-size: 20px;
+ }
}
.gradient-text-one {
background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);
--
Gitblit v1.8.0