人脸识别修改

longyvfengyun

2024-07-23 5ee9c989e1e49fbb95be6cd574307ae2e1fcdb27

人脸识别修改

 src/assets/js/config.module.js

@@ -3,7 +3,7 @@
    label: "平台logo",
    des: "显示平台logo状态",
    fileName: "gjdw", // gjdw, nfdw, gjdx, qwh, gdnr
    value: true,
    value: false,
  },
  uKey: {
    label: "uKey",
@@ -94,7 +94,7 @@
     */
    // name: "",
    // name: "sxty", // 请查看alarmPopup是否开启，logo是否开启且为gjdw
    // name: 'tydc',
    // name: "tydc",
    // name: 'njck',
    name: "ynkm",
    //value: false,
@@ -122,8 +122,8 @@
  alarmPopup: {
    label: "告警弹出框",
    des: "登录平台后，右下方告警弹出框提示",
    // value: false,
    value: true,
    value: false,
    // value: true,
  },
  WHYC: {
    label: "自用",

 src/views/login/components/face/FaceLogin.vue

@@ -15,8 +15,8 @@
  props: {
    faceShow: {
      type: Boolean,
      default: false
    }
      default: false,
    },
  },
  data() {
    return {
@@ -26,19 +26,19 @@
      newstream: "",
      intTime: null,
      postTime: null,
      setTime: null
      setTime: null,
    };
  },
  mounted() {
    this.faceChange();
  },
  destroyed: function() {
  destroyed: function () {
    this.status = false;
    this.clearVideo();
  },
  methods: {
    // 关闭摄像头
    clearVideo: function() {
    clearVideo: function () {
      // 关闭定时器
      clearInterval(this.intTime);
      clearInterval(this.postTime);
@@ -49,7 +49,7 @@
      }
    },
    // 获取图片
    getImg: function() {
    getImg: function () {
      let vm = this;
      let video = vm.$refs.video;
      let canvas = vm.$refs.canvas;
@@ -59,7 +59,7 @@
      vm.imageBase64 = canvas.toDataURL("image/png");
    },
    // 人脸检测
    faceChange: function() {
    faceChange: function () {
      let vm = this;
      // 恢复提示语
      vm.faceDetect = "请将正脸对准摄像头";
@@ -81,7 +81,7 @@
      }
    },
    //访问用户媒体设备的兼容方法
    getUserMedia: function(constraints, success, error) {
    getUserMedia: function (constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices
@@ -100,7 +100,7 @@
      }
    },
    // 成功回调
    success: function(stream) {
    success: function (stream) {
      let vm = this;
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
@@ -115,18 +115,23 @@
      this.intTime = setInterval(() => {
        vm.getImg();
      }, 0);
      setTimeout(function() {
      setTimeout(function () {
        vm.facePost();
      }, 0);
    },
    error: function(error) {
    error: function (error) {
      console.log(error);
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    },
    // 请求后台验证人脸
    facePost: function() {
    facePost: function () {
      if (!this.$store.state.ukey.isIn) {
        this.faceDetect = "请先插入ukey";
        this.setTime = setTimeout(() => {
          this.facePost();
        }, 500);
      } else if (!this.imageBase64) {
        this.faceDetect = "人脸识别中...";
        this.setTime = setTimeout(() => {
          this.facePost();
        }, 500);
@@ -134,7 +139,7 @@
        let vm = this;
        faceManager
          .faceVerify('"' + vm.imageBase64 + '"', this.$store.state.ukey.id)
          .then(res => {
          .then((res) => {
            let result = res.data;
            console.log(res);
            if (result.code == 1 && result.data) {
@@ -157,7 +162,7 @@
              }
            }
          })
          .catch(err => {
          .catch((err) => {
            vm.faceDetect = "网络链接失败";
            if (vm.status == true) {
              this.setTime = setTimeout(() => {
@@ -168,29 +173,29 @@
      }
    },
    // 登陆设置sessionStorage
    onLogin: function() {
    onLogin: function () {
      let vm = this;
      faceManager
        .getUserName()
        .then(res => {
        .then((res) => {
          let result = res.data;
          if (result.code == 1) {
            let password = RSA.decrypt(result.data.usnId, const_num.privateKey);
            this.uKeyLogin(result.data.uname, password);
          }
        })
        .catch(err => {
        .catch((err) => {
          console.log(err);
        });
    },
    uKeyLogin(username, password) {
      // ukey登录
      uKeyLogin(username, password, this.$store.state.ukey.id)
        .then(res => {
        .then((res) => {
          // 对结果进行处理
          this.handleLogin(res, username);
        })
        .catch(error => {
        .catch((error) => {
          // 关闭等待
          this.loading = false;
          this.faceDetect = "网络异常";
@@ -210,8 +215,8 @@
        this.faceDetect = rs.msg;
        this.facePost();
      }
    }
  }
    },
  },
};
</script>
<style lang="less" scoped>

 src/views/login/components/face/faceManager.js

@@ -25,4 +25,4 @@
            data: null
        });
    },
}
}

 src/views/login/index.vue

@@ -2,16 +2,19 @@
  <div class="auto-login-loading" v-if="isAutoLogin">
    <img src="../../assets/images/login_loading.gif" />
  </div>
  <div v-else class="login-wrapper"
     v-loading="loading"
     element-loading-text="页面装载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.2)">
  <div
    v-else
    class="login-wrapper"
    v-loading="loading"
    element-loading-text="页面装载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <div
      class="login_container"
      :style="{
        background: 'url(' + backgroundImg + ') 0 0 no-repeat',
        backgroundSize: '100% 100%'
        backgroundSize: '100% 100%',
      }"
    >
      <div class="sliderCon">
@@ -177,7 +180,7 @@
  searchName,
  getUserLoginInfo,
  checkServeLicense,
  getLoginVerity
  getLoginVerity,
} from "@/views/login/js/api";
import AddLicense from "./components/AddLicense";
import ConfigInfo from "./components/configInfo";
@@ -217,7 +220,7 @@
    ConfigInfo,
    AddLicense,
    FaceLogin,
    VSidentify
    VSidentify,
  },
  data() {
    return {
@@ -228,26 +231,26 @@
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
        type: "",
      },
      /* 登录表单el-form 的 数据绑定 */
      loginForm: {
        username: "",
        password: "",
        verify: ""
        verify: "",
      },
      verifyCode: "",
      license: {
        show: false
        show: false,
      },
      face: {
        show: false
        show: false,
      },
      config: {
        show: false
        show: false,
      },
      uKey: {
        show: false
        show: false,
      },
      platformName: "",
      logoConfig: platform.logo,
@@ -263,16 +266,16 @@
  watch: {
    platformName: {
      handler() {
        document.getElementsByTagName("title")[0].innerHTML= this.platformName;
        document.getElementsByTagName("title")[0].innerHTML = this.platformName;
      },
      immediate: true,
    },
    $route: {
      handler: function(route) {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
      immediate: true,
    },
  },
  methods: {
    onSubmit() {
@@ -299,7 +302,7 @@
          password = this.loginForm.password,
          verity = this.loginForm.verify;
        login(username, password, verity)
          .then(res => {
          .then((res) => {
            res = res.data;
            // console.log(res, '======login res');
            // 关闭等待
@@ -318,7 +321,7 @@
              this.$message.error(res.msg);
            }
          })
          .catch(error => {
          .catch((error) => {
            // 关闭等待
            this.loading = false;
            console.log(error);
@@ -331,7 +334,7 @@
    changeVerifyCode() {
      let loading = this.$layer.loading();
      getLoginVerity()
        .then(res => {
        .then((res) => {
          this.$layer.close(loading);
          res = res.data;
          if (res.code) {
@@ -342,7 +345,8 @@
          this.loginForm.verify = "";
          // 自动登录
          this.autoLogin();
        }).catch(error => {
        })
        .catch((error) => {
          this.$layer.close(loading);
          this.verifyCode = "";
          this.loginForm.verify = "";
@@ -351,7 +355,7 @@
    },
    getRandomFromServer() {
      getRandomFromServer()
        .then(res => {
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            let randomNumber = rs.data;
@@ -360,7 +364,7 @@
            this.$message.error("服务器连接异常！");
          }
        })
        .catch(error => {
        .catch((error) => {
          this.$message.error("服务器连接异常！");
        });
    },
@@ -369,7 +373,7 @@
      result.inPath = result.inPath.replace(reg, "%26");
      result.inPath = result.inPath.replace(/\\/g, "huodongwei");
      loginSignVerity(result)
        .then(res => {
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            this.uKeyLogin();
@@ -377,7 +381,7 @@
            this.$message.error("UKey签名校验失败！");
          }
        })
        .catch(error => {
        .catch((error) => {
          this.$message.error("服务器连接异常！");
        });
    },
@@ -401,11 +405,11 @@
          this.loginForm.password,
          this.$store.state.ukey.id
        )
          .then(res => {
          .then((res) => {
            // 对结果进行处理
            this.handleLogin(res);
          })
          .catch(error => {
          .catch((error) => {
            // 关闭等待
            this.loading = false;
            console.log(error);
@@ -419,13 +423,14 @@
      // 关闭等待
      //this.loading = false;
      res = res.data;
      console.log(res);
      if (res.data) {
        this.$message.success("登录成功");
        sessionStorage.setItem("username", res.data2[0].uname);
        sessionStorage.setItem("userId", res.data2[0].uid);
        sessionStorage.setItem("userPower", res.data2[0].urole);
        sessionStorage.setItem("userPowerGroup", res.data2[1]);
        sessionStorage.setItem("isInGroup", res.data2[2]?1:0);
        sessionStorage.setItem("isInGroup", res.data2[2] ? 1 : 0);
        // 自动登录无法返回登录页
        if (this.$store.state.user.autoLogin) {
          this.$router.replace({ path: this.redirect || "/home" });
@@ -444,7 +449,7 @@
    checkServeLicense() {
      // 校验服务器是否注册
      checkServeLicense()
        .then(res => {
        .then((res) => {
          let rs = res.data;
          if (rs.code === 1 && rs.data) {
            this.register = true;
@@ -454,7 +459,7 @@
            this.register = false;
          }
        })
        .catch(error => {
        .catch((error) => {
          console.log(error);
        });
    },
@@ -465,7 +470,7 @@
      if (autoLogin && uid) {
        this.isAutoLogin = true;
        getUserLoginInfo(uid)
          .then(res => {
          .then((res) => {
            let rs = res.data;
            if (rs.code === 1) {
              let data = rs.data;
@@ -476,15 +481,15 @@
              this.handleLogin(res);
            }
          })
          .catch(error => {
          .catch((error) => {
            console.log(error);
            this.$notify.error({
              title: "错误",
              message: "输入信息无效，请手动登录！"
              message: "输入信息无效，请手动登录！",
            });
            console.log(error);
          });
      }else {
      } else {
        this.isAutoLogin = false;
      }
      // let pattern = /(localhost)|(www\.sw-ht\.com)/;
@@ -500,7 +505,7 @@
    },
    searchPlatformName() {
      searchName()
        .then(res => {
        .then((res) => {
          let rs = res.data;
          if (rs.code == 1) {
            let data = rs.data["1"][0];
@@ -510,7 +515,7 @@
          }
          sessionStorage.setItem("platformName", this.platformName);
        })
        .catch(error => {
        .catch((error) => {
          this.platformName = "蓄电池后台监控管理平台";
          sessionStorage.setItem("platformName", this.platformName);
        });
@@ -521,28 +526,31 @@
     */
    setQRCode() {
      let token = sessionStorage.getItem("qrToken");
      if(!token) {
        qrCode.login().then(res=>{
          let rs = res.data;
          if(rs.code == 200) {
            sessionStorage.setItem("qrToken", rs.token);
          }else {
            sessionStorage.setItem("qrToken", "");
          }
        }).catch(error=>{
          console.log(error);
        });
      if (!token) {
        qrCode
          .login()
          .then((res) => {
            let rs = res.data;
            if (rs.code == 200) {
              sessionStorage.setItem("qrToken", rs.token);
            } else {
              sessionStorage.setItem("qrToken", "");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    changeSkin() {
      if(!CONFIG.skin.value) {
      if (!CONFIG.skin.value) {
        let skin = CONFIG.skin.skinName;
        let name = CONFIG.skin.themeName;
        this.$store.commit("theme/changeTheme", skin);
        this.$store.dispatch("theme/changeThemeName", name);
        sessionStorage.setItem("activeSkin", skin);
      }
    }
    },
  },
  computed: {
    uKeyState() {
@@ -656,11 +664,11 @@

    this.$store.dispatch("user/changeAutoLogin", 0);

    if(sysConfig.clientName.name == "sxty") {
    if (sysConfig.clientName.name == "sxty") {
      this.setQRCode();
    }
    this.changeVerifyCode();
  }
  },
};
</script>