From e19e03d413e787c159b73702dabe87096a18de5d Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Fri, 25 Mar 2022 14:32:51 +0800
Subject: [PATCH] update text

---
 src/views/dashboard/configuration/Text.vue | 40 ++++++++++++++++++----
 src/views/dashboard/controls/Text.vue      | 14 +++++---
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue
index 5733fb1d..268be91a 100644
--- a/src/views/dashboard/configuration/Text.vue
+++ b/src/views/dashboard/configuration/Text.vue
@@ -64,6 +64,14 @@ limitations under the License. -->
       @change="changeConfig({ fontColor: $event[0].value })"
     />
   </div>
+  <div class="footer">
+    <el-button size="small" @click="cancelConfig">
+      {{ t("cancel") }}
+    </el-button>
+    <el-button size="small" type="primary" @click="applyConfig">
+      {{ t("apply") }}
+    </el-button>
+  </div>
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
@@ -71,12 +79,12 @@ import { ref } from "vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const url = ref(selectedGrid.graph.url || "");
-const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
-const fontColor = ref(selectedGrid.graph.fontColor || "white");
-const content = ref<string>(selectedGrid.graph.content || "");
-const fontSize = ref<number>(selectedGrid.graph.fontSize || 12);
+const originConfig = dashboardStore.selectedGrid;
+const url = ref(originConfig.graph.url || "");
+const backgroundColor = ref(originConfig.graph.backgroundColor || "green");
+const fontColor = ref(originConfig.graph.fontColor || "white");
+const content = ref<string>(originConfig.graph.content || "");
+const fontSize = ref<number>(originConfig.graph.fontSize || 12);
 const Colors = [
   {
     label: "Green",
@@ -97,6 +105,15 @@ function changeConfig(param: { [key: string]: unknown }) {
   };
   dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
+function applyConfig() {
+  dashboardStore.setConfigPanel(false);
+  dashboardStore.setConfigs(dashboardStore.selectedGrid);
+}
+
+function cancelConfig() {
+  dashboardStore.selectWidget(originConfig);
+  dashboardStore.setConfigPanel(false);
+}
 </script>
 <style lang="scss" scoped>
 .slider {
@@ -118,4 +135,15 @@ function changeConfig(param: { [key: string]: unknown }) {
 .item {
   margin-bottom: 10px;
 }
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  border-top: 1px solid #eee;
+  padding: 10px;
+  text-align: right;
+  width: 100%;
+  background-color: #fff;
+}
 </style>
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index e0f78a3e..60f77ede 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -36,7 +36,6 @@ limitations under the License. -->
     </div>
     <div
       class="body"
-      @click="ViewText"
       :style="{ backgroundColor: TextColors[data.graph.backgroundColor] }"
     >
       <div
@@ -45,9 +44,9 @@ limitations under the License. -->
           fontSize: data.graph.fontSize + 'px',
         }"
       >
-        <router-link :to="data.graph.textUrl || ''">
+        <a :href="data.graph.url" target="_blank">
           {{ data.graph.content }}
-        </router-link>
+        </a>
       </div>
     </div>
   </div>
@@ -76,8 +75,13 @@ function editConfig() {
   dashboardStore.setConfigPanel(true);
   dashboardStore.selectWidget(props.data);
 }
-function ViewText() {
-  dashboardStore.setTopology(true);
+function viewText() {
+  const path = props.data.graph.url;
+  console.log(path);
+  if (!path) {
+    return;
+  }
+  window.open(path, "_blank");
 }
 </script>
 <style lang="scss" scoped>