From c1f5c471ced82967700ea3f60c3a1ea2982030c4 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 15 Aug 2022 14:30:49 +0800
Subject: [PATCH] add text

---
 src/store/data.ts                               |  1 +
 src/views/dashboard/configuration/TimeRange.vue | 10 ++++++++++
 src/views/dashboard/controls/TimeRange.vue      | 17 ++++++++++-------
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/store/data.ts b/src/store/data.ts
index 20887d1b..ce31dd2c 100644
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -35,4 +35,5 @@ export const TimeRangeConfig = {
   backgroundColor: "white",
   fontSize: 14,
   textAlign: "center",
+  text: "text",
 };
diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue
index 7dc029eb..b1e29421 100644
--- a/src/views/dashboard/configuration/TimeRange.vue
+++ b/src/views/dashboard/configuration/TimeRange.vue
@@ -11,6 +11,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
+  <div class="item">
+    <span class="label">{{ t("content") }}</span>
+    <el-input
+      class="input"
+      v-model="text"
+      size="small"
+      @change="changeConfig({ text })"
+    />
+  </div>
   <div class="item">
     <span class="label">{{ t("textAlign") }}</span>
     <Selector
@@ -79,6 +88,7 @@ const backgroundColor = ref(graph.backgroundColor || "green");
 const fontColor = ref(graph.fontColor || "white");
 const fontSize = ref<number>(graph.fontSize || 12);
 const textAlign = ref(graph.textAlign || "left");
+const text = ref<string>(graph.text || "");
 const Colors = [
   {
     label: "Green",
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index aedcdf4b..cf6516b4 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -39,22 +39,25 @@ limitations under the License. -->
       :style="{
         backgroundColor: TextColors[graph.backgroundColor],
         justifyContent: graph.textAlign,
+        color: TextColors[graph.fontColor],
       }"
     >
-      <Icon
-        iconName="time_range"
-        size="lg"
-        :style="{ color: TextColors[graph.fontColor] }"
-      />
+      <Icon iconName="time_range" size="lg" />
       <span
-        class="ml-10"
+        class="ml-5"
         :style="{
-          color: TextColors[graph.fontColor],
           fontSize: graph.fontSize + 'px',
         }"
       >
         {{ content }}
       </span>
+      <span
+        class="ml-5"
+        :style="{
+          fontSize: graph.fontSize + 'px',
+        }"
+        >{{ graph.text }}</span
+      >
     </div>
   </div>
 </template>