Tree chart and Gantt chart style modification (#1078)

* Dependency workflow add dependency correction value

* Download workflow instance map width adjustment and change "desc" field to "description"

* The third-party library that builds the dependency is recommended to be placed in 'devDependencies'

* Tree chart and Gantt chart style modification

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/_source/util.js

@@ -22,7 +22,7 @@ import { tasksState } from '@/conf/home/pages/dag/_source/config'
  * Node prompt dom
  */
 const rtInstancesTooltip = (data) => {
-  let str = `<div style="text-align: left;">`
+  let str = `<div style="text-align: left;word-break:break-all">`
   str += `id : ${data.id}</br>`
   str += `host : ${data.host}</br>`
   str += `name : ${data.name}</br>`
@@ -30,8 +30,8 @@ const rtInstancesTooltip = (data) => {
   if (data.type) {
     str += `type : ${data.type}</br>`
   }
-  str += `startTime : ${data.startTime ? formatDate(data.startTime) : 'null'}</br>`
-  str += `endTime : ${data.endTime ? formatDate(data.endTime) : 'null'}</br>`
+  str += `startTime : ${data.startTime ? formatDate(data.startTime) : '-'}</br>`
+  str += `endTime : ${data.endTime ? formatDate(data.endTime) : '-'}</br>`
   str += `duration : ${data.duration}</br>`
   str += `</div>`
   return str

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/_source/gantt.js

@@ -166,15 +166,12 @@ Gantt.prototype.drawChart = function () {
  * tip提示
  */
 Gantt.prototype.tip = function (d) {
-  let str = ''
-  str += `<div class="d3-toottip">`
-  str += `<ul>`
-  str += `<li><span class="sp1">taskName :</span><span>${d.taskName}</span></li>`
-  str += `<li><span class="sp1">status :</span><span>${tasksState[d.status].desc} (${d.status})</span></li>`
-  str += `<li><span class="sp1">startTime :</span><span>${formatDate(d.isoStart)}</span></li>`
-  str += `<li><span class="sp1">endTime :</span><span>${formatDate(d.isoEnd)}</span></li>`
-  str += `<li><span class="sp1">duration :</span><span>${d.duration}</span></li>`
-  str += `</ul>`
+  let str = `<div style="text-align: left;word-break:break-all">`
+  str += `taskName : ${d.taskName}</br>`
+  str += `status : ${tasksState[d.status].desc} (${d.status})</br>`
+  str += `startTime : ${formatDate(d.isoStart)}</br>`
+  str += `endTime : ${formatDate(d.isoEnd)}</br>`
+  str += `duration : ${d.duration}</br>`
   str += `</div>`
   return str
 }