fj-dc-ui/.svn/pristine/f6/f6539d501d485996031abe4e7510816feed71cdc.svn-base

<template>
    <div class="login">
        <div class="login_content" style="
            box-shadow: 0px 0px 13px 11px rgba(0, 0, 0, 0.08);">
            <h2 style="text-align:center;margin-bottom: 20px;font-size:28px"><img
                    src="../../assets/images/titleFujian.png" alt=""></h2>
            <div class="login_content_left">
                <div class="province_logo">
                    <!-- <p>福建水利监督</p> -->
                    <img src="../../assets/images/province_logo.png" alt="">
                </div>
                <span class="left_hr"></span>
                <div class="download_app">
                    <p>扫码下载APP</p>
                    <img src="../../assets/images/appQrcodeFj.png" alt="">
                </div>
                <div class="llq_xz">
                    <svg t="1590743046917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2942" width="28" height="28"><path d="M382.4 514.4c0 69.6 57.6 127.2 127.2 127.2S636.8 584 636.8 514.4s-57.6-127.2-127.2-127.2-127.2 57.6-127.2 127.2z" fill="#BBBBBB" p-id="2943"></path><path d="M509.6 320h400.8C838.4 171.2 687.2 70.4 512 70.4c-127.2 0-242.4 52.8-321.6 139.2l136.8 240C353.6 375.2 425.6 320 509.6 320z" fill="#F75B60" p-id="2944"></path><path d="M548 704c-12 2.4-26.4 4.8-38.4 4.8-69.6 0-129.6-36-163.2-88.8L144.8 267.2c-48 69.6-74.4 153.6-74.4 244.8 0 213.6 151.2 391.2 352.8 432l-9.6-4.8L548 704z" fill="#00D19C" p-id="2945"></path><path d="M934.4 387.2H656c28.8 33.6 48 79.2 48 127.2 0 38.4-9.6 72-28.8 103.2l-194.4 336c9.6 0 21.6 2.4 31.2 2.4 244.8 0 441.6-196.8 441.6-441.6 0-45.6-7.2-88.8-19.2-127.2z" fill="#FCA253" p-id="2946"></path></svg>
                    <a href="http://pdc.goldenwater.com.cn/tools/chrome.exe" class="llq_text">浏览器下载</a>
                </div>
            </div>
            <div class="login_content_right">
                <div class="system_type_tab">
                    <span :class="{'tabActived': tabActived == 2}" @click="changeSystem(2)">水利稽察</span>
                    <span :class="{'tabActived': tabActived == 1}" @click="changeSystem(1)">水利督查</span>
                </div>
                <div class="login_types">
                    <div class="item" v-show="loginType==1 || loginType==2">
                        <i class="el-icon-s-custom"></i>
                        <el-input v-model="account" :placeholder="accountPlaceHolder" @keyup.enter.native="toLogin"
                                  size="medium" v-if="loginType==1 || loginType==2"></el-input>
                    </div>
                    <!--短信验证码图片验证-->
                    <div class="item authCode"
                         style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;"
                         v-show="loginType==1">
                        <i>
                            <svg t="1580975211684" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1275" width="18" height="18">
                                <path d="M511.92574 1023.975247C357.959389 1023.975247 71.50029 794.49855 71.50029 577.448076V163.162251c0-10.049894 8.416167-18.16902 18.837362-18.379424l24.95146-0.420808c0.953007 0 98.766196-1.967898 199.599304-41.895185 103.481725-40.843164 170.179849-87.936569 170.885322-88.419261l14.691162-10.421195a19.86463 19.86463 0 0 1 11.398956-3.601625 19.480951 19.480951 0 0 1 11.324696 3.539741l14.975826 10.507832c0.680719 0.482692 67.440727 47.526591 170.798685 88.419262 100.932121 39.927287 198.74531 41.895185 199.747825 41.895184l24.753432 0.420809c10.433572 0.210404 18.824985 8.32953 18.824986 18.379423l0.210404 414.285825c0 217.02572-286.508606 446.527171-440.6111 446.527171z m372.625797-812.568556c-37.860375-2.846645-117.516921-12.624251-200.267646-45.385419-84.557726-33.417134-146.725972-71.005221-172.358151-87.602398-25.557919 16.535293-87.763295 54.135757-172.296268 87.602398-82.602205 32.686908-162.03597 42.464514-200.416167 45.385419v366.041385c0 170.216979 249.576484 378.281957 372.712435 378.281957 47.724618 0 140.723264-38.726745 232.137691-123.767163 88.12222-81.909108 140.723264-177.07368 140.723264-254.490041z m-407.948946 435.660414a33.305744 33.305744 0 0 1-23.899439 10.049894 33.738929 33.738929 0 0 1-23.998453-10.037517l-101.674724-102.330691a34.345388 34.345388 0 0 1 0-48.269193 33.664668 33.664668 0 0 1 47.935022 0l77.738155 78.183717 196.269967-197.69329a33.590408 33.590408 0 0 1 47.910269 0 34.18449 34.18449 0 0 1 0 48.269194z m0 0"
                                      p-id="1276"></path>
                            </svg>
                        </i>
                        <el-input style="flex-basis:100%;" v-model="vCode" placeholder="请输入图片验证码" size="medium"
                                  v-if="loginType==1" maxlength="4">
                            <img slot="append" :src="imgUrl" alt=""
                                 style="width:112px; height: 34px; cursor: pointer; vertical-align: middle;"
                                 @click="imgClick">
                        </el-input>
                    </div>
                    <div class="item" v-show="loginType==1">
                        <i class="el-icon-lock"></i>
                        <el-input v-model="password" :placeholder="passwordPlaceHolder" @keyup.enter.native="toLogin"
                                  size="medium" v-if="loginType==1" maxlength="6">
                            <el-button slot="append" size="medium" plain style="flex-basis:20%" @click="getMessage"
                                       :disabled='messageDisable'>{{messageButton}}
                            </el-button>
                        </el-input>
                    </div>
                    <div class="item" v-show="loginType==3" style="padding-top: 20px;">
                        <canvas id="canvas" style="width:200px;height:200px;"></canvas>
                    </div>
                    <div class="item" v-if="loginType != 3">
                        <el-button type="primary" round @click="toLogin">登 录</el-button>
                    </div>
                </div>
                <p class="login_text"><span></span> 登录方式 <span></span></p>
                <div class="item login_item"
                     style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
                    <div :class="{'item': true,'active': loginType == 3}">
                        <el-button type="text" icon="iconfont watericon1-erweima1 loginTypeButton" size="default"
                                   @click="loginTypeChange(3)"></el-button>
                        <p>二维码</p>
                    </div>
                    <div :class="{'item': true,'active': loginType == 1}">
                        <el-button type="text" icon="iconfont watericon1-yanzhengma loginTypeButton" size="default"
                                   @click="loginTypeChange(1)"></el-button>
                        <p>验证码</p>
                    </div>
                </div>
            </div>
            <!--<div class="systemNotice">-->
                <!--&lt;!&ndash;名字&ndash;&gt;-->
                <!--<span class="announcement">系统公告：</span>-->
            <!--</div>-->
            <!--<div class="PackagingShell" id="PackagingShell">-->
                <!--&lt;!&ndash;主题内容，展示内容区域&ndash;&gt;-->
                <!--<div id="viewBox">-->
                    <!--&lt;!&ndash;名字&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="announcement">系统公告：</span></div>&ndash;&gt;-->
                    <!--&lt;!&ndash;文本主体&ndash;&gt;-->
                    <!--<span id="marquee">{{text}}</span>-->
                    <!--&lt;!&ndash;文本副本，实现无缝滚动&ndash;&gt;-->
                    <!--<span id="transcript"></span>-->
                <!--</div>-->
                <!--&lt;!&ndash;隐藏块，用于获取展示文本宽度&ndash;&gt;-->
                <!--<div id="hide">{{text}}</div>-->
            <!--</div>-->
        </div>
    </div>
