windLifecontrolPro/src/views/login/index.vue

<template>
    <div class="loginPic">
        <div class="login_left">
            <p class="titleW">Welcome!</p>
            <p class="title">基于风机发电量全寿命周期管控的研究与应用</p>
            <p class="titleEn">Research and application of full lifecycle control based on wind turbine power generation
            </p>
        </div>
        <div class="login_right">
            <p class="loginTit">账号登录</p>
            <div class="loginUser">
                <el-icon>
                    <UserFilled />
                </el-icon>
                <el-input v-model="inputUser" placeholder="请输入账号">
                </el-input>
            </div>
            <div class="loginMima">
                <el-input type="password" v-model="inputMima" placeholder="请输入密码" @keyup.enter="handleLogin">
                    <template #prepend>
                        <i class="el-input__icon icon-mima" />
                    </template>
                </el-input>
            </div>
            <!-- <div class="loginYanzhengma">
                <el-input type="password" v-model="inputYanzhengma" placeholder="请输入验证码" @keyup.enter="handleLogin">
                    <template #prepend>
                        <i class="el-input__icon icon-yanzhengma" />
                    </template>
                </el-input>
                <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
            </div> -->
            <div class="remeber">
                <el-checkbox v-model="ememberMe" disabled>记住密码</el-checkbox>
                <!-- <p @click="drawerDia = true">账号注册</p> -->
            </div>
            <el-button class="loginBtn" :loading="loading" @click.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
            </el-button>
        </div>
        <!-- <el-drawer v-model="drawerDia" title="账号注册" class="registerdrawer" :direction="direction"
            :before-close="handleClose">
            <div class="register">
                <el-form :model="drawerform" label-width="80px" :rules="rules" size="default" style="max-width: 500px">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="drawerform.username" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="drawerform.password" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="drawerform.name" placeholder="请输入姓名" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="drawerform.gender">
                            <el-radio value="1">男</el-radio>
                            <el-radio value="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="部门" prop="deptname">
                        <el-select v-model="drawerform.deptname" placeholder="请选择部门">
                            <el-option label="部门1" value="shanghai" />
                            <el-option label="部门2" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职位" prop="job">
                        <el-select v-model="drawerform.job" placeholder="请选择职位">
                            <el-option label="主任" value="shanghai" />
                            <el-option label="员工" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="registerBtn" :loading="regisloading" @click.prevent="handleLogin">
                            <span v-if="!regisloading">注 册</span>
                            <span v-else>注 册 中...</span>
                        </el-button>
                        <el-button class="ResetBtn" @click="drawerDia = false">已有账号?去登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer> -->
    </div>
</template>

