智慧保安打卡签到系统
liuyg
2021-11-19 510cdf91c11696f97aefd175df2abab5ae0d3053
+功能完善
8 files modified
1 files added
258 ■■■■■ changed files
public/zhiwenDemo/app.css 6 ●●●●● patch | view | raw | blame | history
src/api/qiandao/qiandao.js 18 ●●●●● patch | view | raw | blame | history
src/store/getters.js 3 ●●●●● patch | view | raw | blame | history
src/store/index.js 4 ●●● patch | view | raw | blame | history
src/store/modules/exam.js 28 ●●●●● patch | view | raw | blame | history
src/styles/element-ui.scss 8 ●●●●● patch | view | raw | blame | history
src/views/home/forms.vue 40 ●●●● patch | view | raw | blame | history
src/views/home/index.vue 5 ●●●● patch | view | raw | blame | history
src/views/home/tables.vue 146 ●●●●● patch | view | raw | blame | history
public/zhiwenDemo/app.css
@@ -39,8 +39,10 @@
#img {
    border-radius: 6px;
    border: 1px dashed rgb(209, 209, 209);
    width: 180px;
    height: 180px;
    /* width: 180px;
    height: 180px; */
    height: 182px;
    width: 138px;
    position: relative;
    top: 2px;
}
src/api/qiandao/qiandao.js
@@ -1,7 +1,7 @@
import request from '@/router/axios';
export const getList = (current, size, params) => {
    return request({
        url: '/api//blade-user/pages',
        url: '/api/blade-user/pages',
        method: 'get',
        params: {
            ...params,
@@ -11,4 +11,20 @@
    })
}
export const upData = (params) => {
    return request({
        url: '/api/blade-user/update',
        method: 'post',
        data: params
    })
}
export const getZhiwen = (id) => {
    return request({
        url: '/api/blade-user/details',
        method: 'get',
        params: {
            id
        }
    })
}
src/store/getters.js
@@ -30,5 +30,8 @@
  handle: state => state.dict.handle,
  // canDoIt: state => state.dict.canDoIt,
  // yanzhen: state => state.dict.yanzhen,
  cardInfor: state => state.exam.cardInfor,
  haveCardid: state => state.exam.haveCardid,
  useZhiWen: state => state.exam.useZhiWen,
}
export default getters
src/store/index.js
@@ -5,6 +5,7 @@
import tags from './modules/tags'
import logs from './modules/logs'
import dict from './modules/dict'
import exam from './modules/exam'
import getters from './getters'
Vue.use(Vuex)
@@ -14,7 +15,8 @@
    common,
    logs,
    tags,
    dict
    dict,
    exam
  },
  getters,
})
src/store/modules/exam.js
New file
@@ -0,0 +1,28 @@
const exam = {
  state: {
    cardInfor: {},
    haveCardid: false,
    useZhiWen: function (fn, vals) {
      //读取指纹实例
      let val = vals || "";
      var winzhiwen = document.getElementById("zhiwen").contentWindow;
      return winzhiwen[fn](val);
    },
  },
  actions: {
  },
  mutations: {
    setCardInfor(state, data) {
      state.cardInfor = data;
    },
    setCardidState(state, data) {
      state.haveCardid = data;
    }
  }
};
export default exam;
src/styles/element-ui.scss
@@ -113,3 +113,11 @@
  display: none;
  width: 100px !important;
}
.tablesss .avue-form__menu--center {
  width: 100% !important;
}
.formsss .el-input__inner {
  color: #000 !important;
}
src/views/home/forms.vue
@@ -1,5 +1,5 @@
<template>
  <basic-container>
  <basic-container class="formsss">
    <avue-form
      ref="form"
      v-model="obj"
