395 lines
13 KiB
Plaintext
395 lines
13 KiB
Plaintext
|
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||
|
|
<!DOCTYPE html >
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<title>大屏监考</title>
|
||
|
|
<%@include file="../baseset.jsp" %>
|
||
|
|
<%@include file="../systemset.jsp" %>
|
||
|
|
<meta name="google" content="notranslate" />
|
||
|
|
<script language="javascript" type="text/javascript" src="${bonuspath}/static/examples/conf.js"></script>
|
||
|
|
<script language="javascript" type="text/javascript" src="${bonuspath}/static/examples/include.js"></script>
|
||
|
|
<link rel="stylesheet" href="${bonuspath}/static/js/utility/video/video-js.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="${bonuspath}/static/EduCationTrainUI/TestDemo/css/bootstrap.css">
|
||
|
|
<link rel="stylesheet" href="${bonuspath}/static/EduCationTrainUI/TestDemo/css/templatemo-style.css">
|
||
|
|
<script type="text/javascript" src="${bonuspath}/static/js/utility/jquery.fullscreen-min.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/video/videojs-ie8.min.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/video/video.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/video/videojs-flash.min.js"></script>
|
||
|
|
<!-- <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
|
||
|
|
--><script src="${bonuspath}/static/js/utility/flv.min.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/alawmulaw.min.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/bonus/playvideo.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/talk.js"></script>
|
||
|
|
<script src="${bonuspath}/static/js/utility/bonus/html2canvas.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
* { margin: 0; padding: 0; }
|
||
|
|
|
||
|
|
html, body { height: 100%; width: 100%; }
|
||
|
|
|
||
|
|
canvas { display: block; }
|
||
|
|
body,html{
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 0;
|
||
|
|
padding: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#daohangl {
|
||
|
|
background-image: url(${bonuspath}/static/EduCationTrainUI/TestDemo/img/heard.png);
|
||
|
|
}
|
||
|
|
|
||
|
|
.activeBack {
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.welcome {
|
||
|
|
position: absolute;
|
||
|
|
margin-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:15%;
|
||
|
|
z-index:9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay div {
|
||
|
|
position: relative;
|
||
|
|
color: #FF0000;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
#content .center {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox {
|
||
|
|
border: 1px grey solid;
|
||
|
|
width: 400px;
|
||
|
|
height: 300px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox #video1 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox2 {
|
||
|
|
border: 1px grey solid;
|
||
|
|
width: 400px;
|
||
|
|
height: 300px;
|
||
|
|
position: absolute;
|
||
|
|
top: 1px;
|
||
|
|
left: 413px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox2 #video2 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox3 {
|
||
|
|
border: 1px grey solid;
|
||
|
|
width: 400px;
|
||
|
|
height: 300px;
|
||
|
|
margin-left: 10px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox3 #video3 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox4 {
|
||
|
|
position: relative;
|
||
|
|
border: 1px grey solid;
|
||
|
|
width: 400px;
|
||
|
|
height: 300px;
|
||
|
|
position: absolute;
|
||
|
|
top: 303px;
|
||
|
|
left: 413px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#windowbox4 #video4 {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.getsize{
|
||
|
|
height:292px;
|
||
|
|
width: 25%;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="daohangl" class="navbar navbar-default navbar-fixed-top">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="collapse navbar-collapse">
|
||
|
|
<ul class="nav navbar-nav navbar-right">
|
||
|
|
<li> <a href="${pageContext.request.contextPath}/backstage/index" id="index" class="smoothScroll">首页</a> </li>
|
||
|
|
<li> <a href="#" id="person" onclick="logon()" class="smoothScroll">退出</a> </li>
|
||
|
|
<li class="welcome">
|
||
|
|
<a> <small>欢迎光临,</small>
|
||
|
|
<span id="user-info-name ">
|
||
|
|
<c:choose>
|
||
|
|
<c:when test="${!empty sessionUser.name}"> ${sessionUser.name }</c:when>
|
||
|
|
<c:otherwise>用户</c:otherwise>
|
||
|
|
</c:choose>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<c:if test="${sessionUser.ifPermiss eq '1'}">
|
||
|
|
<li><a href="#" onclick="inter()" class="smoothScroll">进入后台</a></li>
|
||
|
|
</c:if>
|
||
|
|
<li><a href="#" onclick="proctor()" class="smoothScroll activeBack">大屏监考</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="width: 100%;padding-top: 5%;">
|
||
|
|
<!-- <div style="width:15%;height: 100%; float: left;">
|
||
|
|
<div title="视频分组" style="width: 100%;height: 98%; border:1px solid black;">
|
||
|
|
<div id="resource_tree" class="easyui-tree" style="height: 100%;width: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<div id="jtshow" style="width: 83%; position: relative; height: 588px;margin-left:10%; border:2px solid #FFFFFF" >
|
||
|
|
<div id="contain-top">
|
||
|
|
<div class="getsize" style="top:0;left:0; border:2px solid #FFFFFF">
|
||
|
|
<video autoplay id="video1" class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
<div class="getsize" style=" top:0;left:25%; border:2px solid #FFFFFF">
|
||
|
|
<video id="video2" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
<div class="getsize" style="top:0;left:50%; border:2px solid #FFFFFF">
|
||
|
|
<video id="video3" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
<div class="getsize" style="top:0;left:75%; border:2px solid #FFFFFF">
|
||
|
|
<video id="video4" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="contain-bottom">
|
||
|
|
<div class="getsize"style="bottom:0;left:0; border:2px solid #FFFFFF"">
|
||
|
|
<video id="video5" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
<div class="getsize" style="bottom:0;left:25%;border:2px solid #FFFFFF">
|
||
|
|
<video id="video6" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
<div class="getsize" style="bottom:0;left:50%; border:2px solid #FFFFFF">
|
||
|
|
<video id="video7" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
<div class="getsize" style="bottom:0;left:75%; border:2px solid #FFFFFF">
|
||
|
|
<video id="video8" autoplay class="video-js video-click" style="width:100%;height:100%;background-color:#000000;object-fit:fill" ontimeupdate="progress(event)"></video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<canvas id="c1" width="200" height="100" style="position: fixed;top: 0;z-index: 9999;display: none;overflow:hidden"></canvas>
|
||
|
|
<div id="img"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
let flag = false;
|
||
|
|
let renyuan = null;
|
||
|
|
function drawFont(ctx){
|
||
|
|
//ctx.clearRect();
|
||
|
|
// =S 绘制坐标参照系
|
||
|
|
//查询对应的人员基本信息
|
||
|
|
ctx.font = '20px "微软雅黑"';
|
||
|
|
ctx.fillStyle = "white";
|
||
|
|
ctx.textBaseline = "top";
|
||
|
|
for(var i=0;i<renyuan.obj.list.length;i++){
|
||
|
|
if(renyuan.obj.list[i] !=null){
|
||
|
|
ctx.fillText(renyuan.obj.list[i].seat+":"+renyuan.obj.list[i].name, parseInt(renyuan.obj.list[i].latitude), parseInt(renyuan.obj.list[i].longitude));
|
||
|
|
ctx.fillText(renyuan.obj.list[i].department, parseInt(renyuan.obj.list[i].latitude), parseInt(renyuan.obj.list[i].longitude)+20); }
|
||
|
|
}
|
||
|
|
ctx.textBaseline = "middle";
|
||
|
|
|
||
|
|
}
|
||
|
|
var canvasDrawVideo = {
|
||
|
|
onLoad: function (id) {
|
||
|
|
this.canvas = document.getElementById('c1')
|
||
|
|
this.video = document.getElementById(id)
|
||
|
|
this.ctx = this.canvas.getContext('2d')
|
||
|
|
$('#c1').attr("width", $(window).width());
|
||
|
|
$('#c1').attr("height", $(window).height());
|
||
|
|
this.ctx.fillRect(0, 0, $('#c1').width(), $('#c1').height());
|
||
|
|
this.render()
|
||
|
|
this.video.play()
|
||
|
|
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
function renderWord() {
|
||
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||
|
|
this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height)
|
||
|
|
drawFont(this.ctx)
|
||
|
|
|
||
|
|
if(!flag){
|
||
|
|
clearInterval(timer);
|
||
|
|
}else{
|
||
|
|
timer = setTimeout(renderWord.bind(this), 0)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var timer = setTimeout(renderWord.bind(this), 0)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
//定义setTimeout执行方法
|
||
|
|
var TimeFn = null;
|
||
|
|
$('.video-click').dblclick(function(e){
|
||
|
|
let id = e.target.id
|
||
|
|
let ind = id.split('o')[1];
|
||
|
|
if(!flag){
|
||
|
|
if(ind<5){
|
||
|
|
getData(ids[ind-1]);
|
||
|
|
}else{
|
||
|
|
getData(ids1[ind-5]);
|
||
|
|
}
|
||
|
|
|
||
|
|
renyuan = JSON.parse(localStorage.getItem("dataobj"));
|
||
|
|
canvasDrawVideo.onLoad(id)
|
||
|
|
$('#c1').css('display','block')
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
localStorage.setItem("dataobj", "");
|
||
|
|
flag = !flag;
|
||
|
|
$('#c1').dblclick(function(){
|
||
|
|
// 取消上次延时未执行的方法
|
||
|
|
clearTimeout(TimeFn);
|
||
|
|
$('#c1').css('display','none');
|
||
|
|
flag = !flag;
|
||
|
|
})
|
||
|
|
$('#c1').click(function(){
|
||
|
|
// 取消上次延时未执行的方法
|
||
|
|
clearTimeout(TimeFn);
|
||
|
|
//执行延时
|
||
|
|
TimeFn = setTimeout(function(){
|
||
|
|
//do function在此处写单击事件要执行的代码
|
||
|
|
html2canvas(document.getElementById('c1')).then(function(canvas) {
|
||
|
|
var dataURL = canvas.toDataURL("image/png", 0.1);
|
||
|
|
var imgData = dataURL.replace("data:image/png;base64,", "");
|
||
|
|
$.ajax({
|
||
|
|
url: bonuspath+"/backstage/camera/img_upload",
|
||
|
|
data: {
|
||
|
|
"imgBase64Data": imgData
|
||
|
|
},
|
||
|
|
dataType: 'json',
|
||
|
|
type: 'post',
|
||
|
|
//timeout: 100000,
|
||
|
|
success: function(data) {
|
||
|
|
alert("截图成功")
|
||
|
|
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
console.log(errorThrown);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},300);
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
$("#personorhide").click(function(){
|
||
|
|
if($("#overlay").css("display")=="none"){
|
||
|
|
$("#overlay").show();
|
||
|
|
}else{
|
||
|
|
$("#overlay").hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
connect();
|
||
|
|
connect1();
|
||
|
|
})
|
||
|
|
function takePhoto() {
|
||
|
|
var kc=$("#kc").val();
|
||
|
|
var zw=$("#zw").val();
|
||
|
|
if(kc !="" && zw !=""){
|
||
|
|
html2canvas(document.getElementById('mycanvas'), {
|
||
|
|
onrendered: function(canvas) {
|
||
|
|
useCORS:true;
|
||
|
|
var dataURL = canvas.toDataURL("image/png", 0.1);
|
||
|
|
var imgData = dataURL.replace("data:image/png;base64,", "");
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: "${bonuspath}/backstage/camera/img_upload",
|
||
|
|
data: {
|
||
|
|
"imgBase64Data": imgData,
|
||
|
|
kc:kc,
|
||
|
|
zw:zw
|
||
|
|
},
|
||
|
|
dataType: 'json',
|
||
|
|
type: 'post',
|
||
|
|
timeout: 100000,
|
||
|
|
success: function(data) {
|
||
|
|
$("#jietuPicture").attr('src',data);
|
||
|
|
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
console.log(errorThrown);
|
||
|
|
mui.toast('网络异常，请稍后再试！');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
alert("请输入给考生的考场号和座位号")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function logon(){
|
||
|
|
$(location).attr("href","${bonuspath}/system_logout");
|
||
|
|
}
|
||
|
|
function tijiao(){
|
||
|
|
var kc=$("#kc").val();
|
||
|
|
var zw=$("#zw").val();
|
||
|
|
if(kc !="" && zw !=""){
|
||
|
|
var forminfo = new FormData($("#weiguiForm")[0]);
|
||
|
|
var articleImageFile = document.getElementById('articleImageFile').files[0];
|
||
|
|
$.ajax({
|
||
|
|
cache: false,
|
||
|
|
processData: false,
|
||
|
|
contentType: false,
|
||
|
|
type: "POST",
|
||
|
|
async: true, // 默认异步true,false表示同步
|
||
|
|
url: '${bonuspath}/backstage/seat/findfilesave', // 请求地址
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
data:forminfo,
|
||
|
|
success: function (data) {
|
||
|
|
showMsgAndReload(data.resMsg);
|
||
|
|
|
||
|
|
},
|
||
|
|
error: function (XMLHttpRequest, textStatus, e) {
|
||
|
|
alert("服务器出问题")
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}else{
|
||
|
|
alert("请输入给考生的考场号和座位号")
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
function NotshowName(){
|
||
|
|
$("#overlay").hide();
|
||
|
|
}
|
||
|
|
function showName(){
|
||
|
|
$("#overlay").show();
|
||
|
|
}
|
||
|
|
function inter(){
|
||
|
|
$(location).attr("href","${bonuspath}/intercontroller");
|
||
|
|
}
|
||
|
|
</script>
|