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 'be8bdd5a9b'
${ noResults }
Door/mister/screen/web/topicview.html

2079 lines
84 KiB
HTML
Raw Normal View History Unescape Escape

报到门
4 weeks ago
<!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/moment.js"></script>
<script src="/webs/resourse/html2canvas.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container-parent-box {
overflow: hidden;
}
.yt_content {
position: absolute;
z-index: 1;
overflow-x: hidden;
overflow-y: scroll;
}
body {
margin: 0;
padding: 0;
}
p {
margin: 15px 0 !important;
}
</style>
</head>
<body>
<div class="container-parent-box">
<div id="container"></div>
</div>
<canvas id="canvas"></canvas>
<div id="yt_content" class="yt_content">
<div id="element" class="voteContent"></div>
</div>
</body>
<script type="text/javascript">
function getUrlParams(url) {
const params = {};
const urlParts = url.split("?");
if (urlParts.length > 1) {
const paramString = urlParts[1];
const paramPairs = paramString.split("&");
paramPairs.forEach((pair) => {
const keyValue = pair.split("=");
params[keyValue[0]] = keyValue[1];
});
}
return params;
}
function getDataFunc() {
let url = window.location.search;
console.log(url.substring(url.lastIndexOf("=") + 1, url.length));
// let userId = url.substring(url.lastIndexOf('=') + 1, url.length)
const urlParams = getUrlParams(url);
const userId = urlParams["id"];
const screenid = urlParams["screenid"] ? urlParams["screenid"] : "";
fetch("http://localhost:9800/vhwcapi/v1/web/api/service/ttopic/getOne", {
method: "POST",
headers: {
Authorization: localStorage.getItem("antd-token-authority") + "",
// 'Apply-User': userInfo.id,
// 'System-User': userInfo.systemUser,
},
body: JSON.stringify({
id: userId,
screenid: screenid,
}),
timeout: 50000,
})
.then((response) => {
return response.json();
})
.then((data) => {
console.log("获取数据", data);
initCanvasItemFunc(data.datarecord.screen);
})
.catch((err) => {
console.log(err);
});
}
let canvas = new fabric.Canvas("canvas", {
stopContextMenu: true, //禁止默认右击事件
});
function initCanvasItemFunc(res = null) {
if (!res) return;
// canvas && canvas.clear();
const { ScreenFromContent, ScreenContent, ScreenData } = res;
let resultJson = { objects: [], ScreenData: {}, ScreenContent: {} };
resultJson.objects = ScreenFromContent ? ScreenFromContent : [];
resultJson.ScreenData = ScreenData;
resultJson.ScreenContent = 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
: "",
});
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);
handleSetGridList(item.top, item.left, item);
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);
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;
}
});
}
//处理画布数据函数
function getValues(item, val) {
if (val) {
Object.keys(val).forEach((key) => {
if (item.bindingFieldID == key) {
item.text = val[key];
}
});
}
}
//添加文本标签start===============================
handleSetText = (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 textContent = val ? val.text + "" : "文本标签";
if (val) {
if (textContent.length * val.fontSize > textWidth) {
let num = Math.floor(textWidth / val.fontSize);
textContent = textContent.substr(0, num - 1) + "...";
}
}
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,
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 : "",
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
if (val.bindingFieldID == "0x1043") {
let ts = textBox.text;
dateTimer = 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;
textBox.set({
text: mm + ":" + ss,
});
canvas.renderAll();
if (ts > 0) {
ts--;
} else {
clearInterval(dateTimer);
}
}, 1000);
}
canvas.add(group); // 将图形添加至画布
};
//添加文本标签end===============================
//添加图片照片start=====================================
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",
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
? `${configUrl}/${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.renderAll();
}
);
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(`${configUrl}/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);
canvas.renderAll();
});
}
};
//添加图片照片end==================================
// 添加视频==================================
handleAddVideo = (left, top, vid) => {
let Video = document.createElement("video");
Video.setAttribute(
"src",
vid && vid.videoSource
? `${configUrl}/${vid.videoSource}`
: `${configUrl}/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",
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.renderAll();
fabric.util.requestAnimFrame(render);
});
};
};
// 添加视频==================================
// 添加议题内容 开始=========================
handleSetYtnr = (left, top, item) => {
console.log("left, top, item", 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 * item.scaleValue);
textHeigth = parseInt(item.height * item.scaleValue);
}
// var container = document.querySelector("#container")
var x = document.getElementById("container");
//如果对象x不为空
if (x != null) {
x.remove();
}
let container = document.createElement("div");
container.setAttribute("id", "container");
// item.text.to_agendahtml = item.text.to_agendahtml.replace(" &nbsp; &nbsp; &nbsp; &nbsp;", " &nbsp; &nbsp; &nbsp; &nbsp; ");
item.text.to_agendahtml = item.text.to_agendahtml.replace(
" &nbsp; &nbsp;",
" &nbsp; &nbsp; "
);
const element = item.text.to_agendahtml;
container.innerHTML = element;
container.style.backgroundColor = item.text.to_agendabgcolor
? item.text.to_agendabgcolor
: "#ffffff";
container.style.width = "1800px";
container.style.height = "900px";
container.style.display = "flex";
container.style.flexDirection = "column";
container.style.justifyContent = "center";
container.style.color = "#000";
document.getElementById("element").appendChild(container);
document.getElementById("element").style.transform = `scale(${scale})`;
document.getElementById("element").style.transformOrigin = "top center";
};
// 添加议题内容 结束=========================
//添加网格列表start================================
handleSetGridList = (left, top, grid) => {
let list = 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",
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) {
item.text = list[i - 1].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;
peopleTimer = 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 + ")",
});
canvas.renderAll();
if (ts > 0) {
ts--;
} else {
clearInterval(peopleTimer);
}
}, 1000);
break;
case "0x1063": //人员申请发言人列表
item2.text = list[i - 1].secondTip
? "(" + list[i - 1].secondTip + ")"
: "";
break;
case "0x1064": //人员已发言人列表
item2.text = list[i - 1].perjob
? "(" + list[i - 1].perjob + ")"
: "";
break;
default:
break;
}
}
}
}
canvas.add(group); // 将图形添加至画布
};
//添加网格列表end================================
//添加横向滚动文本start===============================
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",
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group); // 将图形添加至画布
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============================
handleSetPhoto = (left, top, 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 - 2) / grid.colCount : 100;
const gridHeigth = grid ? (grid.height - 2) / grid.rowCount : 50;
for (let x = 1; x <= colCount; x++) {
//列
for (let y = 1; y <= rowCount; y++) {
//行
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 text = new fabric.Textbox(
grid && grid.text ? grid.text : "照片列表",
{
width: gridWidth,
// height: gridHeigth,
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: 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);
child.push(text);
}
}
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",
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); // 将图形添加至画布
};
//添加照片列表end============================
//添加代表团列表start====================
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",
});
for (let y = 1; y <= rowCount; y++) {
// 行
const obj = list[y - 1];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
const curentText = obj[Object.keys(obj)[x - 1]] + ""; //当前单元格的值
// console.log(curentText);
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];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
const curentText = obj[Object.keys(obj)[x - 1]] + ""; //当前单元格的值
// console.log(curentText);
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,
// height: gridHeigth,
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",
bindingFieldID:
grid && grid.bindingFieldID ? grid.bindingFieldID : "0x1096",
});
canvas.add(groupWrapper);
};
//添加代表团列表end====================
//添加子议题列表start========================
handleSetZytlb = (left, top, grid) => {
let list = grid.text;
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;
});
let length = num - newList.length;
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) {
const currentHeadText = headList[Object.keys(headList)[x - 1]] + "";
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坐标
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.background.includes("#")
? grid.background
: "#f4f4f4", //背景颜色
_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 {
const currentHeadText = headList[Object.keys(headList)[x - 1]] + "";
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坐标
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.background.includes("#")
? grid.background
: "#f4f4f4", //背景颜色
_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: 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];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
if (x == 1) {
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 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 : "",
_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 {
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 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 : "",
_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坐标
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];
// console.log(`----------第${y}行----------`);
for (let x = 1; x <= colCount; x++) {
// 列
const curentText = obj[Object.keys(obj)[x - 1]] + ""; //当前单元格的值
// console.log(curentText);
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: (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) {
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: 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 ? grid.top : top - parseInt(canvas._offset.top), //设置canvas上的Y坐标
component_type: "9",
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,
});
canvas.add(groupWrapper);
};
//添加时间控件列表start====================
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",
lockMovementX: true, //X轴是否可被移动(true为不可)
lockMovementY: true, //Y轴是否可被移动(true为不可)
hasControls: false,
hasBorders: false,
});
canvas.add(group);
};
//添加时间控件列表end====================
//添加线条控制start====================
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",
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",
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",
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",
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====================
window.onload = function () {
console.log("加载完成");
getDataFunc();
window.addEventListener("message", function (e) {
// console.log(e.data)
// console.log(JSON.parse(e.data))
// let result = JSON.parse(e.data)
// document.getElementsByTagName("body")[0].innerHTML = result
});
};
window.onbeforeunload = function () {
dateTimer && clearInterval(dateTimer);
peopleTimer && clearInterval(peopleTimer);
dateTimer = null;
peopleTimer = null;
document.getElementsByTagName("body")[0].remove(container);
};
</script>
</html>