New file |
| | |
| | | <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> |
| | | <% |
| | | String path = request.getContextPath(); |
| | | String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; |
| | | %> |
| | | <%@ taglib uri="/struts-tags" prefix="s"%> |
| | | <!DOCTYPE HTML> |
| | | <html> |
| | | <head> |
| | | <!-- <base href="<%=basePath%>"> --> |
| | | |
| | | <meta charset="UTF-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" /> |
| | | <title>用户人脸识别管理</title> <!-- 用户操作记录查询 --> |
| | | <link rel="stylesheet" href="iview/styles/iview.css"> |
| | | <link rel="stylesheet" type="text/css" href="css/basic.css"> |
| | | <link rel="stylesheet" type="text/css" href="css/BrdwDeal.css"> |
| | | <script type="text/javascript" src="js/frame.js"></script> |
| | | <script type="text/javascript" src="js/jquery-1.8.3.js"></script> |
| | | <script type="text/javascript" src="js/base.js"></script> |
| | | <style type="text/css"> |
| | | /*定义被鼠标点击的背景色*/ |
| | | .b8cfe5{ |
| | | background-color: #b8cfe5; |
| | | } |
| | | /* 按钮样式*/ |
| | | .btn_box{ |
| | | outline: 0; |
| | | display: inline-block; |
| | | margin-bottom: 0; |
| | | font-weight: 400; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | touch-action: manipulation; |
| | | cursor: pointer; |
| | | background-image: none; |
| | | border: 1px solid transparent; |
| | | white-space: nowrap; |
| | | line-height: 1.5; user-select: none; |
| | | padding: 0px 15px; |
| | | font-size: 12px; |
| | | border-radius: 4px; |
| | | transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear; |
| | | } |
| | | .add_rennian{ |
| | | color: #fff; |
| | | background-color: #19be6b; |
| | | border-color: #19be6b; |
| | | } |
| | | .delete_rennian{ |
| | | color: #fff; |
| | | background-color: #ed4014; |
| | | border-color: #ed4014; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <!--头部内容开始--> |
| | | <jsp:include page="Top.jsp" flush="true"/> |
| | | <!--头部内容结束--> |
| | | <!-- 主体内容 --> |
| | | <div id="main"> |
| | | <!-- 导航开始 --> |
| | | <jsp:include page="nav.jsp" flush="true"/> |
| | | <!-- 导航结束 --> |
| | | <div id="eleInfor"> |
| | | <div class="checkCon"> |
| | | <input type="hidden" value="1" name="bup.page.pageCurr" id="pageCurr" /> |
| | | <input type="hidden" value="10" name="bup.page.pageSize" id="pageSize" /> |
| | | </div> |
| | | </div> |
| | | <!-- 表格固定的头部 --> |
| | | <div id="tbHead"> |
| | | <!-- <table class="tbFixed">这里是表格固定头部的内容</table> --> |
| | | </div> |
| | | <!-- 表格滚动的部分 --> |
| | | <div id="tbBrdw"> |
| | | <!-- <table class="tbScroll">这里是表格滚动的内容</table> --> |
| | | </div> |
| | | |
| | | <!-- 分页内容 --> |
| | | <div id="paging"> |
| | | <a href="javascript:" class="search">查询<!-- 查询 --></a> |
| | | 当前<!-- 当前 --><span id="current">1/0</span> |
| | | <span>每页<!-- 每页 --><input type="text" id="number" value="10"/>条<!-- 条 --></span> |
| | | 数据总量<!-- 数据总量 --><span id="total">0</span> |
| | | <a href="javascript:" id="home">首页<!-- 首页 --></a> |
| | | <a href="javascript:" id="pre">上一页<!-- 上一页 --></a> |
| | | <a href="javascript:" id="next_p">下一页<!-- 下一页 --></a> |
| | | <a href="javascript:" id="last">尾页<!-- 尾页 --></a> |
| | | <span id="cont"> |
| | | 转到<!-- 转到 --><input type="text" id="page_num" value="1"/> |
| | | <a href="javascript:" id="go">跳转<!-- 跳转 --></a> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div id="faceVue"> |
| | | <Modal |
| | | v-model="status" |
| | | title="图片上传" |
| | | width="480px" |
| | | footer-hide> |
| | | |
| | | <Upload |
| | | multiple |
| | | :max-size="10240" |
| | | :format="['jpg','jpeg','png']" |
| | | :before-upload="beforeAvatarUpload" |
| | | type="drag" |
| | | action=""> |
| | | <div style="padding: 20px 0"> |
| | | <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon> |
| | | <p style="color:red;">提示:图片大小不超过2MB,图像人脸角度端正,图像清晰;</p> |
| | | </div> |
| | | </Upload> |
| | | </Modal> |
| | | </div> |
| | | |
| | | <!-- 主体内容结束 --> |
| | | <!--清除浮动--> |
| | | <div class="clear"></div> |
| | | |
| | | </body> |
| | | <script type="text/javascript" src="element-ui/vue.min.js"></script> |
| | | <script type="text/javascript" src="iview/iview.min.js"></script> |
| | | <script type="text/javascript" src="js/createTab.js"></script> |
| | | <script type="text/javascript"> |
| | | var permits; |
| | | <% Object obj=session.getAttribute("permits"); |
| | | if(obj!=null){ |
| | | String permits =obj.toString(); %> |
| | | permits=<%=permits%>; |
| | | //console.info(json); |
| | | <% } %> |
| | | var issuper = false; |
| | | for(var i = 0;i<permits.length;i++){ |
| | | if(permits[i].permit_group_name == "超级管理员组"){ |
| | | issuper = true; |
| | | } |
| | | } |
| | | |
| | | var isCanEdit; //是否能编辑 |
| | | $(document).ready(function(){ |
| | | isCanEdit = findValIsExist('permit_edit_permit',permits); |
| | | if(!isCanEdit) |
| | | { |
| | | // $("#right-menu").remove();//操作按钮是否可以一点击 禁用 |
| | | } |
| | | }); |
| | | |
| | | var Page; //分页信息 |
| | | var vm = new Vue({ |
| | | el: '#faceVue', |
| | | data: { |
| | | status:false, |
| | | title:'提示:图片大小不超过2MB,图像人脸角度端正,图像清晰;', |
| | | imageUrl:'', |
| | | UId:'', |
| | | UName:'', |
| | | faceId:0 |
| | | |
| | | }, |
| | | methods: { |
| | | // 图片上传前 |
| | | beforeAvatarUpload(file) { |
| | | let seft = this; |
| | | const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; |
| | | const isLt2M = file.size / 1024 / 1024 < 2; |
| | | if (!isJPG) { |
| | | seft.$Message.error({ |
| | | duration:3, |
| | | background: true, |
| | | content: '上传头像图片只能是 JPG或PNG 格式!' |
| | | }); |
| | | return false; |
| | | } |
| | | if (!isLt2M) { |
| | | seft.$Message.error({ |
| | | duration:3, |
| | | background: true, |
| | | content: '上传头像图片大小不能超过 2MB!' |
| | | }); |
| | | return false; |
| | | } |
| | | //生成等待框 |
| | | createWait($('#tbBrdw')); |
| | | // 图片转base64 |
| | | seft.getBase64(file).then(res=>{ |
| | | seft.imageUrl = res; |
| | | let jsontemp = { |
| | | fileData:res, |
| | | uId:seft.UId, |
| | | uName:seft.UName |
| | | } |
| | | let url = seft.faceId ==0? 'FaceIdentifyAction_face_add':'FaceIdentifyAction_face_update' |
| | | $.post(url,"json="+JSON.stringify(jsontemp),function(data){ |
| | | let result = JSON.parse(data.result); |
| | | if(result.code == 1){ |
| | | //隐藏弹窗 |
| | | seft.status = false; |
| | | let text = seft.faceId ==0?'新增人脸成功!':'更新人脸成功'; |
| | | seft.$Message.success({ |
| | | duration:3, |
| | | background: true, |
| | | content: text |
| | | }); |
| | | searchAllOptNotes(); |
| | | }else{ |
| | | seft.$Message.success({ |
| | | duration:3, |
| | | background: true, |
| | | content: '上传失败,请重新上传!' |
| | | }); |
| | | } |
| | | //清除等待框 |
| | | $('#tbBrdw .wait').remove(); |
| | | }).error(function(err){ |
| | | //清除等待框 |
| | | $('#tbBrdw .wait').remove(); |
| | | seft.$Message.success({ |
| | | duration:3, |
| | | background: true, |
| | | content: '上传失败,请重新上传!' |
| | | }); |
| | | }) |
| | | }) |
| | | return false |
| | | }, |
| | | // 图片转base64 |
| | | getBase64(file) { |
| | | return new Promise(function (resolve, reject) { |
| | | let reader = new FileReader(); |
| | | let imgResult = ""; |
| | | reader.readAsDataURL(file); |
| | | reader.onload = function () { |
| | | imgResult = reader.result; |
| | | }; |
| | | reader.onerror = function (error) { |
| | | reject(error); |
| | | }; |
| | | reader.onloadend = function () { |
| | | resolve(imgResult); |
| | | }; |
| | | }); |
| | | }, |
| | | }, |
| | | }) |
| | | //初始化页面内容 |
| | | $(document).ready(function(){ |
| | | // setUserName(); |
| | | //定义页面高度 |
| | | var srnHt=$(window).height(); //浏览器可以区域的高度 |
| | | var bodyHt=$('body').height(); //body的高度 |
| | | var tbHt=$('#tbBrdw').height(); //表格容器的高度 |
| | | //对比浏览器和body高度 |
| | | if(srnHt>bodyHt) |
| | | { |
| | | $('#tbBrdw').height(tbHt+srnHt-bodyHt - 32); |
| | | } |
| | | $(window).resize(function(){ |
| | | var newSrnHt=$(window).height(); //浏览器可以区域的高度 |
| | | var newBodyHt=$('body').height(); //body的高度 |
| | | var newTbHt=$('#tbBrdw').height(); //表格容器的高度 |
| | | $('#tbBrdw').height(newTbHt+newSrnHt-newBodyHt); |
| | | }); |
| | | }); |
| | | |
| | | var ArrTd = []; //表格内的数据 |
| | | var ArrTh = []; |
| | | var formjson; |
| | | //生成表格及表格内的事件 |
| | | $(document).ready(function(){ |
| | | //定义表格的数据 |
| | | ArrTh=new Array(); //定义表格头部数据 |
| | | ArrTd=new Array(); //定义表格内的数据 |
| | | // 用户ID 操作人姓名 操作类型 操作时间 终端IP 操作事件 |
| | | ArrTh=['编号','用户姓名','登录方式','是否上传人脸','人脸库操作']; // 自定义表格头部数据 |
| | | //生成表格头部 |
| | | createTable('tbHead','tbFixed',ArrTh.length,ArrTh,ArrTd); |
| | | //让表头适应容器 |
| | | var tbHeadWidth=$('#tbHead').width(); //容器的宽度 |
| | | $('#tbHead .tbFixed').width(tbHeadWidth-20); |
| | | |
| | | //点击查询按钮根据查询条件生成表格 |
| | | $('#paging .search').click(function(){ |
| | | searchAllOptNotes() |
| | | }); |
| | | // 点击表格该行背景色改变 |
| | | $('#tbBrdw').on('click','.tbScroll tbody tr',function(){ |
| | | // 给被选中的行添加class='b8cfe5',未被选中的移除class='b8cfe5' |
| | | $('#tbBrdw .tbScroll tbody tr').removeClass('b8cfe5'); |
| | | $(this).addClass('b8cfe5'); |
| | | }); |
| | | // 初始化查询表格 |
| | | searchAllOptNotes(); |
| | | }); |
| | | |
| | | //页面加载时初始化时间 |
| | | $(document).ready(function(){ |
| | | var date=new Date(); |
| | | //var date1=new Date(2000,1,1); |
| | | |
| | | var year=date.getFullYear(); |
| | | var month=date.getMonth()+1; |
| | | var day=date.getDate(); |
| | | var today=year+"-"+month+"-"+day; |
| | | $("#endrecorddate").attr("value",today); |
| | | |
| | | }); |
| | | |
| | | // 查询所有的操作记录 |
| | | function searchAllOptNotes() { |
| | | var jsontemp = { |
| | | pageNum:$('#pageCurr').val(), |
| | | pageSize:$('#pageSize').val(), |
| | | } |
| | | |
| | | //生成等待框 |
| | | createWait($('#tbBrdw')); |
| | | //清除表格内容 |
| | | $('#tbBrdw table').remove(); |
| | | ArrTd=new Array(); |
| | | Page=null; |
| | | //console.info(json); |
| | | $.post("User_infAction!searchUserPage","addjson="+JSON.stringify(jsontemp),function(data){ |
| | | data=data.result; |
| | | model=eval("("+data+")"); |
| | | if(model.code==1 && model.data.obj.length>0){ |
| | | var index=0; |
| | | Page=model.data.totalSize; |
| | | for(var i=0;i<model.data.obj.length;i++){ |
| | | //console.info(model); |
| | | data=model.data.obj[i]; |
| | | //console.info(data); |
| | | ArrTd[index++]=i+1; //用户名称 |
| | | ArrTd[index++]=data.UName; //用户名称 |
| | | //ArrTd[index++]=data.loginType; |
| | | if(data.loginType==1){ |
| | | ArrTd[index++]="<label><input name='loginType"+ i +"' type='radio' value='1' checked data-UId='" + data.UId +"' class='typeRadio'/>密码登录</label> <label><input name='loginType"+ i +"' type='radio' value='2' data-UId='" + data.UId +"' class='typeRadio'/>人脸识别</label>"; |
| | | }else{ |
| | | ArrTd[index++]="<label><input name='loginType"+ i +"' type='radio' value='1' data-UId='" + data.UId +"' class='typeRadio'/>密码登录</label> <label><input name='loginType"+ i +"' type='radio' value='2' checked data-UId='" + data.UId +"' class='typeRadio'/>人脸识别</label>"; |
| | | } |
| | | |
| | | ArrTd[index++]=data.face.id === 0?"未上传人脸":"已上传人脸"; //用户状态 |
| | | let test = data.face.id === 0?"添加人脸":"更新人脸"; |
| | | ArrTd[index++]="<i-button type='success' data-faceId='"+ data.face.id +"' data-UId='" + data.UId +"' data-UName='"+ data.UName +"' class='add_rennian btn_box' >" + test + "</i-button> <i-button type='error' data-faceId='"+ data.face.id +"' data-UId='" + data.UId +"' data-UName='"+ data.UName +"' class='delete_rennian btn_box'>删除人脸</i-button>" //操作 |
| | | } |
| | | } |
| | | |
| | | //清除表格的头部 |
| | | $('#tbHead table').remove(); |
| | | //生成表格 |
| | | createTable('tbHead','tbFixed',ArrTh.length,ArrTh,ArrTd); |
| | | createTable('tbBrdw','tbScroll',ArrTh.length,ArrTh,ArrTd); |
| | | |
| | | //切换登录方式 |
| | | $('.typeRadio').off('click').click(function(){ |
| | | let UId = $(this).attr('data-UId'); |
| | | let loginType = $(this).attr('value'); |
| | | let postData = { |
| | | UId:UId, |
| | | loginType:loginType, |
| | | } |
| | | $.post("User_infAction!updateLoginType","addjson="+JSON.stringify(postData),function(data){ |
| | | data=data.result; |
| | | model=eval("("+data+")"); |
| | | if(model.code==1){ |
| | | vm.$Message.success(model.msg); |
| | | }else{ |
| | | vm.$Message.error(model.msg); |
| | | } |
| | | }); |
| | | }) |
| | | //新增、更新人脸 |
| | | $('.add_rennian').off('click').click(function(){ |
| | | vm.status = true; |
| | | vm.UId = $(this).attr('data-UId'); |
| | | vm.UName = $(this).attr('data-UName'); |
| | | vm.faceId = $(this).attr('data-faceId'); |
| | | }) |
| | | // 删除人脸 |
| | | $('.delete_rennian').off('click').click(function(){ |
| | | let UId = $(this).attr('data-UId'); |
| | | let UName = $(this).attr('data-UName'); |
| | | let faceId = $(this).attr('data-faceId'); |
| | | if(faceId == 0){ |
| | | vm.$Message.error('用户尚未上传人脸!'); |
| | | }else{ |
| | | vm.$Modal.confirm({ |
| | | title: '确定删除人脸吗?', |
| | | // content: '<p>确定删除人脸吗?</p>', |
| | | onOk: () => { |
| | | let jsontemp = { |
| | | uId:UId, |
| | | uName:UName, |
| | | faceId:faceId |
| | | } |
| | | $.post('FaceIdentifyAction_face_delete',"json="+JSON.stringify(jsontemp),function(data){ |
| | | let result = JSON.parse(data.result); |
| | | if(result.code == 1){ |
| | | vm.$Message.success({ |
| | | duration:3, |
| | | background: true, |
| | | content: '删除成功!' |
| | | }); |
| | | searchAllOptNotes(); |
| | | }else{ |
| | | vm.$Message.error({ |
| | | duration:3, |
| | | background: true, |
| | | content: '删除失败,请从新上传!' |
| | | }); |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | } |
| | | }) |
| | | //清除等待框 |
| | | $('#tbBrdw .wait').remove(); |
| | | var tbHeadWidth=$('#tbHead').width(); //容器的宽度 |
| | | $('#tbHead .tbFixed').width(tbHeadWidth-20); |
| | | $('#tbBrdw .tbScroll').width(tbHeadWidth-20); |
| | | //console.info(Page); |
| | | if(Page!=undefined && Page!=null){ |
| | | var pagesize=$('#pageSize').attr('value'); |
| | | var pagecurr=$('#pageCurr').attr('value'); |
| | | $('#total').text(Page); |
| | | var pageNum=Math.ceil(Page/pagesize); |
| | | $('#current').text(pagecurr+"/"+pageNum); |
| | | $('#page_num').attr('value',pagecurr); |
| | | }else{ |
| | | $('#pageCurr').attr('value',1); |
| | | $('#total').text(0); |
| | | $('#current').text(1+"/"+0); |
| | | $('#page_num').attr('value',1); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | |
| | | //首页 |
| | | $('#home').click(function(){ |
| | | var currentPage=$('#pageCurr').attr('value'); |
| | | if(currentPage!=1){ |
| | | $("#pageCurr").attr("value",1); |
| | | $("#paging .search").click(); |
| | | } |
| | | }); |
| | | |
| | | //点击上一页 |
| | | $('#pre').click(function(){ |
| | | var currentPage=$('#pageCurr').attr('value'); |
| | | if(currentPage>1){ |
| | | $("#pageCurr").attr('value',currentPage-1); |
| | | $("#paging .search").click(); |
| | | } |
| | | }); |
| | | |
| | | |
| | | //点击下一页 |
| | | $("#next_p").click(function(){ |
| | | if(Page!=undefined){ |
| | | var PageCurr=$('#pageCurr').attr('value'); |
| | | var PageSize=$('#pageSize').attr('value'); |
| | | var pageNum=Math.ceil(Page/PageSize); |
| | | if(PageCurr<pageNum){ |
| | | //console.info(Page); |
| | | $('#pageCurr').attr('value',(parseInt(PageCurr)+1)+""); |
| | | $("#paging .search").click(); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | //尾页 |
| | | $('#last').click(function(){ |
| | | if(Page !=undefined){ |
| | | var PageSize=$('#pageSize').attr('value'); |
| | | var pageNum=Math.ceil(Page/PageSize); |
| | | var currPage=$('#pageCurr').attr('value'); |
| | | if(currPage<pageNum){ |
| | | $('#pageCurr').attr('value',pageNum); |
| | | $("#paging .search").click(); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | |
| | | //设置每页行数 |
| | | $('#number').blur(function(){ |
| | | var value=$('#number').attr("value"); |
| | | //当输入的数大于0时 |
| | | if(value>0){ |
| | | value=parseInt(value); |
| | | if(value != $('#pageSize').val()){ |
| | | $('#pageCurr').val(1); |
| | | $('#number').attr('value',value); |
| | | $('#pageSize').attr('value',value); |
| | | } |
| | | }else{ |
| | | //当输入非法数字时 |
| | | alert("<s:text name='Please_enter_the_legitimate_number!'/>"); /* 请输入合法的整数 */ |
| | | $('#number').attr('value',$('#pageSize').attr('value')); |
| | | } |
| | | }); |
| | | |
| | | //填写完跳转到指定页 |
| | | $('#page_num').blur(function(){ |
| | | var tarpage=$('#page_num').attr('value'); |
| | | if(tarpage>0){ |
| | | }else{ |
| | | alert("<s:text name='Please_enter_the_legitimate_number!'/>"); /* 请输入合法的整数 */ |
| | | $('#page_num').attr('value',$('#pageCurr').attr('value')); |
| | | } |
| | | }); |
| | | |
| | | //点击跳转 |
| | | $('#go').click(function(){ |
| | | var tarpage=$('#page_num').attr('value'); |
| | | tarpage=parseInt(tarpage); |
| | | if(Page!=undefined && Page!=null){ |
| | | var PageSize=$('#pageSize').attr('value'); |
| | | var pageNum=Math.ceil(Page/PageSize); |
| | | if(tarpage>pageNum){ |
| | | tarpage=pageNum; |
| | | $('#page_num').attr('value',pageNum); |
| | | } |
| | | $('#pageCurr').attr('value',tarpage); |
| | | $("#paging .search").click(); |
| | | }else{ |
| | | $('#pageCurr').attr('value',$('#pageCurr').attr('value')); |
| | | } |
| | | }); |
| | | |
| | | |
| | | |
| | | </script> |
| | | </html> |