Merge remote-tracking branch 'origin/mergeBranch' into mergeBranch

src/components/mindmap/custom.vue

@@ -2,7 +2,7 @@
   <div style="background:#f1f2f3;" id="full">
     <img style="width: 25px; height: 25px;float: right" v-if="!fullscreen" @click="enterFullscreen" src="@/assets/icons/amplify.svg" title="全屏">
     <img style="width: 25px; height: 25px;float: right" @click="backFullscreen" v-if="fullscreen" src="@/assets/icons/reduce.svg" title="还原">
-    <div id="container">
+    <div :style="contentStyle" id="container">
     </div>
   </div>
 </template>
@@ -260,13 +260,11 @@ G6.registerNode('card-node', {
     },
   },
   draw: (cfg, group) => {
-
+    //底框
     const config = getNodeConfig(cfg);
     const isRoot = cfg.dataType === 'root';
     const nodeUrl = cfg.nodeUrl;
-    /* the biggest rect */
-    let count = cfg.info?Object.getOwnPropertyNames(cfg.info).length:1
-    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64 * count , isRoot);
+    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64 + Number(25*cfg.infoSize) , isRoot);
 
     if (cfg.dataType !== 'root') {
       /* the type text */
@@ -285,125 +283,6 @@ G6.registerNode('card-node', {
       });
     }
 
