首页 > 其他分享 >人脸识别平台批量导入绑定设备的一种方法

人脸识别平台批量导入绑定设备的一种方法

时间:2023-10-31 12:39:08浏览次数:34  
标签:人脸识别 false 绑定 vm 导入 devId msg message data


        因为原先平台绑定设备是通过一个界面进行人工选择绑定或一个人一个人绑定设备。如下:

人脸识别平台批量导入绑定设备的一种方法_vue.js

 但有时候需要在几千个里选择出几百个,那这种方式就不大现实了,需要另外一种方法。

  目前相到可以通过导入批量数据进行绑定的方式。

一、前端

主要是显示选择文件与设备

<template>
  <div class="import-bind" v-loading="fullscreenLoading" element-loading-text="文件上传中">
    <div class="detail">
      导入说明:本功能为批量导入用户绑定设备用,每次导入名单建议100名左右,要求导入的用户已经存在了。
    </div>
    <div class="form-row">
      <div class="name">资料导入</div>
      <input id="file" style="display:none" type="file" @change="fileChosen" />
      <el-input v-model="fileName" :disabled="true" style="width:260px;margin-left:20px"></el-input>
      <el-button type="primary" @click="getFile()" style="width:130px;margin-left:20px">选择文件</el-button><a
        href="http://face.oss-cn-qingdao.aliyuncs.com/FRS/data_template/201709/fabc5813-e589-4e99-9bd7-22b3c09a54.xlsx">
        <el-button type="primary" style="width:150px;margin-left:15px">资料模版下载</el-button></a>
    </div><span v-show="fileTip1" style="color:red;margin-left:30px;">文件格式错误,请提交xls或xlsx格式文件</span>
    <div class="form-row">
      <div class="name">识别设备</div>
      <select-devices-popup v-model="devId"></select-devices-popup>
    </div>
    <el-button type="primary" @click="uploadFirstFile()"
      style="width:120px;margin-left:137px;margin-top:50px;">确定</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
      <div v-if="portReady"><span>导入成功!</span></div>
      <div v-else=""><span>导入失败!</span><span>导入数据存在问题,请修改后重新上传。查看</span><span style="color:#00A1E9;cursor:pointer"
          @click="gotoErrorDetail">错误明细</span></div>
      <el-button type="primary" @click="dialogVisible = false" style="width:120px;margin-top:50px;">确 定</el-button>
      <el-button type="cancel" @click="dialogVisible = false" style="width:120px;margin-top:50px;">取 消</el-button>
    </el-dialog>
  </div>
</template>
<script>
import appApi from '@/common/js/allApi.js'
import $ from 'jquery'
import selectDevicesPopup from '@/components/select-devices-popup.vue'