<script>
    import {
        setToken
    } from '@/utils/auth'
    import {
        ElMessage
    } from "element-plus";
    import {
        apiGetUserInfo,
        toLoginApi,
        apiGetWeather
    } from '@/api/api'
    import {
        apiProjectLogin
    } from '@/api/gengra'
    export default {
        data() {
            return {
                // administrator qweABC123
                inputUser: 'admin',
                inputMima: 'admin123',
                inputYanzhengma: '',
                codeUrl: '',
                ememberMe: true,
                loading: false,
                loginText: '',
                drawerDia: false,
                regisloading: false,
                drawerform: {
                    username: '',
                    password: '',
                    name: '',
                    gender: '1',
                    job: '',
                    deptname: ''
                },
                rules: {
                    username: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 15,
                            message: '长度为3-15位',
                            trigger: 'blur'
                        },
                    ],
                    password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 15,
                            message: '长度为3-15位',
                            trigger: 'blur'
                        },
                    ],
                    name: [{
                            required: true,
                            message: '请输入姓名',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 6,
                            message: '长度为2-6位',
                            trigger: 'blur'
                        },
                    ],
                    job: [{
                        required: true,
                        message: '请选择职位',
                        trigger: 'change',
                    }, ],
                    deptname: [{
                        required: true,
                        message: '请选择部门',
                        trigger: 'change',
                    }, ],
                }
            }
        },
        created() {
            // this.getCode();
        },
        methods: {
            getCode() {
                apiGetUserInfo().then((res => {
                    if (res.msg === "操作成功") {
                        // this.codeUrl = window.URL.createObjectURL(res) // 返回流的形式
                        this.codeUrl = "data:image/gif;base64," + res.img; //返回base64形式
                        this.loginText = this.$utils.strChangeCase(res.text, 5)
                    }
                }))
            },
            handleLogin() {
                if (this.loginText === this.$utils.strChangeCase(this.inputYanzhengma, 5)) {
                    if (this.inputUser && this.inputMima) {
                        this.loading = true
                        // this.toLogin(this.inputUser, this.inputMima)
                        this.toNewLogin(this.inputUser, this.inputMima)
                    } else {
                        ElMessage.error('请输入账号或密码');
                    }
                } else {
                    this.inputYanzhengma = ''
                    this.loading = false
                    ElMessage.error('验证码验证失败，请重新输入');
                    this.getCode()
                }
            },
            //原登录接口---带token
            toLogin(name, pass) {
                let params = {
                    username: name,
                    password: pass
                }
                toLoginApi(params).then(datas => {
                    if (datas && datas.code === 0) {
                        this.loading = false
                        setToken(datas.token)
                        let userObj = {
                            role: '',
                            userId: datas.id
                        }
                        if (datas.role === '0' || datas.role === '1') {
                            userObj.role = 'administrators'
                            window.sessionStorage.setItem('userMessage', JSON.stringify(userObj))
                        } else {
                            userObj.role = 'ordinaryUser'
                            window.sessionStorage.setItem('userMessage', JSON.stringify(userObj))
                        }
                        this.$router.push({
                            path: "/home"
                        })
                    } else {
                        ElMessage.error(datas.msg);
                    }
                })
            },
            //现登录接口---不带token
            toNewLogin(name, pass) {
                let that = this
                let params = {
                    username: name,
                    password: pass
                }
                apiProjectLogin(params).then(datas => {
                    if (datas && datas.code === 0) {
                        setToken(datas.data.accessToken)
                        that.$router.push({
                            path: "/home"
                            // path: "/generatingCap/dataFilter/prepare"
                        })
                    } else {
                        ElMessage.error(datas.msg);
                    }
                })
            }
        }
    }
</script>