-    if (cfg.ip) {
-      /* ip start */
-      /* ipBox */
-      const ipRect = group.addShape('rect', {
-        attrs: {
-          fill: nodeUrl ? null : '#FFF',
-          stroke: nodeUrl ? 'rgba(255,255,255,0.65)' : null,
-          radius: 2,
-          cursor: 'pointer',
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-container-shape',
-      });
-
-      /* ip */
-      const ipText = group.addShape('text', {
-        attrs: {
-          text: '666',
-          x: 0,
-          y: 19,
-          fontSize: 12,
-          textAlign: 'left',
-          textBaseline: 'middle',
-          fill: nodeUrl ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.65)',
-          cursor: 'pointer',
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-text-shape',
-      });
-
-      const ipBBox = ipText.getBBox();
-      /* the distance from the IP to the right is 12px */
-      ipText.attr({
-        x: 224 - 12 - ipBBox.width,
-      });
-      /* ipBox */
-      ipRect.attr({
-        x: 224 - 12 - ipBBox.width - 4,
-        y: ipBBox.minY - 5,
-        width: ipBBox.width + 8,
-        height: ipBBox.height + 10,
-      });
-
-      /* a transparent shape on the IP for click listener */
-      group.addShape('rect', {
-        attrs: {
-          stroke: '',
-          cursor: 'pointer',
-          x: 224 - 12 - ipBBox.width - 4,
-          y: ipBBox.minY - 5,
-          width: ipBBox.width + 8,
-          height: ipBBox.height + 10,
-          fill: '#fff',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-box',
-      });
-
-      /* copyIpLine */
-      group.addShape('rect', {
-        attrs: {
-          x: 194,
-          y: 7,
-          width: 1,
-          height: 24,
-          fill: '#E3E6E8',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-line',
-      });
-      /* copyIpBG */
-      group.addShape('rect', {
-        attrs: {
-          x: 195,
-          y: 8,
-          width: 22,
-          height: 22,
-          fill: '#FFF',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-bg',
-      });
-      /* copyIpIcon */
-      group.addShape('image', {
-        attrs: {
-          x: 200,
-          y: 13,
-          height: 12,
-          width: 10,
-          img: 'https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-icon',
-      });
-      /* a transparent rect on the icon area for click listener */
-      group.addShape('rect', {
-        attrs: {
-          x: 195,
-          y: 8,
-          width: 22,
-          height: 22,
-          fill: '#FFF',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-box',
-        tooltip: 'Copy the IP',
-      });
-
-      /* ip end */
-    }
-
     /* name */
     group.addShape('text', {
       attrs: {
@@ -428,7 +307,7 @@ G6.registerNode('card-node', {
         text: fittingString(cfg.value, 243 - 50, 14),
         x: 19,
         y: 45,
-        fontSize: 14,
+        fontSize: 16,
         textAlign: 'left',
         textBaseline: 'middle',
         fill: config.fontColor,
@@ -437,7 +316,26 @@ G6.registerNode('card-node', {
       // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
       name: 'bottom-text-shape',
     });
-
+    if (cfg.infoSize > 0) {
+      Object.keys(cfg.info).forEach((key,index) => {
+        console.log(key, cfg.info[key],index);
+        group.addShape('text', {
+          attrs: {
+            text: fittingString(String(cfg.info[key]), 243 - 50, 14),
+            x: 19,
+            y: 65 + (25*index) ,
+            fontSize: 12,
+            textAlign: 'left',
+            textBaseline: 'middle',
+            fill: config.fontColor,
+            cursor: 'pointer',
+          },
+          // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+          name: 'bottom-text-shape',
+        });
+      });
+    }
+    
     if (nodeUrl) {
       group.addShape('text', {
         attrs: {
@@ -462,10 +360,10 @@ G6.registerNode('card-node', {
   setState: nodeBasicMethod.setState,
 });
 export default {
-  props:['id'],
+  props:['id','contentStyle'],
   data () {
     return {
-      fullscreen:false
+      fullscreen:false,
     }
   },
   mounted () {
@@ -485,7 +383,8 @@ export default {
         var elNode = {
           id: node['name'],
           nodeid:node['id'],
-          info:node['info'],
+          info:node['info']?node['info']:{},
+          infoSize:node['infoSize']?node['infoSize']:1,
           value:node['labor']?node['labor'] !== node['name']?node['labor']:'-':'-',
           children: [],
           nodeUrl:HASLINKS.includes(node['name'])?'123':null
@@ -550,6 +449,8 @@ export default {
       graph.data(this.createMenu([res.data])[0]);
       graph.render();
       graph.fitView();
+      
+      
       graph.on('node:click', evt => {
         const item = evt.item;
         console.log(item)
@@ -607,8 +508,8 @@ export default {
 
 </script>
 <style>
-#container{
-  height: calc(100vh - 500px);
+/* #container{
+  height: calc(100vh);
   width: 100vw;
-}
+} */
 </style>

src/components/mindmap/index.vue

@@ -6,9 +6,9 @@
       append-to-body
       size="60%"
       :with-header="false">
-      <custom ref="custom" v-if="name === 'custom'" :id="id"/>
-      <project ref="project" v-else-if="name === 'project'" :id="id"/>
-      <saler ref="saler" v-else :id="id"/>
+      <custom :contentStyle="{height:'100vh',width:'60vw'}" ref="custom" v-if="name === 'custom'" :id="id"/>
+      <project :contentStyle="{height:'100vh',width:'60vw'}" ref="project" v-else-if="name === 'project'" :id="id"/>
+      <saler :contentStyle="{height:'100vh',width:'60vw'}" ref="saler" v-else :id="id"/>
     </el-drawer>
 
   </div>
@@ -37,7 +37,10 @@ export default {
         switch (this.name) {
           case 'custom':
             console.log(this.$refs.custom)
-            this.$refs.custom.getData()
+            this.$nextTick(()=>{
+              this.$refs.custom.getData()
+            })
+            
             break;
           case 'project':
             console.log(this.$refs.project)

src/components/mindmap/project.vue

@@ -264,7 +264,7 @@ G6.registerNode('card-node', {
     const isRoot = cfg.dataType === 'root';
     const nodeUrl = cfg.nodeUrl;
     /* the biggest rect */
-    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64, isRoot);
+    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64 + Number(25*cfg.infoSize) , isRoot);
 
     if (cfg.dataType !== 'root') {
       /* the type text */
@@ -283,125 +283,6 @@ G6.registerNode('card-node', {
       });
     }
 
-    if (cfg.ip) {
-      /* ip start */
-      /* ipBox */
-      const ipRect = group.addShape('rect', {
-        attrs: {
-          fill: nodeUrl ? null : '#FFF',
-          stroke: nodeUrl ? 'rgba(255,255,255,0.65)' : null,
-          radius: 2,
-          cursor: 'pointer',
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-container-shape',
-      });
-
-      /* ip */
-      const ipText = group.addShape('text', {
-        attrs: {
-          text: '666',
-          x: 0,
-          y: 19,
-          fontSize: 12,
-          textAlign: 'left',
-          textBaseline: 'middle',
-          fill: nodeUrl ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.65)',
-          cursor: 'pointer',
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-text-shape',
-      });
-
-      const ipBBox = ipText.getBBox();
-      /* the distance from the IP to the right is 12px */
-      ipText.attr({
-        x: 224 - 12 - ipBBox.width,
-      });
-      /* ipBox */
-      ipRect.attr({
-        x: 224 - 12 - ipBBox.width - 4,
-        y: ipBBox.minY - 5,
-        width: ipBBox.width + 8,
-        height: ipBBox.height + 10,
-      });
-
-      /* a transparent shape on the IP for click listener */
-      group.addShape('rect', {
-        attrs: {
-          stroke: '',
-          cursor: 'pointer',
-          x: 224 - 12 - ipBBox.width - 4,
-          y: ipBBox.minY - 5,
-          width: ipBBox.width + 8,
-          height: ipBBox.height + 10,
-          fill: '#fff',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-box',
-      });
-
-      /* copyIpLine */
-      group.addShape('rect', {
-        attrs: {
-          x: 194,
-          y: 7,
-          width: 1,
-          height: 24,
-          fill: '#E3E6E8',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-line',
-      });
-      /* copyIpBG */
-      group.addShape('rect', {
-        attrs: {
-          x: 195,
-          y: 8,
-          width: 22,
-          height: 22,
-          fill: '#FFF',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-bg',
-      });
-      /* copyIpIcon */
-      group.addShape('image', {
-        attrs: {
-          x: 200,
-          y: 13,
-          height: 12,
-          width: 10,
-          img: 'https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-icon',
-      });
-      /* a transparent rect on the icon area for click listener */
-      group.addShape('rect', {
-        attrs: {
-          x: 195,
-          y: 8,
-          width: 22,
-          height: 22,
-          fill: '#FFF',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-box',
-        tooltip: 'Copy the IP',
-      });
-
-      /* ip end */
-    }
-
     /* name */
     group.addShape('text', {
       attrs: {
@@ -434,7 +315,25 @@ G6.registerNode('card-node', {
       // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
       name: 'bottom-text-shape',
     });
-
+    if (cfg.infoSize > 0) {
+      Object.keys(cfg.info).forEach((key,index) => {
+        console.log(key, cfg.info[key],index);
+        group.addShape('text', {
+          attrs: {
+            text: fittingString(String(cfg.info[key]), 243 - 50, 14),
+            x: 19,
+            y: 65 + (25*index) ,
+            fontSize: 12,
+            textAlign: 'left',
+            textBaseline: 'middle',
+            fill: config.fontColor,
+            cursor: 'pointer',
+          },
+          // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+          name: 'bottom-text-shape',
+        });
+      });
+    }
     if (nodeUrl) {
       group.addShape('text', {
         attrs: {
@@ -482,6 +381,8 @@ export default {
         var elNode = {
           id: node['name'],
           nodeid:node['id'],
+          info:node['info']?node['info']:{},
+          infoSize:node['infoSize']?node['infoSize']:1,
           value:node['labor']?node['labor'] !== node['name']?node['labor']:'-':'-',
           children: [],
           nodeUrl:HASLINKS.includes(node['name'])?'123':null

src/components/mindmap/saler.vue

@@ -264,7 +264,7 @@ G6.registerNode('card-node', {
     const isRoot = cfg.dataType === 'root';
     const nodeUrl = cfg.nodeUrl;
     /* the biggest rect */
-    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64, isRoot);
+    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64 + Number(25*cfg.infoSize) , isRoot);
 
     if (cfg.dataType !== 'root') {
       /* the type text */
@@ -283,125 +283,6 @@ G6.registerNode('card-node', {
       });
     }
 
-    if (cfg.ip) {
-      /* ip start */
-      /* ipBox */
-      const ipRect = group.addShape('rect', {
-        attrs: {
-          fill: nodeUrl ? null : '#FFF',
-          stroke: nodeUrl ? 'rgba(255,255,255,0.65)' : null,
-          radius: 2,
-          cursor: 'pointer',
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-container-shape',
-      });
-
-      /* ip */
-      const ipText = group.addShape('text', {
-        attrs: {
-          text: '666',
-          x: 0,
-          y: 19,
-          fontSize: 12,
-          textAlign: 'left',
-          textBaseline: 'middle',
-          fill: nodeUrl ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.65)',
-          cursor: 'pointer',
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-text-shape',
-      });
-
-      const ipBBox = ipText.getBBox();
-      /* the distance from the IP to the right is 12px */
-      ipText.attr({
-        x: 224 - 12 - ipBBox.width,
-      });
-      /* ipBox */
-      ipRect.attr({
-        x: 224 - 12 - ipBBox.width - 4,
-        y: ipBBox.minY - 5,
-        width: ipBBox.width + 8,
-        height: ipBBox.height + 10,
-      });
-
-      /* a transparent shape on the IP for click listener */
-      group.addShape('rect', {
-        attrs: {
-          stroke: '',
-          cursor: 'pointer',
-          x: 224 - 12 - ipBBox.width - 4,
-          y: ipBBox.minY - 5,
-          width: ipBBox.width + 8,
-          height: ipBBox.height + 10,
-          fill: '#fff',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-box',
-      });
-
-      /* copyIpLine */
-      group.addShape('rect', {
-        attrs: {
-          x: 194,
-          y: 7,
-          width: 1,
-          height: 24,
-          fill: '#E3E6E8',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-line',
-      });
-      /* copyIpBG */
-      group.addShape('rect', {
-        attrs: {
-          x: 195,
-          y: 8,
-          width: 22,
-          height: 22,
-          fill: '#FFF',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-bg',
-      });
-      /* copyIpIcon */
-      group.addShape('image', {
-        attrs: {
-          x: 200,
-          y: 13,
-          height: 12,
-          width: 10,
-          img: 'https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-icon',
-      });
-      /* a transparent rect on the icon area for click listener */
-      group.addShape('rect', {
-        attrs: {
-          x: 195,
-          y: 8,
-          width: 22,
-          height: 22,
-          fill: '#FFF',
-          cursor: 'pointer',
-          opacity: 0,
-        },
-        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
-        name: 'ip-cp-box',
-        tooltip: 'Copy the IP',
-      });
-
-      /* ip end */
-    }
-
     /* name */
     group.addShape('text', {
       attrs: {
@@ -434,7 +315,25 @@ G6.registerNode('card-node', {
       // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
       name: 'bottom-text-shape',
     });
-
+    if (cfg.infoSize > 0) {
+      Object.keys(cfg.info).forEach((key,index) => {
+        console.log(key, cfg.info[key],index);
+        group.addShape('text', {
+          attrs: {
+            text: fittingString(String(cfg.info[key]), 243 - 50, 14),
+            x: 19,
+            y: 65 + (25*index) ,
+            fontSize: 12,
+            textAlign: 'left',
+            textBaseline: 'middle',
+            fill: config.fontColor,
+            cursor: 'pointer',
+          },
+          // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
+          name: 'bottom-text-shape',
+        });
+      });
+    }
     if (nodeUrl) {
       group.addShape('text', {
         attrs: {
@@ -482,7 +381,9 @@ export default {
         var elNode = {
           id: node['name'],
           nodeid:node['id'],
-          value:node['labor'] ? node['labor'] !== node['name'] ? node['labor']:'-':'-',
+          info:node['info']?node['info']:{},
+          infoSize:node['infoSize']?node['infoSize']:1,
+          value:node['labor']?node['labor'] !== node['name']?node['labor']:'-':'-',
           children: [],
           nodeUrl:HASLINKS.includes(node['name'])?'123':null
         }