export default {
  components: {
    selectDevicesPopup,
  },
  data() {
    return {
      fileList: [],
      fileName: '',
      largeFile: '',
      singleFile: 1024 * 1024, //单次上传大小
      tempPath: '',
      counter: 0,
      missTimeMax: 0, //单次上传最大丢包次数
      devId: '',
      excelPath: '',
      fileTip1: false,
      dialogVisible: false,
      portReady: false,
      fullscreenLoading: false
    }
  },
  mounted() {},
  methods: {
    getFile: function() {
      document.getElementById('file').click()
    },
    fileChosen: function() {
      var fname = document.getElementById('file').files[0].name
      this.fileName = fname
      var type = fname.split('.')
      var filetype = type[type.length - 1]
      if (filetype != 'xls' && filetype != 'xlsx') {
        this.fileTip1 = true
      } else {
        this.fileTip1 = false
      }
    },
    //先传小文件
    uploadFirstFile: function() {
      var vm = this
      if (this.fileName != '') {
        if (
          this.fileTip1 == true
        ) {
        } else {
          var file = document.getElementById('file').files[0]
          var size = file.size
          var data = new FormData()
          data.append('file', file)
          data.append('fileName', file.name)
          data.append('filePath', '')
          data.append('isFirst', 'true')
          data.append('start', '0')
          data.append('fileSplitSize', size)
          //        data.append('loginId', sessionStorage.getItem('birdloginid'));

          vm.fullscreenLoading = true
          $.ajax({
            processData: false, //  告诉jquery不要处理发送的数据
            contentType: false, // 告诉jquery不要设置content-Type请求头
            url: appApi.importStaff, //员工管理里更改的,从大文件上传-》上传文件
            type: 'POST',
            headers: { token: sessionStorage.token },
            data: data,
            success: function(msg) {
              console.log("uploadFirstFile msg=",msg);
              if (msg.code == '1') {
                vm.excelPath = msg.data.filePath
                if (msg.data.currentSize == size) {
                  vm.tempPath = ''
                  vm.counter = 0
                  vm.importBind()
                } else {
                  vm.tempPath = msg.data.filePath
                  vm.missTimeMax = 0
                  vm.counter++
                  vm.uploadFirstFile()
                }
              } else {
                if (vm.missTimeMax < 10) {
                  vm.missTimeMax++
                  vm.uploadFirstFile()
                } else {
                  vm.fullscreenLoading = false
                  vm.$message({
                    type: 'warning',
                    message: '当前网络不稳定,请重试!'
                  })
                }
              }
            },
            error: function(error) {
              vm.fullscreenLoading = false
            }
          })
        }
      } else {
        vm.$message({
          type: 'error',
          message: '请同时上传基础资料和头像!'
        })
      }
    },
    //后台输入绑定解析文件
    importBind: function() {
      var vm = this
      var data = {
        companyId: sessionStorage.companyId,
        excelPath: this.excelPath,
        devId: this.devId,
      }
      $.ajax({
        url: appApi.importBind,
        type: 'POST',
        data: data,
        headers: { token: sessionStorage.token },
        success: function(msg) {
          vm.fullscreenLoading = false
          if (msg.code == '0') {
            //文件内容错误
            vm.$message({
              type: 'error',
              message: msg.message
            })
          } else if (msg.code == '1') {
            //成功
            vm.dialogVisible = true
            vm.portReady = true
          } else if (msg.code == '2') {
            if(!msg.data) {
              vm.$message({
                type: 'error',
                message: msg.message
              })
            } else {
              //有错误数据
              vm.dialogVisible = true
              vm.portReady = false
              window.dataList = msg.data.dataList
              window.imgList = msg.data.imgMap
            }
          }
        },
        error: function(xhr, type, errorThrown) {}
      })
    },
    gotoErrorDetail() {
      this.$router.push({
        path: '/error-log'
      })
    },
    handleClose() {}
  }
}
</script>

<style scoped lang='stylus'>
.import-bind
  padding-left 15px
  .detail
    padding-top 15px
  .form-row
    margin-left 30px
    margin-top 50px
    .name
      display inline-block
      width 90px
      text-align right
    .select-devices-popup
      display inline-block
      margin-left 20px

.list {
  list-style: none;
}

ul li {
  margin-bottom: 10px;
}

.head-submit {
  cursor: pointer;
  height: 140px;
  width: 140px;
  border: 2px dashed #ccc;
  border-radius: 3px;
  margin-left: 110px;
  margin-top: -70px;
  text-align: center;
  line-height: 140px;
}

.el-dialog__body > .el-button--primary {
  margin-left: calc(50% - 130px);
}
</style>

界面如下:

人脸识别平台批量导入绑定设备的一种方法_elementui_02

 二、后端代码

接口代码

@PostMapping("/importBind")
    @ApiOperation("批量导入员工数据绑定设备")
    public ResultBean<?> importBind(@ApiParam(name = "excelPath", value = "基础信息文件存储URL", required = true) @RequestParam String excelPath,
                                     @ApiParam(name = "companyId", value = "企业ID", required = true) @RequestParam Integer companyId,
                                     @ApiParam(name = "devId", value = "设备ID(','分隔)") @RequestParam(required = false) String devId) {
        // 错误信息存储列表
        List<UserErrorInfo> userErrorList = new ArrayList<>();
        List<String> imgErrorList = new ArrayList<>();

        Assert.notNull(companyId, ReturnCode.Params_Error);
        userService.importBind(companyId, getLoginId(), excelPath, userErrorList, imgErrorList, devId);

        // 返回结果
        if (userErrorList.size() == 0 && imgErrorList.size() == 0) {
            return Results.success();
        } else {
            Map<String, Object> errorLists = new HashMap<>();
            errorLists.put("dataList", userErrorList);
            errorLists.put("imgMap", imgErrorList);
            return new ResultBean<>(2, ReturnCode.File_Exist_Error_Data.getDetail(), errorLists);
        }
    }

绑定的主要逻辑如下:

