提交内容

whychdw

2021-06-23 3f2ef1d99fe0f676d94771e5dcdb716aed6c4ff2

提交内容

 src/assets/js/apis/pageSetting/realTime.js

@@ -82,4 +82,11 @@
            data: 'json='+JSON.stringify({categoryId:6})
        });
    },
    searchName() {
        return axios({
            method: 'post',
            url: 'PageParamAction!findByCategoryId',
            data: 'json='+JSON.stringify({categoryId:5})
        });
    },
}

 src/components/PageHeader.vue

@@ -6,7 +6,7 @@
                    <img class="header-first-logo" :src="logoUrl" v-if="logoConfig.value">
                    <!--                    <img class="header-first-logo" src="../assets/images/gjdx-log.png">-->
                    <span class="header-carve-up" v-if="logoConfig.value"></span>
                    <span>通信电源监控主站</span>
                    <span>{{ platformName }}</span>
                    <!--          <span>综合电力监控平台</span>-->
                    <span class="sys-version">{{ version }}</span>
                </div>
@@ -140,6 +140,7 @@
            alarmAlert
        },
        data() {
            let platformName = sessionStorage.getItem('platformName');
            return {
                alarmAlertStatus: false,
                skinActive: 'science-blue',
@@ -219,7 +220,8 @@
                timer: new Timeout(),
                pwd: {
                    show: false,
                }
                },
                platformName: platformName?platformName: '蓄电池后台监控管理平台',
            }
        },
        methods: {

 src/pages/login.vue

@@ -1,474 +1,493 @@
<template>
  <div class="login_container">
    <div class="sliderCon">
      <div class="logo">
        <img src="../assets/images/yuanchang_logo2.png" class="logoImg">
          通信电源监控主站
      </div>
      <img src="../assets/images/login-img.png" class="picImg">
    <div class="login_container">
        <div class="sliderCon">
            <div class="logo">
                <img src="../assets/images/yuanchang_logo2.png" class="logoImg">
                {{ platformName }}
            </div>
            <img src="../assets/images/login-img.png" class="picImg">
        </div>
        <div class="login_box">
            <div class="title">用户登录</div>
            <!--  登录表单区 -->
            <el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input class="input" v-model="loginForm.username" prefix-icon="el-icon-user"
                              @keyup.enter.native.stop="onSubmit"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
                              @keyup.enter.native.stop="onSubmit"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
                </el-form-item>
                <el-form-item v-if="!register">
                    <a href="javascript:;" @click="license.show = true"
                       class="regBtn">平台注册</a>
                </el-form-item>
                <el-form-item v-else>
                    <a href="javascript:;" class="regBtn">已激活</a>
                </el-form-item>
            </el-form>
        </div>
        <!-- license弹框输入面板 -->
        <el-dialog
            title="平台注册提示" width="600px"
            :visible.sync="license.show"
            :close-on-click-modal="false" top="0"
            class="dialog-center" :modal-append-to-body="false">
            <add-license v-if="license.show" :visible.sync="license.show"></add-license>
        </el-dialog>
        <!-- 人脸登陆 -->
        <el-dialog
            title="人脸登陆" width="480px"
            :visible.sync="face.show"
            :close-on-click-modal="false" top="0"
            class="dialog-center" :modal-append-to-body="false">
            <face-login v-if="face.show" :visible.sync="face.show" @success="checkServeLicense"></face-login>
        </el-dialog>
        <!-- 功能描述 -->
        <el-dialog
            title="配置清单" width="960px"
            :visible.sync="config.show"
            :close-on-click-modal="false" top="0"
            class="dialog-center" :modal-append-to-body="false">
            <config-info></config-info>
        </el-dialog>
        <!--  uKey的验证 -->
        <el-dialog
            title="uKey绑定" width="750px"
            :visible.sync="uKey.show"
            :close-on-click-modal="false" top="0"
            class="dialog-center" :modal-append-to-body="false">
            <ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
        </el-dialog>
        <div class="tools-container">
            <div class="tools-item" :class="uKeyState" v-if="$CFG.uKey.value" @click="uKey.show=true">
                <span class="iconfont el-icon-CombinedShape"></span>
            </div>
            <div class="tools-item" v-if="$CFG.face.value" @click="face.show=true">
                <span class="iconfont el-icon-renlianshibie"></span>
            </div>
            <div class="tools-item" @click="config.show=true">
                <span class="iconfont el-icon-peizhi"></span>
            </div>
        </div>
    </div>
    <div class="login_box">
      <div class="title">用户登录</div>
      <!--  登录表单区 -->
      <el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input class="input" v-model="loginForm.username" prefix-icon="el-icon-user"
                    @keyup.enter.native.stop="onSubmit"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
                    @keyup.enter.native.stop="onSubmit"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
        </el-form-item>
        <el-form-item v-if="!register">
          <a href="javascript:;" @click="license.show = true"
             class="regBtn">平台注册</a>
        </el-form-item>
        <el-form-item v-else>
          <a href="javascript:;" class="regBtn">已激活</a>
        </el-form-item>
      </el-form>
    </div>
    <!-- license弹框输入面板 -->
    <el-dialog
        title="平台注册提示" width="600px"
        :visible.sync="license.show"
        :close-on-click-modal="false" top="0"
        class="dialog-center" :modal-append-to-body="false">
      <add-license v-if="license.show" :visible.sync="license.show"></add-license>
    </el-dialog>
    <!-- 人脸登陆 -->
    <el-dialog
        title="人脸登陆" width="480px"
        :visible.sync="face.show"
        :close-on-click-modal="false" top="0"
        class="dialog-center" :modal-append-to-body="false">
      <face-login v-if="face.show" :visible.sync="face.show" @success="checkServeLicense"></face-login>
    </el-dialog>
    <!-- 功能描述 -->
    <el-dialog
        title="配置清单" width="960px"
        :visible.sync="config.show"
        :close-on-click-modal="false" top="0"
        class="dialog-center" :modal-append-to-body="false">
      <config-info></config-info>
    </el-dialog>
    <!--  uKey的验证 -->
    <el-dialog
        title="uKey绑定" width="750px"
        :visible.sync="uKey.show"
        :close-on-click-modal="false" top="0"
        class="dialog-center" :modal-append-to-body="false">
      <ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
    </el-dialog>
    <div class="tools-container">
      <div class="tools-item" :class="uKeyState" v-if="$CFG.uKey.value" @click="uKey.show=true">
        <span class="iconfont el-icon-CombinedShape"></span>
      </div>
      <div class="tools-item" v-if="$CFG.face.value" @click="face.show=true">
        <span class="iconfont el-icon-renlianshibie"></span>
      </div>
      <div class="tools-item" @click="config.show=true">
        <span class="iconfont el-icon-peizhi"></span>
      </div>
    </div>
  </div>
</template>

<script>
import AddLicense from "@/pages/AddLicense";
import FaceLogin from '@/components/face/FaceLogin';
import {
  login,
  initDBPool,
  checkLoginSession, uKeyLogin
    login,
    initDBPool,
    checkLoginSession, uKeyLogin
} from "@/assets/js/api";
import ConfigInfo from "@/pages/configInfo";
import UkeyBind from "@/components/UKeyBind";

export default {
  components: {
    UkeyBind,
    ConfigInfo,
    AddLicense,
    FaceLogin
  },
  data() {
    return {
      register: false,
      loading: false,
      labelPosition: "right" /*  登录表单 */,
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      /* 登录表单el-form 的 数据绑定 */
      loginForm: {
        username: "",
        password: ""
      },
      license: {
        show: false
      },
      face: {
        show: false
      },
      config: {
        show: false
      },
      uKey: {
        show: false,
      }
    };
  },
  methods: {
    /* 初始化连接池  检测后台session*/
    async woData() {
      const [pool, sessions] = await Promise.all([initDBPool, checkLoginSession])
      /*   console.log('pool',pool);
          console.log('sessions',sessions); */
    components: {
        UkeyBind,
        ConfigInfo,
        AddLicense,
        FaceLogin
    },
    onSubmit() {
      if (!this.register && process.env.NODE_ENV != "dev") {
        this.$layer.msg("平台未注册，请先注册平台！");
        return;
      }
      if (this.loading) {
        return;
      }
    data() {
        return {
            register: false,
            loading: false,
            labelPosition: "right" /*  登录表单 */,
            formLabelAlign: {
                name: "",
                region: "",
                type: ""
            },
            /* 登录表单el-form 的 数据绑定 */
            loginForm: {
                username: "",
                password: ""
            },
            license: {
                show: false
            },
            face: {
                show: false
            },
            config: {
                show: false
            },
            uKey: {
                show: false,
            },
            platformName: "",
        };
    },
    created() {
        this.searchPlatformName();
    },
    methods: {
        /* 初始化连接池  检测后台session*/
        async woData() {
            const [pool, sessions] = await Promise.all([initDBPool, checkLoginSession])
            /*   console.log('pool',pool);
                console.log('sessions',sessions); */
        },
        onSubmit() {
            if (!this.register && process.env.NODE_ENV != "dev") {
                this.$layer.msg("平台未注册，请先注册平台！");
                return;
            }
            if (this.loading) {
                return;
            }

      if (this.$CFG.uKey.value) {
        this.uKeyLogin();
      } else {
        this.normalLogin();
      }
    },
    normalLogin() {
      // 校验用户
      if (this.loginForm.username && this.loginForm.password) {
        // 开启等待框
        this.loading = true;
        login(this.loginForm.username, this.loginForm.password).then(res => {
          // 对结果进行处理
          this.handleLogin(res);
        }).catch(error => {
          // 关闭等待
          this.loading = false;
          console.log(error);
          this.$message.error("网络异常");
        });
      } else {
        this.$message.error("用户名或密码不能为空");
      }
    },
    uKeyLogin() {
      //
      if (!this.$store.state.ukey.connect) {
        this.$message.error("请先安装uKey客户端服务");
        return;
      }
      if (!this.$store.state.ukey.isIn) {
        this.$message.warning("请先插入uKey");
        return;
      }
            if (this.$CFG.uKey.value) {
                this.uKeyLogin();
            } else {
                this.normalLogin();
            }
        },
        normalLogin() {
            // 校验用户
            if (this.loginForm.username && this.loginForm.password) {
                // 开启等待框
                this.loading = true;
                login(this.loginForm.username, this.loginForm.password).then(res => {
                    // 对结果进行处理
                    this.handleLogin(res);
                }).catch(error => {
                    // 关闭等待
                    this.loading = false;
                    console.log(error);
                    this.$message.error("网络异常");
                });
            } else {
                this.$message.error("用户名或密码不能为空");
            }
        },
        uKeyLogin() {
            //
            if (!this.$store.state.ukey.connect) {
                this.$message.error("请先安装uKey客户端服务");
                return;
            }
            if (!this.$store.state.ukey.isIn) {
                this.$message.warning("请先插入uKey");
                return;
            }

      // 校验用户
      if (this.loginForm.username && this.loginForm.password) {
        // 开启等待框
        this.loading = true;
        uKeyLogin(this.loginForm.username, this.loginForm.password, this.$store.state.ukey.id).then(res => {
          // 对结果进行处理
          this.handleLogin(res);
        }).catch(error => {
          // 关闭等待
          this.loading = false;
          console.log(error);
          this.$message.error("网络异常");
        });
      } else {
        this.$message.error("用户名或密码不能为空");
      }
    },
    handleLogin(res) {
      // 关闭等待
      this.loading = false;
      let rs = JSON.parse(res.data.result);
      if (rs.code == 1) {
        this.$message.success("登录成功");
        sessionStorage.setItem('username', this.loginForm.username);
        sessionStorage.setItem('userId', rs.data);
        // 自动登录无法返回登录页
        if(this.$store.state.user.autoLogin) {
          this.$router.replace("/home");
        }else {
          this.$router.push("/home");
            // 校验用户
            if (this.loginForm.username && this.loginForm.password) {
                // 开启等待框
                this.loading = true;
                uKeyLogin(this.loginForm.username, this.loginForm.password, this.$store.state.ukey.id).then(res => {
                    // 对结果进行处理
                    this.handleLogin(res);
                }).catch(error => {
                    // 关闭等待
                    this.loading = false;
                    console.log(error);
                    this.$message.error("网络异常");
                });
            } else {
                this.$message.error("用户名或密码不能为空");
            }
        },
        handleLogin(res) {
            // 关闭等待
            this.loading = false;
            let rs = JSON.parse(res.data.result);
            if (rs.code == 1) {
                this.$message.success("登录成功");
                sessionStorage.setItem('username', this.loginForm.username);
                sessionStorage.setItem('userId', rs.data);
                // 自动登录无法返回登录页
                if (this.$store.state.user.autoLogin) {
                    this.$router.replace("/home");
                } else {
                    this.$router.push("/home");
                }

                // 设置用户的权限
                this.$store.dispatch('user/getPermits');
            } else {
                this.$message.error(rs.msg);
            }
        },
        checkServeLicense() {
            // 校验服务器是否注册
            this.$apis.license.checkServeLicense().then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    this.register = true;
                } else {
                    this.$layer.msg("平台未注册！请先注册。");
                    this.license.show = true;
                    this.register = false;
                }
            }).catch(error => {
                console.log(error);
            });
        },
        autoLogin() {     // 自动登录
            this.$apis.login.checkReferer().then(res => {
                let rs = JSON.parse(res.data.result);
                console.log(rs);
                if (rs) {
                    this.$store.dispatch('user/changeAutoLogin', 1);
                    this.loginForm.username = "zhdl";
                    this.loginForm.password = "123456";
                    this.normalLogin();
                }
            }).catch(error => {

            });
            // let pattern = /(localhost)|(www\.sw-ht\.com)/;
            // let where = document.referrer;
            // if(pattern.test(where)) {
            //   this.$store.dispatch('user/changeAutoLogin', 1);
            //   this.loginForm.username = "zhdl";
            //   this.loginForm.password = "123456";
            //   this.normalLogin();
            // }else {
            //   this.$store.dispatch('user/changeAutoLogin', 0);
            // }
        },
        searchPlatformName() {
            this.$apis.pageSetting.realTime.searchName().then(res=>{
                let rs = JSON.parse(res.data.result);
                if(rs.code == 1) {
                    let data = rs.data[0];
                    this.platformName = data.param;
                }else {
                    this.platformName = "蓄电池后台监控管理平台";
                }
                sessionStorage.setItem('platformName', this.platformName);
            }).catch(error=>{
                this.platformName = "蓄电池后台监控管理平台";
                sessionStorage.setItem('platformName', this.platformName);
            });
        }

        // 设置用户的权限
        this.$store.dispatch('user/getPermits');
      } else {
        this.$message.error(rs.msg);
      }
    },
    checkServeLicense() {
      // 校验服务器是否注册
      this.$apis.license.checkServeLicense().then(res => {
        let rs = JSON.parse(res.data.result);
        if (rs.code == 1) {
          this.register = true;
        } else {
          this.$layer.msg("平台未注册！请先注册。");
          this.license.show = true;
          this.register = false;
        }
      }).catch(error => {
        console.log(error);
      });
    computed: {
        uKeyState() {
            let state = -1;
            let uKey = this.$store.state.ukey;
            let cls = "state-error";
            // 设置uKey的状态
            if (uKey.connect) {
                if (uKey.isIn) {
                    state = 1;
                } else {
                    state = 0;
                }
            } else {
                state = -1;
            }
            // 根据状态确定uKey图表的颜色
            switch (state) {
                case 0:
                    cls = "state-default";
                    break;
                case 1:
                    cls = "";
                    break;
                default:
                    cls = "state-error";
                    break;
            }
            return cls;
        },
    },
    autoLogin() {     // 自动登录
      this.$apis.login.checkReferer().then(res=>{
        let rs = JSON.parse(res.data.result);
        console.log(rs);
        if(rs) {
          this.$store.dispatch('user/changeAutoLogin', 1);
          this.loginForm.username = "zhdl";
          this.loginForm.password = "123456";
          this.normalLogin();
        }
      }).catch(error=>{
    mounted() {
        // 初始化user的信息
        this.$store.commit('user/init');
        // 初始化登录状态
        sessionStorage.setItem('username', "");
        this.checkServeLicense();

      });
      // let pattern = /(localhost)|(www\.sw-ht\.com)/;
      // let where = document.referrer;
      // if(pattern.test(where)) {
      //   this.$store.dispatch('user/changeAutoLogin', 1);
      //   this.loginForm.username = "zhdl";
      //   this.loginForm.password = "123456";
      //   this.normalLogin();
      // }else {
      //   this.$store.dispatch('user/changeAutoLogin', 0);
      // }
        // 自动登录
        this.autoLogin();
    }
  },
  computed: {
    uKeyState() {
      let state = -1;
      let uKey = this.$store.state.ukey;
      let cls = "state-error";
      // 设置uKey的状态
      if (uKey.connect) {
        if (uKey.isIn) {
          state = 1;
        } else {
          state = 0;
        }
      } else {
        state = -1;
      }
      // 根据状态确定uKey图表的颜色
      switch (state) {
        case 0:
          cls = "state-default";
          break;
        case 1:
          cls = "";
          break;
        default:
          cls = "state-error";
          break;
      }
      return cls;
    },
  },
  mounted() {
    // 初始化user的信息
    this.$store.commit('user/init');
    // 初始化登录状态
    sessionStorage.setItem('username', "");
    this.checkServeLicense();

    // 自动登录
    this.autoLogin();
  }
};
</script>

<style>
.login_from .el-input__inner {
  height: 48px;
  line-height: 48px;
    height: 48px;
    line-height: 48px;
}

.el-science-blue .login_from .el-input.is-disabled .el-input__inner, .el-science-blue .login_from .el-input__inner {
  background-color: transparent;
  border-color: #e4e4e4;
  color: #868686;
    background-color: transparent;
    border-color: #e4e4e4;
    color: #868686;
}

.el-science-blue .login_from .el-input__prefix, .el-input__suffix, .el-science-blue .login_from .el-select .el-input .el-select__caret {
  color: #007fe1;
    color: #007fe1;
}
</style>

<style lang="less" scoped>
/* 登录大盒子背景 */
.login_container {
  width: 100%;
  height: 100%;
  background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
    width: 100%;
    height: 100%;
    background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tools-container {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #FFFFFF;
}

.tools-container .tools-item {
  padding: 8px;
  cursor: pointer;
    padding: 8px;
    cursor: pointer;
}

.tools-container .tools-item:hover {

  background-color: #e4e4e4;
    background-color: #e4e4e4;
}

.tools-container .iconfont {
  font-size: 22px;
  color: #0080ff;
    font-size: 22px;
    color: #0080ff;
}

.tools-container .state-default .iconfont {
  color: #808080;
    color: #808080;
}

.tools-container .state-error .iconfont {
  color: #ff0000;
    color: #ff0000;
}

.sliderCon {
  margin-top: -6vh;
    margin-top: -6vh;

  .logo {
    display: flex;
    align-items: center;
    font-size: 48px;
    color: #007fe1;
    font-weight: bold;
    .logo {
        display: flex;
        align-items: center;
        font-size: 48px;
        color: #007fe1;
        font-weight: bold;

    .logoImg {
      height: 40px;
      margin-right: 14px;
        .logoImg {
            height: 40px;
            margin-right: 14px;
        }
    }
  }

  .picImg {
    width: 580px;
    margin-top: 12vh;
  }
    .picImg {
        width: 580px;
        margin-top: 12vh;
    }
}

/* 登录框 */
.login_box {
  width: 430px;
  height: 400px;
  background-color: #fff;
  border-radius: 3px;
  padding: 40px 60px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;

  .title {
    font-size: 20px;
    color: #007fe1;
    font-weight: bold;
    margin-bottom: 30px;
  }

  /* v图片的盒子 */

  .avatar {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    /* 边框圆角 */
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 430px;
    height: 400px;
    background-color: #fff;
    /* v图片 */
    border-radius: 3px;
    padding: 40px 60px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;

    img {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background-color: #eeeeee;
    .title {
        font-size: 20px;
        color: #007fe1;
        font-weight: bold;
        margin-bottom: 30px;
    }
  }

    /* v图片的盒子 */

    .avatar {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        /* 边框圆角 */
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        /* v图片 */

        img {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background-color: #eeeeee;
        }
    }
}

.login_box::after {
  content: "";
  display: block;
  width: 446px;
  height: 416px;
  position: absolute;
  top: -8px;
  left: -8px;
  background: rgba(255, 255, 255, 0.4);
  z-index: -1;
    content: "";
    display: block;
    width: 446px;
    height: 416px;
    position: absolute;
    top: -8px;
    left: -8px;
    background: rgba(255, 255, 255, 0.4);
    z-index: -1;
}

/* 登录按钮 */
.btns {
  text-align: center;
    text-align: center;
}

.loginBtn {
  width: 100%;
  display: block;
  text-align: center;
  height: 48px;
  margin-top: 10px;
    width: 100%;
    display: block;
    text-align: center;
    height: 48px;
    margin-top: 10px;
}

.regBtn {
  color: #007fe1;
  margin-right: 10px;
    color: #007fe1;
    margin-right: 10px;
}

@media screen and (max-width: 1680px) {
  .sliderCon .logo {
    font-size: 40px;
  }
    .sliderCon .logo {
        font-size: 40px;
    }

  .sliderCon .picImg {
    width: 480px;
  }
    .sliderCon .picImg {
        width: 480px;
    }

  .login_box {
    width: 400px;
    height: 360px;
  }
    .login_box {
        width: 400px;
        height: 360px;
    }

  .login_box::after {
    width: 416px;
    height: 376px;
  }
    .login_box::after {
        width: 416px;
        height: 376px;
    }
}
</style>