| | |
| | | <div class="MapMenu"> |
| | | <iframe |
| | | id="ifream" |
| | | style="border:none" |
| | | style="border: none" |
| | | width="100%" |
| | | height="100%" |
| | | v-bind:src="reportUrl" |
| | | ></iframe> |
| | | </div> |
| | | <div class="title_img"> |
| | | <div class="title_img"> |
| | | <img |
| | | src="../assets/img/loginLogo.png" |
| | | src="../assets/img/lg_03.png" |
| | | alt="" |
| | | /> |
| | | </div> |
| | | <div class="login"> |
| | | |
| | | <div class="login_title"> |
| | | <span>用户登录</span> |
| | | </div> |
| | |
| | | <el-form-item prop="uid"> |
| | | <el-input |
| | | v-model="loginForm.uid" |
| | | placeholder="输入您的账号或手机号" |
| | | placeholder="输入登录账号" |
| | | class="nobr" |
| | | size="meddle" |
| | | autocomplete="off" |
| | |
| | | <el-input |
| | | show-password |
| | | v-model="loginForm.pwd" |
| | | placeholder="输入您的密码" |
| | | placeholder="请输入登录密码" |
| | | class="nobr" |
| | | autocomplete="off" |
| | | > |
| | |
| | | <el-form-item prop="validCode"> |
| | | <el-input |
| | | v-model="loginForm.validCode" |
| | | placeholder="输入验证码(忽略大小写)" |
| | | placeholder="请输入验证码(忽略大小写)" |
| | | class="nobr" |
| | | ></el-input> |
| | | </el-form-item> |
| | |
| | | <img |
| | | src="../assets/img/zhengshu.png" |
| | | alt="" |
| | | /><span>证书安装与添加信任站点</span> |
| | | /><span style="color: black">证书安装与添加信任站点</span> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <img |
| | | src="../assets/img/document.png" |
| | | alt="" |
| | | /><span>使用帮助文档</span> |
| | | /><span style="color: black">使用帮助文档</span> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button |
| | | type="primary" |
| | | class="nobr" |
| | | style=" |
| | | width: 384px; |
| | | height: 50px; |
| | | background: #3b4d6e; |
| | | border-radius: 5px; |
| | | " |
| | | class="nobr loginbtn" |
| | | style="" |
| | | :loading="loading" |
| | | @click="submitForm('loginForm')" |
| | | >登录</el-button> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { getPerms } from '../api/api'; |
| | | import validCode from './verificationCode.vue'; |
| | | import { mapActions } from 'vuex'; |
| | | import moment from 'moment'; |
| | | import { getPerms } from "../api/api"; |
| | | import validCode from "./verificationCode.vue"; |
| | | import { mapActions } from "vuex"; |
| | | import moment from "moment"; |
| | | |
| | | export default { |
| | | components: { validCode }, |
| | | data() { |
| | | let validUserName = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('用户名不能为空')); |
| | | return callback(new Error("用户名不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | |
| | | |
| | | let validPassword = (rule, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error('密码不能为空')); |
| | | return callback(new Error("密码不能为空")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | |
| | | const checkValidCode = (rule, value, callback) => { |
| | | |
| | | if (!value) { |
| | | callback(new Error('请输入验证码')); |
| | | callback(new Error("请输入验证码")); |
| | | } else if (value.toUpperCase() !== this.validCode.toUpperCase()) { |
| | | callback(new Error('验证码不正确')); |
| | | callback(new Error("验证码不正确")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | |
| | | // loginForm: { |
| | | // uid: "admin", |
| | | // pwd: "Admin@1234_lf", |
| | | // } |
| | | return { |
| | | validCode: '', |
| | | validCode: "", |
| | | loading: false, |
| | | loginForm: { |
| | | uid: 'admin', |
| | | pwd: 'Admin@1234_lf', |
| | | uid: "", |
| | | pwd: "", |
| | | }, |
| | | rules: { |
| | | uid: [{ validator: validUserName, trigger: 'blur' }], |
| | | pwd: [{ validator: validPassword, trigger: 'blur' }], |
| | | validCode: [{ validator: checkValidCode, trigger: 'blur' }], |
| | | showSessionId: '', |
| | | reportUrl: '' |
| | | uid: [{ validator: validUserName, trigger: "blur" }], |
| | | pwd: [{ validator: validPassword, trigger: "blur" }], |
| | | validCode: [{ validator: checkValidCode, trigger: "blur" }], |
| | | showSessionId: "", |
| | | reportUrl: "", |
| | | }, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | |
| | | |
| | | this.getpublickey(); |
| | | }, |
| | | methods: { |
| | | handlePaste(e) { |
| | | e.preventDefault(); |
| | | }, |
| | | // 获取vuex中Actions里的方法 |
| | | ...mapActions(['login', 'getpublickey']), |
| | | ...mapActions(["login", "getpublickey"]), |
| | | getCode(data) { |
| | | |
| | | this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。 |
| | | }, |
| | | |
| | |
| | | this.login(this.loginForm) |
| | | .then((response) => { |
| | | if (response.code != 200) { |
| | | this.loading = false |
| | | Message({ |
| | | this.loading = false; |
| | | this.$message({ |
| | | message: response.msg, |
| | | type: 'error', |
| | | duration: 5 * 1000, |
| | | type: "error", |
| | | }); |
| | | return |
| | | // Message({ |
| | | // message: response.msg, |
| | | // type: "error", |
| | | // duration: 5 * 1000, |
| | | // }); |
| | | return; |
| | | } |
| | | |
| | | if (response.msg != "") { |
| | | this.$message({ |
| | | message: response.msg, |
| | | type: 'warning' |
| | | type: "warning", |
| | | }); |
| | | } |
| | | this.setCookies(response); |
| | | |
| | | getPerms().then((res) => { |
| | | if (res.code == 200) { |
| | | this.$store.commit('getPermsEntity', res.result); |
| | | this.$store.commit("getPermsEntity", res.result); |
| | | |
| | | if (res.result.length != 0) { |
| | | sessionStorage.setItem('routerName', '/Synthesis') |
| | | sessionStorage.setItem('changeSelectStyle', 3) |
| | | this.$router.push('/'); |
| | | sessionStorage.setItem("routerName", "/Thematic"); |
| | | sessionStorage.setItem("changeSelectStyle", 1); |
| | | this.$router.push("/"); |
| | | } else { |
| | | this.$message({ |
| | | message: "请您联系管理员分配角色菜单", |
| | | type: "error", |
| | | }); |
| | | } |
| | | this.loading = false |
| | | this.loading = false; |
| | | } else { |
| | | this.loading = false |
| | | console.log('error submit!!'); |
| | | this.loading = false; |
| | | console.log("error submit!!"); |
| | | } |
| | | }); |
| | | |
| | |
| | | }); |
| | | //如果登录失败,需要刷新验证码的 |
| | | this.$refs.refresh.createdCode(); |
| | | this.validCode = ''; //清空验证码输入框的内容 |
| | | this.validCode = ""; //清空验证码输入框的内容 |
| | | } else { |
| | | this.loading = false |
| | | console.log('error submit!!'); |
| | | this.loading = false; |
| | | console.log("error submit!!"); |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | setCookies(res) { |
| | | |
| | | var timeData = moment(res.result.expire).format('YYYY-MM-DD HH:mm:ss'); |
| | | var timeData = moment(res.result.expire).format("YYYY-MM-DD HH:mm:ss"); |
| | | var LfPrems = { |
| | | token: res.result.token, |
| | | uname: res.result.uname, |
| | | time: timeData, |
| | | userid: res.result.createUser, |
| | | expire: res.result.expire |
| | | expire: res.result.expire, |
| | | autoLogOut: res.result.autoLogOut, |
| | | }; |
| | | LfPrems = JSON.stringify(LfPrems); |
| | | localStorage.setItem('LFToken', LfPrems); |
| | | localStorage.setItem("LFToken", LfPrems); |
| | | }, |
| | | enterLogin() { |
| | | document.onkeydown = (e) => { |
| | | e = window.event || e; |
| | | |
| | | |
| | | if (this.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter' || e.code == 'NumpadEnter')) { |
| | | |
| | | if ( |
| | | this.$route.path == "/login" && |
| | | (e.code == "Enter" || e.code == "enter" || e.code == "NumpadEnter") |
| | | ) { |
| | | //最重要最后调用1.登录校验方法 |
| | | //this.login(); |
| | | this.submitForm('loginForm') |
| | | this.submitForm("loginForm"); |
| | | } |
| | | }; |
| | | |
| | | }, |
| | | startURL() { |
| | | this.reportUrl = window.location.origin + '/mapscreen/index.html'; |
| | | } |
| | | var url = window.location.href; |
| | | var testurl = ""; |
| | | if (url.indexOf("web") != -1) { |
| | | testurl = "/web"; |
| | | } |
| | | this.reportUrl = |
| | | window.location.origin + testurl + "/mapscreen/index.html"; |
| | | }, |
| | | }, |
| | | created() { |
| | | this.startURL() |
| | | this.startURL(); |
| | | this.enterLogin(); |
| | | }, |
| | | }; |
| | |
| | | left: 1%; |
| | | position: absolute; |
| | | } |
| | | |
| | | } |
| | | .title_img { |
| | | position: absolute; |
| | | left: 10%; |
| | | top:8%; |
| | | left: 20%; |
| | | top: 8%; |
| | | width: 20%; |
| | | /* transform: translateX(-50%); */ |
| | | } |
| | | .title_img img { |
| | |
| | | left: 75%; |
| | | top: 45%; |
| | | transform: translate(-50%, -40%); |
| | | background: rgba(255, 255, 255, 0.6); |
| | | background: rgba(255, 255, 255, 0.9); |
| | | border-radius: 8px; |
| | | } |
| | | |
| | |
| | | border: 0; |
| | | padding: 0 !important; |
| | | } |
| | | .loginbtn { |
| | | width: 384px; |
| | | height: 50px; |
| | | background: #3b4d6e; |
| | | border-radius: 5px; |
| | | } |
| | | </style> |