LayUI项目之我的会议（送审以及排座）

最新推荐文章于 2024-03-28 17:21:08 发布

呼啦啦dxy

最新推荐文章于 2024-03-28 17:21:08 发布

阅读量7.7k

点赞数 1

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_66202611/article/details/125980788

版权

前言

为什么会议要排座？

参会人员每个人的位置是有讲究的，重要人员一般是做主位以及主位旁边。在本系统里不考虑桌子的形状。

一，会议排座

首先我们的先查出会议里有哪些参会人员，在会议排座中，我们需要用到一些插件，当点击排座时，应当要弹出一个框，而这个框需要运用到插件。我们也可以自己写脚本。

1.前台编码

从网上拷贝代码，效果可能会与自己所期待的有些许差距，这是我们考科一稍稍更改一下样式。

找到样式的编码处，然后找到相对应的元素，修改或添加即可。

调试后的效果图（图中的小方块可移动）

调试后的jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.contextPath }/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/layui/layui.js"></script>
<script type="text/javascript" src="static/js/plugins/html2canvas/html2canvas.js"></script>
<title>会议座位安排</title>
</head>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
		
body{
	width: 100%;
	height: 100%;
	/* background: red; */
}

.tips {
	/* position: absolute; */
	background: pink;
	display: inline-block;
	height: 60px;
	/* width: 60px; */
	line-height: 60px;
	text-align: center;
	margin: 5px;
	padding: 0 10px;
}

.add {
	position: fixed;
	right: 10px;
	top: 10px;
	display:inline;
}

#tu {
	width: 100%;
	height: 100%;
	/* background: lightblue; */
		/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
}
.layui-input{
	height:30px;
}
</style>
<body id="screen_body">
    <div id="tu"></div>
    <!-- 下面不要使用layui的表单行内模式，会导致canvas的toDataURL()数据为 data:, -->
	<div class="add">
		<div style="display:inline-block;">
			<input id="dan_input" type="text" value="" class="layui-input">
		</div>
		<div style="display:inline-block;">
			<button onclick="return addDanMu()" class="layui-btn layui-btn-sm">添加座位</button><input id="jie_input" type="button" class="layui-btn layui-btn-sm" value='下载'>
		</div>
	</div>
</body>
<script type="text/javascript">
var $id = function(id) {
	return document.getElementById(id);
}
//会议排座拖拽
var dragF = {
	locked: false,
	lastObj: undefined,
	drag: function(obj) {
		$id(obj).onmousedown = function(e) {
			var e = e ? e : window.event;
			if (!window.event) {
				e.preventDefault();
			} /* 阻止标注<a href='/site/js-5791-1.html' target='_blank'><u>浏览器</u></a>下拖动a,img的默认事件 */
			dragF.locked = true;
			$id(obj).style.position = "absolute";
			$id(obj).style.zIndex = "100";
			if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* 多元素拖动需要恢复上次元素状态 */
				dragF.lastObj.style.zIndex = "1";
			}

			dragF.lastObj = $id(obj);
			var tempX = $id(obj).offsetLeft;
			var tempY = $id(obj).offsetTop;

			dragF.x = e.clientX;
			dragF.y = e.clientY;
			document.onmousemove = function(e) {
				var e = e ? e : window.event;
				if (dragF.locked == false) return false;
				$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
				$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
				if (window.event) {
					e.returnValue = false;
				} /* 阻止ie下a,img的默认事件 */

			}

			document.onmouseup = function() {
				dragF.locked = false;
			}
		}
	}
}
</script>

<script type="text/javascript">
var layer;
layui.use(['layer'],function(){
	layer=layui.layer;

    //初始化会议排座：根据会议ID获取参会的所有人员的名字（主持人+参会人+列席人）
	initMeetingUsers();
	
	//绘制会议排座图片
	$("#jie_input").on("click", function(event) {
		$('.add').hide();
		event.preventDefault();
		html2canvas(document.getElementById("screen_body")).then(function(canvas) {
			var dataUrl = canvas.toDataURL();
			console.log(dataUrl);
			var param = {};
			param['seatPic'] = dataUrl;
			param['id'] = '${param.id}';
			param['methodName']='updateSeatPicById';
			console.log(param);
			//此处需要完成会议排座图片上传操作
			$.post('${pageContext.request.contextPath }/info.action',param,function(rs){
				if(rs.success){
					//先得到当前iframe层的索引
					var index = parent.layer.getFrameIndex(window.name); 
					//再执行关闭
					parent.layer.close(index); 
					//调用父页面的刷新方法
					parent.query();
				}else{
					layer.msg(rs.msg,{icon:5},function(){});
				}
			},'json');
		});
	});
});

function initMeetingUsers(){
	//http://localhost:8080/xxx/seatPic.jsp?id=12  -> ${param.id}
	$.getJSON('${pageContext.request.contextPath }/user.action',{
		'methodName':'queryUserByMeetingId',
		'meetingId':'${param.id}'
	},function(rs){
		console.log(rs);
		let data=rs.data;
		$.each(data,function(i,e){
			$('#dan_input').val(e.name);
			addDanMu();
		});
	});
}


//添加会议排座
function addDanMu() {
	var dan = document.getElementById("dan_input").value;
	if (dan == "") {
		alert("请输入弹幕~");
		return false;
	} else {
		document.getElementById("dan_input").value = ""; //清空 弹幕输入框
		// var br = document.createElement("BR");  // <br />
		var node = document.createElement("DIV"); // <div>
		var tipsArr = document.getElementsByClassName('tips');
		var i;
		// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
		if (tipsArr.length == 0) {
			i = 1
		} else {

			i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
		}
		// var aNode = document.createElement("P");   // <p>
		node.setAttribute("class", "tips");
		node.setAttribute("id", "tips" + i);
		node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
		var textnode = document.createTextNode(dan); // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 <p>  中
		// aNode.appendChild(textnode);
		node.appendChild(textnode);
		// document.body.appendChild(br);
		// document.body.appendChild(node);

		document.getElementById("tu").appendChild(node);
		return true;
	}
}
	</script>
</html>

分析：当点击下载是时，我们可以查看原代码，以下这一长串代码是用字符串表示的一张图片（以下代码的字节长度为8090）

结论：图片之所以能显示出来跟base64位字符串有关系，通过以上分析downloadfile方法中content参数就代表图片。

所以content需要传递到后台，并且生成图片，只有这样，我们才能通过代码决定图片存在哪里

2.后台编码

1.图片工具类

这个类专门用来处理图片，当运行时图片它会自动的存到本地文档里。

package com.zking.util;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

public class Base64ImageUtils {
	public static void main(String[] args) {
		// 测试从Base64编码转换为图片文件
		// String strImg =
		// "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