[cherry-pick][Fix-8050] When the task is forbidden the node will obviously display.

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue

@@ -297,7 +297,7 @@
 
         // Remove all tools when the mouse leaving
         this.graph.on('node:mouseleave', ({ node }) => {
-          node.removeTools()
+          node.removeTool('button')
         })
       },
       /**
@@ -365,6 +365,17 @@
           node.setData({ taskName: name })
         }
       },
+      setNodeForbiddenStatus (id, flag) {
+        id += ''
+        const node = this.graph.getCellById(id)
+        if (node) {
+          if (flag) {
+            node.attr('rect/fill', '#c4c4c4')
+          } else {
+            node.attr('rect/fill', '#ffffff')
+          }
+        }
+      },
       /**
        * Convert the graph to JSON
        * @return {{cells:Cell[]}}
@@ -522,20 +533,22 @@
           console.warn(`taskType:${taskType} is invalid!`)
           return
         }
-        const node = this.genNodeJSON(id, taskType, '', coordinate)
+        const node = this.genNodeJSON(id, taskType, '', false, coordinate)
         this.graph.addNode(node)
       },
       /**
        * generate node json
        * @param {number|string} id
        * @param {string} taskType
+       * @param {boolean} forbidden flag
        * @param {{x:number;y:number}} coordinate Default is { x: 100, y: 100 }
        */
-      genNodeJSON (id, taskType, taskName, coordinate = { x: 100, y: 100 }) {
+      genNodeJSON (id, taskType, taskName, flag, coordinate = { x: 100, y: 100 }) {
         id += ''
         const url = require(`../images/task-icos/${taskType.toLocaleLowerCase()}.png`)
         const truncation = taskName ? this.truncateText(taskName, 18) : id
-        return {
+
+        const nodeJson = {
           id: id,
           shape: X6_NODE_NAME,
           x: coordinate.x,
@@ -554,6 +567,12 @@
             }
           }
         }
+
+        if (flag) {
+          nodeJson.attrs.rect = { fill: '#c4c4c4' }
+        }
+
+        return nodeJson
       },
       /**
        * generate edge json

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@@ -268,6 +268,7 @@
       addTaskInfo ({ item }) {
         this.addTask(item)
         this.$refs.canvas.setNodeName(item.code, item.name)
+        this.$refs.canvas.setNodeForbiddenStatus(item.code, item.flag === 'NO')
         this.taskDrawer = false
       },
       closeTaskDrawer ({ flag }) {
@@ -411,6 +412,7 @@
             task.code,
             task.taskType,
             task.name,
+            task.flag === 'NO',
             {
               x: location.x,
               y: location.y
@@ -418,6 +420,7 @@
           )
           nodes.push(node)
         })
+
         connects
           .filter((r) => !!r.preTaskCode)
           .forEach((c) => {