</template>
<script>
    import {sendMessage, loginWithMessage, qrCodeSubmit, qrCodeLogin} from '@api/loginAPI.js'
    import request from '@util/gw_ajax_request'

    const QRCode = require('qrcode');
    const uuidv4 = require('uuid/v4');
    export default {
        components: {},
        computed: {
            changeData() {
                const {account, vCode} = this;
                return {
                    account,
                    vCode
                }
            }
        },
        data() {
            return {
                account: '',
                password: '',
                vCode: '',
                messageButton: '获取验证码',
                loginTitle: 'APP扫码登录',
                messageDisable: true,
                loginType: 3,
                accountPlaceHolder: '请输入手机号码',
                passwordPlaceHolder: '请输入验证码',
                qrUuid: '',
                pubKey: '',
                rememberPwd: false,
                tabActived: 1,
                countTimeNum: 0,
                imgUrl: null,
                text: '', // 内容
                textWidth: 0, // 字符长度
                isScroll: false // 是否滚动
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.imgClick();
                this.getQrCode();
                localStorage.setItem('ownApp', this.tabActived);
                // this.move();
            })

        },
        methods: {
            toLogin() {
                if (this.loginType == 1) {
                    this.toLoginWithMessage();
                }
            },
            toLoginWithMessage() {
                if (!this.account) {
                    this.$message('请输入手机号');
                    return
                }
                if (!this.vCode) {
                    this.$message('请输入图片验证码');
                    return
                }
                if (!this.password) {
                    this.$message('请输入验证码');
                    return
                }
                try {
                    loginWithMessage(this.account, this.password).then((res) => {
                        console.log(res)
                        if (res.success == true) {
                            let token = res.data.token;
                            let userid = res.data.guid;
                            let loginName = res.data.persName;
                            let guid = res.data.orgId;
                            let orgNm = res.data.orgNm;
                            let accessToken = res.accessToken;  //token是否过期
                            localStorage.setItem('token', token);
                            localStorage.setItem('userid', userid);
                            localStorage.setItem('account', loginName);
                            localStorage.setItem('guid', guid);
                            localStorage.setItem('orgNm', orgNm);
                            localStorage.setItem('accessToken', accessToken);
                            let persType = res.data.persType;
                            let isAdmin = res.data.permission;
                            localStorage.setItem('persType', persType);
                            let allNode = JSON.stringify(res.data.allNode);//当前用户所在组信息
                            let allOrg = JSON.stringify(res.data.allOrg);
                            localStorage.setItem('isAdmin', isAdmin);
                            let orgId = res.data.orgId;
                            localStorage.setItem('orgId', orgId);
                            localStorage.setItem('allOrg', allOrg);
                            localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId);  //省级当前的机构id
                            localStorage.setItem("currentRlcode", res.data.defaultOrg.rlcode);  //省级当前的行政区划编码
                            // 改变全局adcode状态
                            this.$store.commit('changeAdCode', res.data.defaultOrg.rlcode);
                            localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm);  //省级当前的机构名称
                            localStorage.setItem('allNode', allNode);
                            this.$message.success({
                                message: '登录成功',
                                duration: 700
                            })
                            this.$router.push('/')
                        } else {
                            this.$message(res.message)
                        }
                    }, (err) => {
                        this.$message.error({
                            message: '用户名或验证码错误',
                            duration: 700
                        })
                    })
                } catch (e) {

                }

            },
            getMessage: function () {
                try {
                    sendMessage(this.account, this.imgcodeid, this.vCode).then(
                        (res) => {
                            this.messageDisable = true;
                            if (res.success) {
                                this.messageButton = '已发送(' + 60 + ')';
                                this.countTime(59);
                            } else {
                                this.$message.warning(res.message);
                                this.messageDisable = false;
                                this.messageButton = '发送验证码';
                            }
                        },
                        (err) => {
                            this.messageDisable = false;
                            this.messageButton = '发送验证码'
                        },
                    )
                } catch (e) {
                    _self.messageDisable = false;
                    _self.messageButton = '发送验证码'
                }

            },
            countTime: function (countTime) {
                var _self = this;
                setTimeout(function () {
                    if (countTime > 0) {
                        _self.messageButton = '已发送(' + countTime + ')';
                        countTime--;
                        _self.countTime(countTime);
                    } else {
                        _self.messageDisable = false;
                        _self.messageButton = '发送验证码'
                    }
                }, 1000);
            },
            loginTypeChange: function (loginType) {
                if (this.tabActived == '2') {
                    localStorage.setItem('ownApp', '2');
                } else {
                    localStorage.setItem('ownApp', '1');
                }
                this.loginType = loginType;
                if (this.loginType == 1) {
                    this.loginTitle = '短信验证码登录';
                    this.accountPlaceHolder = '请输入手机号码';
                    this.passwordPlaceHolder = '请输入验证码';
                } else {
                    this.loginTitle = 'APP扫码登录';
                    this.getQrCode();
                }
            },
            getQrCode: function () {
                var canvas = document.getElementById('canvas');
                let _self = this;
                this.qrUuid = uuidv4();
                console.log(this.qrUuid);

                qrCodeSubmit(this.qrUuid).then((res) => {
                    if (res.success) {
                        _self.qrUuid = res.data.key;
                        setTimeout(function () {
                            QRCode.toCanvas(canvas, _self.qrUuid, function (error) {
                                if (error) console.error(error);
                                console.log('success!');
                                _self.toLoginWithQrCode();
                            })
                        }, 1000);
                    }
                }, (err) => {
                });
            },
            toLoginWithQrCode: function () {
                var _self = this;
                let qrCode = _self.qrUuid;
                let logtyp = this.loginType;
                let timer = setTimeout(function () {
                    _self.countTimeNum++;
                    if (_self.countTimeNum > 20) {
                        clearTimeout(timer);
                        _self.countTimeNum = 0;
                    } else {
                        if (logtyp == 3) {
                            console.log('调用二维码登录');
                            qrCodeLogin(qrCode).then(
                                (res) => {
                                    console.log(res);
                                    if (res.success) {
                                        let userid = res.data.guid;
                                        let loginName = res.data.persName;
                                        let guid = res.data.orgId;
                                        let orgNm = res.data.orgNm;
                                        let isAdmin = res.data.permission;
                                        let allNode = JSON.stringify(res.data.allNode);//当前用户所在组信息
                                        let allOrg = JSON.stringify(res.data.allOrg);
                                        let persType = res.data.persType;
                                        let accessToken = res.accessToken;  //token是否过期
                                        localStorage.setItem('userid', userid);
                                        localStorage.setItem('account', loginName);
                                        localStorage.setItem('guid', guid);
                                        localStorage.setItem('orgNm', orgNm);
                                        localStorage.setItem('isAdmin', isAdmin);
                                        localStorage.setItem('persType', persType);
                                        localStorage.setItem('accessToken', accessToken);
                                        let orgId = res.data.orgId;
                                        localStorage.setItem('orgId', orgId);
                                        localStorage.setItem('allOrg', allOrg);
                                        localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId);  //省级当前的机构id
                                        localStorage.setItem("currentRlcode", res.data.defaultOrg.rlcode);  //省级当前的行政区划编码
                                        // 改变全局adcode状态
                                        _self.$store.commit('changeAdCode', res.data.defaultOrg.rlcode)
                                        localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm);  //省级当前的机构名称
                                        localStorage.setItem('allNode', allNode);
                                        _self.$message.success({
                                            message: '登录成功',
                                            duration: 700
                                        });
                                        _self.$router.push('/')
                                    } else {
                                        _self.toLoginWithQrCode();

                                    }
                                }
                            );
                        }
                    }
                }, 3000);
            },
            // 选择登入系统
            changeSystem(val) {
                this.tabActived = val;
                localStorage.setItem('ownApp', val)
            },
            imgClick() {
                this.imgUrl = null;
                request.get(`/bis/insp/getCaptchaImage`)
                    .then(res => {
                        this.$nextTick(() => {
                            this.imgcodeid = res.data.imgCodeId;
                            this.imgUrl = "data:image/jpg;base64," + res.data.img;
                        })
                    })
                    .catch(err => {

                    })
            },
            move () {
                // 首先获取整个内容的宽度,(展示内容会超出隐藏,无法通过获取盒子宽度取到实际的内容宽度)
                // 所以专门造了一个 div 块来放内容,隐藏起来 (无法用根据字体内容来计算宽度的方法,存在误差,当内容较多
                // 的时候误差会相对较大)
                let width = document.getElementById('hide').getBoundingClientRect().width
                // 获取展示块盒模型宽度
                let BoxWidth = document.getElementById('PackagingShell').offsetWidth
                // 获取内容展示宽
                let viewBox = document.getElementById('viewBox')
                // 判断内容是否超长
                if ((BoxWidth - width) < 0) {
                    // 内容超长,则获取抄本元素
                    let transcript = document.getElementById('transcript')
                    // 抄本元素内容填充
                    transcript.innerText = this.text
                    // 设定抄本和主题之间的间距
                    transcript.style.marginLeft = '200px'
                } else {
                    // 没有超长则return,不做任何操作
                    return
                }
                // 设置初始位移距离
                let distance = 0
                // 移动函数,通过定时器实现
                setInterval(function () {
                    // 位移内用记录是是递减,此处的 1 控制移动变量 s
                    distance = distance - 1
                    // 判断是否整个内容移动完
                    if (-distance >= width) {
                        // 若移动完,则重新设定位移值,此处赋值200是正好把 上面设置的块间距  200px 也加入移动范围,实现移动完无缝跳转
                        distance = 150
                    }
                    // 实时设置位移距离
                    viewBox.style.transform = 'translateX(' + distance + 'px)'
                }, 27) // 移动时间间隔t   s和t 共同决定移动速度
            }
        },
        watch: {
            changeData: {
                handler: function (newval, oldval) {
                    if (newval) {
                        for (var key in newval) {
                            if (!newval[key]) {
                                this.messageDisable = true;
                                return;
                            } else {
                                this.messageDisable = false;
                            }
                        }
                    }
                },
                deep: true
            }
        }
    }
