From e190ef9d0dee03e1a915062f7787489e5040e13f Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Mon, 18 Apr 2022 14:33:45 +0800
Subject: [PATCH] [Fix][UI Next][V1.0.0-Beta] Fix the color matching problem of
 the relationship diagram. (#9546)

---
 .../workflow/relation/components/Graph.tsx    |  47 ++++--
 .../security/alarm-instance-manage/detail.tsx | 156 +++++++++---------
 2 files changed, 112 insertions(+), 91 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
index 40f1079045..64e150c568 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/relation/components/Graph.tsx
@@ -47,9 +47,9 @@ const GraphChart = defineComponent({
     const { t } = useI18n()
 
     const legendData = [
-      { name: t('project.workflow.online') },
-      { name: t('project.workflow.workflow_offline') },
-      { name: t('project.workflow.schedule_offline') }
+      { color: '#2D8DF0', name: t('project.workflow.online') },
+      { color: '#f37373', name: t('project.workflow.workflow_offline') },
+      { color: '#ba3e3e', name: t('project.workflow.schedule_offline') }
     ]
 
     const getCategory = (schedulerStatus: number, workflowStatus: number) => {
@@ -100,11 +100,16 @@ const GraphChart = defineComponent({
           `
         }
       },
-      legend: [
-        {
-          data: legendData?.map((item) => item.name)
-        }
-      ],
+      legend: {
+        data: legendData?.map((item) => {
+          return {
+            name: item.name,
+            itemStyle: {
+              color: item.color
+            }
+          }
+        })
+      },
       series: [
         {
           type: 'graph',
@@ -132,13 +137,26 @@ const GraphChart = defineComponent({
             }
           },
           data: props.seriesData.map((item) => {
+            const category = getCategory(
+              Number(item.schedulePublishStatus),
+              Number(item.workFlowPublishStatus)
+            )
+            const itemStyle = {
+              color: ''
+            }
+
+            if (category === 1) {
+              itemStyle.color = '#f37373'
+            } else if (category === 2) {
+              itemStyle.color = '#ba3e3e'
+            } else if (category === 0) {
+              itemStyle.color = '#2D8DF0'
+            }
+
             return {
               name: item.name,
               id: item.id,
-              category: getCategory(
-                Number(item.schedulePublishStatus),
-                Number(item.workFlowPublishStatus)
-              ),
+              category,
               workFlowPublishStatus:
                 Number(item.workFlowPublishStatus) === 0
                   ? t('project.workflow.offline')
@@ -151,7 +169,10 @@ const GraphChart = defineComponent({
               scheduleStartTime: item.scheduleStartTime
                 ? item.scheduleStartTime
                 : '-',
-              scheduleEndTime: item.scheduleEndTime ? item.scheduleEndTime : '-'
+              scheduleEndTime: item.scheduleEndTime
+                ? item.scheduleEndTime
+                : '-',
+              itemStyle
             }
           }),
           categories: legendData
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx
index 0b723d160b..30ec47b4fc 100644
--- a/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx
@@ -81,26 +81,26 @@ const DetailModal = defineComponent({
     const onChangePlugin = changePlugin
 
     watch(
-        () => props.show,
-        async () => {
-          props.show && props.currentRecord && setDetail(props.currentRecord)
-        }
+      () => props.show,
+      async () => {
+        props.show && props.currentRecord && setDetail(props.currentRecord)
+      }
     )
     watch(
-        () => state.json,
-        () => {
-          if (!state.json?.length) return
-          state.json.forEach((item) => {
-            const mergedItem = isFunction(item) ? item() : item
-            mergedItem.name = t(
-                'security.alarm_instance' + '.' + mergedItem.field
-            )
-          })
-          const { rules: fieldsRules, elements: fieldsElements } =
-              getElementByJson(state.json, state.detailForm)
-          rules.value = fieldsRules
-          elements.value = fieldsElements
-        }
+      () => state.json,
+      () => {
+        if (!state.json?.length) return
+        state.json.forEach((item) => {
+          const mergedItem = isFunction(item) ? item() : item
+          mergedItem.name = t(
+            'security.alarm_instance' + '.' + mergedItem.field
+          )
+        })
+        const { rules: fieldsRules, elements: fieldsElements } =
+          getElementByJson(state.json, state.detailForm)
+        rules.value = fieldsRules
+        elements.value = fieldsElements
+      }
     )
 
     onMounted(() => {
@@ -137,66 +137,66 @@ const DetailModal = defineComponent({
     } = this
     const { currentRecord } = props
     return (
-        <Modal
-            show={show}
-            title={t(
-                currentRecord?.id
-                    ? 'security.alarm_instance.edit_alarm_instance'
-                    : 'security.alarm_instance.create_alarm_instance'
-            )}
-            onConfirm={onSubmit}
-            confirmLoading={saving || loading}
-            onCancel={onCancel}
-        >
-          {{
-            default: () => (
-                <Form
-                    ref='detailFormRef'
-                    loading={loading || pluginsLoading}
-                    meta={{
-                      ...meta,
-                      rules: {
-                        ...meta.rules,
-                        ...rules
-                      },
-                      elements: [
-                        {
-                          path: 'instanceName',
-                          label: t('security.alarm_instance.alarm_instance_name'),
-                          widget: (
-                              <NInput
-                                  v-model={[detailForm.instanceName, 'value']}
-                                  placeholder={t(
-                                      'security.alarm_instance.alarm_instance_name_tips'
-                                  )}
-                              />
-                          )
-                        },
-                        {
-                          path: 'pluginDefineId',
-                          label: t('security.alarm_instance.select_plugin'),
-                          widget: (
-                              <NSelect
-                                  v-model={[detailForm.pluginDefineId, 'value']}
-                                  options={uiPlugins}
-                                  disabled={!!currentRecord?.id}
-                                  placeholder={t(
-                                      'security.alarm_instance.select_plugin_tips'
-                                  )}
-                                  on-update:value={onChangePlugin}
-                              />
-                          )
-                        },
-                        ...elements
-                      ]
-                    }}
-                    layout={{
-                      cols: 24
-                    }}
-                />
-            )
-          }}
-        </Modal>
+      <Modal
+        show={show}
+        title={t(
+          currentRecord?.id
+            ? 'security.alarm_instance.edit_alarm_instance'
+            : 'security.alarm_instance.create_alarm_instance'
+        )}
+        onConfirm={onSubmit}
+        confirmLoading={saving || loading}
+        onCancel={onCancel}
+      >
+        {{
+          default: () => (
+            <Form
+              ref='detailFormRef'
+              loading={loading || pluginsLoading}
+              meta={{
+                ...meta,
+                rules: {
+                  ...meta.rules,
+                  ...rules
+                },
+                elements: [
+                  {
+                    path: 'instanceName',
+                    label: t('security.alarm_instance.alarm_instance_name'),
+                    widget: (
+                      <NInput
+                        v-model={[detailForm.instanceName, 'value']}
+                        placeholder={t(
+                          'security.alarm_instance.alarm_instance_name_tips'
+                        )}
+                      />
+                    )
+                  },
+                  {
+                    path: 'pluginDefineId',
+                    label: t('security.alarm_instance.select_plugin'),
+                    widget: (
+                      <NSelect
+                        v-model={[detailForm.pluginDefineId, 'value']}
+                        options={uiPlugins}
+                        disabled={!!currentRecord?.id}
+                        placeholder={t(
+                          'security.alarm_instance.select_plugin_tips'
+                        )}
+                        on-update:value={onChangePlugin}
+                      />
+                    )
+                  },
+                  ...elements
+                ]
+              }}
+              layout={{
+                cols: 24
+              }}
+            />
+          )
+        }}
+      </Modal>
     )
   }
 })