From 3c79e45f4a4db8f866e4b04faa05567e9100d650 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Sat, 19 Feb 2022 20:33:16 +0800
Subject: [PATCH] fix: update settings

---
 src/store/data.ts                             |  4 ++--
 .../dashboard/configuration/Topology.vue      |  2 +-
 .../{Topology.vue => TopologyItem.vue}        | 20 +++++++++----------
 src/views/dashboard/controls/Topology.vue     | 16 +++++++++++----
 src/views/dashboard/controls/Widget.vue       | 14 +++++++------
 5 files changed, 33 insertions(+), 23 deletions(-)
 rename src/views/dashboard/configuration/graph-styles/{Topology.vue => TopologyItem.vue} (86%)

diff --git a/src/store/data.ts b/src/store/data.ts
index d0b37e53..7230fb11 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -105,7 +105,7 @@ export const ConfigData3: any = [
   {
     x: 0,
     y: 0,
-    w: 2,
+    w: 4,
     h: 6,
     i: "1",
     type: "Topology",
@@ -122,7 +122,7 @@ export const ConfigData3: any = [
     },
   },
   {
-    x: 2,
+    x: 4,
     y: 0,
     w: 8,
     h: 12,
diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
index 80062e64..5cb5ead9 100644
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@@ -27,7 +27,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import WidgetOptions from "./WidgetOptions.vue";
-import TopologyOptions from "./graph-styles/Topology.vue";
+import TopologyOptions from "./graph-styles/TopologyItem.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
diff --git a/src/views/dashboard/configuration/graph-styles/Topology.vue b/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
similarity index 86%
rename from src/views/dashboard/configuration/graph-styles/Topology.vue
rename to src/views/dashboard/configuration/graph-styles/TopologyItem.vue
index 7f703c72..f22fec9e 100644
--- a/src/views/dashboard/configuration/graph-styles/Topology.vue
+++ b/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
@@ -21,7 +21,7 @@ limitations under the License. -->
       size="small"
       placeholder="Select a color"
       class="input"
-      @change="changeConfig({ backgroundColor })"
+      @change="changeConfig({ backgroundColor: $event[0].value })"
     />
   </div>
   <div class="item">
@@ -45,7 +45,7 @@ limitations under the License. -->
       size="small"
       placeholder="Select a color"
       class="input"
-      @change="changeConfig({ fontColor })"
+      @change="changeConfig({ fontColor: $event[0].value })"
     />
   </div>
   <div class="item">
@@ -78,23 +78,23 @@ const { selectedGrid } = dashboardStore;
 const iconTheme = ref(selectedGrid.graph.iconTheme || true);
 const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
 const fontColor = ref(selectedGrid.graph.fontColor || "white");
-const content = ref<string>("");
+const content = ref<string>(selectedGrid.graph.content);
 const fontSize = ref<number>(selectedGrid.graph.fontSize);
 const colors = [
   {
     label: "Green",
-    key: "#67C23A",
     value: "green",
   },
-  { label: "Blue", key: "#409EFF", value: "blue" },
-  { label: "Red", key: "#F56C6C", value: "red" },
-  { label: "Grey", key: "#909399", value: "grey" },
-  { label: "White", key: "#fff", value: "white" },
-  { label: "Black", key: "#000", value: "black" },
-  { label: "Orange", key: "#E6A23C", value: "orange" },
+  { label: "Blue", value: "blue" },
+  { label: "Red", value: "red" },
+  { label: "Grey", value: "grey" },
+  { label: "White", value: "white" },
+  { label: "Black", value: "black" },
+  { label: "Orange", value: "orange" },
 ];
 
 function changeConfig(param: { [key: string]: unknown }) {
+  const { selectedGrid } = dashboardStore;
   const graph = {
     ...selectedGrid.graph,
     ...param,
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index dd662446..4ee116b0 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -15,10 +15,17 @@ limitations under the License. -->
 <template>
   <div class="topology">
     <div class="header flex-h">
-      <div>title</div>
+      <div>{{ data.widget?.title || "" }}</div>
       <div>
-        <el-tooltip :content="'tips'">
-          <Icon iconName="info_outline" size="sm" class="operation" />
+        <el-tooltip :content="data.widget?.tips">
+          <span>
+            <Icon
+              iconName="info_outline"
+              size="sm"
+              class="operation"
+              v-show="data.widget?.tips"
+            />
+          </span>
         </el-tooltip>
         <el-popover placement="bottom" trigger="click" :width="100">
           <template #reference>
@@ -38,7 +45,7 @@ limitations under the License. -->
     <div
       class="body"
       @click="ViewTopology"
-      :style="`background: ${Colors[data.graph.backgroundColor]}`"
+      :style="{ backgroundColor: Colors[data.graph.backgroundColor] }"
     >
       <Icon
         :iconName="data.graph.iconTheme ? 'topology-light' : 'topology-dark'"
@@ -70,6 +77,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
+console.log(Colors[props.data.graph.backgroundColor]);
 function editConfig() {
   dashboardStore.setConfigPanel(true);
   dashboardStore.selectWidget(props.data);
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 919586b1..74ca377c 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -18,12 +18,14 @@ limitations under the License. -->
       <div>{{ data.widget?.title || "" }}</div>
       <div>
         <el-tooltip :content="data.widget?.tips">
-          <Icon
-            iconName="info_outline"
-            size="sm"
-            class="operation"
-            v-show="data.widget?.tips"
-          />
+          <span>
+            <Icon
+              iconName="info_outline"
+              size="sm"
+              class="operation"
+              v-show="data.widget?.tips"
+            />
+          </span>
         </el-tooltip>
         <el-popover placement="bottom" trigger="click" :width="100">
           <template #reference>