内容提交

whychdw

2021-12-14 8d820ad7941e89ee7f00d852b7131e8cd0bc0a73

内容提交

 package-lock.json

Diff too large

 package.json

@@ -34,6 +34,7 @@
    "vue-router": "^3.4.3",
    "vue-seamless-scroll": "^1.1.23",
    "vue-video-player": "^5.0.1",
    "vue2-verify": "^1.0.2",
    "vuedraggable": "^2.24.3",
    "vuejs-progress-bar": "^1.2.2",
    "vuex": "^3.5.1",

 src/assets/js/apis/login/index.js

@@ -32,6 +32,18 @@
            data: "uif.USnId="+ pwd,
        });
    },
    updateUserPwd2(name, oldPwd, newPwd) {
        return axios({
            method: 'post',
            url: 'User_infAction!updatePassword2',
            data: "upjson="+JSON.stringify({
                UName: name,
                Upassword: md5(oldPwd),
                UNote: md5(newPwd),
                USnId: newPwd,
            }),
        });
    },
    /**
     * 检测是否外部登录
     * @returns {AxiosPromise}

 src/assets/js/config.js

@@ -3,7 +3,7 @@
        label: '平台logo',
        des: '显示平台logo状态',
        fileName: 'gjdw',       // gjdw, nfdw, gjdx, qwh
        value: false,
        value: true,
    },
    uKey: {
        label: 'uKey',
@@ -44,6 +44,6 @@
    bigScreen: {
        label: '大屏数据展示',
        des: '首页显示大屏展示',
        value: false,
        value: true,
    },
};

 src/assets/js/tools/randomString.js

New file
@@ -0,0 +1,10 @@
function randomString(length) {
  var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var result = '';
  for (var i = length; i > 0; --i) {
    result += str[Math.floor(Math.random() * str.length)];
  }
  return result;
}

export default randomString;

 src/components/PwdChange.vue

@@ -35,7 +35,11 @@
      name: {
        type: String,
        default: ""
      }
      },
      firstChange: {
        type: Boolean,
        default: false
      },
    },
    data() {
        let name = this.name;
@@ -77,8 +81,12 @@
            this.$refs.ruleForm.validate((valid) => {
                // 校验通过
                if (valid) {
                    // 校验旧密码
                    this.checkUserPwd();
                    if(this.firstChange) {
                      this.updateUserPwd2(this.name, this.params.oldPwd, this.params.newPwd);
                    }else {
                      // 校验旧密码
                      this.checkUserPwd();
                    }
                }else {
                    this.$layer.msg('存在校验未通过的数据！');
                    return false;
@@ -128,6 +136,19 @@
                this.$layer.close(loading);
            });
        },
        updateUserPwd2(name, oldPwd, newPwd) {
          this.$apis.login.updateUserPwd2(name, oldPwd, newPwd).then(res=>{
            let rs = JSON.parse(res.data.result);
            if(rs.code === 1) {
              this.$layer.msg("密码更新成功,请重新登录！");
              this.close();
            }else {
              this.$layer.msg("密码更新失败");
            }
          }).catch(error=>{
            this.$layer.msg("网络请求异常，密码更新失败");
          });
        },
        close() {
            this.$emit("update:visible", false);
        }

 src/components/verifyComponent.vue

New file
@@ -0,0 +1,133 @@
<template>
  <div class="s-canvas" :style="{'width:': contentWidth+'px', 'height': contentHeight+'px'}" @click="handleClick">
    <canvas id="s-canvas" width="130" height="48"></canvas>
  </div>
</template>
<script>
export default{
  name: 'SIdentify',
  props: {
    identifyCode: { //默认***
      type: String,
      default: '1234'
    },
    fontSizeMin: { // 字体最小值
      type: Number,
      default: 25
    },
    fontSizeMax: { // 字体最大值
      type: Number,
      default: 35
    },
    backgroundColorMin: { // 验证码图片背景色最小值
      type: Number,
      default: 200
    },
    backgroundColorMax: {  // 验证码图片背景色最大值
      type: Number,
      default: 220
    },
    dotColorMin: { // 背景干扰点最小值
      type: Number,
      default: 60
    },
    dotColorMax: { // 背景干扰点最大值
      type: Number,
      default: 120
    },
    contentWidth: { //容器宽度
      type: Number,
      default: 130
    },
    contentHeight: { //容器高度
      type: Number,
      default: 48
    }
  },
  methods: {
    // 生成一个随机数
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机的颜色
    randomColor (min, max) {
      let r = this.randomNum(min, max)
      let g = this.randomNum(min, max)
      let b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    drawPic () {
      let canvas = document.getElementById('s-canvas')
      let ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      // 绘制背景
      ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
      // 绘制文字
      for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i)
      }
      this.drawLine(ctx)
      this.drawDot(ctx)
    },
    drawText (ctx, txt, i) {
      ctx.fillStyle = this.randomColor(50, 160) //随机生成字体颜色
      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' //随机生成字体大小
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-30, 30)
      // 修改坐标原点和旋转角度
      ctx.translate(x, y)
      ctx.rotate(deg * Math.PI / 180)
      ctx.fillText(txt, 0, 0)
      // 恢复坐标原点和旋转角度
      ctx.rotate(-deg * Math.PI / 180)
      ctx.translate(-x, -y)
    },
    drawLine (ctx) {
      // 绘制干扰线
      for (let i = 0; i < 4; i++) {
        ctx.strokeStyle = this.randomColor(100, 200)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
        ctx.stroke()
      }
    },
    drawDot (ctx) {
      // 绘制干扰点
      for (let i = 0; i < 30; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
        ctx.fill()
      }
    },
    handleClick() {
      this.$emit('click');
    }
  },
  watch: {
    identifyCode () {
      this.drawPic()
    }
  },
  mounted () {
    this.drawPic();
  }
}
</script>

<style scoped>
.s-canvas {
  cursor: pointer;
  vertical-align: middle;
}
.s-canvas canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  -webkit-object-fit: contain;
  object-fit: contain;
}
</style>

 src/pages/login.vue

@@ -36,6 +36,16 @@
              @keyup.enter.native.stop="onSubmit"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="8">
              <el-col :span="14">
                <el-input class="input" placeholder="验证码" v-model="loginForm.verify"></el-input>
              </el-col>
              <el-col :span="8">
                <v-sidentify :identifyCode="verifyCode" @click="changeVerifyCode"></v-sidentify>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="btns">
            <el-button
              :loading="loading"
@@ -110,6 +120,22 @@
      >
        <ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
      </el-dialog>
      <!-- 密码修改 -->
      <el-dialog
          title="密码修改"
          width="400px"
          :visible.sync="pwd.show"
          :close-on-click-modal="false"
          top="0"
          class="dialog-center"
          :modal-append-to-body="false"
      >
        <pwd-change
          v-if="pwd.show"
          :visible.sync="pwd.show"
          :name="loginForm.username"
          :first-change="true"></pwd-change>
      </el-dialog>
      <div class="tools-container">
        <div
          class="tools-item"
@@ -158,6 +184,9 @@
import platform from "@/assets/js/config";
import SoftUKey from "@/assets/js/tools/SoftUKey";
import SoftKey3W from "@/assets/js/Syunew3";
import verifyComponent from "@/components/verifyComponent";
import randomString from "@/assets/js/tools/randomString";
import pwdChange from "@/components/PwdChange";

export default {
  components: {
@@ -165,6 +194,8 @@
    ConfigInfo,
    AddLicense,
    FaceLogin,
    'v-sidentify': verifyComponent,
    pwdChange,
  },
  data() {
    return {
@@ -180,7 +211,9 @@
      loginForm: {
        username: "",
        password: "",
        verify: ""
      },
      verifyCode: randomString(4),
      license: {
        show: false,
      },
@@ -197,6 +230,9 @@
      logoConfig: platform.logo,
      copyRight: platform.copyRight,
      softUKey: new SoftUKey(SoftKey3W),
      pwd: {
        show: false,
      },
    };
  },
  created() {
@@ -218,6 +254,10 @@
        return;
      }
      if (this.loading) {
        return;
      }
      if(this.loginForm.verify.toLowerCase() != this.verifyCode.toLowerCase()) {
        this.$message.error("验证码错误！");
        return;
      }

@@ -331,7 +371,13 @@

        // 设置用户的权限
        this.$store.dispatch("user/getPermits");
      }else if(rs.code == 3) {
        this.pwd.show = true;
        this.$nextTick(()=>{
          this.$message.error(rs.msg);
        });
      } else {
        this.changeVerifyCode();
        this.$message.error(rs.msg);
      }
    },
@@ -435,6 +481,10 @@
      this.$store.dispatch("user/changeAutoLogin", 0);
      this.$store.dispatch("user/changePage", "m1c0");
    },
    changeVerifyCode() {
      this.verifyCode = randomString(4);
      this.loginForm.verify = "";
    }
  },
  computed: {
    uKeyState() {
@@ -593,8 +643,8 @@

/* 登录框 */
.login_box {
  width: 430px;
  height: 400px;
  width: 440px;
  height: 450px;
  background-color: #fff;
  border-radius: 3px;
  padding: 40px 60px;
@@ -637,8 +687,8 @@
.login_box::after {
  content: "";
  display: block;
  width: 446px;
  height: 416px;
  width: 456px;
  height: 466px;
  position: absolute;
  top: -8px;
  left: -8px;