GCLS_Page_Book_Component_NPC/src/components/Adult/preview/Ligature.vue

<template>
  <div class="JoinLine">
    <div id="container" class="container">
      <div class="left">
        <ul>
          <div>{{ curQue.conTitle }}</div>
          <li
            :class="'left' + index + number"
            v-for="(item, index) in curQue.con"
            :key="'left' + index"
          >
            <!--             :style="{
              background:
                JSON.stringify(data).indexOf(item.nodeId) != -1
                  ? '#F0F0F0'
                  : '',
            }" -->
            <div>
              <img
                v-if="item.img_list.length > 0"
                :src="item.img_list[0].id"
                alt=""
                @load="conImageload"
              />
              <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
                    v-for="(it, wordIndex) in item.detail.wordsList"
                    :key="'word' + wordIndex"
                  >
                    <template v-if="item.detail.pyPosition == 'top'">
                      <p
                        style="
                          font-family: 'GB-PINYINOK-B';
                          font-size: 14px;
                          line-height: 20px;
                        "
                      >
                        {{ it.pinyin }}
                      </p>
                      <p
                        style="
                          font-family: 'FZJCGFKTK';
                          font-size: 20px;
                          line-height: 150%;
                        "
                      >
                        {{ it.chs }}
                      </p>
                    </template>
                    <template v-else>
                      <p
                        style="
                          font-family: 'FZJCGFKTK';
                          font-size: 20px;
                          line-height: 150%;
                        "
                      >
                        {{ it.chs }}
                      </p>
                      <p
                        style="
                          font-family: 'GB-PINYINOK-B';
                          font-size: 14px;
                          line-height: 20px;
                        "
                      >
                        {{ it.pinyin }}
                      </p>
                    </template>
                  </div>
                </template>
                <template v-else>
                  {{ item.detail.sentence }}
                </template>
              </div>
            </div>
            <span>{{ item.Number }}</span>
            <img
              v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
              name="source"
              :id="item.nodeId"
              src="../../../assets/adult/LineImg.png"
              alt=""
            />
            <img
              v-else
              :id="item.nodeId"
              name="target"
              src="../../../assets/adult/LineImg-select.png"
              alt=""
            />
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <div>{{ curQue.optionTitle }}</div>
          <li
            :class="'right' + index + number"
            v-for="(item, index) in curQue.option"
            :key="'right' + index"
          >
            <!--             :style="{
              background:
                JSON.stringify(data).indexOf(item.nodeId) != -1
                  ? '#F0F0F0'
                  : '',
            }" -->
            <img
              v-if="JSON.stringify(data).indexOf(item.nodeId) == -1"
              name="source"
              :id="item.nodeId"
              src="../../../assets/adult/LineImg.png"
              alt=""
            />
            <img
              v-else
              :id="item.nodeId"
              name="target"
              src="../../../assets/adult/LineImg-select.png"
              alt=""
            />
            <span>{{ item.Number }}</span>
            <div>
              <img
                v-if="item.img_list.length > 0"
                :src="item.img_list[0].id"
                alt=""
                @load="conImageload"
              />
              <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
                    v-for="(it, wordIndex) in item.detail.wordsList"
                    :key="'word' + wordIndex"
                  >
                    <template v-if="item.detail.pyPosition == 'top'">
                      <p
                        style="
                          font-family: 'GB-PINYINOK-B';
                          font-size: 14px;
                          line-height: 20px;
                        "
                      >
                        {{ it.pinyin }}
                      </p>
                      <p
                        style="
                          font-family: 'FZJCGFKTK';
                          font-size: 20px;
                          line-height: 150%;
                        "
                      >
                        {{ it.chs }}
                      </p>
                    </template>
                    <template v-else>
                      <p
                        style="
                          font-family: 'FZJCGFKTK';
                          font-size: 20px;
                          line-height: 150%;
                        "
                      >
                        {{ it.chs }}
                      </p>
                      <p
                        style="
                          font-family: 'GB-PINYINOK-B';
                          font-size: 14px;
                          line-height: 20px;
                        "
                      >
                        {{ it.pinyin }}
                      </p>
                    </template>
                  </div>
                </template>
                <template v-else>
                  {{ item.detail.sentence }}
                </template>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 清除所有连线及连线的状态 -->
    <div class="fuwei" :class="[TaskModel == 'ANSWER' ? 'notAllow' : '']">
      <div @click="clearLine">
        <img src="../../../assets/adult/fuwei.png" alt="" />
        复位
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["curQue", "TaskModel", "number"],
  data() {
    //这里存放数据
    return {
      data: [],
      leftList: [
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_1"
        },
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_2"
        },
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_3"
        },
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_4"
        },
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_5"
        },
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_6"
        },
        {
          text: "Arrive at the airport ahead of time ______",
          nodeId: "left_7"
        }
      ],
      rightList: [
        { text: "把来访者直接送到宾馆", en: "a", nodeId: "right_1" },
        { text: "把来访者直接送到宾馆", en: "b", nodeId: "right_2" },
        { text: "把来访者直接送到宾馆", en: "c", nodeId: "right_3" },
        { text: "把来访者直接送到宾馆", en: "d", nodeId: "right_4" },
        { text: "把来访者直接送到宾馆", en: "e", nodeId: "right_5" },
        { text: "把来访者直接送到宾馆", en: "f", nodeId: "right_6" },
        { text: "把来访者直接送到宾馆", en: "g", nodeId: "right_7" }
      ],
      allimgnumber: 0,
      lodimgnumber: 0
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    curQue(val, oldval) {
      this.$forceUpdate(); //触发更新函数更新高度
    }
  },
  //方法集合
  methods: {
    //   清除所有连线
    clearLine() {
      if (!this.TaskModel || this.TaskModel != "ANSWER") {
        this.jsPlumb.deleteEveryConnection(); //清除连线方法
        this.data = [];
        sessionStorage.removeItem("LineData");
      }
    },
    showPlumb() {
      this.jsPlumb = this.$jsPlumb.getInstance({
        Container: "container", // 选择器id
        EndpointStyle: { radius: 1, fill: "#74B5CA" }, // 端点样式
        PaintStyle: { stroke: "#DE4444", strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456
        HoverPaintStyle: { stroke: "#18A0FB", strokeWidth: null }, // 默认悬停样式  默认为null
        ConnectionOverlays: [
          //   // 此处可以设置所有箭头的样式
          //   [
          //     "Arrow",
          //     {
          //       // 设置参数可以参考中文文档
          //       location: 1,
          //       length: 12,
          //       paintStyle: {
          //         stroke: "#7663EC",
          //         fill: "#7663EC",
          //       },
          //     },
          //   ],
          //   [
          //     "Label",
          //     {
          //       location: 0.1,
          //       cssClass: "aLabel", //hover时label的样式名
          //       events: {
          //         click: (info) => {
          //           console.log(info);
          //         },
          //       },
          //       visible: true,
          //     },
          //   ],
        ],
        Connector: ["Straight"], // 要使用的默认连接器的类型：直线，折线，曲线等
        DrapOptions: { cursor: "crosshair", zIndex: 2000 }
      });
      this.jsPlumb.batch(() => {
        for (let i = 0; i < this.curQue.con.length; i++) {
          this.initLeaf(this.curQue.con[i].nodeId, "source");
        }
        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 (item.source == conn.sourceId) {
              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));
        }
      });

      //连线时触发
      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));
          }
        }
      });

      //右键触发
      this.jsPlumb.bind("contextmenu", (conn, originalEvent) => {
        console.log(conn, originalEvent);
      });
    },
    //  初始化规则使其可以连线、拖拽
    initLeaf(id, type) {
      const ins = this.jsPlumb;
      const elem = document.getElementById(id);
      if (type === "source") {
        ins.makeSource(elem, {
          anchor: [1, 0.5, 0.5, 0.5], // 左 上 右 下  数字我调不太准确 可改成left right
          allowLoopback: false, //允许回连
          maxConnections: 1 //最大连接数（-1表示不限制）
        });
      } else {
        ins.makeTarget(elem, {
          anchor: [0, 0.5, 0, 0],
          allowLoopback: false,
          maxConnections: 1
        });
      }
    },
    setjsPlumb(sourceFlag, targetFlag) {
      const source = document.getElementsByName("source");
      const target = document.getElementsByName("target");
      this.jsPlumb.setSourceEnabled(source, sourceFlag);
      this.jsPlumb.setTargetEnabled(target, targetFlag);
      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;
    if (!this.curQue.Bookanswer) {
      // sData = JSON.parse(sessionStorage.getItem("LineData"));
      sData = [];
    } else {
      sData = JSON.parse(this.curQue.Bookanswer);
    }
    this.data = [];
    if (sData) {
      this.data = sData;
    }
    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();
    // 根据记录自动连起来
    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 => {
          this.jsPlumb.connect({
            source: item.source,
            target: item.target
          });
        });
      }
    }, 1000);
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {
    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) {
        if (nodeleft.offsetHeight > noderight.offsetHeight) {
          noderight.style.height = nodeleft.offsetHeight + "px";
        } else {
          nodeleft.style.height = noderight.offsetHeight + "px";
        }
      }
    }
  },
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.JoinLine {
  width: 100%;
  .container {
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    position: relative;
    display: flex;
    justify-content: center;
    padding: 24px 40px;
    ul {
      list-style: none;
      li {
        // width: 333px;
        // // height: 64px;
        // background: #ffffff;
        // border: 1px solid rgba(0, 0, 0, 0.1);
        // box-sizing: border-box;
        // border-radius: 8px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        > img {
          width: 24px;
          height: 24px;
        }
      }
    }
    .left {
      width: 50%;
      ul {
        > div {
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          line-height: 150%;
          color: #000000;
          margin-bottom: 16px;
        }
        li {
          padding: 8px 0;
          display: flex;
          justify-content: flex-end; //右对齐
          > div {
            font-size: 16px;
            line-height: 150%;
            color: #000000;
            img {
              max-width: 238px;
              height: 158px;
            }
            .text {
              max-width: 200px;
              width: 100%;
              padding: 8px 16px;
              background: #ffffff;
              border: 1px solid rgba(0, 0, 0, 0.1);
              box-sizing: border-box;
              border-radius: 8px;
              display: flex;
              flex-wrap: wrap;
              p {
                margin: 0;
              }
            }
          }
          span {
            width: 24px;
            height: 24px;
            font-family: "robot";
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 150%;
            text-align: center;
            color: #ffffff;
            background: #a7a7a7;
            border-radius: 50%;
            margin-left: 8px;
            margin-right: 12px;
          }
          > img {
            cursor: pointer;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
    .right {
      width: 50%;
      margin-left: 88px;
      ul {
        > div {
          width: 334px;
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          line-height: 150%;
          color: #000000;
          margin-bottom: 16px;
        }
        li {
          padding: 8px 0;
          > img {
            margin-left: 16px;
            width: 24px;
            height: 24px;
          }
          > span {
            width: 24px;
            height: 24px;
            font-family: "robot";
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
            line-height: 150%;
            text-align: center;
            color: #ffffff;
            background: #a7a7a7;
            border-radius: 50%;
            margin-left: 12px;
            margin-right: 8px;
          }
          div {
            img {
              max-width: 238px;
              height: 158px;
            }
            .text {
              max-width: 200px;
              padding: 8px 16px;
              background: #ffffff;
              border: 1px solid rgba(0, 0, 0, 0.1);
              box-sizing: border-box;
              border-radius: 8px;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              p {
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
  .fuwei {
    margin-top: 16px;
    height: 40px;
    &.notAllow {
      > div {
        cursor: not-allowed;
      }
    }
    > div {
      float: right;
      width: 72px;
      height: 40px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 16px;
      line-height: 150%;
      display: flex;
      align-items: center;
      text-align: center;
      color: #000000;
      cursor: pointer;
      img {
        margin-left: 8px;
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
<style lang="scss">
.jtk-connector {
  path {
    cursor: pointer;
  }
}
</style>