|
|
@@ -4,7 +4,11 @@
|
|
|
<div class="left">
|
|
|
<ul>
|
|
|
<div>{{ curQue.conTitle }}</div>
|
|
|
- <li v-for="(item, index) in curQue.con" :key="'left' + index">
|
|
|
+ <li
|
|
|
+ :class="'left' + index + number"
|
|
|
+ v-for="(item, index) in curQue.con"
|
|
|
+ :key="'left' + index"
|
|
|
+ >
|
|
|
<!-- :style="{
|
|
|
background:
|
|
|
JSON.stringify(data).indexOf(item.nodeId) != -1
|
|
|
@@ -16,8 +20,13 @@
|
|
|
v-if="item.img_list.length > 0"
|
|
|
:src="item.img_list[0].id"
|
|
|
alt=""
|
|
|
+ @load="conImageload"
|
|
|
/>
|
|
|
- <div class="text" :class="'left' + index">
|
|
|
+ <div
|
|
|
+ class="text"
|
|
|
+ :class="'left' + index"
|
|
|
+ v-if="item.detail.wordsList.length > 0 || item.detail.sentence"
|
|
|
+ >
|
|
|
<!-- 大于0就说明分词了 -->
|
|
|
<template v-if="item.detail.wordsList.length > 0">
|
|
|
<div
|
|
|
@@ -92,7 +101,11 @@
|
|
|
<div class="right">
|
|
|
<ul>
|
|
|
<div>{{ curQue.optionTitle }}</div>
|
|
|
- <li v-for="(item, index) in curQue.option" :key="'right' + index">
|
|
|
+ <li
|
|
|
+ :class="'right' + index + number"
|
|
|
+ v-for="(item, index) in curQue.option"
|
|
|
+ :key="'right' + index"
|
|
|
+ >
|
|
|
<!-- :style="{
|
|
|
background:
|
|
|
JSON.stringify(data).indexOf(item.nodeId) != -1
|
|
|
@@ -119,8 +132,13 @@
|
|
|
v-if="item.img_list.length > 0"
|
|
|
:src="item.img_list[0].id"
|
|
|
alt=""
|
|
|
+ @load="conImageload"
|
|
|
/>
|
|
|
- <div class="text" :class="'right' + index">
|
|
|
+ <div
|
|
|
+ class="text"
|
|
|
+ :class="'right' + index"
|
|
|
+ v-if="item.detail.wordsList.length > 0 || item.detail.sentence"
|
|
|
+ >
|
|
|
<!-- 大于0就说明分词了 -->
|
|
|
<template v-if="item.detail.wordsList.length > 0">
|
|
|
<div
|
|
|
@@ -179,7 +197,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 清除所有连线及连线的状态 -->
|
|
|
- <div class="fuwei" :class="[TaskModel == 'ANSWER'?'notAllow':'']">
|
|
|
+ <div class="fuwei" :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']">
|
|
|
<div @click="clearLine">
|
|
|
<img src="../../../assets/adult/fuwei.png" alt="" />
|
|
|
复位
|
|
|
@@ -194,7 +212,7 @@
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {},
|
|
|
- props: ["curQue","TaskModel"],
|
|
|
+ props: ["curQue", "TaskModel", "number"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
@@ -202,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" },
|
|
|
@@ -236,8 +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
|
|
|
};
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -246,17 +266,17 @@ export default {
|
|
|
watch: {
|
|
|
curQue(val, oldval) {
|
|
|
this.$forceUpdate(); //触发更新函数更新高度
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
// 清除所有连线
|
|
|
clearLine() {
|
|
|
- if(!this.TaskModel||this.TaskModel!='ANSWER'){
|
|
|
- this.jsPlumb.deleteEveryConnection(); //清除连线方法
|
|
|
- this.data = [];
|
|
|
- sessionStorage.removeItem("LineData");
|
|
|
- }
|
|
|
+ if (!this.TaskModel || this.TaskModel != "ANSWER") {
|
|
|
+ this.jsPlumb.deleteEveryConnection(); //清除连线方法
|
|
|
+ this.data = [];
|
|
|
+ sessionStorage.removeItem("LineData");
|
|
|
+ }
|
|
|
},
|
|
|
showPlumb() {
|
|
|
this.jsPlumb = this.$jsPlumb.getInstance({
|
|
|
@@ -293,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++) {
|
|
|
@@ -302,42 +322,42 @@ export default {
|
|
|
for (let j = 0; j < this.curQue.option.length; j++) {
|
|
|
this.initLeaf(this.curQue.option[j].nodeId, "target");
|
|
|
}
|
|
|
- });
|
|
|
+ });
|
|
|
this.setjsPlumb(true, true);
|
|
|
//点击连线
|
|
|
this.jsPlumb.bind("click", (conn, originalEvent) => {
|
|
|
- if(!this.TaskModel||this.TaskModel!='ANSWER'){
|
|
|
- // 删除点击的线
|
|
|
- this.data.forEach((item, i) => {
|
|
|
+ if (!this.TaskModel || this.TaskModel != "ANSWER") {
|
|
|
+ // 删除点击的线
|
|
|
+ this.data.forEach((item, i) => {
|
|
|
if (item.source == conn.sourceId) {
|
|
|
- this.data.splice(i, 1);
|
|
|
+ this.data.splice(i, 1);
|
|
|
}
|
|
|
- });
|
|
|
- let node = document.getElementById(conn.sourceId);
|
|
|
- this.jsPlumb.removeAllEndpoints(node);
|
|
|
- sessionStorage.setItem("LineData", JSON.stringify(this.data));
|
|
|
- this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
|
|
|
- }
|
|
|
+ });
|
|
|
+ let node = document.getElementById(conn.sourceId);
|
|
|
+ this.jsPlumb.removeAllEndpoints(node);
|
|
|
+ sessionStorage.setItem("LineData", JSON.stringify(this.data));
|
|
|
+ this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
//连线时触发
|
|
|
this.jsPlumb.bind("connection", (conn, originalEvent) => {
|
|
|
- if(!this.TaskModel||this.TaskModel!='ANSWER'){
|
|
|
- let fig = false;
|
|
|
- this.data.forEach((item) => {
|
|
|
- if (item.source == conn.sourceId && item.target == conn.targetId) {
|
|
|
- fig = true;
|
|
|
- }
|
|
|
- });
|
|
|
- if (!fig) {
|
|
|
- this.data.push({
|
|
|
- source: conn.sourceId,
|
|
|
- target: conn.targetId,
|
|
|
- });
|
|
|
- sessionStorage.setItem("LineData", JSON.stringify(this.data));
|
|
|
- this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
|
|
|
+ if (!this.TaskModel || this.TaskModel != "ANSWER") {
|
|
|
+ let fig = false;
|
|
|
+ this.data.forEach(item => {
|
|
|
+ if (item.source == conn.sourceId && item.target == conn.targetId) {
|
|
|
+ fig = true;
|
|
|
}
|
|
|
+ });
|
|
|
+ if (!fig) {
|
|
|
+ this.data.push({
|
|
|
+ source: conn.sourceId,
|
|
|
+ target: conn.targetId
|
|
|
+ });
|
|
|
+ sessionStorage.setItem("LineData", JSON.stringify(this.data));
|
|
|
+ this.$set(this.curQue, "Bookanswer", JSON.stringify(this.data));
|
|
|
}
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
//右键触发
|
|
|
@@ -353,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
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -371,15 +391,36 @@ export default {
|
|
|
this.jsPlumb.setDraggable(source, false); // 是否支持拖拽
|
|
|
this.jsPlumb.setDraggable(target, false); // 是否支持拖拽
|
|
|
},
|
|
|
+ conImageload() {
|
|
|
+ this.lodimgnumber++;
|
|
|
+ let _this = this;
|
|
|
+ if (_this.lodimgnumber == _this.allimgnumber) {
|
|
|
+ _this.curQue.option.forEach((item, index) => {
|
|
|
+ for (let i = 0; i < this.curQue.con.length; i++) {
|
|
|
+ let nodeleft = document.getElementsByClassName(
|
|
|
+ `left${i + this.number}`
|
|
|
+ )[0];
|
|
|
+ let noderight = document.getElementsByClassName(
|
|
|
+ `right${index + this.number}`
|
|
|
+ )[0];
|
|
|
+ if (nodeleft.offsetHeight > noderight.offsetHeight) {
|
|
|
+ noderight.style.height = nodeleft.offsetHeight + "px";
|
|
|
+ } else {
|
|
|
+ nodeleft.style.height = noderight.offsetHeight + "px";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- let sData = null
|
|
|
+ let sData = null;
|
|
|
if (!this.curQue.Bookanswer) {
|
|
|
- // sData = JSON.parse(sessionStorage.getItem("LineData"));
|
|
|
- sData = []
|
|
|
- }else{
|
|
|
- sData = JSON.parse(this.curQue.Bookanswer)
|
|
|
+ // sData = JSON.parse(sessionStorage.getItem("LineData"));
|
|
|
+ sData = [];
|
|
|
+ } else {
|
|
|
+ sData = JSON.parse(this.curQue.Bookanswer);
|
|
|
}
|
|
|
this.data = [];
|
|
|
if (sData) {
|
|
|
@@ -387,35 +428,43 @@ export default {
|
|
|
}
|
|
|
this.curQue.con.forEach((item, i) => {
|
|
|
item.nodeId = "left_" + i;
|
|
|
+ if (item.img_list.length > 0) {
|
|
|
+ this.allimgnumber++;
|
|
|
+ }
|
|
|
});
|
|
|
this.curQue.option.forEach((item, i) => {
|
|
|
item.nodeId = "right_" + i;
|
|
|
+ if (item.img_list.length > 0) {
|
|
|
+ this.allimgnumber++;
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
this.showPlumb();
|
|
|
// 根据记录自动连起来
|
|
|
- for (let i = 0; i < this.curQue.con.length; i++) {
|
|
|
- let nodeleft = document.getElementsByClassName(`left${i}`)[0];
|
|
|
- let noderight = document.getElementsByClassName(`right${i}`)[0];
|
|
|
- if (nodeleft && noderight) {
|
|
|
- console.log(nodeleft);
|
|
|
- console.log(noderight);
|
|
|
- if (nodeleft.offsetHeight > noderight.offsetHeight) {
|
|
|
- noderight.style.height = nodeleft.offsetHeight + "px";
|
|
|
- } else {
|
|
|
- nodeleft.style.height = noderight.offsetHeight + "px";
|
|
|
+ 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];
|
|
|
+ if (nodeleft && noderight) {
|
|
|
+ console.log(nodeleft);
|
|
|
+ console.log(noderight);
|
|
|
+ if (nodeleft.offsetHeight > noderight.offsetHeight) {
|
|
|
+ noderight.style.height = nodeleft.offsetHeight + "px";
|
|
|
+ } else {
|
|
|
+ nodeleft.style.height = noderight.offsetHeight + "px";
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
if (this.data.length > 0) {
|
|
|
- console.log(this.data)
|
|
|
- this.data.forEach((item) => {
|
|
|
+ console.log(this.data);
|
|
|
+ this.data.forEach(item => {
|
|
|
this.jsPlumb.connect({
|
|
|
source: item.source,
|
|
|
- target: item.target,
|
|
|
+ target: item.target
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
@@ -446,7 +495,7 @@ export default {
|
|
|
//生命周期-销毁完成
|
|
|
destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() {},
|
|
|
+ activated() {}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -500,7 +549,7 @@ export default {
|
|
|
line-height: 150%;
|
|
|
color: #000000;
|
|
|
img {
|
|
|
- width: 238px;
|
|
|
+ max-width: 238px;
|
|
|
height: 158px;
|
|
|
}
|
|
|
.text {
|
|
|
@@ -521,7 +570,7 @@ export default {
|
|
|
span {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
- font-family: 'robot';
|
|
|
+ font-family: "robot";
|
|
|
font-style: normal;
|
|
|
font-weight: normal;
|
|
|
font-size: 16px;
|
|
|
@@ -564,7 +613,7 @@ export default {
|
|
|
> span {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
- font-family: 'robot';
|
|
|
+ font-family: "robot";
|
|
|
font-style: normal;
|
|
|
font-weight: normal;
|
|
|
font-size: 16px;
|
|
|
@@ -578,7 +627,7 @@ export default {
|
|
|
}
|
|
|
div {
|
|
|
img {
|
|
|
- width: 238px;
|
|
|
+ max-width: 238px;
|
|
|
height: 158px;
|
|
|
}
|
|
|
.text {
|
|
|
@@ -603,10 +652,10 @@ export default {
|
|
|
.fuwei {
|
|
|
margin-top: 16px;
|
|
|
height: 40px;
|
|
|
- &.notAllow{
|
|
|
- >div{
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
+ &.notAllow {
|
|
|
+ > div {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
}
|
|
|
> div {
|
|
|
float: right;
|
natasha