|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="JoinLine">
|
|
|
- <div id="container" class="container">
|
|
|
+ <div :id="'container' + number" class="container">
|
|
|
<div class="left">
|
|
|
<ul>
|
|
|
<div>{{ curQue.conTitle }}</div>
|
|
@@ -220,32 +220,32 @@ export default {
|
|
|
leftList: [
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_1"
|
|
|
+ nodeId: "left_1",
|
|
|
},
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_2"
|
|
|
+ nodeId: "left_2",
|
|
|
},
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_3"
|
|
|
+ nodeId: "left_3",
|
|
|
},
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_4"
|
|
|
+ nodeId: "left_4",
|
|
|
},
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_5"
|
|
|
+ nodeId: "left_5",
|
|
|
},
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_6"
|
|
|
+ nodeId: "left_6",
|
|
|
},
|
|
|
{
|
|
|
text: "Arrive at the airport ahead of time ______",
|
|
|
- nodeId: "left_7"
|
|
|
- }
|
|
|
+ nodeId: "left_7",
|
|
|
+ },
|
|
|
],
|
|
|
rightList: [
|
|
|
{ text: "把来访者直接送到宾馆", en: "a", nodeId: "right_1" },
|
|
@@ -254,10 +254,10 @@ export default {
|
|
|
{ text: "把来访者直接送到宾馆", en: "d", nodeId: "right_4" },
|
|
|
{ text: "把来访者直接送到宾馆", en: "e", nodeId: "right_5" },
|
|
|
{ text: "把来访者直接送到宾馆", en: "f", nodeId: "right_6" },
|
|
|
- { text: "把来访者直接送到宾馆", en: "g", nodeId: "right_7" }
|
|
|
+ { text: "把来访者直接送到宾馆", en: "g", nodeId: "right_7" },
|
|
|
],
|
|
|
allimgnumber: 0,
|
|
|
- lodimgnumber: 0
|
|
|
+ lodimgnumber: 0,
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
@@ -266,7 +266,7 @@ export default {
|
|
|
watch: {
|
|
|
curQue(val, oldval) {
|
|
|
this.$forceUpdate(); //触发更新函数更新高度
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
@@ -280,7 +280,7 @@ export default {
|
|
|
},
|
|
|
showPlumb() {
|
|
|
this.jsPlumb = this.$jsPlumb.getInstance({
|
|
|
- Container: "container", // 选择器id
|
|
|
+ Container: "container" + this.number, // 选择器id
|
|
|
EndpointStyle: { radius: 1, fill: "#74B5CA" }, // 端点样式
|
|
|
PaintStyle: { stroke: "#DE4444", strokeWidth: 2 }, // 绘画样式,默认8px线宽 #456
|
|
|
HoverPaintStyle: { stroke: "#18A0FB", strokeWidth: null }, // 默认悬停样式 默认为null
|
|
@@ -313,7 +313,7 @@ export default {
|
|
|
// ],
|
|
|
],
|
|
|
Connector: ["Straight"], // 要使用的默认连接器的类型:直线,折线,曲线等
|
|
|
- DrapOptions: { cursor: "crosshair", zIndex: 2000 }
|
|
|
+ DrapOptions: { cursor: "crosshair", zIndex: 2000 },
|
|
|
});
|
|
|
this.jsPlumb.batch(() => {
|
|
|
for (let i = 0; i < this.curQue.con.length; i++) {
|
|
@@ -344,7 +344,7 @@ export default {
|
|
|
this.jsPlumb.bind("connection", (conn, originalEvent) => {
|
|
|
if (!this.TaskModel || this.TaskModel != "ANSWER") {
|
|
|
let fig = false;
|
|
|
- this.data.forEach(item => {
|
|
|
+ this.data.forEach((item) => {
|
|
|
if (item.source == conn.sourceId && item.target == conn.targetId) {
|
|
|
fig = true;
|
|
|
}
|
|
@@ -352,7 +352,7 @@ export default {
|
|
|
if (!fig) {
|
|
|
this.data.push({
|
|
|
source: conn.sourceId,
|
|
|
- target: conn.targetId
|
|
|
+ target: conn.targetId,
|
|
|
});
|
|
|
sessionStorage.setItem("LineData", JSON.stringify(this.data));
|
|
|
this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
|
|
@@ -373,13 +373,13 @@ export default {
|
|
|
ins.makeSource(elem, {
|
|
|
anchor: [1, 0.5, 0.5, 0.5], // 左 上 右 下 数字我调不太准确 可改成left right
|
|
|
allowLoopback: false, //允许回连
|
|
|
- maxConnections: 1 //最大连接数(-1表示不限制)
|
|
|
+ maxConnections: 1, //最大连接数(-1表示不限制)
|
|
|
});
|
|
|
} else {
|
|
|
ins.makeTarget(elem, {
|
|
|
anchor: [0, 0.5, 0, 0],
|
|
|
allowLoopback: false,
|
|
|
- maxConnections: 1
|
|
|
+ maxConnections: 1,
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -411,7 +411,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
@@ -427,13 +427,13 @@ export default {
|
|
|
this.data = sData;
|
|
|
}
|
|
|
this.curQue.con.forEach((item, i) => {
|
|
|
- item.nodeId = "left_" + i;
|
|
|
+ item.nodeId = "left_" + i + this.number;
|
|
|
if (item.img_list.length > 0) {
|
|
|
this.allimgnumber++;
|
|
|
}
|
|
|
});
|
|
|
this.curQue.option.forEach((item, i) => {
|
|
|
- item.nodeId = "right_" + i;
|
|
|
+ item.nodeId = "right_" + i + this.number;
|
|
|
if (item.img_list.length > 0) {
|
|
|
this.allimgnumber++;
|
|
|
}
|
|
@@ -445,8 +445,12 @@ export default {
|
|
|
// 根据记录自动连起来
|
|
|
if (this.allimgnumber == 0) {
|
|
|
for (let i = 0; i < this.curQue.con.length; i++) {
|
|
|
- let nodeleft = document.getElementsByClassName(`left${i}`)[0];
|
|
|
- let noderight = document.getElementsByClassName(`right${i}`)[0];
|
|
|
+ let nodeleft = document.getElementsByClassName(
|
|
|
+ `left${i + this.number}`
|
|
|
+ )[0];
|
|
|
+ let noderight = document.getElementsByClassName(
|
|
|
+ `right${i + this.number}`
|
|
|
+ )[0];
|
|
|
if (nodeleft && noderight) {
|
|
|
console.log(nodeleft);
|
|
|
console.log(noderight);
|
|
@@ -461,10 +465,10 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
if (this.data.length > 0) {
|
|
|
console.log(this.data);
|
|
|
- this.data.forEach(item => {
|
|
|
+ this.data.forEach((item) => {
|
|
|
this.jsPlumb.connect({
|
|
|
source: item.source,
|
|
|
- target: item.target
|
|
|
+ target: item.target,
|
|
|
});
|
|
|
});
|
|
|
}
|
|
@@ -495,7 +499,7 @@ export default {
|
|
|
//生命周期-销毁完成
|
|
|
destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
- activated() {}
|
|
|
+ activated() {},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|