From fd73e99196e00c82885c83ee2f1253c2fc343756 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 19 十二月 2023 09:32:59 +0800
Subject: [PATCH] 页面修改
---
src/components/login.vue | 555 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 334 insertions(+), 221 deletions(-)
diff --git a/src/components/login.vue b/src/components/login.vue
index a66300e..526d779 100644
--- a/src/components/login.vue
+++ b/src/components/login.vue
@@ -1,271 +1,384 @@
<template>
- <div class="login-wrap">
- <div class="ms-login">
- <el-tabs v-model="loginType" class="ms-title">
- <el-tab-pane label="瀵嗙爜鐧诲綍" name="usecode" v-if="usecode">
- <el-form
- :model="param"
- :rules="rules"
- ref="login"
- label-width="0px"
- class="ms-content"
+ <div class="container">
+ <vue-particles
+ :particleOpacity="0.7"
+ :particlesNumber="80"
+ shapeType="circle"
+ :particleSize="4"
+ :linesWidth="1"
+ :lineLinked="true"
+ :lineOpacity="0.4"
+ :linesDistance="80"
+ :moveSpeed="2"
+ :hoverEffect="true"
+ hoverMode="grab"
+ :clickEffect="false"
+ clickMode="bubble"
+ >
+ </vue-particles>
+ <div class="MapMenu">
+ <iframe
+ id="ifream"
+ style="border: none"
+ width="100%"
+ height="100%"
+ v-bind:src="reportUrl"
+ ></iframe>
+ </div>
+ <div class="title_img">
+ <img
+ src="../assets/img/lg_03.png"
+ alt=""
+ />
+ </div>
+ <div class="login">
+ <div class="login_title">
+ <span>鐢ㄦ埛鐧诲綍</span>
+ </div>
+ <el-form
+ :model="loginForm"
+ :rules="rules"
+ ref="loginForm"
+ class="loginForm"
+ >
+ <el-form-item prop="uid">
+ <el-input
+ v-model="loginForm.uid"
+ placeholder="杈撳叆鐧诲綍璐﹀彿"
+ class="nobr"
+ size="meddle"
+ autocomplete="off"
>
- <el-form-item prop="phone">
- <el-input v-model="param.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�">
- <el-button slot="prepend" icon="el-icon-phone"></el-button>
- </el-input>
- </el-form-item>
- <el-form-item prop="password" v-if="loginType === 'usecode'">
+ <i
+ slot="prefix"
+ class="el-icon-user"
+ ></i>
+ </el-input>
+ </el-form-item>
+
+ <el-form-item prop="pwd">
+ <el-input
+ show-password
+ v-model="loginForm.pwd"
+ placeholder="璇疯緭鍏ョ櫥褰曞瘑鐮�"
+ class="nobr"
+ autocomplete="off"
+ >
+ <i
+ slot="prefix"
+ class="el-icon-lock"
+ ></i>
+ </el-input>
+ </el-form-item>
+
+ <el-form-item required>
+ <el-col :span="18">
+ <el-form-item prop="validCode">
<el-input
- v-model="param.password"
- :show-password="true"
- placeholder="璇疯緭鍏ュ瘑鐮�"
- >
- </el-input>
+ v-model="loginForm.validCode"
+ placeholder="璇疯緭鍏ラ獙璇佺爜锛堝拷鐣ュぇ灏忓啓锛�"
+ class="nobr"
+ ></el-input>
</el-form-item>
- <div class="login-btn">
- <el-button type="primary" @click="submitForm()">鐧诲綍</el-button>
- </div>
- </el-form>
- </el-tab-pane>
- <el-tab-pane label="鐭俊鐧诲綍" name="unusecode" v-if="unusecode">
- <el-form
- :model="param"
- :rules="rules"
- ref="login"
- label-width="0px"
- class="ms-content"
+ </el-col>
+
+ <el-col
+ :span="6"
+ align="right"
>
- <el-form-item prop="phone">
- <el-input v-model="param.phone" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�">
- <el-button slot="prepend" icon="el-icon-phone"></el-button>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="loginType === 'unusecode'">
- <el-input v-model="param.code" placeholder="璇疯緭鍏ラ獙璇佺爜">
- <template slot="append">
- <el-button
- :disabled="disabled"
- class="send"
- @click="sendhandle"
- >{{ sendTxt }}</el-button
- ></template
- ></el-input
- >
- </el-form-item>
- <div class="login-btn">
- <el-button type="primary" @click="submitForm()">鐧诲綍</el-button>
- </div>
- </el-form>
- </el-tab-pane>
- </el-tabs>
+ <validCode
+ v-model="validCode"
+ ref="refresh"
+ @sendData="getCode"
+ ></validCode>
+ </el-col>
+ </el-form-item>
+ <el-form-item>
+ <img
+ src="../assets/img/zhengshu.png"
+ alt=""
+ /><span style="color: black">璇佷功瀹夎涓庢坊鍔犱俊浠荤珯鐐�</span>
+ </el-form-item>
+ <el-form-item>
+ <img
+ src="../assets/img/document.png"
+ alt=""
+ /><span style="color: black">浣跨敤甯姪鏂囨。</span>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ class="nobr loginbtn"
+ style=""
+ :loading="loading"
+ @click="submitForm('loginForm')"
+ >鐧诲綍</el-button>
+ </el-form-item>
+ </el-form>
</div>
</div>
</template>
<script>
-import baseVuex from "@mixin/baseVuex";
-import { sendSms, verifyCode, isAdmin } from "@api/index";
-let ms = 0;
+import { getPerms } from "../api/api";
+import validCode from "./verificationCode.vue";
+import { mapActions } from "vuex";
+import moment from "moment";
+
export default {
- mixins: [baseVuex],
- data: function () {
- let phoneReg = /^1[3-9]\d{9}$/;
- let validatePhone = (rule, value, callback) => {
+ components: { validCode },
+ data() {
+ let validUserName = (rule, value, callback) => {
if (!value) {
- this.isPhone = false;
- return callback(new Error("鍙风爜涓嶈兘涓虹┖!"));
+ return callback(new Error("鐢ㄦ埛鍚嶄笉鑳戒负绌�"));
+ } else {
+ callback();
}
- setTimeout(() => {
- if (!phoneReg.test(value)) {
- this.isPhone = false;
- callback(new Error("璇疯緭鍏ユ纭墜鏈烘牸寮�!"));
- } else {
- this.isPhone = true;
- callback();
- }
- }, 100);
};
+
+ let validPassword = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+ } else {
+ callback();
+ }
+ };
+
+ const checkValidCode = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇疯緭鍏ラ獙璇佺爜"));
+ } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
+ callback(new Error("楠岃瘉鐮佷笉姝ｇ‘"));
+ } else {
+ callback();
+ }
+ };
+ // loginForm: {
+ // uid: "admin",
+ // pwd: "Admin@1234_lf",
+ // }
return {
- login: "all",
- loginType: "usecode",
- param: {
- password: "",
- code: "",
- phone: "",
+ validCode: "",
+ loading: false,
+ loginForm: {
+ uid: "",
+ pwd: "",
},
- disabled: false,
- isPhone: "",
rules: {
- phone: [{ required: true, trigger: "blur", validator: validatePhone }],
- code: [{ required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "blur" }],
- password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" }],
+ uid: [{ validator: validUserName, trigger: "blur" }],
+ pwd: [{ validator: validPassword, trigger: "blur" }],
+ validCode: [{ validator: checkValidCode, trigger: "blur" }],
+ showSessionId: "",
+ reportUrl: "",
},
- sendTxt: "鐐瑰嚮鍙戦��",
- time: 120,
- interval: null,
};
},
mounted() {
- if (window.sceneConfig && sceneConfig.login) {
- this.login = sceneConfig.login;
- if (this.login === "onlySMS") {
- this.loginType = "unusecode";
- }
- }
- },
- computed: {
- usecode: function () {
- return this.login === "all" || this.login === "onlyPassword";
- },
- unusecode: function () {
- return this.login === "all" || this.login === "onlySMS";
- },
+ this.getpublickey();
},
methods: {
- submitForm() {
- this.$refs.login.validate((valid) => {
- if (valid) {
- verifyCode(this.loginType, this.param).then((res) => {
- if (res.code === 200) {
- this.$message({
- type: "success",
- message: "鐧诲綍鎴愬姛",
- });
- this.setTreeData([]);
- this.changeUserData({ type: "phone", value: this.param.phone });
- this.checkAdminAndLogin();
- } else {
- this.$message({
- type: "error",
- message: res.msg,
- });
- }
- });
- }
- });
+ handlePaste(e) {
+ e.preventDefault();
},
- sendhandle() {
- this.$refs.login.validateField(["phone"], (valid) => {
- if (this.isPhone) {
- sendSms({
- phone: this.param.phone,
- }).then((res) => {
- if (res.code === 200) {
- if (res.data.code === "OK") {
+ // 鑾峰彇vuex涓瑼ctions閲岀殑鏂规硶
+ ...mapActions(["login", "getpublickey"]),
+ getCode(data) {
+ this.validCode = data; //鍦╠ata涓畾涔変竴涓� validCode:'',鐢ㄦ潵璁板綍楠岃瘉鐮併��
+ },
+
+ submitForm(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ this.loading = true;
+ this.login(this.loginForm)
+ .then((response) => {
+ if (response.code != 200) {
+ this.loading = false;
this.$message({
- type: "success",
- message: "鍙戦�佺煭淇℃垚鍔燂紝璇锋敞鎰忔煡鏀�!",
- });
- this.disabled = true;
- ms = this.time;
- this.interval = setInterval(() => {
- this.countDown();
- }, 1000);
- } else {
- this.$message({
+ message: response.msg,
type: "error",
- message: res.data.message,
+ });
+ // Message({
+ // message: response.msg,
+ // type: "error",
+ // duration: 5 * 1000,
+ // });
+ return;
+ }
+
+ if (response.msg != "") {
+ this.$message({
+ message: response.msg,
+ type: "warning",
});
}
- } else {
- this.$message({
- type: "error",
- message: res.msg,
+ this.setCookies(response);
+
+ getPerms().then((res) => {
+ if (res.code == 200) {
+ this.$store.commit("getPermsEntity", res.result);
+
+ if (res.result.length != 0) {
+ sessionStorage.setItem("routerName", "/Synthesis");
+ sessionStorage.setItem("changeSelectStyle", 0);
+ this.$router.push("/");
+ } else {
+ this.$message({
+ message: "璇锋偍鑱旂郴绠＄悊鍛樺垎閰嶈鑹茶彍鍗�",
+ type: "error",
+ });
+ }
+ this.loading = false;
+ } else {
+ this.loading = false;
+ console.log("error submit!!");
+ }
});
- }
- });
+
+ this.loading = false;
+ //璋冪敤褰曟帴鍙�
+ })
+ .catch((response) => {
+ this.loading = false;
+ });
+ //濡傛灉鐧诲綍澶辫触锛岄渶瑕佸埛鏂伴獙璇佺爜鐨�
+ this.$refs.refresh.createdCode();
+ this.validCode = ""; //娓呯┖楠岃瘉鐮佽緭鍏ユ鐨勫唴瀹�
+ } else {
+ this.loading = false;
+ console.log("error submit!!");
+ return false;
}
});
},
- countDown() {
- if (!ms) {
- this.sendTxt = "閲嶆柊鍙戦��";
- clearInterval(this.interval);
- this.interval = null;
- this.disabled = false;
- } else {
- this.sendTxt = `${ms} 绉掑悗閲嶆柊鍙戦�乣;
- ms--;
- }
+ setCookies(res) {
+ 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,
+ autoLogOut: res.result.autoLogOut,
+ };
+ LfPrems = JSON.stringify(LfPrems);
+ localStorage.setItem("LFToken", LfPrems);
},
- checkAdminAndLogin() {
- // 绠＄悊鍛橀獙璇�
- isAdmin({
- phone: this.param.phone,
- }).then((data) => {
- this.changeUserData({
- type: "admin",
- value: data && data.data ? true : false,
- });
- });
+ enterLogin() {
+ document.onkeydown = (e) => {
+ e = window.event || e;
- localStorage.setItem("loginscene", 1);
- this.$router.push({
- path: "/index",
- });
+ if (
+ this.$route.path == "/login" &&
+ (e.code == "Enter" || e.code == "enter" || e.code == "NumpadEnter")
+ ) {
+ //鏈�閲嶈鏈�鍚庤皟鐢�1.鐧诲綍鏍￠獙鏂规硶
+ //this.login();
+ this.submitForm("loginForm");
+ }
+ };
},
+ startURL() {
+ 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.enterLogin();
},
};
</script>
-<style scoped>
-.login-wrap {
- position: relative;
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+.container {
width: 100%;
height: 100%;
- background-image: url(~@/assets/login.png);
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+
+ background: url("../assets/img/login.jpg") no-repeat center;
background-size: 100% 100%;
+ .MapMenu {
+ width: 100%;
+ height: 100%;
+ top: 5%;
+ left: 1%;
+ position: absolute;
+ }
}
-.login-wrap /deep/ .el-input__inner {
- height: 45px;
+.title_img {
+ position: absolute;
+ left: 20%;
+ top: 8%;
+ width: 20%;
+ /* transform: translateX(-50%); */
}
-.login-wrap /deep/ .el-form-item {
- margin-bottom: 30px;
-}
-
-.login-wrap /deep/ .el-tabs__nav {
- margin-left: 30px;
- /* left: 50%; */
-}
-
-.login-wrap /deep/ .el-tabs__nav-wrap::after {
- height: 0;
-}
-
-button {
- height: 45px !important;
- font-size: 15px;
-}
-.ms-title {
+.title_img img {
width: 100%;
- line-height: 50px;
- text-align: center;
- font-size: 20px;
- border-bottom: 1px solid #ddd;
}
-.ms-login {
+.main_img {
+ position: absolute;
+ left: 17%;
+ top: 12%;
+ /* transform: translateX(-50%); */
+}
+.main_img img {
+ width: 100%;
+}
+.login {
+ width: 472px;
+ height: 571px;
position: absolute;
left: 75%;
- top: 50%;
- width: 450px;
- margin: -190px 0 0 -175px;
+ top: 45%;
+ transform: translate(-50%, -40%);
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 8px;
+}
+
+.login_title {
+ margin-top: 47px;
+ margin-left: 48px;
+ font-size: 25px;
+ font-family: Microsoft YaHei;
+ font-weight: bold;
+ color: #3b4d6e;
+ /* background-color: #bfa; */
+}
+.loginForm {
+ margin-top: 61px;
+ margin-left: 48px;
+ /* background-color: #bfa; */
+ width: 385px;
+}
+.el-form-item {
+ /* margin-bottom: 12px; */
+ height: 41px;
+}
+.el-input /deep/ .el-input__inner {
+ /* background: rgba(80, 152, 255, 0.24); */
+ border-color: rgba(0, 0, 0, 0.1);
+ color: #000;
+}
+
+.el-input /deep/ .el-input-group__prepend {
+ border: 0;
+ padding: 0 !important;
+}
+.loginbtn {
+ width: 384px;
+ height: 50px;
+ background: #3b4d6e;
border-radius: 5px;
- background: #fff;
- overflow: hidden;
}
-.ms-content {
- padding: 30px 30px;
-}
-.login-btn {
- text-align: center;
-}
-.login-btn button {
- width: 100%;
- height: 36px;
- margin-bottom: 10px;
-}
-.send {
- cursor: pointer;
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3