pbl-teacher-table/src/components/pages/aiAddCourse/jsmind2.vue

<template>
  <!-- 普通菜单 -->
  <div class="jsmind_layout">
    <div class="noMind" v-if="mindV">
      <span>暂无数据</span>
    </div>
    <div :id="jsmindId" ref="container" class="jsmind_container"></div>
  </div>
</template>

<script>
import "jsmind/style/jsmind.css";
import jsMind from "jsmind/js/jsmind.js";
window.jsMind = jsMind;

require("jsmind/js/jsmind.draggable.js");
require("jsmind/js/jsmind.screenshot.js");
export default {
  props: {
    showBar: {
      // 是否显示工具栏，显示启用编辑
      type: Boolean,
      default: true,
    },
    theme: {
      // 主题
      type: String,
      default: "primary",
    },
    lineColor: {
      // 线条颜色
      type: String,
      default: "skyblue",
    },
    mindData: {
      type: Object,
      default: {},
    },
    jsmindId: {
      type: String,
      default: "jsmind_container",
    },
  },
  data() {
    return {
      mindV: false,
      i: 0,
      mind: {},
      jm: null,
      isZoomIn: false,
      isZoomOut: false,
      level: 0,
      nodeOptions: [
        { value: 1, label: "展开到一级节点" },
        { value: 2, label: "展开到二级节点" },
        { value: 3, label: "展开到三级节点" },
        { value: 0, label: "展开全部节点" },
        { value: -1, label: "隐藏全部节点" },
      ],
      themeOptions: [
        { value: "default", label: "default" },
        { value: "primary", label: "primary" },
        { value: "warning", label: "warning" },
        { value: "danger", label: "danger" },
        { value: "success", label: "success" },
        { value: "info", label: "info" },
        { value: "greensea", label: "greensea" },
        { value: "nephrite", label: "nephrite" },
        { value: "belizehole", label: "belizehole" },
        { value: "wisteria", label: "wisteria" },
        { value: "asphalt", label: "asphalt" },
        { value: "orange", label: "orange" },
        { value: "pumpkin", label: "pumpkin" },
        { value: "pomegranate", label: "pomegranate" },
        { value: "clouds", label: "clouds" },
        { value: "asbestos", label: "asbestos" },
      ],
      localTheme: this.theme,
      dialogVisible: false,
      nodeOption: {
        content: "",
        bgColor: "",
        fontColor: "",
        fontSize: "",
        fontWeight: "",
        fontStyle: "",
      },
    };
  },
  watch: {
    mindData: {
      handler: function (cur, old) {
        console.log(cur.task);
        let data = this.setMindData(cur)
        this.mind = data;
        this.$forceUpdate()
        if (data.data.length) {
          if (data.data[0].topic === "" && data.data.length === 1) {
            this.mindV = true;
          } else {
            this.mindV = false;
          }
          setTimeout(() => {
            if (this.jm) {
              this.jm.show(this.mind);
            } else {
              this.open_empty();
            }
          }, 1000);
        }
      },
      deep: true, //对象内部的属性监听，也叫深度监听
    },
  },
  created() { },
  mounted() {
    this.getData();
    // this.mouseWheel();
  },
  methods: {
    refresh(){
      // console.log(cur.task);
      let data = this.setMindData(this.mindData)
      this.mind = data;
      this.$forceUpdate()
      if (data.data.length) {
        if (data.data[0].topic === "" && data.data.length === 1) {
          this.mindV = true;
        } else {
          this.mindV = false;
        }
        setTimeout(() => {
          if (this.jm) {
            this.jm.show(this.mind);
          } else {
            this.open_empty();
          }
        }, 1000);
      }
    },
    beforeUpload(file) {
      // 上传文件之前钩子
      if (file) {
        jsMind.util.file.read(file, (jsmindData) => {
          const mind = jsMind.util.json.string2json(jsmindData);
          if (mind) {
            this.jm.show(mind);
            this.$message({ type: "success", message: "打开成功" });
          } else {
            this.prompt_info("不能打开mindmap文件");
          }
        });
      } else {
        this.prompt_info("请先选择文件");
        return false;
      }
    },
    upload() { },
    getData() {
      //   this.$API({
      //     name: "getMind",
      //   })
      //     .then((res) => {
      //       this.mind = res.data;
      //       this.open_empty();
      //     })
      //     .catch((error) => {
      //       this.$message.error(error);
      //     });
      let data = this.setMindData(this.mindData)
      this.mind = data;
      // debugger
      this.$forceUpdate()
      if (data.data.length) {
        if (data.data[0].topic === "" && data.data.length === 1) {
          this.mindV = true;
        } else {
          this.mindV = false;
        }
        setTimeout(() => {
          if (this.jm) {
            this.jm.show(this.mind);
          } else {
            this.open_empty();
          }
        }, 1000);
      }
    },
    setMindData(json) {
      let data = {
        meta: {
          name: json.task,
          author: "dd@163.com",
          version: "0.2",
        },
        format: "node_array",
        data: []
      };
      data.data.push({ id: "root", isroot: true, topic: json.task });
      console.log(`111`, json.task);
      let elist = []
      let toolChoose = json.toolChoose;
      for (let i = 0; i < toolChoose.length; i++) {
        if(toolChoose[i].eList && toolChoose[i].eList.length){
          let list = toolChoose[i].eList.map(item=>{
            return {
              ...item,
              index: i
            }
          })
          elist.push(...list)
        }
      }
      if(elist.length){
        let listName = []
      for(var i = 0;i<elist.length;i++){
        let item = elist[i]
        if(listName.indexOf(item.target) == -1){
          listName.push(item.target)
        }
      }
      let _eJson = {}
      for(var i = 0;i<listName.length;i++){
        let listItem = listName[i]
        _eJson[listItem] = {
          child: {}
        }
        for(var j = 0;j<elist.length;j++){
          let item2 = elist[j]
          if(item2.target == listItem){
            if(_eJson[listItem].child[item2.detail]){
              if(_eJson[listItem].child[item2.detail].child.indexOf(item2.index) == -1){
                _eJson[listItem].child[item2.detail].child.push(item2.index)
              }
            }else{
              _eJson[listItem].child[item2.detail] = {
                child: [item2.index]
              }
            }
          }
        }
      }
      let _JsonName = Object.keys(_eJson)
      for(var i = 0;i<_JsonName.length;i++){
        let item = _eJson[_JsonName[i]]
        data.data.push({
          id: _JsonName[i],
          parentid: "root",
          topic: _JsonName[i],
        })
        let _eJsonz = Object.keys(item.child)
        let _e3 = item.child
        for(var j = 0;j<_eJsonz.length;j++){
          let item2 = _e3[_eJsonz[j]]
          data.data.push({
            id: _eJsonz[j],
            parentid: _JsonName[i],
            topic: _eJsonz[j],
          })
          // let _eJsonz2 = Object.keys(item2.child)
          let _e4 = item2.child
          // for(var z = 0;z<_eJsonz2.length;z++){
            // let item3 = _e4[_eJsonz2[z]]
          for(var zz = 0;zz<_e4.length;zz++){
            data.data.push({
              // id: `${_eJsonz[j]}-${_eJsonz2[z]}-${zz}`,
              id: `${_eJsonz[j]}-${zz}`,
              parentid: _eJsonz[j],
              topic: `工具${_e4[zz] + 1}`,
            })
          }

          // }
          }
        }
      }

      console.log(json.task, data);
      return data
    },
    open_empty() {
      const options = {
        container: this.jsmindId, // 必选，容器ID
        editable: this.showBar, // 可选，是否启用编辑
        theme: this.localTheme, // 可选，主题
        view: {
          line_width: 2, // 思维导图线条的粗细
          // line_color: this.lineColor, // 思维导图线条的颜色
        },
        shortcut: {
          enable: true, // 禁用快捷键
        },
        layout: {
          hspace: 20, // 节点之间的水平间距
          vspace: 10, // 节点之间的垂直间距
          pspace: 13, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        },
        mode: "side", // 显示模式，子节点只分布在根节点右侧
      };
      this.jm = jsMind.show(options, this.mind);
      // 改变窗口大小重置画布
      window.onresize = () => {
        this.jm.resize();
      };
      this.getDepth(this.jm.mind.root, 1);
      this.$forceUpdate();
      setTimeout(()=>{
        this.jm.show(this.mind);
      },1000)
    },
    // 获取层级数 i
    getDepth(obj, k) {
      this.i = Math.max(this.i, k);
      if (obj.children) {
        obj.children.forEach((v) => {
          this.getDepth(v, k + 1);
        });
      }
    },
    save_nodearray_file() {
      const mindData = this.jm.get_data("node_array");
      const mindName = mindData.meta.name;
      const mindStr = jsMind.util.json.json2string(mindData);
      jsMind.util.file.save(mindStr, "text/jsmind", mindName + ".jm");
    },
    screen_shot() {
      this.jm.screenshot.shootDownload();
    },
    expand_all() {
      this.jm.expand_all();
    },
    collapse_all() {
      this.jm.collapse_all();
    },
    expand_to_level(num) {
      switch (num) {
        case -1:
          this.collapse_all();
          break;
        case 0:
          this.expand_all();
          break;
        default:
          this.jm.expand_to_depth(num);
          break;
      }
    },
    zoomIn() {
      if (this.jm.view.zoomIn()) {
        this.isZoomOut = false;
      } else {
        this.isZoomIn = true;
      }
    },
    zoomOut() {
      // debugger;
      if (this.jm.view.zoomOut()) {
        this.isZoomIn = false;
      } else {
        this.isZoomOut = true;
      }
    },
    prompt_info(msg) {
      this.$message({ type: "warning", message: msg });
    },
    get_nodearray_data() {
      const mindData = this.jm.get_data("node_array");
      const mindString = jsMind.util.json.json2string(mindData);
      this.$message({ type: "info", message: mindString });
    },
    set_theme(themeName) {
      this.jm.set_theme(themeName);
    },
    scrollFunc(e) {
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
          this.zoomIn();
        } else {
          this.zoomOut();
        }
      } else if (e.detail) {
        if (e.detail > 0) {
          this.zoomIn();
        } else {
          this.zoomOut();
        }
      }
      this.jm.resize();
    },
    // 鼠标滚轮放大缩小
    mouseWheel() {
      if (document.addEventListener) {
        document.addEventListener("domMouseScroll", this.scrollFunc, false);
      }
      this.$refs.container.onmousewheel = this.scrollFunc;
    },
    // 新增节点
    addNode() {
      let selectedNode = this.jm.get_selected_node();
      if (!selectedNode) {
        this.$message({ type: "warning", message: "请先选择一个节点!" });
        return;
      }
      let nodeid = jsMind.util.uuid.newid();
      let topic = "new Node";
      let newNode = this.jm.add_node(selectedNode, nodeid, topic);
      if (newNode) {
        this.jm.select_node(nodeid);
        this.jm.begin_edit(nodeid);
        this.getDepth(this.jm.mind.root, 1);
      }
    },
    // 新增兄弟节点
    addBrotherNode() {
      let selectedNode = this.jm.get_selected_node();
      if (!selectedNode) {
        this.$message({ type: "warning", message: "请先选择一个节点!" });
        return;
      } else if (selectedNode.isroot) {
        this.$message({
          type: "warning",
          message: "不能在根节点添加，请重新选择节点!",
        });
        return;
      }
      let nodeid = jsMind.util.uuid.newid();
      let topic = "new Node";
      let newNode = this.jm.insert_node_after(selectedNode, nodeid, topic);
      if (newNode) {
        this.jm.select_node(nodeid);
        this.jm.begin_edit(nodeid);
      }
    },
    // 获取选中标签的 ID
    get_selected_nodeid() {
      let selectedNode = this.jm.get_selected_node();
      if (selectedNode) {
        return selectedNode.id;
      } else {
        return null;
      }
    },
    // 删除节点
    removeNode() {
      let selectedId = this.get_selected_nodeid();
      if (!selectedId) {
        this.$message({
          type: "warning",
          message: "请先选择一个节点!",
        });
        return;
      }
      this.jm.remove_node(selectedId);
      this.i = 0;
      this.getDepth(this.jm.mind.root, 1);
    },
    // 编辑节点
    editNode() {
      let selectedId = this.get_selected_nodeid();
      if (!selectedId) {
        this.$message({ type: "warning", message: "请先选择一个节点!" });
        return;
      }
      let nodeObj = this.jm.get_node(selectedId);
      this.nodeOption.content = nodeObj.topic;
      this.nodeOption.bgColor = nodeObj.data["background-color"];
      this.nodeOption.fontColor = nodeObj.data["foreground-color"];
      this.nodeOption.fontSize = nodeObj.data["font-size"];
      this.nodeOption.fontWeight = nodeObj.data["font-weight"];
      this.nodeOption.fontStyle = nodeObj.data["font-style"];
      this.dialogVisible = true;
    },
    sureEditNode() {
      let selectedId = this.get_selected_nodeid();
      this.jm.update_node(selectedId, this.nodeOption.content);
      this.jm.set_node_font_style(
        selectedId,
        this.nodeOption.fontSize,
        this.nodeOption.fontWeight,
        this.nodeOption.fontStyle
      );
      this.jm.set_node_color(
        selectedId,
        this.nodeOption.bgColor,
        this.nodeOption.fontColor
      );
      this.nodeOption = {
        content: "",
        bgColor: "",
        fontColor: "",
        fontSize: "",
        fontWeight: "",
        fontStyle: "",
      };
      this.dialogVisible = false;
    },
  },
  beforeDestroy() {
    // document.removeEventListener("domMouseScroll", this.scrollFunc, false);
  },
};
</script>

