From 2c85d49d5e4fb5ed4454cdaf06143ed0d9d131b7 Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期二, 28 五月 2024 13:58:13 +0800
Subject: [PATCH] 调试流程图
---
src/books/embedded/assets/main.less | 4
src/books/lifeCare/index.vue | 10 ++
src/books/lifeCare/css/default.less | 73 +++++++++++++++++++++++-
src/App.vue | 4 -
src/components/drawflow/index.vue | 75 ++++++++++++++++---------
src/books/English/assets/main.less | 8 +-
6 files changed, 132 insertions(+), 42 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index ceedcae..962384e 100644
--- a/src/App.vue
+++ b/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;
}
},
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index b8b0f2d..3439399 100644
--- a/src/books/English/assets/main.less
+++ b/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 {
diff --git a/src/books/embedded/assets/main.less b/src/books/embedded/assets/main.less
index aecb0ff..1a5cf43 100644
--- a/src/books/embedded/assets/main.less
+++ b/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 {
diff --git a/src/books/lifeCare/css/default.less b/src/books/lifeCare/css/default.less
index 0e1d440..75f27dc 100644
--- a/src/books/lifeCare/css/default.less
+++ b/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 {
diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue
index 003e382..d7b5849 100644
--- a/src/books/lifeCare/index.vue
+++ b/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>
diff --git a/src/components/drawflow/index.vue b/src/components/drawflow/index.vue
index 6cc9612..36bdf97 100644
--- a/src/components/drawflow/index.vue
+++ b/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%;
--
Gitblit v1.9.1