二叉树画图

src/views/knowledge/search/chartByD3.vue

@@ -1,263 +0,0 @@
-<template>
-  <div>
-    <div id="chart" style="width: 1000px; height: 700px"></div>
-    <button v-show="selectedNode" @click="addLeftNode">添加左节点</button>
-    <button v-show="selectedNode" @click="addRightNode">添加右节点</button>
-    <button v-show="selectedNode" @click="deleteNode">删除该节点</button>
-    <button v-show="selectedNode" @click="updateNode">修改该节点</button>
-
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="检查点" prop="startId">
-          <el-select
-            v-model="form.id"
-            placeholder="请选择检查点"
-            value-key="id"
-            filterable
-          >
-            <el-option
-              v-for="item in pointList"
-              :key="item.id"
-              :label="item.check_piont"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-
-
-<script>
-import echarts from "echarts";
-import { getPointOption } from "@/api/suport/piont";
-
-export default {
-  data() {
-    return {
-      chartInstance: null,
-      selectedNode: null,
-      treeData: [
-        // 初始节点
-        {
-          name: "Root",
-          value: null,
-          children: [],
-          borderColor: {
-            color: "#ccc"
-          }
-        },
-      ],
-      title: "",
-      open: false,
-      form: {},
-      rules: {},
-      pointList: [],
-      ecode:'',
-    };
-  },
-
-  created() {
-    this.getPointOption();
-  },
-
-  mounted() {
-    this.chartInstance = echarts.init(document.getElementById("chart"));
-    this.chartInstance.on("click", this.selectNode); // 监听点击事件
-    this.renderChart();
-    this.levelOrder();
-  },
-  beforeDestroy() {
-    this.chartInstance.off("click", this.selectNode); // 移除监听事件
-  },
-  methods: {
-    renderChart() {
-      const option = {
-        // ECharts配置项
-        tooltip: {
-          trigger: "item",
-          triggerOn: "mousemove",
-        },
-        series: [
-          {
-            type: "tree",
-            data: this.treeData,
-            left: "2%",
-            right: "2%",
-            top: "8%",
-            bottom: "20%",
-            symbol: "emptyCircle",
-            orient: "vertical",
-            symbolSize: 30,
-            itemStyle: {
-              color: null,
-            },
-            expandAndCollapse: false,
-            label: {
-              position: "bottom",
-              rotate: 0,
-              verticalAlign: "middle",
-              align: "center",
-              fontSize: 15,
-              distance: 10,
-            },
-            animationDurationUpdate: 750,
-            initialTreeDepth: 10,
-          },
-        ],
-      };
-
-      this.chartInstance.setOption(option);
-    },
-
-    reset() {
-      this.form = {
-        id: null,
-        code: null,
-        checkPiont: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-      };
-      this.resetForm("form");
-    },
-
-    selectNode(params) {
-      if (params.data && params.data.name) {
-        this.selectedNode = params.data;
-      }
-    },
-
-    addLeftNode() {
-      const newNode = { name: "Left Node", value: null, children: [], itemStyle: {borderColor: "#FF0000"} };
-      this.selectedNode.children.unshift(newNode);
-      this.treeData = this.chartInstance.getOption().series[0].data;
-      this.chartInstance.clear();
-      this.renderChart();
-      this.levelOrder();
-    },
-    addRightNode() {
-      const newNode = { name: "Right Node", value: null, children: [],itemStyle: {borderColor: "#0000FF"} };
-      this.selectedNode.children.push(newNode);
-      this.treeData = this.chartInstance.getOption().series[0].data;
-      this.chartInstance.clear();
-      this.renderChart();
-      this.levelOrder();
-    },
-    deleteNode() {
-      this.treeData = this.chartInstance.getOption().series[0].data;
-      const parentNode = this.findParentNode(this.treeData, this.selectedNode);
-      if (parentNode) {
-        const index = parentNode.children.indexOf(this.selectedNode);
-        parentNode.children.splice(index, 1);
-        this.chartInstance.clear();
-        this.renderChart();
-        this.levelOrder();
-        this.selectedNode = null;
-      }
-    },
-    findParentNode(tree, targetNode) {
-      for (const node of tree) {
-        for (const child of node.children) {
-          if (child.name === targetNode.name) {
-            return node;
-          }
-        }
-        if (node.children.length > 0) {
-          const parentNode = this.findParentNode(node.children, targetNode);
-          if (parentNode) {
-            return parentNode;
-          }
-        }
-      }
-      return null;
-    },
-
-    updateNode() {
-      this.reset();
-      this.form.id = this.selectedNode.value;
-      this.open = true;
-      this.title = "修改检查点";
-    },
-
-    /** 提交按钮 */
-    submitForm() {
-      this.selectedNode.value = this.form.id;
-      for (const point of this.pointList) {
-        if (point.id === this.form.id) {
-          this.selectedNode.name = point.check_piont;
-          break;
-        }
-      }
-      this.open = false;
-      this.treeData = this.chartInstance.getOption().series[0].data;
-      this.chartInstance.clear();
-      this.renderChart();
-      this.levelOrder();
-    },
-
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-
-    getPointOption() {
-      getPointOption().then((resp) => {
-        this.pointList = resp.data;
-        console.info(resp);
-      });
-    },
-
-    levelOrder() {
-        const ret = [];
-        if (!this.treeData) {
-            return ret;
-        }
-        const q = [];
-        q.push(this.treeData[0]);
-        while (q.length !== 0) {
-            const currentLevelSize = q.length;
-            const nullNode = { name: "", value: 0, children: [],itemStyle: {} };
-            for (let i = 1; i <= currentLevelSize; ++i) {
-                const node = q.shift();
-                ret.push(node.value);
-                let n = node.children.length;
-                if (n == 0 && node.value != 0) {
-                  q.push(nullNode);
-                  q.push(nullNode);
-                }
-                else if (n == 1) {
-                  if (node.children[0].itemStyle.borderColor == "#FF0000"){
-                    q.push(node.children[0]);
-                    q.push(nullNode);
-                  }
-                  else {
-                    q.push(nullNode);
-                    q.push(node.children[0]);
-                  }
-                }
-                else if (n == 2) {
-                  q.push(node.children[0]);
-                  q.push(node.children[1]);
-                }
-            }
-        }
-        let n = ret.length;
-        while (ret[n-1] === 0) {
-          ret.pop();
-          n--;
-        }
-        this.$emit('flowEncode', ret.join(','));
-    },
-  },
-};
-</script>

src/views/suport/flow/index.vue

@@ -158,7 +158,7 @@
           <el-input v-model="form.flowEncode" type="textarea" placeholder="请输入内容" />
         </el-form-item>
         <div>
-          <chartByD3 @handleEncode="handleFlowEncode" :codes="form.flowEncode" />
+          <binaryTree @handleEncode="handleFlowEncode" :codes="form.flowEncode" />
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -215,11 +215,11 @@
 <script>
 import { listFlow, getInfo, delFlow, addFlow, updateFlow } from "@/api/suport/flow";
 import { getToken } from "@/utils/auth";
-import chartByD3 from "@/views/knowledge/search/chartByD3.vue";
+import binaryTree from "@/views/knowledge/search/binaryTree.vue";
 
 export default {
   name: "Flow",
-  components: { chartByD3 },
+  components: { binaryTree },
   data() {
     return {
       // 遮罩层