体系搜索

2023-10-13 16:58:22 +08:00
parent 912c68a8cd
commit 3e961a66ef
3 changed files with 391 additions and 0 deletions
@@ -121,6 +121,11 @@
                path: '/enterpriseStandardDatabase',
                menuId: '01ed8f752748227777b3572d56ee9ab5'
              },
+              {
+                title: '体系搜索',
+                path: '/systemSearch',
+                menuId: 'b7092983b5db427402388617d3e64106'
+              },
              {
                title: '企标计划',
                path: '/enterpriseStandardPlan',
@@ -0,0 +1,375 @@
+<template>
+    <div id="mountNode" ref="mountNode"></div>
+</template>
+
+<script>
+import G6 from '@antv/g6';
+export default {
+  name: "systemSearch",
+  data(){
+    return {
+      data: {}
+      // data: {
+      //   // 点集
+      //   nodes: [
+      //     {
+      //       id: 'node1', // String，该节点存在则必须，节点的唯一标识
+      //       // x: 100, // Number，可选，节点位置的 x 值
+      //       // y: 200, // Number，可选，节点位置的 y 值
+      //       label: '起始点', // 节点文本,可选
+      //     },
+      //     {
+      //       id: 'node2', // String，该节点存在则必须，节点的唯一标识
+      //       // x: 300, // Number，可选，节点位置的 x 值
+      //       // y: 200, // Number，可选，节点位置的 y 值
+      //       label: '目标点',
+      //     },
+      //   ],
+      //   // 边集
+      //   edges: [
+      //     {
+      //       source: 'node1', // String，必须，起始点 id
+      //       target: 'node2', // String，必须，目标点 id
+      //       label: '我是连线', // 边的文本,可选
+      //     },
+      //   ],
+      // }
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData () {
+      this.$http.get('wg_work_group/researchData', {
+        type: '0'
+      }, {
+        _this: this
+      }, res => {
+        if (res.ok) {
+          this.data = res.data
+          this.initGraph()
+        }
+      })
+    },
+    initGraph(){
+      const that = this
+       // 实例化 minimap 插件
+      const minimap = new G6.Minimap({
+         size: [100, 100],
+         className: 'minimap',
+         type: 'delegate',
+      });
+
+      const tooltip = new G6.Tooltip({
+        offsetX: 10,
+        offsetY: 20,
+        getContent(e) {
+          const cfg = e.item.getModel()
+          const outDiv = document.createElement('div');
+          // outDiv.style.maxWidth = '200px';
+          outDiv.innerHTML = `
+            <div>${cfg.name}( 100/100/100 )</div>`
+          return outDiv
+        },
+        itemTypes: ['node']
+      });
+
+      const mainColor = '#3170A7'
+
+      G6.registerNode('card-node', {
+         draw: function drawShape(cfg, group) {
+           const r = 2;
+           const color = '#5B8FF9';
+           const w = cfg.size[0];
+           const h = cfg.size[1];
+           const shape = group
+           group.addShape('rect', {
+             // 容器
+             attrs: {
+               x: 0,
+               y: 0,
+               width: w,
+               height: h,
+               stroke: mainColor,
+               radius: r,
+               fill: '#fff',
+               cursor: 'pointer',
+             },
+             name: 'box',
+             // draggable: true,
+           });
+
+           // 文字
+           group.addShape('text', {
+             attrs: {
+               textBaseline: 'top',
+               x: w / 2,
+               y:  (h - 10) / 2,
+               fontSize: 12,
+               lineHeight: 20,
+               text: cfg.name.length > 5 ? `${cfg.name.slice(0,5)}...( 100/100/100 )` : `${cfg.name}( 100/100/100 )`,
+               fill: '#000',
+               textAlign: 'center',
+               cursor: 'pointer',
+             },
+             name: 'text',
+           });
+
+           cfg.children &&
+           group.addShape('marker', {
+             attrs: {
+               x: w / 2,
+               y: h,
+               r: 6,
+               cursor: 'pointer',
+               symbol: G6.Marker.collapse,
+               stroke: '#666',
+               lineWidth: 1,
+               fill: '#fff',
+             },
+             name: 'collapse-icon',
+           });
+           if (cfg.level === '0') {
+             const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
+             rect.attr('fill', mainColor)
+             rect.attr('stroke', mainColor) // 边框颜色
+
+             const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
+             text.attr('fill','#fff')
+           } else if (cfg.level === '1') {
+             const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
+             rect.attr('fill', '#eee')
+             rect.attr('stroke', '#eee')
+
+             const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
+             text.attr('fill','#000')
+           }
+           return shape;
+         },
+         setState(name, value, item) {
+           if (name === 'collapsed') {
+             const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
+             const icon = value ? G6.Marker.expand : G6.Marker.collapse;
+             marker.attr('symbol', icon);
+           }
+         },
+       });
+
+      G6.registerEdge(
+          'step-line',
+          {
+            getControlPoints: function getControlPoints(cfg) {
+              const startPoint = cfg.startPoint;
+              const endPoint = cfg.endPoint;
+              return [
+                startPoint,
+                {
+                  x: startPoint.x,
+                  y: endPoint.y - 80,
+                },
+                {
+                  x: endPoint.x,
+                  y: endPoint.y - 80,
+                },
+                {
+                  ...endPoint,
+                  y: endPoint.y - 20
+                }
+              ];
+            },
+          },
+          'polyline',
+      );
+
+
+      const graph = new G6.TreeGraph({
+        container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
+        width: this.$refs.mountNode.scrollWidth, // Number，必须，图的宽度
+        height: this.$refs.mountNode.scrollHeight, // Number，必须，图的高度
+        // fitView: true, // 设置是否将图适配到画布中；
+        // fitViewPadding: [20, 40, 50, 20], // 画布上四周的留白宽度
+        // 节点在默认状态下的样式配置（style）和其他配置
+        defaultNode: {
+          type:'card-node',
+          size: [160,30], // 节点大小
+          // 线的连接位置
+          anchorPoints: [
+            [0.5, 0],
+            [0.5, 1],
+          ],
+          // width: 100,
+          // height: 40,
+          // 节点的其他配置
+          // 节点样式配置
+          // style: {
+          //   fill: '#fff', // 节点填充色
+          //   stroke: '#333', // 节点描边色
+          //   lineWidth: 1, // 节点描边粗细
+          //   radius: 4,
+          //   cursor:'pointer'
+          // },
+          // 节点上的标签文本配置
+          labelCfg: {
+            // 节点上的标签文本样式配置
+            // style: {
+            //   fill: '#000', // 节点标签文字颜色
+            // },
+          },
+          //  四个圆的样式可以在这里指定
+          linkPoints: {
+            // top: true,
+            // bottom: true,
+            // left: true,
+            // right: true,
+
+          },
+        },
+        // 边在默认状态下的样式配置（style）和其他配置
+        defaultEdge: {
+          type: 'step-line',
+          // type: 'line',
+          // 边样式配置
+          style: {
+            radius: 20,
+            opacity: 0.6, // 边透明度
+            stroke: '#A3B1BF', // 边描边颜色
+            // endArrow: true
+            endArrow: {
+              path: G6.Arrow.vee(5, 10, 5), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
+              d: 5,
+              opacity: 0.6, // 边透明度
+              stroke: '#A3B1BF', // 边描边颜色
+              fill: '#A3B1BF'
+            },
+          },
+          // 边上的标签文本配置
+          // labelCfg: {
+          //   autoRotate: true, // 边上的标签文本根据边的方向旋转
+          // },
+        },
+        // defaultEdge: {
+        //   type: 'polyline',
+        //   style: {
+        //     // radius: 20,
+        //     offset: 80,
+        //     endArrow: true,
+        //     lineWidth: 1,
+        //     stroke: '#C2C8D5',
+        //   },
+        // },
+        // 节点不同状态下的样式集合
+        nodeStateStyles: {
+        //   // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
+        //   hover: {
+        //     fill: 'lightsteelblue',
+        //   },
+        //   // 鼠标点击节点，即 click 状态为 true 时的样式
+        //   click: {
+        //     stroke: '#000',
+        //     lineWidth: 3,
+        //   },
+        },
+        // 边不同状态下的样式集合
+        edgeStateStyles: {
+        //   // 鼠标点击边，即 click 状态为 true 时的样式
+        //   click: {
+        //     stroke: 'steelblue',
+        //   },
+        },
+        // 布局方式
+        layout: {
+          // Object，可选，布局的方法及其配置项，默认为 random 布局。
+          type: 'compactBox', // 布局类型
+          direction: 'TB',
+          getVGap: () => 100,
+          getHGap: () => 75,
+          // nodeSep: 150,
+          // rankSep: 150,
+          // preventOverlap: true, // 防止节点重叠
+          // nodeSize: 30        // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。
+          // linkDistance: 200, // 指定边距离为100
+        },
+        // 交互
+        modes: {
+          default: ['drag-canvas', 'zoom-canvas'], // 允许拖拽画布、放缩画布、拖拽节点
+        },
+        // plugins: [minimap], // 将 minimap 实例配置到图上
+        plugins: [tooltip],
+      });
+      this.setCollapse()
+      graph.data(this.data); // 读取 Step 2 中的数据源到图上
+      graph.render(); // 渲染图
+       // graph.fitView()
+       graph.fitCenter()
+      this.initGraphEvent(graph)
+    },
+    setCollapse () {
+      G6.Util.traverseTree(this.data, function (item) {
+        if (item.level >= 2) {
+          //collapsed为true时默认收起
+          item.collapsed = true
+        }
+      })
+      // graph.layout();
+    },
+    initGraphEvent (graph) {
+      // 鼠标进入节点
+      // graph.on('node:mouseenter', (e) => {
+      //   console.log('node:mouseenter')
+      //   const nodeItem = e.item; // 获取鼠标进入的节点元素对象
+      //   graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
+      // });
+
+      // 鼠标离开节点
+      // graph.on('node:mouseleave', (e) => {
+      //   console.log('node:mouseleave')
+      //   const nodeItem = e.item; // 获取鼠标离开的节点元素对象
+      //   graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
+      // });
+
+      // 点击节点
+      graph.on('node:click', (e) => {
+        const clickNodes = graph.findAllByState('node', 'click');
+        clickNodes.forEach((cn) => {
+          graph.setItemState(cn, 'click', false);
+        });
+
+        if (e.target.get('name') === 'collapse-icon') {
+          const nodeItem = e.item; // 获取被点击的节点元素对象
+          e.item.getModel().collapsed = !e.item.getModel().collapsed;// 设置是否展开
+          graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);// 设置当前节点的 click 状态
+        } else {
+          console.log('打开窗口',e.item.getModel())
+          alert('node:click')
+        }
+
+        graph.layout();
+      });
+
+      // 点击边
+    //   graph.on('edge:click', (e) => {
+    //     console.log('edge:click')
+    //     // 先将所有当前是 click 状态的边置为非 click 状态
+    //     const clickEdges = graph.findAllByState('edge', 'click');
+    //     clickEdges.forEach((ce) => {
+    //       graph.setItemState(ce, 'click', false);
+    //     });
+    //     const edgeItem = e.item; // 获取被点击的边元素对象
+    //     graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
+    //   });
+    }
+  },
+}
+</script>
+
+<style scoped>
+#mountNode{
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.minimap{
+
+}
+</style>
@@ -3714,6 +3714,17 @@ const routes = [
          parentPath: '/enterpriseStandardDatabase'
        }
      },
+      {
+        path: '/systemSearch',
+        name: 'systemSearch',
+        component: () =>
+            import('@/pages/regulatoryRepository/systemSearch'),
+        meta: {
+          requireAuth: true,
+          title: '体系搜索',
+          menuId: 'b7092983b5db427402388617d3e64106'
+        }
+      },
      // 标准法规库 - 标准法规清单
      {
        path: '/accessStandardsAndRegulations',