更改应急文件一览图

src/views/energyOperationSupport/components/securitys/pic1.vue

@@ -180,7 +180,7 @@
           },
           option: {
             title: {
-              text: '典型事故应急"四步"管控体系'
+              text: '集团应急管理体系'
             },
             tooltip: {
               trigger: 'item',
@@ -302,7 +302,7 @@
           },
           layout: {
             type: 'mindmap',
-            direction: 'H',
+            direction: 'TB',
             getHeight: function getHeight() {
               return 16;
             },
@@ -313,7 +313,7 @@
               return 20;
             },
             getHGap: function getHGap() {
-              return 120;
+              return 130;
             },
           },
           modes: {
@@ -333,14 +333,14 @@
           },
           // plugins: [menu],
           fitView: true,
-          fitViewPadding: 80,
+          fitViewPadding: [140,40,20,40],
         });
         // graph.data(vm.chart.option.series[0].data[0]);
         // gragh.render();
         graph.read({
           ...vm.chart.option.series[0].data[0]
         });
-        graph.fitView(80);
+        graph.fitView([140,40,20,40]);
         this.graph = graph;
         this.bindEvents();
       },
@@ -376,7 +376,7 @@
             model.collapsed = !model.collapsed;
             this.graph.updateItem(e.item, model);
             this.graph.layout();
-            this.graph.fitView(80);;
+            this.graph.fitView([140,40,20,40]);
           } else {
             if (model.value) {
               let args = {
@@ -398,7 +398,7 @@
               // 查找所有的节点路径
               this.getParentNodes(this.chart.option.series[0].data[0], model.id);
               this.graph.changeData(JSON.parse(JSON.stringify(model)));
-              this.graph.fitView(80);
+              this.graph.fitView([140,40,20,40]);
             }
           }
           e.item.toFront();
@@ -468,7 +468,7 @@
           // this.chart.option.title.text = node.label;
         }
         this.graph.changeData(JSON.parse(JSON.stringify(node)));
-        this.graph.fitView(80);;
+        this.graph.fitView([140,40,20,40]);
       },
       getFileTreeData() {
         let that = this,
@@ -488,10 +488,8 @@
               // that.chart.height = res.data.length * 100 + 'px';
               arr = that.treeDataUtil(res.data, '');
               // arr = that.getParentNodes(res.data, 1)
-              arr[0].labelCfg = {
-                style: {
-                  fontSize: 30,
-                },
+              arr[0].style = {
+                fill: '#f79646'
               };
               arr[0].id = '1';
               arr[0].collapsed = false,
@@ -516,6 +514,27 @@
         let j = 0;
         let g = 0;
         let name = '';
+        let style = {};
+        let labelCfg = {};
+        switch (id.toString().split("-").length) {
+          case 1:
+          style = {
+            fill: '#e6b9b8',
+          };
+          break;
+          case 2:
+          style = {
+            fill: '#ffff66',
+          };
+          break;
+          case 3:
+          style = {
+            fill: '#d9d9d9',
+          };
+          break;
+          default:
+          break;
+        };
         for (let item of treeData) {
           i++;
           if (item.fileName === null) {
@@ -533,6 +552,8 @@
               nodeType: 'node',
               label: item.createMan,
               children: children,
+              style: style,
+              labelCfg: labelCfg,
             });
             children = [];
           } else {
@@ -550,6 +571,8 @@
                 isCollapsed: true,
                 label: name,
                 children: children1,
+                style: style,
+                labelCfg: labelCfg,
               });
               j = 0;
               children1 = [];
@@ -575,6 +598,8 @@
               isCollapsed: true,
               label: name,
               children: children1,
+              style: style,
+              labelCfg: labelCfg,
             });
           }
         }
@@ -730,7 +755,7 @@
 
 <style lang="scss">
   .root {
-    background: linear-gradient(rgba(0,0,0,0), rgba(173, 173, 173, 0.6)), url(../../../../assets/img/img/filebg7.png) center bottom no-repeat;
+    background: url(../../../../assets/img/img/filebg8.jpg) center bottom no-repeat;
     background-size: 100% 100%;
   }
 
@@ -780,13 +805,15 @@
   }
 
   .text-nav {
+    background-color: #ffff00;
     position: absolute;
     top: 40px;
-    left: 28%;
+    left: 32%;
     font-size: 60px;
     font-weight: 600;
     // background: #73bf8f;
     // border-radius: 4px;
-    color: #000000;
+    color: #ff0000;
+    padding: 36px 50px;
   }
 </style>

src/views/energyOperationSupport/components/securitys/register-node.js

@@ -23,7 +23,16 @@ export default G6 => {
       let fontSize = 14;
       let textAlign = 'left'
       let content = cfg.label;
+      let textFill = '#000000'
+      switch (cfg.id.toString().split("-").length-1) {
+        case 2:
+          textFill = '#ff0000';
+        break;
+        default:
+        break;
+      };
       if (cfg.id === '1'){
+        textFill = '#ffffff'
         fontSize = 22;
         textAlign = 'start';
         content = cfg.label.replace(/(.{10})/g, '$1\n');
@@ -34,7 +43,7 @@ export default G6 => {
       const text = group.addShape('text', {
         attrs: {
           fontSize: fontSize,
-          fill: '#000000',
+          fill: textFill,
           textAlign: textAlign,
           textBaseline: 'middle',
           text: content,
@@ -56,12 +65,21 @@ export default G6 => {
         y: 0
       })
       if (hasChildren) {
+        let markerFill = '#181818';
         let r = 6;
         let line = 1;
         if (cfg.id === '1'){
           r = 8;
           line = 2;
+          markerFill = '#ffffff';
         }
+        switch (cfg.id.toString().split("-").length-1) {
+          case 2:
+            markerFill = '#ff0000';
+          break;
+          default:
+          break;
+        };
         const circleX = !isNodeStyle && style.width > size[0] ? (-style.width / 2 + size[0] + 22) : (attrs.width /
           2 + 11);
         group.addShape('marker', {
@@ -70,7 +88,7 @@ export default G6 => {
             y: 0,
             r: r,
             symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
-            stroke: '#181818',
+            stroke: markerFill,
             lineWidth: line,
           },
           name: 'node-icon-text',