<style scoped>
.jsmind_layout {
  display: flex;
  flex-direction: column;
  /* width: 700px; */
  height: calc(100%);
  /* height: 500px; */
  /* margin: 15px 5px 0 0; */
  /* background: #fff; */
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  width: 100%;
  width: 100%;
  background: #f1f1f1;
  border-radius: 5px;
}

.jsmind_title {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 20px;
  color: #8d8d8d;
}

.noMind {
  /* position: absolute; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background: #fff;
}

.jsmind_layout .jsmind_toolbar {
  width: 100%;
  padding: 0 10px 10px 10px;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #f8f9fa;
  box-shadow: 0 0 4px #b8b8b8;
}

.jsmind_layout>>>.el-button--medium,
.jsmind_layout>>>.el-input--medium {
  margin-top: 10px;
}

.jsmind_layout #jsmind_container {
  /* flex: 1 1 auto; */
  height: 100%;
}

.jsmind_layout .jsmind_container {
  /* flex: 1 1 auto; */
  height: 100%;
}

.jsmind_layout>>>.jsmind-inner {
  /* overflow: hidden auto !important; */
  /* height: auto; */
}

.jsmind_layout>>>.el-upload-list {
  display: none !important;
}

/* 隐藏滚动条 */
.jsmind_layout .jsmind-inner::-webkit-scrollbar {
  display: none;
}

.jsmind_layout .pad {
  margin-right: 10px;
}

.jsmind_layout .pad-left {
  margin-left: 10px;
}

.jsmind_layout>>>jmnode {
  white-space: inherit;
  word-wrap: break-word;
  max-width: 500px;
  max-height: 75px;
  overflow: auto;
}

.jsmind_layout>>>jmnode::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.jsmind_layout>>>jmnode::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
.jsmind_layout>>>jmnode::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgba(0, 0, 0, 0.1);
}

.jsmind_layout>>>jmnode.selected {
  background-color: #b9b9b9;
  color: #fff;
  box-shadow: 2px 2px 8px #777;
}

.jsmind_layout>>>jmnode.selected {
  background-color: #b9b9b9;
  color: #fff;
  box-shadow: 2px 2px 8px #777;
}

.jsmind_layout>>>jmnode:hover {
  box-shadow: 2px 2px 8px #777;
}

.jsmind_layout .form-con {
  padding-top: 20px;
}

.jsmind_layout .ele-width {
  width: 96%;
}
</style>