推荐系统初始化

web/src/components/dialog/TreeGraphInfo2.vue

@@ -0,0 +1,244 @@
+<template>
+  <!-- 树形图谱 -->
+  <el-tabs v-model="activeName" @tab-click="handleTabClick">
+    <el-tab-pane label="树形图谱" name="first">
+      <div id="container"></div>
+    </el-tab-pane>
+    <el-tab-pane label="统计信息" name="second">
+
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import G6 from '@antv/g6';
+import request from "@/utils/request";
+import {tripletToTree} from "@/utils/common";
+
+let data;
+var vm;
+var graph;
+export default {
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  created() {
+    vm = this;
+  },
+  mounted() {
+
+  },
+  methods: {
+    queryTreeData(ontologyId) {
+      if (graph) {
+        return;
+      }
+      request({
+        url: `/nebula_model/findtreebyontologyid/${ontologyId}`,
+        method: 'post',
+        data: {}
+      }).then(res => {
+        data = {
+          id: "root",
+          properties: {tagName: '根节点'},
+          children: tripletToTree({
+            nodes: res.data.nodes,
+            relations: res.data.relations,
+            idName: 'vid',
+            sourceName: 'srcId',
+            targetName: 'dstId'
+          })
+        };
+        vm.initTree();
+      });
+
+    },
+    destroyTree() {
+      if (graph) {
+        graph = null;
+        document.getElementById('container').innerHTML = "";
+      }
+    },
+    initTree() { // 初始化数据
+      const container = document.getElementById('container');
+      const width = container.scrollWidth;
+      const height = (container.scrollHeight || 800) - 20;
+      graph = new G6.TreeGraph({
+        container: 'container',
+        width,
+        height,
+        modes: {
+          default: [
+            'drag-canvas',
+            'zoom-canvas',
+            {
+              type: 'drag-node',
+              enableDelegate: true,
+            },
+          ],
+        },
+        defaultNode: {
+          size: 25,
+          anchorPoints: [
+            [0, 0.5],
+            [1, 0.5],
+          ],
+          style: {
+
+            fill: '#68BDF6',
+            stroke: '#4b4b4b',
+          },
+        },
+        defaultEdge: {
+          type: 'cubic-horizontal',
+          style: {
+            stroke: '#A3B1BF',
+          },
+        },
+        nodeStateStyles: {
+          closest: {
+            fill: '#004f80',
+          },
+        },
+        layout: {
+          type: 'compactBox',
+          direction: 'LR',
+          getId: function getId(d) {
+            return d.id;
+          },
+          getHeight: function getHeight() {
+            return 16;
+          },
+          getWidth: function getWidth() {
+            return 16;
+          },
+          getVGap: function getVGap() {
+            return 10;
+          },
+          getHGap: function getHGap() {
+            return 100;
+          },
+        },
+      });
+
+      graph.node(function (node) {
+        node.tagName = (node.properties && node.properties.tagName) ? node.properties.tagName : '未命名';
+        return {
+          label: node.tagName,
+          labelCfg: {
+            offset: 10,
+            position: node.children && node.children.length > 0 ? 'left' : 'right',
+          },
+        };
+      });
+
+      graph.data(data);
+      graph.render();
+      graph.fitView();
+
+      let minDisNode;
+      graph.on('node:dragstart', (e) => {
+        minDisNode = undefined;
+      });
+      graph.on('node:drag', (e) => {
+        minDisNode = undefined;
+        const item = e.item;
+        const model = item.getModel();
+        const nodes = graph.getNodes();
+        let minDis = Infinity;
+        nodes.forEach((inode) => {
+          graph.setItemState(inode, 'closest', false);
+          const node = inode.getModel();
+          if (node.id === model.id) return;
+          const dis = (node.x - e.x) * (node.x - e.x) + (node.y - e.y) * (node.y - e.y);
+          if (dis < minDis) {
+            minDis = dis;
+            minDisNode = inode;
+          }
+        });
+        // console.log('minDis', minDis, minDisNode);
+        if (minDis < 2000) graph.setItemState(minDisNode, 'closest', true);
+        else minDisNode = undefined;
+      });
+
+      graph.on('node:dragend', (e) => {
+        if (!minDisNode) {
+          // descriptionDiv.innerHTML = '失败,拖动的节点附近没有节点';
+          return;
+        }
+        const item = e.item;
+        const id = item.getID();
+        const data = graph.findDataById(id);
+        // if the minDisNode is a descent of the dragged node, return
+        let isDescent = false;
+        const minDisNodeId = minDisNode.getID();
+        console.log('dragend', minDisNodeId, isDescent, data, id);
+
+        G6.Util.traverseTree(data, (d) => {
+          if (d.id === minDisNodeId) isDescent = true;
+        });
+        if (isDescent) {
+          vm.$message.error("目标节点是被拖动节点的后代");
+          return;
+        }
+        graph.removeChild(id);
+
+        setTimeout(() => {
+          const newParentData = graph.findDataById(minDisNodeId);
+          let newChildren = newParentData.children;
+          if (newChildren) newChildren.push(data);
+          else newChildren = [data];
+          graph.updateChildren(newChildren, minDisNodeId);
+          vm.$message.success("操作成功");
+        }, 600);
+      });
+
+      if (typeof window !== 'undefined')
+        window.onresize = () => {
+          if (!graph || graph.get('destroyed')) return;
+          if (!container || !container.scrollWidth || !container.scrollHeight) return;
+          graph.changeSize(container.scrollWidth, container.scrollHeight - 20);
+        };
+    },
+    destroyTreeGraph() {
+
+    },
+    handleTabClick(tab, event) {
+      console.log(tab, event);
+    },
+    submitUpdate() { // 更新
+      vm.$parent.submitUpdateEdge(vm.modifyCmd);
+    },
+  }
+}
+
+</script>
+
+<style>
+
+.node-box {
+  overflow: hidden;
+}
+
+.form-title {
+  font-size: 16px;
+  margin: 15px 0;
+
+}
+
+.add-attribute-box {
+  margin-top: 10px;
+  color: #409EFF;
+  cursor: pointer;
+  text-align: right;
+}
+
+.info-content > div {
+  margin-bottom: 5px;
+  line-height: 20px;
+}
+
+
+</style>