From d6803b83a827a62fa29737c31104c3ee9bc194d8 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期一, 08 四月 2024 10:18:41 +0800
Subject: [PATCH] 1、全局菜单栏新增点击父级菜单标题后在导航栏展开父级所有下一级菜单功能 2、登录页面按照新需求调整整体布局及样式 3、优化首页看板页面图表视图
---
src/views/user/Login.vue | 556 +++++++++++++++++++++++++++++++------------------------
1 files changed, 310 insertions(+), 246 deletions(-)
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 22d89e3..ff89d12 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -1,60 +1,75 @@
<template>
<div class="main">
- <a-form-model
- class="user-layout-login"
- @keyup.enter.native="handleSubmit"
- >
- <a-tabs
- :activeKey="customActiveKey"
- :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
- @change="handleTabClick"
- >
- <a-tab-pane
- key="tab1"
- tab="璐﹀彿瀵嗙爜鐧诲綍"
+ <div style="display: flex;padding: 50px;">
+
+ <div style="flex: 1;display: flex;align-items: center;justify-content: center;position: relative">
+ <div class="top">
+ <div class="header">
+ <a href="/">
+ <img src="~@/assets/lxzn.png" class="logo" alt="logo">
+ <span class="title">MDC鏅烘収杞﹂棿</span>
+ </a>
+ </div>
+ </div>
+ <img src="@/assets/login.jpeg" width="60%">
+ </div>
+ <div style="width: 368px;margin: 30px 50px">
+ <a-form-model
+ class="user-layout-login"
+ @keyup.enter.native="handleSubmit"
>
- <login-account
- ref="alogin"
- @validateFail="validateFail"
- @success="requestSuccess"
- @fail="requestFailed"
- ></login-account>
- </a-tab-pane>
+ <a-tabs
+ :activeKey="customActiveKey"
+ :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
+ @change="handleTabClick"
+ >
+ <a-tab-pane
+ key="tab1"
+ tab="璐﹀彿瀵嗙爜鐧诲綍"
+ >
+ <login-account
+ ref="alogin"
+ @validateFail="validateFail"
+ @success="requestSuccess"
+ @fail="requestFailed"
+ ></login-account>
+ </a-tab-pane>
- <!--<a-tab-pane key="tab2" tab="鎵嬫満鍙风櫥褰�">-->
- <!--<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
- <!--</a-tab-pane>-->
- </a-tabs>
+ <!--<a-tab-pane key="tab2" tab="鎵嬫満鍙风櫥褰�">-->
+ <!--<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
+ <!--</a-tab-pane>-->
+ </a-tabs>
- <a-form-model-item>
- <!--<a-checkbox @change="handleRememberMeChange" default-checked>鑷姩鐧诲綍</a-checkbox>-->
- <!--<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
- <!--蹇樿瀵嗙爜-->
- <!--</router-link>-->
- <!--<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >-->
- <!--娉ㄥ唽璐︽埛-->
- <!--</router-link>-->
- </a-form-model-item>
+ <a-form-model-item>
+ <!--<a-checkbox @change="handleRememberMeChange" default-checked>鑷姩鐧诲綍</a-checkbox>-->
+ <!--<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
+ <!--蹇樿瀵嗙爜-->
+ <!--</router-link>-->
+ <!--<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >-->
+ <!--娉ㄥ唽璐︽埛-->
+ <!--</router-link>-->
+ </a-form-model-item>
- <a-form-item style="margin-top:24px">
- <a-button
- size="large"
- type="primary"
- htmlType="submit"
- class="login-button"
- :loading="loginBtn"
- @click.stop.prevent="handleSubmit"
- :disabled="loginBtn"
- >纭畾
- </a-button>
- </a-form-item>
+ <a-form-item style="margin-top:24px">
+ <a-button
+ size="large"
+ type="primary"
+ htmlType="submit"
+ class="login-button"
+ :loading="loginBtn"
+ @click.stop.prevent="handleSubmit"
+ :disabled="loginBtn"
+ >纭畾
+ </a-button>
+ </a-form-item>
- <a-form-model-item style="color: red">
- 瀵嗙骇锛氬唴閮� 璀﹀憡锛氭湰绯荤粺绂佹瀛樺偍銆佸鐞嗐�佷紶杈撴秹瀵嗕俊鎭�
- </a-form-model-item>
+ <a-form-model-item style="color: red">
+ 瀵嗙骇锛氬唴閮� 璀﹀憡锛氭湰绯荤粺绂佹瀛樺偍銆佸鐞嗐�佷紶杈撴秹瀵嗕俊鎭�
+ </a-form-model-item>
- </a-form-model>
-
+ </a-form-model>
+ </div>
+ </div>
<!--<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>-->
<login-select-tenant
ref="loginSelect"
@@ -66,225 +81,274 @@
</template>
<script>
-import Vue from 'vue'
-import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
-// import ThirdLogin from './third/ThirdLogin'
-import LoginSelectTenant from './LoginSelectTenant'
-import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
-import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
-import { timeFix } from '@/utils/util'
+ import Vue from 'vue'
+ import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
+ // import ThirdLogin from './third/ThirdLogin'
+ import LoginSelectTenant from './LoginSelectTenant'
+ import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
+ import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
+ import { timeFix } from '@/utils/util'
-import LoginAccount from './LoginAccount'
-import LoginPhone from './LoginPhone'
-import store from '@/store'
-import { getAction } from '../../api/manage'
-import UserPassword from '../../components/tools/UserPassword'
+ import LoginAccount from './LoginAccount'
+ import LoginPhone from './LoginPhone'
+ import store from '@/store'
+ import { getAction } from '../../api/manage'
+ import UserPassword from '../../components/tools/UserPassword'
-export default {
- components: {
- UserPassword,
- LoginSelectTenant,
- TwoStepCaptcha,
- // ThirdLogin,
- LoginAccount,
- LoginPhone,
- store
- },
- data() {
- return {
- customActiveKey: 'tab1',
- rememberMe: true,
- loginBtn: false,
- requiredTwoStepCaptcha: false,
- stepCaptchaVisible: false,
- encryptedString: {
- key: "",
- iv: "",
+ export default {
+ components: {
+ UserPassword,
+ LoginSelectTenant,
+ TwoStepCaptcha,
+ // ThirdLogin,
+ LoginAccount,
+ LoginPhone,
+ store
+ },
+ data() {
+ return {
+ customActiveKey: 'tab1',
+ rememberMe: true,
+ loginBtn: false,
+ requiredTwoStepCaptcha: false,
+ stepCaptchaVisible: false,
+ encryptedString: {
+ key: '',
+ iv: ''
+ },
+ url: {
+ getPrimaryInfo: '/sys/sysAnnouncementSend/getPrimaryInfo'
+ }
+ }
+ },
+ created() {
+ Vue.ls.remove(ACCESS_TOKEN)
+ this.getRouterData()
+ this.rememberMe = true
+ },
+ methods: {
+ handleTabClick(key) {
+ this.customActiveKey = key
},
- url: {
- getPrimaryInfo: "/sys/sysAnnouncementSend/getPrimaryInfo"
- }
- }
- },
- created() {
- Vue.ls.remove(ACCESS_TOKEN)
- this.getRouterData();
- this.rememberMe = true
- },
- methods: {
- handleTabClick(key) {
- this.customActiveKey = key
- },
- handleRememberMeChange(e) {
- this.rememberMe = e.target.checked
- },
- /**璺宠浆鍒扮櫥褰曢〉闈㈢殑鍙傛暟-璐﹀彿鑾峰彇*/
- getRouterData() {
- this.$nextTick(() => {
- let temp = this.$route.params.username || this.$route.query.username || ''
- if (temp) {
- this.$refs.alogin.acceptUsername(temp)
- }
- })
- },
-
- //鐧诲綍
- handleSubmit() {
- this.loginBtn = true;
- if (this.customActiveKey === 'tab1') {
- // 浣跨敤璐︽埛瀵嗙爜鐧诲綍
- this.$refs.alogin.handleLogin(this.rememberMe)
- } else {
- //鎵嬫満鍙风爜鐧诲綍
- this.$refs.plogin.handleLogin(this.rememberMe)
- }
- },
- // 鏍￠獙澶辫触
- validateFail() {
- this.loginBtn = false;
- },
- // 鐧诲綍鍚庡彴鎴愬姛
- requestSuccess(loginResult) {
- // this.$router.push({ path: "/isps/userAnnouncement" }).catch(() => {
- // console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
- // })
- this.$router.push({ path: "/dashboard/analysis" }).catch(() => {
- console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
- })
- this.$notification.success({
- message: '娆㈣繋',
- description: `${timeFix()}锛屾杩庡洖鏉,
- });
- var userId = store.getters.userInfo.id;
- let that = this;
- getAction(this.url.getPrimaryInfo, { userId: userId }).then(res => {
- if (res.success) {
- for (var i = 0; i < res.result.length; i++) {
- that.$notification.success({
- message: '鏈�鏂版湭璇绘秷鎭��' + res.result[i].msgCategory + '銆�',
- description: res.result[i].msgContent,
- duration: 60,
- icon: <a-icon type="exclamation-circle" style="color:red" />,
- });
+ handleRememberMeChange(e) {
+ this.rememberMe = e.target.checked
+ },
+ /**璺宠浆鍒扮櫥褰曢〉闈㈢殑鍙傛暟-璐﹀彿鑾峰彇*/
+ getRouterData() {
+ this.$nextTick(() => {
+ let temp = this.$route.params.username || this.$route.query.username || ''
+ if (temp) {
+ this.$refs.alogin.acceptUsername(temp)
}
+ })
+ },
+
+ //鐧诲綍
+ handleSubmit() {
+ this.loginBtn = true
+ if (this.customActiveKey === 'tab1') {
+ // 浣跨敤璐︽埛瀵嗙爜鐧诲綍
+ this.$refs.alogin.handleLogin(this.rememberMe)
+ } else {
+ //鎵嬫満鍙风爜鐧诲綍
+ this.$refs.plogin.handleLogin(this.rememberMe)
}
- })
- // this.$refs.loginSelect.show(loginResult)
- },
- //鐧诲綍鍚庡彴澶辫触
- requestFailed(err,username) {
- let description = ((err.response || {}).data || {}).message || err.message || "璇锋眰鍑虹幇閿欒锛岃绋嶅悗鍐嶈瘯"
- if(err.code!==5001&&err.code!==5002){
- this.$notification['error']({
- message: '鐧诲綍澶辫触',
- description: description,
- duration: 4,
- });
- }else{
- this.$notification['warning']({
- message: '鎻愮ず',
- description: description,
- duration:1,
- onClose:()=>{
- console.log('err',err)
- this.$refs.userPassword.show(username)
- }
- });
- }
- //璐︽埛瀵嗙爜鐧诲綍閿欒鍚庢洿鏂伴獙璇佺爜
- // if (this.customActiveKey === 'tab1' && description.indexOf('瀵嗙爜閿欒') > 0) {
- // this.$refs.alogin.handleChangeCheckCode()
- // }
- this.loginBtn = false;
- },
- loginSelectOk() {
- this.loginSuccess()
- },
- //鐧诲綍鎴愬姛
- loginSuccess() {
- this.$router.push({ path: "/isps/userAnnouncement" }).catch(() => {
- console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
- })
- this.$notification.success({
- message: '娆㈣繋',
- description: `${timeFix()}锛屾杩庡洖鏉,
- });
-
- },
-
- stepCaptchaSuccess() {
- this.loginSuccess()
- },
- stepCaptchaCancel() {
- this.Logout().then(() => {
+ },
+ // 鏍￠獙澶辫触
+ validateFail() {
this.loginBtn = false
- this.stepCaptchaVisible = false
- })
- },
- //鑾峰彇瀵嗙爜鍔犲瘑瑙勫垯
- getEncrypte() {
- var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
- if (encryptedString == null) {
- getEncryptedString().then((data) => {
- this.encryptedString = data
- });
- } else {
- this.encryptedString = encryptedString;
+ },
+ // 鐧诲綍鍚庡彴鎴愬姛
+ requestSuccess(loginResult) {
+ // this.$router.push({ path: "/isps/userAnnouncement" }).catch(() => {
+ // console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
+ // })
+ this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
+ console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
+ })
+ this.$notification.success({
+ message: '娆㈣繋',
+ description: `${timeFix()}锛屾杩庡洖鏉
+ })
+ var userId = store.getters.userInfo.id
+ let that = this
+ getAction(this.url.getPrimaryInfo, { userId: userId }).then(res => {
+ if (res.success) {
+ for (var i = 0; i < res.result.length; i++) {
+ that.$notification.success({
+ message: '鏈�鏂版湭璇绘秷鎭��' + res.result[i].msgCategory + '銆�',
+ description: res.result[i].msgContent,
+ duration: 60,
+ icon: <a-icon type = 'exclamation-circle'style = 'color:red' / >,
+ })
+
+ }
+ }
+ })
+ // this.$refs.loginSelect.show(loginResult)
+ },
+ //鐧诲綍鍚庡彴澶辫触
+ requestFailed(err, username) {
+ let description = ((err.response || {}).data || {}).message || err.message || '璇锋眰鍑虹幇閿欒锛岃绋嶅悗鍐嶈瘯'
+ if (err.code !== 5001 && err.code !== 5002) {
+ this.$notification['error']({
+ message: '鐧诲綍澶辫触',
+ description: description,
+ duration: 4
+ })
+ } else {
+ this.$notification['warning']({
+ message: '鎻愮ず',
+ description: description,
+ duration: 1,
+ onClose: () => {
+ console.log('err', err)
+ this.$refs.userPassword.show(username)
+ }
+ })
+ }
+ //璐︽埛瀵嗙爜鐧诲綍閿欒鍚庢洿鏂伴獙璇佺爜
+ // if (this.customActiveKey === 'tab1' && description.indexOf('瀵嗙爜閿欒') > 0) {
+ // this.$refs.alogin.handleChangeCheckCode()
+ // }
+ this.loginBtn = false
+ },
+ loginSelectOk() {
+ this.loginSuccess()
+ },
+ //鐧诲綍鎴愬姛
+ loginSuccess() {
+ this.$router.push({ path: '/isps/userAnnouncement' }).catch(() => {
+ console.log('鐧诲綍璺宠浆棣栭〉鍑洪敊,杩欎釜閿欒浠庡摢閲屾潵鐨�')
+ })
+ this.$notification.success({
+ message: '娆㈣繋',
+ description: `${timeFix()}锛屾杩庡洖鏉
+ })
+
+ },
+
+ stepCaptchaSuccess() {
+ this.loginSuccess()
+ },
+ stepCaptchaCancel() {
+ this.Logout().then(() => {
+ this.loginBtn = false
+ this.stepCaptchaVisible = false
+ })
+ },
+ //鑾峰彇瀵嗙爜鍔犲瘑瑙勫垯
+ getEncrypte() {
+ var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
+ if (encryptedString == null) {
+ getEncryptedString().then((data) => {
+ this.encryptedString = data
+ })
+ } else {
+ this.encryptedString = encryptedString
+ }
}
+
}
}
-
-}
</script>
<style lang="less" scoped>
-.user-layout-login {
- label {
- font-size: 14px;
- }
- .getCaptcha {
- display: block;
- width: 100%;
- height: 40px;
- }
+ .user-layout-login {
+ label {
+ font-size: 14px;
+ }
+ .getCaptcha {
+ display: block;
+ width: 100%;
+ height: 40px;
+ }
- .forge-password {
- font-size: 14px;
- }
+ .forge-password {
+ font-size: 14px;
+ }
- button.login-button {
- padding: 0 15px;
- font-size: 16px;
- height: 40px;
- width: 100%;
- }
+ button.login-button {
+ padding: 0 15px;
+ font-size: 16px;
+ height: 40px;
+ width: 100%;
+ }
- .user-login-other {
- text-align: left;
- margin-top: 24px;
- line-height: 22px;
+ .user-login-other {
+ text-align: left;
+ margin-top: 24px;
+ line-height: 22px;
- .item-icon {
- font-size: 24px;
- color: rgba(0, 0, 0, 0.2);
- margin-left: 16px;
- vertical-align: middle;
- cursor: pointer;
- transition: color 0.3s;
+ .item-icon {
+ font-size: 24px;
+ color: rgba(0, 0, 0, 0.2);
+ margin-left: 16px;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: color 0.3s;
- &:hover {
- color: #1890ff;
+ &:hover {
+ color: #1890ff;
+ }
+ }
+
+ .register {
+ float: right;
}
}
+ }
- .register {
- float: right;
+ /deep/ .ant-tabs-tab-active.ant-tabs-tab {
+ font-size: 25px;
+ }
+
+ .top {
+ text-align: center;
+ position: absolute;
+ top: 45px;
+
+ .header {
+ height: 44px;
+ line-height: 44px;
+
+ .badge {
+ position: absolute;
+ display: inline-block;
+ line-height: 1;
+ vertical-align: middle;
+ margin-left: -12px;
+ margin-top: -10px;
+ opacity: 0.8;
+ }
+
+ .logo {
+ height: 44px;
+ vertical-align: top;
+ margin-right: 10px;
+ border-style: none;
+ }
+
+ .title {
+ font-size: 30px;
+ color: #000;
+ font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-weight: 600;
+ position: relative;
+ top: 2px;
+ }
+ }
+ .desc {
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.45);
+ margin-top: 12px;
+ margin-bottom: 40px;
}
}
-}
+
</style>
<style>
-.valid-error .ant-select-selection__placeholder {
- color: #f5222d;
-}
+ .valid-error .ant-select-selection__placeholder {
+ color: #f5222d;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3