@Override
	public void importBind(Integer companyId, Integer loginId, String excelPath, List<UserErrorInfo> userErrorList,
			List<String> imgErrorList, String devId) {
		// 1. 解析EXCEL数据映射成原始数据信息列表
        List<Map<String, Object>> dataList = parseExcelToRawdata(excelPath);

        // 2. 过滤原始数据信息, 并转换成员工信息列表
        List<User> users = filterToUsersForBind(companyId, loginId, dataList, userErrorList);
        // 3. 批量绑定设备
        if(users.size()>0)
        {
        	batchBind(users,devId);
        }
	}

@Transactional
    @OperLogInject("批量绑定员工信息")
    public void batchBind(List<User> users, String devId) {

    	if (!devId.isEmpty() && !users.isEmpty()) {
            String userId = String.join(",", users.stream().map(u -> u.getId().toString()).collect(Collectors.toList()));
            try {
                ResultBean<?> bindResult = devService.bindUser(devId,null, userId, true,1);
                Assert.isTrue(bindResult.getCode() == 1, ReturnCode.User_Bind_Error);
            } catch (Exception e) {
                throw new CustomException(ReturnCode.User_Bind_Error);
            }
        }
    }

标签:人脸识别,false,绑定,vm,导入,devId,msg,message,data
From: https://blog.51cto.com/u_15070324/8103556

相关文章

  • vue绑定事件
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>&l......
  • 导入个Excel页面直接卡死,该如何解决
    JavaScript是单线程的语言,也就是说同步代码都需要排队去执行,这样就会造成很多问题,就比如:数据量大的excel文件的导入导出,会造成整个页面出现“假卡死”的现象。什么是“假卡死”呢?意思就是页面其实并没有卡死,但是用户做一些操作时,页面并没有及时给到反馈,这就会让用户觉得页面卡死......
  • Java 新手如何使用Spring MVC 中的双向数据绑定?
    文章目录什么是双向数据绑定?使用SpringMVC实现双向数据绑定步骤1:步骤2:步骤3:步骤4:步骤5:深入拓展双向数据绑定结语......
  • vue3 + vite 的Excel表格的导入导出
    一、安装XLSX插件yarnaddxlsx或者npmixlsx二、引入插件在你需要的页面或者在main.js中引入import*asXLSXfrom'xlsx'三、导出Excel3.1核心api①xlsx.utils.book_new() 新建工作簿② xlsx.uti......
  • 火山引擎 ByteHouse:只需 2 个方法,增强 ClickHouse 数据导入能力
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群作为企业数字化建设的必备要素,易用的数据引擎能帮助企业提升数据使用效率,更好提升数据应用价值,夯实数字化建设基础。数据导入是衡量OLAP引擎性能及易用性的重要标准之一,高效的数据导入能力能够......
  • HExcel,一个简单通用的导入导出Excel工具类
    前言日常开发中,Excel的导出、导入可以说是最常见的功能模块之一,一个通用的、健壮的的工具类可以节省大量开发时间,让我们把更多精力放在业务处理上中之前我们也写了一个Excel的简单导出,甚至可以不依赖poi,还扩展了纯前端导出Excel!详情请戳:《POI导出Excel 》,遗憾的是......
  • 绑定方法和非绑定方法
    绑定方法 对象绑定方法/类的绑定方法对象绑定方法:定义在类内部,没有装饰器装饰的方法,都是对象的绑定方法需要对象来调用,对象调用的时候,会把自身传入classPerson:def__init__(slef,name='my'):self.name=nameself.age=17defchange_name(s......
  • Python使用pymysql和xlrd2将Excel数据导入MySQL数据库
    在数据处理和管理中,有时候需要将Excel文件中的数据导入到MySQL数据库中进行进一步的分析和操作。本文将介绍如何使用Python编程语言实现这个过程。导入所需库importxlrd2#导入xlrd2库,用于读取Excel文件importpymysql#导入pymysql库,用于连接和操作MySQL数据库fromdat......
  • Pandas数据导入和导出:CSV、Excel、MySQL、JSON
    导入MySQL查询结果:read_sqlimportpandascon="mysql+pymysql://user:[email protected]/test"sql="SELECT*FROM`student`WHEREid=2"#sql查询df1=pandas.read_sql(sql=sql,con=con)print(df1)导入MySQL整张表:read_sql_table#整张表df2=pandas.rea......
  • Python 模块:创建、导入和使用
    什么是模块?将模块视为代码库。模块是一个包含一组函数的文件,您想要在应用程序中包含这些函数。创建一个模块要创建一个模块,只需将要包含在其中的代码保存在扩展名为.py的文件中:示例:将以下代码保存在名为mymodule.py的文件中:defgreeting(name):print("Hello,"+name)......