@@ -31,7 +31,11 @@
<script>
import CertCtl from "./sfzJS";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo", "cardInfor", "haveCardid", "useZhiWen"]),
  },
  mounted() {
    // console.log(CertCtl);
    try {
@@ -58,13 +62,13 @@
    return {
      cardShebei: "",
      intTime: "", //自动获取身份证;
      isHaveCardid: false,
      obj: {},
      option: {
        // mockBtn: true,
        // submitText: "完成",
        // printBtn: true,
        submitBtn: false,
        disabled: true,
        column: [
          {
            label: "姓名",
@@ -126,7 +130,7 @@
    setIntervals: function () {
      let that = this;
      this.intTime = setInterval(function () {
        if (!that.isHaveCardid) {
        if (!that.haveCardid) {
          //定时读卡
          let result = CertCtl.readCert();
          if (result == "") {
@@ -136,7 +140,7 @@
            //resultFlag为0代表读卡成功
            if (resultObj.resultFlag == "0") {
              //回显相关数据
              console.log(resultObj, 123);
              // console.log(resultObj, 123);
              const data = resultObj.resultContent;
              //赋值数据
              that.obj = {
@@ -175,12 +179,14 @@
                id: data.certNumber,
                qfjg: data.certOrg,
              };
              that.isHaveCardid = true;
              that.$store.commit("setCardInfor", that.obj);
              that.$store.commit("setCardidState", true);
            } else if (resultObj.resultFlag == "-1") {
              if (resultObj.errorMsg == "端口打开失败") {
                console.log("读卡器未连接");
              } else {
                console.log(resultObj.errorMsg);
                // console.log(resultObj.errorMsg);
                //无卡片提醒
              }
            } else if (resultObj.resultFlag == "-2") {
              console.log(resultObj.errorMsg);
@@ -190,16 +196,30 @@
      }, 1000);
    },
    emptytChange() {
      this.isHaveCardid = false;
      this.$message.success("清空方法回调");
      this.$store.commit("setCardidState", false);
      let zhiwen = {
        featuredatas: "",
        imgBMP: "",
        url: "",
        isoks: false,
        clear: true,
      };
      this.useZhiWen("setZhiwenData", zhiwen);
      this.$message.success("清空身份证数据");
    },
    // useZhiWen: function (fn, vals) {
    //   //读取指纹实例
    //   let val = vals || "";
    //   var winzhiwen = document.getElementById("zhiwen").contentWindow;
    //   return winzhiwen[fn](val);
    // },
  },
};
</script>
<style lang="scss" scoped>
.zhiwenMain {
  width: 222px;
  height: 196px;
  width: 255px;
  height: 205px;
  // border: 1px solid rgba($color: #d3d3d3, $alpha: 1);
}
.imgss {
src/views/home/index.vue
@@ -112,11 +112,14 @@
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .e_m_left {
      width: 50%;
      height: 100%;
      min-width: 620px;
      min-width: 750px;
      // border: 1px solid red;
      display: flex;
      align-content: center;
    }
    .e_m_right {
      width: 50%;
src/views/home/tables.vue
@@ -1,5 +1,5 @@
<template>
  <basic-container>
  <basic-container class="tablesss">
    <avue-crud
      :option="option"
      :table-loading="loading"
@@ -38,7 +38,7 @@
<script>
import { mapGetters } from "vuex";
import { getList } from "@/api/qiandao/qiandao";
import { getList, upData, getZhiwen } from "@/api/qiandao/qiandao";
export default {
  data() {
    return {
@@ -55,7 +55,7 @@
        // tip: false,
        // searchSize: "mini",
        searchMenuSpan: 6,
        // height: 563,
        height: "auto",
        index: true,
        // selectable: (row, index) => {
        //   console.log(row, index);
@@ -76,7 +76,7 @@
            label: "姓名",
            prop: "realName",
            search: true,
            searchSpan: 4,
            searchSpan: 5,
            searchLabelWidth: 55,
            width: 60,
          },
@@ -84,14 +84,14 @@
            label: "公司",
            prop: "deptName",
            search: true,
            searchSpan: 4,
            searchSpan: 8,
            searchLabelWidth: 55,
          },
          {
            label: "身份证号码",
            prop: "cardid",
            search: true,
            searchSpan: 5,
            searchSpan: 10,
            searchLabelWidth: 90,
            width: 140,
          },
@@ -103,7 +103,13 @@
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    ...mapGetters([
      "userInfo",
      "cardInfor",
      "permission",
      "haveCardid",
      "useZhiWen",
    ]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
@@ -111,6 +117,19 @@
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false),
      };
    },
  },
  watch: {
    haveCardid() {
      if (this.haveCardid) {
        this.onLoad(
          this.page,
          {
            cardid: this.cardInfor.id,
          },
          "shibie"
        );
      }
    },
  },
  mounted() {
@@ -126,8 +145,81 @@
    // }
  },
  methods: {
    rowUps(val) {
      console.log(val);
    rowUps(row, msg) {
      let zhiwenData = this.useZhiWen("outZhiwenData");
      let card = this.cardInfor;
      // console.log(card);
      // console.log(row);
      // console.log(zhiwenData);
      if (this.haveCardid) {
        if (msg == "once") {
          this.getZhiwen(row);
          return;
        }
        // console.log(zhiwenData, 456);
        if (
          zhiwenData.imgSRC != "" &&
          zhiwenData.imgSRC != undefined &&
          zhiwenData.imgBMP != "" &&
          zhiwenData.imgBMP != undefined &&
          zhiwenData.featuredata != "" &&
          zhiwenData.featuredata != undefined &&
          zhiwenData.isoks
        ) {
          // console.log("存在指纹");
          row.realName = card.name;
          row.cardid = card.id;
          row.sex = card.sex == "男" ? "1" : card.sex == "女" ? "2" : "3";
          row.nation = card.national;
          row.registered = card.certAddress;
          row.fingerprint = zhiwenData.imgBMP;
          row.myPicture = zhiwenData.featuredata;
          this.upDataMain(row);
        } else {
          this.msg("warning", "无指纹信息,请添加指纹信息后重试!");
        }
      } else {
        this.msg("warning", "请读取身份证后重试!");
      }
    },
    getZhiwen(row) {
      let that = this;
      getZhiwen(row.id).then((res) => {
        // console.log(res);
        let zhiwen = {
          featuredatas: res.data.data.myPicture,
          imgBMP: res.data.data.fingerprint,
          // url: row.fingerprint,
          isoks: false,
        };
        if (
          zhiwen.featuredatas != "" &&
          zhiwen.featuredatas != undefined &&
          zhiwen.imgBMP != "" &&
          zhiwen.imgBMP != undefined
        ) {
          zhiwen.isoks = true;
          that.useZhiWen("setZhiwenData", zhiwen);
          that.rowUps(row);
        } else {
          // useZhiwen();
          zhiwen.isoks = false;
          that.useZhiWen("setZhiwenData", zhiwen);
          that.msg("warning", "无指纹信息,请添加指纹信息后更新!");
          // 若无指纹,提醒要录入指纹,再手动点击更新;
        }
      });
    },
    upDataMain(row) {
      upData(row).then((res) => {
        const data = res.data;
        // console.log(data);
        if (data.code == 200) {
          this.msg("success", data.msg);
        } else {
          this.msg("warning", data.msg);
        }
      });
    },
    sizeChange(val) {
      this.page.pageSize = val;
@@ -171,6 +263,7 @@
      done();
    },
    searchReset() {
      console.log(5454);
      this.query = {};
      this.onLoad(this.page);
    },
@@ -223,7 +316,13 @@
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
    msg: function (type, msg) {
      this.$message({
        message: msg,
        type: type,
      });
    },
    onLoad(page, params = {}, shibie) {
      params["status"] = "1";
      params["roleAlias"] = "111";
      getList(
@@ -232,10 +331,37 @@
        Object.assign(params, this.query)
      ).then((res) => {
        // console.log(res);
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        // // console.log(this.data);
        if (shibie == "shibie") {
          if (data.total == 0) {
            this.msg("warning", "查无此人");
            let zhiwen = {
              featuredatas: "",
              imgBMP: "",
              url: "",
              isoks: false,
            };
            this.useZhiWen("setZhiwenData", zhiwen);
          } else if (data.total == 1) {
            //查询出一个人  将数据覆盖
            // console.log(value[0])
            this.rowUps(data.records[0], "once");
          } else {
            this.msg("warning", "查无此人");
            let zhiwen = {
              featuredatas: "",
              imgBMP: "",
              url: "",
              isoks: false,
            };
            this.useZhiWen("setZhiwenData", zhiwen);
            this.msg("warning", "查询出多人,请选择对应人员更新!");
          }
        }
        this.loading = false;
      });
    },