vue.js 流程图根据后端数据渲染

<!--  -->
<template>
  <div class="max">
    <vue2-org-tree
      :data="data"
      :render-content="renderContent"
      :label-class-name="labelClassName"
      :horizontal="!horizontal"
      :collapsable="collapsable"
      @on-expand="onExpand"
      @on-node-click="onNodeClick"
    />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import request from "@/utils/request";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      horizontal: true, //横版 竖版
      collapsable: true,
      scrollTreeStyle: "width:100%;",
      labelClassName: "tree-class",
      data: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toggleExpand(data, val) {
      var _this = this;
      if (data.level == "1" || data.level == "2") {
        if (Array.isArray(data)) {
          data.forEach(function (item) {
            _this.$set(item, "expand", val);
            if (item.children) {
              _this.toggleExpand(item.children, val);
            }
          });
        } else {
          this.$set(data, "expand", val);
          if (data.children) {
            _this.toggleExpand(data.children, val);
          }
        }
      }
    },
    async getData() {
      let res = await request({
        url: `/api/example/EnergyModelController/model`,
        method: "get",
      });
      console.log(res.data, 456);
      this.data = res.data.tree;
      this.toggleExpand(this.data, true);
    },
    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    onNodeClick(listData) {
      console.log(listData);
    },
    //渲染节点
    renderContent(h, data) {
      console.log(h, data, 123);
      if (data.level == "1") {
        let str = (
          <div class="node">
            <div class="node-title">{data.label}</div>
            <div class="node-content-group">
              {data.info.map((item) => (
                <div class="item">
                  <span>{item.name}</span>
                  <span>Ia：71.88A</span>
                </div>
              ))}
            </div>
          </div>
        );
        return str;
      } else {
        return (
          <div class="node">
            <div class="node-title">{data.label}</div>
            <div class="node-content">
              <span>Ia：71.88A</span>
              <span>Ib：68.76A </span>
              <span>Ic：69.84A</span>
              <span>P：5260.40 kW</span>
            </div>
          </div>
        );
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' >
//@import url(); 引入公共css类
.max {
  height: calc(100vh - 100px);
}
.org-tree-container {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
.tree-class {
  color: #fff;
  background-color: skyblue;
}
.org-tree-node-label-inner {
  padding: 0 !important;
}
.node {
  //   width: 220px;
  .node-title {
    height: 40px;
    line-height: 40px;
    background: #000;
    color: #fff;
    font-size: 18px;
    text-align: center;
  }
  .node-content {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    span {
      margin: 5px;
      font-size: 12px;
    }
  }
  .node-content-group {
    display: flex;

    padding: 5px;
    .item {
      display: flex;
      flex-direction: column;
      margin: 5px 0;
    }
    span {
      margin: 5px;
      font-size: 12px;
    }
  }
}
</style>