调试流程图

unknown

2024-05-28 2c85d49d5e4fb5ed4454cdaf06143ed0d9d131b7

调试流程图

 src/App.vue

@@ -55,11 +55,9 @@
    } else {
      this.activeBook = await this.config.getBookConfig(
        // childHealth
        this.config.resourceCtx + "childHealth"
        this.config.resourceCtx + "lifeCare"
      );
      console.log("ac", this.activeBook);
      this.config.activeBook = this.activeBook;
      debugger;
      this.config.goodsStore = this.activeBook.storeRefcode;
    }
  },

 src/books/English/assets/main.less

@@ -287,10 +287,10 @@
    -moz-text-emphasis-style: dot;
    -ms-text-emphasis-style: dot;
    text-emphasis-style: dot;
    -webkit-text-emphasis-position: under;
    -moz-text-emphasis-position: under;
    -ms-text-emphasis-position: under;
    text-emphasis-position: under;
    -webkit-text-emphasis-position: under left;
    -moz-text-emphasis-position: under left;
    -ms-text-emphasis-position: under left;
    text-emphasis-position: under left;
  }

  .fieldset {

 src/books/embedded/assets/main.less

@@ -552,10 +552,10 @@
    /*text-decoration:underline;*/
    text-emphasis-style: dot;
    text-emphasis-color: #f75555;
    text-emphasis-position: under;
    text-emphasis-position: under left;
    -webkit-text-emphasis-style: dot;
    -webkit-text-emphasis-color: #000;
    -webkit-text-emphasis-position: under;
    -webkit-text-emphasis-position: under left;
  }

  .topmark {

 src/books/lifeCare/css/default.less

@@ -9,6 +9,7 @@
  min-width: 375px;
  margin: 0 auto;
  border-color: #f49a4c;
  height: 100%;

  textarea:focus,
  input:focus {
@@ -40,6 +41,70 @@
    text-align: center;
    white-space: pre-line;
  }

  .drawflow {
    .drawflow-node {
      background-color: #fff;

      .contentWall {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .contentTitle {
          margin-bottom: 5px;
        }

        .contentText {
          textarea {
            text-indent: 0;
            min-height: 50px;
            margin: 0;
            outline: none;
          }

          textarea:focus {
            border: 1px solid #000 !important;
          }
        }
      }
    }

    .content {
      .btn-export {
        float: right;
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
        font-weight: bold;
        border: 1px solid #0e5ba3;
        background: #4ea9ff;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        z-index: 5;
      }

      .btn-clear {
        float: right;
        position: absolute;
        top: 10px;
        right: 85px;
        color: white;
        font-weight: bold;
        border: 1px solid #96015b;
        background: #e3195a;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        z-index: 5;
      }
    }
  }


  .chapter {
    font-family: "宋体";
@@ -1045,10 +1110,10 @@
      -moz-text-emphasis-style: dot;
      -ms-text-emphasis-style: dot;
      text-emphasis-style: dot;
      -webkit-text-emphasis-position: under;
      -moz-text-emphasis-position: under;
      -ms-text-emphasis-position: under;
      text-emphasis-position: under;
      -webkit-text-emphasis-position: under left;
      -moz-text-emphasis-position: under left;
      -ms-text-emphasis-position: under left;
      text-emphasis-position: under left;
    }

    .fieldset {

 src/books/lifeCare/index.vue

@@ -1,3 +1,4 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div
@@ -8,6 +9,7 @@
        transform: `scale(${pageZoom ? pageZoom : 1})`,
      }"
    >
      <drawflow />
      <front001 v-if="showCatalogList.indexOf(1) > -1" />
      <ChapterOne v-if="showCatalogList.indexOf(2) > -1" />
      <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" />
@@ -68,6 +70,7 @@
  },
  watch: {
    showCatalogList: {
      // eslint-disable-next-line no-unused-vars
      handler(newVal, oldVal) {
        if (
          this.$store.state.qiankun &&
@@ -89,7 +92,7 @@
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [5];
    this.showCatalogList = [0];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
@@ -192,6 +195,7 @@
      ).getSelection();
      const txt = selection.toString();
      if (selection.type != "none" && txt) {
        // eslint-disable-next-line no-unused-vars
        let node = selection.anchorNode.parentNode;
        let pageHtml = this.getParentWithClass(
          selection.anchorNode,
@@ -461,6 +465,7 @@
        }
      });
    },
    // eslint-disable-next-line
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
@@ -469,6 +474,7 @@
        }
      }
    },
    // eslint-disable-next-line no-unused-vars
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {
@@ -495,7 +501,7 @@
        }
      });
    },
  },
  }
};
</script>


 src/components/drawflow/index.vue

