wangbin
/
Door
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '300096d7ea'
${ noResults }
Door/mister/screen/web/meetingview.html

2896 lines
114 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>会议大屏</title>
<link rel="stylesheet" type="text/css" href="/webs/resourse/iconfont.css" />
<!-- <script src="/webs/resourse/fabric.js"></script> -->
<!-- <script src="/webs/resourse/fabric_3_6_2.js"></script>
<script src="/webs/resourse/moment.js"></script>
<script src="/webs/resourse/html2canvas.min.js"></script> -->
<script src="/webs/resourse/fabric_3_6_2.js"></script>
<script src="/webs/resourse/moment.js"></script>
<script src="/webs/resourse/html2canvas.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.yt_content {
position: absolute;
z-index: 1;
overflow-x: hidden;
overflow-y: scroll;
}
.voteContent {
display: flex;
/* align-items: center; */
justify-content: center;
transform-origin: center center;
}
</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="yt_content" class="yt_content">
<div id="element" className="voteContent"></div>
</div>
<canvas id="canvas"></canvas>
<a style="font-family: 'fzxbs'; opacity: 0">字体测试</a>
</body>
<script type="text/javascript">
// 创建 FontFace 对象并加载字体文件
const font = new FontFace(
"fzxbs",
"url(/webs/resourse/fzxbs.ttf) format(truetype)"
);
font
.load()
.then(() => {
console.log("success");
})
.catch((err) => {
console.log("Failed to load font:");
});
const font1 = new FontFace(
"fzxbs",
"url(/webs/resourse/kaiti.ttf) format(truetype)"
);
font1
.load()
.then(() => {
console.log("success");
})
.catch((err) => {
console.log("Failed to load font:");
});
const font2 = new FontFace(
"fzxbs",
"url(/webs/resourse/heiti.ttf) format(truetype)"
);
font2
.load()
.then(() => {
console.log("success");
})
.catch((err) => {
console.log("Failed to load font:");
});
const font3 = new FontFace(
"fzxbs",
"url(/webs/resourse/songti.ttf) format(truetype)"
);
font3
.load()
.then(() => {
console.log("success");
})
.catch((err) => {
console.log("Failed to load font:");
});
const font4 = new FontFace(
"fzxbs",
"url(/webs/resourse/fangsong.ttf) format(truetype)"
);
font4
.load()
.then(() => {
console.log("success");
})
.catch((err) => {
console.log("Failed to load font:");
});
//添加文本标签start===============================
let handleSetText = (left, top, val) => {
// console.log(left,top,val)
const textWidth = val ? parseInt(val.width) : 200;
const textHeigth = val ? parseInt(val.height) : 100;
let textTop = 0;
if (val && val.verticalAlignment === "center") {
textTop = textTop + (textHeigth - val.fontSize) / 2;
} else if (val && val.verticalAlignment === "bottom") {
textTop = textTop + (textHeigth - val.fontSize);
}
let beforpara = "";
let afterpara = "";
const parmitems = val.systemParContent.split("Ψ");
if (parmitems.length > 1) {
beforpara = parmitems[0];
afterpara = parmitems[1];
}
let textContent =
beforpara + (val ? val.text + "" : "文本标签") + afterpara;
if (val.bindingFieldID == "0x1025") {
if (afterpara.includes("未按") && val.text == "0") {
textContent = "";
}
}
if (val.rowCount === "false") {
if (val && val.textTrimming !== "1") {
if (textContent.length * val.fontSize > textWidth) {
let num = Math.floor(textWidth / val.fontSize);
textContent = textContent.substr(0, num - 1) + "...";
}
} else {
if (textContent.length * val.fontSize > textWidth) {
let num = Math.floor(textWidth / val.fontSize);
textContent = textContent.substr(0, num);
}
}
}
const textBox = new fabric.Textbox(textContent, {
fill: val && val.foreground ? val.foreground : "#000",
fontSize: val && val.fontSize ? parseInt(val.fontSize) : 18,
fontWeight: val && val.fontWeight ? val.fontWeight : "normal",
fontStyle: val && val.fontStyle ? val.fontStyle : "normal",
fontFamily: val && val.fontFamily ? val.fontFamily : "SimSun",
textAlign:
val && val.horizontalAlignment ? val.horizontalAlignment : "",
shadow: val && val.effect == "true" ? shadow : null,
textTrimming: val && val.textTrimming ? val.textTrimming : "1",
width: textWidth,
left: 0,
top: textTop,
splitByGrapheme: val && val.rowCount == "true" ? true : false,
});
const border = new fabric.Rect({
left: 0,
top: 0,
width: textWidth,
height: textHeigth,
background: val && val.background.includes("#") ? val.background : "", //透明
fill: val && val.background.includes("#") ? val.background : "", //透明
opacity: val && val.background.includes("#") ? 1 : 0,
_type: "border",
});
let group = new fabric.Group([border, textBox], {
width: textWidth,
height: textHeigth,
text: val ? val.text + "" : "文本标签",
left: val ? parseInt(val.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: val ? parseInt(val.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
effect: val && val.effect == "true" ? true : false,
component_type: "1",
fontFamily: val && val.fontFamily ? val.fontFamily : "SimSun",
fontSize: val && val.fontSize ? val.fontSize : 18,
fontStyle: val && val.fontStyle ? val.fontStyle : "normal",
fontWeight: val && val.fontWeight ? val.fontWeight : "normal",
horizontalAlignment:
val && val.horizontalAlignment ? val.horizontalAlignment : "left",
verticalAlignment:
val && val.verticalAlignment ? val.verticalAlignment : "top",
background: val && val.background.includes("#") ? val.background : "", //透明
foreground: val ? val.foreground : "#000", //字体颜色
textTrimming: val && val.textTrimming ? val.textTrimming : "1",
rowCount: val && val.rowCount == "true" ? true : false,
bindingFieldID: val && val.bindingFieldID ? val.bindingFieldID : "",
systemParContent: val.systemParContent,
cvalue: val,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
if (val.bindingFieldID == "0x1043") {
let ts = textBox.text;
let timer = setInterval(() => {
let dd = parseInt(ts / 60 / 60 / 24); //计算剩余天数
dd = dd < 10 ? "0" + dd : dd;
let hh = parseInt((ts / 60 / 60) % 24); //计算剩余小时数
hh = hh < 10 ? "0" + hh : hh;
let mm = parseInt((ts / 60) % 60); //计算剩余分钟数
mm = mm < 10 ? "0" + mm : mm;
let ss = parseInt(ts % 60); //计算剩余秒数
ss = ss < 10 ? "0" + ss : ss;
console.log(dd + ":" + hh + ":" + mm + ":" + ss);
textBox.set({
text: mm + ":" + ss,
});
if (ts > 0) {
ts--;
} else {
clearInterval(timer);
}
}, 1000);
}
canvas.add(group); // 将图形添加至画布
};
//添加文本标签end===============================
//添加图片照片start=====================================
let handleAddImage = (left, top, image) => {
let ImgElement = document.createElement("img");
// ImgElement.src = image
let img = new fabric.Image(ImgElement, {
scaleX: 1,
scaleY: 1,
// originX: 'center',
// originY: 'center',
});
let group = new fabric.Group([img], {
// left: 130, //设置canvas上的X坐标
// top: 130, //设置canvas上的Y坐标
left: image
? parseInt(image.left)
: parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: image ? parseInt(image.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
component_type: "2",
width: image ? image.width : 100,
height: image ? image.height : 100,
shadow: image && image.effect === "true" ? shadow : null,
effect: image && image.effect === "true" ? true : false,
imagePath:
image && image.imagePath
? image.imagePath
: "webs/upload/img/001.jpg",
bindingFieldID: image ? image.bindingFieldID : "-1",
cvalue: image,
resourceMode: image ? image.resourceMode : "0",
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
// objectCaching: false // 不缓存
});
if (image) {
img.setSrc(
image && image.imagePath
? `http://localhost:9999/${image.imagePath}`
: ImageControl,
() => {
// 默认
let scaleY = 1;
let scaleX = 1;
if (image.stretch === "2") {
// 同比例裁剪照片
const scale =
group.width / img.width > group.height / img.height
? group.width / img.width
: group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (image.stretch === "3") {
// 同比例
const scale =
group.width / img.width < group.height / img.height
? group.width / img.width
: group.height / img.height;
scaleY = scale;
scaleX = scale;
} else if (image.stretch === "4") {
// 填充
scaleY = group.height / img.height;
scaleX = group.width / img.width;
}
img.set({
left: 0,
top: 0,
originX: "center",
originY: "center",
scaleX: scaleX,
scaleY: scaleY,
});
canvas.requestRenderAll();
}
);
group.clipPath =
image.stretch === "2"
? new fabric.Rect({
top: -group.height / 2,
left: -group.width / 2,
width: group.width,
height: group.height,
})
: null;
canvas.add(group);
} else {
img.setSrc(`http://localhost:9999/webs/upload/img/001.jpg`, () => {
const scaleY = group.height / img.height;
const scaleX = group.width / img.width;
img.set({
left: 0,
top: 0,
originX: "center",
originY: "center",
scaleX: scaleX,
scaleY: scaleY,
});
canvas.add(group);
});
}
};
//添加图片照片end==================================
// 添加视频==================================
let handleAddVideo = (left, top, vid) => {
let Video = document.createElement("video");
Video.setAttribute(
"src",
vid && vid.videoSource
? `http://localhost:9999/${vid.videoSource}`
: "http://localhost:9999/webs/upload/demo.mp4"
);
let id = Date.now();
Video.onloadedmetadata = () => {
URL.revokeObjectURL(Video.src);
const width = Video.videoWidth;
const height = Video.videoHeight;
const scaleX = vid ? vid.width / Video.videoWidth : 1;
const scaleY = vid ? vid.height / Video.videoHeight : 1;
Video.setAttribute("width", width);
Video.setAttribute("height", height);
Video.setAttribute("controls", "controls");
Video.setAttribute("id", id);
Video.setAttribute("autoplay", "autoplay");
Video.setAttribute("loop", "loop");
let video = new fabric.Image(Video, {
left: vid ? parseInt(vid.left) : parseInt(left - canvas._offset.left), //设置canvas上的X坐标
top: vid ? parseInt(vid.top) : parseInt(top - canvas._offset.top), //设置canvas上的Y坐标
scaleX: scaleX,
scaleY: scaleY,
width: width,
height: height,
component_type: "3",
cvalue: vid,
id: id,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
document.getElementById("videos")?.appendChild(Video);
canvas.add(video);
video.getElement().play();
fabric.util.requestAnimFrame(function render() {
canvas.requestRenderAll();
fabric.util.requestAnimFrame(render);
});
};
};
// 添加视频==================================
// 添加议题内容 开始=========================
let handleSetYtnr = (left, top, item) => {
console.log("添加议题内容", left, top, item);
if (!(item && item.text && item.text.to_agendahtml)) return;
const styleBox = `width:${item.width}px;height:${item.height}px;left:${item.left}px;top:${item.top}px;text-align:${item.verticalAlignment};overflow:hidden;display:flex; justify-content:center`;
const yt_content = document.getElementById("yt_content");
yt_content.style.cssText = styleBox;
const scale2 = {
scaleX: (item.width / 1800).toFixed(2),
scaleY: (item.height / 900).toFixed(2),
};
const scale = Math.min(scale2.scaleX, scale2.scaleY);
const writeBoxStyle = {
width: 1800,
height: 900,
transformOrigin: "top left",
transform: `scale(${scale.scaleX})`,
};
const updateYtnrFormValues = {};
let textWidth = item ? parseInt(item.width) : 100;
let textHeigth = item ? parseInt(item.height) : 100;
let textTop = 0;
let yttext = item.text.to_agendahtml;
if (
updateYtnrFormValues &&
updateYtnrFormValues.fullScreen &&
updateYtnrFormValues.scaleValue
) {
if (item && (item.fullScreen === true || item.fullScreen === "true")) {
textWidth = canvas.width;
textHeigth = canvas.height;
} else {
if (
updateYtnrFormValues &&
(updateYtnrFormValues.fullScreen == true ||
updateYtnrFormValues.fullScreen == "true")
) {
textWidth = 100 * item.scaleValue;
textHeigth = 100 * item.scaleValue;
} else if (
item &&
updateYtnrFormValues.scaleValue &&
item.scaleValue == updateYtnrFormValues.scaleValue
) {
textWidth = item ? parseInt(item.width) : 100 * item.scaleValue;
textHeigth = item ? parseInt(item.height) : 100 * item.scaleValue;
} else if (
item &&
updateYtnrFormValues.scaleValue &&
item.scaleValue !== updateYtnrFormValues.scaleValue
) {
textWidth = item
? (parseInt(item.width) / updateYtnrFormValues.scaleValue) *
item.scaleValue
: 100;
textHeigth = item
? (parseInt(item.height) / updateYtnrFormValues.scaleValue) *
item.scaleValue
: 100;
}
}
} else if (item && item.width && item.height) {
textWidth = parseInt(item.width);
textHeigth = parseInt(item.height);
}
var x = document.getElementById("container");
//如果对象x不为空
if (x != null) {
x.remove();
}
item.text.to_agendahtml = item.text.to_agendahtml.replace(
" &nbsp; &nbsp; &nbsp; &nbsp;",
" &nbsp; &nbsp; &nbsp; &nbsp; "
);
const element = item.text.to_agendahtml;
let container = document.createElement("div");
container.setAttribute("id", "container");
container.innerHTML = element;
container.style.backgroundColor = item.text.to_agendabgcolor
? item.text.to_agendabgcolor
: "#ffffff";
// container.style.width = textWidth + 'px'
// container.style.display = 'flex';
// container.style.justifyContent='center';
// container.style.flexDirection='column';
// container.style.height = textHeigth + 'px'
container.style.width = "1800px";
container.style.height = "900px";
container.style.display = "flex";
container.style.flexDirection = "column";
// container.style.alignItems= 'center';
container.style.justifyContent = "center";
container.style.color = "#000";
document.getElementById("element").appendChild(container);
document.getElementById("element").style.transform = `scale(${scale})`;
// document.getElementById("element").style.alignItems='center';
document.getElementById("element").style.transformOrigin = "top center";
};
// 添加议题内容 结束=========================
//添加网格列表start================================
let handleSetGridList = (left, top, grid) => {
console.log("网格列表1", grid);
let list = grid.text ? grid.text : [];
if (!Array.isArray(list)) return;
let child = [];
const rowCount = grid ? grid.rowCount : 5;
const colCount = grid ? grid.colCount : 5;
// const text = grid && grid.text ? grid.text : '网格列表'
const gridWidth = grid ? (grid.width - 2) / grid.colCount : 100;
const gridHeigth = grid ? (grid.height - 2) / grid.rowCount : 50;
for (let y = 1; y <= rowCount; y++) {
// 行
for (let x = 1; x <= colCount; x++) {
// 列
let gridTop = (y - 1) * gridHeigth;
if ((grid && grid.verticalAlignment === "center") || !grid) {
if (grid) gridTop = gridTop + (gridHeigth - grid.fontSize) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === "bottom") {
gridTop = gridTop + (gridHeigth - grid.fontSize);
}
const text = new fabric.Textbox("", {
width: gridWidth,
left: (x - 1) * gridWidth - 2, //设置canvas上的X坐标
textAlign: grid ? grid.horizontalAlignment : "center",
top: gridTop - 2,
shadow: grid && grid.effect === "true" ? shadow : null, // 阴影
fill: grid ? grid.foreground : "#000",
fontSize: grid ? parseInt(grid.fontSize) : 16,
fontWeight: grid ? grid.fontStyle.split(",")[1] : "normal",
fontStyle: grid ? grid.fontStyle.split(",")[0] : "normal",
fontFamily: grid ? grid.fontFamily : "SimSun",
});
const text2 = new fabric.Textbox("", {
// width: gridWidth,
left: x * gridWidth, //设置canvas上的X坐标
textAlign: "left",
top: gridTop - 2 + ((grid ? parseInt(grid.fontSize) : 16) - 18) / 2,
shadow: grid && grid.effect === "true" ? shadow : null, // 阴影
fill: grid ? grid.foreground : "#000",
fontSize: 18,
fontWeight: grid ? grid.fontStyle.split(",")[1] : "normal",
fontStyle: grid ? grid.fontStyle.split(",")[0] : "normal",
fontFamily: grid ? grid.fontFamily : "SimSun",
});
const border = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid ? grid.lineColor : "#dcdcdc",
fill: grid && grid.background.includes("#") ? grid.background : "",
_type: "border",
strokeWidth:
grid && grid.showGridLines === "true"
? parseInt(grid.lineWidth)
: 1,
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeDashArray: grid && grid.lineStyle === "2" ? [5, 10] : [0, 0],
});
child.push(border);
child.push(text);
child.push(text2);
}
}
let group = new fabric.Group(child, {
width: grid ? grid.width : 500,
height: grid ? grid.height : 250,
left: grid ? grid.left : left - canvas._offset.left, //设置canvas上的X坐标
top: grid ? grid.top : top - canvas._offset.top, //设置canvas上的Y坐标
rowCount: grid ? grid.rowCount : 5, //行
colCount: grid ? grid.colCount : 5, //列
component_type: grid ? grid.component_type : "5",
cvalue: grid,
horizontalAlignment: grid ? grid.horizontalAlignment : "center", //水平对齐方式left, center, right
verticalAlignment: grid ? grid.verticalAlignment : "center", //垂直方式对齐top, center, bottom
colorChangeStyle: grid ? grid.colorChangeStyle : "0", //颜色变化
showStyle: grid ? grid.showStyle : "0", //显示方式
trendsStyle: grid ? grid.trendsStyle : "0", //动态方式
peoplesStyle: grid ? grid.peoplesStyle : "0", //加入方式
foregroundChange: grid ? grid.foregroundChange : "#000", //变化字色
// text: text,
lineStyle: grid ? grid.lineStyle : "0", //网格线样式
showGridLines:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true, //是否显示网格
lineWidth: grid ? grid.lineWidth : "1", //网格线宽度
lineColor: grid ? grid.lineColor : "#000", //网格线颜色
background:
grid && grid.background.includes("#") ? grid.background : "", //透明
effect: grid && grid.effect === "true" ? true : false, // 阴影
fontFamily: grid ? grid.fontFamily : "SimSun", //字体
fontStyle: grid ? grid.fontStyle : "normal,normal,normal", //字体宽度设置
foreground: grid ? grid.foreground : "#000", //字体颜色
fontSize: grid ? grid.fontSize : 16, //字体大小
peopleOrderBy:
grid && grid.peopleOrderBy ? grid.peopleOrderBy : undefined, //人员排序
rowMin: grid && grid.rowMin ? grid.rowMin : undefined, //行号从
rowMax: grid && grid.rowMax ? grid.rowMax : undefined, //到
colMin: grid && grid.colMin ? grid.colMin : undefined, //列号从
colMax: grid && grid.colMax ? grid.colMax : undefined, //到
textDirection:
grid && grid.textDirection ? grid.textDirection : undefined, //人员排序的加入方式
textItemWidth:
grid && grid.textItemWidth ? grid.textItemWidth : undefined, //文本项宽
bindingFieldID:
grid && grid.bindingFieldID ? grid.bindingFieldID : "-1",
isShowSpeakSecend:
grid && grid.isShowSpeakSecend === "true" ? true : false, //是否显示二次发言
isShowAskSecend: grid && grid.isShowAskSecend === "true" ? true : false, // 是否显示二次询问
isShowPersonWork:
grid && grid.isShowPersonWork === "true" ? true : false, // 是否显示人员职务
bindingFieldPeopleType:
grid && grid.bindingFieldPeopleType
? grid.bindingFieldPeopleType.split(",")
: [],
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
if (Array.isArray(list) && list.length > 0) {
for (let i = 1; i <= list.length; i++) {
let item = child[3 * i - 2];
let item2 = child[3 * i - 1];
if (item) {
let pername = list[i - 1].pername;
const fontSize =
grid && parseInt(grid.fontSize) ? parseInt(grid.fontSize) : 16;
if (pername.length * fontSize > gridWidth) {
let num = Math.floor(gridWidth / fontSize);
pername = pername.substr(0, num);
}
item.text = pername;
if (item.textAlign == "center") {
item2.left = item2.left - (item.text.length * item.fontSize) / 2;
} else if (item.textAlign == "left") {
item2.left = item2.left - item.text.length * item.fontSize;
}
switch (grid.bindingFieldID) {
case "0x1061": //人员报到人列表
if (item.group?.showStyle == 0) {
if (item.group?.colorChangeStyle == 0) {
if (list[i - 1].checkinstatus == 1) {
item.fill = item.group.foregroundChange;
} else {
item.fill = item.group.foreground;
}
} else {
if (list[i - 1].checkinstatus == 1) {
item.fill = item.group.foreground;
} else {
item.fill = item.group.foregroundChange;
}
}
}
break;
case "0x1062": //人员发言人列表
let ts = list[i - 1].allowSpeakTime;
let timer = setInterval(() => {
let dd = parseInt(ts / 60 / 60 / 24); //计算剩余小时
dd = dd < 10 ? "0" + dd : dd;
let hh = parseInt((ts / 60 / 60) % 24); //计算剩余小时
hh = hh < 10 ? "0" + hh : hh;
let mm = parseInt((ts / 60) % 60);
mm = mm < 10 ? "0" + mm : mm;
let ss = parseInt(ts % 60);
ss = ss < 10 ? "0" + ss : ss;
item.set({
text: list[i - 1].pername,
});
item2.set({
text: "(" + mm + ":" + ss + ")",
});
if (ts > 0) {
ts--;
} else {
clearInterval(timer);
}
}, 1000);
break;
case "0x1063": //人员申请发言人列表
let tetx = list[i - 1].secondTip
? "(" + list[i - 1].secondTip + ")"
: "";
const fontSize =
grid && parseInt(grid.fontSize)
? parseInt(grid.fontSize)
: 16;
if (tetx.length * fontSize > gridWidth) {
let num = Math.floor(gridWidth / fontSize);
tetx = tetx.substr(0, num);
}
// item2.text = list[i - 1].secondTip ? '(' + list[i - 1].secondTip + ')' : ''
item2.text = tetx;
break;
case "0x1064": //人员已发言人列表
let tetx2 = list[i - 1].perjob
? "(" + list[i - 1].perjob + ")"
: "";
const fontSize2 =
grid && parseInt(grid.fontSize)
? parseInt(grid.fontSize)
: 16;
if (tetx2.length * fontSize2 > gridWidth) {
let num = Math.floor(gridWidth / fontSize2);
tetx2 = tetx2.substr(0, num);
}
item2.text = tetx2;
// item2.text = list[i - 1].perjob ? '(' + list[i - 1].perjob + ')' : ''
break;
default:
break;
}
}
}
}
canvas.add(group); // 将图形添加至画布
};
//添加网格列表end================================
//添加网格列表start================================
let handleSetGridList2 = (left, top, grid) => {
console.log("网格列表", grid);
let list = grid.text ? grid.text : [];
if (!Array.isArray(list)) return;
const gridWidth = grid ? (grid.width - 2) / grid.colCount : 100;
const aaaaaa = canvas.getObjects();
aaaaaa.forEach((obj) => {
if (obj.cvalue.id === grid.id) {
for (let i = 1; i <= obj._objects.length; i++) {
let bbb = 3 * i - 2;
let item3 = obj._objects[bbb];
if (item3 && bbb <= obj._objects.length) {
item3.set({
text: "",
});
}
}
if (Array.isArray(list) && list.length > 0) {
for (let i = 1; i <= list.length; i++) {
let item = obj._objects[3 * i - 2];
let item2 = obj._objects[3 * i - 1];
if (item) {
let pername = list[i - 1].pername;
const fontSize =
grid && parseInt(grid.fontSize)
? parseInt(grid.fontSize)
: 16;
if (pername.length * fontSize > gridWidth) {
let num = Math.floor(gridWidth / fontSize);
pername = pername.substr(0, num);
}
item.set({
text: pername,
});
if (item.textAlign == "center") {
item2.set({
left: item2.left - (item.text.length * item.fontSize) / 2,
});
} else if (item.textAlign == "left") {
item2.set({
left: item2.left - item.text.length * item.fontSize,
});
}
switch (grid.bindingFieldID) {
case "0x1061": //人员报到人列表
if (item.group?.showStyle == 0) {
if (item.group?.colorChangeStyle == 0) {
if (list[i - 1].checkinstatus == 1) {
item.set({
fill: item.group.foregroundChange,
});
} else {
item.set({
fill: item.group.foreground,
});
}
} else {
if (list[i - 1].checkinstatus == 1) {
item.set({
fill: item.group.foreground,
});
} else {
item.set({
fill: item.group.foregroundChange,
});
}
}
}
break;
case "0x1062": //人员发言人列表
let ts = list[i - 1].allowSpeakTime;
let timer = setInterval(() => {
let dd = parseInt(ts / 60 / 60 / 24); //计算剩余小时
dd = dd < 10 ? "0" + dd : dd;
let hh = parseInt((ts / 60 / 60) % 24); //计算剩余小时
hh = hh < 10 ? "0" + hh : hh;
let mm = parseInt((ts / 60) % 60);
mm = mm < 10 ? "0" + mm : mm;
let ss = parseInt(ts % 60);
ss = ss < 10 ? "0" + ss : ss;
item.set({
text: list[i - 1].pername,
});
item2.set({
text: "(" + mm + ":" + ss + ")",
});
if (ts > 0) {
ts--;
} else {
clearInterval(timer);
}
}, 1000);
break;
case "0x1063": //人员申请发言人列表
item2.set({
text: list[i - 1].secondTip
? "(" + list[i - 1].secondTip + ")"
: "",
});
break;
case "0x1064": //人员已发言人列表
item2.set({
text: list[i - 1].perjob
? "(" + list[i - 1].perjob + ")"
: "",
});
break;
default:
break;
}
}
}
}
canvas.renderAll();
}
});
};
//添加网格列表end================================
//添加横向滚动文本start===============================
let handleSetHxgdwb = (left, top, item) => {
const textWidth = item ? item.width : 200;
const textHeigth = item ? item.height : 100;
let textContent =
item && item.txtContent ? item.txtContent : "横向滚动文本";
const textBox = new fabric.Textbox(textContent, {
fill: item && item.foreground ? item.foreground : "#000",
fontSize: item && item.fontSize ? parseInt(item.fontSize) : 18,
fontWeight: item && item.fontWeight ? item.fontWeight : "normal",
fontStyle: item && item.fontStyle ? item.fontStyle : "normal",
fontFamily: item && item.fontFamily ? item.fontFamily : "SimSun",
width: textWidth,
left: 0,
top: 0,
});
const border = new fabric.Rect({
left: 0,
top: 0,
width: textWidth,
height: textHeigth,
background:
item && item.background.includes("#") ? item.background : "", //透明
fill: item && item.background.includes("#") ? item.background : "", //透明
_type: "border",
});
let group = new fabric.Group([border, textBox], {
width: textWidth,
height: textHeigth,
left: item ? item.left : left - canvas._offset.left, //设置canvas上的X坐标
top: item ? item.top : top - canvas._offset.top, //设置canvas上的Y坐标
background:
item && item.background.includes("#") ? item.background : "", //透明
foreground: item && item.foreground ? item.foreground : "#000",
fontSize: item && item.fontSize ? parseInt(item.fontSize) : 18,
fontWeight: item && item.fontWeight ? item.fontWeight : "normal",
fontStyle: item && item.fontStyle ? item.fontStyle : "normal",
fontFamily: item && item.fontFamily ? item.fontFamily : "SimSun",
txtContent: textContent,
moveSpeed: item && item.moveSpeed ? item.moveSpeed : "1000",
component_type: "6",
cvalue: item,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
if (parseInt(item.moveSpeed) !== 6000) {
const handleSetHxgdwbAnimate = () => {
textBox.animate("left", item ? item.width / 2 : 100, {
from: -(item ? item.width / 2 : 100),
duration: item && item.moveSpeed ? parseInt(item.moveSpeed) : 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetHxgdwbAnimate,
});
};
handleSetHxgdwbAnimate();
}
};
//添加横向滚动文本end===============================
//添加照片列表start============================
let handleSetPhoto = (left, top, grid) => {
console.log("添加照片列表start", grid);
// let child = []
// const rowCount = grid ? grid.rowCount : 5
// const colCount = grid ? grid.colCount : 1
// const text = grid && grid.text ? grid.text : []
// const gridWidth = grid ? (grid.width) / grid.colCount : 100
// const gridHeigth = grid ? (grid.height) / grid.rowCount : 50
// for (let y = 1; y <= rowCount; y++) { //行
// for (let x = 1; x <= colCount; x++) { //列
// let gridTop = (y - 1) * gridHeigth
// let ImgElement = document.createElement('img')
// let img = new fabric.Image(ImgElement, {
// left: (x - 1) * gridWidth,
// top: (y - 1) * gridHeigth,
// originX: 'left',
// originY: 'top',
// width: gridWidth - parseInt(grid.lineWidth) * 6,
// height: gridHeigth - parseInt(grid.lineWidth) * 6,
// })
// const border = new fabric.Rect({
// width: gridWidth,
// height: gridHeigth,
// left: (x - 1) * gridWidth, //设置canvas上的X坐标
// top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,//网格线宽度
// stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc",//网格线颜色
// strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0],//实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// });
// child.push(img)
// child.push(border)
// }
// };
// let group = new fabric.Group(child, {
// width: grid ? grid.width : 100,
// height: grid ? grid.height : 250,
// left: grid ? grid.left : left - canvas._offset.left, //设置canvas上的X坐标
// top: grid ? grid.top : top - canvas._offset.top, //设置canvas上的Y坐标
// rowCount: grid ? grid.rowCount : 5, //行
// colCount: grid ? grid.colCount : 1, //列
// component_type: grid ? grid.component_type : '7',
// cvalue: grid,
// horizontalAlignment: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center', //水平对齐方式left, center, right
// verticalAlignment: grid && grid.verticalAlignment ? grid.verticalAlignment : 'center', //垂直方式对齐top, center, bottom
// text: text,
// background: grid && grid.background.includes('#') ? grid.background : '',//透明
// effect: grid && (grid.effect === 'true' || grid.effect === true) ? true : false, // 阴影
// lineStyle: grid && grid.lineStyle ? grid.lineStyle : '1',//网格线样式
// showGridLines: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,//是否显示网格
// lineWidth: grid ? parseInt(grid.lineWidth) : 1,//网格线宽度
// lineColor: grid ? grid.lineColor : '#dcdcdc',//网格线颜色
// peopleStyle: grid ? grid.peopleStyle : '0', //照片显示方式
// isShowText: grid ? grid.isShowText : false, //是否显示文字
// textShowLocation: grid ? grid.textShowLocation : '0', //文字显示位置
// fontFamily: grid ? grid.fontFamily : 'SimSun', //字体
// foreground: grid ? grid.foreground : "#000000", //字体颜色
// fontSize: grid ? grid.fontSize : 16, //字体大小
// fontStyle: grid ? grid.fontStyle : 'normal',
// fontWeight: grid ? grid.fontWeight : 'normal',
// lockMovementX: true, //X轴是否可被移动(true为不可)
// lockMovementY: true, //Y轴是否可被移动(true为不可)
// hasControls: false,
// hasBorders: false,
// });
// if (Array.isArray(text) && text.length > 0) {
// for (let i = 1; i <= text.length; i++) {
// let item = child[2 * i - 2]
// if (item) {
// console.log('将图形添加至画布', item)
// if (text[i - 1].perimage) {
// item.setSrc(`http://localhost:9999/${text[i - 1].perimage}`, () => {
// const scaleY = gridHeigth / item.height
// const scaleX = gridWidth / item.width
// item.set({
// scaleX: scaleX,
// scaleY: scaleY,
// })
// })
// }
// }
// }
// }
// setTimeout(() => {
// canvas.add(group); // 将图形添加至画布
// }, 250);
let child = [];
const rowCount = grid ? grid.rowCount : 5;
const colCount = grid ? grid.colCount : 1;
const text =
grid && grid.text && Array.isArray(grid.text) ? grid.text : [];
const gridWidth = grid ? (grid.width - 2) / grid.colCount : 100;
const gridHeigth = grid ? (grid.height - 2) / grid.rowCount : 50;
const gridImgWidth = grid
? (grid.width - parseInt(grid.lineWidth) * grid.colCount) /
grid.colCount
: 100;
const gridImgHeigth = grid
? (grid.height - parseInt(grid.lineWidth) * grid.rowCount) /
grid.rowCount
: 50;
let index = 0;
let loadImages = text.map((item) => {
return new Promise((resolve) => {
fabric.Image.fromURL(
`http://localhost:9999/${item.perimage}`,
(img) => {
// 设置图片在Group内的相对位置
const scaleX = gridImgWidth / img.width;
const scaleY = gridImgHeigth / img.height;
img.set({
originX: "left",
originY: "top",
scaleX: img._element === null ? 1 : scaleX,
scaleY: img._element === null ? 1 : scaleY,
top: parseInt(grid.lineWidth),
left: parseInt(grid.lineWidth),
});
resolve(img);
},
{ crossOrigin: "anonymous" }
);
});
});
// 所有图片加载完成后创建Group
Promise.all(loadImages).then((images) => {
child = images;
for (let y = 1; y <= rowCount; y++) {
//行
for (let x = 1; x <= colCount; x++) {
//列
let gridTop = (y - 1) * gridHeigth + parseInt(grid.lineWidth);
let gridLeft = (x - 1) * gridWidth + parseInt(grid.lineWidth);
if (text.length > index && text[index].perimage) {
child[index].set({
top: gridTop,
left: gridLeft,
});
index++;
}
const border = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1, //网格线宽度
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
strokeDashArray:
grid && grid.lineStyle === "2" ? [5, 10] : [0, 0], //实虚线
fill:
grid && grid.background.includes("#") ? grid.background : "",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
});
child.push(border);
}
}
const group = new fabric.Group(child, {
width: grid ? parseInt(grid.width) : 100,
height: grid ? parseInt(grid.height) : 250,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
rowCount: grid ? grid.rowCount : 5, //行
colCount: grid ? grid.colCount : 1, //列
component_type: grid ? grid.component_type : "7",
cvalue: grid,
horizontalAlignment:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center", //水平对齐方式left, center, right
verticalAlignment:
grid && grid.verticalAlignment ? grid.verticalAlignment : "center", //垂直方式对齐top, center, bottom
text: text,
background:
grid && grid.background.includes("#") ? grid.background : "", //透明
effect:
grid && (grid.effect === "true" || grid.effect === true)
? true
: false, // 阴影
lineStyle: grid && grid.lineStyle ? grid.lineStyle : "1", //网格线样式
showGridLines:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true, //是否显示网格
lineWidth: grid ? parseInt(grid.lineWidth) : 1, //网格线宽度
lineColor: grid ? grid.lineColor : "#dcdcdc", //网格线颜色
peopleStyle: grid ? grid.peopleStyle : "0", //照片显示方式
isShowText: grid ? grid.isShowText : false, //是否显示文字
textShowLocation: grid ? grid.textShowLocation : "0", //文字显示位置
fontFamily: grid ? grid.fontFamily : "SimSun", //字体
foreground: grid ? grid.foreground : "#000000", //字体颜色
fontSize: grid ? grid.fontSize : 16, //字体大小
fontStyle: grid ? grid.fontStyle : "normal",
fontWeight: grid ? grid.fontWeight : "normal",
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
// 添加到画布
canvas.add(group);
canvas.requestRenderAll();
});
};
//添加照片列表end============================
//添加代表团列表start====================
let handleSetDeputation = (left, top, grid) => {
const list = grid.text;
if (!Array.isArray(list)) return;
let child = []; //动画一
let child2 = []; //动画二
let childHead = []; //列头
let childWrapper = []; //最外层边框
let length = 6 - list.length;
if (0 < length) {
for (let i = 1; i <= length; i++) {
list.push({
groupname: "",
groupshouldnum: "",
grouparrivenum: "",
groupnoarrivenum: "",
});
}
}
const propsObj = list[0] || {
groupname: "",
groupshouldnum: "",
grouparrivenum: "",
groupnoarrivenum: "",
};
const rowCount = list.length;
const colCount = Object.keys(propsObj).length;
const gridWidth = grid && grid.width ? (grid.width - 2) / colCount : 100;
const gridHeigth = grid && grid.height ? grid.height / 7 : 50;
let headList = {
groupname: "代表团",
groupshouldnum: "应到",
grouparrivenum: "实到",
groupnoarrivenum: "未到",
};
for (let x = 1; x <= colCount; x++) {
//列
const currentHeadText = headList[Object.keys(headList)[x - 1]] + "";
const haedTextbox = new fabric.Textbox(currentHeadText, {
width: gridWidth,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top:
grid && grid.groupHeadColumnFontSize
? (gridHeigth - parseInt(grid.groupHeadColumnFontSize)) / 2
: 16, //设置canvas上的Y坐标
fontFamily:
grid && grid.groupHeadColumnFontName
? grid.groupHeadColumnFontName
: "SimSun",
fontSize:
grid && grid.groupHeadColumnFontSize
? parseInt(grid.groupHeadColumnFontSize)
: 16,
fontStyle:
grid && grid.groupHeadColumnFontStyle
? grid.groupHeadColumnFontStyle.split(",")[0]
: "normal",
fontWeight:
grid && grid.groupHeadColumnFontStyle
? grid.groupHeadColumnFontStyle.split(",")[1]
: "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const headBorder = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: 0, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
fill:
grid && grid.groupHeadColumnColor
? grid.groupHeadColumnColor
: "#f4f4f4", //背景颜色
_type: "border",
visible:
grid &&
(grid.showGroupHeadColumn == "false" ||
grid.showGroupHeadColumn == false)
? false
: true,
strokeWidth:
grid &&
(grid.showGroupHeadColumn == "true" ||
grid.showGroupHeadColumn == true)
? parseInt(grid.lineWidth)
: 1,
});
childHead.push(headBorder);
childHead.push(haedTextbox);
}
var headColumnGroup = new fabric.Group(childHead, {
width: grid ? parseInt(grid.width) : 400,
height: gridHeigth,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
showGroupHeadColumn:
grid &&
(grid.showGroupHeadColumn == "false" ||
grid.showGroupHeadColumn == false)
? false
: true, //是否显示列头
groupHeadColumnColor: grid ? grid.groupHeadColumnColor : "#f4f4f4",
groupHeadColumnFontName: grid ? grid.groupHeadColumnFontName : "SimSun",
groupHeadColumnFontSize: grid ? grid.groupHeadColumnFontSize : 16,
groupHeadColumnFontStyle: grid
? grid.groupHeadColumnFontStyle
: "normal,normal",
});
let keys = [
"groupname",
"groupshouldnum",
"grouparrivenum",
"groupnoarrivenum",
];
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = list[y - 1];
for (let x = 1; x <= colCount; x++) {
// 列
// const curentText = obj[Object.keys(obj)[x - 1]] + '' //当前单元格的值
let curentText = obj[keys[x - 1]] + ""; //当前单元格的值
const fontSize = grid && grid.fontSize ? parseInt(grid.fontSize) : 16;
if (curentText.length * fontSize > gridWidth) {
let num = Math.floor(gridWidth / fontSize);
curentText = curentText.substr(0, num);
}
let gridTop = (y - 2) * gridHeigth;
if ((grid && grid.verticalAlignment === "center") || !grid) {
if (grid)
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === "bottom") {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox = new fabric.Textbox(curentText, {
width: gridWidth,
height: gridHeigth,
// height: 50,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow:
grid && (grid.effect == "true" || grid.effect == true)
? shadow
: null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
fill: grid && grid.foreground ? grid.foreground : "#000000",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 16,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : "normal",
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const border = new fabric.Rect({
width: gridWidth,
// height: 50,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
strokeDashArray: grid && grid.lineStyle === "2" ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes("#") ? grid.background : "",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1,
});
child.push(border);
child.push(textbox);
}
}
let group = new fabric.Group(child, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid
? grid.top + gridHeigth + 3 * gridHeigth - 18
: top - parseInt(canvas._offset.top) + (3 / 2) * gridHeigth, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 400,
height: grid ? 6 * list.length : 250,
rowCount: grid ? grid.rowCount : list.length, //行
colCount: grid ? grid.colCount : 4, //列
});
// 第二个动画
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = list[y - 1];
for (let x = 1; x <= colCount; x++) {
// 列
// const curentText = obj[Object.keys(obj)[x - 1]] + '' //当前单元格的值
let curentText = obj[keys[x - 1]] + ""; //当前单元格的值
const fontSize = grid && grid.fontSize ? parseInt(grid.fontSize) : 16;
if (curentText.length * fontSize > gridWidth) {
let num = Math.floor(gridWidth / fontSize);
curentText = curentText.substr(0, num);
}
let gridTop = (y - 1) * gridHeigth;
if ((grid && grid.verticalAlignment === "center") || !grid) {
if (grid)
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === "bottom") {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox2 = new fabric.Textbox(curentText, {
width: gridWidth,
left: (x - 1) * gridWidth - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow:
grid && (grid.effect == "true" || grid.effect == true)
? shadow
: null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
fill: grid && grid.foreground ? grid.foreground : "#000000",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 16,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : "normal",
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const border2 = new fabric.Rect({
width: gridWidth,
height: gridHeigth,
left: (x - 1) * gridWidth, //设置canvas上的X坐标
top: (y - 1) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
strokeDashArray: grid && grid.lineStyle === "2" ? [5, 10] : [0, 0], //实虚线
fill: grid && grid.background.includes("#") ? grid.background : "",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1,
});
child2.push(border2);
child2.push(textbox2);
}
}
let group2 = new fabric.Group(child2, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid
? grid.top + gridHeigth + 3 * gridHeigth - 18
: top - parseInt(canvas._offset.top) + (3 / 2) * gridHeigth, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 400,
// height: group2 ? parseInt(group2.height) : 250,
height: grid ? 6 * list.length : 250,
rowCount: grid ? grid.rowCount : list.length, //行
colCount: grid ? grid.colCount : 4, //列
});
let linear = function (t, b, c, d) {
return (c * t) / d + b;
};
if (list.length > 6) {
const handleSetDeputationAnimate1 = () => {
// group.animate('top', -(list.length * gridHeigth * 3 / 2 - (list.length * gridHeigth - group.height)), {
group.animate(
"top",
-(
(list.length * gridHeigth * 3) / 2 -
(list.length * gridHeigth - group.height - 2 * gridHeigth)
),
{
// from: -(list.length * gridHeigth / 2 - (list.length * gridHeigth - group.height)),
from: -(
(list.length * gridHeigth) / 2 -
(list.length * gridHeigth - group.height - 2 * gridHeigth)
),
duration:
grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 10000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate1,
easing: linear,
}
);
};
handleSetDeputationAnimate1();
const handleSetDeputationAnimate2 = () => {
group2.animate(
"top",
-(
(list.length * gridHeigth) / 2 -
(list.length * gridHeigth - group.height - 2 * gridHeigth)
),
{
from:
(list.length * gridHeigth) / 2 +
(list.length * gridHeigth - group.height - 2 * gridHeigth),
duration:
grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 10000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate2,
easing: linear,
}
);
};
handleSetDeputationAnimate2();
}
var rect = new fabric.Rect({
width: grid ? parseInt(grid.width) : 400,
height: grid ? parseInt(grid.height) : 350,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
// stroke: '#dcdcdc',
strokeWidth: 1,
fill: "",
});
childWrapper.push(group);
if (list.length > 6) {
childWrapper.push(group2);
}
childWrapper.push(headColumnGroup);
childWrapper.push(rect);
grid &&
(grid.showGroupHeadColumn == "false" || grid.showGroupHeadColumn == false)
? childWrapper.splice(2, 1)
: "";
let groupWrapper = new fabric.Group(childWrapper, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 400,
height: grid ? parseInt(grid.height) : 350,
rowCount: grid ? grid.rowCount : list.length, //行
colCount: grid ? grid.colCount : 4, //列
horizontalAlignment:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center", //水平对齐方式left, center, right
verticalAlignment:
grid && grid.verticalAlignment ? grid.verticalAlignment : "center", //垂直方式对齐top, center, bottom
lineStyle: grid && grid.lineStyle ? grid.lineStyle : "1", //网格线样式
showGridLines:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true, //是否显示网格
lineWidth: grid ? parseInt(grid.lineWidth) : 1, //网格线宽度
lineColor: grid ? grid.lineColor : "#dcdcdc", //网格线颜色
effect:
grid && (grid.effect === "true" || grid.effect === true)
? true
: false, // 阴影
fontFamily: grid ? grid.fontFamily : "SimSun", //字体
foreground: grid ? grid.foreground : "#000000", //字体颜色
fontSize: grid ? grid.fontSize : 16, //字体大小
fontStyle: grid ? grid.fontStyle : "normal",
fontWeight: grid ? grid.fontWeight : "normal",
background:
grid && grid.background.includes("#") ? grid.background : "", //透明
moveSpeed: grid && grid.moveSpeed ? grid.moveSpeed : "10000",
showGroupHeadColumn:
grid &&
(grid.showGroupHeadColumn === "false" ||
grid.showGroupHeadColumn === false)
? false
: true, //是否显示列头
groupHeadColumnColor: grid ? grid.groupHeadColumnColor : "#f4f4f4",
groupHeadColumnFontName: grid ? grid.groupHeadColumnFontName : "SimSun",
groupHeadColumnFontSize: grid ? grid.groupHeadColumnFontSize : 16,
groupHeadColumnFontStyle: grid
? grid.groupHeadColumnFontStyle
: "normal,normal",
component_type: grid ? grid.component_type : "8",
cvalue: grid,
bindingFieldID:
grid && grid.bindingFieldID ? grid.bindingFieldID : "0x1096",
});
groupWrapper.clipTo = function (ctx) {
ctx.beginPath();
ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height); // 根据Group对象的左上角和宽高计算路径
};
canvas.add(groupWrapper);
};
//添加代表团列表end====================
//添加子议题列表start========================
let handleSetZytlb = (left, top, grid, result) => {
console.log("子议题列表", grid, result);
let resultJson = { objects: [], ScreenData: {}, ScreenContent: {} };
resultJson.ScreenData = result.ScreenData;
resultJson.ScreenContent = result.ScreenContent;
// let list = grid.text
let list = resultJson.ScreenData["0x106C"];
if (!Array.isArray(list)) return;
let child = []; //动画一
let child2 = []; //动画二
let childHead = []; //列头
let childWrapper = []; //最外层边框
const num = grid?.topicNumOnePage ? grid.topicNumOnePage : 5;
var newList = list.filter((val, index, arr) => {
return index !== 0;
});
var newList = list;
let length = num - newList.length + 1;
if (0 < length) {
for (let i = 1; i <= length; i++) {
newList.push({
To_name: "",
key1Select: "",
key2Select: "",
key3Select: "",
keyOtherSelect: "",
keyResultSelect: "",
});
}
}
const rowCount = newList.length;
const propsObj = list[0];
const colCount = Object.keys(propsObj).length;
const gridWidth1 = grid
? (grid.width - 2) * (parseInt(grid.topicPercent) / 100)
: 100;
const gridWidth2 = grid
? ((grid.width - 2) * (parseInt(100 - grid.topicPercent) / 100)) / 5
: 100;
const gridHeigth = grid
? grid.height / (parseInt(grid.topicNumOnePage) + 1)
: 50;
let headList = list[0];
for (let x = 1; x <= colCount; x++) {
//列
if (x == 1) {
let currentHeadText = headList[Object.keys(headList)[x - 1]] + "";
const fontSize = grid && grid.fontSize ? parseInt(grid.fontSize) : 18;
if (currentHeadText.length * fontSize > gridWidth1) {
let num = Math.floor(gridWidth1 / fontSize);
currentHeadText = currentHeadText.substr(0, num);
}
const haedTextbox = new fabric.Textbox(currentHeadText, {
width: gridWidth1,
left: (x - 1) * gridWidth1 - 2, //设置canvas上的x坐标
top:
grid && grid.fontSize
? (gridHeigth - parseInt(grid.fontSize)) / 2
: 16, //设置canvas上的Y坐标
fill: grid && grid.foreground ? grid.foreground : "#333",
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontStyle:
grid && grid.fontStyle ? grid.fontStyle.split(",")[0] : "normal",
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const headBorder = new fabric.Rect({
width: gridWidth1,
height: gridHeigth,
left: (x - 1) * gridWidth1, //设置canvas上的X坐标
top: 0, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
// fill: grid && grid.foreground ? grid.foreground : 'f4f4f4',
// fill: resultJson.ScreenContent ? resultJson.ScreenContent.Sf_bgcolor : "#f4f4f4", //背景颜色
fill:
grid && grid.background && grid.background === "true"
? resultJson.ScreenContent
? resultJson.ScreenContent.Sf_bgcolor
: "#fff"
: grid && grid.background && grid.background.includes("#")
? grid.background
: "#fff",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1,
});
childHead.push(headBorder);
childHead.push(haedTextbox);
} else {
let currentHeadText = headList[Object.keys(headList)[x - 1]] + "";
const fontSize = grid && grid.fontSize ? parseInt(grid.fontSize) : 18;
if (currentHeadText.length * fontSize > gridWidth1) {
let num = Math.floor(gridWidth1 / fontSize);
currentHeadText = textContent.substr(0, num);
}
const haedTextbox = new fabric.Textbox(currentHeadText, {
width: gridWidth2,
left: (x - 2) * gridWidth2 - 2 + gridWidth1, //设置canvas上的x坐标
top:
grid && grid.fontSize
? (gridHeigth - parseInt(grid.fontSize)) / 2
: 16, //设置canvas上的Y坐标
fill: grid && grid.foreground ? grid.foreground : "#333",
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontStyle:
grid && grid.fontStyle ? grid.fontStyle.split(",")[0] : "normal",
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const headBorder = new fabric.Rect({
width: gridWidth2,
height: gridHeigth,
left: (x - 2) * gridWidth2 + gridWidth1, //设置canvas上的X坐标
top: 0, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
// fill: grid && grid.foreground ? grid.foreground : 'f4f4f4',
// fill: resultJson.ScreenContent ? resultJson.ScreenContent.Sf_bgcolor : "#f4f4f4", //背景颜色
fill:
grid && grid.background && grid.background === "true"
? resultJson.ScreenContent
? resultJson.ScreenContent.Sf_bgcolor
: "#fff"
: grid && grid.background && grid.background.includes("#")
? grid.background
: "#fff",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1,
});
childHead.push(headBorder);
childHead.push(haedTextbox);
}
}
// var headColumnGroup = new fabric.Group(childHead,{
// width: grid ? parseInt(grid.width) : 600,
// height: gridHeigth,
// left: grid ? grid.left : left - parseInt(canvas._offset.left) + (grid?.width ? grid.width/6 : 100), //设置canvas上的X坐标
// // top: - parseInt(grid.fontSize)/2,
// top: 0,
// // top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
// showGroupHeadColumn: grid && (grid.showGridLines == 'false' || grid.showGridLines == false) ? false : true, //是否显示列头
// groupHeadColumnColor:grid ? grid.background : "#f4f4f4",
// groupHeadColumnFontName:grid ? grid.fontFamily : 'SimSun',
// groupHeadColumnFontSize:grid ? grid.fontSize : 18,
// groupHeadColumnFontStyle:grid ? grid.fontStyle : 'normal',
// groupHeadColumnFontWeight: grid ? grid.fontWeight : 'normal'
// })
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = newList[y - 1];
for (let x = 1; x <= colCount; x++) {
// 列
if (x == 1) {
let curentText = obj[Object.keys(obj)[x - 1]] + ""; //当前单元格的值
const fontSize =
grid && grid.fontSize ? parseInt(grid.fontSize) : 18;
if (curentText.length * fontSize > gridWidth1) {
let num = Math.floor(gridWidth1 / fontSize);
curentText = curentText.substr(0, num);
}
let gridTop = (y - 2) * gridHeigth;
if ((grid && grid.verticalAlignment === "center") || !grid) {
if (grid)
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === "bottom") {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox = new fabric.Textbox(curentText, {
width: gridWidth1,
height: gridHeigth,
left: (x - 1) * gridWidth1 - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow:
grid && (grid.effect == "true" || grid.effect == true)
? shadow
: null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
fill: grid && grid.foreground ? grid.foreground : "#000000",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : "normal",
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const border = new fabric.Rect({
width: gridWidth1,
height: gridHeigth,
left: (x - 1) * gridWidth1, //设置canvas上的X坐标
top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
strokeDashArray:
grid && grid.lineStyle === "2" ? [5, 10] : [0, 0], //实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
fill:
grid && grid.background && grid.background === "true"
? resultJson.ScreenContent
? resultJson.ScreenContent.Sf_bgcolor
: "#fff"
: grid && grid.background && grid.background.includes("#")
? grid.background
: "#fff",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1,
});
child.push(border);
child.push(textbox);
} else {
let curentText = obj[Object.keys(obj)[x - 1]] + ""; //当前单元格的值
const fontSize =
grid && grid.fontSize ? parseInt(grid.fontSize) : 18;
if (curentText.length * fontSize > gridWidth1) {
let num = Math.floor(gridWidth1 / fontSize);
curentText = curentText.substr(0, num);
}
let gridTop = (y - 2) * gridHeigth;
if ((grid && grid.verticalAlignment === "center") || !grid) {
if (grid)
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
else gridTop = gridTop + (gridHeigth - 16) / 2;
} else if (grid && grid.verticalAlignment === "bottom") {
gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize));
}
const textbox = new fabric.Textbox(curentText, {
width: gridWidth2,
height: gridHeigth,
left: (x - 2) * gridWidth2 + gridWidth1 - 2, //设置canvas上的x坐标
top: gridTop - 2, //设置canvas上的Y坐标
shadow:
grid && (grid.effect == "true" || grid.effect == true)
? shadow
: null,
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
fill: grid && grid.foreground ? grid.foreground : "#000000",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontStyle: grid && grid.fontStyle ? grid.fontStyle : "normal",
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
textAlign:
grid && grid.horizontalAlignment
? grid.horizontalAlignment
: "center",
});
const border = new fabric.Rect({
width: gridWidth2,
height: gridHeigth,
left: (x - 2) * gridWidth2 + gridWidth1, //设置canvas上的X坐标
top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
strokeDashArray:
grid && grid.lineStyle === "2" ? [5, 10] : [0, 0], //实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
fill:
grid && grid.background && grid.background === "true"
? resultJson.ScreenContent
? resultJson.ScreenContent.Sf_bgcolor
: "#fff"
: grid && grid.background && grid.background.includes("#")
? grid.background
: "#fff",
_type: "border",
visible:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true,
strokeWidth:
grid &&
(grid.showGridLines === "true" || grid.showGridLines === true)
? parseInt(grid.lineWidth)
: 1,
});
child.push(border);
child.push(textbox);
}
}
}
let group = new fabric.Group(child, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
// top: grid ? (grid.top + gridHeigth) + 3*gridHeigth - 18 : top - parseInt(canvas._offset.top) + gridHeigth + 3*gridHeigth - 18, //设置canvas上的Y坐标
// top: grid ? gridHeigth + 3*gridHeigth - 18 : top - parseInt(canvas._offset.top) + gridHeigth + 3*gridHeigth - 18, //设置canvas上的Y坐标
top: gridHeigth, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 600,
height: grid ? grid.topicNumOnePage * list.length : 250,
});
// 第二个动画
// for(let y = 1; y <= rowCount; y++) { // 行
// const obj = newList[y-1]
// for(let x = 1; x <= colCount; x++) { // 列
// const curentText = obj[Object.keys(obj)[x-1]] + '' //当前单元格的值
// let gridTop = (y - 2) * gridHeigth
// if(grid && grid.verticalAlignment === 'center' || !grid) {
// if(grid)gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
// else gridTop = gridTop + (gridHeigth - 16) / 2;
// } else if (grid && grid.verticalAlignment === 'bottom'){
// gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize))
// }
// if(x == 1){
// const textbox2 = new fabric.Textbox(curentText, {
// width: gridWidth1,
// // height: gridHeigth,
// left: (x-1)* gridWidth1 - 2 , //设置canvas上的x坐标
// top: gridTop - 2, //设置canvas上的Y坐标
// shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
// fontFamily: grid && grid.fontFamily?grid.fontFamily : 'SimSun',
// fill: grid && grid.foreground?grid.foreground : "#000000",
// fontSize: grid && grid.fontSize?parseInt(grid.fontSize) : 18,
// fontStyle: grid && grid.fontStyle?grid.fontStyle : 'normal',
// fontWeight: grid && grid.fontWeight?grid.fontWeight : 'normal',
// textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
// });
// const border2 = new fabric.Rect({
// width: gridWidth1,
// height: gridHeigth,
// left: (x - 1) * gridWidth1, //设置canvas上的X坐标
// // top: 0,
// top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
// stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc",//网格线颜色
// strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0],//实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
// });
// child2.push(border2)
// child2.push(textbox2)
// }else{
// const curentText = obj[Object.keys(obj)[x-1]] + '' //当前单元格的值
// let gridTop = (y - 2) * gridHeigth
// if(grid && grid.verticalAlignment === 'center' || !grid) {
// if(grid)gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize)) / 2;
// else gridTop = gridTop + (gridHeigth - 16) / 2;
// } else if (grid && grid.verticalAlignment === 'bottom'){
// gridTop = gridTop + (gridHeigth - parseInt(grid.fontSize))
// }
// const textbox2 = new fabric.Textbox(curentText , {
// width: gridWidth2,
// // height: gridHeigth,
// left: (x-2)* gridWidth2 + gridWidth1 - 2 , //设置canvas上的x坐标
// top: gridTop - 2, //设置canvas上的Y坐标
// shadow: grid && (grid.effect == 'true' || grid.effect == true) ? shadow : null,
// fontFamily: grid && grid.fontFamily?grid.fontFamily : 'SimSun',
// fill: grid && grid.foreground?grid.foreground : "#000000",
// fontSize: grid && grid.fontSize?parseInt(grid.fontSize) : 18,
// fontStyle: grid && grid.fontStyle?grid.fontStyle : 'normal',
// fontWeight: grid && grid.fontWeight?grid.fontWeight : 'normal',
// textAlign: grid && grid.horizontalAlignment ? grid.horizontalAlignment : 'center',
// });
// const border2 = new fabric.Rect({
// width: gridWidth2,
// height: gridHeigth,
// left: (x - 2) * gridWidth2 + gridWidth1, //设置canvas上的X坐标
// top: (y - 2) * gridHeigth, //设置canvas上的Y坐标 顶部对齐
// stroke: grid && grid.lineColor ? grid.lineColor : "#dcdcdc",//网格线颜色
// strokeDashArray: grid && grid.lineStyle === '2' ? [5, 10] : [0, 0],//实虚线
// fill: grid && grid.background.includes('#') ? grid.background : '',
// _type: 'border',
// visible: grid && (grid.showGridLines === 'false' || grid.showGridLines === false) ? false : true,
// strokeWidth: grid && (grid.showGridLines === 'true' || grid.showGridLines === true) ? parseInt(grid.lineWidth) : 1,
// });
// child2.push(border2)
// child2.push(textbox2)
// }
// }
// }
let group2 = new fabric.Group(child2, {
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: grid
? grid.top + gridHeigth + 3 * gridHeigth - 18
: top -
parseInt(canvas._offset.top) +
gridHeigth +
3 * gridHeigth -
18, //设置canvas上的Y坐标
width: grid ? parseInt(grid.width) : 600,
height: grid ? grid.topicNumOnePage * list.length : 250,
});
let linear = function (t, b, c, d) {
return (c * t) / d + b;
};
if (list.length > num) {
if (parseInt(grid.moveSpeed) !== 6000) {
const handleSetDeputationAnimate1 = () => {
group.animate(
"top",
-(
(list.length * gridHeigth * 3) / 2 -
(list.length * gridHeigth - group.height)
),
{
from: -(
(list.length * gridHeigth) / 2 -
(list.length * gridHeigth - group.height)
),
duration:
grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 5000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate1,
easing: linear,
}
);
};
handleSetDeputationAnimate1();
const handleSetDeputationAnimate2 = () => {
group2.animate(
"top",
-(
(list.length * gridHeigth) / 2 -
(list.length * gridHeigth - group.height)
),
{
from:
(list.length * gridHeigth) / 2 +
(list.length * gridHeigth - group.height),
duration:
grid && grid.moveSpeed ? parseInt(grid.moveSpeed) : 5000,
onChange: canvas.renderAll.bind(canvas),
onComplete: handleSetDeputationAnimate2,
easing: linear,
}
);
};
handleSetDeputationAnimate2();
}
}
var rect = new fabric.Rect({
width: grid ? parseInt(grid.width) : 600,
height: grid ? parseInt(grid.height) : 350,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
top: 0,
// top: grid ? grid.top : top - parseInt(canvas._offset.top) , //设置canvas上的Y坐标
stroke: "#dcdcdc",
strokeWidth: 1,
fill: "",
});
// childWrapper.push(rect);
childWrapper.push(group);
if (list.length > num) {
// childWrapper.push(group2);
}
// childWrapper.push(headColumnGroup)
let groupWrapper = new fabric.Group(childWrapper, {
width: grid ? parseInt(grid.width) : 600,
height: grid ? parseInt(grid.height) : 350,
left: grid ? grid.left : left - parseInt(canvas._offset.left), //设置canvas上的X坐标
// top: -(grid.top+parseInt(canvas._offset.top)),
top: grid ? grid.top : top - parseInt(canvas._offset.top),
// top: grid ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
component_type: "9",
cvalue: grid,
horizontalAlignment: grid ? grid.horizontalAlignment : "center", //水平对齐方式left, center, right
verticalAlignment: grid ? grid.verticalAlignment : "center", //垂直方式对齐top, center, bottom
// text: text,
moveSpeed: grid && grid.moveSpeed ? grid.moveSpeed : "5000",
background:
grid && grid.background.includes("#") ? grid.background : "", //透明
effect:
grid && (grid.effect === "true" || grid.effect === true)
? true
: false, // 阴影
lineStyle: grid && grid.lineStyle ? grid.lineStyle : "1", //网格线样式
showGridLines:
grid &&
(grid.showGridLines === "false" || grid.showGridLines === false)
? false
: true, //是否显示网格
lineWidth: grid && grid.lineWidth ? parseInt(grid.lineWidth) : "1", //网格线宽度
lineColor: grid && grid.lineColor ? grid.lineColor : "#dcdcdc", //网格线颜色
fontFamily: grid ? grid.fontFamily : "SimSun", //字体
fontStyle: grid ? grid.fontStyle : "normal", //字体宽度设置
foreground: grid ? grid.foreground : "#000", //字体颜色
fontSize: grid ? parseInt(grid.fontSize) : 18, //字体大小
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal", //字体宽度
keyTopicSelect:
grid &&
(grid.keyTopicSelect === "true" || grid.keyTopicSelect === true)
? true
: false, // 是否显示议题
topicPercent: grid
? parseInt(grid.topicPercent)
: Math.round((1 / 6) * 100), // 议题百分比
topicNumOnePage: grid ? parseInt(grid.topicNumOnePage) : 6, //每页条数
key1Select:
grid && (grid.key1Select === "true" || grid.key1Select === true)
? true
: false, //是否显示按键1
key2Select:
grid && (grid.key2Select === "true" || grid.key2Select === true)
? true
: false, //是否显示按键2
key3Select:
grid && (grid.key3Select === "true" || grid.key3Select === true)
? true
: false, //是否显示按键3
keyOtherSelect:
grid &&
(grid.keyOtherSelect === "true" || grid.keyOtherSelect === true)
? true
: false, //是否显示未按
keyResultSelect:
grid &&
(grid.keyResultSelect === "true" || grid.keyResultSelect === true)
? true
: false, //是否显示议题结果
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
groupWrapper.clipTo = function (ctx) {
ctx.beginPath();
ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height); // 根据Group对象的左上角和宽高计算路径
};
canvas.add(groupWrapper);
};
//添加时间控件列表start====================
let timer = null;
let handleSetSjkj = (left, top, grid) => {
let date = grid
? moment(Date.now()).format(grid.formatPar)
: moment(Date.now()).format("YYYY年MM月DD日");
const textWidth = grid ? parseInt(grid.width) : 200;
const textHeight = grid ? parseInt(grid.height) : 100;
let textTop = 0;
let textbox = new fabric.Textbox(
grid
? moment(Date.now()).format(grid.formatPar)
: moment(Date.now()).format("YYYY年MM月DD日"),
{
fill:
grid && grid.fill
? grid.fill
: grid && grid.foreground
? grid.foreground
: "#000",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
fontStyle: grid && grid.fontStyle ? grid.fontStyle : "normal",
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
width: textWidth,
left: 0,
top: textTop,
}
);
const border = new fabric.Rect({
left: 0,
top: 0,
width: textWidth,
height: textHeight,
background:
grid && grid.background.includes("#") ? grid.background : "",
fill: grid && grid.background.includes("#") ? grid.background : "",
_type: "border",
});
let group = new fabric.Group([border, textbox], {
text: date,
width: textWidth,
height: textHeight,
left: grid ? parseInt(grid.left) : parseInt(left - canvas._offset.left),
top: grid ? parseInt(grid.top) : parseInt(top - canvas._offset.top),
formatPar: grid && grid.formatPar ? grid.formatPar : "YYYY年MM月DD日", // 时间格式
background:
grid && grid.background.includes("#") ? grid.background : "",
fill:
grid && grid.fill
? grid.fill
: grid && grid.foreground
? grid.foreground
: "#000",
fontSize: grid && grid.fontSize ? parseInt(grid.fontSize) : 18,
fontWeight: grid && grid.fontWeight ? grid.fontWeight : "normal",
fontStyle: grid && grid.fontStyle ? grid.fontStyle : "normal",
fontFamily: grid && grid.fontFamily ? grid.fontFamily : "SimSun",
component_type: "10",
cvalue: grid,
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group);
timer = setInterval(() => {
group.item(1).set({
text: grid
? moment(Date.now()).format(grid.formatPar)
: moment(Date.now()).format(bjctDate),
});
canvas.renderAll();
}, 1000);
};
//添加时间控件列表end====================
//添加线条控制start====================
let handleSetImage = (left, top, type, val) => {
let x1 = val ? val.left : left - canvas._offset.left;
let y1 = val ? val.top : top - canvas._offset.top;
let x2 = val ? val.left + val.width : left - canvas._offset.left + 200;
let y2 = val ? val.top + val.height : top - canvas._offset.top + 100;
let lineBoxWidth = val ? val.width : 200;
let lineBoxHeigth = val ? val.height : 100;
switch (type) {
case "horizontalrealline":
case "11":
let horizontalRealLine = new fabric.Line([x1, y1, x2, y1], {
stroke: val ? val.stroke : "#e70808", //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: "line",
});
let borderHRL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: "",
_type: "border",
});
let groupHRL = new fabric.Group([borderHRL, horizontalRealLine], {
component_type: "11",
cvalue: val,
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : "#e70808", //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? val.left : left - canvas._offset.left, //设置canvas上的X坐标
top: val ? val.top : top - canvas._offset.top, //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupHRL); // 将图形添加至画布
break;
case "horizontaldottedline":
case "12":
let horizontalDottedLine = new fabric.Line([x1, y1, x2, y1], {
stroke: val ? val.stroke : "#000000", //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
strokeDashArray: [5, 5],
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: "line",
});
let borderHDL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: "",
_type: "border",
});
let groupHDL = new fabric.Group([borderHDL, horizontalDottedLine], {
component_type: "12",
cvalue: val,
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : "#000000", //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? val.left : left - canvas._offset.left, //设置canvas上的X坐标
top: val ? val.top : top - canvas._offset.top, //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupHDL);
break;
case "verticalrealline":
case "13":
let verticalRealLine = new fabric.Line([x1, y1, x1, y2], {
stroke: val ? val.stroke : "#000000", //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: "line",
});
let borderVRL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: "",
_type: "border",
});
let groupVRL = new fabric.Group([borderVRL, verticalRealLine], {
component_type: "13",
cvalue: val,
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : "#000000", //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? val.left : left - canvas._offset.left, //设置canvas上的X坐标
top: val ? val.top : top - canvas._offset.top, //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupVRL);
break;
case "verticaldottedline":
case "14":
let verticalDottedLine = new fabric.Line([x1, y1, x1, y2], {
stroke: val ? val.stroke : "#000000", //线颜色
strokeWidth: val ? Number(val.strokeThickness) : 2, //线宽
strokeDashArray: [5, 5],
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
_type: "line",
});
let borderVDL = new fabric.Rect({
left: lineBoxWidth,
top: 0,
width: lineBoxWidth,
height: lineBoxHeigth,
fill: "",
_type: "border",
});
let groupVDL = new fabric.Group([borderVDL, verticalDottedLine], {
component_type: "14",
cvalue: val,
width: lineBoxWidth,
height: lineBoxHeigth,
stroke: val ? val.stroke : "#000000", //线颜色
strokeThickness: val ? val.strokeThickness : 2, //线宽
left: val ? val.left : left - canvas._offset.left, //设置canvas上的X坐标
top: val ? val.top : top - canvas._offset.top, //设置canvas上的Y坐标
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(groupVDL);
break;
default:
break;
}
};
//添加线条控制end====================
//处理画布数据函数
let getValues = (item, val) => {
if (val) {
Object.keys(val).forEach((key) => {
if (item.bindingFieldID == key) {
item.text = val[key];
}
});
}
};
let canvas = new fabric.Canvas("canvas", {
stopContextMenu: true, //禁止默认右击事件
renderOnAddRemove: false,
});
function init() {
let url = window.location.search;
if (url.indexOf("?") != -1) {
console.log(url.substring(url.lastIndexOf("=") + 1, url.length));
let userId = url.substring(url.lastIndexOf("=") + 1, url.length);
fetch(
"http://localhost:9999/vhwcapi/v1/web/api/service/congresscontrol/tacitScreen",
{
method: "POST",
headers: {
Authorization: localStorage.getItem("antd-token-authority") + "",
// 'Apply-User': userInfo.id,
// 'System-User': userInfo.systemUser,
},
body: JSON.stringify({
id: userId,
}),
timeout: 50000,
}
)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
screendata = data;
updateCanvas(data);
})
.catch((err) => {
console.log(err);
});
var websocketPath =
"ws://localhost:9999/vhwcapi/v1/websocket/ccuwebsocket?userid=" +
userId,
websocket = new WebSocket(websocketPath);
websocket.onopen = function (evt) {};
websocket.onmessage = function (evt) {
console.log("消息", JSON.parse(evt.data));
let result = JSON.parse(evt.data).datarecord;
if (screendata != result) {
if (
result.ScreenFromContent &&
result.ScreenFromContent.length > 0
) {
updateCanvasobjects(result);
screendata = result;
}
}
};
websocket.onclose = function (evt) {};
websocket.onerror = function (evt) {};
}
}
function updateCanvasobjects(result) {
if (screendata != result) {
if (screendata?.ScreenContent?.Id == result.ScreenContent.Id) {
let canvasobjects = canvas.getObjects();
if (canvasobjects.length > 0) {
Object.keys(result.ScreenData).forEach((key) => {
canvasobjects.map((item) => {
if (
item.bindingFieldID == key ||
item.cvalue.bindingFieldID == key
) {
switch (item.component_type) {
case "1": //文本标签
if (item.text != result.ScreenData[key]) {
// let textContent = result.ScreenData[key].toString();
let beforpara = "";
let afterpara = "";
const parmitems = item.systemParContent.split("Ψ");
if (parmitems.length > 1) {
beforpara = parmitems[0];
afterpara = parmitems[1];
}
let textContent =
beforpara +
result.ScreenData[key].toString() +
afterpara;
if (item.bindingFieldID == "0x1025") {
if (
afterpara.includes("未按") &&
result.ScreenData[key].toString() == "0"
) {
textContent = "";
}
}
if (item && item.textTrimming != "1") {
if (textContent.length * item.fontSize > textWidth) {
if (item.rowCount) {
let num = Math.floor(textWidth / item.fontSize);
textContent =
textContent.substr(0, num - 1) + "...";
} else {
let num = Math.floor(textWidth / item.fontSize);
textContent = textContent.substr(0, num);
}
}
}
item.set("text", result.ScreenData[key]);
item._objects[1].set("text", textContent);
// item.text=result.ScreenData[key];
// item._objects[1].text=textContent;
}
break;
case "2": //图片照片
canvas.remove(item);
let b = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
b = result.ScreenFromContent[i];
}
}
let gridImg = Object.assign({}, b, {
imagePath: result.ScreenData[key],
});
handleAddImage(gridImg.top, gridImg.left, gridImg);
break;
case "3": //视频控件
break;
case "4": //议题内容
console.log("议题内容");
if (item.text != result.ScreenData[key].to_agendahtml) {
canvas.remove(item);
let c = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
c = result.ScreenFromContent[i];
}
}
let itemYtnr = Object.assign({}, c, {
text: result.ScreenData[key],
});
handleSetYtnr(itemYtnr.top, itemYtnr.left, itemYtnr);
}
break;
case "5": //网格列表
// canvas.remove(item)
let a = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
a = result.ScreenFromContent[i];
var aaaaa = result.ScreenData[key]
? result.ScreenData[key]
: [];
var bbbb = [];
aaaaa &&
aaaaa.map((item) => {
if (item.formid === a.id) {
bbbb.push(item);
}
});
let grid = Object.assign({}, a, { text: bbbb });
console.log("111111111111111111111111111");
handleSetGridList2(grid.top, grid.left, grid);
}
}
break;
case "6": //横向滚动文本
break;
case "7": //照片列表
console.log("删除图片", item);
canvas.remove(item);
let imageObj = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
imageObj = result.ScreenFromContent[i];
}
}
let imageLIst = Object.assign({}, imageObj, {
text: result.ScreenData[key],
});
handleSetPhoto(imageLIst.top, imageLIst.left, imageLIst);
break;
case "8": //代表团列表
canvas.remove(item);
let d = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
d = result.ScreenFromContent[i];
}
}
let itemDeputation = Object.assign({}, d, {
text: result.ScreenData[key],
});
handleSetDeputation(
itemDeputation.top,
itemDeputation.left,
itemDeputation
);
break;
case "9": //子义题列表
canvas.remove(item);
let f = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
f = result.ScreenFromContent[i];
}
}
let itemZytlb = Object.assign({}, f, {
text: result.ScreenData[key],
});
handleSetZytlb(
itemZytlb.top,
itemZytlb.left,
itemZytlb,
result
);
break;
case "10": //时间控件
break;
case "11":
case "12":
case "13": //图形控件
canvas.remove(item);
let e = {};
for (
let i = 0;
i < result.ScreenFromContent.length;
i++
) {
if (
result.ScreenFromContent[i].bindingFieldID === key
) {
e = result.ScreenFromContent[i];
}
}
let itemImage = Object.assign({}, e, {});
handleSetImage =
(itemImage.left,
itemImage.top,
itemImage.type,
itemImage);
break;
}
}
});
});
canvas.requestRenderAll();
} else {
Object.keys(result.ScreenData).forEach((key) => {
if ("0x1030" === key) {
switch (result.ScreenFromContent[0].component_type) {
case "4": //议题内容
console.log("议题内容");
let c = {};
for (let i = 0; i < result.ScreenFromContent.length; i++) {
if (result.ScreenFromContent[i].bindingFieldID === key) {
c = result.ScreenFromContent[i];
}
}
let itemYtnr = Object.assign({}, c, {
text: result.ScreenData[key],
});
handleSetYtnr(itemYtnr.top, itemYtnr.left, itemYtnr);
break;
case "9": //子义题列表
let f = {};
for (let i = 0; i < result.ScreenFromContent.length; i++) {
if (result.ScreenFromContent[i].bindingFieldID === key) {
f = result.ScreenFromContent[i];
}
}
let itemZytlb = Object.assign({}, f, {
text: result.ScreenData[key],
});
handleSetZytlb(
itemZytlb.top,
itemZytlb.left,
itemZytlb,
result
);
break;
}
}
});
}
} else {
var container = document.getElementById("container");
var element = document.getElementById("element");
var yt_content = document.getElementById("yt_content");
if (container) {
element.removeChild(container);
}
element.style.cssText = "";
yt_content.style.cssText = "";
updateCanvas(result);
}
}
}
var screendata;
function updateCanvas(result) {
console.log("画布更新", result);
canvas.clear();
let resultJson = { objects: [], ScreenData: {}, ScreenContent: {} };
resultJson.objects = result.ScreenFromContent
? result.ScreenFromContent
: [];
resultJson.ScreenData = result.ScreenData;
resultJson.ScreenContent = result.ScreenContent;
canvas.setWidth(
resultJson.ScreenContent
? resultJson.ScreenContent.Sf_width
: window.innerWidth
);
canvas.setHeight(
resultJson.ScreenContent
? resultJson.ScreenContent.Sf_height
: window.innerHeight
);
canvas.set({
backgroundColor: resultJson.ScreenContent
? resultJson.ScreenContent.Sf_bgcolor
: "",
});
//加载JSON数据
resultJson.objects.map((item) => {
switch (item.component_type) {
case "1": //文本标签
getValues(item, resultJson.ScreenData);
handleSetText(item.top, item.left, item);
break;
case "2": //图片照片
getValues(item, resultJson.ScreenData);
handleAddImage(item.top, item.left, item);
break;
case "3": //视频控件
getValues(item, resultJson.ScreenData);
handleAddVideo(item.top, item.left, item);
break;
case "4": //议题内容
getValues(item, resultJson.ScreenData);
handleSetYtnr(item.top, item.left, item);
break;
case "5":
getValues(item, resultJson.ScreenData);
const aaaaa = result.ScreenData[item.bindingFieldID]
? result.ScreenData[item.bindingFieldID]
: [];
var bbbb = [];
aaaaa &&
aaaaa.map((i) => {
if (i.formid === item.id) {
bbbb.push(i);
}
});
let item2222 = Object.assign({}, item, { text: bbbb });
console.log("222222222222222222222", item2222);
handleSetGridList(item.top, item.left, item2222);
break;
case "6": //横向滚动文本
getValues(item, resultJson.ScreenData);
handleSetHxgdwb(item.top, item.left, item);
break;
case "7": //照片列表
getValues(item, resultJson.ScreenData);
handleSetPhoto(item.top, item.left, item);
break;
case "8": //代表团列表
getValues(item, resultJson.ScreenData);
handleSetDeputation(item.top, item.left, item);
break;
case "9": //子义题列表
getValues(item, resultJson.ScreenData);
handleSetZytlb(item.top, item.left, item, result);
break;
case "10": //时间控件
getValues(item, resultJson.ScreenData);
handleSetSjkj(item.top, item.left, item);
break;
case "11":
case "12":
case "13": //图形控件
handleSetImage(item.top, item.left, item.component_type, item);
break;
}
});
// canvas.renderAll();
canvas.requestRenderAll();
}
// function onOpen(evt) {
// doSend("ping");
// }
// function onClose(evt) {
// console.log(evt)
// }
// function onMessage(evt) {
// console.log(evt)
// websocket.close();
// }
// function onError(evt) {
// console.log(evt)
// }
// function doSend(message) {
// console.log(evt)
// websocket.send(message);
// }
window.addEventListener("load", init, false);
//添加线条控制end====================
window.addEventListener("beforeunload", function (event) {
event.preventDefault(); // 阻止默认的关闭提示框
// clearInterval(intervalId)
clearInterval(timer);
});
</script>
</html>
Reference in New Issue View Git Blame Copy Permalink