<style lang="less">
    @media screen and (max-width: 1200px) {
        .loginPic {
            .login_left {
                display: none;
            }
        }
    }

    .loginPic {
        // position: relative;
        // width: 100%;
        // height: 1080px;
        height: 100vh;
        background-image: url('../../assets/windFramPicture/background1.jpg');
        // background-position: 0 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;

        .login_left {
            position: fixed;
            left: 15%;
            top: 35%;

            p {
                margin-bottom: 0px;
                color: #fff;
                margin-top: 10px;
            }

            .titleW {
                font-size: 33px;
            }

            .title {
                font-size: 33px;
                letter-spacing: 5px;
            }

            .titleEn {
                font-size: 17px;
                letter-spacing: 1px;
            }
        }

        .login_right {
            width: 350px;
            height: 400px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.2);
            position: fixed;
            right: 15%;
            top: 25%;

            .loginTit {
                font-size: 18px;
                text-align: center;
                color: #fff;
                margin: 30px 0;
            }

            .loginUser {
                margin: 0 30px 30px 30px;
                border-bottom: 1px solid #fff;
                display: flex;

                .el-icon {
                    font-size: 26px;
                    color: #fff;
                }

                .el-input {
                    border: 0 solid transparent;

                    .el-input__wrapper {
                        background: transparent;
                        box-shadow: none;

                        .el-input__inner,
                        .el-input__inner:focus {
                            background: none;
                            border: none !important;
                            color: #fff;
                            height: 30px;
                            width: 100%;
                            font-size: 14px;
                        }
                    }
                }
            }

            .loginMima {
                margin: 0 30px 30px 30px;
                border-bottom: 1px solid #fff;

                .el-input {
                    .el-input__wrapper {
                        background: transparent;
                        box-shadow: none;
                    }

                    .el-input__inner {
                        background: none;
                        border: none;
                        color: #fff;
                        height: 30px;
                        width: 100%;
                    }

                    .el-input-group__prepend {
                        background: transparent;
                        box-shadow: none;
                        width: 28px;
                        padding: 0;

                        .icon-mima {
                            width: 28px;
                            height: 28px;
                            display: inline-block;
                            background-image: url(../../assets/iconNeed/iconFont.png);
                            background-position: -44px -70px;
                            position: absolute;
                            left: -10px;
                        }
                    }
                }
            }

            .loginYanzhengma {
                display: flex;
                margin: 0 30px 0 30px;
                border-bottom: 1px solid #fff;

                .login-code {
                    width: 100px;
                    height: 40px;

                    .login-code-img {
                        width: 100px;
                    }
                }

                .el-input {
                    .el-input__wrapper {
                        background: transparent;
                        box-shadow: none;
                    }

                    .el-input__inner {
                        background: none;
                        border: none;
                        color: #fff;
                        height: 30px;
                        width: 100%;
                    }

                    .el-input-group__prepend {
                        background: transparent;
                        box-shadow: none;
                        width: 28px;
                        padding: 0;

                        .icon-yanzhengma {
                            width: 27px;
                            height: 24px;
                            display: inline-block;
                            background-image: url(../../assets/iconNeed/iconFont.png);
                            background-position: -74px -70px;
                            position: absolute;
                            left: -10px;
                        }
                    }
                }
            }

            .remeber {
                margin: 0 30px;
                display: flex;
                justify-content: space-between;

                .el-checkbox {
                    .el-checkbox__label {
                        color: #fff;
                        font-size: 12px;
                        padding-left: 6px;
                    }
                }

                p {
                    cursor: pointer;
                    color: #fff;
                    padding-right: 6px;
                    font-size: 12px;
                    position: relative;
                    top: 3px;
                    font-weight: 600;
                }
            }

            .loginBtn {
                position: absolute;
                left: 30px;
                bottom: 35px;
                width: 294px;
                height: 34px;
                background-image: linear-gradient(to right, #5a91f6, #6656ff);
                border: none;
                color: #fff;
            }

            input::-webkit-input-placeholder {
                /*WebKit browsers*/
                color: #fff;
            }

            input::-moz-input-placeholder {
                /*Mozilla Firefox*/
                color: #fff;
            }

            input::-ms-input-placeholder {
                /*Internet Explorer*/
                color: #fff;
            }
        }

        .loginFooter {
            height: 40px;
            line-height: 40px;
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
            font-family: Arial;
            font-size: 12px;
            letter-spacing: 1px;
        }

        .el-overlay {
            .registerdrawer {
                .register {
                    margin-top: 20px;

                    .el-form {
                        .el-form-item--default {
                            margin-bottom: 25px;
                        }

                        .el-input__wrapper {
                            background: transparent !important;
                        }

                        .el-input .el-input__wrapper .el-input__inner {
                            color: #5c5c5c !important;
                        }

                        .el-radio-group .el-radio .el-radio__label {
                            color: #000;
                        }

                        .el-select .el-select__wrapper {
                            background: transparent !important;
                        }

                        .el-select .el-select__wrapper .el-select__placeholder {
                            color: #ababab !important;
                        }

                        .registerBtn {
                            width: 500px;
                            height: 34px;
                            background-image: linear-gradient(to right, #5a91f6, #6656ff);
                            border: none;
                            color: #fff;
                            margin-top: 10px;
                        }

                        .ResetBtn {
                            width: 500px;
                            height: 34px;
                            margin: 15px 0 0 0;
                        }
                    }
                }
            }
        }

    }
</style>

<style lang="less" scoped>
    // .el-overlay {
    //     .registerdrawer {
    //         .register {
    //             margin-top: 20px;

    //             .el-form {
    //                 .el-form-item--default {
    //                     margin-bottom: 25px;
    //                 }

    //                 .el-input__wrapper {
    //                     background: transparent !important;
    //                 }

    //                 .el-input .el-input__wrapper .el-input__inner {
    //                     color: #5c5c5c !important;
    //                 }

    //                 .el-radio-group .el-radio .el-radio__label {
    //                     color: #000;
    //                 }

    //                 .el-select .el-select__wrapper {
    //                     background: transparent !important;
    //                 }

    //                 .el-select .el-select__wrapper .el-select__placeholder {
    //                     color: #ababab !important;
    //                 }



    //                 .registerBtn {
    //                     width: 500px;
    //                     height: 34px;
    //                     background-image: linear-gradient(to right, #5a91f6, #6656ff);
    //                     border: none;
    //                     color: #fff;
    //                     margin-top: 10px;
    //                 }

    //                 .ResetBtn {
    //                     width: 500px;
    //                     height: 34px;
    //                     margin: 15px 0 0 0;
    //                 }
    //             }
    //         }
    //     }
    // }

    // .el-popper .el-select-dropdown__wrap {
    //     background-color: #fff !important;
    //     border: 1px solid #fff !important;
    // }

    // .el-popper .el-select-dropdown__wrap .el-select-dropdown__item {
    //     color: #5c5c5c;
    // }
</style>