@@ -6,40 +6,50 @@
          class="drag-drawflow"
          draggable="true"
          @dragstart="drag"
          data-node="none"
          data-node="template"
        >
          <span>节点</span>
        </div>
      </div>
    </div>
    <div class="content" id="drawflow" @drop="drop" @dragover="allowDrop"></div>
    <div class="content" id="drawflow" @drop="drop" @dragover="allowDrop">
      <div class="btn-export" @click="exportData">导出</div>
      <div class="btn-clear" @click="editor.clearModuleSelected()">清空</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Drawflow from "drawflow";
import styleDrawflow from "drawflow/dist/drawflow.min.css";
export default {
  data() {
    return {
      editor: null,
      mobile_item_selec: "",
      mobile_last_move: null
      mobile_last_move: null,
    };
  },
  props: {
    importData: {
      type: Object
    }
      type: Object,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    exportData() {
      console.log(this.editor.export());
    },
    init() {
      this.editor = new Drawflow("drawflow", Vue, this);
      this.editor = new Drawflow(
        document.getElementById("drawflow"),
        Vue,
        this
      );
      this.editor.reroute = true;
      this.editor.start();
      if (this.importData) {
        // 渲染记录的数据
        this.editor.import(this.importData);
@@ -77,7 +87,7 @@
      });

      this.editor.on("mouseMove", function (position) {
        console.log("Position mouse x:" + position.x + " y:" + position.y);
        // console.log("Position mouse x:" + position.x + " y:" + position.y);
      });

      this.editor.on("nodeMoved", function (id) {
@@ -126,7 +136,6 @@
      this.mobile_last_move = ev;
    },
    drag(ev) {
      console.log(ev, "drag");
      if (ev.type === "touchstart") {
        this.mobile_item_selec = ev.target
          .closest(".drag-drawflow")
@@ -140,46 +149,58 @@
        return false;
      }
      pos_x =
        10;
        pos_x *
          (this.editor.precanvas.clientWidth /
            (this.editor.precanvas.clientWidth * this.editor.zoom)) -
        this.editor.precanvas.getBoundingClientRect().x *
          (this.editor.precanvas.clientWidth /
            (this.editor.precanvas.clientWidth * this.editor.zoom));
      pos_y =
        10;
        pos_y *
          (this.editor.precanvas.clientHeight /
            (this.editor.precanvas.clientHeight * this.editor.zoom)) -
        this.editor.precanvas.getBoundingClientRect().y *
          (this.editor.precanvas.clientHeight /
            (this.editor.precanvas.clientHeight * this.editor.zoom));

      switch (name) {
        case "none":
          var none = `
        <div>
          <div>
            <input df-title />
          </div>
          <div>
          <textarea df-content></textarea>
        </div>
        </div>
        case "template":
          // eslint-disable-next-line no-case-declarations
          let noneEle = `
              <div class="contentWall">
                <div class="contentTitle">
                  <input df-title />
                </div>
                <div class="contentText">
                  <textarea rows="4" df-content></textarea>
                </div>
              </div>
        `;
          this.editor.addNode(
            "none",
            "noneEle",
            1,
            1,
            pos_x,
            pos_y,
            "none",
            "noneEle",
            {
              title: "",
              content: ""
              content: "",
            },
            none
            noneEle
          );
          break;
      }
    },
    allowDrop(ev) {
      ev.preventDefault();
    }
  }
    },
  },
};
</script>

<style scoped>
@import 'drawflow/dist/drawflow.min.css';
.drawflow {
  width: 100%;
  height: 100%;