</script>
<style lang="scss">
    @import url("/src/assets/iconfont/iconfont.css");

    .login {
        width: 100%;
        height: 100vh;
        background-image: url('../../assets/images/login_bj1.png');
        background-size: 100% 100%;
        background-color: #0077c6;
        overflow: hidden;
        font-family: '微软雅黑';
        .llq_xz {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .llq_text{
            margin-left: 4px;
            text-decoration: none;
            font-size: 14px;
        }
    }

    .login > p {
        font-size: 28px;
        color: #333;
        text-align: center;
        margin-top: 22vh;
        letter-spacing: 5px;
    }

    .login .login_content {
        width: 860px;
        margin: 40px auto;
        margin-top: 20vh;
        color: #333;
        padding: 50px 30px;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;

        .login_content_left {
            width: 35%;
            float: left;
            text-align: center;
            border-right: dashed 1px #B2B2B2;
            padding: 10px 10px 10px 0;

            .left_hr {
                display: block;
                height: 1px;
                margin: 0 10px 30px;
                background-color: #B2B2B2;
            }

            .province_logo {
                margin-bottom: 30px;
                font-size: 20px;
                font-weight: bold;

                img {
                    width: 130px;
                }
            }

            .download_app {
                font-size: 15px;
            }

            .download_app img {
                width: 120px;
            }
        }

        .login_content_right {
            width: 52%;
            float: right;
            padding: 10px 30px;
            text-align: center;

            .system_type_tab {
                width: 100%;
                border: solid 1px #D7D7D7;
                border-radius: 8px;
                padding: 8px 20px;
                font-size: 18px;
                color: #999;
                box-sizing: border-box;
                margin-bottom: 20px;

                span {
                    display: inline-block;
                    width: 48%;

                    &:first-child {
                        border-right: solid 1px #D6D3D6;
                    }
                }

                span {
                    cursor: pointer;
                }

                .tabActived {
                    color: #3D9AFE;
                    font-weight: bold;
                }
            }

            .login_types {
                width: 100%;
                height: 210px;

                .item {
                    position: relative;

                    i {
                        position: absolute;
                        top: 10px;
                        left: 2px;
                        color: #666;
                        font-size: 18px;
                    }
                }

                .el-input-group__append {
                    background-color: transparent;
                    border: none;
                    border-bottom: 1px solid #DCDFE6;
                }
            }

            .item {
                width: 100%;
            }

            .login_text {
                font-size: 12px;
                color: #666;

                span {
                    display: inline-block;
                    width: 30%;
                    height: 1px;
                    margin: 0 10px;
                    background-color: #aaa;
                    vertical-align: middle;
                }
            }

            .login_item {
                p {
                    font-size: 12px;
                    color: #666;
                }

                .el-button--text {
                    color: #666;
                }

                .item:hover {
                    .el-button--text, p {
                        color: #66b1ff;
                    }
                }

                .item.active .el-button--text, .item.active p {
                    color: #66b1ff;
                }
            }

            input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
                background-color: transparent;
                background-image: none;
                transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
            }

            .el-input__inner {
                padding-left: 30px;
                background: transparent;
                border-top: none;
                border-left: none;
                border-right: none;
            }
        }
    }

    .login .login_content .login_content_left p {
        text-align: center;
        margin-bottom: 20px;
    }

    .login .login_content .item {
        margin-bottom: 20px;
        width: 80%;
    }

    .login .el-input {
        width: 100%;
    }

    .login .el-button--mini, .el-button--mini.is-round {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }

    .loginTypeChange:hover {
        color: blue;
        cursor: pointer;
    }

    .loginTypeButton {
        font-size: xx-large !important;
    }

    .authCode .el-input-group__append, .el-input-group__prepend {
        padding: 0 !important;
    }

    @media screen and (max-width: 1600px) {
        .login .login_content {
            width: 660px;
            margin: 40px auto;
            margin-top: 10vh;
            padding: 36px 20px;

            h2 {
                img {
                    width: 70%;
                }
            }
        }
        .login .login_content .item {
            margin-bottom: 10px;
        }
        .login .el-button--mini, .el-button--mini.is-round {
            margin-top: 10px;
        }
    }
    /*公告滚动盒子样式*/
    .PackagingShell {
        width: 85%; /*滚动部分宽度*/
        overflow: hidden; /*超出部分隐藏*/
        font-size: 24px;
        font-weight: bold;
        color: #f00;
        position: absolute;
        top: 10px;
        left: 10%;
    }
    .systemNotice{
        font-size: 24px;
        font-weight: bold;
        color: #f00;
        position: absolute;
        top: 10px;
        left: 4%;
    }

    /*主题内容块设置*/
    #viewBox {
        /*设置内容框不可换行,确保两个div块始终在同一行*/
        white-space: nowrap;
    }

    /*内容块设置*/
    #marquee {
        /*设置内容块不可换行*/
        white-space: nowrap;
    }

    /*获取宽度的块，用z-index隐藏*/
    #hide {
        position: absolute;
        z-index: -999;
        top: -9999px;
        white-space: nowrap;
    }
</style>